/* "Family" look — Agora restyled toward tilt.now and Backchannel.
   Same type family (Geist + Geist Mono), cool neutrals,
   newsroom section rules, and green as the family colour at Agora's volume. */

html[data-look="family"] {
  /* neutrals — tilt.now's cool greys */
  --bg: #F4F4F4; --band: #EBEBEB; --panel: #FFFFFF; --card: #FFFFFF;
  --line: #DEDEDE;
  --ink: #0A0A0A; --ink-2: #4D4D4D; --ink-3: #737373;
  --mut: #4D4D4D; --dim: #737373;
  --top: #FBFBFB; --side: #ECECEC; --side-2: #E1E1E1; --edge: #2E2E2E; --edge-soft: #B5B5B5;

  /* accent — deep emerald, Backchannel's green at a lower volume */
  --accent: #0A7A50; --accent-tint: #E2F2EA;
  --chip-bg: #0A0A0A; --chip-fg: #FFFFFF;
  --seam: #1C1C1C;
  --gold: #0A7A50; --gold-lt: #4FE38C; --deep: #0C1C16; --paper: #F4F4F4;
  --gold-rgb: 10 122 80; --gold-lt-rgb: 79 227 140; --gold-glow-rgb: 79 227 140;
  --acc-dim: #E2F2EA;
  --pos: #0A7A50; --neg: #C0362C; --line-mint: 225 255 238; --ceo-rgb: 8 20 15; --revoked: #B42318;

  /* feature card (home + agent) and machine cards (advisors) */
  --feat-bg: #0C1C16; --feat-raise: #173329; --feat-line: rgba(225, 255, 238, .12);
  --feat-text: #E7F1EB; --feat-mut: #8BA698; --feat-acc: #4FE38C;
  --m-bg: #0C1C16; --m-bg2: #08140F; --m-raise: #173329; --m-line: rgba(225, 255, 238, .11);
  --m-text: #E7F1EB; --m-mut: #8BA698; --m-dim: #587063; --m-acc: #4FE38C; --m-pos: #4FE38C;

  /* type — tilt.now's family */
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --card-shadow: 0 18px 44px -26px rgba(10, 10, 10, .32);
}
html[data-look="family"] body { background: var(--bg); }

/* SVG fills drawn with the old gold */
html[data-look="family"] [fill="#A06A12"] { fill: var(--gold); }
html[data-look="family"] [stop-color="#D4B483"] { stop-color: var(--gold-lt); }
html[data-look="family"] [stop-color="#B8863B"] { stop-color: var(--accent); }
html[data-look="family"] #donut { color: var(--accent); }

/* headings: Geist, a touch lighter and tighter than the current look */
html[data-look="family"] h1,
html[data-look="family"] h2,
html[data-look="family"] h3 { font-family: var(--sans); font-weight: 600; }
html[data-look="family"] h1 { letter-spacing: -.04em; }
html[data-look="family"] .pillars-head h2,
html[data-look="family"] .board-head h2,
html[data-look="family"] .launch h2,

html[data-look="family"] .act-h { letter-spacing: -.035em; }


/* newsroom grammar: a strong rule above each section title */
html[data-look="family"] .pillars-head,
html[data-look="family"] .board-head { border-top: 1px solid var(--ink); padding-top: 18px; }
html[data-look="family"] .cols section > h2 {
  border-top: 1px solid var(--ink); padding-top: 10px; color: var(--ink); letter-spacing: .14em;
}

/* the wordmark carries a small green signal */
html[data-look="family"] .wordmark,
html[data-look="family"] .site-mark { display: inline-flex; align-items: center; gap: 9px; }
html[data-look="family"] .wordmark::before,
html[data-look="family"] .site-mark::before {
  content: ""; flex: none; width: 7px; height: 7px; background: var(--accent);
}

