/* Layout shared by every marketing page (KAN-223): the reset, the header and
   nav, the hero, the beta request block, the buttons and the footer. Each page
   links tokens.css (the palette), then this file, then its own stylesheet for
   anything page-specific (pricing.css). No build step, no fonts or frameworks
   off-origin: the distribution's CSP is default-src 'self'.

   Colour rules of thumb, measured against the light palette (the tighter of
   the two): --c-ink on --c-bg is 12:1, --c-muted 4.9:1 and --c-ok 6.3:1, so
   those three carry all body-size text. --c-accent (honey) is 4.3:1 and
   --c-primary (sage) 4.2:1 on the page background -- both under WCAG AA for
   body text -- so honey is kept for the logo, rules and fills, and sage for
   button fills, never for small type on the page background. When an accent
   has to be read, tokens.css carries text-safe inks: --c-ink-honey (4.7:1)
   and --c-ink-sage, --c-ok's clearer name (KAN-209; --c-ok survives as an
   alias, and KAN-210 retired --c-card onto the shared --c-surface). Button
   text is --c-primary-ink, not white: white on the dark-mode sage is 2.4:1. */

* { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: rgb(var(--c-bg));
  color: rgb(var(--c-ink));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- header / nav --------------------------------------------------------
   One row: the brand on the left, the links on the right. More pages (Trust,
   Guides, For professionals, Compare) are more <a>s in .site-nav; the row
   wraps under the brand on narrow screens rather than needing a menu. */

.site-header {
  border-bottom: 1px solid rgb(var(--c-line));
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: rgb(var(--c-ink));
  text-decoration: none;
  margin-right: auto;
}
.brand svg { width: 34px; height: auto; display: block; overflow: visible; }
.site-nav { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.site-nav a { text-decoration: none; font-weight: 600; color: rgb(var(--c-muted)); }
.site-nav a:hover { color: rgb(var(--c-ink)); }
.site-nav a[aria-current="page"] { color: rgb(var(--c-ink)); }
/* The app link is the call to action for people who already have an account,
   so it reads as a button rather than another page. */
.site-nav a.nav-cta {
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1.5px solid rgb(var(--c-ok));
  color: rgb(var(--c-ok));
}
.site-nav a.nav-cta:hover { background: rgb(var(--c-primary) / 0.12); }

/* --- buttons ------------------------------------------------------------- */

.pill {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  background: rgb(var(--c-primary));
  color: rgb(var(--c-primary-ink));
  text-decoration: none;
  font: inherit;
  font-weight: 700;
  border: 1.5px solid rgb(var(--c-primary));
  cursor: pointer;
  line-height: 1.3;
}
.pill:hover { opacity: 0.9; }
.pill:disabled { opacity: 0.6; cursor: default; }
.pill.pill-secondary {
  background: transparent;
  border-color: rgb(var(--c-ok));
  color: rgb(var(--c-ok));
}
.pill.pill-secondary:hover { background: rgb(var(--c-primary) / 0.12); opacity: 1; }

/* --- hero ---------------------------------------------------------------- */

.hero {
  text-align: center;
  padding: 3.5rem 0 3rem;
}
.hero .wrap { max-width: 760px; }
.hero-mark { width: 84px; height: auto; margin: 0 auto 1rem; display: block; overflow: visible; }
.hero h1 {
  font-size: 2.6rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: rgb(var(--c-ink));
}
.hero .lede {
  font-size: 1.2rem;
  line-height: 1.5;
  color: rgb(var(--c-muted));
  max-width: 40rem;
  margin: 0 auto 1.75rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
}

/* --- page sections --------------------------------------------------------
   The homepage is a column of <section>s. Unfilled ones (the anchors left for
   KAN-214/215/216/224) are empty elements and render nothing at all. */

main > section:empty { display: none; }

/* --- beta request block (the markup inside .beta-note is KAN-225's and is
       also pinned by backend/tests/test_beta_consent_form.py; only the
       styling lives here) ------------------------------------------------- */

.beta {
  padding: 0 0 3.5rem;
}
.beta-note {
  max-width: 520px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem;
  border: 1px solid rgb(var(--c-line));
  border-top: 4px solid rgb(var(--c-accent));
  border-radius: 14px;
  background: rgb(var(--c-surface));
  text-align: center;
  scroll-margin-top: 1.5rem;
}
.beta-note h2 {
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 0 0 0.6rem;
  color: rgb(var(--c-ink));
}
.beta-note p { color: rgb(var(--c-muted)); line-height: 1.5; margin: 0 0 1.25rem; }
.beta-note form { display: flex; flex-direction: column; gap: 0.6rem; scroll-margin-top: 1.5rem; }
.beta-note input:not([type="checkbox"]),
.beta-note textarea {
  font: inherit;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  border: 1px solid rgb(var(--c-line));
  background: rgb(var(--c-surface));
  color: rgb(var(--c-ink));
}
.beta-note textarea { resize: vertical; min-height: 3.5rem; }
.beta-note button {
  font: inherit;
  font-weight: 700;
  padding: 0.8rem 1.6rem;
  font-size: 1.05rem;
  border-radius: 999px;
  border: none;
  background: rgb(var(--c-primary));
  color: rgb(var(--c-primary-ink));
  cursor: pointer;
  width: 100%;
  margin-top: 0.2rem;
}
.beta-note button:hover { opacity: 0.9; }
.beta-note button:disabled { opacity: 0.6; cursor: default; }
.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgb(var(--c-muted));
  cursor: pointer;
}
.consent input { flex: none; width: 1rem; height: 1rem; margin: 0.15rem 0 0; padding: 0; accent-color: rgb(var(--c-primary)); }
/* `.beta-note p` above sets a bottom margin on every paragraph in the card;
   `.privacy-note` alone is less specific, so the last paragraph used to keep
   that margin, and #beta-status reserved a line below it even while empty.
   Together that was a ~70px blank band at the bottom of the card. The status
   line only takes space once signup.js has put text in it. */
.beta-note .privacy-note { font-size: 0.8rem; margin: 0.9rem 0 0; }
.privacy-note a { color: rgb(var(--c-ok)); }
#beta-status { font-size: 0.9rem; margin: 0; }
#beta-status:not(:empty) { margin-top: 0.6rem; }

/* --- what it does (KAN-224) ----------------------------------------------
   A heading, a one-line lede and a grid of feature blocks. Each block is an
   icon, a heading, two short paragraphs and an empty <figure class=
   "feature-shot"> that KAN-214 fills with a screenshot; while empty it takes no
   space at all. Icons are inline SVGs drawing in currentColor, so the colour is
   set once here -- --c-ok on a honey tint, both from tokens.css. Text is
   --c-ink / --c-muted on --c-surface, the pairs measured in the note at the top of
   this file; the green and the honey never carry small text. */

.features {
  padding: 0 0 3.5rem;
  border-top: 1px solid rgb(var(--c-line));
}
.features .wrap { padding-top: 3rem; }
.features h2 {
  font-size: 1.9rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  text-align: center;
  color: rgb(var(--c-ink));
}
.features-lede {
  text-align: center;
  color: rgb(var(--c-muted));
  margin: 0 auto 2rem;
  max-width: 36rem;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.25rem;
}
.feature {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.4rem;
  border: 1px solid rgb(var(--c-line));
  border-radius: 14px;
  background: rgb(var(--c-surface));
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: rgb(var(--c-accent) / 0.18);
  color: rgb(var(--c-ok));
  margin-bottom: 0.9rem;
}
.feature-icon svg { width: 1.5rem; height: 1.5rem; display: block; }
.feature h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 0.5rem;
  color: rgb(var(--c-ink));
}
.feature p {
  margin: 0 0 0.6rem;
  color: rgb(var(--c-muted));
  font-size: 0.95rem;
  line-height: 1.5;
}
.feature p:last-of-type { margin-bottom: 0; }
/* The screenshot slot. Empty until KAN-214 registers an image for it; an
   empty figure must not leave a gap or a border behind. */
