/* Suite Routes — shared styles for the legal pages (privacy, terms, disclosure)
   Rebuilt 16 Aug 2026 onto the homepage design tokens.
   Appearance only; no legal copy was changed. */

:root{
  --dark:#0B2B1B; --dark-2:#0f3623; --page:#FDFBF7; --quiet:#F2EFE6;
  --mint:#ECF2EC; --sand:#F8F0DF;
  --gold:#D4AF37; --goldtext:#7d5f1a; --burgundy:#58111A;
  --ink:#1C1C1C; --ink-2:#4a4a46; --ink-3:#6f6f69;
  --rule:#ddd8cc; --rule-dark:#26492f;
  --on-dark:#F4F1E8;
  /* Long-form read for minutes, so these follow the app's lighter tones
     (10.71 and 8.45 on --dark), not the homepage's. */
  --on-dark-2:#dcd8cc; --on-dark-3:#b9c4b4;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --max:1140px; --measure:760px; --gutter:32px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
[id]{scroll-margin-top:72px}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.7;text-wrap:pretty;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
h1,h2,h3,.fig{font-family:var(--serif);font-weight:600;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
a{color:var(--goldtext)}
a:hover{color:var(--burgundy)}
strong{font-weight:600;color:var(--ink)}
.num,td,th{font-variant-numeric:tabular-nums}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.measure{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)}

/* ---- sticky site bar — matches the homepage header ---- */
.sitebar{position:sticky;top:0;z-index:40;background:var(--dark);
  border-bottom:1px solid var(--rule-dark)}
.sitebar-in{max-width:var(--max);margin:0 auto;padding:13px var(--gutter);
  display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.sitebar .home{font-family:var(--serif);font-size:20px;font-weight:600;
  color:var(--on-dark);display:flex;align-items:center;gap:9px;
  text-decoration:none;margin-right:6px}
.sitebar .home span{color:var(--gold);font-size:17px}
.sitebar a{color:var(--on-dark-2);text-decoration:none;font-size:14.5px}
.sitebar a:hover{color:var(--on-dark)}
.sitebar .spacer{margin-left:auto}
.sitebar a[aria-current="page"]{color:var(--gold)}

/* ---- title band ---- */
.doc-head{background:var(--dark);color:var(--on-dark);padding:56px 0 52px}
.doc-head .kicker{font-family:var(--sans);font-size:12.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.doc-head h1{font-size:44px;line-height:1.08;letter-spacing:-.025em;
  color:var(--on-dark);margin:0 0 16px}
.updated{margin:0;font-size:15px;color:var(--on-dark-3)}

/* ---- document body ---- */
.doc{padding:56px 0 72px}
.doc p{margin:0 0 18px;color:var(--ink-2)}
.doc p strong{color:var(--ink)}
.doc h2{font-size:27px;line-height:1.2;letter-spacing:-.02em;color:var(--ink);
  margin:52px 0 14px;padding-top:26px;border-top:1px solid var(--rule)}
.doc h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.doc h3{font-size:19px;line-height:1.3;color:var(--ink);margin:32px 0 8px}
.doc ul{margin:0 0 18px;padding-left:22px}
.doc li{margin-bottom:9px;color:var(--ink-2)}
.doc li strong{color:var(--ink)}
.doc hr{border:0;border-top:1px solid var(--rule);margin:44px 0}

.lede{--ink-3:#4a4a46;background:var(--quiet);border:1px solid var(--rule);
  border-left:3px solid var(--gold);border-radius:5px;padding:26px 28px;
  margin:0 0 44px}
.lede p{font-family:var(--serif);font-size:19px;line-height:1.55;
  color:var(--ink);margin:0 0 14px}
.lede p:last-child{margin-bottom:0}

.contact{background:var(--mint);border:1px solid var(--rule);border-radius:5px;
  padding:20px 24px;margin:0 0 8px}
.contact p{margin:0}

/* ---- footer — homepage structure ---- */
.foot{background:var(--dark);color:var(--on-dark-3);padding:64px 0 40px}
.fcols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px}
.fcols h4{font-family:var(--sans);font-size:12.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.fcols ul{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:11px;font-size:15px}
.fcols a{color:var(--on-dark-2);text-decoration:none}
.fcols a:hover{color:var(--on-dark);text-decoration:underline}
.fbrand .mark{font-family:var(--serif);font-size:20px;color:var(--on-dark);
  display:flex;align-items:center;gap:9px;margin:0 0 14px}
.fbrand .mark span{color:var(--gold);font-size:17px}
.fbrand p{margin:0;font-size:15px;color:var(--on-dark-3);max-width:22em}
.flegal{margin:52px 0 0;padding-top:26px;border-top:1px solid var(--rule-dark);
  font-size:13.5px;line-height:1.6;color:var(--on-dark-3);max-width:74em}

/* The focus ring is the only thing a keyboard user has to tell them where
   they are, so it has to be visible on every surface it can land on. One
   colour cannot do that here. Measured against the four backgrounds these
   pages actually use, and against the 3:1 that WCAG 2.1 SC 1.4.11 asks of a
   non-text indicator:

              --page  --quiet  --mint  --dark
     --gold     2.03     1.83    1.85    7.26
     --goldtext 5.77     5.18    5.24    2.56

   --gold was used everywhere and failed on all three light surfaces — a ring
   at 2.03:1 on the page body is very close to no ring at all. So the default
   is now --goldtext, which is what the rest of the site already uses for a
   ring on a light background, and --gold is kept only where it earns its
   7.26: inside the dark bars, where --goldtext would fail instead.
   outline-offset draws the ring outside the element, so the colour behind it
   is the surface, not the link. */
a:focus-visible,button:focus-visible{outline:3px solid var(--goldtext);
  outline-offset:2px}
/* Written out in full rather than as `outline-color`, which would say the same
   thing in less space. The check that measures these rings reads a whole
   `outline: Npx solid var(--token)` declaration; a bare outline-color would be
   invisible to it, and this rule would go unmeasured. Twenty saved characters
   are not worth an unchecked focus ring. */
.sitebar a:focus-visible,.doc-head a:focus-visible,
.foot a:focus-visible,.foot button:focus-visible{outline:3px solid var(--gold);
  outline-offset:2px}

@media (max-width:1000px){
  .fcols{grid-template-columns:repeat(2,1fr);gap:32px}
  .fbrand{grid-column:1/-1}
}
@media (max-width:640px){
  :root{--gutter:32px}
  .sitebar-in{gap:14px 18px;padding-top:11px;padding-bottom:11px}
  .sitebar .home{font-size:17px;width:100%;margin-right:0}
  .sitebar .spacer{margin-left:0}
  .doc-head{padding:40px 0 36px}
  .doc-head h1{font-size:32px}
  .doc{padding:40px 0 56px}
  .doc h2{font-size:23px;margin-top:40px;padding-top:22px}
  .lede{padding:20px 20px}
  .lede p{font-size:17.5px}
  .fcols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto}
}