/* ============================================================
   audit.css — DELTAS ONLY.
   brand.css (loaded first) is the live tool's own stylesheet and provides the
   shell: tokens, fonts, .wrapper, .site-header/.logo-row/.site-logo, .hero /
   .hero-left / .lede, .form-card / .form-grid / .input / .button / .error /
   .form-note, .section / .cards / .card, the whole .footer, and .gradient/.accent.

   This file adds only what that stylesheet doesn't have: the audit-specific
   pieces (gauge, score breakdown, metric numbers, insight-card internals) and
   the states the marketing page never shows (loading / no-data / errors).
   ============================================================ */

/* --- utilities the shell lacks --- */
[hidden] { display: none !important; }
#app { flex: 1 0 auto; }                 /* brand body is a flex column; push footer down */
.view { display: none; }
.view--active { display: block; }


/* Landing eyebrow (gradient comes from the brand .gradient class) */

/* brand.css collapses .form-grid to one column at 640px, but its `span`
   rules leave the fields fighting for phantom columns and they end up side
   by side. `1 / -1` means "full row" at every column count; !important
   because brand.css's media-query span rules were observed beating the
   plain later-sheet override in Chrome. */
.form-grid .span-2 { grid-column: 1 / -1 !important; }

/* Form error: the same functional red as the 'Needs attention' status, so one
   colour keeps one meaning across the page. */
