/* ───── Self-hosted fonts (OFL placeholder faces; brand faces pending D12) ───── */
@font-face{ font-family:'Fraunces'; src:url('../fonts/fraunces.v1.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap }
@font-face{ font-family:'Fraunces'; src:url('../fonts/fraunces-italic.v1.woff2') format('woff2'); font-weight:100 900; font-style:italic; font-display:swap }
@font-face{ font-family:'JetBrains Mono'; src:url('../fonts/jetbrains-mono.v1.woff2') format('woff2'); font-weight:100 800; font-style:normal; font-display:swap }
@font-face{ font-family:'Manrope'; src:url('../fonts/manrope.v1.woff2') format('woff2'); font-weight:200 800; font-style:normal; font-display:swap }

/* ─────────────────────────────────────────────
   Signify Impact — site.css
   The subscription property · light editorial theme.
   Same architecture as Hive, mirrored to the cream
   ground of Solution. One dark panel per page, max.
   ───────────────────────────────────────────── */

:root{
  --paper:        #fbfaf6;
  --paper-2:      #f5f2ea;
  --paper-3:      #ecebe3;
  --ink:          #0e1614;
  --ink-soft:     #3a4744;
  --ink-mute:     #5f6a67;   /* a11y: 4.27 -> 5.01 on paper-2 */
  --hair:         rgba(14, 22, 20, 0.10);
  --hair-2:       rgba(14, 22, 20, 0.18);

  --jade:         #0f4a40;   /* brand stroke */
  --jade-deep:    #0a3a32;
  --jade-soft:    rgba(15, 74, 64, 0.08);
  --jade-line:    rgba(15, 74, 64, 0.20);
  --mint:         #7ed4b3;   /* accent on dark panels only */

  --amber:        #9a4f1e;   /* a11y: 4.10 -> 5.35 on paper-2 */
  --amber-soft:   rgba(177, 96, 42, 0.08);

  --ink-panel:    #0e1714;   /* the one dark panel per page */

  --shadow-card:  0 18px 40px -28px rgba(14,22,20,.18), 0 5px 14px -8px rgba(14,22,20,.10);
  --shadow-pop:   0 22px 50px -28px rgba(14,22,20,.22), 0 8px 20px -10px rgba(14,22,20,.14);

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

  --sidebar-w:        64px;
  --sidebar-w-open:   220px;
  --topbar-h:         50px;
  --maxw:             1320px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  --side-bg:   #ffffff;
  --surface:   #ffffff;
  --foot-bg:   #f5f2ea;
  --on-jade:   #ffffff;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img,svg{display:block;max-width:100%}
::selection{background:var(--jade); color:var(--on-jade)}
:focus-visible{outline:2px solid var(--jade); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Typography */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--jade);
}
.eyebrow .dot{ width:4px; height:4px; border-radius:99px; background:var(--jade) }
.eyebrow .vol{ color:var(--amber) }

.serif{ font-family:var(--serif) }
.italic{ font-style:italic }
.mono{ font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; font-size:10.5px; color:var(--ink-mute) }
.brand-em{ font-style:italic; color:var(--jade); font-weight:500 }

h1,h2,h3,h4{ margin:0; color:var(--ink); font-family:var(--serif); letter-spacing:-.012em; font-weight:300 }
h1 em, h2 em, h3 em, h4 em{ font-style:italic; color:var(--jade); font-weight:300 }
h1{ font-size: clamp(40px, 5vw, 68px); line-height:.98; letter-spacing:-.018em }
h2{ font-size: 32px; line-height:1.05 }
h3{ font-size: 22px; line-height:1.18; font-weight:400 }
h3 em{ font-weight:400 }
h4{ font-size: 17px; line-height:1.25; font-weight:500 }
h4 em{ font-weight:500 }

p{ margin:0 0 14px; color:var(--ink-soft) }
p em{ font-style:italic; color:var(--jade); font-weight:500 }
.lede{ font-size:15px; color:var(--ink-soft); line-height:1.55; max-width:60ch }
.lede em{ font-style:italic; color:var(--jade); font-weight:500 }
.body-md{ font-size:14px; color:var(--ink-soft); line-height:1.6; max-width:62ch }
.body-md em{ font-style:italic; color:var(--jade); font-weight:500 }
.muted{ color:var(--ink-mute) }

/* Layout */
.stage{ padding-left:var(--sidebar-w); }
@media (max-width:720px){ .stage{ padding-left:0 } }
.wrap{ max-width: var(--maxw); margin: 0 auto; }
.section{ padding: 50px 44px; border-bottom:1px solid var(--hair); position:relative }
.section--lg{ padding: 64px 44px }
.section--cream{ background:var(--paper-2) }

.head{
  display:flex; align-items:end; justify-content:space-between; gap:20px;
  margin-bottom:24px; flex-wrap:wrap;
}
.head h2{ margin:0 }
.head .sub{ font-size:12.5px; color:var(--ink-soft); margin-top:5px; max-width:52ch }
.head .meta{
  display:flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute);
}
.head .meta a{ color:var(--jade); display:inline-flex; align-items:center; gap:6px }
.head .meta a:hover{ color:var(--jade-deep) }

/* Sidebar */
.side{
  position:fixed; top:0; left:0; bottom:0;
  width:var(--sidebar-w);
  background:var(--side-bg);
  border-right:1px solid var(--hair);
  z-index:60;
  display:flex; flex-direction:column;
  transition: width .26s ease;
  overflow:hidden;
}
.side:hover{ width:var(--sidebar-w-open); box-shadow: 14px 0 48px -36px rgba(0,0,0,.35) }

.side-brand{
  height:var(--topbar-h); display:flex; align-items:center; gap:10px;
  padding:0 18px; border-bottom:1px solid var(--hair);
  color:var(--jade); flex-shrink:0;
}
.side-brand .mark{ width:24px; height:24px; flex:0 0 auto; color:var(--jade)}
.side-brand .name{
  font-family:var(--serif); font-weight:400; font-size:15px; letter-spacing:.005em; color:var(--ink);
  white-space:nowrap; opacity:0; transform:translateX(-6px);
  transition:opacity .2s ease .04s, transform .2s ease .04s;
}
.side-brand .name em{ font-style:italic; color:var(--jade); font-weight:500 }
.side:hover .side-brand .name{ opacity:1; transform:none }

.side-nav{ flex:1; padding:10px 0; display:flex; flex-direction:column; gap:1px; overflow-y:auto; overflow-x:hidden; }
.side-link{
  height:38px; display:flex; align-items:center; gap:14px;
  padding:0 20px; color:var(--ink-soft); position:relative;
  transition:color .15s ease, background .15s ease;
  border-left:2px solid transparent;
  flex-shrink:0;
}
.side-link:hover{ color:var(--jade); background:var(--jade-soft) }
.side-link.is-active{ color:var(--jade); border-left-color:var(--jade); background:var(--jade-soft) }
.side-link svg{ width:18px; height:18px; flex:0 0 auto }
.side-link .lbl{
  font-size:12.5px; font-weight:500; letter-spacing:.005em; white-space:nowrap;
  opacity:0; transform:translateX(-6px);
  transition:opacity .2s ease .04s, transform .2s ease .04s;
}
.side:hover .side-link .lbl{ opacity:1; transform:none }
.side-link .ext{ margin-left:auto; font-size:10.5px; color:var(--ink-mute); opacity:0; transition:opacity .2s ease .06s; }
.side:hover .side-link .ext{ opacity:1 }

.side-foot{ padding:10px 14px 14px; border-top:1px solid var(--hair); display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
.side-cta{
  height:38px; border-radius:999px;
  background:var(--jade); color:var(--on-jade);
  display:flex; align-items:center; gap:10px; padding:0 11px;
  transition:background .15s ease;
}
.side-cta:hover{ background:var(--jade-deep) }
.side-cta svg{ width:16px; height:16px; flex:0 0 auto }
.side-cta .lbl{ font-size:12px; font-weight:600; letter-spacing:.01em; white-space:nowrap; opacity:0; transition:opacity .2s ease .06s; }
.side:hover .side-cta .lbl{ opacity:1 }

@media (max-width:720px){ .side{ display:none } }
@media (hover:none){ .side:hover{ width:var(--sidebar-w) } }

/* Mobile header */
.m-header{ display:none }
@media (max-width:720px){
  .m-header{
    display:flex; align-items:center; justify-content:space-between;
    height:54px; padding:0 16px; background:var(--side-bg);
    border-bottom:1px solid var(--hair); position:sticky; top:0; z-index:55;
  }
  .m-header .brand{ display:flex; align-items:center; gap:8px; color:var(--ink); }
  .m-header .brand svg{ width:22px; height:22px; color:var(--jade) }
  .m-header .brand .name{ font-family:var(--serif); font-size:15px }
  .m-header .brand .name em{ font-style:italic; color:var(--jade); font-weight:500 }
  .m-header .menu-btn{
    width:36px; height:36px; border-radius:999px;
    border:1px solid var(--hair-2); display:inline-flex; align-items:center; justify-content:center;
    color:var(--ink);
  }
  .m-header .menu-btn svg{ width:18px; height:18px }
}

.mobile-menu{
  position:fixed; inset:0; background:var(--side-bg); z-index:90;
  display:none; flex-direction:column; padding:18px 18px 28px;
  overflow-y:auto;
}
.mobile-menu.is-open{ display:flex }
.mobile-menu-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--hair); margin-bottom:14px; }
.mobile-menu-head .brand{ display:flex; align-items:center; gap:8px }
.mobile-menu-head .brand svg{ width:24px; height:24px; color:var(--jade) }
.mobile-menu-head .brand .name{ font-family:var(--serif); font-size:17px }
.mobile-menu-head .brand .name em{ font-style:italic; color:var(--jade); font-weight:500 }
.mobile-menu-body{ display:flex; flex-direction:column; gap:2px; flex:1 }
.mobile-menu-body a{
  padding:13px 4px; font-size:16px; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--hair);
}
.mobile-menu-body a .num{ font-family:var(--mono); font-size:11px; color:var(--ink-mute); letter-spacing:.14em }
.mobile-menu-foot{ margin-top:16px }
.mobile-menu-foot .pill{ width:100%; justify-content:center }

/* Topbar */
.topbar{
  height:var(--topbar-h);
  display:flex; align-items:center; gap:18px;
  padding:0 32px;
  border-bottom:1px solid var(--hair);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  position:sticky; top:0; z-index:30;
}
.topbar .crumb{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.topbar .crumb b{ color:var(--ink); font-weight:600 }
.topbar .sep{ width:1px; height:14px; background:var(--hair-2) }
.topbar .editorial{
  font-family:var(--serif); font-style:italic; font-weight:300; font-size:13.5px;
  color:var(--ink-soft); letter-spacing:.005em;
}
.topbar .right{ margin-left:auto; display:flex; align-items:center; gap:14px }
.topbar .right a{ font-size:11.5px; font-weight:500; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px; }
.topbar .right a:hover{ color:var(--jade) }
@media (max-width:900px){ .topbar .editorial{ display:none } }
@media (max-width:720px){ .topbar{ display:none } }

/* Pills */
.pill{
  height:38px; border-radius:999px;
  display:inline-flex; align-items:center; gap:9px;
  padding:0 17px 0 13px;
  font-size:12.5px; font-weight:600; letter-spacing:.005em;
  border:1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  cursor:pointer;
}
.pill .ico{
  width:24px; height:24px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background: currentColor; flex-shrink:0;
}
.pill .ico svg{ width:12px; height:12px; color:var(--on-jade) }
.pill--primary{ background:var(--jade); color:var(--on-jade); border-color:var(--jade) }
.pill--primary:hover{ background:var(--jade-deep); border-color:var(--jade-deep) }
.pill--primary .ico{ background: rgba(255,255,255,.16) }
.pill--primary .ico svg{ color:var(--on-jade) }
.pill--ghost{ background:transparent; color:var(--ink); border-color:var(--hair-2) }
.pill--ghost:hover{ border-color:var(--jade); color:var(--jade) }
.pill--ghost .ico{ background:var(--jade-soft) }
.pill--ghost .ico svg{ color:var(--jade) }

.link-go{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--jade); display:inline-flex; align-items:center; gap:7px;
  transition:color .15s ease, gap .15s ease;
}
.link-go:hover{ color:var(--jade-deep); gap:10px }

/* Hero */
.hero{
  position:relative;
  padding: 56px 44px 48px;
  border-bottom:1px solid var(--hair);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 500px at 12% 14%, rgba(15,74,64,.06), transparent 60%),
    radial-gradient(700px 420px at 92% 92%, rgba(177,96,42,.05), transparent 65%);
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap:48px; align-items:center;
  max-width:var(--maxw); margin:0 auto;
}
.hero h1{ margin: 16px 0 18px; max-width: 18ch; }
.hero .lede{ margin: 0 0 22px }
.hero-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.hero-meta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute);
}
.hero-meta .sep{ opacity:.5 }

