/* theme.css: the section rhythm of every rebuilt (.smp) page, 2026-10-04.
 *
 * Two rejections set this. The all-light rebuild: "nearly 0 dark with
 * 0 contrast and separation" (cream beside white beside cream). The
 * all-dark "Night and Amber" pass that followed: near-black, amber glows,
 * gradient headline text, glowing cards, cursor light, scroll reveals,
 * grain. Alwaz, rightly: "dont you think this screams AI SLOP?"
 *
 * THE RULES
 * - Three grounds, and neighbouring sections never share one:
 *     dark  #14110E  the top, one short proof band, the closing ask
 *     white #FFFFFF  reading
 *     sand  #ECE5D9  the sections between, so two light sections never meet
 *   The separation is the change of ground. No seam lines, no glows.
 * - Long reading never sits on dark (Alwaz found a dark band of text hard
 *   to read after white). A mid-page dark band is short: numbers,
 *   principles, product screenshots, reviews.
 * - Amber marks what you can click (the booking arrow, links) and labels.
 *   No gradient text, no glow shadows, no animated ring outside the nav:
 *   the nav is the one thing on the page that glows, which is why it reads
 *   as a signature.
 * - Cards only where something is a real choice (price tiers, platform
 *   tiles, reviews). Hover is a border colour, nothing moves.
 *
 * HOW IT WORKS
 * Every selector starts `html .smp`, one element more specific than the
 * page sheets' `.smp ...`, and section grounds are set by id inside :is(),
 * which beats the page sheets' `.smp #id` rules. Dark sections get the
 * dark token set; the page default is the light set. A new section id
 * (or, where the count of sections varies, a class: sw-dark, sw-sand,
 * sw-white) goes in exactly one of the three lists below, or it keeps whatever its
 * page sheet says (cream), which is the "no separation" look again.
 */

/* ── Light tokens: the page default ─────────────────────────────────── */
html .smp {
  --sm-cream: #F3EEE6;          /* insets and chips on white */
  --sm-paper: #FFFFFF;
  --sm-ink: #16130F;
  --sm-body: #36312B;
  --sm-muted: #5A534A;
  --sm-line: #E2DBCF;
  --sm-accent: #A44A08;         /* 4.7:1 on sand, 5.9:1 on white */
  --sm-accent-hover: #7C3A0A;
  --sw-card: #FFFFFF;
  --sw-edge: #D9D1C4;
  --sw-edge-hover: #A44A08;
  --sw-chip: #F3EEE6;
  --sw-tint: #FBF1E2;
  --sw-tint-ink: #7C3A0A;
  --sw-split-label: #16130F;
  --sw-split-text: #FFFFFF;
  --sw-split-hover: #2E2822;
  background: #FFFFFF;
  color: var(--sm-ink);
}

/* ── The three grounds ──────────────────────────────────────────────── */
html .smp :is(
  #pr-hero, #pr-cta,
  #ab-hero, #ab-principles, #ab-cta,
  #ct-hero,
  #rv-hero, #rv-cta,
  #hr-hero, #hr-reviews, #hr-cta,
  #sv-hero, #sv-reviews, #sv-cta,
  #si-hero, #si-cta,
  #ap-hero, #ap-ways, #ap-cta,
  #ga-hero, #ga-ways, #ga-cta,
  #ai-hero, #ai-ways, #ai-cta,
  #sm-hero, #sm-stores, #sm-pricing, #sm-proof, #sm-cta,
  #wk-hero, #cs-hero,
  .sw-dark
) {
  --sm-cream: #1E1A16;
  --sm-paper: #1E1A16;
  --sm-ink: #F7F3EC;
  --sm-body: #D9D2C6;
  --sm-muted: #A9A195;
  --sm-line: rgba(255, 255, 255, 0.14);
  --sm-accent: #F59E0B;
  --sm-accent-hover: #FBBF24;
  --sm-dark-body: #D9D2C6;
  --sm-dark-line: rgba(255, 255, 255, 0.14);
  --sw-card: #1E1A16;
  --sw-edge: rgba(255, 255, 255, 0.16);
  --sw-edge-hover: rgba(245, 158, 11, 0.7);
  --sw-chip: rgba(255, 255, 255, 0.08);
  --sw-tint: rgba(245, 158, 11, 0.14);
  --sw-tint-ink: #FBBF24;
  --sw-split-label: #F7F3EC;
  --sw-split-text: #16130F;
  --sw-split-hover: #FFFFFF;
  background: #14110E;
  color: var(--sm-ink);
}

