/* ==========================================================================
       Veroise — legal
       ==========================================================================
       The same palette as landing.html, tuned for reading rather than for
       looking. Three deliberate departures from the marketing page:

       - Text is selectable. The marketing page turns selection off because
         nothing on it is meant to be copied; every line here is.
       - Body copy sits at --text, not --text-dim. A policy printed in 58%
         white is a policy written not to be read, and a consumer contract has
         to be legible to be worth anything.
       - Measure is capped at 68ch and the type is 17px. Long-form, not UI.
       ========================================================================== */

    :root {
      --accent: #9fb3c8;
      --accent-2: #6b7a8c;
      --accent-soft: rgba(159, 179, 200, 0.14);

      --text: rgba(255, 255, 255, 0.92);
      --text-dim: rgba(255, 255, 255, 0.62);
      --text-faint: rgba(255, 255, 255, 0.34);

      --glass: rgba(255, 255, 255, 0.045);
      --glass-hi: rgba(255, 255, 255, 0.08);

      --edge: rgba(255, 255, 255, 0.10);
      --edge-soft: rgba(255, 255, 255, 0.055);

      --page-bg: #07080b;

      --r-sm: 10px;
      --r-md: 16px;

      --ease: cubic-bezier(0.22, 1, 0.36, 1);

      --rule: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.05) 14%,
                rgba(255, 255, 255, 0.15) 50%,
                rgba(255, 255, 255, 0.05) 86%,
                transparent 100%);

      --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      background: var(--page-bg);
      color: var(--text);
      font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
      font-size: 17px;
      line-height: 1.72;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* The one piece of atmosphere the page keeps: a cool wash behind the top of
       the document so it belongs to the same site, and grain so the flat
       background does not band on a wide display. */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(1100px 620px at 18% -8%, rgba(159, 179, 200, 0.10), transparent 62%),
        radial-gradient(900px 520px at 92% 4%, rgba(107, 122, 140, 0.08), transparent 60%);
    }
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.16;
      mix-blend-mode: overlay;
      background-image: var(--noise);
    }

    .mono {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-faint);
    }

    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; text-underline-offset: 3px; }

    /* ------------------------------------------------------------------ nav */

    .legal-nav {
      position: sticky;
      top: 0;
      z-index: 40;
      backdrop-filter: blur(24px) saturate(150%);
      -webkit-backdrop-filter: blur(24px) saturate(150%);
      background: rgba(9, 11, 14, 0.72);
      border-bottom: 1px solid var(--edge-soft);
    }
    .legal-nav .inner {
      max-width: 1140px;
      margin: 0 auto;
      padding: 14px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }
    .brand-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 17px;
      letter-spacing: -0.01em;
    }
    .brand-link:hover { text-decoration: none; color: #fff; }
    .brand-link svg { width: 19px; height: 19px; color: var(--accent); }
    .nav-back {
      font-size: 14px;
      color: var(--text-dim);
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .nav-back:hover { color: var(--text); text-decoration: none; }

    /* ----------------------------------------------------------- structure */

    .wrap {
      position: relative;
      z-index: 1;
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 28px 120px;
    }

    .legal-head {
      padding: clamp(56px, 7vw, 96px) 0 clamp(32px, 4vw, 52px);
      max-width: 720px;
    }
    .legal-head h1 {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(38px, 5.6vw, 62px);
      font-weight: 800;
      line-height: 1.02;
      letter-spacing: -0.035em;
      margin: 14px 0 20px;
    }
    .legal-head h1 em {
      font-style: normal;
      background: linear-gradient(100deg, var(--accent), var(--accent-2));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .legal-head p {
      color: var(--text-dim);
      font-size: 18px;
      max-width: 60ch;
    }
    .legal-dates {
      margin-top: 26px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px 26px;
      font-size: 13px;
      color: var(--text-faint);
    }
    .legal-dates b { color: var(--text-dim); font-weight: 600; }
    .legal-head p.language-link { margin-top: 18px; font-size: 15px; }

    .cols {
      display: grid;
      grid-template-columns: 232px minmax(0, 1fr);
      gap: 64px;
      align-items: start;
    }

    /* ------------------------------------------------------------------ toc */

    .toc {
      position: sticky;
      top: 84px;
      padding: 4px 0;
    }
    .toc .mono { display: block; margin-bottom: 14px; }
    .toc ol { list-style: none; counter-reset: toc; }
    .toc li { counter-increment: toc; }
    .toc a {
      display: flex;
      gap: 11px;
      padding: 7px 0 7px 13px;
      font-size: 14px;
      line-height: 1.4;
      color: var(--text-dim);
      border-left: 2px solid transparent;
      margin-left: -15px;
      transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
    }
    .toc a::before {
      content: counter(toc, decimal-leading-zero);
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: var(--text-faint);
      padding-top: 3px;
    }
    .toc a:hover { color: var(--text); text-decoration: none; }
    .toc a.active {
      color: var(--text);
      border-left-color: var(--accent);
    }
    .toc a.active::before { color: var(--accent); }

    /* -------------------------------------------------------------- content */

    .doc { min-width: 0; max-width: 68ch; }

    .doc section { scroll-margin-top: 96px; padding-bottom: 18px; }
    .doc section + section { margin-top: 60px; padding-top: 60px; position: relative; }
    .doc section + section::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: var(--rule);
    }

    .doc h2 {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(26px, 3vw, 34px);
      font-weight: 700;
      letter-spacing: -0.028em;
      line-height: 1.12;
      margin: 12px 0 18px;
    }
    .doc h3 {
      font-family: 'Outfit', sans-serif;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: -0.012em;
      margin: 34px 0 10px;
      color: var(--text);
    }
    .doc h4 {
      font-size: 15px;
      font-weight: 700;
      margin: 22px 0 8px;
      color: var(--text);
    }
    .doc p { margin: 0 0 16px; color: var(--text); }
    .doc p.lead { font-size: 18px; color: var(--text-dim); margin-bottom: 22px; }
    .doc ul, .doc ol { margin: 0 0 18px; padding-left: 22px; }
    .doc li { margin-bottom: 9px; }
    .doc li::marker { color: var(--text-faint); }
    .doc strong { font-weight: 600; color: #fff; }
    .doc code {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.86em;
      background: var(--glass-hi);
      border: 1px solid var(--edge-soft);
      border-radius: 5px;
      padding: 1px 5px;
    }

    /* A card for the parts that are promises rather than terms. */
    .note {
      border: 1px solid var(--edge);
      border-radius: var(--r-md);
      background: var(--glass);
      padding: 22px 24px;
      margin: 0 0 22px;
    }
    .note > :last-child { margin-bottom: 0; }
    .note .mono { display: block; margin-bottom: 10px; color: var(--accent); }
    .note.warm { border-color: rgba(159, 179, 200, 0.28); background: var(--accent-soft); }

    /* Placeholders the operator must fill in before this page is published.
       Loud on purpose — a legal page that ships with a blank in it is worse
       than one that was never written. */
    .todo {
      background: rgba(255, 176, 46, 0.16);
      border: 1px dashed rgba(255, 176, 46, 0.55);
      color: #ffcf85;
      border-radius: 5px;
      padding: 1px 7px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.82em;
      font-weight: 500;
    }

    /* The plain-English summary at the top of each long section. */
    .tldr {
      border-left: 2px solid var(--accent);
      padding: 2px 0 2px 18px;
      margin: 0 0 26px;
      color: var(--text-dim);
      font-size: 16px;
    }
    .tldr b { color: var(--text); font-weight: 600; }

    table.tbl {
      width: 100%;
      border-collapse: collapse;
      margin: 0 0 22px;
      font-size: 15px;
    }
    table.tbl th, table.tbl td {
      text-align: left;
      padding: 11px 14px;
      border-bottom: 1px solid var(--edge-soft);
      vertical-align: top;
    }
    table.tbl th {
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-faint);
      font-weight: 600;
      font-family: 'JetBrains Mono', monospace;
    }
    table.tbl td { color: var(--text-dim); }
    table.tbl td:first-child { color: var(--text); font-weight: 600; width: 34%; }
    table.tbl tr:last-child td { border-bottom: 0; }
    .business-address { font-style: normal; }
    #contact .tbl td { overflow-wrap: anywhere; }
    .tbl-scroll { overflow-x: auto; }

    /* ------------------------------------------------------------- footer */

    .legal-footer {
      position: relative;
      z-index: 1;
      border-top: 1px solid var(--edge-soft);
      margin-top: 90px;
      padding: 34px 0;
    }
    .legal-footer .inner {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 28px;
      display: flex;
      flex-wrap: wrap;
      gap: 14px 28px;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      color: var(--text-faint);
    }
    .legal-footer a { color: var(--text-dim); }
    .legal-footer a:hover { color: #fff; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 18px; }

    /* -------------------------------------------------------- responsive */

    @media (max-width: 940px) {
      .cols { grid-template-columns: 1fr; gap: 34px; }
      .toc {
        position: static;
        border: 1px solid var(--edge-soft);
        border-radius: var(--r-md);
        padding: 18px 20px;
        background: var(--glass);
      }
      .toc ol { columns: 2; column-gap: 24px; }
      .toc a { margin-left: 0; }
    }
    @media (max-width: 620px) {
      body { font-size: 16px; }
      .wrap { padding: 0 18px 80px; }
      .legal-nav .inner { padding: 12px 18px; }
      .toc ol { columns: 1; }
      .legal-footer .inner { padding: 0 18px; }
      #contact .note .tbl tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--edge-soft); }
      #contact .note .tbl tr:last-child { border-bottom: 0; }
      #contact .note .tbl td { display: block; width: auto; padding: 0; border: 0; }
      #contact .note .tbl td:first-child { margin-bottom: 4px; font-size: 13px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      * { transition: none !important; }
    }