/* Page hero (interior pages) */
.page-hero{ padding: 48px 44px 34px; border-bottom:1px solid var(--hair); }
.page-hero h1{ font-size: clamp(34px, 4vw, 52px); margin:14px 0 14px; max-width:22ch }
.page-hero .lede{ margin-bottom: 6px }

/* ───── The scope box — the printed box IS the design ───── */
.scope-box{
  background:var(--surface); border:1px solid var(--hair-2); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); overflow:hidden;
}
.scope-box .sb-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 20px; border-bottom:1px solid var(--hair);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); background:var(--paper-2);
}
.scope-box .sb-head b{ color:var(--jade); font-weight:600 }
.scope-box ul{ list-style:none; margin:0; padding:6px 0 }
.scope-box li{
  display:flex; align-items:baseline; gap:12px;
  padding:11px 20px; border-bottom:1px solid var(--hair);
  font-size:13.5px; color:var(--ink);
}
.scope-box li:last-child{ border-bottom:0 }
.scope-box li .n{ font-family:var(--mono); font-size:10px; color:var(--ink-mute); letter-spacing:.1em; flex:0 0 24px }
.scope-box li b{ font-weight:600 }
.scope-box .sb-foot{
  padding:12px 20px 14px; border-top:1px solid var(--hair); background:none;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute);
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.scope-box .sb-foot em{ font-style:normal; color:var(--jade) }

/* ───── Price display ───── */
.price-line{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin: 6px 0 4px }
.price-line .amt{ font-family:var(--serif); font-weight:300; font-size:clamp(30px,3.4vw,44px); letter-spacing:-.02em; color:var(--ink); line-height:1 }
.price-line .amt em{ font-style:italic; color:var(--jade); font-weight:300 }
.price-line .per{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute) }
.price-note{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute) }
.price-note b{ color:var(--jade); font-weight:600 }

/* ───── The pattern: Normalize → Refresh → Renew ───── */
.pattern{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-card) }
.pattern .step{ padding:28px 26px 26px; border-right:1px solid var(--hair); position:relative; display:flex; flex-direction:column }
.pattern .step:last-child{ border-right:0 }
.pattern .step .num{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--amber); margin-bottom:14px }
.pattern .step h3{ font-size:22px; margin-bottom:8px }
.pattern .step p{ font-size:13px; line-height:1.6; margin:0; flex:1 }
.pattern .step .tag{ margin-top:16px; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute) }
.pattern .step .tag b{ color:var(--jade); font-weight:600 }
.pattern .step::after{
  content:"→"; position:absolute; top:26px; right:-9px; z-index:2;
  width:18px; height:18px; border-radius:99px; background:var(--jade); color:var(--on-jade);
  font-size:10px; display:grid; place-items:center;
}
.pattern .step:last-child::after{ display:none }
@media (max-width:900px){
  .pattern{ grid-template-columns:1fr }
  .pattern .step{ border-right:0; border-bottom:1px solid var(--hair) }
  .pattern .step:last-child{ border-bottom:0 }
  .pattern .step::after{ content:"↓"; top:auto; bottom:-9px; right:26px }
}

/* ───── The two doors — signature element ───── */
.doors{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--hair-2); box-shadow:var(--shadow-pop);
  max-width:var(--maxw); margin:0 auto;
}
.door{ padding:44px 40px 40px; display:flex; flex-direction:column; min-height:380px; position:relative; transition: background .25s ease }
.door .d-eyebrow{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:18px; display:flex; align-items:center; gap:10px }
.door .d-eyebrow .dot{ width:4px; height:4px; border-radius:99px; background:currentColor }
.door h3{ font-size:clamp(24px,2.6vw,34px); line-height:1.06; margin-bottom:12px; font-weight:300 }
.door p{ font-size:14px; line-height:1.6; margin:0 0 18px; max-width:44ch }
.door .d-list{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:8px }
.door .d-list li{ display:flex; gap:10px; align-items:baseline; font-size:13px }
.door .d-list .tick{ font-family:var(--mono); font-size:10px; flex:0 0 auto }
.door .d-cta{ margin-top:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap }

.door--light{ background:var(--surface); color:var(--ink) }
.door--light .d-eyebrow{ color:var(--jade) }
.door--light h3{ color:var(--ink) }
.door--light h3 em{ color:var(--jade) }
.door--light p{ color:var(--ink-soft) }
.door--light .d-list li{ color:var(--ink-soft) }
.door--light .d-list .tick{ color:var(--jade) }
.door--light:hover{ background:#fdfcf9 }

.door--dark{ background:var(--ink-panel); color:#e9e4d3; border-left:1px solid rgba(243,240,228,.10) }
.door--dark .d-eyebrow{ color:var(--mint) }
.door--dark h3{ color:#f3f0e4 }
.door--dark h3 em{ color:var(--mint) }
.door--dark p{ color:rgba(243,240,228,.78) }
.door--dark .d-list li{ color:rgba(243,240,228,.78) }
.door--dark .d-list .tick{ color:var(--mint) }
.door--dark:hover{ background:#111c18 }
.door--dark .pill--primary{ background:var(--mint); border-color:var(--mint); color:#072420 }
.door--dark .pill--primary:hover{ background:#95e0c4; border-color:#95e0c4 }
.door--dark .pill--primary .ico{ background:rgba(7,36,32,.16) }
.door--dark .pill--primary .ico svg{ color:#072420 }
.door--dark .pill--ghost{ color:#f3f0e4; border-color:rgba(243,240,228,.30) }
.door--dark .pill--ghost:hover{ border-color:var(--mint); color:var(--mint) }
.door--dark .mono{ color:rgba(243,240,228,.55) }

.doors-note{
  max-width:var(--maxw); margin:14px auto 0; text-align:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
}
.doors-note b{ color:var(--jade); font-weight:600 }
@media (max-width:900px){
  .doors{ grid-template-columns:1fr }
  .door{ min-height:0 }
  .door--dark{ border-left:0; border-top:1px solid rgba(243,240,228,.10) }
}

/* ───── Cards (catalogue) ───── */
.cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; max-width:var(--maxw); margin:0 auto }
.card{
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); overflow:hidden; display:flex; flex-direction:column;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
  position:relative;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-pop); border-color:var(--jade-line) }
.card-body{ padding:20px 20px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card .k-num{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--amber) }
.card h3{ font-size:19px; font-weight:400 }
.card p{ font-size:12.5px; color:var(--ink-soft); margin:0; line-height:1.55; flex:1 }
.card .k-price{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft) }
.card .k-price b{ color:var(--jade); font-weight:600 }
.card-foot{
  margin-top:6px; padding-top:12px; border-top:1px solid var(--hair);
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute);
}
.card-foot .go{ color:var(--jade); display:inline-flex; align-items:center; gap:6px }
.card:hover .card-foot .go{ color:var(--jade-deep) }
@media (max-width:1100px){ .cards{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:720px){ .cards{ grid-template-columns:1fr } }

/* ───── Stat strip ───── */
.stat-strip{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
  border:1px solid var(--hair); border-radius:14px; overflow:hidden;
  background:var(--paper-3); max-width:var(--maxw); margin:0 auto;
}
.stat-strip > *{ padding:18px 22px; border-right:1px solid var(--hair); }
.stat-strip > *:last-child{ border-right:0 }
.stat-strip .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:6px; }
.stat-strip .v{ font-family:var(--serif); font-size:30px; line-height:1; font-weight:300; color:var(--ink); letter-spacing:-.02em; }
.stat-strip .v em{ font-style:italic; color:var(--jade); font-weight:300 }
.stat-strip .sub{ font-size:11px; color:var(--ink-mute); margin-top:4px }
@media (max-width:900px){ .stat-strip{ grid-template-columns: repeat(2, 1fr) } .stat-strip > *{ border-right:0; border-bottom:1px solid var(--hair) } .stat-strip > *:nth-last-child(-n+2){ border-bottom:0 } }
@media (max-width:520px){ .stat-strip{ grid-template-columns: 1fr } .stat-strip > *{ border-bottom:1px solid var(--hair); border-right:0 } .stat-strip > *:last-child{ border-bottom:0 } }

/* ───── Flagship two-column ───── */
.flagship-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start; max-width:var(--maxw); margin:0 auto }
@media (max-width:1000px){ .flagship-grid{ grid-template-columns:1fr } }

/* ───── Cards: "next" (signalled, not live) ───── */
.card--next{ background:var(--paper-2); box-shadow:none; border-style:dashed }
.card--next:hover{ transform:none; box-shadow:none; border-color:var(--hair-2) }
.card--next h3, .card--next p{ color:var(--ink-mute) }
.card--next .k-num{ color:var(--ink-mute) }

/* ───── Tier table ───── */
.tier-table{ width:100%; border:1px solid var(--hair-2); border-radius:var(--r-lg); overflow:hidden; border-collapse:separate; border-spacing:0; background:var(--surface); box-shadow:var(--shadow-card) }
.tier-table th, .tier-table td{ padding:13px 18px; border-bottom:1px solid var(--hair); border-right:1px solid var(--hair); font-size:13px; text-align:left; vertical-align:top }
.tier-table th:last-child, .tier-table td:last-child{ border-right:0 }
.tier-table tr:last-child td{ border-bottom:0 }
.tier-table thead th{ background:var(--paper-2); font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); font-weight:600 }
.tier-table thead th b{ color:var(--jade) }
.tier-table td:first-child{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); background:var(--paper-2) }
.tier-table td{ color:var(--ink-soft) }
.tier-table td b{ color:var(--ink); font-weight:600 }
.tier-table .hl{ background:var(--jade-soft) }
.tier-table .hl b{ color:var(--jade) }
.tier-wrap{ overflow-x:auto }

/* ───── Forms (grant application) ───── */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; max-width:820px }
.field{ display:flex; flex-direction:column; gap:6px }
.field--full{ grid-column:1 / -1 }
.field label{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:600 }
.field label .req{ color:var(--amber) }
.field .why{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute) }
.field input, .field textarea, .field select{
  font:inherit; color:var(--ink); background:var(--surface);
  border:1px solid var(--hair-2); border-radius:10px; padding:11px 13px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{ min-height:110px; resize:vertical }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--jade); box-shadow:0 0 0 3px var(--jade-soft);
}
.check{ display:flex; gap:11px; align-items:flex-start; font-size:13px; color:var(--ink-soft) }
.check input{ margin-top:2px; width:16px; height:16px; accent-color:var(--jade); flex:0 0 auto }
.form-note{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute) }
.form-note b{ color:var(--jade); font-weight:600 }
.form-error{ display:none; border:1px solid var(--amber); background:var(--amber-soft); color:var(--ink); border-radius:10px; padding:11px 14px; font-size:13px }
.form-error.is-on{ display:block }

/* ───── Lead quote (consultants) ───── */
.lead-quote{ display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:center; max-width:1080px; margin-inline:auto }
.lead-quote .lq-portrait{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); aspect-ratio:1/1; border:1px solid var(--hair) }
.lead-quote .lq-portrait img{ width:100%; height:100%; object-fit:cover; display:block }
.lead-quote blockquote{ margin:0; font-family:var(--serif); font-weight:300; font-size:clamp(22px,2.5vw,30px); line-height:1.3; letter-spacing:-.012em; color:var(--ink) }
.lead-quote blockquote em{ font-style:italic; color:var(--jade) }
.lead-quote .lq-who{ margin-top:22px }
.lead-quote .lq-who strong{ display:block; color:var(--ink); font-size:15px; font-weight:600 }
.lead-quote .lq-who span{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute) }
@media(max-width:760px){ .form-grid{ grid-template-columns:1fr } .lead-quote{ grid-template-columns:1fr; gap:24px } .lead-quote .lq-portrait{ max-width:210px } }

/* ───── Configurator ───── */
.cfg-grid{ display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap:40px; align-items:start; max-width:var(--maxw); margin:0 auto }
.progress{ display:flex; align-items:center; gap:14px; margin-bottom:22px }
.progress .pt{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap }
.progress .pt b{ color:var(--jade); font-weight:600 }
.progress .bar{ flex:1; height:3px; background:var(--paper-3); border-radius:99px; overflow:hidden }
.progress .bar i{ display:block; height:100%; width:0%; background:var(--jade); border-radius:99px; transition:width .3s ease }

