/* =====================================================================
 * Stylin AI — REDESIGN SKIN  (Agent 2)
 * ---------------------------------------------------------------------
 * A simplified, generalized, token-based design system delivered as a
 * single override "skin". This sheet loads LAST in the cascade
 * (after normalize -> webflow.css -> stylinai.webflow.css -> site.css,
 * and after blog.css on blog pages) so it wins by source order with
 * low specificity. !important is used ONLY where Webflow's generated
 * specificity must be beaten.
 *
 * Agent 3 maps the real brand palette onto the SEMANTIC + primitive
 * color tokens below (placeholder neutral values for now).
 * Agent 4 finalizes the light/dark themes.
 *
 * STRUCTURE
 *   1. Font role bindings (fonts imported via index.html <link>)
 *   2. :root TOKEN LAYER (primitives + semantics) — DARK baseline
 *   3. THEME SCAFFOLD (light theme + prefers-color-scheme fallback)
 *   4. BASE / RESET overrides
 *   5. COMPONENT SKIN (retarget .walsh-* + new utilities to tokens)
 * ===================================================================== */


/* =====================================================================
 * 2. :root TOKEN LAYER  (DARK theme baseline)
 *    Two tiers: PRIMITIVE (raw scale) -> SEMANTIC (role-based).
 *    Placeholder neutral palette — Agent 3 replaces hex values.
 * ===================================================================== */
:root {

  /* ---- PRIMITIVE: color scale (INK -> PAPER greyscale) -----------
   * Editorial ink/paper ramp from the reference palette.
   *   0   = Ink   (#0A0A0B near-black ground)
   *   200 = Steel (#2A2E37 muted blue-grey surface)
   *   500 = Graphite (#6E6E73 mid grey: secondary text / borders)
   *   950 = Paper (#F4F2ED warm off-white — NOT pure #fff)
   * Warm-neutral, slightly cool in the shadows (steel) to match the
   * blue-grey card surface in the reference. */
  --c-neutral-0:   #0a0a0b;  /* Ink — page ground */
  --c-neutral-50:  #121317;  /* slightly lifted ink (elevated band) */
  --c-neutral-100: #1b1d22;  /* near-steel surface */
  --c-neutral-200: #2a2e37;  /* Steel — card / input surface */
  --c-neutral-300: #3a3e48;  /* steel-light (hover surface) */
  --c-neutral-400: #54585f;  /* graphite-dark */
  --c-neutral-500: #6e6e73;  /* Graphite — captions / borders */
  --c-neutral-600: #909096;  /* graphite-light */
  --c-neutral-700: #b6b4af;  /* warm grey (secondary text on ink) */
  --c-neutral-800: #d6d3cc;  /* warm light grey */
  --c-neutral-900: #e8e5dd;  /* near-paper */
  --c-neutral-950: #f4f2ed;  /* Paper — warm off-white text */
  --c-white:       #f4f2ed;  /* warm white, not pure #fff */
  --c-black:       #0a0a0b;

  /* Accent ramp — COBALT (the one loud color). 500 = electric cobalt. */
  --c-accent-100: #d6ddff;  /* pale cobalt tint (light-theme wash) */
  --c-accent-300: #6f86ff;  /* cobalt tint (light hover / on-dark text) */
  --c-accent-500: #2e4bff;  /* Cobalt — primary accent (electric) */
  --c-accent-700: #2138d6;  /* cobalt shade — hover/pressed */
  --c-accent-900: #16258f;  /* deep cobalt shade */
  --c-accent-contrast: #f4f2ed; /* Paper text on cobalt-500 */

  /* ===================================================================
   * SECONDARY ACCENT RAMPS — Agent 4 expansion (acid + coral).
   * These are SUPPORTING accents, NOT alternative CTA colors. Cobalt
   * stays the one primary call-to-action color everywhere.
   * -------------------------------------------------------------------
   * ACID / CHARTREUSE (--accent-2): electric yellow-green. It is loud
   * and pairs with cobalt on ink. Because acid on dark is a near-white
   * highlight, it is used for SMALL, BRIGHT signals only:
   *   • "NEW" / highlight tags & badges
   *   • eyebrow tick / leading marker before mono labels
   *   • link underline + link hover color
   *   • :focus-visible ring (AA-visible on both grounds)
   *   • tiny hover micro-accents (e.g. a rule that lights up)
   * NEVER use acid as a button fill on light theme (fails text contrast)
   * — on light it is reserved for underlines/marks where it sits behind
   *   ink text or as a thin rule, and the ring darkens to acid-700.
   *
   * COBALT ALWAYS REMAINS THE PRIMARY CTA. Acid never fills a primary
   * button. One loud color per viewport: if acid is on screen as a tag,
   * keep it to a single small element, not a field of green. */
  --c-acid-100: #f2ffc2;  /* pale acid wash */
  --c-acid-300: #e4ff7a;  /* bright acid (on-dark highlight text) */
  --c-acid-500: #d6ff3d;  /* Acid — electric chartreuse (the signal) */
  --c-acid-700: #a9cc1f;  /* darkened acid — usable on PAPER/light */
  --c-acid-900: #6f8410;  /* deep olive-acid shade */
  --c-acid-ink: #15170a;  /* near-black text to sit ON acid fills */

  /* CORAL / VERMILION (--accent-3): warm editorial red-orange. Used for
   * TERTIARY signals tied to urgency/heat, sparingly:
   *   • secondary / "sale" / urgency tags
   *   • a single sparing ALT-CTA where cobalt is already spent nearby
   *     (e.g. a "Limited" pill) — still secondary to cobalt
   *   • a stat highlight number / emphasis mark
   * Coral fills carry paper text (AA on coral-500). On light theme the
   * coral-700 shade keeps the same paper text legible. */
  --c-coral-100: #ffe0d8;  /* pale coral wash */
  --c-coral-300: #ff8a72;  /* coral tint */
  --c-coral-500: #ff5436;  /* Coral — warm vermilion (the heat) */
  --c-coral-700: #e23a1d;  /* coral shade — hover/pressed, light-theme fill */
  --c-coral-900: #a4260f;  /* deep coral shade */
  --c-coral-contrast: #fff7f4; /* warm paper text on coral fills */

  /* ---- PRIMITIVE: spacing scale (4px base) ------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ---- PRIMITIVE: radii ------------------------------------------- */
  --radius-none: 0px;
  --radius-sm:   8px;
  --radius-md:   14px;  /* chips / cards — modest editorial radius */
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ---- PRIMITIVE: type scale (modular, ~1.2 / poster ramp) -------- */
  --font-size-2xs: 0.6875rem; /* 11px micro labels */
  --font-size-xs:  0.75rem;   /* 12px */
  --font-size-sm:  0.875rem;  /* 14px */
  --font-size-md:  1rem;      /* 16px base */
  --font-size-lg:  1.25rem;   /* 20px */
  --font-size-xl:  1.5rem;    /* 24px */
  --font-size-2xl: 2rem;      /* 32px */
  --font-size-3xl: 3rem;   /* 48px */
  --font-size-4xl: clamp(3rem, 7vw, 5.5rem);     /* fluid poster section headline */
  --font-size-5xl: clamp(4rem, 11vw, 8.5rem);    /* hero poster — genuinely huge */

  /* ---- PRIMITIVE: line-height ------------------------------------- */
  --leading-poster:  0.92;  /* Anton poster headlines — tight stacked caps */
  --leading-none:    1;
  --leading-tight:   1.05;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  /* ---- PRIMITIVE: letter-spacing ---------------------------------- */
  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;   /* Anton poster: near-normal, faintly tight */
  --tracking-normal:  0em;
  --tracking-wide:    0.15em;    /* mono eyebrow micro-labels (~0.15em) */
  --tracking-wider:   0.22em;

  /* ---- PRIMITIVE: borders ----------------------------------------- */
  --border-hair:  1px;
  --border-thin:  1px;
  --border-thick: 2px;

  /* ---- PRIMITIVE: shadows -----------------------------------------
   * Stark / flat editorial look — shadows are intentionally minimal.
   * Used sparingly only to lift the primary CTA a hair on hover. */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 6px 18px rgba(10, 10, 11, 0.35);
  --shadow-lg: 0 12px 36px rgba(10, 10, 11, 0.45);

  /* ---- PRIMITIVE: transitions ------------------------------------- */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;
  --transition-slow: 320ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- PRIMITIVE: typography roles -------------------------------- */
  /* Families imported via the Google Fonts <link> in each page <head>. */
  --font-display: "Anton", "Arial Narrow", system-ui, sans-serif;       /* condensed poster */
  --font-serif:   "Playfair Display", Georgia, "Times New Roman", serif; /* elegant wordmark */
  --font-mono:    "Space Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* micro labels */
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  /* =================================================================
   * SEMANTIC TOKENS (role-based) — reference primitives only.
   * This is the DARK baseline. [data-theme="light"] re-points these.
   * ================================================================= */
  --bg:           var(--c-neutral-0);    /* Ink page ground */
  --bg-elevated:  var(--c-neutral-50);   /* raised band / sticky nav */
  --surface:      var(--c-neutral-200);  /* Steel — cards, carousel items */
  --surface-alt:  var(--c-neutral-300);  /* steel-light — nested / hover */

  --fg:           var(--c-neutral-950);  /* Paper primary text */
  --fg-muted:     var(--c-neutral-700);  /* warm grey secondary text (~paper 80%) */
  --fg-subtle:    var(--c-neutral-500);  /* Graphite — captions, eyebrows */

  --accent:       var(--c-accent-500);   /* Cobalt — PRIMARY (CTA) */
  --accent-hover: var(--c-accent-700);
  --accent-fg:    var(--c-accent-contrast); /* Paper on cobalt */

  /* SECONDARY semantic accents (dark baseline). See ramp comments above
   * for the strict role rules. --accent-2 = acid, --accent-3 = coral. */
  --accent-2:        var(--c-acid-500);   /* Acid — highlight/new/link/focus */
  --accent-2-hover:  var(--c-acid-300);
  --accent-2-fg:     var(--c-acid-ink);   /* near-black text on acid fills */
  --accent-3:        var(--c-coral-500);  /* Coral — urgency/secondary tag */
  --accent-3-hover:  var(--c-coral-700);
  --accent-3-fg:     var(--c-coral-contrast); /* paper on coral */

  /* Focus ring + link-underline colors (routed so themes can retune). */
  --ring:            var(--c-acid-500);   /* acid ring reads loud on ink */
  --link-underline:  var(--c-acid-500);

  --border:        rgba(110, 110, 115, 0.22); /* Graphite hairline @ low opacity */
  --border-strong: var(--c-neutral-500);       /* Graphite solid */

  --selection-bg: var(--accent);
  --selection-fg: var(--accent-fg);

}

