/* ============================================================
   DealTracker — shared brand styling for legal + news pages.
   Matches the homepage: EB Garamond display + Inter, black /
   white / evergreen. Content markup is left intact; this
   restyles the standalone privacy / terms / blog pages.
   ============================================================ */
/* No @import here. A CSS @import is discovered only after this stylesheet has
   downloaded and parsed, so it serialised a second render-blocking round trip
   to fonts.googleapis.com on top of the one the page already makes. The pages
   that use this file (privacy, terms) preload the full family set themselves,
   EB Garamond + Inter + Newsreader, in a single non-blocking request. */

:root{
  --paper:#FFFFFF; --paper-2:#FAFAF9;
  --ink:#0F1211; --ink-2:#414745; --ink-3:#686D6A;
  --black:#0B0E0D; --on-b:#F3F5F4; --on-b-2:#A6ADAA; --on-b-3:#6E7572;
  --green:#196B54; --green-2:#14574A; --green-soft:rgba(25,107,84,0.10);
  --hair:rgba(15,18,17,0.12); --hair-2:rgba(15,18,17,0.07);
  --hair-d:rgba(243,245,244,0.18); --hair-d-2:rgba(243,245,244,0.12);
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --gutter:clamp(22px,5vw,72px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink-2);font-family:var(--sans);
  font-size:1.02rem;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* Sticky footer, matching site/app/globals.css. These two documents are long
     enough that it rarely bites, but a narrow window on /terms can still end
     above the fold. */
  min-height:100svh;display:flex;flex-direction:column}
body>*{flex-shrink:0;min-width:0;width:100%}
body>footer{margin-top:auto}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--green);color:#fff}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}
.container{max-width:820px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- top nav (solid, DARK) ----------
   Matches .nav.solid in site/app/globals.css. It used to be a white bar,
   which was correct when the app's own nav was white; the app went dark on
   2026-08-01 and these standalone pages were left behind, so a visitor
   crossing from the homepage to /privacy saw the header invert. Same
   geometry (64px, sticky, blurred) and the same inverted white CTA. */
.dt-topnav{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:64px;padding:0 var(--gutter);
  position:sticky;top:0;z-index:50;
  background:rgba(11,14,13,0.92);
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 1px 0 var(--hair-d-2);
  color:var(--on-b);
}
.logo-wrap{display:inline-flex;align-items:center;gap:11px;color:var(--on-b)}
.logo-wrap .logo-mark{width:25px;height:25px;border-radius:7px;box-shadow:0 0 0 1px rgba(255,255,255,0.14)}
.logo-wrap .name{font-family:'Newsreader',var(--serif);font-weight:500;font-size:1.24rem;letter-spacing:-0.005em;color:var(--on-b)}
.dt-topnav-right{display:flex;align-items:center;gap:26px;font-size:0.92rem;font-weight:500}
.dt-topnav-right a{color:var(--on-b-2);transition:color 200ms var(--ease)}
.dt-topnav-right a:hover{color:var(--on-b)}
.dt-topnav-cta{background:var(--on-b);color:var(--ink) !important;border-radius:3px;padding:9px 17px;font-size:0.88rem;font-weight:500;transition:background 200ms var(--ease)}
.dt-topnav-cta:hover{background:#fff}
/* evergreen only clears 3:1 on light grounds, so the dark bar takes the light ring */
.dt-topnav :focus-visible{outline-color:var(--on-b)}
@media (max-width:640px){.dt-topnav-right .navlink{display:none}}

/* ---------- page header ---------- */
.privacy-head,.news-head{padding:clamp(64px,9vw,120px) 0 clamp(30px,4vw,48px);border-bottom:1px solid var(--hair-2)}
.privacy-head h1,.news-head h1{font-family:var(--serif);font-weight:400;letter-spacing:-0.012em;line-height:1.02;
  font-size:clamp(44px,6vw,80px);color:var(--ink)}
.privacy-head .lede,.news-head .lede{margin-top:20px;font-size:1.15rem;line-height:1.6;color:var(--ink-2);max-width:60ch}
.privacy-head .muted,.muted{color:var(--ink-3);font-size:0.9rem}
.privacy-head .muted{margin-top:16px}

/* ---------- legal body ---------- */
.privacy-body{padding:clamp(48px,7vw,88px) 0 clamp(90px,12vw,150px)}
.privacy-body h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,38px);letter-spacing:-0.01em;
  line-height:1.15;color:var(--ink);margin:clamp(48px,6vw,72px) 0 14px}
.privacy-body h3{font-family:var(--sans);font-weight:600;font-size:1.1rem;color:var(--ink);margin:32px 0 10px}
.privacy-body p{margin:0 0 16px;max-width:70ch}
.privacy-body ul,.privacy-body ol{margin:0 0 18px;padding-left:22px;max-width:70ch}
.privacy-body li{margin:0 0 8px}
.privacy-body a:not(.dt-topnav-cta){color:var(--green-2);border-bottom:1px solid var(--green-soft);transition:border-color 200ms}
.privacy-body a:not(.dt-topnav-cta):hover{border-color:var(--green)}
.privacy-body strong{color:var(--ink);font-weight:600}

