/* DyorHQ landing — base layer (owned by the lead).
   Reset, type, nav, section shells and layout, footer, device frame.
   Component looks live in: holo.css (glass cards/pills/glyphs), scene.css (dark 3D rooms,
   slab, giant masked type), bento.css (tile grid), motion.css + motion.js (animation). */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
section[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--canvas);color:var(--text);font-family:var(--sans);font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2.5px solid var(--holo-blue);outline-offset:3px;border-radius:8px}
::selection{background:var(--ink);color:var(--canvas)}
svg.ic{width:1em;height:1em;fill:currentColor;flex:none;vertical-align:middle}
.wrap{width:min(var(--maxw),100% - 48px);margin-inline:auto}
@media (max-width:700px){.wrap{width:min(var(--maxw),100% - 28px)}}
.skip{position:absolute;left:16px;top:-56px;z-index:90;background:var(--ink);color:var(--canvas);padding:12px 16px;border-radius:12px;font-weight:600;transition:top .2s}
.skip:focus{top:14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- type: light + bold in one line ---------- */
.h-hero{font-family:var(--display);font-size:clamp(2.2rem,4.6vw,4.1rem);line-height:1.06;letter-spacing:-.02em;margin:0;text-wrap:balance}
.h-sec{font-family:var(--display);font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.06;letter-spacing:-.02em;margin:0;text-wrap:balance}
.lt{font-weight:300}
.h-hero b,.h-sec b,.scene__text b,.tile__h b{font-weight:700}
.star{display:inline-block;font-style:normal;font-weight:400;color:var(--ink);line-height:1}
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;margin:0 0 18px;background:var(--chip-bg)}
.chip .star{font-size:.9em;color:var(--text-3)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 24px;border:1px solid transparent;border-radius:var(--r-pill);font-weight:650;font-size:.95rem;letter-spacing:-.01em;white-space:nowrap;isolation:isolate;overflow:hidden;transition:transform .2s var(--ease),background .2s,box-shadow .25s,color .2s,border-color .2s}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 20%,rgb(255 255 255 / .2) 48%,transparent 76%);transform:translateX(-120%);transition:transform .6s var(--ease)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(1px)}
.btn-sm{height:40px;padding:0 18px;font-size:.9rem}
.btn-dark{background:linear-gradient(180deg,color-mix(in srgb,var(--pill-bg) 88%,white),var(--pill-bg));color:var(--pill-fg);box-shadow:inset 0 1px 0 rgb(255 255 255 / .14),0 8px 22px -12px rgb(15 15 20 / .65)}
.btn-dark:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),0 16px 34px -14px rgb(15 15 20 / .7)}
.btn-outline{background:color-mix(in srgb,var(--surface) 72%,transparent);color:var(--ink);border-color:var(--line-2);box-shadow:inset 0 1px 0 rgb(255 255 255 / .4),0 8px 24px -18px rgb(15 15 20 / .45);backdrop-filter:blur(16px)}
.btn-outline:hover{background:var(--surface);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .55),0 14px 28px -18px rgb(15 15 20 / .5)}
.iconbtn{width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center;color:inherit;box-shadow:inset 0 0 0 1px var(--line-2);transition:background .16s,transform .16s}
.iconbtn:hover{background:var(--chip-bg);transform:translateY(-1px)}
.iconbtn .ic{font-size:1.1rem}
/* theme toggle: show the icon of the mode you'd switch TO; hidden when JS can't run it */
html:not(.js) [data-theme-toggle]{display:none}
[data-theme-toggle] .ic-sun{display:none}[data-theme-toggle] .ic-moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-theme-toggle] .ic-sun{display:block}:root:not([data-theme="light"]) [data-theme-toggle] .ic-moon{display:none}}
:root[data-theme="dark"] [data-theme-toggle] .ic-sun{display:block}:root[data-theme="dark"] [data-theme-toggle] .ic-moon{display:none}
:root[data-theme="light"] [data-theme-toggle] .ic-sun{display:none}:root[data-theme="light"] [data-theme-toggle] .ic-moon{display:block}