.q-block{ border:1px solid var(--hair); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-card); padding:20px 22px 18px; margin-bottom:16px }
.q-block legend, .q-block .q-label{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; padding:0; margin:0 0 4px; display:block }
.q-block .q-label .qn{ color:var(--amber) }
.q-block .q-why{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); display:block; margin-bottom:12px }
.q-block fieldset{ border:0; padding:0; margin:0 }
.q-opts{ display:flex; flex-direction:column; gap:6px }
.q-opt{ display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--hair); border-radius:10px; cursor:pointer; font-size:13.5px; color:var(--ink-soft); transition:border-color .15s ease, background .15s ease, color .15s ease }
.q-opt:hover{ border-color:var(--jade-line); background:var(--jade-soft) }
.q-opt input{ accent-color:var(--jade); width:15px; height:15px; flex:0 0 auto; margin:0 }
.q-opt:has(input:checked){ border-color:var(--jade); background:var(--jade-soft); color:var(--ink) }
.q-opt:has(input:focus-visible){ outline:2px solid var(--jade); outline-offset:2px }
.q-opt b{ color:var(--ink); font-weight:600 }
.q-block.is-done{ border-color:var(--jade-line) }
.q-block.is-done .q-label{ color:var(--jade) }

.cfg-aside{ position:sticky; top: calc(var(--topbar-h) + 18px); display:flex; flex-direction:column; gap:16px }
.cfg-note{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); line-height:1.7 }
.cfg-note b{ color:var(--jade); font-weight:600 }
.cfg-note a{ color:var(--jade); text-decoration:underline; text-underline-offset:2px; text-transform:none; letter-spacing:.04em }

.conf-panel{ border:1px solid var(--jade); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-pop) }
.conf-panel .cp-head{ padding:16px 20px; background:var(--jade); color:var(--on-jade); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.conf-panel .cp-head .t{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600 }
.conf-panel .cp-head .tier{ font-family:var(--serif); font-style:italic; font-size:19px }
.conf-panel .cp-body{ padding:18px 20px }
.conf-panel .cp-price{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px }
.conf-panel .cp-price .amt{ font-family:var(--serif); font-weight:300; font-size:30px; letter-spacing:-.02em; color:var(--ink); line-height:1 }
.conf-panel .cp-price .amt em{ font-style:italic; color:var(--jade); font-weight:300 }
.conf-panel .cp-price .per{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute) }
.conf-panel .cp-drivers{ list-style:none; margin:10px 0 0; padding:10px 0 0; border-top:1px solid var(--hair); display:flex; flex-direction:column; gap:5px }
.conf-panel .cp-drivers li{ font-size:12px; color:var(--ink-soft); display:flex; gap:8px; align-items:baseline }
.conf-panel .cp-drivers .tick{ color:var(--jade); font-family:var(--mono); font-size:10px; flex:0 0 auto }
.cfg-fitnote{ display:none; border:1px solid var(--jade-line); background:var(--jade-soft); border-radius:12px; padding:12px 14px; font-size:12.5px; color:var(--ink-soft) }
.cfg-fitnote.is-on{ display:block }
.cfg-fitnote a{ color:var(--jade); text-decoration:underline; text-underline-offset:2px }
.cfg-actions{ display:flex; flex-direction:column; gap:8px; margin-top:4px }
.cfg-actions .pill{ justify-content:center }
.cfg-linkrow{ display:flex; gap:8px; flex-wrap:wrap }
.cfg-linkrow .pill{ flex:1; justify-content:center; height:34px; font-size:11.5px }

@media (max-width:1000px){
  .cfg-grid{ grid-template-columns:1fr }
  .cfg-aside{ position:static; order:-1 }
}

/* ───── Book page — vendor slot ───── */
.slot{ border:1.5px dashed var(--jade-line); border-radius:var(--r-lg); background:var(--jade-soft); padding:26px; text-align:center }
.slot .st{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--jade); font-weight:600; display:block; margin-bottom:8px }
.slot p{ font-size:12.5px; color:var(--ink-soft); margin:0 auto; max-width:52ch }

/* ───── Guardrail band (aftercare, not consulting-lite) ───── */
.guardrail{ max-width:var(--maxw); margin:0 auto; display:block; border:0; background:none; padding:0 }
.guardrail .g-mark{ display:none }
.guardrail h3{ margin-bottom:10px }
.guardrail p{ margin:0 0 10px; max-width:74ch; font-size:13.5px }
.guardrail p:last-of-type{ margin-bottom:0 }

/* ───── Legal / policy prose ───── */
.legal{ max-width:74ch }
.legal > p{ color:var(--ink-soft); font-size:14.5px; line-height:1.7; margin:0 0 16px }
.legal h2{ font-size:20px; font-weight:500; letter-spacing:-.01em; margin:28px 0 8px }
.legal h2:first-of-type{ margin-top:6px }
.legal a{ color:var(--jade); text-decoration:underline; text-underline-offset:2px }
.legal strong{ color:var(--ink); font-weight:600 }
.legal .updated{ margin-top:26px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute) }

/* ───── The one dark panel ───── */
.section--ink{ background:var(--ink-panel); color:#e9e4d3 }
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{ color:#f3f0e4 }
.section--ink h1 em,.section--ink h2 em,.section--ink h3 em,.section--ink h4 em{ color:var(--mint) }
.section--ink p,.section--ink .lede{ color:rgba(243,240,228,.80) }
.section--ink p em,.section--ink .lede em{ color:var(--mint) }
.section--ink .eyebrow{ color:var(--mint) }
.section--ink .eyebrow .dot{ background:var(--mint) }
.section--ink .mono{ color:rgba(243,240,228,.55) }
.section--ink .pill--ghost{ background:transparent; color:#f3f0e4; border-color:rgba(243,240,228,.30) }
.section--ink .pill--ghost:hover{ border-color:var(--mint); color:var(--mint) }
.section--ink .pill--primary{ background:var(--mint); border-color:var(--mint); color:#072420 }
.section--ink .pill--primary:hover{ background:#95e0c4; border-color:#95e0c4 }
.section--ink .pill--primary .ico{ background:rgba(7,36,32,.16) }
.section--ink .pill--primary .ico svg{ color:#072420 }

/* ───── Footer ───── */
.foot{
  background:var(--foot-bg); border-top:1px solid var(--hair);
  padding: 44px 44px 24px;
  padding-left: calc(var(--sidebar-w) + 44px);
}
@media (max-width: 720px){ .foot{ padding-left: 16px } }
.foot-grid{
  display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:28px;
  max-width:var(--maxw); margin:0 auto;
}
.foot-brand{ display:flex; align-items:center; gap:10px; margin-bottom:12px; color:var(--jade) }
.foot-brand svg{ width:24px; height:24px }
.foot-brand .name{ font-family:var(--serif); font-size:18px; color:var(--ink) }
.foot-brand .name em{ font-style:italic; color:var(--jade); font-weight:500 }
.foot-tagline{
  font-family:var(--serif); font-style:italic; font-weight:300; font-size:18px;
  color:var(--ink-soft); margin: 0 0 14px;
}
.foot-tagline em{ color:var(--jade) }
.foot p{ font-size:12.5px; color:var(--ink-soft); margin:0 0 8px; line-height:1.55 }
.foot h2{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); margin:0 0 12px; font-weight:600;
}
.foot ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px }
.foot ul a{ font-size:13px; color:var(--ink-soft) }
.foot ul a:hover{ color:var(--jade) }
.foot-social{ display:flex; gap:8px; margin-top:10px }
.foot-social a{
  width:32px; height:32px; border-radius:999px; border:1px solid var(--hair-2);
  display:inline-flex; align-items:center; justify-content:center; color:var(--ink-soft);
  transition: border-color .15s, color .15s, background .15s;
}
.foot-social a:hover{ border-color:var(--jade); color:var(--on-jade); background:var(--jade) }
.foot-social svg{ width:14px; height:14px }
.foot-bottom{
  max-width:var(--maxw); margin:24px auto 0; padding-top:18px; border-top:1px solid var(--hair);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
}
.foot-bottom em{ font-style:italic; color:var(--jade) }
.foot-legal{ display:inline-flex; align-items:center; gap:14px }
.foot-legal a{ color:var(--ink-mute) }
.foot-legal a:hover{ color:var(--jade) }
.foot-legal .foot-sep{ color:var(--ink-mute); opacity:.5 }
.foot-fam .here{ font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--jade); border:1px solid var(--jade-line); border-radius:999px; padding:1px 7px }
@media (max-width: 900px){ .foot-grid{ grid-template-columns: 1fr 1fr } }
@media (max-width: 520px){ .foot-grid{ grid-template-columns: 1fr } }

/* ───── Signify family — four properties ───── */
.family .head{ flex-direction:column; align-items:center; text-align:center; margin-bottom:30px }
.family .head h2{ margin-top:6px }
.family .head .sub{ max-width:58ch; margin-top:10px; text-align:center }
.fam-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:var(--maxw); margin:0 auto }
.fam-card{
  position:relative; display:flex; flex-direction:column; text-align:center; align-items:center;
  padding:30px 22px 26px; background:var(--surface);
  border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.fam-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-pop); border-color:var(--jade-line) }
.fam-card.cur{ outline:2px solid var(--jade); outline-offset:-2px }
.fam-card .fm{ width:54px; height:54px; margin:0 auto 14px; color:var(--jade) }
.fam-card .fname{ font-family:var(--serif); font-size:21px; font-weight:500; letter-spacing:-.01em; color:var(--ink) }
.fam-card .fname em{ font-style:italic; color:var(--jade); font-weight:500 }
.fam-card .frole{ font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-mute); margin:8px 0 12px }
.fam-card .fdesc{ font-size:13px; color:var(--ink-soft); line-height:1.55; margin:0; flex:1 }
.fam-card .flink{ margin-top:15px; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--jade); display:inline-flex; gap:7px; align-items:center }
.fam-card .flink .ar{ transition: transform .3s ease }
.fam-card:hover .flink .ar{ transform: translateX(3px) }
.cur-badge{
  position:absolute; top:13px; right:13px;
  font-family:var(--mono); font-size:8.5px; text-transform:uppercase; letter-spacing:.1em;
  background:var(--jade); color:var(--on-jade); padding:4px 9px; border-radius:999px;
}
@media (max-width:1100px){ .fam-row{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .fam-row{ grid-template-columns:1fr; gap:14px } }

/* ───── Back to top ───── */
.totop{
  position:fixed; right:22px; bottom:22px; z-index:75;
  width:38px; height:38px; border-radius:999px;
  background:var(--paper-3); border:1px solid var(--hair-2);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink); opacity:0; pointer-events:none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, background .15s, color .15s, border-color .15s;
}
.totop.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0) }
.totop:hover{ background:var(--jade); color:var(--on-jade); border-color:var(--jade) }
.totop svg{ width:16px; height:16px }
@media (max-width:720px){ .totop{ bottom:16px } }

/* ───── Reveal ───── */
.reveal{ opacity:0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease }
.reveal.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none } }

/* ───── Responsive ───── */
@media (max-width: 1100px){
  .hero{ padding:36px 28px 32px }
  .hero-grid{ grid-template-columns:1fr; gap:28px }
  .section, .section--lg{ padding:36px 28px }
  .page-hero{ padding:40px 28px 28px }
  .foot{ padding:32px 28px 20px; padding-left: calc(var(--sidebar-w) + 28px) }
}
@media (max-width: 720px){
  .hero{ padding:24px 16px 24px }
  .section, .section--lg{ padding:28px 16px }
  .page-hero{ padding:28px 16px 20px }
  .head{ flex-direction:column; align-items:flex-start }
  .foot{ padding:28px 16px 20px }
  .hero h1{ font-size:34px }
  h2{ font-size:26px }
  .door{ padding:30px 22px 28px }
}

/* ═════════════════════════════════════════════
   E1 additions — v2
   Pulse identity · year-one chart · Q&A ·
   tier-rule disclosure · print system
   ═════════════════════════════════════════════ */

/* ───── B1 · The pulse (kept-alive beat) ───── */
@keyframes markbeat{
  0%, 76%, 100%{ transform:scale(1); opacity:1 }
  83%{ transform:scale(1.045); opacity:.55 }
  90%{ transform:scale(1); opacity:1 }
}
.pulse-mark circle:nth-of-type(2),
.pulse-mark path{
  transform-origin:center; transform-box:fill-box;
  animation: markbeat 7s ease-in-out infinite;
}
.pulse-mark path{ animation-delay:.22s }
.pulse-mark circle:nth-of-type(1){ animation: markbeat 7s ease-in-out infinite; animation-delay:-.1s; transform-origin:center; transform-box:fill-box }

