/* ==========================================================================
   v2 CUTOVER — WAVE 1 · CORE MARKETING
   /, /pricing, /landing

   Loaded LAST, after design-system.css and after each page's own surface
   sheet, and scoped to `body.v2-core` so it can only reach the three routes
   that opt in. Nothing here re-derives the shared layer: every colour is a
   --ds-* token from the V2 FOUNDATION block, every muted foreground is a solid
   --ds-dim-on-* picked for its ground, and no rule shrinks a tap target.

   What this sheet is for, in order of how much it changes:

   1. QUIETER CHAPTERS. The homepage flooded six saturated full-bleed grounds
      between the hero and the footer. Two of them were doing no work: lime
      marquee -> emerald problem chapter is the same hue family twice in
      400px, and the violet use-case chapter was the loudest colour on the
      page attached to the least specific claim. Both are re-grounded to the
      reading ground. Emerald and lime still appear — in the hero frame, the
      marquee seam, the trust band and the closing ask — where they mean
      something. Every re-ground sets the whole --bg/--fg/--fg-dim triple,
      because a chapter that changes ground and keeps its foreground is the
      exact cascade trap that shipped cream-on-coral at 2.46:1.

   2. ONE CARD LANGUAGE. Six different card treatments (2px ink stickers,
      hard 5px offset shadows, a mint offset shadow, four per-plan pastel
      gradients) collapse to one: opaque ground, 16px radius, soft elevation.
      Border = interactive, so a card that is not a control loses its keyline
      and a card that IS a link keeps one.

   3. ONE HEADLINE SCALE. Every chapter shouted at 61-107px, so nothing was
      emphasis. The hero keeps its display size; chapter heads step down.

   4. ONE ACTION PER MOMENT. The hero and the closing block each carried
      three button-weight calls, and the pricing row had four identical ones.
      `.primary-action` itself is never restyled here — it is the foundation's
      button and keeps its contract; what changes is how many things next to
      it are allowed to look like it.

   5. NO ALPHA FOR TEXT. `opacity` and `rgba()` foregrounds inherited from the
      old sheets are replaced with the solid --ds-dim-on-* for the ground the
      run actually sits on. /landing was shipping five sub-AA runs and a
      1.60:1 cream-on-emerald label from exactly this.

   RTL: logical properties only. These classes are reused by nine localized
   homepages, Arabic included.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · Form. 12px control radii; cards one step softer at 16px.
   -------------------------------------------------------------------------- */
body.v2-core {
  --v2-card-radius: var(--ds-radius-md);
  --v2-plate-on-dark: rgba(244, 240, 226, 0.07);
}

/* --------------------------------------------------------------------------
   1 · Chapter grounds (homepage)
   -------------------------------------------------------------------------- */

/* The problem is stated in the reader's own light, not shouted off emerald.
   The three coral/violet/sun chips beside it keep all of the colour, and they
   are already covered by the ACCENT PLATE RESET in styles.css. */
body.v2-core .problem-section {
  --bg: var(--ds-cream);
  --fg: var(--ds-ink);
  --fg-dim: var(--ds-dim-on-light);
}

/* The use-case chapter carried a full-bleed violet for three text cards.
   It becomes the second reading ground so the cards can be the figure. */
body.v2-core .use-case-section {
  --bg: var(--ds-cream-2);
  --fg: var(--ds-ink);
  --fg-dim: var(--ds-dim-on-light);
}

/* The chapter tag needs no help: `.chapter-tag span` already paints itself
   `color: var(--bg)` on `background: var(--fg)`, so re-declaring the triple
   above re-inverts it correctly on the new ground. Overriding its colour here
   painted ink on ink — left to the shared rule on purpose.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2 · One card language
   --------------------------------------------------------------------------
   Cards on a LIGHT ground: opaque, 16px, soft elevation, no keyline.
   `border: 0` is stated rather than `border-color: transparent` so the card
   stops reserving 2px of box it no longer paints. */
/* .insight-card is deliberately absent: it lives in the report workspace,
   which is the app surface and belongs to the app wave's sheet, not to core
   marketing. It was in this list until a probe showed the workspace's own
   rules winning anyway — the right owner is the one whose sheet can reach it. */
body.v2-core .outcome-card,
body.v2-core .evidence-card,
body.v2-core .problem-chip,
body.v2-core .problem-spark,
body.v2-core .price-card,
body.v2-core .credit-pack-card {
  border: 0;
  border-radius: var(--v2-card-radius);
  box-shadow: var(--ds-lift-1);
}

/* A card that is a link is a control, so it keeps a keyline — that is the
   whole of the border rule, working in both directions. */
body.v2-core a.resource-card {
  border: 1px solid var(--ds-ink);
  border-radius: var(--v2-card-radius);
  box-shadow: var(--ds-lift-1);
}

/* The Creator card is the recommended plan and carries a lime ground of its
   own; it is excluded from the plate below so the plate does not paint over
   the recommendation, but it loses its keyline like every other card. */