/* ---- BRIDGE: re-point existing site/Webflow tokens to the new system.
 * IMPORTANT: a custom property whose value contains var() is resolved at
 * the element where it's DECLARED, and the resolved value then inherits —
 * it does NOT re-resolve per descendant. So to make these bridges flip
 * with the section bands, they must be declared on :root AND on each band
 * class (where the referenced semantic tokens have their band values). */
:root,
.band-dark,
.band-light {
  --color-primary:      var(--accent);
  --color-primary-dark: var(--accent-hover);
  --color-accent:       var(--accent);
  --color-ink:          var(--fg);
  --color-ink-soft:     var(--fg-muted);
  --color-muted:        var(--fg-muted);
  --color-muted-light:  var(--fg-subtle);
  --color-surface:      var(--surface);
  --color-surface-alt:  var(--surface-alt);
  --color-surface-muted: var(--bg-elevated);
  --color-border:       var(--border);
  --color-border-soft:  var(--border);

  --app-ink:        var(--fg);
  --app-grey:       var(--bg-elevated);
  --app-teal:       var(--accent);
  --app-teal-dark:  var(--accent-hover);
  --app-coral:      var(--accent);
  --app-radius-btn: var(--radius-pill);

  --walsh--black:               var(--fg);
  --walsh--azure:               var(--bg-elevated);
  --walsh--walsh-light-green:   var(--accent);
  --walsh--walsh-mid-green:     var(--accent);
  --walsh--walsh-dark-green:    var(--accent-hover);
}


/* =====================================================================
 * 3. SECTION BANDS  (replaces the old light/dark theme toggle)
 *    The page no longer has a dark/light MODE. Instead, content sections
 *    ALTERNATE between dark (ink) and light (paper) bands. Each band class
 *    re-points the SEMANTIC tokens locally; because the legacy bridge
 *    tokens are declared as `var(--surface)` etc., they resolve to the
 *    band's values at use-time, so every nested component (cards, pills,
 *    text) inherits the band palette automatically.
 *
 *    Usage:  <section class="band-dark"> … </section>
 *            <section class="band-light"> … </section>
 *    :root stays the permanent DARK baseline (nav, footer, hero chrome).
 * ===================================================================== */

.band-dark,
.band-light {
  background: var(--bg);
  color: var(--fg);
}

/* LIGHT band — Paper ground, Ink text, Cobalt unchanged.
 * Steel/Graphite become light warm-greys for surfaces & borders. */
.band-light {
  --bg:           var(--c-neutral-950);  /* Paper ground */
  --bg-elevated:  #fbfaf6;               /* lifted paper (nav band) */
  --surface:      #eceae2;               /* light steel — cards */
  --surface-alt:  #e1ded4;              /* light hover surface */

  --fg:           var(--c-neutral-0);    /* Ink text */
  --fg-muted:     var(--c-neutral-400);  /* graphite-dark secondary */
  --fg-subtle:    var(--c-neutral-500);  /* Graphite captions */

  --accent:       var(--c-accent-500);   /* Cobalt unchanged */
  --accent-hover: var(--c-accent-700);
  --accent-fg:    var(--c-accent-contrast);

  /* Retune secondary accents for the PAPER ground. Pure acid (#D6FF3D)
   * is near-invisible on warm white, so for rings/underlines we drop to
   * acid-700; coral darkens one step so paper text stays AA on fills. */
  --accent-2:        var(--c-acid-700);   /* darker acid reads on paper */
  --accent-2-hover:  var(--c-acid-900);
  --accent-2-fg:     var(--c-acid-ink);
  --accent-3:        var(--c-coral-700);  /* coral-700 fill, paper text AA */
  --accent-3-hover:  var(--c-coral-900);
  --accent-3-fg:     var(--c-coral-contrast);
  /* Ring/underline use acid-900 on paper: acid-700 only hits 1.65:1 vs
   * paper (fails the 3:1 UI-contrast minimum); acid-900 hits 3.77:1 (AA). */
  --ring:            var(--c-acid-900);   /* AA-visible focus ring on paper */
  --link-underline:  var(--c-acid-900);

  --border:        rgba(110, 110, 115, 0.28); /* graphite hairline on paper */
  --border-strong: var(--c-neutral-500);
}

/* DARK band — Ink ground, Paper text (mirrors the :root baseline). */
.band-dark {
  --bg:           var(--c-neutral-0);    /* Ink */
  --bg-elevated:  var(--c-neutral-50);
  --surface:      var(--c-neutral-200);  /* Steel */
  --surface-alt:  var(--c-neutral-300);

  --fg:           var(--c-neutral-950);  /* Paper */
  --fg-muted:     var(--c-neutral-700);
  --fg-subtle:    var(--c-neutral-500);

  /* Secondary accents — full-strength acid/coral on the ink ground. */
  --accent-2:        var(--c-acid-500);
  --accent-2-hover:  var(--c-acid-300);
  --accent-2-fg:     var(--c-acid-ink);
  --accent-3:        var(--c-coral-500);
  --accent-3-hover:  var(--c-coral-700);
  --accent-3-fg:     var(--c-coral-contrast);
  --ring:            var(--c-acid-500);
  --link-underline:  var(--c-acid-500);

  --border:        rgba(110, 110, 115, 0.22); /* Graphite hairline */
  --border-strong: var(--c-neutral-500);
}

