/* ========================================================================
 * SideHustleGuard, Direction E (Soft Interactive) Design System
 *
 * Single source of truth for tokens + component classes.
 * Linked from every page via:
 *   <link rel="stylesheet" href="/assets/css/design-system.css">
 *
 * Per-page styles still live inline in each page's <style> block, but
 * should consume these tokens via var(--*) only, no hard-coded colors.
 *
 * The legacy alias block at the bottom is TEMPORARY and removed at the
 * end of Phase 4 once all pages have been re-tokenized.
 * ====================================================================== */

/* ===== COLOR TOKENS ===== */
:root {
  /* Primary palette */
  --indigo:        #2d3068;
  /* --indigo-85 added per impeccable audit P1, body copy at --indigo-70
   * measures exactly 4.51:1 on cream (passing WCAG AA by 0.01).
   * --indigo-85 measures ~6.8:1, giving real-world headroom. */
  --indigo-85:     rgba(45, 48, 104, 0.85);
  --indigo-70:     rgba(45, 48, 104, 0.7);
  --indigo-55:     rgba(45, 48, 104, 0.55);
  --indigo-35:     rgba(45, 48, 104, 0.35);
  --indigo-18:     rgba(45, 48, 104, 0.18);
  --indigo-12:     rgba(45, 48, 104, 0.12);
  --indigo-08:     rgba(45, 48, 104, 0.08);
  --indigo-hover:  #393d80;  /* primary button hover only */

  /* --apricot is the FILL color (button bgs, borders, end-cap circles).
   * UI components only need 3:1 contrast, apricot/cream passes that.
   *
   * --apricot-text is a darker burnt-amber for any place apricot is
   * used as TYPE on cream. Plain apricot/cream measures 2.01:1 ,
   * fails WCAG AA for body (4.5:1) AND for large text (3:1).
   * #9c4517 measures ~5.3:1 on cream. Use it for eyebrows, em
   * italics, meta text, anywhere apricot is the type color.    */
  --apricot:       #e89464;
  --apricot-text:  #9c4517;
  --apricot-hover: #f0a075;
  --apricot-pale:  #fde8d5;
  --apricot-soft:  rgba(232, 148, 100, 0.18);
  --apricot-12:    rgba(232, 148, 100, 0.12);
  --apricot-10:    rgba(232, 148, 100, 0.10);

  --cream:         #f0ece1;
  --paper:         #fbf8ee;
  --paper-70:      rgba(251, 248, 238, 0.7);
  --paper-55:      rgba(251, 248, 238, 0.55);
  --paper-12:      rgba(251, 248, 238, 0.12);
  --paper-10:      rgba(251, 248, 238, 0.10);

  /* Status palette (use sparingly, score/report contexts only) */
  --good:          #5a7a4f;
  --good-bg:       rgba(90, 122, 79, 0.10);
  --warn:          #c98a3a;
  --warn-bg:       rgba(201, 138, 58, 0.12);
  --risk:          #c2533a;
  --risk-bg:       rgba(194, 83, 58, 0.10);

  /* Spacing, 8px base */
  --space-1:  8px;
  --space-2:  14px;
  --space-3:  18px;
  --space-4:  22px;
  --space-5:  28px;
  --space-6:  32px;
  --space-7:  44px;
  --space-8:  48px;
  --space-9:  56px;
  --space-10: 64px;

  /* Radii */
  --radius-sm:        8px;
  --radius-md:        14px;
  --radius-card:      18px;
  --radius-container: 22px;
  --radius-pill:      100px;

  /* Motion, strong, intentional curves per Emil Kowalski's
   * design-engineering playbook. The built-in CSS easings lack
   * the punch that signals "the interface heard you." */
  --ease-default:    cubic-bezier(0.23, 1, 0.32, 1);   /* strong ease-out */
  --ease-snappy:     cubic-bezier(0.32, 0.72, 0, 1);   /* iOS-drawer curve */
  --ease-out-snap:   cubic-bezier(0.25, 1, 0.5, 1);    /* focus-ring landing */
  --dur-press:       100ms;    /* button press DOWN, deliberate */
  --dur-fast:        150ms;
  --dur-snap:        180ms;    /* button hover-in scale */
  --dur-release:     220ms;    /* press/hover release back, slightly slower */
  --dur-default:     250ms;
  --dur-slow:        350ms;
  --dur-entry:       450ms;

  /* Shadows, use sparingly */
  --shadow-cta:        0 6px 24px rgba(45, 48, 104, 0.12);
  --shadow-card-hover: 0 12px 32px rgba(45, 48, 104, 0.08);
  --shadow-modal:      0 30px 80px rgba(45, 48, 104, 0.18);
}

/* ===== BASE / RESET ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img, picture, video, canvas, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--cream);
  color: var(--indigo);
  line-height: 1.65;
  font-size: 15.5px;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--apricot);
  color: var(--paper);
}

/* ===== TYPOGRAPHY UTILITY CLASSES =====
 * Fraunces is used for ALL display headlines, ALL italic accents, and
 * decorative numerals. Inter is used for all UI text and body copy.
 * Every page should have at least one italic Fraunces word somewhere.
 */

.display-xl {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  color: var(--indigo);
  text-wrap: balance;
}

.display-l {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.022em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  color: var(--indigo);
  text-wrap: balance;
}

.display-m {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  color: var(--indigo);
}

.display-xl em,
.display-l em,
.display-m em {
  font-style: italic;
  font-weight: 500;
  color: var(--apricot);
}

.ds-title {
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--indigo);
}

.ds-body {
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--indigo-70);
}

.ds-body-small {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--indigo-70);
}

.ds-caption {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--indigo-55);
}

.ds-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apricot);
  display: inline-block;
}

.ds-eyebrow .glyph {
  margin-left: 8px;
  color: var(--apricot);
}

.ds-mono-meta {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--apricot);
}

.ds-metric {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--apricot);
}

/* ===== LOGO LOCKUP ===== */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.logo-text {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  letter-spacing: -0.015em;
}

.logo-base {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--indigo);
}

.logo-accent {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--apricot);
  margin-left: 2px;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}

/* ===== NAV ===== */
.ds-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 48px;
  background: rgba(240, 236, 225, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--indigo-08);
  transition: box-shadow var(--dur-default) var(--ease-default),
              border-bottom-color var(--dur-default) var(--ease-default);
}
/* Scroll-shadow appears only after the user scrolls past the top of the
 * page (toggled via .is-stuck class by a small JS observer). Subtle by
 * design, sits between the nav and the content scrolling underneath. */
.ds-nav.is-stuck {
  box-shadow: 0 2px 4px rgba(45, 48, 104, 0.05);
  border-bottom-color: var(--indigo-12);
}

.ds-nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.ds-nav-link {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--indigo-70);
  position: relative;
  padding: 2px 0 6px;
  transition: color var(--dur-default) var(--ease-default);
  /* Prevent multi-word labels ("How it works") from wrapping to a second
   * line at narrow desktop widths. The intermediate breakpoint below
   * compresses padding + gap to keep the cluster fitting on one line. */
  white-space: nowrap;
}

