:root {
  /* Luxury-hospitality × SaaS palette: deep forest + warm neutrals + antique
     gold (replacing the old bright yellow). --pine/--amber/--paper were renamed
     to --forest/--gold/--cream and their usages migrated across the codebase. */
  --ink: #12201B;
  --forest: #1B5E45;
  --forest-br: #2E8B66;
  --gold: #C69A4B;
  --gold-soft: #E4CB8F;
  --gold-deep: #A67C34;   /* gold for text on light backgrounds (contrast-safe) */
  --cream: #F5F1E8;       /* page background */
  --sand: #EAE3D5;        /* card / section tint */
  --card: #ffffff;
  --line: #DDD5C6;
  --text: #1A2420;
  --muted: #6B6357;
  --good: #2E8B66;
  --okay: #C69A4B;
  --weak: #B25A3A;        /* warm terracotta, not pure red */
  /* Instrument detailing: near-hairline lift instead of a soft floaty shadow —
     data surfaces are defined by their crisp 1px border, not a drop shadow. */
  --shadow: 0 1px 2px rgba(18, 32, 27, .05);
  --radius: 14px;
  --header-h: 88px; /* masthead is sticky — anchor sections use this as scroll-margin-top so jumps don't hide content under it */
  --section-y: 56px; /* consistent vertical rhythm for stacked page sections */
  /* Space Mono (Colophon superfamily, pairs with Space Grotesk) for DATA only —
     scores, points, deltas, dates, counts — so figures align like an instrument
     readout. Distinctive on purpose; never used for body copy. */
  --font-mono: "Space Mono", ui-monospace, "SF Mono", "SFMono-Regular", Menlo, monospace;
  /* Clash Display (Fontshare) for headings + the wordmark — more distinctive
     than Space Grotesk while staying credible. Body stays Inter; data stays
     Space Mono. Space Grotesk remains as a graceful fallback in the stack. */
  --font-display: "Clash Display", "Space Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { height: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* main just needs to grow to push the footer down on short pages (the
   sticky-footer trick) — with the single-page restructure there's always
   enough section content to exceed the viewport anyway, so this rarely
   does anything visible, but it's harmless to keep. */
.masthead { flex-shrink: 0; }
main { flex: 1 0 auto; }
.foot { flex-shrink: 0; }

.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.hero { display: block; }
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
}

/* Anchor sections need scroll-margin-top so a jump (from a nav click or a
   direct #hash link) doesn't tuck the section's heading under the sticky
   header. Applies to every top-level section with an id, including #home
   itself (a direct link to / never needs it, but it's harmless there). */
section[id] { scroll-margin-top: var(--header-h); }

/* Visual separation between stacked sections on the single scrollable
   page — deliberately just a border, no extra padding, since each
   section's own inner content class (.intro, .pricing-page, .faq) already
   carries the vertical rhythm that used to make these work as standalone
   pages. */
.page-section { border-top: 1px solid var(--line); }

/* Unified section header. Previously each section restated .section-head with
   drifting max-widths (640/680/700) and — critically — the section <h2> had NO
   type rule at all, so 7 section headings fell back to the browser-default h1
   (Inter, ~32px) instead of the brand Space Grotesk. One rule now styles them
   all consistently; the hero <h1> stays the page's single, larger h1. */
.section-head { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.section-head .lede { max-width: none; margin: 0 auto; }
.section-head h2,
#about .intro h2,
#contact .intro h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 4vw, 34px); line-height: 1.15; letter-spacing: -.02em;
  margin: 0 0 12px; color: var(--text);
}

/* --- masthead --- */
.masthead {
  background: var(--ink);
  color: var(--cream);
  padding: 18px 0;
  position: sticky;
  top: 0;
  z-index: 40;
}
.masthead-inner { display: flex; align-items: baseline; justify-content: space-between; position: relative; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand-mark {
  width: 14px; height: 14px; border-radius: 3px;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(198, 154, 75, .18);
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 700; font-size: 22px; letter-spacing: -.01em;
}
.brand-tag { margin: 0; color: rgba(245, 241, 232, .6); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }

/* --- intro --- */
.intro { padding: 56px 0 32px; }

/* Hero top: clear breathing room below the sticky header, with the intro
   text and the input card starting at the same offset (the card used to sit
   jammed near the nav while the intro text was pushed down by its own top
   padding). #home carries the gap; the hero intro's own top padding is
   zeroed so both grid columns align. */
#home { padding-top: 44px; }
#home .intro { padding-top: 0; }
/* Slimmer input card — lighter internal padding + the now one-line URL hint
   read less dense than the full 28px panel padding. (Only #input-panel; the
   result .panel is untouched.) */
#input-panel { padding: 22px 24px; }
@media (max-width: 520px) {
  #home { padding-top: 32px; }
  #input-panel { padding: 20px; }
}
.hero-tag {
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--forest); font-weight: 600; margin: 0 0 12px;
}
.intro h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 6vw, 46px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 18px;
}
.lede { color: var(--muted); font-size: 18px; max-width: 52ch; margin: 0; }

/* --- blog post (shared article typography, luxury palette) --- */
.post { max-width: 720px; margin: 0 auto; padding: 40px 0 24px; }
.post-back { display: inline-block; color: var(--forest); font-weight: 600; font-size: 14px; text-decoration: none; margin-bottom: 24px; }
.post-back:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.post-head { margin: 0 0 32px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.post-head h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 5vw, 44px); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); margin: 0 0 14px; }
.post-meta { font-family: var(--font-mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; margin: 0 0 18px; }
.post-standfirst { font-size: 19px; line-height: 1.55; color: var(--text); margin: 0; }
.post-body { font-size: 17px; line-height: 1.72; color: var(--text); }
.post-body p { margin: 0 0 20px; }
.post-body h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -.01em; color: var(--ink); line-height: 1.25; margin: 40px 0 14px; }
.post-body a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.post-body a:hover { text-decoration-color: var(--forest); }
.post-body em { font-style: italic; }
/* "What to do" note — a quiet inset card, not a colored rule */
.post-todo { background: var(--sand); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin: 24px 0; font-size: 16px; line-height: 1.6; }
.post-todo strong { color: var(--forest); }

/* Embedded bar chart */
.post-chart { margin: 32px 0; padding: 22px 22px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.post-chart-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); margin: 0 0 18px; }
.chart-row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 14px; margin: 0 0 12px; }
.chart-label { font-size: 13.5px; color: var(--muted); font-weight: 600; text-align: right; }
.chart-track { background: var(--sand); border-radius: 8px; height: 34px; overflow: hidden; }
.chart-bar { height: 100%; border-radius: 8px; display: flex; align-items: center; padding: 0 12px; box-sizing: border-box; min-width: 0; }
.chart-bar-base { background: var(--line); }
.chart-bar-base .chart-val { color: var(--muted); }
.chart-bar-hi { background: linear-gradient(90deg, var(--forest), var(--forest-br)); }
.chart-bar-hi .chart-val { color: var(--cream); }
.chart-val { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; white-space: nowrap; letter-spacing: .01em; }
.post-chart-src { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }

/* End CTA */
.post-cta { margin: 40px 0 8px; padding: 26px 26px 24px; background: var(--ink); border-radius: var(--radius); }
.post-cta-lead { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--cream); margin: 0 0 10px; }
.post-cta p:not(.post-cta-lead) { color: rgba(245, 241, 232, .82); font-size: 16px; line-height: 1.6; margin: 0 0 18px; }
.post-cta-btn { display: inline-block; background: var(--gold); color: var(--ink); font-weight: 700; font-size: 15.5px; text-decoration: none; padding: 12px 22px; border-radius: 10px; transition: background .15s ease, transform .15s ease; }
.post-body a.post-cta-btn, .post-body a.post-cta-btn:hover { text-decoration: none; }
.post-cta-btn:hover { background: var(--gold-soft); transform: translateY(-1px); }

/* Sources */
.post-sources { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.post-sources h2 { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink); margin: 0 0 14px; }
.post-sources ul { margin: 0; padding-left: 20px; }
.post-sources li { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 10px; }

@media (max-width: 560px) {
  .post-body { font-size: 16px; }
  .chart-row { grid-template-columns: 1fr; gap: 6px; }
  .chart-label { text-align: left; }
}

/* --- blog index (post list) --- */
.blog-list { list-style: none; margin: 8px 0 56px; padding: 0; max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.blog-item-link { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.blog-item-link:hover { border-color: var(--forest); box-shadow: 0 4px 18px rgba(27, 94, 69, .10); transform: translateY(-1px); }
.blog-item-date { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.blog-item-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); margin: 0 0 8px; }
.blog-item-excerpt { color: var(--muted); font-size: 15.5px; line-height: 1.55; margin: 0 0 12px; }
.blog-item-more { color: var(--forest); font-weight: 600; font-size: 14px; }
.blog-item-link:hover .blog-item-more { color: var(--gold-deep); }

/* --- "What Rankr checks" reference page (renders from checks-data.js) --- */
/* .check-summary / .check-list are shared with the inline results toggle. */
.check-summary { color: var(--text); font-size: 14.5px; line-height: 1.55; margin: 0 0 12px; }
.check-list { margin: 0; padding-left: 18px; }
.check-list li { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 7px; }
.check-list li:last-child { margin-bottom: 0; }

.checks-intro { padding: 56px 0 8px; max-width: 760px; }
.checks-intro h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 5vw, 44px); letter-spacing: -.02em; color: var(--ink); margin: 0 0 14px; }
.checks-intro .lede { max-width: 60ch; font-size: 18px; margin: 0 0 18px; }
.checks-guardrail { font-size: 14.5px; color: var(--muted); line-height: 1.6; max-width: 62ch; background: var(--sand); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin: 0; }
.checks-guardrail em { font-style: italic; color: var(--text); }
.checks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 28px 0 8px; }
.check-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; }
.check-card-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); margin: 0 0 8px; }
.checks-cta { margin: 32px 0 56px; padding: 26px; background: var(--ink); border-radius: var(--radius); }
.checks-cta-lead { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--cream); margin: 0 0 10px; }
.checks-cta p:not(.checks-cta-lead) { color: rgba(245, 241, 232, .82); font-size: 16px; line-height: 1.6; margin: 0 0 18px; max-width: 62ch; }
.checks-cta-btn { display: inline-block; background: var(--gold); color: var(--ink); font-weight: 700; font-size: 15.5px; text-decoration: none; padding: 12px 22px; border-radius: 10px; transition: background .15s ease, transform .15s ease; }
.checks-cta-btn:hover { background: var(--gold-soft); transform: translateY(-1px); }
@media (max-width: 640px) { .checks-grid { grid-template-columns: 1fr; } }

/* --- about / contact (prose inside a card, unlike the plain stub sections) ---
   Cards here override .panel's 28px flat padding — at this section's actual
   content length (a couple of short paragraphs; one line for Contact) that
   padding was nearly half the box's total height (measured: Contact's card
   was 114px tall for ~58px of actual text). Tightened to hug the content,
   matching the lighter padding already used by .faq-item/.step rather than
   the denser .panel treatment meant for the scan tool's input/result areas. */
/* .panel.about-body (not .about-body alone): .about-body and the base
   .panel rule it's paired with in markup have equal specificity, and
   .panel is declared later in this file, so a same-specificity override
   here would silently lose to .panel's padding on source order alone —
   confirmed via computed-style inspection that this was happening before
   the compound selector was added. */
.panel.about-body { max-width: 64ch; padding: 26px 28px; }
.about-body .lede { max-width: none; margin-bottom: 16px; font-size: 16px; }
.about-body p:not(.lede) { color: var(--text); font-size: 16px; line-height: 1.6; margin: 0 0 16px; }
.about-body p:last-child { margin-bottom: 0; }
.panel.contact-body { max-width: 60ch; padding: 20px 24px; }
.contact-body p { font-size: 16px; line-height: 1.6; margin: 0; }
.contact-body .link-btn { font-weight: 600; }

/* About/Contact match the centered rhythm of the other sections (checks,
   how-it-works) rather than sitting left-aligned with an empty right half:
   the section head is centered, and the card is centered on the page via
   margin-inline:auto. The card's own text stays left-aligned for
   readability (only the heading and the card block itself are centered). */
#about .intro, #contact .intro { padding-top: var(--section-y); padding-bottom: var(--section-y); text-align: center; }
.panel.about-body, .panel.contact-body { margin-inline: auto; text-align: left; }

/* Legal stub pages (/privacy, /terms) — centered like the other sections. */
.legal-page { text-align: center; padding: 64px 0; }

/* Legal document pages (full privacy / terms content) — left-aligned prose. */
.legal-body { max-width: 760px; margin: 0 auto; padding: 40px 0 24px; }
.legal-body h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4vw, 38px); letter-spacing: -.02em; line-height: 1.12; color: var(--ink); margin: 0 0 8px; }
.legal-updated { font-family: var(--font-mono); font-size: 13px; color: var(--muted); margin: 0 0 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.legal-lead { font-size: 17px; line-height: 1.6; color: var(--text); margin: 0 0 26px; }
.legal-body h2 { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -.01em; color: var(--ink); margin: 34px 0 12px; }
.legal-body p { font-size: 16px; line-height: 1.7; color: var(--text); margin: 0 0 16px; }
.legal-body ul { margin: 0 0 16px; padding-left: 22px; }
.legal-body li { font-size: 16px; line-height: 1.65; color: var(--text); margin: 0 0 8px; }
.legal-body li strong, .legal-body p strong { color: var(--ink); font-weight: 600; }
.legal-body a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.legal-body a:hover { text-decoration-color: var(--forest); }
@media (max-width: 560px) { .legal-body p, .legal-body li { font-size: 15px; } }

/* --- how it works (3-step layout) --- */
/* Section had NO vertical padding (its content jammed against the top border
   while every sibling had 56px) — restored via the shared rhythm token. */
.how-it-works { padding-top: var(--section-y); padding-bottom: var(--section-y); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.step {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px 24px;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--forest); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  margin: 0 0 16px;
}
.step-label {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  margin: 0 0 10px;
}
.step-desc { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }

.steps-honesty {
  color: var(--muted); font-size: 13px; line-height: 1.6; text-align: center;
  max-width: 62ch; margin: 32px auto 0;
}

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; }
}