/* ───── B2 · Year-one interactive chart ───── */
.yr-chart{ border:1px solid var(--hair-2); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-card); overflow:hidden }
.yr-chart .yc-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; border-bottom:1px solid var(--hair); background:var(--paper-2); font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); flex-wrap:wrap }
.yr-chart .yc-head b{ color:var(--jade); font-weight:600 }
.yr-chart .yc-body{ padding:18px 20px 8px }
.yr-chart svg{ width:100%; height:auto; display:block }
.yr-chart .yc-scrub{ display:flex; align-items:center; gap:14px; padding:10px 20px 16px }
.yr-chart input[type=range]{ flex:1; accent-color:var(--jade); height:3px }
.yr-chart .yc-read{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap }
.yr-chart .yc-read b{ color:var(--jade); font-weight:600 }
.yc-line{ fill:none; stroke:var(--jade); stroke-width:2.5 }
.yc-grid{ stroke:var(--hair-2); stroke-width:1 }
.yc-ann{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; fill:var(--ink-mute); text-transform:uppercase }
.yc-ann-strong{ fill:var(--jade); font-weight:600 }
.yc-marker{ fill:var(--jade) }
.yc-marker-line{ stroke:var(--jade); stroke-width:1; stroke-dasharray:3 3; opacity:.6 }

/* ───── A3 · Q&A + C1 rule disclosure ───── */
.qa{ border:1px solid var(--hair); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-card); margin-bottom:12px; overflow:hidden }
.qa summary{ cursor:pointer; list-style:none; padding:18px 22px; display:flex; align-items:baseline; justify-content:space-between; gap:16px; font-family:var(--serif); font-size:18px; font-weight:400; color:var(--ink); letter-spacing:-.01em }
.qa summary::-webkit-details-marker{ display:none }
.qa summary em{ font-style:italic; color:var(--jade) }
.qa summary .tg{ font-family:var(--mono); font-size:14px; color:var(--jade); flex:0 0 auto; transition:transform .2s ease }
.qa[open] summary .tg{ transform:rotate(45deg) }
.qa summary:hover{ color:var(--jade) }
.qa .qa-a{ padding:0 22px 18px; border-top:1px solid var(--hair) }
.qa .qa-a p{ font-size:13.5px; line-height:1.65; margin:14px 0 0; max-width:72ch }
.qa .qa-a p:first-child{ margin-top:14px }
.qa .qa-a a{ color:var(--jade); text-decoration:underline; text-underline-offset:2px }
.qa--rule{ box-shadow:none; margin-bottom:0 }
.qa--rule summary{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); padding:13px 16px }
.qa--rule .qa-a{ padding:0 16px 14px }
.qa--rule .qa-a p{ font-size:12.5px }
.qa--rule .qa-a code{ font-family:var(--mono); font-size:11px; color:var(--jade); background:var(--jade-soft); padding:1px 5px; border-radius:5px }
.readfirst{ margin:18px auto 0; text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase }
.section--ink .readfirst a{ color:var(--mint); text-decoration:underline; text-underline-offset:3px }
.readfirst a:hover{ opacity:.85 }

/* ───── C2/C3 · Print system ───── */
.print-only{ display:none }
@media print{
  .side, .topbar, .m-header, .mobile-menu, .totop, .hero::before,
  .foot-social, .side-cta, .readfirst, .cfg-actions, .yc-scrub,
  .hero-actions, .d-cta, .pill{ display:none !important }
  .print-only{ display:block }
  html, body{ background:#fff !important; color:#111 !important; font-size:11pt }
  .stage{ padding-left:0 }
  .reveal{ opacity:1 !important; transform:none !important }
  *{ box-shadow:none !important; text-shadow:none !important }
  .section, .section--lg, .hero, .page-hero{ padding:18pt 0 !important; border-color:#bbb }
  .section--cream, .scope-box .sb-head, .scope-box .sb-foot,
  .tier-table thead th, .tier-table td:first-child, .stat-strip{ background:#fff !important }
  .section--ink{ background:#fff !important; color:#111 !important; border-top:1.5pt solid #111 }
  .section--ink h1,.section--ink h2,.section--ink h3,.section--ink p,.section--ink .lede{ color:#111 !important }
  .door--dark{ background:#fff !important; color:#111 !important; border:1pt solid #111 !important }
  .door--dark h3,.door--dark p,.door--dark .d-list li{ color:#111 !important }
  .doors, .cfg-grid, .flagship-grid, .hero-grid{ grid-template-columns:1fr !important }
  .scope-box, .tier-table, .guardrail, .qa, .card, .yr-chart, .conf-panel,
  .calc, .issue, .now-stamp, .state-card, .rolepanel, .planner{ break-inside:avoid; border-color:#999 }
  .roles{ display:none }
  .qa .qa-a{ display:block }
  .legal a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8.5pt; color:#555 }
  .foot{ background:#fff; border-top:1pt solid #111; padding:12pt 0 0 }
  .foot-grid{ grid-template-columns:1fr; gap:6pt }
  .foot ul{ display:none }
  .cfg-page-print .cfg-grid, .cfg-page-print .page-hero .hero-actions{ display:none !important }
}
#cfg-print h2{ font-size:20pt; margin:0 0 4pt }
#cfg-print .cpd-meta{ font-family:var(--mono); font-size:8.5pt; letter-spacing:.1em; text-transform:uppercase; color:#555; margin-bottom:14pt }
#cfg-print table{ width:100%; border-collapse:collapse; margin:10pt 0 }
#cfg-print td{ border:1pt solid #999; padding:6pt 8pt; font-size:10pt; vertical-align:top }
#cfg-print td:first-child{ font-family:var(--mono); font-size:8pt; letter-spacing:.08em; text-transform:uppercase; color:#555; width:34% }
#cfg-print .cpd-note{ font-size:9pt; color:#444; margin-top:10pt }

/* ═════════════════════════════════════════════
   E2 additions — v3
   Skip link · specimen pack viewer · capacity
   strip · a11y contrast token fixes (in :root)
   ═════════════════════════════════════════════ */

/* ───── Skip link ───── */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--jade); color:var(--on-jade); padding:10px 16px; border-radius:0 0 10px 0; font-size:13px; font-weight:600 }
.skip-link:focus{ left:0 }
.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;
}

/* ───── A1 · Specimen pack viewer ───── */
.pack-note{ border:1.5px solid var(--amber); background:var(--amber-soft); border-radius:var(--r-md); padding:12px 16px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:26px }
.pack-note b{ color:var(--amber); font-weight:600 }
.pack-page{ background:var(--surface); border:1px solid var(--hair-2); border-radius:var(--r-md); box-shadow:var(--shadow-card); max-width:860px; margin:0 auto 26px; overflow:hidden }
.pack-page .pp-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 26px; border-bottom:1px solid var(--hair); font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute) }
.pack-page .pp-head b{ color:var(--jade); font-weight:600 }
.pack-page .pp-body{ padding:30px 34px 26px }
.pack-page .pp-foot{ padding:9px 26px; border-top:1px dashed var(--amber); font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); text-align:center }
.pp-kicker{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:8px }
.pp-title{ font-family:var(--serif); font-weight:300; font-size:30px; letter-spacing:-.015em; color:var(--ink); line-height:1.05; margin:0 0 6px }
.pp-title em{ font-style:italic; color:var(--jade) }
.pack-page table{ width:100%; border-collapse:collapse; margin-top:14px }
.pack-page th{ font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); text-align:left; padding:7px 10px; border-bottom:1px solid var(--hair-2) }
.pack-page td{ font-size:12.5px; color:var(--ink-soft); padding:8px 10px; border-bottom:1px solid var(--hair); vertical-align:top }
.pack-page td b{ color:var(--ink); font-weight:600 }
.dir-up{ color:var(--amber); font-weight:700 }
.dir-dn{ color:var(--jade); font-weight:700 }
.heat{ display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin-top:14px; max-width:420px }
.heat .hc{ aspect-ratio:1; border-radius:7px; display:grid; place-items:center; font-family:var(--mono); font-size:11px; font-weight:600; color:var(--ink); background:var(--paper-2); border:1px solid var(--hair) }
.heat .h1{ background:#e6efe9 } .heat .h2{ background:#f2ead9 } .heat .h3{ background:#f0dcc4 } .heat .h4{ background:#eccdae }
.heat .hc.hot{ outline:2px solid var(--amber); outline-offset:-2px }
.heat-axis{ font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); margin-top:8px }

/* ───── B3 · Capacity strip ───── */
.cap-strip{ display:flex; align-items:center; gap:12px; border:1px solid var(--jade-line); background:var(--jade-soft); border-radius:12px; padding:11px 15px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft) }
.cap-strip b{ color:var(--jade); font-weight:600 }
.cap-strip .cap-dot{ width:7px; height:7px; border-radius:99px; background:var(--jade); flex:0 0 auto; animation: markbeat 7s ease-in-out infinite }

/* ═════════════════════════════════════════════
   E3 additions — v4
   /now stamp + state cards (B4) · The Quarterly
   issue (B5) · dead-register calculator (C5)
   ═════════════════════════════════════════════ */

/* ───── B4 · /now — the practice's own register ───── */
.now-stamp{ display:flex; flex-wrap:wrap; border:1px solid var(--hair-2); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-card) }
.now-stamp .cell{ flex:1 1 240px; padding:18px 22px 20px; border-right:1px solid var(--hair); border-bottom:1px solid var(--hair) }
.now-stamp .cell:last-child{ border-right:0 }
.now-stamp .k{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:9px }
.now-stamp .v{ font-family:var(--serif); font-weight:400; font-size:23px; letter-spacing:-.01em; color:var(--ink); line-height:1.2 }
.now-stamp .v em{ font-style:italic; color:var(--jade) }
.now-stamp .rule{ flex:1 1 100%; padding:11px 22px; font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); background:var(--paper-2) }
.now-stamp .rule b{ color:var(--jade); font-weight:600 }
.state-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px }
.state-card{ border:1px solid var(--hair); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-card); padding:18px 20px }
.state-card .sc-k{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--jade); margin-bottom:10px }
.state-card .sc-k .cap-dot{ width:7px; height:7px; border-radius:99px; background:var(--jade); flex:0 0 auto; animation:markbeat 7s ease-in-out infinite }
.state-card p{ font-size:13.5px; line-height:1.62; margin:0; color:var(--ink-soft) }
.state-card p b{ color:var(--ink); font-weight:600 }
.state-card p a{ color:var(--jade); text-decoration:underline; text-underline-offset:2px }

/* ───── B5 · The Quarterly issue ───── */
.issue{ border:1px solid var(--hair-2); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-card); overflow:hidden }
.issue-head{ display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; padding:13px 24px; border-bottom:1px solid var(--hair); background:var(--paper-2); font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-mute) }
.issue-head b{ color:var(--jade); font-weight:600 }
.issue-head .draft{ color:var(--amber); border:1px solid currentColor; border-radius:99px; padding:2px 10px; letter-spacing:.13em }
.issue-body{ padding:26px 26px 30px }
.issue-body > *{ max-width:74ch }
.issue-body h3{ font-family:var(--serif); font-weight:400; font-size:21px; letter-spacing:-.012em; color:var(--ink); margin:26px 0 9px }
.issue-body h3:first-child{ margin-top:0 }
.issue-body h3 em{ font-style:italic; color:var(--jade) }
.issue-body p{ font-size:14px; line-height:1.72; color:var(--ink-soft); margin:0 0 12px }
.issue-body p b{ color:var(--ink); font-weight:600 }
.issue-body p a{ color:var(--jade); text-decoration:underline; text-underline-offset:2px }
.issue-sig{ margin-top:22px; padding-top:16px; border-top:1px solid var(--hair); font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute) }
.arch-row{ display:flex; align-items:baseline; gap:14px; padding:13px 2px; border-bottom:1px dashed var(--hair); font-size:13.5px; color:var(--ink-soft) }
.arch-row .ar-n{ font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--jade); flex:0 0 auto }
.arch-row b{ color:var(--ink); font-weight:600 }

/* ───── C5 · Dead-register calculator ───── */
.calc{ border:1px solid var(--hair-2); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-card); overflow:hidden }
.calc-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 22px; border-bottom:1px solid var(--hair); background:var(--paper-2); font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute) }
.calc-head b{ color:var(--jade); font-weight:600 }
.calc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; padding:20px 22px; border-bottom:1px solid var(--hair) }
.calc-field label{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px }
.calc-field .inwrap{ display:flex; align-items:center; gap:7px; border:1px solid var(--hair-2); border-radius:10px; background:var(--paper); padding:9px 12px }
.calc-field .inwrap:focus-within{ border-color:var(--jade); box-shadow:0 0 0 3px var(--jade-soft) }
.calc-field .unit{ font-family:var(--mono); font-size:11px; color:var(--ink-mute); flex:0 0 auto }
.calc-field input{ width:100%; min-width:0; border:0; background:transparent; font-family:var(--mono); font-size:14px; color:var(--ink); outline:none }
.calc-field .hint{ font-size:11.5px; color:var(--ink-mute); line-height:1.55; margin-top:8px }
.calc-out{ padding:18px 22px 20px }
.calc-row{ display:flex; gap:16px; align-items:baseline; padding:12px 0; border-bottom:1px dashed var(--hair) }
.calc-row:last-of-type{ border-bottom:0 }
.calc-row .cr-k{ flex:0 0 138px; font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute) }
.calc-row .cr-v{ font-size:13.5px; line-height:1.62; color:var(--ink-soft) }
.calc-row .cr-v b{ font-family:var(--serif); font-size:19px; color:var(--jade); font-weight:500; letter-spacing:-.01em }
.calc-empty{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); padding:6px 0 2px }
.calc-note{ font-size:12.5px; color:var(--ink-mute); line-height:1.66; border:0; padding:0; background:none; max-width:78ch }
.calc-note b{ color:var(--ink-soft); font-weight:600 }

