/* =========================================================================
   Sylvan Assurance — corporate site styles
   Conservative trustworthy palette: deep navy, off-white, sage-green accent.
   Serif headings (Source Serif 4), Inter body — self-hosted, no third-party font requests.
   ========================================================================= */

/* Self-hosted fonts — served from our own origin (privacy-first: no third-party font
   requests). woff2 files live in fonts/ (see the fetch command in the deploy notes).
   font-display:swap + system fallbacks mean text never renders invisible and degrades
   cleanly to serif/sans if the files aren't present yet. */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/source-serif-4-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/source-serif-4-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-latin-600-normal.woff2') format('woff2');}

:root {
  --navy:        #1F3864;
  --navy-deep:   #13284A;
  --sage:        #4A7C59;
  --sage-dark:   #365C42;
  --cream:       #FAF7F2;
  --paper:       #FFFFFF;
  --ink:         #1F2937;
  --ink-soft:    #374151;
  --muted:       #6B7280;
  --rule:        #E4DDD2;
  --rule-soft:   #F0EBE2;
  --shadow-sm:   0 1px 2px rgba(19, 40, 74, 0.06);
  --shadow-md:   0 4px 12px rgba(19, 40, 74, 0.08);
  --shadow-lg:   0 12px 32px rgba(19, 40, 74, 0.12);
  --sage-soft:   rgba(74, 124, 89, 0.08);
  --radius:      10px;
  --maxw:        1100px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* strong/b use the real shipped 600 weight instead of a browser-synthesized fake bold
   (Inter only ships 400/500/600 — see the @font-face block above; 2026-07-06) */
strong, b { font-weight: 600; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Skip-link for keyboard users -------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: white; padding: 10px 16px;
  border-radius: 0 0 var(--radius) 0; z-index: 100;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Typography -------------------------------------------------------------- */
h1, h2, h3, h4, .serif {
  font-family: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  color: var(--navy-deep);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
h1 { font-size: clamp(2.15rem, 4.4vw, 3.4rem); margin-bottom: 16px; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.55rem, 2.6vw, 2.1rem); margin-bottom: 14px; }
h3 { font-size: 1.2rem; margin-bottom: 10px; }
/* Card-strip label heading (2026-07-17, architect review item 8) — semantic <h3> used for
   small in-card labels that previously sat as <h4> directly under a top-level heading with
   no intervening h2/h3 (index.html's trust strip under h2#why-h; the guides/free
   "how it fits together" path-strip under h1, no h2 at all). Baseline here is a plain
   default-h4-sized look; .trust-item and .path-tile below each supply their own exact
   visual treatment via a more specific selector, unchanged from the old <h4> styling. */
.strip-h { font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
p  { margin-bottom: 16px; }
p.lede { font-size: 1.2rem; line-height: 1.55; color: var(--ink-soft); }
a  { color: var(--sage-dark); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--navy); }
small { color: var(--muted); font-size: 0.88rem; }

ul, ol { padding-left: 1.25rem; margin-bottom: 16px; }
li { margin-bottom: 6px; }

/* Layout ------------------------------------------------------------------ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* Header / nav ------------------------------------------------------------ */
.site-header {
  background: var(--navy);
  border-bottom: 1px solid var(--navy-deep);
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; padding-bottom: 16px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
}
.brand-mark {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.15) url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M11%2020A7%207%200%200%201%209.8%206.1C15.5%205%2017%204.48%2019%202c1%202%202%204.18%202%208%200%205.5-4.78%2010-10%2010Z%27%2F%3E%3Cpath%20d%3D%27M2%2021c0-3%201.85-5.36%205.08-6%27%2F%3E%3C%2Fsvg%3E") center / 20px no-repeat;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0;
}
.brand-name {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600; font-size: 1.15rem;
  color: white; letter-spacing: -0.005em;
}
.brand-name small {
  display: block; font-size: 0.7rem; color: rgba(255,255,255,0.6);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px;
}
.site-nav { display: flex; gap: 22px; align-items: center; }
.site-nav a {
  text-decoration: none; color: rgba(255,255,255,0.82);
  font-size: 0.95rem; font-weight: 500;
}
.site-nav a:hover { color: white; }
.site-nav a.cta {
  background: var(--sage); color: white;
  padding: 9px 18px; border-radius: var(--radius);
  font-weight: 600;
}
.site-nav a.cta:hover { background: var(--sage-dark); color: white; }
.site-nav a.free-accent { color: #9ee6be; font-weight: 600; }
.site-nav a.free-accent:hover { color: white; }
@media (max-width: 720px) {
  /* Single-row mobile nav (2026-07-17, architect review item 3): row 2 no longer wraps
     link-by-link (2026-07-05 fix) — instead all five links + the Contact pill share one
     non-wrapping row, shrunk and tightened to fit a 390px viewport, with overflow-x:auto
     as a safety net if a label is still too long. Header vertical padding is trimmed on
     mobile too, so brand row + nav row land at roughly the same total height the reduced
     scroll-margin-top below assumes. Zero-JS, single-file fix. */
  .site-header .wrap { flex-wrap: wrap; row-gap: 8px; padding-top: 12px; padding-bottom: 12px; }
  .site-nav {
    gap: 6px 12px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    width: 100%; justify-content: flex-start;
  }
  .site-nav a { font-size: 0.88rem; white-space: nowrap; }
  .site-nav a:not(.cta):not(.free-accent) { display: inline-block; padding: 8px 4px; }
  .site-nav a.cta { flex-shrink: 0; padding: 8px 14px; }
  .brand-name small { display: none; }
}

/* In-page anchor targets (e.g. the closing CTA -> #doorway-h) must clear the
   sticky header, which wraps to a taller two-row block on mobile (2026-07-06). */
main [id] { scroll-margin-top: 90px; }
@media (max-width: 720px) { main [id] { scroll-margin-top: 110px; } } /* matches the shorter single-row mobile header (item 3 above, 2026-07-17) */

/* Hero -------------------------------------------------------------------- */
.hero {
  padding: 84px 0 64px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
}
.hero h1 { max-width: 760px; }
.hero p.lede { max-width: 680px; }
.hero-eyebrow {
  display: inline-block;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sage-dark);
  margin-bottom: 18px;
}
.hero-ctas { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Situation card (used by the Doorway grid) -------------------------------- */
.situation-card {
  display: flex; flex-direction: column; gap: 5px;
  padding: 18px 22px;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.situation-card:hover {
  border-color: var(--sage);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.situation-card strong {
  display: block;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1rem; font-weight: 600; color: var(--navy-deep);
}
.situation-card span { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.4; }
.situation-count { font-size: 0.8rem !important; color: var(--sage-dark); font-weight: 600; margin-top: 6px; }

/* The Doorway — guided "find your starting point" router (own section, directly
   after the hero as of 2026-07-06; was nested in #products before) ------------ */
/* Doorway and the next section ("Prefer to read first?") are the one place on the
   page where two plain, same-background sections sit back to back with no .alt
   border/bg change to break up the generic 64px+64px section padding — every other
   seam on the page alternates or has its own bespoke background, so only here did
   the stock spacing read as a large dead gap (founder-reported, 2026-07-07).
   Zeroing this section's own bottom padding leaves the gap entirely to the next
   section's 64px top padding — a single 64px gap instead of two stacked ones —
   without touching the shared "section" rule or the neighbour, so no other
   spacing on the page is affected. (First pass trimmed to 28px/92px total;
   founder asked to bring it down further to a plain 64px, 2026-07-07.) */
.doorway-section { padding-bottom: 0; }
.doorway {
  padding: 26px 26px 28px;
  background: var(--sage-soft);
  border: 1px solid rgba(74, 124, 89, 0.25);
  border-radius: var(--radius);
}
.doorway-h { margin-bottom: 4px; }
.doorway-lede { font-size: 0.95rem; color: var(--ink-soft); max-width: 640px; margin-bottom: 18px; }
.doorway-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
}
/* Guided-quiz enhancement (progressive; built from the cards by doorway.js, degrades to the grid) */
/* [hidden] must win over the display:grid/flex below, or JS-hidden elements stay visible */
.doorway-grid[hidden], .doorway-options[hidden] { display: none !important; }
.doorway-q { font-weight: 600; color: var(--navy-deep); margin: 2px 0 12px; font-size: 1.02rem; }
.doorway-options { display: flex; flex-wrap: wrap; gap: 10px; }
.doorway-opt {
  font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer;
  background: var(--paper); border: 1.5px solid var(--rule); border-radius: var(--radius);
  padding: 11px 16px; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.doorway-opt:hover, .doorway-opt:focus-visible { border-color: var(--sage); box-shadow: var(--shadow-md); outline: none; }
.doorway-answer {
  background: var(--paper); border: 1.5px solid var(--sage);
  border-radius: var(--radius); padding: 18px 20px;
}
.doorway-answer strong {
  display: block; font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.05rem; color: var(--navy-deep); margin-bottom: 4px;
}
.doorway-answer p { font-size: 0.93rem; color: var(--ink-soft); margin-bottom: 14px; }
.doorway-again {
  margin-left: 14px; background: none; border: none; color: var(--sage-dark);
  font: inherit; font-size: 0.9rem; cursor: pointer; text-decoration: underline;
}
.doorway-seeall {
  display: block; margin-top: 14px; background: none; border: none;
  color: var(--sage-dark); font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
}
.doorway-seeall:hover { text-decoration: underline; }

/* FAQ <details> component — boxed cards, site-wide (2026-07-17, architect review item 9).
   Was previously two different treatments: faq.html styled its own boxed cards in a
   page-local <style>, while this section used bare rule-separated rows (round-5
   "card-wall" decision, 2026-07-06 — reserving the boxed look for the toolkit catalog
   so "card" meant one thing on the page). Two different FAQ looks on the same site read
   as inconsistent rather than deliberate, so both now share one boxed component. Scoped
   to .faq-section (faq.html) and .home-faq (this section) — the only two places
   <details> appears on the site — so it can never reach an unrelated <details> element. */
.faq-section details, .home-faq details {
  border: 1px solid var(--rule); border-radius: 6px; padding: 14px 18px;
  margin: 12px 0; background: var(--cream);
}
.faq-section details[open], .home-faq details[open] { background: var(--paper); }
.faq-section summary, .home-faq summary { font-weight: 600; cursor: pointer; color: var(--navy); font-size: 1rem; }
.faq-section summary:hover, .home-faq summary:hover { color: var(--sage-dark); }
.faq-section summary::marker, .home-faq summary::marker { color: var(--sage-dark); }
.faq-section details > p, .faq-section details > ul, .faq-section details > ol,
.home-faq details > p, .home-faq details > ul, .home-faq details > ol { margin-top: 12px; font-size: 0.96rem; line-height: 1.6; }
.faq-section details > ul, .faq-section details > ol,
.home-faq details > ul, .home-faq details > ol { margin-left: 22px; }
.faq-section details > p:last-child, .home-faq details > p:last-child { margin-bottom: 0; }

.home-faq { max-width: 760px; }
.home-faq .faq-more { margin-top: 20px; font-weight: 600; }
.home-faq .faq-more a { color: var(--sage-dark); text-decoration: none; }
.home-faq .faq-more a:hover { text-decoration: underline; }

/* Sticky in-page sub-nav for long pages (sits just under the main sticky header) --- */
.subnav {
  position: sticky; top: 63px; z-index: 40;
  display: flex; gap: 22px; flex-wrap: wrap;
  padding: 11px 0; margin: 4px 0 8px;
  background: rgba(250, 247, 242, 0.94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
  font-size: 0.9rem;
}
.subnav a { font-weight: 600; color: var(--navy-deep); text-decoration: none; white-space: nowrap; }
.subnav a:hover { color: var(--sage-dark); }
.legal-doc h2[id], .legal-doc [id] { scroll-margin-top: 118px; }
@media (max-width: 720px) { .subnav { gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; position: static; } } /* static ≤720px: the wrapped 3-row header would otherwise bury a sticky subnav (2026-07-07 panel fix) */

/* "A taste of how we write" — a real passage, shown, not just promised (2026-07-05) ---- */
.writing-sample { max-width: 720px; }
.writing-sample blockquote {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem); line-height: 1.5; color: var(--navy-deep);
  border-left: 3px solid var(--sage); padding: 2px 0 2px 22px; margin: 0 0 14px;
}
.writing-sample figcaption { font-size: 0.92rem; color: var(--muted); }
.writing-sample figcaption a { color: var(--sage-dark); text-decoration: none; font-weight: 600; }
.writing-sample figcaption a:hover { text-decoration: underline; }

/* Plain-link row (not cards on purpose — round-2 recommendation #13, 2026-07-06): reserves the
   bordered-card treatment for the actual toolkit catalog rather than every section on the page. */
.read-first-links { margin-top: 22px; font-size: 0.98rem; }
.read-first-links a { color: var(--navy-deep); font-weight: 600; text-decoration: none; }
.read-first-links a:hover { color: var(--sage-dark); text-decoration: underline; }
.read-first-sep { color: var(--muted); margin: 0 14px; }

.btn {
  display: inline-block;
  padding: 13px 26px;
  font-size: 1rem; font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform 0.05s ease, box-shadow 0.15s ease, background 0.15s ease;
  border: 1.5px solid transparent;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-primary { background: var(--navy); color: white; }
.btn-primary:hover { background: var(--navy-deep); color: white; }
.btn-secondary { background: var(--paper); color: var(--navy); border-color: var(--rule); }
.btn-secondary:hover { background: var(--rule-soft); color: var(--navy-deep); }
.btn-sage { background: var(--sage); color: white; }
.btn-sage:hover { background: var(--sage-dark); color: white; }

/* Keyboard focus — visible, on-brand, accessible ------------------------- */
a:focus-visible, .btn:focus-visible, .site-nav a:focus-visible,
.product-card:focus-visible, .situation-card:focus-visible, .tier-card .btn:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Sections ---------------------------------------------------------------- */
section { padding: 64px 0; }
section.alt { background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
section.tight { padding: 36px 0; }

.section-eyebrow {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sage-dark);
  margin-bottom: 12px;
}
.section-intro { max-width: 720px; margin-bottom: 36px; }

/* Closing CTA band (2026-07-06) ------------------------------------------- */
.closing-cta .wrap { text-align: center; }
.closing-cta h2 { max-width: 640px; margin: 0 auto 20px; }
.closing-cta-alt { margin-top: 14px; }
.closing-cta-alt a { color: var(--ink-soft); font-size: 0.9rem; text-decoration: underline; }
.closing-cta-alt a:hover { color: var(--sage-dark); }

/* Product cards (home page) ---------------------------------------------- */
.product-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
/* A lone card in a .product-grid (e.g. toolkits.html's single-card "Earn customer trust"
   group) otherwise sits in one narrow auto-fill column instead of reading as a deliberate
   one-item group (2026-07-17, architect review item 6). */
.product-grid > *:only-child { grid-column: 1 / -1; max-width: 720px; }
/* Situation Index — "name the eleven" field-guide contents page (round 5, 2026-07-06) -------- */
.situation-index-lede { font-weight: 600; color: var(--navy-deep); margin: 0 0 12px; font-size: 1.02rem; }
.situation-index {
  list-style: none; margin: 0 0 40px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px;
  border-top: 1px solid var(--rule);
}
.situation-index li { border-bottom: 1px solid var(--rule); }
.situation-index a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 0; text-decoration: none; color: var(--ink);
}
.situation-index a:hover .si-text { color: var(--sage-dark); text-decoration: underline; }
.si-num {
  flex: 0 0 auto; font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.95rem; font-weight: 600; color: var(--sage-dark);
  min-width: 1.6em;
}
.si-text { font-size: 0.97rem; color: var(--ink); transition: color 0.15s; }
@media (max-width: 720px) { .situation-index { grid-template-columns: 1fr; } }

/* Toolkit grouping (home page) — tiers + sub-group labels -------------------- */
.toolkit-group + .toolkit-group { margin-top: 44px; }
.tier-head {
  display: block; font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.4rem; font-weight: 600; color: var(--navy-deep);
  letter-spacing: -0.01em; margin: 0 0 20px;
}
.kit-columns {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);   /* subhead row + two card rows */
  column-gap: 24px; row-gap: 22px;
}
.kit-col {                                /* each column shares the parent row lines… */
  display: grid; grid-row: 1 / -1;
  grid-template-rows: subgrid;            /* …so cards align across columns + match height */
}
.kit-subhead {
  display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--sage-dark); margin: 0;
}
@media (max-width: 820px) {
  .kit-columns { display: block; }
  .kit-col { display: flex; flex-direction: column; gap: 22px; }
  .kit-col + .kit-col { margin-top: 32px; }
}

/* Resource system — guide cards + Learn→Score→Act path (guides + /free/) ----- */
.card-links { margin-top: auto; padding-top: 4px; font-size: 0.92rem; }
.card-links a { color: var(--sage-dark); text-decoration: none; font-weight: 600; }
.card-links a.pdf { color: var(--muted); font-weight: 500; }
.card-pairs { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule-soft); font-size: 0.86rem; color: var(--muted); }
.card-pairs a { color: var(--sage-dark); text-decoration: none; }
.card-pairs a:hover { text-decoration: underline; }
.path-strip {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch; gap: 12px; margin: 30px 0 4px;
}
.path-tile { display: block; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.path-tile.score { border-color: var(--sage); background: var(--sage-soft); }
a.path-tile:hover { border-color: var(--sage); box-shadow: var(--shadow-lg); color: inherit; }
.path-step { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.path-tile.score .path-step { color: var(--sage-dark); }
.path-tile .strip-h { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.05rem; font-weight: 600; color: var(--navy-deep); margin-bottom: 4px; }
.path-tile p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.path-arrow { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.3rem; }
@media (max-width: 760px) {
  .path-strip { grid-template-columns: 1fr; }
  .path-arrow { transform: rotate(90deg); padding: 2px 0; }
}

/* Per-app guide directory (guides page) — one card per product, listing all its guides */
.guide-apps {
  display: grid; gap: 24px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.guide-app-card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 24px 26px; display: flex; flex-direction: column;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.guide-app-card:hover { box-shadow: var(--shadow-lg); border-color: var(--sage); }
.guide-app-card.wide { grid-column: 1 / -1; }
.guide-app-top { padding-bottom: 15px; margin-bottom: 2px; border-bottom: 1px solid var(--rule); }
.guide-app-top h2 {
  font-size: 1.2rem; font-weight: 600; color: var(--navy-deep);
  letter-spacing: -0.01em; margin: 9px 0 10px;
}
.guide-app-actions { font-size: 0.9rem; line-height: 1.5; }
.guide-app-actions a { color: var(--sage-dark); text-decoration: none; font-weight: 600; }
.guide-app-actions a:hover { text-decoration: underline; }
.guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.guide-list li {
  padding: 15px 0; border-top: 1px solid var(--rule-soft);
  display: flex; flex-direction: column;
}
.guide-list li:first-child { border-top: 0; padding-top: 14px; }
.guide-list h3 { font-size: 1.03rem; font-weight: 600; margin: 0 0 5px; }
.guide-list p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.55; margin: 0 0 10px; }
.guide-list-links { margin-top: auto; font-size: 0.9rem; }
.guide-list-links a { color: var(--sage-dark); text-decoration: none; font-weight: 600; }
.guide-list-links a.pdf { color: var(--muted); font-weight: 500; }
.guide-app-card.wide .guide-list { grid-template-columns: repeat(3, 1fr); column-gap: 34px; }
.guide-app-card.wide .guide-list li { border-top: 0; padding-top: 0; }
@media (max-width: 900px) {
  .guide-apps { grid-template-columns: 1fr; }
  .guide-app-card.wide .guide-list { grid-template-columns: 1fr; }
  .guide-app-card.wide .guide-list li { border-top: 1px solid var(--rule-soft); padding-top: 15px; }
  .guide-app-card.wide .guide-list li:first-child { border-top: 0; padding-top: 14px; }
}

.product-card {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 28px;
  display: flex; flex-direction: column;
  transition: transform 0.1s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  text-decoration: none; color: inherit;
}
.product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--sage);
}
.product-card .card-icon {
  width: 52px; height: 52px;
  flex-shrink: 0;
}
.product-card .card-title-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.product-card .card-title-row h3 {
  margin-bottom: 0;
}
.product-card h3 {
  margin-bottom: 6px;
}
.product-card .product-tagline {
  color: var(--muted); font-size: 0.92rem;
  margin-bottom: 18px; line-height: 1.5;
}
.product-card .product-summary {
  font-size: 0.97rem; line-height: 1.6; margin-bottom: 18px;
}
.product-card .product-tier-line {
  font-size: 0.85rem; color: var(--muted);
  border-top: 1px solid var(--rule); padding-top: 14px;
  margin-top: auto;
}
.product-card .product-tier-line strong { color: var(--ink); font-weight: 600; }
.product-card .product-arrow {
  color: var(--sage-dark); font-weight: 600; margin-top: auto; padding-top: 16px;
}
/* Clamp card descriptions to 3 lines on mobile (2026-07-17, architect review item 2) — a
   390px card grid otherwise runs long descriptions to 6-8 lines, making cards wildly
   uneven heights on the same screen where there's least room to scroll past them.
   .product-summary is the one shared description class across every .product-card use
   (homepage catalog, toolkits.html, and the book/product cross-sell cards), so this
   applies everywhere that class appears by design — tier cards use a different markup
   (.tier-card ul li) and are unaffected. */
@media (max-width: 720px) {
  .product-card .product-summary {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Pill / badge ------------------------------------------------------------ */
.pill {
  display: inline-block;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  background: var(--rule-soft); color: var(--ink-soft);
  padding: 3px 10px; border-radius: 999px;
  margin-right: 6px;
}
.pill.sage  { background: rgba(74, 124, 89, 0.12); color: var(--sage-dark); }
.pill.navy  { background: rgba(31, 56, 100, 0.10); color: var(--navy-deep); }

/* Two-column hero: company lead + flagship card (home page) --------------- */
.hero-grid {
  display: grid; gap: 44px;
  grid-template-columns: 1.4fr 1fr; align-items: start;
}
.hero-lead h1 { max-width: none; }
.hero-lead p.lede { max-width: 560px; }
.hero-flagship {
  align-self: center;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule); border-top: 4px solid var(--sage);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-md);
}
.hero-flagship h2 { font-size: 1.4rem; margin-bottom: 10px; }
.hero-flagship .btn { display: block; width: 100%; text-align: center; }
.flagship-eyebrow {
  display: inline-block; font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage-dark);
  margin-bottom: 12px;
}
.flagship-lede { font-size: 0.97rem; color: var(--ink-soft); margin-bottom: 18px; }
.flagship-facts { margin-bottom: 22px; }
.flagship-facts > div {
  display: flex; gap: 12px; padding: 9px 0;
  border-top: 1px solid var(--rule-soft);
}
.flagship-facts dt {
  flex: 0 0 62px; font-size: 0.74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
  padding-top: 2px;
}
.flagship-facts dd { font-size: 0.92rem; color: var(--ink-soft); }

