/* ============================================================================
   GoCheckMyEstate — shared design system (Estate skin on the Parents chassis)
   Background #F7F5F0 (warm ivory) · primary deep green #3F6B54 · CTA deep
   green #345A46 · headings #2E3A31 in serif (Fraunces) · body soft moss
   charcoal #6B6E66. Never pure black text. Never clinical white page
   backgrounds. No red anywhere; time-sensitive notes use warm amber (--sand).
   No stock photography — inline SVG line illustrations in muted tones only.
   NOTE: legacy var names (--sage/--sage-deep/--blue/...) are kept from the
   chassis so shared component CSS transfers unchanged; their VALUES are the
   Estate greens. Same convention Parents used (blues under --sage names).
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  color-scheme:light;
  --bg:#F7F5F0;            /* warm ivory background */
  --surface:#FFFFFF;
  --ink:#2E3A31;           /* deep green-charcoal headings */
  --body:#5E615A;          /* body text — never pure black */
  --muted:#5E615A;
  --line:#E5E4DF;
  --sage:#3F6B54;          /* primary deep green (legacy var name kept) */
  --sage-deep:#345A46;     /* CTA deep green */
  --sagesoft:#E8EFE9;
  --blue:#3F6B54;          /* legacy alias → green */
  --blue-deep:#345A46;
  --bluesoft:#EAF0EA;
  --sand:#B98F52;          /* muted gold: eyebrows, time-sensitive notes */
  --accent-ink:#795A1B;    /* accessible gold TEXT (WCAG 1.4.3), family ink-standard; --sand stays decorative */
  --sandsoft:#F3EBDC;
}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{margin:0;color:var(--body);font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.7;min-height:100vh}
h1,h2,h3,h4,.serif{color:var(--ink)}
.wrap{max-width:620px;margin:0 auto;padding:22px 22px 44px}
.wrap.wide{max-width:1040px}
.serif{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.18;letter-spacing:-.01em}
a{color:var(--sage-deep)}

/* ===== Marketing type scale (articles + homepage); tool stays compact =====
   Serif-forward register: article leads and pull-lines render in Fraunces. */
article{font-size:18px;line-height:1.72}
article p,article li{font-size:18px;line-height:1.72}
article li{margin-bottom:6px}
article h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:32px;line-height:1.22;margin-top:34px;letter-spacing:-.01em}
article h3{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:24px;line-height:1.28;margin-top:26px}
article .pull{font-family:'Fraunces',Georgia,serif;font-weight:500;font-style:italic;font-size:20px;line-height:1.5;color:var(--ink);border-left:3px solid var(--sand);padding:2px 0 2px 18px;margin:24px 0}

/* Guide furniture (family template pass): TLDR summary, Sources, coin end mark */
.gsum{background:var(--surface);border:1.5px solid var(--line);border-left:3px solid var(--sage);border-radius:14px;padding:16px 20px;margin:22px 0 8px}
.gsum .lab{display:block;font-family:'Inter',system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px}
.gsum ul{margin:0;padding-left:20px}
.gsum li{font-size:16.5px;line-height:1.6;margin-bottom:5px;color:var(--ink)}
.gsum li:last-child{margin-bottom:0}
.gsrc{margin:8px 0 0;padding-left:22px}
.gsrc li{font-size:15px;line-height:1.55;margin-bottom:7px;color:var(--body)}
.gsrc a{color:var(--sage-deep)}
.gc-end{text-align:center;margin:30px 0 6px}
.gc-end img{width:40px;height:40px;opacity:.9}

.pill{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
h1.hero{font-size:40px;font-weight:600;margin:14px 0 0}
.lead{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:19px;line-height:1.58;color:var(--muted);margin-top:14px;max-width:560px}
.chips{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;background:var(--surface);border:1px solid var(--line);padding:8px 12px;border-radius:99px}

.btn{cursor:pointer;border:none;border-radius:14px;padding:16px 24px;font-weight:600;font-size:16px;font-family:'Fraunces',Georgia,serif;display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--sage-deep),var(--sage));color:#fff;box-shadow:0 12px 28px -10px rgba(46,58,49,.5)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
.btn-block{width:100%;justify-content:center}

.opt{width:100%;text-align:left;cursor:pointer;margin-bottom:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:13px;padding:15px 17px;font-weight:600;font-size:15.5px;font-family:'Inter',system-ui,sans-serif;display:flex;align-items:center;justify-content:space-between;gap:10px;transition:border-color .14s,background .14s}
.opt:hover{border-color:var(--sage)}
.opt.on{border-color:var(--sage);background:var(--sagesoft)}

