/* ============================================================================
   subscription-fieldnotes.css  —  "FIELD NOTES" SKIN  (ADDITIVE OVERRIDE LAYER)
   ----------------------------------------------------------------------------
   doggos-subscription-box · Monthly / Annual subscription page reskin.

   WHAT THIS IS
   ------------
   A self-contained, additive override stylesheet that reskins the WooCommerce
   subscription page to the approved "Field Notes" look (see preview
   _preview/jd-subscription-v2.html): bone paper + faint ruled grid, Fraunces
   display headlines with a lime underline accent, JetBrains-Mono "FIG. 0X"
   mono labels, hard OFFSET shadows (never blur), 1.5px solid ink hairlines,
   rationed lime (#aac527) as the single CTA colour, specimen-style pricing
   cards, a dark pricing band, and an ink/lime billing toggle.

   HOW IT LOADS
   ------------
   This file is enqueued AFTER assets/css/subscription.css. It does NOT modify
   the 157KB base stylesheet — it overrides it in the cascade. The base file
   already ships a "cinematic gold" override block (its own
   `.doggos-subscription-page .doggos-*` rules, specificity 0,2,0). To win over
   BOTH the base styles and that gold block, every rule here is scoped under
   `body .doggos-subscription-page` (specificity 0,3,0+), and `!important` is
   used ONLY where the base block itself uses `!important` (billing toggle,
   toggle switch, secondary hero CTA, step number, mobile sticky bar) and only
   on visual props.

   SAFETY RULES OBSERVED
   ---------------------
   - Only visual props are forced (color/background/border/box-shadow/
     font-family/border-radius). Layout props (display/grid-template/position/
     width/flex) are left to the base stylesheet so the tier grid, billing
     toggle JS hooks, form fields, and qty steppers keep working.
   - No display:none on anything functional.
   - The base `.doggos-toggle-switch` is display:none and the toggle is driven
     by `.doggos-billing-label.active` — that mechanic is preserved.
   - Reduced-motion safety is added for every transition introduced here.

   TOKENS are defined once, scoped to the page wrapper, below.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS  (scoped — do not leak to the rest of the site)
   Fonts (Fraunces, JetBrains Mono) are already loaded site-wide by the theme.
--------------------------------------------------------------------------- */
.doggos-subscription-page {
    --fn-ink:        #2a2a36;
    --fn-ink-soft:   #55525e;
    --fn-ink-mute:   #8a8794;
    --fn-bone:       #faf6ee;
    --fn-cream:      #fdfaf3;
    --fn-ivory:      #f8f0e3;
    --fn-moss:       #20202a;
    --fn-lime:       #aac527;
    --fn-sage:       #95ab22;
    --fn-lime-ink:   #3a4410;
    --fn-rust:       #8e5a2f;
    --fn-turmeric:   #d4a83a;

    --fn-disp: 'Fraunces', Georgia, 'Times New Roman', serif;
    --fn-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --fn-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --fn-rule: rgba(42, 42, 54, 0.18);          /* ink hairline (translucent) */
    --fn-grid: rgba(42, 42, 54, 0.035);         /* ruled paper line */

    --fn-ease: cubic-bezier(.22, 1, .36, 1);
    --fn-snap: cubic-bezier(.5, 1.4, .5, 1);
}

/* ---------------------------------------------------------------------------
   2. PAGE WRAPPER — bone paper + faint ruled grid
   The base file uses ::before for a multiply noise overlay; we keep that and
   add the ruled-grid background directly to the wrapper so we don't fight it.
--------------------------------------------------------------------------- */
body .doggos-subscription-page {
    background-color: var(--fn-bone) !important;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 31px,
            var(--fn-grid) 31px,
            var(--fn-grid) 32px
        ) !important;
    color: var(--fn-ink);
    font-family: var(--fn-body);
}

/* Mono editorial helper used on several labels */
body .doggos-subscription-page .doggos-section-label,
body .doggos-subscription-page .doggos-sub-section-title,
body .doggos-subscription-page .doggos-nutrition-title {
    font-family: var(--fn-disp);
}

/* ---------------------------------------------------------------------------
   3. SHARED DISPLAY TYPE — Fraunces headlines, ink
--------------------------------------------------------------------------- */
body .doggos-subscription-page h1,
body .doggos-subscription-page h2,
body .doggos-subscription-page h3,
body .doggos-subscription-page .doggos-tier-name,
body .doggos-subscription-page .doggos-nutrition-card h4,
body .doggos-subscription-page .doggos-step h4,
body .doggos-subscription-page .doggos-compare-header h4,
body .doggos-subscription-page .doggos-builder-intro h3 {
    font-family: var(--fn-disp) !important;
    color: var(--fn-ink);
    font-weight: 560;
    letter-spacing: -0.02em;
}

/* Lime underline accent on highlighted hero word + section emphasis spans */
body .doggos-subscription-page .doggos-sub-hero h1 span {
    color: var(--fn-ink) !important;
    position: relative;
    display: inline-block;
}
body .doggos-subscription-page .doggos-sub-hero h1 span::after {
    content: '';
    position: absolute;
    left: -0.02em;
    right: -0.02em;
    bottom: 0.06em;
    top: auto;
    width: auto !important;
    height: 0.16em !important;
    transform: none !important;
    background: var(--fn-lime) !important;
    border-radius: 2px;
    z-index: 0;
}

/* ---------------------------------------------------------------------------
   4. MONO EDITORIAL LABELS  ("FIG. 0X — ...")
   Reskin the base section labels to mono lime markers with a lime hairline.
   The base gold block draws a ::before dash on .doggos-section-label — we
   recolour it lime and keep the mono treatment.
--------------------------------------------------------------------------- */
body .doggos-subscription-page .doggos-section-label {
    font-family: var(--fn-mono) !important;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fn-rust) !important;
}
body .doggos-subscription-page .doggos-section-label::before {
    background: var(--fn-lime) !important;
    height: 2px !important;
}

