/* DLVX case system v2. Shared by the shell and every case fragment.
   Tokens and components are LOCKED, see STYLE-SYSTEM.md. No em dashes. */

@font-face{font-family:"MD Nichrome";src:url("../fonts/MDNichrome-Regular.woff2") format("woff2"),url("../fonts/MDNichrome-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"MD Nichrome";src:url("../fonts/MDNichrome-Bold.woff2") format("woff2"),url("../fonts/MDNichrome-Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"MD Nichrome";src:url("../fonts/MDNichrome-Black.woff2") format("woff2"),url("../fonts/MDNichrome-Black.woff") format("woff");font-weight:900;font-display:swap}
@font-face{font-family:"Caveat";src:url("../fonts/Caveat-Var.woff2") format("woff2");font-weight:400 700;font-display:swap}

:root{
  --page:#FFFFFF;
  --box:#FDF9EE;
  --blue:#3769C5;
  --blue-muted:#496CAB;
  --blue-dim:rgba(55,105,197,.36);
  --blue-soft:rgba(55,105,197,.08);
  --pad:1.6%;
  --r:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --glass-bg:rgba(253,249,238,.55);
  --glass-line:rgba(55,105,197,.3);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--page);
  font-family:"MD Nichrome",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--blue);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  height:100vh;height:100dvh;
  overflow:hidden;
  padding:var(--pad);
}

/* ---------- frame + top bar (rendered by the shell) ---------- */
.box{
  position:relative;height:100%;width:100%;
  background:var(--box);
  border-radius:var(--r);
  overflow:hidden;
  display:flex;flex-direction:column;
  padding:clamp(16px,2vw,30px);
}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;position:relative;z-index:5}
.brand{
  font-size:clamp(15px,1.3vw,20px);font-weight:900;letter-spacing:-.008em;
  color:var(--blue);text-decoration:none;line-height:1;
}
.bysm{
  font-size:clamp(8px,.66vw,10px);font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue);text-decoration:none;
  opacity:.5;margin-left:8px;vertical-align:2px;
  transition:opacity .24s var(--ease);
}
.bysm:hover{opacity:1}
.topnav{display:flex;align-items:center;gap:clamp(10px,1vw,18px)}
.navlink{
  font-family:inherit;font-size:clamp(9.5px,.8vw,12px);font-weight:900;
  letter-spacing:.03em;text-transform:uppercase;
  color:var(--blue);text-decoration:none;cursor:pointer;
  background:none;border:none;padding:6px 2px;
  color:var(--blue-muted);transition:color .24s var(--ease);
}
.navlink:hover{color:var(--blue)}
.counter{
  font-size:clamp(9.5px,.8vw,12px);font-weight:900;letter-spacing:.08em;
  color:var(--blue-muted);font-variant-numeric:tabular-nums;
}
.navarrow{
  font-family:inherit;font-size:clamp(13px,1.05vw,17px);font-weight:900;
  color:var(--blue);background:none;cursor:pointer;
  border:1.5px solid var(--glass-line);
  width:clamp(30px,2.4vw,38px);height:clamp(30px,2.4vw,38px);
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .24s var(--ease),background .24s var(--ease);
}
.navarrow:hover{border-color:var(--blue);background:var(--glass-bg);backdrop-filter:blur(8px)}
.top .btn,.btn-solid{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:clamp(9.5px,.8vw,12px);font-weight:900;
  letter-spacing:.02em;text-transform:uppercase;text-decoration:none;
  padding:clamp(8px,.75vw,11px) clamp(13px,1.2vw,20px);
  border-radius:0;border:1.5px solid var(--blue);
  background:var(--blue);color:var(--box);cursor:pointer;
  transition:background .24s var(--ease);
}
.top .btn:hover,.btn-solid:hover{background:#2F5DB8}

/* ---------- glass ---------- */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(10px) saturate(1.15);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  border:1.5px solid var(--glass-line);
}
.glass-deep{
  background:rgba(253,249,238,.66);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1.5px solid var(--blue);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 18px 44px rgba(63,114,208,.10);
}

/* ---------- stage + views ---------- */
.stage{position:relative;flex:1;min-height:0;display:flex}
.stage.swap > .on{filter:blur(12px);opacity:0;transform:scale(.988)}

