html,body{margin:0!important;padding:0!important}
body{overflow-x:clip}
.hl_page-preview--content,.hl_page-preview--content>div,
.c-section:has(.ews-ghl-root),.c-row:has(.ews-ghl-root),.c-column:has(.ews-ghl-root),
.inner:has(.ews-ghl-root),.c-custom-code:has(.ews-ghl-root),.custom-code-container:has(.ews-ghl-root){
  padding:0!important;margin:0!important;max-width:none!important;width:100%!important;
  transform:none!important;overflow:visible!important;background:transparent!important}
/* --- tokens.css --- */
/* ============================================================
   EARLY WORDS STUDIO — "The Clinical Chart"
   Late Talker Kit sales page · design system
   Source of truth: this file. GHL only ever holds a pasted copy —
   see PLAN.md decision 10. Paste into GHL: Page Settings → Custom CSS.
   Fonts load separately — see the <link> tag in the build kit.

   Phase 3 additions (2026-09-03) are marked "PHASE 3" in comments:
   the src/ relocation, the --zone-yellow contrast fix, and the
   mobile expression for every desktop-only device named in the
   scroll map (marginal-note, single-line-statement, wide-plate
   breakout, and the real top-edge progress rail).
   ============================================================ */

:root {
  /* ---- primitives (raw values — do not use directly) ---- */
  /* The page ground is warm cream, not white. Sampled from the Figma
     frame fill (#FFFDED) and from a rendered body region (#FFFCED);
     the 1px difference is the frame's noise overlay, so the flat
     value is used. Building this as #FFFFFF was what made the page
     read as flat, ungrounded text on white. */
  --paper-base:   #FFFCED;
  --paper-raised: #FFFFFF;
  --paper-sunken: #F2F2F0;
  --ink-900: #1A1A18;
  --ink-700: #4A4A46;
  --ink-500: #6E6E68;
  --ink-300: #767670;
  --rule-default: #D6D6D2;
  --rule-strong:  #A9A9A3;

  /* the four Zone-Match tiers — the ONLY chroma in the system.
     These are swatch/decorative hues (chart specimens, rail
     segments, sunken tints). Contrast against white:
       red    #A8503C  5.42:1
       yellow #B8863B  3.23:1  ← fails 4.5:1 for body text
       green  #5C7150  5.34:1
       blue   #46658C  6.00:1
     Use these for swatches, fills and large/bold labels only.
     For yellow running as actual body-sized text, use
     --zone-yellow-text below instead. */
  --zone-red:    #A8503C;
  --zone-yellow: #B8863B;
  --zone-green:  #5C7150;
  --zone-blue:   #46658C;
  --zone-red-tint:    #EFE0DB;
  --zone-yellow-tint: #F2E8D6;
  --zone-green-tint:  #E2E7DD;
  --zone-blue-tint:   #DFE5EE;

  /* PHASE 3 — accessible text variant of yellow. Same ochre family,
     darkened to 5.4:1 on white (matching red/green's own ratio, so
     the four tiers still read as equally weighted, per the "stages
     not alarm grades" rule — this is not a brighter or more urgent
     yellow, just a legible one). Use ONLY where yellow must run as
     readable text (e.g. an inline "Yellow Zone" mention in prose).
     Swatches, fills and the Zone Rail keep --zone-yellow unchanged. */
  --zone-yellow-text: #8C6224;

  /* ---- semantic (use these) ---- */
  --color-bg-page:   var(--paper-base);
  --color-bg-card:   var(--paper-raised);
  --color-bg-sunken: var(--paper-sunken);
  --color-bg-cta:       var(--ink-900);
  --color-bg-cta-hover: var(--ink-700);

  --color-text-primary:   var(--ink-900);
  --color-text-secondary: var(--ink-700);
  --color-text-muted:     var(--ink-500);
  --color-text-faint:     var(--ink-300);
  --color-text-on-cta:    var(--paper-raised);

  --color-border-hairline: var(--rule-default);
  --color-border-strong:   var(--rule-strong);

  /* ---- type ---- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  /* Body/Body Emphasis/Body Italic switched from Newsreader to Raleway
     in Figma (2026-09-09) — matched here. Headings, Lead, Small,
     Price, Kicker, Terms stay on --font-display; only prose content
     (.ews-body, discover-card bullets, the value-table label column,
     and the 19px "sm" CTA, which shares Body Emphasis's own metrics)
     uses this token. */
  --font-body: 'Raleway', 'Segoe UI', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- spacing ---- */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* PHASE 3 — was a fixed 160px and unused. Now fluid and wired
     into .ews-section-gap below, so the gap between stacked
     sections compresses on mobile like everything else does. */
  --space-section: clamp(64px, 10vw, 160px);

  /* ---- structure ---- */
  --measure-text: 680px;   /* long-form reading column — narrow-read */
  --measure-wide: 900px;   /* tables and the offer block */
  --measure-plate: 1100px; /* wide-plate breakout ceiling */
  --measure-page: 1100px;  /* max content width */
  --radius: 0;             /* the system is square. do not change. */
}

/* ============================================================
   RESET / GROUND
   ============================================================ */

body,
.hl_page-preview--content {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-display);
}

/* selection color: the ink/paper palette already in the system,
   not the browser's default blue — cheap, invisible until someone
   actually selects text. */
.ews-page ::selection {
  background: var(--color-text-primary);
  color: var(--color-bg-page);
}

/* Nothing in the original Clinical Chart system is rounded or
   shadowed, and the ban is enforced with !important so no stray rule
   can reintroduce either.

   The Phase 9 reskin nodes are the one deliberate exception: the hero
   sky panel, the discover cards, the six-pillar wrapper, the panels
   and the teal CTA all carry a corner radius in the new Figma file.
   They are listed out of the ban here rather than each fighting
   !important on its own. Without this exclusion the blanket rule
   flattened all of them back to 0 — the reskin's rounding was written
   but never actually rendered.

   The shadow ban is left blanket; nothing in either file is shadowed. */
.ews-page *:not(.ews-hero-sky, .ews-hero-sky__cloud, .ews-hero-sky__glow,
                .ews-discover-card, .ews-pillars-wrap, .ews-panel,
                .ews-cta--hero, .ews-sticky-bar__cta),
.ews-page *::before,
.ews-page *::after {
  border-radius: var(--radius) !important;
}
.ews-page *,
.ews-page *::before,
.ews-page *::after {
  box-shadow: none !important;
}

/* ============================================================
   TYPE RAMP
   Sizes use clamp() so they scale continuously instead of
   snapping at GHL's breakpoints.
   ============================================================ */

.ews-display-xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--color-text-primary);
}

.ews-display-lg {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.10;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.ews-display-md {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}

.ews-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.ews-lead {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.48;
  color: var(--color-text-primary);
}

.ews-body,
.ews-body p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.68;
  color: var(--color-text-secondary);
}

.ews-body p + p { margin-top: 1.05em; }

/* A genuine bullet list inside .ews-body — node 14:362 ("A glimpse
   of what you'll have in your hands tonight") is the first place
   this shows up as a real <ul>, not the short-paragraph rhythm used
   everywhere else. No gap between items (the file gives every <li>
   but the last margin:0 — a tight list, unlike the ~20px paragraph
   gaps elsewhere), 28.5px indent for the marker, 20px above the
   list separating it from the lead-in sentence via the existing
   p + p rule. */
.ews-body ul {
  margin: 20px 0 0;
  padding-left: 28.5px;
  list-style: disc;
}
.ews-body ul li { margin: 0; }
.ews-body ul li + li { margin-top: 0; }

.ews-body strong,
.ews-emphasis { font-weight: 600; color: var(--color-text-primary); }

.ews-italic,
.ews-kicker { font-style: italic; }

.ews-kicker {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.ews-small {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.58;
  color: var(--color-text-muted);
}

.ews-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

/* the instrument voice — labels, data, slot IDs, citations */
.ews-mono-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* same type, but ink-black rather than muted — the Zone-Match tiers
   figure's own label and captions use #1A1A18, not the muted gray
   .ews-mono-label defaults to elsewhere (the masthead wordmark,
   image-slot IDs). */
.ews-mono-label--ink { color: var(--color-text-primary); }

/* ============================================================
   FIGURE — ZONE-MATCH TIERS. A dedicated component, not the
   generic .ews-fig-label (title + rule + "Fig. N") that was
   wrongly reused here before — that utility owns its own border-
   bottom, positioned right under the title, which is a different
   line in a different place than either rule this figure actually
   has. This figure's real structure: a bold 2px top rule, a label
   row (mono-label title + a hairline filling the rest of the row),
   the four swatch+caption columns, and a light 1px bottom rule.
   ============================================================ */
.ews-zone-figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 0 20px;
}
.ews-zone-figure__rule {
  width: 100%;
  height: 2px;
  background: var(--color-text-primary);
  flex: none;
}
.ews-zone-figure__rule--bottom {
  height: 1px;
  background: var(--color-border-hairline);
}
.ews-zone-figure__label-row {
  display: flex;
  align-items: flex-start; /* per the node's own auto-layout — the
    rule sits level with the label's cap-height, not vertically
    centered against the full row */
  gap: 16px;
  width: 100%;
  padding: 12px 0 22px;
}
.ews-zone-figure__label {
  flex: none;
  margin: 0;
  white-space: nowrap;
}
.ews-zone-figure__label-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border-hairline);
}
.ews-zone-figure__tiers {
  display: flex;
  gap: 4px;
  width: 100%;
}
.ews-zone-figure__tier {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 0;
  min-width: 0;
}
.ews-zone-figure__swatch {
  width: 100%;
  aspect-ratio: 222 / 231; /* the file's own swatch ratio — not a
    perfect square, which the earlier build used */
}
.ews-zone-figure__caption {
  margin: 12px 0 0;
}

.ews-mono-data {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  color: var(--color-text-primary);
}

/* PHASE 3 — accessible yellow, for the rare case yellow must run
   as body-sized text rather than a swatch or a large/bold label. */
.ews-zone-text--yellow { color: var(--zone-yellow-text); }
.ews-zone-text--red    { color: var(--zone-red); }
.ews-zone-text--green  { color: var(--zone-green); }
.ews-zone-text--blue   { color: var(--zone-blue); }

/* ============================================================
   STRUCTURE
   ============================================================ */

/* content bands — put this class on the ROW */
.ews-band {
  background: var(--color-bg-page);
  padding-top: clamp(64px, 8vw, 112px);
  padding-bottom: clamp(64px, 8vw, 112px);
}

.ews-band-inner { max-width: var(--measure-page); margin: 0 auto; }
.ews-measure { max-width: var(--measure-text); }
.ews-measure-wide { max-width: var(--measure-wide); }

/* PHASE 3 — the gap between two stacked full-bleed sections
   (ink-ground next to white, etc.), now wired to the fluid token. */
.ews-section-gap { height: var(--space-section); }

/* ============================================================
   PHASE 4 — DIVIDERS AT THREE WEIGHTS
   Figma's own hairlines already vary between 1px and 2px at
   points the designer judged as major transitions (before The
   Contrast, before The Diagnosis) — these three classes make that
   distinction explicit and give it a third, heavier step for the
   ink-ground boundaries, rather than leaving weight to per-node
   guesswork.
   ============================================================ */

/* thin — default, between minor sub-blocks: pillars, FAQ items,
   table rows, anything inside one named section. */
.ews-rule {
  height: 1px;
  background: var(--color-border-hairline);
  border: 0;
  margin: 0;
}

/* medium — between two named page sections. Matches the 2px
   hairlines Figma already uses before The Contrast and The
   Diagnosis. */
.ews-rule--section {
  height: 2px;
  background: var(--color-border-hairline);
  border: 0;
  margin: 0;
}

/* strong — reserved for the page's most emphatic breaks: flanking
   an ink-ground section (Hero, Founding Price), or standing in for
   the scarcity-without-colour treatment used on the Fast-Action
   bonus card border. Never used more than a few times on the page,
   or it stops reading as emphatic. */
.ews-rule--strong {
  height: 2px;
  background: var(--color-border-strong);
  border: 0;
  margin: 0;
}

/* quiet inset panel — framework note, guarantee, founding price */
.ews-panel {
  /* Figma 14:290's exact fill, given directly this time rather than
     sampled from a PNG export: a 113.35deg coral-to-lavender
     gradient at 20% opacity, layered over a flat #F2F2F0 base — not
     the opaque warm/lavender solid the earlier sampled approximation
     used. Also corrected: radius is 5px (--radius-soft) here, not
     --radius-panel's 10px. Shared with the Founding Price panel
     (line ~537 in variant-a.html), which sets background:transparent
     and never shows a rounded edge either way — safe to correct here
     without touching that instance. */
  background:
    linear-gradient(113.35deg, rgba(255, 175, 157, 0.2) 10.42%, rgba(218, 185, 246, 0.2) 101.45%),
    #F2F2F0;
  border-radius: var(--radius-soft);
  padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 64px);
  /* Figma's auto-layout width (880px on the Framework Note instance)
     includes its own padding — the default content-box model here
     would add the padding on TOP of any max-width applied to this
     class, rendering ~995px instead of 880px. border-box makes an
     applied max-width mean the true outer box, matching Figma.
     Harmless to the Founding Price panel's own use of this class:
     that instance zeroes its horizontal padding already, so nothing
     shifts for it. */
  box-sizing: border-box;
}

/* ============================================================
   PHASE 3 — SCROLL-MAP PRESSURE MODES
   The three modes from SCROLL-MAP.md that had no reusable class
   yet: wide-plate breakout, marginal-note, single-line-statement.
   Each defines its own mobile fallback, since "wider than the
   measure" and "set apart in the margin" both lose their meaning
   at 390px unless something else stands in for the width cue.
   ============================================================ */

/* wide-plate: bleeds past the 680 measure on desktop (860–1100px).
   On mobile everything is full-width anyway, so the plate needs a
   second cue to still read as a plate: a sunken ground plus a
   strong top/bottom rule, not just an edge-to-edge image. */
.ews-plate {
  max-width: var(--measure-plate);
  margin-left: auto;
  margin-right: auto;
}
.ews-plate--figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-border-hairline);
}

/* PHASE 4 — the academic-style label row that heads a wide-plate
   figure (the Zone-Match tier plate: "The four Zone-Match tiers"
   on the left, a rule filling the middle, "Fig. 1" on the right),
   per the Figma component as built. Reusable for any figure that
   needs the same numbered-plate treatment. */
.ews-fig-label {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border-hairline);
  margin-bottom: var(--space-lg);
}
.ews-fig-label__title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.ews-fig-label__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border-hairline);
}
.ews-fig-label__number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* PHASE 4 — certificate plate. The Guarantee panel was flagged in
   the design-system notes as needing a bordered, certificate-like
   treatment rather than a plain sunken panel — this is that fix.
   No shadow, no radius, per the ban list: the "certificate" read
   comes entirely from the double-weight border. */
.ews-certificate {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border-strong);
  padding: clamp(32px, 5vw, 56px);
}

/* PHASE 4 — image slot (build-time placeholder). Matches the
   Figma "Image Placeholder" component exactly: a sunken box
   carrying the slot ID and the target dimensions in the mono
   instrument voice, with the caption already in place below it —
   because in this document every figure is captioned, and the
   caption should be written to what the image proves, not what
   it depicts. Swap the inner box for a real <img> at build time;
   the caption element and its class stay the same either way. */
.ews-image-slot {
  background: var(--color-bg-sunken);
  border: 1px solid var(--color-border-hairline);
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}
.ews-image-slot__id {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ews-image-slot__dims {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--color-text-faint);
}
.ews-image-slot__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

/* PHASE 5 — two more source-image shapes, verified against Figma:
   pillars display at a fixed 420x660 crop inside .ews-pillar__media;
   the Contrast/Process wide-plate breakouts and their source photos
   are shot at 4:3 (880x660), same source spec as the pillars but
   displayed uncropped at the plate's own width. Bonuses/Offer stay
   on the 16:9 default. */
.ews-image-slot--pillar { aspect-ratio: 420 / 660; }
.ews-image-slot--4-3 { aspect-ratio: 4 / 3; }

/* marginal-note: on desktop, set apart from the reading column —
   either a true offset (indented past the measure, smaller type)
   or a sunken aside inline. On mobile there is no margin to offset
   into, so it becomes a left-ruled inset band instead: still
   visually distinct from body prose, still smaller type. */
.ews-marginal {
  background: var(--color-bg-sunken);
  padding: var(--space-lg) var(--space-xl);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.ews-marginal--offset {
  /* desktop-only true margin treatment: apply on wide viewports
     where there's room to indent past the measure without
     colliding with the Zone Rail at x=300. */
  max-width: 560px;
  margin-left: clamp(0px, 8vw, 120px);
}

/* single-line-statement: a terse decision-point, not an argument.
   Generous whitespace above and below is what makes it read as a
   beat rather than another paragraph — the whitespace IS the mode,
   so it must not collapse on mobile the way body copy gaps do. */
.ews-statement {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.48;
  color: var(--color-text-primary);
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(32px, 5vw, 56px);
}

/* ============================================================
   ZONE RAIL — the signature element
   Four segments pinned to the left edge of a section (desktop).
   ============================================================ */

.ews-rail {
  display: flex;
  flex-direction: column;
  width: 4px;
  flex: 0 0 4px;
  align-self: stretch;
}
.ews-rail span { flex: 1 1 0; display: block; }

/* unresolved: the reader does not know their zone yet */
.ews-rail--unresolved span { background: var(--color-border-hairline); }

/* resolved: all four tiers active */
.ews-rail--all span:nth-child(1) { background: var(--zone-red); }
.ews-rail--all span:nth-child(2) { background: var(--zone-yellow); }
.ews-rail--all span:nth-child(3) { background: var(--zone-green); }
.ews-rail--all span:nth-child(4) { background: var(--zone-blue); }

/* single tier active, rest hairline */
.ews-rail--red span,
.ews-rail--yellow span,
.ews-rail--green span,
.ews-rail--blue span { background: var(--color-border-hairline); }
.ews-rail--red    span:nth-child(1) { background: var(--zone-red); }
.ews-rail--yellow span:nth-child(2) { background: var(--zone-yellow); }
.ews-rail--green  span:nth-child(3) { background: var(--zone-green); }
.ews-rail--blue   span:nth-child(4) { background: var(--zone-blue); }

/* rail sections are a flex row: rail + body */
.ews-railed { display: flex; gap: clamp(24px, 4vw, 64px); align-items: stretch; }

/* ============================================================
   PHASE 3 — ZONE RAIL, MOBILE: TOP-EDGE PROGRESS RAIL
   Below 768px the per-section rail (converted to a horizontal
   band further down, see RESPONSIVE) is joined by a single
   fixed bar pinned to the top of the viewport for the whole
   scroll — not repeated per section. It fills as the reader
   descends through the rail's own range (Discover → Postscripts,
   per the Zone Rail policy — absent in the hero and every
   offer-mechanics section, same as desktop).

   This markup needs a small scroll-linked script to set
   --rail-progress (0–1) and to toggle which segment is "active";
   the script is a Phase 8 build item. The CSS below is the
   complete visual contract it drives.
   ============================================================ */

.ews-rail-progress {
  display: none;
}

@media (max-width: 767px) {
  .ews-rail-progress {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 40;
  }
  .ews-rail-progress span {
    flex: 1 1 0;
    display: block;
    background: var(--color-border-hairline);
    position: relative;
    overflow: hidden;
  }
  .ews-rail-progress span::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: scaleX(var(--rail-progress, 0));
    transform-origin: left;
  }
  .ews-rail-progress span:nth-child(1)::after { background: var(--zone-red); }
  .ews-rail-progress span:nth-child(2)::after { background: var(--zone-yellow); }
  .ews-rail-progress span:nth-child(3)::after { background: var(--zone-green); }
  .ews-rail-progress span:nth-child(4)::after { background: var(--zone-blue); }

  /* while unresolved (above The Diagnosis), no segment fills yet */
  .ews-rail-progress--unresolved span::after { transform: scaleX(0); }
}

