:root {
  --ink: #172033;
  --muted: #5b6472;
  --paper: #eef6f0;
  --card: #f6fbf7;
  --gold: #3f9a72;
  --gold-dark: #1f6f52;
  --green: #1f6f5b;
  --blue: #244b7a;
  --line: rgba(23, 32, 51, 0.14);
  --shadow: 0 24px 70px rgba(23, 32, 51, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(63, 154, 114, 0.18), transparent 38rem),
    linear-gradient(180deg, #f6fbf7 0%, var(--paper) 48%, #e2efe6 100%);
}
a { color: inherit; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem clamp(1.2rem, 4vw, 4rem);
  background: rgba(246, 251, 247, 0.86);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .7rem; font-weight: 800; text-decoration: none; }
.brand-mark { position: relative; width: 34px; height: 34px; border-radius: 12px; background: #172033; display: grid; place-items: center; }
.brand-mark i { position: absolute; width: 8px; height: 8px; background: var(--gold); border-radius: 50%; }
.brand-mark i:nth-child(1) { left: 8px; top: 9px; }
.brand-mark i:nth-child(2) { right: 8px; top: 9px; }
.brand-mark i:nth-child(3) { bottom: 8px; left: 13px; }
nav { display: flex; gap: 1.2rem; color: var(--muted); font-weight: 650; }
nav a { text-decoration: none; }
nav a:hover { color: var(--ink); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .8rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ink), #2b3d60);
  color: white;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(23, 32, 51, 0.18);
  border: 0;
  cursor: pointer;
}
.button.secondary { background: white; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.button.small { min-height: 38px; padding: .55rem .9rem; }

main { overflow: hidden; }
section { padding: clamp(4rem, 8vw, 7rem) clamp(1.2rem, 5vw, 5rem); }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
  column-gap: clamp(2rem, 5vw, 5rem);
  /* row-gap 0 on desktop: the copy and the buy block are two grid rows in one
     column and must stay as tightly stacked as they were when they shared a
     single div. The narrow-width rule puts the gap back when they unstack. */
  row-gap: 0;
  align-items: center;
  min-height: 84vh;
}
/* The hero is three children so that on a phone the screenshot can sit between
   the headline and the price — "output before price", measured 22 Sep 2026 as
   met on desktop (image 357px above the price) and not on mobile (402px below).
   On desktop these rules rebuild exactly the old two-column shape: everything
   that was in the copy column stays in it, and the image spans both rows. */
.hero-copy { grid-column: 1; grid-row: 1; }
/* The lead's bottom margin used to COLLAPSE with the buy block's 32px top margin
   inside one div (gap 32px). As separate grid items they no longer collapse and
   the gap became 55px, pushing the hero 23px taller. Dropping the lead's margin
   here restores the measured 32px exactly, on every width. */
.hero-copy .lead { margin-bottom: 0; }
.hero-cta  { grid-column: 1; grid-row: 2; }
.hero-shot { grid-column: 2; grid-row: 1 / span 2; }
.eyebrow { color: var(--gold-dark); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 900; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: .96; letter-spacing: -0.05em; margin-bottom: 1.3rem; }
h2 { font-size: clamp(2rem, 4vw, 4rem); line-height: 1; letter-spacing: -0.045em; margin-bottom: 1rem; }
h3 { font-size: 1.35rem; }
.lead { font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--muted); line-height: 1.55; max-width: 720px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0 1rem; }
.trust-line { color: var(--muted); font-weight: 650; }

