/* ===========================================================
   LandedEdge — static site styles
   Palette + type lifted from the live Squarespace site.
   =========================================================== */

:root {
  --navy:   #002B5C;   /* headlines, primary text */
  --teal:   #004D73;   /* body text, buttons, nav  */
  --cream:  #F6EEEA;   /* page background          */
  --paper:  #F6F6F8;   /* light surface / button text */
  --white:  #ffffff;
  --navy-50: rgba(0, 43, 92, 0.5);
  --copper: #b65c3a;            /* accent (matches logo arrow) */
  --copper-soft: rgba(182,92,58,.12);
  --peach: #fbae92;
  --gray: #e5e6e7;
  --ink: #1f2a33;
  --muted: #5a6b77;
  --dim: #8595a0;
  --mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--teal);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 .4em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.9rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2.3vw, 1.7rem); }

p { margin: 0 0 1.1em; }
a { color: inherit; }

img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding: clamp(64px, 9vw, 130px) 0; }
.section--tight { padding: clamp(40px, 6vw, 80px) 0; }
.section--paper { background: var(--paper); }
.section--navy  { background: var(--navy); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--paper); }
.section--navy p { color: rgba(246,246,248,.85); }

.center { text-align: center; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.35rem); max-width: 760px; }
.center .lede { margin-left: auto; margin-right: auto; }
.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .74rem;
  font-weight: 600;
  color: var(--teal);
  margin: 0 0 1.1em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--teal);
  color: var(--paper);
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  padding: 16px 34px;
  border-radius: 300px;
  border: 1.5px solid var(--teal);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.btn:hover { background: transparent; color: var(--teal); transform: translateY(-2px); }
.btn--light { background: var(--paper); color: var(--navy); border-color: var(--paper); }
.btn--light:hover { background: transparent; color: var(--paper); }
.btn--ghost { background: transparent; color: var(--teal); }
.btn--ghost:hover { background: var(--teal); color: var(--paper); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246,238,234,.82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(0,43,92,.08);
  transition: padding .3s ease, box-shadow .3s ease;
}
.site-header.scrolled { box-shadow: 0 6px 30px rgba(0,43,92,.08); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 18px;
  padding-bottom: 18px;
  transition: padding .3s ease;
}
.site-header.scrolled .nav { padding-top: 10px; padding-bottom: 10px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-mark { height: 32px; width: auto; transition: height .3s ease; flex: none; }
.brand-word { font-family: var(--sans); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.015em; color: var(--navy); line-height: 1; white-space: nowrap; }
.site-header.scrolled .brand-mark { height: 28px; }
.site-footer .brand-mark { height: 26px; }
.site-footer .brand-word { color: var(--paper); font-size: 1.25rem; }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 34px);
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  font-size: 1.02rem;
  color: var(--teal);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1.5px; background: var(--teal);
  transition: width .28s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--navy); margin: 5px 0; transition: .3s; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  color: var(--paper);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  will-change: transform;
}
.hero__bg--flip { transform: scaleX(-1) scale(1.08); }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,43,92,.55) 0%, rgba(0,43,92,.35) 40%, rgba(0,43,92,.65) 100%);
}
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-top: 80px; padding-bottom: 80px; }
.hero h1, .hero h2 { color: var(--paper); }
.hero h1 { text-wrap: balance; }
.hero h2 { font-size: clamp(1.6rem, 3.4vw, 2.7rem); margin-bottom: .6em; }
.hero h3 { color: rgba(246,246,248,.92); font-family: var(--sans); font-weight: 400; font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.55; max-width: 720px; }
.hero--short { min-height: 64vh; }
.hero--home { min-height: 72vh; }

/* ---------- Image band ---------- */
.band {
  height: clamp(280px, 46vw, 560px);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@media (hover: none) { .band { background-attachment: scroll; } }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: clamp(20px, 3vw, 36px); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--white);
  border: 1px solid rgba(0,43,92,.08);
  border-radius: 18px;
  padding: clamp(26px, 3vw, 40px);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 18px 50px rgba(0,43,92,.12); }
.card h3 { margin-bottom: .5em; }
.card p { font-size: 1rem; }
.card .btn--ghost { margin-top: 8px; padding: 12px 26px; }

/* feature blocks (no card chrome) */
.feature h3 { margin-bottom: .35em; }
.feature p { font-size: 1rem; }