.ds-nav-link:hover {
  color: var(--indigo);
}

/* "75+ free" pill tag inside the Guides link. Was previously inline-only
 * in index.html, now shared so every page renders the same pill. */
.ds-nav-link-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--apricot);
  background: rgba(232, 148, 100, 0.12);
  padding: 2px 7px;
  border-radius: 100px;
  margin-left: 4px;
  vertical-align: middle;
  transform: translateY(-1px);
  white-space: nowrap;
}

/* Animated apricot underline for nav text links, applies to both
 * .ds-nav-link (shared) and .nav-link (article-page inline rule). The
 * underline scales in from the left on hover and stays visible on the
 * active page. Borrows the .btn-cta apricot to feel of-a-family without
 * adding a second pulsing dot (which would dilute the CTA's signal). */
nav .nav-link {
  position: relative;
  padding: 2px 0 6px;
}
nav .nav-link:hover {
  color: var(--indigo);
}

.ds-nav-link::after,
nav .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--apricot);
  transform: scaleX(0);
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  .ds-nav-link::after,
  nav .nav-link::after {
    transition: transform var(--dur-default) var(--ease-default);
  }
}
.ds-nav-link:hover::after,
nav .nav-link:hover::after,
.ds-nav-link[aria-current="page"]::after,
nav .nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}
.ds-nav-link[aria-current="page"],
nav .nav-link[aria-current="page"] {
  color: var(--indigo);
}

/* Intermediate breakpoint, narrow desktop / large tablet (700-980px).
 * Without this, the four nav links + "75+ free" tag + CTA + logo run
 * out of horizontal space and individual labels wrap to a second line
 * ("How it" / "works"). Compress padding + gap + font slightly so the
 * full cluster stays on one line all the way down to the 700px mobile
 * breakpoint where secondary links collapse. */
@media (max-width: 980px) {
  .ds-nav { padding: 13px 24px; }
  .ds-nav-right { gap: 14px; }
  .ds-nav-link { font-size: 12.5px; }
}

@media (max-width: 700px) {
  .ds-nav { padding: 13px 18px; height: 56px; }
  /* Hide every nav text link on mobile, including .always-visible
   * (Guides). At narrow widths the Guides pill crowded the wordmark
   * and the primary CTA. Keep mobile nav minimal: logo + Check-my-
   * hustle CTA only. Footer / inline content still link to /guides. */
  .ds-nav-link { display: none; }
  .ds-nav-link-tag { display: none; }
  .logo-base, .logo-accent { font-size: 18px; }
  .ds-nav-right { gap: 10px; }
}

/* ===== BUTTONS =====
 *
 * Interaction model (per the Emil-Kowalski playbook):
 *
 *   • Hover (desktop only, `@media (hover: hover)`): scale(1.02) on
 *     hover-in at 180ms, via the snappy cubic-bezier(0.32, 0.72, 0, 1).
 *     Wrapped so touch devices never see sticky-after-tap hover state.
 *   • Active (all devices): scale(0.97) tactile press feedback at
 *     100ms. Same physical press feel for desktop click + mobile tap.
 *   • Release (default transition): 220ms, slightly slower so the
 *     button "flops back up" with grace rather than snapping rigidly.
 *   • Focus: outline:transparent + expanding apricot outline-color +
 *     outline-offset at 240ms ease-out-snap. Composited on the GPU
 *     instead of paint-heavy box-shadow keyframes.
 *
 * Per-element extras (arrow shifts on nav CTA, etc.) live on each
 * variant block below.
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  /* Custom outline-based focus ring (set color + offset in :focus-visible).
   * Animating `outline-color` + `outline-offset` is GPU-cheap; the previous
   * box-shadow keyframe approach repainted on every frame. */
  outline: 2.5px solid transparent;
  outline-offset: 0;
  /* Asymmetric transform timing, the transition duration on each STATE
   * determines the speed of getting TO that state, so we can give hover-in,
   * press-down, and release-back distinct timings without JS:
   *   • Rest (default block):  220ms ease-snappy , release back ("flop up")
   *   • :hover override:       180ms             , hover-in (read below)
   *   • :active override:      100ms ease-out-snap, press-down (snappy) */
  transition:
    background-color var(--dur-fast)    var(--ease-snappy),
    border-color     var(--dur-fast)    var(--ease-snappy),
    transform        var(--dur-release) var(--ease-snappy),
    outline-color    240ms              var(--ease-out-snap),
    outline-offset   240ms              var(--ease-out-snap);
}

/* Active sink, tactile press feedback. 0.97 (not 0.96) matches the
 * Sonner-tuned sweet spot: perceptible without feeling like collapse.
 * Press timing 100ms (deliberate); release inherits the 220ms default. */
.btn:active {
  transform: scale(0.97);
  transition-duration: var(--dur-press);
  transition-timing-function: var(--ease-out-snap);
}

/* Custom focus ring, outline expands outward (offset 0 → 3px) while
 * its color fades in. Both properties composite cheaply on the GPU. */
.btn:focus-visible {
  outline-color: rgba(232, 148, 100, 0.60);
  outline-offset: 3px;
}

.btn-primary {
  background: var(--indigo);
  color: var(--paper);
}
.btn-primary:hover { background: var(--indigo-hover); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn-primary:hover {
    transform: scale(1.02);
    transition-duration: var(--dur-snap);   /* hover-in: 180ms (deliberate) */
  }
}

.btn-accent {
  background: var(--apricot);
  color: var(--indigo);
}
.btn-accent:hover { background: var(--apricot-hover); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn-accent:hover {
    transform: scale(1.02);
    transition-duration: var(--dur-snap);
  }
}

/* High-conversion CTA, apricot squircle with pulsing indigo dot indicator.
 * Used for the top-of-funnel buttons ("Check my hustle", "Start free check")
 * that route to /tool. Quieter buttons (calculators, secondary actions) keep
 * .btn-primary (indigo). The pulsing dot reads as "live, ready to act." */
.btn-cta {
  /* Override the .btn base, pill → squircle, slightly bigger padding.
   * Re-declares display + gap so the class works STANDALONE (without the
   * .btn base class). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  border-radius: 22px;
  background: var(--apricot);
  color: var(--indigo);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  outline: 2.5px solid transparent;
  outline-offset: 0;
  box-shadow: 0 4px 12px rgba(45, 48, 104, 0.10);
  /* Same asymmetric model as .btn, transform default = release (220ms),
   * overridden per state. Box-shadow stays STATIC (Emil: animating shadow
   * is paint-heavy + the scale alone is the signal). */
  transition:
    background-color var(--dur-fast)    var(--ease-snappy),
    transform        var(--dur-release) var(--ease-snappy),
    outline-color    240ms              var(--ease-out-snap),
    outline-offset   240ms              var(--ease-out-snap);
}
/* (Indigo pulsing dot ::before removed sitewide. Was Phase 9.6's
 * "live-ready" indicator; on review it reads as chunky next to longer
 * CTA labels and the apricot squircle + scale animation already carry
 * the "live" signal. The nav-CTA suppression rule below is now dead
 * code but kept as a no-op safety in case the dot returns later.) */
