/* Evenly — public site styling.
 *
 * ⚑ EVERY VALUE BELOW IS A TOKEN FROM THE APP'S DESIGN SYSTEM. Do not invent one here.
 *   colours    src/theme/colors.ts      (lightColors / darkColors)
 *   type ramp  src/theme/typography.ts  (largeTitle 34/41, counter 22/26, headline 17/22,
 *                                        body 17/22, subhead 15/20, footnote 13/18, caption 12/16)
 *   spacing    src/theme/spacing.ts     (8pt rhythm: 4 8 16 24 32 40; radius 8/12/16)
 *
 * ⚑ LIGHT ONLY, DELIBERATELY. The APP has a dark theme (darkColors) because it is a tool people
 *   use at night at a dinner table. THIS is the public face of the brand — a marketing and legal
 *   surface that should look the same to everyone who is sent it, including an App Store reviewer
 *   and a carrier reviewer. Auto-switching on the visitor's OS setting made the brand indigo sit
 *   on a near-black canvas, which is not how Evenly presents itself.
 *   To restore auto-dark: re-add a prefers-color-scheme block redefining the tokens to darkColors.
 *
 * ⚑ THE TYPEFACE IS THE SYSTEM FONT, DELIBERATELY. typography.ts sets
 *   USE_SERIF_TITLES = false and USE_SERIF_WORDMARK = false — the owner rejected the
 *   LT Remark serif on device and the all-SF direction won. A serif display face here
 *   would contradict a settled decision, not merely differ from it.
 */

:root {
  /* lightColors — src/theme/colors.ts */
  --brand:        #414BB2;  /* brandPrimary */
  --on-brand:     #FFFFFF;  /* onBrand      */
  --canvas:       #FFFFFF;  /* bgCanvas     */
  --surface:      #F4F4F6;  /* bgSurface    */
  --text:         #101019;  /* textPrimary  */
  --muted:        #808080;  /* textMuted    */
  --hairline:     #E4E4EA;  /* hairline     */
  --summary-bg:   #EEF1FC;  /* summaryBg    */
  --tint-soft:    #F2F5FD;  /* bgTintSoft   */

  /* spacing.ts — 8pt rhythm */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --sp-xxl: 40px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --measure: 38rem;
}


* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* ⚑ The brand bar. The single strongest brand signal on the page, and the reason these
   pages read as Evenly rather than as a generic legal template. */
body {
  margin: 0;
  border-top: 4px solid var(--brand);
  padding: var(--sp-xl) var(--sp-md) var(--sp-xxl);
  background: var(--canvas);
  color: var(--text);
  font: 400 17px/1.55 var(--font);   /* body — 17/22 */
}

main { max-width: var(--measure); margin: 0 auto; }

a { color: var(--brand); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }

header {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: var(--sp-lg);
  margin-bottom: var(--sp-xl);
}

/* Wordmark — SF Pro, not the serif (USE_SERIF_WORDMARK = false) */
.wordmark {
  display: inline-block;
  font-size: 22px; line-height: 26px; font-weight: 700;   /* counter role */
  letter-spacing: -0.01em;
  color: var(--brand);
  text-decoration: none;
  margin-bottom: var(--sp-lg);
}

h1 {                                    /* largeTitle — 34/41, 700 */
  font-size: 34px; line-height: 41px; font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-sm);
  text-wrap: balance;
}

h2 {                                    /* counter — 22/26 */
  font-size: 22px; line-height: 26px;
  /* ⚑ 550, NOT the token's 700 — a deliberate OWNER OVERRIDE (S77), the one value on this page
     that does not come from the design system. Sixteen headings in brand indigo at 700 shouted;
     550 keeps the hierarchy and lets the colour do the work. SF Pro is variable on Apple
     platforms so this renders as a true intermediate weight; elsewhere it rounds to 500/600 and
     still reads lighter than 700. Do NOT "restore" this to 700 to match typography.ts. */
  font-weight: 550;
  color: var(--brand);                  /* brandPrimary — the brand reads down the whole page */
  letter-spacing: -0.01em;
  margin: var(--sp-xl) 0 var(--sp-sm);
  text-wrap: balance;
}

h3 {                                    /* headline — 17/22, 600 */
  font-size: 17px; line-height: 22px; font-weight: 600;
  color: var(--text);
  margin: var(--sp-lg) 0 var(--sp-xs);
}

p { margin: 0 0 var(--sp-md); }
ul, ol { padding-left: var(--sp-lg); margin: 0 0 var(--sp-md); }
li { margin: var(--sp-xs) 0; }

.updated { color: var(--muted); font-size: 15px; line-height: 20px; margin: 0; }  /* subhead */
.lede { font-size: 17px; line-height: 24px; color: var(--muted); margin-top: var(--sp-md); }

.panel {                                /* summaryBg — the app's landing summary panel tint */
  background: var(--summary-bg);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-md);
  padding: var(--sp-md) var(--sp-lg);
  margin: var(--sp-lg) 0;
}
.panel h2 { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: var(--sp-md) 0; font-size: 15px; line-height: 20px; }
th, td {
  text-align: left; vertical-align: top;
  padding: var(--sp-sm) var(--sp-md) var(--sp-sm) 0;
  border-bottom: 1px solid var(--hairline);
}
th { font-weight: 600; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* The capitalised liability clauses stay readable — subhead size, not shouting at body size. */
.legalcaps { font-size: 15px; line-height: 21px; }

footer {
  margin-top: var(--sp-xxl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 13px; line-height: 18px;   /* footnote */
}
footer a { color: var(--muted); }

@media (max-width: 30rem) {
  body { padding: var(--sp-lg) var(--sp-md) var(--sp-xl); }
  h1 { font-size: 28px; line-height: 34px; }   /* title role */
  h2 { font-size: 20px; line-height: 25px; }   /* weight inherits the 550 above */
}