/* ==========================================================================
   Levante Leads — landing page
   Self-hosted fonts (no third-party requests), no build step.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-var.woff2") format("woff2-variations"),
       url("../fonts/bricolage-grotesque-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-var.woff2") format("woff2-variations"),
       url("../fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallbacks: until Bricolage arrives, text shows in a local sans
   scaled (size-adjust, from measured font metrics) to take up the same space, so
   the swap doesn't reflow the page. Without this, the headline re-wrapped on swap
   and pushed the hero video down: CLS ~0.11 on a slow connection. Two faces,
   because Bricolage's display weights (H1/H2, wght 750 / opsz 96) run much
   narrower than its text weights. */
@font-face {
  font-family: "Bricolage Grotesque Fallback";
  font-weight: 200 599;
  src: local("Arial"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 106.69%;
  ascent-override: 87.17%;
  descent-override: 25.31%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bricolage Grotesque Fallback";
  font-weight: 600 800;
  src: local("Arial-BoldMT"), local("Arial Bold"), local("HelveticaNeue-Bold"), local("Roboto-Bold"), local("Arial");
  size-adjust: 92.58%;
  ascent-override: 100.45%;
  descent-override: 29.16%;
  line-gap-override: 0%;
}

:root {
  --paper: #f4efe6;
  --paper-2: #ebe3d4;
  --paper-3: #e2d8c5;
  --card: #fbf8f2;
  --ink: #15130f;
  --ink-2: #37332c;
  --muted: #5f584f;
  --line: #d6ccb9;
  --line-soft: #e4dccd;
  --line-strong: #8a7f70;  /* control edges: 3.70:1 on --card, 3.92:1 on white, 3.43:1 on paper */

  --sun: #ee5a24;          /* decorative */
  --sun-deep: #c8401a;     /* large text / buttons on light (AA with white) */
  --sun-text: #a83510;     /* small vermilion text on light backgrounds */
  --amber: #f3a64a;
  --held: #17693f;
  --held-bg: #dcefe3;
  --focus: var(--sun-deep);   /* focus ring; amber on night surfaces (see below) */
  --held-on-dark: #9fdcb9; /* held green on night surfaces: 9.3:1 on --night-2 */

  --night: #15130f;
  --night-2: #211e19;
  --night-line: #3a352d;
  --night-text: #f4efe6;
  --night-muted: #a89f91;

  --tail: #786e62;         /* grey second half of two-tone headings: 4.36:1 on paper, 3.92:1 on paper-2 */
  --tail-night: #857c70;   /* same, on night sections */

  --font-sans: "Bricolage Grotesque", "Bricolage Grotesque Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-display: clamp(2.4rem, 4.4vw, 3.8rem);   /* H1, the offer (#our-model) and the ask (#book) */
  --fs-h2: clamp(2.1rem, 4.2vw, 3.4rem);
  --fs-h2-compact: clamp(1.9rem, 3.3vw, 2.8rem);  /* #pains, #the-math, FAQ */

  --radius: 14px;
  --radius-sm: 8px;
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(72px, 9vw, 128px);

  --shadow-card: 0 1px 0 rgba(21, 19, 15, 0.04), 0 18px 40px -22px rgba(21, 19, 15, 0.35);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* film grain, painted into the paper backgrounds only (alpha .032 = the old .09 layer at opacity .35) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 0.032 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* motion: durations and easings come from here (keep durations in ms) */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);          /* exits: header out */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-header: cubic-bezier(0.45, 0, 0.55, 1);  /* header in and out */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);    /* hover lifts */
  --dur-1: 150ms;       /* hover color, border */
  --dur-2: 250ms;       /* press, icons, exits */
  --dur-3: 420ms;       /* UI enter: menu, panels, FAQ, header in */
  --dur-4: 700ms;       /* kinetic words, stepper FLIP */
  --dur-5: 1100ms;      /* one-off scenes: wire draw-in */
  --dur-reveal: 650ms;  /* scroll reveals */
  --stagger: 40ms;
  --reveal-y: 16px;
  --hiw-dwell: 10000ms; /* How it works: time on each step during the one desktop tour */

  --header-h: 77px;        /* .header-inner (76px) + the header's 1px bottom border; the mobile menu opens right under it */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--grain), var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-variation-settings: "opsz" 14;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

::selection {
  background: var(--sun);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* dark surfaces: amber ring (9.16:1 on ink) */
.section--night,
.site-footer,
.option--us,
.screen,
.video-card {
  --focus: var(--amber);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus {
  top: 16px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Type ---------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 96;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-display);
  font-weight: 750;
}

h1 .hl-block {
  display: block;
  margin-top: 0.12em;
  color: var(--sun-deep);
}

h4 {
  font-size: 1.08rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
  font-variation-settings: "opsz" 24;
}

h2 {
  font-size: var(--fs-h2);
}

/* two-tone headings: the claim in ink, the context in grey */
.tail {
  color: var(--tail);
}
.section--night .tail {
  color: var(--tail-night);
}

/* kinetic headings: main.js wraps each word; words rise from a mask once in view */
.is-kinetic .kw {
  display: inline-block;
  clip-path: inset(-0.25em -0.15em -0.24em -0.15em);
}
.is-kinetic .kw > span {
  display: inline-block;
  transform: translate3d(0, 135%, 0);
  transition: transform 0.95s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.is-kinetic.is-in .kw > span {
  transform: none;
}

/* small mono label, used inside mock UIs and step lists */
.tape {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variation-settings: "opsz" 32;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-wrap: balance;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sun-text);
}
.eyebrow::before {
  content: "";
  flex: none;
  transform: translateY(-0.3em);
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.lead {
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 54ch;
}

.hl {
  position: relative;
  white-space: nowrap;
  color: var(--sun-deep);
}

.nw {
  white-space: nowrap;
}

/* ---------- Buttons ---------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1.5px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-2);
  white-space: nowrap;
}
/* lift only on a real pointer: on touch, :hover sticks after a tap */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -14px rgba(21, 19, 15, 0.6);
  }
  .btn:hover .arrow {
    transform: translateX(4px);
  }
}
.btn:active {
  transform: translateY(0);
}
.btn .arrow {
  display: inline-block;
  transition: transform var(--dur-2) var(--ease-out);
}

.btn--sun {
  --btn-bg: var(--sun-deep);
  --btn-fg: #fff;
}
.btn--sun:hover {
  --btn-bg: #b3380f;
}
@media (hover: hover) and (pointer: fine) {
  /* on night surfaces an ink shadow is invisible: lift with a sun-tinted one */
  .section--night .btn--sun:hover {
    box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--sun) 70%, transparent);
  }
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  border-color: var(--ink);
  box-shadow: none;
}

.btn--light {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
}

.btn--sm {
  min-height: 42px;
  padding: 0 18px;
  font-size: 15px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(251, 248, 242, 0.7);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
.chips li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--held);
  box-shadow: 0 0 0 3px var(--held-bg);
}