body.v2-core .homepage-plan-card--creator {
  border: 0;
  border-radius: var(--v2-card-radius);
}

/* Cards on a DARK ground get separation from a lifted plate, not a rule:
   a shadow is invisible on ink and a keyline would read as interactive. */
body.v2-core .homepage-plan-card:not(.homepage-plan-card--creator),
body.v2-core .limit-card,
body.v2-core .trust-section .trust-boundary {
  border: 0;
  border-radius: var(--v2-card-radius);
  background: var(--v2-plate-on-dark);
  box-shadow: none;
}

/* Hover is a lift, never a colour swap: swapping a cream card to lime on
   hover moved three paragraphs of body copy onto a different ground mid
   gesture, and lime is reserved for small highlights. */
body.v2-core .outcome-card:hover,
body.v2-core a.resource-card:hover {
  background: var(--ds-cream);
  box-shadow: var(--ds-lift-2);
}

/* --------------------------------------------------------------------------
   3 · Pricing: one plan-card definition instead of four pastel gradients
   --------------------------------------------------------------------------
   The four plans were painted mint / sky / lilac / deep-green with per-card
   gradients, hard offset shadows and three different border colours, layered
   over sixteen later overrides of the same selector. One white plate, one
   featured plate, and the plan is told by its name and its price. */
body.v2-core[data-scroll-theme="pricing"] .price-card,
body.v2-core[data-scroll-theme="pricing"] .price-card--free,
body.v2-core[data-scroll-theme="pricing"] .price-card--creator,
body.v2-core[data-scroll-theme="pricing"] .price-card--pro,
body.v2-core[data-scroll-theme="pricing"] .price-card--plus {
  border: 0;
  border-radius: var(--v2-card-radius);
  background: #ffffff;
  color: var(--ds-ink);
  box-shadow: var(--ds-lift-1);
  transform: none;
}

/* The recommended plan is told by depth, by its badge and by the one emerald
   CTA in the row — not by being the only card painted a different hue. */
body.v2-core[data-scroll-theme="pricing"] .price-card.is-promo-featured,
body.v2-core[data-scroll-theme="pricing"] .price-card--creator.is-promo-featured {
  background: #ffffff;
  box-shadow: var(--ds-lift-2);
}

body.v2-core[data-scroll-theme="pricing"] .price-card:hover,
body.v2-core[data-scroll-theme="pricing"] .price-card--plus:hover,
body.v2-core[data-scroll-theme="pricing"] .price-card--creator.is-promo-featured:hover {
  transform: translateY(-4px);
  box-shadow: var(--ds-lift-2);
}

/* The dark "Plus" card was the only inverted plate in the row, which read as
   the recommendation while the copy recommends Creator. It joins the row. */
body.v2-core[data-scroll-theme="pricing"] .price-card--plus h3,
body.v2-core[data-scroll-theme="pricing"] .price-card--plus strong,
body.v2-core[data-scroll-theme="pricing"] .price-card--plus .plan-price,
body.v2-core[data-scroll-theme="pricing"] .price-card--plus .plan-price strong {
  color: var(--ds-ink);
}

body.v2-core[data-scroll-theme="pricing"] .price-card--plus p,
body.v2-core[data-scroll-theme="pricing"] .price-card--plus li,
body.v2-core[data-scroll-theme="pricing"] .price-card--plus small,
body.v2-core[data-scroll-theme="pricing"] .price-card--plus .plan-fit,
body.v2-core[data-scroll-theme="pricing"] .price-card--plus .plan-price span,
body.v2-core[data-scroll-theme="pricing"] .price-card.featured .plan-fit,
body.v2-core[data-scroll-theme="pricing"] .price-card.featured p,
body.v2-core[data-scroll-theme="pricing"] .price-card.featured li,
body.v2-core[data-scroll-theme="pricing"] .price-card.featured .plan-price span {
  color: var(--ds-dim-on-light);
}

/* The credit packs wore a 6px mint offset shadow, the only sticker left on
   the page once the plan row stopped being one. */
body.v2-core .credit-pack-card {
  background: #ffffff;
}

/* The plan and pack CTAs each carried a hard 4px offset shadow in that card's
   own tint — mint, sun, sky, lilac — which is the sticker treatment surviving
   inside the button after the card stopped wearing it. Colour, fill and hover
   are the foundation's and are untouched; this drops the decoration and lifts
   the radius to the 12px control standard from 8px. */
body.v2-core[data-scroll-theme="pricing"] .price-card .primary-action,
body.v2-core[data-scroll-theme="pricing"] .price-card .secondary-action,
body.v2-core[data-scroll-theme="pricing"] .price-card--free .secondary-action,
body.v2-core[data-scroll-theme="pricing"] .price-card--creator .primary-action,
body.v2-core[data-scroll-theme="pricing"] .price-card--plus .secondary-action,
body.v2-core[data-scroll-theme="pricing"] .price-card--pro .secondary-action,
body.v2-core[data-scroll-theme="pricing"] .credit-pack-card .primary-action,
body.v2-core[data-scroll-theme="pricing"] .credit-pack-card .secondary-action,
body.v2-core[data-scroll-theme="pricing"] .credit-pack-card.featured .secondary-action {
  box-shadow: none;
  border-radius: var(--ds-radius-control);
}

