/* ═══════════════════════════════════════════════════════════════
   SOLUM — legal.css: /terms and /privacy as a reading experience.
   Loads after site.css → app.css → shell.css. Pairs with /js/legal-fx.js.

   Markup (views/terms.html, views/privacy.html):
     main.legal.lg
       header.lg__hero      eyebrow, big Sora h1 (<em> = gradient), meta row
                            (#docFacts gets "NN sections · N min read")
       div.lg__grid
         nav.lg__toc#docToc built by legal-fx.js from each section's h2:
                            sticky rail on desktop, a "Contents" pill with a
                            drop-down under 960px
         article.lg__body#docBody
           .lg__intro       .lg__lede + the seller/controller <dl> fact card
           section.lg__sec  one per h2; .lg__sec--key = rounded highlight
                            card (.lg__flag label, .lg__two pair of plates,
                            .lg__mark / .lg__mark--warn highlighted lines)
           .lg__end         end mark
   Every sentence in those files is legal copy — style it, never edit it.

   Nothing is hidden unless html.lg-js is present (legal-fx.js sets it), so a
   page whose script never runs still shows every line.

   Performance: scroll work is two transforms (progress bar, active marker)
   plus a class swap when the section changes. No filters, no
   backdrop-filter, no infinite loops.
   ═══════════════════════════════════════════════════════════════ */

.legal.lg{max-width:none;margin:0;padding:calc(var(--nav-h) + clamp(40px,7vw,88px)) var(--gutter) clamp(72px,9vw,120px)}

/* ═══════════════════════════ HERO ═══════════════════════════ */
.lg__hero{position:relative;max-width:900px;margin:0 auto clamp(48px,7vw,88px);text-align:center}
.lg__hero .sh-eyebrow{margin-bottom:22px}
.legal.lg h1{margin:0 0 26px;font:700 clamp(48px,8.4vw,108px)/.98 var(--f-display);letter-spacing:-.055em;
  color:var(--fg);text-wrap:balance}
/* room for descenders (the y in Privacy) inside each word's reveal slot */
.legal.lg h1 .w{padding-bottom:.2em;margin-bottom:-.2em}
.lg__metarow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.legal.lg .lg__metarow .meta,.legal.lg .lg__facts{margin:0;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;
  border-radius:var(--r-pill);background:var(--surface);box-shadow:0 0 0 1px var(--hair),var(--sh-1);
  font:400 12.5px/1 var(--f-mono);letter-spacing:.04em;text-transform:none;color:var(--fg-2)}
.legal.lg .lg__metarow .meta::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px rgba(124,242,166,.14)}
.legal.lg .lg__facts{color:var(--mute)}
.legal.lg .lg__facts:empty{display:none}

/* ═══════════════════════════ GRID ═══════════════════════════ */
.lg__grid{max-width:var(--wrap);margin:0 auto}
.lg__body{min-width:0;max-width:720px;margin-inline:auto}
.lg-js .lg__grid{display:grid;grid-template-columns:232px minmax(0,720px);justify-content:center;
  gap:clamp(40px,6vw,96px);align-items:start}
.lg-js .lg__body{margin-inline:0}

/* ═══════════════════════════ CONTENTS ═══════════════════════════ */
.lg__toc{position:sticky;top:calc(var(--nav-h) + 36px);z-index:5;opacity:0;translate:0 10px;
  transition:opacity .7s var(--ease) .25s,translate .8s var(--ease) .25s}
.lg__toc.is-live{opacity:1;translate:none}
.lg__toc-btn{width:100%;display:flex;align-items:center;gap:10px;padding:0 0 14px;text-align:left;cursor:default}
.lg__toc-k{font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.lg__toc-cur{display:none}
.lg__toc-pct{margin-left:auto;font:500 12px/1 var(--f-mono);letter-spacing:.02em;color:var(--mute);
  font-variant-numeric:tabular-nums}
.lg__toc-chev{display:none}
/* reading progress: one bar, scaleX from the left */
.lg__toc-bar{position:relative;height:2px;border-radius:2px;overflow:hidden;background:var(--hair)}
.lg__toc-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform-origin:left;transform:scaleX(0);will-change:transform}
.lg__toc-panel{position:relative;margin-top:18px;max-height:calc(100vh - var(--nav-h) - 170px);overflow:auto;
  scrollbar-width:thin;scrollbar-color:var(--chip-2) transparent;overscroll-behavior:contain}