.feature-shot { margin: 1rem 0 0; }
.feature-shot:empty { display: none; }
.feature-shot img { display: block; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid rgb(var(--c-line)); }

/* --- footer -------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid rgb(var(--c-line));
  padding: 1.5rem 0 2.5rem;
  color: rgb(var(--c-muted));
  font-size: 0.9rem;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; }
.site-footer a { color: rgb(var(--c-muted)); }
.site-footer a:hover { color: rgb(var(--c-ink)); }
.site-footer p { margin: 0; margin-right: auto; }

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 640px) {
  .hero { padding: 2.5rem 0 2.25rem; }
  .hero h1 { font-size: 1.9rem; }
  .hero .lede { font-size: 1.05rem; }
  .hero-actions .pill { width: 100%; text-align: center; }
  .beta-note { padding: 1.5rem 1.1rem; }
  .features .wrap { padding-top: 2.25rem; }
  .features h2 { font-size: 1.5rem; }
  .feature-grid { grid-template-columns: 1fr; }
}

/* --- KAN-234 pricing cards ------------------------------------------------
   The #pricing teaser on the homepage: three plan cards and a <dl> of the
   guarantees, all quoting pricing.html. Class names are deliberately NOT the
   ones pricing.css uses (.plans/.plan/.price/.tag): pricing.html links this
   file too, and sharing a name would restyle its cards. Colours are the pairs
   measured at the top of this file -- --c-ink and --c-muted on --c-surface for
   all small text, --c-ok for links, the honey and sage only as rules and
   tints. */