/* ---- 3.1 Band-light safety net -------------------------------------
 * The original all-dark redesign hard-coded several elements to paper
 * (white) text. On a .band-light section those go paper-on-paper and
 * vanish. Re-assert the band foreground for the known offenders. These
 * are scoped to .band-light so dark bands are unaffected; accent links
 * and intentionally-muted captions keep their own colors. */
.band-light .walsh-heading-large-white,
.band-light .walsh-main-paragraph-white,
.band-light .proof-stat strong,
.band-light .fcar-card,
.band-light .looks-gallery__title,
.band-light h2:not([class]),
.band-light h3:not([class]) {
  color: var(--fg);
}
.band-light .walsh-main-paragraph-white {
  color: var(--fg-muted);
}

/* =====================================================================
 * 4. BASE / RESET overrides
 * ===================================================================== */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

a {
  color: inherit;
  transition: color var(--transition-base);
}

/* ---- a11y: visible keyboard focus ring (acid, AA on both grounds) ----
 * Mouse users keep clean focus (no ring); keyboard/AT users get a loud
 * 2px acid ring + offset so it never hides behind the element edge. */
:focus-visible {
  outline: var(--border-thick) solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Remove the legacy non-:focus-visible outline so it doesn't double up. */
:focus:not(:focus-visible) {
  outline: none;
}

/* Honor reduced-motion: kill transitions/animations for those who ask. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}


/* =====================================================================
 * 5. COMPONENT SKIN
 *    Retarget the real shared classes (from Agent 1's map) to tokens.
 * ===================================================================== */

/* ---- 5.1 Headings: condensed poster display -------------------------
 * .walsh-heading-large-black / -white are the hero + section H1/H2.
 * Beat Webflow's "Montserrat 700 / 4.4em" with the display font. */
.walsh-heading-large-black,
.walsh-heading-large-white,
.answer__title,
.pillar__word {
  font-family: var(--font-display) !important;
  font-weight: var(--font-weight-regular) !important; /* Anton is single-weight */
  text-transform: uppercase !important;               /* poster all-caps */
  line-height: var(--leading-poster) !important;       /* tight ~0.92 stack */
  letter-spacing: var(--tracking-tight) !important;
}

.walsh-heading-large-black { color: var(--fg) !important; }
.walsh-heading-large-white { color: var(--accent-fg) !important; }

/* Hero headline — poster-sized. The landing hero h1 is .walsh-heading-large-black
 * inside .walsh-left-hero; size it as the dominant poster type. Section
 * headlines (CTA / answer band) get the slightly smaller section scale. */
.walsh-left-hero .walsh-heading-large-black {
  font-size: var(--font-size-5xl) !important;
}
.walsh-heading-large-white,
.answer__title {
  font-size: var(--font-size-4xl) !important;
}

/* Poster utility: opt-in uppercase condensed banner type. */
.poster {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  line-height: var(--leading-poster);
  letter-spacing: var(--tracking-tight);
}

/* Hero-scale poster headline — genuinely poster-sized. */
.poster--hero {
  font-size: var(--font-size-5xl);
}
.poster--section {
  font-size: var(--font-size-4xl);
}

/* Body paragraphs — warm paper at reduced emphasis, comfortable leading.
 * (Hero serif paragraph is retargeted to the body grotesque per the spec:
 *  body copy is the clean neutral sans, NOT serif.) */
.walsh-paragraph-serif-left-hero,
.walsh-main-paragraph-white,
.answer__lede,
.pillar__copy p {
  font-family: var(--font-body) !important;
  color: var(--fg-muted);
  font-size: var(--font-size-lg);
  line-height: var(--leading-normal);
}
.walsh-main-paragraph-white { color: rgba(244, 242, 237, 0.82); }

/* ---- 5.2 Wordmark / logo -------------------------------------------
 * The brand logo is an <img> SVG, so there's no live text to serif.
 * Bind the serif role to any text wordmark fallback + expose .wordmark. */
.wordmark,
.walsh-brand-block .brand-wordmark {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  font-style: normal;
}

/* ---- 5.3 Buttons: pill system --------------------------------------
 * New generalized utilities .btn / .btn--solid / .btn--ghost AND a
 * retarget of the legacy Webflow button + custom .button system. */
.btn,
.button,
.faq-cta a.button,
.cta-banner a:not(.app-store-badge),
.brands-quote__cta,
.walsh-link-block-orange,
.walsh-link-block,
.walsh-link-block-white,
.walsh-link-block-orange-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-8);  /* generous pill padding (~20/40) */
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  letter-spacing: var(--tracking-normal);
  text-decoration: none;
  border: var(--border-thin) solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast),
              background var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
}

/* Solid (accent) variant — primary CTA */
.btn--solid,
.button--primary,
.cta-banner a:not(.app-store-badge),
.brands-quote__cta,
.faq-cta a.button {
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: var(--shadow-sm);
}
.btn--solid:hover,
.button--primary:hover,
.cta-banner a:not(.app-store-badge):hover,
.brands-quote__cta:hover,
.faq-cta a.button:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
/* Pressed: settle back down, no shadow — tactile click feedback. */
.btn:active,
.button:active,
.faq-cta a.button:active,
.cta-banner a:not(.app-store-badge):active,
.brands-quote__cta:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Ghost (bordered) variant — secondary CTA */
.btn--ghost,
.button--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--border-strong);
  box-shadow: none;
}
.btn--ghost:hover,
.button--ghost:hover {
  background: var(--surface-alt);
  border-color: var(--fg);
}

/* Legacy Webflow hover-fill swatch -> accent */
.walsh-link-block-orange .walsh-button-hover-fill,
.walsh-link-block .walsh-button-hover-fill {
  background-color: var(--accent) !important;
}
.walsh-link-block-orange .walsh-label-button {
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-normal);
}

/* ---- 5.4 Nav -------------------------------------------------------- */
.walsh-nav-wrapper-green-padding-2 {
  background-color: var(--bg-elevated) !important;
  border-bottom: var(--border-thin) solid var(--border);
  padding: var(--space-4) var(--space-7);
}
.walsh-main-nav {
  background-color: transparent !important;
}
.walsh-nav-link-black {
  color: var(--fg) !important;
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-normal);
  transition: color var(--transition-base);
}
.walsh-nav-link-black:hover {
  color: #6f8cff !important;   /* brighter cobalt — readable on the dark nav */
}
/* Active/current item: paper text (readable) on a faint cobalt chip, NOT
   cobalt text on the Webflow grey pill (#2e4bff on grey = unreadable). */
.walsh-nav-link-black.w--current {
  color: var(--fg) !important;
  background-color: rgba(46, 75, 255, 0.18) !important;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-pill);
}

/* ---- 5.5 Footer ----------------------------------------------------- */
.walsh-content-wrapper-white-2 {
  background-color: var(--bg-elevated) !important;
  border-top: var(--border-thin) solid var(--border);
  color: var(--fg);
}
.walsh-content-wrapper-white-2 .walsh-footer-link-center {
  color: var(--fg-muted);
  transition: color var(--transition-base);
}
.walsh-content-wrapper-white-2 .walsh-footer-link-center:hover {
  color: var(--accent);
}
.walsh-footer-legal-text {
  color: var(--fg-subtle);
}

/* ---- 5.6 Cards / carousel items ------------------------------------
 * NOTE: .pillar is intentionally NOT a card — the EXPLORE/DRESS/YOU
 * pillars are full-bleed editorial blocks that sit directly on the band
 * (no grey surface, no border). Only genuine cards get the surface. */
