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

:root {
  --bg: #f2ede4;
  --card-bg: #faf8f4;
  --accent: #c8ff00;
  --accent-soft: #e0f870;
  --accent-muted: #f0fbb0;
  --heading: #1a1a1a;
  --body: #3d3d39;
  --muted: #6b6960;
  --subtle: #706e66;
  --border: #e8e3d9;
  --border-strong: #d4cfc5;
  --dark-bg: #1a1a1a;
  --dark-card: #262624;
  --dark-border: #3a3a36;
  --dark-muted: #9a978e;
  --text-on-accent: #3a5a00;
  --max-w: 1100px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

html { scroll-behavior: smooth; font-size: 17px; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--heading); }

a { color: inherit; text-decoration: none; }

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

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; color: var(--heading); }
h1 { font-weight: 700; letter-spacing: -0.03em; }
h2 { font-weight: 600; letter-spacing: -0.02em; }
h3 { font-weight: 600; letter-spacing: -0.02em; }
h4 { font-weight: 600; letter-spacing: -0.02em; }

/* The sub-pages promote their top heading from h2 to h1. The bare h1 rule above
   is heavier (700) and tighter (-0.03em) than h2, so in the contexts where that
   heading used to be an h2 we hand back h2's weight and tracking. One rule
   instead of repeating the two declarations in every context block. */
.section h1,
.calc-section h1,
.meet-copy h1,
.founding-strip h1 {
  font-weight: 600;
  letter-spacing: -0.02em;
}
/* .calc-section and .founding-strip never set a font-size on that heading, so it
   came straight from the UA stylesheet, where h1 is 2em and h2 is 1.5em. Pin it
   so the promoted heading keeps exactly the size it had, in every browser. */
.calc-section h1,
.founding-strip h1 { font-size: 1.5em; }

.label {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-on-accent);
  background: var(--accent-muted);
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 16px;
}

/* ── BUTTONS ── */
.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: var(--heading);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: filter 0.2s, transform 0.15s;
}
.btn-primary:hover { filter: brightness(0.95); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--heading);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 6px;
  border: 1.5px solid var(--border-strong);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}
.btn-secondary:hover { border-color: var(--heading); transform: translateY(-1px); }

.btn-dark {
  display: inline-block;
  background: var(--dark-bg);
  color: var(--card-bg);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: filter 0.2s, transform 0.15s;
}
.btn-dark:hover { filter: brightness(1.3); transform: translateY(-1px); }

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1rem var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(242, 237, 228, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
nav.scrolled {
  border-bottom-color: var(--border);
  background: rgba(242, 237, 228, 0.95);
}

.nav-left {
  display: flex;
  align-items: center;
}
.nav-logo-img { height: 24px; width: auto; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.98rem;
  color: var(--body);
  transition: color 0.2s;
}
.nav-link:hover { color: var(--heading); }

.nav-cta {
  background: var(--accent);
  color: var(--heading);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.92rem;
  padding: 10px 20px;
  border-radius: 6px;
  transition: filter 0.2s;
}
.nav-cta:hover { filter: brightness(0.95); }

/* The nav is fixed and ~68px tall. The hero carries its own top space, but on the
   sub-pages the first section would slide under the nav, so give it clearance.
   Only the first section, and never the hero. */
nav + section:not(.hero) { padding-top: 120px; }

/* ── SECTIONS ── */
.section {
  padding: 96px 0;
}
.section h2, .section h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.2;
  max-width: 720px;
  margin-bottom: 24px;
}
.section-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 620px;
  margin-bottom: 16px;
  color: var(--body);
}