/* the liquid morph layer (shell-owned) */
.morpher{
  position:fixed;z-index:40;pointer-events:none;
  background:rgba(253,249,238,.6);
  border:1.5px solid var(--blue);
  backdrop-filter:blur(12px) saturate(1.2);
  backdrop-filter:url(#lg-refract) blur(7px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  transition:all .46s var(--ease);
  opacity:1;
}
.morpher.gone{opacity:0}

/* ---------- deck view ---------- */
.deck{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  gap:clamp(10px,1.6vh,22px);
  padding-top:clamp(8px,1.4vh,20px);
  opacity:0;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .34s var(--ease);
}
.deck.on{opacity:1;transform:none}
.deck[hidden]{display:none}
.deck-head{flex:none;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.deck-title{
  font-size:min(3.4vw,5.2vh);line-height:.94;font-weight:900;
  letter-spacing:-.015em;text-transform:uppercase;
}
.deck-sub{font-size:clamp(10.5px,.86vw,13.5px);font-weight:400;opacity:.7;max-width:34em;text-align:right}
.deck-grid{
  flex:1;min-height:0;
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;
  gap:clamp(8px,.8vw,14px);
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.deck-grid::-webkit-scrollbar{display:none}
@media (min-width:1100px){
  .deck-grid{grid-template-columns:repeat(5,1fr)}
}
.card{
  position:relative;overflow:hidden;
  border:1.5px solid var(--blue-dim);
  padding:clamp(12px,1.15vw,19px);
  display:flex;flex-direction:column;justify-content:space-between;gap:8px;
  color:var(--blue);text-decoration:none;cursor:pointer;
  transition:border-color .28s var(--ease),background .28s var(--ease),transform .28s var(--ease);
}
.card:hover,.card:focus-visible{
  border-color:var(--blue);
  background:var(--glass-bg);
  backdrop-filter:blur(10px) saturate(1.15);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  transform:translateY(-2px);
}
/* deck entry: cards stagger in when the deck reveals (--i set per card in JS).
   backwards fill only, so the hover lift keeps working after the reveal.
   Total budget: 8*.04s delay + .36s = .68s, under 700ms. */
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.deck.on .card{animation:cardIn .36s var(--ease) backwards;animation-delay:calc(var(--i,0)*.04s)}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.card-no{font-size:clamp(9px,.72vw,11px);font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-muted)}
.card-sector{font-size:clamp(9px,.72vw,11px);font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-muted);text-align:right}
.card-mid{flex:1;display:flex;align-items:center;justify-content:flex-start;min-height:0;padding:4px 0}
.card-logo{max-height:clamp(30px,4.2vh,50px);max-width:72%;object-fit:contain;object-position:left center}
.card-word{font-size:clamp(19px,1.8vw,29px);font-weight:900;letter-spacing:-.01em;text-transform:uppercase;line-height:1}
.card-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.card-stat{font-size:clamp(11px,.9vw,13.5px);font-weight:700;line-height:1.3;max-width:70%}
.card-cta{
  font-size:clamp(9px,.74vw,11.5px);font-weight:900;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;
  opacity:0;transform:translateX(-6px);
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.card:hover .card-cta,.card:focus-visible .card-cta{opacity:1;transform:none}
/* colorize arbitrary logos to system blue */
.as-blue{filter:brightness(0) invert(45%) sepia(66%) saturate(2400%) hue-rotate(203deg) brightness(93%) contrast(90%)}

/* ---------- case view (SCROLLS INSIDE the frame) ---------- */
.case{
  flex:1;min-height:0;
  display:block;
  overflow-y:auto;overflow-x:hidden;
  padding:clamp(10px,1.6vh,24px) 2px clamp(20px,3vh,40px);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  opacity:0;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .34s var(--ease);
}
.case::-webkit-scrollbar{display:none}
.case.on{opacity:1;transform:none}
.case[hidden]{display:none}

/* section rhythm: a considered spacing scale between the case sections.
   the note and the closing row get a touch more air to read as breaks. */
.case > * + *{margin-top:clamp(24px,3.8vh,56px)}
.case > .c-note{margin-top:clamp(30px,4.6vh,68px)}
.case > .c-stats{margin-top:clamp(28px,4.2vh,60px)}
.case > .c-next{margin-top:clamp(30px,4.6vh,68px)}

/* section reveal: direct children rise in on scroll. hidden state only
   applies once JS adds .reveal (progressive enhancement, never stuck hidden). */
.case > *{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.case.reveal > :not(.in):not(style){opacity:0;transform:translateY(12px)}

/* hero */
.c-hero{display:grid;grid-template-columns:1fr auto;gap:clamp(14px,1.6vw,30px);align-items:start}
.c-hero-main{display:flex;flex-direction:column;gap:clamp(8px,1.1vh,16px)}
.c-kicker{
  font-size:clamp(8.5px,.68vw,10.5px);font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue-muted);
}
.c-logo{max-height:52px;max-width:min(300px,42vw);object-fit:contain;object-position:left center;display:block}
.c-title{
  font-size:min(4.2vw,6.4vh);line-height:.95;font-weight:900;
  letter-spacing:-.015em;text-transform:uppercase;max-width:14em;
}
.c-sub{font-size:clamp(11.5px,.95vw,15px);font-weight:400;line-height:1.45;max-width:44em;color:var(--blue-muted)}

/* artifact garnish */
.artifact{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-top:4px}
.art-no{font-size:clamp(8px,.64vw,10px);font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-muted)}
.barcode{
  width:clamp(70px,6.4vw,100px);height:clamp(18px,1.8vh,26px);
  background:repeating-linear-gradient(90deg,var(--blue) 0 1.5px,transparent 1.5px 4px,var(--blue) 4px 6.5px,transparent 6.5px 8px,var(--blue) 8px 9px,transparent 9px 12px);
  opacity:.75;
}
.stamp{
  display:inline-block;
  font-size:clamp(8px,.64vw,10px);font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid var(--blue);padding:4px 8px;
  transform:rotate(2deg);
}

/* what we did: the spine */
.c-did{border-top:1.5px solid var(--blue-dim)}
.did-row{
  display:grid;grid-template-columns:clamp(44px,4vw,64px) minmax(160px,17em) 1fr;
  gap:clamp(10px,1.4vw,26px);align-items:baseline;
  padding:clamp(12px,1.5vh,20px) 0;
  border-bottom:1.5px solid var(--glass-line);
}
.did-n{font-size:clamp(13px,1.15vw,18px);font-weight:900;color:var(--blue-muted);font-variant-numeric:tabular-nums}
.did-t{font-size:clamp(12px,1.02vw,16px);font-weight:900;text-transform:uppercase;letter-spacing:.01em;line-height:1.2}
.did-d{font-size:clamp(10.5px,.86vw,13.5px);font-weight:400;line-height:1.5;color:var(--blue-muted)}

/* diagram band */
.c-band{
  display:grid;grid-template-columns:minmax(230px,32fr) minmax(0,68fr);
  gap:clamp(12px,1.5vw,28px);align-items:stretch;
}
.c-story{display:flex;flex-direction:column;gap:clamp(9px,1.2vh,16px)}
.c-diagram{
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--blue-dim);
  padding:clamp(10px,1vw,18px);
  min-height:clamp(300px,48vh,520px);
  position:relative;
}
.c-diagram svg{width:100%;height:100%;max-height:100%;display:block}