.feat-card,
.fcar-card,
.testimonial-card,
.blog-preview__card,
.brand-card,
.stat-card,
.brands-panel,
.blog-card,
.read-next__card,
.walsh-rounded-card,
.walsh-rounded-box-center-large {
  background: var(--surface);
  border: var(--border-thin) solid var(--border);
  border-radius: var(--radius-md) !important;
  color: var(--fg);
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              background var(--transition-base);
}
/* Subtle card lift — flat (no heavy shadow), just a hairline + 2px rise. */
.feat-card:hover,
.fcar-card:hover,
.testimonial-card:hover,
.blog-preview__card:hover,
.brand-card:hover,
.stat-card:hover,
.blog-card:hover,
.read-next__card:hover,
.walsh-rounded-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

/* Card titles must follow the band. Several were hard-coded paper in
 * site.css, so on a .band-light section they rendered paper-on-paper
 * (invisible). Route them through --fg so they flip per band. */
.feat-card :is(h2, h3, h4),
.fcar-card :is(h2, h3, h4),
.testimonial-card :is(h2, h3, h4),
.blog-preview__card :is(h2, h3, h4),
.stat-card :is(h2, h3, h4),
.blog-card :is(h2, h3, h4),
.read-next__card :is(h2, h3, h4),
.brand-card :is(h2, h3, h4),
.walsh-rounded-card :is(h2, h3, h4) {
  color: var(--fg) !important;
}

/* ---- 5.7 Tags / pills (legacy) ------------------------------------- */
.walsh-tag-black {
  background-color: var(--surface-alt) !important;
  color: var(--fg) !important;
  border-radius: var(--radius-pill);
  border: var(--border-thin) solid var(--border);
}
.walsh-tag-white {
  background-color: rgba(244, 242, 237, 0.08);
  color: var(--accent-fg);
  border-radius: var(--radius-pill);
}
.walsh-bullet-tag {
  background-color: var(--accent);
}

/* ---- 5.8 Eyebrow micro-label utility ------------------------------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-subtle);
  line-height: var(--leading-normal);
}

/* ---- 5.9 Hairline rule divider utility ----------------------------- */
.rule {
  border: 0;
  border-top: var(--border-thin) solid var(--border);
  height: 0;
  width: 100%;
  margin: var(--space-7) 0;
}

/* ---- 5.10 Accent block utility (poster banner) --------------------- */
.block-accent {
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: var(--radius-none);  /* SHARP corners — poster block */
  padding: var(--space-9) var(--space-8);
}
.block-accent .walsh-heading-large-black,
.block-accent .walsh-heading-large-white,
.block-accent .poster {
  color: var(--accent-fg) !important;
}
/* Mono eyebrow inside the cobalt block — paper at reduced opacity. */
.block-accent .eyebrow {
  color: rgba(244, 242, 237, 0.72);
}

/* ---- 5.11 Override hard-coded hexes the map flagged ---------------- */
/* iPhone mockup frame ( #0b0b0d / #060608 ) -> token surface */
.device,
.device__screen {
  background: var(--c-neutral-100) !important;
}
/* Star rating ( #f5a623 ) -> accent so it can't clash with the palette */
.app-rating__stars {
  color: var(--accent) !important;
}

/* ---- 5.12 App Store badge cluster (token-driven hover) ------------- */
.app-store-badge {
  border-radius: var(--radius-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-base);
}
.app-store-badge:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.app-rating { color: var(--fg-muted); }
.app-rating strong { color: var(--fg); }

/* ---- 5.13 Hero band background ------------------------------------- */
.walsh-background-darkgreen {
  background-color: var(--bg) !important;
  background-image: none !important;
}


/* =====================================================================
 * 6. SECONDARY-ACCENT UTILITIES  (Agent 4)
 *    Acid + coral, deployed SPARINGLY per the role rules at the top of
 *    the file. These are opt-in utility classes — apply to a single
 *    small element, never a field. One loud color per viewport.
 * ===================================================================== */

/* 6.1 Acid eyebrow tick — a small leading marker before a mono label.
 * Usage: <p class="eyebrow"><span class="eyebrow__tick"></span> TODAY'S EDIT</p> */
.eyebrow__tick {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.55em;
  vertical-align: 0.02em;
  background: var(--accent-2);
  border-radius: var(--radius-sm);
}

/* 6.2 "NEW" / highlight tag — acid fill, near-black text. Tiny only. */
.tag-new {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.25em 0.6em;
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  color: var(--accent-2-fg);
  background: var(--accent-2);
  border-radius: var(--radius-pill);
}

/* 6.3 Urgency / "sale" tag — coral fill, paper text. Tertiary signal. */
.tag-urgent {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.25em 0.6em;
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  color: var(--accent-3-fg);
  background: var(--accent-3);
  border-radius: var(--radius-pill);
}

/* 6.4 Sparing ALT-CTA — coral pill. Use ONLY where cobalt is already
 * spent nearby (e.g. a "Limited" action). Still secondary to cobalt. */
.btn--alt {
  background: var(--accent-3);
  color: var(--accent-3-fg);
}
.btn--alt:hover {
  background: var(--accent-3-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* 6.5 Coral stat / emphasis mark — a single highlighted number or word. */
.stat-hot,
.mark-coral {
  color: var(--accent-3);
  font-weight: var(--font-weight-bold);
}

/* 6.6 Acid link underline utility — for inline editorial links. The
 * underline lights acid; on hover the whole link shifts to the accent. */
.link-acid {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--transition-base),
              color var(--transition-base);
}
.link-acid:hover {
  color: var(--accent-2);
  text-decoration-color: var(--accent-2);
}

/* 6.7 Footer + body inline links: give the legacy footer links an acid
 * underline on hover instead of (or with) the cobalt color shift, so the
 * secondary accent gets a quiet, consistent home. */
.walsh-content-wrapper-white-2 .walsh-footer-link-center {
  text-decoration: none;
  background-image: linear-gradient(var(--link-underline), var(--link-underline));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--transition-base), color var(--transition-base);
}
.walsh-content-wrapper-white-2 .walsh-footer-link-center:hover {
  background-size: 100% 2px;
}

/* 6.8 Eyebrow keeps a faint acid affordance only where .eyebrow--tick is
 * NOT used: the bullet-tag legacy element borrows acid for a "live" feel. */
.walsh-bullet-tag.is-new {
  background-color: var(--accent-2) !important;
}


/* =====================================================================
 * 7. SECTION RHYTHM  (Agent 4)
 *    Consistent vertical breathing room. Webflow sections vary wildly;
 *    normalize the big band paddings to the spacing scale so the poster
 *    layout has steady cadence. Eyebrow sits ~24px above its block.
 * ===================================================================== */
.eyebrow {
  margin-bottom: var(--space-3);
}
.block-accent .eyebrow,
.eyebrow + .poster,
.eyebrow + .walsh-heading-large-black,
.eyebrow + .walsh-heading-large-white {
  margin-top: 0;
}
/* Hero headline breathing room under the poster type. */
.walsh-left-hero .walsh-heading-large-black {
  margin-bottom: var(--space-5);
}


/* =====================================================================
 * 8. THEME TOGGLE — REMOVED
 *    The dark/light toggle was dropped in favour of alternating section
 *    bands (see section 3). The button markup is being removed from every
 *    page; this rule hides any stragglers so no dead control renders.
 * ===================================================================== */
.theme-toggle { display: none !important; }

/* ============================================================================
 * COOKIE-CONSENT BANNER (legacy component)
 * ----------------------------------------------------------------------------
 * The consent banner ships an inline <style> on every page with hard-coded
 * greens (#111 panel, #21a179 accept, #9bd3c2 link, #f2f2f2 secondary) that
 * predate the redesign. Retarget it to the token system so it matches both
 * themes. Token-driven only — re-points per theme automatically. Behavior and
 * copy are untouched (Agent 5).
 * ========================================================================== */