/* ── HERO ── */
.hero {
  position: relative;
  isolation: isolate;
  padding: 190px 0 120px;
  text-align: center;
  background: #101010;
  overflow: hidden;
}
/* Motion layer. Shows the video when public/media/hero.mp4 exists,
   and a slow living gradient when it does not. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 55% at 18% 22%, rgba(200,255,0,0.18), transparent 62%),
    radial-gradient(55% 50% at 82% 72%, rgba(120,190,255,0.14), transparent 60%),
    linear-gradient(140deg, #141414 0%, #1c1c1a 45%, #101010 100%);
  background-size: 160% 160%, 160% 160%, 100% 100%;
  animation: heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  0%   { background-position: 0% 0%,   100% 100%, 0 0; }
  100% { background-position: 40% 30%, 60% 60%,   0 0; }
}
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-media video.is-ready { opacity: 1; }
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,10,0.62) 0%, rgba(10,10,10,0.42) 45%, rgba(10,10,10,0.80) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-media { animation: none; }
  .hero-media video { display: none; }
}
.hero .label { margin-bottom: 24px; background: rgba(200,255,0,0.16); color: var(--accent); }
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.06;
  max-width: 900px;
  margin: 0 auto 24px;
  color: #ffffff;
  text-wrap: balance;
}
.hero p {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  max-width: 640px;
  margin: 0 auto 40px;
  color: #e8e5dc;
  line-height: 1.7;
}
.hero p strong { color: #ffffff; }
.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-proof {
  margin-top: 32px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #bdb9ae;
}

/* ── PROOF BAR ── */
.proof-bar {
  background: var(--dark-bg);
  padding: 40px 0;
}
.proof-bar-inner {
  display: flex;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
  text-align: center;
}
.proof-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.proof-stat-num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 1;
}
.proof-stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dark-muted);
}

/* ── DARK SECTION (pain) ── */
.dark-section {
  background: var(--dark-bg);
  padding: 96px 0;
}
.dark-section .label {
  background: var(--dark-card);
  color: var(--dark-muted);
}
.dark-section h2 {
  color: var(--card-bg);
}
.dark-section p {
  color: var(--dark-muted);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 680px;
  margin-bottom: 20px;
}
.dark-section p:last-child { margin-bottom: 0; }
.dark-section strong {
  color: var(--card-bg);
  font-weight: 500;
}

/* ── FEATURE CARDS ── */
.feature-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: left;
  margin-top: 40px;
}

/* ── VALUE COMPARISON ── */
.value-compare {
  margin-top: 56px;
}
.value-item.total {
  border-bottom: 2px solid var(--border-strong);
}
.value-item.total .value-label { color: var(--muted); }
.value-item.total .value-cost { color: var(--heading); font-weight: 600; }
.value-item.klar {
  border-bottom: 2px solid var(--heading);
}
.value-item.klar .value-label { color: var(--heading); font-weight: 600; }
.value-item.klar .value-cost { color: var(--heading); font-weight: 700; }

/* ── TESTIMONIAL (inline) ── */
.testimonial {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 36px;
  margin-top: 48px;
}

/* ── BOOKINGS HIGHLIGHT ── */
.bookings-highlight {
  background: var(--card-bg);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 32px;
  margin-top: 40px;
}

/* ── COMPARISON TABLE ── */
.comparison-wrap {
  margin-top: 56px;
}

/* ── URGENCY BANNER ── */
.urgency-banner {
  background: var(--accent-muted);
  border: 1px solid var(--accent-soft);
  border-radius: 8px;
  padding: 18px 24px;
  margin-top: 32px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-on-accent);
}
.urgency-banner strong { color: var(--text-on-accent); font-weight: 600; }

/* ── STEPS ── */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.step {
  text-align: center;
  padding: 24px 12px;
}
.step-num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 14px;
  letter-spacing: -0.03em;
}
.step h4 {
  font-size: 1rem;
  margin-bottom: 8px;
}
.step p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ── GUARANTEE (dark, stacked cards) ── */
.guarantee {
  background: var(--dark-bg);
  padding: 96px 0;
  text-align: center;
}
.guarantee .label {
  background: var(--dark-card);
  color: var(--dark-muted);
}
.guarantee h2 {
  color: var(--card-bg);
  margin: 0 auto 40px;
}
.guarantee-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 780px;
  margin: 0 auto;
  text-align: left;
}
.guarantee-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  border-radius: 10px;
  padding: 32px;
}
.guarantee-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--card-bg);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.guarantee-card p {
  font-size: 1.05rem;
  color: var(--dark-muted);
  line-height: 1.7;
}