.btn-cta:hover { background: var(--apricot-hover); }
.btn-cta:active {
  transform: scale(0.97);
  transition-duration: var(--dur-press);
  transition-timing-function: var(--ease-out-snap);
}
.btn-cta:focus-visible {
  outline-color: rgba(232, 148, 100, 0.60);
  outline-offset: 3px;
}
/* Desktop-only hover micro-interaction. @media (hover: hover) keeps
 * this from firing on touch devices, where it would stick after a tap
 * and read as a stuck state. Static box-shadow stays put. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn-cta:hover {
    transform: scale(1.02);
    transition-duration: var(--dur-snap);   /* hover-in: 180ms */
  }
}

/* ═══ Nav CTA, compact pill with apricot arrow circle ═══
 * Cream pill with a 1.5px apricot border, indigo text, and an apricot-
 * filled circle on the right containing a 14px indigo arrow. Tighter
 * padding than the hero squircle so the nav cluster has more room.
 * Scoped to <nav> so hero/CTA-band/sticky-bar CTAs keep the pulsing
 * apricot squircle. */
nav .btn-cta {
  background: var(--paper);
  border: 1.5px solid var(--apricot);
  border-radius: 100px;
  color: var(--indigo);
  font-weight: 600;
  padding: 5px 6px 5px 16px;   /* tight right edge, the apricot dot sits here */
  gap: 7px;                    /* label + end-cap read as a unit */
  margin: 0;   /* defeat per-page `.btn-cta { margin-top: 16px }` rules on
                * the 4 calculator pages (intended for in-form submit buttons
                * but cascade to the nav CTA too) */
  box-shadow: none;
  font-size: 14px;
}
/* Suppress the pulsing-dot ::before for the nav variant, the apricot
 * end-cap span (real DOM, see below) is the visual indicator. */
nav .btn-cta::before { display: none; }

/* Apricot end-cap circle on the right, a real <span> child of the
 * <a> (markup added via scripts/inline-nav-cta-arrow.py). Holds the
 * arrow SVG which can transform-translateX cheaply on hover (composited
 * on the GPU vs. the old background-position approach which painted). */
nav .btn-cta .cta-arrow-cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--apricot);
  transition: background-color var(--dur-fast) var(--ease-snappy);
}
nav .btn-cta .cta-arrow-svg {
  width: 14px;
  height: 14px;
  color: var(--indigo);   /* SVG uses stroke="currentColor" */
  transition: transform var(--dur-snap) var(--ease-snappy);
}

nav .btn-cta:hover {
  background: var(--paper);
  border-color: var(--apricot-hover);
  box-shadow: 0 4px 12px rgba(45, 48, 104, 0.08);
}
nav .btn-cta:hover .cta-arrow-cap { background: var(--apricot-hover); }

/* Desktop-only: parent pill scales 1.02 (180ms hover-in via the .btn
 * transition-duration override below), arrow SVG translates 2px right
 *, pure transform, composited on the GPU. No more background repaints. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  nav .btn-cta:hover {
    transform: scale(1.02);
    transition-duration: var(--dur-snap);
  }
  nav .btn-cta:hover .cta-arrow-svg { transform: translateX(2px); }
}

/* Article-page nav CTA pulse: dot pseudo + flex layout shared via this stylesheet
 * (inline .nav-cta rules on those pages handle sizing + colors). */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-cta::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--indigo);
  flex-shrink: 0;
}

/* (Idle pulse-dot animation removed per Emil's frequency rule ,
 *  100+ views/day → no animation, ever. The static dot still reads
 *  as a "live" indicator. ctaDotPulse keyframe deleted in the
 *  Emil-pass cleanup once confirmed unreferenced everywhere.) */

.btn-outline {
  background: transparent;
  color: var(--indigo);
  border: 1.5px solid var(--indigo-18);
}
.btn-outline:hover {
  border-color: var(--indigo);
}

/* ===== CARDS ON CREAM (Pattern 4) ===== */
.ds-card {
  background: var(--paper);
  border: 1px solid var(--indigo-08);
  border-radius: var(--radius-card);
  padding: 26px;
  transition: border-color var(--dur-default) var(--ease-default),
              transform var(--dur-default) var(--ease-default),
              box-shadow var(--dur-default) var(--ease-default);
}

.ds-card-link:hover {
  border-color: var(--apricot);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.ds-card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--indigo);
  margin-bottom: 8px;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}

.ds-card-body {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--indigo-70);
}

/* ===== FAQ ACCORDION (Pattern 9) ===== */
.ds-faq-item {
  border-bottom: 1px solid var(--indigo-08);
  /* Outer padding halved (16 -> 8) per the mobile-density pass; the
   * inner .ds-faq-q button keeps its 16px to preserve the 56px tap
   * target. Net: ~16px saved per item without crowding. */
  padding: 8px 0;
}

.ds-faq-q {
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--indigo);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  line-height: 1.4;
  cursor: pointer;
  width: 100%;
  background: transparent;
  border: none;
  /* Vertical padding gives the FAQ button a 56px hit area (44px text +
   * 12px padding), meets WCAG 2.5.5 + Apple HIG on touch. */
  padding: 16px 0;
  text-align: left;
}

.ds-faq-toggle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--indigo-08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--apricot);
  font-size: 16px;
  font-weight: 300;
  transition: transform var(--dur-default) var(--ease-default),
              border-color var(--dur-default) var(--ease-default);
}

.ds-faq-item.open .ds-faq-toggle {
  transform: rotate(45deg);
  border-color: var(--apricot);
}

.ds-faq-a {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--indigo-70);
  line-height: 1.65;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-default);
}

.ds-faq-item.open .ds-faq-a {
  max-height: 600px;
  padding-top: 12px;
}

/* ===== SLIDING LIST (Pattern 2, signature interaction) ===== */
.sliding-list {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-container);
  border: 1px solid var(--indigo-08);
  padding: 10px;
}

.sliding-list-indicator {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  height: 68px;
  border-radius: var(--radius-md);
  background: var(--cream);
  border: 1px solid var(--apricot);
  transition: top var(--dur-slow) var(--ease-default);
  pointer-events: none;
  z-index: 0;
}

.sliding-list-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  height: 68px;
  padding: 0 18px;
  gap: 18px;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  font-family: inherit;
  text-align: left;
  color: inherit;
}

.sliding-list-num {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  /* Was --indigo-35 (~1.8:1 on cream, fails even 3:1 large-text floor).
   * Bumped to --indigo-70 (~4.5:1) so the inactive number is still soft
   * but legible to low-vision users. */
  color: var(--indigo-70);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  transition: color var(--dur-default) var(--ease-default);
}

.sliding-list-title {
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--indigo);
  line-height: 1.3;
}

.sliding-list-meta {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  /* Was --indigo-55 (~3.0:1, fails 4.5:1 for small text).
   * Bumped to --indigo-85 (~6.8:1) for comfortable reading at 12.5px. */
  color: var(--indigo-85);
  transition: color var(--dur-default) var(--ease-default);
}

/* Active / hover / focus state, uses --apricot-text (the darker readable
 * apricot variant) instead of plain --apricot which was 2.01:1 on cream. */