.microcopy {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* same smooth motion both ways: in and out */
  transition: background-color var(--dur-2), border-color var(--dur-2),
    transform var(--dur-3) var(--ease-header), opacity var(--dur-3) var(--ease-header);
  border-bottom: 1px solid transparent;
}
/* scrolled down: drifts up a little and fades. Keyboard focus brings it back. */
.site-header.is-hidden:not(:has(:focus-visible)) {
  transform: translateY(-45%);
  opacity: 0;
  pointer-events: none;
}
.site-header.is-scrolled,
.no-js .site-header {
  background: rgba(244, 239, 230, 0.86);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom-color: var(--line-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 32;
  flex-shrink: 0;
  white-space: nowrap;
}
.brand svg {
  width: 30px;
  height: 30px;
}
.brand span b {
  font-weight: 700;
  color: var(--sun-deep);
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav a:not(.btn) {
  text-decoration: none;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  position: relative;
}
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1.5px;
  background: var(--sun-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav a:not(.btn):hover::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.8px;
  background: var(--ink);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2);
}
.nav-toggle span {
  top: 50%;
  margin-top: -1px;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
}
.nav-toggle span::before {
  top: -6px;
}
.nav-toggle span::after {
  top: 6px;
}
.nav-open .nav-toggle span {
  background: transparent;
}
.nav-open .nav-toggle span::before {
  transform: translateX(-50%) translateY(6px) rotate(45deg);
}
.nav-open .nav-toggle span::after {
  transform: translateX(-50%) translateY(-6px) rotate(-45deg);
}

@media (max-width: 960px) {
  .no-js .nav-toggle {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 40px -30px rgba(21, 19, 15, 0.4);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-2), transform var(--dur-3) var(--ease-out), visibility var(--dur-2);
  }
  .nav-open .nav {
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .nav a:not(.btn) {
    padding: 14px 0;
    font-size: 18px;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav a:not(.btn)::after {
    display: none;
  }
  .nav .btn {
    margin-top: 18px;
  }
}

@media (min-width: 400px) and (max-width: 960px) {
  .no-js .nav {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
    max-height: none;
  }
  .no-js .nav a:not(.btn) {
    display: none;
  }
  .no-js .nav .btn {
    margin-top: 0;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: clamp(28px, 5vw, 64px) 0 clamp(70px, 9vw, 120px);
  isolation: isolate;
  overflow-x: clip;
}

/* spreadsheet grid, fading out — a nod to "still running on spreadsheets" */
.hero::before {
  content: "";
  position: absolute;
  inset: -76px 0 0 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, rgba(21, 19, 15, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21, 19, 15, 0.055) 1px, transparent 1px);
  background-size: 64px 36px;
  mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 20%, transparent 75%);
}

/* the rising sun */
.hero-sun {
  position: absolute;
  z-index: -1;
  right: -8vw;
  top: 4%;
  width: min(62vw, 780px);
  aspect-ratio: 1;
  border-radius: 50%;
  /* warm amber core, a thin vermilion rim; the mask fades it out before the hero's bottom edge
     (#000 in a mask is alpha only, not a color) */
  background: radial-gradient(circle at 50% 55%,
    color-mix(in srgb, var(--amber) 50%, transparent),
    color-mix(in srgb, var(--amber) 22%, transparent) 40%,
    color-mix(in srgb, var(--sun) 12%, transparent) 56%,
    transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 82%);
  /* fades in, never slides: nothing moves next to the headline */
  animation: sunrise 1.2s var(--ease-out) both;
}

@keyframes sunrise {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}

.hero-copy > * + * {
  margin-top: 26px;
}
.hero-copy h1 {
  margin-top: 20px;
}
.hero-copy .cta-row {
  margin-top: 36px;
}
.hero-copy .chips {
  margin-top: 22px;
}

.hero-copy > * {
  animation: rise 0.9s var(--ease-out) both;
}
.hero-copy > *:nth-child(2) {
  animation-delay: 0.08s;
}
.hero-copy > *:nth-child(3) {
  animation-delay: 0.16s;
}
.hero-copy > *:nth-child(4) {
  animation-delay: 0.24s;
}
.hero-copy > *:nth-child(5) {
  animation-delay: 0.32s;
}

/* The H1 is the LCP element: transform only, so it paints on the first frame.
   The offer line settles a beat later. Never add opacity or clip to rise-y. */
.hero-copy > h1 {
  animation-name: rise-y;
}
.hero-copy > h1 .hl-block {
  animation: rise-y 0.7s 0.22s var(--ease-out) both;
}
@keyframes rise-y {
  from {
    transform: translate3d(0, 16px, 0);
  }
  to {
    transform: none;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Calendar mock (hero visual) ---------- */

.calendar {
  position: relative;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card), 0 50px 80px -50px rgba(200, 64, 26, 0.45);
  overflow: hidden;
  animation: rise 1s 0.25s var(--ease-out) both;
  transform-origin: 50% 100%;
}

.calendar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.calendar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
}
.calendar-title .dots {
  display: inline-flex;
  gap: 5px;
}
.calendar-title .dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper-3);
}
.calendar-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  white-space: nowrap;
}

.agenda {
  list-style: none;
  margin: 0;
  padding: 10px;
  display: grid;
  gap: 6px;
  background:
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px) 0 0 / 100% 64px;
}

.meeting {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--held);
  box-shadow: 0 8px 16px -12px rgba(21, 19, 15, 0.45);
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  animation: drop 0.6s var(--ease-out) forwards;
  animation-delay: calc(0.7s + var(--i, 0) * 0.22s);
}
.meeting .when {
  display: grid;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
}
.meeting .when b {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.meeting .who {
  min-width: 0;
}
.meeting strong {
  display: block;
  font-weight: 650;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meeting em {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meeting .status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--held);
  background: var(--held-bg);
}
.meeting.is-rebooked {
  border-left-color: var(--amber);
  background: #fffaf2;
}
.meeting.is-rebooked .status {
  color: #8a4f08;
  background: #fbe9cf;
}
.meeting.is-void {
  border-left-color: var(--line);
  background: var(--paper);
}
.meeting.is-void .status {
  color: var(--ink-2);
  background: var(--paper-3);
}

@keyframes drop {
  to {
    opacity: 1;
    transform: none;
  }
}

.calendar-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.calendar-foot b {
  color: var(--ink);
  font-weight: 600;
}
/* the payoff: "You pay for 3" is the heaviest text in the figure */
.calendar-foot span:last-child {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.calendar-foot span:last-child b {
  font-size: 1.2em;
  color: var(--sun-text);
}
/* the tally lands after the last meeting has dropped in (0.7s + 4 x 0.22s + 0.6s = 2.18s) */
.model-calendar.is-in .calendar-foot {
  animation: rise 0.5s var(--ease-out) 2.2s both;
}

/* ---------- Founder video (hero) ---------- */

.video-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: var(--night);
  box-shadow: var(--shadow-card), 0 50px 80px -50px rgba(200, 64, 26, 0.55);
  animation: rise 1s 0.25s var(--ease-out) both;
}
/* The video is hosted here (assets/video), so it shows straight away: no entrance animation, and its
   first frame sits under the player as a poster, so the card is never blank while the file loads. */
.video-card:has(video) {
  background: var(--night) center / cover no-repeat;
  animation: none;
}
.hero-visual .video-card:has(video) {
  background-image: url("../img/video-poster-home.webp?v=2");
}
.booked-video .video-card:has(video) {
  background-image: url("../img/video-poster-booked.webp?v=2");
}
.video-card video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}
.video-kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  text-wrap: balance;
}

/* No video in the card: the signed founder note takes its place */
.founder-note {
  display: none;
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  border-radius: 20px;
  background: var(--night);
  color: var(--night-text);
  box-shadow: var(--shadow-card);
  animation: rise 1s 0.25s var(--ease-out) both;
}
.hero-visual:not(:has(video)) .video-card {
  display: none;
}
.hero-visual:not(:has(video)) .founder-note {
  display: grid;
  gap: 12px;
}
.founder-note-title {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 48;
  color: var(--night-text);
}
.founder-note-body {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--night-muted);
  max-width: 46ch;
}
.founder-note-sign {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--amber);
}

/* Desktop: the video pushes out past the right edge of the content column, into the margin */
@media (min-width: 981px) {
  .hero-visual:has(video) {
    margin-right: calc(-1 * min(110px, max(0px, (100vw - var(--max)) / 2) + var(--gutter) - 16px));
  }
}

/* Phone: the video takes almost the full screen width */
@media (max-width: 640px) {
  .hero-visual:has(video),
  .booked-video:has(video) {
    margin-inline: calc(8px - var(--gutter));
  }
  .hero-visual:has(video) .video-card,
  .booked-video:has(video) .video-card {
    border-radius: 14px;
  }
}

/* On tablet/phone, put the video right under the headline so it's seen first */
@media (max-width: 980px) {
  .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .hero-grid .hero-copy {
    display: contents;
  }
  .hero-grid .hero-copy > * {
    order: 3;
  }
  .hero-grid .hero-copy > .eyebrow,
  .hero-grid .hero-copy > h1 {
    order: 1;
  }
  .hero-visual {
    order: 2;
    margin-top: 28px;
    max-width: none;
  }
  /* the sun rises below the headline, behind the lead and the buttons, never under "Pay only for meetings held." */
  .hero-sun {
    top: 330px;
    right: -28vw;
    width: 100vw;
  }
  .hero-visual:not(:has(video)) {
    order: 4;
  }
}

@media (max-width: 640px) {
  .video-card:not(:has(video)) {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Sections ---------- */

.section {
  position: relative;
  padding: var(--section-y) 0;
}

.section--tight {
  padding: calc(var(--section-y) * 0.7) 0;
}

.section--paper-2 {
  background: var(--grain), var(--paper-2);
}

.section--night {
  background: var(--night);
  color: var(--night-text);
  overflow: clip; /* keeps the glows inside the section */
}
.section--night .lead,
.section--night p {
  color: var(--night-muted);
}
.section--night h2,
.section--night h3 {
  color: var(--night-text);
}
.section--night .eyebrow {
  color: var(--amber);
}
.section--night .microcopy {
  color: var(--night-muted);
}
.section--night .hl {
  color: var(--amber);
}

.section-head {
  max-width: 820px;
  margin-bottom: clamp(44px, 6vw, 72px);
}
.section-head > * + * {
  margin-top: 20px;
}

/* reveal on scroll */
.reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y), 0);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--d, 0s);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* ---------- Pains: quotes wall ---------- */

.quotes {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.quote {
  grid-column: span 4;
  position: relative;
  padding: 26px 24px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.quote:nth-child(1) {
  grid-column: span 7;
}
.quote:nth-child(2) {
  grid-column: span 5;
}
.quote-said {
  display: block;
  font-family: var(--font-mono);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--sun-text);
  margin-bottom: 12px;
  font-variation-settings: normal;
}
.quote:nth-child(1) .quote-said,
.quote:nth-child(2) .quote-said {
  font-size: 18px;
}
.quote p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
}

/* ---------- Steps (numbered dot, used on the booked page) ---------- */

.step-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 2px solid var(--sun);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--sun-text);
}
.steps-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 56px;
  padding: 22px 24px;
  border-radius: var(--radius);
  border: 1px dashed var(--line);
  background: rgba(251, 248, 242, 0.6);
}
.steps-foot p {
  color: var(--ink-2);
  max-width: 52ch;
}

/* ---------- What we do: S-curve ---------- */

/* One line snakes through the rows like an S: it runs along the top of each
   row and turns down on alternating sides. main.js draws it from the rows'
   real positions and fills it in as you scroll. */