/* steps with icons */
.step { text-align: center; }
.step__icon {
  width: 84px; height: 84px; object-fit: contain;
  margin: 0 auto 22px;
  border-radius: 16px;
}
.step h3 { font-family: var(--sans); font-weight: 600; font-size: 1.15rem; color: var(--navy); letter-spacing: .01em; }
.step p { font-size: 1rem; }

/* two-column text + image */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split--rev .split__media { order: 2; }
.split__media img { border-radius: 18px; box-shadow: 0 20px 60px rgba(0,43,92,.15); }

.measure { max-width: 720px; }

/* numbered / bulleted feature list */
.stack { display: grid; gap: clamp(22px, 3vw, 40px); }
.stack .feature { padding-bottom: clamp(22px,3vw,40px); border-bottom: 1px solid rgba(0,43,92,.1); }
.stack .feature:last-child { border-bottom: 0; }

/* numbered editorial list (e.g. Navigator capabilities) */
.num-list { max-width: 900px; margin: 0 auto; }
.num-item {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding: clamp(26px, 3.2vw, 40px) 0;
  border-top: 1px solid rgba(0,43,92,.12);
}
.num-item:last-child { border-bottom: 1px solid rgba(0,43,92,.12); }
.num-item .n {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  line-height: 1;
  color: rgba(0,77,115,.4);
  font-weight: 500;
}
.num-item h3 { margin: 0 0 .35em; }
.num-item p { font-size: 1rem; margin: 0; }
@media (max-width: 700px) {
  .num-item { grid-template-columns: 1fr; gap: 6px; padding: 24px 0; }
  .num-item .n { font-size: 1.8rem; }
}

hr.rule { border: 0; border-top: 1px solid rgba(0,43,92,.15); max-width: 80px; margin: 28px 0; }
.center hr.rule { margin-left: auto; margin-right: auto; }

