:root {
  --paper: #f6f5ef;
  --card: #ffffff;
  --hair: #e5e4da;
  --tile-border: #e3e7e1;
  --ink: #17231f;
  --body: #2c3a34;
  --secondary: #5c6862;
  --field: #122622;
  --footer: #0e1d19;
  --accent: #0f6b60;
  --accent-hover: #0b564d;
  --on-green: #c2d3c9;
  --label: #a9c4b8;
  --kicker: #7fa294;
  --footer-link: #7fd4c4;
  --footer-body: #9db3a9;
  --privacy: #93aba0;
  --sms: #2b5fa6;
  --vm: #b45d0e;
  --err-border: #cb6f60;
  --err-text: #f0a99b;
  --input: #f7f6f1;
  --ph: #8a938d;
  --font: "Public Sans", system-ui, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, monospace;
  --kbd: 0px;
  --sticky-h: 0px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
.mono, input[type="tel"], input[type="date"] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.hp {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid var(--hair);
  background: rgba(246, 245, 239, 0.97);
}
.wordmark {
  font: 700 17px/1 var(--font);
  color: var(--ink);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.wordmark:hover { color: var(--ink); }
.nav-phone-cta { display: inline-flex; }
.nav-links { display: none; align-items: center; gap: 30px; }
.nav-how {
  font: 400 15px/1 var(--font);
  color: var(--body);
  text-decoration: none;
}
.nav-how:hover { color: var(--ink); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: 600 13.5px/1 var(--font);
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--accent-hover); color: #fff; }
.btn:disabled { opacity: 0.7; cursor: wait; }
.btn-lg { width: 100%; min-height: 48px; padding: 16px; font-size: 16px; }

.hero {
  padding: 40px 20px 48px;
}
.kicker {
  margin: 0;
  font: 500 10.5px/1.5 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero h1 {
  margin: 14px 0 0;
  font: 600 34px/1.14 var(--font);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lede {
  margin: 18px 0 0;
  font: 400 17.5px/1.5 var(--font);
  color: var(--body);
}
.for-who {
  margin: 16px 0 0;
  font: 400 13.5px/1.5 var(--font);
  color: var(--secondary);
}
.hero-cta { margin-top: 30px; }

.section { padding: 48px 20px; border-top: 1px solid var(--hair); }
.idx {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.16em;
  color: #8a938d;
}
.section h2 {
  margin: 14px 0 0;
  font: 600 28px/1.18 var(--font);
  letter-spacing: -0.02em;
}
.section .sub {
  margin: 12px 0 0;
  font: 400 15px/1.6 var(--font);
  color: var(--secondary);
}
.section .copy {
  margin: 14px 0 0;
  font: 400 16.5px/1.6 var(--font);
  color: var(--body);
}
.aside {
  margin: 12px 0 0;
  font: 400 14px/1.6 var(--font);
  color: var(--secondary);
}

.tiles { display: grid; gap: 14px; margin-top: 28px; }
.tile {
  background: var(--card);
  border: 1px solid var(--tile-border);
  border-radius: 10px;
  padding: 22px;
}
.tag {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.18em;
}
.tag.sms { color: var(--sms); }
.tag.vm { color: var(--vm); }
.tag.managed { color: var(--accent); }
.tile h3, .beat h3 {
  margin: 12px 0 0;
  font: 600 19px/1.25 var(--font);
}
.tile p, .beat p {
  margin: 8px 0 0;
  font: 400 15px/1.55 var(--font);
  color: var(--body);
}

.beats { display: grid; gap: 26px; margin-top: 28px; }
.beat .n {
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--accent);
}
.beat h3 { margin-top: 10px; }

.proof {
  background: var(--field);
  border-top: 0;
  padding: 48px 20px;
}
.proof .idx { color: var(--kicker); }
.proof h2 { color: #f4f6f1; }
.proof .sub { color: var(--on-green); }
.proof-tiles { display: grid; gap: 14px; margin-top: 28px; }
.proof-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 22px;
}
.proof-card h3 {
  margin: 0;
  font: 600 17px/1.3 var(--font);
  color: #f4f6f1;
}
.proof-card p {
  margin: 8px 0 0;
  font: 400 14.5px/1.6 var(--font);
  color: var(--on-green);
}
.sample { margin-top: 36px; }
.phone-still {
  width: 230px;
  margin: 0 auto;
  background: #0b1613;
  border-radius: 30px;
  padding: 11px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.phone-screen {
  background: #10211c;
  border-radius: 20px;
  padding: 16px 14px 24px;
  min-height: 240px;
}
.notch {
  width: 52px;
  height: 5px;
  border-radius: 3px;
  background: #23423a;
  margin: 0 auto 20px;
}
.bubble {
  background: #1e3d35;
  border-radius: 14px;
  border-top-left-radius: 4px;
  padding: 12px 13px;
  max-width: 186px;
}
.bubble p {
  margin: 0;
  font: 400 14px/1.45 var(--font);
  color: #eaf1ec;
}
.bubble .meta {
  margin-top: 10px;
  font: 400 10.5px/1.5 var(--mono);
  color: var(--label);
}
.sample-cap {
  margin: 20px 0 0;
  font: 400 15px/1.65 var(--font);
  color: var(--on-green);
  text-align: center;
}

#signup, #how, #who, #what, #proof, #privacy, #terms {
  scroll-margin-top: 64px;
}
.signup { padding: 24px 20px calc(28px + var(--sticky-h)); }
.form-card {
  background: var(--field);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 28px 70px rgba(18, 38, 34, 0.22);
  padding: 30px 22px;
}
.form-card h2, .form-card h3 {
  margin: 0;
  font: 600 22px/1.2 var(--font);
  color: #f4f6f1;
  letter-spacing: -0.01em;
}
.form-lead {
  margin: 8px 0 22px;
  font: 400 14.5px/1.5 var(--font);
  color: var(--on-green);
}
.field { margin-bottom: 16px; }
.field label, .field .lbl {
  display: block;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 7px;
}
.opt { color: #6e8c80; text-transform: none; letter-spacing: 0.08em; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 45px;
  padding: 12px 14px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--input);
  color: var(--ink);
  font: 400 16px/1.3 var(--font);
  appearance: none;
}
.field textarea { min-height: 98px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ph); }
.field select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%236e8c80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
}
.field.bad input, .field.bad select, .field.bad textarea {
  border-color: var(--err-border);
}
.field-err {
  display: none;
  margin-top: 7px;
  font: 400 13px/1.4 var(--font);
  color: var(--err-text);
}
.field.bad .field-err { display: block; }
.pair { display: grid; gap: 16px; }
.form-submit { width: 100%; margin-top: 4px; padding: 15px; font-size: 16px; }
.protect {
  margin: 12px 0 0;
  text-align: center;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--kicker);
}
.cf-turnstile-slot { margin: 4px 0 12px; min-height: 65px; }
.cf-turnstile-slot[hidden] { display: none; min-height: 0; margin: 0; }
.success {
  display: none;
  padding: 38px 10px 30px;
  text-align: center;
}
.success.show { display: block; }
.form-card.sent form { display: none; }
.check {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font: 600 20px/46px var(--font);
  margin: 0 auto 20px;
}
.success h3 {
  font: 600 26px/1.2 var(--font);
  color: #f4f6f1;
  letter-spacing: -0.015em;
}
.success p {
  margin: 12px 0 0;
  font: 400 15.5px/1.55 var(--font);
  color: var(--on-green);
}
.success-note {
  margin: 24px 0 0;
  text-align: center;
  font: 400 13.5px/1.5 var(--font);
  color: var(--secondary);
}