/* ---------- nav: sits over light AND dark screens; motion.js sets .nav--dark / .nav--light
   from what is under it (IntersectionObserver), otherwise it follows the theme ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;pointer-events:none;color:var(--ink);transition:color .25s var(--ease)}
.nav--dark{color:#fff}
.nav--light{color:#0F0F14}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:60px;margin-top:12px;padding:0 10px 0 16px;border:1px solid color-mix(in srgb,currentColor 13%,transparent);border-radius:22px;background:color-mix(in srgb,var(--canvas) 76%,transparent);box-shadow:0 16px 45px -28px rgb(15 15 20 / .45),inset 0 1px 0 rgb(255 255 255 / .45);backdrop-filter:blur(20px) saturate(140%)}
.nav .brand,.nav .btn,.nav .iconbtn{pointer-events:auto}
.nav__right{display:flex;align-items:center;gap:10px}
.nav .iconbtn{color:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 45%,transparent)}
.nav .iconbtn:hover{background:color-mix(in srgb,currentColor 12%,transparent);transform:none}
.brand img{height:24px;width:auto}
.nav .brand img{filter:var(--mark-filter);transition:filter .25s}
.nav--dark .brand img{filter:brightness(0) invert(1)}
.nav--light .brand img{filter:none}
.nav .btn-outline{background:color-mix(in srgb,currentColor 7%,transparent);color:inherit;border-color:color-mix(in srgb,currentColor 32%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,currentColor 12%,transparent)}
.nav .btn-outline:hover{background:color-mix(in srgb,currentColor 12%,transparent);transform:none}
.nav .btn .ic{font-size:.88rem;transition:transform .2s var(--ease)}
.nav .btn:hover .ic{transform:translateX(2px)}

/* ---------- screen 1: hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:96px 0 40px;overflow:clip}
.hero__in{position:relative;min-height:min(78vh,760px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:1fr auto;gap:0 32px;align-items:end}
.hero__wm{position:absolute;right:-2%;top:6%;font-family:var(--display);font-weight:700;font-size:clamp(8rem,22vw,20rem);line-height:.8;letter-spacing:-.04em;color:var(--ink);opacity:.028;writing-mode:vertical-rl;transform:rotate(180deg);pointer-events:none;user-select:none}
.hero__copy{grid-column:1 / -1;grid-row:1;align-self:end;position:relative;z-index:3;padding-bottom:28px;max-width:46rem}   /* spans both columns so the bold line runs in front of the fan, like the reference */
.hero__feats{grid-column:1 / -1;grid-row:2;list-style:none;margin:8px 0 0;padding:26px 0 0 64px;display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap}
.hero__feats li{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);line-height:1.5}
.scroll-cue{position:absolute;left:0;bottom:-2px;width:40px;height:40px;display:grid;place-items:center;color:var(--text-3);border-radius:50%;transition:transform .2s}   /* sits on the feature row's baseline, left of it */
.scroll-cue:hover{transform:translateY(3px)}
.scroll-cue .ic{font-size:1.25rem}

/* the card fan: five holographic cards from upper-left to lower-right, tilted in 3D.
   Placement is owned here; the card's LOOK is holo.css */