.pricing {
  padding: 0 0 3.5rem;
  border-top: 1px solid rgb(var(--c-line));
}
.pricing .wrap { padding-top: 3rem; }
.pricing h2 {
  font-size: 1.9rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  text-align: center;
  color: rgb(var(--c-ink));
}
.pricing-lede {
  text-align: center;
  color: rgb(var(--c-muted));
  margin: 0 auto 2rem;
  max-width: 36rem;
}
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
.plan-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.4rem;
  border: 1px solid rgb(var(--c-line));
  border-radius: 14px;
  background: rgb(var(--c-surface));
}
.plan-card.featured { border: 2px solid rgb(var(--c-primary)); }
.plan-tag {
  align-self: flex-start;
  margin-bottom: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgb(var(--c-primary) / 0.18);
  color: rgb(var(--c-ink));
}
.plan-name {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.35rem;
  color: rgb(var(--c-muted));
}
.plan-price {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  color: rgb(var(--c-ink));
}
.plan-price .per { font-size: 0.95rem; font-weight: 600; color: rgb(var(--c-muted)); }
.plan-alt { margin: 0.15rem 0 0.9rem; color: rgb(var(--c-muted)); font-size: 0.95rem; }
.plan-card ul {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgb(var(--c-muted));
}
.plan-card li { margin-bottom: 0.35rem; }
/* The link is the card's only action while billing is off: it goes to the
   pricing page, not to a checkout that does not exist yet. */
.plan-link {
  margin-top: auto;
  font-weight: 600;
  color: rgb(var(--c-ok));
}
.plan-link:hover { color: rgb(var(--c-ink)); }
.guarantees-heading {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 2.5rem 0 1rem;
  text-align: center;
  color: rgb(var(--c-ink));
}
.guarantees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1rem 2rem;
  margin: 0;
}
.guarantees > div {
  position: relative;
  padding-left: 1.6rem;
}
.guarantees > div::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: rgb(var(--c-ok));
  font-weight: 700;
}
.guarantees dt { font-weight: 700; color: rgb(var(--c-ink)); }
.guarantees dd { margin: 0.2rem 0 0; font-size: 0.95rem; line-height: 1.5; color: rgb(var(--c-muted)); }
.pricing-more { text-align: center; margin: 2rem 0 0; }
.pricing-more a { color: rgb(var(--c-ok)); font-weight: 600; }
.pricing-more a:hover { color: rgb(var(--c-ink)); }

@media (max-width: 640px) {
  .pricing .wrap { padding-top: 2.25rem; }
  .pricing h2 { font-size: 1.5rem; }
  .plan-grid { grid-template-columns: 1fr; }
  .guarantees { grid-template-columns: 1fr; }
}
/* KAN-236 trust page ---------------------------------------------------------
   trust.html: a short hero, a grid of verified facts, the dated audit summary
   as one card, a <details> FAQ and an empty #dexcom-partner slot (hidden by
   main > section:empty above until KAN-139 fills it). Text is --c-ink /
   --c-muted on --c-bg and --c-surface, the pairs measured in the note at the top
   of this file; links inside body copy are --c-ok, the darkened green that
   clears AA on both backgrounds. No tokens are declared here -- they belong
   in tokens.css, where the drift test can see them. */

.trust-hero {
  text-align: center;
  padding: 3rem 0 2.5rem;
}
.trust-hero .wrap { max-width: 760px; }
.trust-hero h1 {
  font-size: 2.4rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: rgb(var(--c-ink));
}
.trust-hero .lede {
  font-size: 1.15rem;
  line-height: 1.5;
  color: rgb(var(--c-muted));
  max-width: 40rem;
  margin: 0 auto;
}

.trust-facts {
  padding: 0 0 3.5rem;
  border-top: 1px solid rgb(var(--c-line));
}
.trust-facts .wrap { padding-top: 3rem; }
.trust-facts h2,
.trust-faq h2 {
  font-size: 1.9rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
  text-align: center;
  color: rgb(var(--c-ink));
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1.25rem;
}
.trust-fact {
  padding: 1.5rem 1.4rem;
  border: 1px solid rgb(var(--c-line));
  border-top: 4px solid rgb(var(--c-accent));
  border-radius: 14px;
  background: rgb(var(--c-surface));
}
.trust-fact h3 {
  font-size: 1.1rem;
  line-height: 1.3;
  margin: 0 0 0.5rem;
  color: rgb(var(--c-ink));
}
.trust-fact p {
  margin: 0 0 0.6rem;
  color: rgb(var(--c-muted));
  font-size: 0.95rem;
  line-height: 1.5;
}
.trust-fact p:last-of-type { margin-bottom: 0; }