.input.is-invalid { border-color: #EF4444; box-shadow: 0 0 0 4px rgba(239,68,68,.12); }

/* --- Loading --- */
.loading { text-align: center; padding: 90px 0 80px; }
.spinner {
  width: 46px; height: 46px; margin: 0 auto 22px;
  border: 4px solid var(--border); border-top-color: var(--ami-pink); border-right-color: var(--ami-blue);
  border-radius: 50%; animation: spin .8s linear infinite;
}
.spinner--small { width: 22px; height: 22px; border-width: 3px; margin: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading__primary { font-size: 21px; font-weight: 800; color: var(--dark); margin: 0 0 6px; }
.loading__sub { color: var(--ami-muted); font-size: 16px; margin: 0; }

/* ============================================================
   RESULTS PAGE — ported from the live results page (process1.php).
   Its own tokens, class names and values; only scoped//adapted where
   this page's shell differs. Do not re-implement these by hand.
   ============================================================ */
:root {
  --p1-bg:#0b0b0e; --p1-panel:#121217; --p1-muted:#9aa0aa; --p1-text:#f4f6f9;
  --p1-brand:#ff3db4; --p1-brand-2:#6d59ff;
  --p1-card:#181a20; --p1-stroke:#262835;
  --p1-shadow:0 12px 30px rgba(0,0,0,.35);
  --p1-radius-lg:26px; --p1-max:1120px;
  --p1-text-dark:#0e1116; --p1-muted-dark:#6b7280;
  --p1-panel-light:#ffffff; --p1-stroke-light:#e9eaf0;
  --p1-btn-radius:6px;
}

/* Results view swaps the site header for the hero's own centred logo. */
body.is-results .site-header { display: none; }

/* brand.css leaves the logo 18px from the browser edge; the design gives it
   real headroom on the landing and loading views. */
.site-header { padding-top: 30px; }

/* --- Hero (light) --- */
.hero.hero--light {
  display: block;
  margin-top: 10px;
  background: #fff;
  color: var(--p1-text-dark);
  /* Bottom padding trimmed: the score breakdown toggle sits at the foot of
     this hero and the results chapter follows straight after, so the old
     72px left the two chapters reading as strangers. */
  padding-block: 36px clamp(28px, 3vw, 36px);
}
.hero.hero--light .wrap {
  width: 100%;
  max-width: var(--p1-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

.hero.hero--light .row { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; justify-content: center !important; }
.hero.hero--light .logo { height: 36px; width: auto; display: block; }
.hero.hero--light header { display: block; text-align: center; }
.hero.hero--light header.center { margin: 0 0 80px; }
.hero.hero--light header * { margin-left: auto; margin-right: auto; }
.hero.hero--light header h1 {
  font-size: clamp(22px, 4vw, 45px);
  line-height: 1.2;
  margin: 10px auto 4px;
  font-weight: 900;
  color: var(--p1-text-dark);
  max-width: 750px;
}
.hero.hero--light header h1 .accent {
  background: linear-gradient(90deg, var(--p1-brand), var(--p1-brand-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* Inline vertical padding paints the gradient under descenders (the g
     in "losing" was losing its tail to the clip box) without moving the
     line box - padding on an inline element does not affect layout. */
  padding-bottom: 0.14em;
}
.hero.hero--light .muted { color: var(--p1-muted-dark); max-width: 700px; margin: 0 auto; }

/* Score card: dial + score only */


.score-card .score { font-size: clamp(30px, 6vw, 40px); font-weight: 800; line-height: 1; margin-top: 30px; }

/* Copy + CTA outside the card */


.btn.black {
  appearance: none; cursor: pointer;
  background: #000; color: #fff; border: 1px solid #000;
  border-radius: var(--p1-btn-radius);
  padding: .8rem 1rem; font-weight: 700; min-width: 320px;
  margin-top: 24px;
  transition: transform .08s ease;
}
.btn.black:hover { transform: translateY(-1px); }

.lede--center { margin-left: auto; margin-right: auto; text-align: center; }
.card .stat-label { margin-top: 8px; }

/* Card headings/sub the reference doesn't style (video/cta/honest live outside .section) */
.card h2 { text-align: center; font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.01em; color: var(--dark); margin: 0 0 10px; }
.card .lede--center { font-size: 15px; color: var(--ami-muted); max-width: 46ch; margin: 6px auto 0; text-align: center; }

/* ------------------------------------------------------------------
   Revenue at risk (strategy v1.1 s5.3). Four lines in fixed order:
   headline, bridge, proof, correction invite. The bridge is the one
   that points the prospect at their website rather than their ad
   agency, so it is styled to be read, not skimmed past.
   ------------------------------------------------------------------ */
#chapter-revenue { margin: 0 0 34px; }

/* Bigger than the band's charts: this one is the argument, not a supporting
   panel, and it sits on white with room to breathe. */


/* Light variant of the chart primitive. The band's charts sit on near-black;
   this one sits on white, so the axis, gridlines, neutral bars and value
   labels all invert. The accent stays the same solid brand pink. */


/* Every correctable figure behind one disclosure. */


/* Light-context slider. On white the dark-band track reads as black; this is
   a plain dark grey so it looks like a control rather than a hard rule.
   Scoped to the panel so it beats the dark-band .cost__slider rule, which is
   defined later in this file and would otherwise win on source order. */


/* Scale under the slider, so the handle position means something on its own.
   Ticks sit at round values, positioned proportionally within the real range
   rather than at even divisions of an awkward one. */


/* The adjusted-values notice. Deliberately unmissable: a report built on the
   visitor's own corrections is a different claim from our estimate, and they
   should never be unsure which one they are looking at. */


/* Video family placeholder (s6.1). Named so it is obvious which video
   belongs here; disappears the moment that family has a real embed. */
.video-family {
  max-width: 520px; margin: 0 auto 22px; padding: 18px 20px;
  border: 1px dashed rgba(255,255,255,.28); border-radius: var(--r-lg);
  text-align: center; color: #fff;
}


/* Video CTA. Carries the word 'free', matching the spoken closing line. */
.video-cta { margin: 22px 0 0; text-align: center; font-size: 15.5px; color: rgba(255,255,255,.82); }
.video-cta__link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Friction map ranking (s5.1 item 5). */
.cards .card { position: relative; }
/* Feedback layer v2 (Claude Design brief, Sep 2026): mobile bottom sheet,
   desktop non-blocking bottom-right card. Tokens per the brief. */
.fb-layer { position: fixed; inset: 0; z-index: 120; background: rgba(11,11,13,0.45); display: flex; align-items: flex-end; font-family: inherit; }
.fb-card { position: relative; background: #ffffff; width: 100%; box-sizing: border-box; border-radius: 24px 24px 0 0; padding: 8px 20px max(34px, env(safe-area-inset-bottom)); box-shadow: 0 -8px 32px rgba(0,0,0,0.18); display: flex; flex-direction: column; gap: 16px; transition: transform 0.25s ease; outline: none; max-height: 86vh; overflow-y: auto; }
.fb-grab { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: #D5D7DC; }
.fb-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.fb-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; color: #5B5E66; }
.fb-tick { width: 44px; height: 44px; border-radius: 999px; background: #E6F4EA; display: flex; align-items: center; justify-content: center; }
.fb-close { width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.fb-h { margin: 0 0 6px; font-size: 25px; line-height: 1.2; font-weight: 800; letter-spacing: -0.3px; color: #0B0B0D; }
.fb-sub { margin: 0 0 16px; font-size: 16px; line-height: 1.45; color: #5B5E66; }
.fb-clickword { display: none; }
.fb-rate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fb-opt { height: 64px; border-radius: 14px; border: 1px solid #E3E5E9; background: #F4F5F7; font-size: 16px; font-weight: 600; color: #0B0B0D; cursor: pointer; font-family: inherit; padding: 0 4px; }
.fb-opt:hover { border-color: #E0156F; }
.fb-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#fb-text { box-sizing: border-box; width: 100%; min-height: 96px; padding: 14px 16px; border-radius: 14px; border: 1px solid #C9CCD2; font-size: 17px; line-height: 1.4; color: #0B0B0D; resize: none; font-family: inherit; }
#fb-text:focus { outline: none; border-color: #E0156F; }
.fb-send { width: 100%; height: 56px; margin-top: 12px; border-radius: 14px; border: 0; background: #E0156F; font-size: 17px; font-weight: 700; color: #FFFFFF; cursor: pointer; font-family: inherit; }
.fb-send:hover { background: #C4105F; }
.fb-send:disabled { opacity: 0.5; cursor: default; }
.fb-skip { width: 100%; height: 48px; border: 0; background: transparent; font-size: 16px; font-weight: 600; color: #3A3D44; text-decoration: underline; cursor: pointer; font-family: inherit; }
@media (min-width: 768px) {
  /* Desktop: corner card, no backdrop, page stays usable. */
  .fb-layer { background: none; pointer-events: none; align-items: flex-end; justify-content: flex-end; padding: 0 28px 28px 0; }
  .fb-card { pointer-events: auto; width: 380px; border-radius: 20px; padding: 20px 22px 22px; gap: 14px; box-shadow: 0 16px 48px rgba(11,11,13,0.22), 0 2px 6px rgba(11,11,13,0.08); max-height: none; overflow: visible; }
  .fb-grab { display: none; }
  .fb-top { min-height: 40px; }
  .fb-close { width: 40px; height: 40px; }
  .fb-h { font-size: 21px; line-height: 1.25; margin-bottom: 4px; }
  .fb-sub { font-size: 15px; margin-bottom: 14px; }
  .fb-tapword { display: none; }
  .fb-clickword { display: inline; }
  .fb-rate { gap: 8px; }
  .fb-opt { height: 48px; border-radius: 12px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .fb-card { transition: none; } }
@media print { .fb-layer { display: none !important; } }

/* Client quote strip on the report (review3 handoff, design 1a): compact
   dark card opening the dark zone between the agent cards and the video
   slab. Dark fill kept in print per the handoff. */
/* v2 tweak (review5): centred stack - badge, quote, attribution - to
   match the centred content either side of the seam. */
.quote-strip { background: #131419; border-radius: 20px; padding: 26px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; max-width: 980px; margin: 26px auto 0; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.quote-strip__badge { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6, #FF2585); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.quote-strip__text { display: contents; }
/* Scales with the viewport (Lawrence, Sep 2026): 16px read as lost in
   the wide dark card at full screen - grows to 20px on big displays. */
.quote-strip__quote { margin: 0; font-size: clamp(16px, 0.5vw + 12px, 20px); font-weight: 600; font-style: italic; color: #ffffff; line-height: 1.5; text-wrap: pretty; max-width: 680px; }
.quote-strip__who { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: #9a9da8; }
.quote-strip__who b { color: #ffffff; }
.quote-strip__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.quote-strip__logo { height: 20px; width: auto; }
@media (max-width: 480px) { .quote-strip { padding: 22px 20px; } }

/* Customer review strip inside the form card (review handoff v2, Sep
   2026): the first build's inner white card read as card-on-card, so the
   shell goes entirely - a hairline above separates it from the consent
   text and the strip shares the form card's own surface. */
.review-strip { display: flex; align-items: center; gap: 18px; border-top: 1px solid #ececf0; padding-top: 20px; margin-top: 4px; }
.review-strip__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.review-strip__text { display: flex; flex-direction: column; gap: 6px; }
.review-strip__quote { margin: 0; font-size: 15px; color: #24262e; line-height: 1.55; text-wrap: pretty; }
.review-strip__who { margin: 0; font-size: 13px; color: #8a8d97; }
.review-strip__who b { color: #0B0C0F; }
@media (max-width: 480px) { .review-strip { flex-wrap: wrap; } }

/* Variant 2 landing: single centred lead between the How it works heading
   and the cards - same body-text style as the cards' copy. */
.how-lead { margin: -6px auto 22px; text-align: center; font-size: 14px; color: var(--ami-muted); line-height: 1.5; }


/* ------------------------------------------------------------------
   Top panel money figures (strategy v1.1 s5.2). Strict hierarchy done
   in the design, not in a sentence: revenue is large, bold and brand
   purple because it is the prize; wasted spend is smaller, quieter and
   red because it is the leak and the proof. If a stranger cannot get it
   in a two second glance it is not done.
   The two are never summed and never shown as a total — they overlap,
   so a combined figure double counts the same lost visitor.
   ------------------------------------------------------------------ */


/* The headline. */


/* The support. Deliberately not an equal — about half the size, muted label. */


/* Rev-up: fast sweep out, slower settle back onto the score. */
.dial-container .pointer.is-revving { transition: transform .55s cubic-bezier(.3,1.5,.6,1) !important; }


/* ------------------------------------------------------------------
   Section headers. One pattern for every chapter: left-aligned eyebrow
   in small caps, then the heading at section-heading size. This is what
   makes the page read as chapters rather than a run of fragments.
   Overrides brand.css's centred `.section h2`.
   ------------------------------------------------------------------ */


.section .sec-head__title,
.sec-head__title {
  text-align: left;
  font-size: clamp(26px, 3vw, 32px); font-weight: 800; letter-spacing: -.01em;
  color: var(--dark); margin: 0;
}
/* On the dark video band the header sits on near-black. */

.section.alt .sec-head--dark .sec-head__title { color: #fff; text-align: left; }

.section.alt .sec-head__sub { color: rgba(255,255,255,.72); }

/* Body copy under a left-aligned header stays left-aligned, or the chapter
   reads as a header and some unrelated centred text. */
.section > .sec-head ~ .lede--center {
  margin-left: 0; margin-right: 0; text-align: left;
}

/* ------------------------------------------------------------------
   Chapter: Your results. The stat-card row and the dark performance
   band are one unit — the header belongs to both, and the gap between
   them is closed to roughly the card gutter so they read as one run of
   evidence rather than two adjacent blocks.
   ------------------------------------------------------------------ */


/* ------------------------------------------------------------------
   Status chips. Green/amber/red are FUNCTIONAL here and nowhere else on
   the page: they carry status only, and one colour means one thing on
   every card. Which one shows is computed in audit.js from the
   thresholds in categories.json — never hardcoded — and the footnote
   under the card states the rule so the rating is checkable.
   Monthly visitors deliberately has no chip: volume is context.
   ------------------------------------------------------------------ */


/* The dot carries the pure status colour; the label is darkened for contrast. */


/* Dark variant. Same three hues, but the pure colour becomes the text: the
   light version darkens it for contrast on white (#15803D), which is
   unreadable on near-black. One colour still means one thing. */


/* "How we rate this" — states the threshold that produced the chip. */


/* --- Labels + metric numbers --- */
.card .stat-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ami-muted); margin: 0 0 10px; }
/* Headline numbers: equal-width cards, one idea each. auto-fit means the row
   re-balances when a card hides (e.g. no paid-traffic data). */


/* Leave room for the status chip in the top-right corner. */


   /* status is the chip's job, not the number's */


/* Benchmark meter — same principle as the overview charts: neutral track,
   the visitor's own value in the brand gradient, a plain tick for the
   measured category benchmark. Light card, so neutral reads light grey. */


/* The longer explanations, out of the cards */
/* The paid-share note completes the sentence started by the number, so it sits
   directly under it rather than being pushed to the card foot. */


/* The longer explainer now lives inside its card, pinned to the foot so the
   three cards keep a common baseline. Same type treatment as .stat-note. */

/* When a footnote follows, it is the element pinned to the foot. */


/* --- Performance overview: dark band + three chart cards (reference layout) --- */


/* auto-fit collapses unused tracks, so when a card hides (e.g. compare with a
   PLACEHOLDER benchmark) the remaining cards share the full width. */


/* Every card carries the same five children in the same order —
      title / annotation / chart / pill / caption
   — so a subgrid can size those five rows once across the whole row of cards.
   The effect: the titles sit above the plots, and the plots all start on the
   same line however differently the titles wrap or the labels stack. The
   annotation band is reserved on every card, which is the room the "with AI
   agents" note needs; on the first two cards it is simply empty.
   Guarded by @supports and by a width where three columns still fit — below
   that the cards stack and the flex fallback above is what runs. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .overview__grid { grid-template-rows: repeat(5, auto); column-gap: 18px; row-gap: 0; }
    .ov-card {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      align-items: start;
    }
  }
}

/* ------------------------------------------------------------------
   Headline stats as horizontal cards inside the dark band. One idea per
   card, end to end: title and the figure with its rating at the top, the
   split drawn beneath, then the narrative that explains and justifies the
   rating. Replaces the old white .metrics row plus the separate flow card.
   ------------------------------------------------------------------ */


/* The figure in its own box, rating directly beneath it. */


/* In this card the chip sits in the flow under the number, not pinned. */


/* The workings behind a derived figure: present and checkable, not shouted. */

/* Bridge line inside the dark band — same job as in the revenue chapter. */

/* Unit under the headline figure, so a bare count still reads as what it is. */

/* The visitors card is context, not an argument: no bar, no rating, so it
   gets a shallower box and puts its two supporting lines on one row. */


/* All three headline figures share one size: they are steps in the same
   calculation, so a smaller one reads as a lesser fact. The visitors card
   stays shallow through padding, not by shrinking its number. */


/* The unit rides on this row rather than under the figure, so the card is two
   lines deep instead of three. Pushed right to stay under the number. */


/* ------------------------------------------------------------------
   Paid-traffic cost estimate. The only money on the page, and it sits
   directly above the control that produces it so the derivation is
   visible rather than asserted.
   ------------------------------------------------------------------ */


/* Collapsible detail on the stat cards. Collapsed by default so the card
   surface is figure, rating and bar only, and the report scans in a screen. */


/* ------------------------------------------------------------------
   Traffic flow — two 100% stacked bars over the same total, full width
   above the three chart cards. Same instrument language as the rest of
   the band: solid colours only, faint quarter gridlines, plain white
   figures. The accent marks the segment under discussion (lost, paid);
   the remainder stays neutral.
   ------------------------------------------------------------------ */


/* 0-100% ruler under the bar. Minor ticks every 10, labelled majors every
   20, on a 1px baseline in the same muted grey as the chart axes below, so
   a boundary can be read off the scale instead of taken on trust. */


/* The end labels would overhang the bar, so they tuck inside it. */


/* Measured category benchmark, marked on the visitor's own bar so the two
   read together instead of needing a second chart to compare them. */


/* A sliver too narrow even for the short form shows nothing rather than an
   ellipsised stub; the colour key below carries it instead. */


/* ------------------------------------------------------------------
   Charts — instrument-grade. Solid colours only: no gradient ever goes
   inside a chart (the gradient lives in headings and buttons). Real
   y-axis + baseline with labelled ticks, faint gridlines behind, value
   labels in plain white above each bar, source line underneath. Bars are
   scaled truthfully against the axis.
   ------------------------------------------------------------------ */


/* Two columns (axis, plot) by two rows (chart, x-labels). Explicit placement
   keeps the labels in the plot's column, so they sit under their own bars
   whatever width the card gives the chart. */


/* y-axis: tick values, evenly spaced, each aligned to its gridline */


/* gridlines behind the bars; the last one is the x-axis baseline */


        /* solid brand pink: THIS site */

/* Marker sitting on top of a bar — solid white, thin border, no glow.
   Drawn above the bar so the bar height stays truthful on the axis. */


/* Technical source line under each chart */


/* Rating pill — restrained: thin neutral border, plain text, key word in the
   accent colour, no fill and no glow. */


/* --- Agents card: the curved-arrow annotation. Classes are the live
       AI-boost card's own (.cta-right-ai / .note-img-ai / .note-text /
       .accent-score) from process1.php, but the geometry is no longer an
       overlay: the note sits in the reserved .ov-note band above the chart,
       so it can never ride over the bars and every card starts its plot on
       the same line. NB the live page has NO handwriting font — Figtree 12px
       with a slight rotation IS the annotation styling. --- */


/* The band itself: reserved on all three cards, filled only on this one. */


/* --- Score breakdown --- */


/* --- Traffic edit + small button --- */


.traffic-edit__form .input { height: 40px; }


/* --- Benchmark + paid traffic --- */


/* --- Platform line / callout / phase-2 loader / method note --- */


.phase2-loading { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 22px 0 6px; color: var(--ami-muted); font-size: 15px; }
.section-note { font-size: 13.5px; color: var(--ami-muted); text-align: center; max-width: 60ch; margin: 24px auto 0; padding-top: 16px; border-top: 1px solid var(--border); }

/* --- Insight cards: .card is the shell; these style the internal layout --- */
.cards .insight { text-align: left; }
.insight__q { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--dark); margin: 0 0 12px; }
.insight__field { margin-bottom: 10px; }
.insight__field:last-child { margin-bottom: 0; }
.insight__label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ami-muted); margin-bottom: 2px; }

.insight__text { font-size: 15px; color: #454a55; }
.insight__field--agent .insight__text { color: var(--dark); font-weight: 600; }

/* --- Video --- */


/* --- CTA + honest states --- */

.cta-btn, .honest .button, #restart-btn, #nodata-cta { width: auto; min-width: 220px; margin: 8px auto 0; }

/* ===== No-report states (design 14a, Aug 2026): dark card matching the
   report slab, on both the no-data and non-transactional views. Numbered
   checklist reasons, the typed domain in a pill input beside a gradient
   re-run button, full-width gradient booking CTA under a divider. ===== */
.honest {
  /* Same width and radius as the report's black slabs (.slab): the
     no-report states read as the same family of page. */
  max-width: 1180px; margin: 0 auto; padding: 56px 24px 48px; text-align: center;
  background: #0B0C0F; border: none; border-radius: 28px; color: #fafafa;
}
.honest .lede { max-width: 860px; }
.honest h2 { color: #ffffff; }
.honest h3 { color: #ffffff; }
.honest .lede { margin-left: auto; margin-right: auto; color: #9ca3af; }
.honest__icon {
  width: 56px; height: 56px; margin: 0 auto 22px; border-radius: 16px;
  background: #1a1c22; border: 1px solid #2a2d36; color: #ffffff;
  display: flex; align-items: center; justify-content: center;
}
.honest__icon svg { display: block; }

/* Header OUTSIDE the black box (design rev, Aug 2026): icon tile, heading
   and sub line sit on the light page background above the slab. */
.honest-head { max-width: 1180px; margin: 0 auto 28px; text-align: center; }
.honest-head h2 { margin: 0 0 10px; color: var(--dark); }
.honest-head .lede { margin: 0 auto; color: #6b7280; }
.honest__icon--light { background: #ffffff; border: 1px solid #e5e7eb; color: #0B0C0F; }
/* In-box lead line ("That usually means one of three things:"). The extra
   .honest ancestor out-ranks brand.css's `.card h3 { font-size: 16px }`. */
.honest .honest__boxtitle { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: #ffffff; }
/* Subtitle-sized variant (Domain Feedback page: the moved-in old heading) */
.honest .honest__boxtitle--lg { font-size: 22px; letter-spacing: -0.3px; line-height: 1.35; max-width: 900px; margin: 0 auto 12px; }

.nodata-reasons {
  display: block; list-style: none; text-align: left;
  margin: 18px auto 0; padding: 0; max-width: 680px;
  counter-reset: ndreason; color: #e5e7eb; font-size: 15px; line-height: 1.5;
}
.nodata-reasons li {
  counter-increment: ndreason;
  display: flex; align-items: center; gap: 14px;
  background: #16171c; border: 1px solid #24262e; border-radius: 14px;
  padding: 14px 18px; margin-top: 12px;
}
.nodata-reasons li::before {
  content: counter(ndreason);
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  background: #ffffff; color: #0B0C0F; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

.nodata-retry { margin: 26px auto 20px; max-width: 680px; }
.nodata-retry__label {
  display: block; text-transform: uppercase; letter-spacing: 1.2px;
  font-size: 11.5px; font-weight: 700; color: #9ca3af; margin-bottom: 12px;
}
.nodata-retry__row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.nodata-retry__row .input {
  flex: 1 1 220px; min-width: 0; height: 46px; text-align: center;
  font-weight: 700; color: #ffffff; border-radius: 14px;
  border: 1.5px solid transparent;
  background: linear-gradient(#0B0C0F, #0B0C0F) padding-box, var(--grad) border-box;
}
.nodata-retry__row .input:focus { outline: none; box-shadow: 0 0 0 4px rgba(255,37,133,.15); }
.nodata-retry__row .button { width: auto; min-width: 200px; flex: 0 0 auto; margin: 0; }

/* Secondary action beside a primary CTA: quiet outline button on the dark
   card, same geometry as .button. */
.button--ghost {
  background: none;
  color: #fafafa;
  border: 1px solid #3a3d47;
  box-shadow: none;
}
.honest__cta .button { display: inline-flex; margin: 8px 6px 0; }
.honest__cta { margin-top: 26px; padding-top: 24px; border-top: 1px solid #24262e; }
.honest__cta h3 { margin: 0 0 8px; }
.honest__cta--center { text-align: center; border: none; padding-top: 8px; margin-top: 18px; }
/* Full-width booking CTA (no-data card foot). The #nodata-cta selector is
   needed to out-rank the ID rule above that pins CTA buttons to auto width. */
.honest__cta--fullbtn .button,
.honest__cta--fullbtn #nodata-cta { display: flex; width: 100%; max-width: 680px; min-width: 0; margin: 0 auto; }
@media (max-width: 560px) {
  .honest { padding: 34px 20px 28px; }
  .nodata-retry__row .input, .nodata-retry__row .button { flex: 1 1 100%; }
}

/* --- Responsive delta --- */


/* --- In-card progress (form card; bar itself is the reference's
       #progressContainer/#progressFill in brand.css) --- */
#form-progress { padding: 8px 2px 10px; }
.form-status {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 2px;
}


/* --- Video section (dark, full-bleed) — ported from process1.php --- */
.section.alt {
  background:
    radial-gradient(1100px 400px at 100% 0, rgba(255,61,180,.14), transparent 60%),
    radial-gradient(900px 380px at 0 0, rgba(109,89,255,.18), transparent 60%),
    var(--p1-bg);
  color: var(--p1-text);
  padding-top: 70px;
  padding-bottom: 120px;
}
.section.alt.section--rounded { border-radius: 80px; overflow: hidden; margin-top: 0; }
/* This block is inset by .wrapper so it lines up with the overview band;
   the inner .wrap therefore only supplies padding, not a second max-width. */
.section.alt .wrap {
  width: 100%; max-width: none;
  margin-inline: auto; padding-inline: clamp(20px, 3vw, 40px);
}
.section.alt .title {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800; text-align: center; color: var(--p1-text); margin: 0 0 14px;
}
.section.alt .center.muted {
  text-align: center; max-width: 700px; margin: 0 auto 34px;
  color: var(--p1-muted);
}


/* Blobs + white video card */


@media (max-width: 720px) {
  .section.alt.section--rounded { border-radius: 44px; }
  
  
  
  
}


/* --- Booking / Calendly (light) — ported from process1.php #light-section.
       NB: the old file has four conflicting .cta-grid rules (one `display:flow`)
       and .note-img duplicates; ported the clean two-column rule that matches
       the design, with the right-hand min track relaxed so it cannot overflow. --- */
.section.section--light {
  background: #fff; color: var(--p1-text-dark);
  overflow: visible;
  padding-top: 90px; padding-bottom: 110px;
}
.section.section--light .wrap {
  width: 100%; max-width: var(--p1-max);
  margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px);
}
/* Live-design layout: generous side margins. Both columns are top-aligned and
   the left column's padding matches .cta-right's, so the heading sits level
   with the top of the calendar frame (the annotation lives in that padding). */
#booking-section .wrap { padding-inline: clamp(28px, 7vw, 100px); }
.cta-grid {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(420px, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
.cta-left { padding-top: 140px; }
/* The booking chapter's three-line .mega headline was replaced by the standard
   section header; its gradient accent moves onto the header's accent span so
   the brand mark on that heading survives the change. */
.sec-head__title .grad {
  background: linear-gradient(90deg, #3aa3ff 0%, #ff3db4 60%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* Inline vertical padding paints the gradient under descenders (the g
     in "losing" was losing its tail to the clip box) without moving the
     line box - padding on an inline element does not affect layout. */
  padding-bottom: 0.14em;
}
.cta-left .intro { display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; color: #3b3f46; }
.cta-left .intro p { margin: 0; }
.avatar {
  width: 96px; height: 96px; border-radius: 50%;
  display: inline-grid; place-items: center; overflow: hidden;
  background: #f2f3f7; box-shadow: 0 10px 22px rgba(16,24,40,.16);
  flex: 0 0 auto;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ticklist { display: grid; gap: 12px; padding: 0; margin: 0; max-width: 380px; }
.ticklist li { list-style: none; display: flex; gap: 10px; align-items: flex-start; }
.tick { background: transparent; color: var(--p1-brand); font-weight: 800; font-size: 20px; line-height: 1; margin-top: 2px; }
.cta-left .guarantee { margin-top: 26px; font-size: 13.5px; color: var(--p1-muted-dark); }
.cta-left .correction-prompt {
  margin-top: 10px; padding-top: 12px; font-size: 13.5px;
  color: var(--p1-muted-dark); border-top: 1px solid var(--p1-stroke-light);
  max-width: 380px;
}

/* Right: handwritten annotation + Calendly window frame. The annotation is
   sized up to read as a real callout, like the live page. */
.cta-right { position: relative; z-index: 2; padding-top: 88px; }
.note-img {
  position: absolute;
  top: 4px; left: -24px;
  width: 490px; max-width: 96%; height: auto;
  z-index: 20; pointer-events: none;
}
.cal-box {
  position: relative; z-index: 1;
  background: #fff; border: 1px solid var(--p1-stroke-light);
  border-radius: 36px;
  box-shadow: 0 28px 80px rgba(16,24,40,.12);
  overflow: hidden;
}
.cal-box .ios-bar {
  height: 34px;
  background: url("https://ami-ai.co.uk/live/assets/calendy_header.png") no-repeat center/cover;
  border-top-left-radius: 36px; border-top-right-radius: 36px;
}
.cal-embed { position: relative; }
.cal-embed .calendly-inline-widget { width: 100%; max-width: 680px; height: 600px; margin: 0 auto; }

@media (max-width: 900px) {
  .cta-grid { grid-template-columns: 1fr; }
  .cta-left { padding-top: 0; }
  .cta-right { padding-top: 112px; }
  .note-img { width: 400px; left: 0; }
  .section.section--light { padding-top: 60px; padding-bottom: 70px; }
  #booking-section .wrap { padding-inline: clamp(16px, 4vw, 32px); }
}


/* ============================================================
   FAQ accordion (light, below the booking section)
   ============================================================ */
/* .section.section--light .wrap unsets max-width for the booking layout;
   this needs the extra specificity to win it back for the FAQ. */
.section.section--light.faq .wrap { max-width: 660px; margin: 0 auto; }
.faq__heading {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800; letter-spacing: -.01em;
  color: var(--p1-text-dark); text-align: center;
  margin: 0 0 28px;
}
.faq__row { border-bottom: 1px solid var(--p1-stroke-light); }
.faq__row:first-child { border-top: 1px solid var(--p1-stroke-light); }
.faq__q {
  appearance: none; background: none; border: 0; cursor: pointer;
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; text-align: left;
  font: inherit; font-size: clamp(16px, 1.5vw, 18px); font-weight: 700;
  color: var(--p1-text-dark);
  padding: 24px 4px;
}
/* Plus that becomes a minus when the row opens */
.faq__icon {
  position: relative; flex: 0 0 auto;
  width: 18px; height: 18px;
}
.faq__icon::before,
.faq__icon::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  background: var(--p1-text-dark); border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: opacity .18s ease, transform .18s ease;
}
.faq__icon::before { width: 18px; height: 2.5px; }
.faq__icon::after  { width: 2.5px; height: 18px; }
.faq__q.is-open .faq__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.faq__a { padding: 0 4px 24px; }
.faq__a p {
  margin: 0; max-width: 68ch;
  font-size: 15.5px; line-height: 1.6; color: #32353b;
}

/* ============================================================
   Guarantee bar — gradient strip sitting on top of the footer
   ============================================================ */
.guarantee-bar {
  background: linear-gradient(90deg, #2f4bff 0%, #7b3ff2 35%, #ff2d9b 75%, #ff1f6a 100%);
  border-radius: 28px 28px 0 0;
  padding: 18px 20px;
  margin-top: 40px;
}
.guarantee-bar p {
  margin: 0; text-align: center; color: #fff;
  font-size: clamp(14px, 1.4vw, 17px); line-height: 1.4;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.guarantee-bar b { font-weight: 800; }
.guarantee-bar span { font-weight: 400; opacity: .96; }
.guarantee-bar__icon { width: 22px; height: 22px; flex: 0 0 auto; color: #fff; }

/* ============================================================
   Footer: brand column (tagline + certification badges)
   ============================================================ */
/* The gradient guarantee bar carries the rounded top edge, so the black
   footer beneath it is square (brand.css rounds it to 36px). */
.footer { border-top-left-radius: 0; border-top-right-radius: 0; }

/* brand.css ships a five-column template; this footer has four, with a
   wider brand column so the tagline and address don't break mid-phrase. */
.footer .footer-cols {
  grid-template-columns: 1.6fr 1fr 1.15fr 1.1fr;
  gap: 40px;
}
/* direct child only — the badge <img>s live inside .footer-badges */
.footer .footer-brand > img { height: 34px; width: auto; }
.footer-tagline {
  white-space: pre-line;            /* newlines come from copy.json */
  margin: 18px 0 0;
  font-size: 15px; line-height: 1.55; color: #ffffff;
  max-width: 34ch;
}
.footer-badges {
  list-style: none; display: flex; align-items: center; gap: 14px;
  padding: 0; margin: 22px 0 0;
}
.footer-badges li { flex: 0 0 auto; }
.footer-badges img { height: 74px; width: auto; display: block; }
.footer-address {
  white-space: pre-line;            /* newlines come from copy.json */
  margin: 0; font-size: 15px; line-height: 1.9; color: #B9BEC7;
}

@media (max-width: 900px) {
  .footer .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .guarantee-bar { border-radius: 20px 20px 0 0; margin-top: 28px; }
  .footer .footer-cols { grid-template-columns: 1fr; }
  .footer-badges img { height: 58px; }
}


/* ------------------------------------------------------------------
   Print / PDF. There was no print stylesheet at all, so printing used
   the screen rules and the Calendly embed — a cross-origin iframe that
   a browser cannot paint onto paper — came out as a dead 600px white
   block. Its container never collapsed; it held its height and printed
   empty. Print therefore drops the embed and prints its address instead,
   and keeps cards from being sliced across a page break.
   ------------------------------------------------------------------ */
.cal-print { display: none; }

@media print {
  .cal-box { display: none !important; }
  .cal-print {
    display: block;
    margin: 8px 0 0;
    font-size: 13px; font-weight: 700; color: #0e1116;
  }
  /* The annotation arrow points at an element that is no longer there. */
  .cta-right .note-img { display: none !important; }

  /* Nothing interactive survives on paper. */
  .traffic-edit, .link-toggle, .btn, .button { display: none !important; }

  /* Scroll-reveal must never leave a section invisible in a PDF - print
     everything revealed, wherever the scroll position was. */
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* Don't slice a card, a chart or an FAQ row across two pages. */
  .card, .faq__row, .dcard, .rank-card, .rank-grad, .rank-wrap, .rcard { break-inside: avoid; }

  /* Keep the dark slabs dark even when the browser tries to save toner -
     white chart text on a stripped background is invisible. Visitors still
     need "Background graphics" ticked in the print dialog; this covers the
     browsers that respect print-color-adjust without it. */
  .slab, .dcard, .rank-card, .agent-chip__inner { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  /* Every FAQ answer prints open - a closed accordion is dead paper. */
  .faq__a[hidden] { display: block !important; }

  /* The logo ticker is decoration and animates; it prints as a smear. */
  .client-logos { display: none !important; }
}

/* ------------------------------------------------------------------
   FOUR-CHAPTER STRUCTURE (v1.1 wireframe).
   Structure pass only — nothing here restyles the dial, the charts,
   the friction-card internals or the footer.
   ------------------------------------------------------------------ */

/* Hero connective line, replacing the old "What does this mean?" block. */


/* Chapter 1: the numbers card beside the carry-forward chart. */


/* The conversion control, one level deeper than the visible inputs. */


/* Chapter 3: ranked friction map. The #1 card is deliberately bigger —
   that size difference is what explains why the video covers only #1. */
.cards .card.insight--top {
  grid-column: 1 / -1;
  border: 2px solid #7A3BFF;
  box-shadow: 0 10px 30px rgba(122,59,255,.12);
}
.cards .card.insight--top .insight__q { font-size: clamp(19px, 2.2vw, 23px); }
.cards .card.insight--minor { font-size: 14px; }
.cards .card.insight--minor .insight__q { font-size: 16px; }

/* Booking sub-heading inside chapter 4 (not a chapter header of its own). */
.booking-heading {
  margin: 0 0 14px; text-align: left;
  font-size: clamp(24px, 2.8vw, 32px); font-weight: 800;
  letter-spacing: -.01em; color: var(--dark);
}
.booking-heading .grad {
  background: linear-gradient(90deg, #3aa3ff 0%, #ff3db4 60%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* Inline vertical padding paints the gradient under descenders (the g
     in "losing" was losing its tail to the clip box) without moving the
     line box - padding on an inline element does not affect layout. */
  padding-bottom: 0.14em;
}

/* ==========================================================================
   DESIGN V3 (design_handoff_report_results). Tokens from the handoff README:
   slab #0B0C0F, card #16171c, raised #1e1f26, tile #24262e, hairline #2c2d36,
   axis #3a3d47; brand gradient #2772F9->#FF2585 is chrome only; the single
   pink #FF2585 is the one colour allowed inside chart data.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-reveal="in"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- Result hero ---- */
.rhero { background: #f7f7f9; padding: 32px 20px 56px; text-align: center; }
.rhero__logo { display: flex; align-items: center; justify-content: center; gap: 8px; padding-bottom: 18px; }
.rhero__logo .logo { height: 32px; width: auto; }
.rcard {
  background: #ffffff; border-radius: 20px; padding: 32px 28px;
  max-width: 560px; margin: 0 auto;
  box-shadow: 0 8px 32px rgba(11,12,15,0.08); text-align: center;
}
.rcard__eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 1.5px; color: #6b7280; text-transform: uppercase; }
.rcard__domain { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; margin-top: 6px; color: #0B0C0F; }
.rcard__dialrow { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 22px; flex-wrap: wrap; }
/* Fixed column + tabular digits: the count-up changes the number's width
   every frame, and in a centre-justified row that re-centres the dial - the
   wobble on load. A fixed basis keeps the row geometry constant. */
.rcard__scorecol { flex: 0 0 170px; }
.rcard__score { font-variant-numeric: tabular-nums; }

/* Gauge: pure-CSS half dial. Six status segments with 3deg white gaps. */
/* The gauge face is the live tool's own artwork (rev_counter.png, 574x308,
   copied from process1.php's rev_counter_new_increase.png) — arc, gaps and
   pivot disc are all in the image. The pointer geometry below is the live
   tool's, adapted to a letterbox-free aspect-ratio box: the image's pivot sits
   ~4px above the bottom edge at 275px wide, and the pointer offsets scale with
   the container width. */
.rgauge { position: relative; width: 190px; aspect-ratio: 574 / 308; flex-shrink: 0;
  background: url('rev_counter.png') no-repeat center / contain; }
.rgauge__needle {
  position: absolute; left: 50%; bottom: 3px; width: 9px; height: 62px;
  background: linear-gradient(to bottom, #000000 0%, #1a1a1a 63%, #000000 100%);
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(-90deg);
  clip-path: polygon(33% 6%, 67% 6%, 100% 100%, 0% 100%);
  border-radius: 50px;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* 2400ms must match SWEEP_MS in renderHero — the count-up runs on it too. */
  transition: transform 2.4s cubic-bezier(.33,1,.3,1);
}
@media (max-width: 560px) {
  .rgauge { width: 170px; }
  .rgauge__needle { width: 8px; height: 55px; bottom: 3px; }
}

.rcard__scorecol { text-align: left; }
.rcard__score { font-size: 52px; font-weight: 800; letter-spacing: -1.2px; line-height: 1; color: #0B0C0F; }
.rcard__outof { font-size: 22px; font-weight: 600; color: #9ca3af; letter-spacing: 0; }
.band-pill {
  display: inline-block; border: 2px solid #e5484d; color: #e5484d;
  font-size: 14px; font-weight: 800; border-radius: 11px; padding: 6px 22px; margin-top: 10px;
}
/* Neutral fallback chip - deliberately NOT a fifth performance tier: grey,
   plain weight, with the explanation in its tooltip. */
.band-pill--neutral { font-weight: 600; border-style: dashed; cursor: help; }

/* Loss strip (design 32a): warm loss-tinted panel. #D93A2B is the SEMANTIC
   loss colour - constant for every site regardless of score band, and never
   the brand gradient (gradient is chrome, not data). */
.rcard__money { margin-top: 24px; background: #FFF3F1; border: 1px solid #FFD9D3; border-radius: 16px; padding: 26px 28px; }
.rcard__money-label { font-size: 16px; color: #8a5a52; }
.rcard__money-value { font-size: 44px; font-weight: 800; letter-spacing: -0.8px; margin-top: 2px; color: #D93A2B; }
.rcard__caveat { margin: 8px auto 0; max-width: 430px; font-size: 13.5px; line-height: 1.55; color: #a8837b; }
.rcard__money-sub { margin-top: 4px; font-size: 12.5px; color: #a8837b; }
@media (max-width: 640px) {
  .rcard__money { padding: 20px 18px; }
  .rcard__money-value { font-size: 36px; }
}
/* Goal selector (design rev 2, Aug 2026): one row - "Optimising for:"
   inline-left, buttons beside it. Closed (read) view shows ONLY the active
   gradient button; opening Adjust reveals all three. */
.ltbox {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 22px; padding: 16px 20px; text-align: left;
  background: #131419; border: 1px solid #24262e; border-radius: 16px;
}
.ltbox__q { font-size: 14.5px; font-weight: 600; color: #e5e7eb; margin: 0; flex: 0 0 auto; }
.ltbox__btns { display: flex; gap: 10px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.ltbox__btn {
  appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  color: #fafafa; background: #1c1e24; border: 1px solid #3a3d47; border-radius: 12px;
  padding: 10px 18px; transition: background 0.15s ease, border-color 0.15s ease;
}
.ltbox__btn:hover { background: #24262e; border-color: #4a4e59; }
/* origin/clip border-box: without them the gradient tiles into the 1px
   transparent border strip, showing a pink sliver at the left edge. */
.ltbox__btn.is-active {
  background: var(--grad);
  background-origin: border-box;
  background-clip: border-box;
  border-color: transparent;
}
/* Read mode: only the chosen goal shows, and the box hugs its content
   instead of spanning the card; Adjust restores full width. */
.ltbox--closed .ltbox__btn:not(.is-active) { display: none; }
.ltbox--closed { width: fit-content; max-width: 100%; }
@media (max-width: 560px) {
  .ltbox { padding: 14px; gap: 10px; }
  .ltbox__q { flex: 1 1 100%; }
  .ltbox__btn { flex: 1 1 100%; text-align: center; }
}
.rcard__money-suffix { font-size: 20px; font-weight: 600; color: #c98a80; letter-spacing: 0; }
.rcard__cta {
  display: block; background: #0B0C0F; color: #ffffff !important; text-decoration: none;
  font-size: 15px; font-weight: 700; border-radius: 14px; padding: 16px 0; margin-top: 20px;
  transition: background .15s ease;
}
.rcard__cta:hover { background: #24262e; }

/* ---- Numbered section headers ---- */
.rsec { background: #ffffff; padding: 64px 24px 40px; text-align: center; }
.rsec__wrap { max-width: 1080px; margin: 0 auto; }
.rsec__numrow { display: inline-flex; align-items: center; gap: 10px; }
.rsec__num {
  width: 34px; height: 34px; border-radius: 50%; background: #0B0C0F; color: #ffffff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800;
}
.rsec__of { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #9ca3af; }
.rsec__title { margin: 14px 0 0; font-size: 38px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.15; color: #0B0C0F; text-align: center; }
.rsec__intro { margin: 20px auto 0; font-size: 18px; line-height: 1.7; color: #3f3f46; max-width: 560px; }
.rsec__intro strong { color: #0B0C0F; font-weight: 800; }
.rsec__unitsnote { margin: 10px auto 0; font-size: 12.5px; color: #9ca3af; max-width: 560px; }
.rsec__para { margin: 24px auto 0; font-size: 18px; color: #3f3f46; line-height: 1.7; max-width: 720px; }
.rsec__para + .rsec__para { margin-top: 14px; }
#section2 { padding-bottom: 8px; }
#section3 { padding-bottom: 40px; }

/* ---- Dark slabs: 8px white gutter, radius 28 ---- */
.slab-wrap { background: #ffffff; padding: 8px 20px; }
/* Capped, not full-bleed: on very wide screens the slab hugs its content -
   a little wider than the Your Numbers card (1080px inner + breathing room).
   One max-width for every slab keeps all the dark boxes the same width. */
.slab { background: #0B0C0F; color: #fafafa; border-radius: 28px; padding: 64px 24px 72px; max-width: 1180px; margin: 0 auto; }
.slab__inner { max-width: 1080px; margin: 0 auto; }
.slab__title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.5px; text-align: center; color: #ffffff; }
.slab__sub { margin: 14px 0 0; font-size: 14px; color: #9ca3af; text-align: center; line-height: 1.7; }
.slab__sub a { color: #93b4f7; }
.slab__sub strong { color: #ffffff; font-weight: 700; }
.slab--s2 { padding-top: 56px; }
.slab--s2 .slab__title { font-size: 24px; letter-spacing: -0.4px; }
.slab__ranksub { font-size: 11px; color: #ffffff; text-align: center; margin-top: 6px; }
/* Favicon + domain chip above the section-2 title: their site's mark on
   their section. The letter tile is the hide-on-fail favicon fallback. */
.s2chip {
  display: flex; align-items: center; gap: 8px;
  width: fit-content; margin: 0 auto 12px;
  background: #1a1c22; border: 1px solid #34363f; border-radius: 999px;
  padding: 6px 14px 6px 8px;
}
.s2chip__ico { width: 20px; height: 20px; border-radius: 6px; display: block; }
.s2chip__letter {
  width: 20px; height: 20px; border-radius: 6px; background: #23a55a;
  color: #ffffff; font-size: 12px; font-weight: 800; line-height: 20px;
  text-align: center; text-transform: uppercase;
}
.s2chip__domain { font-size: 13px; font-weight: 700; color: #fafafa; }
.slab__method { margin: 32px auto 0; font-size: 12px; color: #9ca3af; line-height: 1.7; max-width: 560px; text-align: center; }
.slab .phase2-loading { justify-content: center; color: #9ca3af; }

/* ---- Dark cards ---- */
.dcard { background: #16171c; border: 1px solid #24262e; border-radius: 20px; }
.dcard__title { font-size: 15px; font-weight: 700; color: #fafafa; }
.dcard__title--center { font-size: 14px; text-align: center; }

/* ---- Display 1: Your numbers ---- */
.ncard { background: #16171c; border: 1px solid #24262e; border-radius: 20px; padding: 28px; margin-top: 36px; text-align: left; }
.ncard__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ncard__title { font-size: 15px; font-weight: 700; color: #fafafa; }
.ncard__pill { font-size: 11px; font-weight: 600; color: #9ca3af; background: #24262e; border-radius: 999px; padding: 3px 10px; }
.ncard__adjusted {
  margin: 14px 0 0; padding: 8px 12px; font-size: 12.5px; font-weight: 700; color: #fafafa;
  background: rgba(39,114,249,.12); border-left: 3px solid #2772F9; border-radius: 0 8px 8px 0;
}
/* Compression reconciliation note (compression-curve rework): quiet, right
   under the header where the computed chip sits. Only rendered while the
   display curve is holding the figure below the visitor's inputs. */
.ncard__compressnote { margin: 8px 0 0; font-size: 12px; color: #9ca3af; text-align: right; }
.ncard__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px 32px; margin-top: 20px; }
.nfield__label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.5px; color: #6b7280; text-transform: uppercase; }
.nfield__labelrow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.nfield__cur { font-size: 15px; font-weight: 700; color: #fafafa; min-width: 58px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.nfield__value { font-size: 20px; font-weight: 700; margin-top: 4px; color: #fafafa; }
.nfield__input {
  display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 11px 40px 11px 14px;
  border: 1.5px solid #d4d4d8; border-radius: 12px;
  font-family: 'Figtree', sans-serif; font-size: 17px; font-weight: 700; color: #0B0C0F;
  /* Pen icon (design rev, Aug 2026): signals the field is editable. */
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px 16px;
}
.nfield__input:focus { border-color: #2772F9; outline: none; }
/* Sliders (design rev, Aug 2026): brand-gradient fill up to the thumb
   (--fill kept in sync by paintSliderFill), pink dot with a soft glow. */
.nfield__slider, .eqstrip__slider {
  display: block; width: 100%; margin-top: 10px;
  -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 999px; outline: none; cursor: pointer;
  background: var(--grad) 0 0 / var(--fill, 50%) 100% no-repeat, #2a2d36;
}
.nfield__slider::-webkit-slider-thumb, .eqstrip__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #FF2585; border: none;
  box-shadow: 0 0 0 5px rgba(255, 37, 133, 0.25);
  cursor: pointer;
}
.nfield__slider::-moz-range-thumb, .eqstrip__slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #FF2585; border: none;
  box-shadow: 0 0 0 5px rgba(255, 37, 133, 0.25);
  cursor: pointer;
}
.nfield__ticks { position: relative; height: 5px; margin: 2px 7px 0; }
.nfield__ticks i { position: absolute; top: 0; width: 1px; height: 5px; background: #3a3d47; }
.nfield__ticks i:nth-child(1) { left: 0; } .nfield__ticks i:nth-child(2) { left: 25%; }
.nfield__ticks i:nth-child(3) { left: 50%; } .nfield__ticks i:nth-child(4) { left: 75%; }
.nfield__ticks i:nth-child(5) { right: 0; }
.nfield__scale { display: flex; justify-content: space-between; font-size: 9.5px; color: #9ca3af; margin: 2px 2px 0; }
.nfield__source { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: #9ca3af; }
.ncard__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid #24262e;
}
.ncard__toggle { font-size: 12.5px; font-weight: 600; text-decoration: none; color: #93b4f7; }
.ncard__reset { font-size: 12px; color: #9ca3af; }

/* ---- Display 2: loss donut ---- */
.donut-card { padding: 40px 36px; margin-top: 36px; }
.donut-flex { display: flex; align-items: center; justify-content: center; gap: 56px; flex-wrap: wrap; }
.donut { flex-shrink: 0; font-family: 'Figtree', sans-serif; }
.donut-text { max-width: 360px; text-align: left; }
.donut-title { font-size: 15px; font-weight: 700; color: #fafafa; margin-bottom: 14px; line-height: 1.5; }
.donut-statrow { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.donut-count { background: #fafafa; color: #0B0C0F; font-size: 28px; font-weight: 800; border-radius: 10px; padding: 4px 14px; display: inline-block; }
.donut-every { font-size: 12px; color: #9ca3af; }
.donut-legend { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.donut-legend__row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #9ca3af; }
.donut-legend__row--lost { color: #d4d4d8; }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.sw--pink { background: #FF2585; }
.sw--track { background: #24262e; }
.donut-benchmark { margin: 18px 0 0; font-size: 12.5px; color: #9ca3af; line-height: 1.65; }
/* Paid-traffic alert — red is functional here (a warning), per the colour
   rule. Design rev 2 (Aug 2026): a bordered red-tinted card - red circle !,
   bold red title line, body sentence beneath in near-white. */
.donut-ppc {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 16px 0 0; padding: 12px 16px;
  background: rgba(229, 72, 77, 0.08);
  border: 1px solid rgba(229, 72, 77, 0.45);
  border-radius: 12px;
  font-size: 12.5px; line-height: 1.6; color: #f4f4f5;
}
.donut-ppc__icon {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 0;
  background: #e5484d; color: #ffffff; border-radius: 50%;
  font-size: 12.5px; font-weight: 800; line-height: 20px; text-align: center;
}
.donut-ppc__title { display: block; color: #f87171; font-weight: 800; margin-bottom: 2px; }

/* ---- Displays 3+4 grid ---- */
/* min(340px, 100%) so the 340px floor can never push the cards wider than
   the slab on a narrow phone. */
.slab__charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px; margin-top: 24px; }
.cmp-card { padding: 24px; display: flex; flex-direction: column; }
.cmp-svg-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px 0 0; }
.cmp-svg-wrap svg { font-family: 'Figtree', sans-serif; }
.cmp-footnote { margin: 12px 0 0; font-size: 10.5px; color: #c6cbd4; text-align: center; }
/* Better-than-category note: bold, unmissable, only when true. */
.cmp-better { margin: 12px 8px 0; font-size: 13px; font-weight: 800; color: #fafafa; text-align: center; }
.cmp-lower { font-size: 9px; letter-spacing: 1px; font-weight: 800; color: #c6cbd4; text-align: center; margin-top: 8px; }

/* ---- Display 4: compounding (inverted — losses hang downward) ---- */
.comp-card { padding: 28px; display: flex; flex-direction: column; }
/* Month labels live INSIDE each bar (absolutely positioned above the plot),
   so they are centred on their bar by construction - no separate row to keep
   aligned with a hardcoded axis offset. .comp-body's top margin reserves the
   space they occupy. */
.comp-body { flex: 1; display: flex; align-items: flex-start; margin-top: 46px; padding: 0 0 10px; min-height: 208px; }
.comp-bar__month {
  position: absolute; left: 0; right: 0; top: -26px;
  text-align: center; font-size: 11px; color: #ffffff;
}
.comp-yaxis {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
  height: 180px; padding-right: 8px; font-size: 9.5px; color: #ffffff; min-width: 36px;
}
.comp-yzero { transform: translateY(-4px); }
.comp-plot { flex: 1; position: relative; height: 180px; border-left: 1.5px solid #3a3d47; border-top: 1.5px solid #3a3d47; }
.comp-grid { position: absolute; left: 0; right: 0; height: 1px; background: #24262e; }
.comp-grid--base { bottom: 0; }
.comp-trend { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.comp-bars { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: space-around; gap: 32px; padding: 0 12px; }
.comp-bar { position: relative; width: 80px; height: 100%; }
.comp-bar__fill { position: absolute; left: 0; right: 0; top: 0; border-radius: 0 0 6px 6px; }
.comp-bar__fill--3 { height: 25%; background: #3a3d47; }
.comp-bar__fill--6 { height: 50%; background: #f97316; }
.comp-bar__fill--12 { height: 100%; background: #FF2585; }
.comp-bar__label { position: absolute; left: 0; right: 0; text-align: center; font-size: 12.5px; font-weight: 700; color: #fafafa; }
.comp-bar:nth-child(1) .comp-bar__label { top: calc(25% + 6px); }
.comp-bar:nth-child(2) .comp-bar__label { top: calc(50% + 6px); }
.comp-bar:nth-child(3) .comp-bar__label { top: calc(100% + 6px); }
.comp-bar__label--12 { color: #FF2585; }
/* Client mode: the chart banks agent value - greens, not loss colours. */
.comp--ami .comp-bar__fill--3 { background: #BCE8CC; }
.comp--ami .comp-bar__fill--6 { background: #4d9a6c; }
.comp--ami .comp-bar__fill--12 { background: #22c55e; }
.comp--ami .comp-bar__label--12 { color: #7ee2a8; }
.comp-caption { margin: 20px 0 0; font-size: 12px; color: #c6cbd4; line-height: 1.6; }

/* ---- Section 2: ranked cards ---- */
.rank-list { display: flex; flex-direction: column; gap: 28px; max-width: 880px; margin: 28px auto 0; }
.rank-grad {
  border-radius: 26px; padding: 2px;
  background: linear-gradient(135deg, #2772F9, #FF2585);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rank-grad:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(255,37,133,0.25); }
.rank-grad .rank-card { border-radius: 24px; }
.rank-wrap {
  border-radius: 24px; border: 1px solid #4a4e59;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Hover matches card 1's AI glow - lift + pink halo - but the resting
   border stays plain (the gradient border remains card 1's marker). */
.rank-wrap:hover { transform: translateY(-4px); border-color: #5d6170; box-shadow: 0 12px 32px rgba(255, 37, 133, 0.25); }
.rank-wrap .rank-card { border-radius: 23px; }
.rank-card { background: #16171c; border-radius: 24px; padding: 34px 38px; text-align: left; }
.rank-card__head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.rank-num {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 15px;
  background: #fafafa; color: #0B0C0F; display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800;
}
.rank-card__title { flex: 1; font-size: 24px; font-weight: 800; color: #ffffff; letter-spacing: -0.02em; }
.rank-card__badge {
  font-size: 12px; font-weight: 800; letter-spacing: 1.5px; color: #fff;
  background: linear-gradient(90deg, #7A3BFF, #FF2585); border-radius: 999px; padding: 8px 18px; white-space: nowrap;
}
.rank-card__row { display: grid; grid-template-columns: 150px 1fr; gap: 24px; margin-top: 26px; align-items: start; }
.rank-card__row--fix { align-items: center; margin-top: 22px; }
.rank-card__rowlabel { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; color: #6b7280; padding-top: 3px; }
.rank-card__rowlabel--fix { color: #FF2585; padding-top: 0; }
.rank-card__body { font-size: 16px; color: #e5e7eb; line-height: 1.6; }
/* Leak cards v2 (State B): BUYERS ASK questions + CHECK IT YOURSELF panel. */
.obsq { display: flex; flex-direction: column; gap: 8px; }
.obsq__intro { font-size: 14px; color: #9a9da8; }
.obsq__q { font-size: 15px; font-weight: 600; color: #ffffff; line-height: 1.5; }
.obsq__q + .obsq__q { margin-top: -2px; }
.rank-card__rowlabel--check { color: #ffffff; font-weight: 700; }
/* Variant 2: THE LEAK statement in white - it is the card's one-line verdict. */
.rank-card__body--leak { color: #ffffff; }
.obs-panel {
  background: #0B0C0F; border: 1px solid #24262e; border-radius: 12px;
  padding: 14px 18px; font-size: 15px; font-weight: 600; color: #ffffff; line-height: 1.55;
}
.obs-page { border-bottom: 2px solid #FF2585; }
/* Linked page name (Sep 2026): same underline treatment, inherits the text
   colour; the pink flash on hover is the only tell that it is clickable. */
a.obs-page { color: inherit; text-decoration: none; }
a.obs-page:hover { color: #FF2585; }
/* The underlined focus word in the donut title ("new" visitors). */
.donut-mark { border-bottom: 3px solid #FF2585; padding-bottom: 2px; }
.obs-chip {
  border: 1px solid #3a3d47; color: #d8d9de; font-size: 11px; font-weight: 600;
  letter-spacing: 1px; border-radius: 999px; padding: 5px 14px; white-space: nowrap;
}
.obs-chip__tick { color: #FF2585; font-weight: 800; }
/* Benchmark redesign: LOWER IS BETTER as a header chip, opposite the title. */
.cmp-headrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.cmp-headrow .cmp-lower {
  border: 1px solid #3a3d47; color: #9a9da8; font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; border-radius: 999px; padding: 4px 12px; white-space: nowrap; flex: none;
}
/* Client mode: the green generating panel replaces the hero loss box. */
.ami-genbox { margin: 18px 0 6px; }
.ami-genbox__pill {
  display: inline-flex; align-items: center; gap: 7px; background: #EFFAF3;
  border: 1px solid #BCE8CC; border-radius: 999px; padding: 6px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: #1d6b3a; margin-bottom: 10px;
}
.ami-genbox__dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: none; }
.ami-genbox__panel {
  background: #EFFAF3; border: 1px solid #BCE8CC; border-radius: 16px;
  padding: 20px 24px; text-align: center;
}
.ami-genbox__label { font-size: 15px; color: #2f7c4d; }
.ami-genbox__value { font-size: 40px; font-weight: 800; color: #1d6b3a; margin: 6px 0 4px; }
.ami-genbox__suffix { font-size: 18px; font-weight: 600; color: #4d9a6c; }
.ami-genbox__note { font-size: 12.5px; line-height: 1.5; color: #4d9a6c; }
/* Client-mode donut legend additions: sub-lines + the blue engagement entry. */
.donut-legend__sub { font-size: 12px; line-height: 1.5; color: #9ca3af; margin: 2px 0 8px 22px; }
.donut-legend__blue { color: #7ea8f5; font-weight: 700; }
.sw--ring { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid #2772F9; background: transparent; display: inline-block; flex: none; }

/* Ami-client badge (hero): gradient chrome ring, detected-tag proof. */
.ami-badge { display: inline-flex; padding: 1.5px; border-radius: 999px; background: var(--grad); margin-top: 10px; }
.ami-badge__in {
  display: inline-flex; align-items: center; gap: 7px; background: #ffffff;
  border-radius: 999px; padding: 5px 14px; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: #0B0C0F;
}
.ami-badge__tick { color: #FF2585; font-weight: 800; }

/* Rate-limit wait state (handoff card 1d): amber = busy, never red. */
.rlpanel {
  background: #FFF8EC; border: 1px solid #F5D9A8; border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; gap: 14px; text-align: left;
}
.rlpanel__head { font-size: 15px; font-weight: 700; color: #4a3714; }
.rlpanel__body { font-size: 15px; line-height: 1.55; color: #6b4e1d; }
.rlpanel__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rlpanel__book {
  background: #0B0C0F; color: #ffffff; border-radius: 10px; padding: 10px 20px;
  font-size: 14px; font-weight: 700; text-decoration: none; display: inline-block;
}
.rlpanel__book:hover { background: #24262e; }
.rlpanel__chip {
  border: 1px solid #F5D9A8; background: #ffffff; color: #6b4e1d; border-radius: 10px;
  padding: 10px 20px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.rlready {
  background: #EFFAF3; border: 1px solid #BCE8CC; border-radius: 14px;
  padding: 18px; font-size: 15px; font-weight: 600; color: #1d6b3a; text-align: left;
}

/* Confirm layer button doubles as a plain close now; keep the anchor look. */
button.somodal__home { border: 0; font: inherit; cursor: pointer; }
/* Order placed: the Starter CTA fades and stops responding. */
.starter__cta--ordered { opacity: 0.35; pointer-events: none; cursor: default; }

/* Booking checklist take-away: quiet grey box per the design; compact so
   the left column still lines up with the calendar. */
.booking-leave {
  margin: 14px 0 0; background: #f4f4f6; border-radius: 14px; padding: 12px 16px;
  font-size: 14.5px; line-height: 1.55; color: #0B0C0F;
}
.booking-leave strong { font-weight: 700; }

/* Pending state (handoff): three coordinated signals - section notice,
   per-card checking chip, skeleton slot - each with the shared neutral
   shimmer sweep. The brand gradient never appears in pending. */
@keyframes obs-sweep {
  0% { transform: translateX(-110%); }
  55% { transform: translateX(320%); }
  100% { transform: translateX(320%); }
}
@keyframes obs-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.obs-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #8b5cf6; margin-right: 9px; flex: none; vertical-align: baseline;
  animation: obs-pulse 1.6s ease-in-out infinite;
}
.obs-notice {
  position: relative; overflow: hidden; display: flex; align-items: center;
  justify-content: center; width: fit-content; margin: 18px auto 0;
  border: 1px solid #3a3d47; border-radius: 999px; padding: 10px 22px;
  font-size: 14px; color: #d8d9de;
}
.obs-notice::after, .obs-chip--pending::after, .obs-skel::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 36%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: obs-sweep 2.8s ease-in-out infinite;
  animation-delay: var(--obs-delay, 0s);
  pointer-events: none;
}
.obs-notice::after { background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.14), transparent); }
.obs-chip--pending {
  position: relative; overflow: hidden; display: inline-flex; align-items: center;
  border-color: #6b6e78; color: #ffffff; font-weight: 700; padding: 6px 16px;
}
.obs-chip--pending::after { background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent); }
.obs-chip--pending .obs-dot { width: 8px; height: 8px; margin-right: 8px; }
.obs-skel {
  position: relative; overflow: hidden; border: 1px dashed #4a4d57;
  border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.obs-skel__bar { height: 12px; border-radius: 6px; background: #24262e; }
@media (prefers-reduced-motion: reduce) {
  .obs-notice::after, .obs-chip--pending::after, .obs-skel::after { animation: none; display: none; }
  .obs-dot { animation: none; }
}
.rank-card__fix { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rank-card__agentafter { font-size: 14.5px; color: #9ca3af; }
.agent-chip { border-radius: 999px; padding: 1.5px; background: linear-gradient(90deg, #2772F9, #FF2585); display: inline-flex; }
.agent-chip__inner { background: #16171c; border-radius: 999px; padding: 7px 18px 7px 10px; display: inline-flex; align-items: center; gap: 10px; }
.agent-chip__icon { width: 26px; height: 26px; display: block; }
.agent-chip__name { font-size: 15px; font-weight: 700; color: #ffffff; }
@media (max-width: 560px) {
  .rank-card { padding: 24px 20px; }
  .rank-card__row { grid-template-columns: 1fr; gap: 8px; margin-top: 20px; }
  .rank-card__title { font-size: 19px; }
}

/* ---- Section 3: video slab ---- */
.slab--video { padding: 64px 24px; }
.slab__videosub { margin: 10px auto 0; font-size: 14px; color: #9ca3af; max-width: 600px; text-align: center; }
/* Video card (design rev, Aug 2026): white rounded frame floating over
   decorative gradient blobs on the black slab. */
.video-embed {
  position: relative; z-index: 1;
  max-width: 980px; margin: 30px auto 0;
  background: #ffffff; padding: 12px; border-radius: 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.video-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 16px; background: #16171c; }
.video-ph { border: 1.5px dashed #3a3d47; border-radius: 20px; padding: 40px 32px; text-align: center; max-width: 640px; margin: 28px auto 0; }
.video-ph__label { font-size: 10px; letter-spacing: 2px; color: #9ca3af; font-weight: 700; text-transform: uppercase; }
.video-ph__name { font-size: 16px; font-weight: 700; margin-top: 10px; color: #fafafa; }
.video-ph__note { font-size: 11.5px; color: #6b7280; margin-top: 8px; font-family: monospace; }
/* CTA line sits ABOVE the video: gradient pill link + quiet tail text. */
.slab--video .video-cta { margin: 18px 0 0; text-align: center; font-size: 13.5px; position: relative; z-index: 1; }
.slab--video .video-cta__link {
  display: inline-block; padding: 8px 18px; border-radius: 999px;
  background: var(--grad); color: #ffffff; font-weight: 700;
  text-decoration: none;
}
.slab--video .video-cta__after { color: #9ca3af; }
.slab--video .video-cta__link:empty { display: none; }

/* Decorative gradient petals behind the video card (pure CSS, no assets).
   Not plain circles: each keeps one square corner so the shape POINTS -
   the right one to the top-right, the left one to the bottom-left,
   matching the reference. border-radius order: TL TR BR BL. */
.slab--video { position: relative; overflow: hidden; }
.slab--video::before,
.slab--video::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 440px; height: 440px;
  background: var(--grad); opacity: 0.9;
}
.slab--video::before { right: -110px; top: 60px; border-radius: 50% 0 50% 50%; background: linear-gradient(200deg, #6d3df5, #FF2585); }
.slab--video::after { left: -130px; bottom: -100px; border-radius: 50% 50% 50% 0; background: linear-gradient(20deg, #6d3df5, #FF2585); }
.slab--video .slab__inner { position: relative; z-index: 1; }
/* Mobile: the 440px blobs sit right behind the heading/sub text on a narrow
   screen (grey text on bright purple - unreadable). Shrink them, push them
   below the text zone, and let the sub read white on whatever is behind. */
@media (max-width: 560px) {
  .slab--video::before, .slab--video::after { width: 280px; height: 280px; }
  .slab--video::before { top: 230px; right: -130px; }
  .slab--video::after { bottom: -120px; left: -140px; }
  .slab__videosub { color: rgba(255, 255, 255, 0.92); }
}


@media (max-width: 560px) {
  .rcard { padding: 26px 20px; }
  .rcard__score { font-size: 46px; }
  .rcard__scorecol { text-align: center; }
  .rsec__title { font-size: 30px; }
  .donut-card { padding: 28px 20px; }
  .cmp-card, .comp-card { padding: 20px 14px; }
  /* Fixed 80px bars overflow a phone-width plot; go proportional. */
  .comp-bars { gap: 10px; padding: 0 6px; }
  .comp-bar { width: 27%; }
}

/* ===== Start-page redesign (design_handoff_start_page, Aug 2026) ===== */

/* Score preview card under the hero subhead: example dial + monthly cost.
   Static example figures per the handoff (36/100, GBP 38,500/month). */
.score-preview {
  display: flex; align-items: center; gap: 20px;
  margin-top: 28px; max-width: 430px;
  background: #f7f7f9; border: 1px solid #e5e7eb; border-radius: 16px;
  padding: 18px 22px;
  position: relative;
}
/* EXAMPLE REPORT tag: the card's figures are illustrative, said plainly. */
.score-preview__tag {
  position: absolute; top: -9px; left: 18px;
  background: #ffffff; border: 1px solid #e5e7eb; border-radius: 999px;
  padding: 3px 10px; font-size: 10px; font-weight: 800; letter-spacing: 0.8px;
  text-transform: uppercase; color: #6b7280;
}
.score-preview__dialwrap { position: relative; flex: 0 0 auto; }
.score-preview__dial { width: 200px; max-width: 100%; height: auto; display: block; }
/* White score chip overlaid on the dial's bottom-right (the dial image is
   arc + needle only; the number is HTML so it can go dynamic later). */
.score-preview__chip {
  position: absolute; right: -6px; bottom: 2px;
  background: #ffffff; border-radius: 12px; padding: 8px 14px;
  box-shadow: 0 6px 20px rgba(17, 17, 26, 0.14);
  font-size: 22px; font-weight: 800; color: #111;
}
.score-preview__chip span { font-size: 12px; font-weight: 700; color: #9ca3af; }
.score-preview__title { font-size: 15px; font-weight: 800; color: #111; line-height: 1.4; }
.score-preview__amount { font-size: 30px; font-weight: 800; color: #111; margin-top: 10px; }
.score-preview__suffix { font-size: 14px; font-weight: 600; color: #9ca3af; margin-left: 3px; }

/* "Inside your report" proof bar: dark panel, bullets with gradient dots,
   CTA back to the form, report screenshot right. */
.proof-bar {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 44px; align-items: center;
  background: #0B0C0F; border-radius: 20px; padding: 44px 48px; margin-top: 56px;
}
.proof-bar__kicker {
  font-size: 12px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: #9ca3af;
}
.proof-bar__heading {
  margin: 10px 0 0; font-size: 26px; font-weight: 800; color: #fafafa;
  line-height: 1.2; text-align: left;
}
.proof-bar__bullets {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.proof-bar__bullets li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #d4d4d8; }
.proof-bar__bullets li::before {
  content: ""; flex: 0 0 6px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--grad);
}
.proof-bar__cta {
  width: auto; min-width: 0; margin-top: 22px; padding: 13px 26px;
  font-size: 14.5px; border-radius: 12px;
}
.proof-bar__img { width: 100%; border-radius: 14px; border: 1px solid #24262e; display: block; }

@media (max-width: 900px) {
  .proof-bar { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
  .score-preview__dial { width: 170px; }
}
/* Mobile re-flow (design_handoff_score_card_mobile): title first full
   width, then a row of dial (130px, smaller chip) + the monthly figure.
   display:contents lifts the text wrapper's children into the card flex
   so they can be reordered around the dial; desktop is untouched. */
@media (max-width: 560px) {
  .score-preview { flex-wrap: wrap; align-items: center; gap: 0 16px; padding: 20px 22px; max-width: 100%; }
  .score-preview__text { display: contents; }
  .score-preview__title { order: 1; width: 100%; font-size: 14.5px; line-height: 1.4; margin-bottom: 14px; }
  .score-preview__title br { display: none; }
  .score-preview__dialwrap { order: 2; }
  .score-preview__dial { width: 130px; }
  .score-preview__chip { right: -8px; bottom: -2px; border-radius: 10px; padding: 5px 10px; font-size: 16px; box-shadow: 0 4px 14px rgba(17, 17, 26, 0.12); }
  .score-preview__chip span { font-size: 10px; }
  .score-preview__amount { order: 3; flex: 1 1 0; min-width: 0; font-size: 26px; line-height: 1.15; margin-top: 0; }
  .score-preview__suffix { font-size: 13px; }
}

/* Landing header: the logo moved into the hero (form top aligns with logo
   top per the design), so the standalone header hides on this view only. */
body.is-landing .site-header { display: none; }
.hero-logo-link { display: inline-block; margin: 0 0 18px; }
/* Form top aligns with the TITLE, not the logo: offset by the logo block
   (30px logo + 18px gap). */
@media (min-width: 900px) { .hero .form-card { margin-top: 97px; } }
.hero-logo { display: block; height: 30px; width: auto; }

/* How-it-works alignment (start-page redesign): the brand.css .cards rule
   carries 40px side padding and 56px bottom padding, which indented the
   card row versus the proof bar and doubled the gap below. Scoped here so
   the report's card grids keep the original spacing. */
/* 24px sides: .section zeroes the wrapper's horizontal padding, so this
   is what lines the card edges up with the proof bar's box. */
#view-landing .cards { padding: 24px 24px 0; }
#view-landing .wrapper.section { padding-bottom: 0; }

/* Example dial image: rounded corners per the design. */
.score-preview__dial { border-radius: 12px; }

/* "/rating" tag beside the verdict pill - same quiet grey treatment as the
   "/100" beside the score, so the pill reads as the site's RATING. */
.rcard__ratinglabel { font-size: 14px; font-weight: 600; color: #9ca3af; margin-left: 6px; }

/* Mini revenue chip in the numbers-card header: the hero figure follows the
   visitor into the adjusting view and updates live. */
.ncard__money {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 8px 16px; border: 1px solid #3a3d47; border-radius: 999px;
  background: #16171c; white-space: nowrap;
}
.ncard__money-label { font-size: 12px; color: #c6cbd4; }
.ncard__money-value { font-size: 16px; font-weight: 800; color: #ffffff; }
.ncard__money-after { font-size: 12px; color: #9ca3af; }

/* 60-second promise on the progress card: status + timer share a row, and
   a quiet activity line sits under the bar. */
.form-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.form-progress__head .form-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-progress__timer { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #6b7280; font-variant-numeric: tabular-nums; }
.form-progress__timer-total { color: #c3c6cf; }
/* One-line status row with the pulsing AI spark: fixed height so the card
   never jumps as messages rotate; nowrap+ellipsis as the safety net. */
.form-progress__activityrow { margin: 12px 0 0; display: flex; align-items: center; gap: 10px; height: 20px; overflow: hidden; }
.form-progress__spark {
  flex: 0 0 auto; font-size: 17px; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: spark-pulse 1.4s ease-in-out infinite;
}
@keyframes spark-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.7; } }
.form-progress__activity { font-size: 13px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#progressContainer { background: #f0f0f3; }


/* Tester mode (?tester=1): URL-only form for the team's manual QA. */
body.is-tester #first-name,
body.is-tester #last-name,
body.is-tester #email { display: none; }


/* FAQ answers keep their authored line breaks (rating band list). */
.faq__a p { white-space: pre-line; }

/* Booking left column: credibility line + what-we-cover title. */
.booking-cred { margin: 14px 0 0; font-size: 14.5px; color: #4b5563; line-height: 1.6; }
.booking-cover-title { margin: 18px 0 14px; font-size: 15.5px; font-weight: 800; color: var(--dark); }


/* Closed goal row: the single visible selection is a STATUS, not a control -
   no hand cursor until Adjust mode makes the buttons interactive. */
.ltbox--closed .ltbox__btn { cursor: default; }

/* Mobile form: hard single-column enforcement. brand.css's 640px rules are
   correct but were observed losing in some render paths - this ID-level,
   last-in-source rule wins under any cascade interpretation. */
@media (max-width: 640px) {
  #form-fields { grid-template-columns: 1fr !important; }
  #form-fields .input, #form-fields .button { grid-column: 1 / -1 !important; width: 100%; }
}


/* Currency toggle (currency-toggle handoff): segmented GBP/USD/EUR in the
   card header, left of the cost lozenge - a card-wide setting, not a field
   edit. Visual 26px; the ::after pseudo pads the touch target taller. */
.ncard__headright { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cur-toggle { display: inline-flex; gap: 4px; }
.cur-toggle__btn {
  appearance: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
  width: 26px; height: 26px; line-height: 1; border-radius: 8px;
  color: #9ca3af; background: #1d1f26; border: 1px solid #34363f;
  position: relative;
}
.cur-toggle__btn::after { content: ""; position: absolute; inset: -9px -3px; }
.cur-toggle__btn:hover { color: #fafafa; border-color: #5a5c68; }
.cur-toggle__btn.is-active { background: var(--grad); background-origin: border-box; background-clip: border-box; color: #ffffff; border-color: transparent; font-weight: 800; }
@media (max-width: 560px) {
  .ncard__head { align-items: flex-start; }
  .ncard__title { flex: 1 1 100%; }
  .ncard__headright { width: 100%; }
  /* The lozenge must fit the narrow card's content width or it eats the
     card padding - tighter pill, same words. */
  .ncard__money { padding: 6px 10px; }
  .ncard__money-label, .ncard__money-after { font-size: 11px; }
  .ncard__money-value { font-size: 14px; }
}

/* Currency change scope cue: the figures it touched fade a brief highlight
   so the visitor sees the change is report-wide, not one field. */
@keyframes curFlash {
  0% { background-color: rgba(39, 114, 249, 0.22); }
  100% { background-color: rgba(39, 114, 249, 0); }
}
.cur-flash { animation: curFlash 600ms ease-out; border-radius: 6px; }

/* ===== Ami Starter (design 28a/c/d): small-site self-serve offer =====
   Replaces the Calendly section when server visitors < starter_offer_below.
   Same slab width as the other dark report sections. */
.slab--starter { background: #0B0C0F; padding: 64px 24px; }
.starter__col { max-width: 640px; margin: 0 auto; text-align: center; }
.starter__col .s2chip { margin-bottom: 14px; }
.starter__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #9ca3af; }
.starter__heading { margin: 10px 0 12px; font-size: 32px; font-weight: 800; color: #fafafa; }
.starter__para { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: #9ca3af; }
.starter__callout {
  margin: 0 0 26px; padding: 16px 20px; text-align: left;
  font-size: 15px; font-weight: 700; color: #ffffff; line-height: 1.55;
  background: linear-gradient(#131419, #131419) padding-box,
              linear-gradient(90deg, #2772F9, #FF2585) border-box;
  border: 1.5px solid transparent; border-radius: 12px;
}
.starter__callout strong { color: #FF2585; }
.starter__card {
  background: linear-gradient(#ffffff, #ffffff) padding-box,
              linear-gradient(90deg, #2772F9, #FF2585) border-box;
  border: 2px solid transparent; border-radius: 20px;
  /* The rank-card AI glow, on by default and stronger - the offer pops. */
  box-shadow: 0 12px 32px rgba(255, 37, 133, 0.45), 0 12px 44px rgba(39, 114, 249, 0.4);
  padding: 26px 28px; text-align: left;
}
.starter__cardhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.starter__cardtitle { font-size: 20px; font-weight: 800; color: #111; }
.starter__price { font-size: 26px; font-weight: 800; color: #111; white-space: nowrap; }
.starter__persuffix { font-size: 14px; font-weight: 600; color: #6b7280; }
.starter__cardsub { margin: 6px 0 16px; font-size: 13.5px; color: #4b5563; }
/* Benefit table (starter card v2): ONE grid so row dividers run
   continuously across the text column and the tinted Included column. */
.sotable { display: grid; grid-template-columns: 1fr 72px; margin: 0 0 14px; }
.sotable__spacer { border-bottom: 1px solid #ececf0; }
.sotable__inchead {
  background: #eef2fb; border-bottom: 1px solid #dde4f5;
  text-align: center; padding: 10px 6px;
  font-size: 12.5px; font-weight: 800; color: #2772F9;
}
.sotable__cell {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 12px 14px 2px; border-bottom: 1px solid #ececf0;
  font-size: 14.5px; line-height: 1.5; color: #374151;
}
.sotable__cell strong { color: #111; }
.sotable__cell--last { border-bottom: 0; }
.sotable__icon { flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; }
.sotable__svg { width: 28px; height: 28px; }
.sotable__img { width: 30px; height: 30px; display: block; }
.sotable__tick, .sotable__opt {
  background: #eef2fb; border-bottom: 1px solid #dde4f5;
  display: flex; align-items: center; justify-content: center;
}
.sotable__tick { color: #FF2585; font-weight: 800; font-size: 15px; }
.sotable__opt { color: #2772F9; font-weight: 800; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; }
.sotable__right--last, .sotable__opt.sotable__right--last { border-bottom: 0; border-radius: 0 0 12px 12px; }
@media (max-width: 640px) {
  .sotable { grid-template-columns: 1fr 58px; }
  .sotable__inchead { font-size: 12px; }
  .sotable__cell { gap: 12px; padding: 12px 10px 12px 0; font-size: 13.5px; }
  .sotable__icon { flex-basis: 30px; }
  .sotable__svg { width: 24px; height: 24px; }
  .sotable__img { width: 26px; height: 26px; }
  .sotable__tick { font-size: 14px; }
}
.starter__addons { margin: 0 0 16px; font-size: 12.5px; color: #6b7280; }
/* Email field (design 31a): compact labelled field with envelope icon and
   a Change link that swaps to Done while editing. */
.starter__emailrow { margin: 0 0 14px; }
.soemail__label {
  display: block; margin-bottom: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: #6b7280;
}
.soemail__field {
  display: flex; align-items: center; gap: 11px; min-height: 44px;
  box-sizing: border-box; background: #f7f7f9;
  border: 1px solid #e5e7eb; border-radius: 12px; padding: 13px 16px;
  cursor: text;
}
.soemail__field:focus-within { border-color: #2772F9; box-shadow: 0 0 0 3px rgba(39, 114, 249, 0.15); }
.soemail__field--bad { border-color: #FF2585; }
.soemail__ico { width: 18px; height: 18px; flex: 0 0 auto; }
.soemail__input {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; font-weight: 600;
  color: #111; background: transparent; border: 0; outline: none; padding: 0;
}
.soemail__change {
  appearance: none; background: none; border: 0; cursor: pointer; padding: 0;
  font: inherit; font-size: 12.5px; font-weight: 700; color: #2772F9; flex: 0 0 auto;
}
.soemail__err { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: #FF2585; }
@media (max-width: 640px) {
  .soemail__label { font-size: 10.5px; }
  .soemail__input { font-size: 14px; }
}
.starter__terms { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13.5px; color: #374151; cursor: pointer; }
.starter__terms input { width: 18px; height: 18px; accent-color: #FF2585; cursor: pointer; }
.starter__terms a { color: #111; font-weight: 400; text-decoration: underline; }
.starter__cta {
  display: block; width: 100%; appearance: none; border: 0; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 800; color: #ffffff;
  padding: 15px 18px; border-radius: 999px;
  background: linear-gradient(90deg, #2772F9, #FF2585);
  box-shadow: 0 12px 30px rgba(255, 37, 133, 0.35);
}
.starter__cta:disabled { cursor: wait; }
.starter__undercta { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: #4b5563; }
.starter__rolling { margin: 8px 0 0; text-align: center; font-size: 12px; color: #6b7280; }
.starter__error { margin: 10px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: #e5484d; }
.starter__smallprint { margin: 18px 0 0; font-size: 12.5px; color: #6b7280; }
@media (max-width: 560px) {
  .starter__heading { font-size: 24px; }
  .starter__card { padding: 22px 18px; }
}

/* Modal pattern shared by the terms (28c) and confirmation (28d) layers. */
.somodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.somodal[hidden] { display: none; }
.somodal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.somodal__box {
  position: relative; background: #ffffff; border-radius: 16px;
  width: 520px; max-width: calc(100vw - 24px); max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.somodal__head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid #e5e7eb; }
.somodal__title { font-size: 17px; font-weight: 800; color: #111; }
.somodal__x { appearance: none; background: none; border: 0; cursor: pointer; font-size: 16px; color: #6b7280; padding: 10px; margin: -10px; }
.somodal__body { padding: 18px 22px; overflow-y: auto; font-size: 13.5px; line-height: 1.65; color: #374151; white-space: pre-line; }
.somodal__foot { padding: 14px 22px; border-top: 1px solid #e5e7eb; text-align: right; }
.somodal__close {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700;
  color: #ffffff; background: #111; border-radius: 999px; padding: 11px 26px;
}
.somodal__box--confirm { text-align: center; }
.somodal__strip { height: 5px; background: linear-gradient(90deg, #2772F9, #FF2585); }
.somodal__confirmbody { padding: 28px 26px; overflow-y: auto; }
.somodal__tick {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
  background: #e8f7ef; color: #1a9d5c; font-size: 26px; font-weight: 800; line-height: 52px;
}
.somodal__confirmtitle { margin: 0 0 10px; font-size: 21px; font-weight: 800; color: #111; }
.somodal__confirmmsg { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: #4b5563; }
.somodal__next { background: #f7f7f9; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px 18px; text-align: left; margin-bottom: 20px; }
.somodal__nexttitle { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #6b7280; margin-bottom: 8px; }
.somodal__steps { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.7; color: #374151; }
.somodal__home {
  display: inline-block; text-decoration: none; font-size: 15px; font-weight: 800; color: #ffffff;
  padding: 13px 30px; border-radius: 999px; background: linear-gradient(90deg, #2772F9, #FF2585);
  box-shadow: 0 12px 30px rgba(255, 37, 133, 0.35);
}

/* Starter section header (4 OF 4) + terms iframe */
.starter__sechead { padding: 40px 24px 26px; text-align: center; }
.starter__sechead .rsec__para { text-align: center; }
/* Nudge layer box */
.sonotice__box {
  position: relative; background: #ffffff; border-radius: 16px;
  width: 400px; max-width: calc(100vw - 32px); padding: 26px 26px 22px;
  text-align: center; box-shadow: 0 24px 70px rgba(17, 17, 26, 0.35);
}
.sonotice__msg { margin: 0 0 18px; font-size: 15px; line-height: 1.6; font-weight: 700; color: #111; }
.somodal__body--frame { padding: 0; }
.somodal__doctext { white-space: pre-line; }
#terms-frame { width: 100%; height: 62vh; border: 0; display: block; }

/* The maths, spelled out (honesty gap fix): quiet monospace-free line under
   the numbers grid, then the scope sentence in muted grey. */
.ncard__maths { margin: 16px 0 0; font-size: 13px; font-weight: 700; color: #c6cbd4; }
.ncard__mathscope { margin: 4px 0 0; font-size: 12px; color: #9ca3af; }

/* Adaptive compounding (1/3/6 above the threshold): the first bar's height
   follows its month share of the horizon (1/6 vs the standard 3/12). */
.comp--short .comp-bar__fill--3 { height: 16.7%; }

/* ===== Report restructure (Aug 2026) ===== */

/* Hero: date line; the dial compacts to supporting-evidence size (same
   gauge graphic, scaled) under the leading loss box. */
.rcard__date { font-size: 13px; color: #8a8d97; margin-top: 4px; }
.rcard__dialrow--compact { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 24px; }
.rcard__dialrow--compact .rgauge { transform: scale(0.62); transform-origin: center; margin: -28px -40px; }
.rcard__dialrow--compact .rcard__score { font-size: 34px; }
.rcard__dialcaption { margin: 10px 0 18px; font-size: 13px; color: #8a8d97; text-align: center; }
/* Hero dock (review9, design 1a): white evidence strip inside the pink
   money box - full-bleed via negative margins matching the box padding,
   separated by the box's own border colour. Dial ~104px (190 x 0.55). */
.rcard--dock .rcard__money { padding-bottom: 0; overflow: hidden; }
.rcard--dock .rcard__evidence { background: #ffffff; border-top: 1px solid #FFD9D3; margin: 20px -28px 0; padding: 18px 24px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.rcard__evidence-title { flex-basis: 100%; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #8a8d97; }
.rcard--dock .rcard__evidence .rcard__dialrow { margin-top: 0; gap: 14px; }
/* The base hero reserves a 170px score column; in the strip that left
   ~80px of dead air between the score and the explainer - shrink to fit. */
.rcard--dock .rcard__evidence .rcard__scorecol { flex: 0 0 auto; }
.rcard--dock .rcard__evidence .rgauge { transform: scale(0.55); margin: -23px -43px; }
.rcard--dock .rcard__evidence .rcard__score { font-size: 28px; }
.rcard--dock .rcard__evidence .rcard__dialcaption { margin: 0; max-width: 140px; text-align: left; font-size: 12px; }
@media (max-width: 560px) {
  .rcard--dock .rcard__evidence { margin: 16px -18px 0; }
  .rcard--dock .rcard__evidence .rcard__dialcaption { max-width: none; flex-basis: 100%; text-align: center; }
}

/* Step badges on the four evidence cards. */
.stepbadge { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.stepbadge__num {
  width: 24px; height: 24px; border-radius: 50%; background: #ffffff; color: #0B0C0F;
  font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.stepbadge__label { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #ffffff; }

/* Equation strip: input cards x input cards = gradient result. */
.eqstrip { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; margin-top: 18px; }
.eqstrip__cell {
  flex: 1; min-width: 140px; background: #0B0C0F; border: 1px solid #24262e; border-radius: 14px;
  padding: 16px 20px 18px; display: flex; flex-direction: column; justify-content: flex-start; gap: 0;
}
.eqstrip__op { display: flex; align-items: center; font-size: 26px; font-weight: 300; color: #8a8d97; }
/* v3: the three-zone anatomy applies in BOTH states - a 34px top-aligned
   label zone absorbs one- and two-line labels, so all five figures sit on
   one shared line in their 46px number zones. */
.eqstrip__label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #8a8d97; font-weight: 600; min-height: 34px; display: flex; align-items: flex-start; }
.eqstrip__label--pink { color: #FF2585; font-weight: 700; }
.eqstrip__val { font-size: 26px; font-weight: 800; color: #fafafa; height: 46px; display: flex; align-items: center; }
.eqstrip__valsfx { font-size: 14px; font-weight: 500; color: #9a9da8; }
.eqstrip__sub { font-size: 11px; line-height: 1.45; color: #9a9da8; margin-top: 10px; }
.eqstrip__result { flex: 1.2; min-width: 170px; border-radius: 14px; padding: 1.5px; background: linear-gradient(135deg, #2772F9, #FF2585); }
.eqstrip__resultinner { background: #0B0C0F; border-radius: 13px; padding: 16px 20px 18px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; gap: 0; }
.eqstrip__footnote { margin: 16px 0 0; font-size: 13.5px; line-height: 1.6; color: #9a9da8; }
@media (max-width: 720px) {
  .eqstrip { flex-direction: column; }
  .eqstrip__op { justify-content: center; }
}

/* Leak cards: number badges become circles. */
.rank-num { border-radius: 50% !important; width: 38px; height: 38px; }

/* Section 2 closing line. */
.slab__endline { margin: 26px 0 0; text-align: center; font-size: 16px; font-weight: 700; color: #fafafa; }

/* Section 3: proof line + agent recap cards. */
.rsec__proof { margin: 18px auto 0; max-width: 720px; text-align: center; font-size: 18px; line-height: 1.7; color: #3f3f46; }
.rsec__proof strong { color: #0B0C0F; }
.recap { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 26px auto 0; max-width: 980px; text-align: left; }
/* Agent-cards handoff: the gradient border is the same "this is Ami" chrome
   as the BIGGEST LEAK and LOST EVERY MONTH cards. */
.recap__card {
  border-radius: 20px; padding: 1.5px; background: linear-gradient(135deg, #2772F9, #FF2585);
  box-shadow: 0 12px 30px rgba(255, 37, 133, 0.12);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
@media (hover: hover) {
  .recap__card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(255, 37, 133, 0.18); }
}
.recap__inner {
  background: #ffffff; border-radius: 19px; padding: 26px 28px; height: 100%;
  box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;
}
.recap__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.recap__eyebrow { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #8a8d97; font-weight: 600; }
.recap__dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #2772F9, #FF2585); flex: none; }
.recap__icon { width: 26px; height: 26px; flex: none; object-fit: contain; }
.recap__name { font-weight: 800; font-size: 19px; letter-spacing: -0.2px; color: #0B0C0F; }
.recap__blurb { font-size: 14px; color: #4a4d57; line-height: 1.5; }

/* Booking guarantee banner attached to the card top. */
.bookbanner {
  text-align: center; color: #ffffff;
  background: linear-gradient(90deg, #2772F9, #FF2585);
  padding: 14px 24px; font-size: 15px;
}

/* Closing CTA. */
.closing { padding: 56px 24px; }
.closing__card {
  max-width: 1180px; margin: 0 auto; background: #ffffff; border: 1px solid #ececf0;
  border-radius: 24px; padding: 44px 40px; text-align: center;
  box-shadow: 0 20px 50px rgba(11, 12, 15, 0.06);
}
.closing__title { margin: 0 0 22px; font-size: 26px; font-weight: 800; line-height: 1.35; color: #0B0C0F; }
.closing__amount { color: #D93A2B; }
.closing__btn {
  display: block; width: 100%; max-width: 420px; margin: 0 auto; box-sizing: border-box; background: #0B0C0F; color: #ffffff;
  text-align: center; text-decoration: none; border-radius: 12px; padding: 16px 0; font-weight: 700; font-size: 16px;
}
.closing__line2 { display: block; }

/* Edit-in-place adjust mode (maths adjust handoff): the formula stays on
   screen; cards flip to controls with the dashed editable signal. */
.eqstrip--edit .eqstrip__cell { border-style: dashed; border-color: #4a4d57; min-width: 170px; }
.eqstrip__cell { transition: border-color 0.2s ease; }
/* Label rows: stacked zones in display (label 34px then value 46px, so
   nesting inside the row changes nothing); in edit the row itself becomes
   the 34px zone with the slider value right-aligned at 20px. */
.eqstrip__labelrow { display: flex; flex-direction: column; gap: 0; }
.eqstrip--edit .eqstrip__labelrow { flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; min-height: 34px; }
.eqstrip--edit .eqstrip__labelrow .eqstrip__label { min-height: 0; }
.eqstrip--edit .eqstrip__labelrow .eqstrip__val { font-size: 20px; height: auto; }
.eqstrip__input {
  width: 100%; height: 44px; box-sizing: border-box; font: inherit; font-size: 20px; font-weight: 800;
  color: #0B0C0F; background: #ffffff; border: 0; border-radius: 10px; padding: 10px 36px 10px 12px;
}
.eqstrip__sliderwrap { padding-top: 2px; }
.eqstrip__control { position: relative; height: 46px; display: flex; align-items: center; padding: 0; }
.eqstrip__pen { position: absolute; right: 12px; pointer-events: none; }
/* Edit-mode sliders keep the brand-gradient fill (Lawrence, Aug 2026 -
   the "AI effect"; the base .eqstrip__slider rule paints it), with the
   min/mid/max scale row underneath. */
.eqstrip--edit .eqstrip__slider { margin: 0; }
.eqstrip__scale { display: flex; justify-content: space-between; font-size: 10.5px; color: #6b7280; margin-top: 6px; }
.eqstrip__helper { margin: 2px 0 0; font-size: 11px; line-height: 1.45; color: #9a9da8; }
.eqstrip--edit .eqstrip__helper { margin-top: 10px; }


/* ===== Section-3 layout fixes (handoff) ===== */
/* Offwhite page behind the report so white cards read as cards. The
   pre-footer guarantee strip stays on the report too - Lawrence's call,
   overriding the stress-test brief's dedupe suggestion (Aug 2026). */
body.is-results { background: #f4f4f6; }
#view-results .section.section--light { background: transparent; }
#view-results .rsec { background: transparent; }
/* Booking card: white, radius 24, guarantee strip clipped as its top edge. */
.bookcard {
  max-width: 1180px; margin: 0 auto; background: #ffffff;
  border: 1px solid #ececf0; border-radius: 24px; overflow: hidden;
}
.bookcard .wrap { padding-top: 24px; padding-bottom: 48px; }
/* FAQ card. */
.faqcard {
  max-width: 1180px; margin: 0 auto; background: #ffffff;
  border: 1px solid #ececf0; border-radius: 24px; padding: 48px;
  box-sizing: border-box;
}
.faq__list--boxed { max-width: 720px; margin: 0 auto; }
@media (max-width: 640px) { .faqcard { padding: 28px 18px; } }
/* S1 slab opens straight onto the first card now the header is gone:
   drop the leftover header offset and pull the slab's top inset in. */
.slab--s1 { padding-top: 24px; }
.slab--s1 .donut-card { margin-top: 0; }
/* Tighter vertical rhythm at the report's tail: recap → booking → FAQ →
   closing CTA sit 20px apart (10px + 10px), like card gaps elsewhere. */
#view-results #section3 { padding-bottom: 10px; }
#view-results #booking-section, #view-results #faq-section { padding: 10px 20px; }
#view-results #closing-cta { padding-top: 10px; padding-bottom: 70px; }

/* Client logo band (logo-bar-brief.md, Sep 2026): full-bleed tinted band
   between hero and How it works. Left label with divider, 5 equal slots at
   a fixed 44px height so fade swaps never shift layout. */
.logoband { background: #f6f7f9; border-top: 1px solid #eef0f4; border-bottom: 1px solid #eef0f4; }
/* Band stays full-bleed; the CONTENT is pinned to the hero's container
   metrics (design amendment, Sep 2026) - self-contained here so the row's
   edges align with the hero heading regardless of .wrapper load order. */
.logoband__inner {
  display: flex; align-items: center; gap: 48px;
  /* 40px sides = the hero wrapper's own padding, so the label's left edge
     sits exactly under the hero heading. */
  max-width: 1200px; margin: 0 auto; padding: 36px 40px; box-sizing: border-box;
}
.logoband__label {
  font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: #9aa0ae; line-height: 1.6; margin: 0; flex: none; max-width: 150px;
  border-right: 1px solid #e0e3ea; padding-right: 40px;
}
.logoband__grid { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; }
.logobar__slot { height: 44px; display: flex; align-items: center; justify-content: center; }
.logobar__slot img {
  /* One identical box per logo (marketing: "same size") - object-fit keeps
     each mark's aspect while every logo fills the same visual footprint. */
  width: 120px; height: 30px; object-fit: contain;
  /* Dark/light source art flattened to one grey - plain grayscale left the
     light-art files (Emirates, the fixer) white-on-white and invisible. */
  filter: brightness(0) opacity(0.55);
  /* Any white/near-white baked background melts into the band tint;
     the dark marks are unaffected. */
  mix-blend-mode: multiply;
  transition: opacity .6s ease;
}
.logobar__slot img.inv {
  /* White source art (the dark ticker's files): invert renders the glyph
     dark and any baked background near-white, so no grey slabs. */
  filter: invert(1) grayscale(1) brightness(1.15) opacity(0.75);
}
.logobar__slot img.is-out { opacity: 0; }
@media (max-width: 700px) {
  .logoband__inner { flex-direction: column; gap: 20px; }
  .logoband__label { border-right: 0; padding-right: 0; max-width: none; text-align: center; }
  /* Centred flow on mobile - a part-filled last row sits in the middle
     rather than hanging left. */
  .logoband__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 20px; width: 100%; }
  .logobar__slot { height: 36px; }
  .logobar__slot img { width: 92px; height: 24px; }
}
/* No forced break around the headline's gradient phrase - it wraps
   naturally (the gradient paints across a line break fine). */
@media (prefers-reduced-motion: reduce) {
  .logobar__slot img { transition: none; }
}

/* ===== VARIANT 2 TEST (?variant=2) - every rule below is inert on the live
   default report: the blocks are hidden and .slab--v2 is never added without
   the URL flag. Wasted-spend hero, intent funnel, shrunk supporting charts,
   and a print pass (A4): sliders hidden with their value left as text, no
   page breaks inside a chart block. ===== */
.v2-waste { text-align: center; padding: 34px 28px 26px; }
.v2-waste__label { font-size: 15px; font-weight: 600; letter-spacing: .02em; color: #aab0bd; max-width: 620px; margin: 0 auto 12px; }
.v2-waste__value { font-size: clamp(44px, 7vw, 68px); font-weight: 800; color: #FF2585; line-height: 1.05; }
.v2-waste__suffix { font-size: 20px; font-weight: 600; color: #e8e9ee; }
.v2-spendrow { max-width: 560px; margin: 22px auto 0; text-align: left; }
.v2-spendrow__labelrow { font-size: 14px; color: #e8e9ee; margin-bottom: 8px; }
.v2-spendrow__labelrow b { color: #fff; }
.v2-spendrow__hint { display: block; font-size: 12px; color: #8a8d97; margin-top: 2px; }
.v2-slider { width: 100%; accent-color: #FF2585; cursor: pointer; }
.v2-waste__conv { font-size: 12.5px; color: #8a8d97; margin: 14px 0 0; }
/* Funnel redesign (design handoff 3): standard card shell + rhythm, labels
   out of the bars in a 210px/1fr grid, counts inside right-aligned, share
   percentages beside, green key row above a hairline. */
.v2-intent { padding: 40px 36px; margin-top: 36px; }
.v2-intent__sub { margin: 6px 0 0; font-size: 14px; color: #9a9da8; }
.v2-funnel { display: grid; grid-template-columns: 230px 1fr; gap: 16px 14px; align-items: center; margin-top: 22px; }
.v2-funnel__label { text-align: right; font-size: 15px; color: #d8d9de; }
.v2-funnel__barcell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.v2-funnel__bar { height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: flex-end; padding: 0 16px; box-sizing: border-box; }
.v2-funnel__bar--lost { background: #FF2585; }
.v2-funnel__bar--mid { background: #2772F9; }
.v2-funnel__bar--hot { background: #1d9a55; min-width: 96px; }
.v2-funnel__count { font-size: 15px; font-weight: 700; color: #fff; }
.v2-funnel__pct { font-size: 13px; color: #9a9da8; flex-shrink: 0; }
.v2-intent__caption { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #24262e; font-size: 14px; color: #9a9da8; display: flex; align-items: center; gap: 8px; }
.v2-intent__caption b { color: #fff; }
.v2-intent__swatch { width: 12px; height: 12px; border-radius: 4px; background: #1d9a55; flex-shrink: 0; }
@media (max-width: 560px) {
  .v2-intent { padding: 28px 20px; }
  .v2-funnel { grid-template-columns: 1fr; gap: 6px; }
  .v2-funnel__label { text-align: left; }
  .v2-funnel__barcell { margin-bottom: 10px; }
}
/* Step badges restored on the variant (Lawrence, Sep 2026 - the original
   brief dropped them but the cards lost their numbering/anchors). The one
   relocated into the team section stays badge-free: that card sits in its
   own titled, numbered section, so a "2 THE MATHS" chip there is noise. */
#team-slab-inner .stepbadge { display: none; }
/* (880px cap removed 19 Sep - with the funnel card full-width above, the
   centred narrow charts row read as a layout mistake. The charts now span
   the slab like every other card; titles keep the standard size.) */
@media print {
  .v2-slider { display: none !important; }           /* value stays as text */
  .v2-spendrow__hint { display: none !important; }
  .dcard, .v2-waste, .v2-intent { break-inside: avoid; page-break-inside: avoid; }
  .slab, .dcard, .v2-bar__fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Variant 2 hero bullets (inert on the live default - only rendered by the
   waste branch). Left-aligned inside the centred card, compact. */
.v2-herolist { display: inline-block; text-align: left; margin: 10px auto 0; padding-left: 18px; }
.v2-herolist li { margin: 4px 0; }
/* Design handoff (Sep 2026) - v2 waste-hero refinements, all gated behind
   .rcard--v2 / .rgauge--v2arc which only the variant's waste branch adds. */
/* (Single-arc dial swap reverted 19 Sep - the original speedometer stays.) */
/* Reference card width (review9): the live hero's 560px read too wide
   once the evidence strip docked - the variant matches the design's 480px. */
.rcard--v2 { max-width: 480px; }
.rcard--v2 .band-pill { border-width: 1.5px; border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 700; }
.rcard--v2 .rcard__money-label { text-wrap: balance; }
.rcard--v2 .v2-herolist { max-width: 400px; font-size: 14px; color: #8a5049; }
.rcard--v2 .v2-herolist b { color: #D93A2B; font-weight: 700; }
/* Design handoff 2 (Sep 2026) - ad-spend slider block, v2 only. */
.v2-waste__label { color: #fff; font-weight: 700; font-size: 20px; text-wrap: balance; }
.v2-spendrow__labelrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px 16px; flex-wrap: wrap; }
.v2-spendrow__spend { font-size: 17px; color: #fff; }
.v2-spendrow__spend b { font-size: 19px; color: #fff; }
.v2-spendrow__hint { display: inline; font-size: 13px; color: #9a9da8; margin-top: 0; }
.v2-sliderwrap { position: relative; margin-top: 12px; }
/* Drag bubble: value above the thumb while dragging only. */
.v2-bubble { position: absolute; bottom: calc(100% + 10px); transform: translateX(-50%); background: #ffffff; color: #131419; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.12s; z-index: 3; }
.v2-bubble::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #ffffff; }
.v2-bubble--on { opacity: 1; }
.v2-ticks { position: absolute; inset: 0; pointer-events: none; }
.v2-tick { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 2px; height: 18px; background: #3a3d47; }
.v2-slider { position: relative; display: block; width: 100%; height: 6px; border-radius: 999px;
  -webkit-appearance: none; appearance: none; background: #2c2e36; outline: none; }
.v2-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px;
  border-radius: 50%; background: #FF2585; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(255,37,133,0.5); cursor: pointer; }
.v2-slider::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #FF2585;
  border: 3px solid #fff; box-shadow: 0 2px 10px rgba(255,37,133,0.5); cursor: pointer; }
.v2-scale { position: relative; height: 16px; margin-top: 8px; font-size: 12px; color: #6b6e78; }
.v2-scale__end { position: absolute; left: 0; }
.v2-scale__end--max { left: auto; right: 0; }
.v2-scale__mid { position: absolute; transform: translateX(-50%); }
.v2-waste__conv b { color: #d8d9de; font-weight: 700; }
.v2-waste__conv { color: #9a9da8; }
/* Narrow screens: the last mid label (4th child - min-end, three mids,
   max-end) collides with the right end label. */
@media (max-width: 480px) { .v2-scale > :nth-child(4) { display: none; } }
/* CPC adjuster (v2 only): Adjust/Hide link + collapsed slider row. */
.v2-cpc-toggle { color: #FF2585; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.v2-cpcrow { max-width: 560px; margin: 14px auto 0; text-align: left; }
@media print { .v2-cpc-toggle, .v2-cpcrow { display: none !important; } }
/* Team-only total-cost box (variant=2 & team=1). */
.v2-totalcost { margin-top: 36px; padding: 36px; border: 1px solid #FF2585; }
.v2-totalcost .dcard__title { text-align: center; font-size: 20px; font-weight: 700; }
/* Visual equation (review21, design 1a): echoes the section-1 formula card. */
.v2-tc-eq { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.v2-tc-tile { flex: 1; min-width: 150px; border: 1px solid #24262e; border-radius: 14px; padding: 18px 22px; text-align: center; }
.v2-tc-tile__label { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #9a9da8; font-weight: 600; }
.v2-tc-tile__val { font-size: 26px; font-weight: 800; color: #ffffff; margin-top: 6px; }
.v2-tc-op { font-size: 24px; font-weight: 700; color: #6b6e78; }
.v2-tc-tile--total { flex: 1.2; min-width: 170px; background: rgba(255,37,133,0.08); border: 1.5px solid #FF2585; }
.v2-tc-tile--total .v2-tc-tile__label { color: #ff7ab5; font-weight: 700; }
.v2-tc-tile--total .v2-tc-tile__val { color: #FF2585; font-size: 30px; }
.v2-tc-tile__annual { font-size: 13px; color: #ff7ab5; margin-top: 4px; }
.v2-totalcost__sub { font-size: 13px; color: #9a9da8; margin: 18px auto 0; line-height: 1.7; text-align: center; max-width: 520px; }
.v2-intent__foot { margin: 10px 0 0; font-size: 12.5px; color: #7d818c; line-height: 1.6; }