html .smp :is(
  #pr-help,
  #rv-certs,
  #hr-faq,
  #sv-process, #sv-faq,
  #ap-builds, #ap-faq,
  #ga-steps,
  #ai-steps,
  #sm-access, #sm-links,
  .sw-sand
), html .smp .si-group:nth-of-type(odd) { background: #ECE5D9; }

html .smp :is(
  #pr-reviews, #pr-faq,
  #ab-story, #ab-commits,
  #ct-next,
  #rv-list, #rv-brands,
  #hr-includes, #hr-more,
  #sv-what, #sv-guide, #sv-more,
  #ap-own, #ap-steps,
  #ga-where, #ga-cert, #ga-faq,
  #ai-builds, #ai-proof, #ai-faq,
  #sm-day, #sm-compare, #sm-start, #sm-faq,
  .sw-white
), html .smp .si-group:nth-of-type(even) { background: #FFFFFF; }

/* The long guide is on six service pages. Where it is absent the process
   (sand) meets the FAQ directly, so the FAQ goes white. */
html .smp #sv-process + #sv-faq { background: #FFFFFF; }
/* /hire hides its reviews band on a phone, which puts the FAQ (sand) and
   the other roles (white) together: fine. */

/* ── Type ───────────────────────────────────────────────────────────── */
html .smp .sm-eyebrow,
html .smp .cp-plan-name,
html .smp .sv-inc-label,
html .smp .rv-tile-platform { color: var(--sm-accent); }

/* ── The booking button: label in the ground's opposite, a flat amber
   arrow. The nav keeps the gradient and the glow; nothing else does. ── */
html .smp .sm-split-label { background: var(--sw-split-label); color: var(--sw-split-text); }
html .smp .sm-split:hover .sm-split-label { background: var(--sw-split-hover); }
html .smp .sm-split-icon { background: #D97706; color: #FFFFFF; box-shadow: none; }
html .smp .sm-split:hover .sm-split-icon { background: #B45309; }
html .smp .sm-cta-dark .sm-split-label { background: #F7F3EC; color: #16130F; }
html .smp .sm-cta-dark .sm-split:hover .sm-split-label { background: #FFFFFF; }

/* ── Cards: a hairline and the ground's own fill, no shadow ─────────── */
html .smp :is(.cp-plan, .sv-include, .rv-tile, .rv-card, .hp-index, .cp-facts, .rv-certs li) {
  background: var(--sw-card);
  border: 1px solid var(--sw-edge);
  box-shadow: none;
}
html .smp :is(.cp-points, .hp-index-head, .rv-card-extra, .hp-index li + li, .cp-facts > div) { border-color: var(--sw-edge); }
html .smp .cp-price { color: var(--sm-muted); }
html .smp .rv-card-more { background: var(--sw-chip); border: 1px dashed var(--sw-edge); }
@media (hover: hover) {
  html .smp :is(.cp-plan, .sv-include, .rv-tile, .rv-card) { transition: border-color .2s ease; }
  html .smp :is(.cp-plan, .sv-include, .rv-tile, .rv-card):hover { border-color: var(--sw-edge-hover); }
}

/* The lead card (pricing, hire, reviews) sits on the dark top: a lifted
   fill and a still amber edge. It is picked out by the edge, not by a
   moving light. */
/* `.cp-plan.cp-plan-lead`, not `.cp-plan-lead`: the card rule above lists
   `.rv-certs li`, so its :is() weighs (0,1,1) and a single class loses. */
html .smp :is(.cp-plan.cp-plan-lead, .rv-tile.rv-tile-lead) {
  background: #2A241E;
  border: 1.5px solid #D97706;
  box-shadow: none;
}
html .smp .cp-plan-lead .cp-plan-name,
html .smp .rv-tile-lead :is(.rv-tile-platform, .rv-tile-stars, .rv-tile-link) { color: #F59E0B; }
html .smp :is(.cp-plan-lead, .rv-tile-lead) :is(.cp-price strong, .rv-tile-score strong) { color: #FFFFFF; }
html .smp .cp-plan-lead .cp-price,
html .smp .rv-tile-lead .rv-tile-score { color: #BDB5A8; }
html .smp .cp-plan-lead :is(.cp-line, .cp-points li),
html .smp .rv-tile-lead .rv-tile-note { color: #ECE5DA; }
html .smp .cp-plan-lead .cp-points { border-top-color: rgba(255, 255, 255, 0.16); }
html .smp .cp-plan-lead .sm-split-label { background: #F7F3EC; color: #16130F; }
html .smp .cp-plan-lead .sm-split:hover .sm-split-label { background: #FFFFFF; }
html .smp .cp-plan-lead .cp-plan-link { color: #F7F3EC; }
html .smp .cp-plan-lead .cp-plan-link:hover { color: #FBBF24; }
html .smp .hr-popular { background: #D97706; color: #16130F; font-size: 12.5px; }

/* ── Lists, pills, tags ─────────────────────────────────────────────── */
html .smp :is(.sv-links, .hr-links, .sv-links li, .hr-links li, .si-list > li) { border-color: var(--sw-edge); }
html .smp :is(.si-jump a, .rv-brands a) { background: var(--sw-chip); border-color: var(--sw-edge); color: var(--sm-ink); }
html .smp :is(.si-jump a, .rv-brands a):hover { background: var(--sm-ink); border-color: var(--sm-ink); color: var(--sm-paper); }
html .smp .rv-tag { background: var(--sw-chip); }
html .smp .rv-tag-repeat { background: var(--sw-tint); color: var(--sw-tint-ink); }
html .smp .rv-cert-icon { background: var(--sw-tint); color: var(--sm-accent); }
html .smp .ai-tools span { background: var(--sw-chip); }
html .smp .sm-day-icon { background: var(--sw-tint); }
html .smp .sm-table .sm-us { background: var(--sw-tint); color: var(--sm-ink); }
html .smp .sm-stores img { background: #2A241E; }

/* ── Product frames on the dark grounds ─────────────────────────────── */
html .smp .sm-phone { border-color: #2B2622; }

/* ── Panels that are always light, wherever they sit ───────────────── */
html .smp :is(.cp-form-card, .cp-dialog) {
  --sm-cream: #F3EEE6;
  --sm-paper: #FFFFFF;
  --sm-ink: #16130F;
  --sm-body: #36312B;
  --sm-muted: #5A534A;
  --sm-line: #E2DBCF;
  --sm-accent: #A44A08;
  --sm-accent-hover: #7C3A0A;
  --sw-card: #FFFFFF;
  --sw-edge: #D9D1C4;
  --sw-edge-hover: #A44A08;
  --sw-chip: #F3EEE6;
  --sw-tint: #FBF1E2;
  --sw-tint-ink: #7C3A0A;
  --sw-split-label: #16130F;
  --sw-split-text: #FFFFFF;
  --sw-split-hover: #2E2822;
  color: #16130F;
}
html .smp .cp-form-card { background: #FFFFFF; }
html .smp .cp-dialog { background: #F5F2ED; }

@media (prefers-reduced-motion: reduce) {
  html .smp :is(.cp-plan, .sv-include, .rv-tile, .rv-card) { transition: none; }
}