.hero__stack{grid-column:2;grid-row:1 / 3;position:relative;height:100%;min-height:520px;perspective:1600px;transform-style:preserve-3d}
.hero__stack .holo{position:absolute;width:clamp(220px,23vw,330px);aspect-ratio:1.6;left:50%;top:50%;transform:translate(-50%,-50%) translate3d(var(--x,0),var(--y,0),var(--z,0)) rotate(var(--rz,0)) rotateX(var(--rx,0)) rotateY(var(--ry,0))}
.holo--1{--x:-83%;--y:-80%;--rz:-24deg;--ry:-8deg;--z:-40px}
.holo--2{--x:-47%;--y:-46%;--rz:-14deg;--ry:-4deg;--z:0}
.holo--3{--x:-15%;--y:-10%;--rz:-6deg;--z:20px}
.holo--4{--x:13%;--y:26%;--rz:8deg;--ry:6deg;--z:40px}
.holo--5{--x:41%;--y:56%;--rz:22deg;--ry:10deg;--z:60px}
@media (max-width:1000px){
  .hero{padding-top:84px}
  .hero__in{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:18px}
  .hero__stack{grid-column:1;grid-row:1;min-height:clamp(300px,64vw,440px)}
  .hero__stack .holo{width:clamp(170px,44vw,250px)}
  .holo--1{--x:-74%;--y:-40%}.holo--2{--x:-40%;--y:-14%}.holo--3{--x:-6%;--y:10%}.holo--4{--x:26%;--y:36%}.holo--5{--x:52%;--y:62%}   /* keeps the last card inside a 768px viewport */
  .hero__copy{grid-row:2;padding-bottom:0}
  .hero__feats{grid-row:3;padding:8px 0 0}   /* no cue to make room for on small screens */
  .hero__wm{display:none}
  .scroll-cue{display:none}
}
@media (max-width:520px){
  .wrap{width:calc(100% - 32px)}
  .nav__in{height:54px;margin-top:8px;padding:0 7px 0 12px;border-radius:18px}
  .nav .brand img{height:20px}
  .nav__right{gap:7px}
  .nav .iconbtn{width:38px;height:38px}
  .nav .btn-sm{height:38px;padding:0 13px;font-size:.82rem}
  .nav .btn .ic{font-size:.78rem}
  .h-hero{font-size:clamp(2.15rem,11vw,3rem);line-height:1.02}
  .h-sec{font-size:clamp(2rem,10vw,2.7rem)}
  .chip{max-width:100%;padding:7px 11px;font-size:.61rem;letter-spacing:.1em}
  .hero{min-height:auto;padding:78px 0 64px}
  .hero__in{gap:14px}
  .hero__stack{min-height:300px}
  .hero__stack .holo{width:clamp(150px,42vw,250px)}
  .holo--1{--x:-84%;--y:-40%}.holo--2{--x:-52%;--y:-16%}.holo--3{--x:-20%;--y:8%}.holo--4{--x:10%;--y:32%}.holo--5{--x:34%;--y:54%}
  .hero__copy{max-width:100%}
  .hero__feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;padding-top:12px}
  .hero__feats li{gap:8px;font-size:.62rem;letter-spacing:.1em}
}

/* ---------- screens 2 & 4: dark scene shells (environment art is scene.css) ---------- */
.scene{position:relative;color:var(--on-dark);background:var(--dark);overflow:clip;isolation:isolate}
.scene--learn{min-height:100svh;display:flex;align-items:center;padding:72px 0 24px}
.scene--learn[id]{scroll-margin-top:0}
.scene__env{position:absolute;inset:0;z-index:0;pointer-events:none}
.scene__in{position:relative;z-index:2;width:min(var(--maxw),100% - 48px)}
.scene--learn .scene__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:24px;min-height:calc(100svh - 96px)}
.scene__text{margin:0;font-family:var(--display);font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.05;letter-spacing:-.02em;display:flex;flex-direction:column;align-self:center;padding-bottom:16vh}
.scene__text .star{color:var(--on-dark);font-size:1.1em;margin-bottom:.35em;opacity:.9}
.scene__text--l{align-items:flex-start;padding-left:4%}
.scene__text--r{align-items:flex-end;text-align:right;padding-right:4%}
.scene__stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
.scene__phone{z-index:2}
.scene--learn .scene__phone{--dw:min(27vw,280px,calc(46svh - 87px));margin:0}
.scene--learn .glass-bar{position:relative;z-index:4;margin-bottom:14px}
@media (max-width:900px){
  .scene--learn{padding:92px 0 48px}
  .scene--learn .scene__in{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;min-height:0}
  .scene__text{padding-bottom:0;font-size:clamp(1.7rem,7vw,2.4rem)}
  .scene__text--l{grid-column:1;grid-row:1}
  .scene__text--r{grid-column:2;grid-row:1}
  .scene__stage{grid-column:1 / -1;grid-row:2;height:auto;margin-top:20px}
  .scene--learn .scene__phone{--dw:min(46vw,260px)}
}
@media (max-width:520px){
  .scene--learn{min-height:auto;padding:84px 0 40px}
  .scene--learn .scene__in{width:calc(100% - 32px);gap:12px}
  .scene__text{font-size:clamp(1.45rem,7.2vw,2rem);line-height:1.02}
  .scene__text--l{padding-left:0}
  .scene__text--r{padding-right:0}
  .scene__stage{margin-top:8px}
  .scene--learn .scene__phone{--dw:min(68vw,240px)}
  .scene--learn .glass-bar{max-width:100%;font-size:.8rem}
}