.trust-audit {
  padding: 0 0 3.5rem;
  border-top: 1px solid rgb(var(--c-line));
}
.trust-audit .wrap { padding-top: 3rem; max-width: 800px; }
.trust-audit-card {
  padding: 1.75rem 1.6rem;
  border: 1px solid rgb(var(--c-line));
  border-left: 4px solid rgb(var(--c-primary));
  border-radius: 14px;
  background: rgb(var(--c-surface));
}
/* Scoped under .trust-audit-card so it outranks the `.trust-audit-card p`
   colour below (QA nit). */
.trust-audit-card .trust-audit-date {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--c-ok));
}
.trust-audit-card h2 {
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 0 0 0.8rem;
  color: rgb(var(--c-ink));
}
.trust-audit-card p,
.trust-audit-card li {
  color: rgb(var(--c-muted));
  font-size: 0.95rem;
  line-height: 1.55;
}
.trust-audit-card p { margin: 0 0 0.9rem; }
.trust-audit-card ul { margin: 0 0 0.9rem; padding-left: 1.25rem; }
.trust-audit-card li { margin: 0 0 0.5rem; }
.trust-audit-card strong { color: rgb(var(--c-ink)); }
.trust-audit-card .trust-audit-links { margin: 1.2rem 0 0; }

.trust-faq {
  padding: 0 0 3.5rem;
  border-top: 1px solid rgb(var(--c-line));
}
.trust-faq .wrap { padding-top: 3rem; max-width: 800px; }
.trust-faq details {
  border: 1px solid rgb(var(--c-line));
  border-radius: 14px;
  background: rgb(var(--c-surface));
  margin: 0 0 0.9rem;
}
.trust-faq summary {
  cursor: pointer;
  padding: 1rem 1.3rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: rgb(var(--c-ink));
  list-style-position: inside;
}
.trust-faq summary:focus-visible { outline: 2px solid rgb(var(--c-primary)); outline-offset: 2px; border-radius: 14px; }
.trust-faq-body { padding: 0 1.3rem 1.1rem; }
.trust-faq-body p {
  margin: 0 0 0.8rem;
  color: rgb(var(--c-muted));
  font-size: 0.95rem;
  line-height: 1.55;
}
.trust-faq-body p:last-of-type { margin-bottom: 0; }
.trust-faq-body a { color: rgb(var(--c-ok)); }

@media (max-width: 640px) {
  .trust-hero { padding: 2.25rem 0 2rem; }
  .trust-hero h1 { font-size: 1.8rem; }
  .trust-hero .lede { font-size: 1.05rem; }
  .trust-facts .wrap, .trust-audit .wrap, .trust-faq .wrap { padding-top: 2.25rem; }
  .trust-facts h2, .trust-faq h2 { font-size: 1.5rem; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-audit-card { padding: 1.4rem 1.1rem; }
  .trust-audit-card h2 { font-size: 1.35rem; }
}

/* --- KAN-235 live seat counter on the teaser -------------------------------
   The Lifetime card's seat line, filled in by seats.js from the live count.
   Same treatment as .seats in pricing.css: muted, the size of the list text,
   and no colour of its own -- the count is a fact, not an alarm. When the
   tranche is closed the price stops being the loudest thing on the card and
   the pill (the same .plan-tag the Premium card uses) says why. Muted, not
   struck through: the price is still accurate, it is just not for sale. */
.plan-seats {
  margin: -0.4rem 0 0.9rem;
  color: rgb(var(--c-muted));
  font-size: 0.95rem;
  line-height: 1.5;
}
.plan-card.sold-out .plan-price { color: rgb(var(--c-muted)); }
.plan-card.sold-out .plan-tag { background: rgb(var(--c-line) / 0.7); }

/* KAN-237 home trust section --------------------------------------------------
   The homepage teaser for trust.html: a heading, a single column of verbatim
   fact sentences from the trust page's cards, and one pill-secondary link to
   the page itself. Same card treatment as .trust-fact above, with the honey
   rule on the left edge; text is --c-muted on --c-surface, the pair measured in
   the note at the top of this file. No tokens are declared here -- they
   belong in tokens.css, where the drift test can see them. */

#trust {
  padding: 0 0 3.5rem;
  border-top: 1px solid rgb(var(--c-line));
}
#trust .wrap { padding-top: 3rem; max-width: 800px; }
.home-trust-heading {
  font-size: 1.9rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
  text-align: center;
  color: rgb(var(--c-ink));
}
.home-trust-list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}
.home-trust-list li {
  padding: 0.95rem 1.2rem;
  border: 1px solid rgb(var(--c-line));
  border-left: 4px solid rgb(var(--c-accent));
  border-radius: 12px;
  background: rgb(var(--c-surface));
  color: rgb(var(--c-muted));
  font-size: 0.95rem;
  line-height: 1.5;
}
.home-trust-link { margin: 0; text-align: center; }