.sliding-list-row[aria-current="true"] .sliding-list-num,
.sliding-list-row:hover .sliding-list-num,
.sliding-list-row:focus-visible .sliding-list-num,
.sliding-list-row[aria-current="true"] .sliding-list-meta,
.sliding-list-row:hover .sliding-list-meta {
  color: var(--apricot);
}

/* ===== GUIDE CARD (Pattern G3) ===== */
.guide-card {
  background: var(--paper);
  border: 1px solid var(--indigo-08);
  border-radius: 16px;
  padding: 18px 20px 32px;
  position: relative;
  display: block;
  text-decoration: none;
  transition: border-color var(--dur-default) var(--ease-default),
              transform var(--dur-default) var(--ease-default);
}

.guide-card:hover {
  border-color: var(--apricot);
  transform: translateY(-2px);
}

.guide-card-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.guide-monogram {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: var(--apricot-12);
  color: var(--apricot);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.guide-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.guide-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--indigo);
  line-height: 1.3;
}

.guide-tag {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  line-height: 1;
}

.guide-tag.tag-new {
  background: var(--apricot);
  color: var(--paper);
}

.guide-tag.tag-soon {
  background: var(--indigo-08);
  color: var(--indigo-55);
}

.guide-desc {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--indigo-70);
  line-height: 1.5;
  margin-top: 4px;
}

.guide-arrow {
  position: absolute;
  bottom: 14px;
  right: 18px;
  font-size: 14px;
  color: var(--indigo-35);
  transition: color var(--dur-default) var(--ease-default),
              transform var(--dur-default) var(--ease-default);
}

.guide-card:hover .guide-arrow {
  color: var(--apricot);
  transform: translateX(3px);
}

/* ===== MEGA CARD (Pattern G4) ===== */
.mega-card {
  background: var(--indigo);
  color: var(--paper);
  border-radius: var(--radius-card);
  padding: 32px 36px 34px;
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
  transition: transform var(--dur-default) var(--ease-default);
}

.mega-card:hover { transform: translateY(-2px); }

.mega-blob {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--apricot-soft), transparent 65%);
  pointer-events: none;
}

.mega-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apricot);
  margin-bottom: 12px;
  position: relative;
}

.mega-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-bottom: 12px;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  position: relative;
}

.mega-title em {
  font-style: italic;
  color: var(--apricot);
  font-weight: 500;
}

.mega-blurb {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: var(--paper-70);
  line-height: 1.6;
  margin-bottom: 16px;
  position: relative;
}

.mega-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  position: relative;
}

.mega-pills span {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  background: var(--paper-12);
  color: var(--paper);
  /* Solid paper text on indigo = ~11:1 contrast. Easy AA pass at any size.
   * (Previous rgba(251,248,238,0.85) measured ~6.5:1, still AA but
   * leaving headroom is good practice on the smallest pill text on mobile.) */
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}

/* Mega-card CTA, promoted from a text link to a high-contrast button so
 * it reads as the singular, obvious action on the indigo card. Apricot
 * background pops against the dark purple; paper text passes WCAG AA at
 * ~10:1 contrast. */
.mega-cta {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--paper);
  background: var(--apricot);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--dur-default) var(--ease-default),
              transform var(--dur-default) var(--ease-default),
              box-shadow var(--dur-default) var(--ease-default);
}

.mega-cta .arrow {
  transition: transform var(--dur-default) var(--ease-default);
}

.mega-card:hover .mega-cta {
  background: var(--apricot-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232, 148, 100, 0.32);
}

.mega-card:hover .mega-cta .arrow {
  transform: translateX(3px);
}

@media (max-width: 600px) {
  .mega-card { padding: 22px; }
  .mega-title { font-size: 28px; }
}

/* ===== SUB-FILTER CHIPS (Pattern G5) ===== */
.chip {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  border: 1px solid var(--indigo-08);
  color: var(--indigo-70);
  cursor: pointer;
  transition: background var(--dur-default) var(--ease-default),
              border-color var(--dur-default) var(--ease-default),
              color var(--dur-default) var(--ease-default);
  line-height: 1;
  white-space: nowrap;
}

.chip[aria-current="true"],
.chip.chip--active {
  background: var(--apricot-10);
  border-color: var(--apricot);
  color: var(--apricot);
}

/* ===== STICKY CATEGORY TABS (Pattern G2) ===== */
.cat-tabs {
  position: sticky;
  top: 64px;
  background: rgba(240, 236, 225, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--indigo-08);
  z-index: 10;
  padding: 12px 0;
}

.cat-tabs-inner {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cat-tab {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--indigo-70);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-default) var(--ease-default),
              color var(--dur-default) var(--ease-default);
}

.cat-tab:hover { color: var(--indigo); }

.cat-tab[aria-current="true"] {
  background: var(--indigo);
  color: var(--paper);
}

@media (max-width: 700px) {
  .cat-tabs { top: 56px; padding: 10px 0; }
  .cat-tabs-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .cat-tabs-inner::-webkit-scrollbar { display: none; }
}

/* ===== SHOW MORE (Pattern G6) ===== */
.show-more {
  background: var(--paper);
  border: 1px solid var(--indigo-08);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--apricot);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--dur-default) var(--ease-default);
}

.show-more:hover { border-color: var(--apricot); }

/* ===== LIVE-SEARCH INPUT (Pattern G1) ===== */
.live-search {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
}

.live-search input {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  background: var(--paper);
  border: 1px solid var(--indigo-12);
  border-radius: var(--radius-pill);
  padding: 14px 44px;
  color: var(--indigo);
  outline: none;
  transition: border-color var(--dur-default) var(--ease-default);
}

.live-search input::placeholder { color: var(--indigo-55); }
.live-search input:focus { border-color: var(--apricot); }

.live-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--indigo-55);
  pointer-events: none;
}

.live-search-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--indigo-08);
  color: var(--indigo-70);
  border: none;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
}

.live-search.has-query .live-search-clear { display: flex; }

/* ===== PRICING CARDS (Pattern 6) ===== */
.price-card-free {
  background: var(--paper);
  border: 1.5px solid var(--indigo-08);
  border-radius: 20px;
  padding: 28px;
}

.price-card-full {
  background: var(--indigo);
  color: var(--paper);
  border-radius: 20px;
  padding: 28px;
  position: relative;
  border: none;
}

.price-numeral {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--indigo);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}

.price-card-full .price-numeral {
  font-style: italic;
  font-weight: 500;
  color: var(--apricot);
}

.price-badge {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--apricot);
  color: var(--indigo);
  margin-bottom: 14px;
}

/* ===== COMPLIANCE SCORE (Pattern 7) ===== */
.score-num {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(96px, 12vw, 120px);
  line-height: 1;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  color: var(--indigo);
}

.score-num.is-good { color: var(--good); }
.score-num.is-warn { color: var(--warn); }
.score-num.is-risk { color: var(--risk); }

.score-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--indigo-55);
}

/* ===== ACCENT BLOB ===== */
.blob {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--apricot-soft), transparent 65%);
  pointer-events: none;
}