/* The same 8px sat on the closing pair at the foot of the page. Scoped to
   <main> so the header's deliberate pill chrome is untouched. */
body.v2-core[data-scroll-theme="pricing"] main .primary-action,
body.v2-core[data-scroll-theme="pricing"] main .secondary-action {
  border-radius: var(--ds-radius-control);
}

body.v2-core .credit-pack-card.featured {
  box-shadow: var(--ds-lift-2);
}

/* All four plan CTAs were painted the same ink fill, so the row had four
   equal calls and the recommendation was carried only by a badge. The Creator
   card's `.primary-action` is given back the foundation's own treatment —
   emerald ground, ink label (7.37:1), hover LIFTING to #1cc582 (8.46:1) —
   rather than a new colour invented here. The other three stay as they are.
   Element-qualified so it cannot be reached by colour inheritance. */
body.v2-core[data-scroll-theme="pricing"] .price-card--creator button.primary-action {
  background: var(--ds-green);
  color: var(--ds-on-green);
  border-color: var(--ds-green);
}

body.v2-core[data-scroll-theme="pricing"] .price-card--creator button.primary-action:hover {
  background: var(--ds-green-hover);
  color: var(--ds-on-green);
  border-color: var(--ds-green-hover);
}

/* --------------------------------------------------------------------------
   4 · One headline scale
   --------------------------------------------------------------------------
   The hero h1 is the page's one display moment. Chapter heads step down to a
   size that still leads a section without competing with it. */
body.v2-core .problem-section > h2,
body.v2-core .gallery-section h2,
body.v2-core .workflow-section h2,
body.v2-core .use-case-section h2,
body.v2-core .pricing-teaser h2,
body.v2-core .trust-section h2,
body.v2-core .resources-section h2,
body.v2-core .faq-section h2,
body.v2-core .final-cta-section h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

/* /landing set every chapter h2 LARGER than its own h1 (107.5px vs 94.7px),
   so the page peaked eight times after the hero and the hero was not the
   loudest thing on it. Chapter heads step below the display. */
body.v2-landing main h2.display {
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  line-height: 0.98;
}

/* Pricing ran the opposite failure: a 64px hero over 25px and 21px section
   heads, so the page had no middle. */
body.v2-core[data-scroll-theme="pricing"] .credit-pack-section h2,
body.v2-core[data-scroll-theme="pricing"] .seo-faq h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

/* --------------------------------------------------------------------------
   5 · One action per moment
   --------------------------------------------------------------------------
   The hero carried a filled submit, a bordered sample button and a priced
   bridge link. Only the submit stays button-weight; the sample becomes the
   text link it always was semantically. It keeps a 44px target because it is
   standalone, and it keeps its keyline off because it is no longer a button.
   Underline is the affordance instead. */