/* Interactive hero flagship — JS-enhanced live Q1 (2026-07-06, round-3 rec #5); mirrors the
   Doorway's own quiz interaction pattern (.doorway-opt/.doorway-answer) for a consistent feel. */
.flagship-quiz-eyebrow {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sage-dark); margin-bottom: 10px;
}
.flagship-quiz-q { font-weight: 600; color: var(--navy-deep); font-size: 1.02rem; margin-bottom: 8px; }
.flagship-quiz-context { font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 16px; line-height: 1.5; }
.flagship-quiz-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.quiz-opt {
  font: inherit; font-size: 0.92rem; text-align: left; cursor: pointer;
  background: var(--paper); border: 1.5px solid var(--rule); border-radius: var(--radius);
  padding: 10px 14px; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.quiz-opt:hover, .quiz-opt:focus-visible { border-color: var(--sage); box-shadow: var(--shadow-md); outline: none; }
.flagship-quiz-answer p { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 14px; }
.flagship-quiz-answer .btn { margin-bottom: 10px; }
.flagship-quiz-again {
  display: block; background: none; border: none; font: inherit; font-size: 0.86rem;
  color: var(--sage-dark); cursor: pointer; text-decoration: underline; padding: 0; margin-bottom: 12px;
}
.flagship-quiz-note { font-size: 0.8rem; color: var(--muted); margin-bottom: 0 !important; }
.product-card.flagship {
  border-color: var(--sage); border-top: 4px solid var(--sage);
  background: linear-gradient(180deg, var(--sage-soft) 0%, var(--paper) 55%);
  box-shadow: var(--shadow-md);
}
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-lead p.lede { max-width: none; }
}

