/* /terms/ and /privacy/ stylesheet (DIG-1469): the long-form legal pages.
   Their own small stylesheet, so they load nothing they do not use. Parts:
     1. fonts, tokens and base, copied from site.css (same values);
     2. the header (logo home, the two pages);
     3. the page: title block with the dates, the contents list, the article;
     4. the tables, which stack into labelled rows on narrow screens;
     5. the footer, the homepage footer's look.
   No JavaScript. Below 1024px the contents list sits above the article;
   from 1024px it is a sticky column on the left. Prose stays under ~70ch. */

/* ---------- 1. fonts, tokens, base (copied from site.css) ---------- */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bebas-neue-400.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-700.woff2) format('woff2');}

:root{
  color-scheme:light;
  --bg:#f8fafc; --card:#ffffff; --border:#e2e8f0; --border-soft:#eef2f6;
  --ink:#0f172a; --ink-2:#1e293b; --muted:#64748b; --muted-2:#475569;
  --teal:#056187; --teal-deep:#03476a; --teal-tint:#e8f1f5;
  --bebas:'Bebas Neue', 'Arial Narrow', sans-serif;
  --inter:'Inter', system-ui, -apple-system, sans-serif;
}
html{background:var(--bg); scroll-padding-top:16px}
html,body{margin:0; padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--inter); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-wrap:break-word;
}
*,*::before,*::after{box-sizing:border-box}
svg{max-width:100%}
a{color:var(--teal); text-underline-offset:2px}
a:hover{color:var(--teal-deep)}
:focus-visible{outline:3px solid #056187; outline-offset:3px; border-radius:6px}
::selection{background:rgba(0,163,224,.22)}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:16px; top:-60px; z-index:2; padding:10px 16px; border-radius:8px; background:var(--teal); color:#fff; font-weight:600; text-decoration:none}
.skip:focus{top:10px; color:#fff}

/* ---------- 2. header ---------- */
.lh{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 16px; min-height:60px; padding:0 16px; border-bottom:1px solid var(--border); background:var(--bg)}
.lh-logo{color:var(--teal); text-decoration:none; line-height:1; display:inline-flex; align-items:center; gap:10px; border-radius:6px; padding:8px 0}
.lh-logo .mark{width:25px; height:22px; flex:none}
.lh-logo .wm{width:137px; height:18px; flex:none}
.lh nav{display:flex; gap:4px; margin-left:auto}
.lh nav a{display:inline-flex; align-items:center; min-height:40px; padding:0 12px; border-radius:999px; color:var(--muted-2); text-decoration:none; font:500 14.5px/1 var(--inter)}
.lh nav a:hover{color:var(--teal); background:var(--teal-tint)}
.lh nav a[aria-current="page"]{color:var(--teal); font-weight:600; background:var(--teal-tint)}
@media (max-width:379.98px){ .lh-logo .wm{width:110px; height:15px} .lh nav a{padding:0 10px} }

/* ---------- 3. the page ---------- */
.lp{max-width:1120px; margin:0 auto; padding:40px 16px 72px}
.lp-head{max-width:46rem}
.lp-head h1{font-family:var(--bebas); font-weight:400; text-transform:uppercase; letter-spacing:.012em; line-height:.98;
  font-size:clamp(52px,13vw,88px); margin:0; color:var(--ink)}
.lp-dates{margin:16px 0 0; display:flex; flex-wrap:wrap; gap:4px 20px; color:var(--muted-2); font-size:14.5px}
.lp-dates b{color:var(--ink); font-weight:600}

.lp-body{margin-top:32px}
.legal-toc{border:1px solid var(--border); border-radius:8px; background:var(--card); padding:18px 18px 14px}
.legal-toc h2{margin:0 0 8px; font:600 12.5px/1.2 var(--inter); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.legal-toc ol{list-style:none; margin:0; padding:0}
.legal-toc li + li{border-top:1px solid var(--border-soft)}
.legal-toc a{display:flex; gap:10px; padding:9px 2px; min-height:40px; align-items:baseline; color:var(--ink-2); text-decoration:none; font-size:15px; line-height:1.4}
.legal-toc a:hover{color:var(--teal)}
.legal-toc .n{flex:none; min-width:1.6em; color:var(--teal); font-weight:600; font-variant-numeric:tabular-nums}

article{max-width:44rem; margin-top:40px}
article > section{padding-top:8px}
article > section + section{margin-top:40px; padding-top:40px; border-top:1px solid var(--border)}
article h2{margin:0 0 14px; font:700 clamp(22px,5.4vw,26px)/1.25 var(--inter); color:var(--ink); letter-spacing:-.01em; text-wrap:balance}
article h2 .n{color:var(--teal); margin-right:.35em; font-variant-numeric:tabular-nums}
article h3{margin:28px 0 10px; font:600 18px/1.35 var(--inter); color:var(--ink)}
article p, article li{color:var(--ink-2); font-size:16.5px; line-height:1.65}
article p{margin:0 0 14px}
article ul, article ol{margin:0 0 16px; padding-left:1.25em}
article li{margin:0 0 8px; padding-left:.2em}
article li::marker{color:var(--muted)}
article strong{color:var(--ink); font-weight:600}
article a strong{color:inherit}
article .short{padding:12px 16px; border-radius:8px; background:var(--teal-tint); color:var(--ink)}
article .short strong{color:var(--teal-deep)}
/* clauses already written in capitals: a touch smaller so they stay readable */
article .caps{font-size:15px; line-height:1.6; letter-spacing:.01em}
/* lettered lists, (a) (b) ...: the letter is part of the text, hung in the margin
   (1.82em plus the space after it lines up with the 2.1em indent) */
article ul.alpha{list-style:none; padding-left:0}
article ul.alpha li{padding-left:2.1em; text-indent:-2.1em}
article .li-n{display:inline-block; min-width:1.82em; text-indent:0; color:var(--muted-2); font-variant-numeric:tabular-nums}
/* Terms: the IMPORTANT notice, and the key clauses (liability limits, arbitration,
   class and jury waivers, time limit) in a bordered panel so they stand out */
.notice{margin:8px 0 0; padding:16px 18px; border:2px solid var(--teal); border-radius:8px; background:var(--card)}
.notice p{margin:0; color:var(--ink)}
.notice strong{color:var(--ink); font-weight:700}
article .key{margin:0 0 16px; padding:16px 18px 4px; border:1.5px solid var(--teal); border-radius:8px; background:var(--card)}
article .key > :last-child{margin-bottom:12px}
.lp-intro p{color:var(--ink-2); font-size:17px; line-height:1.65; margin:0 0 14px}
.lp-intro{margin-top:24px; max-width:44rem}
.lp-intro ul{margin:0 0 16px; padding-left:1.25em}
.lp-intro li{color:var(--ink-2); font-size:17px; line-height:1.6; margin:0 0 6px}

@media (min-width:761px){ .lp{padding-left:24px; padding-right:24px} }
@media (min-width:1024px){
  .lp{padding-top:56px}
  .lp-body{display:grid; grid-template-columns:260px minmax(0,1fr); gap:56px; align-items:start}
  .legal-toc{position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; padding:16px 14px 10px}
  .legal-toc a{min-height:0; padding:6px 2px; font-size:14px}
  article{margin-top:0}
  article > section:first-child{padding-top:0}
}

/* ---------- 4. tables ---------- */
.tbl{width:100%; border-collapse:collapse; margin:4px 0 20px; font-size:15px; line-height:1.5}
.tbl th, .tbl td{text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--border)}
.tbl thead th{font:600 12.5px/1.3 var(--inter); letter-spacing:.05em; text-transform:uppercase; color:var(--muted); background:var(--card); border-bottom:1.5px solid var(--border)}
.tbl tbody th{font-weight:600; color:var(--ink)}
.tbl td{color:var(--ink-2)}
@media (max-width:639.98px){
  .tbl thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .tbl, .tbl tbody, .tbl tr, .tbl th, .tbl td{display:block; width:100%}
  .tbl tr{border:1px solid var(--border); border-radius:8px; background:var(--card); margin:0 0 10px; padding:4px 0}
  .tbl th, .tbl td{border:0; padding:6px 14px}
  .tbl tbody th{font-size:16px}
  .tbl td::before{content:attr(data-label); display:block; font:600 11.5px/1.4 var(--inter); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
}

/* ---------- 5. footer (the homepage footer's look) ---------- */
footer{background:#fff; border-top:1px solid var(--border)}
.foot-in{max-width:1120px; margin:0 auto; padding:48px 16px 0}
.foot-grid{display:grid; grid-template-columns:1fr; gap:28px; padding-bottom:40px}
@media (min-width:761px){ .foot-in{padding:64px 24px 0} .foot-grid{grid-template-columns:1.6fr 1fr 1fr; gap:40px; padding-bottom:52px} }
.foot-brand .fl{color:var(--teal); line-height:1; display:inline-flex; align-items:center; gap:10px; text-decoration:none; border-radius:6px}
.foot-brand .fl .mark{width:25px; height:22px}
.foot-brand .fl .wm{height:18px; width:137px; flex:none}
.foot-brand p{margin:14px 0 0; color:var(--muted); font-size:13.5px; max-width:24em; line-height:1.6}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
footer ul a{display:inline-flex; align-items:center; min-height:32px; color:var(--ink-2); text-decoration:none; font-size:14px}
footer ul a:hover{color:var(--teal)}
footer ul a[aria-current="page"]{color:var(--teal); font-weight:600}
.foot-legal{margin:0; padding:20px 0 32px; border-top:1px solid var(--border); color:var(--muted); font:400 13px/1.5 var(--inter)}