@font-face{font-family:"Source Serif 4";src:url(/fonts/srcserif.woff2) format("woff2-variations");
  font-weight:400;font-style:normal;font-display:swap;font-stretch:normal;}
@font-face{font-family:"Public Sans";src:url(/fonts/publicsans.woff2) format("woff2-variations");
  font-weight:400 600;font-style:normal;font-display:swap;}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jbmono.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}

:root{
  color-scheme:light;
  --color-page:#ffffff; --color-ink:#20244a; --color-muted:#55516a;
  --color-lilac:#ede7fa; --color-night:#1b1a38; --color-reverse:#ffffff;
  --color-rule:#77718c; --color-hairline:#e7e3f5;
  --font-display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-body:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --type-h1:clamp(2.5rem,1.75rem + 2.5vw,4rem);
  --type-h2:clamp(1.875rem,1.5rem + 1.4vw,2.75rem);
  --type-h3:clamp(1.375rem,1.25rem + .4vw,1.625rem);
  --type-lead:clamp(1.125rem,1.05rem + .25vw,1.25rem);
  --type-body:1.125rem; --type-label:1rem; --type-caption:.875rem; --type-id:.8125rem;
  --content-max:78rem; --page-gutter:3rem; --grid-gap:1.5rem;
  --target-min:2.75rem; --action-min:3rem; --screenshot-max:15rem;
}
@media (max-width:79.999rem){:root{--page-gutter:2rem}}
@media (max-width:47.999rem){:root{--page-gutter:1rem;--grid-gap:1rem}}


*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--color-page);color:var(--color-ink);
  font-family:var(--font-body);font-size:var(--type-body);line-height:1.56;font-weight:400;
  font-kerning:normal;font-variant-ligatures:common-ligatures contextual;
  font-variant-numeric:lining-nums proportional-nums;-webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--font-display);font-weight:400;font-optical-sizing:auto;margin:0;text-wrap:balance}
h1{font-size:clamp(2.5rem,1.5rem + 3.4vw,5.25rem);line-height:1.04;letter-spacing:-.03em;max-width:26ch;margin-inline:auto;text-align:center}
h2{font-size:var(--type-h2);line-height:1.13;letter-spacing:-.015em;max-width:26ch;margin-bottom:1rem}
h2.h3,h3{font-family:var(--font-body);font-weight:600;font-size:var(--type-h3);line-height:1.25;letter-spacing:-.015em;margin:0 0 .75rem;max-width:36ch}
p{margin:0 0 1rem;max-width:62ch}
.lead{font-size:var(--type-lead);line-height:1.55;max-width:58ch}
.centred{text-align:center;margin-inline:auto}
a{color:inherit;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:from-font}
a:hover{text-decoration-thickness:2px}
img{max-width:100%}
:focus-visible{outline:3px solid var(--color-ink);outline-offset:3px}
.step--night :focus-visible,.raise :focus-visible{outline-color:var(--color-reverse)}
[id]{scroll-margin-top:5.5rem}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:50;background:var(--color-ink);color:var(--color-reverse);padding:.75rem 1rem;text-decoration:none}
.status-label{font-weight:600;font-size:var(--type-label);margin:0 0 .5rem}
.src{font-size:var(--type-caption);line-height:1.57;color:var(--color-muted);max-width:72ch;margin:0}
.src--cap{margin-top:1.5rem}
.spec{font-family:var(--font-mono);font-size:var(--type-id);letter-spacing:.02em;color:var(--color-muted);font-variant-numeric:lining-nums tabular-nums;margin:1rem 0 1.25rem}

.shell{width:calc(100% - 2*var(--page-gutter));max-width:var(--content-max);margin-inline:auto}
@supports (display:grid){
  .layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap)}
  .layout>*{min-width:0}
}

/* Header */
.hdr{background:var(--color-page);border-bottom:1px solid var(--color-ink);z-index:20}
@media (min-width:40rem) and (min-height:501px){.hdr{position:sticky;top:0}}
.hdr-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;min-height:4.5rem}
.mark{font-weight:600;font-size:1.5rem;letter-spacing:-.035em;text-decoration:none;display:inline-flex;align-items:center;min-height:var(--target-min)}
.hdr-nav{display:flex;flex-wrap:wrap;gap:1.5rem}
.hdr-nav a{display:inline-flex;align-items:center;min-height:var(--target-min);font-size:var(--type-label);font-weight:600}
@media (max-width:39.999rem){.hdr-in{flex-direction:column;align-items:flex-start}}

