/* Shared styling for the Terms and Privacy pages.

   The nav, footer, base palette and button rules are copied verbatim from
   index.html, since chrome that appears on every page should not drift per page.

   Everything else is a single centred reading column. The restraint is
   deliberate: colour appears only on links, headings are solid rather than
   gradient-filled, and there is no tinted glow anywhere. The base is neutral
   charcoal precisely so the blue has something to read against; when the
   surfaces are themselves blue, a blue accent has nowhere to land. */

@font-face{font-family:"SF Pro Display";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/SF-Pro-Display-Regular.woff2") format("woff2")}
@font-face{font-family:"SF Pro Display";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/SF-Pro-Display-Medium.woff2") format("woff2")}
@font-face{font-family:"SF Pro Display";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/SF-Pro-Display-Semibold.woff2") format("woff2")}
@font-face{font-family:"SF Pro Display";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/SF-Pro-Display-Bold.woff2") format("woff2")}
@font-face{font-family:"SF Pro Display";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/SF-Pro-Display-Heavy.woff2") format("woff2")}

:root{
  /* shared with index.html, keep in sync */
  --bg:#0a0a0c;
  --bg2:#101013;
  --card:#17171c;
  --line:rgba(255,255,255,.09);
  --text:#f5f5f7;
  --muted:#8d8d97;
  --lime:#3d8bff;            /* the site blue, used by the nav buttons */

  /* page content only: links sit lighter than the fill blue, because a tone
     dark enough to carry white button text is too dark to read as body text */
  --accent:#87b6ff;
  --prose:#a6a6b0;           /* body copy: lifted off --muted, which is meant
                                for labels and is too dim to read at length */
  --font-d:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-d);line-height:1.6;
     -webkit-font-smoothing:antialiased;font-weight:500;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:700;
     font-size:.95rem;padding:15px 32px;border-radius:999px;
     transition:.22s cubic-bezier(.4,0,.2,1);cursor:pointer;border:none}
.btn-lime{background:linear-gradient(180deg,#5c9dff,#3d8bff);color:#fff;
          box-shadow:0 8px 22px rgba(61,139,255,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-lime:hover{transform:translateY(-2px);
                box-shadow:0 14px 34px rgba(61,139,255,.5),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-line{border:1px solid var(--line);color:var(--text);background:var(--card);
          box-shadow:0 6px 16px rgba(0,0,0,.3)}
.btn-line:hover{transform:translateY(-2px);background:#1f1f24;box-shadow:0 12px 28px rgba(0,0,0,.4)}

/* ── nav ──
   Floating pill, matching the landing page. Scoped to body > nav so a <nav>
   inside the document body can never inherit the fixed positioning. */
body > nav{position:fixed;top:16px;left:0;right:0;z-index:200;background:transparent;
           border:none;pointer-events:none}
.nav-in{pointer-events:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
        height:60px;gap:20px;max-width:1080px;margin:0 auto;padding:0 14px 0 20px;
        border-radius:999px;background:rgba(18,18,22,.78);backdrop-filter:blur(22px);
        -webkit-backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.1);
        box-shadow:0 10px 40px rgba(0,0,0,.45)}
.logo{font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:800;letter-spacing:-.03em;
      letter-spacing:-.01em;font-size:1.35rem;display:flex;align-items:center;gap:10px;justify-self:start}
.logo img{display:block;width:32px;height:32px}
.nav-links{display:flex;gap:26px;font-size:.9rem;color:var(--muted);font-weight:500;justify-self:center}
.nav-links a{transition:.2s}
.nav-links a:hover{color:var(--text)}
.nav-r{display:flex;gap:10px;justify-self:end}
.nav-r .btn{padding:9px 18px;font-size:.82rem}
@media(max-width:920px){.nav-links{display:none}.nav-in{grid-template-columns:1fr auto;max-width:calc(100% - 32px)}}
@media(max-width:520px){
  body > nav{top:10px}
  .nav-in{gap:10px;height:54px;padding:0 10px 0 14px;max-width:calc(100% - 20px)}
  .logo{font-size:1.05rem;gap:8px;white-space:nowrap}
  .logo img{width:28px;height:28px}
  .nav-r{gap:6px;flex-shrink:0}
  .nav-r .btn{padding:8px 12px;font-size:.72rem;white-space:nowrap}
}

/* ── reading column ──
   The header and the document share one width so the h1 sits on the same left
   edge as the body text. The nav and footer stay full width. */
.lg-head .wrap,.lg-body{max-width:784px}

.lg-head{padding:148px 0 52px;border-bottom:1px solid var(--line);
         background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%)}
.lg-head .eyebrow{display:block;font-size:.72rem;font-weight:600;letter-spacing:.2em;
                  text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.lg-head h1{font-size:clamp(2.1rem,4.4vw,2.9rem);font-weight:600;letter-spacing:-.03em;
            line-height:1.08;color:var(--text)}
.lg-dates{color:var(--muted);font-size:.85rem;margin-top:16px}

.lg-body{padding-top:56px;padding-bottom:104px}

/* ── prose ── */
.lg-doc section{scroll-margin-top:104px;margin-bottom:52px}
.lg-doc section:last-child{margin-bottom:0}
.lg-doc h2{font-size:1.3rem;font-weight:600;letter-spacing:-.02em;color:var(--text);
           margin-bottom:16px}
.lg-doc h3{font-size:1rem;font-weight:600;color:var(--text);margin:28px 0 10px}
.lg-doc p{color:var(--prose);font-size:1rem;line-height:1.75;margin-bottom:16px}
.lg-doc ul{margin:0 0 18px;padding-left:22px}
.lg-doc li{color:var(--prose);font-size:1rem;line-height:1.75;margin-bottom:9px}
.lg-doc li::marker{color:var(--muted)}
.lg-doc strong{color:var(--text);font-weight:600}
.lg-doc a:not(.btn){color:var(--accent);text-decoration:underline;
                    text-decoration-color:rgba(135,182,255,.35);text-underline-offset:3px;
                    transition:text-decoration-color .2s}
.lg-doc a:not(.btn):hover{text-decoration-color:var(--accent)}

.lg-doc table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:.95rem}
.lg-doc th{text-align:left;font-weight:600;color:var(--muted);padding:0 16px 10px 0;
           border-bottom:1px solid var(--line);font-size:.72rem;letter-spacing:.12em;
           text-transform:uppercase}
.lg-doc td{color:var(--prose);padding:13px 16px 13px 0;border-bottom:1px solid var(--line);
           vertical-align:top;line-height:1.6}
.lg-doc tr td:first-child{color:var(--text)}

/* ── footer ── */
footer{border-top:1px solid var(--line);padding:40px 0 28px;background:var(--bg2)}
.foot-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:28px}
.foot-links{display:flex;gap:48px;flex-wrap:wrap}
.f-col b{display:block;font-family:var(--font-d);font-size:.78rem;margin-bottom:12px;
         letter-spacing:.06em;text-transform:uppercase}
.f-col a{display:block;color:var(--muted);font-size:.88rem;margin-bottom:8px;transition:.2s}
.f-col a:hover{color:var(--text)}
.foot-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);
          font-size:.8rem;border-top:1px solid var(--line);padding-top:20px}
.foot-bot a:hover{color:var(--text)}

/* ─────────────────────────── responsive ─────────────────────────── */

@media(max-width:640px){
  /* .wrap keeps the site's 32px gutter; the nav row uses it too, so narrowing
     it would both restyle the nav and pull the logo out of line with the
     heading underneath it. */
  .lg-head{padding:100px 0 34px}          /* 140px is sized for a desktop hero */
  .lg-head h1{font-size:1.95rem}
  .lg-head .eyebrow{font-size:.68rem;margin-bottom:12px}
  .lg-dates{font-size:.8rem;margin-top:12px}

  .lg-body{padding-top:34px;padding-bottom:68px}
  .lg-doc section{scroll-margin-top:80px;margin-bottom:38px}
  .lg-doc h2{font-size:1.16rem;margin-bottom:12px}
  .lg-doc h3{font-size:.96rem;margin:22px 0 8px}
  .lg-doc p,.lg-doc li{font-size:.96rem;line-height:1.7}
  .lg-doc ul{padding-left:20px}

  footer{padding:32px 0 24px}
  .foot-top{gap:24px;margin-bottom:22px}
  .foot-links{gap:32px}
  .foot-bot{flex-direction:column;gap:8px}
}

/* Two-column tables can't stay side by side on a phone without the second
   column collapsing to one word per line, so stack each row instead. */
@media(max-width:560px){
  .lg-doc table,.lg-doc tbody,.lg-doc tr,.lg-doc td{display:block;width:100%}
  .lg-doc th{display:none}
  .lg-doc tr{border-bottom:1px solid var(--line);padding:12px 0}
  .lg-doc tr:first-child{border-bottom:none;padding:0}
  .lg-doc td{border:none;padding:1px 0}
  .lg-doc td:first-child{font-weight:600}
}

@media(max-width:380px){
  .lg-head h1{font-size:1.75rem}
}