/* ════════════════════════════════════════════════════════════════════════
   PetTrust.io — Fable 5 brand skin (style-only override layer)
   One source of truth for the v2 look across every page. Loaded AFTER each
   page's own styles. Colors/typography/borders only — never layout/logic.
   ════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600;700&display=swap');

:root{
  --v2-bg:#fdfcfa; --v2-soft:#faf6ef; --v2-warm:#f4eee4;
  --v2-ink:#1a2433; --v2-ink2:#435062; --v2-ink3:#5f6b7a;
  --v2-gold:#8a6f3e; --v2-gold2:#b08d4f; --v2-gold3:#c9a96e;
  --v2-navy:#0d1b2a; --v2-line:#eae3d6; --v2-line2:#ddd3c0;
  --v2-grad:linear-gradient(135deg,#b08d4f,#8a6f3e);
  --v2-shadow:0 24px 55px -28px rgba(26,36,51,.25);
}

/* ── Headers (start/about use .header; pet-trust uses .hdr) ─────────────── */
.header, .hdr{background:rgba(253,252,250,.9) !important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--v2-line) !important}
.brand-mark,.header-logo,.hdr-brand{color:var(--v2-ink) !important}
.header-logo span,.hdr-brand span{color:var(--v2-gold) !important}
.brand-sub{color:var(--v2-ink3) !important}
.header-nav a,.hdr-back,.hdr-save{color:var(--v2-ink2) !important}
.header-nav a:hover,.hdr-back:hover{color:var(--v2-ink) !important}
.mobile-menu-btn span{background:var(--v2-ink) !important}