/* Tier table on product pages -------------------------------------------- */
.tier-table {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.tier-card {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 24px;
  display: flex; flex-direction: column;
}
.tier-card.featured { border-color: var(--sage); border-width: 2px; }
.tier-card .tier-name {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.2rem; font-weight: 600; color: var(--navy-deep);
  margin-bottom: 4px;
}
.tier-card .tier-price {
  font-size: 2rem; font-weight: 700; color: var(--navy); margin-bottom: 4px;
  font-family: "Source Serif 4", Georgia, serif;
}
.tier-card .tier-price small {
  font-size: 0.78rem; color: var(--muted); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
  display: block; margin-top: 2px;
}
.tier-card .tier-audience {
  color: var(--muted); font-size: 0.88rem;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule); padding-bottom: 14px;
}
.tier-card ul { list-style: none; padding: 0; margin-bottom: 22px; font-size: 0.93rem; }
.tier-card ul li {
  padding-left: 22px; position: relative; margin-bottom: 8px; line-height: 1.5;
}
.tier-card ul li::before {
  content: "✓"; color: var(--sage); font-weight: 700;
  position: absolute; left: 0; top: 0;
}
.tier-card .btn { margin-top: auto; text-align: center; }

/* Two-column CTA section ------------------------------------------------- */
.dual-cta {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  margin-top: 32px;
}
.dual-cta .cta-card {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 28px;
}
.dual-cta .cta-card h3 { font-size: 1.05rem; }
.dual-cta .cta-card p { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 18px; }

