/* ============================================================
   THE PROFIT SYSTEM: the page styles, shared by the home page and
   /dashboard, /reviews, /about and /book (moved out of index.html
   2026-09-23). The header and footer are chrome.css.
   Light, quiet, generous. White ground, hairline borders,
   one restrained green. Weight and space carry the hierarchy.
   ============================================================ */


:root {
  --bg:        #FFFFFF;
  --bg-soft:   #F7F8F9;
  --bg-soft2:  #F1F3F5;
  --line:      #E6E8EB;
  --line-2:    #D5D9DE;
  --ink:       #0D0F12;
  --ink-2:     #545C67;
  --ink-3:     #858D99;
  --green:     #0B8A4B;
  --green-2:   #12B76A;
  --green-3:   #E7F6EE;
  --red:       #D0453F;
  --red-2:     #FBECEB;
  --amber:     #B4791A;
  --amber-2:   #FBF1E0;

  --r:   10px;
  --r-s: 7px;
  --shadow:   0 1px 2px rgba(13,15,18,.04), 0 6px 20px -8px rgba(13,15,18,.10);
  --shadow-l: 0 1px 2px rgba(13,15,18,.05), 0 24px 56px -24px rgba(13,15,18,.22);

  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(20px, 5vw, 56px);
  --maxw: 1200px;
  color-scheme: light;
}

* { box-sizing: border-box; }

/* No smooth scroll: a 10,000px glide painted blank screens on slower devices. Anchors jump. */
/* anchors must clear the sticky nav */
section[id], main[id] { scroll-margin-top: 78px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; }
img, svg { max-width: 100%; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 920px; margin: 0 auto; padding-inline: var(--gutter); }

h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.06;
  text-wrap: balance;
  margin: 0;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.012em;
  padding: 13px 24px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #24282E; transform: translateY(-1px); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--green-2); outline-offset: 3px; }

/* ---------- nav ---------- */


/* Currency bar */