.lg__toc-list{position:relative;display:grid;gap:2px;margin:0;padding:0 0 0 14px;list-style:none}
.lg__toc-list::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--hair)}
/* the active marker: a 1px-tall bar, moved and stretched with one transform */
.lg__toc-mark{position:absolute;left:-.5px;top:0;width:2px;height:1px;border-radius:2px;
  background:linear-gradient(var(--cyan),var(--blue));transform-origin:0 0;transform:scaleY(0);
  will-change:transform}
.lg__toc.is-live .lg__toc-mark{transition:transform .55s var(--ease)}
.lg__toc-list a{text-decoration:none;display:grid;grid-template-columns:26px minmax(0,1fr);align-items:baseline;gap:4px;
  padding:7px 12px 7px 10px;border-radius:10px;
  font:400 14px/1.35 var(--f-body);color:var(--mute);
  transition:color .25s,background-color .25s}
.lg__toc-n{font:500 11px/1 var(--f-mono);letter-spacing:.02em;color:var(--faint);transition:color .25s}
.lg__toc-list a:hover{color:var(--fg);background:rgba(17,26,43,.6);text-decoration:none}
.lg__toc-list a.is-on{color:var(--fg);background:var(--chip)}
.lg__toc-list a.is-on .lg__toc-n{color:var(--cyan)}
.lg__toc-list a:focus-visible{outline:2px solid var(--blue);outline-offset:0}

/* ═══════════════════════════ INTRO ═══════════════════════════ */
.lg__intro{margin-bottom:clamp(40px,5vw,56px)}
.legal.lg .lg__lede{margin:0 0 28px;max-width:none;font:400 clamp(18px,1.6vw,20.5px)/1.6 var(--f-body);
  letter-spacing:-.005em;color:var(--fg-2)}

/* the fact card: dt/dd rows split by hairlines */
.legal.lg dl{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:0 28px;margin:0;padding:8px 26px;
  border-radius:var(--r-lg);font-size:15.5px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:0 0 0 1px var(--hair),var(--sh-1)}
.legal.lg dt,.legal.lg dd{padding:13px 0;border-top:1px solid var(--hair)}
.legal.lg dt:first-of-type,.legal.lg dt:first-of-type + dd{border-top:0}
.legal.lg dt{font:500 11.5px/1.9 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.legal.lg dd{margin:0;line-height:1.55;color:var(--fg);overflow-wrap:anywhere}

/* ═══════════════════════════ SECTIONS ═══════════════════════════ */
.lg__sec{position:relative;padding-top:clamp(40px,4.4vw,52px);margin-top:clamp(40px,4.4vw,52px);
  border-top:1px solid var(--hair);scroll-margin-top:calc(var(--nav-h) + 24px)}
.lg__intro + .lg__sec{margin-top:0}
/* a short gradient segment draws over the hairline as the section arrives */
.lg__sec::before{content:'';position:absolute;left:0;top:-1px;width:96px;height:1px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));transform-origin:left;
  transition:transform 1.1s var(--ease) .1s}
.lg-js .lg__sec:not(.is-seen)::before{transform:scaleX(0)}

.legal.lg h2{display:flex;align-items:baseline;gap:14px;margin:0 0 20px;
  font:600 clamp(23px,2.3vw,28px)/1.2 var(--f-display);letter-spacing:-.035em;color:var(--fg);text-wrap:balance}
.legal.lg h2:focus{outline:0}
.lg__n{flex:none;display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 8px;
  border-radius:var(--r-pill);background:var(--blue-soft);transform:translateY(-3px);
  font:500 12.5px/1 var(--f-mono);letter-spacing:0;color:var(--cyan)}

/* the section body settles in once, when it first scrolls into view */
.lg-js .lg__sec > :not(h2):not(.lg__flag){transition:opacity .8s var(--ease),translate .9s var(--ease)}
.lg-js .lg__sec:not(.is-seen) > :not(h2):not(.lg__flag){opacity:0;translate:0 14px}