body.v2-core .sample-peek-cta,
body.v2-core .proof-sample-action {
  border: 0;
  background: none;
  box-shadow: none;
  padding-inline: 0;
  min-block-size: var(--ds-tap);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* Each of these takes the foreground of the PLATE it sits on, named, not the
   chapter's inherited --fg. The sample link lives inside the cream command
   card while the hero chapter around it is ink: inheriting --fg painted cream
   on cream at 1.05:1 — the accent-plate trap, one level in. */
body.v2-core .sample-peek-cta {
  color: var(--ds-ink);
}

/* The proof link sits directly on the ink gallery chapter. */
body.v2-core .gallery-section .proof-sample-action {
  color: var(--ds-cream);
}

/* The closing block had a submit, a filled anchor and a bordered anchor
   inside 200px of each other. `.primary-action` is the foundation's button and
   is deliberately NOT restyled here — the bordered third call is what becomes
   text. The remaining duplicate primary is a template question, not a CSS one,
   and is reported rather than quietly changed. */
body.v2-core .final-cta-actions .secondary-action {
  border: 0;
  background: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  min-block-size: var(--ds-tap);
  display: inline-flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   6 · No alpha for text
   --------------------------------------------------------------------------
   Every run below was a composited foreground inherited from the old sheets.
   Each is replaced with the solid dim for the ground it actually sits on.
   `opacity` is neutralised rather than tuned: a composited 0.58 is not a
   colour anyone measured. */
/* Cards on the light reading ground. */
body.v2-core .resource-card p,
body.v2-core .outcome-card p,
body.v2-core .price-card p {
  color: var(--ds-dim-on-light);
}

/* The homepage plan row sits on the ink pricing chapter. Only the feature
   list dims: `.homepage-plan-price` is also a <p>, and dimming a price is how
   a plan row stops being scannable. */
body.v2-core .homepage-plan-card:not(.homepage-plan-card--creator) li {
  color: var(--ds-dim-on-ink);
}

/* The trust chapter is deep green; cream on it is 8.9:1 and its dim is the
   only legal muted foreground there. */
body.v2-core .limit-card span,
body.v2-core .trust-section .trust-boundary,
body.v2-core .trust-section .trust-boundary p {
  color: var(--ds-dim-on-deep);
}

/* Inside an accent chip the dim is the chip's own, set by the ACCENT PLATE
   RESET, so this only has to stop the opacity from compositing over it. */
body.v2-core .problem-chip em {
  opacity: 1;
  color: var(--fg-dim, var(--ds-dim-on-light));
}

/* The spark plate is cream on every chapter ground it can sit on. */
body.v2-core .problem-spark small {
  opacity: 1;
  color: var(--ds-dim-on-light);
}

/* The marketing cards carried their muted rows as `opacity` on the element
   plus an rgba() colour underneath — two composites stacked. Neither is a
   colour anyone measured, and `opacity` is invisible to a contrast sweep that
   reads `color`. Each row below takes the solid dim for the plate it sits on.

   The accent cards read `--fg-dim`, which the ACCENT PLATE RESET in styles.css
   already sets per accent; the cream plates name --ds-dim-on-light, because
   inheriting --fg-dim there would pick up the ink chapter around them. */
body.v2-core .evidence-card dt,
body.v2-core .evidence-card .evidence-subtle,
body.v2-core .evidence-card .evidence-donut-label span {
  opacity: 1;
  color: var(--fg-dim);
}

/* NOT the segmented D/W/M/Y control inside the violet card. It was in the
   list above for one run, and the foundation's contrast sweep caught it: each
   of those buttons paints its OWN ground — an ink pill when pressed, a lighter
   violet tint when not — so the card's --fg-dim landed at 4.01:1 on the tint
   and 1.19:1 on the pill. The trap does not stop at the plate; it repeats at
   every nested ground, and a control that already sets its own pair is left
   alone. */

body.v2-core .proof-report dt,
body.v2-core .proof-report .proof-report-foot,
body.v2-core .proof-row b,
body.v2-core .proof-row .proof-row-cap,
body.v2-core .evidence-card--cream dt {
  opacity: 1;
  color: var(--ds-dim-on-light);
}

body.v2-core .homepage-plan-card .homepage-plan-price small {
  opacity: 1;
  color: var(--ds-dim-on-ink);
}

body.v2-core .homepage-plan-card--creator .homepage-plan-price small {
  color: var(--ds-dim-on-lime);
}

/* --------------------------------------------------------------------------
   7 · /landing repairs
   --------------------------------------------------------------------------
   /landing is noindex concept chrome, but it is a live route and it was the
   only page in this wave actually failing the foundation invariants: five
   sub-AA runs, a 1.60:1 cream-on-emerald medallion label, and every nav and
   footer link under 44px. landing.css is not this agent's file, so the
   repairs live here, scoped to the page. */

/* Medallion labels were cream at 60% over five different accent grounds
   (1.20:1 on sun, 1.60:1 on emerald). Each ground takes its own solid ink. */
body.v2-landing .medallion b {
  opacity: 1;
  color: var(--ds-ink);
}

body.v2-landing .medallion.m-green b {
  color: var(--ds-dim-on-green);
}

body.v2-landing .medallion.m-violet b {
  color: var(--ds-dim-on-violet);
}

body.v2-landing .medallion.m-coral b {
  color: var(--ds-dim-on-coral);
}

body.v2-landing .medallion.m-sun b {
  color: var(--ds-dim-on-sun);
}

/* Sky is a marketing accent with no dim token in the foundation, and ink on
   it measures 8.0:1, so the plain ink is correct rather than a new colour. */
body.v2-landing .medallion.m-sky b {
  color: var(--ds-ink);
}

/* Outcome copy on the violet chapter was rgba(18,16,58,.66) = 3.80:1. */
body.v2-landing .chapter--violet p,
body.v2-landing .chapter--violet li,
body.v2-landing .chapter--violet small {
  color: var(--ds-dim-on-violet);
}

/* The "@" field prefix appears twice, on two different grounds. Each takes
   the dim for the ground it is actually painted on — one shared rule was
   4.07:1 on the lime one and 1.32:1 on the ink one. */
body.v2-landing .at {
  opacity: 1;
  color: var(--ds-dim-on-ink);
}

body.v2-landing .chapter--lime .at,
body.v2-landing .end .at {
  color: var(--ds-dim-on-lime);
}

/* Footer copy was cream at 45% on ink = 4.11:1. */
body.v2-landing .foot-bar p,
body.v2-landing .site-footer p {
  color: var(--ds-dim-on-ink);
  opacity: 1;
}

/* The violet outcome cards' footer line and the lime closing fineprint were
   the last two composites on the page. */
body.v2-landing .chapter--violet .tile > b,
body.v2-landing .chapter--violet article > b {
  opacity: 1;
  color: var(--ds-dim-on-violet);
}

body.v2-landing .end .fineprint,
body.v2-landing .chapter--lime .fineprint {
  opacity: 1;
  color: var(--ds-dim-on-lime);
}

/* --------------------------------------------------------------------------
   8 · Tap-target floors
   --------------------------------------------------------------------------
   44px is a FLOOR. These set `min-block-size` only, never a height, so any
   page rule asking for a bigger target still wins, and nothing here can
   shrink one. Inline links inside running prose are deliberately untouched:
   WCAG 2.2 exempts them and padding them out breaks the line box.

   /landing never picked up the shared footer's own sizing, so its nav pill
   and every footer link were rendering at 21-37px. */
body.v2-landing .nav-pill a,
body.v2-landing .nav-mark,
body.v2-landing .foot-bar nav a,
body.v2-landing .site-footer nav a,
body.v2-landing .site-footer-links a,
body.v2-landing .segmented button,
body.v2-landing .hero-form input {
  min-block-size: var(--ds-tap);
}

/* Only the link-shaped ones need the flex box to centre their label; the
   input and the segmented buttons already centre their own. */
body.v2-landing .nav-pill a,
body.v2-landing .nav-mark,
body.v2-landing .foot-bar nav a,
body.v2-landing .site-footer nav a,
body.v2-landing .site-footer-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.v2-landing .nav-mark {
  min-inline-size: var(--ds-tap);
}

/* --------------------------------------------------------------------------
   9 · Motion
   --------------------------------------------------------------------------
   Everything this sheet adds that moves, stops. The foundation already
   neutralises html { scroll-behavior } globally.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.v2-core .outcome-card,
  body.v2-core a.resource-card,
  body.v2-core .price-card,
  body.v2-core .problem-chip {
    transition: none !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   10 · /pricing — above the fold
   --------------------------------------------------------------------------
   THE CORNER ARTEFACT. The page frame is `body::after`: a fixed rounded
   window inset by --ds-frame-w with a 900px spread shadow painting the band
   outside it, corner radius --ds-radius-xl (34px). The hero plate was the one
   element on the page that ran INTO that window — inline-inset 8px at 320px,
   which is exactly the window edge, wearing a 14px corner of its own (22px
   under 620px). A 14px corner inside a 34px window leaves a wedge of page
   ground in every top corner, and at 1280px main's 25.6px gutter opened that
   wedge into a full-height stripe down both sides while the top edge stayed
   flush. Two radii, one shape, never agreeing.

   The frame is KEPT. It is a global device shared with the homepage and
   driven by body[data-scroll-theme]; deleting it on this route alone would
   widen the very home/pricing inconsistency the same defect report is about.
   What changes is that the hero stops being a special case: it becomes a
   plate with clear air on all four sides and ONE radius on all four corners,
   like every other plate on the page. Two radii that never meet cannot
   disagree, at any width, and nothing here depends on the frame's radius.

   THE HEADER OVERLAP. The header layer is not this page's to size, so the
   page reserves the header's MEASURED viewport bottom (--v2-header-bottom,
   published by the script in the template, 0 when the header is in flow and
   reserves its own space) plus a gap. The fallback below clears a fixed
   header at every current width, so the no-JS render is clear of it too.

   COLOUR. Two runs above the fold set a foreground or a ground with alpha:
   cream at .78 on the deep plate (6.52:1, but not a colour anyone measured)
   and a cream-at-.16 chip fill. One takes the foundation's solid dim for this
   ground; the other loses a plate it was not earning. The jump link's hover
   painted cream on emerald (2.26:1) and now lifts the lime plate instead (ink
   on #1cc582, 8.46:1), and its focus ring was --ds-focus deep green ON deep
   green — 1.00:1, a ring that did not exist.
   -------------------------------------------------------------------------- */
body.v2-core[data-scroll-theme="pricing"] {
  /* Clear air between the frame band and any plate, at every width. <main> is
     `width: min(100% - 2*--site-pad, --max)` centred, and --site-pad drops to
     8px below 560px — exactly --ds-frame-w — so at 320/390 the plates were
     landing ON the band. This adds back only the shortfall, never a negative
     value, so it can never widen a box past the viewport. */
  --v2-frame-clearance: 10px;
  --v2-plate-inset: max(0px, calc(var(--ds-frame-w) + var(--v2-frame-clearance) - var(--site-pad)));
  /* Reserved header height. The script in the template publishes the header's
     measured viewport BOTTOM when the header is out of flow and can overlap,
     and 0 when it is static or sticky and reserves its own space. The
     fallback below clears a fixed header at every current width, so the no-JS
     render is still clear of it. */
  --v2-hero-top: calc(var(--v2-header-bottom, 84px) + clamp(18px, 2.2vw, 30px));
}

/* Every plate on the page takes the same inset from the band, so the frame
   reads as one object with one margin rather than a shape each section
   negotiates separately. */
body.v2-core[data-scroll-theme="pricing"] .page-main > * {
  margin-inline: var(--v2-plate-inset);
}

/* The hero plate had a 14px corner (22px under 620px) sitting inside the
   frame's 34px window with no clearance, which is what put a wedge of page
   ground in every top corner and a stripe down both sides at 1280px. It is
   now a card like every other plate: clear of the band on all four sides, one
   radius on all four corners, so there are no two radii to disagree. Border
   removed — border means interactive, and this is a ground. */
body.v2-core[data-scroll-theme="pricing"] .pricing-section--first {
  margin-block-start: var(--v2-hero-top);
  border: 0;
  border-radius: var(--ds-radius-lg);
  box-shadow: none;
}

body.v2-core[data-scroll-theme="pricing"] .pricing-hero-shell {
  align-items: start;
}

/* A `1fr` track carries an automatic minimum of the item's min-content, so at
   320px the hero column resolved 8px WIDER than the plate and `overflow:
   hidden` clipped the headline, the body copy and the credit card. Both
   tracks get an explicit 0 minimum. */
body.v2-core[data-scroll-theme="pricing"] .pricing-hero-shell {
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
}

body.v2-core[data-scroll-theme="pricing"] .pricing-hero-shell > * {
  min-inline-size: 0;
}

@media (max-width: 860px) {
  body.v2-core[data-scroll-theme="pricing"] .pricing-hero-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Rhythm, stated rather than left to `align-content` distributing slack
   against whichever column happens to be taller. At 1280px that slack was
   240px of empty plate between the headline and the sentence under it. */
body.v2-core[data-scroll-theme="pricing"] .pricing-hero-shell .section-heading {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0;
}

body.v2-core[data-scroll-theme="pricing"] .pricing-hero-shell .eyebrow {
  margin-block: 0;
}

body.v2-core[data-scroll-theme="pricing"] .pricing-hero-shell h1 {
  margin-block: clamp(14px, 1.6vw, 20px) 0;
  max-width: 18ch;
}

body.v2-core[data-scroll-theme="pricing"] .pricing-hero-shell .section-heading > p:not(.eyebrow) {
  margin-block: clamp(14px, 1.6vw, 20px) 0;
  color: var(--ds-dim-on-deep);
}

/* The signals were three grey pills on the plate. A pill is a plate, and a
   plate on a plate needs a measured ground; this one was cream at .16 over
   the deep green, which is not a colour. They are labels, not controls, so
   they lose the plate and read straight off the hero ground at 9.63:1. */
body.v2-core[data-scroll-theme="pricing"] .pricing-hero-signals {
  gap: 8px 22px;
  margin-block: clamp(18px, 2vw, 26px) 0;
}

body.v2-core[data-scroll-theme="pricing"] .pricing-hero-signals span {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ds-cream);
}

body.v2-core[data-scroll-theme="pricing"] .pricing-jump-link {
  margin-block: clamp(20px, 2.4vw, 30px) 0;
}

/* --ds-focus is deep green, and the ground this control sits on IS deep
   green: the ring measured 1.00:1 — a focus ring that does not exist. The
   foundation's dark-plate ring is lime, which measures 8.51:1 here. */
body.v2-core[data-scroll-theme="pricing"] .pricing-section--first .pricing-jump-link:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus-light);
  outline-offset: var(--ds-focus-offset);
}