/* story groups (same bones as the landing panels) */
.grp{display:block}
.lbl{
  display:block;
  font-size:clamp(8.5px,.66vw,10px);font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue-muted);margin-bottom:3px;
}
.grp ul{list-style:none}
.grp li{
  position:relative;
  font-size:clamp(10.5px,.84vw,13px);font-weight:400;line-height:1.45;
  padding-left:11px;
}
.grp li+li{margin-top:1px}
.grp li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6;
}
.grp .val{font-size:clamp(11px,.88vw,13.5px);font-weight:700;line-height:1.35;display:block}

/* proof row */
.c-proof{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(12px,1.4vw,22px);align-items:start;justify-items:stretch;
}
.c-proof .browser{max-height:clamp(280px,44vh,460px)}
/* figure hover: quiet border deepen + a whisper of lift shadow, never a zoom */
.c-proof .browser,.c-proof .glass{
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease);
}
.c-proof .browser:hover{border-color:#2F5DB8;box-shadow:0 12px 32px rgba(63,114,208,.12)}
.c-proof .glass:hover{border-color:var(--blue);box-shadow:0 12px 32px rgba(63,114,208,.10)}
.proof-cap{font-size:clamp(9px,.72vw,11px);font-weight:400;color:var(--blue-muted);line-height:1.4;margin-top:7px}

/* the owner note */
.c-note{display:flex;justify-content:center;padding:clamp(6px,1vh,14px) 0}
.note{
  position:relative;
  width:min(600px,92%);
  background:var(--box);
  border:1.5px solid var(--blue-dim);
  box-shadow:0 16px 38px rgba(63,114,208,.09);
  padding:clamp(20px,2vw,34px) clamp(22px,2.2vw,38px);
  transform:rotate(-1.2deg);
}
.note::before{
  content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-1.6deg);
  width:92px;height:24px;
  background:rgba(253,249,238,.5);
  border:1.5px solid var(--glass-line);
  backdrop-filter:blur(6px);
}
.note-body{
  font-family:"Caveat",cursive;font-weight:500;
  font-size:clamp(19px,1.65vw,26px);line-height:1.32;
  color:var(--blue);
}
.note-sig{
  font-family:"Caveat",cursive;font-weight:700;
  font-size:clamp(21px,1.8vw,29px);
  margin-top:clamp(10px,1.2vh,16px);
}
.note-role{font-size:clamp(9px,.74vw,11.5px);font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-muted);margin-top:2px}
.note-meta{
  text-align:center;
  font-size:clamp(8px,.64vw,10px);font-weight:900;letter-spacing:.12em;text-transform:uppercase;opacity:.4;
  margin-top:clamp(10px,1.4vh,16px);
}