/* Hero — centred statement, full-width stage */
.hero{padding-block:4rem 5rem}
/* The crop is baked into the assets (2400×1038): no transform, no clip — Safari does not
   clip a transformed <video>, which pushed the page wide on iOS. */
.hero-media{margin:1rem auto 0;max-width:55rem}
.hero-media img,.hero-media video{display:block;width:100%;height:auto}
.hero-lead{margin:1.5rem auto 0;text-align:center;max-width:64ch;font-size:clamp(1.125rem,1rem + .45vw,1.375rem)}
.hero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:3rem auto 0;max-width:68.75rem;border-top:1px solid var(--color-ink);padding-top:1.25rem}
.hero-facts div{min-width:0}
.hero-facts dt{font-weight:600;font-size:var(--type-label);margin-bottom:.25rem}
.hero-facts dd{margin:0;font-size:var(--type-label);color:var(--color-muted)}
@media (max-width:47.999rem){
  .hero{padding-block:2.5rem 3rem}
  h1{text-align:left;margin-inline:0}
  .hero-lead{text-align:left;margin-inline:0}
  .hero-facts{grid-template-columns:1fr;gap:1rem}
}

/* Platform — the object with callouts */
.platform{padding-block:1rem 6rem;border-top:1px solid var(--color-ink)}
.platform h2{margin:4rem auto 1rem;max-width:22ch}
.platform .lead{margin-inline:auto}
.object{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem) minmax(0,1fr);gap:2rem;align-items:center;margin-top:3rem}
.object>*{min-width:0}
.plat-art{width:100%}
.plat-art{margin:0}
.plat-art img,.plat-art video{display:block;width:100%;height:auto}
.callouts{list-style:none;margin:0;padding:0;display:grid;gap:3rem}
.callouts li{position:relative;max-width:20rem;min-width:0}
.callouts b,.callouts span{overflow-wrap:anywhere}
.callouts b{display:block;font-weight:600;font-size:var(--type-label);margin-bottom:.25rem}
.callouts span{display:block;font-size:var(--type-caption);color:var(--color-muted);line-height:1.5}
.callouts--l{justify-items:end;text-align:right}

@media (max-width:63.999rem){
  .object{grid-template-columns:1fr;justify-items:center}
  .plat-art{max-width:18rem}
  .callouts{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;width:100%;max-width:36rem}
  .callouts--l,.callouts--r{justify-items:start;text-align:left}
  .callouts--l li{padding-right:0}.callouts--r li{padding-left:0}
  .callouts--l li::after,.callouts--r li::before{display:none}
  .callouts--l{order:2}.callouts--r{order:3}
}

/* Products — numbered, alternating */
.product{padding-block:5.5rem;border-top:1px solid var(--color-ink)}
.pnum{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.25rem;margin-bottom:2rem}
.plabel{min-width:0;overflow-wrap:anywhere}
.num{font-family:var(--font-display);font-size:clamp(3.5rem,3rem + 3vw,6rem);line-height:1;letter-spacing:-.04em;color:var(--color-ink)}
.plabel{font-weight:600;font-size:var(--type-label)}
.pcopy{grid-column:1/6;align-self:center}
.pmedia{grid-column:7/13}
.product--flip .pmedia{grid-column:1/8}
.product--flip .pcopy{grid-column:9/13}
.pside{grid-column:9/13;align-self:end}
.product--venture .pcopy{grid-column:1/6}
.product--venture .pmedia{grid-column:7/13}
@media (max-width:79.999rem){
  .pcopy,.pmedia,.pside,.product--flip .pmedia,.product--flip .pcopy,.product--venture .pcopy{grid-column:1/-1}
  .pmedia{margin-top:2rem}
  .product--flip .pmedia{order:2;margin-top:2rem}
  .product{padding-block:3.5rem}
}
.prod-head{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}
.prod-head img{width:2.5rem;height:2.5rem;flex:0 0 auto}
.prod-head h2{margin:0}
.prod-head--serif{align-items:flex-start;gap:1rem;margin-bottom:1rem}
.prod-head--serif img{width:3rem;height:3rem;margin-top:.35rem}
@media (max-width:47.999rem){.prod-head--serif{flex-direction:column;gap:.75rem}}
.how{margin:3rem 0 1rem;font-size:var(--type-label);color:var(--color-muted);font-weight:600}
.defs{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.25rem;margin:1.5rem 0 0;max-width:30rem}
.defs dt{font-weight:600}.defs dd{margin:0;color:var(--color-muted)}

