/* ==========================================================================
   Wick Journal — Legal pages (privacy, terms)

   LOAD ORDER (required):
     design-system-v2.css   → tokens + base components (READ-ONLY)
     legal.css              → this file, page-specific only

   Layout comes from sample-landing.css: page rhythm (§ 2), top nav (§ 3),
   the FAQ's sticky aside + hairline list (§ 7, reused as a table of
   contents + numbered sections) and the footer base (§ 8).
   ========================================================================== */

/* Landing-layer tokens — sample-landing.css § 1 */
:root{
  --l-max:1180px;
  --l-gutter:20px;
  --l-gutter-lg:40px;
  --l-nav-h:64px;
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* Page rhythm — sample-landing.css § 2 */
.l-wrap{max-width:var(--l-max);margin:0 auto;padding:0 var(--l-gutter)}
@media(min-width:1024px){ .l-wrap{padding:0 var(--l-gutter-lg)} }

.l-eyebrow{color:var(--mark);font-size:var(--t-xs);margin-bottom:14px}
.l-lede{color:var(--muted);font-size:clamp(15px,1.5vw,17px);margin-top:18px;max-width:56ch}

/* Top nav — sample-landing.css § 3. Long pages scroll under the nav, so it
   always wears the stuck state (no scroll script on these pages). */
.l-topnav{position:sticky;top:0;z-index:var(--z-nav);
          background:color-mix(in srgb,var(--canvas) 86%,transparent);
          backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
          border-bottom:1px solid var(--rule)}
.l-topnav-in{display:flex;align-items:center;gap:var(--s-6);height:var(--l-nav-h)}
.l-topnav-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.l-topnav .brand{display:inline-flex;align-items:center;font-size:24px}
.l-topnav .brand img{height:2.75rem;width:auto;display:block}
.l-hide-sm{display:none}
@media(min-width:640px){ .l-hide-sm{display:inline-flex} }

/* Page header */
.legal-head{padding:clamp(48px,7vw,88px) 0 clamp(32px,4vw,48px);
            border-bottom:1px solid var(--rule)}
.legal-head h1{font-family:var(--f-display);font-weight:400;
               font-size:clamp(40px,6vw,64px);line-height:1;letter-spacing:-.03em}
.legal-meta{margin-top:var(--s-5);color:var(--faint);font-size:var(--t-xs);
            font-family:var(--f-num)}

/* Body — sample-landing.css § 7 grid: sticky aside + hairline list */
.legal{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,64px);
       padding:clamp(40px,5vw,64px) 0 var(--s-12)}
@media(min-width:900px){
  .legal{grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr)}
  .legal-aside{position:sticky;top:calc(var(--l-nav-h) + 32px);align-self:start}
}

.legal-aside h2{font-size:var(--t-xs);font-weight:500;color:var(--faint);margin-bottom:var(--s-3)}
.legal-toc{list-style:none;margin:0;padding:0;counter-reset:toc;
           display:flex;flex-direction:column;gap:var(--s-2)}
.legal-toc li{counter-increment:toc;display:flex;gap:var(--s-3);font-size:var(--t-sm)}
.legal-toc li::before{content:counter(toc,decimal-leading-zero);
                      font-family:var(--f-num);color:var(--faint);font-size:var(--t-2xs);
                      padding-top:2px}
.legal-toc a{color:var(--muted);transition:color var(--d-fast)}
.legal-toc a:hover,.legal-toc a:focus-visible{color:var(--mark)}
.legal-aside .legal-switch{margin-top:var(--s-6);padding-top:var(--s-5);
                           border-top:1px solid var(--rule);font-size:var(--t-sm);color:var(--muted)}
.legal-switch a{color:var(--mark);text-decoration:underline;text-underline-offset:3px}

.legal-body{counter-reset:sec;border-top:1px solid var(--rule)}
@media(min-width:900px){ .legal-body{border-top:0} }

.legal-sec{counter-increment:sec;padding:var(--s-8) 0;border-bottom:1px solid var(--rule);
           scroll-margin-top:calc(var(--l-nav-h) + 16px)}
.legal-sec:first-child{padding-top:0}
.legal-sec:last-child{border-bottom:0}
.legal-sec > h2{display:flex;align-items:baseline;gap:var(--s-3);
                font-family:var(--f-display);font-weight:400;
                font-size:clamp(22px,2.4vw,28px);line-height:1.15;letter-spacing:-.015em;
                margin-bottom:var(--s-4)}
.legal-sec > h2::before{content:counter(sec,decimal-leading-zero);
                        font-family:var(--f-num);font-size:var(--t-xs);color:var(--mark)}
.legal-sec h3{font-size:var(--t-body);font-weight:500;margin:var(--s-5) 0 var(--s-2)}
.legal-sec p,.legal-sec li{color:var(--muted);font-size:14.5px;max-width:66ch}
.legal-sec p + p,.legal-sec p + ul,.legal-sec ul + p{margin-top:var(--s-3)}
.legal-sec ul{margin:var(--s-3) 0 0;padding-left:1.1em;display:flex;flex-direction:column;gap:var(--s-2)}
.legal-sec li::marker{color:var(--faint)}
.legal-sec strong{color:var(--text);font-weight:500}
.legal-sec a{color:var(--mark);text-decoration:underline;text-underline-offset:3px}

/* "In short" card — v2 .card */
.legal-short{margin-bottom:var(--s-5)}
.legal-short p{color:var(--text);font-size:var(--t-body);max-width:none}

/* Data table — v2 § 4.16 table. Wide tables keep a horizontal scroll on small
   screens instead of v2's under-860px hide (same override as the app). */
.legal-table{overflow-x:auto;margin-top:var(--s-4)}
.legal-table table{display:table;min-width:620px}
.legal-table tbody td{vertical-align:top;font-size:var(--t-sm);color:var(--muted)}
.legal-table tbody td:first-child{color:var(--text);font-weight:500}
.legal-table tbody tr:hover td{background:none}

/* Footer — sample-landing.css § 8 footer base */
.legal-footer{border-top:1px solid var(--rule);padding:22px 0 40px}
.legal-footer .l-wrap{display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between;
                      color:var(--faint);font-size:var(--t-2xs)}
.legal-footer nav{display:flex;gap:var(--s-5)}
.legal-footer a{color:var(--muted);transition:color var(--d-fast)}
.legal-footer a:hover,.legal-footer a[aria-current="page"]{color:var(--text)}