/* Panel — ink/steel surface, paper text, token border + shadow. */
#cx.cx,
.cx {
  background: var(--surface) !important;
  color: var(--fg) !important;
  border: var(--border-hair) solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}

.cx .cx-text { color: var(--fg) !important; }

/* All consent buttons share token radius + transition. */
.cx .cx-btn {
  border-radius: var(--radius-sm) !important;
  transition: background var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base) !important;
}

/* Primary "Accept" — cobalt accent, paper text. */
.cx .cx-primary {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  border: var(--border-thin) solid var(--accent) !important;
}
.cx .cx-primary:hover { background: var(--accent-hover) !important; }

/* Secondary buttons — quiet steel-light surface with token border. */
.cx .cx-secondary {
  background: var(--surface-alt) !important;
  color: var(--fg) !important;
  border: var(--border-thin) solid var(--border) !important;
}
.cx .cx-secondary:hover { border-color: var(--border-strong) !important; }

/* Inline link inside the banner — accent text, acid underline like site links. */
.cx .cx-link {
  color: var(--accent) !important;
  text-decoration-color: var(--link-underline) !important;
}

/* Advanced-config modal (inline-styled #cx-modal panel) — retint to tokens. */
#cx-modal > div {
  background: var(--surface) !important;
  color: var(--fg) !important;
  border: var(--border-hair) solid var(--border) !important;
}


/* =====================================================================
 * 9. RENDER FIXES  (Agent 6 — review pass)
 *    Legacy Webflow/site classes that kept hard-coded #fff / paper
 *    backgrounds (or whose bridged --app-ink / --walsh--black tokens
 *    inverted under the dark-default skin) produced invisible text and
 *    jarring light blocks on the ink ground. Retarget them to the
 *    semantic tokens so they re-theme correctly in BOTH themes.
 *    Token-driven only; no content changes.
 * ===================================================================== */

/* ---- 9.1 NAV white pill (site-wide) --------------------------------
 * `.walsh-float-menu` shipped a hard-coded #fff background, so the
 * paper-colored nav links (.walsh-nav-link-black) sat paper-on-white
 * and the right-side theme toggle nearly vanished. Retarget the pill
 * (and the nav-menu container) to the elevated band token: nav links
 * are now paper-on-ink (dark) / ink-on-paper (light). */
.walsh-float-menu {
  background-color: var(--bg-elevated) !important;
  border: var(--border-thin) solid var(--border);
  border-radius: var(--radius-pill);
}
.walsh-main-nav {
  background-color: transparent !important;
}
/* DESKTOP only: the nav-menu is an inline row inside the dark pill, so it
 * must be transparent. On MOBILE (<=991px) the same element becomes the
 * collapsed dropdown PANEL and needs a solid surface (see 9.3) — so do
 * NOT force it transparent there. */
@media (min-width: 992px) {
  .walsh-nav-menu-white {
    background-color: transparent !important;
  }
}

/* ---- 9.2 LOGO visibility ------------------------------------------
 * Stylin_logo.svg has baked-in fill="black". The nav and footer are
 * always on the ink (dark) chrome, so the logo is inverted to paper
 * unconditionally. If the wordmark ever sits inside a .band-light
 * section, add `.band-light img[src*="Stylin_logo"]{filter:none}`. */
img[src*="Stylin_logo"] {
  filter: invert(1) brightness(1.9);
}
.band-light img[src*="Stylin_logo"] {
  filter: none;
}

/* ---- 9.3 Mobile nav dropdown panel ---------------------------------
 * Two mobile-nav systems exist:
 *  (a) webflow.js pages (index + most): the menu collapses at <=991px and
 *      Webflow gives `.walsh-nav-menu-white` a #fff panel + opens it via
 *      [data-nav-menu-open] inside `.w-nav-overlay`.
 *  (b) script-light blog pages: the custom `.mnav` toggle.
 * In BOTH the panel must be a solid ink surface (not the leftover #fff,
 * and not the desktop transparent override). Retarget to the elevated
 * band + token border + shadow so the paper links read over the page. */
@media (max-width: 991px) {
  .walsh-nav-menu-white,
  .walsh-nav-menu-white[data-nav-menu-open],
  .w-nav-overlay .walsh-nav-menu-white,
  .mnav .walsh-nav-menu-white {
    background-color: var(--bg-elevated) !important;
    border: var(--border-thin) solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
  }
  /* Webflow's w-nav tap handler is DEAD post-redesign — clicking the burger
   * never sets .w--open and never moves the menu into .w-nav-overlay. So the
   * overlay is unused (hide it) and the burger is wired by js/nav-toggle.js,
   * which toggles `.nav-open` on the menu. Show it as a dropdown panel
   * anchored to the nav pill. (The surface/border/shadow come from the rule
   * above, which already includes .walsh-nav-menu-white.) */
  .w-nav-overlay { display: none !important; }
  .walsh-float-menu { position: relative; }
  .walsh-nav-menu-white.nav-open {
    display: block !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    padding: 12px !important;
    z-index: 1200 !important;
  }
  .walsh-nav-menu-white.nav-open .walsh-flex-nav-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
  }
  .walsh-nav-menu-white.nav-open .walsh-nav-link-black {
    display: block !important;
    padding: 13px 12px !important;
    border-radius: 10px !important;
    text-align: left !important;
  }
  .walsh-nav-menu-white.nav-open .app-store-badge {
    margin: 10px 12px 4px !important;
    display: inline-block !important;
  }
}
/* Hamburger icon lines -> foreground token (were dark-on-dark). */
.walsh-menu-button-black .w-icon-nav-menu,
.mnav-toggle span {
  color: var(--fg) !important;
}

/* ---- 9.3b Small cobalt TEXT on the dark ground ---------------------
 * Brand cobalt (#2e4bff) on ink is only ~3.36:1 — fine for large poster
 * type and fills (paper sits on them), but small eyebrows/links fail AA.
 * Brighten cobalt TEXT that lives on dark to a lighter cobalt (~6.6:1).
 * Fills are untouched, so buttons/badges keep the brand cobalt. */
.answer__eyebrow,
.cx-link,
.band-dark .eyebrow--accent,
.band-dark a.link-cobalt {
  color: #6f8cff !important;
}

/* ---- 9.4 Proof / social-proof strip --------------------------------
 * site.css `.proof-strip { background:#fff }` -> paper stats text was
 * invisible. Make it the ink ground so the paper numbers/labels read,
 * keep the hairline top/bottom rules on the token border. */
.proof-strip {
  background: var(--bg) !important;
  border-top: var(--border-thin) solid var(--border) !important;
  border-bottom: var(--border-thin) solid var(--border) !important;
}

/* ---- 9.5 "The Answer" dark contrast band ---------------------------
 * `.answer { background: var(--app-ink); color:#fff }` was DESIGNED as
 * a dark band, but the --app-ink bridge re-points to --fg (paper) under
 * the dark skin, so it rendered paper-bg with white text (invisible).
 * Pin it back to the ink ground; its white title + cobalt eyebrow read.
 * In LIGHT theme --bg is paper, so retarget the band text to --fg. */
.answer {
  background: var(--bg) !important;
  color: var(--fg) !important;
}
.answer .answer__title,
.answer h2 {
  color: var(--fg) !important;
}

/* ---- 9.6 Final CTA band --------------------------------------------
 * `.walsh-cta-green-wrapper { background:var(--walsh--black); color:
 * var(--walsh--black) }` -> bridged --walsh--black is --fg (paper), so
 * bg AND text were both paper (invisible). Pin bg to ink ground; the
 * heading uses .walsh-heading-large-white (paper) and now reads. */
.walsh-cta-green-wrapper {
  background-color: var(--bg) !important;
  color: var(--fg) !important;
}

/* ---- 9.7 Dark feature card ----------------------------------------
 * `.feat-card--dark { background: var(--app-ink) }` inverted to paper.
 * Force the elevated/steel surface so it stays a dark card. */
.feat-card--dark {
  background: var(--surface) !important;
}