@media (max-width: 640px) {
  #trust .wrap { padding-top: 2.25rem; }
  .home-trust-heading { font-size: 1.5rem; }
}

/* KAN-218 guides -------------------------------------------------------------
   Long-form article layout for /guides/, and the card list on the guides
   index. Two goals only: a comfortable measure and a comfortable rhythm.

   Three articles use this block as of KAN-241, and the two it added are much
   more list-heavy than the first: .guide-points carries multi-sentence items
   opened by a <strong> label rather than the one-liners it was written for.
   That needed no new rule -- the items inherit the measure cap and the body
   colour, and the inline label reads the same way at 390 as at 1440 -- but it
   is the shape to check against if this block is edited, because it is now
   the commonest thing on a guide page after a paragraph.

   Measure: body text is capped at 65ch, which is the middle of the 45-75ch
   range typography research keeps landing on and roughly where a reader stops
   losing their place between lines. The .wrap override is the belt (it caps
   headings and callouts too), the max-width on the text elements is the
   braces (it holds the measure even if a page nests something differently).

   Rhythm: line-height 1.75 rather than the 1.55 body default, because these
   pages are read end to end rather than scanned, and the space between
   paragraphs is bigger than the space between lines so the eye can find the
   next block without a rule to guide it.

   No tokens are declared here -- they belong in tokens.css, where the drift
   test can see them -- and no raw colours: --c-ink for body text at this size,
   --c-muted for the lede and the card copy, --c-ok for links, the three that
   the note at the top of this file measures as safe on the page background. */

/* The guides index is a short page -- three cards as of KAN-241 -- so on a
   desktop screen it is still shorter than the viewport, and the footer used to
   sit with a band of background below it. A column layout on the page's own
   <body> class fixes it exactly and at every height; making <body> itself a
   flex column would be a site-wide layout change, which belongs to whoever
   ships a sticky footer for every page rather than to a guides ticket. Keep
   the rule even when the list outgrows a viewport: it costs nothing then. */
body.guide-page { display: flex; flex-direction: column; min-height: 100vh; }
body.guide-page main { flex: 1 0 auto; }

.guide-hero,
.guide-index-hero {
  padding: 2.75rem 0 0;
}
.guide-hero .wrap,
.guide-index-hero .wrap,
.guide-body .wrap {
  max-width: 40rem;
}
.guide-hero h1,
.guide-index-hero h1 {
  font-size: 2.2rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: rgb(var(--c-ink));
}
.guide-kicker {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--c-muted));
}
.guide-kicker a { color: rgb(var(--c-ok)); text-decoration: none; }
.guide-kicker a:hover { text-decoration: underline; }
.guide-lede {
  margin: 0;
  max-width: 65ch;
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgb(var(--c-muted));
}

/* --- the article body --- */

.guide-body .wrap {
  padding-top: 2.25rem;
  padding-bottom: 3.5rem;
}
.guide-body h2 {
  font-size: 1.45rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 2.5rem 0 0.9rem;
  color: rgb(var(--c-ink));
}
.guide-body h2:first-child { margin-top: 0; }
.guide-body p {
  margin: 0 0 1.15rem;
  max-width: 65ch;
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgb(var(--c-ink));
}
.guide-body a { color: rgb(var(--c-ok)); }
/* ...but not the buttons. `.guide-body a` is more specific than `.pill`, so
   without these two the CTA's primary button drew its label in --c-ok on the
   --c-primary fill: 1.5:1 in light, and in dark the two tokens are the same
   colour, so the label vanished entirely. Caught by the contrast pass, not by
   eye. Any button added inside .guide-body needs the same treatment. */
.guide-body a.pill { color: rgb(var(--c-primary-ink)); }
.guide-body a.pill.pill-secondary { color: rgb(var(--c-ok)); }
.guide-body strong { color: rgb(var(--c-ink)); }

.guide-points {
  margin: 0 0 1.15rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.8rem;
  max-width: 65ch;
}
.guide-points li {
  padding: 0.15rem 0 0.15rem 1.1rem;
  border-left: 3px solid rgb(var(--c-accent));
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgb(var(--c-ink));
}

/* The honest-position callout. Card treatment with the honey rule, the same
   pair the trust page uses, so "here is what we have not built" reads as part
   of the page rather than as small print at the bottom of it. */
.guide-note {
  margin: 1.5rem 0 1.75rem;
  padding: 1.25rem 1.4rem 0.4rem;
  max-width: 65ch;
  border: 1px solid rgb(var(--c-line));
  border-left: 4px solid rgb(var(--c-accent));
  border-radius: 12px;
  background: rgb(var(--c-surface));
}
.guide-note p {
  font-size: 1rem;
  line-height: 1.7;
  color: rgb(var(--c-muted));
}
.guide-note strong { color: rgb(var(--c-ink)); }