/* ═════════════════════════════════════════════
   E5 — v5 · Persona selector ("Where do you sit?")
   Tab-style role picker + swapping path panel.
   Distinct from .doors (subscribed/granted).
   ═════════════════════════════════════════════ */

.roles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:18px }
.role{
  appearance:none; -webkit-appearance:none; text-align:left; cursor:pointer; font:inherit;
  border:1px solid var(--hair-2); border-radius:var(--r-lg); background:var(--surface);
  padding:16px 18px 17px; box-shadow:var(--shadow-card);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.role:hover{ border-color:var(--jade); transform:translateY(-2px) }
.role:focus-visible{ outline:2px solid var(--jade); outline-offset:3px }
.role .r-k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:8px }
.role .r-t{ font-family:var(--serif); font-weight:400; font-size:19px; line-height:1.18; letter-spacing:-.012em; color:var(--ink) }
.role .r-t em{ font-style:italic; color:var(--jade) }
.role[aria-selected="true"]{ border-color:var(--jade); box-shadow:0 0 0 2px var(--jade-soft), var(--shadow-card) }
.role[aria-selected="true"] .r-k{ color:var(--jade) }

.rolepanel{
  border:1px solid var(--hair-2); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--shadow-card); overflow:hidden;
}
.rolepanel .rp-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px 24px; border-bottom:1px solid var(--hair); background:var(--paper-2);
  font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-mute);
}
.rolepanel .rp-head b{ color:var(--jade); font-weight:600 }
.rolepanel .rp-body{ padding:22px 24px 24px; display:grid; grid-template-columns:1fr 1fr; gap:22px }
.rp-col h3, .rp-col h4{
  font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--hair);
}
.rp-col h3.no, .rp-col h4.no{ color:var(--amber) }
.rp-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px }
.rp-list li{ display:flex; gap:11px; align-items:baseline; font-size:13.5px; line-height:1.6; color:var(--ink-soft) }
.rp-list .m{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--jade); flex:0 0 auto; min-width:20px }
.rp-list .m.no{ color:var(--amber) }
.rp-list b{ color:var(--ink); font-weight:600 }
.rp-list a{ color:var(--jade); text-decoration:underline; text-underline-offset:2px }
.rp-list .why{ display:block; color:var(--ink-mute); font-size:12.5px; margin-top:2px }
.rolepanel .rp-foot{
  padding:13px 24px; border-top:1px solid var(--hair); background:var(--paper-2);
  font-size:12.5px; line-height:1.6; color:var(--ink-mute);
}
.rolepanel .rp-foot b{ color:var(--ink-soft); font-weight:600 }

@media (max-width:860px){
  .roles{ grid-template-columns:1fr 1fr }
  .rolepanel .rp-body{ grid-template-columns:1fr; gap:18px }
}
@media (max-width:460px){
  .roles{ grid-template-columns:1fr }
}

/* ═════════════════════════════════════════════
   E6 — v6 · The planner (/configure/internal-audit/)
   Selectable engagement rows + live totals + print.
   ═════════════════════════════════════════════ */

.planner{ border:1px solid var(--hair-2); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-card); overflow:hidden }
.plan-fam{ padding:6px 22px 14px }
.plan-fam h3, .plan-fam h4{
  font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--jade); margin:16px 0 4px; padding-bottom:9px; border-bottom:1px solid var(--hair);
}
.plan-fam h3 span, .plan-fam h4 span{ color:var(--ink-mute); text-transform:none; letter-spacing:.02em; font-size:11px }
.plan-row{ display:flex; align-items:flex-start; gap:12px; padding:11px 2px; border-bottom:1px dashed var(--hair) }
.plan-row:last-child{ border-bottom:0 }
.plan-row input[type=checkbox]{ width:16px; height:16px; margin-top:2px; accent-color:var(--jade); flex:0 0 auto; cursor:pointer }
.plan-row label{ flex:1 1 auto; font-size:13.5px; line-height:1.55; color:var(--ink); cursor:pointer }
.plan-row .code{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; color:var(--jade); margin-right:8px }
.plan-row .amt{ font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); flex:0 0 auto; text-align:right; min-width:112px }
.plan-row .why{ display:block; font-size:12px; color:var(--ink-mute); margin-top:3px; line-height:1.55 }
.plan-row.locked{ opacity:.72 }
.plan-row.locked label{ cursor:default; color:var(--ink-soft) }
.plan-row.locked .code{ color:var(--amber) }

.plan-sum{ border-top:1px solid var(--hair); background:var(--paper-2); padding:16px 22px 18px }
.plan-sum .grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px }
.plan-sum .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:5px }
.plan-sum .v{ font-family:var(--serif); font-weight:300; font-size:27px; line-height:1; letter-spacing:-.02em; color:var(--ink) }
.plan-sum .v em{ font-style:italic; color:var(--jade); font-weight:300 }
.plan-empty{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); padding:4px 0 0 }

.buyopt{ display:flex; align-items:baseline; gap:14px; padding:12px 0; border-bottom:1px dashed var(--hair); font-size:13.5px; color:var(--ink-soft) }
.buyopt:last-of-type{ border-bottom:0 }
/* the text child must be allowed to shrink below its min-content width,
   or long bodies overflow the flex row instead of wrapping inside it */
.buyopt > span:last-child{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere }
.buyopt .bo-k{ flex:0 0 132px; font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute) }
.buyopt b{ color:var(--ink); font-weight:600 }
.buyopt.best .bo-k{ color:var(--jade) }
.buyopt.best b{ color:var(--jade) }

@media (max-width:760px){
  .plan-sum .grid{ grid-template-columns:1fr 1fr }
  .plan-row .amt{ min-width:92px }
}
@media print{
  .planner{ box-shadow:none }
  .plan-row.locked, .plan-row:not(.on){ display:none }
  .plan-row input[type=checkbox]{ display:none }
}

/* ═════════════════════════════════════════════
   E7 — v7 · Bundle flash cards
   Click to flip. Both faces share one grid cell so the
   card sizes to its tallest face — no fixed heights.
   ═════════════════════════════════════════════ */

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px }
.flip{ perspective:1600px }
.flip-inner{
  display:grid; transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.75,.2,1);
}
.flip.on .flip-inner{ transform:rotateY(180deg) }
.flip-face{
  grid-area:1/1; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column;
  border:1px solid var(--hair-2); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--shadow-card); overflow:hidden;
}
.flip-face--back{ transform:rotateY(180deg) }
.flip.hero .flip-face{ border-color:var(--jade); box-shadow:0 0 0 2px var(--jade-soft), var(--shadow-card) }

.fc-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:13px 20px; border-bottom:1px solid var(--hair); background:var(--paper-2);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-mute);
}
.fc-head b{ color:var(--jade); font-weight:600 }
.flip.hero .fc-head{ background:var(--jade); color:#eef7f2 }
.flip.hero .fc-head b{ color:var(--on-jade) }
.fc-body{ padding:18px 20px 4px; flex:1 1 auto }
/* Both card faces share one grid cell, so the card's height is set by the
   TALLER face — usually the back, since it carries the full detail. Left
   alone, a short front face sits pinned to the top of that tall box with a
   dead gap below it, which reads as broken rather than spacious. Centering
   the front face's content in the space it's given makes the same layout
   read as deliberate. */
.flip-face--front .fc-body{ display:flex; flex-direction:column; justify-content:center }
.fc-body h3{ font-family:var(--serif); font-weight:400; font-size:22px; letter-spacing:-.014em; color:var(--ink); margin:0 0 6px; line-height:1.15 }
.fc-body h3 em{ font-style:italic; color:var(--jade) }
.fc-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--ink-mute); margin:0 0 13px }
.fc-body p{ font-size:13.5px; line-height:1.62; color:var(--ink-soft); margin:0 0 12px }
.fc-body p b{ color:var(--ink); font-weight:600 }
.fc-chips{ display:flex; flex-wrap:wrap; gap:5px; margin:0 0 13px }
.fc-chips span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--jade);
  border:1px solid var(--hair-2); border-radius:99px; padding:3px 9px;
}
.fc-price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 4px }
.fc-price .cr{ font-family:var(--serif); font-weight:300; font-size:29px; line-height:1; letter-spacing:-.02em; color:var(--jade) }
.fc-price .cr em{ font-style:italic; font-size:17px }
.fc-price .usd{ font-family:var(--mono); font-size:12px; color:var(--ink-soft) }
.fc-save{ font-size:12px; line-height:1.55; color:var(--ink-mute); margin:6px 0 12px }
.fc-save b{ color:var(--jade); font-weight:600 }

.fc-list{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:9px }
.fc-list li{ display:flex; gap:9px; align-items:baseline; font-size:12.5px; line-height:1.58; color:var(--ink-soft) }
.fc-list .m{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:var(--jade); flex:0 0 auto }
.fc-list b{ color:var(--ink); font-weight:600 }
.fc-warn{ font-size:12.5px; line-height:1.6; color:var(--ink-soft); border:0; padding:0; margin:0 0 13px }

/* ───── Purchase shapes — full statement, no flip (v13) ───── */
.shape-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:stretch }
@media (max-width:940px){ .shape-grid{ grid-template-columns:1fr } }
.shape{
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); overflow:hidden; display:flex; flex-direction:column;
}
.shape .fc-body{ padding:20px 22px 22px }
.shape-lede{ font-size:12.5px; color:var(--ink-mute); margin:2px 0 16px }
.sh-k{
  font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--jade); margin:0 0 10px;
}
.sh-k--mute{ color:var(--ink-mute); margin-top:16px; margin-bottom:8px }
.sh-p{ font-size:12.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 12px }
.sh-p:last-child{ margin-bottom:0 }
.shape .fc-warn{ margin:14px 0 2px }

/* ───── Router (/start/) and the comparison (/compare/) — v14 ───── */
.rt-wrap{ border-top:1px solid var(--hair) }
.rt-row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:26px;
  padding:24px 0; border-bottom:1px solid var(--hair); align-items:start;
}
@media (max-width:860px){ .rt-row{ grid-template-columns:1fr; gap:12px } }
.rt-q{ display:flex; gap:14px; align-items:baseline }
.rt-n{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--jade); flex:0 0 auto }
.rt-q p{
  font-family:var(--serif); font-weight:400; font-style:italic; font-size:19px;
  line-height:1.32; letter-spacing:-.012em; color:var(--ink); margin:0;
}
.rt-note{ font-size:12.5px; line-height:1.62; color:var(--ink-soft); margin:0 0 12px; max-width:60ch }
.rt-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px }
.rt-list a{
  display:flex; gap:10px; align-items:baseline; text-decoration:none;
  font-size:13.5px; color:var(--ink); border-bottom:1px solid transparent;
}
.rt-list a:hover{ color:var(--jade) }
.rt-id{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--jade);
  background:var(--jade-soft); border-radius:4px; padding:2px 6px; flex:0 0 auto;
}
.rt-roles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px }
.rt-role{
  display:flex; flex-direction:column; gap:6px; text-decoration:none;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:20px 22px; transition:border-color .2s ease, transform .2s ease;
}
.rt-role:hover{ border-color:var(--jade); transform:translateY(-2px) }
.rt-role h3{ font-family:var(--serif); font-weight:400; font-size:19px; letter-spacing:-.012em; color:var(--ink); margin:0 }
.rt-who{ font-size:13px; line-height:1.6; color:var(--ink-soft); margin:0 }
.rt-buys{ font-size:12.5px; line-height:1.6; color:var(--ink-mute); margin:0 }
.rt-buys b{ color:var(--ink); font-weight:600 }
.rt-go{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--jade); margin-top:auto; padding-top:10px;
}
.shape.rt-us{ border-color:var(--jade) }
.shape.rt-us .fc-head{ color:var(--jade) }
.fc-warn b{ color:var(--amber); font-weight:600 }

.fc-foot{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 20px 14px; border-top:1px solid var(--hair); margin-top:auto }
.flip-btn{
  appearance:none; -webkit-appearance:none; cursor:pointer; font:inherit;
  font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--jade); background:transparent; border:1px solid var(--jade);
  border-radius:99px; padding:7px 14px; transition:background .16s ease, color .16s ease;
}
.flip-btn:hover{ background:var(--jade); color:var(--on-jade) }
.flip-btn:focus-visible{ outline:2px solid var(--jade); outline-offset:2px }
.fc-foot a{
  font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-mute); text-decoration:underline; text-underline-offset:3px;
}
.fc-foot a:hover{ color:var(--jade) }

