.proj.wooma-card{
  grid-column:1/-1;
  min-width:0;
  cursor:default;
  border-color:var(--brand)}

.wooma-card .proj-body{
  padding:28px}
.wooma-card h4{
  font-size:clamp(23px,3vw,32px);
  line-height:1.2;
  margin:12px 0}
.wooma-eyebrow{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  color:var(--muted);
  font-weight:700}
.wooma-card .proj-desc{
  font-size:17px;
  max-width:70ch;
  line-height:1.6}
.wooma-summary{
  color:var(--muted);
  max-width:80ch;
  line-height:1.7;
  margin:16px 0}

.wooma-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin:26px 0}
.wooma-metric{
  border-left:2px solid var(--brand);
  padding-left:16px}
.wooma-metric strong{
  display:block;
  color:var(--text);
  font-size:clamp(26px,4vw,38px);
  letter-spacing:-.04em;
  line-height:1.2}
.wooma-metric span{
  display:block;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
  margin-top:6px}
.wooma-link{
  display:inline-flex;
  gap:24px;
  color:var(--text);
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid var(--brand);
  padding:10px 0}
.wooma-link:hover{
  color:var(--brand)}
.wooma-card .proj-tags{
  padding:16px 28px}

.wooma-page{
  --bg:#0b1220;
  --panel:#101b2e;
  --text:#eaf0ff;
  --muted:#adb9d1;
  --line:#2a3850;
  --brand:#85b6ff;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  margin:0;
  line-height:1.75}
html[data-theme=light] .wooma-page{
  --bg:#f7f8fb;
  --panel:#fff;
  --text:#142136;
  --muted:#4a5b72;
  --line:#d4dce7;
  --brand:#215bad}
.wooma-page *{
  box-sizing:border-box}
.wooma-page a{
  color:var(--brand);
  text-underline-offset:5px}
.case-wrap{
  max-width:1120px;
  padding:0 28px;
  margin:auto}
.case-header{
  border-bottom:1px solid var(--line)}
.case-header nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:20px 0}
.wooma-page button{
  font:inherit;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel);
  padding:8px 14px;
  cursor:pointer}
.wooma-page :focus-visible,.wooma-card :focus-visible{
  outline:3px solid var(--brand);
  outline-offset:5px}
.skip{
  position:absolute;
  left:16px;
  top:-100px;
  background:var(--panel);
  padding:12px;
  z-index:10}
.skip:focus{
  top:8px}
.case-hero{
  padding:72px 0 44px}
.wooma-page h1,.wooma-page h2,.wooma-page h3{
  line-height:1.2;
  letter-spacing:-.035em;
  color:var(--text)}
.wooma-page h1{
  font-size:clamp(36px,6vw,66px);
  max-width:19ch;
  margin:18px 0 24px}
.lead{
  font-size:clamp(18px,2.5vw,22px);
  max-width:66ch;
  color:var(--muted)}
.wooma-page p,.wooma-page li{
  max-width:76ch}
.muted{
  color:var(--muted)}
.case-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  border-block:1px solid var(--line);
  padding:18px 0;
  font-size:14px}
.wooma-page section{
  padding:48px 0;
  border-bottom:1px solid var(--line);
  scroll-margin-top:24px}
.wooma-page h2{
  font-size:clamp(25px,4vw,36px);
  margin:0 0 22px}
.wooma-page h3{
  font-size:19px;
  margin:0 0 12px}
.section-no{
  font-size:12px;
  letter-spacing:.14em;
  color:var(--brand);
  display:block;
  margin-bottom:12px}
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px}
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:26px;
  min-width:0}
.panel p:last-child{
  margin-bottom:0}
.callout{
  border-left:3px solid var(--brand);
  background:var(--panel);
  padding:18px 24px;
  margin:24px 0;
  color:var(--muted)}
.architecture{
  margin:28px 0}
.flow-chain{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px}
.flow-chain li,.flow-step{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  padding:18px;
  position:relative;
  font-size:14px;
  line-height:1.5}
.flow-chain li:not(:last-child)::after{
  content:'→';
  position:absolute;
  right:-17px;
  top:40%;
  color:var(--brand)}
.flow-step small,.flow-chain small{
  display:block;
  color:var(--muted);
  margin-top:6px;
  font-size:12px}
.branches{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--brand)}
.branch{
  display:flex;
  flex-direction:column;
  gap:14px}
.branch-label{
  color:var(--brand);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em}
.flow-step+.flow-step::before{
  content:'↓';
  display:block;
  color:var(--brand);
  position:absolute;
  top:-19px;
  left:50%}
.gate{
  border-color:var(--brand)}
.architecture figcaption{
  color:var(--muted);
  font-size:13px;
  margin-top:18px}
.infra{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:20px 0}
.infra span{
  border:1px solid var(--line);
  border-radius:8px;
  padding:6px 12px;
  font-size:12px;
  color:var(--muted)}
.lifecycle{
  counter-reset:stage;
  list-style:none;
  padding:0}
.lifecycle li{
  counter-increment:stage;
  position:relative;
  padding:0 0 22px 44px;
  margin:0;
  max-width:82ch}
.lifecycle li::before{
  content:counter(stage,decimal-leading-zero);
  position:absolute;
  left:0;
  color:var(--brand);
  font-size:13px;
  font-weight:700;
  top:3px}
.lifecycle strong{
  display:block;
  color:var(--text)}
.lifecycle span{
  color:var(--muted)}
.wooma-page details{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:16px;
  padding:24px}
.wooma-page summary{
  cursor:pointer;
  font-size:20px;
  font-weight:700;
  line-height:1.5}
.deep-content{
  padding-top:28px}
.deep-content article+article{
  margin-top:30px;
  padding-top:26px;
  border-top:1px solid var(--line)}
.state-flow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size:13px;
  margin:16px 0}
.state-flow span{
  border:1px solid var(--line);
  padding:7px 10px;
  border-radius:6px}
.wooma-page footer{
  padding:36px 0 48px}

@media(max-width:640px){
  .wooma-metrics{
  grid-template-columns:1fr;
  gap:20px}
.wooma-card .proj-body{
  padding:20px}
.wooma-card .proj-tags{
  padding:16px 20px}
.case-wrap{
  padding:0 20px}
.case-hero{
  padding:40px 0 28px}
.two-col,.branches,.flow-chain{
  grid-template-columns:1fr}
.flow-chain{
  gap:22px}
.flow-chain li:not(:last-child)::after{
  content:'↓';
  right:auto;
  top:auto;
  bottom:-23px;
  left:50%}
.wooma-page section{
  padding:36px 0}
.panel,.wooma-page details{
  padding:20px}
.case-header nav{
  align-items:flex-start}
.wooma-page button{
  font-size:13px}
.branches{
  gap:30px}
}

@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto!important}
.wooma-card,.wooma-card *,.wooma-page *{
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important}
}

/* Additional verified tenant statistic, using the existing metric component. */
.wooma-scale { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:800px) { .wooma-scale { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) { .wooma-scale { grid-template-columns:1fr; } }