.foot {
  background: var(--footer);
  color: var(--footer-body);
  padding: 48px 20px 36px;
  font: 400 14.5px/1.6 var(--font);
}
.foot strong {
  display: block;
  font: 700 18px/1 var(--font);
  color: #f4f6f1;
}
.foot p { margin: 12px 0 0; }
.foot a { color: var(--footer-link); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.legal { display: flex; gap: 20px; margin-top: 24px; }
.legal a { color: var(--on-green); font-size: 14px; }
.privacy-kicker {
  margin-top: 28px;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.18em;
  color: var(--kicker);
}
.privacy-copy {
  margin: 12px 0 0;
  font: 400 13.5px/1.65 var(--font);
  color: var(--privacy);
  max-width: 58ch;
}

.sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--kbd);
  z-index: 30;
  background: rgba(246, 245, 239, 0.96);
  border-top: 1px solid var(--hair);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.sticky-cta.show { display: block; }
.sticky-cta .btn { width: 100%; min-height: 48px; font-size: 16px; }

@media (min-width: 560px) {
  .form-card { padding: 30px 28px; }
  .pair { grid-template-columns: 1fr 1fr; align-items: end; }
}

@media (min-width: 900px) {
  .sticky-cta { display: none !important; }
  .hero-cta { display: none; }
  .nav {
    padding: 24px clamp(48px, 6vw, 88px);
    background: var(--paper);
  }
  .wordmark { font-size: 20px; }
  .nav-links { display: flex; }
  .nav-phone-cta { display: none; }
  .nav .btn { min-height: 40px; padding: 12px 18px; font-size: 14.5px; }

  .shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 470px;
    column-gap: 76px;
    padding-inline: clamp(48px, 6vw, 88px);
  }
  .nav { grid-column: 1 / -1; margin-inline: calc(-1 * clamp(48px, 6vw, 88px)); }
  .hero {
    grid-column: 1;
    grid-row: 2;
    padding: 60px 0 84px;
  }
  .kicker {
    font-size: 11.5px;
    letter-spacing: 0.18em;
    line-height: 1;
  }
  .hero h1 {
    margin-top: 22px;
    font: 600 58px/1.07 var(--font);
    letter-spacing: -0.025em;
  }
  .lede {
    margin-top: 26px;
    font: 400 20px/1.55 var(--font);
    max-width: 36ch;
  }
  .for-who { margin-top: 22px; font-size: 15px; }

  .signup {
    grid-column: 2;
    grid-row: 2;
    padding: 60px 0 84px;
    align-self: start;
  }
  .success-note { display: none; }

  .section, .proof, .foot {
    grid-column: 1 / -1;
    margin-inline: calc(-1 * clamp(48px, 6vw, 88px));
    padding: 100px clamp(48px, 6vw, 88px);
  }
  .section { border-top: 1px solid var(--hair); }
  .split {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 32px;
  }
  .idx { font-size: 12px; letter-spacing: 0.18em; margin: 0; padding-top: 10px; }
  .section h2, .proof h2 {
    margin: 0;
    font: 600 38px/1.15 var(--font);
    letter-spacing: -0.02em;
  }
  .section .sub { margin-top: 18px; font-size: 17px; }
  .section .copy { margin-top: 22px; font-size: 18px; max-width: 58ch; }
  .aside { margin-top: 16px; font-size: 15px; max-width: 58ch; }
  .tiles { grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 44px; }
  .tile { padding: 28px 26px; }
  .tile h3, .beat h3 { margin-top: 16px; font-size: 20px; }
  .tile p, .beat p { margin-top: 10px; font-size: 15.5px; }
  .beats { grid-template-columns: 1fr 1fr 1fr; gap: 44px; margin-top: 44px; }
  .beat .n { font-size: 13px; }
  .beat h3 { margin-top: 14px; }
  .proof-tiles { grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 44px; }
  .proof-card { padding: 26px 24px; }
  .sample {
    display: flex;
    gap: 52px;
    align-items: center;
    margin-top: 64px;
  }
  .phone-still { width: 250px; margin: 0; border-radius: 32px; padding: 12px; }
  .phone-screen { border-radius: 22px; padding: 18px 16px 26px; min-height: 270px; }
  .notch { width: 56px; }
  .bubble { padding: 13px 14px; max-width: 200px; }
  .sample-cap { margin: 0; text-align: left; font-size: 15.5px; max-width: 44ch; }
  .foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    padding: 64px clamp(48px, 6vw, 88px) 72px;
  }
  .privacy-kicker { margin-top: 0; }
}

@media (min-width: 900px) and (max-height: 860px) {
  .hero, .signup { padding-top: 36px; padding-bottom: 40px; }
  .form-card { padding: 22px 24px; }
  .form-lead { margin-bottom: 16px; }
  .field { margin-bottom: 12px; }
  .field textarea { min-height: 72px; }
}

@media (max-width: 899px) {
  body.sticky-on { padding-bottom: var(--sticky-h); }
}