/* ── Primary buttons → gold gradient pill ───────────────────────────────── */
.btn-gold,.btn-primary,.btn-accent,.btn-buy-now,.header-cta-btn,.csm-btn,
#btn-complete,.counsel-send-btn,.counsel-start-btn,.attorney-cta,
.about-cta-btn{
  background:var(--v2-grad) !important;color:#fff !important;border:none !important;
  box-shadow:0 12px 28px -12px rgba(138,111,62,.55) !important;
}
.btn-gold:hover,.btn-primary:hover,.btn-buy-now:hover,#btn-complete:hover{filter:brightness(1.08)}
.btn-secondary,.btn-outline,.btn-ghost{background:#fff !important;color:var(--v2-ink) !important;border:1px solid var(--v2-line2) !important}
.btn-secondary:hover,.btn-outline:hover{border-color:var(--v2-gold2) !important;color:var(--v2-gold) !important}

/* ── Form fields (questionnaire + document app) ─────────────────────────── */
.field-group input,.field-group select,.field-group textarea,
.field input,.field select,.field textarea,
.intake-card input,.intake-card select,.intake-card textarea{
  /* A11y P1 (G3): control boundaries ≥3:1 — --hl-control, not the 1.45:1 line token */
  background:#fff !important;border:1px solid var(--hl-control,#837a66) !important;border-radius:12px !important;
  color:var(--v2-ink) !important;transition:border-color .15s, box-shadow .15s !important;
}
.field-group input:focus,.field-group select:focus,.field-group textarea:focus,
.field input:focus,.field select:focus,.field textarea:focus,
.intake-card input:focus,.intake-card select:focus,.intake-card textarea:focus{
  border-color:var(--v2-gold2) !important;box-shadow:0 0 0 4px rgba(176,141,79,.14) !important;
}
/* A11y P1 (G9): keyboard focus ring — never suppressed. The skin previously
   forced the outline off with importance, silently killing every focus
   indicator on skinned fields; the guards now ban that pattern here. */
.field-group input:focus-visible,.field-group select:focus-visible,.field-group textarea:focus-visible,
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,
.intake-card input:focus-visible,.intake-card select:focus-visible,.intake-card textarea:focus-visible{
  outline:2px solid var(--hl-gold,#8a6f3e) !important;outline-offset:1px !important;
}
.field-group label,.field label{color:var(--v2-ink2) !important;font-weight:600}
.field-hint,.field-help{color:var(--v2-ink3) !important}

/* ── Cards: questionnaire sections, intake, quiz ────────────────────────── */
.section-card,.intake-card,.quiz-card{
  background:#fff !important;border:1px solid var(--v2-line) !important;border-radius:18px !important;
  box-shadow:var(--v2-shadow) !important;
}
.section-title,.intake-section-title{font-family:'Instrument Serif',Georgia,serif !important;font-weight:400 !important;color:var(--v2-ink) !important;letter-spacing:-0.015em}
.section-sub,.intake-section-sub{color:var(--v2-ink3) !important}
.section-num{background:var(--v2-navy) !important;color:var(--v2-gold3) !important;font-family:'Instrument Serif',Georgia,serif !important;border-radius:10px !important}
.intake-eyebrow{color:var(--v2-gold) !important;letter-spacing:.18em}

/* ── Choice tiles (plan picks, funding method, etc.) ────────────────────── */
.choice-item,.quiz-option{background:#fff !important;border:1px solid var(--v2-line) !important;border-radius:14px !important;transition:all .15s}
.choice-item:hover,.quiz-option:hover{border-color:var(--v2-gold2) !important}
.choice-item.selected,.quiz-option.selected{border-color:var(--v2-gold) !important;background:#faf5ea !important;box-shadow:0 10px 26px -14px rgba(138,111,62,.45) !important}
.choice-title{color:var(--v2-ink) !important}

/* ── Intake progress ────────────────────────────────────────────────────── */
.intake-progress-dot{border-color:var(--v2-line2) !important}
.intake-progress-step.active .intake-progress-dot,.intake-progress-dot.active{background:var(--v2-gold) !important;border-color:var(--v2-gold) !important}
.intake-progress-line{background:var(--v2-line) !important}
.intake-progress-label{color:var(--v2-ink3) !important}

/* ── Modals (disclaimer, paywall, upsell) ───────────────────────────────── */
.modal,.counsel-disclaimer-box{background:var(--v2-bg) !important;border:1px solid var(--v2-line) !important;border-radius:20px !important}
.modal-header{font-family:'Instrument Serif',Georgia,serif !important;color:var(--v2-ink) !important}
.modal-backdrop,.counsel-backdrop{background:rgba(13,22,32,.5) !important;backdrop-filter:blur(4px)}

/* ── Ask PetTrust chat (start.html legacy widget) ───────────────────────── */
.counsel-fab{background:var(--v2-grad) !important;color:#fff !important;border:none !important;box-shadow:0 14px 34px -12px rgba(138,111,62,.65) !important}
.counsel-fab-badge{background:rgba(255,255,255,.18) !important;color:#fff !important}
.counsel-drawer{background:var(--v2-bg) !important;border:1px solid var(--v2-line) !important;border-radius:20px !important;box-shadow:0 40px 90px -25px rgba(13,22,32,.45) !important}
.counsel-header{background:var(--v2-navy) !important}
.counsel-header-title{font-family:'Instrument Serif',Georgia,serif !important;color:#f5f0e8 !important}
.counsel-header-title span{color:var(--v2-gold3) !important}
.counsel-header-sub{color:rgba(245,240,232,.6) !important}
.counsel-header-badge{background:rgba(201,169,110,.18) !important;color:var(--v2-gold3) !important}
.counsel-messages{background:var(--v2-bg) !important}
.counsel-msg-user .counsel-msg-bubble{background:var(--v2-navy) !important;color:#f5f0e8 !important;border-radius:14px 14px 4px 14px !important}
.counsel-msg-assistant .counsel-msg-bubble{background:#fff !important;border:1px solid var(--v2-line) !important;color:var(--v2-ink) !important;border-radius:14px 14px 14px 4px !important}
.counsel-input-area{background:#fff !important;border-top:1px solid var(--v2-line) !important}
.counsel-input{background:#fff !important;border:1px solid var(--hl-control,#837a66) !important;border-radius:12px !important;color:var(--v2-ink) !important}
.counsel-input:focus{border-color:var(--v2-gold2) !important;box-shadow:0 0 0 4px rgba(176,141,79,.14) !important}
.counsel-input:focus-visible{outline:2px solid var(--hl-gold,#8a6f3e) !important;outline-offset:1px !important}
.counsel-quick-btn{background:#faf5ea !important;border:1px solid rgba(176,141,79,.35) !important;color:var(--v2-gold) !important;border-radius:999px !important}
.counsel-quick-btn:hover{background:#f4ead6 !important}
.counsel-attorney-cta{background:var(--v2-grad) !important;color:#fff !important;border-radius:12px !important}
.counsel-footer-disclaimer{color:var(--v2-ink3) !important}

/* ── pet-trust.html document app shell ──────────────────────────────────── */
.form-shell{background:var(--v2-bg) !important}
.complete-bar{background:rgba(253,252,250,.94) !important;backdrop-filter:blur(12px);border-top:1px solid var(--v2-line) !important}
.complete-bar-left{color:var(--v2-ink2) !important}
.hero .hero-emoji{filter:none}

/* ── Generic page text polish on legacy pages ───────────────────────────── */
.pricing-disclaimer{color:var(--v2-ink3) !important}

/* ── A11y fleet primitives (P3) — for pages that load this skin without
   heirloom.css (pillars, species, news, privacy/terms, statutes hub).
   Mirrors the heirloom definitions so the skip link + anchored-content law
   hold on every skinned page. ─────────────────────────────────────────── */
.hl-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hl-skip-link{position:fixed;top:-60px;left:16px;z-index:9999;background:var(--v2-navy,#0d1b2a);color:#f5f0e8;padding:10px 18px;border-radius:999px;font:600 14px/1 'Geist',system-ui,sans-serif;text-decoration:none;transition:top .2s ease}
.hl-skip-link:focus-visible{top:12px}
html{scroll-padding-top:74px}
#main:focus{outline:none}
/* crew.html's .brand-sub sits on the NAVY brand band — the light-header
   assumption above would paint it ink-on-navy (3.2:1). */
.brand-section .brand-sub{color:rgba(255,255,255,.78) !important}