.bends {
  --node: 44px;
  --bend-r: 56px;
  --bend-pad: clamp(40px, 5vw, 60px);
  --bend-inset: calc(var(--node) + 32px);
  position: relative;
}
.bends-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.no-js .bends-svg {
  display: none;
}
.bends-track,
.bends-ink {
  fill: none;
  stroke-linecap: round;
}
.bends-track {
  stroke: var(--line);
  stroke-width: 1.5;
}
.bends-ink {
  stroke-width: 2.5;
}
.bends-cap {
  fill: var(--sun);
}
.bends-cap--end {
  fill: var(--line);
  transition: fill 0.4s;
}
.bends-cap--end.is-lit {
  fill: var(--sun);
}

.bend {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 20px clamp(32px, 4vw, 56px);
  align-items: start;
  padding: var(--bend-pad) calc(var(--node) / 2) var(--bend-pad) var(--bend-inset);
}
.no-js .bend {
  border-top: 1px solid var(--line);
}
.no-js .bend:last-of-type {
  border-bottom: 1px solid var(--line);
}
/* every other row mirrors: title on the right, next to the turn */
.bend:nth-of-type(even) {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  padding-left: calc(var(--node) / 2);
  padding-right: var(--bend-inset);
}
.bend:nth-of-type(even) .bend-head {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
}
.bend:nth-of-type(even) .bend-body {
  grid-column: 1;
  grid-row: 1;
}
/* 02 Reach, two columns: paragraph left, heading right, the sources diagram centered under both */
@media (min-width: 981px) {
  .bend:nth-of-type(2) .bend-body {
    display: contents;
  }
  .bend:nth-of-type(2) .bend-body > p {
    grid-column: 1;
    grid-row: 1;
  }
  .bend:nth-of-type(2) .src-map {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: 100%;
    margin-top: 8px;
  }
}

.bend-node {
  position: absolute;
  left: 0;
  /* centred on the label's 20px line */
  top: calc(var(--bend-pad) + 10px - var(--node) / 2);
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 2px solid var(--sun);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--sun-text);
  transition: background-color var(--dur-3), border-color var(--dur-3), color var(--dur-3), box-shadow var(--dur-3);
}
.bend:nth-of-type(even) .bend-node {
  left: auto;
  right: 0;
}
.bend.is-lit .bend-node {
  background: var(--sun-deep);
  border-color: var(--sun-deep);
  color: #fff;
  box-shadow: 0 0 0 7px rgba(238, 90, 36, 0.14);
}

.bend-label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sun-text);
}
.bend h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 72;
}
.bend p {
  color: var(--ink-2);
}
.ticks {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ticks li,
.faq-item summary {
  text-wrap: pretty;
}
.ticks li {
  position: relative;
  padding-left: 28px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--held-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%2317693f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.section--night .ticks li {
  color: var(--night-text);
}
.section--night .ticks li::before {
  background-color: color-mix(in srgb, var(--held-bg) 12%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%239fdcb9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.crosses li::before {
  background: rgba(200, 64, 26, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5l5 5M10.5 5.5l-5 5' fill='none' stroke='%23c8401a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.stack > * + * {
  margin-top: 20px;
}

/* ---------- Risk reversal ---------- */

.guarantee {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.guarantee h2 {
  font-size: var(--fs-display);
}
.guarantee .note {
  padding-left: 16px;
  border-left: 2px solid var(--amber);
  font-size: 15.5px;
}
.guarantee > .cta-row {
  margin-top: 30px;
}
@media (min-width: 981px) {
  .guarantee {
    row-gap: 0;
  }
}
@media (max-width: 980px) {
  .guarantee > .cta-row {
    margin-top: 0;
  }
}
.criteria {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.criteria li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--night-line);
}
.criteria li:first-child {
  border-top: 0;
  padding-top: 4px;
}
.crit-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--amber);
  padding-top: 2px;
}
.criteria h4 {
  color: var(--night-text);
  margin-bottom: 6px;
}
.criteria p {
  font-size: 15.5px;
  line-height: 1.55;
}

.qualify {
  background: var(--night-2);
  border: 1px solid var(--night-line);
  border-radius: 18px;
  padding: 30px;
}
.qualify h3 {
  margin-bottom: 6px;
}
.qualify .microcopy {
  display: block;
  margin-bottom: 22px;
}
.qualify .ticks li {
  font-size: 16px;
}

.section--night::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: min(900px, 120vw);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  border-radius: 900px 900px 0 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(238, 90, 36, 0.28), rgba(238, 90, 36, 0) 65%);
  pointer-events: none;
}

/* ---------- Shared: sunrise glow for night sections (rises once) ---------- */

.night-glow {
  position: absolute;
  inset: -25% -10% auto;
  height: 85%;
  z-index: 0;
  pointer-events: none;
  filter: blur(60px);
  background:
    radial-gradient(38% 55% at 28% 34%, color-mix(in srgb, var(--sun) 15%, transparent), transparent 70%),
    radial-gradient(34% 50% at 74% 28%, color-mix(in srgb, var(--sun) 26%, transparent), transparent 72%),
    radial-gradient(52% 60% at 50% 0%, color-mix(in srgb, var(--sun-deep) 18%, transparent), transparent 70%);
}
/* the glow rises once, when the section's first block reveals (static without JS or :has) */
@supports selector(:has(*)) {
  html:not(.no-js) .night-glow {
    opacity: 0;
    transform: translate3d(0, 8%, 0);
    transition: opacity 1.6s var(--ease-out), transform 1.6s var(--ease-out);
  }
  html:not(.no-js) .section--night:has(.reveal.is-in) .night-glow {
    opacity: 1;
    transform: none;
  }
}
.night-glow ~ .container {
  position: relative;
  z-index: 1;
}

/* ---------- Shared: dark "screen" window for product-in-action mocks ---------- */

.screen {
  position: relative;
  overflow: hidden;
  text-align: left;
  color: var(--night-text);
  background: linear-gradient(180deg, #1f1b16 0%, var(--night) 100%);
  border: 1px solid var(--night-line);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 40px 80px -40px rgba(21, 19, 15, 0.7),
    0 22px 44px -30px rgba(200, 64, 26, 0.45);
}
.screen-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--night-line);
}
.screen-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--night-text);
}
.screen-title small {
  font-size: 13px;
  font-weight: 400;
  color: var(--night-muted);
}
.screen-dots {
  display: inline-flex;
  gap: 6px;
  flex: none;
}
.screen-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--night-line);
}
.screen-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--held-on-dark) 30%, transparent);
  background: color-mix(in srgb, var(--held) 18%, transparent);
  color: var(--held-on-dark);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.screen-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.screen-body {
  padding: 18px;
}
.screen .tape {
  color: var(--night-muted);
}

/* ---------- Pipeline math calculator ---------- */

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  overflow: clip; /* clip, not a scroll box, so the sticky readout (.calc-live) can stick to the viewport */
}
.calc-inputs {
  padding: clamp(24px, 3.4vw, 40px);
  border-right: 1px solid var(--line);
}
.calc-inputs h3 {
  margin-bottom: 6px;
}
.calc-inputs > .microcopy {
  display: block;
  margin-bottom: 26px;
}
.field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.field label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-weight: 600;
  font-size: 15px;
}
.field label .hint {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11.5px;
  color: var(--muted);
}
.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.cell {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cell:focus-within {
  border-color: var(--sun-deep);
  box-shadow: 0 0 0 4px rgba(238, 90, 36, 0.14);
}
/* a field the calculator can't read (main.js sets aria-invalid and names it in the summary) */
.cell:has(input[aria-invalid="true"]) {
  border-color: var(--sun-deep);
}
.cell .affix {
  padding: 0 0 0 14px;
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 15px;
}
.cell .affix--end {
  padding: 0 14px 0 0;
}
.cell input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0 14px 0 8px;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cell input::-webkit-outer-spin-button,
.cell input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cell input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.calc-out {
  padding: clamp(24px, 3.4vw, 40px);
  background:
    linear-gradient(to right, rgba(21, 19, 15, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21, 19, 15, 0.045) 1px, transparent 1px),
    var(--paper);
  background-size: 48px 32px, 48px 32px, auto;
  display: flex;
  flex-direction: column;
}
.calc-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
}
.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.calc-row span {
  color: var(--ink-2);
  font-size: 15.5px;
}
.calc-row output {
  font-family: var(--font-mono);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: right;
}

.calc-hero {
  margin-top: 26px;
  padding: 22px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--paper);
}
.calc-hero .microcopy {
  color: var(--night-muted);
}
.calc-hero output {
  display: block;
  overflow-wrap: anywhere;
  margin: 6px 0 8px;
  font-family: var(--font-mono);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.calc-hero p {
  color: var(--night-muted);
  font-size: 15px;
}
.calc-note {
  margin-top: 18px;
}
.calc-hero .is-warn {
  color: #ffb38a;
}

/* phones and tablets: a sticky copy of the monthly number follows the inputs (aria-hidden;
   screen readers get #calc-announce), then scrolls away into the full result box */
.calc-live {
  display: none;
}
@media (max-width: 980px) {
  .calc-live {
    position: sticky;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 2;
    /* display only (aria-hidden; #calc-announce speaks): while it floats over the
       form it must never swallow the tap meant for the field underneath it */
    pointer-events: none;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 18px 0 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--ink);
    color: var(--night-muted);
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow-card);
  }
  .calc-live b {
    white-space: nowrap;
    color: var(--amber);
    font-size: 1.35rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
}