/* ============================================================
   ZONE KEY — a chart key, never a chip
   ============================================================ */

.ews-zone-key {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--color-text-primary);
}
.ews-zone-key::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: block;
}
.ews-zone-key--red::before    { background: var(--zone-red); }
.ews-zone-key--yellow::before { background: var(--zone-yellow); }
.ews-zone-key--green::before  { background: var(--zone-green); }
.ews-zone-key--blue::before   { background: var(--zone-blue); }

.ews-zone-keyset {
  background: var(--color-bg-sunken);
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ============================================================
   CITED-SOURCE BLOCK — Roberts & Kaiser, in the instrument voice
   PHASE 3 addition, per WEBSITE-PRD.md §5: the one piece of
   external proof on the page gets deliberate design treatment
   rather than sitting as plain body prose.
   ============================================================ */

.ews-citation {
  background: var(--color-bg-sunken);
  border-left: 2px solid var(--color-border-strong);
  padding: var(--space-lg) var(--space-xl);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.ews-citation__source {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ============================================================
   CTA — ink, never a zone colour
   ============================================================ */

.ews-cta,
a.ews-cta {
  display: inline-block;
  background: var(--color-bg-cta);
  color: var(--color-text-on-cta);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.3;
  text-decoration: none;
  padding: var(--space-lg) var(--space-2xl);
  border: 0;
  transition: background-color 140ms ease;
}
.ews-cta:hover,
.ews-cta:focus-visible { background: var(--color-bg-cta-hover); }
.ews-cta:focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 3px; }

/* a.ews-cta (element+class, specificity 0,1,1) otherwise outranks
   this class-only override (0,1,0) regardless of source order — the
   exact same specificity trap already found and fixed once on
   .ews-cta--hero. It was silently losing here too: this button was
   rendering at the base 22px/24px-48px instead of 19px/16px-32px,
   which combined with a too-long label is what made the button look
   oversized. Matching specificity fixes it structurally rather than
   patching the one instance that happened to get noticed. */
.ews-cta--sm,
a.ews-cta--sm {
  /* Confirmed against the live Figma node: this button's label is
     literally the Body Emphasis text style, not a one-off match —
     it switched to Raleway SemiBold alongside Body/Body Emphasis/
     Body Italic (2026-09-09), unlike the base .ews-cta/.ews-cta--hero
     (22px), which stays on --font-display. */
  font-family: var(--font-body);
  font-size: 19px;
  /* Body Emphasis's own line-height (1.68, not the base button's
     1.3) — at 19px that's ~32px of text, which combined with the
     16px top/bottom padding below lands the button at exactly the
     node's 64px height. */
  line-height: 1.68;
  padding: var(--space-md) var(--space-xl);
}

/* PHASE 5 — inverse CTA, for the two ink-ground sections (Hero,
   Founding Price) where the default ink-on-light button would
   disappear against its own ground. Still never a zone colour. */
.ews-cta--inverse,
a.ews-cta--inverse {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
}
.ews-cta--inverse:hover,
.ews-cta--inverse:focus-visible { background: var(--color-bg-sunken); }
.ews-cta--inverse:focus-visible { outline-color: var(--color-text-on-cta); }

/* PHASE 5 — terms footnote on an ink ground needs the inverse
   muted tone; --color-text-muted (ink-500) is illegible on ink-900. */
.ews-terms--inverse { color: rgba(255,255,255,0.72); }

/* terms footnote — deliberately NOT a centred trust bar */
.ews-terms {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-muted);
  text-align: left;
  margin-top: var(--space-sm);
}

/* ============================================================
   CARDS — hairline-defined, never shadowed
   ============================================================ */

.ews-card {
  /* Node 16:503/505/507's own fill: a pale blue-to-mint gradient, not
     flat white. The three bonus-card instances export it at
     240.44deg/240.44deg/249.05deg with matching sub-percent stop
     drift — Figma per-instance export noise from the same fill
     applied to differently-sized boxes, not three deliberate
     variants — so one canonical value is used for all of them. */
  background: linear-gradient(240deg, rgb(244, 249, 255) 0%, rgb(241, 255, 237) 100%);
  border: 1px solid var(--color-border-hairline);
  padding: var(--space-xl);
}

/* scarcity is structural, never chromatic */
.ews-card--fast {
  background: var(--color-bg-sunken);
  border: 2px solid var(--color-border-strong);
}

.ews-card__flag {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-md);
}
.ews-card--fast .ews-card__flag { color: var(--color-text-primary); }

/* ============================================================
   PILLARS — alternating, never a symmetric grid
   ============================================================ */

.ews-pillar {
  display: flex;
  gap: clamp(24px, 4vw, 64px);
  align-items: flex-start;
  /* Deliberately wider than the file's own 72px (Ali's explicit call,
     not a Figma-fidelity fix): ~180px of breathing room top/bottom
     around each pillar row at desktop widths, fluid down to a
     smaller floor on narrow screens so it doesn't dominate mobile. */
  padding: clamp(56px, 12vw, 180px) 0;
  border-top: 1px solid var(--color-border-hairline);
}
.ews-pillar:first-child { border-top: 0; }
.ews-pillar__media { flex: 0 0 420px; max-width: 420px; }
.ews-pillar__body  { flex: 1 1 auto; }
.ews-pillar--flip  { flex-direction: row-reverse; }
/* Pillar photography (900x1274, ratio 0.71) is shot taller/narrower
   than the Figma slot (420x660, ratio 0.64, see .ews-image-slot--
   pillar above) — that modifier class was defined but never actually
   applied to the real <img> tags, so pillar photos have been
   rendering uncropped at their native ratio instead of the intended
   crop. Targeting the real img directly here, so it applies wherever
   .ews-pillar__media is used (all three variants, one shared photo
   set) without touching each instance's inline style. */
.ews-pillar__media img { aspect-ratio: 420 / 660; object-fit: cover; }

/* ============================================================
   VALUE TABLE
   ============================================================ */

.ews-table { width: 100%; border-collapse: collapse; }
.ews-table th {
  background: var(--color-bg-sunken);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: left;
  padding: var(--space-md) var(--space-lg);
}
.ews-table th:last-child { text-align: right; }
.ews-table td {
  font-family: var(--font-body);
  font-size: 19px;
  /* Body's own line-height (1.68) — this was 1.5 */
  line-height: 1.68;
  color: var(--color-text-primary);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border-hairline);
}
.ews-table td:last-child {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 16px;
  /* Mono/Data's own line-height (1.45) — inherited the label
     column's 1.68 otherwise, which is a Newsreader-body value, not
     the mono value this column actually specifies. */
  line-height: 1.45;
  white-space: nowrap;
}
.ews-table tr.ews-table__total td {
  font-weight: 600;
  border-bottom: 0;
  border-top: 1px solid var(--color-border-hairline);
}
.ews-table tr.ews-table__total td:last-child { font-family: var(--font-display); font-weight: 600; }

/* ============================================================
   FAQ — hairline-separated, never boxed
   ============================================================ */

.ews-faq__item {
  border-top: 1px solid var(--color-border-hairline);
  padding: var(--space-lg) 0 var(--space-xl);
  transition: border-top-color 160ms ease;
}
/* hover darkens the item's own top divider — the only "border" a
   hairline-separated (never boxed) row has — without resizing or
   revealing anything; content only ever opens on click. */
.ews-faq__item:hover { border-top-color: var(--color-text-primary); }
.ews-faq__item > summary.ews-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
.ews-faq__item > summary.ews-faq__q::-webkit-details-marker { display: none; }
.ews-faq__q {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.35;
  color: var(--color-text-primary);
}
.ews-faq__item > summary.ews-faq__q { margin-bottom: 0; }
.ews-faq__item[open] > summary.ews-faq__q { margin-bottom: var(--space-md); }
/* smooth open/close: a slow (not sharp/instant) fold, ease-in-out —
   grid-template-rows animates from 0fr to 1fr instead of the old
   display:none/block hard cut. display stays grid at all times so
   the transition has something to interpolate. */
.ews-faq__item > .ews-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows 420ms ease-in-out, opacity 320ms ease-in-out;
  margin-bottom: 0 !important;
}
.ews-faq__item > .ews-body > * { min-height: 0; }
.ews-faq__item[open] > .ews-body {
  grid-template-rows: 1fr;
  opacity: 1;
}

.ews-faq__icon {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}
.ews-faq__icon::before,
.ews-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-text-primary);
  transition: transform 140ms ease, opacity 140ms ease;
}
.ews-faq__icon::before { width: 100%; height: 2px; transform: translate(-50%, -50%); }
.ews-faq__icon::after { width: 2px; height: 100%; transform: translate(-50%, -50%); }
/* the vertical bar only retracts (plus -> minus) once the item is
   actually open — never on hover, and the plus stays a plus while
   just hovering, per the explicit spec. */
.ews-faq__item[open] > summary.ews-faq__q .ews-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* ============================================================
   FIGURES
   ============================================================ */

.ews-figure { margin: 0; }
.ews-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border-hairline);
}
/* Bonus photography (bonus-1/2/3.webp) is shot portrait (1200x1697,
   ratio 0.71) — no correctly-shaped source exists in the asset set,
   and the Figma slot for this figure is 880x532 (ratio ~1.65),
   landscape. Rendered at height:auto the photo would show its full
   portrait height instead of the intended wide crop. Cropping to the
   file's own ratio via object-fit is the closest fix available short
   of new photography. */
.ews-figure--crop img {
  aspect-ratio: 880 / 532;
  object-fit: cover;
  object-position: center top;
}
/* offer-summary.webp has the same problem — shot portrait (1200x1553,
   ratio 0.77) against a 900x532 (ratio ~1.69) Figma slot. Same fix,
   own ratio: the Value Table's Measure frame is 900px wide, not 880. */
.ews-figure--crop-offer img {
  aspect-ratio: 900 / 532;
  object-fit: cover;
  object-position: center top;
}
.ews-figure figcaption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

/* PHASE 3 — true marginalia for the Postscripts section
   (SCROLL-MAP.md upgrade #2): indented, smaller, genuinely set
   apart from the body measure, not another full-width paragraph. */
.ews-postscript {
  max-width: 560px;
  margin-left: clamp(0px, 6vw, 96px);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.ews-postscript + .ews-postscript { margin-top: var(--space-xl); }

/* PS/PPS labels (node 16:632/16:635) — literal Figma spec is Body
   Emphasis (semibold, primary ink) with a 12px gap to the paragraph
   beneath, not the standard 20px paragraph rhythm. .ews-body p
   (0,1,1) outranks a class-only override, so match its specificity
   the same way as the a.ews-cta--sm fix. */
.ews-body p.ews-postscript-mark { font-weight: 600; color: var(--color-text-primary); margin-bottom: 0; }
.ews-body .ews-postscript-mark + p { margin-top: 12px; }
.ews-postscript__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-sm);
}

@media (max-width: 767px) {
  /* the margin has nowhere to go on mobile — fall back to the
     same left-ruled inset band as .ews-marginal, so it still
     reads as set-apart rather than becoming a plain paragraph */
  .ews-postscript {
    max-width: 100%;
    margin-left: 0;
    background: var(--color-bg-sunken);
    padding: var(--space-lg) var(--space-lg);
    border-left: 2px solid var(--color-border-strong);
  }
}

/* ============================================================
   RESPONSIVE
   GHL stacks columns below 768. Order and rhythm are set here.
   ============================================================ */

@media (max-width: 991px) {
  .ews-pillar__media { flex-basis: 340px; }
}

@media (max-width: 767px) {
  /* pillars stack: text first, image second, regardless of desktop side */
  .ews-pillar,
  .ews-pillar--flip { flex-direction: column; }
  .ews-pillar__media { flex-basis: auto; max-width: 100%; order: 2; }
  .ews-pillar__body  { order: 1; }

  /* the rail becomes a horizontal band above its own section
     (in addition to the fixed top-edge progress rail above) */
  .ews-railed { flex-direction: column; gap: var(--space-lg); }
  .ews-rail {
    flex-direction: row;
    width: 100%;
    flex-basis: 4px;
    height: 4px;
    align-self: auto;
  }

  .ews-band { padding-left: var(--space-lg); padding-right: var(--space-lg); }
  .ews-panel { padding: var(--space-xl) var(--space-lg); }
  .ews-cta { display: block; text-align: center; }

  /* wide-plate loses its width cue at full-bleed mobile width —
     the sunken ground + strong rule stand in for it instead */
  .ews-plate--bordered {
    background: var(--color-bg-sunken);
    border-top: 2px solid var(--color-border-strong);
    border-bottom: 2px solid var(--color-border-strong);
    padding: var(--space-xl) var(--space-lg);
  }

  /* the true-margin variant collapses to the sunken inset band —
     same fallback as .ews-marginal itself */
  .ews-marginal--offset {
    max-width: 100%;
    margin-left: 0;
    background: var(--color-bg-sunken);
    padding: var(--space-lg) var(--space-xl);
  }

  /* value table reflows to stacked rows */
  .ews-table thead { display: none; }
  .ews-table tr { display: flex; justify-content: space-between; gap: var(--space-md); }
  .ews-table td { border-bottom: 1px solid var(--color-border-hairline); }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .ews-page *,
  .ews-page *::before,
  .ews-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.ews-page a:focus-visible,
.ews-page button:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 3px;
}

/* PHASE 5 — visually-hidden heading. Some sections (The Six
   Pillars, Postscripts) have no visible section title in the
   verbatim copy, which would otherwise skip a heading level.
   This adds landmark structure for screen readers without adding
   any new visible copy — the verbatim rule governs what's on the
   page, not what's in the accessibility tree. */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   PHASE 9 — "FINAL SALES PAGE SYSTEM" RESKIN
   Figma file OC0rW6zRNdSG6hFFQ5PcV4, 2026-09-05. This is additive,
   not a replacement: the new file only restyled the Hero, Discover,
   the Pillars wrapper, and added a new Sticky CTA Bar — Founding
   Price, Guarantee, FAQ, Value Table and Bonus cards are unchanged
   in the source and keep the original square/ink tokens above.
   The result is a deliberate hybrid: rounded + pastel where the
   new file touched, square + ink everywhere it didn't. Implemented
   as specified per node, not harmonized in either direction.
   ============================================================ */

:root {
  --hero-sky:      #42a6b8;
  --hero-glow:     #b2f3ff;
  --hero-cta-bg:   #06333b;
  --pillars-wrap-border:  #afaa82;
  --discover-card-border: #b3b094;
  --discover-bracket:     #bfbb97;
  --sticky-bar-bg: #fffdee;
  --radius-soft: 5px;
  --radius-panel: 10px;
}

/* ---- Hero sky panel ---- */
.ews-hero-sky {
  /* Full-bleed: Figma's Mask group is 1884.72 of a 1906px frame
     (98.9%). The markup no longer wraps this in .ews-band-inner
     (1100px measure), so width:100% here reaches the true viewport
     edge, the same way .ews-footer's photo does. */
  width: 100%;
  /* The file's own ratio. This is a fixed aspect box on tablet/desktop,
     matching the design; on mobile it's overridden to aspect-ratio:auto
     below, because pinning this ratio at a 390px width forces a ~273px
     box (390 / (1884.72/1321.25)) that the content — now logo + kicker
     + a multi-line headline + CTA — cannot fit inside without the
     overflow:hidden clipping it. */
  aspect-ratio: 1884.72 / 1321.25;
  position: relative;
  /* The Discover section's two chain lines are deliberately drawn
     22px up into this panel's own bottom edge (.ews-discover-chain).
     Position alone would just paint them over the panel, since later
     DOM order wins by default — this z-index is what actually keeps
     the panel opaque on top for that sliver, so the chains read as
     emerging from behind it rather than crossing in front of it. */
  z-index: 2;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--hero-sky);
}
@media (max-width: 767px) {
  .ews-hero-sky { aspect-ratio: auto; }
}
.ews-hero-sky__glow {
  position: absolute;
  border-radius: 50%;
  background: var(--hero-glow);
  filter: blur(90px);
  opacity: 0.65;
  pointer-events: none;
}
.ews-hero-sky__cloud {
  position: absolute;
  border-radius: var(--radius-panel);
  object-fit: cover;
  pointer-events: none;
}
@media (max-width: 767px) {
  /* The two clouds are positioned by percentages calibrated against
     the fixed desktop aspect-ratio box. Below 768px .ews-hero-sky
     switches to aspect-ratio:auto (content-driven height, so the
     kicker/headline/CTA aren't clipped) — against that shorter,
     differently-proportioned box the same percentages land wrong:
     one cloud crops off at the top edge, the other balloons toward
     the center. Rather than maintain a second set of mobile-specific
     percentages for a decorative image, they're dropped on mobile
     per Ali's call: at this size they compete with the kicker and
     headline rather than sitting quietly behind them. The glow
     blobs stay — softer, further from the text, no hard edge to
     crop badly. */
  .ews-hero-sky__cloud { display: none; }
}
/* the hero CTA is teal + rounded per this file's actual hero button
   node — NOT the ink/square CTA used at Founding Price and Close in
   the same file. Kept distinct rather than silently unified. Text is
   already white via the base .ews-cta rule (--color-text-on-cta),
   so no color override is needed here. */