/* ---- 9.8 Generic CTA banner (for-brands / latest) ------------------
 * site.css `.cta-banner { background:#fff }` -> retarget to steel
 * surface so it's a card on the ink ground, not a white block. (Its
 * inner primary link is already skinned to the cobalt pill in 5.3.) */
.cta-banner {
  background: var(--surface) !important;
  border: var(--border-thin) solid var(--border) !important;
}

/* ---- 9.9 about.html inline-style block -----------------------------
 * about.html ships an inline <style> (AFTER redesign.css in the head,
 * so it wins on equal specificity) full of pre-redesign light-design
 * hexes: #131313/#444/#555/#666 dark text on the now-dark page =
 * invisible body content, plus a #f9f9f7 stat card and a #131313 /#fff
 * contact band. Retarget every color/background to tokens (needs
 * !important to beat the later inline rules). */
.about-hero h1,
.about-section h2,
.about-value h3 {
  color: var(--fg) !important;
}
.about-hero p,
.about-value p {
  color: var(--fg-muted) !important;
}
.about-section p {
  color: var(--fg-muted) !important;
}
/* Stat cards -> steel surface, token text. */
.about-stat {
  background: var(--surface) !important;
  border: var(--border-thin) solid var(--border) !important;
}
.about-stat strong { color: var(--fg) !important; }
.about-stat span   { color: var(--fg-subtle) !important; }
/* Value cards -> accent left-rule on the ink ground. */
.about-value {
  border-left: var(--border-thick) solid var(--accent) !important;
}
/* Contact band: it was a dark #131313 band w/ white text — under the
 * dark skin keep it as a distinct elevated band, paper text, and turn
 * its white button into the cobalt pill (consistent CTA). */
.about-contact {
  background: var(--surface) !important;
  color: var(--fg) !important;
  border: var(--border-thin) solid var(--border) !important;
}
.about-contact h2 { color: var(--fg) !important; }
.about-contact p  { color: var(--fg-muted) !important; }
.about-contact a {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
}

/* ---- 9.10 features/* inline-style blocks ---------------------------
 * The feature pages (index + vibe-feed/body-shape/edit-outfit) each ship
 * an inline <style> (after redesign.css) built for the OLD light design:
 * #131313/#444/#555/#888 text (invisible on ink), #fff/#f7f7f5/#f0ede8
 * light cards, and #131313 / #0b3d36 dark bands. Retarget to tokens so
 * the pages read on the ink ground in both themes. !important beats the
 * later inline rules. Copy unchanged. */

/* Hero + section headings/leads (shared .feat-* + .feat-index-* systems) */
.feat-hero h1,
.feat-section h2,
.feat-index-hero h1,
.step h3,
.pipeline-stage h3,
.score-breakdown h3,
.faq-item h3 {
  color: var(--fg) !important;
}
.feat-hero .lead,
.feat-hero p,
.feat-section p,
.feat-index-hero p,
.step p,
.pipeline-stage p,
.faq-item p,
.outcomes li,
.latency-note,
.score-label,
.score-pct {
  color: var(--fg-muted) !important;
}
.feat-hero .breadcrumb,
.feat-hero .breadcrumb a,
.feat-index-hero .breadcrumb,
.feat-index-hero .breadcrumb a,
.feat-card-tag {
  color: var(--fg-subtle) !important;
}
.feat-hero .breadcrumb a:hover,
.feat-index-hero .breadcrumb a:hover { color: var(--accent) !important; }

/* Light pill / chip / card surfaces -> steel surface + token border */
.prompt-chip,
.shape-pill,
.feat-card-link,
.pipeline-stage,
.score-breakdown,
.latency-note,
.step {
  background: var(--surface) !important;
  border: var(--border-thin) solid var(--border) !important;
  color: var(--fg) !important;
}
.feat-card-link .feat-card-body h2 { color: var(--fg) !important; }
.feat-card-link .feat-card-body p  { color: var(--fg-muted) !important; }
.feat-card-cta { color: var(--accent) !important; }
.shape-pill.active {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  border-color: var(--accent) !important;
}

/* Step-number + stage chips -> accent token, not raw #131313 */
.step-num,
.pipeline-stage .stage-label,
.brand-card__icon {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
}
/* brand-card was a #0b3d36 green-tint box with a cobalt letter (off-brand,
 * low-contrast on dark). De-green the hover wash too. */
.brand-card::before {
  background: linear-gradient(135deg, rgba(46, 75, 255, 0.08), rgba(46, 75, 255, 0.03)) !important;
}

/* Score-bar track + fill -> token surfaces */
.score-bar-bg { background: var(--surface-alt) !important; }
.score-bar-fill { background: var(--accent) !important; }

/* FAQ item dividers -> token hairline */
.faq-item { border-top: var(--border-thin) solid var(--border) !important; }
.faq-item:last-child { border-bottom: var(--border-thin) solid var(--border) !important; }

/* "Hard block" + feature CTA are FIXED-DARK callout cards (the #0b3d36 was
 * an off-brand green). They must read as a dark block on ANY band — the
 * feature article bodies are light bands — so they use FIXED ink/paper
 * primitives, NOT band tokens (which would make them light-on-light). */
.hard-block,
.feat-cta,
.feat-index-cta-inner {
  background: var(--c-neutral-50) !important;   /* lifted ink, any band */
  border: var(--border-thin) solid rgba(244, 242, 237, 0.08) !important;
  color: var(--c-neutral-950) !important;        /* paper */
}
.hard-block h2,
.feat-cta h2,
.feat-index-cta-inner h2 { color: var(--c-neutral-950) !important; }
.hard-block p,
.feat-cta p,
.feat-index-cta-inner p { color: var(--c-neutral-700) !important; }   /* paper-muted */
.hard-block code { background: rgba(244, 242, 237, 0.10) !important; color: var(--c-neutral-950) !important; }
/* Text CTA buttons -> cobalt pill, but NEVER a link that wraps an image
 * (the App Store badge) — a cobalt fill behind the black badge is the ugly
 * blue box. :not(:has(img)) covers badge links that lack the class. */
.feat-cta a:not(.app-store-badge):not(:has(img)),
.feat-index-cta-inner a:not(.app-store-badge):not(:has(img)) {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
}
.feat-cta a:has(img),
.feat-index-cta-inner a:has(img),
.feat-cta a.app-store-badge,
.feat-index-cta-inner a.app-store-badge {
  background: transparent !important;
}

/* ==========================================================================
   10. COSMETIC POLISH (Agent 7 follow-up)
   Two off-palette leftovers flagged in the render review, retargeted to
   tokens here in the skin (not edited in blog.css / 401.html markup).
   ========================================================================== */

/* 10.1 Blog article CTA gradient ended in an off-brand teal (#145c52 in
   blog/blog.css). Retarget both stops to the cobalt accent ramp. */
.article-cta {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
  color: var(--accent-fg) !important;
}
.article-cta h2,
.article-cta p { color: var(--accent-fg) !important; }

/* 10.2 401 password page submit button was Webflow default blue (#3898EC).
   Make it the cobalt pill to match the system. */
.w-password-page.w-button,
input.w-password-page.w-button[type="submit"] {
  background-color: var(--accent) !important;
  color: var(--accent-fg) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--font-weight-bold) !important;
  transition: background-color var(--transition-base) !important;
}
.w-password-page.w-button:hover,
input.w-password-page.w-button[type="submit"]:hover {
  background-color: var(--accent-hover) !important;
}

/* =====================================================================
   11. FEATURE PAGES — EDITORIAL (world-class pass)
   Ink ground + the locked type system (Anton hero / Playfair section &
   step titles / Space Mono labels & chips / Inter body) layered over the
   token-color overrides in 9.9-9.10. !important beats the inline styles.
   ===================================================================== */
.feat-hero { background: var(--bg) !important; }
.feat-hero .w-container,
.feat-section.w-container { max-width: 840px; }