.hero-card {
  background: linear-gradient(145deg, #fff 0%, #e9f7ee 100%);
  border: 1px solid var(--line);
  border-radius: 32px;
  box-shadow: var(--shadow);
  overflow: hidden;
  min-height: 420px;
}
.window-bar { display: flex; gap: 8px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.window-bar span { width: 12px; height: 12px; border-radius: 50%; background: #b8d9c6; }
.map-art { position: relative; min-height: 350px; }
.map-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-art path { fill: none; stroke: rgba(63, 154, 114,.75); stroke-width: 4; stroke-linecap: round; }
.node { position: absolute; z-index: 2; max-width: 44%; padding: .7rem .9rem; background: white; border: 1px solid var(--line); border-radius: 18px; font-weight: 850; font-size: .9rem; line-height: 1.2; box-shadow: 0 12px 30px rgba(23,32,51,.1); }
.root { left: 50%; top: 50%; transform: translate(-50%, -50%); background: #172033; color: white; }
.a { left: 22px; top: 40px; }
.b { right: 22px; top: 40px; }
.c { right: 40px; bottom: 40px; }

.problem, .steps, .faq { max-width: 1120px; margin: 0 auto; }
.problem p, .section-heading p, .steps p, .urgency p { color: var(--muted); font-size: 1.12rem; line-height: 1.65; }
.proof-grid, .format-columns, .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.proof-grid div, .format-card, .price-grid article, .capture, .faq details {
  background: rgba(255,255,255,.68);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 1.35rem;
  box-shadow: 0 14px 36px rgba(23,32,51,.07);
}
.proof-grid b, .proof-grid span { display: block; }
.proof-grid span { color: var(--muted); margin-top: .4rem; }

.formats { background: rgba(255,255,255,.38); }
.section-heading { max-width: 900px; margin-bottom: 1.8rem; }
.format-columns { grid-template-columns: repeat(2, 1fr); }
.format-card a { display: flex; justify-content: space-between; padding: 1rem; margin: .7rem 0; border-radius: 16px; text-decoration: none; background: white; border: 1px solid var(--line); font-weight: 850; }
.format-card.live h3::after { content: "Recovers today"; color: var(--green); font-size: .78rem; margin-left: .7rem; }
.format-card.roadmap h3::after { content: "Out of scope"; color: var(--blue); font-size: .78rem; margin-left: .7rem; }

.steps ol { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 54px 1fr; gap: 1rem; align-items: start; background: white; padding: 1rem; border-radius: 20px; border: 1px solid var(--line); }
.steps li::before { content: counter(step); width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-dark); color: white; font-weight: 900; }
.steps li > b { grid-column: 2; }
.steps li > span { grid-column: 2; display: block; color: var(--muted); margin-top: .2rem; }

form { display: grid; gap: .75rem; }
input, select, textarea { width: 100%; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 14px; font: inherit; background: white; }
textarea { resize: vertical; line-height: 1.45; }
small { color: var(--muted); }

.pricing { background: linear-gradient(180deg, rgba(23,32,51,.04), transparent); }
.price-grid article.featured { border: 2px solid var(--gold); transform: translateY(-10px); }
.price { font-size: 2.4rem; font-weight: 900; color: var(--ink); }
.pricing-note { color: var(--muted); text-align: center; margin-top: 1.4rem; }
.urgency { text-align: center; max-width: 900px; margin: 0 auto; }
.faq details { margin: .8rem 0; }
.faq summary { font-weight: 850; cursor: pointer; }
.faq p { color: var(--muted); margin: .8rem 0 0; }
footer { padding: 2rem clamp(1.2rem, 5vw, 5rem); border-top: 1px solid var(--line); color: var(--muted); display: flex; justify-content: space-between; gap: 2rem; }
.legal { max-width: 720px; }

@media (max-width: 900px) {
  nav { display: none; }
  .hero { grid-template-columns: 1fr; row-gap: clamp(2rem, 5vw, 5rem); }
  /* One column: DOM order rules, and it reads headline -> lead -> screenshot -> buy. */
  .hero-copy, .hero-cta, .hero-shot { grid-column: 1; grid-row: auto; }
  .proof-grid, .format-columns, .price-grid { grid-template-columns: 1fr; }
  .price-grid article.featured { transform: none; }
  footer { flex-direction: column; }
}

.checker {
  max-width: 1120px;
  margin: 0 auto;
  background: rgba(255,255,255,.42);
}
.checker-copy { max-width: 920px; }
.checker-copy p, .checker-note { color: var(--muted); font-size: 1.08rem; line-height: 1.65; }
.checker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0 1.2rem; }
.checker-grid article {
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 1.35rem;
  box-shadow: 0 14px 36px rgba(23,32,51,.07);
}
.checker-grid b, .checker-grid span { display: block; }
.checker-grid span { color: var(--muted); margin-top: .5rem; line-height: 1.55; }
.checker-note {
  border-left: 4px solid var(--gold);
  padding-left: 1rem;
  max-width: 900px;
}
@media (max-width: 900px) { .checker-grid { grid-template-columns: 1fr; } }

.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:#172033;color:#fff;
  padding:.6rem 1rem;border-radius:0 0 8px 0;text-decoration:none;font-weight:600}
.skip-link:focus{left:0;outline:3px solid #9db8ff;outline-offset:2px}

.promise{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem 1.4rem;margin:1.1rem 0 .6rem;padding:0}
.promise li{position:relative;padding-left:1.55rem;font-weight:600;font-size:.95rem;line-height:1.35;color:#2b3650}
.promise li::before{content:"✓";position:absolute;left:0;top:0;font-weight:800;color:#1f9d5b}

.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.deadline{max-width:1120px;margin:0 auto;text-align:center}
.deadline .clock{
  display:inline-flex;flex-direction:column;gap:.25rem;align-items:center;
  border:1px solid rgba(63, 154, 114,.5);background:rgba(246, 251, 247,.92);
  border-radius:24px;padding:1.4rem 2rem;margin:1.4rem 0 .4rem;box-shadow:var(--shadow);
}
.deadline .clock b{font-size:1.6rem;line-height:1;color:var(--ink)}
.deadline .clock span{color:var(--muted);font-weight:650}

.notify{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 440px;gap:2rem;align-items:center}
.notify form{background:rgba(255,255,255,.68);border:1px solid var(--line);border-radius:24px;padding:1.35rem;box-shadow:0 14px 36px rgba(23,32,51,.07)}

.disclaimer{max-width:1120px;margin:0 auto}
.disclaimer .card{
  border-left:4px solid var(--gold);background:rgba(255,255,255,.7);
  border:1px solid var(--line);border-radius:20px;padding:1.2rem 1.4rem;
}
.disclaimer p{color:var(--muted);line-height:1.65;margin:0}

.status-note{color:var(--gold-dark);font-weight:800;font-size:.82rem;margin-top:.6rem}

@media (max-width:900px){ .notify{grid-template-columns:1fr} }

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

.price-grid.single{grid-template-columns:minmax(0,480px);justify-content:center}
.price-grid.single article.featured{transform:none}

.demo{background:rgba(255,255,255,.30);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.demo .section-heading{margin:0 auto 1.6rem;text-align:center;max-width:760px}
.demo-frame{max-width:880px;margin:0 auto;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:#0b0d12;line-height:0}
.demo-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#0b0d12}
.demo-caption{max-width:880px;margin:1rem auto 0;text-align:center;color:var(--muted);font-size:.98rem;line-height:1.6}
.demo-caption b{color:var(--ink)}

.nav-disclosure { display: none; }
@media (max-width: 900px) {
  .nav-disclosure {
    display: block;
    order: 3;
    width: 100%;
  }
  .nav-disclosure > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.72);
    color: var(--ink);
    font-weight: 800;
  }
  .nav-disclosure > summary::-webkit-details-marker { display: none; }
  .nav-disclosure > summary::after { content: "\2304"; margin-left: .2rem; }
  .nav-disclosure[open] > summary::after { content: "\2303"; }
  .nav-disclosure nav {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin-top: .6rem;
    padding: .6rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255,250,240,0.96);
  }
  .nav-disclosure nav a { padding: .6rem .8rem; }
}

/* Real screenshots on the page (Sales School Part 3, live 22 Sep 2026). */
  .hero-shot { margin: 0; min-height: 0; display: flex; flex-direction: column; }
  .hero-shot img { display: block; width: 100%; max-width: 100%; min-width: 0; height: auto; }
  .hero-shot figcaption, .demo-shot figcaption { font-size: .85rem; color: var(--muted, #556); padding: .8rem 1.1rem 1rem; line-height: 1.45; }
  .demo-shot { margin: 0 auto 1.25rem; background: #fff; line-height: 1.4; }
  .demo-shot img { display: block; width: 100%; max-width: 100%; min-width: 0; height: auto; }
  .price-why { font-size: 1.02rem; margin: .25rem 0 1rem; color: var(--ink, #1d1d1f); }