.ews-cta--hero,
a.ews-cta--hero {
  background: var(--hero-cta-bg);
  border-radius: var(--radius-soft);
}
.ews-cta--hero:hover,
.ews-cta--hero:focus-visible,
a.ews-cta--hero:hover,
a.ews-cta--hero:focus-visible { background: #0a4550; }

/* ---- Hero content block — the actual "Hero" frame Ali pasted CSS
   for: 818.59 x 810.16, positioned inside the Mask group. Its own
   children (Group 4 = the logo, then kicker, headline, CTA) carry
   absolute left/top/width/height in that CSS. Cross-checked against
   the original page metadata: Group 4's derived absolute position
   (543.44 + 818.59*0.3892 ≈ 862.0, 74 + 0 = 74) matches node 12:229's
   real x/y (862.02, 74.00) exactly, confirming this frame and the
   rhythm below are read correctly, not guessed.

   Reproduced as a normal top-down flow rather than nested absolute
   positioning: the content column's own width (818.59 ≈ 820px) is a
   fixed measure like the rest of the file's --measure-* tokens, and
   the vertical gaps between children below are that same file's
   numbers converted to fluid clamp()s (vw against the page's 1906px
   reference width) rather than literal px, so the rhythm compresses
   gracefully on mobile instead of overflowing the panel. ---- */
.ews-hero__content {
  position: relative;
  z-index: 1;
  max-width: 820px; /* Hero frame width: 818.59px */
  margin: 0 auto;
  /* panel top -> Group 4 top = 63.25px */
  padding: clamp(24px, 3.3vw, 63px) clamp(24px, 5vw, 64px) 0;
  text-align: center;
}
.ews-hero__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}
.ews-hero__brand-logomark {
  width: 40px;
  height: 40px;
  flex: none;
  /* authored fill="currentColor" (black); driven to white over the
     sky the same way the footer's copy of this mark is. */
  filter: brightness(0) invert(1);
}
.ews-hero__brand-label {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.ews-hero__kicker {
  /* Group 4 bottom -> kicker top = 253.82px, the file's own large
     gap before the eyebrow line starts */
  margin: clamp(40px, 13.3vw, 254px) 0 0;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  /* 1.56px at 13px, per node 12:247's own letter-spacing value */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-style: normal;
}
.ews-hero__headline {
  /* node 12:248 sets text-black explicitly, overriding the display
     token's --color-text-primary (#1a1a18) */
  color: #000;
  /* kicker bottom -> headline top = 56px */
  margin: clamp(24px, 2.9vw, 56px) auto 0;
  max-width: none; /* full width of .ews-hero__content, per the file */
  transform: rotate(-0.23deg);
}
.ews-hero__cta-row {
  /* headline bottom -> CTA top = 59.32px. No bottom padding: the CTA
     sits flush with the Hero frame's own bottom edge in the file
     (738.16 + 72 = 810.16, its exact height). The panel itself is
     taller than this content block (1321.25 vs 810.16), so sky and
     cloud continue visibly below the button on desktop — that's the
     panel's own leftover height, not padding on the content. */
  margin-top: clamp(24px, 3.1vw, 59px);
}
@media (max-width: 767px) {
  /* On mobile the panel's aspect-ratio is overridden to auto (see
     .ews-hero-sky above), so its height becomes exactly the content's
     height with no leftover panel space below — the CTA would sit
     flush against the rounded bottom corners with zero breathing
     room. This is the one value in the block with no Figma source:
     a small fixed pad so the button isn't touching the panel edge. */
  .ews-hero__cta-row { padding-bottom: 32px; }
}

/* B and C's own leads run headline-then-kicker, not A's kicker-then-
   headline (decision 4: each variant keeps its own Big Idea/lead
   structure — B's and C's bodies were never rewritten to match A's
   order, so the hero shouldn't be either). The categorical rhythm
   still applies — a large gap right after the logo, a smaller gap
   between the two text blocks — it's just which element sits in
   which slot that swaps. Same specificity as the base rules above,
   declared after them, so a shared instance's own class wins. */
.ews-hero__headline--first { margin-top: clamp(40px, 13.3vw, 254px); }
.ews-hero__kicker--after-headline { margin-top: clamp(24px, 2.9vw, 56px); }

/* ---- Discover, redesigned as bordered cards ----
   Figma nodes 29:1148/29:1149 ("Vector 80"/"Vector 81") bracket the
   heading + all five cards with two plain 2px lines in #bfbb97.

   Three real fixes over the first pass, from Ali's review:
   1. The card column had no margin:auto, so it sat flush against
      the left edge of the 1100px band instead of centered — the
      other narrow-read sections are deliberately left-aligned next
      to their own rail, but Figma positions THIS block with
      calc(50% - width/2), i.e. genuinely centered on the page.
   2. The two lines were borders on the same box that lays out the
      cards, so they sat outside the cards in the padding gutter —
      never behind them. They're now two independent absolutely-
      positioned strips, z-index'd under the card column, aligned to
      its actual left/right edges so a card visually covers the
      line except in the gaps between cards and above/below the
      stack — the "hanging from two chains" reading.
   3. "attached to the hero" — .ews-discover-frame is the positioning
      context and starts at this section's own top edge (the section
      itself has zero top padding now; the old top gap moved onto
      .ews-band-inner instead), so top:0 on the lines lands exactly
      where the hero section ends, with no gap between them. */
.ews-discover-frame { position: relative; }
.ews-discover-chain {
  position: absolute;
  /* -46px, not -22: the hero SECTION's own bottom padding is a fixed
     24px (see the hero section's inline style), which already sits
     between the visible sky panel's bottom edge and this frame's own
     top (0). To land 22px inside the panel itself — the actual ask —
     the chain has to clear that 24px gap first, then go 22 further:
     24 + 22 = 46. This 24px is a literal, non-fluid value, so the
     46px figure holds at any viewport width, unlike a fluid gap
     would. See .ews-hero-sky's z-index below for the "behind" half
     of this — position alone would draw the chain over the panel,
     not under it. */
  top: -46px;
  bottom: 0;
  width: 2px;
  background: var(--discover-bracket);
  z-index: 0;
  pointer-events: none;
}
/* 620px apart, centered on the page — Figma's "Group 7"
   (width:620, left:643 of a 1906px frame; 643 + 620/2 = 953 = 1906/2,
   confirming the pair is centered, not aligned to the 658.68px card
   edges as the first pass had it). Figma's two vectors are 0-width
   lines 620px apart center-to-center; -311px (310 + half this div's
   own 2px width), not -310, so the 620px lands between the two
   rendered line CENTERS rather than their inner edges, which would
   read as 616px. */
.ews-discover-chain--left  { left:  calc(50% - 311px); }
.ews-discover-chain--right { right: calc(50% - 311px); }
@media (max-width: 767px) {
  /* at full mobile width the chains would run right at the card
     edges with no visual gap either side of them — closer to a
     border than a chain — so they're dropped below 768px, the same
     call as the hero clouds. */
  .ews-discover-chain { display: none; }
}
.ews-discover-rail {
  position: relative;
  z-index: 1; /* paints over .ews-discover-chain, not under it */
  margin: 0 auto; /* the actual centering fix */
  /* top: the section's own top padding, moved here (same clamp
     every .ews-band uses, so no separate mobile override needed —
     the clamp's 64px floor already does that). Horizontal: the
     original 48px inset beyond .ews-band-inner's own 1100px, kept
     as-is; zeroed below on mobile in the existing @media block near
     .ews-sticky-bar__nav, same as before this change. */
  padding: clamp(64px, 8vw, 112px) var(--space-2xl) 0;
}
/* "On this page, you will discover:" — centered on the page, same
   axis as the two chains either side of it (both are centered via
   the same 50% reference), not just left-aligned like the cards
   below it. */
.ews-discover-heading { text-align: center; }
.ews-discover-card {
  /* the file's card fill is plain white, not the page's cream */
  background: #fff;
  border: 1px solid var(--discover-card-border);
  border-radius: var(--radius-soft);
  padding: var(--space-lg);
  position: relative; /* own stacking context, paints over the chain */
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
/* marked, not lit up: border darkens to ink and a 2px ink flag
   appears on the left edge, like a chart entry marked as read —
   no lift, no shadow-as-elevation, no scale. */
.ews-discover-card:hover {
  border-color: var(--color-text-primary);
  box-shadow: inset 3px 0 0 var(--color-text-primary);
}
.ews-discover-card + .ews-discover-card { margin-top: var(--space-md); }
.ews-discover-card ul { margin: 0; padding-left: 1.2em; }
.ews-discover-card li {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.68;
  color: var(--color-text-secondary);
}

/* ---- "Inside the Kit" signboard cards (Figma 2026-09-10) — same
   card recipe as .ews-discover-card above (reused as-is: white fill,
   hairline border, soft radius, one bullet per card), same "hanging
   from a wire" idea, but this one sits mid-page rather than attached
   to the hero. .ews-discover-chain's -46px offset and viewport-
   center left/right calc only make sense stitched to the hero panel
   above Discover — here the chains just run the full height of this
   frame, inset inside its own 680px measure, so no hero math is
   needed. */
.ews-kit-frame { position: relative; }
.ews-kit-chain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--discover-card-border);
}
.ews-kit-chain--left  { left: 20px; }
.ews-kit-chain--right { right: 20px; }
@media (max-width: 767px) {
  .ews-kit-chain { display: none; }
}

/* ---- Pillars wrapper: bordered, rounded, soft pastel ground ---- */
.ews-pillars-wrap {
  border: 1px solid var(--pillars-wrap-border);
  border-radius: var(--radius-soft);
  overflow: hidden;
  background-image: url('https://ews-orders.earlywordsstudio.workers.dev/assets/pillars-wrapper-bg.49938dbba4.webp');
  /* The asset is the real Rectangle 28 export, whose 1:3 portrait
     proportions match the six-pillar block. The previous asset was
     landscape (1900x1267), so `cover` scaled it to ~4x width and
     only a zoomed sliver of the gradient was ever visible. */
  background-size: 100% 100%;
  background-position: center;
  padding: 0 var(--space-2xl);
}

/* ---- Founding Price eyebrow (new copy line above the price row) ---- */
.ews-eyebrow-inverse {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* ---- Sticky CTA Bar ----
   Hidden until scroll reaches "Introducing The Late Talker Kit"
   (the first mention of the offer) — see the toggle script inline
   in each page. Never visible during the argument-building sections. */
.ews-sticky-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  padding: var(--space-md) var(--space-2xl);
  background: var(--sticky-bar-bg);
  border-bottom: 1px solid var(--color-border-hairline);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  /* eased reveal: fades and settles down 6px instead of popping in
     via display:none/flex. Stays display:flex always so the
     transition has something to animate; pointer-events keeps it
     inert (and out of tab order isn't needed — it's not focusable
     content until visible, but this keeps clicks from landing on
     an invisible bar). */
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.ews-sticky-bar.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ews-sticky-bar__brand {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 19px;
  color: var(--color-text-primary);
  white-space: nowrap;
}
.ews-sticky-bar__nav {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: #454541;
}
.ews-sticky-bar__nav a { color: inherit; text-decoration: none; white-space: nowrap; }
/* drawn underline: a line extends left-to-right on hover/focus,
   like marking a line on a page, instead of the decoration just
   toggling on. Shared with the footer nav and the cookie-reopen
   link below. */
.ews-sticky-bar__nav a,
.ews-footer__links a,
.ews-consent-reopen {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 180ms ease-out;
}
.ews-sticky-bar__nav a:hover,
.ews-sticky-bar__nav a:focus-visible { background-size: 100% 1px; }
/* active-section state: whichever section is currently in view gets
   bolded and its underline stays drawn — an instrument telling you
   where you are, not just a hover affordance. Set by the
   IntersectionObserver at the bottom of the page. */
.ews-sticky-bar__nav a.is-current {
  color: var(--color-text-primary);
  font-weight: 600;
  background-size: 100% 1px;
}
.ews-sticky-bar__cta {
  background: var(--color-bg-cta);
  color: var(--color-text-on-cta);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: var(--space-sm) var(--space-lg);
  text-decoration: none;
  white-space: nowrap;
}
.ews-sticky-bar__cta:hover { background: var(--color-bg-cta-hover); }

@media (max-width: 767px) {
  .ews-sticky-bar__nav { display: none; }
  .ews-discover-rail { padding-left: 0; padding-right: 0; }
  .ews-pillars-wrap { padding: 0 var(--space-lg); }
}

/* ---- Masthead brand (Figma 12:229): logomark + wordmark.
   The mark is 39.86x40 in the file and sits left of the text. ---- */
.ews-masthead-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-primary);
}
.ews-masthead-brand__logomark {
  width: 40px;
  height: 40px;
  flex: none;
}

/* ============================================================
   FOOTER — Figma nodes 19:658 / 19:677 / 19:696 / 20:703-704.
   A full-bleed 1906x852 band: cream sky at the top dissolving
   into a hillside photograph, with the logomark + wordmark
   sitting over the hill. The links row is centred between two
   full-width hairlines and flanked by two vertical dividers.

   This replaces an 89px-tall row of three left-aligned links,
   which was the single largest structural gap against the file.
   ============================================================ */
.ews-footer {
  position: relative;
  width: 100%;
  /* Flat ink fill, not the hillside photo: the photo's fixed
     aspect-ratio scaled against fixed-px text/logo content broke on
     narrow viewports (the seam between the links band and the brand
     row drifted, and background-size hacks left it cropped or
     doubled). A solid fill sidesteps all of that — same dark-ink
     token the CTA buttons use, so links/logo (already styled white
     for a dark ground) still read correctly. */
  background: var(--color-bg-cta);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(56px, 8vw, 96px) 0 var(--space-md);
  overflow: hidden;
}
.ews-footer__links-band {
  position: relative;
  border-top: 1px solid rgba(255, 253, 237, 0.45);
  border-bottom: 1px solid rgba(255, 253, 237, 0.45);
  padding: var(--space-sm) 0;
}
/* the two vertical dividers (20:703/20:704), at 576px and 1342px of a
   1906px-wide frame — they run from the links band's own top hairline
   down through the brand row beneath to the footer's bottom edge, not
   just the thin links band. A fixed % of the footer's own height was
   tried first and drifted: the footer's height scales with viewport
   width via aspect-ratio, but the band/brand text sits at fixed px
   sizes, so the seam between them moves independently of that ratio.
   Anchoring top:0 to the band (which flexbox already places
   correctly) and running the line far past the footer's real bottom,
   clipped flush by .ews-footer's own overflow:hidden, tracks the
   actual rendered layout instead of a static ratio. */
.ews-footer__links-band::before,
.ews-footer__links-band::after {
  content: "";
  position: absolute;
  top: 0;
  height: 2000px;
  width: 1px;
  background: rgba(255, 253, 237, 0.45);
}
.ews-footer__links-band::before { left: 30.22%; }
.ews-footer__links-band::after  { left: 70.41%; }
.ews-footer__links {
  display: flex;
  justify-content: center;
  gap: 48px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.58;
  color: #FFFDED;
}
.ews-footer__links a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.ews-footer__links a:hover,
.ews-footer__links a:focus-visible { background-size: 100% 1px; }
.ews-footer__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-lg) 0 var(--space-md);
  color: #FFFFFF;
}
.ews-footer__logomark {
  /* 139.04 x 139.52 in the file; both dimensions set explicitly so
     the mark cannot be resized by a stray descendant rule. */
  width: 139px;
  height: 140px;
  flex: none;
  /* The mark is authored with fill="currentColor" so one file serves
     both placements, but an <img> is its own document and cannot
     inherit this page's color — inside it currentColor resolves to
     black. Over the hillside it has to be white, so the black is
     driven to pure white here. The masthead wants the black and
     needs no filter. */
  filter: brightness(0) invert(1);
}
.ews-footer__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 50px;
  line-height: 1.25;
  letter-spacing: -0.5px;
  color: #FFFFFF;
  margin: 0;
  white-space: nowrap;
  /* the file sets the wordmark a hair off-axis */
  transform: rotate(-0.23deg);
}

@media (max-width: 767px) {
  .ews-footer__brand { flex-direction: column; gap: var(--space-sm); }
  .ews-footer__logomark { width: 72px; height: 72px; }
  .ews-footer__wordmark { font-size: 32px; }
  .ews-footer__links { gap: var(--space-md); font-size: 14px; }
  .ews-footer__links-band::before { left: 50%; }
  .ews-footer__links-band::after  { display: none; }
}

/* ============================================================
   PHASE 10 — LEGAL / SUPPORTING PAGES (2026-09-08)
   Refund Policy, Terms, Privacy, Contact. Required live on the
   domain before Paddle will approve it (PLAN.md phase 10).

   These pages carry no argument and no offer, so two devices are
   deliberately ABSENT rather than merely unused:
     - the Zone Rail, which marks the argument (rail policy:
       "the rail marks the argument, not the offer" — a legal
       page has neither, so its presence would be noise);
     - the Sticky CTA Bar, which by its own Figma component note
       appears only from "Introducing The Late Talker Kit" onward.
   Everything else is composed from the existing token set: cream
   ground, 680px narrow-read measure, Newsreader prose, IBM Plex
   Mono for the instrument voice, hairline rules, zero radius.
   ============================================================ */

.ews-legal {
  max-width: var(--measure-text);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg) var(--space-4xl);
}

/* masthead row — brand left, return-to-page link right. The mono
   voice on the return link marks it as instrument chrome, not prose. */
