/* ═══════════════════════════════════════════════════════════════════════
   TaxClue — SERVICE PAGES (light)  ·  Phase 3
   ------------------------------------------------------------------------
   Loaded after service-page.css + theme-light.css on service templates.
   service-page.css is built on quantum.css dark tokens + a lot of hardcoded
   CREAM literals (rgba(245,240,230,…)) for text/borders and a starfield hero.
   Card *backgrounds* auto-fix via the --navy-surface remap → #FFFFFF, but
   their borders/text stay cream (invisible on white). This layer repairs:
     · fonts   — 'Instrument Serif' (never loaded → Georgia) → Fraunces
     · bg      — hero + navy bands → light; hide all space decorations
     · cards   — real navy-tinted borders + ink text on the white surfaces
   All rules scoped html[data-theme="light"] to out-specify the base file.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── FONTS ────────────────────────────────────
   Unify every service serif heading onto the brand display face (Playfair,
   already loaded). 'Instrument Serif' isn't in the font stack, so today these
   silently fall back to Georgia — this both fixes that and matches the home. */
html[data-theme="light"] .sp-hero-l h1,
html[data-theme="light"] .sp-form h2,
html[data-theme="light"] .sp-form h3,
html[data-theme="light"] .sp-h2,
html[data-theme="light"] .sp-cta h2,
html[data-theme="light"] .sp-exit-modal h3,
html[data-theme="light"] .sp-cw-title,
html[data-theme="light"] .sp-midcta-h,
html[data-theme="light"] .sp-res-bnd-card h4,
html[data-theme="light"] .sp-price-card h4,
html[data-theme="light"] .sp-lm-h{
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

/* ─────────────────── HIDE space decorations on light ──────────────────── */
html[data-theme="light"] .sp-orbs,
html[data-theme="light"] .sp-dot-grid,
html[data-theme="light"] .sp-stars,
html[data-theme="light"] .sp-star,
html[data-theme="light"] .sp-galaxy,
html[data-theme="light"] .sp-gx-star,
html[data-theme="light"] .sp-constellation,
html[data-theme="light"] .sp-const-lines,
html[data-theme="light"] .sp-const-star,
html[data-theme="light"] .sp-nebula,
html[data-theme="light"] .sp-rocket{ display:none !important; }

/* ─────────────────────────── PAGE + HERO bg ───────────────────────────── */
html[data-theme="light"] .sp-page{ background: var(--navy-void) !important; color: var(--bone) !important; }
html[data-theme="light"] .sp-hero{
  background:
    radial-gradient(ellipse 60% 55% at 78% 0%, rgba(227,25,55,.10), transparent 65%),
    linear-gradient(165deg, #FFFFFF 0%, #FFFFFF 55%, #F6F1E7 100%) !important;
  border-bottom: 1px solid var(--navy-line);
}
html[data-theme="light"] .sp-hero::after{
  background: radial-gradient(circle, rgba(227,25,55,.10) 0%, transparent 65%) !important;
}
html[data-theme="light"] .sp-hero-l h1{ color:#0A132B !important; }
html[data-theme="light"] .sp-hero-l h1 em{ -webkit-text-fill-color: var(--gold-bright) !important; }
html[data-theme="light"] .sp-hero-desc{ color: rgba(10,19,43,.68) !important; }

/* Eyebrow / pills / breadcrumb legibility */
html[data-theme="light"] .sp-pill{
  background: rgba(10,19,43,.04) !important;
  color: rgba(10,19,43,.72) !important;
  border-color: rgba(10,19,43,.10) !important;
}
html[data-theme="light"] .sp-bc,
html[data-theme="light"] .sp-bc a{ color: rgba(10,19,43,.5) !important; }
html[data-theme="light"] .sp-bc span:last-child{ color: rgba(10,19,43,.8) !important; }
html[data-theme="light"] .sp-trust-badges span{ color: rgba(10,19,43,.6) !important; }

/* Hero KPI strip → paper card */
html[data-theme="light"] .sp-hero-kpis{
  background: #FFFFFF !important; border-color: rgba(10,19,43,.10) !important;
  box-shadow: var(--shadow-md); backdrop-filter:none !important;
}
html[data-theme="light"] .sp-hero-kpi{ border-right-color: rgba(10,19,43,.08) !important; }
html[data-theme="light"] .sp-hero-kpi-lbl{ color: rgba(10,19,43,.5) !important; }

/* ─────────────────────────── HERO FORM (paper) ────────────────────────── */
html[data-theme="light"] .sp-form{
  background:#FFFFFF !important; border:1px solid rgba(227,25,55,.30) !important;
  box-shadow: 0 24px 60px rgba(10,19,43,.12) !important; backdrop-filter:none !important;
}
html[data-theme="light"] .sp-form h2,
html[data-theme="light"] .sp-form h3{ color:#0A132B !important; }
html[data-theme="light"] .sp-form-sub{ color: rgba(10,19,43,.66) !important; }
html[data-theme="light"] .sp-fg label{ color: rgba(10,19,43,.88) !important; font-weight:700 !important; }
html[data-theme="light"] .sp-fg input,
html[data-theme="light"] .sp-fg select{
  background:#FFFFFF !important; border:1.5px solid rgba(10,19,43,.26) !important; color:#0A132B !important;
}
html[data-theme="light"] .sp-fg select{ color: rgba(10,19,43,.82) !important; }
html[data-theme="light"] .sp-fg input::placeholder{ color: rgba(10,19,43,.55) !important; }
html[data-theme="light"] .sp-fg input:focus,
html[data-theme="light"] .sp-fg select:focus{
  border-color:#E31937 !important; background:#fff !important; box-shadow:0 0 0 3px rgba(227,25,55,.14) !important;
}
html[data-theme="light"] .sp-fg select option{ background:#fff !important; color:#0A132B !important; }
/* Submit button — white label on brand red, consistent with .gs-btn-primary
   (base .sp-fbtn uses near-black text on red, which reads as a different system) */
html[data-theme="light"] .sp-fbtn{
  background:#E31937 !important; color:#fff !important; border-color:#E31937 !important;
  box-shadow:0 12px 28px rgba(227,25,55,.22) !important;
}
html[data-theme="light"] .sp-fbtn:hover{ background:#C01530 !important; border-color:#C01530 !important; color:#fff !important; }
html[data-theme="light"] .sp-fnote,
html[data-theme="light"] .sp-for{ color: rgba(10,19,43,.6) !important; }
html[data-theme="light"] .sp-for::before,
html[data-theme="light"] .sp-for::after{ background: rgba(10,19,43,.10) !important; }
html[data-theme="light"] .sp-fmetric{ background:#F6F1E7 !important; border-color: rgba(10,19,43,.08) !important; }
html[data-theme="light"] .sp-fmetric-label{ color: rgba(10,19,43,.5) !important; }

/* ─────────────────── SECTION HEADINGS + PROSE ─────────────────────────── */
html[data-theme="light"] .sp-h2{ color:#0A132B !important; }
html[data-theme="light"] .sp-h2 em{ color: var(--gold-bright) !important; }
html[data-theme="light"] .sp-sub,
html[data-theme="light"] .sp-prose,
html[data-theme="light"] .sp-upd-text{ color: rgba(10,19,43,.68) !important; }
html[data-theme="light"] .sp-sec.sp-c-mid{ background: linear-gradient(180deg,#FFFFFF,#F6F1E7) !important; }
/* Accent sections (.sp-c-gold/.sp-c-cyan/.sp-c-red/.sp-c-green) hardcode
   rgba(5,16,31,.4) in the base file → they render as GREY stripes on the
   light page (the "grey → cream → grey" the audit flagged). The remap of
   --navy-void/--navy-deep can't reach them. Give them the same soft ivory
   as .sp-c-mid so the page reads white / warm / navy — never grey. */
html[data-theme="light"] .sp-sec.sp-c-gold,
html[data-theme="light"] .sp-sec.sp-c-cyan,
html[data-theme="light"] .sp-sec.sp-c-red,
html[data-theme="light"] .sp-sec.sp-c-green{ background: linear-gradient(180deg,#FFFFFF,#F6F1E7) !important; }

/* ─────────────────────────── CARDS (the core ask) ─────────────────────── */
/* Backgrounds already resolve to #FFFFFF via --navy-surface. Give them real
   borders, ink text, and soft ink shadows instead of the cream/black set. */
html[data-theme="light"] .sp-card,
html[data-theme="light"] .sp-doc,
html[data-theme="light"] .sp-chk,
html[data-theme="light"] .sp-faq,
html[data-theme="light"] .sp-rev,
html[data-theme="light"] .sp-use,
html[data-theme="light"] .sp-upd li,
html[data-theme="light"] .sp-case,
html[data-theme="light"] .sp-rel,
html[data-theme="light"] .sp-panel,
html[data-theme="light"] .sp-res,
html[data-theme="light"] .sp-callout.gold,
html[data-theme="light"] .sp-callout.red,
html[data-theme="light"] .sp-callout.cyan,
html[data-theme="light"] .sp-tbl-wrap{
  background:#FFFFFF !important;
  border-color: rgba(10,19,43,.09) !important;
  backdrop-filter:none !important;
}
/* Hover: gold hairline + soft ink lift (was black glow) */
html[data-theme="light"] .sp-card:hover,
html[data-theme="light"] .sp-doc:hover,
html[data-theme="light"] .sp-rev:hover,
html[data-theme="light"] .sp-rel:hover,
html[data-theme="light"] .sp-case:hover,
html[data-theme="light"] .sp-res:hover,
html[data-theme="light"] .sp-chk:hover,
html[data-theme="light"] .sp-faq.open{
  background:#FFFFFF !important;
  border-color: rgba(227,25,55,.35) !important;
  box-shadow: 0 14px 36px rgba(10,19,43,.12) !important;
}
/* Card text that was hardcoded cream */
html[data-theme="light"] .sp-chk{ color: rgba(10,19,43,.72) !important; }
html[data-theme="light"] .sp-chk:hover{ color:#0A132B !important; }
html[data-theme="light"] .sp-rev-text{ color: rgba(10,19,43,.7) !important; }
html[data-theme="light"] .sp-rev-name{ color:#0A132B !important; }
html[data-theme="light"] .sp-rev-loc{ color: rgba(10,19,43,.45) !important; }
html[data-theme="light"] .sp-rel{ color:#0A132B !important; }
html[data-theme="light"] .sp-faq-q{ color:#1A2A48 !important; }
html[data-theme="light"] .sp-faq-inner{ color: rgba(10,19,43,.68) !important; }
html[data-theme="light"] .sp-price-card h4,
html[data-theme="light"] .sp-res-bnd-card h4,
html[data-theme="light"] .sp-cw-title,
html[data-theme="light"] .sp-midcta-h,
html[data-theme="light"] .sp-lm-h{ color:#0A132B !important; }

/* Timeline connector + table borders */
html[data-theme="light"] .sp-tbl th,
html[data-theme="light"] .sp-tbl td{ border-color: rgba(10,19,43,.08) !important; }
html[data-theme="light"] .sp-tbl thead th{ background:#F6F1E7 !important; color: rgba(10,19,43,.72) !important; }

/* Ghost button on light */
html[data-theme="light"] .sp-btn-ghost{
  background: rgba(10,19,43,.03) !important;
  border-color: rgba(10,19,43,.14) !important;
  color: rgba(10,19,43,.8) !important;
}
html[data-theme="light"] .sp-btn-ghost:hover{ border-color: rgba(227,25,55,.45) !important; color:#B45309 !important; }

/* Sidebar panels + resource links */
html[data-theme="light"] .sp-panel{ box-shadow: var(--shadow-sm) !important; }
html[data-theme="light"] .sp-res{ background:#F6F1E7 !important; }

/* ─────────────────── FULL-WIDTH BANDS → light premium ─────────────────── */
/* .sp-full-navy was an intentional DARK contrast band; on light we convert it
   to a soft ivory band (its inner text uses --bone → now ink, so keep it light
   rather than re-forcing cream everywhere). */
html[data-theme="light"] .sp-full-navy{
  background:
    radial-gradient(60% 60% at 15% 100%, rgba(227,25,55,.08), transparent 70%),
    linear-gradient(155deg, #FFFFFF, #F6F1E7) !important;
  color:#0A132B !important;
  border-top:1px solid var(--navy-line); border-bottom:1px solid var(--navy-line);
}
html[data-theme="light"] .sp-full-navy::after{
  background: radial-gradient(circle, rgba(227,25,55,.06), transparent 70%) !important;
}
html[data-theme="light"] .sp-full-alt{ border-color: rgba(10,19,43,.06) !important; }

/* Final CTA band → warm ivory with ink headline, gold accent */
html[data-theme="light"] .sp-cta{
  background:
    radial-gradient(60% 90% at 50% 50%, rgba(227,25,55,.10), transparent 65%),
    linear-gradient(165deg, #FFFFFF, #F6F1E7) !important;
  border-top:1px solid var(--navy-line);
}
html[data-theme="light"] .sp-cta h2{ color:#0A132B !important; }
html[data-theme="light"] .sp-cta h2 em{ -webkit-text-fill-color: var(--gold-bright) !important; }
html[data-theme="light"] .sp-cta p{ color: rgba(10,19,43,.62) !important; }
html[data-theme="light"] .sp-cta-trust{ color: rgba(10,19,43,.45) !important; }

/* ── FIX · remaining full-width GREY bands ──────────────────────────────
   .sp-band-* and .sp-lm-band use rgba(5,16,31,.4) = dark navy @40% → they
   render as GREY stripes on the light page (the bands seen in the audit
   screenshot). Convert to a soft ivory band with ink text. */
html[data-theme="light"] .sp-band-dark,
html[data-theme="light"] .sp-band-cta,
html[data-theme="light"] .sp-band-res,
html[data-theme="light"] .sp-lm-band{
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F1E7 100%) !important;
  border-top-color: rgba(10,19,43,.08) !important;
  border-bottom-color: rgba(10,19,43,.08) !important;
  color:#0A132B !important;
}
/* band decorations → subtle on light */
html[data-theme="light"] .sp-band-dark::before{
  background: radial-gradient(ellipse, rgba(227,25,55,.06), transparent 70%) !important;
}
html[data-theme="light"] .sp-band-res::before{
  background: linear-gradient(90deg, transparent, rgba(10,19,43,.10), transparent) !important;
}
/* any heading/paragraph inside those bands → ink */
html[data-theme="light"] .sp-band-dark h2,
html[data-theme="light"] .sp-band-dark h3,
html[data-theme="light"] .sp-band-dark p,
html[data-theme="light"] .sp-band-cta h2,
html[data-theme="light"] .sp-band-cta p,
html[data-theme="light"] .sp-band-res h2,
html[data-theme="light"] .sp-band-res h3,
html[data-theme="light"] .sp-band-res p,
html[data-theme="light"] .sp-lm-band h2,
html[data-theme="light"] .sp-lm-band p{ color:#0A132B !important; }
html[data-theme="light"] .sp-lm-band .sp-prose,
html[data-theme="light"] .sp-band-res .sp-prose{ color: rgba(10,19,43,.68) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   EDITORIAL HIERARCHY PASS  (design-audit fixes)
   Goal: stop giving every block equal weight. Bigger readable type, a real
   size hierarchy, gold reserved for the hero + primary CTA, flatter calmer
   cards, and more breathing room. No content is removed (that's editorial).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · TYPOGRAPHY — larger, clearer hierarchy ─────────────────────────── */
html[data-theme="light"] .sp-hero-l h1{
  font-size: clamp(34px, 3.8vw, 52px) !important; line-height: 1.08 !important; letter-spacing: -.02em !important;
}
html[data-theme="light"] .sp-hero-desc{ font-size: 17.5px !important; line-height: 1.7 !important; max-width: 560px !important; }
html[data-theme="light"] .sp-h2{ font-size: clamp(26px, 2.9vw, 37px) !important; line-height: 1.18 !important; }
html[data-theme="light"] .sp-sub{ font-size: 16.5px !important; line-height: 1.7 !important; }
html[data-theme="light"] .sp-prose{ font-size: 16.5px !important; line-height: 1.85 !important; }
html[data-theme="light"] .sp-prose li{ font-size: 16.5px !important; line-height: 1.7 !important; }
html[data-theme="light"] .sp-card h4{ font-size: 15.5px !important; margin-bottom: 5px !important; }
html[data-theme="light"] .sp-card p{ font-size: 14px !important; line-height: 1.6 !important; color: rgba(10,19,43,.62) !important; }
html[data-theme="light"] .sp-faq-q{ font-size: 15.5px !important; }
html[data-theme="light"] .sp-faq-inner{ font-size: 15px !important; line-height: 1.75 !important; }

/* ── 2 · REDUCE GOLD — reserve it for the hero + primary CTA ─────────────── */
/* Section eyebrows: loud gold → quiet slate, tiny gold marker only */
html[data-theme="light"] .sp-ey{ color: rgba(10,19,43,.5) !important; font-weight: 700 !important; letter-spacing: 2px !important; }
html[data-theme="light"] .sp-ey::before{ color: var(--gold) !important; opacity:.9; }
html[data-theme="light"] .sp-eyebrow{
  background: rgba(10,19,43,.04) !important; color: rgba(10,19,43,.6) !important; border-color: rgba(10,19,43,.10) !important;
}
/* Section-heading accent words: gold italic → navy italic (gold stays on the hero only) */
html[data-theme="light"] .sp-h2 em{ color:#17274a !important; -webkit-text-fill-color:#17274a !important; }
/* Stat numbers read as PROOF, not decoration → navy, no glow */
html[data-theme="light"] .sp-hero-kpi-num{ color:#0A132B !important; text-shadow:none !important; font-size: clamp(18px,1.8vw,22px) !important; }
/* Process step numbers: gold → navy on a soft navy chip (calmer, less gold) */
html[data-theme="light"] .sp-tl-num{
  background: rgba(10,19,43,.05) !important; border-color: rgba(10,19,43,.14) !important; color:#0A132B !important;
}

/* ── 3 · CARDS — flatter, calmer, more air, gentler hover ───────────────── */
html[data-theme="light"] .sp-card,
html[data-theme="light"] .sp-doc,
html[data-theme="light"] .sp-use,
html[data-theme="light"] .sp-rel{
  border-color: rgba(10,19,43,.07) !important;
  box-shadow: none !important;
  padding: 22px !important;
}
html[data-theme="light"] .sp-card:hover,
html[data-theme="light"] .sp-doc:hover,
html[data-theme="light"] .sp-use:hover,
html[data-theme="light"] .sp-rel:hover,
html[data-theme="light"] .sp-case:hover{
  border-color: rgba(10,19,43,.16) !important;
  box-shadow: 0 8px 24px rgba(10,19,43,.06) !important;
  transform: none !important;   /* stop the jumpy lift — cards felt interchangeable */
}
html[data-theme="light"] .sp-rev:hover{ transform: none !important; box-shadow: 0 8px 24px rgba(10,19,43,.06) !important; }
/* Slightly roomier grids */
html[data-theme="light"] .sp-cards{ gap: 16px !important; }
html[data-theme="light"] .sp-doc-grid{ gap: 12px !important; }

/* ── 4 · SECTION RHYTHM — more whitespace, calmer bands ─────────────────── */
html[data-theme="light"] .sp-sec{ padding-top: 80px !important; padding-bottom: 80px !important; }
html[data-theme="light"] .sp-main{ padding: 76px 0 !important; }
html[data-theme="light"] .sp-h2-bar{ margin-top: 12px !important; margin-bottom: 26px !important; opacity:.8; }
/* Bands: quieter, less gold wash so light→band→light is gentle not abrupt */
html[data-theme="light"] .sp-sec.sp-c-mid,
html[data-theme="light"] .sp-full-navy{
  background: linear-gradient(180deg, #FFFFFF, #F6F1E7) !important;
}
html[data-theme="light"] .sp-full-navy::before,
html[data-theme="light"] .sp-full-navy::after{ opacity:.5 !important; }

/* ── 5 · CTA HIERARCHY — one clear primary, quiet secondary ─────────────── */
html[data-theme="light"] .sp-btn-primary{ padding: 15px 30px !important; font-size: 15px !important; box-shadow: 0 8px 24px rgba(227,25,55,.28) !important; }
html[data-theme="light"] .sp-btn-ghost{
  background: transparent !important; border-color: rgba(10,19,43,.18) !important; color: rgba(10,19,43,.75) !important; box-shadow:none !important;
}
html[data-theme="light"] .sp-btn-ghost:hover{ border-color: rgba(10,19,43,.34) !important; color:#0A132B !important; background: rgba(10,19,43,.03) !important; }
/* Trust badges: quiet supporting text, not competing chips */
html[data-theme="light"] .sp-trust-badges span{ font-size: 13px !important; color: rgba(10,19,43,.55) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   PASS 2 — post-consolidation polish (GST Registration audit)
   Component-level readability the editorial pass didn't reach:
   the merged eligibility list, calculator inputs, process icons, tables,
   and a stronger closing CTA. All scoped to light.
   ═══════════════════════════════════════════════════════════════════════ */

/* Merged "Why & Who" eligibility list — deliberately NOT another card grid,
   so it reads as a different visual beat from the benefit cards above it. */
html[data-theme="light"] .sp-who{
  margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(10,19,43,.10);
}
html[data-theme="light"] .sp-who-hdr{
  font-size: 14px; font-weight: 700; letter-spacing:.2px; color:#0A132B; margin-bottom: 16px;
}
html[data-theme="light"] .sp-who-list{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:1fr 1fr; gap:12px 32px;
}
html[data-theme="light"] .sp-who-list li{
  position:relative; padding-left:28px; font-size:15.5px; line-height:1.55; color: rgba(10,19,43,.72);
}
html[data-theme="light"] .sp-who-list li::before{
  content:"✓"; position:absolute; left:0; top:1px; color: var(--gold,#E31937); font-weight:800;
}
html[data-theme="light"] .sp-who-list strong{ color:#0A132B; }

/* Calculator — inputs & labels were tiny (audit #6). Sizes only; the band
   stays dark by design, so keep the cream text colours from the base file. */
html[data-theme="light"] .sp-calc-sub{ font-size: 16px !important; line-height:1.6 !important; }
html[data-theme="light"] .sp-calc-field label{ font-size: 12.5px !important; }
html[data-theme="light"] .sp-calc-input-wrap{ height: 54px !important; }
html[data-theme="light"] .sp-calc-input-wrap input,
html[data-theme="light"] .sp-calc-field select{ font-size: 16px !important; }
html[data-theme="light"] .sp-calc-field select{ min-height: 54px !important; }

/* Process — icons & labels were too small to scan (audit #9). */
html[data-theme="light"] .sp-htl-icon{ width: 60px !important; height: 60px !important; font-size: 26px !important; }
html[data-theme="light"] .sp-htl-step h4{ font-size: 15px !important; }
html[data-theme="light"] .sp-htl-step p{ font-size: 13.5px !important; line-height: 1.55 !important; }

/* Tables — comparison + penalty rows were cramped and micro-typed (audit #11). */
html[data-theme="light"] .sp-tbl td{ font-size: 14px !important; padding: 13px 16px !important; }
html[data-theme="light"] .sp-tbl th{ font-size: 11.5px !important; }

/* Final CTA — make the close the strongest beat on the page (audit #20, #23). */
html[data-theme="light"] .sp-cta{ padding: 96px 0 !important; }
html[data-theme="light"] .sp-cta h2{ font-size: clamp(30px, 3.6vw, 46px) !important; }

@media(max-width:640px){
  html[data-theme="light"] .sp-who-list{ grid-template-columns: 1fr !important; }
}

/* ─────────────────────────── reduced motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html[data-theme="light"] .sp-eyebrow-dot{ animation:none !important; }
}