/* ============================================================
   GET LIFE INSURANCE FOR ME: visual identity. Site-specific.

   WHO THIS IS FOR
   Adults, mostly 25 to 55, at the moment life insurance comes up:
   a new baby, a wedding, a first house, a job that ended and took
   its coverage with it. They're wary of salespeople, unsure how
   much they need, and don't want to be talked into the wrong kind.

   WHAT THE DESIGN HAS TO SAY
   The kitchen table, not the sales office. Insurance sites are cold
   corporate blue with smiling stock families and a quote button in
   every corner. This looks like the folder where a family keeps its
   important papers: linen paper, folder tabs, a tally tape that adds
   up the worksheet, and red flags written out in words.

   SIGNATURES
   Folder-tab section labels, a five-step "settle these first" path,
   the worksheet's tally tape with a running total, and "Red flag"
   panels. No quote buttons anywhere.

   COLOR
   Linen ground, deep plum for headings, buttons and links (warm and
   serious, nothing like insurance blue), marigold as the folder and
   tally highlight, and a brick red reserved for red flags. Every
   text pair is checked by the build script.

   TYPE
   Besley for headings: a Clarendon, the typeface of old policy
   documents and savings books, made warm. Commissioner for reading:
   a calm, open sans that stays clear at small sizes.
   ============================================================ */

:root {
  --paper:        #f7f3ea;
  --card:         #ffffff;
  --ink:          #1f2328;
  --ink-soft:     #50565e;
  --plum:         #4a2545;
  --plum-deep:    #2f1630;
  --plum-wash:    #f2e9f0;
  --marigold:     #e9a23b;   /* highlight; text only on plum-deep */
  --marigold-wash:#fbefd9;
  --flag:         #a1341f;
  --flag-wash:    #fbe8e3;
  --line:         #e3dccd;   /* decorative rules only */

  --accent:     var(--plum);
  --accent-ink: #ffffff;
  --focus:      #1d4ed8;
  --measure:    66ch;

  --display: 'Besley', Georgia, 'Times New Roman', serif;
  --body:    'Commissioner', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

[hidden] { display: none !important; }

body { font-family: var(--body); font-size: 1.0625rem; line-height: 1.7; color: var(--ink); background: var(--paper); }

.wrap { width: min(70rem, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 46rem; }

h1, h2, h3 { font-family: var(--display); line-height: 1.15; color: var(--plum-deep); }
h1, h2, h3, dt, dd, .fact-figure, .step, .ask li::before { font-variant-numeric: lining-nums; }
h1 { font-weight: 800; font-size: clamp(2.2rem, 5.4vw, 3.7rem); letter-spacing: -0.01em; }
h2 { font-weight: 700; font-size: clamp(1.5rem, 3.1vw, 2.2rem); margin-bottom: 0.6rem; }
h3 { font-weight: 700; font-size: 1.15rem; margin-bottom: 0.3rem; }
p + p { margin-top: 0.85rem; }
a { color: var(--plum); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--ink); }
a[href^="mailto:"] { overflow-wrap: anywhere; }

.kicker { font-weight: 700; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--plum); margin-bottom: 0.5rem; }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 54ch; }
.fine { font-size: 0.875rem; color: var(--ink-soft); margin-top: 0.85rem; }

/* Folder tab: the section label */
.tab { display: inline-block; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--plum-deep); background: var(--marigold-wash); border: 1px solid var(--marigold); border-bottom: 0; border-radius: 8px 8px 0 0; padding: 0.2rem 0.8rem; margin: 0; }
.tab--flag { color: var(--flag); background: var(--flag-wash); border-color: var(--flag); }

/* ---- Header ------------------------------------------------ */
.site-header { background: var(--card); border-bottom: 4px solid var(--plum); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 0.6rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--plum-deep); text-decoration: none; }
.brand .mark { width: 24px; height: 18px; border-radius: 3px 3px 2px 2px; background: var(--marigold); position: relative; }
.brand .mark::before { content: ""; position: absolute; left: 0; top: -5px; width: 11px; height: 6px; border-radius: 3px 3px 0 0; background: var(--marigold); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.2rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--plum); color: var(--ink); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--marigold); }

main { padding-block: 2.75rem 4rem; }
.hero { padding-bottom: 1.25rem; }
.hero h1 { max-width: 19ch; margin-bottom: 0.9rem; }
.section { margin-top: 3.25rem; }

/* ---- Settle-these-first path ------------------------------- */
.path { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }
.path li { max-width: none; }
.path a { display: grid; grid-template-columns: 2.6rem 1fr; grid-template-rows: auto auto; column-gap: 0.8rem; align-items: center; min-height: 44px; background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--plum); border-radius: 0 12px 12px 0; padding: 0.9rem 1rem; color: var(--ink); text-decoration: none; }
.path a:hover { border-color: var(--plum); box-shadow: 0 2px 0 var(--plum); }
.step { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--plum); color: #ffffff; font-family: var(--display); font-weight: 800; }
.path-title { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--plum-deep); }
.path-sub { font-size: 0.95rem; color: var(--ink-soft); }

/* ---- Folder panels ----------------------------------------- */
.folder { background: var(--card); border: 1px solid var(--marigold); border-radius: 0 14px 14px 14px; padding: clamp(1.2rem, 3vw, 1.9rem); }
.folder--flag { border-color: var(--flag); background: var(--flag-wash); }
.folder--flag h2, .folder--flag h3 { color: var(--flag); }
.folder--plum { background: var(--plum-wash); border-color: var(--plum); }