.blob-bottom-left  { bottom: -120px; left:  -100px; }
.blob-top-right    { top:    -120px; right: -100px; }
.blob-top-left     { top:    -120px; left:  -100px; }
.blob-bottom-right { bottom: -120px; right: -100px; }

/* ===== HERO TOPOGRAPHIC BACKDROP ===== */
.hero-relative { position: relative; overflow: hidden; }

.hero-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-content { position: relative; z-index: 1; }

@media (max-width: 768px) {
  /* Hide inner ovals on mobile to reduce visual noise (per spec) */
  .hero-backdrop .contour-inner-3 { display: none; }
}

/* ===== TOUCH-TARGET POLISH (mobile) =====
 * Apple HIG / WCAG 2.5.5 minimum tap target is 44×44pt. Article body links
 * (<p><a>, <li><a>) default to 14-15px font-size with no padding, which is
 * well below that minimum. Below 700px we add a small vertical hit-area
 * (negative margin + positive padding so visual layout doesn't shift) and
 * a -webkit-tap-highlight-color so touch-feedback isn't the muddy default
 * blue rectangle.
 *
 * Scoped to .content (article body) so it doesn't affect nav links, footer
 * links, or buttons-styled-as-links elsewhere, those already meet the
 * tap target via padding. */
@media (max-width: 700px) {
  .content p a,
  .content li a {
    padding: 4px 2px;
    margin: -4px -2px;
    -webkit-tap-highlight-color: rgba(232, 148, 100, 0.18);
    /* font-size already inherits 15.5px from p/li on mobile post-Phase-6.3,
       which is the WCAG-recommended minimum for body text anyway */
  }
  /* Footer links: bigger tap area, stack with vertical spacing */
  footer a {
    padding: 6px 0;
    -webkit-tap-highlight-color: rgba(232, 148, 100, 0.18);
  }
  /* Inline checkmark/dot prefixes are not interactive */
  .content p a > svg,
  .content li a > svg { pointer-events: none; }
}

/* ===== UNIVERSAL NAV NORMALIZATION =====
 * Article pages, calculators, and landings each declare their own <nav>
 * with slightly different padding (13/14px vertical, 18/48px horizontal,
 * different gaps). Standardize the mobile case so every nav on the site
 * is the same height and respects the same edge padding below 700px.
 * Desktop padding stays per-page since wider screens have different
 * surrounding chrome on each page type.
 *
 * Selectors are unprefixed so this affects both `nav` (per-page) and
 * `.ds-nav` (shared component), both should look identical on mobile. */
@media (max-width: 700px) {
  nav {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    min-height: 56px;
  }
  /* Force consistent gap on the right-side nav group regardless of page */
  nav .nav-right,
  nav .ds-nav-right { gap: 12px; }
  /* Logo text shrinks uniformly */
  nav .logo-text { font-size: 13px; }
  /* Primary CTA in nav: minimum tap target 40px tall, no wrapping.
   * Catches the three CTA naming conventions used across the site:
   *   .nav-cta      , article template + landings (per-page nav)
   *   .ds-nav-cta   , older variants
   *   .btn .btn-primary, index, guides, tool (uses shared button)        */
  nav .nav-cta,
  nav .ds-nav-cta,
  nav .btn,
  nav .btn-primary {
    font-size: 12.5px !important;
    padding: 9px 14px !important;
    white-space: nowrap;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  /* Hide secondary nav text links on mobile but KEEP the .always-visible
   * "Guides" link so it stays reachable from the header. */
  nav .ds-nav-link:not(.always-visible) { display: none; }

  /* Apricot-tinted "Guides" pill, tappable secondary action ranking
   * just under the primary CTA. 40px height matches the CTA pill for
   * unified row rhythm AND meets Apple HIG's 40pt tap-target floor.
   * Text uses --apricot-text (the darker readable variant); the soft
   * apricot tint background still telegraphs "apricot pill." */
  nav .ds-nav-link.always-visible {
    display: inline-flex;
    align-items: center;
    color: var(--apricot);
    font-weight: 600;
    font-size: 13px;
    background: rgba(232, 148, 100, 0.12);
    border: 1px solid rgba(232, 148, 100, 0.32);
    padding: 0 14px;
    height: 40px;
    border-radius: 100px;
    letter-spacing: -0.005em;
    line-height: 1;
    outline: none;
    transition:
      background-color var(--dur-fast) var(--ease-snappy),
      border-color     var(--dur-fast) var(--ease-snappy),
      transform        var(--dur-press) var(--ease-snappy);
  }
  nav .ds-nav-link.always-visible:active { transform: scale(0.96); }
  /* No hover styling here, pill is mobile-only (≤700px) where
   * hover doesn't apply on touch devices anyway. */

  /* Mobile CTA, shrink visible text to "CHECK" so the Guides pill,
   * Guides + CHECK button, and logo all fit on a single line at
   * iPhone widths. The actual text "Check my hustle" is hidden via
   * font-size: 0 (preserved for screen readers + the aria-label),
   * and ::before injects the visible "CHECK" label. ::after still
   * renders the apricot circle with the pulsing indigo arrow. */
  nav .btn-cta {
    /* Explicit 40px height, restored from 36 to hit Apple HIG's 40pt
     * floor (and approach WCAG 2.5.5 AAA's 44×44 target). Pairs with
     * the Guides pill height below so the two right-side pills line
     * up perfectly. align-items: center on the nav flex parent handles
     * vertical centering within the 56px nav. */
    height: 40px;
    padding: 0 6px 0 16px !important;
    gap: 6px;   /* tight gap between "Check" label and apricot end-cap */
    /* !important to win over the generic `nav .btn { font-size: 12.5px
     * !important }` above, without it the "Check my hustle" text
     * stays invisible (color: transparent) but still takes ~95px of
     * layout width, padding the pill out unnecessarily. */
    font-size: 0 !important;
    color: transparent;
    line-height: 1;
  }
  nav .btn-cta::before {
    content: "Check";
    display: inline-flex;
    align-items: center;
    /* Reset the inherited pulse-dot styles from .btn-cta::before */
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    /* Visible label styling, line-height: 1 keeps the strut from
     * pushing the pill taller than its declared 36px. */
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--indigo);
    flex-shrink: 0;
    animation: none;
  }
  nav .btn-cta .cta-arrow-cap {
    width: 24px;
    height: 24px;
  }
  nav .btn-cta .cta-arrow-svg {
    width: 13px;
    height: 13px;
  }
}

/* ===== SMALL MOBILE NAV (≤420px), extra compression =====
 * At iPhone SE / Galaxy A-series widths the nav still felt crowded.
 * Drop padding + shrink the CTA further so the wordmark + CTA fit
 * comfortably. (Nav text links are already hidden by the ≤700px
 * block above.) */