/* ── EMAIL CAPTURE ── */
.capture-section {
  padding: 96px 0;
}
.capture-card {
  background: var(--card-bg);
  border: 2px solid var(--border-strong);
  border-radius: 12px;
  padding: 48px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.capture-card h2 {
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  margin: 0 auto 12px;
  max-width: none;
}
.capture-card > p {
  color: var(--body);
  font-size: 1rem;
  max-width: 520px;
  margin: 0 auto 28px;
  line-height: 1.7;
}
.capture-form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 480px;
  margin: 0 auto;
}
.capture-form input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 14px 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  background: var(--bg);
  color: var(--heading);
  outline: none;
  transition: border-color 0.2s;
}
.capture-form input:focus { border-color: var(--heading); }
.capture-form input::placeholder { color: var(--subtle); }
.capture-form button {
  flex: 0 0 auto;
  padding: 14px 24px;
  font-size: 1rem;
}
.capture-note {
  font-size: 0.95rem;
  color: var(--muted);
  margin-top: 16px;
}
.capture-message {
  margin-top: 16px;
  font-size: 1rem;
  min-height: 1.2em;
}
.capture-message.success { color: var(--text-on-accent); font-weight: 500; }
.capture-message.error { color: #b04040; font-weight: 500; }

/* ── FOUNDING (dark, rounded strip) ── */
.founding {
  padding: 0 0 96px;
}
.founding-strip {
  background: var(--dark-bg);
  border-radius: 14px;
  padding: 56px 48px;
  text-align: center;
  max-width: var(--max-w);
  margin: 0 auto;
}
.founding-strip .label {
  background: var(--dark-card);
  color: var(--dark-muted);
}
.founding-strip h2, .founding-strip h1 {
  color: var(--card-bg);
  margin: 0 auto 20px;
  max-width: 620px;
}
.founding-strip p {
  color: var(--dark-muted);
  font-size: 1rem;
  max-width: 560px;
  margin: 0 auto 28px;
  line-height: 1.7;
}
.founding-badge {
  display: block;
  margin-top: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── DIVIDER ── */
.divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--border);
  padding: 48px 0;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.footer-left {
  font-size: 0.98rem;
  color: var(--muted);
}
.footer-left a { color: var(--body); transition: color 0.2s; }
.footer-left a:hover { color: var(--heading); }
.footer-right {
  display: flex;
  gap: 24px;
  font-size: 0.98rem;
}
.footer-right a {
  color: var(--muted);
  transition: color 0.2s;
}
.footer-right a:hover { color: var(--heading); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .hero { padding: 130px 0 64px; }
  .section, .dark-section, .guarantee, .capture-section { padding: 64px 0; }
  .founding { padding: 0 0 64px; }
  .founding-strip { padding: 40px 24px; border-radius: 12px; }
  nav + section:not(.hero) { padding-top: 96px; }

  .proof-bar-inner { gap: 32px; }

  .nav-right { gap: 16px; }
  .nav-right .nav-link { display: none; }
  .nav-cta { font-size: 0.92rem; padding: 8px 16px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .guarantee-stack { grid-template-columns: 1fr; }

  .capture-card { padding: 32px 24px; }
  .capture-form button { width: 100%; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ── CALCULATOR ── */
.calc-section { background: var(--dark-bg); color: #d8d5cc; padding: clamp(3.5rem, 8vw, 6rem) 0; }
.calc-section h2, .calc-section h1 { color: #faf8f4; }
.calc-section .label { background: rgba(200,255,0,0.14); color: var(--accent); }
.calc-lead { color: #b8b4aa; max-width: 62ch; margin-bottom: 2.5rem; }

.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 860px) { .calc-grid { grid-template-columns: 1fr; } }

.calc-panel {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  border-radius: 12px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.calc-panel h3 { color: #faf8f4; font-size: 1.05rem; margin-bottom: 0.35rem; }
.calc-panel-sub { font-size: 0.98rem; color: var(--dark-muted); margin-bottom: 1.5rem; }

.calc-field label { font-size: 1rem; color: #d2cec4; }
.calc-panel input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 2px;
  background: var(--dark-border); outline: none; cursor: pointer;
}
.calc-panel input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: none;
}
.calc-panel input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: none;
}
.calc-field-note { font-size: 0.95rem; color: var(--dark-muted); margin-top: 0.5rem; line-height: 1.55; }

.calc-q { margin-bottom: 2.25rem; }
.calc-q > label {
  display: block;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #e4e1d8;
  margin-bottom: 0.5rem;
}
.calc-q-val {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.calc-detail {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--dark-border);
}
.calc-detail-title { font-size: 1rem; color: var(--dark-muted); margin-bottom: 0.9rem; line-height: 1.55; }
.calc-detail-title strong { color: #d2cec4; font-weight: 500; }
.calc-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 0.7rem; }
.calc-detail-item {
  background: var(--dark-bg);
  border: 1px solid var(--dark-border);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  transition: border-color 0.15s;
}
.calc-detail-item:focus-within { border-color: var(--accent); }
.calc-detail-label {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dark-muted);
  margin-bottom: 0.3rem;
  line-height: 1.35;
}
.calc-detail-input { display: flex; align-items: baseline; gap: 0.15rem; }
.calc-detail-input .sym {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--accent);
  opacity: 0.75;
}
.calc-detail-input input {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--accent);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.calc-detail-input input:focus { outline: none; }
/* Kill the spinner arrows, they look like a form, not a price */
.calc-detail-input input::-webkit-outer-spin-button,
.calc-detail-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-detail-input input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.calc-line-val.is-plus { color: var(--accent); }
.calc-line-val.is-minus { color: #b8b4aa; }
.calc-line-label em { font-style: normal; text-decoration: underline; text-underline-offset: 3px; }

.calc-line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--dark-border); font-size: 1.02rem; }
.calc-line:last-of-type { border-bottom: none; }
.calc-line-label { color: #b8b4aa; }
.calc-line-val { font-family: 'JetBrains Mono', monospace; color: #e4e1d8; white-space: nowrap; }
.calc-line.is-total { border-top: 1px solid var(--dark-border); border-bottom: none; margin-top: 0.4rem; padding-top: 1rem; }
.calc-line.is-total .calc-line-label { color: #faf8f4; font-weight: 500; }
.calc-line.is-total .calc-line-val { color: #ff8a7a; font-size: 1.5rem; font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
.calc-line.is-total.is-good .calc-line-val { color: var(--accent); }
.calc-sub-year { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 1rem; color: var(--dark-muted); margin-top: 0.3rem; }

.calc-verdict {
  margin-top: 1.5rem;
  background: var(--accent);
  color: var(--heading);
  border-radius: 12px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.calc-verdict-big {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--heading);
}
.calc-verdict-sub { margin-top: 0.6rem; font-size: 1rem; color: #2e4a00; max-width: 60ch; }
.calc-verdict-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.75rem; }
@media (max-width: 700px) { .calc-verdict-row { grid-template-columns: 1fr; gap: 0.85rem; } }
.calc-vstat { border-top: 2px solid rgba(0,0,0,0.18); padding-top: 0.75rem; }
.calc-vstat-num { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--heading); }
.calc-vstat-label { display: block; font-size: 0.95rem; color: #2e4a00; margin-top: 0.15rem; line-height: 1.45; }
.calc-founding { margin-top: 1.5rem; border-top: 2px solid rgba(0,0,0,0.18); padding-top: 0.9rem; font-size: 1rem; color: #2e4a00; line-height: 1.6; max-width: 60ch; }
.calc-founding strong { color: var(--heading); }
.calc-cta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.calc-disclaimer { margin-top: 1.5rem; font-size: 0.92rem; color: var(--dark-muted); line-height: 1.6; max-width: 70ch; }
.calc-disclaimer a { color: #b8b4aa; text-decoration: underline; }

/* ── PRICING ── */
.pricing-card {
  background: var(--card-bg);
  border: 1.5px solid var(--border-strong);
  border-radius: 12px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: 2.5rem;
}
.pricing-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.pricing-price { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1.75rem, 5vw, 2.5rem); letter-spacing: -0.03em; color: var(--heading); }
.pricing-price span { font-size: 1rem; font-weight: 400; color: var(--muted); font-family: 'DM Sans', sans-serif; letter-spacing: 0; }
.pricing-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); font-size: 1.05rem; }
.pricing-row:last-child { border-bottom: none; }
.pricing-row-label { color: var(--body); }
.pricing-row-val { font-family: 'JetBrains Mono', monospace; font-size: 1rem; color: var(--heading); text-align: right; white-space: nowrap; }
.pricing-row-setup { display: inline-block; margin-top: 0.15rem; font-size: 0.85rem; color: var(--muted); white-space: normal; }
.pricing-row-val a { color: var(--heading); text-decoration: underline; text-underline-offset: 3px; }
.pricing-row-val a:hover { color: var(--text-on-accent); }

/* ── FOUNDING POPUP ── */
.fpop-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,10,10,0.62);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.fpop-backdrop[hidden] { display: none; }
.fpop-backdrop.is-open { opacity: 1; pointer-events: auto; }
.fpop {
  position: relative;
  background: var(--dark-bg);
  border: 1px solid var(--dark-border);
  border-radius: 14px;
  padding: 40px 36px 34px;
  max-width: 480px; width: 100%;
  max-height: calc(100vh - 2.5rem); overflow-y: auto;
  text-align: center;
  transform: translateY(12px) scale(0.98); transition: transform 0.25s ease;
}
.fpop-backdrop.is-open .fpop { transform: none; }
.fpop .label { background: var(--dark-card); color: var(--dark-muted); }
.fpop h2 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(1.5rem, 4.5vw, 1.9rem); letter-spacing: -0.02em;
  color: #faf8f4; margin: 0.5rem 0 0.6rem;
}
.fpop-lead { color: var(--dark-muted); font-size: 1rem; line-height: 1.6; margin-bottom: 1.25rem; }
.fpop-deal { list-style: none; display: grid; gap: 0.55rem; text-align: left; margin: 0 0 1.5rem; }
.fpop-deal li {
  position: relative; padding-left: 1.6rem;
  color: #d2cec4; font-size: 1rem; line-height: 1.5;
}
.fpop-deal li::before {
  content: ''; position: absolute; left: 0; top: 0.5rem;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}
.fpop-deal strong { color: #faf8f4; }
.fpop-actions { display: grid; gap: 0.6rem; }
.fpop-secondary { color: var(--dark-muted); font-size: 0.95rem; text-decoration: underline; text-underline-offset: 3px; }
.fpop-secondary:hover { color: #faf8f4; }
.fpop-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: 0; cursor: pointer;
  color: var(--dark-muted); font-size: 1.6rem; line-height: 1;
  width: 36px; height: 36px; border-radius: 8px;
}
.fpop-close:hover { color: #faf8f4; background: var(--dark-card); }
@media (max-width: 520px) { .fpop { padding: 34px 22px 28px; } }

/* Closed, it shrinks into the corner rather than disappearing */
.fpop-tab {
  position: fixed; z-index: 190;
  right: 18px; bottom: 18px;
  display: flex; align-items: center; gap: 10px;
  background: var(--dark-bg);
  border: 1px solid var(--dark-border);
  border-radius: 999px;
  padding: 11px 18px;
  color: #faf8f4;
  font-family: 'DM Sans', sans-serif; font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(10,10,10,0.28);
}
.fpop-tab[hidden] { display: none; }
.fpop-tab:hover { border-color: var(--accent); }
.fpop-tab strong { color: var(--accent); font-weight: 600; }
.fpop-tab-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); flex: none;
}
@media (max-width: 520px) {
  .fpop-tab { right: 12px; bottom: 12px; padding: 10px 15px; font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fpop-backdrop, .fpop { transition: none; }
  .fpop { transform: none; }
}
.pricing-note { margin-top: 1.25rem; font-size: 0.98rem; color: var(--muted); line-height: 1.6; }

/* ── FAQ / HONESTY ── */
.faq-item { border-top: 1px solid var(--border); padding: 1.25rem 0; }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-q { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: var(--heading); margin-bottom: 0.4rem; }
.faq-a { font-size: 1.05rem; color: var(--body); }

.calc-tier-note {
  font-size: 0.92rem;
  color: var(--dark-muted);
  line-height: 1.55;
  padding: 0.15rem 0 0.5rem;
}

/* ── PROBLEM KICKER ── */
.problem-kicker {
  margin-top: 2rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--accent);
  max-width: 20ch;
}

/* ── INCLUDED STRIP ── */
.included-strip {
  margin-top: 2.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.included-head {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--heading);
  margin-bottom: 1.15rem;
}
.included-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 2rem; }
@media (max-width: 720px) { .included-list { grid-template-columns: 1fr; } }
.included-list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--body);
}
.included-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── NAV, company level ── */
.nav-left { gap: 10px; }
.nav-wordmark {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--heading);
  padding-left: 10px;
  border-left: 1px solid var(--border-strong);
  line-height: 1;
}
nav { padding: 0.85rem var(--gutter); }
.nav-right { gap: 28px; }
.nav-link { position: relative; padding: 4px 0; font-weight: 500; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1.5px;
  background: var(--heading);
  transition: right 0.22s ease;
}
.nav-link:hover::after { right: 0; }
.nav-cta { font-weight: 500; padding: 11px 22px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  padding: 0 11px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--heading);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-right {
    position: fixed;
    top: 68px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: rgba(242, 237, 228, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .nav-right.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav-right .nav-link {
    display: block;
    padding: 15px 0;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--border);
  }
  .nav-right .nav-link::after { display: none; }
  .nav-cta { margin-top: 16px; text-align: center; }
}