/* Breadcrumb + hero */
.feat-hero .breadcrumb,
.feat-index-hero .breadcrumb {
  font-family: var(--font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px !important;
  margin-bottom: clamp(18px, 3vw, 30px) !important;
}
.feat-hero h1,
.feat-index-hero h1 {
  font-family: var(--font-display) !important;
  text-transform: uppercase;
  font-weight: 400 !important;
  font-size: clamp(2.6rem, 7vw, 5.4rem) !important;
  line-height: 0.94 !important;
  letter-spacing: 0.006em !important;
  color: var(--fg) !important;
  margin: 0 0 clamp(18px, 2.5vw, 28px) !important;
}
.feat-hero .lead,
.feat-index-hero .lead,
.feat-index-hero p {
  font-family: var(--font-body) !important;
  font-size: clamp(16px, 1.4vw, 20px) !important;
  line-height: 1.6 !important;
  color: var(--fg-muted) !important;
}

/* Section titles -> Playfair editorial (not the condensed poster) */
.feat-section h2 {
  font-family: var(--font-serif) !important;
  text-transform: none !important;
  font-weight: 500 !important;
  font-size: clamp(1.7rem, 3.3vw, 2.5rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
  color: var(--fg) !important;
  margin: 0 0 clamp(16px, 2vw, 22px) !important;
}
.feat-section > p {
  font-family: var(--font-body) !important;
  font-size: clamp(15px, 1.15vw, 17px) !important;
  line-height: 1.72 !important;
  color: var(--fg-muted) !important;
}

/* Prompt chips -> mono pills */
.prompt-chip {
  font-family: var(--font-mono) !important;
  font-style: normal !important;
  font-size: 13px !important;
  letter-spacing: 0.01em;
  background: var(--surface) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 9px 16px !important;
}

/* Pipeline / step cards -> Playfair titles, mono number badges */
.pipeline-stage h3,
.step h3,
.feat-card-link h3,
.feat-card-link .feat-card-body h2 {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem) !important;
  letter-spacing: -0.005em;
  color: var(--fg) !important;
}
.pipeline-stage .stage-label,
.step-num {
  font-family: var(--font-mono) !important;
  font-weight: 400 !important;
}

/* FAQ -> Playfair questions on a hairline list */
.faq-item { border-color: var(--border) !important; }
.faq-item h3 {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(1.1rem, 1.5vw, 1.32rem) !important;
  color: var(--fg) !important;
}

/* Score / mono micro-labels */
.score-breakdown h3 {
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  font-size: 12px !important;
  color: var(--accent) !important;
}
.score-label,
.score-pct,
.latency-note,
.feat-card-tag,
.pipeline-stage .stage-label {
  font-family: var(--font-mono) !important;
}

/* Hard block heading -> keep paper but use the display poster voice */
.hard-block h2 {
  font-family: var(--font-serif) !important;
  text-transform: none !important;
  font-weight: 500 !important;
}

/* Feature CTA headings -> Anton poster (consistent with article-end CTA) */
.feat-cta h2,
.feat-index-cta-inner h2,
.hard-block h2 {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  line-height: 0.98 !important;
}

/* =====================================================================
   12. FEATURE PAGES — PRODUCT REFINEMENT (feedback pass)
   Features are PRODUCT pages, NOT the editorial blog. So: left-aligned
   (match the blog masthead), clean Inter titles (no Playfair magazine
   serif), NO grey card fills, and a clean hairline FAQ list. Anton stays
   on the hero headline + CTAs; mono stays on labels/chips.
   ===================================================================== */

/* Left-align the hero (was centered). */
.feat-hero,
.feat-index-hero { text-align: left !important; }
.feat-hero .lead,
.feat-index-hero .lead,
.feat-index-hero p { margin-left: 0 !important; margin-right: 0 !important; }
.feat-hero-img-wrap { margin-left: 0 !important; margin-right: auto !important; }

/* Titles inside features -> clean Inter sans, NOT Playfair. */
.feat-section h2,
.pipeline-stage h3,
.step h3,
.feat-card-link h3,
.feat-card-link .feat-card-body h2,
.faq-item h3 {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: -0.01em !important;
}
.feat-section h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.05rem) !important;
  line-height: 1.2 !important;
}

/* Remove the grey card fills — clean components on the ink ground. */
.feat-card-link,
.pipeline-stage,
.step,
.score-breakdown {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Clean hairline FAQ list (was bloated steel cards from site.css). */
.faq-item {
  background: none !important;
  border: none !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(22px, 3vw, 30px) 0 !important;
}
.faq-item:last-child { border-bottom: 1px solid var(--border) !important; }
.faq-item > * { padding: 0 !important; }   /* kill the site.css "0 24px 26px" indent + gap */
.faq-item h3 { font-size: clamp(1.05rem, 1.5vw, 1.2rem) !important; margin: 0 0 10px !important; line-height: 1.3 !important; }
.faq-item p { margin: 0 !important; color: var(--fg-muted) !important; }

/* =====================================================================
   13. LANDING HERO PHOTO — cross-dissolve rotator
   A stack of clean editorial portraits that slowly cross-fade (no slides,
   flips, or bounce). The active frame drifts a hair for life. One calm
   image block beside the poster H1.
   ===================================================================== */
.walsh-ui-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 4 / 5;
  max-height: 86vh;
  align-self: stretch;
  background: var(--surface);
}
.hero-rota { position: absolute; inset: 0; }
.hero-rota__img,
.walsh-image-hero-device {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  display: block;
  opacity: 0;
  transition: opacity 1400ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
.hero-rota__img.is-active { opacity: 1; }
/* A whisper of drift on the visible frame — tasteful, not Ken-Burns-y. */
@media (prefers-reduced-motion: no-preference) {
  .hero-rota__img.is-active { animation: heroDrift 7000ms ease-out both; }
}
@keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.045); } }
/* Reduced motion: just show the first frame, no fade/drift/rotation. */
@media (prefers-reduced-motion: reduce) {
  .hero-rota__img { transition: none; }
  .hero-rota__img:first-child { opacity: 1; }
}

/* Hero headline must not collide with the photo column — trim its max
   size and add a gutter so it stays within its 6-col track. */
.walsh-left-hero { padding-right: clamp(16px, 2.5vw, 40px); }
.walsh-left-hero .walsh-heading-large-black {
  font-size: clamp(2.8rem, 7.2vw, 6.6rem) !important;
}
@media (max-width: 767px) {
  /* Single column on mobile: full poster size, no photo collision. */
  .walsh-left-hero { padding-right: 0; }
  .walsh-left-hero .walsh-heading-large-black { font-size: clamp(3rem, 15vw, 5rem) !important; }
  .walsh-ui-image-wrapper { aspect-ratio: 4 / 5; max-height: 70vh; }
}

/* =====================================================================
   14. CONTENT PAGES — about (editorial) + for-brands (product)
   about  = editorial register: Anton hero, Playfair section headings.
   brands = product register:   Anton hero, clean Inter headings.
   Both on ink, mono micro-labels, clean (no grey) stat/value cards.
   ===================================================================== */