/* table of contents */
.toc{background:var(--paper-2);border:1px solid var(--hair-2);border-radius:12px;padding:24px 28px;margin:0 0 clamp(40px,6vw,64px)}
.toc h2{font-family:var(--sans) !important;font-size:0.72rem !important;font-weight:600 !important;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 14px !important}
.toc ul,.toc ol{list-style:none;padding:0;margin:0;columns:2;column-gap:32px}
.toc li{margin:0 0 9px;break-inside:avoid}
.toc a{color:var(--ink-2);border:0 !important}
.toc a:hover{color:var(--green-2)}
/* The contents list is navigation, not prose, so its links are not covered by
   the WCAG 2.5.8 inline exemption. They measured 20px on a phone; the 9px
   row margin kept them legal under the spacing exception, but 24px is the
   target the rest of the site holds itself to. */
@media (max-width:640px){
  .toc ul,.toc ol{columns:1}
  .toc a{display:inline-flex;align-items:center;min-height:24px}
}

/* callouts */
.callout{background:var(--green-soft);border:1px solid rgba(25,107,84,0.18);border-radius:12px;
  padding:20px 24px;margin:24px 0;color:var(--ink-2)}
.callout strong{color:var(--green-2)}

/* tables */
.table-scroll{overflow-x:auto;margin:22px 0;border:1px solid var(--hair-2);border-radius:10px}
.table-scroll table{border-collapse:collapse;width:100%;min-width:520px;font-size:0.92rem}
.table-scroll th,.table-scroll td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--hair-2);vertical-align:top}
.table-scroll th{background:var(--paper-2);font-weight:600;color:var(--ink);font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase}
.table-scroll tr:last-child td{border-bottom:0}

/* ---------- news / blog index ---------- */
.news-list{padding:clamp(40px,6vw,72px) 0 clamp(90px,12vw,150px)}
.news-row{display:flex;align-items:baseline;gap:20px;padding:26px 0;border-bottom:1px solid var(--hair-2);transition:padding-left 240ms var(--ease)}
.news-row:hover{padding-left:8px}
.news-date{font-size:0.82rem;color:var(--ink-3);letter-spacing:0.04em;white-space:nowrap;flex:none;width:130px}
.news-title{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.2vw,28px);letter-spacing:-0.008em;color:var(--ink);flex:1}
.news-arrow{color:var(--green);font-size:1.1rem;transition:transform 240ms var(--ease)}
.news-row:hover .news-arrow{transform:translateX(5px)}
@media (max-width:640px){.news-row{flex-wrap:wrap;gap:6px}.news-date{width:auto}}

/* ---------- single article / announcement post ---------- */
.article{max-width:720px;margin:0 auto;padding:clamp(56px,8vw,104px) var(--gutter) clamp(90px,12vw,150px)}
.back-link{display:inline-block;font-size:0.86rem;font-weight:500;color:var(--ink-3);margin-bottom:36px;transition:color 200ms}
.back-link:hover{color:var(--green-2)}
.article-meta{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.article-tag{font-size:0.7rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--green);
  background:var(--green-soft);border-radius:100px;padding:5px 12px}
.article-date{font-size:0.84rem;color:var(--ink-3)}
.article h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5vw,66px);letter-spacing:-0.014em;line-height:1.04;color:var(--ink)}
.article h1 em{font-style:normal;color:var(--green-2)}
.article-deck{margin-top:22px;font-size:1.2rem;line-height:1.6;color:var(--ink-2)}
.article h2{font-family:var(--serif);font-weight:500;font-size:1.7rem;color:var(--ink);margin:40px 0 12px}
.article p{margin:0 0 18px}
.article a:not(.back-link){color:var(--green-2);border-bottom:1px solid var(--green-soft)}
.article a:not(.back-link):hover{border-color:var(--green)}
.forum-logo-block{margin:32px 0;padding:28px;background:var(--paper-2);border:1px solid var(--hair-2);border-radius:12px;text-align:center}
.forum-logo-block img{height:34px;width:auto;margin:0 auto;filter:grayscale(1)}

/* ---------- footer ---------- */
footer{background:var(--black);color:var(--on-b-3);border-top:1px solid var(--hair-d-2);margin-top:0}
.footer-inner{max-width:1300px;margin:0 auto;padding:30px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:0.85rem}
.footer-inner .logo-mark{width:24px !important;height:24px !important;border-radius:6px}
.footer-inner .fmark{display:inline-flex;align-items:center;gap:10px;color:var(--on-b);font-family:'Newsreader',var(--serif);font-size:1.05rem}
.footer-links{display:flex;gap:24px;flex-wrap:wrap;row-gap:10px}
/* 24px tap-target floor, matching site/app/globals.css. Inline links inside
   the legal prose are deliberately NOT padded out: WCAG 2.5.8 exempts targets
   that sit inline in a sentence, and forcing them would break the line rhythm
   of a long legal document. */
.footer-links a{display:inline-flex;align-items:center;min-height:24px;color:var(--on-b-3);transition:color 200ms var(--ease)}
.footer-links a:hover{color:var(--on-b)}
@media (max-width:560px){.footer-links{gap:16px}}