/* home-v3-light.css — light-theme layer for the v3 section redesign.
   Loads after home-v3.css; every rule is scoped to [data-theme="light"].

   home-v3.css was authored dark-only: section headings hard-code #FFFFFF and
   every panel hard-codes a near-black gradient. On the light theme the page
   background flips to warm paper (home-v2.css) but none of that followed, so
   headings rendered white-on-cream — 1.03:1, i.e. invisible — and the page
   became a row of black slabs floating on white.

   This file is deliberately additive and loads last. It never edits a
   dark-theme rule, so the dark look is untouched by construction; and being
   last it also wins the ties against same-specificity rules in home-v3.css
   (e.g. `.rs-pricing-card--pro .rs-pricing-cta`, which is 0,2,0 — the same
   weight as `[data-theme="light"] .rs-pricing-cta`).

   The dividing line is the one home-v3.css already set out in its own header:
   PRODUCT MOCKUPS STAY DARK IN BOTH THEMES — the hero app window, the tablet,
   the phone, the month calendar, the agent portrait, the planning feed, the
   no-prompt panel, the brand panel. They are pictures of a dark product, not
   page furniture. Everything that IS page furniture — cards, panels, strips,
   chips, accordions — turns to paper. */


[data-theme="light"] {
  /* Panel surfaces. Named --rsl-* so they cannot collide with the site tokens
     in home-v2.css. */
  --rsl-panel: linear-gradient(180deg, #FFFFFF 0%, #F7F8FC 100%);
  --rsl-panel-sunk: linear-gradient(180deg, #F4F6FB 0%, #EDF0F7 100%);
  --rsl-border: rgba(17, 23, 43, .10);
  --rsl-border-soft: rgba(17, 23, 43, .07);
  --rsl-shadow: 0 18px 44px -28px rgba(24, 34, 66, .30);
  --rsl-shadow-lift: 0 26px 60px -30px rgba(24, 34, 66, .34);
  /* Inner washes, replacing the rgba(255,255,255,.03….08) fills that read as
     "slightly lighter than the dark panel" and vanish on paper. */
  --rsl-wash: rgba(17, 23, 43, .035);
  --rsl-wash-2: rgba(17, 23, 43, .06);
  /* The signature cyan → blue → purple headline ramp, re-cut for paper. Same
     three stops as the light theme's --cyan/--blue/--purple tokens, so the
     gradient words and the solid accent words agree with each other. */
  --rsl-ramp: linear-gradient(96deg, #0E7490 0%, #2563EB 45%, #6D28D9 100%);
}


/* ====================================================================
   A — Text sitting directly on the page background
   ====================================================================
   Every selector below measured under 4.5:1 against the paper background;
   the #FFFFFF ones measured 1.03:1. Mapped onto the site's existing light
   tokens rather than fresh hex, so a palette change flows through in one
   place.
   ==================================================================== */

/* --- headings and emphasis words → --text (#11172b) --- */
[data-theme="light"] .rs-tf-l1,
[data-theme="light"] .rs-tf-dot,
[data-theme="light"] .rs-intro-title,
[data-theme="light"] .rs-intro-kicker,
[data-theme="light"] .rs-intro-lead,
[data-theme="light"] .rs-agent-title,
[data-theme="light"] .rs-noprompt-title,
[data-theme="light"] .rs-noprompt .rs-noprompt-plain,
[data-theme="light"] .rs-planning-title,
[data-theme="light"] .rs-create-title,
[data-theme="light"] .rs-brand .rs-brand-line,
[data-theme="light"] .rs-brand-lead,
[data-theme="light"] .rs-control-h2,
[data-theme="light"] .rs-control-lede.rs-control-lede-strong,
[data-theme="light"] .rs-control-head b,
[data-theme="light"] .rs-control-w-cyan,
[data-theme="light"] .rs-control-w-blue,
[data-theme="light"] .rs-control-w-purple,
[data-theme="light"] .rs-month-title,
[data-theme="light"] .rs-month-kicker,
[data-theme="light"] .rs-month-cta-text,
[data-theme="light"] .rs-month-copy strong,
[data-theme="light"] .rs-publish-title,
[data-theme="light"] .rs-publish-nos h3,
[data-theme="light"] .rs-how-title,
[data-theme="light"] .rs-how-word,
[data-theme="light"] .rs-industries-title,
[data-theme="light"] .rs-pricing-title,
[data-theme="light"] .rs-faq-title,
[data-theme="light"] .rs-about-title {
  color: var(--text, #11172b);
}

/* --- body copy and ledes → --text-soft (#50586d) --- */
[data-theme="light"] .rs-tf-sub,
[data-theme="light"] .rs-intro-body,
[data-theme="light"] .rs-agent-lead,
[data-theme="light"] .rs-noprompt-lede,
[data-theme="light"] .rs-planning-lead,
[data-theme="light"] .rs-create-sub,
[data-theme="light"] .rs-brand-copy p,
[data-theme="light"] .rs-control-lede,
[data-theme="light"] .rs-control-head span,
[data-theme="light"] .rs-month-lead,
[data-theme="light"] .rs-month-copy span,
[data-theme="light"] .rs-publish-lead,
[data-theme="light"] .rs-publish-no-sub,
[data-theme="light"] .rs-how-sub,
[data-theme="light"] .rs-industries-lead,
[data-theme="light"] .rs-industries-also-label,
[data-theme="light"] .rs-pricing-sub,
[data-theme="light"] .rs-faq-lede,
[data-theme="light"] .rs-about-para,
[data-theme="light"] .rs-about-fact-text {
  color: var(--text-soft, #50586d);
}

/* --- cyan kickers → --cyan (#0E7490); neon cyan scores 1.52:1 on paper --- */
[data-theme="light"] .rs-tf-kicker,
[data-theme="light"] .rs-noprompt-kicker,
[data-theme="light"] .rs-pricing-kicker,
[data-theme="light"] .rs-pricing-kicker span {
  color: var(--cyan, #0E7490);
}

/* --- blue kickers, links and inline accents → --blue (#2563EB) --- */
[data-theme="light"] .rs-agent-kicker,
[data-theme="light"] .rs-brand-kicker,
[data-theme="light"] .rs-control-kicker,
[data-theme="light"] .rs-publish-kicker,
[data-theme="light"] .rs-faq-kicker,
[data-theme="light"] .rs-industries-kicker,
[data-theme="light"] .rs-about-kicker,
[data-theme="light"] .rs-about-em,
[data-theme="light"] .rs-about-link,
[data-theme="light"] .rs-pricing-spark,
[data-theme="light"] .rs-intro-copy span,
[data-theme="light"] .rs-planning-kicker span {
  color: var(--blue, #2563EB);
}

/* The "one app / every format" keyword ramp in 07-create is five solid words
   stepping cyan → purple. Re-stepped through the paper palette so it keeps the
   same left-to-right hue travel at a readable weight. */
[data-theme="light"] .rs-kw1 { color: #0E7490; }
[data-theme="light"] .rs-kw2 { color: #1565C0; }
[data-theme="light"] .rs-kw3 { color: #2563EB; }
[data-theme="light"] .rs-kw4 { color: #4B33C9; }
[data-theme="light"] .rs-kw5 { color: #6D28D9; }

/* --- gradient-clipped headline words ---------------------------------
   Nearly every section sets its accent word to the same neon ramp
   (#3FE0FF → #4D7CFF → #9D57FF). All three stops are too light to read as text
   on paper, so the whole family swaps to the darkened ramp. Only words that
   sit on the PAGE are listed here; words inside a panel are handled with
   their panel below, and words inside a mockup keep the neon. */
[data-theme="light"] .rs-transformation .rs-tf-grad,
[data-theme="light"] .rs-intro-grad,
[data-theme="light"] .rs-agent-grad,
[data-theme="light"] .rs-noprompt .rs-noprompt-grad,
[data-theme="light"] .rs-planning-grad,
[data-theme="light"] .rs-create-grad,
[data-theme="light"] .rs-brand .rs-brand-grad-a,
[data-theme="light"] .rs-brand .rs-brand-grad-b,
[data-theme="light"] .rs-control .rs-control-grad,
[data-theme="light"] .rs-month-grad,
[data-theme="light"] .rs-publish-grad,
[data-theme="light"] .rs-how-word-grad,
[data-theme="light"] .rs-industries-grad,
[data-theme="light"] .rs-pricing-title em,
[data-theme="light"] .rs-access-grad {
  background: var(--rsl-ramp);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 15-faq's word runs purple → pink instead of the house ramp. Keep that
   identity, just darkened. */
[data-theme="light"] .rs-faq-grad {
  background: linear-gradient(96deg, #6D28D9 0%, #A21CAF 55%, #BE185D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The hero proof row asks for `--text-2`, a token defined nowhere in the
   stylesheet, so it silently fell back to the dark-theme #e4e8f1 in BOTH
   themes. Give the fallback a light-theme value rather than leave it broken. */
[data-theme="light"] .rs-hero .rs-hero-proof li {
  color: var(--text, #11172b);
}
[data-theme="light"] .rs-hero .rs-hero-proof li + li {
  border-left-color: var(--line, rgba(17, 23, 43, .12));
}

/* Audience chips were filled at rgba(255,255,255,.028) — invisible on paper. */
[data-theme="light"] .rs-industries-chip {
  border-color: var(--rsl-border);
  background: #FFFFFF;
  color: var(--text, #11172b);
  box-shadow: var(--rsl-shadow);
}
[data-theme="light"] .rs-industries-chip.rs-industries-chip-plain {
  background: transparent;
  box-shadow: none;
  color: var(--text-soft, #50586d);
}


/* ====================================================================
   B — Panel chrome
   ====================================================================
   home-v3.css paints nearly every panel with one idiom:

       background: linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
       border: 1px solid rgba(255, 255, 255, .08);

   On paper those become white-to-mist with an ink-tinted hairline, and they
   pick up a soft drop shadow — a dark panel separates from a dark page by
   being lighter than it, which a light panel on a light page cannot do, so
   the shadow does that job instead.

   Panels deliberately NOT listed here, because they are pictures of a dark
   product rather than page furniture: .rs-window (hero), .rs-intro-tablet,
   .rs-agent-portrait, .rs-noprompt-panel, .rs-planning-feed, .rs-brand-panel,
   .rs-month-panel, .rs-publish-panel, .rs-publish-mini, .rs-industries-plan,
   .rs-access-plan, .rs-access-store, and the .rs-how-mock screens nested
   inside the how-it-works panel.
   ==================================================================== */

[data-theme="light"] .rs-tf-card,
[data-theme="light"] .rs-tf-tally,
[data-theme="light"] .rs-intro-card,
[data-theme="light"] .rs-fmt,
[data-theme="light"] .rs-control-card,
[data-theme="light"] .rs-how-panel,
[data-theme="light"] .rs-how-strip,
[data-theme="light"] .rs-industries-note,
[data-theme="light"] .rs-industries-mini-panel,
[data-theme="light"] .rs-pricing-card,
[data-theme="light"] .rs-pricing-assure,
[data-theme="light"] .rs-pricing-footnote-panel,
[data-theme="light"] .rs-faq-points,
[data-theme="light"] .rs-faq-help,
[data-theme="light"] .rs-faq-item,
[data-theme="light"] .rs-about-panel,
[data-theme="light"] .rs-access-panel {
  background: var(--rsl-panel);
  border-color: var(--rsl-border);
  box-shadow: var(--rsl-shadow);
}

/* 12-how and 17-access layer a coloured radial wash over the flat panel fill
   to lift the top edge. Re-stated so the wash survives the override above,
   at roughly half strength — the same alpha that reads as a glow on black
   reads as a stain on white. */
[data-theme="light"] .rs-how-panel {
  background:
    radial-gradient(130% 62% at 50% 0%, rgba(37, 99, 235, .07) 0%, rgba(37, 99, 235, 0) 62%),
    var(--rsl-panel);
}
[data-theme="light"] .rs-how-strip {
  background:
    radial-gradient(70% 130% at 12% 100%, rgba(37, 99, 235, .08) 0%, rgba(37, 99, 235, 0) 60%),
    var(--rsl-panel);
}
[data-theme="light"] .rs-access-panel {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(37, 99, 235, .06) 0%, rgba(37, 99, 235, 0) 60%),
    var(--rsl-panel);
}
/* The two blurred colour blobs inside the access panel were sized for a black
   floor; at their dark-theme alpha they muddy the paper. */
[data-theme="light"] .rs-access-glow-tr,
[data-theme="light"] .rs-access-glow-bl {
  opacity: .45;
}

/* The Pro card keeps its gradient border and violet halo — that is the whole
   point of the card — but the fill it wraps becomes paper. Two background
   layers, clipped padding-box then border-box, exactly as the dark rule. */
[data-theme="light"] .rs-pricing-card--pro {
  background-image:
    linear-gradient(180deg, #FFFFFF 0%, #FAF8FE 100%),
    linear-gradient(150deg, #9D57FF 0%, #6C6BFF 50%, #4D7CFF 100%);
  border-color: transparent;
  box-shadow: 0 0 46px -16px rgba(109, 40, 217, .38), 0 18px 44px -28px rgba(24, 34, 66, .30);
}

/* Hairlines, rules and inner washes ------------------------------------ */
[data-theme="light"] .rs-pricing-rule,
[data-theme="light"] .rs-about-hr,
[data-theme="light"] .rs-how-rule {
  background: var(--rsl-border-soft);
}
[data-theme="light"] .rs-pricing-assure-cell + .rs-pricing-assure-cell,
[data-theme="light"] .rs-faq-point + .rs-faq-point,
[data-theme="light"] .rs-about-trait + .rs-about-trait,
[data-theme="light"] .rs-access-stats {
  border-color: var(--rsl-border-soft);
}


/* ---- 02-transformation ------------------------------------------------ */

[data-theme="light"] .rs-tf-cardhead-text h3,
[data-theme="light"] .rs-tf-tally-side small,
[data-theme="light"] .rs-tf-tally-side p {
  color: var(--text, #11172b);
}
[data-theme="light"] .rs-tf-cardhead-text p,
[data-theme="light"] .rs-tf-nlabel {
  color: var(--text-soft, #50586d);
}
[data-theme="light"] .rs-tf-node {
  background: var(--rsl-wash);
  border-color: var(--rsl-border);
  color: var(--text-soft, #50586d);
}
/* The "vs" disc was a black puck ringed in violet; invert it to paper. */
[data-theme="light"] .rs-tf-vs {
  background: #FFFFFF;
  color: var(--purple, #6D28D9);
  border-color: rgba(109, 40, 217, .55);
}
[data-theme="light"] .rs-tf-tally-num-good b {
  background: linear-gradient(180deg, #2563EB 0%, #0E7490 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The red "without" accents are already dark enough to read on paper; only the
   10% fills need strengthening so the pills do not disappear. */
[data-theme="light"] .rs-tf-mark-bad { background: rgba(194, 29, 80, .09); }
[data-theme="light"] .rs-tf-alert { background: rgba(194, 29, 80, .07); }


/* ---- 03-intro --------------------------------------------------------- */

[data-theme="light"] .rs-intro-card-title { color: var(--text, #11172b); }
[data-theme="light"] .rs-intro-card p { color: var(--text-soft, #50586d); }
[data-theme="light"] .rs-intro-badge {
  color: var(--cyan, #0E7490);
  background: rgba(14, 116, 144, .09);
  border-color: rgba(14, 116, 144, .30);
}


/* ---- 07-create -------------------------------------------------------- */

[data-theme="light"] .rs-fmt h3 { color: var(--text, #11172b); }
[data-theme="light"] .rs-fmt-copy { color: var(--text-soft, #50586d); }
[data-theme="light"] .rs-fmt-eg { color: var(--text-faint, #5E6678); }
[data-theme="light"] .rs-fmt-chip {
  color: var(--cyan, #0E7490);
  background: rgba(14, 116, 144, .10);
  border-color: rgba(14, 116, 144, .28);
}


/* ---- 09-control ------------------------------------------------------- */

[data-theme="light"] .rs-control-card-title { color: var(--cyan, #0E7490); }
[data-theme="light"] .rs-control-card-sub,
[data-theme="light"] .rs-control-idea-desc { color: var(--text-soft, #50586d); }
[data-theme="light"] .rs-control-idea-title { color: var(--text, #11172b); }
[data-theme="light"] .rs-control-step { color: var(--blue, #2563EB); border-color: rgba(37, 99, 235, .55); }
/* The idea rows were a slightly-lighter black inside a black card. On paper
   they need to be slightly DARKER than the card to read as inset rows. */
[data-theme="light"] .rs-control-idea {
  background: var(--rsl-panel-sunk);
  border-color: var(--rsl-border-soft);
}
[data-theme="light"] .rs-control-ghost {
  background: var(--rsl-wash);
  border-color: var(--rsl-border);
  color: var(--blue, #2563EB);
}
[data-theme="light"] .rs-control-pill-blue { color: var(--blue, #2563EB); background: rgba(37, 99, 235, .10); border-color: rgba(37, 99, 235, .28); }
[data-theme="light"] .rs-control-pill-purple { color: var(--purple, #6D28D9); background: rgba(109, 40, 217, .10); border-color: rgba(109, 40, 217, .28); }
[data-theme="light"] .rs-control-pill-teal { color: #0F766E; background: rgba(15, 118, 110, .10); border-color: rgba(15, 118, 110, .28); }


/* ---- 11-publish (the automation callout only; the phone stays dark) ---- */

[data-theme="light"] .rs-publish-control {
  background-color: #FFFFFF;
  background-image: linear-gradient(115deg, rgba(4, 120, 87, .09) 0%, rgba(4, 120, 87, 0) 70%);
  border-color: rgba(4, 120, 87, .34);
  box-shadow: var(--rsl-shadow);
}
[data-theme="light"] .rs-publish-shield { color: var(--green, #047857); }
[data-theme="light"] .rs-publish-control-copy h3 { color: var(--text, #11172b); }
[data-theme="light"] .rs-publish-control-copy p { color: var(--text-soft, #50586d); }


/* ---- 12-how ----------------------------------------------------------- */

[data-theme="light"] .rs-how-copy h3,
[data-theme="light"] .rs-how-strip-title { color: var(--text, #11172b); }
[data-theme="light"] .rs-how-copy p { color: var(--text-soft, #50586d); }
[data-theme="light"] .rs-how-btext,
[data-theme="light"] .rs-how-btext i { color: var(--text, #11172b); }
[data-theme="light"] .rs-how-strip-title span {
  background: var(--rsl-ramp);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="light"] .rs-how-ico-blue { color: var(--blue, #2563EB); }
[data-theme="light"] .rs-how-ico-purple { color: var(--purple, #6D28D9); }
[data-theme="light"] .rs-how-bico-blue { color: var(--blue, #2563EB); }
[data-theme="light"] .rs-how-bico-purple { color: var(--purple, #6D28D9); }
[data-theme="light"] .rs-how-bico-green { color: var(--green, #047857); }
/* The step markers and chevrons are discs punched out of the panel; their
   black fill has to become paper or they read as holes. */
[data-theme="light"] .rs-how-marker,
[data-theme="light"] .rs-how-badge {
  background: #FFFFFF;
  box-shadow: var(--rsl-shadow);
}
[data-theme="light"] .rs-how-chev { background: #FFFFFF; }


/* ---- 13-industries ---------------------------------------------------- */

[data-theme="light"] .rs-industries-note-body h3 { color: var(--text, #11172b); }
[data-theme="light"] .rs-industries-note-body p { color: var(--text-soft, #50586d); }
[data-theme="light"] .rs-industries-note-badge {
  color: var(--purple, #6D28D9);
  background: rgba(109, 40, 217, .10);
  border-color: rgba(109, 40, 217, .28);
}
[data-theme="light"] .rs-industries-mini-cap { color: var(--text-soft, #50586d); }
[data-theme="light"] .rs-industries-tag-pink { color: var(--pink, #BE185D); }
[data-theme="light"] .rs-industries-ok { color: var(--green, #047857); }
[data-theme="light"] .rs-industries-more-pink {
  color: var(--pink, #BE185D);
  background: rgba(190, 24, 93, .05);
  border-color: rgba(190, 24, 93, .45);
}


/* ---- 14-pricing ------------------------------------------------------- */

[data-theme="light"] .rs-pricing-price,
[data-theme="light"] .rs-pricing-features li,
[data-theme="light"] .rs-pricing-assure-text strong,
[data-theme="light"] .rs-pricing-footnote-text strong { color: var(--text, #11172b); }
[data-theme="light"] .rs-pricing-desc,
[data-theme="light"] .rs-pricing-assure-text span,
[data-theme="light"] .rs-pricing-footnote-text span { color: var(--text-soft, #50586d); }
[data-theme="light"] .rs-pricing-billing,
[data-theme="light"] .rs-pricing-note { color: var(--text-faint, #5E6678); }
[data-theme="light"] .rs-pricing-name { color: var(--cyan, #0E7490); }
[data-theme="light"] .rs-pricing-features li svg { color: var(--blue, #2563EB); }
[data-theme="light"] .rs-pricing-card--ultimate .rs-pricing-features li svg { color: var(--cyan, #0E7490); }
[data-theme="light"] .rs-pricing-assure-icon--blue { color: var(--blue, #2563EB); }
[data-theme="light"] .rs-pricing-assure-icon--purple,
[data-theme="light"] .rs-pricing-footnote-icon { color: var(--purple, #6D28D9); }
[data-theme="light"] .rs-pricing-assure-icon--teal { color: var(--cyan, #0E7490); }
[data-theme="light"] .rs-pricing-tag {
  color: var(--blue, #2563EB);
  background: rgba(37, 99, 235, .08);
  border-color: rgba(37, 99, 235, .30);
}
[data-theme="light"] .rs-pricing-tag--cyan {
  color: var(--cyan, #0E7490);
  background: rgba(14, 116, 144, .08);
  border-color: rgba(14, 116, 144, .30);
}
/* Outline CTAs were filled rgba(9,12,20,.7) — a black wash that survived the
   panel flip and left two dark bars at the foot of the cards. */
[data-theme="light"] .rs-pricing-cta--outline-blue {
  background: #FFFFFF;
  border-color: rgba(37, 99, 235, .55);
  color: var(--blue, #2563EB);
}
[data-theme="light"] .rs-pricing-cta--outline-blue:hover { background: rgba(37, 99, 235, .08); }
[data-theme="light"] .rs-pricing-cta--outline-cyan {
  background: #FFFFFF;
  border-color: rgba(14, 116, 144, .50);
  color: var(--cyan, #0E7490);
}
[data-theme="light"] .rs-pricing-cta--outline-cyan:hover { background: rgba(14, 116, 144, .08); }


/* ---- 15-faq ----------------------------------------------------------- */

[data-theme="light"] .rs-faq-qt,
[data-theme="light"] .rs-faq-point-title,
[data-theme="light"] .rs-faq-help-title { color: var(--text, #11172b); }
[data-theme="light"] .rs-faq-a,
[data-theme="light"] .rs-faq-point-copy,
[data-theme="light"] .rs-faq-help-copy { color: var(--text-soft, #50586d); }
[data-theme="light"] .rs-faq-help-link { color: var(--blue, #2563EB); }
/* An open question tints itself blue. Same idea on paper, a third of the
   alpha, and the border stays the strong blue so the open row still stands
   out from its closed neighbours. */
   The tint is translucent, so it needs an opaque colour underneath or the
   cream page shows through and the open row reads as a different material
   from its closed neighbours. background-color paints below background-image,
   which is exactly the layering wanted here. */
[data-theme="light"] .rs-faq-item[open],
[data-theme="light"] .rs-faq-item.is-open {
  background-color: #FFFFFF;
  background-image: linear-gradient(180deg, rgba(37, 99, 235, .07) 0%, rgba(37, 99, 235, .02) 100%);
  border-color: rgba(37, 99, 235, .45);
}


/* ---- 16-about --------------------------------------------------------- */

[data-theme="light"] .rs-about-trait-title { color: var(--text, #11172b); }
[data-theme="light"] .rs-about-trait-sub,
[data-theme="light"] .rs-about-eyebrow { color: var(--text-soft, #50586d); }
[data-theme="light"] .rs-about-dot { background: var(--text-faint, #5E6678); }
/* The trait tiles are black squares with a coloured rim; on paper they become
   a tint of their own accent, which keeps each row colour-coded. */
[data-theme="light"] .rs-about-trait--purple .rs-about-tile { background: rgba(109, 40, 217, .08); border-color: rgba(109, 40, 217, .45); color: var(--purple, #6D28D9); }
[data-theme="light"] .rs-about-trait--blue .rs-about-tile { background: rgba(37, 99, 235, .08); border-color: rgba(37, 99, 235, .45); color: var(--blue, #2563EB); }
[data-theme="light"] .rs-about-trait--green .rs-about-tile { background: rgba(4, 120, 87, .08); border-color: rgba(4, 120, 87, .45); color: var(--green, #047857); }


/* ---- 17-access -------------------------------------------------------- */

[data-theme="light"] .rs-access-title,
[data-theme="light"] .rs-access-checks li,
[data-theme="light"] .rs-access-checks span { color: var(--text, #11172b); }
[data-theme="light"] .rs-access-lead { color: var(--text-soft, #50586d); }
[data-theme="light"] .rs-access-note,
[data-theme="light"] .rs-access-note svg,
[data-theme="light"] .rs-access-soon { color: var(--text-faint, #5E6678); }
[data-theme="light"] .rs-access-kicker { color: var(--cyan, #0E7490); }
[data-theme="light"] .rs-access-mail { color: var(--blue, #2563EB); border-bottom-color: rgba(37, 99, 235, .35); }
[data-theme="light"] .rs-access-checks svg { color: var(--green, #047857); }
/* The stats row sits on the panel, not inside the calendar mockup. */
[data-theme="light"] .rs-access-stat-txt strong { color: var(--text, #11172b); }
[data-theme="light"] .rs-access-stat-txt small { color: var(--text-faint, #5E6678); }
[data-theme="light"] .rs-access-ico-purple { color: var(--purple, #6D28D9); background: rgba(109, 40, 217, .09); border-color: rgba(109, 40, 217, .26); }
[data-theme="light"] .rs-access-ico-blue { color: var(--blue, #2563EB); background: rgba(37, 99, 235, .09); border-color: rgba(37, 99, 235, .26); }
[data-theme="light"] .rs-access-ico-green { color: var(--green, #047857); background: rgba(4, 120, 87, .09); border-color: rgba(4, 120, 87, .26); }
[data-theme="light"] .rs-access-ico-amber { color: var(--orange, #B45309); background: rgba(180, 83, 9, .09); border-color: rgba(180, 83, 9, .26); }


/* ====================================================================
   C — Text uncovered by the panel flip
   ====================================================================
   These read fine while their panel was black. Once the panel became paper
   they fell under 4.5:1, so they are listed separately rather than merged
   above — they are consequences of section B, not of the original bug.
   ==================================================================== */

/* 02-transformation: the three-step column and its closing line. */
[data-theme="light"] .rs-tf-step h4,
[data-theme="light"] .rs-tf-outro-text strong { color: var(--text, #11172b); }
[data-theme="light"] .rs-tf-step p { color: var(--text-soft, #50586d); }
/* The "without" red is #F0526A, tuned for a black card. home-v2.css already
   picks #C21D50 as the light-theme failure red; match it. */
[data-theme="light"] .rs-tf-alert,
[data-theme="light"] .rs-tf-alert span,
[data-theme="light"] .rs-tf-tally-num-bad b,
[data-theme="light"] .rs-tf-tally-icon-bad,
[data-theme="light"] .rs-tf-mark-bad { color: #C21D50; }

/* 09-control: each card is colour-coded, and the per-card rules outrank a
   plain `[data-theme] .rs-control-card-title`, so the card class is named. */
[data-theme="light"] .rs-control .rs-control-card-a .rs-control-step { color: var(--blue, #2563EB); border-color: rgba(37, 99, 235, .55); }
[data-theme="light"] .rs-control .rs-control-card-b .rs-control-step { color: var(--purple, #6D28D9); border-color: rgba(109, 40, 217, .55); }
[data-theme="light"] .rs-control .rs-control-card-c .rs-control-step { color: var(--cyan, #0E7490); border-color: rgba(14, 116, 144, .55); }
[data-theme="light"] .rs-control .rs-control-card-a .rs-control-card-title { color: var(--cyan, #0E7490); }
[data-theme="light"] .rs-control .rs-control-card-b .rs-control-card-title { color: var(--purple, #6D28D9); }
[data-theme="light"] .rs-control .rs-control-card-c .rs-control-card-title { color: var(--cyan, #0E7490); }
[data-theme="light"] .rs-control-sched-text b { color: var(--green, #047857); }
[data-theme="light"] .rs-control-sched-text span { color: var(--text-soft, #50586d); }

/* 12-how: the step numbers keep their per-step hue, re-cut for paper now that
   the disc behind them is white. */
[data-theme="light"] .rs-how-badge-1,
[data-theme="light"] .rs-how-s1 .rs-how-marker { color: var(--cyan, #0E7490); border-color: var(--cyan, #0E7490); }
[data-theme="light"] .rs-how-badge-2,
[data-theme="light"] .rs-how-s2 .rs-how-marker { color: var(--blue, #2563EB); border-color: var(--blue, #2563EB); }
[data-theme="light"] .rs-how-badge-3,
[data-theme="light"] .rs-how-s3 .rs-how-marker { color: #4B33C9; border-color: #4B33C9; }
[data-theme="light"] .rs-how-badge-4,
[data-theme="light"] .rs-how-s4 .rs-how-marker { color: var(--purple, #6D28D9); border-color: var(--purple, #6D28D9); }
[data-theme="light"] .rs-how-chev-a { color: var(--blue, #2563EB); border-color: var(--blue, #2563EB); }
[data-theme="light"] .rs-how-chev-b { color: #4B33C9; border-color: #4B33C9; }
[data-theme="light"] .rs-how-chev-c { color: var(--purple, #6D28D9); border-color: var(--purple, #6D28D9); }

/* 13-industries: the amber tag was missed alongside the pink one. */
[data-theme="light"] .rs-industries-tag-amber { color: var(--orange, #B45309); }

/* 09-control is the one section that declares a local token set instead of
   hard-coding, so its ink and hairlines are repointed at the root rather than
   selector by selector. Every consumer of these tokens sits on a surface this
   file turns to paper, so the flip is total — with one exception, re-pinned
   below: the green "scheduled" chip keeps white text because its own fill
   stays a saturated green in both themes. */
[data-theme="light"] .rs-control {
  --rs-c-text: #11172b;
  --rs-c-text2: #11172b;
  --rs-c-muted: #50586d;
  --rs-c-faint: #5E6678;
  --rs-c-line: rgba(17, 23, 43, .10);
  --rs-c-line2: rgba(17, 23, 43, .16);
  --rs-c-cyan: #0E7490;
  --rs-c-blue: #2563EB;
  --rs-c-purple: #6D28D9;
  --rs-c-green: #047857;
}
[data-theme="light"] .rs-control .rs-control-chip { color: #FFFFFF; }

/* Two fills in 09-control are hard-coded rather than tokenised, so they stayed
   black inside a card that is now paper: the mini month calendar and the disc
   holding the arrow between cards. */
[data-theme="light"] .rs-control .rs-control-cal {
  background: var(--rsl-panel-sunk);
}
[data-theme="light"] .rs-control .rs-control-arrow span {
  background: #FFFFFF;
  border-color: rgba(37, 99, 235, .5);
  box-shadow: var(--rsl-shadow);
}


/* ====================================================================
   D — Header and footer
   ====================================================================
   Neither is a <section>, so both sit outside the section-scoped rules
   above and need naming explicitly.
   ==================================================================== */

/* The mobile drop-down is the one piece of header furniture with a fill of
   its own: a near-black card that stayed black over the paper page. */
[data-theme="light"] .rs-header .rs-mobile-nav {
  background: var(--rsl-panel);
  border-color: var(--rsl-border);
  box-shadow: var(--rsl-shadow-lift);
}
[data-theme="light"] .rs-header .rs-mobile-nav a { color: var(--text, #11172b); }
[data-theme="light"] .rs-header .rs-mobile-nav a:hover { background: var(--rsl-wash); }
/* The CTA keeps its gradient fill, so its white label stays white. */
[data-theme="light"] .rs-header .rs-mobile-cta { color: #FFFFFF !important; }

/* .rs-footer sets color:#FFFFFF on the root and lets it inherit, so a single
   override at the root carries most of the footer. */
[data-theme="light"] .rs-footer,
[data-theme="light"] .rs-footer-tagline,
[data-theme="light"] .rs-footer-tagline span { color: var(--text, #11172b); }
[data-theme="light"] .rs-footer-blurb,
[data-theme="light"] .rs-footer-links a,
[data-theme="light"] .rs-footer-trust-text,
[data-theme="light"] .rs-footer-trust-text span { color: var(--text-soft, #50586d); }
[data-theme="light"] .rs-footer-copy,
[data-theme="light"] .rs-footer-origin { color: var(--text-faint, #5E6678); }
[data-theme="light"] .rs-footer-links a:hover { color: var(--blue, #2563EB); }
/* The four column headings step blue → purple across the row; the step is
   preserved, shifted onto the paper palette. */
[data-theme="light"] .rs-footer-col-1 .rs-footer-col-title { color: #2563EB; }
[data-theme="light"] .rs-footer-col-2 .rs-footer-col-title { color: #3A4BDD; }
[data-theme="light"] .rs-footer-col-3 .rs-footer-col-title { color: #5433D0; }
[data-theme="light"] .rs-footer-col-4 .rs-footer-col-title { color: #6D28D9; }
[data-theme="light"] .rs-footer-trust-blue { color: var(--blue, #2563EB); }
[data-theme="light"] .rs-footer-trust-purple { color: var(--purple, #6D28D9); }
[data-theme="light"] .rs-footer-trust-green { color: var(--green, #047857); }


/* ====================================================================
   E — Corrections to this file
   ====================================================================
   Two consequences of the rules above, kept separate so the reason for each
   stays legible.
   ==================================================================== */

/* 1. The broad ink rules in section A reach the gradient headline words too,
   and `.rs-intro-copy span` / `.rs-month-copy span` are one element-selector
   heavier than the `.rs-intro-grad` / `.rs-month-grad` rules that follow them
   — so they repainted those words a flat colour and killed the clip. Restated
   here at the same weight, but later in the file, which settles the tie. */
[data-theme="light"] .rs-intro-copy .rs-intro-grad,
[data-theme="light"] .rs-month-copy .rs-month-grad {
  background: var(--rsl-ramp);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 2. Two more pieces of page furniture kept the dark panel idiom. They were
   missed in section B, and 09-control's token flip then turned their text
   dark as well, leaving dark-on-dark — so they have to move together with it.
   .rs-control-foot already picked up its light border from --rs-c-line; only
   the fill was left behind. */
[data-theme="light"] .rs-control .rs-control-foot,
[data-theme="light"] .rs-month-metric {
  background: var(--rsl-panel);
  box-shadow: var(--rsl-shadow);
}
[data-theme="light"] .rs-month-metric { border-color: var(--rsl-border); }
[data-theme="light"] .rs-month-metric strong { color: var(--text, #11172b); }
[data-theme="light"] .rs-month-metric-label,
[data-theme="light"] .rs-month-metric-link { color: var(--text-soft, #50586d); }
[data-theme="light"] .rs-control .rs-control-foot-lock {
  background: var(--rsl-wash);
  color: var(--text-soft, #50586d);
}
[data-theme="light"] .rs-control .rs-control-foot-note span { color: var(--blue, #2563EB); }

/* Same story once more, in 08-brand: the assurance strip sits in the copy
   column, not inside the brand mockup, so it is furniture and section A's
   `.rs-brand-copy p` rule had already darkened its body text. */
[data-theme="light"] .rs-brand-assure {
  background: var(--rsl-panel);
  border-color: var(--rsl-border);
  box-shadow: var(--rsl-shadow);
}
[data-theme="light"] .rs-brand-assure-text h3 { color: var(--text, #11172b); }
[data-theme="light"] .rs-brand-shield { color: var(--green, #047857); }


/* ====================================================================
   F — Full-width strips and pills
   ====================================================================
   Section B's sweep had a size floor on it and skipped anything shorter than
   a card, which left the benefit strips, promise bars, prompt chips and
   category tabs black. They are all furniture, so they all go to paper. The
   blue-tinted ones (agent promise, industry tabs and band) keep their tint at
   roughly a third of the alpha — enough to stay a tinted strip rather than a
   plain white one, without staining the page.
   ==================================================================== */

[data-theme="light"] .rs-intro-strip,
[data-theme="light"] .rs-agent-chip,
[data-theme="light"] .rs-noprompt-strip,
[data-theme="light"] .rs-planning-note,
[data-theme="light"] .rs-create-inc,
[data-theme="light"] .rs-industries-tab {
  background: var(--rsl-panel);
  border-color: var(--rsl-border);
  box-shadow: var(--rsl-shadow);
}
[data-theme="light"] .rs-agent-promise,
[data-theme="light"] .rs-industries-tab.rs-industries-tab-active,
[data-theme="light"] .rs-industries-band {
  background-color: #FFFFFF;
  background-image: linear-gradient(180deg, rgba(37, 99, 235, .07) 0%, rgba(37, 99, 235, .02) 100%);
  border-color: rgba(37, 99, 235, .32);
  box-shadow: var(--rsl-shadow);
}

/* 03-intro strip */
[data-theme="light"] .rs-intro-strip-item p { color: var(--text-soft, #50586d); }
[data-theme="light"] .rs-intro-chip-blue { color: var(--blue, #2563EB); background: rgba(37, 99, 235, .10); }
[data-theme="light"] .rs-intro-chip-purple { color: var(--purple, #6D28D9); background: rgba(109, 40, 217, .10); }

/* 04-agent promise bar and prompt chips */
[data-theme="light"] .rs-agent-promise-copy strong,
[data-theme="light"] .rs-agent-chip-text { color: var(--text, #11172b); }
[data-theme="light"] .rs-agent-promise-copy span { color: var(--text-soft, #50586d); }
[data-theme="light"] .rs-agent-promise-copy b,
[data-theme="light"] .rs-agent-chip-icon { color: var(--blue, #2563EB); }
[data-theme="light"] .rs-agent-chip-icon { background: rgba(37, 99, 235, .10); }

/* 05-noprompt strip */
[data-theme="light"] .rs-noprompt-striptext strong { color: var(--text, #11172b); }
[data-theme="light"] .rs-noprompt-striptext span { color: var(--text-soft, #50586d); }
[data-theme="light"] .rs-noprompt-stripico-blue { color: var(--blue, #2563EB); background: rgba(37, 99, 235, .09); }
[data-theme="light"] .rs-noprompt-stripico-purple { color: var(--purple, #6D28D9); background: rgba(109, 40, 217, .09); }

/* 06-planning note */
[data-theme="light"] .rs-planning-note-text strong { color: var(--text, #11172b); }
[data-theme="light"] .rs-planning-note-text em { color: var(--blue, #2563EB); }

/* 07-create "always included" strip. The item icons are colour-coded and the
   neon originals score under 3:1 on white, which is the floor for graphics as
   well as text, so each one steps to its paper equivalent. */
[data-theme="light"] .rs-inc-label,
[data-theme="light"] .rs-inc-badge { color: var(--blue, #2563EB); }
[data-theme="light"] .rs-inc-item strong { color: var(--text, #11172b); }
[data-theme="light"] .rs-inc-dot { color: var(--text-faint, #5E6678); }
[data-theme="light"] .rs-inc-i1 svg { color: var(--orange, #B45309); }
[data-theme="light"] .rs-inc-i2 svg { color: var(--cyan, #0E7490); }
[data-theme="light"] .rs-inc-i3 svg,
[data-theme="light"] .rs-inc-i5 svg { color: var(--blue, #2563EB); }
[data-theme="light"] .rs-inc-i4 svg { color: var(--purple, #6D28D9); }

/* 13-industries tabs and closing band */
[data-theme="light"] .rs-industries-tab-body h3 { color: var(--text, #11172b); }
[data-theme="light"] .rs-industries-tab-body p { color: var(--text-soft, #50586d); }
[data-theme="light"] .rs-industries-tab-active .rs-industries-tab-body p { color: var(--blue, #2563EB); }
[data-theme="light"] .rs-industries-i-blue { color: var(--blue, #2563EB); background: rgba(37, 99, 235, .10); }
[data-theme="light"] .rs-industries-band-badge { color: var(--purple, #6D28D9); background: rgba(109, 40, 217, .10); }
[data-theme="light"] .rs-industries-band-a { color: var(--blue, #2563EB); }
[data-theme="light"] .rs-industries-band-b { color: #4B33C9; }
[data-theme="light"] .rs-industries-band-tail,
[data-theme="light"] .rs-industries-band-tail span { color: var(--text-soft, #50586d); }
[data-theme="light"] .rs-industries-band-c {
  background: linear-gradient(96deg, #6D28D9 0%, #BE185D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Qualified with the parent so it outranks `.rs-industries-band-tail span`
   two rules up — the same tie that bit .rs-intro-grad in section E. */
[data-theme="light"] .rs-industries-band-tail .rs-industries-band-tail-accent {
  background: linear-gradient(96deg, #2563EB 0%, #6D28D9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The Without/With segmented control above the comparison cards. The inactive
   half was a dark puck; the active half keeps its gradient. */
[data-theme="light"] .rs-tf-seg-off {
  background: var(--rsl-panel-sunk);
  color: var(--text-soft, #50586d);
}