/* Cream on emerald is 2.26:1. Hover lifts the lime plate instead. */
body.v2-core[data-scroll-theme="pricing"] .pricing-jump-link:hover span {
  color: var(--ds-ink);
  background: var(--ds-green-hover);
}

/* The credit key wore an 8px hard offset in emerald — the last sticker on the
   page — and its ink head bled square corners past the card's radius. */
body.v2-core[data-scroll-theme="pricing"] .pricing-credit-key {
  align-self: start;
  overflow: hidden;
  /* One 0-minimum column. The card is a grid, and its items carried an
     automatic minimum wide enough to push the ink head 27px past the card's
     own right edge at 320px, where `overflow: hidden` then sliced the lime
     label and the words "research credit" in half. */
  grid-template-columns: minmax(0, 1fr);
  margin-block: 0 clamp(26px, 3.2vw, 44px);
  margin-inline: 0;
  border: 0;
  border-radius: var(--v2-card-radius);
  box-shadow: var(--ds-lift-2);
}

/* Physical margin-left/right in the sheet below; restated logically so the
   card is not lopsided in Arabic. */
body.v2-core[data-scroll-theme="pricing"] .pricing-credit-key > .pricing-credit-equation,
body.v2-core[data-scroll-theme="pricing"] .pricing-credit-key > p,
body.v2-core[data-scroll-theme="pricing"] .pricing-credit-key > .pricing-credit-example {
  margin-inline: 22px;
}