.after-calc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
}
.after-calc-note {
  margin-top: 14px;
  max-width: 62ch;
}
.big-line {
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variation-settings: "opsz" 72;
  max-width: 22ch;
}

/* Compact "The Math" so heading + calculator fit in one screen when you jump to it */
#the-math {
  padding-top: clamp(56px, 6vw, 80px);
  scroll-margin-top: -60px;
}
#the-math .section-head {
  max-width: none;
  margin-bottom: 28px;
}
#the-math .section-head > * + * {
  margin-top: 12px;
}
#the-math h2 {
  font-size: var(--fs-h2-compact);
}
#the-math .lead {
  font-size: 1.05rem;
  max-width: 60ch;
}
#the-math .calc-inputs,
#the-math .calc-out {
  padding: clamp(20px, 2.4vw, 28px);
}
#the-math .calc-inputs h3 {
  margin-bottom: 2px;
}
#the-math .calc-inputs > .microcopy {
  margin-bottom: 16px;
}
#the-math .field {
  gap: 5px;
  margin-bottom: 10px;
}
#the-math .field label {
  font-size: 14px;
}
#the-math .cell input {
  height: 40px;
  font-size: 16px;
}
#the-math .calc-row {
  padding: 10px 0;
}
#the-math .calc-row output {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
}
#the-math .calc-hero {
  margin-top: 18px;
  padding: 16px 20px;
}
#the-math .calc-hero output {
  margin: 2px 0 4px;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
}
#the-math .calc-hero p {
  font-size: 14px;
}
#the-math .calc-note {
  margin-top: 16px;
}
#the-math .after-calc {
  margin-top: 32px;
}

/* Example calendar inside "Our model" (dark section) */
.model-calendar {
  margin-top: 32px;
  max-width: 520px;
}
.model-calendar .calendar {
  animation: none;
  color: var(--ink);
}
/* Meetings drop in when the calendar scrolls into view */
.model-calendar .meeting {
  animation-name: none;
}
.model-calendar.is-in .meeting {
  animation-name: drop;
}
.no-js .model-calendar .meeting {
  opacity: 1;
  transform: none;
}
.guarantee .note {
  margin-top: 28px;
}

/* Compact pains section so it fits one screen (layout: 3 + 3) */
#pains {
  padding: clamp(44px, 4.6vw, 64px) 0 clamp(52px, 5vw, 72px);
}
#pains .section-head {
  max-width: none;
  margin-bottom: 24px;
}
#pains .section-head > * + * {
  margin-top: 10px;
}
#pains h2 {
  font-size: var(--fs-h2-compact);
}
#pains .lead {
  font-size: 1.02rem;
}
#pains .quotes {
  gap: 12px;
}
#pains .quote {
  padding: 18px 22px 20px;
}
#pains .quote-said {
  font-size: 14px;
  margin-bottom: 7px;
}
#pains .quote p {
  font-size: 14px;
  line-height: 1.5;
}
@media (min-width: 981px) {
  #pains .quote:nth-child(n) {
    grid-column: span 4;
  }
}

/* HOVER-EFFECT-START */
/* Pains cards aren't links: on a real pointer they only lift a little and warm their edge.
   The first two channels keep the scroll reveal (delayed by --d); the rest are the hover. */
@media (hover: hover) and (pointer: fine) {
  #pains .quote {
    transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out),
      translate var(--dur-3) var(--ease-soft), border-color var(--dur-2), box-shadow var(--dur-3);
    transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s, 0s;
  }
  #pains .quote:hover {
    translate: 0 -3px;
    border-color: color-mix(in srgb, var(--sun) 45%, var(--line));
    box-shadow: var(--shadow-card), 0 22px 40px -24px color-mix(in srgb, var(--sun-deep) 45%, transparent);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  #pains .quote:hover {
    translate: none;
  }
}
/* HOVER-EFFECT-END */

/* ---------- Comparison ---------- */

/* The two cards share one set of rows (subgrid), so every downside on the
   left sits level with its answer on the right. Option 1 is drawn quiet and
   unfinished (dashed, flat, grey marks); option 2 is bigger, lit and warm. */
.compare {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 0 48px;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
}
.option {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-row: span 10;
  grid-template-rows: subgrid;
  align-content: start;
  padding: 34px 32px 32px;
  border-radius: 18px;
}
.option .label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.option h3 {
  margin: 10px 0 8px;
  font-size: 1.55rem;
}
.option-sub {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 16px;
}
.option .ticks {
  grid-row: span 5;
  grid-template-rows: subgrid;
  gap: 0;
  margin: 0;
}
.option .ticks li {
  padding: 13px 0 13px 30px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
}
.option .ticks li::before {
  top: 16px;
}
.option-risk {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.option-risk span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.option-risk strong {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variation-settings: "opsz" 32;
}

/* Option 1: the road you'd rather not take */
.option--them {
  border: 1.5px dashed var(--line);
}
.option--them h3 {
  color: var(--ink-2);
}
.option--them .ticks li {
  color: var(--muted);
  border-top-color: var(--line-soft);
}
.option--them .crosses li::before {
  background: rgba(21, 19, 15, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5l5 5M10.5 5.5l-5 5' fill='none' stroke='%235f584f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.option--them .option-risk {
  border-top-color: var(--line-soft);
}
.option--them .option-risk strong {
  color: var(--ink-2);
}

/* Option 2: the card itself is drawn a size up, behind the shared rows */
.option--us {
  color: var(--paper);
}
.option--us::before {
  content: "";
  position: absolute;
  inset: -18px -16px;
  z-index: -1;
  border-radius: 24px;
  border: 1px solid rgba(243, 166, 74, 0.28);
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(238, 90, 36, 0.26), rgba(238, 90, 36, 0) 70%),
    var(--ink);
  box-shadow: 0 50px 90px -40px rgba(200, 64, 26, 0.75);
}
.option--us .label {
  color: var(--amber);
}
.option--us h3 {
  color: var(--night-text);
}
.option--us .option-sub {
  color: var(--night-muted);
}
.option--us .ticks li {
  color: var(--paper);
  border-top-color: rgba(244, 239, 230, 0.1);
}
.option--us .ticks li::before {
  background-color: color-mix(in srgb, var(--held-bg) 12%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%239fdcb9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.option--us .option-risk {
  border-top-color: rgba(244, 239, 230, 0.1);
}
.option--us .option-risk span {
  color: var(--night-muted);
}
.option--us .option-risk strong {
  color: var(--amber);
}
.option-badge {
  position: absolute;
  top: -32px;
  right: 24px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--sun-deep);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px -8px rgba(200, 64, 26, 0.8);
}
.option--us .btn {
  justify-self: start;
  margin-top: 26px;
}

/* ---------- Fit ---------- */

.fit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}
.fit-col {
  padding: 32px 30px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
}
.fit-col h3 {
  margin-bottom: 8px;
}
.fit-sub {
  color: var(--muted);
  font-size: 16px;
  margin-bottom: 20px;
}
.fit-col--no {
  background: transparent;
  border-style: dashed;
}

/* ---------- FAQ ---------- */

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.faq-grid .section-head {
  position: sticky;
  top: 110px;
  margin-bottom: 0;
}
.faq-grid h2 {
  font-size: var(--fs-h2-compact);
}
.faq-list {
  border-top: 1px solid var(--ink);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  font-variation-settings: "opsz" 24;
}
.faq-item summary h3 {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary .pm {
  flex: 0 0 auto;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  transition: background-color 0.2s, border-color 0.2s, transform 0.3s var(--ease-out);
}
.faq-item summary .pm::before,
.faq-item summary .pm::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.8px;
  background: var(--ink);
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
.faq-item summary .pm::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 0.3s var(--ease-out);
}
.faq-item[open] summary .pm {
  background: var(--ink);
  border-color: var(--ink);
}
.faq-item[open] summary .pm::before,
.faq-item[open] summary .pm::after {
  background: var(--paper);
}
.faq-item[open] summary .pm::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.faq-answer {
  padding: 0 56px 26px 0;
  color: var(--ink-2);
}
.faq-answer {
  overflow: hidden;
}
.faq-item summary {
  transition: color 0.25s;
}
.faq-item.is-open summary {
  color: var(--sun-text);
}
/* hover only on a real pointer: on touch, :hover sticks and would make a closed question look open */
@media (hover: hover) and (pointer: fine) {
  .faq-item summary:hover {
    color: var(--sun-text);
  }
  .faq-item summary:hover .pm {
    border-color: var(--ink);
  }
}
.faq-item {
  position: relative;
}
.faq-item::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  border-radius: 2px;
  background: var(--sun);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-3) var(--ease-out);
}
.faq-item.is-open::before {
  transform: scaleY(1);
}
.faq-item summary .pm {
  transition: background-color var(--dur-2), border-color var(--dur-2), transform var(--dur-3) var(--ease-out);
}
.faq-item.is-open summary .pm {
  transform: rotate(180deg);
}
.faq-answer p + p {
  margin-top: 12px;
}

/* ---------- Book ---------- */

.book {
  text-align: center;
}
.book h2 {
  font-size: var(--fs-display);
  max-width: 20ch;
  margin: 18px auto 0;
}
.book .eyebrow {
  justify-content: center;
}
.book .lead {
  margin: 22px auto 0;
}
.book .cta-row {
  justify-content: center;
  margin-top: 36px;
}
.book .microcopy {
  max-width: 60ch;
  margin-top: 16px;
  margin-left: auto;
  margin-right: auto;
}