/* --- what Rankr checks (icon grid + differentiator bar) --- */
/* Spacing around the full-bleed .check-highlight band is done with PADDING,
   not margins: the previous margin:48px approach collapsed through the
   section's bottom edge into a thin sliver against the (also-dark)
   .stat-stripe that follows. .checks' bottom padding is the light gap ABOVE
   the band; #what-we-check's bottom padding is the light gap BELOW it,
   before the stat stripe — both 48px, neither able to collapse. */
#what-we-check { padding-bottom: 48px; }
.checks { padding-top: var(--section-y); padding-bottom: 48px; }

.checks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.check-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px 22px;
}
.check-icon {
  width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.check-icon svg { display: block; }
.check-icon.mint { background: #EAF1EC; color: var(--forest); }
.check-icon.ink { background: var(--ink); color: var(--gold); margin-bottom: 0; }
.check-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0 0 8px; }
.check-desc { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }

/* Full-bleed, like .stat-stripe — not confined to .wrap like .check-card is.
   Deliberately matches the stripe's own edge-to-edge treatment (no
   border-radius, no side margins) so the two ink sections read as the same
   *kind* of element rather than one being a floating rounded card and the
   other a full-width band; margin above/below shows the section's own
   light --paper background through, so it never sits flush against another
   dark section (including .stat-stripe right after it). */
.check-highlight { background: var(--ink); padding: 40px 0; }
.check-highlight-badge {
  display: inline-block; background: var(--gold); color: #33280F;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 20px; margin-bottom: 18px;
}
.check-highlight-body { display: flex; align-items: flex-start; gap: 18px; }
.check-highlight .check-name { color: #fff; }
.check-highlight .check-desc { color: #ADA491; max-width: 68ch; }

/* Sub-dimensions fill what was empty dark space with the real AI-search
   sub-checks — three columns on desktop, stacked on mobile. */
.check-subpoints {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(245,241,232,.14);
}
.check-subpoint-name {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--gold); margin: 0 0 6px;
}
.check-subpoint-desc { color: #ADA491; font-size: 13.5px; line-height: 1.5; margin: 0; }

@media (max-width: 900px) {
  .checks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .checks-grid { grid-template-columns: 1fr; }
  .check-highlight-body { flex-direction: column; }
  .check-subpoints { grid-template-columns: 1fr; gap: 16px; }
}

/* --- panels --- */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  margin-bottom: 24px;
}

.field-label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.field-hint { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.opt { color: var(--muted); font-weight: 400; }

textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: #FBFAF4;
  resize: vertical;
}
textarea:focus, input[type=file]:focus-visible {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(27, 94, 69, .15);
}

.uploader { margin-top: 22px; }
input[type=file] { font-size: 14px; color: var(--muted); }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

.go {
  margin-top: 24px;
  width: 100%;
  background: var(--forest);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 15px 20px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
}
.go:hover { background: #164C38; }
.go:active { transform: translateY(1px); }
.go:disabled { opacity: .55; cursor: default; }
.go.secondary { background: transparent; color: var(--forest); border: 1px solid var(--line); }
.go.secondary:hover { background: #EFE9DC; }

.disclaimer { color: var(--muted); font-size: 13px; margin: 16px 0 0; }

/* --- score head + gauge (the signature) --- */
.score-head { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.gauge { position: relative; width: 200px; height: 200px; flex-shrink: 0; }
.gauge-track { fill: none; stroke: #E7E0D0; stroke-width: 16; }
.gauge-fill {
  fill: none;
  stroke: var(--forest-br);
  stroke-width: 16;
  stroke-linecap: round;
  stroke-dasharray: 540.35; /* 2πr, r=86 */
  stroke-dashoffset: 540.35;
  transition: stroke-dashoffset 1.1s cubic-bezier(.2, .7, .2, 1), stroke .4s ease;
}
.gauge-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gauge-score {
  font-family: var(--font-display);
  font-weight: 700; font-size: 54px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gauge-grade { font-size: 14px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }

.score-summary { flex: 1; min-width: 240px; }
.eyebrow { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--forest); margin: 0 0 6px; font-weight: 600; }
.summary-text { font-size: 19px; line-height: 1.4; margin: 0; max-width: 68ch; }

/* --- copy/share result --- */
.share-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 0; }
.copy-btn:not([hidden]) {
  display: inline-flex; align-items: center; gap: 8px;
}
.copy-btn {
  background: transparent; color: var(--forest); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 16px; font-size: 14px; font-weight: 500;
  font-family: "Inter", sans-serif; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.copy-btn:hover { background: #EFE9DC; }
.copy-btn.copied { color: #164C38; border-color: #CFE2D6; background: #EAF1EC; }
.copy-icon { flex-shrink: 0; }
.copy-fallback { margin: 12px 0 0; }
.copy-fallback-hint { color: var(--muted); font-size: 13px; margin: 0 0 6px; }
.copy-fallback textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  font-size: 13px; font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--text);
  background: #FBFAF4; resize: vertical;
}

/* --- fixes --- */
.fixes, .breakdown, .hidden-panel { margin-top: 34px; }
.result h2 {
  font-family: var(--font-display);
  font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.fix-list { list-style: none; margin: 0; padding: 0; counter-reset: fix; }
.fix-list li {
  counter-increment: fix;
  position: relative;
  padding: 18px 18px 18px 56px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 12px;
  background: #FBFAF4;
}
.fix-list li::before {
  content: counter(fix);
  position: absolute; left: 18px; top: 18px;
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--ink); color: var(--cream);
  font-family: var(--font-display); font-weight: 500; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.fix-title { font-weight: 600; font-size: 17px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.impact {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px;
}
.impact.high { background: rgba(198, 154, 75, .16); color: #7A5A1E; }
.impact.medium { background: rgba(27, 94, 69, .12); color: var(--forest); }
.impact.low { background: #E9E3D6; color: var(--muted); }
.fix-why { color: var(--muted); font-size: 14px; margin: 6px 0 10px; }
.fix-action { font-size: 15px; margin: 0; }
.fix-action strong { color: var(--forest); }

/* fix-tracking: per-fix "Mark as done" toggle + completed state */
.fix-check {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--forest); user-select: none;
}
.fix-check input { width: 17px; height: 17px; accent-color: var(--forest); cursor: pointer; margin: 0; }
.fix-item.fix-done { opacity: .6; }
.fix-item.fix-done .fix-title { text-decoration: line-through; text-decoration-color: var(--muted); }
.fix-item.fix-done .fix-check { color: var(--forest-br); }
.fix-list li.fix-done::before { content: "✓"; background: var(--forest); }

/* "the loop": fixes-done ↔ score-move correlation banner */
.fix-loop-slot:empty { display: none; }
.fix-loop {
  display: flex; align-items: flex-start; gap: 14px; text-align: left;
  margin: 18px auto 4px; max-width: 520px;
  background: #EAF1EC; border: 1px solid #CFE2D6; border-radius: 12px; padding: 14px 16px;
}
.fix-loop-count { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--forest); line-height: 1; flex-shrink: 0; }
.fix-loop-text { margin: 0; font-size: 14px; color: var(--text); line-height: 1.5; }
.fix-loop-caveat { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }

/* --- category chart (weakest-first bar chart) --- */
.cat-chart { margin-top: 34px; }
.cat-chart-sub { color: var(--muted); font-size: 14px; margin: -10px 0 20px; }
.cat-chart-rows { display: flex; flex-direction: column; gap: 14px; }
.cat-chart-row {
  display: grid; grid-template-columns: 160px 1fr 60px; align-items: center; gap: 14px;
}
.cat-chart-row-na { grid-template-columns: 160px 1fr; }
.cat-chart-name { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.cat-chart-track { height: 10px; border-radius: 6px; background: #E7E0D0; overflow: hidden; }
.cat-chart-fill { display: block; height: 100%; border-radius: 6px; transition: width .8s ease; }
.cat-chart-fill.weak { background: #B25A3A; }
.cat-chart-fill.ok { background: #C69A4B; }
.cat-chart-fill.strong { background: #2E8B66; }
.cat-chart-score {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: 14px; color: var(--muted); text-align: right;
}
.cat-chart-na { color: var(--muted); font-size: 13px; font-style: italic; }

/* Inline "what we check" — a small info toggle per category row that reveals
   this category's checklist (same source as /what-rankr-checks: checks-data.js). */
.cat-check-group { display: flex; flex-direction: column; }
.cat-check-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; border: none; background: none;
  color: var(--muted); cursor: pointer; border-radius: 50%;
  transition: color .12s ease, background .12s ease;
}
.cat-check-btn:hover { color: var(--forest); background: var(--sand); }
.cat-check-btn.active { color: var(--forest); }
.cat-check-btn:focus-visible { outline: 2px solid var(--forest-br); outline-offset: 2px; }
.cat-check-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.cat-check-detail.open { grid-template-rows: 1fr; }
.cat-check-inner { overflow: hidden; min-height: 0; }
.cat-check-detail .cat-check-inner { padding-top: 12px; }
.cat-check-detail .check-summary { margin: 0 0 8px; }
@media (prefers-reduced-motion: reduce) { .cat-check-detail { transition: none; } }

.cat-chart-legend { display: flex; gap: 18px; margin-top: 20px; flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.legend-swatch.weak { background: #B25A3A; }
.legend-swatch.ok { background: #C69A4B; }
.legend-swatch.strong { background: #2E8B66; }

@media (max-width: 560px) {
  .cat-chart-row { grid-template-columns: 96px 1fr 46px; gap: 10px; }
  .cat-chart-row-na { grid-template-columns: 96px 1fr; }
  .cat-chart-name { font-size: 12.5px; }
  .cat-chart-score { font-size: 13px; }
}

/* --- sample result preview (static illustration reusing the real result
   components: gauge, category bar chart, one fix card — hardcoded demo
   values only, clearly tagged as a sample) --- */
.sample { padding-top: var(--section-y); padding-bottom: var(--section-y); }

.sample-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 28px; max-width: 860px; margin: 0 auto;
}
.sample-tag {
  display: inline-block; margin-bottom: 20px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); background: #EFE9DC; border: 1px dashed var(--line);
  padding: 4px 12px; border-radius: 20px;
}
.sample-top { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: center; }
.sample-top .gauge { margin: 0 auto; }
.sample-bars-label {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px;
}
.sample-fix { margin-top: 28px; }
.sample-cta { text-align: center; margin-top: 28px; }
.sample-cta .go { display: inline-block; width: auto; margin-top: 0; padding-left: 32px; padding-right: 32px; }
.sample-cta-note { color: var(--muted); font-size: 14px; margin: 12px 0 0; }

@media (max-width: 640px) {
  .sample-top { grid-template-columns: 1fr; gap: 24px; }
  .sample-bars-label { text-align: center; }
}

/* --- AI answer section (generic stylized assistant, NOT a real product's
   UI — Rankr's own card + ink/yellow language) --- */
.ai-answer { padding-top: var(--section-y); padding-bottom: var(--section-y); }

.ai-chat {
  max-width: 680px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px;
  display: flex; flex-direction: column; gap: 20px;
}
.ai-chat-user { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ai-chat-assistant { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ai-chat-role {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.ai-spark { color: var(--gold); }

.ai-bubble { margin: 0; font-size: 15px; line-height: 1.5; }
.ai-bubble-user {
  background: #EAF1EC; border: 1px solid #CFE2D6; color: var(--text);
  padding: 12px 16px; border-radius: 14px 14px 4px 14px; max-width: 85%;
}
.ai-bubble-assistant {
  background: var(--ink); color: var(--cream);
  padding: 18px 20px; border-radius: 14px 14px 14px 4px; max-width: 92%;
}
.ai-answer-intro { margin: 0 0 14px; color: #ADA491; }
.ai-answer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ai-answer-list li { position: relative; padding-left: 20px; color: var(--cream); line-height: 1.45; }
.ai-answer-list li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); font-size: 12px; top: 2px; }
.ai-answer-name { font-family: var(--font-display); font-weight: 700; color: #fff; }
.ai-answer-omitted {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed rgba(245,241,232,.22);
  color: #948C7A; font-style: italic; font-size: 13.5px; line-height: 1.5;
}

.ai-answer-resolution {
  text-align: center; max-width: 56ch; margin: 30px auto 0;
  font-size: 18px; font-weight: 500; line-height: 1.5;
}
.ai-answer-cta { text-align: center; margin-top: 20px; }
.ai-answer-cta .go { display: inline-block; width: auto; margin-top: 0; padding-left: 32px; padding-right: 32px; }

@media (max-width: 520px) {
  .ai-bubble-user, .ai-bubble-assistant { max-width: 100%; }
}

/* --- category breakdown --- */
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.cat-list li:last-child { border-bottom: none; }
.cat-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cat-name { font-weight: 600; font-size: 15px; }
.cat-pts { font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; }
.cat-bar { height: 6px; border-radius: 4px; background: #E7E0D0; margin: 8px 0 6px; overflow: hidden; }
.cat-bar span { display: block; height: 100%; background: var(--forest-br); border-radius: 4px; transition: width .8s ease; }
.cat-bar.na span { background: repeating-linear-gradient(45deg, #DDD5C6, #DDD5C6 4px, #E7E0D0 4px, #E7E0D0 8px); }
.cat-note { color: var(--muted); font-size: 14px; margin: 0; }

.hidden-panel { background: #EFE9DC; border-radius: 12px; padding: 22px; }
.hidden-panel h2 { border: none; padding: 0; }
.hidden-panel p { margin: 0; color: var(--muted); font-size: 15px; }

/* --- loading / error --- */
.loading:not([hidden]) {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 32px; color: var(--muted); font-size: 15px; text-align: center;
}
.loading-row { display: flex; align-items: center; gap: 12px; justify-content: center; }
.spinner {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 3px solid #DDD5C6; border-top-color: var(--forest);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Honest staged progress — each step lights on a REAL pipeline transition
   (scrape start → scrape returns → scoring runs → finalizing), never a timer.
   The bar is INDETERMINATE (a moving segment), never a fake percentage. */
.loading-panel { width: 100%; max-width: 380px; text-align: left; }
.loading-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.loading-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); margin: 0; }
.loading-expect { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin: 0; white-space: nowrap; }
.loading-bar { height: 4px; background: var(--sand); border-radius: 4px; overflow: hidden; margin-bottom: 18px; }
.loading-bar > span { display: block; height: 100%; width: 38%; border-radius: 4px; background: linear-gradient(90deg, var(--forest-br), var(--forest)); animation: loading-slide 1.25s ease-in-out infinite; }
@keyframes loading-slide { 0% { transform: translateX(-130%); } 60%, 100% { transform: translateX(360%); } }

.loading-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lstep { display: flex; align-items: center; gap: 12px; }
.lstep-mark { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); position: relative; transition: border-color .2s ease, background .2s ease; }
.lstep-label { font-size: 14px; color: var(--muted); line-height: 1.3; transition: color .2s ease; }
/* active — pulsing inner dot */
.lstep.active .lstep-mark { border-color: var(--forest); }
.lstep.active .lstep-mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--forest); animation: lstep-pulse 1s ease-in-out infinite; }
.lstep.active .lstep-label { color: var(--ink); font-weight: 600; }
@keyframes lstep-pulse { 0%, 100% { transform: scale(.55); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }
/* done — filled with a check */
.lstep.done .lstep-mark { border-color: var(--forest); background: var(--forest); }
.lstep.done .lstep-mark::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid var(--cream); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.lstep.done .lstep-label { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .loading-bar > span { animation: none; width: 100%; opacity: .45; }
  .lstep.active .lstep-mark::after { animation: none; }
}

.loading-fact {
  font-size: 13.5px; color: var(--forest); background: #EAF1EC; border: 1px solid #CFE2D6;
  border-radius: 20px; padding: 8px 18px; max-width: 56ch; margin: 0;
}

.email-offer { width: 100%; max-width: 420px; padding-top: 14px; border-top: 1px solid var(--line); }
.email-offer-text { font-size: 13.5px; color: var(--muted); margin: 0 0 10px; }
.email-row { display: flex; gap: 8px; }
.email-row input[type=email] {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-size: 14px; font-family: "Inter", sans-serif; color: var(--text);
  background: #FBFAF4;
}
.email-row input[type=email]:focus {
  outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(27, 94, 69, .15);
}
.email-row .go { margin-top: 0; width: auto; white-space: nowrap; padding: 10px 16px; font-size: 14px; }
.email-error { color: #96392B; font-size: 13px; margin: 8px 0 0; }

.email-confirmed {
  background: #EAF1EC; border: 1px solid #CFE2D6; color: #164C38;
  border-radius: 12px; padding: 16px 18px; margin-bottom: 24px; font-size: 15px; text-align: center;
}

@media (max-width: 520px) {
  .email-row { flex-direction: column; }
  .email-row .go { width: 100%; }
}

.error {
  background: #F7EAE4; border: 1px solid #E6C4B7; color: #96392B;
  border-radius: 12px; padding: 16px 18px; margin-bottom: 24px; font-size: 15px;
}
.error-detail {
  display: inline-block; margin-top: 6px; font-size: 13px; opacity: .8;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; word-break: break-word;
}

.foot { background: var(--ink); color: #ADA491; padding: 40px 0; font-size: 13px; }
.foot-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.foot-nav { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.foot-nav a { color: var(--cream); text-decoration: none; font-weight: 500; }
.foot-nav a:hover { color: var(--gold); text-decoration: underline; }
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.foot-links a { color: var(--cream); text-decoration: none; font-weight: 500; }
.foot-links a:hover { color: var(--gold); text-decoration: underline; }
.foot-disclaimer { margin: 0; max-width: 60ch; line-height: 1.5; }
.foot-copy { margin: 0; color: #948C7A; }

@media (max-width: 520px) {
  .intro { padding: 40px 0 24px; }
  .panel { padding: 20px; }
  .gauge { width: 160px; height: 160px; }
  .gauge-score { font-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gauge-fill, .cat-bar span, .cat-chart-fill { transition: none; }
  .spinner { animation-duration: 1.6s; }
}

/* --- URL input row (link-first) --- */
.url-row { display: flex; gap: 10px; align-items: stretch; }
.url-row input[type=url] {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 15px 18px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: var(--text);
  background: #FBFAF4;
}
.url-row input[type=url]:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(27, 94, 69, .15);
}
.url-row .go { margin-top: 0; width: auto; white-space: nowrap; padding-left: 22px; padding-right: 22px; }

.toggle-manual {
  margin-top: 16px;
  background: none; border: none; padding: 0;
  color: var(--forest); font-size: 14px; cursor: pointer; text-decoration: underline;
  font-family: "Inter", sans-serif;
}
.toggle-manual:hover { color: #164C38; }
.manual { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

.found {
  background: #EAF1EC;
  border: 1px solid #CFE2D6;
  color: #164C38;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 22px;
}

.found-hint {
  color: var(--muted);
  font-size: 14px;
  margin: -10px 0 22px;
}
.link-btn {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--forest); font-size: inherit; cursor: pointer; text-decoration: underline;
  font-family: "Inter", sans-serif;
}
.link-btn:hover { color: #164C38; }

@media (max-width: 520px) {
  .url-row { flex-direction: column; }
  .url-row .go { width: 100%; }
}

/* ===== RANKR PRICING UI — append these to your current styles.css ===== */

/* --- masthead nav --- */
.masthead-nav { display: flex; align-items: center; gap: 16px; }
.nav-link {
  display: inline-block; text-decoration: none;
  background: none; border: 1px solid rgba(245,241,232,.25); color: var(--cream);
  padding: 6px 14px; border-radius: 8px; font-family: "Inter", sans-serif;
  font-size: 14px; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.nav-link:hover { background: rgba(245,241,232,.1); border-color: rgba(245,241,232,.5); }
.nav-link.active { background: rgba(245,241,232,.12); border-color: rgba(245,241,232,.55); font-weight: 600; }

.menu-toggle {
  display: none;
  background: none; border: 1px solid rgba(245,241,232,.25); color: var(--cream);
  font-size: 18px; line-height: 1; padding: 7px 11px; border-radius: 8px; cursor: pointer;
}
.menu-toggle:hover { background: rgba(245,241,232,.1); }

@media (max-width: 640px) {
  .menu-toggle { display: block; }
  .masthead-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--ink); padding: 10px 24px 18px;
    border-top: 1px solid rgba(245,241,232,.14);
    box-shadow: 0 12px 24px rgba(0,0,0,.25);
  }
  .masthead-nav.open { display: flex; }
  .masthead-nav .nav-link { text-align: left; }
}

/* --- pricing modal --- */
.modal-overlay:not([hidden]) {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(18,32,27,.55); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.modal {
  position: relative; width: 100%; max-width: 940px;
  background: var(--cream); border-radius: 18px; padding: 40px 36px 32px;
  box-shadow: 0 24px 60px rgba(18,32,27,.3);
}
.modal-close {
  position: absolute; top: 18px; right: 20px;
  background: none; border: none; font-size: 30px; line-height: 1; color: var(--muted);
  cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.modal-close:hover { background: rgba(18,32,27,.06); color: var(--text); }

/* --- stat stripe --- */
.stat-stripe { background: var(--ink); padding: 64px 0; }
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px;
  /* align-items: start (not center/stretch) is the actual fix for keeping
     all four numbers on one baseline — it aligns each stat's TOP edge to
     the same row, so a label that wraps to two lines only grows that
     stat's own height downward and never pulls its number out of line
     with the others. align-items:center would instead vertically center
     each grid item as a whole block (number+label together) relative to
     the tallest one, shifting shorter items' numbers up or down to
     compensate — exactly the misalignment this avoids. */
  align-items: start;
}
.stat {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.stat-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4vw, 42px); line-height: 1.1; letter-spacing: -.01em;
  margin: 0 0 10px;
  min-height: 1.1em; /* belt-and-suspenders: these strings won't wrap at any
                         supported width, but this guarantees a consistent
                         number-row height even if that ever changes */
}
.stat-num-amber { color: var(--gold); }
.stat-num-white { color: #fff; }
.stat-label { color: #ADA491; font-size: 14px; line-height: 1.5; margin: 0; max-width: 24ch; }
.stat-sources { color: #ADA491; font-size: 12px; text-align: center; margin: 36px 0 0; opacity: .75; }

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .stat-stripe { padding: 48px 0; }
  .stat-grid { grid-template-columns: 1fr; gap: 32px; }
}

.pricing-page { padding-top: var(--section-y); padding-bottom: 64px; }
.pricing-head { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.pricing-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 4vw, 34px); letter-spacing: -.02em; margin: 8px 0 12px;
}
.pricing-sub { color: var(--muted); font-size: 16px; margin: 0; }
.pricing-sub strong { color: var(--forest); }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; margin-top: 8px; }
.tier {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 24px 22px; display: flex; flex-direction: column; height: 100%;
}
.tier-popular {
  border: 2px solid var(--forest); box-shadow: 0 8px 28px rgba(27,94,69,.14);
  position: relative; padding-top: 30px;
}
.tier-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #33280F; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px;
  white-space: nowrap;
}
.tier-name {
  font-family: var(--font-display); font-weight: 500; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px;
}
.tier-price { margin: 0; display: flex; align-items: baseline; gap: 4px; flex: 0 0 auto; }
.tier-price .amt { font-family: var(--font-display); font-weight: 700; font-size: 40px; letter-spacing: -.02em; }
.tier-price .per { color: var(--muted); font-size: 15px; }
.tier-alt { color: var(--muted); font-size: 13px; margin: 2px 0 0; flex: 0 0 auto; }
.tier-line { font-size: 15px; font-weight: 500; margin: 14px 0 16px; flex: 0 0 auto; }
.tier-feats { list-style: none; margin: 0 0 22px; padding: 0; flex: 1; }
.tier-feats li {
  font-size: 14px; color: var(--text); padding: 7px 0 7px 24px; position: relative; line-height: 1.4;
  border-bottom: 1px solid #EDE7DA;
}
.tier-feats li::before {
  content: ""; position: absolute; left: 2px; top: 12px;
  width: 12px; height: 7px; border-left: 2px solid var(--forest-br); border-bottom: 2px solid var(--forest-br);
  transform: rotate(-45deg);
}
.tier-feats .feat-note { color: var(--muted); font-size: 12px; }
.tier-limits { list-style: none; margin: 0 0 18px; padding: 0; flex: 0 0 auto; }
.tier-limits li {
  font-size: 12.5px; color: var(--weak); padding: 5px 0 5px 24px; position: relative; line-height: 1.4;
}
.tier-limits li::before {
  content: "\00d7"; position: absolute; left: 5px; top: 4px; color: var(--weak);
  font-size: 14px; line-height: 1; font-weight: 700;
}
.tier-cta { margin-top: auto; width: 100%; }

/* One-off audit — a deliberate SECONDARY offer below the tiers. Warm gold-tinted
   card so it reads as an intentional lighter product, clearly separated from the
   3 tier cards, but never louder than the highlighted Host card. */
.oneoff {
  margin-top: 32px;
  background: linear-gradient(180deg, #FAF5EA 0%, #F3ECDC 100%);
  border: 1px solid var(--gold-soft);
  border-radius: 14px;
  padding: 22px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  box-shadow: 0 3px 16px rgba(166, 124, 52, .09);
}
.oneoff-main { flex: 1 1 320px; min-width: 0; }
.oneoff-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-deep); margin: 0 0 7px;
}
.oneoff-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0 0 4px; color: var(--ink); }
.oneoff-line { color: var(--muted); font-size: 13.5px; margin: 0; line-height: 1.5; max-width: 62ch; }
.oneoff-right { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; }
.oneoff-pricewrap { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.oneoff-price { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--ink); }
.oneoff-price-note {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-top: 5px;
}
/* Secondary CTA: gold outline that fills on hover — clearly clickable, clearly
   not the dark-green Host primary. */
.oneoff .oneoff-cta {
  width: auto; margin: 0; white-space: nowrap; padding: 12px 24px; font-size: 15px;
  background: transparent; color: var(--gold-deep); border: 1.5px solid var(--gold); box-shadow: none;
}
.oneoff .oneoff-cta:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }

.plan-note {
  margin: 20px 0 0; text-align: center; font-size: 14px; color: var(--forest);
  background: #EAF1EC; border: 1px solid #CFE2D6; border-radius: 10px; padding: 12px;
}

@media (max-width: 760px) {
  .tiers { grid-template-columns: 1fr; }
  .tier-popular { order: -1; }
  .modal { padding: 32px 20px 24px; }
  .oneoff { flex-direction: column; align-items: stretch; text-align: center; padding: 24px 20px; gap: 18px; }
  .oneoff-line { max-width: none; }
  .oneoff-right { flex-direction: column; justify-content: center; gap: 14px; }
  .oneoff-pricewrap { align-items: center; }
  .oneoff .oneoff-cta { width: 100%; }
}

/* --- FAQ accordion --- */
.faq { max-width: 780px; margin: 0 auto; padding-top: var(--section-y); padding-bottom: 64px; }
.faq h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 4vw, 34px); letter-spacing: -.02em; margin: 0 0 28px; text-align: center;
}
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.faq-q-wrap { margin: 0; font-size: inherit; font-weight: inherit; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 18px 22px; font-family: "Inter", sans-serif; font-size: 16px; font-weight: 600; color: var(--text);
}
.faq-q:hover { background: #EFE9DC; }
.faq-q:focus-visible { outline: 2px solid var(--forest); outline-offset: -2px; }
.faq-chevron { flex-shrink: 0; color: var(--forest); transition: transform .2s ease; }
.faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-a { padding: 0 22px 20px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.faq-a p { margin: 0; }
.faq-a em { color: #96392B; font-style: normal; font-weight: 600; } /* flags the still-TODO answer for whoever's editing this */

@media (max-width: 520px) {
  .faq-q { padding: 16px 18px; font-size: 15px; }
  .faq-a { padding: 0 18px 18px; }
}

/* ===== Accounts: nav auth, auth modal, save prompt, account page ===== */

/* --- nav auth controls --- */
/* Auth controls set apart from the marketing links so Log in / Sign up read
   as a distinct group (a hairline divider on desktop, a top rule on the
   collapsed mobile menu). Sign up stays the pine primary (.nav-cta). */
.auth-nav { display: inline-flex; align-items: center; gap: 12px; }
@media (min-width: 641px) {
  .auth-nav { margin-left: 6px; padding-left: 18px; border-left: 1px solid rgba(245,241,232,.22); }
}
@media (max-width: 640px) {
  .auth-nav {
    width: 100%; margin-top: 8px; padding-top: 12px;
    border-top: 1px solid rgba(245,241,232,.14);
  }
}
.nav-cta {
  background: var(--forest); color: #fff; border: none; cursor: pointer;
  padding: 6px 14px; border-radius: 8px;
  font-family: "Inter", sans-serif; font-size: 14px; font-weight: 500;
  transition: background .15s ease;
}
.nav-cta:hover { background: #164C38; }

.account-menu { position: relative; }
.account-menu > summary {
  list-style: none; cursor: pointer; color: var(--cream);
  border: 1px solid rgba(245,241,232,.25); padding: 6px 12px; border-radius: 8px;
  font-size: 14px; user-select: none;
}
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu[open] > summary { background: rgba(245,241,232,.12); border-color: rgba(245,241,232,.5); }
.account-caret { font-size: 11px; opacity: .8; }
.account-menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow); padding: 14px; min-width: 210px;
}
.account-menu-link {
  display: block; text-decoration: none; color: var(--text);
  font-size: 14px; padding: 8px 10px; border-radius: 8px;
  margin: 0 -4px; transition: background .12s ease;
}
.account-menu-link:hover { background: var(--cream); color: var(--forest); }
.account-menu-divider { height: 1px; background: var(--line); margin: 8px -4px; }
.account-menu-email { font-size: 13px; color: var(--muted); margin: 8px 0 10px; word-break: break-all; }
.account-menu-logout {
  background: none; border: 1px solid var(--line); color: var(--text);
  padding: 7px 12px; border-radius: 8px; font-size: 14px; cursor: pointer; width: 100%;
  font-family: "Inter", sans-serif;
}
.account-menu-logout:hover { background: #EFE9DC; }

/* --- auth modal + shared auth forms --- */
.auth-modal { max-width: 420px; padding: 32px 30px 26px; }
.auth-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; letter-spacing: -.01em; margin: 0 0 6px;
}
.auth-sub { color: var(--muted); font-size: 15px; margin: 0 0 22px; }
.auth-form { display: block; }
.auth-form .field-label { margin-top: 14px; }
.auth-form .field-label:first-child { margin-top: 0; }
.auth-form input[type=email], .auth-form input[type=password] {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font-family: "Inter", sans-serif; font-size: 15px; color: var(--text); background: #FBFAF4;
}
.auth-form input:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(27,94,69,.15); }
.auth-form .go { margin-top: 22px; width: 100%; }
.auth-error { color: #96392B; font-size: 14px; margin: 14px 0 0; }
.auth-notice { color: var(--forest); font-size: 14px; margin: 14px 0 0; background: #EAF1EC; border: 1px solid #CFE2D6; border-radius: 8px; padding: 10px 12px; }
.auth-alt-line { font-size: 14px; color: var(--muted); margin: 18px 0 0; text-align: center; }
.auth-forgot-line { margin: 8px 0 0; text-align: center; }

/* --- signup hook on the result --- */
.save-prompt {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: #EAF1EC; border: 1px solid #CFE2D6; border-radius: 12px;
  padding: 18px 20px; margin: 22px 0 0;
}
.save-prompt-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0 0 4px; }
.save-prompt-sub { color: var(--muted); font-size: 14px; margin: 0; }
.save-prompt .go { margin-top: 0; width: auto; white-space: nowrap; padding-left: 20px; padding-right: 20px; }
.save-confirm { color: #164C38; font-size: 14px; font-weight: 500; margin: 22px 0 0; }
.save-confirm a { color: var(--forest); font-weight: 600; }

/* --- account page --- */
.account-page { padding-top: 48px; padding-bottom: 64px; }
.account-page .section-head { text-align: center; max-width: 560px; margin: 0 auto 28px; }
.account-page .section-head .lede { max-width: none; margin: 0 auto; }
.account-auth-card { max-width: 420px; margin: 0 auto; }

.account-history-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.account-history-head h1 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 4vw, 34px);
  letter-spacing: -.02em; margin: 0;
}
.account-new-btn { margin-top: 0; width: auto; padding: 10px 18px; text-decoration: none; }
/* empty + load-error states */
.account-empty { text-align: center; padding: 40px 20px; border: 1px dashed var(--line); border-radius: var(--radius); background: #FBFAF4; }
.account-empty-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 0 0 8px; color: var(--text); }
.account-empty-sub { color: var(--muted); font-size: 15px; margin: 0 auto 20px; max-width: 440px; line-height: 1.55; }
.account-empty-cta { display: inline-block; width: auto; margin: 0; padding: 11px 20px; text-decoration: none; }
.account-load-error { color: #A34A2E; font-size: 15px; }

/* history: one card per listing, each with a sparkline trend */
/* Scan list: one compact row per listing — title+meta (left) and a tight
   right cluster (sparkline · score · delta · re-scan · chevron) so the eye
   connects listing → score without crossing an empty gulf. */
.account-cards { display: flex; flex-direction: column; gap: 10px; }
.account-card {
  position: relative; margin: 0; overflow: hidden;
  display: flex; align-items: center; gap: 16px; padding: 11px 16px 11px 18px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.account-card:hover { border-color: var(--forest); box-shadow: 0 3px 14px rgba(27,94,69,.10); background: #FBF9F3; }

/* Stretched drill-in target — covers the whole row, sits under the interactive
   side controls. Transparent: the row's content paints above it visually while
   clicks anywhere but Re-scan fall through to here. Avoids nesting a <button>. */
.account-card-overlay {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; background: none; border: none; cursor: pointer; border-radius: inherit;
}
.account-card-overlay:focus-visible { outline: 2px solid var(--forest-br); outline-offset: -2px; }

.account-card-info { position: relative; z-index: 0; min-width: 0; flex: 1 1 auto; }
.account-card-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.25; margin: 0 0 2px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-card-meta { color: var(--muted); font-size: 12.5px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.account-card-viz { position: relative; z-index: 0; display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.account-card-spark { flex-shrink: 0; display: flex; justify-content: flex-end; width: 116px; }
.account-card-metric { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.account-card-metric .trend-score { font-size: 22px; line-height: 1; }
.account-card-sub { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.15; }
.account-card-sub .trend-delta { font-size: 12px; }
.account-card-sub .trend-note { font-size: 11px; }

.account-card-side { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; flex-shrink: 0; pointer-events: none; }
.account-rescan {
  pointer-events: auto; font-family: "Inter", sans-serif; font-size: 12.5px; font-weight: 600; color: var(--forest);
  background: none; border: 1px solid var(--line); border-radius: 8px; padding: 5px 11px; cursor: pointer;
  white-space: nowrap; transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.account-rescan:hover { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.account-rescan:focus-visible { outline: 2px solid var(--forest-br); outline-offset: 2px; }
.account-card-chevron { pointer-events: none; font-size: 24px; line-height: 1; color: var(--muted); }
.account-card:hover .account-card-chevron { color: var(--forest); }

.trend-score { font-family: var(--font-display); font-weight: 700; font-size: 26px; font-variant-numeric: tabular-nums; }
.trend-score.big { font-size: 52px; line-height: 1; }
.trend-score.weak { color: #B25A3A; }
.trend-score.ok { color: var(--gold-deep); } /* deep gold: gold on white fails contrast */
.trend-score.strong { color: #2E8B66; }
.trend-delta { font-size: 13px; font-weight: 600; }
.trend-delta.up { color: #2E8B66; }
.trend-delta.down { color: #B25A3A; }
.trend-delta.flat { color: var(--muted); }
.trend-note { font-size: 12px; color: var(--muted); }

.sparkline { display: block; }
.spark-axis { font-family: "Inter", sans-serif; font-size: 11px; fill: var(--muted); }


/* one listing's history view */
.account-listing { max-width: 820px; margin: 0 auto; }
.listing-head { margin-bottom: 20px; }
.listing-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3.5vw, 30px); letter-spacing: -.02em; margin: 4px 0 6px; overflow-wrap: anywhere; }
.listing-url { color: var(--forest); font-size: 13px; word-break: break-all; }
.listing-trend-card { text-align: center; }
.listing-trend-headline { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-bottom: 8px; }
.listing-trend-chart svg { width: 100%; height: auto; max-width: 640px; margin: 0 auto; }
.listing-cap-note { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.trend-single { padding: 12px 0 4px; }
.trend-single-note { color: var(--muted); font-size: 14.5px; margin: 12px auto 0; max-width: 340px; line-height: 1.5; }
.listing-rescan { width: auto; margin: 22px auto 4px; padding: 11px 22px; }

/* monitor (auto re-scan) toggle in the listing view */
.monitor-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 18px auto 0; padding-top: 16px; border-top: 1px solid var(--line); }
.monitor-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; color: var(--text); }
.monitor-toggle input { width: 17px; height: 17px; accent-color: var(--forest); cursor: pointer; margin: 0; }
.monitor-freq { font-family: "Inter", sans-serif; font-size: 13.5px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); }

.listing-history-h { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 32px 0 12px; }
.scan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.scan-row {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  padding: 14px 16px; font-family: "Inter", sans-serif; text-align: left;
}
.scan-row:hover { border-color: var(--forest); background: #EFE9DC; }
.scan-row-date { font-size: 14px; color: var(--text); }
.scan-row-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.scan-row-score { font-family: var(--font-display); font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
.scan-row-score.weak { color: #B25A3A; }
.scan-row-score.ok { color: var(--gold-deep); }
.scan-row-score.strong { color: #2E8B66; }
.scan-row-grade { font-size: 12px; color: var(--muted); }
.scan-row-open { font-size: 13px; color: var(--forest); font-weight: 600; }

.account-detail { max-width: 820px; margin: 0 auto; }
.account-back { color: var(--forest); font-weight: 600; margin-bottom: 16px; display: inline-block; }
.account-result-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; flex-wrap: wrap; }
.account-result-when { color: var(--muted); font-size: 13px; margin: 0; }
.account-pdf-btn { width: auto; margin: 0; padding: 8px 16px; font-size: 14px; }

@media (max-width: 640px) {
  .account-menu-panel { position: static; box-shadow: none; margin-top: 8px; min-width: 0; }
  .save-prompt { flex-direction: column; align-items: stretch; }
  .save-prompt .go { width: 100%; }
  /* Stack the row on phones: title+meta on line 1, then the metric cluster
     (left) and re-scan/chevron (right) share line 2 — still a tight 2-line
     card. Shrink the sparkline and drop the "since" note (its date already
     shows in the meta line) so the cluster fits one line. */
  .account-card { flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; }
  .account-card-info { flex-basis: 100%; }
  .account-card-viz { order: 2; flex: 1 1 auto; gap: 10px; }
  .account-card-spark { width: 72px; }
  .account-card-sub .trend-note { display: none; }
  .account-card-side { order: 3; }
}

/* --- drift vs. discipline (hand-rolled SVG line chart + horizon cards) --- */
.drift { padding-top: var(--section-y); padding-bottom: var(--section-y); }

.drift-card { max-width: 820px; margin: 0 auto; padding: 26px 28px; }
.drift-chart svg { width: 100%; height: auto; display: block; }
.drift-axis-label {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  fill: var(--muted); letter-spacing: .04em; text-transform: uppercase;
}
.drift-axis-tick { font-family: "Inter", sans-serif; font-size: 15px; fill: var(--muted); }
.drift-point-label { font-family: "Inter", sans-serif; font-size: 14px; fill: var(--muted); }
.drift-curve-label { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.drift-footnote { color: var(--muted); font-size: 12.5px; font-style: italic; text-align: center; margin: 16px 0 0; line-height: 1.5; }

.horizon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.horizon-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px 22px;
}
.horizon-phase {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--forest); margin: 0 0 10px;
}
.horizon-desc { color: var(--text); font-size: 15px; line-height: 1.55; margin: 0; }

@media (max-width: 760px) {
  .horizon-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   PRECISION-INSTRUMENT — Batch A: numerals
   Placed last so it overrides the component rules above. DATA figures render in
   Space Mono + tabular so scores/points/deltas/dates align like a measurement
   readout; uppercase micro-labels go mono with tighter tracking. Body copy is
   never touched. Kept restrained — instrument, not spaceship.
   ============================================================================ */
.gauge-score, .cat-pts, .cat-chart-score, .cat-chart-na,
.trend-score, .trend-delta, .trend-note,
.scan-row-score, .scan-row-date, .scan-row-grade,
.stat-num, .tier-price .amt, .tier-price .per, .oneoff-price,
.fix-loop-count, .spark-axis, .drift-axis-tick, .drift-point-label,
.account-result-when {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.eyebrow, .gauge-grade, .tier-name, .sample-bars-label,
.check-highlight-badge, .sample-tag, .tier-badge, .stat-sources {
  font-family: var(--font-mono);
  letter-spacing: .06em;
}
/* Space Mono sits visually larger/wider than Space Grotesk at a given px, so
   pull the big display figures back a touch so they don't balloon or overflow. */
.gauge-score { font-size: 48px; }
.stat-num { font-size: clamp(26px, 3.4vw, 36px); }
.tier-price .amt { font-size: 34px; }
.oneoff-price { font-size: 28px; }
.trend-score { font-size: 24px; }
.trend-score.big { font-size: 44px; }
@media (max-width: 520px) {
  .gauge-score { font-size: 40px; }
}

/* ============================================================================
   PRECISION-INSTRUMENT — Batch B: surface detailing
   Mono technical metadata line on results; uppercase micro-tracking. Card
   sharpening is handled by the tightened --shadow token above + existing 1px
   borders. ============================================================================ */
.result-meta {
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .07em;
  font-size: 12px; color: var(--muted);
  margin: 0 0 18px; word-break: break-word;
}
.account-result-when { text-transform: uppercase; letter-spacing: .07em; font-size: 12px; }

/* ============================================================================
   PRECISION-INSTRUMENT — Batch C: data-viz precision
   Thinner, sharper gauge ring; category bars gain faint 25/50/75% gridlines so
   they read as a measured scale, not a decorative bar. ============================ */
.gauge-track { stroke: #E7E0D0; stroke-width: 11; }
.gauge-fill  { stroke-width: 11; }

/* Faint vertical gridlines at 25/50/75% behind each category bar's track. The
   coloured fill (a child) sits on top and covers them up to the score, so the
   gridlines only show in the "unearned" remainder — like tick marks on a dial. */
.cat-chart-track {
  background-color: #E7E0D0;
  background-image: repeating-linear-gradient(
    90deg, transparent 0, transparent calc(25% - 1px),
    rgba(18, 32, 27, .09) calc(25% - 1px), rgba(18, 32, 27, .09) 25%);
}
.cat-chart-fill { position: relative; z-index: 1; }

/* --- account: plan badge + checkout return banner (PayLink) --- */
.account-banner { border-radius: 12px; padding: 14px 16px; margin: 0 0 20px; font-size: 15px; border: 1px solid var(--line); }
.account-banner.success { background: #EAF1EC; border-color: #CFE2D6; color: #164C38; }
.account-banner.info { background: var(--sand); border-color: var(--line); color: var(--text); }
.account-plan { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.account-plan a { color: var(--forest); font-weight: 600; text-decoration: none; }
.account-plan a:hover { text-decoration: underline; }

/* --- Search Visibility (presence-in-search, paid) --- */
.search-vis:empty { display: none; }
.sv-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 28px 0 0; box-shadow: var(--shadow); }
.sv-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0 0 6px; }
.sv-lock { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); border: 1px solid var(--line); border-radius: 20px; padding: 2px 8px; margin-left: 6px; }
.sv-sub { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: 0 0 14px; }
.sv-upgrade { width: auto; display: inline-block; margin: 6px 0 0; padding: 10px 18px; text-decoration: none; }
.sv-empty { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.sv-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.sv-row { display: flex; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; flex-wrap: wrap; }
.sv-row-info { min-width: 0; flex: 1 1 auto; }
.sv-query { font-weight: 600; font-size: 15px; margin: 0 0 2px; overflow-wrap: anywhere; }
.sv-meta { color: var(--muted); font-size: 12.5px; margin: 0; }
.sv-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sv-band { font-family: var(--font-mono); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.sv-good { background: #EAF1EC; color: #164C38; }
.sv-ok { background: rgba(198, 154, 75, .16); color: var(--gold-deep); }
.sv-low { background: rgba(198, 154, 75, .10); color: var(--muted); }
.sv-absent { background: #F7EAE4; color: #96392B; }
.sv-row-actions { display: flex; gap: 12px; font-size: 13px; }
.sv-remove { color: var(--muted); }
.sv-gaps { margin-top: 8px; }
.sv-gaps-h { font-size: 12.5px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.sv-gaps ul { margin: 0; padding-left: 16px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.sv-form { border-top: 1px solid var(--line); padding-top: 14px; }
.sv-form input { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-family: "Inter", sans-serif; font-size: 14px; background: #FBFAF4; color: var(--text); }
.sv-form #svLoc { width: 100%; margin-bottom: 8px; }
.sv-form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sv-add { width: auto; margin: 0; padding: 8px 16px; font-size: 14px; }

/* Standalone Search Visibility section (/app/search-visibility) */
.sv-sec-head { margin: 0 0 8px; }
.sv-sec-head h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 4vw, 30px); letter-spacing: -.02em; margin: 0 0 6px; }
.sv-sec-sub { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; max-width: 64ch; }
.sv-loading { color: var(--muted); }
.sv-groups { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 18px; }
.sv-group { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.sv-group-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sv-group-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0; color: var(--ink); }
.sv-fixlink { margin-left: auto; background: none; border: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--weak); cursor: pointer; white-space: nowrap; }
.sv-fixlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.sv-form-sec { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.sv-form-sec select, .sv-form-sec input { font-family: "Inter", sans-serif; font-size: 14px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--text); }
.sv-form-sec select:focus-visible, .sv-form-sec input:focus-visible { outline: 2px solid var(--forest-br); outline-offset: 1px; border-color: var(--forest); }
.sv-empty-note { color: var(--muted); font-size: 14px; }

/* ===== Account dashboard shell (logged-in) ===== */
body.dash-active .masthead, body.dash-active .foot { display: none; }
#authMain[hidden] { display: none; }
.dash { display: flex; min-height: 100vh; }
.dash[hidden] { display: none; }

.dash-side { width: 244px; flex-shrink: 0; background: var(--ink); color: var(--cream); display: flex; flex-direction: column; padding: 22px 16px; position: sticky; top: 0; height: 100vh; }
.dash-brand { display: flex; align-items: center; gap: 9px; padding: 2px 6px 18px; text-decoration: none; color: inherit; }
.dash-brand-mk { width: 16px; height: 16px; border-radius: 4px; background: var(--gold); box-shadow: 0 0 0 4px rgba(198, 154, 75, .18); }
.dash-brand-nm { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.dash-back { display: inline-flex; align-items: center; gap: 6px; color: rgba(245, 241, 232, .55); text-decoration: none; font-size: 13px; padding: 6px; margin-bottom: 14px; }
.dash-back:hover { color: var(--gold); }
.dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dash-nav a { display: flex; align-items: center; padding: 11px 12px; border-radius: 9px; color: rgba(245, 241, 232, .82); text-decoration: none; font-size: 14.5px; font-weight: 500; border-left: 3px solid transparent; }
.dash-nav a:hover { background: rgba(245, 241, 232, .06); color: #fff; }
.dash-nav a.active { background: rgba(46, 139, 102, .16); border-left-color: var(--gold); color: #fff; }
.dash-navlbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(245, 241, 232, .38); padding: 16px 12px 6px; margin: 0; }
.dash-soon { display: flex; align-items: center; padding: 11px 12px; color: rgba(245, 241, 232, .4); font-size: 14.5px; }
.dash-soon em { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; font-style: normal; border: 1px solid rgba(245, 241, 232, .2); border-radius: 20px; padding: 2px 6px; }
/* "New" badge — live-and-new (gold fill on the ink sidebar), vs the muted
   outline "soon" badge. Remove once the feature isn't new (see app.html TODO). */
.dash-new { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; font-style: normal; background: var(--gold); color: var(--ink); font-weight: 700; border-radius: 20px; padding: 2px 7px; }
.dash-nav a.active .dash-new { background: var(--gold-soft); }
.dash-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(245, 241, 232, .12); }
.dash-email { font-family: var(--font-mono); font-size: 11.5px; color: rgba(245, 241, 232, .55); padding: 0 6px 8px; margin: 0; word-break: break-all; }
.dash-logout { width: 100%; text-align: left; background: none; border: 1px solid rgba(245, 241, 232, .22); color: var(--cream); border-radius: 8px; padding: 8px 12px; font-size: 13.5px; cursor: pointer; font-family: "Inter", sans-serif; }
.dash-logout:hover { background: rgba(245, 241, 232, .08); }
.dash-menu { display: none; }

.dash-main { flex: 1; min-width: 0; padding: 34px 40px; max-width: 1040px; }
.dash-section[hidden] { display: none; }
.dash-section > h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 4vw, 30px); letter-spacing: -.02em; margin: 0 0 20px; }
/* the account views inside #section-scans keep their own layout; just neutralize
   the old page padding since the dashboard main provides it now. */
.dash-main .account-page, .dash-main .account-history, .dash-main .account-listing, .dash-main .account-detail { padding: 0; margin: 0; max-width: none; }

.plan-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; max-width: 520px; }
.plan-cur { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.plan-name { font-family: var(--font-display); font-weight: 700; font-size: 26px; margin: 0 0 6px; }
.plan-desc { color: var(--muted); font-size: 13.5px; margin: 0 0 10px; }
.plan-renew { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.plan-date { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.plan-free-sub { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.plan-btn { width: auto; display: inline-block; margin: 0; padding: 10px 18px; text-decoration: none; }
.plan-loading { color: var(--muted); }

.settings-body { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.set-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; }
.set-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.set-val { font-family: var(--font-mono); font-size: 15px; margin: 0; word-break: break-all; }
.set-sub { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.set-btn { width: auto; margin: 0; padding: 9px 16px; font-size: 14px; }
.set-notice { color: var(--forest); font-size: 13.5px; margin: 12px 0 0; }

/* --- Compare Listings (cross-OTA QA) --- */
.qa-head { margin: 0 0 18px; }
.qa-head h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 4vw, 30px); letter-spacing: -.02em; margin: 0 0 6px; }
.qa-sub { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; max-width: 62ch; }
.qa-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin: 0 0 8px; max-width: 820px; }
.qa-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qa-field span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.qa-field input { font-family: "Inter", sans-serif; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); }
.qa-field input:focus-visible { outline: 2px solid var(--forest-br); outline-offset: 1px; border-color: var(--forest); }
.qa-run { width: auto; margin: 0; padding: 10px 20px; white-space: nowrap; }
.qa-error { color: var(--weak); font-size: 13.5px; margin: 4px 0 0; grid-column: 1 / -1; }
.qa-error-box { color: var(--weak); background: rgba(178,90,58,.08); border: 1px solid rgba(178,90,58,.25); border-radius: 10px; padding: 14px 16px; font-size: 14px; }

.qa-loading { max-width: 520px; margin: 24px 0; }
.qa-loading .loading-bar { margin-bottom: 12px; }
.qa-loading-text { color: var(--muted); font-size: 14px; margin: 0; }

.qa-open { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 22px 0 10px; }
.qa-open a { color: var(--forest); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.qa-open a:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.qa-recompare { margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.qa-recompare:hover { border-color: var(--forest); color: var(--forest); }
.qa-summary { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.qa-summary strong { color: var(--text); }
.qa-none { color: var(--good); font-size: 15px; padding: 8px 0; }

.qa-block { margin: 0 0 20px; }
/* Header color-coding by state (subtle — a tinted label + a small state dot,
   not a traffic light). Amber = needs attention, green = agree, grey = quiet. */
.qa-block-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.qa-block-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--gold); }
.qa-block-diff .qa-block-title { color: var(--gold-deep); }
.qa-group { margin: 0 0 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.qa-group > summary { cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); list-style: none; padding: 4px 0; }
.qa-group > summary::-webkit-details-marker { display: none; }
.qa-group > summary::before { content: "▸ "; }
.qa-group[open] > summary::before { content: "▾ "; }
.qa-group-match > summary { color: var(--forest); }        /* agree → green */
.qa-group-unknown > summary,
.qa-group-neutral > summary { color: var(--muted); }        /* incomplete → quiet grey */

.qa-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.qa-table thead th { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.qa-table thead th:nth-child(3) { text-align: left; }
.qa-row td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.qa-cell-a, .qa-cell-b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.qa-cell-b { color: var(--text); }
.qa-cell-label { font-weight: 600; color: var(--ink); }
.qa-note { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }
.qa-cell-act { text-align: right; white-space: nowrap; }
.qa-mark { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.qa-mark:hover { border-color: var(--forest); color: var(--forest); }
.qa-row-int { opacity: .55; }

.qa-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
/* Both difference states read AMBER (needs attention), not red — this is a
   precision tool, not an alarm. Match = green, couldn't-compare = quiet grey. */
.qa-badge-mismatch { background: rgba(198,154,75,.22); color: #7A5A1E; }
.qa-badge-missing { background: rgba(198,154,75,.18); color: #7A5A1E; }
.qa-badge-unknown { background: var(--sand); color: var(--muted); }
.qa-badge-match { background: rgba(46,139,102,.14); color: var(--forest); }

/* Severity chip (triage on the differences list): critical = red, moderate =
   amber, minor = grey — modeled on the PM checklist's 1/2/3 weights. Separate
   from the status badge (which says WHAT differs; this says HOW important). */
.qa-sev { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; vertical-align: middle; }
.qa-sev-critical { background: rgba(178,90,58,.16); color: #8F3F26; }
.qa-sev-moderate { background: rgba(198,154,75,.20); color: #7A5A1E; }
.qa-sev-minor { background: var(--sand); color: var(--muted); }
.qa-na { font-size: 12.5px; color: var(--muted); margin: 16px 0 0; }

.qa-history { margin: 32px 0 0; border-top: 1px solid var(--line); padding-top: 16px; }
.qa-history-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.qa-history-item { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 0 0 8px; cursor: pointer; font: inherit; transition: border-color .12s ease; }
.qa-history-item:hover { border-color: var(--forest); }
.qa-history-when { font-family: var(--font-mono); font-size: 12px; color: var(--muted); flex-shrink: 0; }
.qa-history-diff { font-size: 12.5px; font-weight: 700; color: var(--weak); flex-shrink: 0; }
.qa-history-urls { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 720px) {
  .qa-form { grid-template-columns: 1fr; }
  .qa-run { width: 100%; }
  .qa-cell-act { text-align: left; }
}

/* --- Tasks (aggregate fix to-do) --- */
.tasks-head { margin: 0 0 20px; }
.tasks-head h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 4vw, 30px); letter-spacing: -.02em; margin: 0 0 4px; }
.tasks-sub { color: var(--muted); font-size: 14px; margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tasks-loading { color: var(--muted); }

.task-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.task-pill {
  font-size: 13px; font-family: "Inter", sans-serif; cursor: pointer;
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  padding: 6px 13px; border-radius: 20px; transition: background .12s ease, border-color .12s ease, color .12s ease;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-pill:hover { border-color: var(--forest); color: var(--forest); }
.task-pill.active { background: var(--forest); border-color: var(--forest); color: var(--cream); }

.task-group { margin: 0 0 26px; }
.task-group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 0 0 8px; border-bottom: 1px solid var(--line); }
.task-group-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
a.task-group-title:hover { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.task-group-plat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.task-group-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.task-group-toggle { background: none; border: none; cursor: pointer; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; color: var(--muted); padding: 0; white-space: nowrap; }
.task-group-toggle:hover { color: var(--forest); }
.task-group-open { font-size: 13px; font-weight: 600; color: var(--forest); text-decoration: none; white-space: nowrap; }
.task-group-open:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }

/* Task rows share the My Scans card rhythm (same radius/border/shadow, ~11px
   vertical padding, right-cluster, hover) but are EXPANDABLE: a 2-column grid
   (checkbox | content) with a full-width detail row that animates open to
   reveal the complete "Do this:" instruction. */
.task-list { display: flex; flex-direction: column; gap: 10px; }
.task-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 11px 16px;
  display: grid; grid-template-columns: auto 1fr; column-gap: 13px; align-items: center;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.task-card:hover { border-color: var(--forest); box-shadow: 0 3px 14px rgba(27,94,69,.10); background: #FBF9F3; }
.task-check {
  appearance: none; -webkit-appearance: none; grid-row: 1; grid-column: 1; flex-shrink: 0; margin: 0;
  width: 20px; height: 20px; border: 2px solid var(--line); border-radius: 6px;
  background: var(--cream); cursor: pointer; position: relative; transition: background .12s ease, border-color .12s ease;
}
.task-check:hover { border-color: var(--forest); }
.task-check:checked { background: var(--forest); border-color: var(--forest); }
.task-check:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid var(--cream); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.task-check:focus-visible { outline: 2px solid var(--forest-br); outline-offset: 2px; }
/* Clickable body (expand toggle) and the non-expandable static variant share
   the second grid column + the same inner flex layout. */
.task-expand, .task-static { grid-row: 1; grid-column: 2; min-width: 0; display: flex; align-items: center; gap: 13px; }
.task-expand { background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.task-expand:focus-visible { outline: 2px solid var(--forest-br); outline-offset: 3px; border-radius: 8px; }
.task-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.task-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-note { font-size: 12.5px; color: var(--muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-note strong { color: var(--forest); font-weight: 600; }
.task-card.expanded .task-note { display: none; } /* full text shows in the detail row instead */
.task-side { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.task-listing { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--sand); padding: 3px 8px; border-radius: 20px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-when { font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted); }
.task-chevron { color: var(--muted); font-size: 20px; line-height: 1; transition: transform .2s ease, color .2s ease; }
.task-card.expanded .task-chevron { transform: rotate(90deg); color: var(--forest); }
/* Animated detail: grid-template-rows 0fr → 1fr smoothly reveals height:auto. */
.task-detail-wrap { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s ease; }
.task-card.expanded .task-detail-wrap { grid-template-rows: 1fr; }
.task-detail { overflow: hidden; min-height: 0; }
.task-detail-text { margin: 9px 0 1px; padding-left: 33px; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.task-detail-text strong { color: var(--forest); font-weight: 600; }
.task-card.done { opacity: .72; }
.task-card.done .task-title { text-decoration: line-through; text-decoration-color: var(--line); color: var(--muted); }

/* Skeleton loading — structure paints instantly instead of a blank screen. */
.tasks-skeleton { display: flex; flex-direction: column; gap: 26px; }
.task-skel-group { display: flex; flex-direction: column; gap: 10px; }
.skel { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--sand) 25%, var(--line) 37%, var(--sand) 63%); background-size: 400% 100%; animation: skel-shimmer 1.4s ease infinite; }
@keyframes skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.skel-head { height: 18px; width: 240px; margin-bottom: 4px; }
.task-skel-row { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 11px 16px; display: flex; align-items: center; gap: 13px; }
.skel-check { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; }
.skel-lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.skel-title { height: 13px; width: 42%; }
.skel-note { height: 11px; width: 68%; }
.skel-chip { width: 74px; height: 18px; border-radius: 20px; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .task-detail-wrap, .task-chevron { transition: none; }
  .skel { animation: none; }
}

.tasks-none { color: var(--muted); font-size: 15px; padding: 8px 0; }
.tasks-done { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.tasks-done > summary { cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); list-style: none; padding: 4px 0; }
.tasks-done > summary::-webkit-details-marker { display: none; }
.tasks-done > summary::before { content: "▸ "; }
.tasks-done[open] > summary::before { content: "▾ "; }
.tasks-done .task-list { margin-top: 12px; }
.tasks-empty { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 26px; max-width: 520px; text-align: center; }
.tasks-empty-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 0 0 8px; }
.tasks-empty-sub { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 18px; }
.tasks-empty-cta { display: inline-block; width: auto; margin: 0; padding: 10px 18px; text-decoration: none; }
/* The reused correlation loop sits above the list here. */
#tasksBody .fix-loop { margin: 0 0 18px; }

@media (max-width: 860px) {
  .dash-menu { display: inline-flex; align-items: center; gap: 8px; position: fixed; top: 12px; left: 12px; z-index: 60; background: var(--ink); color: var(--cream); border: none; border-radius: 8px; padding: 8px 12px; font-size: 14px; cursor: pointer; }
  .dash-side { position: fixed; left: -260px; top: 0; z-index: 55; transition: left .2s ease; box-shadow: 0 0 40px rgba(18, 32, 27, .4); }
  .dash-side.open { left: 0; }
  .dash-main { padding: 60px 20px 28px; }
}

/* ── PriceLabs: Settings integration card ─────────────────────────────────── */
.set-tag { font: 600 10px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); background: var(--gold-soft); border-radius: 999px; padding: 3px 7px; margin-left: 6px; vertical-align: middle; }
.set-hint { font-size: 12px; color: var(--muted); margin: 8px 0 0; line-height: 1.5; }
.pl-connect { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pl-input { flex: 1 1 240px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: 14px/1.2 "Space Mono", ui-monospace, monospace; color: var(--text); }
.pl-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.pl-status { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); margin: 0 0 12px; }
.pl-status code { font-family: "Space Mono", ui-monospace, monospace; font-size: 12px; background: var(--sand); padding: 1px 5px; border-radius: 5px; }
.pl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--forest-br); box-shadow: 0 0 0 3px rgba(46,139,102,.18); flex: none; }

/* ── PriceLabs: Market position panel (on a scan result) ──────────────────── */
.market-panel { margin-top: 28px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #fff, var(--cream)); }
.market-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.market-head h2 { font: 600 18px/1.2 "Clash Display", "Inter", sans-serif; color: var(--ink); margin: 0; }
.market-src { font: 600 10px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); background: var(--gold-soft); border-radius: 999px; padding: 4px 8px; white-space: nowrap; }
.market-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 16px; }
.market-stat { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.market-stat-label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.market-stat-val { font: 600 20px/1.1 "Space Mono", ui-monospace, monospace; color: var(--ink); }
.market-pos { font-size: 14px; line-height: 1.55; color: var(--text); margin: 0 0 16px; }
.market-pos strong { color: var(--gold-deep); }
.market-band { margin: 0 0 16px; }
.market-band-track { position: relative; height: 10px; border-radius: 999px; background: var(--sand); overflow: visible; }
.market-band-fill { position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(90deg, var(--gold-soft), var(--gold), var(--gold-deep)); opacity: .55; }
.market-band-marker { position: absolute; top: -5px; width: 2px; height: 20px; background: var(--ink); border-radius: 2px; transform: translateX(-1px); }
.market-band-you { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font: 600 10px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.market-band-ticks { display: flex; justify-content: space-between; margin-top: 10px; }
.market-band-ticks span { display: flex; flex-direction: column; gap: 2px; font: 600 12px/1.1 "Space Mono", ui-monospace, monospace; color: var(--text); }
.market-band-ticks em { font: 500 10px/1 "Inter", sans-serif; font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.market-note { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin: 0; }
.market-empty { font-size: 14px; color: var(--muted); margin: 0; }
.market-connect { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.market-connect-title { font: 600 15px/1.3 "Inter", sans-serif; color: var(--ink); margin: 0 0 3px; }
.market-connect-sub { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0; max-width: 42ch; }

/* ============================================================================
   Scan-result density — match the tightened My Scans / Tasks dashboard pages.
   Layout/spacing only (no data/content change): shrink the oversized gauge,
   compress section rhythm, and bring the Market Position panel + metric tiles
   down to the same compact card padding used elsewhere so the fixes sit higher.
   ============================================================================ */
/* Make the gauge SVG scale to its box so the gauge is actually resizable
   (the markup hard-codes width/height=200). */
.gauge svg { width: 100%; height: 100%; display: block; }
.gauge { width: 132px; height: 132px; }
.gauge-score { font-size: 34px; }
.gauge-grade { font-size: 11px; margin-top: 2px; }
.score-head { gap: 20px; }
.summary-text { font-size: 16px; line-height: 1.45; }

/* Section rhythm: context (score → market) → action (breakdown → fixes),
   tighter so the fixes are reachable with less scrolling. */
.cat-chart, .fixes, .breakdown, .hidden-panel { margin-top: 20px; }
.cat-chart-sub { margin: -6px 0 14px; }

/* Market Position panel — same compact card language as scan/task cards. */
.market-panel { margin-top: 16px; padding: 15px 16px; border-radius: 12px; }
.market-head { margin-bottom: 10px; }
.market-head h2 { font-size: 16px; }
.market-stats { gap: 8px; margin-bottom: 12px; }
.market-stat { padding: 9px 12px; border-radius: 9px; }
.market-stat-label { font-size: 10.5px; }
.market-stat-val { font-size: 17px; }
.market-pos { font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
.market-band { margin-bottom: 12px; }
.market-note { font-size: 11px; }

@media (max-width: 767px) {
  .gauge { width: 108px; height: 108px; }
  .gauge-score { font-size: 30px; }
  .summary-text { font-size: 15px; }
  .market-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── PriceLabs: Pricing calendar panel (collapsible; matches dashboard density) ── */
.pcal-panel { margin-top: 16px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, #fff, var(--cream)); }
.pcal-summary { font-size: 13px; line-height: 1.5; color: var(--text); margin: 0 0 10px; }
.pcal-summary strong { color: var(--gold-deep); }
.pcal-toggle { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font: 600 13px/1 "Inter", sans-serif; color: var(--forest); cursor: pointer; }
.pcal-toggle:hover { border-color: var(--forest); background: #EFE9DC; }
.pcal-body { margin-top: 14px; }
.pcal-monthnav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
.pcal-monthlabel { font: 600 14px/1 "Inter", sans-serif; color: var(--ink); min-width: 150px; text-align: center; }
.pcal-arrow { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); cursor: pointer; font-size: 16px; line-height: 1; color: var(--forest); }
.pcal-arrow:hover:not(:disabled) { border-color: var(--forest); }
.pcal-arrow:disabled { opacity: .35; cursor: default; }
.pcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pcal-dow { text-align: center; font: 600 10px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-bottom: 4px; }
.pcal-cell { position: relative; min-height: 52px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); padding: 3px 5px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; }
.pcal-cell.tinted { background: color-mix(in srgb, var(--dc) 16%, var(--card)); }
.pcal-blank { border: none; background: none; }
.pcal-daynum { font: 500 10px/1 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.pcal-rec { margin-top: auto; font: 700 12px/1 "Space Mono", ui-monospace, monospace; color: var(--ink); font-variant-numeric: tabular-nums; }
.pcal-gaptag { font: 600 9.5px/1 "Space Mono", ui-monospace, monospace; margin-top: 2px; }
.pcal-gaptag.under { color: var(--weak); }
.pcal-gaptag.over { color: var(--muted); }
.pcal-min { position: absolute; top: 3px; right: 5px; font: 600 8.5px/1 "Space Mono", ui-monospace, monospace; color: var(--gold-deep); }
.pcal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 8px; }
.pcal-leg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.pcal-swatch { width: 10px; height: 10px; border-radius: 3px; }
.pcal-swatch.under { background: var(--weak); }
.pcal-swatch.over { background: var(--muted); }
@media (max-width: 767px) {
  .pcal-cell { min-height: 46px; padding: 3px 3px; }
  .pcal-rec { font-size: 11px; }
  .pcal-gaptag { display: none; }
}

/* ── PriceLabs: Occupancy pace panel (② — you vs comparable listings) ──────── */
.occ-panel { margin-top: 16px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, #fff, var(--cream)); }
.occ-legend { display: flex; gap: 16px; margin: 0 0 12px; }
.occ-key { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.occ-dot { width: 10px; height: 10px; border-radius: 3px; }
.occ-dot.you, .occ-fill.you { background: var(--forest-br); }
.occ-dot.mk, .occ-fill.mk { background: var(--gold); }
.occ-rows { display: flex; flex-direction: column; gap: 10px; }
.occ-row { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 12px; }
.occ-win { font: 600 12px/1 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.occ-bars { display: flex; flex-direction: column; gap: 3px; }
.occ-bar { height: 7px; border-radius: 5px; background: var(--sand); overflow: hidden; }
.occ-fill { display: block; height: 100%; border-radius: 5px; }
.occ-nums { font: 12px/1 "Space Mono", ui-monospace, monospace; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.occ-nums b { color: var(--ink); }
.occ-ctx { font-size: 13px; color: var(--text); margin: 12px 0 0; line-height: 1.5; }

/* ============================================================================
   RESULT PAGE — one design system across every section (score, Market Position,
   Occupancy Pace, Pricing Calendar, category breakdown, fixes). Matches the
   dashboard (Tasks) language: a display-font section title over a hairline
   divider, flat sections (no section-level cards / no nested cards), one bar
   geometry, tightened density. Layout only — no content or data change.
   ============================================================================ */
:root { --rbar-h: 8px; --rbar-r: 999px; }

/* Section shell — every section is a sibling with the same rhythm. */
.rsec { margin: 0 0 22px; padding: 0; border: 0; background: none; border-radius: 0; }
.rsec:last-child { margin-bottom: 0; }
.rsec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 13px; padding: 0 0 9px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rsec-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; line-height: 1.2; color: var(--ink); margin: 0; text-transform: none; }
.rsec-tag { font: 600 10px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); background: var(--gold-soft); border-radius: 999px; padding: 4px 8px; white-space: nowrap; align-self: center; }

/* Score section: header + gauge/summary row (no eyebrow — the title carries it). */
.rsec-score .score-head { gap: 22px; margin: 0; }
.summary-text { font-size: 16px; line-height: 1.5; color: var(--text); }

/* Category breakdown — tighter rows, sub note under the divider. */
.cat-chart-sub { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.cat-chart-rows { gap: 9px; }
.cat-chart-row { grid-template-columns: 148px 1fr 62px; gap: 14px; }
.cat-chart-name { font-size: 13px; }
.cat-chart-score { font-size: 13px; white-space: nowrap; }

/* Fixes — align to the dashboard row-card (task-card) density. */
.fix-list li { padding: 12px 16px 12px 46px; margin-bottom: 8px; border-radius: var(--radius); background: var(--card); }
.fix-list li::before { left: 14px; top: 12px; width: 24px; height: 24px; border-radius: 6px; font-size: 13px; }
.fix-title { font-size: 15px; gap: 9px; }
.fix-why { font-size: 13px; margin: 5px 0 7px; }
.fix-action { font-size: 14px; }

/* PriceLabs panels flatten from cards into flat sections (kills the nested-card
   look); their .rsec spacing + .rsec-head divider now match the rest. */
.market-panel, .pcal-panel, .occ-panel { padding: 0; border: 0; background: none; border-radius: 0; }
.market-stats { gap: 6px 22px; margin-bottom: 12px; }
.market-stat { padding: 0; border: 0; background: none; border-radius: 0; }
.market-stat-label { font-size: 10.5px; }
.market-stat-val { font-size: 18px; }
.market-note, .occ-panel .market-note { margin-top: 12px; }

/* Not-connected prompt is a real CTA, so it keeps a single subtle card. */
.market-connect { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 14px 16px; }

/* One bar geometry for all three data-bars (category / occupancy / market band):
   same height, same pill radius, same track. Colour semantics stay per-context —
   category = status (red weak / gold ok / green strong), occupancy = you vs
   comparable, market = distribution band. */
.cat-chart-track, .occ-bar, .market-band-track { height: var(--rbar-h); border-radius: var(--rbar-r); }
.cat-chart-fill, .occ-fill, .market-band-fill { border-radius: var(--rbar-r); }
.cat-chart-fill.weak { background: var(--weak); }
.cat-chart-fill.ok   { background: var(--gold); }
.cat-chart-fill.strong { background: var(--forest-br); }
.occ-bar, .market-band-track { background: #E7E0D0; }
.market-band-marker { top: -5px; height: 18px; }

@media (max-width: 767px) {
  .cat-chart-row { grid-template-columns: 88px 1fr 54px; gap: 10px; }
  .cat-chart-score { font-size: 12px; }
  .market-stats { grid-template-columns: repeat(2, 1fr); gap: 10px 18px; }
}

/* ── Search Visibility × PriceLabs price context (weak results only) ───────────
   A distinct, subtle "market/price" lens inside a weak SV row — references the
   visibility reading without merging into it. Correlational framing only. */
.sv-price-ctx { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--gold-soft) 22%, var(--card)); }
.sv-price-h { font: 600 10.5px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 5px; }
.sv-price-body { font-size: 12.5px; line-height: 1.55; color: var(--text); margin: 0; }
.sv-price-link { background: none; border: 0; padding: 0; margin-left: 2px; font: 600 12.5px/1.55 "Inter", sans-serif; color: var(--forest); cursor: pointer; }
.sv-price-link:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================================
   SEARCH VISIBILITY — refined rows (consistent status badge for every state),
   primary "Check now", quiet "Remove", per-row "holding it back", and a tidy
   collapsible add-form card. Matches dashboard (Tasks) density + luxury palette.
   Visibility logic/data untouched — presentation only.
   ============================================================================ */
.sv-list { gap: 8px; }
.sv-row { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.sv-row-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sv-row-info { min-width: 0; flex: 1 1 auto; }
.sv-query { font-weight: 600; font-size: 14px; margin: 0; overflow-wrap: anywhere; }
.sv-meta { color: var(--muted); font-size: 12.5px; margin: 2px 0 0; }

/* Status: a first-class, consistently-placed badge for ALL states. */
.sv-band { flex-shrink: 0; font: 600 11px/1.35 "Inter", sans-serif; letter-spacing: 0; text-transform: none; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.sv-good    { background: rgba(46,139,102,.14); color: var(--forest); }      /* appearing → green */
.sv-weak    { background: rgba(198,154,75,.20); color: var(--gold-deep); }   /* deep → amber */
.sv-absent  { background: rgba(178,90,58,.14);  color: var(--weak); }        /* not appearing → terracotta */
.sv-neutral { background: var(--sand); color: var(--muted); }               /* not checked → neutral */

.sv-gaps { margin-top: 10px; }
.sv-row-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 11px; }
.sv-row-actions { display: flex; align-items: center; gap: 14px; }
.sv-check { background: var(--forest); color: var(--cream); border: 0; border-radius: 8px; padding: 6px 14px; font: 600 13px/1 "Inter", sans-serif; cursor: pointer; transition: background .15s ease; }
.sv-check:hover:not(:disabled) { background: var(--forest-br); }
.sv-check:disabled { opacity: .6; cursor: default; }
.sv-remove { color: var(--muted); font-size: 13px; }
.sv-remove:hover { color: var(--weak); }
.sv-fixlink { margin: 0; background: none; border: 0; padding: 0; font: 600 13px/1 "Inter", sans-serif; color: var(--forest); cursor: pointer; white-space: nowrap; }
.sv-fixlink:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }

/* Standalone section: group by listing with a Tasks-style header divider — no
   group card wrapper (avoids cards-inside-cards); the rows are the cards. */
.sv-groups { gap: 18px; }
.sv-group { background: none; border: 0; box-shadow: none; padding: 0; }
.sv-group-head { margin: 0 0 10px; padding: 0 0 8px; border-bottom: 1px solid var(--line); }
.sv-group .sv-row + .sv-row { margin-top: 8px; }

/* "＋ Track a new search" — a collapsible card, not a raw form at the bottom. */
.sv-add { margin-top: 16px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; max-width: 620px; }
.sv-add[open] { box-shadow: var(--shadow); }
.sv-add-summary { list-style: none; cursor: pointer; padding: 12px 16px; font: 600 14px/1 "Inter", sans-serif; color: var(--forest); user-select: none; }
.sv-add-summary::-webkit-details-marker { display: none; }
.sv-add-summary:hover { background: #EFE9DC; }
.sv-add .sv-form { border: 0; border-top: 1px solid var(--line); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.sv-field { display: flex; flex-direction: column; gap: 5px; }
.sv-field > span { font: 600 10.5px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sv-field input, .sv-field select { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font: 400 14px/1.2 "Inter", sans-serif; background: var(--card); color: var(--text); width: 100%; }
.sv-field input:focus-visible, .sv-field select:focus-visible { outline: 2px solid var(--forest-br); outline-offset: 1px; border-color: var(--forest); }
.sv-form-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; }
.sv-field-guests input { width: 76px; }
.sv-add-btn { align-self: flex-start; padding: 9px 18px; font-size: 14px; }

@media (max-width: 767px) {
  .sv-form-grid { grid-template-columns: 1fr 1fr; }
  .sv-field-guests { grid-column: span 2; }
  .sv-field-guests input { width: 100%; }
}
/* On narrow phones the wide status label crowds the query — stack it below,
   left-aligned, so the location + dates get full width. */
@media (max-width: 560px) {
  .sv-row-main { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sv-band { align-self: flex-start; order: -1; }
}

/* ── Location autocomplete (Photon / OpenStreetMap, no key) ──────────────────── */
.loc-ac-wrap { position: relative; }
.loc-ac { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(18,32,27,.14); overflow: hidden; }
.loc-ac-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 12px; font: 400 13.5px/1.3 "Inter", sans-serif; color: var(--text); cursor: pointer; }
.loc-ac-item:hover, .loc-ac-item.active { background: #EFE9DC; color: var(--ink); }
.loc-ac-attr { padding: 6px 12px; border-top: 1px solid var(--sand); font: 400 10px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .04em; color: var(--muted); }

/* "Track a new search" expander: clear button affordance + rotating chevron,
   and it renders open when there are no searches yet (set in markup). */
.sv-add-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sv-add-caret { flex-shrink: 0; width: 8px; height: 8px; border-right: 2px solid var(--forest); border-bottom: 2px solid var(--forest); transform: rotate(45deg); transition: transform .2s ease; }
.sv-add[open] .sv-add-caret { transform: rotate(-135deg); }

/* ── In-app scan ("Score a new listing") — dashboard-styled, stays in /app ──── */
.scan-intro h1 { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.scan-intro-sub { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 8px 0 20px; max-width: 62ch; }
.scan-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; max-width: 660px; }
.scan-form input { flex: 1 1 320px; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font: 400 15px/1.2 "Inter", sans-serif; background: var(--card); color: var(--text); }
.scan-form input:focus-visible { outline: 2px solid var(--forest-br); outline-offset: 1px; border-color: var(--forest); }
.scan-run-btn { flex-shrink: 0; }
.scan-err { color: var(--weak); font-size: 13.5px; margin: 12px 0 0; max-width: 62ch; }
.scan-progress { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); max-width: 660px; }
.scan-progress[hidden] { display: none; } /* class display: flex would otherwise defeat the hidden attribute */
.scan-spinner { width: 22px; height: 22px; border: 2.5px solid var(--sand); border-top-color: var(--forest); border-radius: 50%; animation: scanspin .8s linear infinite; flex-shrink: 0; }
@keyframes scanspin { to { transform: rotate(360deg); } }
.scan-progress-step { font-weight: 600; font-size: 14px; margin: 0; color: var(--ink); }
.scan-progress-note { font-size: 12.5px; color: var(--muted); margin: 3px 0 0; }
@media (prefers-reduced-motion: reduce) { .scan-spinner { animation-duration: 2.4s; } }

/* ── Free-consultation CTAs ──────────────────────────────────────────────────
   Marketing (prospect-facing, prominent) + in-app (soft, dismissible). */
.consult-card { max-width: 620px; margin: 0 auto; text-align: center; background: linear-gradient(180deg, #fff, var(--cream)); border: 1px solid var(--line); border-radius: 18px; padding: 38px 32px; box-shadow: var(--shadow); }
.consult-card h2 { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -.02em; color: var(--ink); margin: 0 0 10px; }
.consult-sub { color: var(--muted); font-size: 16px; line-height: 1.55; margin: 0 auto 22px; max-width: 46ch; }
.consult-btn { display: inline-block; text-decoration: none; }
.consult-inapp-btn { text-decoration: none; }

/* In-app: prominent on the first result, a quiet line thereafter, dismissible. */
.consult-inapp { position: relative; margin-top: 22px; }
.consult-inapp-first { padding: 18px 40px 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, #fff, var(--cream)); box-shadow: var(--shadow); }
.consult-inapp-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--ink); margin: 0 0 5px; }
.consult-inapp-title em { font-style: normal; color: var(--forest); }
.consult-inapp-sub { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: 0 0 14px; max-width: 52ch; }
.consult-inapp-quiet { padding: 12px 40px 0 2px; border-top: 1px solid var(--line); margin-top: 20px; }
.consult-inapp-line { font-size: 13px; color: var(--muted); margin: 0; }
.consult-inapp-line a { color: var(--forest); font-weight: 600; text-decoration: none; white-space: nowrap; }
.consult-inapp-line a:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.consult-x { position: absolute; top: 10px; right: 10px; background: none; border: 0; font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.consult-x:hover { color: var(--ink); background: var(--sand); }

/* ── Progress (per-listing change → outcome timeline) ───────────────────────── */
.prog { margin-top: 22px; }
.prog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; padding: 0 0 9px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.prog-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.prog-sub { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 0 0 16px; max-width: 60ch; }
.prog-timeline { display: flex; flex-direction: column; gap: 10px; }
.prog-entry { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; }
.prog-date { font: 600 11px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.prog-change { font-size: 14px; color: var(--ink); font-weight: 600; margin: 0 0 9px; }
.prog-change .prog-fixes { font-weight: 400; color: var(--text); }
.prog-outcomes { display: flex; flex-direction: column; gap: 6px; }
.prog-metric { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); flex-wrap: wrap; }
.prog-metric-label { color: var(--muted); min-width: 74px; }
.prog-arrow { color: var(--muted); }
.prog-chip { font: 600 12px/1.4 "Space Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.prog-chip.up { background: rgba(46,139,102,.14); color: var(--forest); }
.prog-chip.flat { background: var(--sand); color: var(--muted); }
.prog-chip.down { background: rgba(178,90,58,.14); color: var(--weak); }
.prog-since { color: var(--muted); font-size: 12px; }
.prog-b-good { color: var(--forest); font-weight: 600; }
.prog-b-weak { color: var(--weak); font-weight: 600; }
.prog-pending { font-size: 12.5px; color: var(--muted); font-style: italic; margin: 0; }
.prog-note { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 14px 0 0; }
.prog-empty { background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); padding: 22px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* ── Google as a COMPLEMENT to the OTA scan — follow-on prompt + scan block ──── */
/* Additive Google follow-on after an OTA result (homepage + dashboard). Secondary. */
.gfollow { margin-top: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--gold-soft) 14%, var(--card)); padding: 16px 18px; }
.gfollow-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--ink); margin: 0 0 5px; }
.gfollow-body { font-size: 13.5px; line-height: 1.55; color: var(--text); margin: 0 0 12px; max-width: 60ch; }
.gfollow-body strong { color: var(--gold-deep); }
.gfollow-btn { background: none; border: 1px solid var(--forest); border-radius: 9px; padding: 8px 16px; font: 600 13.5px/1 "Inter", sans-serif; color: var(--forest); cursor: pointer; text-decoration: none; display: inline-block; }
.gfollow-btn:hover { background: var(--forest); color: var(--cream); }
.gfollow-form { display: flex; gap: 10px; flex-wrap: wrap; }
.gfollow-form input { flex: 1 1 300px; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font: 400 14px/1.2 "Inter", sans-serif; background: var(--card); color: var(--text); }
.gfollow-form input:focus-visible { outline: 2px solid var(--forest-br); outline-offset: 1px; border-color: var(--forest); }

/* In-app scan view: primary OTA block + secondary (lighter) Google block. */
.scan-block { margin-top: 18px; }
.scan-block-label { font: 600 13px/1.3 "Inter", sans-serif; color: var(--ink); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scan-block-tag { font: 600 10px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; color: var(--gold-deep); background: var(--gold-soft); border-radius: 999px; padding: 3px 7px; }
.scan-block-google { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--gold-soft) 12%, var(--card)); }
.scan-block-sub { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0 0 12px; max-width: 58ch; }

/* Reference hint under the Google scan input (follow-on + scan view). */
.google-hint { font-size: 12px; color: var(--muted); line-height: 1.55; margin: 10px 0 0; max-width: 60ch; }
.google-hint strong { color: var(--text); font-weight: 600; }
.google-hint a { color: var(--forest); font-weight: 600; text-decoration: none; white-space: nowrap; }
.google-hint a:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }

/* ── Reviews Analysis ─────────────────────────────────────────────────────── */
.rev-head { margin-bottom: 20px; }
.rev-head h1 { margin: 0 0 6px; }
.rev-sub { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; max-width: 66ch; }
.rev-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 22px; }
.rev-field { display: block; }
.rev-field > span { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.rev-field > span em { color: var(--muted); font-weight: 400; font-style: normal; }
.rev-field textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); color: var(--text); }
.rev-field textarea:focus { outline: none; border-color: var(--forest-br); }
.rev-form-foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.rev-quota { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.rev-error, .rev-error-box { color: var(--weak); font-size: 13px; margin: 10px 0 0; }
.rev-error-box { background: rgba(178,90,58,.10); border-radius: 10px; padding: 12px 14px; }

.rev-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 16px; }
.rev-card-loading .loading-bar { margin: 12px 0 8px; }
.rev-loading-text, .rev-err-text { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.rev-card-error { border-color: rgba(178,90,58,.35); }
.rev-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.rev-card-title { font-weight: 700; font-size: 15px; color: var(--text); }
.rev-plat { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-left: 8px; text-transform: uppercase; letter-spacing: .04em; }
.rev-card-actions { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.rev-card-actions a { color: var(--forest); font-weight: 600; text-decoration: none; }
.rev-card-actions a:hover { text-decoration: underline; text-underline-offset: 2px; }
.rev-upgrade { display: inline-block; margin-top: 8px; color: var(--forest); font-weight: 600; text-decoration: none; }

/* export toolbar */
.rev-export { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.rev-export-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-right: 2px; }
.rev-exp-btn { font: inherit; font-size: 12px; font-weight: 600; color: var(--forest); background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 5px 12px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.rev-exp-btn:hover { border-color: var(--forest-br); background: #fff; }
.rev-exp-btn:disabled { opacity: .6; cursor: default; }

/* sentiment chips */
.rev-chip { display: inline-block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; border-radius: 20px; padding: 2px 8px; margin-left: 8px; vertical-align: middle; }
.rev-chip-pos { background: rgba(27,94,69,.14); color: var(--forest); }
.rev-chip-neg { background: rgba(178,90,58,.16); color: #8F3F26; }
.rev-chip-mix { background: rgba(198,154,75,.20); color: #7A5A1E; }

/* stat row */
.rev-stats { display: flex; flex-wrap: wrap; gap: 26px; margin: 16px 0 4px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rev-stat { display: flex; flex-direction: column; gap: 2px; }
.rev-stat-big { font-family: var(--font-display, inherit); font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.rev-stat-lbl { font-size: 11px; color: var(--muted); }
.rev-summary { font-size: 14px; line-height: 1.6; color: var(--text); margin: 14px 0 4px; }

/* Booking category subscores */
.rev-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; margin: 12px 0 4px; }
.rev-cat { display: grid; grid-template-columns: 96px 1fr 34px; align-items: center; gap: 10px; }
.rev-cat-name { font-size: 12px; color: var(--muted); }
.rev-cat-bar { height: 6px; background: var(--sand); border-radius: 4px; overflow: hidden; }
.rev-cat-bar i { display: block; height: 100%; background: var(--forest-br); border-radius: 4px; }
.rev-cat-num { font-family: var(--font-mono); font-size: 12px; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

.rev-h { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 20px 0 10px; }
.rev-themes, .rev-actions { list-style: none; margin: 0; padding: 0; }
.rev-theme { padding: 10px 0; border-bottom: 1px solid var(--line); }
.rev-theme:last-child { border-bottom: none; }
.rev-theme-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rev-theme-name { font-weight: 600; font-size: 14px; color: var(--text); }
.rev-freq { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rev-theme-detail { font-size: 13px; color: var(--text); line-height: 1.5; margin: 5px 0 0; }
.rev-quote { font-size: 13px; color: var(--muted); font-style: italic; margin: 5px 0 0; padding-left: 12px; border-left: 2px solid var(--sand); }

.rev-action { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; background: var(--cream); }
.rev-action-head { display: flex; align-items: center; gap: 10px; }
.rev-action-title { font-weight: 600; font-size: 14px; color: var(--text); }
.rev-prio { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; border-radius: 20px; padding: 2px 8px; }
.rev-prio-high { background: rgba(178,90,58,.16); color: #8F3F26; }
.rev-prio-med { background: rgba(198,154,75,.20); color: #7A5A1E; }
.rev-prio-low { background: var(--sand); color: var(--muted); }
.rev-action-why { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.rev-action-do { font-size: 13px; color: var(--text); line-height: 1.5; margin: 6px 0 0; }

/* portfolio rollup */
.rev-rollup { background: var(--ink); color: var(--cream); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 16px; }
.rev-rollup-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 6px; color: var(--gold-soft); }
.rev-rollup-line { font-size: 14px; margin: 0; line-height: 1.55; }
.rev-rollup-line strong { color: #fff; }

/* history */
.rev-hist { margin-top: 24px; }
.rev-hist-title, .rev-rollup-title { font-weight: 700; }
.rev-hist-title { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 10px; }
.rev-hist-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; cursor: pointer; font: inherit; }
.rev-hist-item:hover { border-color: var(--forest-br); }
.rev-hist-when { font-family: var(--font-mono); font-size: 12px; color: var(--muted); min-width: 54px; }
.rev-hist-url { flex: 1; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-hist-n { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
@media (max-width: 560px) {
  .rev-cats { grid-template-columns: 1fr; }
  .rev-stats { gap: 18px; }
  .rev-hist-url { display: none; }
}

/* ============================================================================
   v2 — ElevenLabs-style rebrand (PILOT: homepage only, scoped to body.v2)
   Neutral near-white/black base + warm-gray section tint, light grotesque
   display type with tight tracking, fully-rounded pill buttons, flat surfaces.
   Forest green is the single restrained ACCENT (it takes over gold's old role).
   Because the whole system is token-driven, most of the restyle is a token
   remap; the rest are targeted overrides for surfaces that hard-coded gold or
   assumed a dark nav.
   ============================================================================ */
body.v2 {
  --ink: #0A0A0A;
  --text: #0A0A0A;
  --muted: #6B6560;            /* neutral warm-gray */
  --cream: #FDFCFC;            /* near-white page ground */
  --sand: #ECE9E4;            /* warm-gray section tint */
  --card: #FFFFFF;
  --line: #E6E3DE;            /* light neutral hairline */
  --shadow: 0 1px 2px rgba(10, 10, 10, .04);
  --radius: 16px;
  --section-y: 72px;          /* airier vertical rhythm */
  --font-display: "General Sans", "Inter", system-ui, sans-serif;
  background: var(--cream);
  color: var(--text);
  /* NOTE: the data/semantic tokens (--gold amber, --weak terracotta, --good) are
     deliberately NOT remapped — they encode score bands (gauge, category bars,
     legend, impact) and must stay their traffic-light values. Brand gold is
     rebranded to forest/mint element-by-element below, so the two never mix. */
}

/* Typography — light, tight grotesque headings */
body.v2 h1, body.v2 h2, body.v2 h3 {
  font-family: var(--font-display); letter-spacing: -.02em; font-weight: 400;
}
body.v2 .intro h1 {
  font-weight: 300; letter-spacing: -.03em;
  font-size: clamp(34px, 6.4vw, 56px); line-height: 1.03;
}
body.v2 .lede { font-size: 19px; }
/* Section headings read lighter/elegant; small labels stay semibold — both at
   loaded General Sans weights so nothing faux-bolds. */
body.v2 .section-head h2, body.v2 .pricing-head h2, body.v2 .faq h2,
body.v2 .result h2 { font-weight: 500; }
body.v2 .check-name, body.v2 .step-label, body.v2 .check-subpoint-name,
body.v2 .ai-answer-name, body.v2 .horizon-phase, body.v2 .save-prompt-title { font-weight: 600; }

/* Light nav (was dark ink bar) */
body.v2 .masthead {
  background: rgba(253, 252, 252, .82); color: var(--text);
  border-bottom: 1px solid var(--line); backdrop-filter: saturate(180%) blur(10px);
}
body.v2 .brand-name { font-weight: 600; letter-spacing: -.02em; }
body.v2 .brand-tag { color: var(--muted); }
body.v2 .brand-mark { background: var(--forest); box-shadow: 0 0 0 4px rgba(27, 94, 69, .14); }
body.v2 .nav-link {
  color: var(--text); border-color: var(--line); border-radius: 9999px;
}
body.v2 .nav-link:hover { background: var(--sand); border-color: var(--muted); }
body.v2 .nav-link.active { background: var(--sand); border-color: var(--muted); }
body.v2 .menu-toggle { color: var(--text); border-color: var(--line); }
body.v2 .nav-cta {
  background: var(--ink); color: #fff; border-radius: 9999px;
  font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em;
}
body.v2 .nav-cta:hover { background: #000; }

/* Buttons — pill; near-black primary, outline secondary (ElevenLabs) */
body.v2 .go {
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  border-radius: 9999px; font-family: var(--font-display);
  font-weight: 500; letter-spacing: -.01em;
}
body.v2 .go:hover { background: #000; border-color: #000; }
body.v2 .go.secondary {
  background: transparent; color: var(--ink); border: 1px solid var(--line);
}
body.v2 .go.secondary:hover { background: var(--sand); border-color: var(--muted); }

/* Pricing surfaces that hard-coded gold → neutral/forest */
body.v2 .tier-badge { background: var(--forest); color: #fff; }
body.v2 .oneoff {
  background: var(--sand); border: 1px solid var(--line); box-shadow: none;
}
body.v2 .oneoff .oneoff-cta {
  background: transparent; color: var(--ink); border: 1px solid var(--line);
}
body.v2 .oneoff .oneoff-cta:hover { background: var(--card); border-color: var(--muted); color: var(--ink); }

/* Inputs pick up the neutral system automatically via tokens; round them a touch
   more to sit with the pills. */
body.v2 .url-row input, body.v2 #input-panel { border-radius: 12px; }

/* Brand gold → forest on LIGHT surfaces. */
body.v2 .oneoff-eyebrow { color: var(--forest); }

/* Brand gold → light MINT on the DARK bands (.check-highlight, .stat-stripe, the
   dark AI-answer + footer) — forest is too dark to read on near-black. */
body.v2 .check-highlight-badge { background: rgba(46, 139, 102, .16); color: #7FD3A9; }
body.v2 .check-subpoint-name,
body.v2 .check-icon.ink,
body.v2 .stat-num-amber,
body.v2 .ai-spark,
body.v2 .ai-answer-list li::before { color: #7FD3A9; }
body.v2 .foot-nav a:hover, body.v2 .foot-links a:hover { color: #7FD3A9; }

/* Dark "checks" CTA card: gold button → white pill (a near-black pill would
   vanish on the near-black card). */
body.v2 .checks-cta-btn {
  background: #fff; color: var(--ink); border-radius: 9999px;
  font-family: var(--font-display); font-weight: 500;
}
body.v2 .checks-cta-btn:hover { background: var(--sand); }

/* Muted "not included" limits: --weak is terracotta again (a data color), so set
   an explicit neutral gray that still clears AA on white. */
body.v2 .tier-limits li, body.v2 .tier-limits li::before { color: #726C64; }