/* ---- Fact cards -------------------------------------------- */
.facts { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
.fact { background: var(--card); border: 1px solid var(--line); border-top: 6px solid var(--plum); border-radius: 12px; padding: 1rem 1.1rem 0.9rem; max-width: none; display: flex; flex-direction: column; }
.fact-figure { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1.1; color: var(--plum); margin: 0.1rem 0 0.4rem; }
.fig-year { font-family: var(--body); font-size: 0.45em; font-weight: 700; color: var(--ink-soft); vertical-align: middle; }
.label { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.35rem; }
.source { margin-top: auto; padding-top: 0.6rem; font-size: 0.8125rem; color: var(--ink-soft); }
.folder .source { margin-top: 0.8rem; }

/* ---- Term vs permanent ------------------------------------- */
.compare { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); margin-top: 1rem; }
.compare-col { background: var(--card); border: 1px solid var(--line); border-top: 6px solid var(--marigold); border-radius: 12px; padding: 1rem 1.2rem; }
.compare-col ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.compare-col li { margin-bottom: 0.45rem; }
.glossary { margin: 1rem 0 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; max-width: 52rem; }
.glossary div { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--line); }
.glossary div:last-child { border-bottom: 0; }
.glossary dt { font-family: var(--display); font-weight: 700; color: var(--plum-deep); }
.glossary dd { margin: 0; }

/* ---- Worksheet and tally tape ------------------------------ */
.worksheet { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); align-items: start; margin-top: 1rem; }
.worksheet fieldset { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 1rem 1.1rem 1.1rem; margin: 0 0 1rem; }
.worksheet .tab + fieldset { border-top-left-radius: 0; border-color: var(--marigold); }
.worksheet legend { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--plum-deep); padding: 0 0.4rem; }
.field { display: grid; gap: 0.25rem; margin-top: 0.8rem; }
.field label { font-weight: 600; }
.field .hint { font-size: 0.875rem; color: var(--ink-soft); margin: 0; }
.field input { max-width: 16rem; padding: 0.55rem 0.8rem; border: 2px solid var(--ink-soft); border-radius: 10px; background: #ffffff; font: inherit; }
.tape { position: sticky; top: 1rem; background: #fffdf6; border: 1px solid var(--line); border-top: 8px solid var(--marigold); border-radius: 4px 4px 14px 14px; padding: 1.1rem 1.2rem 1.2rem; box-shadow: 0 2px 0 var(--line); }
.tape h2 { font-size: 1.3rem; }
.tape dl { margin: 0.6rem 0 0; font-variant-numeric: lining-nums tabular-nums; }
.tape dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px dashed var(--ink-soft); }
.tape dt { margin: 0; }
.tape dd { margin: 0; font-weight: 700; }
.tape .gap-row dt, .tape .gap-row dd { font-family: var(--display); font-size: 1.25rem; color: var(--plum-deep); }
.tape .gap-row { border-bottom: 0; border-top: 3px double var(--ink); margin-top: 0.3rem; }
.verdict { margin-top: 0.8rem; font-weight: 600; }

/* ---- Questions and flags ----------------------------------- */
.ask { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.7rem; counter-reset: q; max-width: 52rem; }
.ask li { counter-increment: q; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 1.1rem 0.85rem 3.4rem; max-width: none; }
.ask li::before { content: counter(q); position: absolute; left: 1rem; top: 0.9rem; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; background: var(--plum); color: #ffffff; font-family: var(--display); font-weight: 800; font-size: 0.95rem; }
.flags { margin: 0.8rem 0 0; padding-left: 1.25rem; }
.flags li { margin-bottom: 0.55rem; }

/* ---- Tools ------------------------------------------------- */
.tools { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.tools li { background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--marigold); border-radius: 0 12px 12px 0; padding: 1rem 1.1rem 0.6rem; max-width: none; display: flex; flex-direction: column; }
.cost { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 0.4rem; }
.go { font-weight: 700; margin-top: auto; }
.go a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- Buttons, forms, prose --------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.3rem; background: var(--plum); color: #ffffff; border: 2px solid var(--plum); border-radius: 10px; font-family: var(--body); font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--plum-deep); border-color: var(--plum-deep); color: #ffffff; }
.btn--ghost { background: var(--card); color: var(--plum-deep); border-color: var(--plum); }
.btn--ghost:hover { background: var(--plum-wash); color: var(--plum-deep); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.prose h2 { margin-top: 2.25rem; }
.prose ul { padding-left: 1.25rem; margin-top: 0.5rem; }
.prose li { margin-bottom: 0.45rem; }
.signup { display: grid; gap: 0.6rem; max-width: 26rem; margin-top: 1rem; }
.signup label { font-weight: 700; }
.signup input { padding: 0.6rem 0.9rem; border: 2px solid var(--ink-soft); border-radius: 10px; background: #ffffff; font: inherit; }
.signup button { justify-self: start; }

/* ---- Footer ------------------------------------------------ */
.site-footer { background: var(--plum-deep); color: #ffffff; margin-top: 2rem; padding-block: 2.5rem 3rem; }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer h2 { font-family: var(--body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--marigold); margin-bottom: 0.5rem; }
.site-footer p { color: #ffffff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: #ffffff; display: inline-block; padding-block: 0.3rem; }
.site-footer a:hover { color: var(--marigold); }
.site-footer .fine { color: #e6dce5; margin-top: 2rem; }
.site-footer :focus-visible { outline-color: var(--marigold); }

@media (max-width: 30rem) {
  .glossary div { grid-template-columns: 1fr; gap: 0.1rem; }
}
@media (max-width: 47rem) {
  .tape { position: static; }
}
@media print {
  .site-header, .site-footer, .skip-link, .actions, .signup { display: none; }
  body { background: #ffffff; }
}
@media (forced-colors: active) {
  .path a, .folder, .fact, .compare-col, .glossary, .ask li, .tools li, .tape, .btn, .tab { border: 1px solid; }
}