.embed {
  display: grid;
  max-width: 1060px;
  margin: 36px auto 0;
}
/* the widget and the placeholder share one cell, so Calendly lays out at full size underneath */
.embed > .calendly-inline-widget,
.embed > .embed-placeholder {
  grid-area: 1 / 1;
  min-width: 0;
}
.calendly-inline-widget {
  min-width: 0;
  height: 700px;
  background: transparent;
}
/* the framed stand-in until Calendly's calendar has rendered (no JS, blocked or slow Calendly: always a direct link) */
.embed:not(.is-loaded) .calendly-inline-widget {
  visibility: hidden;
}
.embed.is-loaded .embed-placeholder {
  display: none;
}
.embed-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  min-height: 700px;
  padding: 40px 24px;
  border: 1px solid var(--night-line);
  border-radius: 18px;
  background: var(--night-2);
  text-align: center;
}
.embed-placeholder .embed-status {
  max-width: 34ch;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--night-text);
}
.embed-placeholder .btn {
  max-width: 100%;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}
.embed-placeholder .microcopy {
  margin-top: 0;
  color: var(--night-muted);
}
@media (max-width: 640px) {
  .embed-placeholder {
    padding: 32px 16px;
  }
}
.embed iframe {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color-scheme: normal;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--night);
  color: var(--night-muted);
  border-top: 1px solid var(--night-line);
  padding: 44px 0;
  font-size: 15px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.site-footer .brand {
  color: var(--night-text);
}
.site-footer .brand span b {
  color: var(--amber);
}
.calc-note {
  margin-top: 0.75rem;
  opacity: 0.75;
}
.footer-tagline {
  margin-top: 10px;
  max-width: 52ch;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.footer-links a {
  text-decoration: none;
  color: var(--night-text);
}
.footer-links a:hover {
  color: var(--amber);
}
.footer-legal {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--night-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.footer-legal a {
  color: var(--night-muted);
}

/* ---------- Booked (thank-you) page ---------- */

.booked {
  position: relative;
  padding: clamp(40px, 7vw, 90px) 0 var(--section-y);
  overflow-x: clip;
  isolation: isolate;
}
.booked .hero-sun {
  top: -10%;
}
/* one centered column: title, then the video, then the steps next to the invite picture */
.booked-wrap {
  max-width: 1040px;
}
.booked:has(.booked-head) {
  padding-top: clamp(28px, 3.5vw, 48px);
}
.booked-head {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.booked-head > * + *,
.booked-copy > * + * {
  margin-top: 22px;
}
.booked-head h1,
.booked-copy h1 {
  margin-top: 18px;
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  text-wrap: balance;
}
.booked-head h1 {
  margin-top: 14px;
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
}
.booked-head .lead {
  margin: 16px auto 0;
  max-width: 58ch;
  text-wrap: pretty;
}
.booked-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  margin-top: clamp(28px, 3vw, 36px);
  padding-top: clamp(28px, 3vw, 32px);
  border-top: 1px solid var(--line);
}
.booked-info-title {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.booked-schema {
  margin: 0;
}
.booked-check {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--held);
  color: #fff;
  font-size: 11px;
}
.booked-steps {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.booked-steps li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.booked-steps .step-dot {
  position: static;
}
.booked-steps h3 {
  margin: 2px 0 4px;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variation-settings: "opsz" 32;
}
.booked-steps p {
  color: var(--ink-2);
  font-size: 16px;
}
.invite {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card), 0 50px 80px -50px rgba(200, 64, 26, 0.45);
  padding: 0 0 26px;
  animation: rise 1s 0.2s var(--ease-out) both;
}
.invite-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.invite-bar .dots {
  display: inline-flex;
  gap: 5px;
}
.invite-bar .dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper-3);
}
.invite-from {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px 14px;
}
.invite-from .avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 14px;
}
.invite-from strong {
  display: block;
  font-size: 15px;
}
.invite-from em {
  font-style: normal;
  font-size: 13px;
  color: var(--muted);
}
.invite-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 18px;
  margin: 0 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.invite-date {
  display: grid;
  justify-items: center;
  align-content: start;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  text-align: center;
}
.invite-date .m {
  width: 100%;
  padding: 4px 0;
  background: var(--sun-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.invite-date .d {
  font-size: 30px;
  font-weight: 750;
  line-height: 1.1;
  padding-top: 6px;
  letter-spacing: -0.03em;
}
.invite-date .w {
  font-size: 12px;
  color: var(--muted);
  padding-bottom: 8px;
}
.invite-body strong {
  display: block;
  font-size: 17px;
  letter-spacing: -0.015em;
}
.invite-body > span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted);
}
.rsvp {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.rsvp-btn {
  display: inline-grid;
  place-items: center;
  min-width: 74px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  background: #fff;
}
.rsvp-yes {
  position: relative;
  border-color: var(--held);
  background: var(--held);
  color: #fff;
  animation: yes-pulse 2.2s 1.2s var(--ease-out) 2;
}
@keyframes yes-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(23, 105, 63, 0.45);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(23, 105, 63, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(23, 105, 63, 0);
  }
}
.invite-arrow {
  position: absolute;
  width: 120px;
  left: 128px;
  bottom: -78px;
  color: var(--sun);
}
.invite-note {
  position: absolute;
  left: 256px;
  bottom: -80px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sun-text);
}
.booked-caption {
  margin-top: 104px;
}

.booked-jump {
  margin-top: 16px;
}
/* big on purpose: the "Show me where to click" button above it takes people straight to the steps */
.booked-video {
  max-width: 880px;
  margin: clamp(24px, 3vw, 32px) auto 0;
}
/* the recording is 4:3; shown 16:9, the crop takes a little more off the bottom than the top so the
   hair is never cut (poster and video use the same position, so the swap doesn't jump) */
.booked-video .video-card:has(video) {
  background-position: 50% 35%;
}
.booked-video .video-card video {
  object-position: 50% 35%;
}
/* no video yet: no placeholder card; it comes back by itself once a <video> is in the card */
.booked-video:not(:has(video)) {
  display: none;
}

/* small phones: the "Click Yes" note hangs from the right edge, under the arrow's tail */
@media (max-width: 400px) {
  .invite-note {
    left: auto;
    right: 0;
    bottom: -100px;
    white-space: nowrap;
  }
  .booked-caption {
    margin-top: 124px;
  }
  .invite-arrow {
    left: 112px;
  }
  /* keep Yes / Maybe / No on one line */
  .invite-card {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    margin: 0 14px;
    padding: 14px;
  }
  .rsvp-btn {
    min-width: 0;
    padding: 0 12px;
  }
}

@media (max-width: 860px) {
  .booked-info {
    grid-template-columns: minmax(0, 1fr);
  }
  .booked-schema {
    max-width: 520px;
  }
}

/* ---------- Legal page ---------- */

.legal {
  padding: clamp(40px, 8vw, 90px) 0 var(--section-y);
}
.legal .container {
  max-width: 780px;
}
.legal h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin: 16px 0 12px;
}
.legal h2 {
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  margin: 40px 0 12px;
}
.legal p,
.legal li {
  color: var(--ink-2);
}
.legal p + p {
  margin-top: 12px;
}
.legal ul {
  padding-left: 20px;
}
.legal li + li {
  margin-top: 6px;
}

/* ---------- Guides and About: the legal page layout, plus a byline, one CTA and related links ---------- */

.guide h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.08;
  text-wrap: balance;
}
.guide .lead {
  margin-top: 20px;
  max-width: none;
}
.byline {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.byline a {
  color: var(--ink-2);
}
.guide ol {
  padding-left: 22px;
}
.guide ol li + li {
  margin-top: 6px;
}
.guide h2 + ul,
.guide h2 + ol,
.guide p + ul,
.guide p + ol,
.guide ul + p,
.guide ol + p {
  margin-top: 12px;
}
.guide .video-card {
  margin-top: 28px;
  animation: none;
  background-image: url("../img/video-poster-home.webp?v=2");
}
.guide .video-card + .microcopy {
  margin-top: 10px;
}
.guide blockquote {
  margin: 16px 0 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--sun);
}
.guide blockquote + p {
  margin-top: 16px;
}
/* plain tables in guides (the example week on /how-it-works) */
.guide table {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 15px;
}
.guide th,
.guide td {
  padding: 10px 12px 10px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
}
.guide th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.guide table + p,
.guide .table-wrap + p {
  margin-top: 16px;
}
.guide .table-wrap {
  margin-top: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.guide .table-wrap table {
  margin-top: 0;
}
.guide .table-wrap table:has(th:nth-child(3)) {
  min-width: 560px;
}
.guide-cta {
  margin-top: 44px;
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line-soft);
  display: grid;
  gap: 16px;
  justify-items: start;
}
.guide-cta p {
  color: var(--ink-2);
}
.guide-related {
  margin-top: 44px;
}
.guide-related h2 {
  margin-top: 0;
}

/* footer: links to the guides and the About page */
.footer-guides {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 26px;
}
.footer-guides-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
}
.footer-guides a {
  text-decoration: none;
  color: var(--night-text);
}
.footer-guides a:hover {
  color: var(--amber);
}
.footer-guides + .footer-legal {
  margin-top: 24px;
}
.founder-note-more {
  font-size: 15px;
}
.founder-note-more a,
.faq-read a {
  font-weight: 600;
}
.founder-note-more a {
  color: var(--amber);
}