@media (prefers-reduced-motion:reduce){
  .flip-inner{ transition:none }
}
@media print{
  .flip{ perspective:none; break-inside:avoid }
  .flip-inner{ display:block; transform:none !important }
  .flip-face{ backface-visibility:visible; -webkit-backface-visibility:visible;
              transform:none !important; box-shadow:none; margin-bottom:8px }
  .flip-btn{ display:none }
}

/* ═════════════════════════════════════════════
   E8 — v8 · Grouped navigation + area pages
   ═════════════════════════════════════════════ */

/* Collapsed rail is 64px, so the label must hide like .side-link .lbl does —
   otherwise "WHAT WE DO" wraps three lines deep. A short rule keeps the
   grouping legible while collapsed. */
.side-group{
  padding:20px 20px 8px; position:relative;
  display:flex; align-items:center; min-height:36px;
}
.side-group::before{
  content:""; position:absolute; left:20px; top:50%; margin-top:-1px;
  width:16px; height:1px;
  background:var(--hair-2); transition:opacity .2s ease;
}
.side-group span{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.2em; text-transform:uppercase;
  line-height:1.2; color:var(--ink-mute); white-space:nowrap; opacity:0;
  transition:opacity .2s ease .04s;
}
.side-nav > .side-group:first-child{ padding-top:14px; min-height:30px }
.side:hover .side-group span{ opacity:.75 }
.side:hover .side-group::before{ opacity:0 }
.side-group + .side-link{ margin-top:0 }
.m-group{
  font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mute); padding:16px 0 4px; opacity:.75;
}

/* Area hub: the five doors, and the disciplines inside one */
.areas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px }
.area-card{
  display:flex; flex-direction:column; gap:9px; padding:20px 22px 22px;
  border:1px solid var(--hair-2); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--shadow-card); text-decoration:none;
  transition:border-color .18s ease, transform .18s ease;
}
.area-card:hover{ border-color:var(--jade); transform:translateY(-2px) }
.area-card .ac-ico{ width:26px; height:26px; color:var(--jade) }
.area-card .ac-ico svg{ width:100%; height:100% }
.area-card h3{ font-family:var(--serif); font-weight:400; font-size:21px; letter-spacing:-.013em; color:var(--ink); margin:0; line-height:1.16 }
.area-card h3 em{ font-style:italic; color:var(--jade) }
.area-card p{ font-size:13px; line-height:1.6; color:var(--ink-soft); margin:0 }
.area-card .ac-meta{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-mute); margin-top:auto; padding-top:10px; border-top:1px solid var(--hair);
}
.area-card .ac-meta b{ color:var(--jade); font-weight:600 }
.area-card.soon{ opacity:.85 }
.area-card.soon .ac-meta b{ color:var(--amber) }

/* Discipline strip inside an area */
.disc{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px }
.disc a, .disc div{
  border:1px solid var(--hair); border-radius:12px; background:var(--surface); padding:15px 17px;
  text-decoration:none; display:block;
}
.disc a:hover{ border-color:var(--jade) }
.disc .d-k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--jade); margin-bottom:6px }
.disc .d-k.soon{ color:var(--amber) }
.disc .d-t{ font-family:var(--serif); font-size:18px; color:var(--ink); line-height:1.2; margin-bottom:5px }
.disc p{ font-size:12.5px; line-height:1.58; color:var(--ink-soft); margin:0 }

@media print{ .side-group, .m-group{ display:none } }

/* ═════════════════════════════════════════════
   E9 — v9 · Plan builder: area groups + filter chips
   ═════════════════════════════════════════════ */

.plan-chips{ padding:4px 0 14px; gap:7px }
.chipbtn{
  appearance:none; -webkit-appearance:none; cursor:pointer; font:inherit;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--surface); border:1px solid var(--hair-2);
  border-radius:99px; padding:6px 12px;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.chipbtn:hover{ border-color:var(--jade); color:var(--jade) }
.chipbtn:focus-visible{ outline:2px solid var(--jade); outline-offset:2px }
.chipbtn.on{ background:var(--jade); border-color:var(--jade); color:var(--on-jade) }
.plan-area > h3, .plan-area > h4{
  font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--jade); margin:20px 0 4px; padding-bottom:9px; border-bottom:1px solid var(--hair);
}
.plan-area:first-of-type > h4{ margin-top:6px }
.plan-area[hidden]{ display:none }
@media print{ .plan-chips{ display:none } .plan-area[hidden]{ display:block } }

/* ═════════════════════════════════════════════
   E11 — v11 · The engagement-page template
   Failure lede · old-way/this-way · timeline · repeatability
   ═════════════════════════════════════════════ */

.failure{ border-left:2px solid var(--amber); padding:4px 0 4px 20px; max-width:70ch }
.failure p{ font-size:15px; line-height:1.7; color:var(--ink-soft); margin:0 0 12px }
.failure p:last-child{ margin-bottom:0 }
.failure b{ color:var(--ink); font-weight:600 }

.vs{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--hair-2); border-radius:var(--r-lg); overflow:hidden; background:var(--surface) }
.vs-col{ padding:0 }
.vs-col:first-child{ border-right:1px solid var(--hair) }
.vs-head{ padding:13px 20px; font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; border-bottom:1px solid var(--hair) }
.vs-col:first-child .vs-head{ background:var(--paper-2); color:var(--ink-mute) }
.vs-col:last-child .vs-head{ background:var(--jade); color:#eef7f2 }
.vs-row{ padding:13px 20px; border-bottom:1px dashed var(--hair); font-size:13px; line-height:1.58; color:var(--ink-soft); min-height:64px }
.vs-row:last-child{ border-bottom:0 }
.vs-col:last-child .vs-row{ color:var(--ink) }
.vs-col:last-child .vs-row b{ color:var(--jade); font-weight:600 }

.tl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0; border:1px solid var(--hair-2); border-radius:var(--r-lg); overflow:hidden; background:var(--surface) }
.tl-step{ padding:18px 20px 20px; border-right:1px solid var(--hair); position:relative }
.tl-step:last-child{ border-right:0 }
.tl-k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--jade); margin-bottom:8px }
.tl-t{ font-family:var(--serif); font-size:17px; line-height:1.22; color:var(--ink); margin-bottom:7px }
.tl-step p{ font-size:12.5px; line-height:1.58; color:var(--ink-soft); margin:0 }
.tl-gate{ display:inline-block; margin-top:10px; font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); border:1px solid currentColor; border-radius:99px; padding:2px 8px }

.repeat{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px }
.repeat div{ border-top:2px solid var(--jade); padding-top:12px }
.repeat .r-n{ font-family:var(--serif); font-weight:300; font-size:30px; line-height:1; letter-spacing:-.02em; color:var(--ink) }
.repeat .r-l{ font-size:12.5px; line-height:1.55; color:var(--ink-soft); margin-top:7px }

@media (max-width:720px){
  .vs{ grid-template-columns:1fr }
  .vs-col:first-child{ border-right:0; border-bottom:1px solid var(--hair) }
  .vs-row{ min-height:0 }
  .tl-step{ border-right:0; border-bottom:1px solid var(--hair) }
}
@media print{ .vs, .tl, .repeat{ break-inside:avoid } }

/* ═════════════════════════════════════════════
   v16 — Round 47
   · Landing-page control centre (.hub)
   · Subscription milestone timelines (.tl)
   · Outcome lines and subscription kind bands
   ═════════════════════════════════════════════ */

.hub{ display:grid; gap:26px }
.hub-set{ display:grid; gap:14px }
.hub-k{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding-bottom:10px; border-bottom:1px solid var(--hair);
}
.hub-k .k{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--jade);
}
.hub-k .k-sub{ font-size:12.5px; line-height:1.55; color:var(--ink-mute); margin:0 }
.hub-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:12px }
.hub-card{
  display:flex; flex-direction:column; gap:6px; text-decoration:none;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:17px 19px 15px;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hub-card:hover{ border-color:var(--jade); transform:translateY(-2px); box-shadow:var(--shadow-card) }
.hub-card:focus-visible{ outline:2px solid var(--jade); outline-offset:2px }
.hub-card .hc-ico{ width:22px; height:22px; color:var(--jade) }
.hub-card .hc-ico svg{ width:100%; height:100% }
.hub-card h3{
  font-family:var(--serif); font-weight:400; font-size:18.5px; letter-spacing:-.012em;
  color:var(--ink); margin:2px 0 0; line-height:1.18;
}
.hub-card h3 em{ font-style:italic; color:var(--jade) }
.hub-card p{ font-size:12.5px; line-height:1.6; color:var(--ink-soft); margin:0 }
.hub-card .hc-go{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-mute); margin-top:auto; padding-top:11px;
}
.hub-card:hover .hc-go{ color:var(--jade) }
.hub-card .hc-go b{ color:var(--jade); font-weight:600 }

.tl{ margin:16px 0 0; border-top:1px solid var(--hair) }
.tl-row{
  display:grid; grid-template-columns:104px minmax(0,1fr); gap:16px;
  padding:12px 0; border-bottom:1px solid var(--hair);
}
.tl-row:last-child{ border-bottom:0; padding-bottom:2px }
.tl-when{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--jade); line-height:1.5; padding-top:2px;
}
.tl-when span{ display:block; color:var(--ink-mute); letter-spacing:.08em }
.tl-what{ font-size:12.5px; line-height:1.6; color:var(--ink-soft); margin:0 }
.tl-what b{ color:var(--ink); font-weight:600 }
.tl-what .out{
  display:block; margin-top:4px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.07em; color:var(--ink-mute);
}
.tl-row.is-repeat .tl-when{ color:var(--amber) }
@media (max-width:560px){ .tl-row{ grid-template-columns:1fr; gap:5px } }
@media print{ .tl-row{ break-inside:avoid } }

.outcome{
  display:block; margin:0 0 14px; padding:12px 14px;
  background:var(--jade-soft); border-left:2px solid var(--jade);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:12.5px; line-height:1.6; color:var(--ink-soft);
}
.outcome b{ color:var(--ink); font-weight:600 }

.sub-kind{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid var(--hair-2);
}
.sub-kind .sk-n{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--jade);
}
.sub-kind h3{
  font-family:var(--serif); font-weight:400; font-size:23px; letter-spacing:-.014em;
  color:var(--ink); margin:0; line-height:1.16;
}
.sub-kind h3 em{ font-style:italic; color:var(--jade) }
.sub-kind .sk-p{ font-size:12.5px; line-height:1.6; color:var(--ink-mute); margin:0; flex:1 1 260px }
.fc-price + .tl{ margin-top:14px }

/* ════════════════════════════════════════════════════════════════════════════
   DARK THEME — mirrors Signify Solution exactly.
   :root above is LIGHT. html.dark re-declares the colour subset below.
   Every value here is taken from Solution's stylesheet rather than invented,
   so the two properties stay in step. Impact-only tokens (--mint, --ink-panel)
   are derived in the same spirit and noted individually.

   Printing is unaffected: the @media print block earlier in this file uses
   !important, so it still wins over everything here.
   ════════════════════════════════════════════════════════════════════════════ */

html.dark{
  --paper:#0a1612; --paper-2:#0d1f1a; --paper-3:#122722;
  --ink:#f3f0e4; --ink-soft:#c8c3ad; --ink-mute:#8a8975;
  --hair:rgba(243,240,228,.10); --hair-2:rgba(243,240,228,.18);
  --jade:#7ed4b3; --jade-deep:#4fb88f;
  --jade-soft:rgba(126,212,179,.10); --jade-line:rgba(126,212,179,.25);
  --amber:#f0b27a; --amber-soft:rgba(240,178,122,.10);
  --shadow-card:0 18px 40px -28px rgba(0,0,0,.45),0 5px 14px -8px rgba(0,0,0,.28);
  --shadow-pop:0 22px 50px -28px rgba(0,0,0,.55),0 8px 20px -10px rgba(0,0,0,.32);
  --side-bg:#08130f; --surface:#122722; --foot-bg:#08130f; --on-jade:#072420;
  /* Impact-only. --mint stays as-is: it is already the light-on-dark accent and
     is used on the deliberately-dark panels, which stay dark below.
     --ink-panel goes DARKER so those panels still separate from the page
     ground once the ground itself is dark — Solution's device, applied through
     the token instead of two per-component rules. */
  --ink-panel:#04100c;
}

html{ color-scheme: light }
html.dark{ color-scheme: dark; scrollbar-color: var(--hair-2) transparent }

