/* FounderOS™ Buildshop landing page
   Design language: Lenny's Product Pass "sticker sheet" structure (2px ink
   borders, hard offset shadows, pill nav, peach panels) recoloured to the
   Buildshop golden-hour title card. Type is Brad's personal-channel brand:
   Instrument Serif (display), Inter (body), JetBrains Mono (labels).
   Radius rule: panels 32px, cards 24px, FAQ rows 14px, buttons/inputs pill.
   Theme: light only, locked to the brand (color-scheme: light). */

@font-face { font-family: "Instrument Serif"; src: url("assets/fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("assets/fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/JetBrainsMono-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --bg: #FFF3E6;
  --panel: #FFE4CB;
  --strip: #FFD7B0;
  --card: #FFFCF8;
  --accent: #EE7A22;
  --accent-deep: #C9560C;
  --peach: #FBCFA4;
  --shadow: #D2874F;
  --ink: #1B1410;
  --ink-soft: #3E312A;
  --muted: #6B584B;
  --gold: #F0A61E;
  --display: "Instrument Serif", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --border: 2px solid var(--ink);
  --r-panel: 36px;
  --r-card: 30px;
  --r-row: 14px;
  --hard: 0 6px 0 var(--shadow), 0 6px 0 2px var(--ink);
  --hard-sm: 0 4px 0 var(--shadow), 0 4px 0 2px var(--ink);
  --wrap: 1200px;
  --wide: 1332px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Desktop renders at 110% by design (Brad signed off the page at Chrome 110% zoom). */
@media (min-width: 1024px) { html { zoom: 1.1; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(var(--wrap), calc(100% - 40px)); margin-inline: auto; }
.wrap--wide { width: min(var(--wide), calc(100% - 40px)); margin-inline: auto; }
.inner { width: min(1112px, 100%); margin-inline: auto; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ---------- Type ---------- */
.h1, .h2, .h3, .display {
  font-family: var(--display);
  text-wrap: balance;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.02; }
.h2 { font-size: clamp(2.3rem, 4.4vw, 3.9rem); line-height: 1.04; }
.h3 { font-size: 1.45rem; line-height: 1.2; }
em, .it { font-style: italic; }
.h1 em, .h2 em { color: var(--accent-deep); }
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 58ch; }
.kicker {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.center { text-align: center; }
.sec-head { max-width: 800px; margin: 0 auto 44px; text-align: center; }
.sec-head .lede { margin: 16px auto 0; }
.sec-head--left { margin-inline: 0; text-align: left; }
.sec-head--left .lede { margin-inline: 0; }

/* ---------- Buttons (Lenny states: flat at rest, lighter fill + hard shadow on hover) ---------- */
.btn {
  --btn-bg: var(--accent);
  --btn-bg-hover: #F6A85F;
  --btn-fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px;
  border: var(--border);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 0 var(--shadow), 0 0 0 0 var(--ink);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn:hover { transform: translateY(-5px); background: var(--btn-bg-hover); box-shadow: 0 5px 0 var(--shadow), 0 5px 0 2px var(--ink); }
.btn:active { transform: translateY(-1px); box-shadow: 0 1px 0 var(--shadow), 0 1px 0 2px var(--ink); }
.btn:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; }
.btn--peach { --btn-bg: var(--peach); --btn-bg-hover: #FDE1C6; }
.btn--white { --btn-bg: var(--card); --btn-bg-hover: #fff; }
.btn--lg { padding: 19px 32px; font-size: 1.08rem; }
.btn--sm { padding: 11px 18px; font-size: .9rem; }
.btn--ink { --btn-bg: var(--ink); --btn-bg-hover: #3A2A20; --btn-fg: #fff; }
.btn--full { width: 100%; white-space: normal; text-align: center; }
.btn .icon { width: 1.05em; height: 1.05em; }
.btn[disabled] { opacity: .7; cursor: progress; transform: none; box-shadow: none; }
.textlink { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.textlink:hover { color: var(--accent-deep); }

/* ---------- Cards / panels ---------- */
.card {
  background: var(--card);
  border: var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--hard);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
/* Sheet lift: the card rises 4px and its shadow grows 4px, so the bottom sheet stays put */
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--shadow), 0 10px 0 2px var(--ink); }
.panel {
  background: var(--panel);
  border: var(--border);
  border-radius: var(--r-panel);
}
.panel--plain { border: 0; }
.dotted { border-top: 2px dotted var(--ink); }

/* ---------- Countdown bar ---------- */
.bar { position: relative; z-index: 60; height: 42px; background: var(--accent); color: var(--ink); border-bottom: var(--border); }
.bar__in { height: 100%; width: min(var(--wide), calc(100% - 32px)); margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: .92rem; font-weight: 500; white-space: nowrap; }
.bar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); animation: livedot 1.6s ease-in-out infinite; }
.bar__count { font-weight: 700; font-size: .95rem; letter-spacing: .04em; padding: 3px 10px; background: var(--card); border: var(--border); border-radius: 999px; font-variant-numeric: tabular-nums; }
.bar__when { color: rgba(27,20,16,.8); }
.bar__cta { margin-left: 8px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.bar__cta:hover { color: #fff; }
.bar.is-live .bar__count { background: var(--ink); color: #fff; }
@media (max-width: 860px) { .bar__when, .bar__cta { display: none; } .bar__in { gap: 10px; font-size: .84rem; } .bar__label { display: none; } .bar__in::before { content: "Live in"; font-weight: 500; } }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 16px 0 auto; z-index: 50; transition: top .2s var(--ease);
  display: flex; justify-content: center; padding: 0 16px;
  pointer-events: none;
}
.nav__bar {
  pointer-events: auto;
  width: min(980px, 100%);
  height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 10px 0 22px;
  border-radius: 999px;
  background: rgba(255, 236, 216, .78);
  border: 2px solid rgba(27, 20, 16, .12);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 8px 24px rgba(120, 70, 30, .06), inset 0 1px 0 rgba(255,255,255,.5);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.nav.is-scrolled .nav__bar { background: rgba(255, 240, 224, .92); border-color: rgba(27,20,16,.9); box-shadow: 0 8px 24px rgba(120,70,30,.12); }
.brand { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; }
.brand__mark { font-family: var(--display); font-style: italic; font-size: 1.55rem; line-height: 1; letter-spacing: -0.02em; }
.brand__mark sup { font-style: normal; font-size: .5em; vertical-align: super; margin-left: 1px; }
.brand__sub { font-size: .8rem; color: var(--muted); font-weight: 500; }
.nav__links { display: flex; gap: 26px; align-items: center; }
.nav__links a { text-decoration: none; font-weight: 500; font-size: .98rem; }
.nav__links a:hover { color: var(--accent-deep); }
.nav__cta { margin-left: 4px; }
@media (max-width: 860px) {
  .nav__links { display: none; }
  .brand__sub { display: none; }
}

/* ---------- Hero ---------- */
.hero { padding: 118px 0 56px; position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: center; }
.sticker {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 12px;
  background: var(--card);
  border: var(--border);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--accent);
  font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
  transform: rotate(-1.5deg);
  margin-bottom: 26px;
}
.sticker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(238,122,34,.25); animation: livedot 1.6s ease-in-out infinite; }
@keyframes livedot { 0%,100% { box-shadow: 0 0 0 3px rgba(238,122,34,.25);} 50% { box-shadow: 0 0 0 6px rgba(238,122,34,.08);} }
.hero .h1 { margin-bottom: 24px; max-width: 18ch; }
.hero .lede { margin-bottom: 30px; max-width: 54ch; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; }
.hero__ctas .textlink { font-size: 1rem; display: inline-flex; align-items: center; gap: 6px; }

.hero__art { position: relative; min-height: 460px; display: grid; place-items: center; }
.tile { position: relative; width: min(100%, 360px); padding-bottom: 40px; animation: sway 9s ease-in-out infinite; }
.tile__img { position: relative; z-index: 1; width: 100%; height: auto; animation: bob 5.5s ease-in-out infinite; }
/* Cast shadow: a blurred silhouette of the tile itself, squashed onto the ground plane and skewed away from the light. */
.tile__shadow { position: absolute; left: 0; bottom: 34px; width: 100%; height: auto; transform-origin: 50% 100%; transform: translateX(9%) scale(1, .16) skewX(-26deg); opacity: .34; filter: blur(5px); animation: bobshadow 5.5s ease-in-out infinite; pointer-events: none; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes sway { 0%, 100% { translate: -3px 0; } 50% { translate: 3px 0; } }
@keyframes bobshadow { 0%, 100% { opacity: .34; transform: translateX(9%) scale(1, .16) skewX(-26deg); } 50% { opacity: .27; transform: translateX(9%) scale(.96, .145) skewX(-26deg); } }
@media (max-width: 960px) {
  .hero { padding-top: 108px; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__art { min-height: 0; margin-top: 24px; }
  .tile { width: min(70%, 300px); }
  .hero .h1 { max-width: none; }
  .sticker { font-size: .68rem; letter-spacing: .04em; }
  .sticker .sticker__time { display: none; }
}

.tree { font-family: var(--mono); color: var(--ink-soft); }
.tree b { color: var(--ink); font-weight: 700; }
.tree span { padding-left: 1.2em; display: block; }

/* ---------- Ratings rail ---------- */
.rail { padding: 10px 0 24px; }


.rail__track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rail__row { display: flex; gap: 16px; width: max-content; padding: 6px 0 8px; animation: railmove 30s linear infinite; }
.rail__track:hover .rail__row { animation-play-state: paused; }
.rchip { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; background: var(--card); border: var(--border); border-radius: 999px; box-shadow: 0 3px 0 var(--shadow), 0 3px 0 2px var(--ink); }
.rchip img { width: 44px; height: 44px; border-radius: 50%; border: var(--border); object-fit: cover; background: var(--strip); }
.rchip .stars .icon { width: 15px; height: 15px; }
.rchip__name { display: block; font-size: .8rem; font-weight: 600; line-height: 1.1; margin-top: 3px; }
@keyframes railmove { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- Sections ---------- */
.section { padding: 64px 0; }
.section--tight { padding: 48px 0; }

/* Social proof (2 + 1 asymmetric) */
.proof { display: grid; grid-template-columns: 7fr 5fr; gap: 38px; }
.proof__stack { display: grid; gap: 38px; }
.quote { padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 18px; }
.quote--big { padding: 40px; justify-content: space-between; }
.quote--big .quote__text { font-family: var(--display); font-size: 1.75rem; line-height: 1.25; letter-spacing: -0.01em; }
.quote__text { font-size: 1.05rem; color: var(--ink-soft); }
.quote__text::before { content: "\201C"; }
.quote__text::after { content: "\201D"; }
.who { display: flex; align-items: center; gap: 12px; }
.who img { width: 44px; height: 44px; border-radius: 50%; border: var(--border); object-fit: cover; background: var(--strip); }
.who__name { font-weight: 600; line-height: 1.2; }
.who__role { font-size: .86rem; color: var(--muted); }
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars .icon { width: 16px; height: 16px; }
.who--spread { justify-content: space-between; }
@media (max-width: 860px) { .proof { grid-template-columns: 1fr; } }

/* Problem: founder note + gap tiles */
.note {
  max-width: 720px; margin: 0 auto 40px;
  padding: 44px 48px;
  background: var(--card); border: var(--border); border-radius: var(--r-card); box-shadow: var(--hard);
  font-size: 1.12rem; line-height: 1.6; color: var(--ink-soft);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.note:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--shadow), 0 10px 0 2px var(--ink); }
.note p + p { margin-top: 18px; }
.note .stab { font-family: var(--display); font-size: 1.7rem; line-height: 1.2; color: var(--ink); margin-top: 22px; }
.note .stab + .stab { margin-top: 6px; }
.note__hi { font-family: var(--display); font-size: 1.6rem; color: var(--ink); margin-bottom: 18px; }
.note__sign { display: flex; align-items: center; gap: 14px; margin-top: 30px; padding-top: 22px; border-top: 2px dotted rgba(27,20,16,.3); }
.note__sign img { width: 56px; height: 56px; border-radius: 50%; border: var(--border); object-fit: cover; }
.note__name { font-family: var(--display); font-style: italic; font-size: 1.7rem; line-height: 1; color: var(--ink); }
.gaps { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 38px; }
.gap { padding: 28px; border: var(--border); border-radius: var(--r-card); background: var(--panel); }
.gap:first-child { background: var(--accent); color: #fff; }
.gap:first-child .icon { color: #fff; }
.gap:first-child p { color: rgba(255,255,255,.88); }
.gap .icon { width: 30px; height: 30px; color: var(--accent-deep); margin-bottom: 18px; }
.gap h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; }
.gap p { color: var(--ink-soft); font-size: 1rem; }
@media (max-width: 860px) { .gaps { grid-template-columns: 1fr; } .note { padding: 30px 24px; } }

/* Anchored sections land below the fixed nav (e.g. /#demo, /#included) */
section[id] { scroll-margin-top: 100px; }

/* See it in action: walkthrough video above the offer panel */
.notevid { max-width: 960px; margin: 0 auto; }
.notevid .vid__frame { border-bottom: 0; }
.notevid .vid__play { background: linear-gradient(180deg, rgba(27,20,16,.03), rgba(27,20,16,.22)); }
@media (max-width: 640px) { .notevid .vid__play span { width: 56px; height: 56px; } }

/* What's included: offer grid */
.offers { padding: 6px 0 70px; }
.offers .panel { padding: 56px 110px 72px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px 38px; }
.offer { display: flex; flex-direction: column; overflow: hidden; }
.offer:hover { background: #FFF6EC; }
.offer--cover:hover { background: var(--ink); }
.offer:hover .offer__foot { background: #FFE8D2; }
.offer__body { padding: 26px 26px 22px; flex: 1; }
.offer__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 14px; }
.offer__tag .icon { width: 16px; height: 16px; }
.offer h3 { font-size: 1.22rem; font-weight: 600; margin-bottom: 8px; }
.offer p { color: var(--ink-soft); font-size: 1rem; }
.offer code { font-family: var(--mono); font-size: .9em; background: var(--strip); padding: 1px 6px; border-radius: 6px; }
.offer__foot { border-top: 2px dotted var(--ink); background: var(--strip); transition: background .22s var(--ease); padding: 14px 26px; display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.value { font-family: var(--display); font-style: italic; font-size: 2rem; line-height: 1; letter-spacing: -0.01em; }
.value small { font-family: var(--mono); font-style: normal; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-left: 6px; vertical-align: middle; }
.offer--cover { background: var(--ink); color: var(--card); border-color: var(--ink); }
.offer--cover .offer__body { padding: 30px 28px; }
.offer--cover h3 { color: #fff; font-family: var(--display); font-weight: 400; font-size: 1.6rem; margin-bottom: 16px; }
.offer--cover li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255,255,255,.85); font-size: .98rem; padding: 9px 0; border-top: 1px dotted rgba(255,255,255,.28); }
.offer--cover li:first-child { border-top: 0; padding-top: 0; }
.offer--cover .icon { color: var(--accent); width: 20px; height: 20px; margin-top: 3px; }
.stackline { margin-top: 40px; text-align: center; }
.stackline .value { font-size: 2.6rem; }
.stackline s { color: var(--muted); font-style: normal; font-family: var(--mono); font-size: 1.1rem; margin-right: 12px; }
.stackline .btn { margin-top: 26px; }
.needs { margin-top: 22px; font-size: .95rem; color: var(--muted); }
@media (max-width: 960px) { .grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1100px) { .offers .panel { padding: 48px 40px 56px; } }
@media (max-width: 640px) { .grid3 { grid-template-columns: 1fr; gap: 28px; } .offers .panel { padding: 44px 20px; } }

/* Results: videos + quote rows */
/* Video testimonials: one horizontal line of equal portrait cards, scroll sideways (26 Aug 2026).
   Padding keeps the hard shadow and hover lift inside the scroll box; edges fade like the ratings rail. */
.vidline { --edge: 48px; --gutter: 20px; display: flex; gap: 38px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 12px var(--edge) 16px; margin: -12px calc(-1 * var(--gutter)) -16px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.4), #000 var(--edge), #000 calc(100% - var(--edge)), rgba(0,0,0,.4)); mask-image: linear-gradient(90deg, rgba(0,0,0,.4), #000 var(--edge), #000 calc(100% - var(--edge)), rgba(0,0,0,.4)); }
.vidline::-webkit-scrollbar { display: none; }
@media (max-width: 640px) { .vidline { --edge: 28px; } }
.vidline .vid { flex: 0 0 clamp(230px, 24vw, 296px); scroll-snap-align: start; }
/* Captions: name + one-word title only (no company), so every card ends at the same height. */
.vidline .vid__cap { flex: 0 0 auto; align-content: start; }
.vid--portrait .vid__frame { aspect-ratio: 3 / 4; }
.vid__cap .quote__logo { height: 22px; }
.vid { overflow: hidden; display: flex; flex-direction: column; }
.vid__cap { flex: 1; align-content: end; }
.vid__frame { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border-bottom: var(--border); }
.vid__frame video { width: 100%; height: 100%; object-fit: cover; }
.vid__play {
  position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: linear-gradient(180deg, rgba(27,20,16,.1), rgba(27,20,16,.5)); color: #fff;
}
.vid__play span { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--accent); border: var(--border); box-shadow: 0 4px 0 var(--ink); transition: transform .2s var(--ease); }
.vid__play:hover span { transform: scale(1.06); }
.vid__play .icon { width: 30px; height: 30px; margin-left: 4px; }
.vid.is-playing .vid__play { display: none; }
.vid__cap { padding: 18px 22px 20px; display: grid; gap: 12px; }
.vid__cap .quote__text { font-size: 1rem; }
.rows { display: grid; grid-auto-rows: 1fr; gap: 0; border: var(--border); border-radius: var(--r-card); background: var(--card); box-shadow: var(--hard); overflow: hidden; transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.rows:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--shadow), 0 10px 0 2px var(--ink); }
.row { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center; padding: 20px 26px; }
.row + .row { border-top: 2px dotted var(--ink); }
.row .quote__text { font-size: 1.08rem; }
@media (max-width: 860px) { .row { grid-template-columns: 1fr; gap: 12px; } }

/* Bonuses */
.bonus { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: start; padding: 64px 110px; }
.bonus__list { display: grid; gap: 14px; }
.brow { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; padding: 18px 20px; background: var(--card); border: var(--border); border-radius: var(--r-row); box-shadow: var(--hard-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); }
.brow:not(.brow--todo):hover { transform: translateY(-2px); background: #FFF6EC; box-shadow: 0 6px 0 var(--shadow), 0 6px 0 2px var(--ink); }
.brow .icon { width: 26px; height: 26px; color: var(--accent-deep); }
.brow h3 { font-size: 1.05rem; font-weight: 600; }
.brow p { font-size: .92rem; color: var(--muted); }
.brow .value { font-size: 1.6rem; }
.brow--todo { border-style: dashed; background: transparent; box-shadow: none; opacity: .8; }
@media (max-width: 1100px) { .bonus { padding: 48px 40px; } }
.brow--link { text-decoration: none; color: inherit; }
/* Logo tiles: the hero logo row from bradbonanno.com, on this page's tokens */
.bonus__logos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.bonus__logos .plogo { width: 44px; height: 44px; border-radius: 12px; }
.plogo { width: 52px; height: 52px; display: grid; place-items: center; background: #fff; border: var(--border); border-radius: 14px; box-shadow: 0 3px 0 var(--shadow), 0 3px 0 2px var(--ink); overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
a.plogo:hover { transform: translateY(-3px); box-shadow: 0 6px 0 var(--shadow), 0 6px 0 2px var(--ink); }
.plogo img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }
.plogo--more { background: var(--strip); font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.brow .plogo { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 2px 0 var(--shadow), 0 2px 0 2px var(--ink); }
.brow .plogo img { padding: 6px; }
.brow .plogo--more { font-size: .66rem; }
.bonus__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 26px; }
.bonus__instant { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.bonus__instant .icon { width: 18px; height: 18px; color: var(--accent-deep); }
@media (max-width: 860px) { .bonus { grid-template-columns: 1fr; padding: 36px 24px; } .brow { grid-template-columns: 36px 1fr; } .brow .value, .brow > .icon { grid-column: 2; } .brow > .icon { justify-self: start; } .brow .plogo { width: 36px; height: 36px; border-radius: 10px; } .plogo { width: 46px; height: 46px; } }

/* Transformation */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; }
.ba__col { padding: 32px; border: var(--border); border-radius: var(--r-card); }
.ba__col--before { background: var(--card); }
.ba__col--after { background: var(--accent); color: #fff; box-shadow: var(--hard); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.ba__col--after:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--shadow), 0 10px 0 2px var(--ink); }
.ba__col h3 { font-family: var(--display); font-size: 1.6rem; font-weight: 400; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.ba__col li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; font-size: 1.02rem; }
.ba__col--before li { color: var(--ink-soft); border-top: 2px dotted rgba(27,20,16,.25); }
.ba__col--after li { border-top: 2px dotted rgba(255,255,255,.35); }
.ba__col li:first-of-type { border-top: 0; }
.ba__col .icon { width: 20px; height: 20px; margin-top: 3px; flex: none; }
.ba__col--before .icon { color: var(--accent-deep); }
.prooftest { margin-top: 38px; padding: 28px 32px; border: var(--border); border-radius: var(--r-card); background: var(--panel); display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.prooftest .icon { width: 34px; height: 34px; color: var(--accent-deep); margin-top: 2px; }
.prooftest h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 6px; }
.prooftest p { color: var(--ink-soft); }
.host { margin-top: 38px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 0; overflow: hidden; }
.host__text { padding: 36px 40px; }
.host__text h3 { font-family: var(--display); font-weight: 400; font-size: 1.9rem; margin: 14px 0 16px; }
.host__text p { color: var(--ink-soft); }
.host__text p + p { margin-top: 14px; }
.host__meta { display: flex; align-items: center; gap: 14px; }
.host__meta img { width: 56px; height: 56px; border-radius: 50%; border: var(--border); object-fit: cover; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chip { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px; border: var(--border); border-radius: 999px; background: var(--strip); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.chip:hover { transform: translateY(-3px); box-shadow: 0 3px 0 var(--shadow), 0 3px 0 2px var(--ink); }
.host__art { background: var(--panel); border-left: var(--border); padding: 28px; display: grid; place-items: center; }
.treecard { width: min(100%, 340px); background: var(--card); border: var(--border); border-radius: 16px; box-shadow: var(--hard-sm); overflow: hidden; transform: rotate(-2deg); }
.treecard__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--strip); border-bottom: var(--border); font-family: var(--mono); font-size: .72rem; }
.treecard__bar span { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--card); }
.treecard__bar b { margin-left: 8px; font-weight: 700; }
.treecard .tree { padding: 16px 18px 18px; font-size: .84rem; line-height: 1.75; }
@media (max-width: 860px) { .ba, .host { grid-template-columns: 1fr; } .host__art { border-left: 0; border-top: var(--border); } .prooftest { grid-template-columns: 1fr; } }

/* Who for */
.who4 { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; align-items: start; }
.who4__col { padding: 32px; border: var(--border); border-radius: var(--r-card); background: var(--card); box-shadow: var(--hard); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.who4__col--yes:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--shadow), 0 10px 0 2px var(--ink); }
.who4__col--no { background: transparent; box-shadow: none; border-style: dashed; }
.who4__col h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.who4__col li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 2px dotted rgba(27,20,16,.25); color: var(--ink-soft); }
.who4__col li:first-of-type { border-top: 0; }
.who4__col .icon { width: 22px; height: 22px; margin-top: 2px; }
.who4__col--yes .icon { color: var(--accent-deep); }
.who4__col--no .icon { color: var(--muted); }
.who4__note { grid-column: 1 / -1; padding: 22px 28px; background: var(--panel); border: var(--border); border-radius: var(--r-row); color: var(--ink-soft); }
@media (max-width: 860px) { .who4 { grid-template-columns: 1fr; } }

/* Authority testimonials: masonry */
.masonry { columns: 3; column-gap: 38px; }
.masonry .quote { break-inside: avoid; margin-bottom: 38px; }
.quote__logo { height: 24px; width: auto; max-width: 160px; object-fit: contain; align-self: flex-start; filter: brightness(0) invert(.32) sepia(1) saturate(3) hue-rotate(-15deg); opacity: .9; }
@media (max-width: 960px) { .masonry { columns: 2; } }
@media (max-width: 640px) { .masonry { columns: 1; } }

/* Checkout */
.checkout { padding: 8px 0 64px; }
.checkout__panel { background: var(--accent); border: var(--border); border-radius: var(--r-panel); padding: 64px 110px 56px; color: #fff; box-shadow: var(--hard); }
.checkout__head { max-width: 680px; margin-bottom: 44px; }
.checkout__head .h2 { color: #fff; }
.checkout__head .lede { color: rgba(255,255,255,.88); }
.checkout__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: start; }
.summary h3 { font-family: var(--display); font-size: 1.9rem; font-weight: 400; margin-bottom: 4px; }
.summary .when { font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; color: rgba(255,255,255,.9); line-height: 1.7; margin: 10px 0 24px; }
.summary .when b { display: inline-block; margin-top: 6px; padding: 3px 10px; background: var(--card); color: var(--ink); border: var(--border); border-radius: 999px; font-variant-numeric: tabular-nums; }
.stack li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 2px dotted rgba(255,255,255,.4); font-size: 1.02rem; }
.stack li:first-child { border-top: 0; }
.stack li span:last-child { font-family: var(--mono); font-size: .9rem; }
.stack__link { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.stack li.total { border-top: 2px solid #fff; margin-top: 6px; padding-top: 16px; font-weight: 600; font-size: 1.1rem; }
.stack li.total .value { font-size: 2.2rem; }
.stack li.total s { font-family: var(--mono); font-weight: 400; font-size: 1rem; opacity: .8; margin-right: 8px; }
.pay { background: var(--card); color: var(--ink); border: var(--border); border-radius: var(--r-card); padding: 30px; box-shadow: var(--hard); }
.pay label.mono { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.stepper { display: inline-flex; align-items: center; border: var(--border); border-radius: 999px; overflow: hidden; background: #fff; }
.stepper button { width: 46px; height: 46px; display: grid; place-items: center; border: 0; background: var(--strip); }
.stepper button:hover { background: var(--peach); }
.stepper button:disabled { opacity: .4; cursor: not-allowed; }
.stepper button:first-child { border-right: var(--border); }
.stepper button:last-child { border-left: var(--border); }
.stepper output { min-width: 56px; text-align: center; font-family: var(--mono); font-weight: 700; font-size: 1.1rem; }
.pay__line { margin: 16px 0 18px; font-family: var(--mono); font-size: .92rem; }
.pay__micro { margin-top: 14px; font-size: .86rem; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; }
.pay__micro .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--accent-deep); }
.pay hr { border: 0; border-top: 2px dotted var(--ink); margin: 22px 0 18px; }
.escape { font-size: .95rem; }
.escape p { margin-bottom: 10px; }
.escape form { display: flex; border: var(--border); border-radius: 999px; overflow: hidden; background: #fff; }
.escape input { flex: 1; min-width: 0; border: 0; padding: 12px 16px; font: inherit; font-size: .95rem; background: transparent; color: var(--ink); }
.escape input::placeholder { color: #7A6555; }
.escape input:focus { outline: none; }
.escape form:focus-within { outline: 0; }
.escape button { border: 0; border-left: var(--border); background: var(--peach); padding: 0 16px; font-weight: 600; font-size: .9rem; white-space: nowrap; transition: background .18s var(--ease); }
.escape button:hover { background: #FDE1C6; }
.escape .ok { display: none; color: var(--accent-deep); font-weight: 600; margin-top: 8px; }
.escape.is-done form { display: none; }
.escape.is-done .ok { display: block; }
.support { margin-top: 26px; font-size: .9rem; color: rgba(255,255,255,.9); }
.support a { color: #fff; }
@media (max-width: 1100px) { .checkout__panel { padding: 48px 40px; } }
@media (max-width: 900px) { .checkout__grid { grid-template-columns: minmax(0, 1fr); } .checkout__panel { padding: 44px 24px; } .pay { padding: 22px; } .pay .btn--lg { font-size: .98rem; padding: 17px 18px; } }

/* FAQ */
.faq { max-width: 1092px; margin: 0 auto; display: grid; gap: 16px; }
.faq details { background: var(--card); border: var(--border); border-radius: var(--r-row); overflow: hidden; transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.faq details:hover { background: #FFF6EC; transform: translateY(-3px); box-shadow: 0 3px 0 var(--shadow), 0 3px 0 2px var(--ink); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 26px; font-weight: 600; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 20px; height: 20px; transition: transform .25s var(--ease); flex: none; }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details[open] summary { border-bottom: 2px dotted var(--ink); }
.faq .ans { padding: 18px 26px 24px; max-width: 78ch; color: var(--ink-soft); }
.faq .ans code { font-family: var(--mono); font-size: .9em; background: var(--strip); padding: 1px 6px; border-radius: 6px; }
.faq__support { text-align: center; margin-top: 30px; color: var(--muted); }

/* Final CTA */
.final { padding: 0 0 80px; }
.final__panel { position: relative; overflow: hidden; border: var(--border); border-radius: var(--r-panel); background: var(--ink); color: #fff; box-shadow: var(--hard); display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); min-height: 460px; }
.final__text { padding: 72px 64px; position: relative; z-index: 2; }
.final__text .h2 { color: #fff; margin-bottom: 20px; }
.final__text p { color: rgba(255,255,255,.88); max-width: 46ch; }
.final__text p + p { margin-top: 12px; }
.final__text .btn { margin-top: 30px; }
.final__text .micro { margin-top: 14px; font-family: var(--mono); font-size: .8rem; color: rgba(255,255,255,.75); }
.final__img { position: absolute; inset: 0; z-index: 0; }
.final__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.final__img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(27,20,16,.94) 0%, rgba(27,20,16,.86) 34%, rgba(27,20,16,.45) 52%, rgba(27,20,16,.05) 72%); }
@media (max-width: 860px) { .final__panel { grid-template-columns: 1fr; } .final__img::before { background: linear-gradient(0deg, rgba(27,20,16,.94) 0%, rgba(27,20,16,.8) 60%, rgba(27,20,16,.3) 100%); } .final__text { padding: 36px 24px 44px; } }

/* Footer */
.foot { padding: 0 0 48px; }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding-top: 28px; border-top: var(--border); }
.foot__links { display: flex; flex-wrap: wrap; gap: 20px; font-size: .95rem; }
.foot__links a { text-decoration: none; }
.foot__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__legal { width: 100%; font-size: .85rem; color: var(--muted); }

/* ---------- Motion ---------- */
.rev { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rev.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rev { opacity: 1; transform: none; transition: none; }
  .rail__row, .tile, .tile__img, .tile__shadow, .sticker .dot, .bar__dot { animation: none !important; }
  .btn, .stepper button, .vid__play span, .card, .offer, .brow, .rows, .note, .who4__col, .ba__col--after, .faq details, .chip { transition: none; }
}

/* ---------- Newsletter popup ---------- */
.pop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.pop[hidden] { display: none; }
.pop__backdrop { position: absolute; inset: 0; background: rgba(27,20,16,.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pop__win { position: relative; width: min(560px, 100%); background: var(--card); border: var(--border); border-radius: 18px; box-shadow: var(--hard), 0 30px 80px rgba(60,30,10,.25); overflow: hidden; animation: popin .35s var(--ease); }
.pop__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--strip); border-bottom: var(--border); }
.pop__lights { display: inline-flex; gap: 6px; }
.pop__lights i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--card); }
.pop__lights i:first-child { background: var(--accent); }
.pop__bar b { font-size: .76rem; margin-left: 6px; letter-spacing: .04em; }
.pop__x { margin-left: auto; width: 30px; height: 30px; display: grid; place-items: center; border: var(--border); border-radius: 8px; background: var(--card); box-shadow: 2px 2px 0 var(--ink); }
.pop__x { transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.pop__x:hover { background: var(--peach); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
.pop__x:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.pop__x .icon { width: 14px; height: 14px; }
.pop__body { padding: 30px 32px 26px; text-align: center; }
.pop__h { font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 12px 0 12px; }
.pop__h em { color: var(--accent-deep); }
.pop__p { color: var(--ink-soft); font-size: 1rem; max-width: 42ch; margin: 0 auto 20px; }
.pop__form { display: flex; gap: 10px; }
.pop__form input { flex: 1; min-width: 0; padding: 14px 16px; font: inherit; font-size: 1rem; border: var(--border); border-radius: 999px; background: #fff; color: var(--ink); }
.pop__form input::placeholder { color: #7A6555; }
.pop__form input:focus { outline: 0; box-shadow: 0 0 0 3px rgba(27,20,16,.10); }
.pop__form input[aria-invalid="true"] { border-color: var(--accent-deep); }
.pop__form .btn { white-space: nowrap; }
.pop__ok { display: none; margin-top: 4px; font-weight: 600; color: var(--accent-deep); }
.pop.is-done .pop__form { display: none; }
.pop.is-done .pop__ok { display: block; }
.pop__micro { margin-top: 16px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@keyframes popin { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .pop__body { padding: 24px 18px 20px; } .pop__form { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .pop__win { animation: none; } }

/* ---------- Run modes (body[data-mode] set by app.js: live / replay / closed) ----------
   live is the default HTML; replay/closed copy is swapped in by app.js, and the
   closed-mode checkout hiding lives here so it can't flash the pay button first. */
/* Replay bar: taller and louder than the live countdown. One sentence, the count
   pill is the emphasis, then the CTA. Mobile wraps to two centred lines rather
   than swapping to the terse "Live in" prefix. */
body[data-mode="replay"] .bar { height: 58px; }
body[data-mode="replay"] .bar__in { font-size: 1.12rem; font-weight: 600; gap: 12px; }
body[data-mode="replay"] .bar__count { font-size: 1.12rem; padding: 5px 14px; }
body[data-mode="replay"] .bar__cta { margin-left: 10px; }
@media (max-width: 860px) {
  body[data-mode="replay"] .bar { height: auto; padding: 12px 0; }
  body[data-mode="replay"] .bar__in { flex-wrap: wrap; white-space: normal; text-align: center; justify-content: center; row-gap: 8px; font-size: 1rem; line-height: 1.3; }
  body[data-mode="replay"] .bar__in::before { content: none; }
  body[data-mode="replay"] .bar__label { display: block; flex: 1 1 100%; }
  body[data-mode="replay"] .bar__dot { display: none; }
  body[data-mode="replay"] .bar__count { font-size: 1.05rem; }
  body[data-mode="replay"] .bar__cta { display: inline-flex; margin-left: 4px; }
  body[data-mode="closed"] .bar__in::before { content: none; }
  body[data-mode="closed"] .bar__label { display: block; font-size: .8rem; }
}
@media (max-width: 400px) { body[data-mode="replay"] .bar__cta { display: none; } } /* nav CTA sits right under it */
body[data-mode="closed"] .summary,
body[data-mode="closed"] .pay label.mono,
body[data-mode="closed"] .stepper,
body[data-mode="closed"] #payLine,
body[data-mode="closed"] #payBtn,
body[data-mode="closed"] .pay__micro,
body[data-mode="closed"] .pay hr { display: none; }
body[data-mode="closed"] .checkout__grid { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }

/* Honeypot field for the signup forms (bots fill it, humans never see it) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Focus states (13 Sep 2026, ported from the bootcamp page): no hard orange outline
   on the signup forms. The escape hatch shows none (the pill border is enough), the
   popup input gets a soft neutral ring so keyboard focus still reads. */
.escape input:focus-visible, .escape input:focus { outline: 0 !important; box-shadow: none; }