/* ---------- 404 ---------- */

.notfound {
  overflow: clip;
  min-height: calc(100vh - 76px);
  min-height: calc(100svh - 76px);
}
.notfound .hero-sun {
  top: 4%;
}
/* the thank-you and 404 pages have no floating call button: no room reserved for it under the footer */
html:not(.no-js) main.booked + .site-footer {
  padding-bottom: 44px;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .bend,
  .bend:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr);
  }
  .bend:nth-of-type(even) .bend-head,
  .bend:nth-of-type(even) .bend-body {
    grid-column: auto;
    grid-row: auto;
  }
  .bend:nth-of-type(even) .bend-head {
    text-align: left;
  }
  .hero-grid,
  .guarantee,
  .faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .faq-grid .section-head {
    position: static;
  }
  .hero-visual {
    max-width: 860px;
  }
  .quote,
  .quote:nth-child(n) {
    grid-column: span 6;
  }
  .calc {
    grid-template-columns: minmax(0, 1fr);
  }
  .calc-inputs {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .compare {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 44px;
    max-width: 620px;
  }
  .option {
    display: block;
  }
  .option--us::before {
    inset: 0;
  }
  .option-badge {
    top: -14px;
    right: 20px;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }
  .quote,
  .quote:nth-child(n) {
    grid-column: 1 / -1;
  }
  .fit {
    grid-template-columns: minmax(0, 1fr);
  }
  .bends {
    --node: 34px;
    --bend-r: 28px;
    --bend-pad: 36px;
    --bend-inset: calc(var(--node) + 16px);
  }
  .bend {
    gap: 14px;
  }
  .bend-node {
    font-size: 11.5px;
  }
  .bend.is-lit .bend-node {
    box-shadow: 0 0 0 5px rgba(238, 90, 36, 0.14);
  }
  .cta-row .btn {
    width: 100%;
  }
  .faq-answer {
    padding-right: 0;
  }
  .calendar-title .dots {
    display: none;
  }
  .meeting {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 4px 12px;
    padding: 10px 12px;
  }
  .meeting .status {
    grid-column: 2;
    justify-self: start;
    font-size: 10.5px;
    letter-spacing: 0.03em;
    padding: 3px 7px;
  }
  .field-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .after-calc .btn,
  .steps-foot .btn {
    width: 100%;
  }
  .cta-row .btn,
  .steps-foot .btn,
  .after-calc .btn,
  .option .btn {
    white-space: normal;
    text-align: center;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .calendar-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .booked-steps p b {
    overflow-wrap: anywhere;
  }
  .footer-links,
  .footer-guides {
    gap: 0 24px;
  }
  .footer-links a,
  .footer-guides a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* narrow phones: Calendly needs 320px, so the embed runs edge to edge */
@media (max-width: 360px) {
  .embed {
    margin-inline: calc(var(--gutter) * -1);
  }
}

@media (max-width: 640px) {
  .steps-foot {
    padding: 20px 16px;
  }
  .steps-foot .btn,
  .after-calc .btn,
  .option .btn {
    font-size: 15px;
    padding-inline: 18px;
    gap: 8px;
  }
  .option {
    padding: 26px 22px;
  }
  .option .btn {
    width: 100%;
  }
  .nav .btn {
    min-height: 48px;
  }
  .qualify {
    padding: 24px 20px;
  }
  .criteria li {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
    --dur-5: 1ms;
    --dur-reveal: 1ms;
    --stagger: 0ms;
    --reveal-y: 0px;
  }
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .is-kinetic .kw > span {
    transform: none;
  }
}

@media (max-width: 640px) {
  .faq-item::before {
    left: -10px;
  }
}

/* ---------- What we do / 02 Reach: "where your buyers come from" diagram ----------
   Three source tiles feed one Levante node (checked against the signed ICP), which feeds
   the calendar. Wires are an SVG band that scales uniformly with the card (viewBox 300x72,
   source centres at 1/6, 1/2, 5/6 = the three grid columns). Static and complete without
   JS or with reduced motion; main.js adds .is-armed (wires undrawn) and .is-live
   (draw-in, then one pass of pulses, replayed when the card comes back into view),
   and .is-paused while offscreen or the tab is hidden. */

.src-map {
  --src-t: 3.4s;            /* one pass: 1.15s draw-in + 0.24s offset + 3.4s = 4.8s, under WCAG 2.2.2's 5s */
  --src-d: 1.15s;           /* wires finish drawing before the first pulse */
  --src-ring: 100px;
  --src-tile: 50px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 560px;
  margin: 30px 0 0;
  padding: 18px 22px 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

/* dotted canvas, fading towards the edges */
.src-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--line) 1.1px, transparent 1.6px);
  background-size: 18px 18px;
  background-position: 9px 9px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 55%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 55%, #000 35%, transparent 100%);
}

/* header: title tape left, live dot + tape right */
.src-map-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 26px;
}
.src-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;        /* stays right-aligned even if the header wraps */
}
.src-live-dot {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--held);
  box-shadow: 0 0 0 3px var(--held-bg);
}

.src-canvas {
  position: relative;
}

/* ---------- Sources ---------- */

.src-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}
.src-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
  padding: 0 4px;
  text-align: center;
}
.src-name {
  display: block;
  max-width: 7.4em;
  font-size: 14px;
  font-weight: 620;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--ink);
}

.src-tile {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--src-tile);
  height: var(--src-tile);
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(21, 19, 15, 0.04), 0 10px 18px -12px rgba(21, 19, 15, 0.42);
  color: var(--ink);
}
.src-tile svg,
.src-cal-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Wires (SVG band between the tiles and the hub) ---------- */

.src-wires {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 300 / 72;
  overflow: visible;
}
/* wires are a faint track so the travelling leads read clearly on top of them */
.src-wire {
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.5;
}
.src-wire--1 { stroke: var(--amber); }
.src-wire--2 { stroke: var(--sun); }
.src-wire--3 { stroke: var(--sun-deep); }

/* each lead: a bright round head, with a soft amber halo path underneath */
.src-pulse {
  fill: none;
  stroke: var(--sun);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 4 200;
  stroke-dashoffset: 4;
  opacity: 0;
}
.src-pulse--halo {
  stroke: var(--amber);
  stroke-width: 11;
  stroke-opacity: 0.38;
}

/* ---------- Hub: Levante node, ICP check, calendar ---------- */

.src-hub {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(var(--src-ring) / -2);
}
.src-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--src-ring);
  height: var(--src-ring);
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line);
}
/* warm gradient ring around the tile */
.src-ring::before {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: conic-gradient(from 210deg, rgba(243, 166, 74, 0.15), var(--amber), var(--sun), var(--sun-deep), rgba(200, 64, 26, 0.15), rgba(243, 166, 74, 0.15));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
}
.src-hub-tile {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 60%;
  height: 60%;
  border-radius: 16px;
  background: var(--night);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 26px -14px rgba(200, 64, 26, 0.7);
}
.src-hub-tile svg {
  width: 58%;
  height: auto;
}
.src-ripple {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1.5px solid var(--sun);
  opacity: 0;
}

.src-stem {
  position: relative;
  display: block;
  flex: none;
  width: 2px;
  height: 18px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(238, 90, 36, 0.5);
  transform-origin: 50% 0;
}
.src-stem--2 {
  height: 22px;
}
.src-stem i {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(238, 90, 36, 0) 10%, var(--sun) 75%);
  transform: translateY(-101%);
}

.src-map .src-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 16px -14px rgba(21, 19, 15, 0.5);
  font-size: 14px;
  font-weight: 620;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: left;
}
.src-check::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--held-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%2317693f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.src-cal {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--held);
  box-shadow: 0 1px 0 rgba(21, 19, 15, 0.04), 0 14px 24px -16px rgba(21, 19, 15, 0.5);
}
.src-cal::after {
  content: "";
  position: absolute;
  inset: -1px -1px -1px -3px;
  border-radius: 12px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--held) 16%, transparent), 0 0 22px color-mix(in srgb, var(--held) 18%, transparent);
  opacity: 0;
  pointer-events: none;
}
.src-cal-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--held-bg);
  color: var(--held);
}
.src-cal-text {
  display: grid;
  justify-items: start;
  gap: 4px;
}
.src-cal-text strong {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.src-cal-status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--held-bg);
  color: var(--held);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  transform-origin: 0 50%;
}

/* ---------- Motion (JS only, never under reduced motion) ---------- */

/* armed: wires and stems wait undrawn until the card is in view */
.src-map.is-armed .src-wire {
  stroke-dasharray: 100 120;
  stroke-dashoffset: 100;
}
.src-map.is-armed .src-stem {
  transform: scaleY(0);
}

/* live: draw in once, sources first, then the path down to the calendar */
.src-map.is-live .src-wire {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur-5) var(--ease-out);
}
.src-map.is-live .src-wire--2 {
  transition-delay: 0.08s;
}
.src-map.is-live .src-wire--3 {
  transition-delay: 0.16s;
}
.src-map.is-live .src-stem {
  transform: none;
  transition: transform 0.35s var(--ease-out) 0.85s;
}
.src-map.is-live .src-stem--2 {
  transition-delay: 1.05s;
}

/* live: one lead per source travels to the hub, the hub checks it, it lands on the calendar.
   One pass (animation-iteration-count 1); every 100% keyframe equals the static diagram. */
