:root {
  --sauce: #B5221A;
  --sauce-deep: #8E1712;
  --sauce-tint: #FBEDEA;
  --dough: #FFF4DC;
  --ink: #1D1A17;
  --ink-soft: #5A524B;
  --white: #FFFFFF;
  --line: #E9E4DD;
  --tape: #F2C230;
  --basil: #1F7A3E;
  --gutter: 20px;
  --font: "Public Sans", system-ui, sans-serif;
  --mail: Roboto, Arial, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--font); letter-spacing: -0.02em; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 7vw, 3.9rem); font-weight: 800; line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 4.5vw, 2.6rem); font-weight: 800; line-height: 1.15; }
h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--tape); outline-offset: 3px; }

.wrap { max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.button {
  display: inline-block;
  background: var(--sauce);
  color: var(--white);
  font: 700 1rem/1 var(--font);
  padding: 16px 24px;
  border: 2px solid var(--sauce);
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.button:hover { background: var(--sauce-deep); border-color: var(--sauce-deep); }
.button-outline { background: var(--white); color: var(--sauce); }
.button-outline:hover { background: var(--sauce-tint); color: var(--sauce-deep); }
.button-light { background: var(--white); color: var(--sauce-deep); border-color: var(--white); }
.button-light:hover { background: var(--dough); border-color: var(--dough); }
.button-small { padding: 10px 16px; font-size: 0.95rem; }
.button:disabled { opacity: 0.6; cursor: progress; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.wordmark { font: 800 1.45rem/1 var(--font); letter-spacing: -0.03em; color: var(--sauce); text-decoration: none; margin: 0; }
.topnav { display: flex; align-items: center; gap: 22px; font-weight: 600; font-size: 0.95rem; }
.topnav a:not(.button) { text-decoration: none; display: none; }

.hero { padding-top: 48px; padding-bottom: 56px; max-width: 52rem; }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 38rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 16px; }
.price-note { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

/* The sample Monday email, shown large on a red band. */
.showcase { background: var(--sauce); padding: 48px 0; }
.showcase-inner { display: grid; justify-items: center; }
.showcase-caption { color: var(--dough); font-size: 0.9rem; margin: 16px 0 0; }
.mail {
  margin: 0;
  background: var(--white);
  color: #202124;
  font: 400 0.95rem/1.5 var(--mail);
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 24px 48px -18px rgba(60, 8, 4, 0.55);
  max-width: 34rem;
  width: 100%;
}
.mail p { margin: 0; }
.mail-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--sauce); color: var(--white); display: grid; place-items: center; font: 800 0.9rem/1 var(--font); flex: none; }
.mail-from span, .mail-time { color: #5F6368; font-size: 0.85rem; }
.mail-subject { font: 600 1.3rem/1.3 var(--mail); letter-spacing: 0; margin: 0 0 12px; }
.m-summary { color: #3C4043; margin-bottom: 12px !important; }
.m-alert { background: #FEF3C7; border-left: 4px solid var(--tape); padding: 10px 12px; border-radius: 4px; margin-bottom: 14px; }
.m-label { font-weight: 700; font-size: 0.8rem; color: #7A5B00; }
.m-over { list-style: none; margin: 0; padding: 0; }
.m-over li { padding: 12px 0; border-top: 1px solid #ECECEC; }
.m-row { display: flex; justify-content: space-between; gap: 12px; }
.m-dollars { color: var(--sauce); font-weight: 700; white-space: nowrap; }
.m-check { color: #5F6368; font-size: 0.85rem; margin: 4px 0 !important; }
.m-pill { display: inline-block; background: #F1F3F4; color: #202124; font-weight: 600; border-radius: 999px; padding: 1px 9px; margin-right: 4px; }
.m-note { color: #3C4043; font-size: 0.9rem; }
.m-inside { border-top: 1px solid #ECECEC; padding-top: 12px; color: var(--basil); font-weight: 600; font-size: 0.9rem; }

.works-with { text-align: center; color: var(--ink-soft); font-weight: 600; padding-top: 28px; padding-bottom: 28px; margin: 0; border-bottom: 1px solid var(--line); }

.section { padding-top: 72px; padding-bottom: 72px; }
.fine { font-size: 0.85rem; color: var(--ink-soft); }

.problem .big-statement { font: 800 clamp(1.6rem, 4.5vw, 2.4rem)/1.2 var(--font); letter-spacing: -0.02em; max-width: 28ch; margin-bottom: 0.8em; }
.problem-detail { max-width: 38rem; font-size: 1.1rem; color: var(--ink-soft); }

.how { border-top: 1px solid var(--line); }
.steps { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 20px; counter-reset: step; }
.steps li { counter-increment: step; background: #FAF8F5; border-radius: 14px; padding: 22px; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sauce); color: var(--white); font-weight: 800; margin-bottom: 14px; }
.steps p { margin: 0; color: var(--ink-soft); }

/* The fix order, drawn like floor tape running from the back door to the make line. */
.section-full { padding: 72px 0; }
.route { background: var(--ink); color: var(--white); }
.route-intro { max-width: 40rem; font-size: 1.1rem; color: #D8D2CA; }
.route-steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; counter-reset: route; }
.route-steps li { counter-increment: route; position: relative; padding: 0 0 32px 64px; }
.route-steps li::before {
  content: counter(route);
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--tape); color: var(--ink);
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.15rem;
  z-index: 1;
}
.route-steps li::after {
  content: "";
  position: absolute; left: 18px; top: 44px; bottom: 0; width: 8px;
  background: repeating-linear-gradient(45deg, var(--tape) 0 8px, var(--ink) 8px 16px);
}
.route-steps li:last-child::after { display: none; }
.route-steps li:last-child { padding-bottom: 0; }
.route-steps p { margin: 0; color: #D8D2CA; max-width: 22rem; }

.pricing { display: grid; gap: 48px; }
.price-card { border: 2px solid var(--sauce); border-radius: 18px; padding: 30px 26px; }
.price-card h2 { font-size: clamp(2.4rem, 7vw, 3.2rem); margin-bottom: 0.2em; }
.price-sub { color: var(--ink-soft); }
.founding { background: var(--sauce-tint); border-radius: 10px; padding: 14px 16px; }
.founding strong { color: var(--sauce-deep); }
.ticks { list-style: none; padding: 0; margin: 0 0 26px; }
.ticks li { padding-left: 1.7em; position: relative; margin-bottom: 0.5em; }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--basil); font-weight: 800; }
.price-card .button { width: 100%; }
.versus dl { margin: 0 0 20px; }
.versus dl div { border-top: 1px solid var(--line); padding: 14px 0; }
.versus dt { font-weight: 700; }
.versus dd { margin: 2px 0 0; color: var(--ink-soft); }
.versus > p { font-weight: 600; }

.founder, .faq { border-top: 1px solid var(--line); display: grid; gap: 8px 48px; }
.founder-body { max-width: 38rem; font-size: 1.1rem; }

.faq-list { max-width: 42rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 700; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 700; font-size: 1.4rem; line-height: 1; color: var(--sauce); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 18px; color: var(--ink-soft); }

.signup { background: var(--sauce); color: var(--white); }
.signup-inner { display: grid; gap: 32px; }
.signup-inner > div p { color: var(--dough); }
.signup-form { display: grid; gap: 16px; max-width: 30rem; }
.signup-form label { display: grid; gap: 6px; font-weight: 600; font-size: 0.95rem; }
.signup-form input, .signup-form select {
  font: 400 1.05rem var(--font);
  padding: 14px;
  border: 0;
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  width: 100%;
}
.signup-form .button { width: 100%; margin-top: 6px; }
.form-status { min-height: 1.5em; margin: 0; }
.form-privacy { font-size: 0.85rem; color: var(--dough); margin: 0; }
.form-done { font-size: 1.15rem; font-weight: 600; background: var(--white); color: var(--ink); padding: 22px; border-radius: 14px; margin: 0; }
.hp { position: absolute; left: -9999px; }

.footer { padding-top: 40px; padding-bottom: 48px; }
.footer .wordmark { margin-bottom: 12px; }

/* Privacy policy page */
.policy { max-width: 44rem; padding-top: 32px; padding-bottom: 72px; }
.policy h1 { font-size: clamp(2rem, 6vw, 2.8rem); }
.policy h2 { font-size: 1.35rem; margin-top: 2em; }
.policy ul { padding-left: 1.2em; }
.policy li { margin-bottom: 0.4em; }

@media (min-width: 900px) {
  :root { --gutter: 40px; }
  .topnav a:not(.button) { display: inline; }
  .hero { padding-top: 80px; padding-bottom: 72px; text-align: center; margin-left: auto; margin-right: auto; }
  .lede { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .showcase { padding: 72px 0; }
  .section, .section-full { padding-top: 96px; padding-bottom: 96px; }
  .problem { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .route-steps { grid-template-columns: repeat(4, 1fr); margin-top: 56px; }
  .route-steps li { padding: 64px 28px 0 0; }
  .route-steps li::after { left: 44px; right: 0; top: 18px; bottom: auto; width: auto; height: 8px; }
  .pricing { grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; }
  .founder, .faq { grid-template-columns: 1fr 1.6fr; }
  .signup-inner { grid-template-columns: 1fr 1fr; gap: 72px; }
}