/* ---------------------------------------------------------------------------
   5. HERO
--------------------------------------------------------------------------- */
body .doggos-subscription-page .doggos-sub-hero {
    background: transparent !important;     /* let the bone paper grid show */
}
/* Neutralise the base animated glow + cinematic radial wash (keep them quiet) */
body .doggos-subscription-page .doggos-sub-hero::before {
    background:
        radial-gradient(ellipse at 30% 50%, rgba(170, 197, 39, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 30%, rgba(170, 197, 39, 0.04) 0%, transparent 50%) !important;
    animation: none !important;
}
body .doggos-subscription-page .doggos-sub-hero::after {
    background: linear-gradient(to bottom, transparent, var(--fn-ink)) !important;
    opacity: 0.04 !important;
}

/* Corner FIG markers (base gold block sets these via hero-content ::before/::after) */
body .doggos-subscription-page .doggos-sub-hero-content::before {
    content: 'FIG. 01 — THE GAP' !important;
    font-family: var(--fn-mono) !important;
    color: var(--fn-rust) !important;
    letter-spacing: 0.16em;
    font-size: 10px;
}
body .doggos-subscription-page .doggos-sub-hero-content::after {
    content: 'SUBSCRIBE & SAVE' !important;
    font-family: var(--fn-mono) !important;
    color: var(--fn-rust) !important;
    letter-spacing: 0.16em;
    font-size: 10px;
}

/* Social-proof badge -> cream chip, ink border, hard offset shadow, lime dot */
body .doggos-subscription-page .doggos-social-badge {
    background: var(--fn-cream) !important;
    color: var(--fn-ink) !important;
    font-family: var(--fn-mono);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1.5px solid var(--fn-ink);
    border-radius: 999px;
    box-shadow: 3px 3px 0 var(--fn-ink) !important;
    animation: none !important;
}

body .doggos-subscription-page .doggos-hero-subtitle {
    color: var(--fn-ink-soft);
    font-family: var(--fn-body);
}

/* Hero stat blocks -> specimen cards (cream, ink border, hard 5px shadow) */
body .doggos-subscription-page .doggos-hero-stat {
    background: var(--fn-cream);
    border: 1.5px solid var(--fn-ink);
    border-radius: 14px;
    box-shadow: 5px 5px 0 var(--fn-ink);
    padding: 16px 18px;
}
body .doggos-subscription-page .doggos-stat-number {
    font-family: var(--fn-disp) !important;
    font-weight: 700 !important;
    color: var(--fn-ink) !important;
    /* kill the base gradient-clipped text */
    background: none !important;
    -webkit-text-fill-color: var(--fn-ink) !important;
    -webkit-background-clip: border-box !important;
            background-clip: border-box !important;
}
body .doggos-subscription-page .doggos-stat-label {
    font-family: var(--fn-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fn-ink-soft);
}

/* Trial note line under hero CTAs */
body .doggos-subscription-page .doggos-hero-trial-note {
    font-family: var(--fn-mono) !important;
    color: var(--fn-rust) !important;
    border: 1.5px dashed var(--fn-rust);
    border-radius: 10px;
    padding: 11px 15px;
    display: inline-block;
    background: color-mix(in srgb, var(--fn-turmeric), var(--fn-bone) 86%);
    font-size: 12px !important;
    letter-spacing: 0.02em;
}
body .doggos-subscription-page .doggos-hero-trial-note strong { color: var(--fn-ink); }

/* ---------------------------------------------------------------------------
   6. PRIMARY / SECONDARY BUTTONS
   Primary = lime fill + ink text + 4px hard offset shadow + 1.5px ink border.
   Applies to hero CTA, select-tier, final CTA, subscribe, sticky, redirect.
--------------------------------------------------------------------------- */
body .doggos-subscription-page .doggos-hero-cta,
body .doggos-subscription-page .doggos-final-cta-btn,
body .doggos-subscription-page .doggos-subscribe-btn,
body .doggos-subscription-page .doggos-sticky-btn,
body .doggos-subscription-page .doggos-trial-callout-btn {
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;
    font-family: var(--fn-mono) !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 999px !important;
    box-shadow: 4px 4px 0 var(--fn-ink) !important;
    transition: transform 0.15s var(--fn-snap), box-shadow 0.15s var(--fn-snap) !important;
}
body .doggos-subscription-page .doggos-hero-cta:hover,
body .doggos-subscription-page .doggos-final-cta-btn:hover,
body .doggos-subscription-page .doggos-subscribe-btn:hover:not(:disabled),
body .doggos-subscription-page .doggos-sticky-btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--fn-ink) !important;
}
/* kill the base shimmer sweeps / bounce so they don't fight the hard look */
body .doggos-subscription-page .doggos-hero-cta::before,
body .doggos-subscription-page .doggos-hero-cta::after,
body .doggos-subscription-page .doggos-subscribe-btn::before { background: none !important; }
body .doggos-subscription-page .doggos-hero-cta svg { animation: none !important; }

/* Disabled subscribe buttons stay legible but obviously inert */
body .doggos-subscription-page .doggos-subscribe-btn:disabled,
body .doggos-subscription-page .doggos-custom-subscribe-btn:disabled,
body .doggos-subscription-page .doggos-custom-subscribe-btn-mini:disabled {
    background: var(--fn-ivory) !important;
    color: var(--fn-ink-mute) !important;
    box-shadow: 2px 2px 0 var(--fn-rule) !important;
    cursor: not-allowed;
}

/* Secondary buttons = cream fill + ink border + 3px shadow.
   The base block forces .doggos-hero-cta--secondary with !important, so match it. */