.ews-legal__masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border-hairline);
}
.ews-legal__back {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.ews-legal__back:hover,
.ews-legal__back:focus-visible { color: var(--color-text-primary); }

.ews-legal__title { margin: var(--space-3xl) 0 0; }

/* the document's own data line — effective date, version, seller of
   record. Mono, because on this page those are instrument readings,
   not sentences. */
.ews-legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
/* the separator hangs off the END of the preceding item, never the
   start of the next one — as ::before it orphaned at the head of a
   wrapped line. A trailing separator at a line end is correct. */
.ews-legal__meta > span:not(:last-child)::after {
  content: "·";
  margin-left: var(--space-md);
  color: var(--color-text-faint);
}

.ews-legal__intro { margin-top: var(--space-xl); }

/* section rhythm: a hairline above every clause heading, so a long
   document reads as a ruled record rather than a wall. Matches the
   sales page's own divider-carries-the-break logic. */
.ews-legal__section { margin-top: var(--space-2xl); }
.ews-legal__section > .ews-heading {
  margin: 0 0 var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-hairline);
  font-size: clamp(19px, 1.6vw, 24px);
}
.ews-legal__section > .ews-body { margin: 0; }
.ews-legal__section > .ews-body + .ews-body { margin-top: 1.05em; }

/* numbered clause reference, mono, sitting above its heading — used
   only where the supplied document is genuinely clause-numbered. */
.ews-legal__clause {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2xs);
}

/* SOURCE SLOT — the honest build-time marker for text that has not
   been supplied yet. Deliberately mirrors .ews-image-slot: the
   project's existing convention is an open, labelled placeholder
   rather than invented filler. Every one of these must be gone
   before the domain goes to Paddle. */
.ews-source-slot {
  background: var(--color-bg-sunken);
  border: 1px solid var(--color-border-hairline);
  padding: var(--space-lg);
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.ews-source-slot__id {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ews-source-slot__note {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-faint);
}

@media (max-width: 767px) {
  .ews-legal { padding: var(--space-xl) var(--space-md) var(--space-3xl); }
  .ews-legal__masthead { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .ews-legal__title { margin-top: var(--space-2xl); }
}

/* ============================================================
   PHASE 10b — FUNNEL PAGES (2026-09-09)
   Thank-you / delivery page. Copy harvested from the previous
   funnel system (.Previous funnel system/thank-you.html), which
   was built in the retired visual system — teal #3ECFB2, Playfair
   + DM Sans, 18px radii, drop shadows, soft-green circle
   checkmarks and sage alert boxes. Nearly every device on that
   page is on the ban list, so the COPY carries over and the
   presentation is rebuilt from the existing token set.
   ============================================================ */

/* order status — the Clinical Chart reading of "confirmed" is an
   instrument readout, not a green tick in a circle. */
.ews-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-border-strong);
}
.ews-status__state {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}
.ews-status__detail {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* numbered clause list — used ONLY where the content is genuinely
   sequential, which the first-24-hours steps are (the copy itself
   says "just three steps" and is authored as an ordered list).
   Deliberately NOT the uppercase tracked mono stamp: that device
   is the top item on the anti-AI-slop list. These are document
   clause numerals in the display face, the same idiom a printed
   intake form uses. */
.ews-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ews-step;
}
.ews-steps > li {
  counter-increment: ews-step;
  position: relative;
  padding: var(--space-lg) 0 var(--space-lg) 64px;
  border-top: 1px solid var(--color-border-hairline);
}
.ews-steps > li:first-child { border-top: 0; padding-top: var(--space-xs); }
.ews-steps > li::before {
  content: counter(ews-step);
  position: absolute;
  left: 0;
  top: var(--space-lg);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 40px;
  line-height: 0.9;
  color: var(--color-text-faint);
}
.ews-steps > li:first-child::before { top: var(--space-xs); }

/* the delivery manifest reuses .ews-table's ruled rows but carries
   no price column — it is a record of what the buyer now owns. */
.ews-manifest { width: 100%; border-collapse: collapse; }
.ews-manifest td {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.5;
  color: var(--color-text-secondary);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-hairline);
}
.ews-manifest tr:last-child td { border-bottom: 0; }

@media (max-width: 767px) {
  .ews-steps > li { padding-left: 48px; }
  .ews-steps > li::before { font-size: 30px; }
}

/* The footer's two vertical rules are decorative and percentage-
   positioned (30.22% / 70.41%, Figma nodes 20:703-704), while the
   link nav is content-width and centred. With three links they sit
   clear of the cluster. A fourth link widens it far enough that the
   left rule strikes through the first link, and no gap value fixes
   this at every viewport — the two systems are independent.
   INTERIM, pending Ali's call on the fourth link: suppress the
   decorative rules on four-link footers. Reversible in one line. */
.ews-footer--wide-nav .ews-footer__links-band::before,
.ews-footer--wide-nav .ews-footer__links-band::after { display: none; }

/* ============================================================
   PHASE 10c — CONSENT GATE (2026-09-09)
   Bottom-anchored band. Ink ground, which is deliberate and does
   NOT break the "ink-ground exactly twice" rule (Hero, Founding
   Price): that rule governs sections in the scroll composition.
   This is overlay chrome, shown once and dismissed, and it has to
   be unmissable against a cream page.

   The two buttons are IDENTICAL by design — same fill, size,
   weight and face. Under EU guidance rejecting must be as easy as
   accepting, and a quiet "reject" link beside a solid "accept"
   button is the usual way a banner fails review. Do not restyle
   one to be more prominent than the other.

   Colour rule holds: ink and paper only, no chroma, because
   chroma on this page only ever means a Zone-Match tier.
   Sits above the sticky bar (z-index 50) and the mobile rail.
   ============================================================ */

.ews-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--ink-900);
  color: var(--paper-base);
  border-top: 2px solid var(--rule-strong);
  padding: var(--space-lg) var(--space-2xl);
}
.ews-consent__inner {
  max-width: var(--measure-page);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
}
.ews-consent__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin: 0 0 var(--space-xs);
}
.ews-consent__text {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.55;
  color: var(--paper-base);
  margin: 0;
  max-width: 62ch;
}
.ews-consent__text a { color: var(--paper-base); }
.ews-consent__actions {
  display: flex;
  gap: var(--space-sm);
  flex: none;
}
.ews-consent__btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: var(--space-md) var(--space-lg);
  background: var(--paper-base);
  color: var(--ink-900);
  border: 1px solid var(--paper-base);
  cursor: pointer;
  white-space: nowrap;
  /* equal width, not merely equal weight — removes any argument
     that one option is presented more prominently. */
  min-width: 200px;
}
.ews-consent__btn:hover { background: #FFFFFF; border-color: #FFFFFF; }
.ews-consent__btn:focus-visible {
  outline: 2px solid var(--paper-base);
  outline-offset: 3px;
}

/* footer link that reopens the banner, so consent stays withdrawable */
.ews-consent-reopen {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.ews-consent-reopen:hover,
.ews-consent-reopen:focus-visible { background-size: 100% 1px; }

@media (max-width: 900px) {
  .ews-consent { padding: var(--space-md); }
  .ews-consent__inner { flex-direction: column; align-items: stretch; gap: var(--space-md); }
  .ews-consent__actions { flex-direction: column; }
  .ews-consent__btn { width: 100%; min-width: 0; }
}

/* ============================================================
   MOBILE FIXES (2026-09-18 live mobile check at 375px)
   1. Footer nav: five links in a nowrap row overflowed a phone
      screen, clipping "Terms of service" and "Cookie preferences".
      Wrap and center them instead.
   2. Sticky CTA bar: the brand label plus the 22px CTA were wider
      than the viewport, so the button was cut off at the right
      edge. Below 600px the brand label goes and the CTA fills the
      bar, so the one action on the bar is always fully visible.
============================================================ */
@media (max-width: 767px) {
  .ews-footer__links {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-xs);
    column-gap: var(--space-lg);
    padding: 0 var(--space-md);
  }
}
@media (max-width: 600px) {
  .ews-sticky-bar {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-sm);
  }
  .ews-sticky-bar__brand { display: none; }
  .ews-sticky-bar__cta,
  a.ews-sticky-bar__cta {
    flex: 1;
    text-align: center;
    white-space: nowrap;
    font-size: 16px;
    padding: var(--space-sm) var(--space-md);
  }
}

/* Unfilled image slots (IMG-02, IMG-09, IMG-13 on 2026-09-18) are hidden
   on the live pages, caption included, until the real image replaces the
   slot. Swapping the .ews-image-slot div for an <img> makes the figure
   reappear automatically. */
.ews-figure:has(.ews-image-slot) { display: none; }

/* ---- Early Words Studio logo (2026-09-25).
   Full lockups (sprout + wordmark) from /early-words-studio-logo, replacing
   the placeholder sunburst logomark + separate text wordmark. Each file is
   already coloured for its ground, so no filters:
     logo.svg                   navy text  -> light grounds (masthead, sticky bar)
     logo-white-one-colour.svg  all white  -> the teal hero sky
     logo-for-dark-backgrounds  cream text -> the dark footer
   Sized by height; width follows the file's own ratio. ---- */
.ews-logo { display: block; width: auto; max-width: 100%; height: auto; object-fit: contain; }
.ews-logo--sticky   { height: 30px; }
.ews-logo--hero     { height: 48px; max-width: none; } /* its centred absolute wrapper would otherwise cap it at 50% width */
.ews-logo--masthead { height: 44px; }
.ews-logo--footer   { height: 105px; }
@media (max-width: 767px) {
  .ews-logo--hero     { height: 40px; }
  .ews-logo--masthead { height: 36px; }
  .ews-logo--footer   { height: auto; width: min(320px, 100%); }
}

/* --- demo.css --- */
/* ==============================================================
   DEMO — design exploration layer. Loaded ONLY by demo.html,
   after tokens.css. Nothing here touches variants A/B/C.
   Direction: "warm clinical" — the sky hero's calm carried down
   the page, with the Zone-Match system giving it structure.
   ============================================================== */