.btn-green { background: #097A42; color: #fff; } /* white text needs #097A42 for AA (4.42:1 on #0B8A4B) */
.btn-green:hover { background: #086B3A; transform: translateY(-1px); }




















/* Profit Leak Scan band */
.scan-band { background: var(--ink); color: #fff; }
.scan-band .eyebrow { color: #5FE3A6; }
.scan-band h2 { font-size: clamp(30px, 4.2vw, 48px); color: #fff; margin-top: 14px; }
.scan-band .scan-lede { color: #C7CCD3; font-size: 18px; line-height: 1.55; margin: 16px 0 0; max-width: 46ch; }
.scan-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.scan-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: #E6E8EB; font-size: 15.5px; }
.scan-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5FE3A6; margin: 8px 0 0 4px; }
.btn-scan { gap: 8px; }
.safe-line { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; color: #9AA3AE; font-size: 13.5px; }
.safe-line span { display: inline-flex; gap: 6px; align-items: center; }
.safe-line svg { width: 13px; height: 13px; color: #5FE3A6; }







/* ---------- hero ---------- */

.hero { padding-block: clamp(44px, 6.5vw, 78px) clamp(22px, 3vw, 34px); text-align: center; }
.hero h1 { font-size: clamp(27px, 7vw, 46px); margin: 20px auto 0; max-width: 25ch; }
.hero-quip { margin: 18px auto 4px; }
@media (min-width: 700px) { .hero-quip span { white-space: nowrap; } }
.hero-quip span { display: inline-block; max-width: calc(100% - 20px); text-wrap: balance; background: var(--ink); color: #fff; font-size: clamp(17px, 1.75vw, 23px); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; padding: .38em .7em .44em; border-radius: 16px; transform: rotate(-1.5deg); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 14px 44px -10px rgba(18,183,106,.65), 0 4px 14px -6px rgba(16,24,40,.35); }
.hero h1 em { font-style: normal; color: var(--green); }
.hero-sub {
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 54ch;
  margin: 24px auto 0;
  letter-spacing: -.012em;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; justify-content: center; }
.hero-note { font-size: 13.5px; color: var(--ink-3); margin: 18px 0 0; }
.hero-note b { color: var(--green); font-weight: 700; }

/* Founders flank the hero on wide screens, sit under the CTA on narrow ones */
.hero-grid { display: grid; grid-template-columns: 1fr; grid-template-areas: "copy" "founders" "trust"; }
.hero-copy { grid-area: copy; min-width: 0; }
.founders { grid-area: founders; display: contents; }
.founder { margin: 0; text-align: center; }
.hero-trust { grid-area: trust; text-align: center; margin-top: clamp(26px, 3.5vw, 40px); padding-top: clamp(22px, 3vw, 30px); border-top: 1px solid var(--line); }
.hero-trust p { margin: 0; font-size: clamp(16px, 1.6vw, 18px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.stars { display: block; width: 146px; height: 26px; margin: 10px auto 0;
  background: linear-gradient(110deg, #C98A0B 0%, #F2B01E 30%, #FFE9A3 46%, #FFFBEA 50%, #FFE9A3 54%, #F2B01E 70%, #C98A0B 100%);
  background-size: 300% 100%; background-position: 100% 0; animation: glint 3.2s ease-in-out infinite;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 26'%3E%3Cpath d='M13 1.5l3.4 7.3 7.9.9-5.9 5.4 1.6 7.8L13 19l-7 3.9 1.6-7.8L1.7 9.7l7.9-.9z'/%3E%3C/svg%3E") 0 0 / 30px 26px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 26'%3E%3Cpath d='M13 1.5l3.4 7.3 7.9.9-5.9 5.4 1.6 7.8L13 19l-7 3.9 1.6-7.8L1.7 9.7l7.9-.9z'/%3E%3C/svg%3E") 0 0 / 30px 26px repeat-x;
  filter: drop-shadow(0 1px 1px rgba(201,138,11,.25)); }
@keyframes glint { 0%, 15% { background-position: 100% 0; } 60%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .stars { animation: none; background-position: 50% 0; } }
.founder-img {
  display: block; width: 100%; height: auto; aspect-ratio: 640 / 605; object-fit: cover; object-position: top;
  -webkit-mask-image: radial-gradient(ellipse 58% 64% at 50% 40%, #000 58%, transparent 100%);
          mask-image: radial-gradient(ellipse 58% 64% at 50% 40%, #000 58%, transparent 100%);
}
.founder figcaption { margin-top: -6px; position: relative; }
.founder-in { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line-2, #C9CED5); background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 10px -6px rgba(16,24,40,.25); transition: transform .15s ease, background-color .15s ease, color .15s ease; }
.founder-in svg { width: 14px; height: 14px; }
.founder-in:hover { background: var(--green); border-color: var(--green); color: #fff; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .founder-in { transition: none; } .founder-in:hover { transform: none; } }
.founder b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.founder i { display: block; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-top: 6px; line-height: 1.4; }
.founder span { display: block; margin-top: 3px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); line-height: 1.45; }
@media (max-width: 1023.98px) {
  .hero-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "copy copy" "jon josh" "trust trust"; column-gap: 16px; }
  .founder { max-width: 220px; margin-top: 30px; }
  .founder-jon { grid-area: jon; justify-self: end; }
  .founder-josh { grid-area: josh; justify-self: start; }
  .founder span { font-size: 10px; }
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 580px) minmax(0, 1fr); grid-template-areas: "jon copy josh" "trust trust trust"; column-gap: clamp(16px, 2vw, 32px); align-items: center; }
  .hero-grid h1 { font-size: clamp(37px, 3.2vw, 47px); }
  .founder-jon { grid-area: jon; }
  .founder-josh { grid-area: josh; }
  .founder { max-width: 320px; justify-self: center; width: 100%; }
}

.proof-row {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  justify-content: center; margin-top: 34px;
}
.proof-row div {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink-2); font-weight: 500;
}
.tick { width: 16px; height: 16px; flex: none; }

/* ---------- dashboard shell ---------- */

.dash-band { padding-bottom: clamp(52px, 7vw, 88px); }
.dash-intro {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.dash-intro p { margin: 0; font-size: 14px; color: var(--ink-3); }
.dash-intro b { color: var(--ink); font-weight: 700; }

.dash {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-l);
  overflow: hidden;
}
.dash-frame { background: #F7F8F9; }
.dash-frame iframe { display: block; width: 100%; height: 2900px; border: 0; background: transparent; }
@media (max-width: 700px) { .dash-frame iframe { height: 6000px; } }

/* ---------- generic sections ---------- */

.band { padding-block: clamp(56px, 8vw, 104px); }
.band-soft { background: var(--bg-soft); border-block: 1px solid var(--line); }
.band-head { max-width: 30ch; margin-bottom: clamp(30px, 4vw, 48px); }
.band-head.center { max-width: 760px; margin-inline: auto; text-align: center; }
.band-head h2 { font-size: clamp(30px, 4.2vw, 48px); margin-top: 14px; }
.band-head p { font-size: 18px; line-height: 1.55; color: var(--ink-2); margin: 16px 0 0; max-width: 50ch; letter-spacing: -.012em; }
.band-head.center p { margin-inline: auto; }


/* answers */
.ans-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
@media (max-width: 760px) { .ans-grid { grid-template-columns: 1fr; } }
.ans {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 26px 24px; display: grid; gap: 12px; align-content: start;
}
.band-soft .ans { background: #fff; }
.ans h3 { font-size: clamp(19px, 2.1vw, 23px); }
.ans p { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.58; }
.ans .eyebrow { color: var(--green); }


/* four hires stack */
.stack { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 14px; margin: 0 auto; max-width: 1040px; align-items: stretch; }
@media (max-width: 860px) { .stack { grid-template-columns: 1fr; } }
.stack-hire { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 22px; }
.stack-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.stack-row b { color: var(--ink); font-weight: 800; white-space: nowrap; letter-spacing: -.02em; }
.stack-row.stack-total { border-bottom: 0; color: var(--ink); font-weight: 700; }
.stack-row.stack-total b { color: var(--red); font-size: clamp(18px, 2.2vw, 22px); }
@media (max-width: 480px) { .stack-row { flex-direction: column; gap: 2px; } }
.stack-us { background: var(--ink); color: #C7CCD3; border-radius: var(--r); padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.stack-us .eyebrow { color: #5FE3A6; margin: 0; }
.stack-us p { margin: 0; font-size: 15.5px; line-height: 1.6; }
.stack-us .stack-big { color: #fff; font-size: clamp(22px, 2.8vw, 30px); font-weight: 800; letter-spacing: -.035em; line-height: 1.2; }
.stack-us .btn { align-self: flex-start; }
.stack-src { max-width: 1040px; margin: 12px auto clamp(28px, 4vw, 44px); font-size: 12.5px; color: var(--ink-3); text-align: center; line-height: 1.6; }
/* scan odds */
.scan-odds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
@media (max-width: 480px) { .scan-odds { grid-template-columns: 1fr; } }
.scan-odds div { border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 14px 16px; background: rgba(255,255,255,.04); }
.scan-odds b { color: #5FE3A6; font-size: 15px; letter-spacing: -.015em; }
.scan-odds p { margin: 4px 0 0; color: #E6E8EB; font-size: 14.5px; line-height: 1.5; }
/* timeline */
.tl { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
@media (max-width: 900px) { .tl { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .tl { grid-template-columns: 1fr; } }
.tl-item { border-top: 2px solid var(--ink); padding-top: 18px; }
.tl-when { font-family: var(--mono); font-size: 11.5px; color: var(--green); margin: 0 0 9px; font-weight: 500; }
.tl-item h3 { font-size: 18px; }
.tl-item p { margin: 9px 0 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }

/* pricing */
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; align-items: stretch; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }
.tier { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 26px; display: flex; flex-direction: column; gap: 16px; }
.band-soft .tier { background: #fff; }
.tier.featured { border-color: var(--ink); box-shadow: var(--shadow); }
.tier-top { display: flex; align-items: center; gap: 10px; }
.tier-name { font-size: 15px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.tier-tag { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #fff; background: var(--ink); padding: 3px 9px; border-radius: 999px; margin-left: auto; white-space: nowrap; }
.tier-price { font-size: 42px; font-weight: 800; letter-spacing: -.045em; line-height: 1; margin: 0; }
.tier-price sub { font-size: 13px; font-weight: 600; color: var(--ink-3); vertical-align: baseline; margin-left: 6px; letter-spacing: -.01em; }
.tier-for { font-size: 14.5px; color: var(--ink-2); margin: 0; line-height: 1.5; min-height: 4.5em; }
.tier ul { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 14.5px; color: var(--ink-2); flex: 1; align-content: start; }
.tier li { padding-left: 24px; position: relative; line-height: 1.45; }
.tier li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--green-2); border-bottom: 2px solid var(--green-2);
  transform: rotate(-45deg);
}
.tier li.carry { color: var(--ink); font-weight: 700; }
.tier li.carry::before { display: none; }
.tier li.carry { padding-left: 0; }
.tier .btn { width: 100%; margin-top: auto; }
.tier ul { margin-bottom: 8px; }
.onboard-note { margin: 16px auto 0; max-width: 760px; padding: 12px 16px; border: 1px dashed var(--line-2); border-radius: 12px; background: #fff; font-size: 14px; line-height: 1.55; color: var(--ink-2); text-align: center; }
.onboard-note b { color: var(--ink); }
.price-foot { margin: 22px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.7; text-align: center; }

.guarantee {
  margin-top: clamp(28px, 4vw, 44px);
  background: var(--ink); color: #fff;
  border-radius: var(--r); padding: clamp(28px, 4vw, 44px);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr);
  gap: clamp(20px, 4vw, 48px); align-items: center;
}
@media (max-width: 800px) { .guarantee { grid-template-columns: 1fr; gap: 16px; } }
.guarantee h3 { font-size: clamp(24px, 3vw, 34px); color: #fff; }
.g-3 { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.g-3 li { display: grid; grid-template-columns: 86px 1fr; gap: 14px; align-items: start; color: #C7CCD3; font-size: 15.5px; line-height: 1.55; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.g-3 li:last-child { border-bottom: 0; padding-bottom: 0; }
.g-3 em { font-style: normal; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #5FE3A6; padding-top: 4px; }
.g-3 b { color: #fff; }
@media (max-width: 480px) { .g-3 li { grid-template-columns: 1fr; gap: 4px; } }
.g-plus { margin-top: 18px !important; font-size: 14px !important; color: #9AA3AE !important; }
.g-lead { margin: 0 0 18px !important; font-size: clamp(17px, 1.8vw, 20px) !important; line-height: 1.5 !important; color: #E6E8EB !important; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.g-stack { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: g; }
.g-stack li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; color: #C7CCD3; font-size: 15.5px; line-height: 1.5; }
.g-stack li::before { counter-increment: g; content: counter(g); width: 26px; height: 26px; border-radius: 50%; background: rgba(95,227,166,.14); color: #5FE3A6; font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.g-stack b { color: #fff; }

/* Why a CFO and a CRO */
.duo-head { max-width: 760px; margin: 0 auto clamp(30px, 4vw, 48px); text-align: center; }
.duo-head h2 { font-size: clamp(30px, 4.2vw, 48px); margin-top: 14px; }
.duo-head p { font-size: 18px; line-height: 1.55; color: var(--ink-2); margin: 16px auto 0; max-width: 52ch; }
.duo { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 880px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo-card { border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: clamp(22px, 3vw, 32px); display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: start; }
@media (max-width: 520px) { .duo-card { grid-template-columns: 1fr; } }
.duo-card img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--bg-soft); }
.duo-role { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--green); margin: 0; }
.duo-card h3 { font-size: 24px; margin-top: 6px; }
.duo-q { font-weight: 700; color: var(--ink); margin: 12px 0 0; font-size: 16px; letter-spacing: -.01em; }
.duo-card p.duo-b { color: var(--ink-2); margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; }
.duo-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.duo-facts span { font-size: 12.5px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink); }
.duo-card > div { display: flex; flex-direction: column; }
.duo-in { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 700; color: var(--green); text-decoration: none; }
.duo-in:hover { text-decoration: underline; }
.duo-in svg { width: 18px; height: 18px; }
.duo-story { margin-top: 16px; border-radius: var(--r); background: var(--ink); color: #fff; padding: clamp(24px, 4vw, 44px); display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 880px) { .duo-story { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; } }
.duo-story h3 { font-size: clamp(24px, 3vw, 34px); color: #fff; }
.duo-story p { color: #C7CCD3; margin: 0; font-size: 16.5px; line-height: 1.65; }
.duo-story p + p { margin-top: 12px; }
.duo-story b { color: #fff; }

/* What it's worth */
.worth { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 auto clamp(26px, 4vw, 40px); max-width: 980px; }
@media (min-width: 760px) { .worth { grid-template-columns: 1fr 1fr; } }
.worth div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.worth b { display: block; font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.035em; color: var(--green); }
.worth p { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.guarantee .g-k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #5FE3A6; margin: 0 0 12px; }
.guarantee p { margin: 0; font-size: 16px; line-height: 1.6; color: #C7CCD3; }
.guarantee p + p { margin-top: 12px; }
.guarantee b { color: #fff; font-weight: 700; }

/* fit */
.fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
@media (max-width: 760px) { .fit-grid { grid-template-columns: 1fr; } }
.fit-col { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px; }
.band-soft .fit-col { background: #fff; }
.fit-col h3 { font-size: 18px; margin-bottom: 16px; }
.fit-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fit-col li { padding-left: 26px; position: relative; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.fit-yes li::before {
  content: ""; position: absolute; left: 0; top: .38em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--green-2); border-bottom: 2px solid var(--green-2);
  transform: rotate(-45deg);
}
.fit-no li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 12px; height: 2px; background: var(--ink-3); border-radius: 2px;
}
.fit-no h3 { color: var(--ink-3); }

/* faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative;
  font-size: 17px; font-weight: 700; letter-spacing: -.025em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 27px;
  width: 11px; height: 11px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 31px; }
.faq summary:focus-visible { outline: 2px solid var(--green-2); outline-offset: 2px; }
.faq .ans-p { padding: 0 44px 22px 0; margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.65; }

/* book */
.agenda { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; box-shadow: var(--shadow); }
.band-soft .agenda { background: #fff; }
.agenda ol { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: ag; display: grid; }
.agenda li {
  counter-increment: ag; display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); line-height: 1.5;
}
.agenda li:last-of-type { border-bottom: 0; }
.agenda li::before { content: counter(ag); font-family: var(--mono); font-size: 11px; color: var(--green); padding-top: 3px; }
.agenda .btn { width: 100%; margin-top: 18px; }
.agenda .fine { font-size: 12.5px; color: var(--ink-3); text-align: center; margin: 12px 0 0; }

/* comparison */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
table.cmp { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 14px; }
table.cmp th, table.cmp td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--line); }
table.cmp th[scope="row"] { text-align: left; font-weight: 600; color: var(--ink); width: 34%; }
table.cmp thead th { font-size: 12.5px; font-weight: 700; color: var(--ink-3); background: var(--bg-soft); }
table.cmp thead th.us { color: #fff; background: var(--ink); border-radius: 8px 8px 0 0; }
table.cmp td.us { background: var(--green-3); }
table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td { border-bottom: 0; }
.m-yes, .m-part, .m-no { display: inline-block; width: 18px; height: 18px; vertical-align: middle; }
.cmp-legend { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-3); text-align: center; }

/* illustrations */
.il { display: block; width: 100%; height: auto; border-radius: var(--r); }
.il-wrap { margin-top: clamp(22px, 3vw, 32px); }
.il-cap { font-size: 12.5px; color: var(--ink-3); margin: 10px 0 0; }

/* footer */













.tbc { background: var(--amber-2); color: var(--amber); padding: 0 4px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ===== Clickables pop (2026-09-16, Josh): anything you can click must look clickable ===== */
.btn { box-shadow: 0 1px 2px rgba(13,15,18,.08), 0 6px 16px -6px rgba(13,15,18,.28); transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(13,15,18,.08), 0 14px 26px -10px rgba(13,15,18,.38); }
.btn:active { transform: translateY(0); }
.btn-ghost { border: 1.5px solid var(--ink); }
.btn-green { box-shadow: 0 1px 2px rgba(11,138,75,.25), 0 8px 22px -6px rgba(11,138,75,.5); }
.btn-green:hover { background: #086B3A; box-shadow: 0 2px 4px rgba(11,138,75,.25), 0 16px 30px -8px rgba(11,138,75,.6); }


/* FAQ rows */
.faq summary { transition: color .15s ease; }
.faq summary:hover { color: var(--green); }
.faq summary::before { content: ""; position: absolute; right: 0; top: 17px; width: 30px; height: 30px; border-radius: 50%; background: var(--green-3); border: 1.5px solid #CDEBDA; box-sizing: border-box; }
.faq summary::after { border-color: var(--green); right: 11px; top: 26px; width: 8px; height: 8px; }
.faq details[open] summary::after { top: 30px; }
.faq summary:hover::before { background: var(--green); border-color: var(--green); }
.faq summary:hover::after { border-color: #fff; }

/* text links inside copy */
main p a:not(.btn), main li a:not(.btn) { color: var(--green); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
main p a:not(.btn):hover, main li a:not(.btn):hover { color: #0FA35A; }
.duo-in { text-decoration: underline; text-underline-offset: 3px; }




@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* 2026-09-18 unbundle: core plan vs add-ons */
.tl-add { max-width: 820px; margin: clamp(22px, 3vw, 32px) auto 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; font-size: 15px; line-height: 1.6; color: var(--ink-2); background: var(--bg-soft); }
.tl-add b { color: var(--ink); }
.m-add { display: inline-block; font-size: 11px; font-weight: 700; color: #8A5A0E; background: #FBF1E0; border: 1px solid #F0D9B0; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.worth { margin-top: clamp(28px, 4vw, 44px); }
.worth .worth-alt b { font-size: clamp(18px, 2vw, 21px); color: var(--ink); letter-spacing: -.02em; padding-top: 6px; }
.addon-strip { margin: 18px 0 0; border: 1.5px dashed #BFC6CE; border-radius: var(--r); background: #fff; padding: 18px 22px; }
.addon-k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8A5A0E; margin: 0 0 10px; }
.addon-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
@media (max-width: 760px) { .addon-row { grid-template-columns: 1fr; } }
.addon-row b { display: block; font-size: 16px; letter-spacing: -.02em; }
.addon-row span { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.addon-foot { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.g-plus a { color: #5FE3A6; }
.agenda .fine a { color: var(--green); font-weight: 700; }
 

/* 2026-09-18 irresistible plans */
.plan-ribbon { border: 1px solid var(--line); background: #fff; border-radius: var(--r); padding: 18px 20px; margin: 0 0 16px; }
.plan-ribbon-k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin: 0 0 12px; text-align: center; font-weight: 600; }
.plan-ribbon ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
@media (max-width: 1000px) { .plan-ribbon ul { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .plan-ribbon ul { grid-template-columns: 1fr; } }
.plan-ribbon li { padding-left: 26px; position: relative; }
.plan-ribbon li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 11px; height: 6px; border-left: 2.4px solid var(--green-2); border-bottom: 2.4px solid var(--green-2); transform: rotate(-45deg); }
.plan-ribbon b { display: block; font-size: 14.5px; letter-spacing: -.015em; color: var(--ink); }
.plan-ribbon span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); margin-top: 2px; }
.tier-name { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.tier.featured .tier-name { color: var(--ink); }
.tier-top { min-height: 24px; }
.tier-top .tier-tag { line-height: 1.3; padding-block: 2px; }
.tier-dream { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.03em; line-height: 1.22; color: var(--ink); min-height: 3.66em; }
@media (max-width: 900px) { .tier-dream { min-height: 0; } .tier-for { min-height: 0; } }
.tier-pay { margin: -8px 0 0; font-size: 13.5px; font-weight: 700; color: var(--green); }
.tier-for { min-height: 3em; }
.tier li b { color: var(--ink); font-weight: 700; }
.tier-90 { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--green-3); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.tier-90 b { color: var(--green); }
.tier-price { display: flex; align-items: center; gap: 10px; }
.tier-price sub { margin-left: 0; line-height: 1.3; max-width: 6.5em; }

/* book-a-call after every section */
.sec-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: clamp(28px, 4vw, 44px); text-align: center; }
.sec-cta p { margin: 0; font-size: 14.5px; color: var(--ink-2); max-width: 52ch; }
.sec-cta p a { color: var(--green); font-weight: 700; }
.dash-band .sec-cta { padding-bottom: clamp(8px, 2vw, 16px); }
.sec-cta .btn { gap: 10px; }

/* ============================================================
   2026-09-23: the site became real pages (Dashboard, Pricing,
   Reviews, About, Book) around a shorter home page.
   ============================================================ */

/* Inner pages open with this instead of the home hero */
.page-hero { padding-block: clamp(40px, 6vw, 76px) clamp(26px, 3.5vw, 40px); }
.page-hero.center { text-align: center; }
.page-hero .eyebrow { color: var(--green); }
.page-hero h1 { font-size: clamp(32px, 4.6vw, 54px); margin-top: 16px; max-width: 22ch; }
.page-hero.center h1 { margin-inline: auto; }
.page-hero .lede { font-size: clamp(17px, 1.9vw, 20px); line-height: 1.55; color: var(--ink-2); margin: 18px 0 0; max-width: 58ch; letter-spacing: -.012em; }
.page-hero.center .lede { margin-inline: auto; }
.page-hero .lede b { color: var(--ink); }
/* A tight hero, for pages whose own content should show on the first screen (/dashboard) */
.page-hero.tight { padding-block: clamp(26px, 3.4vw, 42px) clamp(18px, 2.2vw, 26px); }
.page-hero.tight h1 { font-size: clamp(28px, 3.5vw, 44px); margin-top: 12px; max-width: 16ch; }
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px clamp(28px, 4vw, 56px); align-items: end; }
.hero-split .lede { margin: 0; font-size: 16.5px; max-width: none; }
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; } .page-hero.tight h1 { max-width: 20ch; } }

/* Home: one screen of the live dashboard, the rest one click away on /dashboard */
.dash-peek { position: relative; max-height: 1060px; overflow: hidden; }
.dash-peek::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 300px; background: linear-gradient(to bottom, rgba(247,248,249,0) 0%, rgba(247,248,249,.9) 52%, #F7F8F9 100%); pointer-events: none; z-index: 1; }
.peek-open { position: absolute; left: 0; right: 0; bottom: clamp(24px, 4vw, 42px); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding-inline: 16px; }
.peek-open .btn { gap: 10px; }
.peek-open p { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
@media (max-width: 700px) { .dash-peek { max-height: 1180px; } .dash-peek::after { height: 260px; } }

/* The full dashboard on /dashboard */
.dash-full .dash-frame iframe { height: 3200px; }
@media (max-width: 700px) { .dash-full .dash-frame iframe { height: 6800px; } }

/* The end of every inner page: the free scan first, a call second */
.next-band { background: var(--ink); color: #fff; padding-block: clamp(56px, 7vw, 92px); }
.next-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(26px, 4vw, 60px); align-items: center; }
@media (max-width: 880px) { .next-grid { grid-template-columns: 1fr; } }
.next-band .eyebrow { color: #5FE3A6; }
.next-band h2 { color: #fff; font-size: clamp(28px, 3.8vw, 44px); margin-top: 14px; max-width: 20ch; }
.next-sub { color: #C7CCD3; font-size: 17.5px; line-height: 1.55; margin: 16px 0 0; max-width: 50ch; }
.next-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.next-cta .btn { gap: 8px; }
.btn-light { background: #fff; color: var(--ink); border: 1.5px solid #fff; }
.btn-light:hover { background: #E8F6EE; border-color: #E8F6EE; }
.next-cta small { flex-basis: 100%; color: #9AA3AE; font-size: 13.5px; }
.next-list { list-style: none; margin: 0; padding: clamp(18px, 2.4vw, 26px); display: grid; gap: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(255,255,255,.04); }
.next-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; color: #E6E8EB; font-size: 15px; line-height: 1.5; }
.next-list li svg { width: 16px; height: 16px; margin-top: 3px; color: #5FE3A6; }
.next-list li b { color: #fff; }

/* /reviews */
.rating-sum { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; }
.rating-sum p { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.rating-sum .stars { margin: 0; }
.reviews-band { padding-top: 0; }

/* /about */
.about-band { padding-top: 0; }

/* /book: the calendar on the page itself, with what happens on the call beside it */
.book-band { padding-block: clamp(34px, 5vw, 64px) clamp(56px, 7vw, 96px); }
.book-page { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: "head cal" "more cal"; gap: clamp(22px, 3vw, 34px) clamp(28px, 4.5vw, 64px); align-items: start; }
@media (max-width: 980px) { .book-page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "cal" "more"; } }
.book-head { grid-area: head; }
.book-cal { grid-area: cal; }
.book-more { grid-area: more; display: grid; gap: 16px; }
.book-head .eyebrow { color: var(--green); }
.book-head h1 { font-size: clamp(30px, 3.8vw, 44px); margin-top: 14px; }
.book-lede { font-size: 17.5px; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 46ch; }
.pkg-picked { margin: 20px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--green-3); border: 1.5px solid #CDEBDA; }
.pkg-picked[hidden] { display: none; }
.pkg-picked svg { grid-row: span 2; width: 28px; height: 28px; }
.pkg-picked b { font-size: 16px; letter-spacing: -.02em; }
.pkg-picked > span { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.pkg-picked a { color: var(--green); font-weight: 700; }
.cal-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-l); overflow: hidden; }
.cal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.cal-head b { font-size: 17px; letter-spacing: -.02em; }
.cal-head span { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.cal-frame { position: relative; background: #fff; min-height: 640px; }
/* The frame sits over its own loading note and is see-through until Google paints its white page,
   so the note shows while the calendar loads and can never end up covering it (no script involved). */
.cal-frame iframe { position: relative; z-index: 1; display: block; width: 100%; height: 800px; border: 0; background: transparent; }
@media (max-width: 980px) { .cal-frame iframe { height: 900px; } }
.cal-wait { position: absolute; inset: 0 0 auto 0; z-index: 0; height: 240px; display: grid; place-items: center; color: var(--ink-3); font-size: 14px; font-weight: 600; }
.cal-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.cal-foot a { color: var(--green); font-weight: 700; }
.book-more .agenda { box-shadow: none; }
.book-alt { margin: 0; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--line-2); font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.book-alt a { color: var(--green); font-weight: 700; }
.book-quote { margin: 0; padding: 18px 20px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--line); display: grid; gap: 10px; }
.book-quote blockquote { margin: 0; font-size: 15.5px; line-height: 1.55; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.book-quote figcaption { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.book-quote figcaption img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.book-quote figcaption b { color: var(--ink); }
.book-quote .pf-stars { margin: 0; }

/* Home FAQ: the rest of the questions live on the pricing page */
.faq-more { margin: 18px 0 0; font-size: 15px; color: var(--ink-2); }
.faq-more a { color: var(--green); font-weight: 800; }

/* The 404 page: four ways back in, the free scan first */
.lost-band { padding-top: 0; }
.lost-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1040px; margin: 0 auto; }
@media (max-width: 980px) { .lost-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lost-grid { grid-template-columns: 1fr; } }
.lost-card { display: grid; gap: 6px; align-content: start; padding: 22px; border-radius: 16px; border: 1.5px solid var(--line-2); background: #fff; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.lost-card:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: var(--shadow-l); }
.lost-card .eyebrow { color: var(--green); }
.lost-card b { font-size: 19px; letter-spacing: -.025em; line-height: 1.25; }
.lost-card > span:last-child { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.lost-card.lost-main { background: #097A42; border-color: #097A42; color: #fff; }
.lost-card.lost-main .eyebrow, .lost-card.lost-main > span:last-child { color: #E8F6EE; }
.lost-card.lost-main:hover { background: #086B3A; border-color: #086B3A; }

/* ============================================================
   2026-09-24 (Josh): the home page opens on the problem, then
   the answer. Every money question in the business ends up with
   the owner (eight people ask, then the owner asks himself), the
   dashboard straight below is the answer, then the free scan.
   The faces are stock photos (Pexels licence), illustrative only:
   sources in the README, "The problem section".
   ============================================================ */

/* ---------- the problem: who is asking, the question in a bubble, their face beside it ---------- */
.qs-band .band-head { margin-bottom: clamp(28px, 3.6vw, 44px); }
.qs-band .band-head .eyebrow { color: var(--green); }
.qs-band .band-head p b { color: var(--ink); }
.qs-stage { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "team" "else" "you"; gap: 30px; }
.qs-team { grid-area: team; }
.qs-else { grid-area: else; }
.qs-you { grid-area: you; }
.qs-k { margin: 0 0 12px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.qs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.qs { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; align-items: end; }
.qs-who { grid-row: 1; grid-column: 2; margin: 0 0 5px 6px; font-size: 13px; line-height: 1.35; color: var(--ink-3); }
.qs-who b { font-weight: 700; color: var(--ink-2); }
.qs > img { grid-row: 2; grid-column: 1; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--line); box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(13,15,18,.16); }
.qs-q { grid-row: 2; grid-column: 2; margin: 0; padding: 12px 16px 13px; background: #fff; border: 1px solid var(--line); border-radius: 18px 18px 18px 5px; font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); box-shadow: 0 1px 2px rgba(13,15,18,.04), 0 10px 22px -14px rgba(13,15,18,.22); }

/* the owner, late at night, asking himself the last one */
.qs-you { position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: #17110C; aspect-ratio: 4 / 3; box-shadow: var(--shadow-l); }
.qs-you picture, .qs-you img { position: absolute; inset: 0; width: 100%; height: 100%; }
.qs-you img { object-fit: cover; object-position: 68% 30%; }
.qs-you::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(to bottom, rgba(13,15,18,0), rgba(13,15,18,.85)); pointer-events: none; }
.qs-you figcaption { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.qs-me { margin: 0; max-width: 300px; padding: 12px 16px 13px; background: #DDF6E8; color: var(--ink); border-radius: 18px 18px 5px 18px; font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; box-shadow: 0 14px 32px -10px rgba(0,0,0,.65); }
.qs-me-who { margin: 0 6px 0 0; font-size: 13px; line-height: 1.35; color: #D5D9DE; text-align: right; }
.qs-me-who b { color: #fff; }

@media (min-width: 700px) {
  .qs-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "team else" "you you"; gap: 32px 28px; }
  .qs-you { width: 100%; max-width: 760px; justify-self: center; aspect-ratio: 16 / 10; }
}
@media (min-width: 1100px) {
  .qs-stage { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) minmax(0, 1fr); grid-template-areas: "team you else"; align-items: center; gap: 32px; }
  .qs-you { max-width: none; aspect-ratio: 4 / 5; }
  .qs-you img { object-position: 70% 50%; }
  /* the right-hand column mirrors the left: faces on the outside, every question pointed at the owner */
  .qs-else .qs-k { text-align: right; }
  .qs-else .qs { grid-template-columns: minmax(0, 1fr) 44px; }
  .qs-else .qs-who { grid-column: 1; margin: 0 6px 5px 0; text-align: right; }
  .qs-else .qs > img { grid-column: 2; }
  .qs-else .qs-q { grid-column: 1; border-radius: 18px 18px 5px 18px; }
}
@media (max-width: 480px) {
  .qs { grid-template-columns: 38px minmax(0, 1fr); }
  .qs > img { width: 38px; height: 38px; }
  .qs-q, .qs-me { font-size: 16px; padding: 11px 14px 12px; }
  .qs-you figcaption { left: 12px; right: 12px; bottom: 12px; }
}

/* ---------- the answer: the dashboard, impossible to miss ---------- */
.sol-head { max-width: 920px; margin: 0 auto clamp(24px, 3vw, 36px); padding-top: clamp(52px, 7vw, 96px); text-align: center; }
.sol-k { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 7px 14px 7px 12px; border-radius: 999px; background: var(--green-3); border: 1px solid #CDEBDA; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #075E33; }
.sol-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--green-2); animation: sol-live 1.8s ease-out infinite; }
@keyframes sol-live { 0% { box-shadow: 0 0 0 0 rgba(18,183,106,.6); } 75%, 100% { box-shadow: 0 0 0 9px rgba(18,183,106,0); } }
.sol-head h2 { margin: 18px auto 0; max-width: 19ch; font-size: clamp(32px, 5.4vw, 62px); line-height: 1.02; }
.sol-head h2 em { font-style: normal; color: var(--green); }
.sol-sub { margin: 20px auto 0; max-width: 52ch; text-wrap: balance; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; letter-spacing: -.012em; color: var(--ink-2); }
.sol-go { margin-top: 28px; gap: 12px; padding: 15px 28px; font-size: 16px; }
.sol-go span { display: inline-block; font-size: 18px; line-height: 1; animation: sol-bob 1.6s ease-in-out infinite; }
@keyframes sol-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
#dash { scroll-margin-top: 92px; }
.dash-band .dash-frame { border-color: #BFE3CE; box-shadow: 0 0 0 6px rgba(18,183,106,.09), var(--shadow-l); }

/* ---------- the free scan, straight under the dashboard ---------- */
.scan-offer { margin-top: clamp(30px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px clamp(28px, 4vw, 60px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 22px; background: var(--ink); color: #fff; box-shadow: var(--shadow-l); }
@media (min-width: 1024px) { .scan-offer { grid-template-columns: minmax(0, 1fr) auto; } .so-cta { max-width: 400px; } .so-cta .btn { white-space: nowrap; } }
.scan-offer .eyebrow { color: #5FE3A6; }
.scan-offer h3 { margin-top: 12px; font-size: clamp(25px, 3.2vw, 38px); color: #fff; }
.so-lead { margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: #C7CCD3; }
.scan-offer .scan-list { margin-top: 16px; }
.so-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.so-cta .btn { gap: 10px; padding: 17px 26px; font-size: 16.5px; line-height: 1.3; text-align: center; }
.so-cta small { color: #9AA3AE; font-size: 13.5px; line-height: 1.5; }
@media (max-width: 1023.98px) { .so-cta .btn { width: 100%; } }

/* ============================================================
   2026-09-24 (Josh): the home page sells the free scan by showing
   the real report, "What you get" sells the feeling before the
   features (his wellies: warm dry feet on a Sunday walk, not rubber
   and fur lining), and every call to action goes to the free scan.
   ============================================================ */

/* ---------- the free scan: the problem, how easy it is, then the real report ---------- */
.sx-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (min-width: 1024px) { .sx-top { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.sx-band h2 { font-size: clamp(29px, 3.6vw, 44px); max-width: 21ch; }
.sx-band h2 em { font-style: normal; color: #5FE3A6; }
.sx-band .scan-lede { max-width: 50ch; font-size: 17.5px; }
.sx-turn { margin: 18px 0 0; font-size: clamp(18px, 1.9vw, 21px); font-weight: 800; letter-spacing: -.025em; line-height: 1.3; color: #fff; }
.sx-easy { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 480px) { .sx-easy { grid-template-columns: minmax(0, 1fr); } }
.sx-easy li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 11px; align-items: start; align-content: start; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.sx-easy svg { grid-row: span 2; width: 22px; height: 22px; color: #5FE3A6; }
.sx-easy b { font-size: 15.5px; letter-spacing: -.015em; line-height: 1.35; color: #fff; }
.sx-easy span { margin-top: 2px; font-size: 14px; line-height: 1.45; color: #C7CCD3; }

/* the front page of the report, as it renders for the sample business, on a fanned stack of pages
   (the tilted pages reach past a phone's edge, so the band clips sideways: hidden first, clip where supported) */
.sx-band { overflow-x: hidden; overflow-x: clip; }
.sx-report { position: relative; isolation: isolate; margin: 0; }
.sx-paper { position: relative; background: #fff; color: var(--ink); border-radius: 20px; padding: clamp(18px, 2.4vw, 28px); box-shadow: 0 30px 70px -20px rgba(0,0,0,.6); }
.sx-paper::before, .sx-paper::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 20px; background: #fff; }
.sx-paper::before { transform: rotate(3deg) translate(12px, 10px); opacity: .14; }
.sx-paper::after { transform: rotate(1.3deg) translate(6px, 5px); opacity: .28; }
.sx-k { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--green); }
.sx-h { margin: 8px 0 0; font-size: clamp(21px, 2.3vw, 27px); font-weight: 800; letter-spacing: -.035em; line-height: 1.12; }
.sx-meta { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.sx-dx { margin-top: 14px; padding: 11px 14px 12px; border-left: 4px solid var(--green); border-radius: 0 12px 12px 0; background: #F0F9F4; }
.sx-dx span { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.sx-dx p { margin: 3px 0 0; font-size: 15.5px; font-weight: 700; line-height: 1.38; letter-spacing: -.015em; }
.sx-mk { margin: 16px 0 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.sx-moves { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sx-moves li { display: flex; gap: 11px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; }
.sx-moves i { flex: none; display: grid; place-items: center; width: 23px; height: 23px; margin-top: 1px; border-radius: 50%; background: var(--ink); color: #fff; font-style: normal; font-size: 12px; font-weight: 800; }
.sx-moves li > div { flex: 1; min-width: 0; }
.sx-mt { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; font-size: 14.5px; font-weight: 700; line-height: 1.35; letter-spacing: -.015em; }
.sx-mt b { font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.sx-mt small { margin-left: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.sx-ma { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.sx-ma em { font-style: normal; font-weight: 700; color: var(--ink); }
.sx-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
@media (max-width: 380px) { .sx-totals { grid-template-columns: minmax(0, 1fr); } }
.sx-t { padding: 13px 15px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-soft); }
.sx-t span { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; color: var(--ink-3); }
.sx-t b { display: block; margin-top: 6px; font-size: clamp(21px, 2.4vw, 28px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.sx-t1 { background: var(--ink); border-color: var(--ink); }
.sx-t1 span { color: #5FE3A6; }
.sx-t1 b { color: #fff; }
.sx-report figcaption { margin: 16px 0 0; font-size: 13px; line-height: 1.5; text-align: center; color: #9AA3AE; }

/* three more pages of the same report */
.sx-inside { margin-top: clamp(48px, 6vw, 80px); }
.sx-inside-k { margin: 0 0 18px; text-align: center; font-size: clamp(19px, 2.1vw, 24px); font-weight: 800; letter-spacing: -.025em; color: #fff; }
.sx-snips { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.sx-snip { display: flex; flex-direction: column; padding: 18px 20px 20px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 24px 50px -24px rgba(0,0,0,.6); }
.sx-tag { align-self: flex-start; margin: 0 0 10px; padding: 3px 8px; border-radius: 999px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.sx-cash { background: #E7F0FB; color: #1F5FAD; }
.sx-profit { background: var(--green-3); color: var(--green); }
.sx-risk { background: var(--amber-2); color: var(--amber); }
.sx-snip h3 { font-size: 17.5px; letter-spacing: -.025em; line-height: 1.25; }
.sx-snip-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sx-snip-h b { font-size: 19px; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.sx-chart { display: block; width: 100%; height: auto; margin-top: 10px; }
.sx-rows { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); }
.sx-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.sx-rows li span:last-child { font-weight: 700; white-space: nowrap; color: var(--ink); }
.sx-rows li.sx-mine { border-bottom: 0; font-weight: 800; color: var(--ink); }
.sx-rows li.sx-mine span:last-child { font-weight: 800; color: var(--green); }
.sx-rows i { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 3px; }
.sx-split { display: flex; gap: 2px; height: 12px; margin: 14px 0 2px; border-radius: 999px; overflow: hidden; }
.sx-split i { display: block; }
.s-tax, .k-tax { background: #E3A33B; }
.s-bills, .k-bills { background: #C9CED5; }
.s-mine, .k-mine { background: var(--green-2); }
.sx-split .s-tax { flex: 61000; }
.sx-split .s-bills { flex: 24605; }
.sx-split .s-mine { flex: 128395; }
.sx-cap { margin: auto 0 0; padding-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.sx-cap b { color: var(--ink); }
.sx-swipe { display: none; }
@media (max-width: 879px) {
  .sx-snips { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(84%, 340px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 14px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .sx-snips::-webkit-scrollbar { display: none; }
  .sx-snip { scroll-snap-align: start; }
  .sx-swipe { display: block; margin: 12px 0 0; text-align: right; font-size: 13px; font-weight: 700; color: #5FE3A6; }
}

/* the odds, then the button */
.sx-close { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 960px) { .sx-close { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sx-close .scan-odds { margin-top: 0; }
.sx-go { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sx-btn { gap: 10px; padding: 17px 30px; font-size: 17px; }
.sx-go small { font-size: 13.5px; line-height: 1.5; color: #9AA3AE; }
.sx-go .safe-line { margin-top: 6px; }
@media (max-width: 959.98px) { .sx-btn { width: 100%; } }

/* ---------- what you get: the feeling first, then what makes it true ---------- */
.wyg-band .band-head h2 { max-width: 22ch; margin-inline: auto; }
.wyg-band .band-head h2 em { font-style: normal; color: var(--green); }
/* the Sunday walk: the owner at 11pm, turned around. Caption in Josh's words (24 Sep) */
.wyg-hero { position: relative; margin: 0 0 16px; border-radius: 24px; overflow: hidden; background: var(--ink); box-shadow: var(--shadow-l); }
.wyg-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 48% 40%; }
.wyg-hero figcaption { padding: 22px 22px 26px; color: #fff; }
.wyg-big { margin: 0; font-size: clamp(27px, 3vw, 38px); font-weight: 800; letter-spacing: -.04em; line-height: 1.06; text-wrap: balance; }
.wyg-first { margin: 14px 0 0; max-width: 40ch; font-size: 17px; font-weight: 700; line-height: 1.45; letter-spacing: -.015em; color: #fff; }
.wyg-why { margin: 10px 0 0; max-width: 44ch; font-size: 15.5px; line-height: 1.55; color: #D5D9DE; }
@media (min-width: 1024px) {
  .wyg-hero img { aspect-ratio: 2 / 1; object-position: 50% 32%; }
  .wyg-first { font-size: 16.5px; }
  .wyg-hero figcaption { position: absolute; top: 0; right: 0; bottom: 0; width: min(40%, 440px); display: flex; flex-direction: column; justify-content: center; padding: 40px 44px 40px 72px; background: linear-gradient(to right, rgba(13,15,18,0) 0%, rgba(13,15,18,.74) 24%, rgba(13,15,18,.9) 100%); }
}
/* narrower laptops: a taller photo, so the two-part caption always fits beside the family */
@media (min-width: 1024px) and (max-width: 1199.98px) { .wyg-hero img { aspect-ratio: 16 / 9; } }
.wyg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wyg { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.wyg > img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; background: var(--bg-soft2); }
.wyg-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.wyg-k { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0 0 12px; }
.wyg-k span { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.wyg-k em { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.wyg h3 { font-size: clamp(22px, 2.1vw, 26px); letter-spacing: -.035em; }
.wyg-feel { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.wyg-ticks { list-style: none; margin: 16px 0 18px; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.wyg-ticks li { position: relative; padding-left: 26px; font-size: 15px; font-weight: 700; letter-spacing: -.012em; line-height: 1.42; color: var(--ink); }
.wyg-ticks li::before { content: ""; position: absolute; left: 1px; top: .38em; width: 11px; height: 6px; border-left: 2.4px solid var(--green-2); border-bottom: 2.4px solid var(--green-2); transform: rotate(-45deg); }
.wyg-chip { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0; vertical-align: 1px; }
.wyg-how { margin: auto 0 0; padding: 13px 14px; border-radius: 12px; background: var(--bg-soft); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.wyg-how b { color: var(--ink); }
.wyg-swipe { display: none; }
@media (max-width: 999px) {
  .wyg-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(84%, 360px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 14px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .wyg-grid::-webkit-scrollbar { display: none; }
  .wyg { scroll-snap-align: start; }
  .wyg-swipe { display: block; margin: 10px 0 0; text-align: right; font-size: 13px; font-weight: 700; color: var(--green); }
}
.wyg-end { margin-top: clamp(40px, 5vw, 60px); text-align: center; }
.wyg-punch { margin: 0 auto; max-width: 25ch; font-size: clamp(23px, 2.8vw, 34px); font-weight: 800; letter-spacing: -.035em; line-height: 1.18; text-wrap: balance; }
.wyg-end .sec-cta { margin-top: 24px; }

/* ---------- every section ends on the free scan ---------- */
.sec-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- the home page ends on the scan, with a call as the second way in ---------- */
@media (min-width: 881px) { .home-next .next-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.next-photo { width: 100%; max-width: 420px; justify-self: end; margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); }
.next-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 880px) { .next-photo { justify-self: start; max-width: 520px; } .next-photo img { aspect-ratio: 4 / 3; object-position: 50% 26%; } }

/* ========== Heart pass (2026-09-24): one page-scoped block per page. Edit only your own block. ========== */
/* === heart: home === */
/* Heart pass, home (2026-09-24): every question the problem section asks gets its answer further down.
   The why in the 11pm photo's own dark, then daylight. The thread reuses the problem section's bubbles as
   they are: .qs-who/.qs-q (someone asks you), .qs-me/.qs-me-who (you answer). hm- = home only.
   README, "Home heart pass". */

/* the hero eyebrow (JOSH-SWAP 1) wraps evenly on phones, never with a one-word last line */
.hero-copy > .eyebrow { text-wrap: balance; color: var(--ink-2); }

/* ---------- 1. the why: the lights are still off ---------- */
.hm-why { background: radial-gradient(90% 70% at 50% 118%, rgba(255, 184, 108, .28) 0%, rgba(255, 184, 108, 0) 65%), #17110C; color: #fff; padding-block: clamp(48px, 6vw, 76px); text-align: center; }
.hm-why h2 { margin: 0 auto; max-width: 24em; font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -.04em; line-height: 1.1; text-wrap: balance; }
.hm-why h2 span { display: block; }
.hm-why-dim { color: #A39A91; }
.hm-why-lit { color: #fff; }
.hm-why p { margin: 20px auto 0; max-width: 64ch; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: #CFC6BD; text-wrap: pretty; }
main .hm-why p a:not(.btn) { color: #5FE3A6; padding-block: 11px; white-space: nowrap; }
main .hm-why p a:not(.btn):hover { color: #8FF0C4; }
main .hm-why p a:not(.btn):focus-visible { outline: 2px solid #5FE3A6; outline-offset: 3px; border-radius: 4px; }

/* ---------- 2. the thread: a question hangs off a photo's top edge, your answer straddles its bottom edge.
   Both sit in normal flow (negative margins), so they never cover a face and never need a fixed height. ---------- */
.hm-ask { position: relative; z-index: 2; width: fit-content; max-width: min(88%, 320px); margin: 0 0 -8px -4px; text-align: left; }
.hm-ask .qs-who { margin: 0 0 5px 6px; color: var(--ink-2); }
.hm-ask .qs-who b { color: var(--ink); }
.hm-ask .qs-q { box-shadow: 0 1px 2px rgba(13,15,18,.05), 0 14px 28px -16px rgba(13,15,18,.35); }
.hm-reply { position: relative; z-index: 2; width: fit-content; max-width: min(88%, 300px); margin: -28px -4px 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: left; }
.hm-reply .qs-me { box-shadow: 0 16px 30px -14px rgba(13,15,18,.45); }
@media (min-width: 700px) {
  .hm-ask { margin-left: -16px; }
  .hm-reply { margin-right: -16px; }
}
/* the reply arrives as it scrolls in: transform only, never opacity, so it can never be invisible */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hm-reply .qs-me { transform-origin: 100% 100%; animation: hm-pop linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }
  }
}
@keyframes hm-pop { from { transform: translateY(10px) scale(.88); } to { transform: none; } }

/* ---------- 3. the solution: the raise, said yes (HM1, the owner's point of view) ---------- */
.sol-head.hm-sol { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "h" "sub" "fig" "go"; justify-items: center; padding-top: clamp(48px, 6vw, 80px); }
.hm-sol > .sol-k { grid-area: k; }
.hm-sol > h2 { grid-area: h; }
.hm-sol > .sol-sub { grid-area: sub; }
.hm-sol > .hm-yes { grid-area: fig; }
.hm-sol > .sol-go { grid-area: go; }
.hm-yes { width: 100%; max-width: 560px; margin: 30px 0 0; }
.hm-yes .qs-me-who { color: var(--ink-2); }
.hm-yes .qs-me-who b { color: var(--ink); }
.hm-photo { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 10; background: #3A2A1C; box-shadow: var(--shadow-l); }
.hm-photo picture { display: block; height: 100%; }
.hm-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (min-width: 1024px) {
  .sol-head.hm-sol { max-width: none; text-align: left; justify-items: start; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-rows: 1fr auto auto auto auto 1fr; grid-template-areas: ". fig" "k fig" "h fig" "sub fig" "go fig" ". fig"; column-gap: clamp(40px, 5vw, 72px); }
  .hm-sol > h2 { margin: 18px 0 0; max-width: none; font-size: clamp(40px, 3.8vw, 54px); }
  .hm-sol > .sol-sub { margin: 18px 0 0; max-width: 44ch; font-size: clamp(17px, 1.4vw, 19px); text-wrap: pretty; }
  .hm-sol > .hm-yes { max-width: 480px; justify-self: end; align-self: center; margin: 0; }
  .hm-photo { aspect-ratio: 4 / 3; }
  .hm-photo img { object-position: 50% 40%; }
}

/* ---------- 4. #scan: payday (HM2), beside the odds and the button, under the scan's own forecast ---------- */
.sx-close.hm-close { grid-template-areas: "pay" "odds" "go"; }
.hm-close > .hm-pay { grid-area: pay; }
.hm-close > .scan-odds { grid-area: odds; }
.hm-close > .sx-go { grid-area: go; }
.hm-pay { margin: 0; }
.hm-pay img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; background: #1A1D22; box-shadow: 0 30px 70px -24px rgba(0,0,0,.6); }
.hm-pay figcaption { margin: 18px 2px 0; }
.hm-pay-big { margin: 0; font-size: clamp(22px, 2.3vw, 28px); font-weight: 800; letter-spacing: -.035em; line-height: 1.15; color: #fff; text-wrap: balance; }
.hm-pay-why { margin: 8px 0 0; max-width: 46ch; font-size: 15.5px; line-height: 1.55; color: #C7CCD3; }
@media (min-width: 960px) {
  .sx-close.hm-close { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "pay odds" "pay go"; align-items: center; row-gap: 22px; }
  .hm-close > .scan-odds { align-self: end; }
  .hm-close > .sx-go { align-self: start; }
}
@media (min-width: 960px) and (max-width: 1199.98px) { .hm-close > .scan-odds { grid-template-columns: minmax(0, 1fr); } }
/* tablets: the photo and its payday caption side by side, so the button is not a screen below the photo */
@media (min-width: 600px) and (max-width: 959.98px) {
  .hm-pay { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 22px; align-items: center; }
  .hm-pay figcaption { margin: 0; }
}

/* ---------- 5. 14 days: keep your bookkeeper (HM3), on the left, away from What you get's team photo ---------- */
.hm-start { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: clamp(30px, 4vw, 48px); }
.hm-start > .band-head { margin-bottom: 0; }
.hm-keep { width: 100%; max-width: 560px; margin: 0 auto; }
.hm-keep img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 15%; border-radius: 20px; background: var(--bg-soft2); box-shadow: var(--shadow); }
.hm-keep figcaption { margin: 14px 2px 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.hm-keep figcaption b { display: block; margin-bottom: 4px; font-size: clamp(19px, 1.8vw, 22px); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; color: var(--ink); }
@media (min-width: 1024px) {
  .hm-start { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "fig head"; column-gap: clamp(40px, 5vw, 72px); align-items: center; }
  .hm-start > .band-head { grid-area: head; }
  .hm-start > .band-head.center { margin: 0; max-width: 600px; text-align: left; }
  .hm-start > .band-head.center p { margin-inline: 0; }
  .hm-keep { grid-area: fig; max-width: none; margin: 0; }
  .hm-keep img { aspect-ratio: 3 / 2; object-position: 50% 50%; }
}

/* ---------- 6. pricing: FPG&A spelled out once, and the three prices still on one line ---------- */
.hm-prices .tier-top { flex-wrap: wrap; align-content: flex-start; }
.hm-prices .hm-tier-full { flex-basis: 100%; margin: -6px 0 0; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: -.005em; color: var(--ink-2); }
@media (min-width: 901px) { .hm-prices .tier-top { min-height: 46px; } }
/* 901 to 1023px: the spell-out wraps to two lines, so every head (and dream) takes the tallest height */
@media (min-width: 901px) and (max-width: 1023.98px) { .hm-prices .tier-top { min-height: 60px; } .hm-prices .tier-dream { min-height: 4.88em; } }
/* read in order: the name, its spell-out, then the tag (drawn on line 1 as before) */
.hm-prices .hm-tier-full { order: 1; }
/* the ribbon's "Your accountant stays": the wrapped word stays inside the bold line */
.hm-ribbon b > span[data-tax] { display: inline; font: inherit; color: inherit; margin: 0; }

/* ---------- 6b. FAQ head on two lines, not four ---------- */
.hm-faq .band-head { max-width: none; }
.hm-faq .band-head h2 { max-width: 11em; text-wrap: balance; }

/* ---------- 6c. contrast and tap targets (home only: .hm-sol and .proof-band are home only) ---------- */
.hm-sol + .dash-intro p { color: var(--ink-2); }
.proof-band .pf-tag { color: #097A42; }
.proof-band .pf-play { min-height: 44px; }

/* ---------- 6d. no lone last words ---------- */
.hm-ask .qs-q { text-wrap: balance; }
.hm-keep figcaption, .hm-close .sx-go small, .hm-why ~ section .sec-cta p, .hm-why ~ #proof .pf-q-lg { text-wrap: pretty; }

/* ---------- 7. the close: the partner's question, answered on the kitchen photo (HM4, no new photo) ---------- */
.hm-trip { width: 100%; max-width: 420px; justify-self: end; }
.hm-trip .next-photo { max-width: none; }
.home-next .hm-ask .qs-who { color: #9AA3AE; }
.home-next .hm-ask .qs-who b { color: #fff; }
@media (max-width: 880px) { .hm-trip { justify-self: start; max-width: 520px; } .hm-trip .hm-ask { margin-bottom: 6px; } }
/* === /heart: home === */
/* === heart: book === */
/* /book heart pass (24 Sep 2026). One moment: not alone any more. BK1 (a woman mid-laugh on her call,
   captioned as the visitor) beside the calendar; what the call feels like and what you leave with;
   Laura's own video; who's behind it; then the school gate (BK2) in the walk's .wyg-hero, split.
   Photos are Pexels stock, illustrative only (README, "/book").
   The calendar: Google lays its schedule out side by side only when the frame is 600px wide or more,
   and stacks the times under the month below that. Measured 24 Sep once a date is picked (Google's
   whole page): 887px tall at a 600px frame, 869 at 638, 854 at 920; 1,329 at 552; 1,345 at 348
   (a 390 phone); 1,429 at 278 (a 320 phone). Heights come from a container query on the frame's own
   width. More bookable slots in a day = about 48px taller per extra row of times: raise all three. */

/* AA contrast for the small text on this page: a deeper green and a deeper ink-3 (as /about's block) */
.bk-heart { --green: #097A42; --ink-3: #666E7A; }
.bk-heart { padding-block: clamp(22px, 3vw, 40px) clamp(48px, 6vw, 80px); }
.bk-heart .book-page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "pic" "cal" "plan" "proof"; gap: 18px 0; }
.bk-heart .book-head h1 { margin-top: 12px; text-wrap: balance; }
.bk-sub { margin: 14px 0 0; max-width: 46ch; font-size: clamp(16.5px, 1.4vw, 17.5px); line-height: 1.55; letter-spacing: -.01em; color: var(--ink-2); }

/* BK1: the person on her call, captioned as "you", never as our team */
.bk-pic { grid-area: pic; position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: var(--bg-soft2); box-shadow: var(--shadow); }
.bk-pic img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 30%; }
.bk-pic figcaption { position: absolute; right: 12px; bottom: 12px; display: grid; gap: 1px; padding: 8px 13px 9px 28px; border-radius: 12px; background: rgba(255,255,255,.95); box-shadow: 0 6px 18px -8px rgba(13,15,18,.45); font-size: 13px; line-height: 1.35; color: var(--ink-2); pointer-events: none; }
.bk-pic figcaption b { color: var(--ink); font-weight: 800; letter-spacing: -.01em; }
.bk-pic figcaption span { color: var(--ink); font-weight: 600; }
.bk-pic figcaption::before { content: ""; position: absolute; left: 12px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--green-2); }
@media (prefers-reduced-motion: no-preference) { .bk-pic figcaption::before { animation: sol-live 2.4s ease-out infinite; } }

/* the buyer (?package=): the guarantee line under their package, FPG&A and Executive only */
.bk-heart .pkg-picked { margin-top: 18px; }
.bk-promise { grid-column: 1 / -1; margin: 8px 0 0; padding-top: 10px; border-top: 1px solid #CDEBDA; font-size: 13.5px; font-weight: 700; line-height: 1.45; color: var(--ink); }
.bk-promise[hidden] { display: none; }
.bk-promise a { color: var(--green); font-weight: 700; }

/* the calendar: the times show once a date is picked, and the loading note clears */
.bk-heart .book-cal { scroll-margin-top: 84px; }
.bk-heart .book-cal:focus { outline: none; }
.bk-heart .cal-head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.bk-heart .cal-frame { min-height: 0; container: bkcal / inline-size; }
.bk-heart .cal-frame iframe { height: 1360px; }
@container bkcal (max-width: 339.98px) { .bk-heart .cal-frame iframe { height: 1440px; } }
@container bkcal (min-width: 600px) { .bk-heart .cal-frame iframe { height: 890px; } }
.bk-heart .cal-frame.is-loaded iframe { background: #fff; }
.bk-heart .cal-frame.is-loaded .cal-wait { display: none; }
/* no script, or a frame that never says it loaded: the note still goes (0s, so it isn't motion) */
.bk-heart .cal-wait { animation: bk-wait 0s linear 12s forwards; }
@keyframes bk-wait { to { visibility: hidden; } }
/* the site-wide reduced-motion rule (animation: none !important) would keep the note up forever */
@media (prefers-reduced-motion: reduce) { .bk-heart .cal-wait { animation: bk-wait 0s linear 12s forwards !important; } }

/* what happens on the call: relief first, then what you leave with; the questions as home's bubbles */
.bk-plan { grid-area: plan; margin-top: 10px; background: var(--bg-soft); box-shadow: none; }
.bk-plan > .eyebrow { margin: 0 0 8px; color: var(--green); }
.bk-plan h2 { margin: 0; font-size: clamp(21px, 2vw, 24px); letter-spacing: -.03em; line-height: 1.2; text-wrap: balance; }
.bk-plan li p { margin: 0; }
.bk-plan li b { display: block; margin-bottom: 2px; font-size: 15.5px; letter-spacing: -.015em; color: var(--ink); }
.bk-asks { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.bk-asks span { padding: 8px 13px 9px; background: #fff; border: 1px solid var(--line); border-radius: 16px 16px 16px 5px; font-size: 14.5px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: var(--ink); box-shadow: none; }
.bk-asks span { background: var(--green-3); border-color: #CDEBDA; }
.bk-plan .fine { text-align: left; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--ink-2); }

/* Laura, big enough to feel; the footnote stays with her; then who's behind it (text only) */
.bk-proof { grid-area: proof; margin-top: 10px; }
.bk-proof > .eyebrow { margin-bottom: 12px; color: var(--green); }
.bk-proof .pf-card .pf-play { width: max-content; max-width: calc(100% - 12px); white-space: normal; text-align: left; line-height: 1.15; }
.bk-proof .pf-q { font-size: 17px; font-weight: 700; line-height: 1.42; letter-spacing: -.02em; }
.bk-proof-note { margin: 10px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.bk-behind { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.bk-behind b { color: var(--ink); }
.bk-behind a { color: var(--green); font-weight: 700; }
@media (max-width: 999.98px) {
  .bk-proof .pf-card { display: grid; grid-template-columns: minmax(150px, min(40%, 210px)) minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px 16px 10px 10px; }
  .bk-proof .pf-card .pf-vid { aspect-ratio: 9 / 16; }
  .bk-proof .pf-card .pf-body { padding: 0; display: block; }
  .bk-proof .pf-card .pf-q { margin-top: 0; font-size: 15.5px; }
  .bk-proof .pf-card .pf-play small { display: none; }
}
@media (max-width: 379.98px) {
  .bk-pic figcaption { right: 10px; bottom: 10px; padding: 7px 11px 8px 26px; font-size: 12.5px; }
  .bk-pic figcaption::before { left: 11px; top: 13px; }
  .bk-proof .pf-card { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .bk-proof .pf-card .pf-vid { aspect-ratio: 1 / 1; }
  .bk-proof .pf-card .pf-body { padding: 4px 6px 6px; }
}
@media (min-width: 1000px) { .bk-proof .pf-card { grid-template-columns: 200px minmax(0, 1fr); } }

/* tablets and small laptops: the person beside the words, the calendar full width below */
@media (min-width: 760px) {
  .bk-heart .book-page { grid-template-columns: minmax(0, 1fr) clamp(240px, 34%, 360px); grid-template-areas: "head pic" "cal cal" "plan plan" "proof proof"; column-gap: clamp(24px, 3vw, 40px); row-gap: 24px; align-items: center; }
  .bk-pic img { aspect-ratio: 4 / 3; object-position: 50% 26%; }
  .bk-pic figcaption { right: auto; left: 12px; }
  .bk-plan, .bk-proof { align-self: start; max-width: 760px; }
}
@media (min-width: 600px) and (max-width: 999.98px) { .bk-proof .pf-card .pf-q { font-size: 17px; } }
/* small laptops: the laptop layout with a 602px calendar column (the frame stays 600px or more, so
   Google keeps its side-by-side layout and the dates show on the first screen) */
@media (min-width: 1000px) and (max-width: 1179.98px) {
  .bk-heart .book-page { grid-template-columns: minmax(0, 1fr) 602px; grid-template-rows: min-content min-content auto 1fr; grid-template-areas: "head cal" "pic cal" "plan cal" "plan proof"; column-gap: 32px; row-gap: 22px; align-items: start; }
  .bk-heart .book-head h1 { font-size: 34px; }
  .bk-plan, .bk-proof { max-width: none; margin-top: 0; }
}
/* laptops: words, the person and what happens on the left; the calendar in a column wide enough for
   Google's side-by-side layout, then Laura, on the right. BK1 tucks 24px under the calendar card. */
@media (min-width: 1180px) {
  .bk-heart .book-page { grid-template-columns: minmax(0, 1fr) 640px; grid-template-rows: min-content min-content auto 1fr; grid-template-areas: "head cal" "pic cal" "plan cal" "plan proof"; column-gap: 48px; row-gap: 26px; align-items: start; }
  .bk-pic { margin-right: -72px; }
  .bk-pic img { aspect-ratio: 16 / 10; object-position: 50% 22%; }
  .bk-heart .book-cal { position: relative; z-index: 1; }
  .bk-heart .cal-card { box-shadow: -24px 0 44px -30px rgba(13,15,18,.5), var(--shadow-l); }
  .bk-plan, .bk-proof { max-width: none; margin-top: 0; }
}
/* a buyer (?package=) on a short laptop screen: the package box pushes BK1's chip below the first
   screen while her face stays on it, beside Google's host name. The buyer has already chosen, so the
   box and the calendar carry the first screen and BK1 steps aside. Tall screens keep BK1 and its chip.
   The pic row goes with it: an empty row beside the tall calendar took up to 390px of its height and
   opened a blank gap above the plan (repair, step 4), so the buyer's grid has no pic row at all. */
@media (min-width: 1000px) and (max-height: 899.98px) {
  .bk-heart:has(#pkg-picked:not([hidden])) .bk-pic { display: none; }
  .bk-heart:has(#pkg-picked:not([hidden])) .book-page { grid-template-rows: min-content auto 1fr; grid-template-areas: "head cal" "plan cal" "plan proof"; }
}

/* the school gate: the walk's .wyg-hero, split photo beside caption (base rules untouched) */
.bk-why-band { padding-block: clamp(40px, 6vw, 72px); background: var(--bg-soft); border-top: 1px solid var(--line); }
.wyg-hero.bk-why { margin: 0; }
.wyg-hero.bk-why img { aspect-ratio: 3 / 2; object-position: 42% 40%; }
.wyg-hero.bk-why figcaption { padding: 24px 22px 28px; }
.wyg-hero.bk-why .eyebrow { margin: 0 0 12px; color: #5FE3A6; }
.bk-why-go { margin: 24px 0 0; }
.bk-why-go .btn { gap: 8px; }
.bk-out { margin: 14px 0 0; max-width: 46ch; font-size: 14px; line-height: 1.55; color: #9AA3AE; }
.bk-why .bk-out a { color: #5FE3A6; font-weight: 700; }
@media (max-width: 559.98px) { .bk-why-go .btn { width: 100%; justify-content: center; } }
/* phones: 44px tap targets on the small links (inline padding, so the lines don't move) */
@media (max-width: 759.98px) {
  .bk-heart .pkg-picked a, .bk-heart .bk-behind a, .bk-why .bk-out a, .bk-heart .cal-foot a { padding-block: 13px; }
  .bk-heart .cal-foot { row-gap: 26px; }
}
@media (min-width: 880px) {
  .wyg-hero.bk-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wyg-hero.bk-why img { height: 100%; min-height: 420px; aspect-ratio: auto; object-position: 40% 45%; }
  .wyg-hero.bk-why figcaption { position: static; width: auto; display: block; align-self: center; padding: clamp(32px, 4vw, 52px); background: none; }
}
@media (min-width: 1180px) { .wyg-hero.bk-why { grid-template-columns: 480px minmax(0, 1fr); } }
/* === /heart: book === */
/* === heart: about === */
/* /about heart pass (24 Sep 2026). Two photographs: the life the owner built the business for
   (AB1, Pexels, illustrative, captioned in "you"), then the one real photo of Jon and Josh (AB2),
   mounted as a print beside their letter. Stock is cinema; the real one is a print.
   Scoped: .ab-* are about-only; .wyg-hero is reused as is, with the .ab-fig modifier. */

/* the hero: the walk's box at hero scale, the H1 in its words cell (.ab-cap) */
.ab-hero { padding-block: clamp(12px, 2.2vw, 28px) clamp(32px, 4vw, 48px); }
.wyg-hero.ab-fig { margin: 0; }
.wyg-hero.ab-fig > img { object-position: 30% 0; }
/* .ab-cap is a div, not a figcaption: the H1 and the calls are the heading block, not a caption (a11y, fix2) */
.ab-fig > .ab-cap { padding: 22px 20px 24px; color: #fff; }
.ab-fig .eyebrow { color: #5FE3A6; text-wrap: balance; }
.ab-fig h1 { margin: 12px 0 0; color: #fff; font-size: clamp(28px, 4.4vw, 40px); letter-spacing: -.04em; line-height: 1.06; }
.ab-fig h1 span { display: block; color: #5FE3A6; }
.ab-fig .wyg-first { max-width: 36ch; text-wrap: balance; }
.ab-fig .wyg-why { max-width: 48ch; }
.ab-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 12px; margin-top: 22px; }
.ab-go .btn { gap: 10px; }
.ab-go p { margin: 0; font-size: 14px; line-height: 1.4; color: #C7CCD3; }
/* beats the site-wide green text link (main p a:not(.btn)), which is too dark on ink.
   The 44px tap area is a pseudo-element (below), so the focus ring hugs the words. */
.ab-go p a:not(.btn) { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
.ab-go p a:not(.btn):hover { color: #5FE3A6; }
/* 44px tap areas on the two inline links, drawn by a pseudo-element so the focus ring wraps only the words */
.ab-go p a:not(.btn), .ab-proof .pf-foot a { position: relative; }
.ab-go p a:not(.btn)::before, .ab-proof .pf-foot a::before { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
.ab-talk { white-space: nowrap; }
.ab-go p a:not(.btn):focus-visible { color: #5FE3A6; outline: 2px solid #5FE3A6; outline-offset: 3px; border-radius: 4px; }
/* phones: trim the caption so the green button sits on the first screen at 360x800 */
@media (max-width: 419.98px) {
  .ab-hero { padding-top: 8px; }
  .ab-fig > .ab-cap { padding: 18px 18px 20px; }
  .ab-fig h1 { margin-top: 8px; }
  .ab-fig .wyg-first { margin-top: 10px; font-size: 16px; }
  .ab-fig .wyg-why { font-size: 15px; line-height: 1.5; }
  .ab-go { margin-top: 16px; }
}
/* 320: the button label wraps, so give it the full width and balance the two lines */
@media (max-width: 359.98px) {
  .ab-fig > .ab-cap { padding-inline: 16px; }
  /* only 320 needs the eyebrow's tracking trimmed to stay on one line; the size stays the site's 11.5px */
  .ab-fig .eyebrow { letter-spacing: .04em; }
  .ab-go .btn { width: 100%; padding-inline: 18px; text-wrap: balance; text-align: center; }
}
@media (min-width: 1024px) {
  /* photo BESIDE the words, never under them: both faces stay clear (brief 7, step 7) */
  .wyg-hero.ab-fig { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .wyg-hero.ab-fig > img { height: 100%; aspect-ratio: 4 / 3; object-position: 50% 0; }
  .wyg-hero.ab-fig > .ab-cap { display: flex; flex-direction: column; justify-content: center; padding: 36px 44px; background: var(--ink); }
  .ab-fig h1 { font-size: clamp(30px, 2.6vw, 36px); }
  .ab-fig .wyg-why { font-size: 15px; }
}
/* 1024 to 1199: the photo cell is squarer, so slide left to keep her face and the girl's */
@media (min-width: 1024px) and (max-width: 1199.98px) { .wyg-hero.ab-fig > img { object-position: 43% 0; } }

/* the letter, on a sheet */
.ab-story { background: var(--bg-soft); border-block: 1px solid var(--line); padding-block: clamp(56px, 6vw, 84px); }
.ab-letter { background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-l); padding: clamp(22px, 5.2vw, 72px); }
.ab-read { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "print" "body"; }
.ab-title { grid-area: title; }
/* small green text uses the site's darker green (#097A42, 5.42:1 on white); --green is 4.42:1, under AA */
.ab-title .eyebrow, .ab-team .eyebrow { color: #097A42; }
.ab-title h2 { margin-top: 12px; max-width: 15ch; font-size: clamp(31px, 3.7vw, 46px); }

/* the one real photo of Jon and Josh: a print, never cropped, never wider than about 400px */
.ab-print { grid-area: print; justify-self: center; width: min(100%, 380px); margin: 26px 0 30px; padding: 10px 10px 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 2px rgba(13,15,18,.06), 0 26px 48px -24px rgba(13,15,18,.42); transform: rotate(1.4deg); }
.ab-print img { display: block; width: 100%; height: auto; border-radius: 2px; background: var(--bg-soft2); }
.ab-print figcaption { padding: 12px 6px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); text-align: center; text-wrap: balance; }

.ab-body { grid-area: body; max-width: 36em; }
.ab-body p { margin: 0 0 1em; font-size: 16.5px; line-height: 1.65; letter-spacing: -.008em; color: var(--ink); }
@media (min-width: 768px) { .ab-body p { font-size: 18px; line-height: 1.68; } }
.ab-body .ab-lead { font-size: clamp(18.5px, 1.7vw, 22px); line-height: 1.55; font-weight: 600; letter-spacing: -.018em; }
/* tablets: the opening paragraph stays a step above the 18px body, not just bolder */
@media (min-width: 768px) { .ab-body .ab-lead { font-size: clamp(20px, 1.7vw, 22px); } }
.ab-body .ab-beat { font-weight: 700; letter-spacing: -.015em; padding-left: 16px; border-left: 3px solid var(--green); }
.ab-body p:last-child { margin-bottom: 0; }

/* the hinge: their friendship, turned into the promise, then a real sign-off */
.ab-end { margin-top: clamp(26px, 3.4vw, 44px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); text-align: center; }
.ab-hinge { margin: 0 auto; max-width: 24ch; font-size: clamp(27px, 3.3vw, 42px); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; color: var(--ink); text-wrap: balance; }
.ab-hinge span { display: block; color: var(--green); }
/* tablets and up: two clean lines, as on laptops (the 24ch cap is for phones only) */
@media (min-width: 640px) { .ab-hinge { max-width: none; } }
.ab-sign { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 22px 0 0; }
.ab-sign::before { content: ""; width: 44px; height: 2px; margin-bottom: 8px; background: var(--ink); border-radius: 2px; }
.ab-sign b { font-size: 20px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; color: var(--ink); }
.ab-sign span { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

/* who's behind it: credibility, never delivery */
.ab-team { margin-top: clamp(26px, 3.6vw, 44px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); }
.ab-team h3 { margin-top: 10px; max-width: 30ch; font-size: clamp(22px, 2.3vw, 28px); letter-spacing: -.03em; }
.ab-team-head > p:last-child { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.ab-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 26px; }
.ab-who { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; grid-template-areas: "img id" "bio bio" "in in"; gap: 0 18px; align-items: center; }
.ab-who > img { grid-area: img; width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: var(--bg-soft); }
.ab-id { grid-area: id; }
.ab-who .ab-bio { grid-area: bio; }
/* 44px tap target that hugs the words (not the whole row) */
.ab-who .duo-in { grid-area: in; justify-self: start; min-height: 44px; padding-top: 2px; color: #097A42; }
.ab-who .duo-in:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.ab-who h4 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.ab-role { margin: 4px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #097A42; }
.ab-bio { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
@media (min-width: 880px) { .ab-duo { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (min-width: 1024px) {
  /* one reading column, the print beside it, staying in view while you read */
  /* .ab-read is its own grid, so the sticky print stops at the end of the story and never rides over the hinge or the founders */
  .ab-read { grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 380px); grid-template-rows: auto 1fr; grid-template-areas: "title print" "body print"; column-gap: clamp(40px, 5vw, 72px); }
  .ab-print { align-self: start; justify-self: end; width: 100%; margin: calc(-1 * (clamp(22px, 5.2vw, 72px) + 30px)) 0 0; transform: rotate(2deg); position: sticky; top: 96px; }
  .ab-title h2 { max-width: 16ch; }
  .ab-body { margin-top: 28px; }
}
/* 160px portraits beside the bio only from 1200px: below that the bio column gets too narrow */
@media (min-width: 1200px) {
  .ab-who { grid-template-columns: 160px minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; grid-template-areas: "img id" "img bio" "img in"; gap: 0 24px; align-items: start; }
  .ab-id { padding-top: 14px; }
  .ab-who .ab-bio { margin-top: 10px; }
}

/* proof on white, now the letter sits on the soft band; the care line leads (narrower video column) */
.ab-proof .band-head .eyebrow { color: #097A42; }
/* the owner's H1 stays the loudest line on the page */
.ab-proof .band-head h2 { font-size: clamp(26px, 2.4vw, 34px); }
.ab-proof .pf-tag { color: #097A42; }
/* the footnote is Adam's truth disclosure: readable (6.77:1); its link's 44px tap area is the pseudo-element above */
.ab-proof .pf-foot, .ab-proof .pf-play small { color: var(--ink-2); }
.ab-proof .pf-foot a { color: #097A42; white-space: nowrap; }
.ab-proof .pf-foot a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
/* the site ring (#12B76A) is 2.47:1 on the soft band; --green is 4.16:1 */
.ab-story .btn:focus-visible { outline-color: var(--green); }
@media (min-width: 760px) { .ab-proof .pf-feature { grid-template-columns: minmax(200px, 240px) 1fr; } }
/* the close's sub: even lines, no short last line ("is worth.") */
.ab-proof + .next-band .next-sub { text-wrap: balance; }
/* AA on every /about scan button (fix3): white on --green is 4.41:1, under AA; #097A42 is 5.42:1.
   Scoped to this page, as /book (.bk-heart) and /dashboard (.hd-yes) already do, until the central
   .btn-green and .tc-scan edit lands; then delete these four rules. The header pill and the phone bar
   are chrome, reached through :has() so no shared rule is touched. */
.ab-hero .btn-green, .ab-story .btn-green, .ab-proof + .next-band .btn-green { background: #097A42; }
.ab-hero .btn-green:hover, .ab-story .btn-green:hover, .ab-proof + .next-band .btn-green:hover { background: #086B3A; }
html:has(.ab-hero) .tc-scan { background: #097A42; border-color: #097A42; }
html:has(.ab-hero) .tc-scan:hover { background: #086B3A; border-color: #086B3A; }
/* the band's one card is Richard's written review (final fix, 24 Sep): a readable column, not a full-width slab */
.ab-proof .ab-pf-one { max-width: 620px; margin: 0 auto; }
.ab-proof .ab-pf-one .pf-pull { font-size: clamp(20px, 2.1vw, 24px); }
.ab-proof .ab-pf-one .pf-q { font-size: 16px; }
.ab-proof .ab-pf-one + .pf-foot { max-width: 620px; margin-inline: auto; text-align: center; }
/* === /heart: about === */
/* === heart: dashboard === */
/* /dashboard, heart pass (24 Sep): three moments of one ordinary week, each stamped with its day and time
   in the frame's own mono pill style: the day ends and you know you're OK (hero), the hire said yes
   (under the frame), bedtime and not 11pm (the fifth question). Shared rules (.page-hero, .wyg-*, .ans,
   .band, .sec-cta, .next-band) are untouched: everything here is scoped by an .hd-* class. */

/* the stamp: a moment's day and time, in the frame's mono pill. No status dot, so it can't read as a sync time */
.hd-stamp { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgba(13,15,18,.72); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; line-height: 1.25; white-space: nowrap; pointer-events: none; }
.hd-stamp s { color: rgba(255,255,255,.62); text-decoration-thickness: 1px; }
/* the body's tabular figures open a gap in "11pm" and "14 days": prose figures here are proportional */
.hd-hero .lede, .hd-promise { font-variant-numeric: proportional-nums; }
/* the site's green text link is 4.42:1 on white and 4.08:1 on the paper; the site's own darker green passes AA on both */
main .hd-own a:not(.btn), main .hd-terms a:not(.btn) { color: #097A42; }
main .hd-own a:not(.btn):hover, main .hd-terms a:not(.btn):hover { color: var(--ink); }
/* the site's green is 4.42:1 on white, under AA for these small labels and the white-on-green button: the darker green is 5.42:1 */
.hd-qs .ans .eyebrow { color: #097A42; }
.hd-yes .btn-green { background: #097A42; }
.hd-yes .btn-green:hover { background: #07693A; }
/* the site's focus ring (#12B76A) is 2.62:1 on white; the darker green is 5.42:1 */
.hd-yes .btn:focus-visible { outline-color: #097A42; }
/* the hero stamp's "work's done" would cross her face in the phone and tablet letterbox; the H1 above says it there */
@media (max-width: 899.98px) { .hd-van .hd-stamp-x { display: none; } }
.hd-nw { white-space: nowrap; }
/* no one-word last lines in the two most-read paragraphs and the terms */
.hd-why, .hd-hire .wyg-why, .hd-terms { text-wrap: pretty; }

/* ---------- the hero: copy, then the photo (a letterbox on phones and tablets, a portrait beside the copy on laptops) ---------- */
.hd-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "eye" "h1" "fig" "lede" "own"; align-items: start; }
.hd-hero .eyebrow { grid-area: eye; color: #097A42; }
.page-hero.hd-hero h1 { grid-area: h1; font-size: clamp(28px, 4.2vw, 40px); max-width: 17ch; }
.hd-hero .lede { grid-area: lede; margin: 14px 0 0; max-width: 62ch; font-size: 16.5px; }
.hd-own { grid-area: own; margin: 10px 0 0; font-size: 15.5px; }
/* a 44px tap target with no layout shift: the padding is cancelled by the negative margin */
.hd-own a { display: inline-block; padding-block: 10px; margin-block: -10px; }
/* "Skip the live demo": for keyboard users only, shown when it has focus */
.hd-own .hd-skip:focus-visible { padding-block: 2px; margin-block: 0; outline: 2px solid #097A42; outline-offset: 2px; border-radius: 3px; }
.hd-own .hd-skip:not(:focus-visible) { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hd-van { grid-area: fig; position: relative; margin: 14px 0 0; border-radius: 16px; overflow: hidden; background: var(--ink); box-shadow: var(--shadow); }
/* the 4:5 file, cut to a 5:2 letterbox on her face: the shoreline shows, the mountains and sky don't */
.hd-van img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 2; object-fit: cover; object-position: 38% 53%; }
.hd-van figcaption { display: none; }
/* two columns from 900: below that, a one-column letterbox grows past 800px wide and pushes the picker off the first screen */
@media (min-width: 900px) {
  /* the portrait sits LEFT of the copy, so her gaze (she looks right) runs into the headline */
  .hd-hero-in { grid-template-columns: clamp(270px, 25vw, 350px) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto 1fr; grid-template-areas: "fig t1" "fig eye" "fig h1" "fig lede" "fig own" "fig t2"; column-gap: clamp(40px, 5.5vw, 80px); }
  /* CLS (final fix, 24 Sep): a centred text column moved whole when Manrope swapped in (0.10 to 0.11 on a first visit).
     Top-aligned, with the box held at 400px, the swap only reflows the lede in place (measured 0.063 / 0.031 / 0.029 at
     1024 / 1366 / 1440; 380px lets 1440 back up to 0.117). 400, not the reviewer's 470, keeps the picker nearer the first screen. */
  .hd-hero-in { min-height: 400px; grid-template-rows: 0 auto auto auto auto 1fr; }
  .page-hero.hd-hero h1 { font-size: clamp(38px, 3.7vw, 54px); max-width: 18ch; } /* the H1 is 6 characters longer than the measured one; 18ch keeps it on 3 lines at 1440 */
  .hd-hero .lede { margin-top: 18px; font-size: 17px; max-width: 54ch; }
  .hd-own { margin-top: 14px; }
  .hd-van { margin: 0; border-radius: 22px; box-shadow: var(--shadow-l); }
  .hd-van img { aspect-ratio: 4 / 5; object-position: 50% 50%; }
  .hd-van .hd-stamp { top: 14px; bottom: auto; left: 14px; }
  .hd-van figcaption { display: block; position: absolute; left: 0; right: 0; bottom: 0; padding: 64px 20px 18px; background: linear-gradient(to bottom, rgba(13,15,18,0) 0%, rgba(13,15,18,.72) 55%, rgba(13,15,18,.86) 100%); color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1.42; letter-spacing: -.01em; text-wrap: balance; }
}
/* from 1200 a square crop drops the dark cab roof and keeps both chip rows on a 1366 laptop's first screen */
@media (min-width: 1200px) { .hd-van img { aspect-ratio: 1 / 1; object-position: 50% 100%; } }

/* ---------- under the frame: the turn, then the page's walk (the hire, said yes) ---------- */
.hd-yes { margin-top: clamp(48px, 9vw, 120px); }
.band-head.center.hd-turn { max-width: 1040px; margin-bottom: clamp(22px, 3vw, 34px); }
.hd-turn h2 { font-size: clamp(32px, 5vw, 60px); line-height: 1.02; }
.hd-shot { position: relative; }
/* the frame's not-yet-live parts, said plainly under it */
.hd-demo-note { margin: 14px auto 0; max-width: 70ch; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); text-align: center; }
/* phones and tablets: no sliver of the new hire's head at the edge, and the stamp top right on the dark wall, off the handshake */
@media (max-width: 1023.98px) {
  .hd-hire img { object-position: 12% 40%; }
  .hd-hire .hd-stamp { top: 12px; bottom: auto; left: auto; right: 12px; }
}
/* the new team member's back is a pale shirt: the caption needs a darker ramp than the walk's field,
   held clear for its first 44px so the handshake stays in the light */
@media (min-width: 1024px) {
  .hd-hire figcaption { padding-left: 84px; background: linear-gradient(to right, rgba(13,15,18,0) 0, rgba(13,15,18,0) 44px, rgba(13,15,18,.8) 84px, rgba(13,15,18,.93) 100%); }
  /* photo and caption share one grid cell, so a caption made taller (text spacing, text zoom) grows the figure instead of being cut */
  .hd-hire { display: grid; }
  .hd-hire > .hd-shot, .hd-hire > figcaption { grid-area: 1 / 1; }
  .hd-hire figcaption { position: relative; inset: auto; justify-self: end; min-height: 100%; }
  .hd-hire .hd-shot img { height: 100%; }
}
.hd-yes { scroll-margin-top: 78px; }
.hd-yes .sec-cta p { text-wrap: balance; }

/* ---------- the questions: each answer ends on the moment it gives back ---------- */
.band.hd-qs { padding-top: clamp(48px, 6.5vw, 84px); }
.hd-qs .ans p b { color: var(--ink); font-weight: 700; }
/* two-line question slots, so row 1's answers start level */
@media (min-width: 760px) { .hd-qs .ans h3 { min-height: 2.12em; } }

/* the fifth question, the peak: a lamp-lit spread, the photo beside a page in warm paper */
.hd-night { margin: 14px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 24px; overflow: hidden; background: #FBF5EB; border: 1px solid #EEE2CF; box-shadow: var(--shadow-l); }
.hd-night-img { position: relative; aspect-ratio: 5 / 4; background: #2A2019; }
.hd-night-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 44% 30%; }
.hd-night-img .hd-stamp { left: auto; right: 12px; }
.hd-night figcaption { padding: clamp(24px, 4.2vw, 52px); color: var(--ink); }
.hd-night-k { margin: 0; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #8A5A12; }
.hd-night h3 { margin-top: 10px; font-size: clamp(19px, 2.1vw, 23px); }
.hd-big { margin: 16px 0 0; font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; text-wrap: balance; }
.hd-first { margin: 14px 0 0; max-width: 40ch; font-size: 17px; font-weight: 700; line-height: 1.45; letter-spacing: -.015em; }
.hd-why { margin: 10px 0 0; max-width: 46ch; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
/* the guarantee's own words answer "worth it?", with its scope in the next sentence */
.hd-promise { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #E6D6BD; max-width: 56ch; }
.hd-g { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; color: var(--ink); text-wrap: balance; }
.hd-terms { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
/* the only link to the terms: a 44px tap area with no layout shift (inline padding), kept on one line */
.hd-terms a { padding-block: 13px; white-space: nowrap; }
/* with focus, the ring wraps the link's words, not the padded tap area (which would strike through the terms above).
   The lines are only 2.25px apart (13.5px Manrope on a 20.25px line), so the ring sits inside the link's own font box:
   its top edge on the box top (clear of the descenders above), 2px off the capitals, 2px under its own descenders and 1px
   either side (clear of the full stop before it). The inline padding is cancelled by the negative margin, so nothing moves when it takes focus. */
.hd-terms a:focus-visible { padding: 0 3px 4px; margin-inline: -3px; outline: 2px solid #097A42; outline-offset: -2px; border-radius: 3px; }
/* below 900 a 16:9 crop, lifted to keep his whole face and the toddler's, and a tighter guarantee rule hold the phone page to its length budget */
@media (max-width: 899.98px) { .hd-night-img { aspect-ratio: 16 / 9; } .hd-night-img img { object-position: 44% 12%; } .hd-promise { margin-top: 16px; padding-top: 12px; } }
@media (min-width: 900px) {
  .hd-night { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hd-night-img { aspect-ratio: auto; min-height: 420px; }
  .hd-night figcaption { align-self: center; }
}
/* === /heart: dashboard === */
/* === heart: reviews === */
/* /reviews, heart pass (2026-09-24): the owners' own faces lead, their words follow, the why is told once
   after the proof, and the close turns the reader into the next owner with a story. Everything here is
   scoped to main.rv-page or an rv- class: proof.css, .page-hero, .next-band, .next-cta, .safe-line and the
   base .wyg-hero / .wyg-big / .wyg-first / .wyg-why rules are untouched. */
.rv-page [id^="rv-"] { scroll-margin-top: 92px; }

/* the hero: a row of the reviewers' real faces, each a link to their review */
.rv-hero { padding-bottom: clamp(34px, 4vw, 52px); }
.rv-faces { list-style: none; margin: 20px auto 0; padding: 6px 0 2px; display: flex; justify-content: center; gap: 10px; }
.rv-faces li { flex: none; }
/* beats the site's in-copy link rule (main li a:not(.btn), 0,1,3), so names aren't green, bold and underlined */
.rv-page .rv-faces a { position: relative; font-weight: inherit; display: flex; flex-direction: column; align-items: center; width: 112px; padding: 4px 2px 6px; border-radius: 16px; text-decoration: none; color: var(--ink); }
/* a small green jump badge on each ring's lower right, so a face reads as a link at rest (no hover on touch) */
.rv-faces a::after { content: ""; position: absolute; top: 66px; left: calc(50% + 22px); width: 22px; height: 22px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.5v7M2.8 6.4 6 9.5l3.2-3.1' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 0 0 2.5px #fff; transition: transform .15s ease; }
.rv-faces a:hover::after, .rv-faces a:focus-visible::after { transform: translateY(2px); }
/* hidden to the eye, read aloud: the reviews' heading and the face links' comma and destination */
.rv-page .rv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rv-faces img { display: block; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; background: var(--bg-soft2);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--green-2), 0 12px 24px -12px rgba(13,15,18,.5); transition: transform .15s ease, box-shadow .15s ease; }
.rv-faces b { margin-top: 12px; font-size: 14.5px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.rv-faces span { margin-top: 3px; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); text-wrap: balance; }
.rv-faces a:hover img, .rv-faces a:focus-visible img { transform: translateY(-3px); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--green), 0 16px 28px -12px rgba(11,138,75,.6); }
.rv-page .rv-faces a:hover b, .rv-page .rv-faces a:focus-visible b { color: #097A42; }
.rv-page .rv-faces a:hover, .rv-page .rv-faces a:focus-visible { color: var(--ink); }
.rv-faces a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* small green text at the site's darker green (--green is 4.42:1 on white, under AA) */
.rv-hero .eyebrow, .rv-page .pf-tag, .rv-page .pf-swipe { color: #097A42; }
.rv-hero h1 { margin-top: clamp(20px, 2.6vw, 30px); }
.rv-line { margin: 18px auto 0; max-width: 36ch; font-size: clamp(20px, 2.1vw, 25px); font-weight: 800; letter-spacing: -.028em; line-height: 1.28; text-wrap: balance; }
.rv-line em { font-style: normal; color: var(--green); }
.rv-hero .lede { margin-top: 8px; max-width: 42em; font-size: clamp(16.5px, 1.6vw, 18px); }
.rv-go { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 22px; margin-top: 24px; }
.rv-go .btn { gap: 10px; }
/* a 44px tap target, the underline kept */
.rv-call { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.rv-call:hover, .rv-call:focus-visible { color: #097A42; text-decoration-color: #097A42; }
.rv-hero .rating-sum { margin-top: 24px; gap: 8px; }
.rv-hero .rating-sum p { font-size: 15px; text-wrap: balance; }
@media (max-width: 1099.98px) {
  /* phones and tablets: the faces become a swipe row, like the review cards below.
     Auto margins centre the row when it fits and collapse when it overflows ("safe center" needs Safari 17.6+).
     25 Sep, eight faces (Jamarl, Cheryl): the full-size row is 966px, so it starts at 1100 (a 17px scrollbar
     included); from 950 to 1099 all eight fit at this size (836px). The breakpoint was 800 with six.
     Adding or removing a face: redo these numbers (8 x 112 + 7 x 10 at full size, 8 x 101 + 7 x 4 here). */
  .rv-faces { justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); gap: 4px; }
  .rv-faces li:first-child { margin-inline-start: auto; }
  .rv-faces li:last-child { margin-inline-end: auto; }
  .rv-faces::-webkit-scrollbar { display: none; }
  .rv-faces li { scroll-snap-align: start; }
  .rv-page .rv-faces a { width: 101px; }
  .rv-faces img { width: 64px; height: 64px; }
  .rv-faces b { margin-top: 10px; font-size: 14px; }
  .rv-faces span { font-size: 12px; }
  .rv-faces a::after { top: 52px; left: calc(50% + 16px); width: 20px; height: 20px; background-size: 11px; }
  /* inset, so the scroll row never clips the ring */
  .rv-faces a:focus-visible { outline-offset: -2px; }
}
/* the swipe cue, at every width where faces sit off screen: the items are sized so the row always ends
   55% of the way into a face (--rv-k = whole faces + .55), so the next face circle is always visibly cut,
   about 60% of it showing. A fixed item width left dead zones (at 330 to 370, 440 to 480 and 550 to 590
   the row ended in the gap between two faces and read as complete). Six bands keep each item 90 to 135px,
   so no label gains a line (Lead generation needs 90px). A light edge fade (never to transparent) says
   "more" without hiding the cut face. The cq units follow the hero's real width (no scrollbar error).
   25 Sep: the 7.55 (780 to 949) and 6.55 (700 to 779) bands are new with the seventh and eighth faces,
   which no longer fit at 101px there. */
@media (max-width: 949.98px) {
  .rv-hero { container-type: inline-size; }
  .rv-faces { --rv-k: 7.55; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), rgba(0,0,0,.3)); mask-image: linear-gradient(to right, #000 calc(100% - 24px), rgba(0,0,0,.3)); }
  .rv-page .rv-faces a { padding-inline: 0; width: calc((100vw - var(--gutter)) / var(--rv-k) - 4px); }
  @supports (width: 1cqw) { .rv-page .rv-faces a { width: calc((100cqw - var(--gutter)) / var(--rv-k) - 4px); } }
}
@media (max-width: 779.98px) { .rv-faces { --rv-k: 6.55; } }
@media (max-width: 699.98px) { .rv-faces { --rv-k: 5.55; } }
@media (max-width: 599.98px) { .rv-faces { --rv-k: 4.55; } }
@media (max-width: 479.98px) { .rv-faces { --rv-k: 3.55; } }
@media (max-width: 359.98px) { .rv-faces { --rv-k: 2.55; } }
@media (max-width: 559.98px) { .rv-go .btn { width: 100%; } .rv-hero { padding-top: 30px; } }

/* the reviews: what each owner runs, then the feeling first */
.rv-page .pf-body .pf-tag + .pf-q { margin-top: 10px; }
@media (max-width: 999.98px) { .rv-page .pf-card .pf-tag { margin-top: 14px; } }
.rv-page .pf-card .pf-pull { margin-top: 8px; font-size: 17px; }
.rv-page .pf-card .pf-pull + .pf-q { margin-top: 8px; }
.rv-page .pf-q-lg { text-wrap: pretty; }
/* 0,2,0: proof.css's .pf blockquote { margin: 0 } (0,1,1) would otherwise remove the gap */
.rv-page .rv-q2 { margin-top: 16px; font-size: 15.5px; color: var(--ink-2); }
/* the footnote that makes the proof true, readable (--ink-3 is 3.35:1) */
.rv-page .pf-foot { color: var(--ink-2); }
/* Reduce Motion: park the stars' glint at its resting end, so all five read solid gold */
@media (prefers-reduced-motion: reduce) { .rv-page .stars, .rv-page .pf-stars { background-position: 0 0; } }
/* the card you jumped to from a face lights up, so you know you've landed */
.rv-page :is(.pf-feature, .pf-card, .pf-w):target { animation: rv-lit 2.4s ease-out 1; }
@keyframes rv-lit { 0%, 45% { box-shadow: 0 0 0 3px var(--green-2), var(--shadow); } 100% { box-shadow: var(--shadow); } }
@media (prefers-reduced-motion: reduce) { .rv-page :is(.pf-feature, .pf-card, .pf-w):target { box-shadow: 0 0 0 3px var(--green-2), var(--shadow); } }

/* the why, told once, after the proof */
.rv-why { display: grid; gap: 14px clamp(28px, 5vw, 64px); max-width: none; margin: clamp(48px, 6vw, 72px) auto 0; padding: clamp(26px, 4vw, 52px) clamp(22px, 4vw, 56px); border: 1px solid var(--line); border-radius: 24px; background: var(--bg-soft); }
@media (min-width: 900px) { .rv-why { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; } }
.rv-why .eyebrow { color: #097A42; }
.rv-why h2 { margin-top: 12px; font-size: clamp(28px, 3.2vw, 40px); max-width: 15ch; text-wrap: balance; }
@media (min-width: 900px) { .rv-why h2 { font-size: clamp(28px, 3vw, 36px); max-width: 18ch; } }
.rv-why h2 em { font-style: normal; color: var(--green); }
.rv-why-text { margin: 0; font-size: 17.5px; line-height: 1.6; letter-spacing: -.012em; color: var(--ink-2); max-width: 58ch; }
.rv-why-text b { color: var(--ink); }
.rv-why-text a { color: #097A42; font-weight: 700; white-space: nowrap; }
@media (min-width: 900px) { .rv-why-text { padding-top: 30px; } }

/* the close: the walk's figure on the dark band, then the free scan, a call second */
.rv-close .wyg-hero { margin: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 34px 70px -34px rgba(0,0,0,.9); }
/* .next-band h2 (0,1,1) would resize the caption head: put the walk's size back */
.rv-close .wyg-big { margin: 0; max-width: none; color: #fff; font-size: clamp(27px, 3vw, 38px); }
.rv-close .wyg-first, .rv-close .wyg-why { text-wrap: pretty; }
/* the photo's right third is a pale wall: start the caption gradient darker than the walk's so white text clears AA */
@media (min-width: 1024px) {
  .rv-close .wyg-hero figcaption { padding-left: 92px; background: linear-gradient(to right, rgba(13,15,18,0) 0%, rgba(13,15,18,.18) 5%, rgba(13,15,18,.42) 10%, rgba(13,15,18,.64) 15%, rgba(13,15,18,.8) 21%, rgba(13,15,18,.9) 100%); }
  /* photo and caption share one grid cell, so the figure grows with the caption under text-spacing overrides (WCAG 1.4.12) */
  .rv-close .wyg-hero { display: grid; }
  .rv-close .wyg-hero > img, .rv-close .wyg-hero > figcaption { grid-area: 1 / 1; }
  .rv-close .wyg-hero > img { height: 100%; }
  .rv-close .wyg-hero > figcaption { position: relative; justify-self: end; }
  /* the 20px added to padding-left above is only the gradient's clear ramp: widen the box by the same 20px,
     so the text column and its first character sit exactly where the walk's base caption puts them */
  .rv-close .wyg-hero figcaption { width: calc(min(40%, 440px) + 20px); }
}
.rv-ask { display: grid; gap: 24px clamp(28px, 5vw, 64px); margin-top: clamp(32px, 4vw, 52px); align-items: center; }
@media (min-width: 900px) { .rv-ask { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rv-ask-big { margin: 12px 0 0; color: #fff; font-size: clamp(23px, 2.5vw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.18; text-wrap: balance; }
.rv-ask .next-sub { margin-top: 10px; font-size: 16.5px; }
.rv-ask .next-cta { margin-top: 0; }
.rv-ask .safe-line { margin-top: 14px; }
@media (max-width: 559.98px) { .rv-ask .next-cta .btn { width: 100%; } }
@media (min-width: 900px) and (max-width: 1199.98px) { .rv-ask .next-cta .btn { flex: 1 0 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .rv-faces img, .rv-faces a::after { transition: none; } .rv-faces a:hover img, .rv-faces a:focus-visible img, .rv-faces a:hover::after, .rv-faces a:focus-visible::after { transform: none; } }
/* the warm poster is 9:16 and his face sits low in the 4:5 box: lift the frame so the play chip clears his chin
   at 320 to 390 (final fix, 24 Sep); once it plays, normal framing */
#rv-stephane .pf-vid:not(.is-playing) video { object-position: 50% 78%; }
/* === /heart: reviews === */
/* === heart: notfound === */
/* The 404 (heart pass, 2026-09-24): finding your way. The next steps are signposts, the free scan first,
   and a photo of two walkers reading a map sits beside them on wide screens and under them on phones. */
.nf-hero { padding-bottom: clamp(48px, 6vw, 88px); }
/* small green text at 4.5:1 on white (--green is 4.42:1), and focus kept clear of the sticky header */
.nf-text > .eyebrow { color: #097A42; }
html:has(.nf-hero) { scroll-padding-top: 80px; }
.nf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
@media (min-width: 720px) { .nf-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); } }
.nf-hero h1 { max-width: 14ch; }
.nf-hero .lede { margin-top: 12px; }
.nf-signs { display: grid; gap: 10px; margin-top: 26px; max-width: 520px; }
.nf-sign { display: grid; gap: 2px; padding: 13px 50px 13px 18px; border-radius: 12px 0 0 12px; background: #EDF0F3; color: var(--ink); text-decoration: none; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); transition: transform .15s ease, background-color .15s ease; }
.nf-sign b { font-size: 17px; letter-spacing: -.02em; line-height: 1.3; }
.nf-sign > span:last-child { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.nf-sign b, .nf-sign > span:last-child { text-wrap: pretty; }
/* every arm reads as a link: a green title and an arrow (the arrow stays out of the link's name) */
.nf-sign:not(.nf-main) { background: #E6EBF0; }
.nf-sign:not(.nf-main) b { color: #0A6B3B; }
.nf-sign b::after { content: "\2192"; content: "\2192" / ""; margin-left: 6px; }
.nf-sign:hover { transform: translateX(5px); background: #E1E6EB; }
.nf-sign:not(.nf-main):hover { background: #DCE2E8; }
.nf-sign:focus-visible { outline: 3px solid transparent; outline-offset: -3px; box-shadow: inset 0 0 0 3px var(--ink); }
.nf-sign:focus-visible b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nf-sign.nf-main { padding-block: 16px 17px; background: #097A42; color: #fff; }
.nf-sign.nf-main .eyebrow { order: -1; margin-bottom: 2px; font-size: 11px; color: #E8F6EE; }
.nf-sign.nf-main > span:last-child { color: #E8F6EE; }
.nf-sign.nf-main:hover { background: #086B3A; }
.nf-sign.nf-main:focus-visible { box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 5px #fff; }
@media (prefers-reduced-motion: reduce) { .nf-sign { transition: none; } .nf-sign:hover { transform: none; } }
.nf-photo { margin: 0; border-radius: 22px; overflow: hidden; background: var(--ink); box-shadow: var(--shadow-l); }
.nf-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; }
@media (max-width: 719.98px) { .nf-photo { max-width: 440px; } }
.nf-photo figcaption { padding: 18px 22px 22px; color: #fff; }
.nf-big { margin: 0; font-size: clamp(20px, 2vw, 24px); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; text-wrap: balance; }
.nf-photo figcaption p + p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: #D5D9DE; }
/* === /heart: notfound === */