/* The two label columns take a 0 minimum so they wrap instead of widening the
   card. */
body.v2-core[data-scroll-theme="pricing"] .pricing-credit-equation {
  grid-template-columns: auto minmax(0, auto) auto auto minmax(0, 1fr);
}

/* Stacked, the shell's own row gap already separates the credit key from the
   copy above it; the card's extra top margin made that seam 40px wider than
   any other seam in the hero. */
@media (max-width: 860px) {
  body.v2-core[data-scroll-theme="pricing"] .pricing-credit-key {
    margin-block-start: 0;
  }
}

/* --------------------------------------------------------------------------
   11 · /pricing — the Pay-as-you-go column
   --------------------------------------------------------------------------
   The credit packs used to live in their own section below the fold, styled as
   three more plan-shaped cards. They are now the fourth offer in the plan row
   (owner decision D11), which creates one real hazard: a $29 pack sits in the
   same band as the $29/mo Plus plan, and a $499 pack sits under the $99/mo Pro
   plan. Adjacent equal numbers that mean different things is exactly how a
   pricing table gets misread, so this column is built to be a different KIND
   of object at a glance, not a fifth variant of the same one:

     · GROUND. The four plan plates are #ffffff with --ds-lift-1. This column
       is --ds-cream-2 with no elevation: a sheet the plates are laid on, not
       another plate. That is the Two-Plate rule doing the separation, and it
       survives at 320px where the columns stack and only colour is left to
       tell them apart.
     · ORDER. Every row reads CREDITS first, price second. The eye lands on
       "5,000 credits", not on "$29".
     · TYPE. Prices here are mono and one step down from the plan prices, which
       are display-weight. No "/mo" appears anywhere in the column.
     · SHAPE. The plan columns end in one CTA. This column has no trailing CTA
       at all — each ledger ROW is the control. So the row never terminates in
       something that looks like a plan button.

   BORDER = INTERACTIVE holds throughout: the card itself is a ground and takes
   none; each .payg-pack row is a real button and therefore keeps a keyline.
   The rows are the only bordered things in the column.

   CONTRAST, measured on the resolved painted ground, not the inherited one:
   the card ground is #e7e1cd (--ds-cream-2); --ds-dim-on-light (#4e564f)
   measures 5.80:1 there and ink measures 14.51:1. On hover the row fills
   #ffffff, where the same dim is 7.59:1. Both states clear AA for body text
   at every size used here.

   LOGICAL PROPERTIES ONLY — this column ships to the Arabic pricing page.
   -------------------------------------------------------------------------- */