/* stat cards */
.c-stats{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:clamp(8px,.8vw,14px);
}
.stat{
  padding:clamp(11px,1vw,17px);
  display:flex;flex-direction:column;gap:2px;
  transition:border-color .28s var(--ease),background .28s var(--ease),box-shadow .28s var(--ease);
}
/* stat card hover: the glass deepens, no movement */
.stat.glass:hover{
  border-color:var(--blue);
  background:rgba(253,249,238,.74);
  box-shadow:0 10px 28px rgba(63,114,208,.09);
}
.stat-n{font-size:clamp(17px,1.7vw,27px);font-weight:900;letter-spacing:-.01em;line-height:1}
.stat-l{
  font-size:clamp(8.5px,.66vw,10px);font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue-muted);
}

/* closing row */
.c-next{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-top:1.5px solid var(--blue-dim);
  padding-top:clamp(14px,2vh,24px);
}
.c-next p{font-size:clamp(12px,1.05vw,16px);font-weight:900;text-transform:uppercase;letter-spacing:.01em}

/* browser frame for REAL screenshots */
.browser{
  border:1.5px solid var(--blue);background:var(--box);
  display:flex;flex-direction:column;min-height:0;
}
.browser .bar{
  flex:none;display:flex;align-items:center;gap:6px;
  padding:6px 9px;border-bottom:1.5px solid var(--blue-dim);
}
.browser .bar i{width:6px;height:6px;border-radius:50%;border:1.2px solid var(--blue);opacity:.55}
.browser .bar .url{
  font-size:clamp(8px,.62vw,9.5px);font-weight:900;letter-spacing:.06em;
  text-transform:lowercase;color:var(--blue-muted);margin-left:4px;font-style:normal;
}
.browser img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;min-height:0}