/* Phones */
.ph{display:block;border-radius:14px}
.ph img,img.ph{display:block;width:100%;height:auto;border:1px solid var(--color-rule);border-radius:14px;background:var(--color-page)}
.phones{display:grid;align-items:start;gap:1.5rem}
.phones--2{grid-template-columns:1fr 1fr;max-width:34rem;margin-left:auto}
.phones--2 .ph--b{margin-top:3rem}
.phones--3{grid-template-columns:1fr 1fr 1fr;gap:1rem}
.phones--3 .ph--a,.phones--3 .ph--c{margin-top:3rem}
.bear-pair{display:grid;grid-template-columns:1fr 1.45fr;gap:1.5rem;align-items:end;max-width:44rem}
.bear-atlas{display:block;width:100%;height:auto}
@media (max-width:47.999rem){
  .phones--2 .ph--b,.phones--3 .ph--a,.phones--3 .ph--c{margin-top:1.5rem}
  .phones{gap:.75rem}
}

/* The raise — the one dark band */
.raise{background:var(--color-night);color:var(--color-reverse);padding-block:5rem 5.5rem}
.raise-main{grid-column:1/9}
.raise-act{grid-column:10/13;align-self:center}
@media (max-width:79.999rem){.raise-main,.raise-act{grid-column:1/-1}.raise-act{margin-top:1rem}.raise{padding-block:3.5rem}}
.raise h2{margin-bottom:1rem}
.raise .lead{color:var(--color-reverse)}
.btn{display:inline-flex;align-items:center;min-height:var(--action-min);padding-inline:1.25rem;border:1px solid var(--color-ink);font-weight:600;font-size:var(--type-label);overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:.18em}
.btn--rev{border-color:var(--color-reverse);color:var(--color-reverse)}
.addr{display:block;margin-top:.75rem;font-family:var(--font-mono);font-size:var(--type-id);line-height:1.54;overflow-wrap:anywhere;color:#C9C4E6}

/* Footer */
.ftr{border-top:1px solid var(--color-ink);padding-block:1.5rem}
.ftr-in{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:baseline;font-family:var(--font-mono);font-size:var(--type-id);line-height:1.54;color:var(--color-muted)}
.ftr-in a{color:var(--color-muted)}
.mark-f{font-family:var(--font-body);font-size:1.5rem;font-weight:600;letter-spacing:-.035em;color:var(--color-ink)}

/* ── Schematic panels (unchanged) ── */
figure.story{margin:0}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none}
.step{min-width:0;padding:1.25rem;border-block:1px solid var(--color-ink)}
.step h3{margin:0 0 .75rem}
.step-roles{display:grid;grid-template-columns:45% 45%;justify-content:space-between;align-items:start;min-block-size:3rem;margin-block-end:.5rem;text-align:center}
.step svg{display:block;width:100%;height:auto;aspect-ratio:240/184}
.step-result{margin-block:.75rem 0;font-weight:600}
.step-copy{margin-block:.5rem 0}
.step-result,.step-copy,.step-roles{font-size:var(--type-label);line-height:1.5;overflow-wrap:anywhere;max-width:none}
.step--night{background:var(--color-night);color:var(--color-reverse);border-color:var(--color-night)}
.step--approval{background:var(--color-lilac)}
@media (max-width:71.999rem){.steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.5rem}.step{padding:.75rem}}
@media (max-width:19.999rem){.steps{grid-template-columns:1fr}}