/* Screenshot slots. Empty until KAN-232 lands the manifest, and an empty
   <figure> must render nothing at all -- keep each one on a single line with
   nothing inside it, or :empty stops matching and the page grows a blank band
   (the same rule as .feature-shot above). */
.guide-shot { margin: 1.5rem 0; max-width: 65ch; }
.guide-shot:empty { display: none; }
.guide-shot img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgb(var(--c-line));
}

.guide-cta {
  margin: 3rem 0 0;
  padding: 1.6rem 1.5rem;
  max-width: 65ch;
  border: 1px solid rgb(var(--c-line));
  border-radius: 14px;
  background: rgb(var(--c-surface));
  text-align: center;
}
.guide-cta h2 { margin: 0 0 0.6rem; font-size: 1.35rem; }
.guide-cta p { margin: 0 0 1.1rem; color: rgb(var(--c-muted)); }
.guide-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
}

/* --- the index --- */

.guide-index-list .wrap {
  max-width: 40rem;
  padding-top: 2.5rem;
  padding-bottom: 3.5rem;
}
.guide-index-list h2 {
  font-size: 1.3rem;
  margin: 0 0 1.25rem;
  color: rgb(var(--c-ink));
}
.guide-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.guide-card {
  padding: 1.25rem 1.4rem;
  border: 1px solid rgb(var(--c-line));
  border-left: 4px solid rgb(var(--c-accent));
  border-radius: 12px;
  background: rgb(var(--c-surface));
}
.guide-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  line-height: 1.35;
}
.guide-card h3 a { color: rgb(var(--c-ink)); text-decoration: none; }
.guide-card h3 a:hover { text-decoration: underline; }
.guide-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: rgb(var(--c-muted));
}

@media (max-width: 640px) {
  .guide-hero,
  .guide-index-hero { padding-top: 2rem; }
  .guide-hero h1,
  .guide-index-hero h1 { font-size: 1.75rem; }
  .guide-lede { font-size: 1.05rem; }
  .guide-body h2 { font-size: 1.3rem; margin-top: 2rem; }
  .guide-body p, .guide-points li { font-size: 1rem; }
  .guide-note { padding: 1.1rem 1.1rem 0.3rem; }
  .guide-cta { padding: 1.4rem 1.1rem; }
}

/* KAN-217 compare pages -------------------------------------------------------
   Layout for everything under /compare/. Those pages link tokens.css and this
   file and nothing else -- they are in a subdirectory, so their asset paths are
   absolute -- which means they get no help from pricing.css. That file styles
   bare `table`, `th`, `td`, `caption`, `h1` and `.lede` selectors, and
   pricing.html links site.css too, so nothing below may use a bare element
   selector or one of pricing.css's class names: every rule here is scoped to a
   .compare-* class, and restyling the pricing page from this block is therefore
   impossible.

   Colour, against the rules of thumb at the top of this file: claim text is
   --c-ink (12:1), the secondary lines and the empty-cell marker are --c-muted
   (4.9:1), and links are --c-ok (6.3:1). Honey is a rule and a fill only --
   never small type -- so the eyebrow is muted rather than accent, and the
   heading is --c-ink rather than pricing.css's accent h1.

   The table is the one thing that cannot reflow: nine rows against three
   columns is a table, not a list, and squeezing it into a phone width makes it
   unreadable. So it keeps a min-width and scrolls inside .compare-table-scroll,
   which is what keeps the page itself from scrolling sideways at 390px.
   No tokens are declared here; they belong in tokens.css where the drift test
   can see them. */

.compare-hero {
  padding: 3rem 0 1.75rem;
}
/* The same measure as .compare-body below. They were 820 and 900, which
   put the hero copy ~40px right of everything under it -- the card grid on
   the index made it obvious. .compare-lede keeps its own 46rem, so the
   reading width of the prose does not change. */
.compare-hero .wrap { max-width: 900px; }
.compare-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(var(--c-muted));
}
.compare-hero h1 {
  font-size: 2.1rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: rgb(var(--c-ink));
}
.compare-lede {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  line-height: 1.55;
  color: rgb(var(--c-muted));
  max-width: 46rem;
}

/* The provenance line. Deliberately not a footnote: when a page states facts
   about someone else's product, the date those facts were checked belongs
   beside the claim, not under it. */
.compare-checked {
  margin: 1.25rem 0 0;
  padding: 0.85rem 1.1rem;
  border: 1px solid rgb(var(--c-line));
  border-left: 4px solid rgb(var(--c-accent));
  border-radius: 12px;
  background: rgb(var(--c-surface));
  color: rgb(var(--c-muted));
  font-size: 0.92rem;
  line-height: 1.5;
}