/* Privacy banner --------------------------------------------------------- */
.privacy-banner {
  background: var(--navy-deep); color: white;
  padding: 36px 0;
}
.privacy-banner .wrap {
  display: flex; align-items: center; gap: 22px;
  flex-wrap: wrap;
}
.privacy-banner h3 { color: white; margin-bottom: 6px; }
.privacy-banner p { color: rgba(255,255,255,0.85); margin-bottom: 0; max-width: 640px; }
.privacy-banner .privacy-icon {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  background: var(--sage) url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203%2019%206v5c0%204.4-3%207.4-7%209-4-1.6-7-4.6-7-9V6l7-3z%27%2F%3E%3Cpath%20d%3D%27M9%2012l2%202%204-4%27%2F%3E%3C%2Fsvg%3E") center / 26px no-repeat;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0;
}

/* Trust strip / why bullets ---------------------------------------------- */
.trust-strip {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.trust-item .strip-h {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 0.92rem; font-weight: 600; color: var(--navy-deep);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.trust-item p { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 0; }

/* Footer ----------------------------------------------------------------- */
.site-footer {
  background: var(--navy-deep); color: rgba(255,255,255,0.8);
  padding: 48px 0 32px; margin-top: 0;
}
.site-footer .wrap {
  display: grid; gap: 28px;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
@media (max-width: 720px) {
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
}
.site-footer h5 {
  color: white; font-family: "Source Serif 4", Georgia, serif;
  font-size: 1rem; font-weight: 600; margin-bottom: 14px;
}
.site-footer a {
  color: rgba(255,255,255,0.78); text-decoration: none;
  font-size: 0.92rem; display: block; padding: 6px 0;
}
.site-footer a:hover { color: white; text-decoration: underline; }
.footer-updates {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 22px; font-size: 0.9rem;
}
.footer-updates label { color: rgba(255,255,255,0.7); display: block; margin-bottom: 10px; }
.footer-updates-row { display: flex; gap: 10px; flex-wrap: wrap; max-width: 460px; }
.footer-updates input[type="email"] {
  flex: 1; min-width: 220px; padding: 9px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08);
  color: white; font-size: 0.9rem;
}
.footer-updates input[type="email"]::placeholder { color: rgba(255,255,255,0.45); }
.footer-updates button {
  padding: 9px 18px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--sage); color: white; font-size: 0.9rem; font-weight: 600;
}
.footer-updates button:hover { background: var(--sage-dark); }
.site-footer .brand-mark { background: rgba(255,255,255,0.12) url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M11%2020A7%207%200%200%201%209.8%206.1C15.5%205%2017%204.48%2019%202c1%202%202%204.18%202%208%200%205.5-4.78%2010-10%2010Z%27%2F%3E%3Cpath%20d%3D%27M2%2021c0-3%201.85-5.36%205.08-6%27%2F%3E%3C%2Fsvg%3E") center / 20px no-repeat; }
.site-footer .brand-name { color: white; }
.site-footer .brand-name small { color: rgba(255,255,255,0.6); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 36px; padding-top: 20px;
  font-size: 0.82rem; color: rgba(255,255,255,0.55);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}

/* Print-style adjustments for embedded readability ---------------------- */
@media (max-width: 480px) {
  body { font-size: 16px; }
  .hero { padding: 56px 0 44px; }
  section { padding: 48px 0; }
  .btn { width: 100%; text-align: center; }
  .site-footer .wrap { grid-template-columns: 1fr; } /* the 2-col mobile footer (720px breakpoint) still wraps badly below 480px (item 5) */
}

/* Per-product accent (used on product pages) ---------------------------- */
.page-gdpr  { --accent: #4F46E5; --accent-soft: rgba(79, 70, 229, 0.10); }
.page-smb   { --accent: #E85D2F; --accent-soft: rgba(232, 93, 47, 0.10); }
.page-psirt { --accent: #0D9488; --accent-soft: rgba(13, 148, 136, 0.10); }
.page-f4h   { --accent: #B45309; --accent-soft: rgba(180, 83, 9, 0.08); }
.page-gbr   { --accent: #9F1239; --accent-soft: rgba(159, 18, 57, 0.08); }
.page-tr   { --accent: #B07A1E; --accent-soft: rgba(176, 122, 30, 0.08); }
.page-cloud { --accent: #0369A1; --accent-soft: rgba(3, 105, 161, 0.10); }
.page-aisec { --accent: #6D28D9; --accent-soft: rgba(109, 40, 217, 0.10); }
.page-vm    { --accent: #A0522D; --accent-soft: rgba(160, 82, 45, 0.10); }
.page-soc2  { --accent: #1E5FAE; --accent-soft: rgba(30, 95, 174, 0.10); }
.page-cyberins { --accent: #8D2846; --accent-soft: rgba(141, 40, 70, 0.08); } /* ratified by Steward seat, whole-site panel 2026-07-17 */

.page-gdpr .hero-eyebrow, .page-smb .hero-eyebrow, .page-psirt .hero-eyebrow,
.page-f4h .hero-eyebrow, .page-gbr .hero-eyebrow, .page-tr .hero-eyebrow,
.page-cloud .hero-eyebrow, .page-aisec .hero-eyebrow, .page-vm .hero-eyebrow, .page-soc2 .hero-eyebrow, .page-cyberins .hero-eyebrow { color: var(--accent); }
.page-gdpr .tier-card.featured, .page-smb .tier-card.featured, .page-psirt .tier-card.featured,
.page-f4h .tier-card.featured, .page-gbr .tier-card.featured, .page-tr .tier-card.featured,
.page-cloud .tier-card.featured, .page-aisec .tier-card.featured, .page-vm .tier-card.featured, .page-soc2 .tier-card.featured, .page-cyberins .tier-card.featured { border-color: var(--accent); }
.page-gdpr .tier-card ul li::before, .page-smb .tier-card ul li::before, .page-psirt .tier-card ul li::before,
.page-f4h .tier-card ul li::before, .page-gbr .tier-card ul li::before, .page-tr .tier-card ul li::before,
.page-cloud .tier-card ul li::before, .page-aisec .tier-card ul li::before, .page-vm .tier-card ul li::before, .page-soc2 .tier-card ul li::before, .page-cyberins .tier-card ul li::before { color: var(--accent); }

/* Homepage card accents — color-keys the 11-card catalog grid to match the product pages and book
   covers above (round-2 recommendation #11, 2026-07-06; emitted by build-cards.py's ACCENT map).
   Hex values mirror .page-* above 1:1 — keep both in sync if either changes. The flagship card is
   excluded on purpose (it keeps its sage flagship border, a different signal — "start here" vs.
   "this is the X toolkit"). */
.product-card[class*="accent-"] { border-top: 3px solid var(--accent); }
.product-card[class*="accent-"] .pill.navy { background: var(--accent-soft); color: var(--accent); }
.accent-gdpr     { --accent: #4F46E5; --accent-soft: rgba(79, 70, 229, 0.10); }
.accent-smb      { --accent: #E85D2F; --accent-soft: rgba(232, 93, 47, 0.10); }
.accent-psirt    { --accent: #0D9488; --accent-soft: rgba(13, 148, 136, 0.10); }
.accent-f4h      { --accent: #B45309; --accent-soft: rgba(180, 83, 9, 0.08); }
.accent-gbr      { --accent: #9F1239; --accent-soft: rgba(159, 18, 57, 0.08); }
.accent-tr       { --accent: #B07A1E; --accent-soft: rgba(176, 122, 30, 0.08); }
.accent-cloud    { --accent: #0369A1; --accent-soft: rgba(3, 105, 161, 0.10); }
.accent-aisec    { --accent: #6D28D9; --accent-soft: rgba(109, 40, 217, 0.10); }
.accent-vm       { --accent: #A0522D; --accent-soft: rgba(160, 82, 45, 0.10); }
.accent-soc2     { --accent: #1E5FAE; --accent-soft: rgba(30, 95, 174, 0.10); }
.accent-cyberins { --accent: #8D2846; --accent-soft: rgba(141, 40, 70, 0.08); }


/* Sylvan Press book covers — per-franchise accent (--bk), consumed by generated book-*.html + books.html.
   (The parallel .book-cover.c-* / .book-cover-hero.c-* scheme was removed 2026-07-05 — orphaned; no page used it.) */
.bk-ai-security{--bk:#6D28D9}
.bk-cloud-security{--bk:#0369A1}
.bk-first-4-hours{--bk:#B45309}
.bk-gdpr-compliance{--bk:#4F46E5}
.bk-psirt{--bk:#0D9488}
.bk-vulnerability-management{--bk:#A0522D}
.bk-smb-security-playbook{--bk:#E85D2F}
.bk-security-questionnaires-field-guide{--bk:#B07A1E}
.bk-soc2-plain-english{--bk:#166534}
.bk-cyber-insurance-plain-english{--bk:#8D2846} /* matches the provisional .page-cyberins accent; hue ratification is Steward's call (2026-07-06) */

/* Data tables — mobile-safe by default (2026-07-07 panel fix). Bare <table>s in page
   bodies (toolkits, security, privacy, about, compare pages, book details) overflowed
   390px viewports because no shared table rules existed; block display + auto overflow
   lets a wide table pan inside its own box instead of widening the whole page. */
@media (max-width: 720px) {
  table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
    /* Fade the right edge so a scrollable table visibly hints there's more to see
       (2026-07-17, architect review item 1). Gated behind this same ≤720px query so the
       desktop table (not scrollable, no clipped edge) never gets the fade. */
    -webkit-mask-image: linear-gradient(to right, black 92%, transparent);
    mask-image: linear-gradient(to right, black 92%, transparent);
  }
}

/* Swipe hint (2026-07-17, architect review item 1) — a small muted line placed
   immediately before a wide table (toolkits.html's all-tiers table; the book-details
   table in build-book-pages.py's template). Hidden above 720px, where the table isn't
   scrollable and the hint would be noise. */
.table-hint { display: none; }
@media (max-width: 720px) {
  .table-hint { display: block; font-size: 0.82rem; font-style: italic; color: var(--muted); margin: 0 0 8px; }
}

/* Article pull-quote (2026-07-07, Muse pass) — one per long post; serif display echo of .writing-sample */
.pullquote { margin: 30px 0; padding: 6px 0 6px 24px; border-left: 3px solid var(--sage); }
.pullquote p { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.35rem; line-height: 1.45; color: var(--navy-deep); margin: 0; }

/* Guides index — per-product accent on the guide cards (founder request 2026-07-07):
   accent top border + tinted topic pill, mirroring the homepage product-card treatment. */
.guide-app-card[class*="accent-"] { border-top: 4px solid var(--accent); }
.guide-app-card[class*="accent-"]:hover { border-color: var(--accent); }
.guide-app-card[class*="accent-"] .pill.navy { background: var(--accent-soft); color: var(--accent); }