/* the look switch (not part of either design) */
.look-switch {
  position: fixed; right: 16px; bottom: 16px; z-index: 80;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: #111; color: #EEE; border-radius: 999px;
  font: 500 12px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5);
}
.look-switch span { padding: 0 8px 0 10px; color: #9A9A9A; }
.look-switch button {
  font: inherit; color: #CFCFCF; background: transparent; border: 0; cursor: pointer;
  padding: 8px 12px; border-radius: 999px;
}
.look-switch button[aria-pressed="true"] { background: #FFF; color: #111; }
.look-switch button:focus-visible { outline: 2px solid #4FE38C; outline-offset: 1px; }
@media print { .look-switch { display: none; } }

/* the pillar questions carry the accent; the pillars themselves stay ink and grey */
html[data-look="family"] .pillar .q { color: var(--accent); }

/* the job ID is the one signal moment in the hero: neon on the black job bar */
html[data-look="family"] .track .k + b { color: var(--gold-lt); }

/* "Gold" look — the Family structure (Geist, cool greys, section rules, black bars)
   with gold as Agora's only accent: champagne on light, pale gold on black.
   Text-weight gold is #8F6720 (4.6:1 on the grey); brighter gold is for marks only. */
html[data-look="family"][data-gold] {
  --on-mark: #111111;
  --accent: #8F6720; --accent-tint: #F3ECDF; --acc-dim: #F3ECDF;
  --mark: #B8893A;
  --gold: #8F6720; --gold-lt: #D6B46E; --deep: #111111;
  --gold-rgb: 143 103 32; --gold-lt-rgb: 214 180 110; --gold-glow-rgb: 184 137 58;

  /* feature and machine cards: black with gold, tilt.now's black card at Agora's register */
  --feat-bg: #111111; --feat-raise: #1E1E1E; --feat-line: rgba(255, 255, 255, .12);
  --feat-text: #EDEDED; --feat-mut: #9A9A9A; --feat-acc: #D6B46E;
  --m-bg: #111111; --m-bg2: #0A0A0A; --m-raise: #1E1E1E; --m-line: rgba(255, 255, 255, .11);
  --m-text: #EDEDED; --m-mut: #9A9A9A; --m-dim: #6B6B6B; --m-acc: #D6B46E; --m-pos: #6CC295;
}
html[data-look="family"][data-gold] .wordmark::before,
html[data-look="family"][data-gold] .site-mark::before { background: var(--mark); }

/* "Emerald" look — Gold plus deep emerald surfaces. Emerald is a surface, never text;
   gold stays the accent on both the grey page and the emerald cards. */
html[data-look="family"][data-gold][data-emerald] {
  --deep: #0C1C16;
  --feat-bg: #0C1C16; --feat-raise: #173329; --feat-line: rgba(225, 255, 238, .12);
  --feat-text: #E8EFEA; --feat-mut: #8FA396; --feat-acc: #D6B46E;
  --m-bg: #0C1C16; --m-bg2: #08140F; --m-raise: #173329; --m-line: rgba(220, 245, 232, .11);
  --m-text: #E8EFEA; --m-mut: #8FA396; --m-dim: #5C6E64; --m-acc: #D6B46E; --m-pos: #6CC295;
}

/* "Neutral" look — the closest fit to tilt.now: Gold's structure and black cards,
   with gold kept to two brand marks (the wordmark dot and the Launch button).
   Everything else is ink and grey; green and red appear only for gains and losses. */
html[data-look="family"][data-gold][data-neutral] {
  --on-mark: #111111;
  --accent: #2B2B2B; --accent-tint: #EAEAEA; --acc-dim: #EAEAEA;
  --mark: #B8893A;
  --gold: #2B2B2B; --gold-lt: #BDBDBD; --deep: #111111;
  --gold-rgb: 43 43 43; --gold-lt-rgb: 189 189 189; --gold-glow-rgb: 140 140 140;
  --pos: #2E8A17; --neg: #C84437;
  --feat-bg: #111111; --feat-raise: #1E1E1E; --feat-line: rgba(255, 255, 255, .12);
  --feat-text: #EDEDED; --feat-mut: #9A9A9A; --feat-acc: #D4D4D4;
  --m-bg: #111111; --m-bg2: #0A0A0A; --m-raise: #1E1E1E; --m-line: rgba(255, 255, 255, .11);
  --m-text: #EDEDED; --m-mut: #9A9A9A; --m-dim: #6B6B6B; --m-acc: #D4D4D4; --m-pos: #5BC53B;
  --line-mint: 255 255 255; --ceo-rgb: 10 10 10;
}
html[data-look="family"][data-gold][data-neutral] header.bar a.cta-sm:hover,
html[data-look="family"][data-gold][data-neutral] .site-nav a.cta-sm:hover { background: #8F6720; color: #FFF; }

/* every look: dark cards drawn like tilt.now's — 16px corners, white pill buttons with #111 text */
html .hn-list li.hn-feature,
html .path.lead,
html .launch .intro .preview,
html .issue,
html .cta,
html .ro-card { border-radius: 16px; }
html .hn-list li.hn-feature { margin-inline: 0; overflow: hidden; padding: 24px 24px 18px; }
html .feat-about,
html .cta a {
  font-family: var(--sans); font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0; text-transform: none;
  background: #FFFFFF; color: #111111; border: 0; border-radius: 999px; padding: 8px 16px;
}
html .feat-about:hover,
html .cta a:hover,
html .tpl-go a:first-child:hover { background: var(--mark, var(--accent)); color: var(--on-mark, #FFFFFF); }

/* phones: the four-way switch fits on one line */
@media (max-width: 480px) {
  .look-switch { right: 8px; }
  .look-switch span { display: none; }
  .look-switch button { padding: 8px 9px; }
}

/* shared header, every page and every look.
   Launch is a small solid button, so the only underline in the nav marks the current page. */
header.bar a.cta-sm, .site-nav a.cta-sm {
  text-decoration: none; border: 0; border-radius: 0;
  background: var(--ink); color: var(--bg);
  padding: 6px 12px; margin-block: -6px; line-height: 21px;
}
header.bar a.cta-sm:hover, .site-nav a.cta-sm:hover { background: var(--accent); color: var(--bg); }
@media (max-width: 680px) {
  header.bar a.cta-sm, .site-nav a.cta-sm { padding: 6px 10px; }
}
/* the header swaps in place between pages instead of cross-fading (the fade read as a flicker) */
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; }
@media (max-width: 389px) {
  header.bar a.cta-sm, .site-nav a.cta-sm { padding: 6px 8px; }
}

/* gold looks: the Launch button is the one solid gold mark in the header */
html[data-look="family"][data-gold] header.bar a.cta-sm,
html[data-look="family"][data-gold] .site-nav a.cta-sm { background: var(--mark); color: #111; }
html[data-look="family"][data-gold] header.bar a.cta-sm:hover,
html[data-look="family"][data-gold] .site-nav a.cta-sm:hover { background: var(--gold); color: #FFF; }

/* narrow phones: keep the header on screen even before the web font loads */
@media (max-width: 420px) {
  header.bar .corp, .site-nav { gap: 10px; }
  header.bar a.cta-sm, .site-nav a.cta-sm { padding: 6px 8px; }
  html[data-look="family"] .wordmark::before, html[data-look="family"] .site-mark::before { display: none; }
}