body{ transition: background .4s ease, color .4s ease }
.side,.topbar,.m-header,.mobile-menu,.foot,.card,.totop,.pill,.fam-card,
.door,.scope-box,.tier-table,.guardrail,.qa,.conf-panel{
  transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* ── Jade-backed surfaces ────────────────────────────────────────────────────
   --jade flips to a LIGHT mint in dark mode, so anything sitting on a jade
   background needs its foreground to flip with it. The #fff cases now read
   var(--on-jade), which is #ffffff in light — no light-mode change at all.
   The two #eef7f2 cases keep their pale-mint tint in light and only flip in
   dark, so the light theme stays exactly as designed. */
html.dark .flip.hero .fc-head,
html.dark .vs-col:last-child .vs-head{ color:var(--on-jade) }

/* ── Deliberately-dark panels stay dark ──────────────────────────────────────
   "One dark panel per page" is a contrast device; inverting it to light would
   destroy the effect. Both .section--ink and .door--dark draw their background
   from --ink-panel, which is darkened above, so they keep separating from the
   ground. Their foreground values were already dark-palette colours
   (#f3f0e4, #e9e4d3, #95e0c4, #072420) and stay correct unchanged. */
html.dark .door--dark:hover{ background:#071310 }

/* ── Light tints with no token behind them ───────────────────────────────────
   .door--light:hover lifted toward white; in dark it lifts toward the raised
   surface instead. */
html.dark .door--light:hover{ background:var(--paper-3) }

/* .heat cells label themselves with var(--ink), which flips to cream, so the
   four escalation tints must flip too or the labels disappear. The dark scale
   keeps the same reading — coolest to hottest — on the mint-to-amber ramp. */
html.dark .heat .h1{ background:rgba(126,212,179,.12) }
html.dark .heat .h2{ background:rgba(240,178,122,.10) }
html.dark .heat .h3{ background:rgba(240,178,122,.18) }
html.dark .heat .h4{ background:rgba(240,178,122,.28) }

/* ── Form controls keep a light field, as on Solution ───────────────────────── */
html.dark input,html.dark textarea,html.dark select{
  background:#fff; color:#0e1614; border-color:rgba(14,22,20,.18);
}
html.dark input::placeholder,html.dark textarea::placeholder{ color:#5f6a67 }

/* ── Theme toggle button ─────────────────────────────────────────────────────
   Same component as Solution's, using Impact's tokens. */
.theme-tg{
  width:34px; height:34px; border-radius:999px;
  border:1px solid var(--hair-2); color:var(--ink-soft);
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  background:transparent; cursor:pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.theme-tg:hover{ color:var(--jade); border-color:var(--jade-line); background:var(--jade-soft) }
.theme-tg svg{ width:16px; height:16px }
.m-header .m-tools{ display:flex; align-items:center; gap:10px }

@media (prefers-reduced-motion:reduce){
  body,.side,.topbar,.m-header,.mobile-menu,.foot,.card,.pill,.fam-card,
  .door,.scope-box,.tier-table,.guardrail,.qa,.conf-panel{ transition:none }
}

/* ───── Subscriptions: family filter + per-card disclosure ─────
   Fourteen fully-expanded cards is 79KB on one screen. The filter narrows to a
   family; the disclosure keeps the milestone timeline and the foreclosure in the
   DOM (the test contract counts them) but off the screen until asked for. */
.sub-filter{ justify-content:center; margin:0 auto 24px; flex-wrap:wrap }
.shape[hidden]{ display:none }
.shape h3 a{ color:inherit; text-decoration:none }
.shape h3 a:hover{ color:var(--jade) }
@media (prefers-reduced-motion:reduce){ }

.sub-kinds{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin:0 0 24px }
@media (max-width:760px){ .sub-kinds{ grid-template-columns:1fr; gap:16px } }

/* ── Session 3 · Batch A ──────────────────────────────────────────────────
   A4: the 64px rail keeps its width; the scrollbar chrome that appeared
   inside it on laptop-height viewports is hidden (rail still scrolls).
   A5: clearance on the footer bottom row so the fixed ↑ button (right:22px,
   38px wide) can never sit on top of the legal links. */
.side-nav{ scrollbar-width:none }
.side-nav::-webkit-scrollbar{ display:none }
.foot-bottom{ padding-inline-end:72px }

/* ── Session 3 · Batch B · Values (ported from Signify Solution) ── */
.value-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px }
.value{
  background:var(--surface); border:1px solid var(--hair); border-radius:14px; padding:22px;
  display:flex; flex-direction:column; gap:10px; min-height:200px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease }
.value:hover{ border-color:var(--jade-line); transform:translateY(-3px); box-shadow:var(--shadow-card) }
.value-num{ font-family:var(--mono); font-size:10px; color:var(--jade); letter-spacing:.18em; text-transform:uppercase }
.value h3{ font-size:22px; font-weight:300 }
.value p{ font-size:12.5px; color:var(--ink-soft); margin:0; line-height:1.55 }
@media (max-width:900px){ .value-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width:520px){ .value-grid{ grid-template-columns: 1fr } }

/* ── Session 3 · Batch E · linear five-step nav (how-it-works) ── */
.stepnav{ position:sticky; top:0; z-index:40; display:flex; flex-wrap:nowrap; align-items:stretch;
  gap:0; margin-top:26px; border:1px solid var(--hair-2); border-radius:999px;
  background:var(--surface); box-shadow:var(--shadow-card); overflow-x:auto; scrollbar-width:none }
.stepnav::-webkit-scrollbar{ display:none }
.stepnav a{ flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 10px; white-space:nowrap; color:var(--ink-soft); position:relative }
.stepnav a + a::before{ content:""; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:var(--hair-2) }
.stepnav .sn-n{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; color:var(--jade) }
.stepnav .sn-l{ font-size:12.5px }
.stepnav a:hover{ color:var(--jade) }
.stepnav a:focus-visible{ outline:2px solid var(--jade); outline-offset:-2px; border-radius:999px }
[id^="step-"]{ scroll-margin-top:76px }
@media (max-width:720px){ .stepnav{ border-radius:14px } .stepnav a{ flex:0 0 auto; padding:10px 14px } }

/* ── Session 3 · Batch F · subscription flip cards ──
   Grid-stacked faces: both occupy one cell, so the card is as tall as its
   taller face — no pinned-short front (the Round-41 objection). Back body
   caps its height and scrolls so fourteen cards keep a civil rhythm. */
.subflip{ perspective:1600px; cursor:pointer; background:none; border:none; box-shadow:none; overflow:visible }
.subflip .sf-inner{ display:grid; transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.2,.7,.3,1) }
.subflip.is-flipped .sf-inner{ transform:rotateY(180deg) }
.sf-face{ grid-area:1/1; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); overflow:hidden }
.sf-back{ transform:rotateY(180deg) }
.sf-back .fc-body{ max-height:560px; overflow-y:auto; scrollbar-width:thin }
.sf-cue{ margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--jade) }
.sf-cue .sm-x{ font-size:12px }
.subflip:hover .sf-cue{ text-decoration:underline; text-underline-offset:3px }
.subflip:focus-visible{ outline:2px solid var(--jade); outline-offset:3px; border-radius:var(--r-lg) }
@media (prefers-reduced-motion:reduce){ .subflip .sf-inner{ transition:none } }
.chipbtn .chip-n{ opacity:.78 }
.chipbtn.on .chip-n{ opacity:1; color:inherit }

/* ══ Session 4 · item 8 — subscription cards ══ */
/* The FRONT sets the card height; the back is lifted out of flow and scrolls
   inside it. Previously both faces sat in the grid, so the taller back
   stretched every front and rows went ragged. */
.subflip .sf-inner{ position:relative; height:100% }
.subflip .sf-back{ position:absolute; inset:0 }
.subflip .sf-face{ height:100% }
.sf-back .fc-body{ max-height:none; height:100%; overflow-y:auto }
/* Fourteen cards, one size, three across. Scoped so /how-it-works/ is safe. */
.shape-grid.subs-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:1fr; align-items:stretch }
.subs-grid .shape{ height:100% }
/* Front face reads like a plan card: scope line, then price, then the CTA. */
.subs-grid .fc-body{ display:flex; flex-direction:column }
.subs-grid .outcome{ margin-bottom:12px }
.subs-grid .fc-price{ margin-top:auto }
.sf-cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin-top:14px; padding:10px 16px; border-radius:999px; background:var(--jade);
  color:var(--on-jade); font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; border:1px solid var(--jade); transition:background .2s ease }
.sf-cta:hover{ background:var(--jade-deep) }
@media (max-width:1080px){ .shape-grid.subs-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:720px){ .shape-grid.subs-grid{ grid-template-columns:1fr } }

/* ── item 8c · at-a-glance stats on the flip back ── */
.sf-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:2px 0 16px;
  padding:14px 12px; border:1px solid var(--hair); border-radius:var(--r-sm); background:var(--paper-2) }
.sf-stats div{ text-align:center }
.sf-stats b{ display:block; font-family:var(--serif); font-size:22px; line-height:1; color:var(--jade) }
.sf-stats span{ display:block; margin-top:5px; font-family:var(--mono); font-size:8.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute) }
.sf-back .sf-cta{ width:100% }

/* ══ Session 4 · item 9 — how-it-works revamp ══ */
/* 9b — the Step 02 gate, as an aligned 3-up grid */
.gate-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch }
.gate-card{ display:flex; flex-direction:column; padding:22px 20px 20px; background:var(--surface);
  border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow-card) }
.gate-card .g-n{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--jade) }
.gate-card h3{ margin:10px 0 8px; font-family:var(--serif); font-size:18px; line-height:1.25; color:var(--ink) }
.gate-card p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-soft) }
.gate-card .g-no{ margin-top:auto; padding-top:14px; font-size:12px; color:var(--ink-mute) }
@media (max-width:900px){ .gate-grid{ grid-template-columns:1fr } }

/* 9f — the rollout timeline: rebuild, the quarterly loop, renewal */
.rollout{ position:relative; margin-top:26px; padding-left:34px }
.rollout::before{ content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg,var(--jade),var(--jade-line)) }
.ro-step{ position:relative; padding:0 0 26px }
.ro-step:last-child{ padding-bottom:0 }
.ro-step::before{ content:""; position:absolute; left:-28px; top:4px; width:12px; height:12px;
  border-radius:999px; background:var(--surface); border:2px solid var(--jade) }
.ro-step.is-loop::before{ background:var(--jade) }
.ro-when{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--jade) }
.ro-step h3{ margin:6px 0 6px; font-family:var(--serif); font-size:19px; color:var(--ink) }
.ro-step p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-soft) }
.ro-val{ display:inline-block; margin-top:10px; padding:5px 11px; border-radius:999px;
  background:var(--jade-soft); border:1px solid var(--jade-line);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--jade) }
.ro-loop-note{ margin:4px 0 22px 0; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute) }

/* 9a — the compact three-lens row */
.lens-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px }
.lens{ display:flex; flex-direction:column; padding:22px 20px; background:var(--surface);
  border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow-card) }
.lens .l-k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--jade) }
.lens h3{ margin:9px 0 7px; font-family:var(--serif); font-size:18px; color:var(--ink) }
.lens p{ margin:0 0 14px; font-size:13.5px; line-height:1.6; color:var(--ink-soft) }
.lens .link-go{ margin-top:auto }
@media (max-width:900px){ .lens-grid{ grid-template-columns:1fr } }

/* item 9 correction — the full router, disclosed on demand */
.router-more{ margin-top:22px; border:1px solid var(--hair); border-radius:var(--r-lg);
  background:var(--surface); overflow:hidden }
.router-more>summary{ cursor:pointer; list-style:none; padding:16px 20px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--jade); display:flex; align-items:center; justify-content:space-between; gap:12px }
.router-more>summary::-webkit-details-marker{ display:none }
.router-more>summary .tg{ font-size:15px; line-height:1 }
.router-more[open]>summary{ border-bottom:1px solid var(--hair) }
.router-more[open]>summary .tg{ transform:rotate(45deg) }
.router-more .section{ padding-top:22px; padding-bottom:6px }
.router-more .section--cream{ background:none }

/* item 9c — the two purchase shapes, flipped (safe now the front sets height) */
.shape-flip{ background:none; border:none; box-shadow:none; overflow:visible; cursor:pointer }
.shape-flip .sf-inner{ position:relative; height:100% }
.shape-flip .sf-back{ position:absolute; inset:0 }
.shape-flip .sf-face{ height:100% }
.shape-flip .sf-back .fc-body{ max-height:none; height:100%; overflow-y:auto }

/* ══ Session 4 · item 12 — scope confirmation ══ */
.sc-group{ display:flex; align-items:center; gap:9px; margin:18px 0 8px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--jade) }
.sc-group:first-child{ margin-top:2px }
.sc-group span{ padding:2px 8px; border-radius:999px; background:var(--jade-soft);
  border:1px solid var(--jade-line); font-size:9px; color:var(--jade) }