@media (max-width: 420px) {
  nav {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  nav .nav-cta,
  nav .ds-nav-cta,
  nav .btn,
  nav .btn-primary {
    font-size: 11.5px !important;
    padding: 8px 12px !important;
  }
  /* iPhone SE / Galaxy A widths (~360-375px). Heights match the ≤700px
   * block (40px), WCAG 2.5.5 + Apple HIG tap-target floor. The
   * previous 32px compression was cosmetic and shipped tap-target
   * failures (impeccable audit P0). */
  nav .ds-nav-link.always-visible {
    font-size: 12px;
    padding: 0 12px;
    height: 40px;
  }
  nav .btn-cta {
    height: 40px;
    min-height: 0;   /* defeat the `nav .btn { min-height: 36px }` above */
    padding: 0 5px 0 13px !important;
    gap: 5px;
    font-size: 0 !important;   /* keep the text node collapsed at ≤420 too */
  }
  nav .btn-cta::before {
    /* Re-state the ::before content here so the ≤420 cascade picks
     * up the override cleanly (some browsers reset pseudo content
     * when a new font-size cascades in via the .btn !important rule
     * above). Slightly smaller label so the whole cluster fits. */
    content: "Check";
    font-size: 12px;
    letter-spacing: -0.005em;
  }
  nav .btn-cta .cta-arrow-cap {
    width: 22px;
    height: 22px;
  }
  nav .btn-cta .cta-arrow-svg {
    width: 12px;
    height: 12px;
  }
  nav .logo-text { font-size: 12.5px; }
  nav .ds-nav-right,
  nav .nav-right { gap: 8px; }
}

/* ===== RESPONSIVE TABLES =====
 * Defensive global: any .tax-table without a parent overflow wrapper still
 * scrolls horizontally on mobile instead of overflowing the viewport. Most
 * article guides already wrap tables in <div style="overflow-x:auto">; this
 * is the fallback for the 7 STR state guides that don't, plus future-proofing
 * any new table that ships without an explicit wrapper.
 *
 * Desktop keeps native `display: table` semantics so columns auto-size to
 * content; mobile drops to `display: block` so the table is scroll-padded
 * within its own bounds. No background-image affordance, the previous
 * version painted paper-colored "scroll shadow" overlays that read as
 * visible bars against the cream page (paper #fbf8ee vs cream #f0ece1). */
@media (max-width: 700px) {
  .tax-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== MOTION SAFETY ===== */
@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;
  }
  .sliding-list-indicator { transition: none; }
}

/* Legacy alias block removed at end of Phase 4, every page is now tokenized
 * with the new indigo/apricot/cream names. If a future page needs an alias,
 * add it directly in the page's own <style> block. */


/* ========================================================================
 * PHASE 5 ADDITIONS, Components surfaced during the Phase 5 audit
 * ====================================================================== */

/* ===== EYEBROW PILL (used in hero blocks like guides.html "FREE TAX GUIDES · 67 IN TOTAL") ===== */
.ds-eyebrow-pill {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apricot);
  background: var(--paper);
  border: 1px solid var(--indigo-08);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.ds-eyebrow-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--apricot);
  flex-shrink: 0;
}

/* On indigo surfaces (mega-card, cta-band), paper-tinted variant */
.ds-eyebrow-pill.on-indigo {
  background: var(--paper-10);
  border-color: var(--paper-12);
  color: var(--apricot-hover);
}


/* ===== MONOGRAM TILE (Fraunces italic letter in apricot circle/square) =====
 * Three sizes. Use for product cards, file cards, persona cards, tool cards,
 * hustle cards, anywhere the old design used a card-label emoji. Replaces
 * the per-page .guide-monogram which is locked to .guide-card. */
.monogram-tile {
  background: var(--apricot-12);
  color: var(--apricot);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.monogram-tile--sm { width: 32px; height: 32px; border-radius: 10px; font-size: 18px; }
.monogram-tile--md { width: 48px; height: 48px; border-radius: 12px; font-size: 26px; }
.monogram-tile--lg { width: 64px; height: 64px; border-radius: 16px; font-size: 34px; }

/* Inverted (indigo bg with apricot letter) for use on paper/cream surfaces
 * where you want an indigo-anchored tile instead of the apricot wash */
.monogram-tile--indigo {
  background: var(--indigo);
  color: var(--apricot);
}

/* Soft variant, apricot letter on cream-tinted square (lighter weight than default) */
.monogram-tile--soft {
  background: var(--apricot-10);
}


/* ===== CTA BAND (end-of-page indigo CTA section, Pattern G4 sibling) =====
 * Reusable structure for closing CTAs across articles, calculators, landings.
 * Includes: indigo background, apricot blob, eyebrow pill, Fraunces 400 H2
 * with italic apricot accent, and a primary apricot button. */
.cta-band {
  background: var(--indigo);
  border-radius: var(--radius-container);
  padding: 56px 40px;
  position: relative;
  overflow: hidden;
  text-align: center;
  color: var(--paper);
}

.cta-band-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apricot);
  margin-bottom: 14px;
  position: relative;
}

.cta-band-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  color: var(--paper);
  max-width: 640px;
  margin: 0 auto 14px;
  position: relative;
}

.cta-band-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--apricot);
}

.cta-band-blurb {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--paper-70);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 28px;
  position: relative;
}

.cta-band .btn {
  position: relative;
  z-index: 2;
}

@media (max-width: 600px) {
  .cta-band { padding: 40px 24px; }
}


/* ===== ICON UTILITIES =====
 * Inline-SVG icons are stored at /assets/icons/. Use .icon for sizing,
 * .icon--sm/--md/--lg for variants. Color via currentColor on the parent.
 * Pages that need a specific color set color: on the wrapper, not on the svg. */
.icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  color: currentColor;
}

.icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm { width: 14px; height: 14px; }
.icon--md { width: 18px; height: 18px; }
.icon--lg { width: 24px; height: 24px; }

/* Status-tinted icon wrappers (paired with .ds-card or .callout patterns) */
.icon-tint-warn { color: var(--warn); }
.icon-tint-good { color: var(--good); }
.icon-tint-risk { color: var(--risk); }
.icon-tint-apricot { color: var(--apricot); }
.icon-tint-indigo { color: var(--indigo); }


/* ===== CALLOUT (Pattern #4, paper card with apricot-soft tint variants) =====
 * Replaces the per-page .callout-amber / .callout-green / .callout-navy
 * left-border patterns scattered across the article guides. */
.callout {
  background: var(--paper);
  border: 1px solid var(--indigo-08);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 24px 0;
}

.callout-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.callout-body {
  flex: 1;
  min-width: 0;
}

.callout-body p {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: var(--indigo-70);
  line-height: 1.6;
  margin: 0;
}

.callout-body p + p {
  margin-top: 8px;
}

.callout-body strong { color: var(--indigo); font-weight: 600; }

.callout-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 4px;
  display: block;
}

/* Status variants, tint the card background subtly */
.callout--warn { background: var(--warn-bg); border-color: rgba(201, 138, 58, 0.18); }
.callout--warn .callout-icon { color: var(--warn); }
.callout--warn .callout-eyebrow { color: var(--warn); }

.callout--good { background: var(--good-bg); border-color: rgba(90, 122, 79, 0.18); }
.callout--good .callout-icon { color: var(--good); }
.callout--good .callout-eyebrow { color: var(--good); }

.callout--risk { background: var(--risk-bg); border-color: rgba(194, 83, 58, 0.18); }
.callout--risk .callout-icon { color: var(--risk); }
.callout--risk .callout-eyebrow { color: var(--risk); }