/* Current page. Same colour as the hover state and the same underline, just
   parked open — no new colour, no new shape. Placed after the mobile block so
   the underline stays hidden there, where it is display:none. */
.nav-link.active { color: var(--heading); font-weight: 600; }
.nav-link.active::after { right: 0; }

/* ── FOOTER ── */
.footer-left { display: flex; align-items: flex-start; gap: 14px; }
.footer-logo { height: 22px; width: auto; margin-top: 2px; }
.footer-company { line-height: 1.6; }
.footer-right { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.footer-right a { transition: color 0.2s; }
.footer-right a:hover { color: var(--heading); text-decoration: underline; }
.footer-copy { color: var(--subtle); }

/* ── DARK-HERO BUTTON FIX ── */
.hero .btn-secondary { color: #ffffff; border-color: rgba(255,255,255,0.45); }
.hero .btn-secondary:hover { border-color: #ffffff; background: rgba(255,255,255,0.07); }

/* ── PROBLEM, as figures not paragraphs ── */
.problem-section { padding: 104px 0; }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin: 3rem 0 0; }
@media (max-width: 820px) { .problem-grid { grid-template-columns: 1fr; gap: 2rem; } }
.problem-item { border-top: 2px solid var(--accent); padding-top: 1.25rem; }
.problem-num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 7vw, 4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.problem-what { margin-top: 0.6rem; font-size: 1.15rem; color: #faf8f4; font-weight: 500; }
.problem-who { margin-top: 0.5rem; font-size: 1rem; line-height: 1.6; color: #b8b4aa; }
.problem-who strong { color: #faf8f4; }
.problem-kicker {
  margin-top: 3.5rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 4.5vw, 2.8rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #ffffff;
  max-width: none;
}
.problem-cta { margin-top: 2rem; }

/* ── WHAT WE PROVIDE, lines not squares ── */
.provide-list { list-style: none; margin: 2.5rem 0 0; border-top: 1px solid var(--border); }
.provide-list li {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
@media (max-width: 760px) {
  .provide-list li { grid-template-columns: 1fr; gap: 0.4rem; }
}
.provide-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--heading);
  position: relative;
  padding-left: 1.5rem;
}
.provide-title::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.provide-desc { font-size: 1.08rem; line-height: 1.65; color: var(--body); }

/* ── PLAN VERDICT ── */
.plan-verdict {
  margin-top: 1.75rem;
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: clamp(1.4rem, 3.5vw, 1.9rem);
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 0.6rem 1.5rem;
}
@media (max-width: 720px) { .plan-verdict { grid-template-columns: 1fr; gap: 0.3rem; } }
.plan-verdict-label { grid-column: 1 / -1; font-size: 1rem; color: var(--dark-muted); }
.plan-verdict-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4.5vw, 2.4rem);
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 1.1;
}
.plan-verdict-price { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.4rem; color: #faf8f4; }
.plan-verdict-why { font-size: 1rem; color: var(--dark-muted); }

/* ── STEPS, alive ── */
.step { position: relative; }
.step-icon { font-size: 2.2rem; line-height: 1; margin-bottom: 0.75rem; }
.step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-accent);
  background: var(--accent-muted);
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 0.6rem;
  width: auto;
  height: auto;
}
.step h4 { font-size: 1.2rem; margin-bottom: 0.35rem; }
.step p { font-size: 1.02rem; line-height: 1.6; color: var(--body); }

/* ── COME AND MEET ── */
.meet-section { background: var(--card-bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 88px 0; }
.meet-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .meet-inner { grid-template-columns: 1fr; } }
.meet-copy h2, .meet-copy h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.15; margin-bottom: 16px; }
.meet-copy p { font-size: 1.1rem; line-height: 1.7; margin-bottom: 28px; }
.meet-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.meet-facts { display: grid; gap: 1.1rem; }
.meet-fact { display: grid; gap: 2px; border-left: 3px solid var(--accent); padding-left: 1rem; }
.meet-fact-k { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.meet-fact-v { font-size: 1.05rem; line-height: 1.55; color: var(--heading); }

/* ── HERO FOOD MOTES ── */
.hero-mote {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  filter: saturate(0.85);
}

.faq-block { margin-top: 2.5rem; }

.founding-list { list-style: none; margin: 1.25rem 0; display: grid; gap: 0.6rem; text-align: left; max-width: 560px; }
.founding-list li { position: relative; padding-left: 1.7rem; font-size: 1.05rem; line-height: 1.6; }
.founding-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.6em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}
.founding-after { margin-bottom: 1.5rem; }

/* ── FINAL LAYOUT POLISH ── */
.founding-list { margin-inline: auto; }
.founding-strip h2, .founding-strip h1 { max-width: 100%; }
.founding-strip .founding-list li { color: #d2cec4; }

/* steps: the icon and label want breathing room, and 4-up is too tight on a tablet */
@media (max-width: 980px) and (min-width: 601px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
.step { padding-top: 4px; }

/* keep long section headings from running the full width on big screens */
.dark-section h2, .section h2, .section h1 { max-width: 18ch; }
.problem-section h2 { max-width: 22ch; }
.meet-copy h2, .meet-copy h1 { max-width: 16ch; }

/* the included list reads better as a single column when it gets narrow */
@media (max-width: 640px) { .included-list { gap: 0.85rem; } }

/* calculator panels equal height so the two columns line up */
@media (min-width: 861px) {
  .calc-grid { align-items: stretch; }
  .calc-panel { height: 100%; }
}