.sc-row{ display:grid; grid-template-columns:58px 1fr auto; gap:14px; align-items:start;
  padding:12px 0; border-top:1px solid var(--hair) }
.sc-code{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--jade); padding-top:2px }
.sc-main b{ display:block; font-size:14px; font-weight:600; color:var(--ink); line-height:1.35 }
.sc-val{ display:block; margin-top:4px; font-size:12.5px; line-height:1.5; color:var(--ink-soft) }
.sc-price{ text-align:right; white-space:nowrap; padding-top:1px }
.sc-price b{ display:block; font-family:var(--serif); font-size:15px; color:var(--ink) }
.sc-price em{ display:block; margin-top:2px; font-style:normal;
  font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute) }
.sc-total{ margin-top:18px; padding-top:14px; border-top:2px solid var(--jade-line) }
.sc-t-row{ display:grid; grid-template-columns:1fr auto; gap:6px 16px; padding:8px 0; align-items:baseline }
.sc-t-row>span{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute) }
.sc-t-row>b{ font-family:var(--serif); font-size:18px; color:var(--ink); text-align:right }
.sc-t-row>em{ grid-column:1 / -1; font-style:normal; font-size:12px; color:var(--ink-mute); line-height:1.5 }
.sc-t-sum{ margin-top:6px; padding:14px 16px; border-radius:var(--r-sm);
  background:var(--jade-soft); border:1px solid var(--jade-line) }
.sc-t-sum>span{ color:var(--jade) }
.sc-t-sum>b{ font-size:24px; color:var(--jade) }
@media (max-width:620px){
  .sc-row{ grid-template-columns:44px 1fr; }
  .sc-price{ grid-column:2; text-align:left; margin-top:6px }
}

/* ══ Session 5 · M-2 — top-level disclosures match the in-wrap one ══
   "See all ten triggers" lives inside .wrap inside .section, so it is capped
   at --maxw and inset by the section's 44px padding. The journey/credits
   disclosures are top-level siblings of <section>, so they had no width
   constraint and ran the full viewport. Reproduce that geometry, and give
   them the space underneath the client asked for. */
.router-more--page{ width:calc(100% - 88px); max-width:var(--maxw);
  margin-left:auto; margin-right:auto; margin-bottom:34px }
@media (max-width:620px){
  .router-more--page{ width:calc(100% - 40px); margin-bottom:26px }
}

/* ══ Session 5 · M-6 — buyer table cells all white ══
   Two rules tinted this table: td:first-child (paper-2) and .hl (jade-soft).
   The client asked for white cells like the side-by-side table, so both go.
   Emphasis survives as colour and weight rather than fill, which is how the
   side-by-side table already distinguishes its cells. */
.tier-table td:first-child{ background:var(--surface) }
.tier-table .hl{ background:var(--surface) }
.tier-table .hl b{ color:var(--jade) }

/* ══ Session 5 · M-11 — the landing hero flip card ══
   Behaviour comes from .subflip (site.v6.js): click, Enter/Space, and links
   inside either face still navigate. Only presentation is added here, so the
   delivered JS is untouched. The FRONT sets the height — the same constraint
   that made the shape cards safe to flip in Session 4 item 9c. */
.heroflip{ cursor:pointer; perspective:1600px; -webkit-tap-highlight-color:transparent }
.heroflip .sf-inner{ position:relative; display:grid; transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.7,.3,1) }
.heroflip.is-flipped .sf-inner{ transform:rotateY(180deg) }
.heroflip .sf-face{ grid-area:1/1; backface-visibility:hidden; -webkit-backface-visibility:hidden }
.heroflip .sf-back{ transform:rotateY(180deg) }
.heroflip .sf-back .scope-box{ height:100% }
.heroflip .sf-back ul{ overflow-y:auto }
.heroflip .hf-cue{ color:var(--jade); font-family:var(--mono); font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase }
.heroflip:focus-visible{ outline:2px solid var(--jade); outline-offset:4px; border-radius:var(--r-lg) }
@media (prefers-reduced-motion:reduce){ .heroflip .sf-inner{ transition:none } }

/* ══ Session 5 · M-11 correction — contain the back face ══
   height:100% on the scope-box does not constrain its child list: the back
   copy measured 333px inside a 278px card and overflowed. Make the back a
   flex column so the list scrolls within the height the FRONT sets, which is
   the invariant that makes these cards safe to flip at all. */
.heroflip .sf-face .scope-box{ height:100%; display:flex; flex-direction:column }
.heroflip .sf-face .sb-foot{ margin-top:auto }
/* Both faces share one grid cell, so the CARD sizes to the taller of the two
   and neither scrolls. The Session-4 shape-card defect was a card sized to a
   detailed back with a few-word front pinned in it; here the two faces differ
   by ~100px, and pushing each footer to the bottom reads as deliberate. Only
   on a short viewport does the back scroll. */
/* The inherited .subflip rules take the back OUT of flow
   (.subflip .sf-back{position:absolute;inset:0}), which is why the card kept
   sizing to the front alone. Put the back back in flow, in the same grid
   cell, so the row height is the max of the two faces. */
.heroflip .sf-inner{ height:auto }
.heroflip .sf-face{ height:auto; min-height:0 }
.heroflip .sf-back{ position:static; grid-area:1/1 }
@media (max-height:720px){
  .heroflip .sf-back ul{ overflow-y:auto; scrollbar-width:thin }
}

/* ══ Session 5 · M-14 — chip filter hiding ══
   A class, not [hidden]: the cards set display:flex, which beats the UA
   [hidden]{display:none} rule and would leave filtered cards visible. */
.is-filtered-out{ display:none !important }

/* ═══ Grants · parity cards (Session 6, item 3) ══════════════════════════
   Was a five-item .stat-strip in its own section. Four of the five said
   "Same"; the fifth (Reporting) was a different claim and became the strap. */
.parity-block{ border:1px solid var(--hair); border-radius:var(--r-lg); padding:22px; background:var(--surface) }
.parity-block .eyebrow{ margin-bottom:2px }
.pb-h{ font-family:var(--serif); font-size:21px; line-height:1.28; font-weight:300; letter-spacing:-.01em; margin:8px 0 16px }
.pb-h em{ font-style:italic; color:var(--jade) }
.pcards{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:var(--r-md); overflow:hidden }
.pcard{ background:var(--surface); padding:14px 16px; display:flex; flex-direction:column; gap:3px }
.pc-k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute) }
.pc-v{ font-family:var(--serif); font-style:italic; font-size:25px; line-height:1.05; font-weight:300; color:var(--jade) }
.pc-s{ font-size:12px; line-height:1.45; color:var(--ink-soft) }
.pb-strap{ margin:14px 0 0; font-size:13px; line-height:1.6; color:var(--ink-soft) }
.pb-strap b{ color:var(--ink) }

/* ═══ Grants · round-one phase rail (Session 6, item 2) ══════════════════
   Replaces a generic .tl widget buried in a 562px sidebar column. Phase
   classes (.is-done / .is-now / .is-next) are applied by GRANTS_PAGE_JS from
   window.GRANTS_STATE — the rail is inert and complete without JS, which is
   why every step is legible in the .is-next resting state. */
.gw-pill{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--jade); border:1px solid var(--jade-line); border-radius:999px; padding:7px 14px; margin:0; white-space:nowrap }
.gw-pill.is-open{ background:var(--jade); color:var(--on-jade); border-color:var(--jade) }
.prail{ list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0 }
.prail-step{ position:relative; padding-top:46px }
.prail-step::before{ content:''; position:absolute; top:17px; left:18px; right:0; height:2px; background:var(--hair-2); z-index:0 }
.prail-step:last-child::before{ display:none }
.prail-step.is-done::before{ background:var(--jade) }
.ps-node{ position:absolute; top:0; left:0; z-index:1; width:36px; height:36px; border-radius:50%; border:2px solid var(--hair-2); background:var(--surface); display:grid; place-items:center }
.ps-n{ font-family:var(--mono); font-size:11px; font-weight:600; color:var(--ink-mute) }
.ps-tick{ display:none; font-size:15px; line-height:1; color:var(--on-jade) }
.prail-step.is-now .ps-node{ border-color:var(--jade); box-shadow:0 0 0 4px var(--jade-soft) }
.prail-step.is-now .ps-n{ color:var(--jade) }
.prail-step.is-done .ps-node{ border-color:var(--jade); background:var(--jade) }
.prail-step.is-done .ps-n{ display:none }
.prail-step.is-done .ps-tick{ display:block }
/* S8 batch B — opacity replaced with explicit colours. The rail must be
   legible in its resting state (S6-D7: complete without JS), so a blanket
   opacity that drops text under 4.5:1 defeated its own purpose. Recession is
   now carried by the connector and the node border. To reverse, restore the
   single blanket rule that set opacity .62 on the whole .is-next step. */
.prail-step.is-next::before{ opacity:.62 }
.prail-step.is-next .ps-flag{ opacity:.62 }
.prail-step.is-next .ps-when{ color:var(--ink-mute) }   /* 5.37:1 */
.prail-step.is-next .ps-title{ color:#686d6a }          /* 5.05:1 — the old blend */
.prail-step.is-next .ps-what{ color:#6a7470 }           /* 4.63:1 — was opacity .75 */
.prail-step.is-next .ps-out{ color:#4f7a71 }            /* 4.62:1 — was opacity .73 */
.ps-when{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 7px }
.ps-flag:empty{ display:none }
.ps-flag{ background:var(--jade); color:var(--on-jade); border-radius:999px; padding:2px 8px; font-size:9px; letter-spacing:.12em }
.ps-title{ font-family:var(--serif); font-size:19px; line-height:1.25; font-weight:300; letter-spacing:-.01em; margin:0 0 8px }
.prail-step.is-now .ps-title{ color:var(--jade) }
.ps-body{ padding-right:22px }
.ps-what{ font-size:13px; line-height:1.6; color:var(--ink-soft); margin:0 0 11px }
.ps-out{ font-family:var(--mono); font-size:10px; line-height:1.55; color:var(--jade); margin:0; padding-top:10px; border-top:1px solid var(--hair) }
.prail-note{ margin:26px 0 0; font-size:13px; line-height:1.6; color:var(--ink-soft) }

@media (max-width:900px){
  .prail{ grid-template-columns:1fr; gap:0 }
  .ps-body{ padding-right:0 }
  .prail-step{ padding:0 0 26px 50px }
  .prail-step:last-child{ padding-bottom:0 }
  .prail-step::before{ top:38px; left:17px; right:auto; width:2px; height:calc(100% - 38px) }
  .prail-step:last-child::before{ display:none }
}
@media (max-width:720px){
  .pcards{ grid-template-columns:1fr }
}

/* S9 — hero tiles, 3-up summary, book print view */
.scope-box .sb-tiles{ display:grid; grid-template-columns:1fr 1fr;
  grid-auto-rows:1fr; gap:12px; padding:14px; margin:0; flex:1 1 auto;
  min-height:0; align-content:stretch }
.scope-box .sb-tile{ background:var(--surface); border:1px solid var(--hair);
  border-radius:14px; padding:16px 17px 17px; display:flex;
  flex-direction:column; justify-content:center; gap:6px; min-height:0;
  box-shadow:0 1px 2px rgba(0,0,0,.03) }
.scope-box .sb-tile .n{ font-family:var(--mono); font-size:9.5px;
  letter-spacing:.16em; color:var(--jade) }
.scope-box .sb-tile b{ font-family:var(--serif); font-weight:600;
  font-size:14.5px; line-height:1.24; letter-spacing:-.01em; color:var(--ink) }
.scope-box .sb-tile span:last-child{ font-size:12.5px; line-height:1.45;
  color:var(--ink-soft) }
@media (max-width:560px){ .scope-box .sb-tiles{ grid-template-columns:1fr } }
.plan-sum .grid{ grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:620px){ .plan-sum .grid{ grid-template-columns:1fr 1fr } }
.bk-plan-actions{ page-break-inside:avoid }
@media print{
  .bk-plan-actions, .side, .topbar, .m-header, .mobile-menu, .totop,
  footer, .cta-band, .skip-link{ display:none !important }
  #bk-plan-wrap{ display:block !important }
  #bk-plan-wrap .calc{ border:1px solid #999; box-shadow:none }
  body, .stage{ background:#fff !important; color:#000 !important;
    padding-left:0 !important }
  .calc-row{ break-inside:avoid }
}

/* S10 — hero tile grid fills the flip face */
.heroflip .sf-face .sb-tiles{ flex:1 1 auto }
.heroflip .sf-front .scope-box{ background:var(--paper-2) }
.heroflip .sf-front .sb-head,
.heroflip .sf-front .sb-foot{ background:transparent }
@media (max-width:560px){
  .scope-box .sb-tiles{ grid-template-columns:1fr; gap:10px; padding:10px }
  .scope-box .sb-tile{ padding:13px 14px }
}