/* The plan row grows a fifth track. The pay-as-you-go column is given a little
   more width than a plan column because it carries four priced rows rather
   than one; `minmax(0, ...)` on every track keeps the automatic min-content
   minimum out of the way, which is what stopped the row overflowing at the
   narrow end of this range. */
@media (min-width: 1181px) {
  body.v2-core[data-scroll-theme="pricing"] .pricing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.18fr);
    align-items: stretch;
  }
}

/* Below 1181px styles.css drops the row to two columns and then to one. Two
   columns leaves this card alone on the last row, so it spans the full width
   there and lays its four packs out horizontally instead — the same content,
   read across instead of down. */
@media (max-width: 1180px) {
  body.v2-core[data-scroll-theme="pricing"] .payg-card {
    grid-column: 1 / -1;
  }
}

body.v2-core[data-scroll-theme="pricing"] .payg-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: clamp(14px, 1.4vw, 18px);
  min-inline-size: 0;
  padding: clamp(22px, 2vw, 30px);
  /* No keyline: this is a ground, not a control. No lift: the plan plates are
     lifted and this sheet is what they sit against. */
  border: 0;
  border-radius: calc(var(--v2-card-radius) + 4px);
  background: var(--ds-cream-2);
  color: var(--ds-ink);
  box-shadow: none;
}

body.v2-core[data-scroll-theme="pricing"] .payg-head {
  display: grid;
  justify-items: start;
  gap: 10px;
}

/* THE ALPHA TRAP, one level in. styles.css carries a blanket
   `.pricing-grid span { color: rgba(14, 17, 16, 0.68) }` for "faint captions on
   near-white cards" — written when everything inside this grid was a white
   plan plate. Every span this column adds is inside .pricing-grid, so that
   rule reached all four of them, and it beats the .ds-chip kit's own
   `color: var(--ds-chip-ink, ...)` on specificity. It painted the chip ink at
   68% ON ink: an unreadable label, and a composited foreground a contrast
   sweep that reads `color` would score as passing.
   Each span below therefore names the SOLID colour for the ground it is
   actually painted on. This is the same no-alpha-for-text rule as section 6,
   applied to a new element rather than a new page. */
body.v2-core[data-scroll-theme="pricing"] .payg-chip {
  display: inline-block;
  justify-self: start;
  padding: 5px 10px;
  border: 0;
  border-radius: 2px;
  background: var(--ds-ink);
  /* --ds-cream on --ds-ink: 15.2:1. */
  color: var(--ds-cream);
  font-family: var(--ds-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* #creditPackTitle is a cross-page anchor (/mcp, the MCP out-of-credits reply
   and the account menu all send people here), and the header floats over the
   page, so without a scroll margin the link lands with the packs under the
   nav. --v2-header-bottom cannot carry this on its own: the template's script
   publishes 0 whenever the header is static OR sticky, and a sticky header
   still covers what a fragment jump scrolls to. So the clearance is a flat
   130px — taller than the header at every current width — PLUS the measured
   bottom, which is non-zero only in the genuinely-fixed case where the flat
   value would not be enough. Verified at 320/768/1180/1440 that the heading,
   the card's top edge and the chip above the heading all land below the
   header. */
body.v2-core[data-scroll-theme="pricing"] #creditPackTitle {
  scroll-margin-block-start: calc(var(--v2-header-bottom, 0px) + 130px);
}