/* ---------- screen 3: bento shell (grid + tile look is bento.css) ---------- */
.bento-wrap{padding:clamp(56px,7vw,120px) 0}

/* ---------- screens 4 + 5: pinned scene + giant masked type (mechanics are scene.css) ---------- */
.pin{position:relative}
.scene--open{min-height:100svh;display:flex;align-items:flex-end;padding:120px 0 0}
.scene--open .scene__in{position:relative;min-height:min(86svh,820px)}
.scene__text--bl{position:absolute;left:2%;bottom:12%;z-index:3;padding-bottom:0}
.scene--open .scene__phone--r{position:absolute;right:4%;bottom:-18%;--dw:clamp(230px,22vw,300px);transform:rotate(-14deg)}   /* specificity beats the later .device{position:relative} */
.slab{position:absolute;left:14%;top:6%;width:clamp(360px,44vw,620px);z-index:2}
@media (max-width:900px){
  .scene--open{padding-top:92px}
  .scene__text--bl{left:0;bottom:8%}
  .slab{left:0;top:0;width:min(92%,520px)}
  .scene--open .scene__phone--r{right:-6%;bottom:-10%;--dw:200px}
}
@media (max-width:520px){
  .scene--open{min-height:760px;padding-top:76px}
  .scene--open .scene__in{width:calc(100% - 32px);min-height:700px}
  .slab{left:-7%;top:5%;width:114%}
  .scene__text--bl{left:0;bottom:12%;max-width:68%}
  .scene--open .scene__phone--r{right:-12%;bottom:-6%;--dw:158px}
}