/* ---- about.html (editorial) ---- */
.about-hero { background: var(--bg) !important; text-align: left !important; padding: clamp(40px,7vw,96px) 0 clamp(8px,2vw,24px) !important; }
.about-hero .w-container, .about-section.w-container { max-width: 820px; }
.about-hero h1 {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  font-size: clamp(2.6rem, 6.5vw, 5rem) !important;
  line-height: 0.94 !important;
  letter-spacing: 0.006em !important;
  color: var(--fg) !important;
  margin: 0 0 clamp(16px,2vw,24px) !important;
}
.about-hero p { font-family: var(--font-body) !important; font-size: clamp(16px,1.4vw,20px) !important; line-height: 1.6 !important; color: var(--fg-muted) !important; max-width: 52ch; }
.about-section h2 {
  font-family: var(--font-serif) !important;
  text-transform: none !important;
  font-weight: 500 !important;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
  color: var(--fg) !important;
  margin: 2em 0 0.6em !important;
}
.about-section > p { font-family: var(--font-body) !important; font-size: clamp(15px,1.15vw,18px) !important; line-height: 1.75 !important; color: var(--fg-muted) !important; }
.about-value h3 { font-family: var(--font-serif) !important; font-weight: 500 !important; font-size: clamp(1.15rem,1.6vw,1.4rem) !important; color: var(--fg) !important; }
.about-value p { font-family: var(--font-body) !important; color: var(--fg-muted) !important; }
.about-value { background: none !important; border: none !important; border-top: 1px solid var(--border) !important; border-radius: 0 !important; padding: 22px 0 0 !important; }
.about-stat { background: none !important; border: none !important; }
.about-stat strong { font-family: var(--font-display) !important; font-weight: 400 !important; font-size: clamp(2rem,3vw,2.8rem) !important; color: var(--fg) !important; }
.about-stat span { font-family: var(--font-mono) !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; font-size: 11px !important; color: var(--fg-subtle) !important; }
/* .about-contact a is a cobalt PILL button (cobalt bg + paper text) per
 * rule ~1143 — do not turn it into a cobalt-on-cobalt text link. */
.about-contact a { color: var(--accent-fg) !important; text-decoration: none !important; }

/* ---- for-brands.html (product) ---- */
.brands-hero { background: var(--bg) !important; }
.brands-hero__badge { font-family: var(--font-mono) !important; text-transform: uppercase !important; letter-spacing: 0.16em !important; font-size: 11px !important; color: var(--accent) !important; background: none !important; border: 1px solid var(--border) !important; }
.brands-hero__title {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  font-size: clamp(2.4rem, 6vw, 5rem) !important;
  line-height: 0.96 !important;
  letter-spacing: 0.006em !important;
  color: var(--fg) !important;
}
.brands-hero__subtitle { font-family: var(--font-body) !important; font-size: clamp(16px,1.3vw,19px) !important; line-height: 1.6 !important; color: var(--fg-muted) !important; }
.brands-hero__stat-card { background: none !important; border: none !important; border-top: 1px solid var(--border) !important; border-radius: 0 !important; }
.section-heading {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  font-size: clamp(1.6rem, 3vw, 2.3rem) !important;
  letter-spacing: -0.01em !important;
  color: var(--fg) !important;
}
.section-subtitle { font-family: var(--font-body) !important; color: var(--fg-muted) !important; }
.brand-card { background: none !important; border: none !important; box-shadow: none !important; }
.brand-card h3 { font-family: var(--font-body) !important; font-weight: 600 !important; color: var(--fg) !important; }
.brand-card p { color: var(--fg-muted) !important; }
.brands-panel { background: var(--surface) !important; border: 1px solid var(--border) !important; }
.brands-panel h3 { font-family: var(--font-body) !important; font-weight: 600 !important; color: var(--fg) !important; }

/* Brighten the for-brands badge cobalt text for AA on the ink ground. */
.brands-hero__badge { color: #6f8cff !important; }

/* Contact pill: cobalt button + paper text — force past any specificity. */
.about-section .about-contact a {
  background: var(--accent) !important;
  color: #f4f2ed !important;
  text-decoration: none !important;
}

/* =====================================================================
   15. faq.html — product register (clean accordion)
   The feature-FAQ rules (section 12) already give it a hairline list;
   this adds the poster title + cobalt toggle + a tighter list.
   ===================================================================== */
.faq-page { background: var(--bg) !important; }
.faq-page .page-title {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  font-size: clamp(2.4rem, 6vw, 4.6rem) !important;
  line-height: 0.96 !important;
  letter-spacing: 0.006em !important;
  color: var(--fg) !important;
}
.faq-page .page-intro { font-family: var(--font-body) !important; color: var(--fg-muted) !important; }
.faq-page .faq-wrapper { gap: 0 !important; }
.faq-page .faq-item summary {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem) !important;
  color: var(--fg) !important;
  padding: clamp(20px, 3vw, 26px) 44px clamp(20px, 3vw, 26px) 0 !important;
}
.faq-page .faq-item summary::after { color: var(--accent) !important; right: 2px !important; font-weight: 400 !important; }
.faq-page .faq-item[open] { border-color: var(--border) !important; box-shadow: none !important; }
.faq-page .faq-item > *:not(summary) {
  padding: 0 44px clamp(20px, 3vw, 26px) 0 !important;
  color: var(--fg-muted) !important;
  font-family: var(--font-body) !important;
}
.faq-page .faq-item .badge {
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
}

/* =====================================================================
   16. latest.html — editorial drop ("This Week")
   Ink ground, Anton masthead, mono labels, steel look-cards. The vibe
   pill is white-on-image so its text is pinned dark (was --color-ink,
   which flips to paper on ink = white-on-white).
   ===================================================================== */
.drop-wrap { background: var(--bg) !important; }
.drop-head .page-title {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  font-size: clamp(2.6rem, 7vw, 5.4rem) !important;
  line-height: 0.94 !important;
  letter-spacing: 0.006em !important;
  color: var(--fg) !important;
}
.drop-eyebrow {
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  font-size: 11px !important;
  color: var(--fg-subtle) !important;
}
.drop-head .page-intro { font-family: var(--font-body) !important; color: var(--fg-muted) !important; }
.drop-sub {
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--fg-subtle) !important;
}
.look { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: none !important; }
.look__vibe {
  background: rgba(244, 242, 237, 0.94) !important;
  color: #0a0a0b !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.1em !important;
}
.look__caption { color: #f4f2ed !important; }
.item-match { color: var(--accent) !important; background: rgba(46, 75, 255, 0.12) !important; border-color: rgba(46, 75, 255, 0.28) !important; }

/* =====================================================================
   17. LEGAL PAGES — privacy-policy + terms-of-use (document register)
   Long-form legal text. Restrained: Anton title with a hairline, Inter
   body at a readable measure, paper section-headers, cobalt links, ink.
   ===================================================================== */
.document-wrapper {
  background: var(--bg);
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 88px) clamp(20px, 5vw, 32px) clamp(64px, 9vw, 104px);
}
.document-wrapper .page-title {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  font-size: clamp(2.4rem, 6vw, 4.4rem) !important;
  line-height: 0.96 !important;
  letter-spacing: 0.006em !important;
  color: var(--fg) !important;
  margin: 0 0 clamp(20px, 3vw, 32px) !important;
  padding-bottom: clamp(20px, 3vw, 30px);
  border-bottom: 1px solid var(--border);
}
.document-wrapper .page-intro,
.document-wrapper .walsh-main-paragraph {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.78 !important;
  color: var(--fg-muted) !important;
}
.document-wrapper .walsh-main-paragraph strong { color: var(--fg) !important; font-weight: 600; }
.document-wrapper a { color: var(--accent) !important; text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   18. WORDMARK — "Stylin." live text (direction C)
   Replaces the off-system SVG logo with the Playfair serif wordmark + a
   cobalt point, rendered via pseudo-elements on the two brand containers
   (CSS-only — no per-page markup). The nav link's aria-label carries the
   accessible name; the hidden <img alt> remains the footer's.
   ===================================================================== */
.walsh-brand-block img.image,
.walsh-center-h-wrapper img.image { display: none !important; }

.walsh-brand-block,
.walsh-center-h-wrapper {
  display: inline-flex !important;
  align-items: baseline;
  text-decoration: none;
  filter: none !important;
}
.walsh-brand-block::before,
.walsh-center-h-wrapper::before {
  content: "Stylin";
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
  line-height: 1;
}
.walsh-brand-block::after,
.walsh-center-h-wrapper::after {
  content: ".";
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  margin-left: 0.01em;
}
.walsh-brand-block::before, .walsh-brand-block::after { font-size: 30px; }
.walsh-center-h-wrapper::before, .walsh-center-h-wrapper::after { font-size: 38px; }