body.v2-core[data-scroll-theme="pricing"] .payg-card h3 {
  margin: 0;
  color: var(--ds-ink);
  font-size: clamp(1.4rem, 1.9vw, 1.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

body.v2-core[data-scroll-theme="pricing"] .payg-card .plan-fit,
body.v2-core[data-scroll-theme="pricing"] .payg-lede,
body.v2-core[data-scroll-theme="pricing"] .payg-foot {
  margin: 0;
  /* Measured 5.80:1 on the resolved #e7e1cd ground. */
  color: var(--ds-dim-on-light);
}

/* `.plan-fit` carries a 48px min-height in styles.css so the four plan-card
   heads line up with each other. This column is not in that alignment — it has
   no price block to line up with — so the reservation is 26px of dead air
   between the head and the lede. Released here, not there. */
body.v2-core[data-scroll-theme="pricing"] .payg-card .plan-fit {
  min-block-size: 0;
  font-size: 0.9rem;
  font-weight: 800;
}

body.v2-core[data-scroll-theme="pricing"] .payg-lede {
  font-size: 0.88rem;
  line-height: 1.5;
}

body.v2-core[data-scroll-theme="pricing"] .payg-foot {
  font-size: 0.78rem;
  line-height: 1.5;
}

body.v2-core[data-scroll-theme="pricing"] .payg-foot a {
  color: var(--ds-ink);
}

body.v2-core[data-scroll-theme="pricing"] .payg-ledger {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The row IS the control, so it is a real button at a real tap size and it is
   the one thing in this column allowed a keyline. */
body.v2-core[data-scroll-theme="pricing"] .payg-pack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  inline-size: 100%;
  min-block-size: var(--ds-tap);
  padding-block: 11px;
  padding-inline: 14px;
  border: 1px solid var(--ds-ink);
  border-radius: var(--ds-radius-control);
  background: transparent;
  color: var(--ds-ink);
  text-align: start;
  cursor: pointer;
  transition: background 160ms var(--ds-ease), box-shadow 160ms var(--ds-ease);
}

body.v2-core[data-scroll-theme="pricing"] .payg-pack:hover {
  background: #ffffff;
  box-shadow: var(--ds-lift-1);
}

body.v2-core[data-scroll-theme="pricing"] .payg-pack:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus);
  outline-offset: var(--ds-focus-offset);
}

/* Credits lead. The price is the second thing read on the line, not the
   first, which is what stops the $29 pack from being scanned as a $29 plan. */
body.v2-core[data-scroll-theme="pricing"] .payg-pack-credits {
  min-inline-size: 0;
  /* Solid ink, not the grid's 68% caption alpha: measured 14.51:1 on the card
     ground and 18.9:1 on the white hover fill. This is the row's headline. */
  color: var(--ds-ink);
  font-size: 0.98rem;
  font-weight: 850;
  letter-spacing: -0.01em;
}

/* Mono and one step down from the plan prices, which are display-weight. */
body.v2-core[data-scroll-theme="pricing"] .payg-pack-price {
  justify-self: end;
  color: var(--ds-ink);
  font-family: var(--ds-font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

body.v2-core[data-scroll-theme="pricing"] .payg-pack-rate {
  grid-column: 1 / -1;
  min-inline-size: 0;
  color: var(--ds-dim-on-light);
  font-family: var(--ds-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}

/* Hover repaints the row #ffffff; the dim is 7.59:1 there, so it stays legal
   rather than being restated. Named anyway so a later ground change to the
   row cannot silently take the rate label with it. */
body.v2-core[data-scroll-theme="pricing"] .payg-pack:hover .payg-pack-rate {
  color: var(--ds-dim-on-light);
}

/* In the full-width band (561-1180px, where the card spans both plan columns)
   the ledger reads ACROSS as a 2x2 rather than down as a 4-stack. Two, not
   four: at 1180px — the widest this band ever gets — four tracks resolve to
   about 190px, which wraps "100,000 credits" and the "best rate" note onto
   second lines and leaves the four rows different heights. Two is also a
   factor of four, so the block never ends in an orphan row. */
@media (min-width: 561px) and (max-width: 1180px) {
  body.v2-core[data-scroll-theme="pricing"] .payg-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   12 · Motion, for what sections 10 and 11 add
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.v2-core[data-scroll-theme="pricing"] .pricing-jump-link span,
  body.v2-core[data-scroll-theme="pricing"] .pricing-credit-key,
  body.v2-core[data-scroll-theme="pricing"] .payg-pack {
    transition: none !important;
    transform: none !important;
  }
}