/* ── Hero video + scroll-driven drift ── */
.venture-art video{display:none}
@media (prefers-reduced-motion:no-preference){
  .venture-art.has-video img{display:none}
  .venture-art.has-video video{display:block}
  @supports (animation-timeline:scroll()){
    .hero-media{animation:hero-drift linear both;animation-timeline:scroll(root);animation-range:0 70vh}
    @keyframes hero-drift{from{transform:translateY(0)}to{transform:translateY(-32px)}}
    /* phones drift at different rates as they enter — depth without a script */
    .ph--a,.ph--b,.ph--c,.bear-atlas,.plat-art{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
    .ph--a{--rise:28px}.ph--b{--rise:48px}.ph--c{--rise:36px}.bear-atlas{--rise:40px}.plat-art{--rise:24px}
    @keyframes rise{from{transform:translateY(var(--rise,24px))}to{transform:translateY(0)}}
  }
}
/* ═══ Motion — one 16 s story across the four panels. Pure CSS + SMIL.
   Default (unanimated) state is the finished drawing, so browsers without
   animation, print, and prefers-reduced-motion all show the complete figure. */
@keyframes draw{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes show{0%{opacity:0}100%{opacity:1}}
@keyframes pop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
@keyframes glow{0%,100%{opacity:.35}50%{opacity:.9}}
@keyframes flow{to{stroke-dashoffset:-24}}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.9}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes hide-until{0%,99.99%{opacity:0}100%{opacity:1}}

@media (prefers-reduced-motion:no-preference){
  .story{--t:16s}
  /* panel 1 · 0–4 s */
  .a1-doc{stroke-dasharray:1;animation:p1-doc var(--t) linear infinite}
  @keyframes p1-doc{0%{stroke-dashoffset:1}8%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
  .a1-arrow{animation:p1-arrow var(--t) linear infinite}
  @keyframes p1-arrow{0%,6%{opacity:0}9%,14%{opacity:1}16%,20%{opacity:.3}22%{opacity:1}100%{opacity:1}}
  .a1-seal{animation:p1-seal var(--t) linear infinite}
  @keyframes p1-seal{0%,14%{opacity:0}18%{opacity:1}100%{opacity:1}}

  /* panel 2 · 4–8 s (25–50 %) */
  .a2-stars circle{animation:twinkle 3.2s ease-in-out infinite}
  .a2-stars circle:nth-child(2n){animation-delay:1.1s}.a2-stars circle:nth-child(3n){animation-delay:2s}
  .a2-in,.a2-box{stroke-dasharray:1;animation:p2-draw var(--t) linear infinite}
  @keyframes p2-draw{0%,25%{stroke-dashoffset:1}31%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
  .a2-flow{animation:p2-flow var(--t) linear infinite,flow .9s linear infinite}
  .a2-flow--back{animation-direction:normal,reverse}
  @keyframes p2-flow{0%,30%{opacity:0}33%,44%{opacity:1}100%{opacity:1}}
  .a2-arr{animation:p2-arr var(--t) linear infinite}
  @keyframes p2-arr{0%,31%{opacity:0}34%{opacity:1}100%{opacity:1}}
  .a2-out{stroke-dasharray:1;animation:p2-out var(--t) linear infinite}
  @keyframes p2-out{0%,42%{stroke-dashoffset:1}45%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
  .a2-idea{transform-box:fill-box;transform-origin:center;animation:p2-idea var(--t) linear infinite}
  @keyframes p2-idea{0%,44%{opacity:0;transform:scale(.3)}47%{opacity:1;transform:scale(1.25)}49%{transform:scale(1)}100%{opacity:1;transform:scale(1)}}
  .a2-glow{animation:p2-glow var(--t) linear infinite}
  @keyframes p2-glow{0%,45%{opacity:0}48%{opacity:1}55%{opacity:.45}62%{opacity:.9}70%{opacity:.5}100%{opacity:.5}}

  /* panel 3 · 8–12 s (50–75 %) */
  .a3-branch{stroke-dasharray:1;animation:p3-branch var(--t) linear infinite}
  @keyframes p3-branch{0%,51%{stroke-dashoffset:1}58%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
  .a3-arr{animation:p3-arr var(--t) linear infinite}
  @keyframes p3-arr{0%,60%{opacity:0}63%{opacity:1}100%{opacity:1}}
  .a3-card{stroke-dasharray:1;animation:p3-card var(--t) linear infinite}
  @keyframes p3-card{0%,62%{stroke-dashoffset:1}67%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
  .a3-line{stroke-dasharray:1;animation:p3-line var(--t) linear infinite}
  @keyframes p3-line{0%,67%{stroke-dashoffset:1}72%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
  .a3-dots{animation:p3-dots var(--t) linear infinite}
  @keyframes p3-dots{0%,51%{opacity:0}53%,61%{opacity:1}64%{opacity:0}100%{opacity:0}}

  /* panel 4 · 12–16 s (75–100 %) */
  .a4-close{stroke-dasharray:1;animation:p4-close var(--t) linear infinite}
  .a4-close--r{animation-name:p4-close-r}
  @keyframes p4-close{0%,77%{stroke-dashoffset:1}80%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
  @keyframes p4-close-r{0%,82%{stroke-dashoffset:1}85%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
  .a4-branch{stroke-dasharray:1;animation:p4-branch var(--t) linear infinite}
  .a4-branch--r{animation-name:p4-branch-r}
  @keyframes p4-branch{0%,80%{stroke-dashoffset:1}84%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
  @keyframes p4-branch-r{0%,85%{stroke-dashoffset:1}89%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
  .a4-box{stroke-dasharray:1;animation:p4-box var(--t) linear infinite}
  @keyframes p4-box{0%,88%{stroke-dashoffset:1}92%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
  .a4-out-dash{animation:p4-dash var(--t) linear infinite}
  @keyframes p4-dash{0%,75%{opacity:1}92%{opacity:1}94%{opacity:0}100%{opacity:0}}
  .a4-out{stroke-dasharray:1;animation:p4-out var(--t) linear infinite}
  @keyframes p4-out{0%,92%{stroke-dashoffset:1}96%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
  .a4-arr{animation:p4-arr var(--t) linear infinite}
  @keyframes p4-arr{0%,94%{opacity:0}97%{opacity:1}100%{opacity:1}}
}
/* The dashed "conditional" output and the solid "made" output overlap; without motion, show the solid one. */
.a4-out-dash{opacity:0}
.a3-dots{opacity:0}
@media (prefers-reduced-motion:reduce){.a3-dots{display:none}.a4-out-dash{display:none}}

.venture-facts{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--color-ink);font-size:var(--type-label);line-height:1.5}
.venture-facts p{margin:0 0 .5rem}
.venture-facts .status-label{display:inline;margin:0 .5rem 0 0}
.shots--3{grid-template-columns:repeat(3,1fr);gap:1rem}
.shots--3 img{display:block;width:100%;height:auto;border:1px solid var(--color-rule)}
@media (max-width:39.999rem){.shots--3{grid-template-columns:repeat(3,1fr);gap:.5rem}}
.prod-shots .shots--3{max-width:40rem}

@media (forced-colors:active){
  .step,.step--night,.step--approval{background:Canvas;color:CanvasText;border-color:CanvasText}
  .step svg path{stroke:CanvasText}
  #encounter-idea-shape{fill:CanvasText;stroke:CanvasText}
  a:focus-visible{outline-color:Highlight}
}
@media print{
  .step--night{background:#fff;color:#000}
  .step svg path{stroke:#000}
  #encounter-idea-shape{fill:#000}
}

.src--spaced{margin-top:1.5rem}
.src--cap{margin-top:1.5rem}


/* Facts row icons */
.hero-facts div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.75rem}
.hero-facts .fi{width:1.5rem;height:1.5rem;grid-row:1/3;margin-top:.1rem;color:var(--color-ink)}
.hero-facts dt,.hero-facts dd{grid-column:2}
@media (min-width:48rem){.hero-facts div+div{border-left:1px solid var(--color-hairline);padding-left:1.5rem}}

/* Talk2Mi frames: the connected sheet leads, the Plaza detail sits low as a fragment */
.phones--mi{grid-template-columns:1fr 1fr 1fr;align-items:end}
.phones--mi .ph--a{margin-top:0}
.phones--mi .ph--b{margin-top:0;transform-origin:center}
.phones--mi .ph--c{margin-top:0;align-self:center}
.mi-detail{border-radius:14px}

/* Platform callouts: longer pointer, terminal dot, outward reveal */

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .callouts li{animation:callout-in linear both;animation-timeline:view();animation-range:entry 10% entry 60%}
    .callouts--l li{--from:24px}.callouts--r li{--from:-24px}
    .callouts li:nth-child(2){animation-range:entry 25% entry 75%}
    @media (max-width:63.999rem){.callouts--l li,.callouts--r li{--from:0px}}
    @keyframes callout-in{from{opacity:.35;transform:translateX(var(--from))}to{opacity:1;transform:none}}
  }
}

/* Partner lanes — one ink, optically sized, hairline above */
.partners{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin:1.5rem 0 .5rem;padding-top:1rem;border-top:1px solid var(--color-hairline);max-width:36rem}
.partners-k{font-size:var(--type-caption);color:var(--color-muted)}
.partners-marks{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}
.partners-marks img{display:block;width:auto;height:28px}
.lg-bab{height:48px}.lg-adventist{height:38px}.lg-ba{height:32px}.lg-qantas{height:28px}.lg-aa{height:28px}

/* Case study disclosure — native <details>, marker kept so state is announced */
.case{margin-top:3rem;border-top:1px solid var(--color-ink);border-bottom:1px solid var(--color-ink)}
.case summary{cursor:pointer;padding:1rem 0;font-weight:600;font-size:var(--type-label);list-style:disclosure-closed}
.case[open] summary{list-style:disclosure-open;border-bottom:1px solid var(--color-hairline)}
.case summary::marker{color:var(--color-muted)}
.case-body{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr) minmax(0,1.15fr);gap:1.5rem 2.5rem;padding:1.75rem 0 2rem;align-items:start}
.case-avatar{display:block;width:100%;height:auto}
.case-copy p{font-size:var(--type-label);max-width:58ch}
.case-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.5rem;margin:1rem 0 1.25rem;max-width:34rem}
.case-facts div{min-width:0}
.case-facts dt{font-size:var(--type-caption);color:var(--color-muted)}
.case-facts dd{margin:0;font-size:var(--type-label);font-weight:600}
.case-ui{display:block;width:100%;height:auto;border:1px solid var(--color-rule);border-radius:10px;align-self:center}
@media (max-width:63.999rem){.case-body{grid-template-columns:minmax(0,10rem) minmax(0,1fr)}.case-ui{grid-column:1/-1}}
@media (max-width:47.999rem){.case-body{grid-template-columns:1fr}.case-avatar{max-width:10rem}}
/* the Bear section now carries more copy on the right; let it breathe */
.product--flip .pcopy{align-self:start}

/* ── Platform stage: one coordinate space (1200×640) for phone, callouts and leader lines ── */
.leaders{display:none}
@media (min-width:64rem){
  .object{display:block;position:relative;aspect-ratio:1200/600;margin-top:2rem;max-width:75rem;margin-inline:auto}
  .object>*{min-width:auto}
  .leaders{display:block;position:absolute;inset:0;width:100%;height:100%;color:var(--color-ink);z-index:2;pointer-events:none}
  .object .plat-art{position:absolute;left:35%;top:2%;width:30%;margin:0}
  .callouts{display:contents}
  .object .co{position:absolute;max-width:17rem;margin:0;padding:0;min-width:0}
  .co b{display:block;font-weight:600;font-size:var(--type-label);line-height:1.25;margin-bottom:.25rem}
  .co span{display:block;font-size:var(--type-caption);color:var(--color-muted);line-height:1.5}
  .object .co-1,.object .co-2{right:calc(100% - 26.5%);left:auto;text-align:right}
  .object .co-3,.object .co-4{left:73.5%;right:auto;text-align:left}
  .object .co-1,.object .co-3{top:calc(38.7% - .75em)}
  .object .co-2,.object .co-4{top:calc(66.7% - .75em)}
  .ld{stroke-dasharray:1;stroke-dashoffset:0}
  @media (prefers-reduced-motion:no-preference){
    @supports (animation-timeline:scroll()){
      .ld{animation:lead-draw linear both;animation-timeline:view();animation-range:entry 30% entry 85%}
      @keyframes lead-draw{from{stroke-dashoffset:.85}to{stroke-dashoffset:0}}
      .co{animation:callout-in linear both;animation-timeline:view();animation-range:entry 35% entry 90%}
    }
  }
}

/* ── 01 beta button ── */
.beta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin:1.25rem 0 0}
.beta .src{margin:0}

/* ── Case summary ── */
.case summary{display:flex;align-items:center;gap:1rem;padding:1rem 0}
.case summary::marker{color:var(--color-muted)}
.case-thumb{width:3rem;height:3rem;border-radius:50%;object-fit:cover;object-position:50% 12%;border:1px solid var(--color-rule);flex:0 0 auto}
.case-t{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1}
.case-k{font-size:var(--type-caption);color:var(--color-muted);font-weight:400}
.case-title{font-weight:600}
.case-read{font-size:var(--type-caption);color:var(--color-muted);text-decoration:underline;text-underline-offset:.18em;flex:0 0 auto}
.case[open] .case-read{visibility:hidden}
.case summary:hover .case-title{text-decoration:underline;text-underline-offset:.18em}


/* iOS safe areas (landscape notch) */
@supports (padding:env(safe-area-inset-left)){
  .shell{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}
/* inline links: keep a comfortable hit area without changing the line box */
.hero-facts dd a,.ftr a,.skip{padding-block:.4rem;margin-block:-.4rem}

/* Callout icons */
.callouts b{display:flex;align-items:center;gap:.5rem}
.callouts b .ci{width:1.25rem;height:1.25rem;flex:0 0 auto;color:var(--color-ink)}
.callouts b>span{display:inline}
@media (min-width:64rem){
  .object .co-1 b,.object .co-2 b{flex-direction:row-reverse;justify-content:flex-start}
}