.compare-body {
  padding: 1.75rem 0 2.5rem;
  border-top: 1px solid rgb(var(--c-line));
}
.compare-body .wrap { max-width: 900px; }
.compare-body h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 1.5rem 0 1rem;
  color: rgb(var(--c-ink));
}
.compare-note,
.compare-footnote {
  margin: 0 0 1.25rem;
  color: rgb(var(--c-muted));
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 46rem;
}
.compare-footnote { margin: 1.25rem 0 0; }
.compare-body a,
.compare-stay a,
.compare-cta-alt a {
  color: rgb(var(--c-ok));
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- the table --- */

.compare-table-scroll {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid rgb(var(--c-line));
  border-radius: 14px;
}
.compare-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 40rem;
  font-size: 0.95rem;
}
/* The table's description and its narrow-screen hint sit outside
   .compare-table-scroll, so they stay readable while the table scrolls under
   them; a <caption> would be clipped with the last column at 390px. */
.compare-table-note {
  margin: 0 0 0.5rem;
  color: rgb(var(--c-muted));
  font-size: 0.9rem;
  line-height: 1.5;
}
.compare-scroll-hint { display: none; }
.compare-table th,
.compare-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgb(var(--c-line));
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(var(--c-muted));
  border-bottom: 2px solid rgb(var(--c-line));
  white-space: nowrap;
}
.compare-table tbody th {
  font-weight: 600;
  color: rgb(var(--c-ink));
  width: 30%;
}
.compare-table td p {
  margin: 0 0 0.4rem;
  color: rgb(var(--c-ink));
  line-height: 1.5;
}
.compare-table td p:last-child { margin-bottom: 0; }

/* Our column is tinted so the eye can follow it down nine rows; the honey rule
   on its left edge is the same device the trust cards use. The competitor
   column is deliberately not styled down: .compare-them carries no rule at
   all, and exists only as the hook the fact tests read the cells through, so
   the two columns weigh the same on the page. */
.compare-table .compare-us {
  background: rgb(var(--c-surface));
  border-left: 3px solid rgb(var(--c-accent));
}
.compare-table thead th:nth-child(2) {
  background: rgb(var(--c-surface));
  border-left: 3px solid rgb(var(--c-accent));
  color: rgb(var(--c-ink));
}
/* Premium-only, said in the cell rather than in a legend nobody reads. */
.compare-plan {
  display: inline-block;
  margin-top: 0.15rem;
  padding: 0.1rem 0.55rem;
  border: 1px solid rgb(var(--c-line));
  border-radius: 999px;
  background: rgb(var(--c-surface-2));
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* --c-ok, not --c-muted: muted on --c-surface-2 measures 4.32:1 in the light
   palette, under AA, and this badge is real information -- the row is the
   one thing in our column that is not on the free plan. Green is also what
   the site already uses for "included". */
.compare-table td .compare-plan { color: rgb(var(--c-ok)); }
/* A row our research does not cover. Muted, because an absence is not a fact
   about the other product. */
.compare-table td .compare-unknown {
  color: rgb(var(--c-muted));
  font-style: italic;
}
/* ...and the rest of that row with it (KAN-239). Greying only their cell was
   the defect: a grey italic blank on the right of a row whose left cell says
   something concrete reads to a skimmer as "they do not have this", when what
   it means is "we did not compare this". So the row label and our own cell go
   muted too. Our uncompared wins are not wins -- if the research could not
   answer the row, it scores for neither side, and the place to make a claim
   about us that nobody was measured against is pricing.html.
   The row keeps its place rather than being dropped: the nine rows are the
   same on all five compare pages, and removing the ones we cannot fill is
   exactly how a comparison table starts cherry-picking. */
.compare-table tr.compare-uncompared th,
.compare-table tr.compare-uncompared td p:not(.compare-plan) {
  color: rgb(var(--c-muted));
}

/* --- who should stay with the other product --- */

.compare-stay {
  padding: 2.25rem 0;
  border-top: 1px solid rgb(var(--c-line));
}
.compare-stay .wrap { max-width: 760px; }
.compare-stay h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 1rem;
  color: rgb(var(--c-ink));
}
.compare-stay p {
  margin: 0 0 1rem;
  color: rgb(var(--c-ink));
  line-height: 1.65;
}
.compare-stay-note {
  padding-top: 0.75rem;
  border-top: 1px solid rgb(var(--c-line));
  color: rgb(var(--c-muted));
  font-size: 0.95rem;
}

/* --- the index of comparisons --- */