.src-map.is-live .src-pulse {
  animation: src-travel var(--src-t) cubic-bezier(0.45, 0, 0.3, 1) calc(var(--src-d) + var(--src-o, 0s)) 1 both;
}
.src-map.is-live .src-pulse--2 {
  --src-o: 0.12s;
}
.src-map.is-live .src-pulse--3 {
  --src-o: 0.24s;
}
.src-map.is-live .src-ripple {
  animation: src-ripple var(--src-t) var(--ease-out) var(--src-d) 1 both;
}
.src-map.is-live .src-hub-tile {
  animation: src-bump var(--src-t) ease-in-out var(--src-d) 1 both;
}
.src-map.is-live .src-stem i {
  animation: src-drop var(--src-t) ease-in var(--src-d) 1 both;
}
.src-map.is-live .src-stem--2 i {
  animation-name: src-drop-2;
}
.src-map.is-live .src-cal-status {
  animation: src-pop var(--src-t) ease-in-out var(--src-d) 1 both;
}
.src-map.is-live .src-cal::after {
  animation: src-glow var(--src-t) ease-out var(--src-d) 1 both;
}

/* offscreen or hidden tab: freeze the pass in place */
.src-map.is-paused *,
.src-map.is-paused *::before,
.src-map.is-paused *::after {
  animation-play-state: paused !important;
}

@keyframes src-travel {
  0% {
    stroke-dashoffset: 4;
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  32% {
    opacity: 1;
  }
  36% {
    stroke-dashoffset: -100;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: -100;
    opacity: 0;
  }
}

@keyframes src-ripple {
  0%,
  37% {
    transform: scale(1);
    opacity: 0;
  }
  39% {
    opacity: 0.6;
  }
  58%,
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

@keyframes src-bump {
  0%,
  37% {
    transform: none;
  }
  42% {
    transform: scale(1.07);
  }
  48%,
  100% {
    transform: none;
  }
}

@keyframes src-drop {
  0%,
  45% {
    transform: translateY(-101%);
  }
  53%,
  100% {
    transform: translateY(101%);
  }
}

@keyframes src-drop-2 {
  0%,
  53% {
    transform: translateY(-101%);
  }
  61%,
  100% {
    transform: translateY(101%);
  }
}

@keyframes src-pop {
  0%,
  61% {
    transform: none;
  }
  65% {
    transform: scale(1.1);
  }
  71%,
  100% {
    transform: none;
  }
}

@keyframes src-glow {
  0%,
  60% {
    opacity: 0;
  }
  64% {
    opacity: 1;
  }
  88%,
  100% {
    opacity: 0;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .src-map {
    --src-ring: 88px;
    --src-tile: 46px;
    margin-top: 24px;
    padding: 16px 16px 22px;
    border-radius: 16px;
  }
  .src-map-top {
    margin-bottom: 20px;
  }
  .src-node {
    gap: 9px;
    padding: 0 2px;
  }
  .src-name {
    font-size: 13px;
  }
  .src-hub-tile {
    border-radius: 14px;
  }
  /* the band is drawn at ~1x here, so thicken the strokes back up */
  .src-wire {
    stroke-width: 1.35;
  }
  .src-pulse {
    stroke-width: 4.6;
  }
  .src-pulse--halo {
    stroke-width: 12;
  }
  .src-map .src-check {
    font-size: 13.5px;
  }
}

@media (max-width: 400px) {
  .src-map {
    --src-ring: 82px;
    --src-tile: 44px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .src-name {
    font-size: 12.5px;
  }
  .src-map .src-check {
    font-size: 13px;
    padding-right: 12px;
  }
  .src-map-top {
    gap: 8px 10px;
  }
  .src-live {
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .src-map *,
  .src-map *::before,
  .src-map *::after {
    animation: none !important;
  }
  .src-map .src-wire {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .src-map .src-stem {
    transform: none;
  }
  .src-map .src-pulse,
  .src-map .src-ripple,
  .src-map .src-cal::after {
    opacity: 0;
  }
  .src-map .src-stem i {
    transform: translateY(-101%);
  }
}

/* ---------- How it works: stepper ("the motion") ----------
   Static (no JS): a plain ordered list, every step expanded, screens hidden.
   .is-ready (07-steps.js): tabs on the left, one dark screen on the right. */

.hiw {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

.hiw-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
/* static: a 2 x 2 grid of expanded steps on wide screens, a single list below 980px */
.hiw:not(.is-ready) .hiw-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 72px);
  border-top: 0;
}
.hiw:not(.is-ready) .hiw-item {
  border-bottom: 0;
  border-top: 1px solid var(--line);
}
.hiw:not(.is-ready) .hiw-item:nth-child(-n + 2) {
  border-top-color: var(--ink);
}
.hiw-item {
  position: relative;
  border-bottom: 1px solid var(--line);
}
.hiw-tab {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: baseline;
  padding: 22px 0 24px;
}
.hiw-num {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sun-text);
}
.hiw-who {
  grid-column: 2;
  grid-row: 1;
}
.hiw-title {
  grid-column: 2;
  margin-top: 8px;
  font-size: clamp(1.45rem, 2.3vw, 1.95rem);
  line-height: 1.08;
  letter-spacing: -0.032em;
  font-variation-settings: "opsz" 72;
}
.hiw-desc {
  grid-column: 2;
}
.hiw-desc p {
  padding-top: 12px;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.hiw-bar,
.hiw-stage {
  display: none;
}

/* ---------- Interactive state ---------- */

.hiw.is-ready {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 5.5vw, 84px);
  align-items: center;
}
.hiw.is-ready .hiw-stage {
  display: block;
}
.hiw.is-ready .hiw-item {
  transition: transform var(--dur-4) var(--ease-out);
}
.hiw.is-ready .hiw-tab {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hiw.is-ready .hiw-item.is-active .hiw-tab {
  cursor: default;
}
.hiw-tab:focus-visible {
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.hiw.is-ready .hiw-num {
  color: var(--muted);
  transition: color 0.3s;
}
.hiw.is-ready .hiw-title {
  color: var(--muted);
  transition: color 0.3s;
}
.hiw.is-ready .hiw-tab:hover .hiw-title {
  color: var(--ink-2);
}
.hiw.is-ready .hiw-item.is-active .hiw-num {
  color: var(--sun-text);
}
.hiw.is-ready .hiw-item.is-active .hiw-title {
  color: var(--ink);
}

/* only the active step shows its description; its box keeps the tallest height (set by JS) */
.hiw.is-ready .hiw-desc {
  display: none;
}
.hiw.is-ready .hiw-item.is-active .hiw-desc {
  display: block;
  min-height: var(--hiw-desc-h, 0px);
  animation: hiw-desc-in 0.55s 0.08s var(--ease-out) both;
}
.hiw.is-measuring .hiw-desc,
.hiw.is-measuring .hiw-item.is-active .hiw-desc {
  display: block;
  min-height: 0;
  animation: none;
}

@keyframes hiw-desc-in {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* progress bar on the active step while auto-advancing */
.hiw.is-ready .hiw-bar {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--sun);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}
.hiw.is-auto .hiw-item.is-active .hiw-bar {
  animation: hiw-progress var(--hiw-dwell) linear forwards;
}
.hiw.is-auto.is-paused .hiw-item.is-active .hiw-bar {
  animation-play-state: paused;
}

@keyframes hiw-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ---------- The screen ---------- */

.hiw-stage {
  position: relative;
}
/* soft sunrise behind the window */
.hiw-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 12%;
  right: -6%;
  top: 10%;
  bottom: 64px; /* ends above the caption, so "Illustrative example" never sits on the glow */
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(243, 166, 74, 0.42), rgba(238, 90, 36, 0.14) 60%, rgba(238, 90, 36, 0));
  pointer-events: none;
}
.hiw-screen {
  z-index: 1;
}
.hiw-panels {
  display: grid;
}
.hiw-panel {
  grid-area: 1 / 1;
  min-width: 0;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-2);
}
.hiw-panel.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0.1s, 0.1s, 0s;
}
.no-js .hiw-panel:first-child,
.no-js .hiw-panel:first-child .hiw-in {
  visibility: visible;
  opacity: 1;
  transform: none;
}
.hiw-panel:focus-visible {
  outline-offset: 5px;
}

/* rows inside the active panel arrive one after another */
.hiw-in {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.hiw-panel.is-active .hiw-in {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.16s + var(--i, 0) * var(--stagger));
}

.hiw-phead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 14px;
}

.hiw-card {
  padding: 18px;
  border-radius: 12px;
  border: 1px solid var(--night-line);
  background: var(--night-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.hiw-card-title {
  display: block;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--night-text);
}
.hiw-meta {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--night-muted);
}
.hiw-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--night-line);
}
.hiw-ex {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--amber);
  margin-right: 4px;
}

/* 01: calendar invite */
.hiw-invite-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--night-line);
}
.hiw-cal {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(238, 90, 36, 0.4);
  background: rgba(238, 90, 36, 0.14);
  color: var(--amber);
}
.hiw-block {
  padding-top: 14px;
}
.hiw-people,
.hiw-chips,
.hiw-inboxes,
.hiw-status {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hiw-people {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.hiw-people li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hiw-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--night-line);
  color: var(--night-text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hiw-avatar--sun {
  background: var(--sun-deep);
  color: #fff;
}
.hiw-person {
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--night-text);
}
.hiw-person small {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--night-muted);
}
.hiw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.hiw-chips li {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--night-line);
  background: rgba(244, 239, 230, 0.04);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--night-text);
}