.callout--info {
  background: var(--apricot-10);
  border-color: var(--apricot-soft);
}
.callout--info .callout-icon { color: var(--apricot); }
.callout--info .callout-eyebrow { color: var(--apricot); }

/* ===== TOOL CALLOUT (Phase 19.1, interactive-tool intercept) ==========
 * In-article CTA card linking a guide to its companion interactive tool.
 * Anatomy: Fraunces italic apricot glyph (left), eyebrow + title + blurb
 * (center), apricot pill CTA (right). On mobile collapses to a single
 * column with the CTA at the bottom for thumb-reach.
 *
 * Use sparingly, one per article max, placed right above the section it
 * relates to (e.g., a deduction-list H2). Drives crawl signal from
 * existing SEO traffic into the new programmatic swiper pages.
 *
 * Markup:
 *   <aside class="tool-callout" aria-label="Interactive tool">
 *     <div class="tool-callout-glyph" aria-hidden="true">↺</div>
 *     <div class="tool-callout-body">
 *       <span class="tool-callout-eyebrow">Free · 60-second swipe</span>
 *       <p class="tool-callout-title">Title with <em>italic</em></p>
 *       <p class="tool-callout-blurb">One-line context.</p>
 *     </div>
 *     <a class="tool-callout-cta" href="/your-tool">Play the swiper →</a>
 *   </aside>
 */
.tool-callout {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  background: var(--paper);
  border: 1px solid var(--apricot-soft);
  border-left: 4px solid var(--apricot);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin: 28px 0;
}
.tool-callout-glyph {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 38px;
  line-height: 1;
  color: var(--apricot);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  flex-shrink: 0;
}
.tool-callout-body {
  min-width: 0;
}
.tool-callout-eyebrow {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apricot);
  margin-bottom: 4px;
}
.tool-callout-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--indigo);
  margin: 0 0 4px;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.tool-callout-title em {
  font-style: italic;
  color: var(--apricot);
}
.tool-callout-blurb {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--indigo-70);
  line-height: 1.55;
  font-weight: 400;
  margin: 0;
}
.tool-callout-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--apricot);
  color: var(--indigo);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 100px;
  box-shadow: 0 3px 10px rgba(45, 48, 104, 0.10);
  white-space: nowrap;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.tool-callout-cta:hover {
  background: var(--apricot-hover);
  box-shadow: 0 5px 14px rgba(45, 48, 104, 0.14);
}
@media (prefers-reduced-motion: no-preference) {
  .tool-callout-cta:hover { transform: translateY(-1px); }
}

@media (max-width: 600px) {
  .tool-callout {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px 18px;
  }
  .tool-callout-glyph {
    font-size: 30px;
    line-height: 1;
    margin-bottom: -4px;
  }
  .tool-callout-cta {
    justify-content: center;
    padding: 12px 18px;
    font-size: 13.5px;
  }
}

/* ===== NEWSLETTER WIDGET (Phase 7, auto-hydrates into <footer>) =====
 * Self-contained signup card injected by /assets/js/newsletter-widget.js.
 * Sits at the TOP of every footer; posts to /api/subscribe (ConvertKit).
 *
 * Width-locked to 100% so it ALWAYS occupies a full row regardless of
 * how the parent <footer> lays out its children. Some pages use a
 * flex-row footer (logo + links horizontal); some use flex-column or
 * bottom-bar grid. Without the width lock the widget got squeezed
 * inline next to other footer content on the row-flex pages. */
footer:has(.newsletter-widget) { flex-wrap: wrap; }
.newsletter-widget {
  background: var(--paper);
  border: 1px solid var(--indigo-12);
  border-radius: var(--radius-card);
  padding: 22px 24px;
  margin: 0 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 22px;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  /* Force-fill the row regardless of footer layout type */
  width: 100%;
  flex: 1 1 100%;
  box-sizing: border-box;
}

.newsletter-widget-text {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.newsletter-widget-text strong {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--indigo);
  line-height: 1.35;
}

.newsletter-widget-text span {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--indigo-70);
  line-height: 1.5;
}

.newsletter-widget-form {
  flex: 1 1 320px;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.newsletter-widget-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: var(--indigo);
  background: #fff;
  border: 1px solid var(--indigo-18);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-default),
              box-shadow var(--dur-fast) var(--ease-default);
}

.newsletter-widget-form input[type="email"]::placeholder {
  color: var(--indigo-35);
}

.newsletter-widget-form input[type="email"]:focus {
  border-color: var(--apricot);
  box-shadow: 0 0 0 3px var(--apricot-soft);
}

.newsletter-widget-form button {
  flex: 0 0 auto;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--apricot);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .newsletter-widget-form button {
    transition: background var(--dur-fast) var(--ease-default),
                transform var(--dur-press) var(--ease-default);
  }
}

.newsletter-widget-form button:hover {
  background: var(--apricot-hover);
}

.newsletter-widget-form button:active {
  transform: translateY(1px);
}

.newsletter-widget-form button:disabled {
  background: var(--indigo-35);
  cursor: not-allowed;
}

.newsletter-widget-state {
  flex: 1 1 100%;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--indigo-70);
  min-height: 0;
}

.newsletter-widget-state:empty {
  display: none;
}

.newsletter-widget-state[data-kind="error"]   { color: var(--risk); }
.newsletter-widget-state[data-kind="success"] { color: var(--good); }
.newsletter-widget-state[data-kind="loading"] { color: var(--indigo-55); }

.newsletter-widget.is-success {
  background: var(--good-bg);
  border-color: rgba(90, 122, 79, 0.18);
}
.newsletter-widget.is-success .newsletter-widget-text strong { color: var(--good); }

/* Mobile: stack everything */
@media (max-width: 640px) {
  .newsletter-widget {
    padding: 18px 18px;
    gap: 14px;
  }
  .newsletter-widget-form {
    flex-direction: column;
    width: 100%;
  }
  .newsletter-widget-form button {
    width: 100%;
    padding: 12px 18px;
  }
}

/* ===== INTERACTIVE TOOL KIT (Phase 21, extracted from crypto calc) ====
 * Light-cream versions of the visual + interaction patterns from
 * /crypto-tax-calculator (dark-mode). Calculator pages opt in by adding
 * the .tool-* classes to their existing markup. Pair with the JS
 * utilities in /assets/js/calc-kit.js for live thousand-separator
 * money formatting, count-up animations, and segmented-control handlers.
 *
 * Classes added (all new, no conflicts with existing patterns):
 *   .tool-drift    , opt-in rotation animation for hero SVG topo
 *   .tool-aurora   , soft apricot glow blob overlay
 *   .tool-eye      , pulsing eye-pill ("Free · 2026 tax year" badge)
 *   .tool-input    , money-input wrapper with apricot italic $ prefix
 *   .tool-seg      , segmented radio control + .tool-seg-opt buttons
 *   .tool-bar      , stacked multi-segment progress bar
 *   .tool-big      , big Fraunces italic-$ result number
 *   .tool-cue      , scroll-cue card bridging calc → content below
 *
 * Motion is opt-in to `prefers-reduced-motion: no-preference` for the
 * drift + pulse animations. Hover lifts are gated the same way.
 * ====================================================================== */