.compare-index-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.compare-index-card {
  padding: 1.4rem 1.35rem;
  border: 1px solid rgb(var(--c-line));
  border-top: 4px solid rgb(var(--c-accent));
  border-radius: 14px;
  background: rgb(var(--c-surface));
}
.compare-index-card h2 {
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 0.6rem;
}
.compare-index-card h2 a { color: rgb(var(--c-ok)); }
.compare-index-card p {
  margin: 0;
  color: rgb(var(--c-muted));
  font-size: 0.95rem;
  line-height: 1.55;
}

/* --- the call to action --- */

.compare-cta {
  padding: 2.5rem 0 3.5rem;
  border-top: 1px solid rgb(var(--c-line));
  text-align: center;
}
.compare-cta .wrap { max-width: 640px; }
.compare-cta h2 {
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0 0 0.75rem;
  color: rgb(var(--c-ink));
}
.compare-cta .compare-lede { margin: 0 auto 1.5rem; }
.compare-cta-alt {
  margin: 1.5rem 0 0;
  color: rgb(var(--c-muted));
  font-size: 0.92rem;
}

@media (max-width: 640px) {
  .compare-hero { padding-top: 2.25rem; }
  .compare-hero h1 { font-size: 1.65rem; }
  .compare-lede { font-size: 1rem; }
  .compare-body h2,
  .compare-stay h2 { font-size: 1.3rem; }
  .compare-cta h2 { font-size: 1.35rem; }
  .compare-scroll-hint {
    display: block;
    margin: 0 0 0.6rem;
    color: rgb(var(--c-muted));
    font-size: 0.85rem;
  }
  .compare-table { font-size: 0.9rem; }
  .compare-table th,
  .compare-table td { padding: 0.7rem 0.8rem; }
}

/* --- KAN-232 screenshots: #see-it and the filled feature slots ------------
   The #see-it section shows two wide captures from the registry
   (screenshots/manifest.json); each is a <picture> whose dark <source>
   follows the same prefers-color-scheme query tokens.css themes by, so the
   screenshot's palette always matches the page around it. #see-it-live is
   filled by see-it.js only when demo-link.js carries the production share
   URL; while empty it must take no space, like the other :empty slots. */
.see-it {
  border-top: 1px solid rgb(var(--c-line));
  padding: 0 0 3.5rem;
}
.see-it .wrap { padding-top: 3rem; }
.see-it h2 {
  font-size: 1.9rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  text-align: center;
  color: rgb(var(--c-ink));
}
.see-it-lede {
  text-align: center;
  color: rgb(var(--c-muted));
  margin: 0 auto 2rem;
  max-width: 36rem;
}
.see-it-shot { margin: 0 0 2rem; }
.see-it-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgb(var(--c-line));
  background: rgb(var(--c-surface));
}
.see-it-shot figcaption {
  text-align: center;
  color: rgb(var(--c-muted));
  font-size: 0.9rem;
  margin-top: 0.6rem;
}
#see-it-live { text-align: center; margin: 0; }
#see-it-live:empty { display: none; }
@media (max-width: 640px) {
  .see-it .wrap { padding-top: 2.25rem; }
  .see-it h2 { font-size: 1.5rem; }
  /* Below this width the <picture> has served the phone capture instead of
     the desktop one (same breakpoint as the <source media> queries). Those
     are about 390px of real pixels: let them fill a narrow screen, but never
     upscale past their own resolution on a 640px one. */
  .see-it-shot img { max-width: 390px; margin-inline: auto; }
}

/* --- KAN-233 sample clinician report -------------------------------------
   The "What your doctor gets" block in #see-it: a render of page one of
   samples/sample-report.pdf, one sentence, and a link to the PDF itself.
   It differs from the screenshot slots above it in one way, and it follows
   from what the image is: a page of a document is portrait, and left at the
   full column width its body text would be blown up far past the scale the
   app captures are shown at. So it is capped at a document-thumbnail size and
   centred; reading it is what the link below is for. It inherits the shared
   .see-it-shot frame otherwise -- there is no dark variant to swap in, because
   a PDF page has no theme, and the render is opaque so the card behind it only
   shows at the rounded corners. */
.see-it-report { margin: 0 0 1rem; }
.see-it-report-heading {
  font-size: 1.15rem;
  margin: 0 0 1rem;
  text-align: center;
  color: rgb(var(--c-ink));
}
.see-it-report-shot { margin: 0 auto 1.25rem; max-width: 30rem; }
.see-it-report-copy {
  text-align: center;
  color: rgb(var(--c-muted));
  margin: 0 auto 1rem;
  max-width: 34rem;
}
.see-it-report-link { text-align: center; margin: 0 0 1rem; }
@media (max-width: 640px) {
  /* The cap above already holds this below the 390px the rule for the app
     captures sets, so it needs no narrow variant of its own -- but it must
     not inherit that rule's 390px ceiling as a floor. */
  .see-it-report-shot { max-width: 22rem; }
}