/* ---------------------------------------------------------------------------
   Legal pages (privacy-policy.html).

   Hand-written, not part of the design export. Loads after main.css and reuses
   its tokens, nav and footer — this file only adds the document layout: header,
   sticky table of contents, and prose.
   --------------------------------------------------------------------------- */

  .legal{
    max-width:1160px;
    margin:0 auto;
    padding:72px 0 0;
  }

  /* ---------- Header ---------- */
  .legal-head{
    padding-bottom:40px;
    border-bottom:1px solid rgba(48,48,48,.1);
  }
  .legal-title{
    font-family:var(--font);
    font-weight:500;
    font-size:clamp(38px, 4.4vw, 56px);
    line-height:1.05;
    letter-spacing:normal;
    color:var(--ink);
  }
  .legal-title .it{font-style:italic;font-weight:400;}
  .legal-date{
    font-family:var(--mono);
    font-size:var(--t-micro);
    font-weight:500;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--label);
    margin-top:18px;
  }
  .legal-lede{
    margin-top:20px;
    max-width:64ch;
    font-size:18px;
    line-height:1.6;
    color:var(--muted);
  }
  .legal-lede + .legal-lede{margin-top:14px;}

  /* ---------- Body: sticky contents + prose ---------- */
  .legal-body{
    display:grid;
    grid-template-columns:236px 1fr;
    gap:72px;
    align-items:start;
    margin-top:48px;
    padding-bottom:24px;
  }

  .legal-toc{
    position:sticky;
    top:104px;
    /* The Terms run to 19 sections — longer than a short viewport. Scroll the
       rail rather than letting it push past the bottom of the screen. */
    max-height:calc(100vh - 160px);
    overflow-y:auto;
  }
  .legal-toc-label{
    display:block;
    font-family:var(--mono);
    font-size:var(--t-mono);
    font-weight:500;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--label);
    margin-bottom:14px;
  }
  .legal-toc ol{list-style:none;margin:0;padding:0;}
  .legal-toc a{
    display:block;
    padding:7px 0 7px 16px;
    border-left:1px solid var(--border);
    font-size:13.5px;
    line-height:1.35;
    color:var(--muted);
    text-decoration:none;
    transition:color .18s ease, border-color .18s ease;
  }
  .legal-toc a:hover{color:var(--ink);border-left-color:var(--orange);}

  .legal-prose{max-width:72ch;}
  .legal-prose section{scroll-margin-top:120px;}
  .legal-prose h2{
    display:flex;
    align-items:center;
    gap:12px;
    font-family:var(--font);
    font-size:24px;
    font-weight:600;
    line-height:1.2;
    letter-spacing:normal;
    color:var(--ink);
    margin:56px 0 18px;
  }
  /* The first heading starts level with the contents rail, not 56px below it. */
  .legal-prose > section:first-child h2{margin-top:0;}
  .legal-num{
    flex:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:9px;
    background:rgba(254,60,0,.08);
    color:var(--orange);
    font-family:var(--mono);
    font-size:var(--t-micro);
    font-weight:600;
    line-height:1;
  }
  .legal-prose p{
    color:var(--muted);
    line-height:1.65;
    margin-bottom:14px;
  }
  .legal-prose p:last-child{margin-bottom:0;}
  .legal-prose strong{color:var(--ink);font-weight:600;}
  .legal-prose a{
    color:var(--ink);
    text-decoration:underline;
    text-decoration-color:rgba(254,60,0,.5);
    text-underline-offset:3px;
    transition:color .18s ease;
  }
  .legal-prose a:hover{color:var(--orange);}

  .legal-list{
    list-style:none;
    margin:0 0 18px;
    padding:0;
  }
  .legal-list li{
    position:relative;
    padding-left:24px;
    margin-bottom:10px;
    color:var(--muted);
    line-height:1.6;
  }
  .legal-list li:last-child{margin-bottom:0;}
  .legal-list li::before{
    content:"";
    position:absolute;
    left:6px;
    top:10px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:rgba(48,48,48,.34);
  }

  /* ---------- Highlights card ---------- */
  .legal-card{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:24px;
    padding:32px 34px;
  }
  /* Outranks .legal-prose h2 on specificity — inside the card the heading is a
     label, not a numbered section, and must not carry that rule's top margin. */
  .legal-prose h2.legal-card-title{
    display:block;
    font-family:var(--font);
    font-size:18px;
    font-weight:600;
    line-height:1.25;
    letter-spacing:normal;
    color:var(--ink);
    margin:0 0 18px;
  }
  .legal-list-check li{padding-left:28px;color:var(--ink);}
  .legal-list-check li::before{
    content:"✓";
    left:0;
    top:0;
    width:auto;
    height:auto;
    border-radius:0;
    background:none;
    color:var(--green);
    font-size:13px;
    font-weight:600;
    line-height:1.6;
  }

  /* ---------- Contact block ---------- */
  .legal-contact{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:20px;
    padding:26px 28px;
    margin:22px 0;
    display:grid;
    gap:18px;
  }
  .legal-contact dt{
    font-family:var(--mono);
    font-size:var(--t-mono);
    font-weight:500;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--label);
    margin-bottom:5px;
  }
  .legal-contact dd{
    font-size:15px;
    line-height:1.55;
    color:var(--ink);
  }

  /* ---------- Responsive ---------- */
  @media (max-width:1000px){
    .legal-body{grid-template-columns:1fr;gap:36px;}
    .legal-toc{
      position:static;
      max-height:none;
      overflow:visible;
      background:var(--white);
      border:1px solid var(--border);
      border-radius:20px;
      padding:22px 24px;
    }
    /* Multi-column, not grid: reading straight down the left column gives the
       sections in order, and it balances itself whether the page has 10
       sections (privacy) or 19 (terms). */
    .legal-toc ol{
      columns:2;
      column-gap:24px;
    }
    .legal-toc li{break-inside:avoid;}
    .legal-prose{max-width:none;}
  }

  @media (max-width:720px){
    .legal{padding-top:44px;}
    .legal-head{padding-bottom:28px;}
    .legal-lede{font-size:16px;}
    .legal-body{margin-top:32px;}
    .legal-toc ol{columns:1;}
    .legal-prose h2{font-size:21px;margin:44px 0 16px;gap:10px;}
    .legal-card{padding:24px 22px;border-radius:20px;}
    .legal-contact{padding:22px 20px;}
  }