.demo {
  --paper-base: #FFFFFF;
  --ink-body: #2A2A27;
  --sky-wash: #EEF5F8;
  --sky-rule: #BFD6E0;
  --radius-soft: 0;
  --radius-panel: 0;
  --color-bg-page: #FFFFFF;
  background: #FFFFFF;
}
html:has(body.demo) { background: #FFFFFF; scroll-behavior: auto; }
.demo main, .demo .ews-band, .demo .ews-discover-frame { background-color: #FFFFFF; }


/* ---------- 2. One CTA: ink --------------------------------------- */
.demo .ews-cta,
.demo .ews-cta--hero,
.demo .ews-sticky-bar__cta {
  background: #1A1A18; color: #fff; border: 1px solid #1A1A18;
}
.demo .ews-cta:hover, .demo .ews-sticky-bar__cta:hover { background: #4A4A46; }
.demo .ews-cta--inverse { background: #fff; color: #1A1A18; border-color: #fff; }
.demo .ews-cta--inverse:hover { background: var(--sky-wash); }

/* ---------- 3. Reading: bigger, darker ---------------------------- */
.demo .ews-body p,
.demo .ews-body li { font-size: 19px; line-height: 1.7; color: var(--ink-body); }
@media (max-width: 600px) { .demo .ews-body p { font-size: 18px; } }

/* Pull statements: the lines that carry the argument */
.demo .ews-body .demo-pull {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #1A1A18;
  margin: 48px 0;
  padding-top: 20px;
  border-top: 1px solid #1A1A18;
  max-width: 22ch;
}
.demo .ews-body .demo-pull--question { font-style: italic; border-top: 0; padding-top: 0; }
.demo .ews-body .demo-pull--xl {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  border-top: 3px solid #1A1A18;
  max-width: none;
}
@media (min-width: 1100px) {
  /* hang pulls into the left margin: breaks the single 680 column */
  .demo .ews-body .demo-pull { margin-left: -140px; max-width: 26ch; }
  .demo .ews-body .demo-pull--xl { margin-left: -140px; margin-right: -140px; }
}

/* Definition rows: "Term: explanation" set as a ruled list */
.demo .ews-body .demo-def {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 16px 0;
  margin: 0;
  border-top: 1px solid var(--color-border-hairline);
}
.demo .ews-body .demo-def + :not(.demo-def) { border-top: 1px solid var(--color-border-hairline); padding-top: 20px; }
.demo .ews-body .demo-def strong {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #1A1A18;
}
@media (min-width: 820px) {
  .demo .ews-measure .ews-body .demo-def { grid-template-columns: 200px 1fr; gap: 24px; }
  .demo .ews-measure .ews-body .demo-def strong { padding-top: 5px; }
}

/* ---------- 4. Stories as scenes ---------------------------------- */
.demo .demo-duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin: 32px 0; border-top: 1px solid #1A1A18; border-bottom: 1px solid #1A1A18;
}
.demo .demo-duo p { margin: 0 !important; padding: 24px 24px 24px 0; }
.demo .demo-duo p + p { padding: 24px 0 24px 24px; border-left: 1px solid var(--color-border-hairline); color: #4A4A46; }
@media (min-width: 1100px) { .demo .demo-duo { margin-left: -140px; margin-right: -140px; } }
@media (max-width: 600px) {
  .demo .demo-duo { grid-template-columns: 1fr; }
  .demo .demo-duo p, .demo .demo-duo p + p { padding: 20px 0; border-left: 0; }
  .demo .demo-duo p + p { border-top: 1px solid var(--color-border-hairline); }
}

.demo .demo-scene {
  background: var(--sky-wash);
  border-top: 1px solid var(--sky-rule);
  border-bottom: 1px solid var(--sky-rule);
  padding: 48px clamp(20px, 5vw, 64px);
  margin-left: calc(-1 * clamp(20px, 5vw, 64px));
  margin-right: calc(-1 * clamp(20px, 5vw, 64px));
}
.demo .demo-scene p:first-child {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(24px, 2.6vw, 30px); line-height: 1.25; color: #1A1A18;
}
.demo .demo-scene p:nth-child(9) { /* the relative's question */
  font-family: var(--font-display); font-size: 24px; line-height: 1.35;
}
.demo .demo-scene .demo-pull { border-top-color: var(--sky-rule); }

/* ---------- 5. Ruled index instead of card stacks ----------------- */
.demo .ews-discover-chain, .demo .ews-kit-chain { display: none; }
.demo .demo-index {
  list-style: none; margin: 0; padding: 0; counter-reset: idx;
  border-top: 1px solid #1A1A18;
}
.demo .demo-index li {
  counter-increment: idx;
  display: grid; grid-template-columns: 48px 1fr; column-gap: 16px;
  padding: 20px 0; border-bottom: 1px solid var(--color-border-hairline);
  font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--ink-body);
}
.demo .demo-index li::before {
  content: counter(idx, decimal-leading-zero);
  font-family: var(--font-display); font-size: 28px; line-height: 1; color: #6E6E68;
  grid-row: span 2;
}
.demo .demo-index li strong {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 21px; line-height: 1.3; color: #1A1A18; margin-bottom: 4px;
}
.demo .demo-index .demo-index__note {
  display: block; counter-increment: none; border-bottom: 0;
  font-style: italic; color: #4A4A46; padding-top: 28px;
}
.demo .demo-index .demo-index__note::before { content: none; }
@media (min-width: 1000px) {
  .demo .demo-index--kit {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px;
    margin-left: -110px; margin-right: -110px;
  }
  .demo .demo-index--kit .demo-index__note { grid-column: 1 / -1; }
}

/* ---------- 6. Zone-Match tiers as a staircase of stages ---------- */
.demo .ews-zone-figure__tiers { align-items: flex-end; gap: 6px; }
.demo .ews-zone-figure__tier { display: flex; flex-direction: column; justify-content: flex-end; }
.demo .ews-zone-figure__swatch { position: relative; aspect-ratio: auto !important; }
.demo .ews-zone-figure__tier:nth-child(1) .ews-zone-figure__swatch { height: 80px; }
.demo .ews-zone-figure__tier:nth-child(2) .ews-zone-figure__swatch { height: 130px; }
.demo .ews-zone-figure__tier:nth-child(3) .ews-zone-figure__swatch { height: 180px; }
.demo .ews-zone-figure__tier:nth-child(4) .ews-zone-figure__swatch { height: 230px; }
.demo .demo-step {
  position: absolute; left: 14px; top: 10px;
  font-family: var(--font-display); font-size: 32px; line-height: 1; color: rgba(255,255,255,.92);
}

/* ---------- 7. The Zone Rail: resolves as the argument is read --- */
.demo-rail {
  position: fixed; left: 24px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 4px; z-index: 40;
  opacity: 0; transition: opacity 300ms ease; pointer-events: none;
}
.demo-rail.is-visible { opacity: 1; }
.demo-rail span { width: 4px; height: 56px; background: #D6D6D2; transition: background 400ms ease; }
.demo-rail span.is-on:nth-child(1) { background: var(--zone-red); }
.demo-rail span.is-on:nth-child(2) { background: var(--zone-yellow); }
.demo-rail span.is-on:nth-child(3) { background: var(--zone-green); }
.demo-rail span.is-on:nth-child(4) { background: var(--zone-blue); }
@media (max-width: 900px) { .demo-rail { display: none; } }

/* ---------- 8. Surfaces: no washes, hairline plates -------------- */
.demo .ews-pillars-wrap { background: none !important; border: 0; border-top: 1px solid #1A1A18; border-bottom: 1px solid #1A1A18; }
.demo .ews-card { background: #fff; border: 1px solid var(--color-border-hairline); }
.demo .ews-card--fast { background: var(--sky-wash); border: 2px solid #1A1A18; }
.demo .ews-panel:not(.demo-founding) {
  background: var(--sky-wash); border: 0;
  border-top: 1px solid var(--sky-rule); border-bottom: 1px solid var(--sky-rule);
}

/* ---------- 9. Value stack as a ledger ---------------------------- */
.demo .demo-ledger { border-top: 2px solid #1A1A18; }
.demo .demo-ledger th { background: none; border-bottom: 1px solid #1A1A18; }
.demo .demo-ledger td { font-size: 17px; color: var(--ink-body); padding-top: 14px; padding-bottom: 14px; }
.demo .demo-ledger td:last-child, .demo .demo-ledger th:last-child { text-align: right; font-family: var(--font-mono); }
.demo .demo-ledger tbody tr:not(.ews-table__total) td { border-bottom: 1px dashed var(--color-border-hairline); }
.demo .demo-ledger .ews-table__total td {
  border-top: 3px double #1A1A18; border-bottom: 2px solid #1A1A18;
  font-family: var(--font-display); font-weight: 600; font-size: 22px; background: none;
}

.demo .demo-founding { padding: clamp(32px, 6vw, 72px) !important; }

/* ---------- 10. Guarantee as a certificate ------------------------ */
.demo .demo-cert {
  position: relative; background: #fff;
  border: 1px solid #1A1A18; outline: 1px solid #1A1A18; outline-offset: 8px;
  margin: 8px; padding: clamp(32px, 6vw, 72px);
}
.demo .demo-cert > img { float: none !important; display: block; margin: 0 auto 24px !important; }
.demo .demo-cert > h2 {
  text-align: center; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 4vw, 48px); padding-bottom: 24px; border-bottom: 1px solid #1A1A18;
}
.demo .demo-cert .ews-body p:last-child {
  font-family: var(--font-display); font-size: 24px; line-height: 1.35; color: #1A1A18;
  text-align: center; padding-top: 24px; border-top: 1px solid var(--color-border-hairline); margin-top: 24px;
}

/* ---------- 11. Sticky bar: never clip the CTA -------------------- */
@media (max-width: 1240px) { .demo .ews-sticky-bar__nav { display: none; } }

/* ==============================================================
   THEME: PLAYFUL WARM EDITORIAL (2026-09-19)
   Overrides everything above. Rounded boxes, drop shadows,
   warm paper, a magazine feel. Ink stays the only CTA colour.
   ============================================================== */
.demo {
  --warm-paper: #FBF4EA;
  --warm-card:  #FFFDF9;
  --warm-peach: #F6DCC8;
  --warm-butter:#F7E7B4;
  --warm-sky:   #DCEBF1;
  --warm-ink:   #2B2420;
  --warm-rule:  #E6D8C6;
  --r-sm: 12px; --r-md: 20px; --r-lg: 28px;
  --shadow-soft: 0 1px 2px rgba(60,40,20,.06), 0 8px 24px -8px rgba(60,40,20,.18);
  --shadow-lift: 0 2px 4px rgba(60,40,20,.08), 0 18px 40px -12px rgba(60,40,20,.28);
  --shadow-pop:  5px 5px 0 var(--warm-ink);
  --color-bg-page: var(--warm-paper);
  background: var(--warm-paper);
}
html:has(body.demo), .demo main, .demo .ews-band, .demo .ews-discover-frame { background-color: var(--warm-paper) !important; }
.demo .ews-body p, .demo .ews-body li, .demo .demo-index li { color: var(--warm-ink); }

/* Hero: a rounded, lifted window */
.demo .ews-hero-sky { border-radius: var(--r-lg); box-shadow: var(--shadow-lift); overflow: hidden; }
.demo .ews-hero__headline { text-wrap: balance; }

/* Buttons: ink pills with a playful hard offset shadow */
.demo .ews-cta, .demo .ews-sticky-bar__cta {
  background: var(--warm-ink); color: #fff; border: 2px solid var(--warm-ink);
  border-radius: 999px; box-shadow: 4px 4px 0 var(--warm-peach);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.demo .ews-cta:hover, .demo .ews-sticky-bar__cta:hover {
  background: var(--warm-ink); transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--warm-peach);
}
.demo .ews-cta--hero { box-shadow: 4px 4px 0 #fff; }
.demo .ews-cta--inverse { background: var(--warm-butter); color: var(--warm-ink); border-color: var(--warm-butter); box-shadow: 4px 4px 0 #fff; }
.demo .ews-sticky-bar { background: rgba(251,244,234,.92); backdrop-filter: blur(8px); box-shadow: var(--shadow-soft); }

/* Pull statements: highlighter swipe instead of a hard rule */
.demo .ews-body .demo-pull { border-top: 0; padding-top: 0; }
.demo .ews-body .demo-pull::first-line { }
.demo .ews-body .demo-pull {
  background: linear-gradient(transparent 58%, var(--warm-butter) 58%, var(--warm-butter) 92%, transparent 92%);
  display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.demo .ews-body p.demo-pull { display: block; width: fit-content; }
.demo .ews-body .demo-pull--question { background: none; color: #8A5A3C; }
.demo .ews-body .demo-pull--xl {
  border-top: 0; background: var(--warm-card); padding: 40px 48px;
  border-radius: var(--r-lg); box-shadow: var(--shadow-pop); border: 2px solid var(--warm-ink);
  transform: rotate(-1deg); width: auto;
}

/* Definition rows become soft chips */
.demo .ews-body .demo-def { border-top: 0; background: var(--warm-card); border-radius: var(--r-sm); padding: 16px 20px; margin: 8px 0; box-shadow: var(--shadow-soft); }
.demo .ews-body .demo-def + :not(.demo-def) { border-top: 0; }
.demo .ews-body .demo-def strong { color: #8A5A3C; }

/* Two Mothers: two tilted cards */
.demo .demo-duo { border: 0; gap: 20px; }
.demo .demo-duo p, .demo .demo-duo p + p {
  padding: 28px !important; border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-lift);
}
.demo .demo-duo p { background: var(--warm-sky); transform: rotate(-1.2deg); }
.demo .demo-duo p + p { background: var(--warm-peach); transform: rotate(1.2deg); color: var(--warm-ink); }
@media (max-width: 600px) { .demo .demo-duo p, .demo .demo-duo p + p { transform: none; } }

/* Tuesday scene: a rounded magazine sidebar */
.demo .demo-scene {
  background: var(--warm-card); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-lift);
  margin-left: 0; margin-right: 0;
}
@media (min-width: 1100px) { .demo .demo-scene { margin-left: -80px; margin-right: -80px; } }
.demo .demo-scene .demo-pull { background: linear-gradient(transparent 58%, var(--warm-sky) 58%, var(--warm-sky) 92%, transparent 92%); }

/* Numbered lists as a stack of rounded cards */
.demo .demo-index { border-top: 0; display: grid; gap: 14px; }
.demo .demo-index li {
  background: var(--warm-card); border: 0; border-radius: var(--r-md);
  padding: 22px 24px; box-shadow: var(--shadow-soft);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.demo .demo-index li:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.demo .demo-index li::before {
  color: var(--warm-ink); background: var(--warm-butter); border-radius: 50%;
  width: 44px; height: 44px; display: grid; place-items: center; font-size: 18px;
}
.demo .demo-index .demo-index__note { background: none; box-shadow: none; }
@media (min-width: 1000px) { .demo .demo-index--kit { column-gap: 18px; row-gap: 18px; } }

/* Tier staircase: rounded blocks */
.demo .ews-zone-figure__swatch { border-radius: var(--r-md) var(--r-md) 6px 6px; box-shadow: var(--shadow-soft); }

/* Surfaces */
.demo .ews-pillars-wrap { background: var(--warm-card) !important; border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-lift); }
.demo .ews-pillar__media img { border-radius: var(--r-md); box-shadow: var(--shadow-lift); border: 0 !important; }
.demo .ews-figure img { border-radius: var(--r-md); box-shadow: var(--shadow-lift); }
.demo .ews-card { background: var(--warm-card); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-soft); }
.demo .ews-card--fast { background: var(--warm-butter); border: 2px solid var(--warm-ink); box-shadow: var(--shadow-pop); }
.demo .ews-panel:not(.demo-founding) { background: var(--warm-sky); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-soft); }
.demo .demo-founding { border-radius: var(--r-lg) !important; box-shadow: var(--shadow-lift); background: var(--warm-ink) !important; }
.demo .ews-faq__item { background: var(--warm-card); border-radius: var(--r-md); box-shadow: var(--shadow-soft); padding: 4px 24px; margin-bottom: 12px; border: 0; }

/* Ledger: a receipt card */
.demo .demo-ledger { background: var(--warm-card); border-radius: var(--r-md); box-shadow: var(--shadow-lift); border-top: 0; overflow: hidden; }
.demo .demo-ledger th { padding-top: 20px; }
.demo .demo-ledger .ews-table__total td { background: var(--warm-butter); }

/* Guarantee: a rounded certificate with a pop shadow */
.demo .demo-cert { border: 2px solid var(--warm-ink); outline: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-pop); background: var(--warm-card); }
.demo .demo-cert > h2 { border-bottom-color: var(--warm-rule); }
.demo .demo-cert > img { transform: rotate(-8deg); filter: drop-shadow(0 8px 12px rgba(60,40,20,.25)); }
.demo .demo-cert .ews-body p:last-child { border-top-color: var(--warm-rule); }

.demo .demo-rail span { border-radius: 999px; }

/* The live pages scope a global no-radius/no-shadow ban to .ews-page.
   The demo body drops that class, so re-add what else it carried. */
.demo ::selection { background: var(--warm-ink); color: var(--warm-paper); }
.demo a:focus-visible, .demo button:focus-visible, .demo summary:focus-visible { outline: 2px solid var(--warm-ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .demo *, .demo *::before, .demo *::after { transition: none !important; animation: none !important; }
  .demo .demo-duo p, .demo .demo-pull--xl { transform: none !important; }
}

/* ==============================================================
   DEMO ONLY: typography options, switched by body[data-type].
   display = headlines, body = reading copy, mono = labels/small.
   ============================================================== */
body.demo[data-type="1"] {
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Nunito Sans', 'Segoe UI', sans-serif;
  --font-mono: 'Fraunces', Georgia, serif;
}
body.demo[data-type="1"] :is(h1, h2, h3, .demo-pull, .demo-step, .demo-index li::before) {
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
body.demo[data-type="1"] .demo-def strong { font-style: italic; font-size: 16px; letter-spacing: 0; }

body.demo[data-type="2"] {
  --font-display: 'Young Serif', Georgia, serif;
  --font-body: 'DM Sans', 'Segoe UI', sans-serif;
  --font-mono: 'DM Sans', 'Segoe UI', sans-serif;
}
body.demo[data-type="2"] :is(h1, h2, h3, .demo-pull) { font-weight: 400 !important; }
body.demo[data-type="2"] .demo-def strong,
body.demo[data-type="2"] .ews-mono-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 700; }

body.demo[data-type="3"] {
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Inter Tight', 'Segoe UI', sans-serif;
  --font-mono: 'Instrument Serif', Georgia, serif;
}
body.demo[data-type="3"] :is(h1, h2, h3) { font-weight: 400 !important; letter-spacing: -0.01em; }
body.demo[data-type="3"] h1 { font-size: clamp(44px, 6.4vw, 88px); line-height: 1.02; }
body.demo[data-type="3"] .demo-pull { font-style: italic; font-weight: 400; }
body.demo[data-type="3"] .demo-def strong { font-style: italic; font-size: 18px; letter-spacing: 0; }

body.demo[data-type="4"] {
  --font-display: 'Gloock', Georgia, serif;
  --font-body: 'Figtree', 'Segoe UI', sans-serif;
  --font-mono: 'Figtree', 'Segoe UI', sans-serif;
}
body.demo[data-type="4"] :is(h1, h2, h3, .demo-pull) { font-weight: 400 !important; }
body.demo[data-type="4"] .demo-def strong { font-weight: 700; font-size: 14px; letter-spacing: 0; }

body.demo[data-type="5"] {
  --font-display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
  --font-body: 'Lora', Georgia, serif;
  --font-mono: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
}
body.demo[data-type="5"] :is(h1, h2, h3) { font-weight: 700 !important; letter-spacing: -0.03em; }
body.demo[data-type="5"] .demo-pull { font-weight: 600; letter-spacing: -0.02em; }
body.demo[data-type="5"] .ews-body p { font-size: 18px; }

/* The switcher itself */
.demo-typeswitch {
  position: fixed; right: 16px; bottom: 16px; z-index: 200;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  max-width: calc(100vw - 32px);
  padding: 8px; background: #2B2420; border-radius: 16px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,.4);
  font: 500 13px/1 'Segoe UI', system-ui, sans-serif;
}
.demo-typeswitch__label { margin: 0 4px 0 6px; color: #F7E7B4; font: inherit; }
.demo-typeswitch button {
  font: inherit; color: #FBF4EA; background: transparent; cursor: pointer;
  border: 1px solid rgba(251,244,234,.25); border-radius: 999px; padding: 8px 12px;
}
.demo-typeswitch button:hover { border-color: #FBF4EA; }
.demo-typeswitch button[aria-pressed="true"] { background: #F7E7B4; color: #2B2420; border-color: #F7E7B4; }
@media (max-width: 600px) { .demo-typeswitch { left: 16px; right: 16px; bottom: 12px; } .demo-typeswitch__label { display: none; } }

/* --- merge-scrapbook.css --- */
/* ==============================================================
   MERGE 1 — WARM EDITORIAL + SCRAPBOOK PROPS.
   Loaded after demo.css by demo-merge-1.html only.
   The editorial base carries all the reading. Scrapbook objects
   appear ONLY where the copy describes the parent's real home life:
   the fridge Word Wall, the Tuesday diary, the two mothers, the
   printables, the receipt, the guarantee stamp. One handwriting
   font, used for small annotations only.
   ============================================================== */

.demo { --sb-hand: 'Caveat', cursive; --sb-type: 'Special Elite', 'Courier New', monospace; --sb-tape: rgba(245, 232, 190, .8); }

/* captions become handwritten annotations */
.demo .ews-image-slot__caption, .demo figcaption {
  font-family: var(--sb-hand) !important; font-size: 22px !important; line-height: 1.2; font-style: normal !important;
  letter-spacing: 0 !important; text-transform: none !important; color: #5A4E44 !important;
}

/* ---- the fridge Word Wall: taped sheet held by a magnet ---- */
.demo .ews-figure:has(img[src*="word-wall"]) {
  position: relative; background: #fff; padding: 14px 14px 18px; transform: rotate(-1.2deg);
  box-shadow: 0 2px 3px rgba(0,0,0,.08), 0 22px 36px -18px rgba(60,40,20,.45);
}
.demo .ews-figure:has(img[src*="word-wall"]) img { border-radius: 0 !important; box-shadow: none !important; }
.demo .ews-figure:has(img[src*="word-wall"])::before {
  content: ""; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FF9B87, #D8412F 60%); box-shadow: 0 4px 6px rgba(0,0,0,.3);
}

/* ---- the Communication Snapshot photo: taped to the page ---- */
.demo .ews-figure:has(img[src*="snapshot"]) { position: relative; background: #fff; padding: 12px 12px 16px; transform: rotate(1deg); box-shadow: 0 20px 32px -18px rgba(60,40,20,.45); }
.demo .ews-figure:has(img[src*="snapshot"]) img { border-radius: 0 !important; box-shadow: none !important; }
.demo .ews-figure:has(img[src*="snapshot"])::before, .demo .ews-pillar__media::before {
  content: ""; position: absolute; z-index: 2; top: -12px; left: 50%; width: 110px; height: 28px; transform: translateX(-50%) rotate(-4deg);
  background: var(--sb-tape); border-left: 2px dotted rgba(0,0,0,.07); border-right: 2px dotted rgba(0,0,0,.07);
}

/* ---- Tuesday: a lined diary page, opening line in handwriting ---- */
.demo .demo-scene {
  background: #FFFEF8 !important; border-radius: 4px !important; transform: rotate(.4deg);
  background-image: linear-gradient(90deg, transparent 44px, rgba(216,65,47,.35) 44px 46px, transparent 46px),
                    repeating-linear-gradient(180deg, transparent 0 33px, rgba(47,95,179,.16) 33px 34px) !important;
  padding-left: clamp(56px, 7vw, 76px) !important;
}
.demo .demo-scene p:first-child { font-family: var(--sb-hand) !important; font-weight: 700; font-size: clamp(30px, 3vw, 38px) !important; line-height: 1.05 !important; color: #2F5FB3 !important; font-style: normal !important; }

/* ---- Two Mothers: two notes pinned to a board ---- */
.demo .demo-duo p, .demo .demo-duo p + p { border-radius: 3px !important; position: relative; }
.demo .demo-duo p { background: #FFFEF8 !important; }
.demo .demo-duo p + p { background: #F4EFE6 !important; }
.demo .demo-duo p::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9FE0B0, #3E8F57 65%); box-shadow: 0 3px 4px rgba(0,0,0,.3);
}
.demo .demo-duo p + p::before { background: radial-gradient(circle at 35% 30%, #FFB0A3, #C8412E 65%); }

/* ---- pillar printables: polaroids ---- */
.demo .ews-pillar__media { position: relative; background: #fff; padding: 10px 10px 34px; transform: rotate(-1.6deg); box-shadow: 0 18px 30px -16px rgba(60,40,20,.45); }
.demo .ews-pillar--flip .ews-pillar__media { transform: rotate(1.6deg); }
.demo .ews-pillar__media img { border-radius: 0 !important; box-shadow: none !important; }

/* ---- the price: a till receipt ---- */
.demo .demo-ledger {
  max-width: 540px; margin-left: auto !important; margin-right: auto !important; border-radius: 0 !important;
  background: #fff !important; font-family: var(--sb-type); box-shadow: 0 20px 34px -18px rgba(60,40,20,.45) !important;
  clip-path: polygon(0 0, 100% 0, 100% 98%, 96% 100%, 92% 98%, 88% 100%, 84% 98%, 80% 100%, 76% 98%, 72% 100%, 68% 98%, 64% 100%, 60% 98%, 56% 100%, 52% 98%, 48% 100%, 44% 98%, 40% 100%, 36% 98%, 32% 100%, 28% 98%, 24% 100%, 20% 98%, 16% 100%, 12% 98%, 8% 100%, 4% 98%, 0 100%);
}
.demo .demo-ledger th, .demo .demo-ledger td { font-family: var(--sb-type) !important; background: none !important; border-bottom: 1px dashed rgba(0,0,0,.25) !important; font-size: 15px !important; }
.demo .demo-ledger .ews-table__total td { border-top: 2px dashed var(--warm-ink) !important; border-bottom: 0 !important; font-size: 18px !important; padding-bottom: 28px !important; }

/* ---- the guarantee: a rubber stamp on the certificate ---- */
.demo .demo-cert > h2 {
  display: inline-block; color: #C8412E !important; border: 4px double #C8412E; padding: 6px 16px !important;
  transform: rotate(-2.5deg); text-transform: uppercase; letter-spacing: .04em !important; font-size: clamp(24px, 3vw, 36px) !important;
  border-bottom-color: #C8412E !important; opacity: .92;
}
/* one handwritten note beside the closing line of the guarantee */
.demo .demo-cert .ews-body p:last-child { font-family: var(--sb-hand) !important; font-weight: 700; font-size: 30px !important; line-height: 1.15 !important; }

@media (max-width: 600px) { .demo .demo-scene { padding-left: 52px !important; } }

/* ==============================================================
   Ali's review, 2026-09-20
   ============================================================== */

/* 1. Calmer shape language: small radii, barely-there shadows */
.demo {
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px;
  --shadow-soft: 0 1px 2px rgba(60,40,20,.05), 0 4px 10px -6px rgba(60,40,20,.12);
  --shadow-lift: 0 1px 2px rgba(60,40,20,.06), 0 8px 18px -12px rgba(60,40,20,.18);
  --shadow-pop:  2px 2px 0 rgba(43,36,32,.18);
}
.demo .ews-hero-sky { border-radius: 10px !important; box-shadow: 0 8px 20px -14px rgba(60,40,20,.25) !important; }
.demo .ews-figure:has(img[src*="word-wall"]), .demo .ews-figure:has(img[src*="snapshot"]), .demo .ews-pillar__media, .demo .demo-ledger {
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 18px -12px rgba(60,40,20,.28) !important;
}

/* 2. Discover points: no bold lead-ins, one even weight for all five */
.demo .demo-index--discover li strong { font: inherit !important; color: inherit !important; display: inline !important; margin: 0 !important; }

/* 3. Pull-out lines: no highlighter, no size jump. Instead they stay body
   size and read as the parent's own margin notes: a short handwritten
   tick in the margin and a slightly darker ink. The argument keeps one
   voice and one size; the key lines are still findable on a skim. */
.demo .ews-body .demo-pull,
.demo .ews-body .demo-pull--xl,
.demo .ews-body .demo-pull--question {
  display: block !important; width: auto !important; max-width: none !important; transform: none !important;
  margin: 0 0 20px !important; padding: 0 0 0 0 !important; position: relative;
  font-family: var(--font-body) !important; font-size: 19px !important; line-height: 1.7 !important; font-weight: 600 !important;
  font-style: normal !important; letter-spacing: 0 !important; color: var(--warm-ink) !important;
  background: none !important; border: 0 !important; box-shadow: none !important; text-shadow: none !important;
}
.demo .ews-body .demo-pull::before {
  content: "✓" / ""; position: absolute; left: -34px; top: -2px;
  font-family: var(--sb-hand); font-size: 30px; font-weight: 700; line-height: 1; color: #C8412E; transform: rotate(-8deg);
}
@media (max-width: 1000px) { .demo .ews-body .demo-pull::before { position: static; display: inline-block; margin-right: 8px; transform: rotate(-8deg) translateY(4px); } }

/* 4. "Term: explanation" lines: back to plain paragraphs, no boxes or table */
.demo .ews-body .demo-def {
  display: block !important; grid-template-columns: none !important; padding: 0 !important; margin: 0 0 20px !important;
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
.demo .ews-body .demo-def strong {
  display: inline !important; padding: 0 !important; font-family: var(--font-body) !important; font-size: inherit !important;
  font-style: normal !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--warm-ink) !important;
}

/* 5. Less empty space between and around sections */
.demo main > .ews-band, .demo main > section { padding-top: clamp(36px, 5vw, 72px) !important; padding-bottom: clamp(36px, 5vw, 72px) !important; }
.demo main > section:has(.ews-hero-sky) { padding-top: 10px !important; padding-bottom: 16px !important; }
.demo main > hr, .demo hr.ews-rule, .demo hr.ews-rule--section, .demo hr.ews-rule--strong { margin-top: 0 !important; margin-bottom: 0 !important; }
.demo .ews-body > p { margin-bottom: 16px; }
.demo .ews-measure > h2 + .ews-body, .demo .ews-measure > .ews-body + .ews-body { margin-top: 24px !important; }
.demo .ews-pillar { padding-top: 32px !important; padding-bottom: 32px !important; }
.demo .demo-scene { margin: 24px 0 !important; }

/* 6. A bigger guarantee seal */
.demo .demo-cert > img { width: 150px !important; height: auto !important; }

/* 7. FAQ: roomier boxes */
.demo .ews-faq__item { padding: 6px 30px !important; margin-bottom: 14px !important; border-radius: var(--r-md) !important; }
.demo .ews-faq__item summary { padding-top: 18px !important; padding-bottom: 18px !important; }
.demo .ews-faq__item .ews-body { padding: 4px 0 22px !important; }

/* 8. Guarantee ticker right after the hero (from the brutal demo), in this
   page's palette: warm-ink band, butter type, terracotta stars. It only
   repeats the page's own terms line and is hidden from screen readers. */
.m1-ticker {
  position: relative; z-index: 2; overflow: hidden; white-space: nowrap;
  background: var(--warm-ink); color: var(--warm-butter);
  margin: 6px -12px 22px; padding: 14px 0; transform: rotate(-1.2deg);
  box-shadow: 0 6px 14px -10px rgba(43,36,32,.5);
}
.m1-ticker__track { display: inline-flex; align-items: center; gap: 34px; animation: m1-marquee 42s linear infinite; }
.m1-ticker__track span { font-family: var(--font-body); font-weight: 800; font-size: clamp(14px, 1.5vw, 19px); letter-spacing: .06em; text-transform: uppercase; }
.m1-ticker__track b { color: #E0876A; font-size: clamp(14px, 1.5vw, 19px); }
@keyframes m1-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .m1-ticker__track { animation: none; } }
/* the tilted band's corners must not widen the page */
html:has(body.demo), body.demo, .demo main { overflow-x: clip; }

/* 9. Hero panel ends BEHIND the ticker: the tilted band sits across the
   panel's bottom edge, so the straight edge is never seen next to the
   angled one. The band now closes the hero and opens the page below. */
.demo main > section:has(.ews-hero-sky) { padding-bottom: 0 !important; }
.demo .ews-hero-sky { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.m1-ticker { margin-top: -30px !important; margin-bottom: 26px !important; box-shadow: 0 8px 16px -12px rgba(43,36,32,.45) !important; }

/* 10. "Research backed" badge in the hero */
.m1-badge {
  display: table; margin: 18px auto 0 !important; padding: 6px 14px 6px 10px; border-radius: 999px;
  background: var(--warm-card); color: var(--warm-ink); box-shadow: 0 1px 2px rgba(43,36,32,.12);
  font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.m1-badge::before {
  content: "✓" / ""; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 7px; border-radius: 50%;
  background: #3E8F57; color: #fff; font-size: 11px; vertical-align: 1px;
}
.demo .m1-badge + .ews-hero__kicker { margin-top: 14px !important; }

/* 11. FAQ: regular-weight questions; state changes glide instead of snap */
.demo .ews-faq__q-text { font-weight: 500 !important; }
.demo .ews-faq__item { transition: background-color 320ms ease, box-shadow 320ms ease; }
.demo .ews-faq__icon { transition: transform 320ms cubic-bezier(.22,.8,.24,1); }

/* ==============================================================
   Review round 3 (2026-09-20)
   ============================================================== */

/* 12. FAQ: turn off tokens.css's own grid-row fold and the instant
   question margin; the script animates the whole item as one motion. */
.demo .ews-faq__item > .ews-body { display: block !important; grid-template-rows: none !important; opacity: 1 !important; transition: none !important; overflow: visible !important; }
.demo .ews-faq__item > summary.ews-faq__q,
.demo .ews-faq__item[open] > summary.ews-faq__q { margin-bottom: 0 !important; }
.demo .ews-faq__item .ews-body { padding: 2px 0 20px !important; }
.demo .ews-faq__item .ews-body > p:last-child { margin-bottom: 0 !important; }

/* 13. Hero: nearly full width, an 8px frame on the sides and top */
.demo main > section:has(.ews-hero-sky) { padding: 8px 8px 0 !important; margin: 0 !important; }
.demo main > section:has(.ews-hero-sky) > * { max-width: none !important; margin: 0 !important; }
.demo .ews-hero-sky { width: 100% !important; margin: 0 !important; border-radius: 10px 10px 0 0 !important; }

/* 14. Hero composition: the panel fills the first screen and its content
   is centred in the part the ticker does not cover, with an even rhythm:
   brand, badge, kicker, headline, button. */
.demo .ews-hero-sky {
  aspect-ratio: auto !important; min-height: calc(100svh - 8px);
  display: flex !important; flex-direction: column; justify-content: center; align-items: center;
  padding-bottom: 44px !important; box-sizing: border-box;
}
.demo .ews-hero__content { padding: 56px 24px 24px !important; margin: 0 auto !important; max-width: 900px !important; }
.demo .ews-hero__brand { margin: 0 0 22px !important; justify-content: center; }
.demo .m1-badge { margin: 0 auto !important; }
.demo .m1-badge + .ews-hero__kicker { margin: 16px auto 0 !important; }
.demo .ews-hero__headline { margin: 22px auto 34px !important; }
.demo .ews-hero__cta-row { margin: 0 !important; justify-content: center; }
@media (max-width: 700px) {
  .demo .ews-hero-sky { min-height: auto; padding-bottom: 56px !important; }
  .demo .ews-hero__content { padding: 44px 18px 20px !important; }
}

/* the demo body no longer carries .ews-page, so the browser's default
   8px body margin came back and pushed everything in; remove it */
body.demo { margin: 0 !important; }
/* hero button: drop the old hard white offset shadow, keep a soft hint */
.demo .ews-cta, .demo .ews-cta--hero, .demo .ews-sticky-bar__cta { box-shadow: 0 6px 14px -8px rgba(43,36,32,.45) !important; }
.demo .ews-cta:hover, .demo .ews-sticky-bar__cta:hover { box-shadow: 0 10px 18px -10px rgba(43,36,32,.5) !important; }

/* ==============================================================
   15. Sticky bar redesign (2026-09-20)
   A floating strip with the hero's 8px frame; logomark + Gloock
   wordmark; short, calm section labels; the current section gets a
   hand-drawn crayon underline; the price sits in its own tag on the
   button; a thin four-zone reading-progress line runs along the
   bottom edge.
   ============================================================== */
.demo .m1-bar {
  top: 8px !important; left: 8px !important; right: 8px !important; width: auto !important;
  display: flex; align-items: center; gap: 24px; min-height: 60px; box-sizing: border-box;
  padding: 8px 8px 8px 18px !important; border-radius: 10px !important; overflow: hidden;
  background: rgba(255, 253, 249, .9) !important; backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--warm-rule) !important; box-shadow: 0 8px 20px -14px rgba(43,36,32,.35) !important;
}
.demo .m1-bar__brand {
  display: flex; align-items: center; gap: 10px; margin: 0; white-space: nowrap;
  font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 19px !important; letter-spacing: -.01em; color: var(--warm-ink) !important;
}
.demo .m1-bar__brand img { width: auto; height: 30px; }
.demo .m1-bar__nav { display: flex; gap: 6px; margin: 0 auto; }
.demo .m1-bar__nav a {
  position: relative; padding: 8px 12px; border-radius: 6px; text-decoration: none !important;
  font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: #6E6259 !important;
  transition: color 180ms ease, background-color 180ms ease;
}
.demo .m1-bar__nav a:hover { color: var(--warm-ink) !important; background: rgba(43,36,32,.05); }
.demo .m1-bar__nav a.is-current { color: var(--warm-ink) !important; }
.demo .m1-bar__nav a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 1px; height: 8px; opacity: 0; transform: scaleX(.4); transform-origin: left;
  transition: opacity 220ms ease, transform 320ms cubic-bezier(.22,.8,.24,1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 25 2, 50 9, 75 4 S 95 5, 98 6' fill='none' stroke='%23E0876A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.demo .m1-bar__nav a.is-current::after { opacity: 1; transform: none; }
.demo .m1-bar__cta {
  display: inline-flex !important; align-items: center; gap: 12px; flex: none; white-space: nowrap;
  padding: 10px 10px 10px 20px !important; border-radius: 999px !important; font-size: 15px !important; font-weight: 600 !important;
}
.demo .m1-bar__price {
  display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--warm-butter); color: var(--warm-ink);
  font-family: var(--font-display); font-size: 15px; line-height: 1.1;
}
.demo .m1-bar__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(43,36,32,.06); pointer-events: none; }
.demo .m1-bar__progress i {
  display: block; height: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--zone-red) 0 25%, var(--zone-yellow) 25% 50%, var(--zone-green) 50% 75%, var(--zone-blue) 75%);
}
@media (max-width: 1240px) { .demo .m1-bar__nav { display: none !important; } .demo .m1-bar { justify-content: space-between; } }
@media (max-width: 560px) {
  .demo .m1-bar { gap: 10px; padding-left: 12px !important; min-height: 54px; }
  .demo .m1-bar__brand { font-size: 0 !important; gap: 0; }   /* logomark only on phones */
  .demo .m1-bar__brand img { width: auto; height: 34px; }   /* sprout icon only (see <picture>) */
  .demo .m1-bar__cta { font-size: 13.5px !important; padding: 9px 8px 9px 14px !important; gap: 8px; }
  .demo .m1-bar__price { font-size: 13px; padding: 3px 8px; }
}
@media (min-width: 1241px) { .demo .m1-bar__nav { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; } .demo .m1-bar__cta { margin-left: auto; } }
/* no underline mark on the current section; it's shown by darker text only */
.demo .m1-bar__nav a::after { content: none !important; }

/* ==============================================================
   16. One hover system for every button (2026-09-20)
   Before: the demo theme gave ALL buttons an ink hover background,
   which also hit the butter "inverse" button whose text is ink,
   so its label vanished on hover. Now each button type keeps its
   own text colour and only shifts its fill slightly, lifts 1px,
   and presses in on click. Focus looks like hover, plus an outline.
   ============================================================== */
.demo .ews-cta, .demo .ews-sticky-bar__cta, .demo .ews-consent__btn {
  transition: background-color 180ms ease, color 180ms ease, transform 180ms cubic-bezier(.22,.8,.24,1), box-shadow 180ms ease !important;
}

/* primary: ink button, cream text */
.demo .ews-cta:not(.ews-cta--inverse), .demo .ews-sticky-bar__cta { background: var(--warm-ink) !important; color: #FFFDF9 !important; border-color: var(--warm-ink) !important; }
.demo .ews-cta:not(.ews-cta--inverse):hover, .demo .ews-cta:not(.ews-cta--inverse):focus-visible,
.demo .ews-sticky-bar__cta:hover, .demo .ews-sticky-bar__cta:focus-visible {
  background: #4A3E36 !important; color: #FFFDF9 !important; border-color: #4A3E36 !important; transform: translateY(-1px) !important;
}

/* inverse: butter button, ink text (the founding-price panel) */
.demo .ews-cta--inverse { background: var(--warm-butter) !important; color: var(--warm-ink) !important; border-color: var(--warm-butter) !important; }
.demo .ews-cta--inverse:hover, .demo .ews-cta--inverse:focus-visible {
  background: #FFF3CC !important; color: var(--warm-ink) !important; border-color: #FFF3CC !important; transform: translateY(-1px) !important;
}

/* pressed */
.demo .ews-cta:active, .demo .ews-sticky-bar__cta:active { transform: translateY(1px) !important; box-shadow: 0 2px 6px -4px rgba(43,36,32,.5) !important; }

/* the $47 tag inside the sticky button keeps its colours on hover */
.demo .m1-bar__cta:hover .m1-bar__price, .demo .m1-bar__cta:focus-visible .m1-bar__price { background: var(--warm-butter); color: var(--warm-ink); }

/* keyboard focus ring (cream ring on dark ground, ink ring elsewhere) */
.demo .ews-cta:focus-visible, .demo .ews-sticky-bar__cta:focus-visible { outline: 2px solid var(--warm-ink) !important; outline-offset: 3px !important; }
.demo .demo-founding .ews-cta:focus-visible { outline-color: var(--warm-butter) !important; }

/* cookie buttons: keep ink text on the lighter hover fill */
.demo .ews-consent__btn:hover, .demo .ews-consent__btn:focus-visible { color: var(--warm-ink) !important; }

/* text links and FAQ questions: colour shift only, no disappearing */
.demo .ews-footer__links a:hover, .demo .ews-footer__links button:hover { text-decoration: underline; text-underline-offset: 3px; }
.demo .ews-faq__item summary:hover .ews-faq__q-text { color: var(--warm-ink) !important; }

@media (prefers-reduced-motion: reduce) {
  .demo .ews-cta:hover, .demo .ews-sticky-bar__cta:hover, .demo .ews-cta:active, .demo .ews-sticky-bar__cta:active { transform: none !important; }
}

/* ==============================================================
   17. Round 5 (2026-09-20)
   ============================================================== */

/* the ticker moved away from the hero: the hero is a complete framed
   panel again (8px frame on all four sides, rounded corners all round) */
.demo main > section:has(.ews-hero-sky) { padding: 8px !important; }
.demo .ews-hero-sky { border-radius: 10px !important; padding-bottom: 8px !important; }

/* the ticker now introduces the offer, between "A glimpse…" and
   "Introducing The Late Talker Kit" */
.demo .m1-ticker--offer { margin: 12px -12px 8px !important; }

/* bonuses 1–3: image on the left, text on the right. The images are
   portrait; they sit in a narrow column at their natural shape, so the
   whole cover shows, uncropped. */
.demo .m1-bonus {
  display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 40px);
  align-items: center; margin-top: 36px;
}
.demo .m1-bonus > .ews-figure { margin: 0 !important; }
.demo .m1-bonus > .ews-card { margin: 0 !important; }
.demo .m1-bonus .ews-figure img {
  width: 100% !important; height: auto !important; aspect-ratio: 1200 / 1697 !important; object-fit: contain !important;
  border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 22px -14px rgba(28,42,51,.35);
}
.demo .m1-bonus figcaption { text-align: center; margin-top: 10px; }
@media (max-width: 700px) {
  .demo .m1-bonus { grid-template-columns: 1fr; gap: 16px; }
  .demo .m1-bonus > .ews-figure { max-width: 220px; margin: 0 auto !important; }
}
.demo .m1-ticker--offer { margin-bottom: 28px !important; }
/* no hairline right before the ticker; the band is its own divider */
.demo main > hr:has(+ .m1-ticker) { display: none !important; }

/* ==============================================================
   18. Hero, round 6 (2026-09-20): no clouds; the logo sits at the
   top of the panel; kicker + headline + button are centred in the
   middle of the panel, both ways.
   ============================================================== */
.demo .ews-hero-sky__cloud { display: none !important; }
.demo .ews-hero-sky { position: relative !important; justify-content: center !important; align-items: center !important; padding: 0 !important; }
.demo .ews-hero__content { position: static !important; padding: 96px 24px !important; }
.demo .ews-hero__brand {
  position: absolute !important; z-index: 2; top: clamp(24px, 4vh, 44px); left: 50%; transform: translateX(-50%);
  margin: 0 !important; justify-content: center; white-space: nowrap;
}
.demo .ews-hero__kicker { margin: 0 auto !important; }
.demo .ews-hero__headline { margin: 22px auto 34px !important; }
/* Variants B and C put the kicker BETWEEN the headline and the button, where
   the blanket margin above leaves it welded to both. It needs its own space
   on each side: a little under the headline it belongs to, more below it so
   the button reads as a separate move. (Variant A's kicker sits above the
   headline, which already carries its own 22px top margin.) */
.demo .ews-hero__kicker--after-headline {
  margin: clamp(10px, 1.2vw, 18px) auto clamp(26px, 2.6vw, 40px) !important;
}
@media (max-width: 700px) {
  .demo .ews-hero-sky { min-height: calc(100svh - 16px) !important; }
  .demo .ews-hero__content { padding: 88px 18px 40px !important; }
}

/* ==============================================================
   19. Final pass (2026-09-21)
   ============================================================== */

/* the terms line inside the dark founding panel was grey-on-ink
   (2.9:1); an older rule beat .ews-terms--inverse. Light again. */
.demo .demo-founding .ews-terms, .demo .ews-terms--inverse { color: rgba(237, 243, 247, .78) !important; }

/* one heading size for every section title. "On this page…",
   "Plus three bonuses" and "FAQ" were a step smaller than the rest.
   (The guarantee title stays the rubber stamp.) */
.demo main h2.ews-display-md:not(.u-sr-only) { font-size: var(--m1-h2, clamp(30px, 3.2vw, 41px)) !important; line-height: 1.12 !important; }
.demo main h2.ews-display-lg { font-size: clamp(30px, 3.2vw, 41px) !important; line-height: 1.12 !important; }

/* footer: the Sky mist ink instead of the old flat near-black, and
   cool light text instead of the leftover cream */
.demo .ews-footer { background-color: var(--warm-ink) !important; background-image: none !important; }
.demo .ews-footer, .demo .ews-footer p, .demo .ews-footer a, .demo .ews-footer button { color: #EDF3F7 !important; }
.demo .ews-footer__links a, .demo .ews-footer__links button { opacity: .85; }
.demo .ews-footer__links a:hover, .demo .ews-footer__links button:hover { opacity: 1; }
.demo .ews-footer__links-band { border-color: rgba(237,243,247,.18) !important; }

/* Zone Rail: its unlit segments use the Sky mist hairline, not warm grey */
.demo .demo-rail span:not(.is-on) { background: #CBD8E1 !important; }
/* the "02" on the yellow tier block was white-on-yellow (3:1); dark ink instead */
.demo .ews-zone-figure__tier:nth-child(2) .demo-step { color: var(--warm-ink) !important; }
/* footer links were 22px tall on phones: give them a 44px tap area */
.demo .ews-footer__links a, .demo .ews-footer__links button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }

/* ==============================================================
   20. Mobile pass (2026-09-21)
   ============================================================== */

/* pillar polaroids collapsed to ~21px wide on phones: in the stacked
   (column) layout the media box shrank to its content while its image
   was 100% of that box. Give the polaroid a real width, centred. */
@media (max-width: 900px) {
  .demo .ews-pillar__media { width: min(78%, 300px) !important; max-width: none !important; flex: none !important; align-self: center; margin: 12px auto 0 !important; }
  .demo .ews-pillar__media img { width: 100% !important; height: auto !important; }
  .demo .ews-pillar { gap: 20px; }
}

@media (max-width: 600px) {
  /* buttons: phone-sized type so the label fits on one or two lines */
  .demo .ews-cta, .demo .ews-cta--hero { font-size: 17px !important; line-height: 1.3 !important; padding: 16px 24px !important; }
  .demo .ews-cta--hero { width: 100%; max-width: 340px; box-sizing: border-box; justify-content: center; text-align: center; }
  .demo .demo-founding .ews-cta { width: 100%; box-sizing: border-box; justify-content: center; text-align: center; }

  /* guarantee seal: smaller on a small screen */
  .demo .demo-cert > img { width: 104px !important; }

  /* FAQ: less side padding so questions get the width */
  .demo .ews-faq__item { padding: 4px 18px !important; }
  .demo .ews-faq__q-text { font-size: 18px !important; }

  /* diary page: a narrower margin column on phones */
  .demo .demo-scene { padding-left: 40px !important; padding-right: 18px !important; margin-left: 0 !important; margin-right: 0 !important; background-image: linear-gradient(90deg, transparent 28px, rgba(216,65,47,.35) 28px 30px, transparent 30px), repeating-linear-gradient(180deg, transparent 0 33px, rgba(47,95,179,.16) 33px 34px) !important; }

  /* founding panel + receipt: tighter padding, readable rows */
  .demo .demo-founding { padding: 26px 20px !important; }
  .demo .demo-ledger th, .demo .demo-ledger td { font-size: 14px !important; padding-left: 12px !important; padding-right: 12px !important; }

  /* Word Wall sheet: keep the tilt gentle so the corners stay on screen */
  .demo .ews-figure:has(img[src*="word-wall"]), .demo .ews-figure:has(img[src*="snapshot"]) { transform: rotate(-.6deg); }

  /* bonus text boxes: a little less padding on a narrow screen */
  .demo .m1-bonus .ews-card, .demo .ews-card--fast { padding: 22px 18px !important; }
}
/* footer links wrap instead of running off the edge (tablets) */
.demo .ews-footer__links { display: flex !important; flex-wrap: wrap !important; justify-content: center; gap: 2px 8px; }
/* tablet: phone-style button text up to 900px */
@media (min-width: 601px) and (max-width: 900px) {
  .demo .ews-cta, .demo .ews-cta--hero { font-size: 18px !important; line-height: 1.3 !important; padding: 16px 28px !important; }
}

/* ==============================================================
   21. Price section redesign (2026-09-21), from Ali's reference:
   one light order card that holds the whole offer, a pill label,
   a heading with a short accent underline, a clean two-column value
   table (small-caps header, tinted total row), a centred founding
   price as the focal point, a full-width button and fine print.
   The offer photo sits beside the card on desktop, above it on phones.
   ============================================================== */
.demo .m1-offer { max-width: 1080px !important; }
.demo .m1-order { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.demo .m1-order__media { position: sticky; top: 96px; }
.demo .m1-order__photo { margin: 0 !important; }
.demo .m1-order__photo img { width: 100% !important; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 26px -16px rgba(28,42,51,.35); }
.demo .m1-order__photo figcaption { text-align: center; margin-top: 10px; }

.demo .m1-order__card {
  background: #FFFFFF; border: 1px solid var(--warm-rule); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(28,42,51,.04), 0 16px 34px -24px rgba(28,42,51,.35);
  padding: clamp(24px, 3.4vw, 40px);
}
.demo .m1-order__flag {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 12px 6px 10px; border-radius: 999px;
  background: var(--warm-sky); color: var(--warm-ink);
  font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.demo .m1-order__flag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cs-accent, #E0765A); }
.demo main h2.m1-order__title { margin: 0 !important; padding-bottom: 12px; font-size: clamp(28px, 2.8vw, 36px) !important; position: relative; }
.demo main h2.m1-order__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 2px; background: var(--cs-accent, #E0765A); }

.demo .m1-order__table { width: 100%; margin: 24px 0 0 !important; border-collapse: collapse; background: none !important; box-shadow: none !important; border: 0 !important; clip-path: none !important; }
.demo .m1-order__table th {
  background: #F4F8FA !important; padding: 10px 14px !important; border: 0 !important; border-bottom: 1px solid var(--warm-rule) !important;
  font-family: var(--font-body) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase; color: #5F7282 !important; text-align: left;
}
.demo .m1-order__table td {
  padding: 12px 14px !important; border: 0 !important; border-bottom: 1px solid #E6EEF3 !important; background: none !important;
  font-family: var(--font-body) !important; font-size: 15.5px !important; line-height: 1.45 !important; color: var(--warm-ink) !important;
}
.demo .m1-order__table th:last-child, .demo .m1-order__table td:last-child { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo .m1-order__table .ews-table__total td { background: var(--warm-sky) !important; border-bottom: 0 !important; font-weight: 700 !important; font-size: 16px !important; }
.demo .m1-order__was { text-decoration: line-through; text-decoration-thickness: 2px; color: #5F7282 !important; }

.demo .m1-order__save { margin: 14px 0 0 !important; text-align: center; font-family: var(--font-body) !important; font-size: 15px !important; font-weight: 600; color: #2F7A55 !important; }

.demo .m1-order__price { margin: 26px 0 20px; padding-top: 22px; border-top: 1px dashed var(--warm-rule); text-align: center; }
.demo .m1-order__amount { margin: 0 !important; font-family: var(--font-display) !important; font-size: clamp(22px, 2.2vw, 26px) !important; line-height: 1.2 !important; color: var(--warm-ink) !important; }
.demo .m1-order__num { display: inline-block; font-size: 1.9em; line-height: 1; letter-spacing: -.02em; vertical-align: -.12em; }
.demo .m1-order__note { margin: 8px 0 0 !important; font-family: var(--font-body) !important; font-size: 14px !important; color: #5F7282 !important; }

.demo .m1-order__cta { display: flex !important; width: 100%; box-sizing: border-box; justify-content: center; text-align: center; font-size: 18px !important; padding: 18px 24px !important; }
.demo .m1-order__terms { margin: 12px 0 0 !important; text-align: center; font-size: 13px !important; color: #5F7282 !important; }

@media (max-width: 999px) {
  .demo .m1-order { grid-template-columns: 1fr; gap: 22px; }
  .demo .m1-order__media { position: static; max-width: 340px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .demo .m1-order__card { padding: 22px 16px; }
  .demo .m1-order__table th, .demo .m1-order__table td { padding-left: 10px !important; padding-right: 10px !important; }
  .demo .m1-order__table td { font-size: 14.5px !important; }
}
/* reserve the offer photo's real shape (1200x1553) so it never collapses
   before it lazy-loads, and never shifts the layout when it arrives */
.demo .m1-order__photo img { aspect-ratio: 1200 / 1553 !important; }
@media (max-width: 999px) { .demo .m1-order__media { max-width: 300px; } }
@media (max-width: 600px) { .demo .m1-order__cta { font-size: 16.5px !important; padding: 16px 18px !important; } }

/* ==============================================================
   22. "Everything you get" collage beside the order card (2026-09-21)
   Back to front: six pillar printables fanned low across the width,
   the three bonus covers + the Meltdown Rescue around the middle,
   the main product cover in front at the top centre. Each piece is
   a white-edged printable with a faint shadow, slightly turned.
   Percent-based, so the same composition scales down on phones.
   ============================================================== */
.demo .m1-stack .m1-stack__stage { position: relative; width: 100%; aspect-ratio: 1 / 1.08; }
.demo .m1-stack .m1-stack__stage img.m1-stack__it {
  position: absolute; display: block; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important;
  background: #fff; padding: 4px; box-sizing: border-box; border-radius: 3px !important;
  box-shadow: 0 1px 2px rgba(28,42,51,.12), 0 10px 20px -12px rgba(28,42,51,.45) !important;
  transform: rotate(var(--rot, 0deg)); transform-origin: 50% 80%;
}
/* pillars: the back row, fanned like a hand of cards */
.demo .m1-stack .m1-stack__p1 { width: 25% !important; left: 0;   top: 44%; --rot: -16deg; z-index: 1; }
.demo .m1-stack .m1-stack__p2 { width: 25% !important; left: 13%; top: 52%; --rot: -9deg;  z-index: 2; }
.demo .m1-stack .m1-stack__p3 { width: 25% !important; left: 27%; top: 57%; --rot: -3deg;  z-index: 3; }
.demo .m1-stack .m1-stack__p4 { width: 25% !important; left: 48%; top: 57%; --rot: 3deg;   z-index: 3; }
.demo .m1-stack .m1-stack__p5 { width: 25% !important; left: 62%; top: 52%; --rot: 9deg;   z-index: 2; }
.demo .m1-stack .m1-stack__p6 { width: 25% !important; left: 75%; top: 44%; --rot: 16deg;  z-index: 1; }
/* bonuses: the middle ring, either side of the cover */
.demo .m1-stack .m1-stack__b1 { width: 31% !important; left: 2%;  top: 9%;  --rot: -9deg; z-index: 6; }
.demo .m1-stack .m1-stack__b2 { width: 31% !important; left: 67%; top: 9%;  --rot: 9deg;  z-index: 6; }
.demo .m1-stack .m1-stack__b3 { width: 28% !important; left: 8%;  top: 40%; --rot: -5deg; z-index: 7; }
.demo .m1-stack .m1-stack__fast { width: 42% !important; left: 55%; top: 47%; --rot: 5deg; z-index: 8; }
/* the main product: front, top centre */
.demo .m1-stack .m1-stack__cover { width: 46% !important; left: 27%; top: 0; --rot: 0deg; z-index: 10; padding: 6px; box-shadow: 0 2px 4px rgba(28,42,51,.14), 0 20px 36px -18px rgba(28,42,51,.55) !important; }
.demo .m1-stack figcaption { text-align: center; margin-top: 14px; }

/* ---- section spacing: one steady rhythm around the price block ---- */
.demo #bonuses > hr { display: none !important; }
.demo .m1-offer { margin-top: clamp(64px, 8vw, 104px) !important; }
.demo .m1-order { align-items: center; }
.demo .m1-order__media { position: sticky; top: 110px; align-self: start; padding-top: 12px; }
.demo .m1-order__card > * + * { margin-top: 0; }
.demo .m1-order__flag { margin-bottom: 16px !important; }
.demo .m1-order__table { margin-top: 22px !important; }
.demo .m1-order__save { margin-top: 12px !important; }
.demo .m1-order__price { margin: 24px 0 18px !important; }
@media (max-width: 999px) {
  .demo .m1-order__media { position: static; max-width: 420px; width: 100%; margin: 0 auto; padding-top: 0; }
  .demo .m1-order { gap: 32px; }
}
@media (max-width: 600px) { .demo .m1-offer { margin-top: 56px !important; } .demo .m1-order__media { max-width: 340px; } }
/* keep the rotated outer pieces inside the collage's own box */
.demo .m1-stack .m1-stack__p1 { left: 5%; }
.demo .m1-stack .m1-stack__p6 { left: 70%; }
.demo .m1-stack .m1-stack__p2 { left: 16%; }
.demo .m1-stack .m1-stack__p5 { left: 59%; }
.demo .m1-stack .m1-stack__b1 { left: 5%; }
.demo .m1-stack .m1-stack__b2 { left: 64%; }
.demo .m1-stack .m1-stack__fast { left: 52%; }
.demo .m1-stack .m1-stack__p1 { left: 7.5%; }
.demo .m1-stack .m1-stack__p6 { left: 67.5%; }
/* even breathing room above and below the price block */
.demo .m1-offer { margin-top: clamp(56px, 6vw, 76px) !important; }

/* ==============================================================
   23. Six-pillar spine (2026-09-23), from Ali's reference:
   a vertical line runs down the middle of the pillar section,
   between the printable and its text, with a numbered marker on
   the line for each pillar. The numbers are decorative (every
   heading already reads "Pillar 1…6"), so they are not announced.
   ============================================================== */
.demo #six-pillars .ews-pillars-wrap > div { position: relative; counter-reset: m1pillar; }
/* the line itself: starts and fades out at both ends */
.demo #six-pillars .ews-pillars-wrap > div::before {
  content: ""; position: absolute; top: 40px; bottom: 40px; left: 50%; width: 2px; margin-left: -1px; z-index: 0;
  background: linear-gradient(180deg, transparent, var(--warm-rule) 6%, var(--warm-rule) 94%, transparent);
}
.demo #six-pillars .ews-pillar { position: relative; counter-increment: m1pillar; border-top: 0 !important; z-index: 1; }
/* the numbered marker, centred on the line beside each pillar */
.demo #six-pillars .ews-pillar::after {
  content: counter(m1pillar) / ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; z-index: 3;
  background: #FFFFFF; border: 2px solid var(--warm-rule); color: var(--warm-ink);
  font-family: var(--font-body); font-size: 15px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 6px var(--warm-paper);
}
/* keep the two columns clear of the line */
.demo #six-pillars .ews-pillar { gap: clamp(32px, 6vw, 88px) !important; }
.demo #six-pillars .ews-pillar__media, .demo #six-pillars .ews-pillar__body { flex: 1 1 0 !important; max-width: none !important; min-width: 0; }
.demo #six-pillars .ews-pillar__media { align-self: center; }

/* phones: the spine moves to the left edge and the markers sit on it */
@media (max-width: 900px) {
  .demo #six-pillars .ews-pillars-wrap > div::before { left: 19px; margin-left: 0; }
  .demo #six-pillars .ews-pillar { padding-left: 56px !important; }
  .demo #six-pillars .ews-pillar::after { left: 19px; top: 34px; transform: translate(-50%, 0); width: 34px; height: 34px; font-size: 14px; }
  .demo #six-pillars .ews-pillar__media { width: min(78%, 300px) !important; margin-left: 0 !important; }
}
/* a touch more presence for the spine and its numbers */
.demo #six-pillars .ews-pillars-wrap > div::before { background: linear-gradient(180deg, transparent, #C3D4DE 6%, #C3D4DE 94%, transparent); }
.demo #six-pillars .ews-pillar::after { border-color: #BCD0DC; font-size: 16px; color: var(--warm-ink); }

/* ==============================================================
   24. Order bump (2026-09-23). A dashed, tinted box between the
   price and the button: a big tick box, a bold accent headline and
   two lines of plain text. Ticking it marks the box and adds its
   price to the button. Copy is a PLACEHOLDER until Ali supplies it.
   ============================================================== */
.demo .m1-bump {
  margin: 4px 0 18px; padding: 16px 18px; border-radius: 8px;
  border: 2px dashed var(--cs-accent, #E0765A); background: #FFF7F3;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.demo .m1-bump.is-on { background: #FFEFE8; border-style: solid; box-shadow: 0 0 0 3px rgba(224,118,90,.15); }
.demo .m1-bump__label { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; cursor: pointer; }
.demo .m1-bump__check { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; cursor: pointer; }
.demo .m1-bump__box {
  width: 26px; height: 26px; border-radius: 5px; border: 2px solid var(--cs-accent, #E0765A); background: #fff;
  display: grid; place-items: center; margin-top: 2px; transition: background-color 160ms ease;
}
.demo .m1-bump__box::after {
  content: ""; width: 13px; height: 8px; border-left: 3px solid #fff; border-bottom: 3px solid #fff;
  transform: rotate(-45deg) scale(.4); opacity: 0; transition: transform 180ms cubic-bezier(.2,.9,.3,1.4), opacity 140ms ease; margin-top: -3px;
}
.demo .m1-bump__check:checked + .m1-bump__box { background: var(--cs-accent, #E0765A); }
.demo .m1-bump__check:checked + .m1-bump__box::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.demo .m1-bump__check:focus-visible + .m1-bump__box { outline: 3px solid var(--warm-ink); outline-offset: 3px; }
.demo .m1-bump__copy { display: block; }
.demo .m1-bump__title { display: block; font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 1.35; color: #B4472C; margin-bottom: 6px; }
.demo .m1-bump__text { display: block; font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; color: var(--warm-ink); }
@media (max-width: 600px) { .demo .m1-bump { padding: 14px; } .demo .m1-bump__title { font-size: 15px; } .demo .m1-bump__text { font-size: 14px; } }

/* ==============================================================
   25. Order bump, rebuilt (2026-09-24)
   Ali: "no container, spacing broken, hierarchy and font choice bad."
   - A real container: full width of the card's inner column, solid
     tinted panel with its own dashed keyline, generous padding.
   - Hierarchy: the price is still the loudest thing in the card; the
     bump headline sits one clear step below it in Gloock (the card's
     own display face), with the amount in terracotta; body text is
     calm and readable.
   - Spacing: a wide gap above (it is a new decision), a tighter gap
     below (it belongs to the button it changes).
   ============================================================== */
.demo .m1-bump {
  margin: 28px 0 14px !important; padding: 22px 24px !important; border-radius: 8px !important;
  background: #FDF3EE !important; border: 1px dashed #E3A78F !important;
  box-shadow: inset 0 0 0 1px #FFFFFF !important;
}
.demo .m1-bump.is-on { background: #FBE9E0 !important; border-style: solid !important; border-color: var(--cs-accent, #E0765A) !important; box-shadow: inset 0 0 0 1px #FFFFFF, 0 6px 16px -12px rgba(224,118,90,.6) !important; }
.demo .m1-bump__label { grid-template-columns: 24px 1fr !important; gap: 14px !important; align-items: start; }
.demo .m1-bump__box { width: 24px !important; height: 24px !important; border-radius: 4px !important; border-width: 2px !important; margin-top: 3px !important; }

/* headline: the card's display face, one step under the price */
.demo .m1-bump__title {
  font-family: var(--font-display) !important; font-weight: 400 !important;
  font-size: clamp(18px, 1.5vw, 20px) !important; line-height: 1.25 !important; letter-spacing: -0.01em;
  color: var(--warm-ink) !important; margin-bottom: 8px !important;
}
/* body: calm, readable, not shouty */
.demo .m1-bump__text {
  font-family: var(--font-body) !important; font-size: 15px !important; line-height: 1.6 !important;
  color: #475866 !important;
}
/* the fine print under the button is body type, not the handwriting face */
.demo .m1-order__terms {
  font-family: var(--font-body) !important; font-style: normal !important; font-size: 13px !important;
  letter-spacing: 0 !important; color: #5F7282 !important;
}
@media (max-width: 600px) {
  .demo .m1-bump { margin: 22px 0 12px !important; padding: 18px 16px !important; }
  .demo .m1-bump__title { font-size: 17px !important; }
  .demo .m1-bump__text { font-size: 14.5px !important; }
}
.demo .m1-bump__price { color: var(--cs-accent, #E0765A); }
.demo .m1-bump.is-on .m1-bump__price { color: #C9573C; }

/* --- merge-palettes.css --- */
/* ==============================================================
   MERGE 1 — COLOUR-SCHEME EXPLORATION. Loaded only by
   demo-merge-1-colors.html, after merge-scrapbook.css.
   Every scheme replaces the creamy-white ground. Each one sets:
   --warm-paper  page ground        --warm-card  cards / panels
   --warm-ink    text + dark CTAs   --warm-rule  hairlines
   --warm-peach / --warm-butter / --warm-sky  soft accents
   --cs-accent   small warm accent (ticker stars, focus, ticks)
   Switched by body[data-scheme], set by the switcher.
   ============================================================== */

/* 1 · Clean white: true white ground, cool-grey cards. Clinical calm. */
body.demo[data-scheme="white"] {
  --warm-paper: #FFFFFF; --warm-card: #F5F6F8; --warm-ink: #1F1C1A; --warm-rule: #E4E6EA;
  --warm-peach: #F6DCCB; --warm-butter: #FBEBB8; --warm-sky: #E3EFF5; --cs-accent: #D9694C;
}
/* 2 · Sky mist: a pale blue-grey that continues the hero sky down the page. */
body.demo[data-scheme="sky"] {
  --warm-paper: #EDF3F7; --warm-card: #FFFFFF; --warm-ink: #1C2A33; --warm-rule: #D3DFE7;
  --warm-peach: #F7D9CC; --warm-butter: #FCEBB4; --warm-sky: #D6E8F2; --cs-accent: #E0765A;
}
/* 3 · Sage: soft green-grey, restful and "healthy" without being clinical. */
body.demo[data-scheme="sage"] {
  --warm-paper: #EEF2EC; --warm-card: #FFFFFF; --warm-ink: #213027; --warm-rule: #D7E0D4;
  --warm-peach: #F4D8C6; --warm-butter: #F6E7AE; --warm-sky: #DCEBEF; --cs-accent: #D2694B;
}
/* 4 · Lilac: gentle lavender, warm-cool and a little dreamy (bedtime). */
body.demo[data-scheme="lilac"] {
  --warm-paper: #F2F0F8; --warm-card: #FFFFFF; --warm-ink: #28233D; --warm-rule: #E0DCEC;
  --warm-peach: #F8D8CF; --warm-butter: #FCE8B2; --warm-sky: #DDE8F6; --cs-accent: #E2735E;
}
/* 5 · Cool grey: neutral light grey, the most "editorial magazine". */
body.demo[data-scheme="grey"] {
  --warm-paper: #F1F2F3; --warm-card: #FFFFFF; --warm-ink: #1D1F21; --warm-rule: #DEE0E3;
  --warm-peach: #F3D6C6; --warm-butter: #F7E6AE; --warm-sky: #DDE9F0; --cs-accent: #CF6547;
}
/* 6 · White + sky bands: white page, alternate sections sit on sky mist.
   Structure through colour: each chapter of the argument gets a band. */
body.demo[data-scheme="bands"] {
  --warm-paper: #FFFFFF; --warm-card: #FFFFFF; --warm-ink: #1C2A33; --warm-rule: #DCE6EC;
  --warm-peach: #F7D9CC; --warm-butter: #FCEBB4; --warm-sky: #E3EFF6; --cs-accent: #E0765A;
}
body.demo[data-scheme="bands"] main > section:nth-of-type(even):not(:has(.ews-hero-sky)) { background-color: #EEF4F8 !important; }
body.demo[data-scheme="bands"] .ews-faq__item, body.demo[data-scheme="bands"] .demo-index li { background: #F5F8FA; }

/* the page ground itself follows the scheme (demo.css paints it with !important) */
html:has(body.demo[data-scheme]) { background-color: var(--warm-paper) !important; }
body.demo[data-scheme], body.demo[data-scheme] main, body.demo[data-scheme] .ews-band, body.demo[data-scheme] .ews-discover-frame { background-color: var(--warm-paper) !important; }
body.demo[data-scheme="bands"] main > section:nth-of-type(even):not(:has(.ews-hero-sky)) { background-color: #EEF4F8 !important; }

/* small accents follow the scheme */
body.demo[data-scheme] .m1-ticker__track b { color: var(--cs-accent); }
body.demo[data-scheme] .ews-body .demo-pull::before { color: var(--cs-accent); }
body.demo[data-scheme] .ews-cta:not(.ews-cta--inverse), body.demo[data-scheme] .ews-sticky-bar__cta { color: #FFFFFF !important; }
body.demo[data-scheme] .m1-bar { background: color-mix(in srgb, var(--warm-paper) 88%, transparent) !important; }
/* the diary page and pinned notes stay paper-white so they still read as objects */
body.demo[data-scheme] .demo-scene { background-color: #FFFFFF !important; }
body.demo[data-scheme] .demo-duo p { background: #FFFFFF !important; }
body.demo[data-scheme] .demo-duo p + p { background: var(--warm-card) !important; }
body.demo[data-scheme="white"] .demo-duo p + p, body.demo[data-scheme="bands"] .demo-duo p + p { background: #F1F3F5 !important; }

/* ---------- the switcher ---------- */
.cs-switch {
  position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  max-width: calc(100vw - 32px); padding: 8px; border-radius: 12px; background: #1F1C1A; box-shadow: 0 12px 28px -10px rgba(0,0,0,.45);
  font: 600 13px/1 'Segoe UI', system-ui, sans-serif;
}
.cs-switch__label { color: #FBEBB8; margin: 0 4px 0 6px; }
.cs-switch button {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit; color: #F4F2EF; background: transparent;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 7px 11px 7px 7px;
}
.cs-switch button i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); }
.cs-switch button:hover { border-color: #fff; }
.cs-switch button[aria-pressed="true"] { background: #FBEBB8; color: #1F1C1A; border-color: #FBEBB8; }
@media (max-width: 600px) { .cs-switch { left: 12px; right: 12px; bottom: 10px; } .cs-switch__label { display: none; } }

/* --- funnel-pages.css --- */
/* ==============================================================
   FUNNEL PAGES — the secondary pages (delivery, thank-you, checklist
   steps, legal) on the sales page's design: body.demo[data-type="4"]
   [data-scheme="sky"] + demo.css + merge-scrapbook.css +
   merge-palettes.css. Loaded last. Only the pieces the sales page
   doesn't have are defined here, in its own vocabulary: sky hero
   panel, Gloock headings, Figtree text, white cards on the sky-mist
   ground, ink pill buttons.
   ============================================================== */

/* ---------- hero: the sales page's sky panel, sized to its content -- */
.ews-funnel main > section.ews-funnel-hero { padding: 8px 8px 0 !important; }
.ews-funnel .ews-funnel-hero .ews-hero-sky {
  min-height: 0 !important; aspect-ratio: auto !important;
  border-radius: 10px !important; padding-bottom: clamp(36px, 4vw, 52px) !important;
}
.ews-funnel .ews-funnel-hero .ews-hero__content { padding-bottom: 0 !important; }
/* the logo is absolutely placed at the panel's top (merge-scrapbook),
   so the content starts below it */
.ews-funnel .ews-funnel-hero .ews-hero__content { padding-top: clamp(96px, 9vw, 112px) !important; max-width: 820px !important; }
.ews-funnel .ews-funnel-hero .ews-hero__headline {
  font-size: clamp(36px, 5.4vw, 64px) !important; line-height: 1.06 !important;
  margin: 18px auto 0 !important; max-width: 16em;
}
.ews-funnel .ews-funnel-hero .ews-hero__cta-row { margin-top: 30px !important; }
.ews-funnel-hero__lead {
  margin: 20px auto 0; max-width: 34em;
  font-family: var(--font-body); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55;
  color: var(--warm-ink);
}
.ews-funnel-hero__note { margin: 14px auto 0; font-family: var(--font-body); font-size: 15px; color: var(--warm-ink); opacity: .8; }
.ews-funnel-hero__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px;
  margin: 22px auto 0; font-family: var(--font-body); font-size: 14px; color: var(--warm-ink);
}
.ews-funnel-hero__meta span {
  background: rgba(255,255,255,.55); border-radius: 999px; padding: 5px 12px;
}
.ews-funnel-hero__back { margin: 22px 0 0; }
.ews-funnel .ews-legal__back {
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  letter-spacing: 0; text-transform: none;
  color: var(--warm-ink); text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- body column -------------------------------------------- */
.ews-funnel .ews-funnel-body { padding-bottom: clamp(24px, 4vw, 48px); }
.ews-funnel .ews-funnel-body > :first-child { margin-top: 0 !important; }
.ews-funnel .ews-legal__section { margin-top: clamp(40px, 5vw, 64px); }
.ews-funnel .ews-heading,
.ews-funnel .ews-legal__section > .ews-heading {
  font-family: var(--font-display); font-weight: 400 !important;
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: 0;
  text-transform: none; color: var(--warm-ink); margin: 0 0 18px;
  border-top: 0 !important; padding-top: 0 !important;
}
.ews-funnel .ews-body, .ews-funnel .ews-body p, .ews-funnel .ews-body li,
.ews-funnel li.ews-body {
  font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: var(--warm-ink);
}
.ews-funnel .ews-body p { margin: 0 0 14px; }
.ews-funnel .ews-body p:last-child { margin-bottom: 0; }
.ews-funnel .ews-body a, .ews-funnel .ews-small a, .ews-funnel .ews-marginal a {
  color: var(--warm-ink); text-decoration: underline; text-underline-offset: 3px;
}
.ews-funnel .ews-small { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--warm-ink); opacity: .85; }
.ews-funnel .ews-terms {
  font-family: var(--font-body); font-size: 14px; line-height: 1.6; letter-spacing: 0;
  text-transform: none; color: var(--warm-ink); opacity: .7;
}
.ews-funnel .ews-mono-label, .ews-funnel .ews-mono-data {
  font-family: var(--font-body); font-weight: 600; letter-spacing: .02em; color: var(--warm-ink);
}
.ews-funnel .ews-mono-data { font-size: 16px; }

/* ---------- cards: white panels on the sky-mist ground -------------- */
.ews-funnel .ews-certificate,
.ews-funnel .ews-marginal {
  background: var(--warm-card); border: 1px solid var(--warm-rule); border-radius: 10px;
  box-shadow: var(--shadow-soft); padding: clamp(22px, 3.4vw, 36px);
}
.ews-funnel .ews-certificate > .ews-heading { margin-top: 0; }
.ews-funnel .ews-marginal {
  font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--warm-ink);
  border-left: 1px solid var(--warm-rule);
  background: linear-gradient(0deg, rgba(252,235,180,.35), rgba(252,235,180,.35)), var(--warm-card);
}
.ews-funnel .ews-marginal strong { font-weight: 700; }

/* ---------- numbered steps: Gloock numerals in soft discs ------------ */
.ews-funnel .ews-steps { list-style: none; margin: 0; padding: 0; counter-reset: ews-step; }
.ews-funnel .ews-steps > li {
  counter-increment: ews-step; position: relative;
  padding: 18px 0 18px 60px; border-top: 1px solid var(--warm-rule);
}
.ews-funnel .ews-steps > li:first-child { border-top: 0; padding-top: 4px; }
.ews-funnel .ews-steps > li::before {
  content: counter(ews-step); position: absolute; left: 0; top: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 21px; line-height: 1; color: var(--warm-ink);
  background: var(--warm-sky);
}
.ews-funnel .ews-steps > li:first-child::before { top: 2px; }

/* ---------- delivery manifest (thank-you) --------------------------- */
.ews-funnel .ews-manifest { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.ews-funnel .ews-manifest td {
  font-family: var(--font-body); font-size: 17px; color: var(--warm-ink);
  background: var(--warm-card); border: 1px solid var(--warm-rule); border-radius: 8px; padding: 14px 18px;
}

/* ---------- download rows (kit-download): one white card per file --- */
.ews-funnel .ews-files { display: grid; gap: 12px; }
.ews-funnel .ews-file {
  align-items: center; padding: 18px 20px; border: 1px solid var(--warm-rule) !important;
  border-radius: 10px; background: var(--warm-card); box-shadow: var(--shadow-soft);
}
.ews-funnel .ews-file__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 1.6vw, 22px); color: var(--warm-ink); }
.ews-funnel .ews-file__note { font-family: var(--font-body); font-size: 15px; color: var(--warm-ink); opacity: .75; }
.ews-funnel .ews-cta--sm { padding: 12px 26px; font-size: 16px; }

/* zone words keep their zone colours */
.ews-funnel .ews-zone-text--red { color: #8E3B2C; font-weight: 600; }
.ews-funnel .ews-zone-text--yellow { color: #7A5210; font-weight: 600; }
.ews-funnel .ews-zone-text--green { color: #2E6139; font-weight: 600; }
.ews-funnel .ews-zone-text--blue { color: #264B6B; font-weight: 600; }

/* ---------- checklist opt-in: its form card joins the card language -- */
.ews-funnel .ews-form-card { border-radius: 10px !important; border-color: var(--warm-rule) !important; box-shadow: var(--shadow-lift); }
.ews-funnel .ews-optin-sub { font-family: var(--font-body) !important; color: var(--warm-ink) !important; }
.ews-funnel .ews-optin-hero .ews-hero-sky { min-height: 0 !important; }
.ews-funnel .ews-inside .ews-discover-card {
  background: var(--warm-card); border: 1px solid var(--warm-rule); border-radius: 10px; box-shadow: var(--shadow-soft);
}

@media (max-width: 600px) {
  .ews-funnel .ews-file__link, .ews-funnel .ews-file__link .ews-cta { box-sizing: border-box; max-width: 100%; }
  .ews-funnel .ews-steps > li { padding-left: 52px; }
  .ews-funnel .ews-body, .ews-funnel .ews-body p, .ews-funnel li.ews-body { font-size: 17px; }
}