/* ---------- Contact form ---------- */
.form { max-width: 640px; margin: 0 auto; display: grid; gap: 18px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label { display: block; font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 7px; color: var(--teal); }
.form input, .form textarea {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--navy);
  background: var(--white); border: 1px solid rgba(0,43,92,.2);
  border-radius: 12px; padding: 14px 16px; transition: border-color .2s ease, box-shadow .2s ease;
}
.form input:focus, .form textarea:focus { outline: 0; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,77,115,.12); }
.form textarea { min-height: 150px; resize: vertical; }
.form .btn { justify-self: start; cursor: pointer; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(246,246,248,.8); padding: 64px 0 40px; }
.site-footer a { color: var(--paper); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 28px; }
.footer-nav { display: flex; gap: 22px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.disclaimer { font-size: .85rem; line-height: 1.55; max-width: 820px; color: rgba(246,246,248,.6); margin-bottom: 14px; }
.copyright { font-size: .85rem; color: rgba(246,246,248,.55); }

/* ---------- Scroll-in animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
  .hero__bg { transform: none; }
  .hero__bg--flip { transform: scaleX(-1); }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid--3 { grid-template-columns: 1fr; }
  .grid--2 { grid-template-columns: 1fr; }
  .split, .split--rev { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .form .row { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 17.5px; }
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 100%; right: 0; left: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--cream); border-bottom: 1px solid rgba(0,43,92,.1);
    max-height: 0; overflow: hidden; transition: max-height .35s ease; padding: 0 var(--gutter);
  }
  .nav-links.open { max-height: 420px; padding: 12px var(--gutter) 24px; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 12px 0; width: 100%; border-bottom: 1px solid rgba(0,43,92,.07); }
}

/* ===========================================================
   Deck-derived components (Screener / Navigator show-don't-tell)
   Headlines stay Playfair; app mockups use a neutral UI sans.
   =========================================================== */

/* copper accent helpers */
.accent { color: var(--copper); }
.eyebrow.copper { color: var(--copper); }

/* read + label chips */
.chip { display:inline-block; font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.08em; padding:5px 12px; border-radius:5px; text-transform:uppercase; }
.chip.b  { background:var(--teal); color:#fff; }
.chip.bo { border:1px solid rgba(0,77,115,.4); color:var(--teal); background:rgba(0,77,115,.08); }
.chip.p  { border:1px solid var(--peach); color:var(--copper); background:var(--copper-soft); }
.chip.n  { border:1px solid var(--gray); color:var(--muted); background:#fff; }
.chiprow { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.mono { font-family:var(--mono); font-size:.92em; background:var(--cream); border:1px solid var(--gray); border-radius:4px; padding:1px 6px; }

/* numbered process cards (Screener steps, Land/Expand/Retain) */
.pcards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:820px){ .pcards{ grid-template-columns:1fr; } }
.pcards--stack { grid-template-columns:1fr; max-width:960px; }
.pcards--stack .pcard { display:grid; grid-template-columns:auto 1fr; column-gap:18px; align-items:start; }
.pcards--stack .pcard .pnum { margin-bottom:0; grid-row:span 2; }
.pcards--stack .pcard h3 { margin-bottom:.3em; }

/* bottom-line flywheel (Screen -> Implement -> Retain) */
.flywheel { padding:clamp(10px,1.5vw,20px) 0; }
.flywheel .flow { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.flywheel .fstep { flex:1; text-align:center; padding:0 10px; }
.flywheel .fic { width:80px; height:80px; margin:0 auto 18px; border-radius:50%; background:#fff; border:1.5px solid rgba(182,92,58,.45); display:grid; place-items:center; color:var(--copper); }
.flywheel .fic svg { width:38px; height:38px; }
.flywheel .fk { font-family:var(--sans); font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--copper); display:block; margin-bottom:8px; }
.flywheel .fstep h3 { font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem,1.9vw,1.65rem); line-height:1.2; color:var(--navy); margin:0 0 9px; }
.flywheel .fstep p { font-size:clamp(.95rem,1.3vw,1.05rem); line-height:1.5; color:var(--muted); margin:0; }
.flywheel .fconn { flex:none; width:56px; display:flex; align-items:center; justify-content:center; padding-top:40px; color:var(--copper); }
.flywheel .fconn svg { width:56px; height:16px; }
@media(max-width:620px){ .flywheel .flow{ flex-direction:column; } .flywheel .fconn{ width:100%; padding:10px 0; transform:rotate(90deg); } .flywheel .fstep{ padding:0; } }
.pcard { background:#fff; border:1px solid var(--gray); border-radius:14px; padding:26px 24px; box-shadow:0 1px 6px rgba(0,77,115,.05); }
.pnum { width:38px; height:38px; border-radius:50%; background:var(--teal); color:#fff; font-family:var(--sans); font-weight:700; display:grid; place-items:center; font-size:16px; margin-bottom:16px; }
.pcard.copper .pnum { background:var(--copper); }
.pcard h3 { font-family:var(--sans); font-weight:600; font-size:1.15rem; color:var(--navy); margin-bottom:.4em; }
.pcard p { font-size:.98rem; margin:0; }
.pcard .pnum svg { width:20px; height:20px; }

/* larger step eyebrow (Step one / Step two) */
.eyebrow--lg { font-size:.92rem; letter-spacing:.18em; }

/* accordion (Route A / Route B) */
.acc { background:#fff; border:1px solid var(--gray); border-radius:14px; margin-bottom:14px; overflow:hidden; box-shadow:0 1px 6px rgba(0,77,115,.05); }
.acc > button { width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:22px 26px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:var(--sans); color:var(--ink); }
.acc .t { font-size:1.2rem; font-weight:700; color:var(--navy); font-family:var(--serif); }
.acc .tag { font-size:.92rem; color:var(--muted); font-weight:400; display:block; margin-top:3px; }
.acc .chev { flex:none; width:28px; height:28px; border-radius:50%; background:var(--cream); border:1px solid var(--gray); color:var(--teal); display:grid; place-items:center; font-size:13px; transition:transform .25s, background .25s; }
.acc.open .chev { transform:rotate(180deg); background:var(--teal); color:#fff; border-color:var(--teal); }
.acc .acc-body { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.acc .acc-inner { padding:0 26px 24px; color:#42525e; font-size:1rem; }
.acc .acc-inner p { margin-bottom:12px; }
.acc .acc-inner p:last-child { margin-bottom:0; }
.acc .acc-inner b { color:var(--teal); }

/* savings calculator */
.calc { background:#fff; border:1px solid var(--gray); border-radius:16px; overflow:hidden; box-shadow:0 2px 12px rgba(0,77,115,.07); max-width:760px; margin:0 auto; }
.calc .calc-head { padding:16px 24px; border-bottom:1px solid var(--gray); display:flex; justify-content:space-between; align-items:center; background:var(--cream); gap:12px; flex-wrap:wrap; }
.calc .calc-head .eyebrow { margin:0; }
.calc .calc-pad { padding:26px; }
.field { margin-bottom:22px; }
.field label { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.field label output { color:var(--teal); font-size:15px; font-family:var(--mono); text-transform:none; }
input[type=range] { width:100%; -webkit-appearance:none; appearance:none; height:5px; border-radius:3px; background:var(--gray); outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--teal); cursor:pointer; border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.25); }
input[type=range]::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--teal); cursor:pointer; border:3px solid #fff; }
.pills { display:flex; flex-wrap:wrap; gap:8px; }
.pill { font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--muted); background:#fff; border:1px solid var(--gray); border-radius:999px; padding:7px 18px; cursor:pointer; transition:all .15s; }
.pill:hover { border-color:rgba(0,77,115,.4); }
.pill.on { background:var(--teal); border-color:var(--teal); color:#fff; }
.out { display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:14px; margin-top:6px; }
@media(max-width:680px){ .out{ grid-template-columns:1fr; } }
.res { background:var(--cream); border:1px solid var(--gray); border-radius:10px; padding:16px 20px; }
.res .lbl { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:4px; }
.res .val { font-size:clamp(19px,2.4vw,25px); font-weight:800; font-family:var(--mono); color:var(--ink); }
.res.save { background:var(--teal); border-color:var(--teal); }
.res.save .lbl { color:var(--peach); }
.res.save .val { color:#fff; }
.fine { font-size:12px; color:var(--dim); margin-top:16px; }

/* navigator feature band (navy) extras */
.notlist { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:26px; }
@media(max-width:680px){ .notlist{ grid-template-columns:1fr; } }
.not { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:16px 20px; font-size:14px; color:#cfe0ea; }
.not b { color:#fff; display:block; margin-bottom:4px; font-size:14.5px; }
.section--navy .eyebrow { color:var(--peach); }
.section--navy .accent { color:var(--peach); }

/* ===== app mockups ===== */
.app { border:1px solid var(--gray); border-radius:14px; overflow:hidden; box-shadow:0 8px 26px rgba(0,77,115,.12); background:#fff; font-family:var(--sans); font-size:13px; color:var(--ink); }
.app + .app { margin-top:26px; }
.app-cap { font-size:.98rem; color:var(--muted); max-width:780px; margin:0 0 12px; }
.app-cap b { color:var(--navy); }
.app-top { display:flex; align-items:center; justify-content:space-between; padding:11px 16px; border-bottom:1px solid var(--gray); background:#fff; }
.app-top .lg { font-weight:800; color:var(--teal); font-size:14px; }
.app-top .lg .arrow { color:var(--copper); }
.app-top .who { font-size:11px; color:var(--muted); text-align:right; line-height:1.3; }
.app-body { padding:18px; background:linear-gradient(180deg,#fcfaf8,#fff); }
.app-bc { font-size:11.5px; color:var(--dim); margin-bottom:10px; }
.app-bc b { color:var(--muted); font-weight:600; }
.app-h { font-size:18px; font-weight:800; color:var(--ink); margin-bottom:2px; font-family:var(--sans); }
.app-meta { font-size:12px; color:var(--muted); margin-bottom:14px; }
table.t { width:100%; border-collapse:collapse; }
table.t th { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); text-align:left; font-weight:700; padding:6px 10px; border-bottom:1px solid var(--gray); }
table.t td { padding:11px 10px; border-bottom:1px solid var(--gray); vertical-align:middle; }
table.t td .nm { font-weight:700; color:var(--ink); }
table.t td .sm { font-size:11px; color:var(--muted); }
table.t td.c, table.t th.c { text-align:center; }
.dimrow td { opacity:.5; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--copper); margin-right:5px; vertical-align:middle; }
.mini-chip { display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.06em; padding:3px 8px; border-radius:4px; text-transform:uppercase; }
.mc-b { background:var(--teal); color:#fff; }
.mc-bo { border:1px solid rgba(0,77,115,.4); color:var(--teal); background:rgba(0,77,115,.08); }
.flowcard { border:1px solid var(--gray); border-radius:10px; padding:14px 16px; margin-bottom:10px; background:#fff; }
.flowcard .chain { font-weight:700; color:var(--ink); font-size:13.5px; }
.flowcard .note { font-size:11px; color:var(--muted); margin-top:3px; }
.flowcard .meta { display:flex; flex-wrap:wrap; gap:18px; margin-top:10px; }
.flowcard .meta .k { color:var(--dim); text-transform:uppercase; letter-spacing:.08em; font-size:9.5px; }
.flowcard .meta .v { color:var(--ink); font-weight:600; font-size:11px; }
.reads { display:flex; flex-direction:column; gap:6px; align-items:flex-end; flex:none; }
.readrow { display:flex; align-items:center; gap:8px; }
.rlabel { font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); font-weight:700; }
.frow { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.cols2 { display:grid; grid-template-columns:1.3fr 1fr; gap:14px; }
@media(max-width:680px){ .cols2{ grid-template-columns:1fr; } }
.box { border:1px solid var(--gray); border-radius:10px; padding:14px 16px; background:#fff; }
.box h4 { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); font-weight:700; margin-bottom:10px; }
.party { display:flex; gap:10px; margin-bottom:10px; }
.party:last-child { margin-bottom:0; }
.party .pk { font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); width:74px; flex:none; padding-top:2px; }
.party .pv { font-size:12.5px; }
.party .pv b { color:var(--ink); }
.party .pv span { color:var(--muted); font-size:11px; }
.sig { font-size:12px; color:#42525e; margin-bottom:8px; padding-left:14px; position:relative; }
.sig:before { content:""; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%; background:var(--teal); }
.sig:last-child { margin-bottom:0; }
.actionbtns { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.actionbtns.ctr { justify-content:center; }
.ab { font-size:11.5px; font-weight:700; border-radius:7px; padding:10px 16px; }
.ab.solid { background:var(--teal); color:#fff; }
.ab.out { border:1px solid rgba(0,77,115,.4); color:var(--teal); background:#fff; }

/* heatmap */
.htiles { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0; }
@media(max-width:680px){ .htiles{ grid-template-columns:1fr 1fr; } }
.htile { border:1px solid var(--gray); border-radius:9px; padding:10px 12px; background:#fff; }
.htile .hk { font-size:9px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); font-weight:700; }
.htile .hn { font-size:12px; font-weight:700; color:var(--ink); margin:3px 0 6px; }
.htile .hs { font-size:10.5px; color:var(--muted); }
.htile .hs b.ok { color:#2e7d52; }
.htile .hs b.attn { color:#b3261e; }
.legend2 { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:10px; font-size:10.5px; color:var(--muted); }
.legend2 span { display:inline-flex; align-items:center; gap:5px; }
.lz { width:10px; height:10px; border-radius:3px; display:inline-block; }
.lz.ok { background:#cfe9d9; border:1px solid #9fd1b4; }
.lz.attn { background:#fbd9d6; border:1px solid #eba9a3; }
.lz.na { background:#eceef0; border:1px solid var(--gray); }
.hmwrap { overflow-x:auto; }
table.hm { width:100%; border-collapse:separate; border-spacing:3px; font-size:10px; min-width:680px; }
table.hm th { font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); font-weight:700; text-align:left; padding:2px 4px; }
table.hm td.doc { font-size:10px; white-space:nowrap; }
table.hm td.doc .dn { font-weight:700; color:var(--ink); }
table.hm td.doc .dd { font-size:9px; color:var(--muted); }
tr.hsec td { padding-top:9px; font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:var(--teal); font-weight:700; }
.hc { border-radius:5px; padding:6px 7px; text-align:center; font-size:9.5px; font-weight:600; white-space:nowrap; }
.hc.ok { background:#e8f5ee; color:#2e7d52; }
.hc.attn { background:#fdecec; color:#b3261e; border:1px solid #eba9a3; }
.hc.na { background:#f4f4f6; color:#aab1b8; }
.barwrap { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:9px; }
.barwrap .big { font-size:24px; font-weight:800; color:var(--ink); line-height:1; }
.barwrap .sm { font-size:11px; color:var(--muted); }
.bar { height:9px; border-radius:6px; background:var(--gray); overflow:hidden; }
.bar > i { display:block; height:100%; background:#3fae7a; width:87%; }

/* pillar review */
.checkbanner { display:flex; align-items:center; gap:14px; background:rgba(0,77,115,.08); border:1px solid rgba(0,77,115,.35); border-radius:10px; padding:12px 16px; margin-bottom:12px; }
.checkbanner .nbig { font-size:27px; font-weight:800; color:var(--teal); line-height:1; font-family:var(--mono); flex:none; }
.checkbanner .ntxt { font-size:12px; color:var(--ink); line-height:1.45; }
.checkbanner .ntxt b { color:var(--teal); }
.pr { border:1px solid var(--gray); border-radius:10px; margin-bottom:10px; background:#fff; }
.pr-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:12px 14px; }
.pr-head .pt { font-size:13px; font-weight:700; color:var(--ink); }
.pr-head .pd { font-size:11px; color:var(--muted); margin-top:3px; max-width:560px; }
.pr-stat { font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:4px; margin-left:8px; vertical-align:middle; }
.pr-stat.attn { background:#fdecec; color:#b3261e; }
.pr-stat.ok { background:#e8f5ee; color:#2e7d52; }
.pr-open { font-size:10px; color:var(--dim); text-align:right; flex:none; }
.pr-open b { display:block; font-size:13px; color:var(--ink); }
.pr-count { display:inline-flex; align-items:baseline; gap:3px; background:rgba(0,77,115,.09); border:1px solid rgba(0,77,115,.3); border-radius:6px; padding:3px 7px; line-height:1; }
.pr-count b { display:inline; font-family:var(--mono); font-size:14px; font-weight:800; color:var(--teal); line-height:1; }
.pr-count i { font-style:normal; font-size:7.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--teal); font-weight:700; }
.pr-body { border-top:1px solid var(--gray); padding:10px 14px 14px; }
.subcat { font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); font-weight:700; margin:11px 0 4px; }
.pillsample { font-size:11px; color:var(--muted); margin-bottom:6px; }
.ck { display:flex; gap:8px; align-items:flex-start; padding:5px 0; font-size:11.5px; color:#42525e; }
.ck .stdot { width:7px; height:7px; border-radius:50%; flex:none; margin-top:5px; }
.stdot.ok { background:#3fae7a; }
.stdot.attn { background:#d23f31; }
.ck .cid { font-family:var(--mono); font-size:9.5px; color:var(--dim); flex:none; width:50px; margin-top:1px; }
.ck .cref { font-family:var(--mono); font-size:9px; color:var(--dim); display:block; margin-top:2px; }
.ck.flag { background:#fdecec; border:1px solid #eba9a3; border-radius:8px; padding:10px 12px; margin:8px 0; align-items:center; }
.ck.flag.amber { background:#fef6e9; border-color:#edd29a; }
.disp { margin-left:auto; display:flex; gap:6px; flex:none; }
.disp span { font-size:10px; font-weight:700; border:1px solid var(--gray); border-radius:5px; padding:4px 10px; background:#fff; color:var(--muted); }
.morechecks { font-size:11px; color:var(--teal); font-style:italic; border:1px dashed rgba(0,77,115,.35); border-radius:8px; padding:9px 12px; margin-top:10px; text-align:center; background:rgba(0,77,115,.08); }

/* audience list (Screener: vertical, roomy) */
.aud-list { max-width:920px; }
.aud-row { display:grid; grid-template-columns:250px 1fr; gap:clamp(20px,4vw,52px); align-items:start; padding:30px 0; border-top:1px solid rgba(0,43,92,.12); }
.aud-row:last-child { border-bottom:1px solid rgba(0,43,92,.12); }
.aud-row .eyebrow { margin:0 0 .4em; }
.aud-row h3 { margin:0; }
.aud-row p { margin:0; font-size:1rem; }
@media(max-width:680px){ .aud-row{ grid-template-columns:1fr; gap:10px; padding:24px 0; } }

/* redaction blur for demo screenshots (structure visible, answers obscured) */
.blur { filter: blur(5px); -webkit-filter: blur(5px); user-select: none; pointer-events: none; }

/* interactive "what this is" reveal over a blurred zone */
.redact { position: relative; }
.redact::after { content:""; position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:50%; background:var(--copper); opacity:.55; transition:opacity .3s; }
.redact:hover::after, .redact.active::after { opacity:0; }
.redact-pop {
  position:absolute; top:-6px; left:-6px; right:-6px; bottom:auto; min-height:calc(100% + 12px); border-radius:10px;
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  border:1px solid rgba(0,77,115,.25);
  display:flex; flex-direction:column; justify-content:center; gap:7px;
  padding:14px 16px; opacity:0; transform:scale(.985);
  transition:opacity .3s ease, transform .3s ease; pointer-events:none;
  box-shadow:0 10px 26px rgba(0,43,92,.14);
}
.redact:hover .redact-pop, .redact.active .redact-pop { opacity:1; transform:none; pointer-events:auto; }
.redact-tag { font-family:var(--sans); font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--copper); }
.redact-pop p { margin:0; font-size:11.5px; line-height:1.5; color:var(--ink); }
.redact-rotate { color:var(--teal); font-weight:600; }
.redact-cta { align-self:flex-start; margin-top:2px; font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--copper); border-radius:6px; padding:6px 12px; text-decoration:none; pointer-events:auto; }
.redact-cta:hover { background:#a5512f; }
@keyframes calcflash { 0%{ box-shadow:0 0 0 0 rgba(182,92,58,0);} 15%{ box-shadow:0 0 0 4px rgba(182,92,58,.55);} 100%{ box-shadow:0 0 0 0 rgba(182,92,58,0);} }
.calc-flash { animation: calcflash 1.6s ease; }
.redact[data-open-calc] { cursor: pointer; }

/* Touch / small screens: hover + the global auto-rotation don't translate to phones,
   so reveal each explainer in place, stacked below its blurred preview. */
@media (hover: none), (max-width: 720px) {
  .redact-pop {
    position: static;
    min-height: 0;
    margin-top: 10px;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255,255,255,.97);
  }
  .redact::after { display: none; }
}

/* calculator lightbox */
.modal { position:fixed; inset:0; z-index:200; display:none; }
.modal.open { display:block; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,43,92,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.modal-panel { position:relative; max-width:680px; margin:6vh auto; max-height:88vh; overflow:auto; padding:0 16px; }
.modal-close { position:absolute; top:8px; right:24px; z-index:3; background:#fff; border:1px solid var(--gray); width:34px; height:34px; border-radius:50%; font-size:22px; line-height:1; color:var(--muted); cursor:pointer; box-shadow:0 2px 10px rgba(0,43,92,.15); }
.modal-close:hover { color:var(--navy); }
body.modal-open { overflow:hidden; }

/* navigator heatmap tools + traceability + what's-missing panel */
.nav-tools { display:flex; gap:8px; align-items:center; flex:none; }
.tbtn { font-size:11px; font-weight:700; border-radius:6px; padding:7px 12px; border:1px solid var(--gray); background:#fff; color:var(--teal); cursor:pointer; font-family:var(--sans); }
.tbtn.on { background:var(--teal); color:#fff; border-color:var(--teal); }
.tbtn.dark { background:var(--ink); color:#fff; border-color:var(--ink); }
#navbody { position:relative; }
#traceSvg { position:absolute; left:0; top:0; pointer-events:none; opacity:0; transition:opacity .3s; z-index:6; }
#navbody.trace-on #traceSvg { opacity:1; }
.hc.flagcell { box-shadow:0 0 0 2px rgba(210,63,49,.45); }
.needs { margin-top:14px; border:1px solid var(--gray); border-radius:10px; background:#fff; padding:12px 14px; }
.needs-h { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); font-weight:700; margin-bottom:8px; }
.needrow { display:flex; align-items:flex-start; gap:8px; font-size:11.5px; color:#42525e; padding:5px 0 5px 28px; }
.needrow .stdot { margin-top:5px; flex:none; }
.hmsum { font-size:10px; color:var(--dim); margin-top:8px; text-align:right; }
@media (max-width:720px) {
  .nav-tools { display:none; }
  #traceSvg { display:none; }
}

/* boxed closing CTA */
.statement { font-family:var(--serif); color:var(--navy); font-size:clamp(1.2rem,2.2vw,1.6rem); line-height:1.45; margin:0; }
.ctacard { max-width:760px; margin:0 auto; background:var(--navy); color:var(--paper); border-radius:22px; padding:clamp(36px,5vw,60px); text-align:center; box-shadow:0 22px 60px rgba(0,43,92,.18); }
.ctacard .eyebrow { color:var(--peach); }
.ctacard h2 { color:var(--paper); }
.ctacard .lede { color:rgba(246,246,248,.85); margin:0 auto 22px; max-width:600px; }