/* Timeheat landing: self-contained, no build step; light-only by design.
   The token block below is a verbatim copy of design/tokens.css, enforced by
   `make check-tokens`. The dark showcase band is a data-theme="dark" subtree,
   the same mechanism the app uses for its dark theme. */

/* BEGIN design tokens (verbatim copy of design/tokens.css) */
/* timeheat design tokens — "Crisp": flat, technical, rose on warm stone.
 * Generated from design-system.dc.html (the authored design system).
 * Drop into any page; components read these custom properties.
 * Light on :root; add data-theme="dark" (or "light") on any element to switch —
 * the attribute re-declares the properties, so it scopes to a subtree as
 * happily as to the document. */

:root {
  /* surfaces & lines */
  --bg: #e7e5df;            /* page background — warm stone */
  --card: #ffffff;          /* card & surface fill */
  --card-bd: #e7e5e4;       /* card / field border */
  --hair: #f0eeec;          /* hairline dividers, subtle fills */
  --field-bd: #e7e5e4;      /* form control border */

  /* text */
  --ink: #1c1917;           /* primary text, headings */
  --muted: #78716c;         /* secondary text, body copy */
  --faint: #a8a29e;         /* labels, captions, placeholders */

  /* brand — rose (per-poll overridable; derived tints re-resolve via .branded) */
  --rose: #ff0043;                                       /* accent, CTAs, fills & icons — never text */
  --rose-ink: color-mix(in srgb, var(--rose), #000 28%); /* accent text — h1, links, copy on tint */
  --rose-deep: #b80030;                                  /* band fill under white copy */
  --rose-bg: color-mix(in srgb, var(--rose) 8%, #fff);   /* tint fill */
  --rose-bd: color-mix(in srgb, var(--rose) 24%, #fff);  /* tint border */
  --pro-gold: #8a6d1a;      /* Pro badge (brightened in dark) */

  /* status & votes */
  --ok-fg: #177347;         /* success / open status */
  --ok-bg: #e7f5ed;         /* success badge fill */
  --danger: #b91c1c;        /* destructive actions, errors */
  --pick-green: #1f8a5b;    /* "my vote — free" marker */
  --pick-amber: #d99408;    /* "my vote — if need be" marker */

  /* heatmap — a scale of its own, not a tint of --rose (see ramp note below) */
  --heat-base: #e11d48;         /* the ramp all cells mix from */
  --heat-full: #ff0043;         /* all-free slot fill */
  --heat-full-outline: #9f1239; /* landing hero variant of the all-free outline */
  --heat-maybe-tint: #fff1f2;   /* if-need-be stripe gap (opaque) */
  --heat-empty: #f1efed;        /* empty / zero-overlap slot */
  --heat-strong: #1c1917;       /* peak-overlap outline */
  --heat-lo-fg: #7f0f2e;        /* low-count cell text */

  /* axes */
  --axis-hour: #44403c;     /* hour axis labels */
  --axis-sub: #cdc8c3;      /* half-hour / past labels */

  /* type — Archivo for everything, mono for machine values ONLY */
  --font: 'Archivo', sans-serif;
  --mono: 'JetBrains Mono', monospace; /* hex, time-zone codes, spec — never times or labels */
  --fs-display: 50px;       /* 700 / -.03em */
  --fs-h2: 32px;            /* 700 / -.02em */
  --fs-h3: 18px;            /* 600 / -.02em */
  --fs-body: 15px;          /* 400 / 1.5 */
  --fs-small: 12px;         /* 400 */
  --ls-display: -.03em;
  --ls-tight: -.02em;       /* h1/h2/h3 default */
  --ls-label: .1em;         /* uppercase labels */
  --ls-eyebrow: .14em;      /* section kickers */
  --ls-wordmark: .16em;     /* TIMEHEAT wordmark */

  /* radius — 8px is the default; 4px only on dense cells, 12px only on floating surfaces */
  --radius-sm: 4px;         /* heat cells, calendar days, badges & chips */
  --radius: 8px;            /* buttons, inputs, cards, banners */
  --radius-lg: 12px;        /* modals, popovers, hero surfaces */
  --radius-pill: 999px;     /* pills & avatars */

  /* elevation — one soft card shadow, deeper shadows only for floating layers */
  --shadow: 0 1px 3px rgba(0, 0, 0, .06);
  --shadow-pop: 0 6px 20px rgba(0, 0, 0, .12);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, .28);

  /* spacing rhythm — control padding is component-intrinsic and off-scale */
  --sp-1: 6px;              /* icon / inline gaps */
  --sp-2: 12px;             /* internal small component gaps */
  --sp-3: 20px;             /* standard gap between elements */
  --sp-4: 32px;             /* between blocks / cards, also inner card padding */
  --sp-5: 44px;             /* section gaps */
  --sp-6: 64px;             /* page section gaps */
  --gutter-dense: 4px;      /* dense grid gutter */
  --nav-h: 63px;            /* sticky top-bar height; sticky offsets key off it */
}

/* Light re-declared in full so a subtree can force it inside an otherwise dark
 * page — a 1:1 copy of :root, matching the design system. */
[data-theme="light"] {
  --bg: #e7e5df;
  --card: #ffffff;
  --card-bd: #e7e5e4;
  --hair: #f0eeec;
  --field-bd: #e7e5e4;
  --ink: #1c1917;
  --muted: #78716c;
  --faint: #a8a29e;
  --rose: #ff0043;
  --rose-ink: color-mix(in srgb, var(--rose), #000 28%);
  --rose-deep: #b80030;
  --rose-bg: color-mix(in srgb, var(--rose) 8%, #fff);
  --rose-bd: color-mix(in srgb, var(--rose) 24%, #fff);
  --pro-gold: #8a6d1a;
  --ok-fg: #177347;
  --ok-bg: #e7f5ed;
  --danger: #b91c1c;
  --pick-green: #1f8a5b;
  --pick-amber: #d99408;
  --heat-base: #e11d48;
  --heat-full: #ff0043;
  --heat-full-outline: #9f1239;
  --heat-maybe-tint: #fff1f2;
  --heat-empty: #f1efed;
  --heat-strong: #1c1917;
  --heat-lo-fg: #7f0f2e;
  --axis-hour: #44403c;
  --axis-sub: #cdc8c3;
  --font: 'Archivo', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --fs-display: 50px;
  --fs-h2: 32px;
  --fs-h3: 18px;
  --fs-body: 15px;
  --fs-small: 12px;
  --ls-display: -.03em;
  --ls-tight: -.02em;
  --ls-label: .1em;
  --ls-eyebrow: .14em;
  --ls-wordmark: .16em;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .06);
  --shadow-pop: 0 6px 20px rgba(0, 0, 0, .12);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, .28);
  --sp-1: 6px;
  --sp-2: 12px;
  --sp-3: 20px;
  --sp-4: 32px;
  --sp-5: 44px;
  --sp-6: 64px;
  --gutter-dense: 4px;
  --nav-h: 63px;
}

/* Dark is a sibling color set, not a filter. Only color takes a second value —
 * type, spacing, radius and elevation geometry are theme-invariant, and so are
 * --rose, --rose-deep and the fixed heat anchors. */
[data-theme="dark"] {
  --bg: #0f0d0c;
  --card: #1a1715;
  --card-bd: #2a2522;
  --hair: #272320;
  --field-bd: #2a2522;
  --ink: #f5f3f1;
  --muted: #9a928b;
  --faint: #8c837b;         /* raised for WCAG AA on the dark card */
  --rose-ink: #ffc2ce;      /* the light rose-ink is unreadable on the dark card */
  --rose-bg: color-mix(in srgb, var(--rose) 14%, #1a1715);
  --rose-bd: color-mix(in srgb, var(--rose) 30%, #1a1715);
  --pro-gold: #d4a72c;      /* light gold is illegible on the dark card */
  --ok-fg: #3ecf8e;
  --ok-bg: color-mix(in srgb, #3ecf8e 16%, #1a1715);
  --danger: #f87171;
  --pick-green: #3ecf8e;    /* brightened to stay legible on rose heat */
  --pick-amber: #f5b62e;
  --heat-maybe-tint: #272320;
  --heat-empty: #272320;
  --heat-strong: #f5f3f1;
  --heat-lo-fg: #ffc2ce;
  --axis-hour: #9a928b;
  --axis-sub: #8c837b;      /* AA-legible on dark */
  --shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

/* ---------------------------------------------------------------------------
 * Branding — a Pro poll sets exactly ONE token, --rose, on a .branded scope;
 * every accent and the whole heat ramp re-resolve from it, so a branded poll
 * reads as one palette instead of a customer button next to a timeheat
 * heatmap. Unbranded values are hand-tuned literals; branding substitutes the
 * closest derived analogue. Neutrals, --heat-strong, --heat-empty and both
 * axis tiers are never brand-dependent.
 * ------------------------------------------------------------------------- */
.branded {
  --rose-ink: color-mix(in srgb, var(--rose), #000 28%);
  --rose-deep: color-mix(in srgb, var(--rose), #000 28%);
  --rose-bg: color-mix(in srgb, var(--rose) 8%, #fff);
  --rose-bd: color-mix(in srgb, var(--rose) 24%, #fff);
  --heat-base: color-mix(in srgb, var(--rose), #000 10%);
  --heat-full: var(--rose);
  --heat-full-outline: color-mix(in srgb, var(--rose), #000 38%);
  --heat-maybe-tint: color-mix(in srgb, var(--rose) 6%, #fff);
}

[data-theme="dark"] .branded {
  --rose-ink: color-mix(in srgb, var(--rose) 28%, #fff);
  --rose-bg: color-mix(in srgb, var(--rose) 14%, var(--card));
  --rose-bd: color-mix(in srgb, var(--rose) 30%, var(--card));
  --heat-maybe-tint: color-mix(in srgb, var(--rose) 10%, var(--card));
}

/* ---------------------------------------------------------------------------
 * Heat ramp — the availability heatmap does NOT use --rose directly.
 * Cell fill:      rgba(225, 29, 72, a)   where a = 0.16 + 0.84 * (free / total)
 * Cell text:      #fff when a > 0.55, else var(--heat-lo-fg)
 * Full (all free):background var(--heat-full);
 *                 box-shadow: inset 0 0 0 2px var(--heat-strong)
 *                 (landing .hm outlines with var(--heat-full-outline) instead)
 * If-need-be:     repeating-linear-gradient(45deg,
 *                   var(--heat-base) 55% 0 3px, transparent 3px 6px)
 *                 over var(--heat-maybe-tint)
 * Legend ramp:    a = .16 / .4 / .7 / 1
 * ------------------------------------------------------------------------- */
/* END design tokens */

/* --------------------------------------------------------------------------
 * Landing-local values with no design-system token. Designer follow-up:
 * add tiers to tokens.json or re-tone the landing onto the system ramp.
 * The landing also keeps its shipped display sizes (60/38/46/44), which
 * differ from both the type scale and design/mockups/landing.html (50/32/40).
 * ------------------------------------------------------------------------ */
:root {
  --land-copy: #57534e;        /* lead and nav-link grey, darker than --muted */
  --land-copy-strong: #44403c; /* article body ink */
  --land-alt: #faf9f7;         /* alt band tint, lighter than --hair */
  --land-dark-copy: #d9d3ce;   /* dark-band body copy, softer than dark --ink */
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* scrollbars carry the brand, same treatment as app.css: a 9px rose thumb
   held 4px off every edge via the -webkit- parts (Chromium + Safari), with
   the two standard properties as the Firefox fallback, scoped away from
   Chromium because a set standard property disables the parts below */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; }
  html { scrollbar-color: var(--rose) transparent; }
}
::-webkit-scrollbar { width: 17px; height: 17px; }
::-webkit-scrollbar-thumb {
  background: var(--rose); border-radius: var(--radius-pill);
  border: 4px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-track { background: transparent; }
body {
  font-family: var(--font); color: var(--ink); background: var(--card);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
/* a11y guardrail: keyboard focus shows the 2px rose ring on every interactive element */
:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
/* machine values only (time-zone codes, hex, spec), never times or labels */
.mono { font-family: var(--mono); }

.wrap { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
/* anchored sections land below the sticky nav instead of under it */
[id] { scroll-margin-top: 76px; }
.band { padding-top: 84px; padding-bottom: 84px; }
.band-alt { background: var(--land-alt); }
.band-hair { border-top: 1px solid var(--card-bd); border-bottom: 1px solid var(--hair); }
.band-top { border-top: 1px solid var(--card-bd); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius); font-weight: 600; font-size: 13px; padding: 9px 16px;
  border: 1px solid transparent; cursor: pointer;
  transition: opacity .15s, background .15s, filter .15s;
  white-space: nowrap;
}
.btn-lg { font-size: 15px; padding: 14px 26px; }
.btn-rose { background: var(--rose); color: #fff; }
.btn-rose:hover { filter: brightness(0.94); }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--card); }
.btn-white { background: var(--card); color: var(--ink); }
.btn-white:hover { opacity: .9; }
.btn.block { width: 100%; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--card) 86%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 15px 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: 9px; }
.mark { width: 18px; height: 18px; flex: none; }
.mark.sm { width: 16px; height: 16px; }
.wordmark { font-size: 13px; font-weight: 700; letter-spacing: var(--ls-wordmark); text-transform: uppercase; }
.nav-links { display: flex; gap: 30px; }
.nav-links a { font-size: 13px; font-weight: 500; color: var(--land-copy); }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .link { font-size: 13px; font-weight: 500; color: var(--ink); }
.langswitch { display: inline-flex; gap: 2px; }
.langswitch a { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--faint); padding: 3px 7px; border-radius: var(--radius-sm); }
.langswitch a:hover { color: var(--ink); background: var(--hair); }
.langswitch a.on { color: var(--card); background: var(--ink); }

/* ---------- typography ---------- */
.display { margin: 0 0 22px; font-size: 60px; line-height: 1.0; font-weight: 700; letter-spacing: -0.04em; }
.lead { margin: 0 0 32px; font-size: 18px; line-height: 1.55; color: var(--land-copy); max-width: 440px; }
.lead.center { max-width: 540px; margin-left: auto; margin-right: auto; text-align: center; }
.lead.muted { color: var(--faint); }
.h2 { margin: 0 0 44px; font-size: 38px; font-weight: 700; letter-spacing: -0.03em; }
.h2.narrow { max-width: 640px; }
.h2.center { text-align: center; }
.h2.light { color: var(--ink); }
.h2.xl { font-size: 46px; letter-spacing: -0.035em; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.eyebrow-dot { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.eyebrow-dot::before { content: ""; width: 9px; height: 9px; background: var(--rose); flex: none; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-top: 96px; padding-bottom: 80px; }
.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-note { margin: 14px 0 0; font-size: 13px; color: var(--faint); }
.hero-art { position: relative; }
.hero-art-bg { position: absolute; inset: -28px -28px -28px -10px; background: var(--land-alt); border-radius: var(--radius-lg); }
.hero-art-fg { position: relative; }

/* ---------- cards / grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { border: 1px solid var(--card-bd); border-radius: var(--radius); padding: 28px; background: var(--card); }
.card-title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 9px; }
.card-title.sm { font-size: 16px; margin-bottom: 7px; }
.card-body { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.card-body.sm { font-size: 13.5px; line-height: 1.55; }
.step-no {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  background: var(--rose); color: #fff; font-size: 13px;
  font-weight: 700; border-radius: var(--radius-sm); margin-bottom: 18px;
}
.case-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }

/* ---------- features ---------- */
.feature-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--card-bd); border: 1px solid var(--card-bd); border-radius: var(--radius); overflow: hidden;
}
.feature { background: var(--card); padding: 28px; position: relative; }
.feature-icon { height: 30px; display: flex; align-items: center; margin-bottom: 16px; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 24px; }
.bars i { width: 8px; border-radius: 2px; background: var(--rose); display: block; }
.swatch-maybe {
  width: 40px; height: 20px; border-radius: var(--radius-sm); border: 1px solid var(--rose-bd);
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--heat-base) 60%, transparent) 0 3px, var(--heat-maybe-tint) 3px 6px);
}
.toggle { width: 36px; height: 20px; border-radius: 999px; background: var(--rose); position: relative; }
.toggle span { position: absolute; top: 2px; left: 18px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.avatars { display: flex; }
.avatars b {
  width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in srgb, var(--rose) 16%, var(--card)); border: 2px solid var(--card);
  margin-left: -7px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--rose-ink);
}
.avatars b:first-child { margin-left: 0; }
.mono.strong { font-size: 13px; font-weight: 700; color: var(--ink); }
.feat-ic { font-size: 22px; color: var(--rose); }
.swatch-brand { display: flex; gap: 4px; }
.swatch-brand i {
  width: 16px; height: 22px; border-radius: var(--radius-sm);
  border: 1px solid var(--rose-bd); display: block;
}
.swatch-brand i:nth-child(1) { background: var(--rose); }
.swatch-brand i:nth-child(2) { background: var(--rose-deep); }
.swatch-brand i:nth-child(3) { background: color-mix(in srgb, var(--rose) 35%, var(--card)); }
.feature .ribbon { border-top-right-radius: 0; }

/* ---------- dark showcase ---------- */
/* the band is a data-theme="dark" subtree, the same mechanism the app uses;
   the heatmap inside is a plain .hm, so it renders exactly like dark mode */
/* inherited color computes at the light body, so re-anchor it here or the
   subtree's unstyled text keeps the light ink */
.dark { background: var(--bg); color: var(--ink); }
.dark-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-top: 88px; padding-bottom: 88px; }
.ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ticks li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.45; color: var(--land-dark-copy); }
.tick { width: 15px; height: 15px; background: var(--rose); border-radius: 2px; flex: none; margin-top: 2px; }

/* ---------- blog ---------- */
.article { max-width: 720px; padding-top: 72px; padding-bottom: 84px; }
.article .eyebrow a { color: var(--rose-ink); }
.article-title { margin: 0 0 14px; font-size: 38px; line-height: 1.12; font-weight: 700; letter-spacing: -0.03em; }
.article-lead { margin: 0 0 36px; font-size: 18px; line-height: 1.55; color: var(--land-copy); }
.article h2 { margin: 36px 0 12px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.article p { margin: 0 0 16px; font-size: 16px; line-height: 1.7; color: var(--land-copy-strong); }
.article-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 44px; }
.bloglist { display: flex; flex-direction: column; gap: 16px; }
.blogcard { display: block; transition: border-color .15s; }
.blogcard:hover { border-color: var(--ink); }

/* ---------- pricing ---------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 980px; margin: 0 auto; }
.price { display: flex; flex-direction: column; position: relative; padding: 32px; }
.price-tag { font-size: 11px; font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--faint); margin-bottom: 18px; }
.price-amount { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.price-amount .num { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; }
.price-amount .unit { font-size: 16px; font-weight: 600; color: var(--land-copy); }
.price .card-body { margin-bottom: 24px; }
.price-alt { margin: -4px 0 10px; font-size: 13.5px; font-weight: 600; color: var(--rose-ink); }
.price .btn { margin-top: auto; }
.price-featured { border-color: var(--ink); }
/* Teams coming-soon: a full-width banner card with the waitlist form */
.price-teams { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.price-teams .teams-copy { max-width: 560px; }
.price-teams .price-tag { margin-bottom: 8px; }
.ribbon-soon { background: var(--ink); }
.teams-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.teams-input { padding: 10px 12px; border: 1px solid var(--field-bd); border-radius: var(--radius); font: inherit; font-size: 14px; min-width: 220px; }
.teams-input:focus { outline: 2px solid var(--rose); outline-offset: 1px; border-color: transparent; }
.teams-joined { font-weight: 600; color: var(--ink); }
.teams-err { flex-basis: 100%; font-size: 12.5px; color: var(--danger); margin: 0; }
/* waitlist thank-you dialog */
.teams-modal { border: none; border-radius: var(--radius-lg); padding: 0; max-width: 400px; width: calc(100vw - 48px); }
.teams-modal::backdrop { background: color-mix(in srgb, var(--ink) 50%, transparent); }
.teams-modal-card { padding: 30px 28px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.teams-modal-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--land-copy-strong); }
.ribbon {
  position: absolute; top: 0; right: 0; background: var(--rose); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase;
  padding: 5px 10px; border-bottom-left-radius: var(--radius); border-top-right-radius: var(--radius);
}

/* ---------- faq ---------- */
.narrow-wrap { max-width: 820px; }
.faq { border-top: 1px solid var(--card-bd); }
.faq details { border-bottom: 1px solid var(--card-bd); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 0; display: flex;
  align-items: baseline; justify-content: space-between; gap: 20px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq .sign { flex: none; }
.faq .sign::after { content: "+"; font-size: 18px; color: var(--rose); line-height: 1; }
.faq details[open] .sign::after { content: "\2212"; }
.faq .answer { font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 680px; margin-top: -4px; padding-bottom: 22px; }
.answer-link { display: inline-block; margin-top: 11px; font-size: 13.5px; font-weight: 600; color: var(--rose-ink); }

/* ---------- final CTA ---------- */
.cta-rose { background: var(--rose); }
.cta-rose .h2 { color: #fff; }
.center-col { text-align: center; padding-top: 88px; padding-bottom: 88px; }
.cta-sub { color: color-mix(in srgb, #fff 88%, var(--rose)); max-width: 460px; margin: 0 auto 34px; }

/* ---------- footer ---------- */
.footer { background: var(--card); border-top: 1px solid var(--hair); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-top: 40px; padding-bottom: 40px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.footer-links a { font-size: 13px; color: var(--muted); }
.footer-links a:hover { color: var(--ink); }
.copyright { font-size: 11px; color: var(--faint); }

/* ---------- heatmap mock ---------- */
/* mirrors the app's heatmap exactly (design/CLAUDE.md: the landing heatmap
   must match the app): 26px cells, radius-sm, dense 4px gutter, 44px axis */
.hm { background: var(--card); border: 1px solid var(--card-bd); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-pop); }
.hm-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.hm-title { font-size: 14px; font-weight: 600; }
.hm-best { font-size: 11px; font-weight: 600; color: var(--rose-ink); background: var(--rose-bg); border: 1px solid var(--rose-bd); padding: 3px 9px; border-radius: 999px; }
.hm-grid { display: flex; flex-direction: column; gap: var(--gutter-dense); }
.hm-days, .hm-row { display: grid; grid-template-columns: 44px repeat(4, 1fr); gap: var(--gutter-dense); align-items: center; }
.hm-t { font-size: 10px; color: var(--faint); text-align: right; padding-right: 4px; }
.hm-d { text-align: center; line-height: 1.1; }
.hm-d b { display: block; font-size: 9px; letter-spacing: 0.06em; color: var(--faint); }
.hm-d i { font-style: normal; font-size: 12px; font-weight: 600; }
/* cell fill is the documented ramp: rgba of --heat-base at a = .16 + .84 * share */
.hm-c { height: 26px; border-radius: var(--radius-sm); background: rgba(225, 29, 72, var(--a, 0.07)); }
.hm-c.full { background: var(--heat-full); box-shadow: inset 0 0 0 2px var(--heat-full-outline); }
.hm-c.maybe { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--heat-base) 55%, transparent) 0 3px, var(--heat-maybe-tint) 3px 6px); }
.hm-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.hm-scale { display: flex; }
.hm-scale i { width: 18px; height: 10px; background: rgba(225, 29, 72, var(--a)); }
.hm-rep { font-size: 10px; color: var(--faint); }

/* ---------- legal pages (terms / privacy) ---------- */
.legal { max-width: 720px; margin: 0 auto; padding-top: 72px; padding-bottom: 84px; }
.legal h1 { margin: 0 0 6px; font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.03em; }
.legal .effective { margin: 0 0 36px; font-size: 13px; color: var(--faint); }
.legal h3 { margin: 30px 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.legal p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--land-copy); }
.legal a { color: var(--rose-ink); font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  .nav-links { display: none; }
  .hero, .dark-grid { grid-template-columns: 1fr; gap: 36px; }
  .grid-3, .feature-grid, .pricing { grid-template-columns: 1fr; }
  .display { font-size: 44px; }
  .h2, .h2.xl { font-size: 30px; }
  .band { padding-top: 56px; padding-bottom: 56px; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; }
}

@media (max-width: 560px) {
  /* phones: tighten the bar so the logo + "Create a poll" + language toggle
     fit on one row without the button text wrapping */
  .nav-inner { padding: 13px 16px; }
  .nav-cta { gap: 8px; }
  /* drop the secondary link: signed-in users reach their polls via the logo
     (-> /app), signed-out users reach sign-in through the create flow */
  .nav-cta .link { display: none; }
}