/* --- Drift: opt-in slow rotation on a hero topo SVG --- */
@media (prefers-reduced-motion: no-preference) {
  .tool-drift {
    transform-origin: center;
    animation: tool-drift 120s linear infinite;
  }
}
@keyframes tool-drift {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- Aurora wash: soft apricot glow blobs over the hero --- */
.tool-aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 50% at 78% 20%, rgba(232, 148, 100, 0.10), transparent 70%),
    radial-gradient(50% 40% at 12% 86%, rgba(232, 148, 100, 0.05), transparent 70%);
}

/* --- Eye pill with pulsing apricot dot --- */
.tool-eye {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--paper);
  border: 1px solid var(--indigo-08);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--apricot);
  margin-bottom: 22px;
  line-height: 1;
}
.tool-eye .pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--apricot);
  box-shadow: 0 0 12px rgba(232, 148, 100, 0.45);
  flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .tool-eye .pulse { animation: tool-pulse 2.4s ease-in-out infinite; }
}
@keyframes tool-pulse {
  0%, 100% { opacity: 1;    box-shadow: 0 0 12px rgba(232, 148, 100, 0.45); }
  50%      { opacity: 0.55; box-shadow: 0 0 4px  rgba(232, 148, 100, 0.45); }
}

/* --- Money input wrapper: apricot italic Fraunces $ + bare input --- *
 * Markup:
 *   <div class="tool-input">
 *     <span class="prefix" aria-hidden="true">$</span>
 *     <input type="text" inputmode="decimal" />
 *   </div>
 * .is-lg         , larger primary input
 * .no-prefix     , no $ prefix (for non-money inputs)
 * .select        , for wrapping a <select> element with chevron
 */
.tool-input {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--cream);
  border: 1px solid var(--indigo-08);
  border-radius: 12px;
  transition: border-color var(--dur-default) var(--ease-default),
              box-shadow var(--dur-default) var(--ease-default),
              background var(--dur-default) var(--ease-default);
}
.tool-input:hover { border-color: rgba(232, 148, 100, 0.4); }
.tool-input:focus-within {
  border-color: var(--apricot);
  background: var(--paper);
  box-shadow:
    0 0 0 4px rgba(232, 148, 100, 0.10),
    0 0 18px rgba(232, 148, 100, 0.08);
}
.tool-input .prefix {
  padding-left: 16px;
  padding-right: 4px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--apricot);
  font-size: 18px;
  line-height: 1;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  user-select: none;
  flex-shrink: 0;
}
/* Specificity bumped via .tool-input.tool-input to beat any per-page
 * `input[type="text"]{...}` or `select{...}` base rules. Without this,
 * inline page styles win the cascade and leave the inner input visible
 * as its own rounded box (with cream fill + border) inside our wrapper. */
.tool-input.tool-input input,
.tool-input.tool-input select {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  padding: 12px 14px 12px 4px;
  font-size: 16px;
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.005em;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}
.tool-input.tool-input input::placeholder { color: var(--indigo-35); }
.tool-input.tool-input input:focus,
.tool-input.tool-input select:focus { background: transparent; }
.tool-input.no-prefix input,
.tool-input.no-prefix select { padding-left: 14px; }
.tool-input.is-lg input {
  font-size: 22px;
  font-weight: 600;
  padding-top: 14px;
  padding-bottom: 14px;
}
.tool-input.is-lg .prefix { font-size: 22px; }
.tool-input.tool-input select { padding-right: 36px; cursor: pointer; }
.tool-input.select::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--indigo-55);
  border-bottom: 2px solid var(--indigo-55);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* --- Segmented radio control (replaces native <select> for 2-3-4 options) --- *
 * Markup:
 *   <div class="tool-seg" role="radiogroup" aria-label="...">
 *     <button class="tool-seg-opt is-active" role="radio"
 *             aria-checked="true" data-val="single">Single</button>
 *     ...
 *   </div>
 */
.tool-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  background: var(--cream);
  border: 1px solid var(--indigo-08);
  border-radius: 12px;
  padding: 4px;
}
.tool-seg-opt {
  padding: 10px 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--indigo-55);
  border-radius: 9px;
  transition: background var(--dur-fast) var(--ease-default),
              color var(--dur-fast) var(--ease-default);
  white-space: nowrap;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}
.tool-seg-opt:hover { color: var(--indigo); }
.tool-seg-opt.is-active {
  background: var(--apricot);
  color: var(--indigo);
  box-shadow: 0 0 18px rgba(232, 148, 100, 0.18);
}

/* --- Stacked multi-segment progress bar --- *
 * Markup:
 *   <div class="tool-bar">
 *     <span class="tool-bar-a" style="width:30%"></span>
 *     <span class="tool-bar-b" style="width:25%"></span>
 *     <span class="tool-bar-c" style="width:10%"></span>
 *   </div>
 * Use modifier colors or inline style for segment fills.
 */
.tool-bar {
  height: 10px;
  border-radius: 100px;
  background: var(--indigo-08);
  overflow: hidden;
  display: flex;
  border: 1px solid var(--indigo-08);
}
.tool-bar > span {
  height: 100%;
  transition: width 0.8s var(--ease-default);
}
.tool-bar-a { background: var(--apricot); }
.tool-bar-b { background: rgba(232, 148, 100, 0.55); }
.tool-bar-c { background: rgba(232, 148, 100, 0.30); }
.tool-bar-d { background: var(--indigo-35); }

/* --- Big result number with Fraunces italic-$ format --- *
 * Markup:
 *   <div class="tool-big"><em>$</em>5,420</div>
 * The <em>$</em> is italic apricot; the digits are indigo Fraunces.
 * font-variant-numeric: tabular-nums prevents jitter as values change.
 */
.tool-big {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(48px, 6.5vw, 72px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--indigo);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-variant-numeric: tabular-nums;
}
.tool-big em {
  font-style: italic;
  color: var(--apricot);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}

/* --- Scroll cue card (bridges calculator → content below) --- *
 * Markup:
 *   <div class="tool-cue">
 *     <span class="ico" aria-hidden="true">↓</span>
 *     <span><strong>...</strong> · ...</span>
 *   </div>
 */
.tool-cue {
  max-width: 880px;
  margin: 56px auto 0;
  padding: 18px 22px;
  background: var(--paper);
  border: 1px solid var(--indigo-08);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
  color: var(--indigo-70);
  line-height: 1.5;
}
.tool-cue strong { color: var(--indigo); font-weight: 600; }
.tool-cue .ico {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(232, 148, 100, 0.14);
  color: var(--apricot);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

@media (max-width: 560px) {
  .tool-eye { font-size: 11px; padding: 6px 12px; }
  .tool-input input { font-size: 16px; }       /* prevent iOS zoom */
  .tool-input.is-lg input { font-size: 20px; }
  .tool-seg-opt { font-size: 12px; padding: 9px 6px; }
  .tool-cue { padding: 14px 16px; gap: 12px; font-size: 12px; }
}