body .doggos-subscription-page .doggos-hero-cta--secondary,
body .doggos-subscription-page .doggos-final-cta-btn--secondary,
body .doggos-subscription-page .doggos-switch-to-custom-btn,
body .doggos-subscription-page .doggos-subscribe-btn--redirect {
    background: var(--fn-cream) !important;
    color: var(--fn-ink) !important;
    border: 1.5px solid var(--fn-ink) !important;
    box-shadow: 3px 3px 0 var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-hero-cta--secondary:hover,
body .doggos-subscription-page .doggos-final-cta-btn--secondary:hover,
body .doggos-subscription-page .doggos-switch-to-custom-btn:hover,
body .doggos-subscription-page .doggos-subscribe-btn--redirect:hover {
    background: var(--fn-cream) !important;
    color: var(--fn-ink) !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 var(--fn-ink) !important;
}

/* ---------------------------------------------------------------------------
   7. TRUST STRIP — ink hairlines top/bottom, ivory paper, lime dots
   Base draws a dark gradient bar; we make it a light ruled strip.
--------------------------------------------------------------------------- */
body .doggos-subscription-page .doggos-trust-section {
    background: var(--fn-ivory) !important;
    border-top: 1.5px solid var(--fn-ink) !important;
    border-bottom: 1.5px solid var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-trust-section::before { background: none !important; }
/* recolour the base gold centre-marks to lime */
body .doggos-subscription-page .doggos-trust-section::after { background: var(--fn-lime) !important; }
body .doggos-subscription-page .doggos-trust-badge {
    color: var(--fn-ink) !important;
    font-family: var(--fn-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
body .doggos-subscription-page .doggos-trust-badge:hover { color: var(--fn-sage) !important; }
body .doggos-subscription-page .doggos-trust-badge svg { stroke: var(--fn-sage) !important; }
body .doggos-subscription-page .doggos-trust-badge:hover svg { stroke: var(--fn-ink) !important; }

/* ---------------------------------------------------------------------------
   8. NUTRITION GAP — comparison cards (specimen frames)
--------------------------------------------------------------------------- */
body .doggos-subscription-page .doggos-why-section {
    background: transparent !important;
}
body .doggos-subscription-page .doggos-why-intro {
    color: var(--fn-ink-soft);
    font-family: var(--fn-body);
}
body .doggos-subscription-page .doggos-compare-card {
    background: var(--fn-cream) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 16px !important;
    box-shadow: 6px 6px 0 var(--fn-ink) !important;
}
/* "with" card -> faint lime wash */
body .doggos-subscription-page .doggos-compare-with {
    background: color-mix(in srgb, var(--fn-lime), var(--fn-cream) 86%) !important;
    border: 1.5px solid var(--fn-ink) !important;
}
/* kill the base gold corner-bracket overlay */
body .doggos-subscription-page .doggos-compare-card::before { background: none !important; }
body .doggos-subscription-page .doggos-compare-card li {
    color: var(--fn-ink-soft);
    border-bottom: 1px dotted var(--fn-rule) !important;
}
body .doggos-subscription-page .doggos-compare-without li::before { color: var(--fn-rust) !important; }
body .doggos-subscription-page .doggos-compare-with li::before { color: var(--fn-sage) !important; }
body .doggos-subscription-page .doggos-compare-with li { color: var(--fn-ink); }
body .doggos-subscription-page .doggos-compare-plus {
    font-family: var(--fn-disp) !important;
    font-weight: 800;
    color: var(--fn-ink) !important;
}

/* ---------------------------------------------------------------------------
   9. NUTRITION CATEGORIES (6-card grid)
--------------------------------------------------------------------------- */
body .doggos-subscription-page .doggos-nutrition-section { background: transparent !important; }
body .doggos-subscription-page .doggos-nutrition-subtitle { color: var(--fn-ink-soft); }
body .doggos-subscription-page .doggos-nutrition-subtitle strong { color: var(--fn-sage); }
body .doggos-subscription-page .doggos-nutrition-card {
    background: var(--fn-cream) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 16px !important;
    box-shadow: 5px 5px 0 var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-nutrition-card--highlight {
    background: color-mix(in srgb, var(--fn-lime), var(--fn-cream) 84%) !important;
    border: 1.5px solid var(--fn-ink) !important;
}
/* recolour base top-accent bar + kill gold sheen */
body .doggos-subscription-page .doggos-nutrition-card::before {
    background: var(--fn-lime) !important;
}
body .doggos-subscription-page .doggos-nutrition-card::after { background: none !important; }
body .doggos-subscription-page .doggos-nutrition-card:hover {
    box-shadow: 7px 7px 0 var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-nutrition-card p { color: var(--fn-ink-soft); }
body .doggos-subscription-page .doggos-nutrition-card--highlight strong,
body .doggos-subscription-page .doggos-nutrition-card p strong { color: var(--fn-sage); }
body .doggos-subscription-page .doggos-nutrition-items {
    font-family: var(--fn-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fn-rust) !important;
    background: var(--fn-ivory) !important;
    border: 1px solid var(--fn-rule);
}
/* Philosophy callout -> lime left rule on ivory */
body .doggos-subscription-page .doggos-nutrition-philosophy {
    background: var(--fn-ivory) !important;
    border-left: 3px solid var(--fn-lime) !important;
}

/* ---------------------------------------------------------------------------
   10. HOW IT WORKS — numbered steps
--------------------------------------------------------------------------- */
body .doggos-subscription-page .doggos-how-it-works { background: transparent !important; }
body .doggos-subscription-page .doggos-step {
    background: var(--fn-cream) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 16px !important;
    box-shadow: 5px 5px 0 var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-step:hover {
    background: var(--fn-cream) !important;
    box-shadow: 7px 7px 0 var(--fn-ink) !important;
}
/* Step number disc — base block forces colour with !important, so match.
   Lime disc, ink numeral, ink ring. */
body .doggos-subscription-page .doggos-step-number {
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;
    font-family: var(--fn-disp) !important;
    border: 1.5px solid var(--fn-ink);
    box-shadow: 2px 2px 0 var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-step-number::after { border-color: var(--fn-ink) !important; opacity: 0.25 !important; }
body .doggos-subscription-page .doggos-step p { color: var(--fn-ink-soft); }
body .doggos-subscription-page .doggos-step-arrow { color: var(--fn-lime) !important; }

/* ---------------------------------------------------------------------------
   11. PRICING — section title + tabs + dark band feel
--------------------------------------------------------------------------- */
body .doggos-subscription-page .doggos-sub-section-subtitle { color: var(--fn-ink-soft); }

/* Pricing-mode tabs (Curated / Build Your Own) */
body .doggos-subscription-page .doggos-pricing-tab {
    background: var(--fn-cream) !important;
    color: var(--fn-ink) !important;
    font-family: var(--fn-mono) !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 999px !important;
    box-shadow: 2px 2px 0 var(--fn-ink);
}
body .doggos-subscription-page .doggos-pricing-tab:hover {
    color: var(--fn-ink) !important;
    border-color: var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-pricing-tab.active {
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;
    border-color: var(--fn-ink) !important;
    box-shadow: 3px 3px 0 var(--fn-ink) !important;
}
/* recolour base sliding underline to lime */
body .doggos-subscription-page .doggos-pricing-tab::after {
    background: var(--fn-lime) !important;
}

/* ---------------------------------------------------------------------------
   12. BILLING TOGGLE — ink track, lime active label
   Base gold block forces toggle bg/border + toggle-switch bg with !important,
   so we override with !important on the same visual props.
   The toggle-switch itself stays display:none (base) — DO NOT touch display.
--------------------------------------------------------------------------- */
body .doggos-subscription-page .doggos-billing-toggle {
    background: var(--fn-moss) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 999px !important;
    box-shadow: 3px 3px 0 var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-billing-toggle:hover {
    border-color: var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-billing-label {
    color: var(--fn-bone) !important;
    font-family: var(--fn-mono) !important;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px !important;
}
body .doggos-subscription-page .doggos-billing-label.active {
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Annual callout pill */
body .doggos-subscription-page .doggos-callout-badge {
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;
    font-family: var(--fn-mono);
    font-weight: 700;
    letter-spacing: 0.1em;
    border: 1.5px solid var(--fn-ink);
    border-radius: 999px !important;
}
body .doggos-subscription-page .doggos-callout-text { color: var(--fn-ink-soft); font-family: var(--fn-mono); font-size: 12px; }
body .doggos-subscription-page .doggos-callout-text strong { color: var(--fn-sage); }

/* Trial COD callout strip (inline-styled in PHP — soften the colours) */
body .doggos-subscription-page .doggos-trial-callout {
    background: color-mix(in srgb, var(--fn-turmeric), var(--fn-bone) 88%) !important;
    border: 1.5px dashed var(--fn-rust) !important;
    border-radius: 12px !important;
    box-shadow: 3px 3px 0 var(--fn-rule) !important;
}
body .doggos-subscription-page .doggos-trial-callout::after { background: none !important; }

/* ============================================================================
   13. TIER CARDS — THE CENTREPIECE (specimen pricing cards)
   cream bg · 1.5px ink border · hard 6px offset shadow · ink hairline header
   divider · Fraunces tier name · JetBrains-Mono price · lime Select button.
   popular -> lime offset shadow + lime ribbon · best-value -> turmeric ribbon.
============================================================================ */
body .doggos-subscription-page .doggos-tier-card {
    background: var(--fn-cream) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 16px !important;
    box-shadow: 6px 6px 0 var(--fn-ink) !important;
    overflow: visible !important;   /* let ribbons + offset shadow show */
}
/* kill base inner gradient veil */
body .doggos-subscription-page .doggos-tier-card::before { background: none !important; }
body .doggos-subscription-page .doggos-tier-card:hover {
    border-color: var(--fn-ink) !important;
    box-shadow: 8px 8px 0 var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-tier-card.selected {
    border-color: var(--fn-ink) !important;
    box-shadow: 8px 8px 0 var(--fn-lime), 8px 8px 0 1.5px var(--fn-ink) !important;
}
/* POPULAR — lime hard offset shadow */
body .doggos-subscription-page .doggos-tier-card.popular {
    border-color: var(--fn-ink) !important;
    box-shadow: 8px 8px 0 var(--fn-lime), 8px 8px 0 1.5px var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-tier-card.popular:hover {
    box-shadow: 10px 10px 0 var(--fn-lime), 10px 10px 0 1.5px var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-tier-card.best-value {
    border-color: var(--fn-ink) !important;
}

/* Ribbon — flip from the base rotated corner-banner to a centred specimen tab */
body .doggos-subscription-page .doggos-tier-ribbon {
    top: -12px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) rotate(-2deg) !important;
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;
    font-family: var(--fn-mono) !important;
    font-size: 10px !important;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 12px !important;
    border: 1.5px solid var(--fn-ink);
    border-radius: 999px !important;
    box-shadow: 2px 2px 0 var(--fn-ink) !important;
    white-space: nowrap;
}
body .doggos-subscription-page .doggos-tier-ribbon.best-value-ribbon {
    background: var(--fn-turmeric) !important;
}
body .doggos-subscription-page .doggos-tier-card:hover .doggos-tier-ribbon {
    transform: translateX(-50%) rotate(0deg) !important;
}

/* Header — ink hairline divider, paper top, centred */
body .doggos-subscription-page .doggos-tier-header {
    background: var(--fn-ivory) !important;
    border-bottom: 1.5px solid var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-tier-icon svg { color: var(--fn-ink); }
body .doggos-subscription-page .doggos-tier-name {
    font-family: var(--fn-disp) !important;
    color: var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-tier-subtitle {
    font-family: var(--fn-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fn-rust) !important;
}

/* Price — mono specimen numerals */
body .doggos-subscription-page .doggos-price-amount {
    font-family: var(--fn-mono) !important;
    font-weight: 700 !important;
    color: var(--fn-ink) !important;
    letter-spacing: -0.02em;
}
body .doggos-subscription-page .doggos-tier-card:hover .doggos-price-amount { color: var(--fn-ink) !important; }
body .doggos-subscription-page .doggos-price-period {
    font-family: var(--fn-mono);
    color: var(--fn-ink-soft) !important;
}
body .doggos-subscription-page .doggos-mrp { font-family: var(--fn-mono); color: var(--fn-ink-mute); }
body .doggos-subscription-page .doggos-mrp s { color: var(--fn-ink-mute) !important; }

/* Savings chip + annual bonus */
body .doggos-subscription-page .doggos-tier-discount {
    background: color-mix(in srgb, var(--fn-lime), var(--fn-cream) 70%) !important;
    color: var(--fn-lime-ink) !important;
    font-family: var(--fn-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1.5px solid var(--fn-ink);
    border-radius: 999px !important;
    box-shadow: none !important;
}
body .doggos-subscription-page .doggos-annual-bonus {
    font-family: var(--fn-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--fn-rust) !important;
}

/* "What's inside" block — dotted-leader contents list */
body .doggos-subscription-page .doggos-tier-contents {
    background: var(--fn-ivory) !important;
    border: 1.5px solid var(--fn-rule) !important;
    border-radius: 10px !important;
}
body .doggos-subscription-page .doggos-tier-contents h4 {
    font-family: var(--fn-mono) !important;
    font-size: 10px !important;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fn-ink-mute) !important;
}
body .doggos-subscription-page .doggos-tier-contents li {
    color: var(--fn-ink-soft) !important;
    border-bottom: 1px dotted var(--fn-rule);
    line-height: 1.35;
}
body .doggos-subscription-page .doggos-tier-card:hover .doggos-tier-contents li { color: var(--fn-ink) !important; }
/* recolour the base ✓ list bullet to sage */
body .doggos-subscription-page .doggos-tier-contents li::before { color: var(--fn-sage) !important; }
/* per-item benefit tag (mono, sage) */
body .doggos-subscription-page .doggos-content-benefit {
    font-family: var(--fn-mono) !important;
    font-size: 8.5px !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fn-sage) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
/* Monthly-freebie line — dashed rust ticket */
body .doggos-subscription-page .doggos-tier-freebie {
    background: color-mix(in srgb, var(--fn-turmeric), var(--fn-cream) 84%) !important;
    color: var(--fn-rust) !important;
    font-family: var(--fn-mono);
    font-size: 10px;
    letter-spacing: 0.02em;
    border: 1px dashed var(--fn-rust) !important;
    border-radius: 8px !important;
}

/* Nutrition coverage tags -> ivory specimen chips with ink hairline */
body .doggos-subscription-page .doggos-tier-nutrition-coverage {
    border-top: 1px solid var(--fn-rule) !important;
}
body .doggos-subscription-page .doggos-coverage-label {
    font-family: var(--fn-mono);
    color: var(--fn-ink-mute) !important;
    letter-spacing: 0.1em;
}
body .doggos-subscription-page .doggos-coverage-tag {
    font-family: var(--fn-mono) !important;
    font-size: 8.5px !important;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fn-ink) !important;
    background: var(--fn-ivory) !important;
    border: 1px solid var(--fn-ink);
    border-radius: 999px !important;
}

/* Select button — lime fill, ink text, 3px hard offset shadow (specimen CTA) */
body .doggos-subscription-page .doggos-select-tier-btn {
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;
    font-family: var(--fn-mono) !important;
    font-weight: 700;
    font-size: 12px !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 10px !important;
    box-shadow: 3px 3px 0 var(--fn-ink) !important;
    transition: transform 0.14s var(--fn-snap), box-shadow 0.14s var(--fn-snap) !important;
}
body .doggos-subscription-page .doggos-select-tier-btn::after { background: none !important; }
body .doggos-subscription-page .doggos-select-tier-btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-tier-card.selected .doggos-select-tier-btn {
    background: var(--fn-lime) !important;
    box-shadow: 3px 3px 0 var(--fn-ink) !important;
}

/* Per-tier "try once — pay on delivery" link */
body .doggos-subscription-page .doggos-tier-cod-btn {
    font-family: var(--fn-mono) !important;
    color: var(--fn-rust) !important;
    border-top: 1px dashed var(--fn-rust) !important;
    letter-spacing: 0.02em;
}
body .doggos-subscription-page .doggos-tier-cod-btn:hover {
    background: color-mix(in srgb, var(--fn-turmeric), var(--fn-bone) 90%) !important;
    border-color: var(--fn-rust) !important;
    color: var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-tier-cod-btn svg,
body .doggos-subscription-page .doggos-tier-cod-btn strong { color: var(--fn-rust) !important; }

/* Custom-tier WhatsApp card variant */
body .doggos-subscription-page .doggos-custom-price {
    font-family: var(--fn-disp) !important;
    color: var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-custom-desc { color: var(--fn-ink-soft); }
body .doggos-subscription-page .doggos-whatsapp-btn {
    background: var(--fn-cream) !important;
    color: var(--fn-ink) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 999px !important;
    box-shadow: 3px 3px 0 var(--fn-ink) !important;
    font-family: var(--fn-mono);
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------------------
   14. CUSTOM BUILDER — product cards + qty steppers
   (Layout/structure left intact; only surfaces reskinned. Qty buttons stay
   clickable — only color/border/shadow touched.)
--------------------------------------------------------------------------- */
body .doggos-subscription-page .doggos-custom-builder,
body .doggos-subscription-page .doggos-builder-intro p { color: var(--fn-ink-soft); }
body .doggos-subscription-page .doggos-product-card {
    background: var(--fn-cream) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 16px !important;
    box-shadow: 4px 4px 0 var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-product-card:hover {
    border-color: var(--fn-ink) !important;
    box-shadow: 6px 6px 0 var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-product-card.has-items {
    border-color: var(--fn-ink) !important;
    background: color-mix(in srgb, var(--fn-lime), var(--fn-cream) 88%) !important;
    box-shadow: 4px 4px 0 var(--fn-lime), 4px 4px 0 1.5px var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-product-name { font-family: var(--fn-disp) !important; color: var(--fn-ink); }
body .doggos-subscription-page .doggos-product-desc { color: var(--fn-ink-soft); }
body .doggos-subscription-page .doggos-product-benefit-tag {
    font-family: var(--fn-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fn-sage) !important;
}
body .doggos-subscription-page .doggos-product-price { font-family: var(--fn-mono) !important; color: var(--fn-ink) !important; }
body .doggos-subscription-page .doggos-product-unit { font-family: var(--fn-mono); color: var(--fn-ink-mute); }
body .doggos-subscription-page .doggos-new-badge {
    background: var(--fn-rust) !important;
    color: var(--fn-bone) !important;
    border: 1.5px solid var(--fn-ink);
    box-shadow: 2px 2px 0 var(--fn-ink) !important;
    animation: none !important;
}
/* Qty steppers — ink hairline circles, lime hover. Do NOT touch size/display. */
body .doggos-subscription-page .doggos-qty-btn {
    background: var(--fn-cream) !important;
    color: var(--fn-ink) !important;
    border: 1.5px solid var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-qty-btn:hover:not(:disabled) {
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;
}
body .doggos-subscription-page .doggos-qty-btn:disabled {
    border-color: var(--fn-rule) !important;
    color: var(--fn-ink-mute) !important;
}
body .doggos-subscription-page .doggos-qty-value {
    font-family: var(--fn-mono) !important;
    color: var(--fn-ink) !important;
}
/* Sticky custom summary */
body .doggos-subscription-page .doggos-custom-summary-inner {
    background: var(--fn-cream) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 16px !important;
    box-shadow: 6px 6px 0 var(--fn-ink) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body .doggos-subscription-page .doggos-custom-summary { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body .doggos-subscription-page .doggos-custom-total-value,
body .doggos-subscription-page .doggos-custom-collapsed-total,
body .doggos-subscription-page .doggos-custom-mrp-value,
body .doggos-subscription-page .doggos-custom-discount-value { font-family: var(--fn-mono); color: var(--fn-ink); }
body .doggos-subscription-page .doggos-custom-subscribe-btn-mini:not(:disabled) {
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 999px !important;
    box-shadow: 2px 2px 0 var(--fn-ink) !important;
    font-family: var(--fn-mono);
    font-weight: 700;
}
body .doggos-subscription-page .doggos-custom-subscribe-btn:not(:disabled) {
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 999px !important;
    box-shadow: 4px 4px 0 var(--fn-ink) !important;
    font-family: var(--fn-mono);
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* Custom nudge box */
body .doggos-subscription-page .doggos-custom-nudge {
    background: var(--fn-ivory) !important;
    border: 1.5px dashed var(--fn-ink) !important;
    border-radius: 14px !important;
}
body .doggos-subscription-page .doggos-custom-nudge p { color: var(--fn-ink-soft); }

/* ---------------------------------------------------------------------------
   15. GUARANTEE BANNER
--------------------------------------------------------------------------- */
body .doggos-subscription-page .doggos-guarantee-banner {
    background: var(--fn-cream) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-left: 1.5px solid var(--fn-ink) !important;
    border-right: 1.5px solid var(--fn-ink) !important;
    border-radius: 16px !important;
    box-shadow: 6px 6px 0 var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-guarantee-banner:hover { box-shadow: 8px 8px 0 var(--fn-ink) !important; }
/* recolour base "GUARANTEED" mono stamp to lime */
body .doggos-subscription-page .doggos-guarantee-banner::before {
    content: 'FIG. 05A — GUARANTEED' !important;
    font-family: var(--fn-mono) !important;
    color: var(--fn-sage) !important;
}
body .doggos-subscription-page .doggos-guarantee-icon svg { stroke: var(--fn-ink) !important; animation: none !important; }
body .doggos-subscription-page .doggos-guarantee-content strong { font-family: var(--fn-disp) !important; color: var(--fn-ink); }
body .doggos-subscription-page .doggos-guarantee-content span { color: var(--fn-ink-soft); }

/* ---------------------------------------------------------------------------
   16. CHECKOUT FORM (.doggos-dog-details) — keep clean + legible
--------------------------------------------------------------------------- */
body .doggos-subscription-page .doggos-dog-details {
    background: var(--fn-cream) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 16px !important;
    box-shadow: 6px 6px 0 var(--fn-ink) !important;
}
/* recolour base "CHECKOUT" stamp */
body .doggos-subscription-page .doggos-dog-details::before {
    content: 'FIG. 05 — CHECKOUT' !important;
    font-family: var(--fn-mono) !important;
    color: var(--fn-rust) !important;
    opacity: 0.7 !important;
}
body .doggos-subscription-page .doggos-form-header h3 { font-family: var(--fn-disp) !important; color: var(--fn-ink); }
body .doggos-subscription-page .doggos-form-header p { color: var(--fn-ink-soft); }
body .doggos-subscription-page .doggos-form-section-title {
    font-family: var(--fn-mono) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fn-rust) !important;
}
body .doggos-subscription-page .doggos-form-group label {
    font-family: var(--fn-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fn-ink-soft) !important;
}
/* Inputs — bone fields, ink hairline, lime focus ring */
body .doggos-subscription-page .doggos-form-group input,
body .doggos-subscription-page .doggos-form-group select {
    background: var(--fn-bone) !important;
    color: var(--fn-ink) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 10px !important;
    font-family: var(--fn-body);
}
body .doggos-subscription-page .doggos-form-group input:focus,
body .doggos-subscription-page .doggos-form-group select:focus {
    border-color: var(--fn-sage) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fn-lime), transparent 70%) !important;
}
body .doggos-subscription-page .doggos-form-group input::placeholder { color: var(--fn-ink-mute) !important; }
/* Progress steps */
body .doggos-subscription-page .doggos-step-dot {
    background: var(--fn-cream) !important;
    color: var(--fn-ink) !important;
    border: 1.5px solid var(--fn-ink) !important;
    font-family: var(--fn-mono);
}
body .doggos-subscription-page .doggos-progress-step.active .doggos-step-dot,
body .doggos-subscription-page .doggos-form-progress .doggos-progress-step.active .doggos-step-dot {
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;
    border-color: var(--fn-ink) !important;
    box-shadow: none !important;
}
body .doggos-subscription-page .doggos-progress-step.completed .doggos-step-dot {
    background: var(--fn-sage) !important;
    color: var(--fn-bone) !important;
    border-color: var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-step-label { font-family: var(--fn-mono); color: var(--fn-ink-mute); }
/* Order summary */
body .doggos-subscription-page .doggos-order-summary {
    background: var(--fn-ivory) !important;
    border: 1.5px solid var(--fn-rule) !important;
    border-radius: 12px !important;
}
body .doggos-subscription-page .doggos-order-summary h4 { font-family: var(--fn-mono) !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fn-ink); }
body .doggos-subscription-page .doggos-summary-row span,
body .doggos-subscription-page .doggos-summary-total-inline,
body .doggos-subscription-page .doggos-summary-total { font-family: var(--fn-mono); color: var(--fn-ink-soft); }
body .doggos-subscription-page .doggos-summary-row.total span { color: var(--fn-ink) !important; }
body .doggos-subscription-page .doggos-payment-security { font-family: var(--fn-mono); color: var(--fn-ink-mute) !important; }
body .doggos-subscription-page .doggos-payment-security svg { color: var(--fn-sage) !important; }
/* Messages */
body .doggos-subscription-page .doggos-message { border-radius: 10px !important; border: 1.5px solid var(--fn-ink) !important; }

/* ---------------------------------------------------------------------------
   17. TESTIMONIALS
--------------------------------------------------------------------------- */
body .doggos-subscription-page .doggos-testimonials-section { background: transparent !important; }
body .doggos-subscription-page .doggos-testimonial-card {
    background: var(--fn-cream) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 16px !important;
    box-shadow: 5px 5px 0 var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-testimonial-card:hover { box-shadow: 7px 7px 0 var(--fn-ink) !important; }
body .doggos-subscription-page .doggos-testimonial-card::before {
    font-family: var(--fn-disp) !important;
    color: var(--fn-lime) !important;
    opacity: 0.5 !important;
}
body .doggos-subscription-page .doggos-testimonial-text { color: var(--fn-ink-soft); }
body .doggos-subscription-page .doggos-testimonial-info strong { font-family: var(--fn-disp) !important; color: var(--fn-ink); }
body .doggos-subscription-page .doggos-testimonial-info span { font-family: var(--fn-mono); color: var(--fn-ink-mute); }
body .doggos-subscription-page .doggos-testimonial-avatar {
    background: var(--fn-lime) !important;
    border: 1.5px solid var(--fn-ink);
}
body .doggos-subscription-page .doggos-testimonial-avatar svg { stroke: var(--fn-lime-ink) !important; }

/* ---------------------------------------------------------------------------
   18. FAQ
--------------------------------------------------------------------------- */
body .doggos-subscription-page .doggos-faq-section { background: transparent !important; }
body .doggos-subscription-page .doggos-faq-item {
    background: var(--fn-cream) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-left: 4px solid var(--fn-lime) !important;
    border-radius: 12px !important;
    box-shadow: 4px 4px 0 var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-faq-item:hover {
    box-shadow: 6px 6px 0 var(--fn-ink) !important;
    border-left-color: var(--fn-sage) !important;
}
body .doggos-subscription-page .doggos-faq-item h4 { font-family: var(--fn-disp) !important; color: var(--fn-ink); }
body .doggos-subscription-page .doggos-faq-item:hover h4 { color: var(--fn-ink) !important; }
body .doggos-subscription-page .doggos-faq-item p { color: var(--fn-ink-soft); }
body .doggos-subscription-page .doggos-faq-item p strong { color: var(--fn-ink); }

/* ---------------------------------------------------------------------------
   19. FINAL CTA — full-bleed lime band
--------------------------------------------------------------------------- */
body .doggos-subscription-page .doggos-final-cta {
    background: var(--fn-lime) !important;
    border-top: 1.5px solid var(--fn-ink) !important;
    color: var(--fn-lime-ink) !important;
}
body .doggos-subscription-page .doggos-final-cta::before {
    content: 'FIG. 06 — END CARD' !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
    font-family: var(--fn-mono) !important;
    color: var(--fn-lime-ink) !important;
    opacity: 0.8 !important;
    transform: translateX(-50%) !important;
}
body .doggos-subscription-page .doggos-final-cta::after { background: none !important; }
body .doggos-subscription-page .doggos-final-cta h2 { font-family: var(--fn-disp) !important; color: var(--fn-lime-ink) !important; }
body .doggos-subscription-page .doggos-final-cta p { color: var(--fn-lime-ink) !important; opacity: 0.85; }
body .doggos-subscription-page .doggos-final-stat { font-family: var(--fn-mono); color: var(--fn-lime-ink) !important; opacity: 0.8; }
/* On the lime band, the primary CTA inverts to ink fill, secondary to bone */
body .doggos-subscription-page .doggos-final-cta-btn {
    background: var(--fn-ink) !important;
    color: var(--fn-bone) !important;
    box-shadow: 4px 4px 0 var(--fn-lime-ink) !important;
}
body .doggos-subscription-page .doggos-final-cta-btn:hover {
    box-shadow: 6px 6px 0 var(--fn-lime-ink) !important;
}
body .doggos-subscription-page .doggos-final-cta-btn::after { background: none !important; }
body .doggos-subscription-page .doggos-final-cta-btn--secondary {
    background: var(--fn-bone) !important;
    color: var(--fn-ink) !important;
    box-shadow: 4px 4px 0 var(--fn-ink) !important;
}

/* ---------------------------------------------------------------------------
   20. MOBILE STICKY CTA
   Base block forces bg with !important.
--------------------------------------------------------------------------- */
body .doggos-subscription-page .doggos-mobile-sticky-cta {
    background: var(--fn-bone) !important;
    border-top: 1.5px solid var(--fn-ink) !important;
    box-shadow: 0 -4px 0 var(--fn-ink) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body .doggos-subscription-page .doggos-sticky-btn { animation: none !important; }
body .doggos-subscription-page .doggos-sticky-btn::after { background: none !important; animation: none !important; }

/* ---------------------------------------------------------------------------
   21. EXIT-INTENT MODAL — keep functional, lighten chrome
--------------------------------------------------------------------------- */
body .doggos-subscription-page .doggos-exit-modal-content {
    background: var(--fn-cream) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 16px !important;
    box-shadow: 8px 8px 0 var(--fn-ink) !important;
}
body .doggos-subscription-page .doggos-exit-modal-content h3 { font-family: var(--fn-disp) !important; color: var(--fn-ink) !important; }
body .doggos-subscription-page a.doggos-exit-modal-close[style] {
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;
    border: 1.5px solid var(--fn-ink) !important;
    box-shadow: 3px 3px 0 var(--fn-ink) !important;
}

/* ---------------------------------------------------------------------------
   22. DECORATIVE CHAPTER MARKERS (base gold block puts these on sections)
   Re-letter them to "FIG. 0X" and recolour to rust mono.
--------------------------------------------------------------------------- */
body .doggos-subscription-page .doggos-why-section::before { content: 'FIG. 02 — THE GAP' !important; color: var(--fn-rust) !important; }
body .doggos-subscription-page .doggos-nutrition-section::before { content: "FIG. 03 — WHAT'S INSIDE" !important; color: var(--fn-rust) !important; }
body .doggos-subscription-page .doggos-how-it-works::before { content: 'FIG. 04 — HOW IT WORKS' !important; color: var(--fn-rust) !important; }
body .doggos-subscription-page #pricing::before { content: 'FIG. 04A — CHOOSE YOUR BOX' !important; color: var(--fn-rust) !important; }

/* ---------------------------------------------------------------------------
   23. MOBILE  (<= 560px)  — cards stack, toggle/tabs wrap, prices legible
   Layout columns are handled by the base file's auto-fit grids; we only make
   sure the Field-Notes chrome (offset shadows, ribbons) stays clean small.
--------------------------------------------------------------------------- */
@media (max-width: 560px) {
    body .doggos-subscription-page .doggos-tier-card,
    body .doggos-subscription-page .doggos-nutrition-card,
    body .doggos-subscription-page .doggos-compare-card,
    body .doggos-subscription-page .doggos-step,
    body .doggos-subscription-page .doggos-faq-item,
    body .doggos-subscription-page .doggos-testimonial-card,
    body .doggos-subscription-page .doggos-guarantee-banner,
    body .doggos-subscription-page .doggos-dog-details {
        box-shadow: 4px 4px 0 var(--fn-ink) !important;   /* trim offset so cards don't overflow */
    }
    body .doggos-subscription-page .doggos-tier-card.popular,
    body .doggos-subscription-page .doggos-tier-card.selected {
        box-shadow: 5px 5px 0 var(--fn-lime), 5px 5px 0 1.5px var(--fn-ink) !important;
    }
    body .doggos-subscription-page .doggos-pricing-tab {
        font-size: 11px !important;
        padding-left: 16px;
        padding-right: 16px;
    }
    body .doggos-subscription-page .doggos-billing-label { padding-left: 18px; padding-right: 18px; }
    body .doggos-subscription-page .doggos-price-amount { font-size: 2rem !important; }
    body .doggos-subscription-page .doggos-stat-number { font-size: 2rem !important; }
    /* hide hero corner FIG markers on small screens (base block already does
       this for its own markers — keep them off so they don't crowd the badge) */
    body .doggos-subscription-page .doggos-sub-hero-content::before,
    body .doggos-subscription-page .doggos-sub-hero-content::after { display: none !important; }
}

/* ---------------------------------------------------------------------------
   24. REDUCED-MOTION SAFETY for everything introduced above
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body .doggos-subscription-page .doggos-hero-cta,
    body .doggos-subscription-page .doggos-final-cta-btn,
    body .doggos-subscription-page .doggos-subscribe-btn,
    body .doggos-subscription-page .doggos-sticky-btn,
    body .doggos-subscription-page .doggos-select-tier-btn,
    body .doggos-subscription-page .doggos-tier-card,
    body .doggos-subscription-page .doggos-tier-ribbon,
    body .doggos-subscription-page .doggos-product-card,
    body .doggos-subscription-page .doggos-qty-btn {
        transition: none !important;
    }
    body .doggos-subscription-page .doggos-hero-cta:hover,
    body .doggos-subscription-page .doggos-final-cta-btn:hover,
    body .doggos-subscription-page .doggos-subscribe-btn:hover:not(:disabled),
    body .doggos-subscription-page .doggos-sticky-btn:hover,
    body .doggos-subscription-page .doggos-select-tier-btn:hover {
        transform: none !important;
    }
}