.lg__body p,.lg__body li{font-size:17px;line-height:1.78;color:#A7B2C4}
.legal.lg .lg__body p{margin:0 0 18px;max-width:66ch}
.lg__sec > :last-child{margin-bottom:0!important}
.legal.lg strong,.legal.lg b{color:var(--fg);font-weight:600}
.lg__body a{color:var(--cyan);text-decoration:underline;text-decoration-color:rgba(110,200,255,.35);
  text-underline-offset:3px;transition:text-decoration-color .2s;overflow-wrap:anywhere}
.lg__body a:hover{text-decoration-color:var(--cyan)}
.legal.lg code{padding:2px 8px;border-radius:7px;background:var(--chip);box-shadow:inset 0 0 0 1px var(--hair);
  font:500 .86em var(--f-mono);color:var(--cyan)}

/* lists: small rotated-square bullets, as on the homepage eyebrow */
.legal.lg ul{margin:0 0 20px;padding:0;list-style:none}
.legal.lg ul > li{position:relative;margin:0 0 12px;padding-left:26px;max-width:64ch}
.legal.lg ul > li::before{content:'';position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:2px;
  background:var(--blue);transform:rotate(45deg)}
.legal.lg li::marker{content:none}

/* ═══════════════════════════ KEY STATEMENTS ═══════════════════════════ */
.lg__sec--key{margin-top:clamp(44px,5vw,60px);padding:clamp(26px,3.4vw,40px);border-top:0;border-radius:var(--r-lg);
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(0,112,248,.16),transparent 58%),
    linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:0 0 0 1px rgba(110,200,255,.2),var(--sh-2)}
.lg__sec--key + .lg__sec{border-top:0}
.lg__sec--key::before{left:clamp(26px,3.4vw,40px);top:0;width:120px;height:2px;border-radius:0 0 2px 2px}
.lg__flag{display:inline-flex;align-items:center;gap:8px;height:28px;margin-bottom:18px;padding:0 12px;
  border-radius:var(--r-pill);background:var(--blue-soft);
  font:500 11.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
.lg__flag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.lg__sec--key p,.lg__sec--key li{color:var(--fg-2)}

/* the highlighted lines */
.legal.lg .lg__mark{padding:.12em .42em;margin:0 -.08em;border-radius:8px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(100deg,rgba(0,112,248,.32),rgba(110,200,255,.16));
  box-shadow:inset 0 0 0 1px rgba(110,200,255,.24);color:var(--gloss)}
.legal.lg .lg__mark--warn{background:linear-gradient(100deg,rgba(255,200,90,.2),rgba(255,200,90,.08));
  box-shadow:inset 0 0 0 1px rgba(255,200,90,.3);color:#FFE2A8}

/* "the two things we will do": a pair of rounded plates */
.legal.lg .lg__two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 20px}
.legal.lg .lg__two > li{margin:0;padding:18px 18px 18px 52px;max-width:none;border-radius:var(--r-md);
  font-size:15.5px;line-height:1.65;background:rgba(4,7,14,.5);box-shadow:inset 0 0 0 1px var(--hair)}
.legal.lg .lg__two > li::before{left:18px;top:19px;width:22px;height:22px;border-radius:50%;transform:none;
  background:var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5.5 9.2 2.3 2.3 4.7-5' fill='none' stroke='%236EC8FF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}

/* "what is not stored": each line wears a crossed-out badge */
.legal.lg #not-stored ul > li{padding-left:36px}
.legal.lg #not-stored ul > li::before{left:0;top:.3em;width:22px;height:22px;border-radius:50%;transform:none;
  background:rgba(255,107,116,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m6.2 6.2 5.6 5.6m0-5.6-5.6 5.6' fill='none' stroke='%23FF8A91' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/20px no-repeat}

/* ═══════════════════════════ END MARK ═══════════════════════════ */
.lg__end{display:flex;align-items:center;gap:16px;margin:72px 0 0;
  font:500 11.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.lg__end i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--hair-2))}
.lg__end i:last-child{background:linear-gradient(90deg,var(--hair-2),transparent)}
.lg__end span{display:inline-flex;align-items:center;gap:10px}
.lg__end span::before{content:'';width:6px;height:6px;border-radius:2px;background:var(--blue);transform:rotate(45deg)}

.lg-page .foot{margin-top:0}