/* ---------- screen 6: email capture ---------- */
.capture{position:relative;min-height:100svh;display:flex;align-items:center;padding:120px 0 60px;overflow:clip}
.capture__in{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);grid-template-rows:auto auto auto auto;gap:22px 28px;align-items:center;min-height:min(80vh,720px)}
.capture__cards{grid-column:1 / -1;grid-row:1;position:relative;height:clamp(180px,26vw,320px);perspective:1400px}
.capture__cards .holo{position:absolute;width:clamp(190px,20vw,280px);aspect-ratio:1.6;top:-30%;left:50%;transform:translateX(-50%) translate(var(--x,0),var(--y,0)) rotate(var(--rz,0))}
.holo--c1{--x:-52%;--y:6%;--rz:-22deg}
.holo--c2{--x:40%;--y:-2%;--rz:14deg}
.capture__heading{grid-column:1;grid-row:2;align-self:end}
.capture__eyebrow{margin:0 0 12px;font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.capture__title{display:flex;flex-direction:column;line-height:1.02}
.holo-pill--wide{grid-column:2;grid-row:2;height:clamp(64px,8vw,96px);width:100%;justify-self:stretch}
.capture__intro{grid-column:1;grid-row:3;align-self:start;max-width:34rem}
.capture__intro p{margin:0;color:var(--text-2);font-size:.98rem;line-height:1.65}
.capture__intro .capture__benefit{margin-top:12px;color:var(--text-3);font-size:.8rem;font-weight:600}
.capture__form{grid-column:2;grid-row:3;display:flex;align-items:center;gap:18px;justify-self:center;width:min(100%,560px)}
.capture__form input{flex:1;height:52px;border-radius:var(--r-pill);border:1px solid var(--input-border);background:var(--input-bg);padding:0 22px;font-size:.98rem;color:var(--ink);outline:0;transition:border-color .2s,box-shadow .2s,background .2s}
.capture__form input::placeholder{color:var(--text-3)}
.capture__form input:focus{border-color:var(--ink);background:var(--input-focus-bg);box-shadow:0 0 0 4px var(--line)}
.capture__form .star{color:var(--text-3);font-size:1.1rem}
.capture__note{grid-column:2;grid-row:4;margin:0;font-size:.8rem;color:var(--text-3);justify-self:center}
.capture__note[data-state="success"],.capture__note[data-state="error"]{font-weight:600}
.capture__note[data-state="success"]{color:#13795b}
.capture__note[data-state="error"]{color:#b53a26}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .capture__note[data-state="success"]{color:#75e0bd}
  :root:not([data-theme="light"]) .capture__note[data-state="error"]{color:#ff9b7f}
}
:root[data-theme="dark"] .capture__note[data-state="success"]{color:#75e0bd}
:root[data-theme="dark"] .capture__note[data-state="error"]{color:#ff9b7f}
@media (max-width:900px){
  .capture{padding-top:100px}
  .capture__in{grid-template-columns:1fr;grid-template-rows:auto auto auto auto auto auto auto;gap:18px}
  .capture__cards{grid-row:1;height:clamp(160px,44vw,260px)}
  .capture__cards .holo{width:clamp(160px,40vw,220px)}
  .capture__heading{grid-column:1;grid-row:2}
  .capture__intro{grid-column:1;grid-row:3}
  .holo-pill--wide{grid-column:1;grid-row:4;height:64px}
  .capture__form{grid-column:1;grid-row:5;width:100%;flex-wrap:wrap}
  .capture__form input{min-width:0;flex:1 1 200px}
  .capture__form .star{display:none}
  .capture__note{grid-column:1;grid-row:6;justify-self:start}
}
@media (max-width:520px){
  .capture{min-height:auto;padding:84px 0 54px}
  .capture__in{gap:16px;min-height:0}
  .capture__cards{height:170px}
  .capture__cards .holo{width:min(46vw,178px);top:-12%}
  .holo--c1{--x:-48%;--y:10%;--rz:-17deg}
  .holo--c2{--x:36%;--y:0%;--rz:12deg}
  .capture__eyebrow{margin-bottom:9px;font-size:.62rem}
  .capture__intro p{font-size:.92rem;line-height:1.55}
  .capture__intro .capture__benefit{font-size:.76rem}
  .holo-pill--wide{height:52px}
  .capture__form{display:grid;grid-template-columns:1fr;gap:10px}
  .capture__form input{width:100%;height:50px;padding:0 18px;font-size:16px}
  .capture__form .btn{width:100%;height:50px}
  .capture__note{width:100%;text-align:center;justify-self:stretch}
}

/* ---------- footer ---------- */
.foot{padding:30px 0 34px;border-top:1px solid var(--line)}
.foot__in{display:flex;align-items:center;justify-content:space-between;gap:18px 32px;flex-wrap:wrap}
.foot .brand img{height:20px;filter:var(--mark-filter)}
.foot__links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.86rem;color:var(--text-2)}
.foot__links a{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 60%,transparent);box-shadow:inset 0 1px 0 rgb(255 255 255 / .45);transition:color .2s,border-color .2s,background .2s,transform .2s var(--ease),box-shadow .2s}
.foot__links a:hover{color:var(--ink);border-color:var(--line-2);background:var(--surface);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .55),0 10px 24px -18px rgb(15 15 20 / .55)}
.foot__links .ic{width:17px;height:17px}
.foot__links .foot__docs{padding:0 15px;border-radius:var(--r-pill)}
.foot__links .foot__social{width:40px;border-radius:50%}
.foot__links .foot__social[href*="x.com"] .ic{width:15px;height:15px}
.foot__legal{margin:0;width:100%;font-size:14px;font-weight:600;color:var(--dark-2);line-height:1.5}
@media (max-width:520px){
  .foot{padding:24px 0 calc(28px + env(safe-area-inset-bottom))}
  .foot__in{align-items:flex-start;gap:16px}
  .foot .brand{width:100%}
  .foot__links{width:100%;justify-content:flex-start}
  .foot__links a{height:44px}
  .foot__links .foot__social{width:44px}
  .foot__legal{font-size:12px;line-height:1.55}
}

/* ---------- editorial legal pages ---------- */
.legal-page{min-height:100svh;padding:154px 0 88px}
.legal-page__in{width:min(820px,100% - 48px);margin-inline:auto}
.legal-page__eyebrow{margin:0 0 18px;font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3)}
.legal-page__title{margin:0;font-family:var(--display);font-size:clamp(3.2rem,7vw,5.8rem);font-weight:300;line-height:.96;letter-spacing:-.045em}
.legal-page__updated{margin:46px 0 30px;color:var(--text-3);font-family:var(--mono);font-size:.78rem;letter-spacing:.04em}
.legal-page__lede{max-width:690px;margin:0 0 48px;color:var(--text-2);font-size:1.1rem;line-height:1.75}
.legal-section{padding:34px 0;border-top:1px solid var(--line)}
.legal-section h2{margin:0 0 22px;font-family:var(--display);font-size:clamp(1.55rem,3vw,2.1rem);line-height:1.15;letter-spacing:-.025em}
.legal-section p,.legal-section li{color:var(--text-2);font-size:1rem;line-height:1.75}
.legal-section p{margin:0}
.legal-section p+p{margin-top:18px}
.legal-section ul{margin:0;padding:0;list-style:none}
.legal-section li{position:relative;padding-left:24px}
.legal-section li+li{margin-top:14px}
.legal-section li::before{content:"✱";position:absolute;left:0;top:.08em;color:var(--text-3);font-size:.72em}
.legal-section strong{color:var(--ink);font-weight:700}
.legal-section a{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.legal-section a:hover{color:var(--holo-blue);text-decoration-color:currentColor}
@media (max-width:520px){
  .legal-page{padding:112px 0 58px}
  .legal-page__in{width:calc(100% - 32px)}
  .legal-page__title{font-size:clamp(2.8rem,15vw,4rem)}
  .legal-page__updated{margin:34px 0 24px}
  .legal-page__lede{margin-bottom:38px;font-size:1rem;line-height:1.65}
  .legal-section{padding:28px 0}
  .legal-section p,.legal-section li{font-size:.95rem;line-height:1.68}
}

/* ---------- device frame (real app screenshot, iPhone-Pro style) ---------- */
.device{position:relative;width:var(--dw,260px);aspect-ratio:1178/2560;flex:none;border-radius:var(--r-frame)/7.6%;padding:2.5%;
  background:linear-gradient(150deg,#54545c 0%,#1b1b20 20%,#141418 50%,#1b1b20 80%,#44444c 100%);
  box-shadow:var(--shadow-device),inset 0 0 0 1px rgb(255 255 255 / .09)}
.device::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;background:linear-gradient(135deg,rgb(255 255 255 / .18),transparent 24%);opacity:.7;mix-blend-mode:screen}
.device img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:13.4%/6.2%;background:#F2F2F7;box-shadow:0 0 0 2.5px #050509}