.card{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:20px;margin-top:20px}
.fine{font-size:11.5px;color:var(--muted);margin-top:22px;line-height:1.55}

.progress{flex:1;height:7px;background:var(--line);border-radius:99px;overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--sage),var(--sage-deep));transition:width .3s}

.rise{animation:rise .4s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

input[type=text],input[type=email],input[type=tel],select.qz-sel{font-family:'Inter',system-ui,sans-serif;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;font-size:16px;font-weight:600;background:#fff;color:var(--ink)}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,select.qz-sel:focus{outline:none;border-color:var(--sage)}
/* ===== WCAG 2.4.7 Focus Visible: keyboard focus indicator on every interactive element ===== */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.opt:focus-visible{outline:3px solid #345A46;outline-offset:2px;border-radius:4px}
input[type=text]:focus-visible,input[type=email]:focus-visible,input[type=tel]:focus-visible,select.qz-sel:focus-visible{outline:3px solid #345A46;outline-offset:1px;border-color:var(--sage)}
/* ===== WCAG 2.4.1 Bypass Blocks: skip link (injected by a11y.js), off-screen until focused ===== */
.gcm-skip{position:fixed;left:8px;top:-56px;z-index:1000;background:var(--sage-deep);color:#fff;padding:11px 18px;border-radius:0 0 10px 10px;font:600 14px/1 'Inter',system-ui,sans-serif;text-decoration:none;box-shadow:0 6px 18px -6px rgba(46,58,49,.5);transition:top .16s}
.gcm-skip:focus{top:0}
/* ===== Motion: honor prefers-reduced-motion for all animation and smooth scroll ===== */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
select.qz-sel{width:100%;appearance:auto}

/* encouraging reassurance line */
.reassure{margin:12px 0 2px;background:var(--sagesoft);border:1px solid #D6E0D6;border-left:4px solid var(--sage);border-radius:12px;padding:11px 14px;font-size:14px;line-height:1.5;color:var(--ink)}
.reassure b{color:var(--sage-deep)}

/* contextual affiliate slot (content pages; rendered by affiliates.js) */
.aff-slot{margin:26px 0}
.aff-disc{font-size:11px;color:var(--muted);line-height:1.45;margin:0 0 8px}
.aff-card{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--sagesoft);border:1px solid #D6E0D6;border-radius:14px;padding:15px 17px}
.aff-card b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.02rem;color:var(--ink);line-height:1.3}
.aff-card .aff-why{display:block;font-size:.84rem;color:var(--muted);line-height:1.45;margin-top:2px}
.aff-go{flex-shrink:0;display:inline-flex;background:var(--sage-deep);color:#fff;font-weight:700;font-size:.85rem;padding:10px 16px;border-radius:10px;text-decoration:none;white-space:nowrap}
.aff-go.soon{background:var(--bg);color:var(--muted);border:1px solid var(--line)}

/* ============================================================================
   PRESENTATION SYSTEM — shell, bands, kicker, DocGrid
   Palette adds: linen #EFE8D8 · accent green-gray #ECF0EA · gold kicker #B98F52
   ============================================================================ */
:root{--linen:#EFE8D8;--accentband:#ECF0EA;--kicker:#795A1B;--dgOk:#3F6B54;--dgReview:#C08A4E;--dgMiss:#C9C2B0;--dgOpt:#9AA69B}

/* content shell + prose measure */
.shell{max-width:1100px;margin:0 auto;padding:0 24px}
.measure{max-width:740px}
.measure-c{max-width:740px;margin-left:auto;margin-right:auto}

/* full-width alternating bands */
.band{width:100%}
.band>.shell{padding:66px 24px}
.band-linen{background:var(--linen)}
.band-std{background:var(--bg)}
.band-accent{background:var(--accentband)}
@media(max-width:720px){.band>.shell{padding:44px 20px}}

/* gold kicker label above serif heads */
.kicker{display:block;font-family:'Inter',system-ui,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--kicker);margin:0 0 10px}
.serif-head{font-family:'Fraunces',Georgia,serif;font-weight:600;color:var(--ink);letter-spacing:-.015em;line-height:1.16;margin:0}
.serif-head em{font-style:italic;color:var(--sage)}

/* ---- DocGrid: the five core documents, each with a status --------------------
   States: ok (green, check) · review (amber, clock) · miss (open, dashed) ·
   opt (muted, "likely optional") · teaser (all neutral, homepage). */
.docgrid{display:flex;width:100%;padding:2px 0}
.dg-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;padding:0 4px;text-align:center}
.dg-node{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#EAE5D6;border:1.5px solid #CFC8B4;color:var(--body);position:relative;transition:background .3s,border-color .3s}
.dg-node svg{width:23px;height:23px}
.dg-node.ok{background:var(--dgOk);border-color:var(--dgOk);color:#F2F0E6}
.dg-node.review{background:var(--dgReview);border-color:var(--dgReview);color:#fff}
.dg-node.miss{background:transparent;border:2px dashed var(--dgMiss);color:var(--dgMiss)}
.dg-node.consider{background:transparent;border:2px dashed var(--dgReview);color:var(--dgReview)}
.dg-node.opt{background:#EDEEE8;border-color:#D5D8CE;color:var(--dgOpt)}
.dg-badge{position:absolute;right:-5px;top:-5px;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;box-shadow:0 0 0 2.5px var(--bg)}
.dg-node.ok .dg-badge{background:var(--dgOk)}
.dg-node.review .dg-badge{background:var(--dgReview)}
.dg-node.consider .dg-badge{background:var(--dgReview)}
.dg-node.miss .dg-badge{background:#B4AC97;color:#fff}
.dg-lbl{margin-top:9px;font-family:'Inter',system-ui,sans-serif;font-size:11.5px;line-height:1.3;color:var(--muted);font-weight:600}
.dg-node.ok+.dg-lbl,.dg-node.review+.dg-lbl{color:var(--ink);font-weight:700}
.dg-st{margin-top:3px;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.dg-st.ok{color:var(--dgOk)}.dg-st.review{color:var(--dgReview)}.dg-st.consider{color:var(--dgReview)}.dg-st.miss{color:#A79D85}.dg-st.opt{color:var(--dgOpt)}
.dg-lbl .dg-ab{display:none}
.dg-caption{margin:13px auto 0;font-style:italic;font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center}
@media(max-width:600px){
  .dg-node{width:38px;height:38px;border-radius:11px}
  .dg-node svg{width:19px;height:19px}
  .dg-lbl{font-size:10.5px;margin-top:7px}
  .dg-lbl .dg-full{display:none}.dg-lbl .dg-ab{display:block}
  .dg-st{font-size:8.5px}
}

/* ---- two-up secondary offramp rows (desktop) ---- */
@media(min-width:680px){.rs-rows-2up{display:grid;grid-template-columns:1fr 1fr;gap:8px}.rs-rows-2up .rs-row{margin-top:0}}

/* ---- usability controls (a11y.js) ---- */
.a11y-widget{position:fixed;left:14px;bottom:14px;z-index:80}
.a11y-toggle{width:46px;height:46px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line);color:var(--ink);font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:19px;cursor:pointer;box-shadow:0 6px 18px -8px rgba(46,58,49,.45);display:flex;align-items:baseline;justify-content:center;line-height:1;gap:1px}
.a11y-toggle span{font-size:13px}
.a11y-panel{position:absolute;left:0;bottom:54px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 16px 40px -20px rgba(46,58,49,.5);width:186px}
.a11y-cap{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.a11y-grp{display:flex;gap:6px;margin-bottom:8px}
.a11y-b{flex:1;min-height:44px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;font-weight:700;font-size:15px;cursor:pointer;font-family:'Inter',system-ui,sans-serif}
.a11y-b:hover{border-color:var(--sage)}
.a11y-b.on{background:var(--sage);color:#fff;border-color:var(--sage)}
.a11y-wide{width:100%;font-size:13px;min-height:44px}
html.a11y-contrast{--body:#2B332C;--muted:#3C443D}
html.a11y-contrast a:not(.btn):not([class*="cta"]):not([class*="-go"]){text-decoration:underline}
@media print{.a11y-widget{display:none}}

/* shared footer */
.gc-foot{border-top:1px solid var(--line);margin-top:0;padding:26px 22px 34px;background:var(--surface)}
.gc-foot .fin{max-width:1040px;margin:0 auto;display:flex;flex-wrap:wrap;gap:18px 34px;align-items:flex-start;justify-content:space-between}
.gc-foot .fbrand{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:16px;color:var(--ink)}
.gc-foot .flinks{display:flex;flex-wrap:wrap;gap:16px}
.gc-foot .flinks a{font-size:13px;color:var(--muted);text-decoration:none}
.gc-foot .flinks a:hover{color:var(--ink)}
.gc-foot .fllc{width:100%;font-size:12px;color:var(--muted);margin-top:2px}
.gc-foot .fnote{width:100%;font-size:11.5px;color:var(--muted);line-height:1.6;margin-top:6px}