/* 02: ICP document + 04: brief */
.hiw-stamp {
  flex: none;
  padding: 4px 8px;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--amber);
  transform: rotate(-3deg);
}
.hiw-rows {
  margin: 0;
  display: grid;
}
.hiw-rows > div {
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
}
.hiw-rows > div + div {
  border-top: 1px solid rgba(58, 53, 45, 0.7);
}
.hiw-rows dt {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--night-muted);
}
.hiw-rows dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--night-text);
}
.hiw-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--night-line);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--night-text);
}
.hiw-ticks {
  display: inline-flex;
  gap: 5px;
}
.hiw-ticks i {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--held) 32%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%239fdcb9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.hiw-held {
  flex: none;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--held-on-dark) 30%, transparent);
  background: color-mix(in srgb, var(--held) 20%, transparent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--held-on-dark);
}
.hiw-rebook,
.hiw-next {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(243, 166, 74, 0.28);
  border-left: 3px solid var(--amber);
  background: rgba(243, 166, 74, 0.07);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.45;
  color: #f6c890;
}
.hiw-next {
  border-color: var(--night-line);
  border-left-color: var(--sun);
  background: rgba(238, 90, 36, 0.06);
  color: var(--night-text);
}
.hiw-rebook-icon,
.hiw-next-icon {
  flex: none;
  font-size: 15px;
  line-height: 1;
}
.hiw-next-icon {
  color: var(--amber);
}

/* 03: sending setup */
.hiw-inboxes {
  display: grid;
  margin-top: 4px;
}
.hiw-inboxes li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(60px, 110px) 64px;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(58, 53, 45, 0.7);
}
.hiw-inboxes li:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}
.hiw-addr {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--night-text);
}
.hiw-warm {
  position: relative;
  height: 6px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(244, 239, 230, 0.08);
}
.hiw-warm i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to right, var(--sun), var(--amber));
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-out);
}
.hiw-panel.is-active .hiw-warm i {
  transform: scaleX(var(--w, 1));
  transition-delay: calc(0.3s + var(--i, 0) * 90ms);
}
.hiw-state {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
  color: var(--held-on-dark);
}
.hiw-status {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.hiw-status li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--night-line);
  background: rgba(244, 239, 230, 0.03);
  font-size: 14px;
  color: var(--night-text);
}
.hiw-status small {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--night-muted);
}
.hiw-status b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--held-on-dark);
}
.hiw-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--held) 35%, transparent);
}

/* caption + pause control under the screen */
.hiw-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  min-height: 44px;
  margin-top: 18px;
}
.hiw-caption .microcopy {
  color: var(--ink-2);
}
.hiw-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-right: -6px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
}
.hiw-toggle::before {
  content: "";
  flex: none;
  width: 9px;
  height: 10px;
  background: linear-gradient(to right, currentColor 0 3px, transparent 3px 6px, currentColor 6px 9px);
}
.hiw-toggle.is-off::before {
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.hiw-toggle:hover {
  color: var(--ink);
}
.hiw-toggle[hidden] {
  display: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .hiw.is-ready {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
  .hiw.is-ready .hiw-stage {
    width: 100%;
    max-width: none;
  }
  /* full-width stage: keep the glow inside the viewport */
  .hiw-stage::before {
    right: 0;
  }
  .hiw-desc p {
    max-width: 60ch;
  }
  .hiw:not(.is-ready) .hiw-list {
    grid-template-columns: minmax(0, 1fr);
    max-width: 780px;
    border-top: 1px solid var(--ink);
  }
  .hiw:not(.is-ready) .hiw-item,
  .hiw:not(.is-ready) .hiw-item:nth-child(-n + 2) {
    border-top: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 640px) {
  .hiw-tab {
    grid-template-columns: 2.4rem minmax(0, 1fr);
    padding: 18px 0 20px;
  }
  .hiw-title {
    margin-top: 6px;
    font-size: 1.45rem;
  }
  .hiw-desc p {
    padding-top: 10px;
    font-size: 15.5px;
  }
  .hiw-stage::before {
    left: 0;
    right: 0;
  }
}

/* phone: the screen's rows stack and the brief drops its two optional rows */
@media (max-width: 520px) {
  .hiw-screen .screen-title small {
    display: none;
  }
  .hiw-panels.screen-body {
    padding: 14px;
  }
  .hiw-card {
    padding: 14px;
  }
  .hiw-rows > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    padding: 7px 0;
  }
  .hiw-rows dt {
    padding-top: 0;
  }
  .hiw-rows .hiw-extra {
    display: none;
  }
  .hiw-inboxes li {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 12px;
    padding: 10px 0;
  }
  .hiw-warm {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .hiw-status li {
    padding: 9px 12px;
  }
}

@media (max-width: 400px) {
  .hiw-phead .tape,
  .hiw-phead .screen-pill,
  .hiw-card-head .tape,
  .hiw-stamp,
  .hiw-held {
    letter-spacing: 0.05em;
  }
  .hiw-card-title {
    font-size: 15px;
  }
  .hiw-stamp {
    padding: 3px 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hiw-item,
  .hiw-panel,
  .hiw-panel.is-active,
  .hiw-in,
  .hiw-panel.is-active .hiw-in,
  .hiw-warm i,
  .hiw-panel.is-active .hiw-warm i {
    transition-delay: 0s !important;
  }
  .hiw.is-ready .hiw-item.is-active .hiw-desc {
    animation: none;
  }
  .hiw.is-ready .hiw-bar,
  .hiw.is-auto .hiw-item.is-active .hiw-bar {
    display: none;
    animation: none;
  }
}

/* ---------- Two options: the pitch above the two cards ---------- */

.options-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(44px, 6vw, 72px);
}
.options-head {
  max-width: 820px;
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .options-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
}
/* ---------- FAQ: the answer first, then the detail ---------- */

.faq-answer strong {
  color: var(--ink);
  font-weight: 650;
}

.faq-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  color: var(--sun-text);
  text-decoration: none;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  font-variation-settings: "opsz" 24;
  transition: color 0.2s;
}
.faq-more-arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sun-deep);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-1);
}
@media (hover: hover) and (pointer: fine) {
  .faq-more:hover {
    color: var(--ink);
  }
  .faq-more:hover .faq-more-arrow {
    transform: translateX(3px);
    background: #b3380f;
  }
}

/* ---------- Book: centered close on a warm glow, scheduler right below ---------- */

.book .night-glow {
  height: 60%;
}
.book-head .lead {
  max-width: 52ch;
}
/* the visitor's own calculator result, shown only after they edit an input */
.book-yours {
  max-width: 52ch;
  margin: 18px auto 0;
  font-size: 1.05rem;
  line-height: 1.5;
}
.book-yours[hidden] {
  display: none;
}
.section--night .book-yours {
  color: var(--night-text);
}
.book-yours b {
  font-family: var(--font-mono);
  font-weight: 650;
  color: var(--amber);
}
/* ---------- Floating "Book a call" on phones and tablets ---------- */

.float-cta {
  display: none;
}

@media (max-width: 920px) {
  html:not(.no-js) .float-cta {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--sun-deep);
    color: #fff;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 16px 32px -14px rgba(21, 19, 15, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform: translate(-50%, 150%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2), visibility 0s linear var(--dur-3);
  }
  html:not(.no-js) .float-cta.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2), visibility 0s;
  }
  /* room so the button never sits on the last lines of the footer */
  html:not(.no-js) body:has(> .float-cta) .site-footer {
    padding-bottom: calc(44px + 72px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 920px) and (prefers-reduced-motion: reduce) {
  html:not(.no-js) .float-cta,
  html:not(.no-js) .float-cta.is-visible {
    transform: translate(-50%, 0);
    transition: none;
  }
}

/* phones: keep focused controls clear of the floating call button */
@media (max-width: 920px) {
  html:not(.no-js) {
    scroll-padding-bottom: 88px;
  }
}

/* sections that receive focus from in-page links don't need a ring around the whole block */
[tabindex="-1"]:focus {
  outline: none;
}

/* booked + privacy header: "← Back" on small phones; the full name stays for screen readers */
@media (max-width: 480px) {
  .back-long {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* ---------- Print / Save as PDF: everything visible, UI chrome hidden ---------- */
@media print {
  .site-header,
  .float-cta,
  .hiw-toggle,
  .calc-live,
  .embed,
  .night-glow {
    display: none !important;
  }
  .reveal,
  .hiw-in,
  .model-calendar .meeting,
  .model-calendar .calendar-foot {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .is-kinetic .kw > span {
    transform: none !important;
  }
  .section--night,
  .calc-hero,
  .option--us,
  .screen,
  .site-footer,
  .video-card,
  .founder-note {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* founder portrait on /about */
.portrait {
  margin: 1.25rem 0 1.5rem;
  max-width: 260px;
}
.portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* /msp-mrr-calculator: the calculator uses the full container width, the text keeps the guide column */
.calc-page .container {
  max-width: 1040px;
}
.calc-page .guide-body,
.calc-page .guide-cta,
.calc-page .guide-related {
  max-width: 780px;
  margin-inline: auto;
}
.calc-page .calc {
  margin: 32px 0 8px;
}
.calc-page .calc-row output {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  white-space: nowrap;
  overflow-wrap: normal;
}