/* small chips + pulse */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:clamp(8px,.62vw,9.5px);font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;
  padding:5px 8px;border:1.5px solid var(--blue-dim);
  align-self:flex-start;
}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);animation:pulse 1.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- diagram animation system ---------- */
.d-node{fill:var(--box);stroke:var(--blue);stroke-width:1.5}
.d-node.alt{fill:var(--blue)}
.d-label{
  fill:var(--blue);font-family:inherit;font-weight:900;
  letter-spacing:.06em;text-transform:uppercase;
}
.d-label.inv{fill:var(--box)}
.d-sub{fill:var(--blue);opacity:.55;font-family:inherit;font-weight:400;letter-spacing:.04em}
.d-wire{
  fill:none;stroke:var(--blue);stroke-width:1.5;opacity:.35;
  stroke-dasharray:900;stroke-dashoffset:900;
  animation:draw 1.6s var(--ease) forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.d-dot{fill:var(--blue)}
.d-pulse{animation:nodepulse 2.6s var(--ease) infinite}
@keyframes nodepulse{0%,100%{stroke-width:1.5}50%{stroke-width:3}}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important}
  .d-wire{stroke-dashoffset:0;animation:none}
  .d-dot{display:none}
  /* reveal: everything instantly visible, no rise */
  .case.reveal > *{opacity:1 !important;transform:none !important}
}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- mobile ---------- */
@media (max-width:820px){
  :root{--pad:3%}
  body{overflow:auto}
  .box{height:auto;min-height:100%;padding:18px 14px}
  .deck-grid{grid-template-columns:1fr;grid-auto-rows:minmax(120px,auto)}
  .deck-sub{display:none}
  .c-hero{grid-template-columns:1fr}
  .artifact{flex-direction:row;align-items:center;justify-content:flex-start}
  .c-title{font-size:min(9vw,42px);max-width:none}
  .c-band{grid-template-columns:1fr}
  .c-diagram{min-height:260px}
  .did-row{grid-template-columns:auto 1fr;grid-template-rows:auto auto}
  .did-d{grid-column:2}
  .c-stats{grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .case{overflow:visible}
  .c-next{flex-direction:column;align-items:flex-start}
}
@media (max-height:640px) and (min-width:821px){
  .c-sub{max-width:38em}
}

/* ================= v3 BOX-STACK (locked architecture) =================
   Content pages are a sequence of full-viewport cream boxes that slide
   over each other on native scroll. No scroll hijack. The user never
   leaves the 100vh frame feeling. */
:root{
  --stackpad:clamp(10px,1.6vw,26px);   /* white gap around each box */
  --binpad:clamp(16px,2vw,30px);       /* inner padding of each box */
}
html.casemode{height:auto;scroll-snap-type:y proximity;scrollbar-width:none}
html.casemode::-webkit-scrollbar{display:none}
body.casemode{
  height:auto;overflow:visible;overflow-x:clip;padding:0;
  -webkit-overflow-scrolling:touch;
}
body.casemode .box{display:none}      /* the deck frame yields to the stack */

.stack{display:block}
.cbox-wrap{display:contents}
.cbox{
  position:sticky;top:0;
  height:100vh;height:100dvh;
  padding:var(--stackpad);
  scroll-snap-align:start;
}
.cbin{
  height:100%;width:100%;
  background:var(--box);
  border-radius:var(--r);
  overflow:hidden;
  display:flex;flex-direction:column;
  padding:calc(var(--binpad) + clamp(34px,4.2vh,52px)) var(--binpad) var(--binpad);
  box-shadow:0 -18px 44px rgba(63,114,208,.07);
}
.cbin > * + *{margin-top:clamp(14px,2.4vh,34px)}
.cbin .c-band{flex:1;min-height:0}
.cbin .c-proof{flex:1;min-height:0;align-content:stretch}
.cbin .c-note{flex:1;display:flex;align-items:center}

/* fixed top bar overlays every box in casemode, aligned to the box padding */
#topfix{
  position:fixed;z-index:60;
  top:calc(var(--stackpad) + var(--binpad) - 8px);
  left:calc(var(--stackpad) + var(--binpad));
  right:calc(var(--stackpad) + var(--binpad));
  display:none;
}
body.casemode #topfix{display:block}
#topfix .top{width:100%}

/* v3 case container overrides (fragments are cbox sequences now) */
.case{display:none;flex:none;overflow:visible;padding:0;opacity:1;transform:none;transition:none}
.case.on{display:block;opacity:1}
.stack.swap{transition:opacity .24s var(--ease),filter .24s var(--ease)}
.stack.swap.mid{opacity:0;filter:blur(10px)}

/* reveal-once rise for elements inside boxes (JS adds .reveal / .in) */
.case.reveal .cbin > *:not(.in){opacity:0;transform:translateY(12px)}
.case.reveal .cbin > *{transition:opacity .45s var(--ease),transform .5s var(--ease)}
.case.reveal .cbin > *.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .case.reveal .cbin > *:not(.in){opacity:1;transform:none}
}
@media (max-width:820px){
  html.casemode{scroll-snap-type:none}
  .cbox{position:static;height:auto;padding:8px var(--stackpad)}
  .cbin{height:auto;min-height:calc(100svh - 16px);overflow:visible}
  #topfix{position:absolute}
}

/* consent-banner clearance on standalone case pages: keep the closing CTAs
   tappable on mobile while the banner is up (mirrors offers/academy) */
@media (max-width:820px){
  body:has(.consent) .case .cbox-wrap:last-of-type .cbin{padding-bottom:110px}
}