/* ═══════════════════════════ NARROW: the Contents pill ═══════════════════════════ */
@media (max-width:960px){
  .lg-js .lg__grid{grid-template-columns:minmax(0,1fr);gap:0}
  .lg-js .lg__body{margin-inline:auto}
  .lg__toc{top:12px;z-index:60;margin:0 auto 36px;max-width:720px;width:100%}
  /* while the nav is showing, the pill and its panel ride below it: legal-fx.js
     writes a translateY on both, animated only when the nav itself slides */
  .lg__toc-pill{position:relative;border-radius:var(--r-pill);background:var(--surface);
    box-shadow:0 0 0 1px var(--hair-2),0 14px 34px -14px rgba(0,0,0,.8);overflow:hidden}
  .lg__toc.is-slide .lg__toc-pill,.lg__toc.is-slide .lg__toc-panel{transition:transform .45s var(--ease)}
  .lg__toc-btn{height:50px;padding:0 18px 0 20px;cursor:pointer}
  .lg__toc-btn:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:var(--r-pill)}
  .lg__toc-cur{display:block;flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
    font:500 14.5px/1 var(--f-body);color:var(--fg)}
  .lg__toc-pct{margin-left:0}
  .lg__toc-chev{display:block;flex:none;width:8px;height:8px;margin:-4px 0 0 2px;
    border-right:1.5px solid var(--mute);border-bottom:1.5px solid var(--mute);transform:rotate(45deg);
    transition:transform .35s var(--ease),margin .35s var(--ease)}
  .lg__toc.is-open .lg__toc-chev{transform:rotate(225deg);margin-top:4px}
  .lg__toc-bar{position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:0;background:transparent}
  .lg__toc-panel{position:absolute;left:0;right:0;top:calc(100% + 8px);margin:0;padding:10px;
    max-height:min(62vh,520px);border-radius:var(--r-md);
    background:var(--surface);box-shadow:0 0 0 1px var(--hair-2),var(--sh-2);
    visibility:hidden;opacity:0;
    transition:opacity .25s,visibility 0s .25s}
  .lg__toc.is-open .lg__toc-panel{visibility:visible;opacity:1;transition:opacity .25s,visibility 0s}
  .lg__toc.is-open.is-slide .lg__toc-panel{transition:opacity .25s,visibility 0s,transform .45s var(--ease)}
  .lg__toc-list{padding-left:12px}
  .lg__toc-list a{padding:10px 12px 10px 10px;font-size:15px}
}

@media (max-width:560px){
  .legal.lg h1{font-size:clamp(44px,13vw,64px)}
  .legal.lg dl{grid-template-columns:1fr;padding:6px 20px}
  .legal.lg dt{padding:14px 0 0}
  .legal.lg dd{padding:2px 0 14px;border-top:0}
  .legal.lg .lg__two{grid-template-columns:1fr}
  .lg__body p,.lg__body li{font-size:16.5px}
  .lg__sec--key{margin-inline:-6px}
  .lg__n{min-width:30px;height:24px;font-size:12px}
}

/* ═══════════════════════════ MOTION ═══════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .lg__toc,.lg__toc-mark,.lg__toc-pill,.lg__toc-panel,.lg__sec::before,.lg__sec > *{transition:none!important}
  .lg__toc{opacity:1;translate:none}
  .lg-js .lg__sec:not(.is-seen) > *{opacity:1;translate:none}
  .lg-js .lg__sec:not(.is-seen)::before{transform:none}
}

/* ═══════════════════════════ PRINT ═══════════════════════════ */
@media print{
  .nav,.foot,.lg__toc,.lg__end,.lg__flag,.lg__facts{display:none!important}
  body,body::before,body::after{background:#fff!important}
  body::after{display:none}
  .legal.lg{padding:0}
  .lg-js .lg__grid{display:block}
  .lg__sec > *{opacity:1!important;translate:none!important}
  .legal.lg h1,.legal.lg h1 em,.legal.lg h2,.legal.lg p,.legal.lg li,.legal.lg strong,.legal.lg dd,.legal.lg dt,
  .legal.lg .lg__mark,.legal.lg .meta,.lg__n,.w__i{color:#000!important;-webkit-text-fill-color:#000;background:none!important;box-shadow:none!important}
  .lg__sec--key,.legal.lg dl{border:1px solid #000;background:none!important;box-shadow:none!important}
}