/* Limen design system. Every spacing, radius and type value comes from the tokens in :root.
   Spacing is a 4px scale; one-off values are a bug. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-700-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/figtree-latin.woff2') format('woff2');
}

:root {
  /* Color */
  --cream: #FAF6EE;
  --white: #FFFFFF;
  --ink: #211A15;
  --night: #1B1511;
  --green: #0F7A57;
  --green-dark: #0B6447;
  --mint: #3FC495;
  --muted: #6E6358;
  --muted-dark: #ABA092;
  --line: #E8E0D2;
  --line-input: #8C8172; /* 3.8:1 on white, meets the 3:1 rule for input borders */
  --line-dark: #4A3F36;
  --error: #B3261E;

  /* Spacing: 4px scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(64px, 9vw, 112px);

  /* Type: one display face, one body face, one ramp */
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Figtree', system-ui, sans-serif;
  --text-xs: 13px;  /* tags, captions */
  --text-sm: 15px;  /* labels, small buttons, fine print */
  --text-md: 17px;  /* body */
  --text-lg: 19px;  /* intros, FAQ questions */
  --text-xl: 26px;  /* h3, legal h2 */
  --text-2xl: 40px; /* confirmation titles, report total */
  --text-3xl: 56px; /* prices, step numbers */
  --lh-tight: 1.05;
  --lh-snug: 1.4;
  --lh-body: 1.6;

  /* Shape: three radii */
  --r-sm: 6px;   /* tags, checkboxes */
  --r-md: 12px;  /* buttons, inputs, choice rows */
  --r-lg: 24px;  /* cards */
  --border: 1.5px;

  --ease: cubic-bezier(.2, 0, 0, 1);
  --fast: .15s;
  --medium: .24s;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
img, svg { display: block; }
a { color: var(--green); }
a:hover { color: var(--ink); }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
section[id] { scroll-margin-top: 72px; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }

.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;
}
.skip {
  position: absolute; left: var(--s-3); top: -60px; z-index: 50;
  background: var(--ink); color: var(--cream); padding: 0 var(--s-4); border-radius: var(--r-md); min-height: 44px;
  display: inline-flex; align-items: center; font-weight: 600; text-decoration: none;
}
.skip:focus { top: var(--s-3); color: var(--cream); }

.wrap { max-width: 1180px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Type */
h1, h2, .step-title, .price, .report-big, .sent-title, .wordmark, .step-num {
  font-family: var(--display);
  font-weight: 700;
}
h1 {
  font-size: clamp(48px, 6.4vw, 84px);
  line-height: .98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(36px, 4.4vw, var(--text-3xl));
  line-height: var(--lh-tight);
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.lede, .lead { font-size: var(--text-lg); line-height: 1.55; text-wrap: pretty; }
.lede { max-width: 520px; }
.muted { color: var(--muted); }
.small { font-size: var(--text-xs); }
.fine { font-size: var(--text-sm); color: var(--muted); }
.center { text-align: center; }
.measure { max-width: 500px; }
.measure-sm { max-width: 460px; }
.measure-h { max-width: 680px; }

/* Buttons: one height per size, one radius */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px; padding: 0 var(--s-6); border-radius: var(--r-md);
  font: 600 var(--text-md)/1.2 var(--body); text-decoration: none; text-align: center;
  border: 0; cursor: pointer; transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn-sm { min-height: 44px; padding: 0 var(--s-5); font-size: var(--text-sm); }
.btn-lg { min-height: 56px; }
.btn-primary { background: var(--green); color: var(--white); }
.btn-primary:hover { background: var(--green-dark); color: var(--white); }
.btn-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 var(--border) var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--cream); }
.btn-mint { background: var(--mint); color: var(--night); }
.btn-mint:hover { background: var(--cream); color: var(--night); }
/* Loading: the label stays (so the width doesn't jump) and a spinner sits before it */
.btn[aria-busy=true] { cursor: progress; }
.btn[aria-busy=true]::before {
  content: ''; width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}
.btn[disabled]:not([aria-busy=true]) { opacity: .6; cursor: not-allowed; }
@keyframes spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy=true]::before { border-right-color: currentColor; opacity: .5; } }

/* Content that replaces other content fades in rather than appearing at once */
.appear { animation: appear var(--medium) var(--ease) both; }
@keyframes appear { from { opacity: 0; transform: translateY(var(--s-1)); } }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--night); color: var(--cream);
  border-bottom: 1px solid var(--line-dark);
}
.site-header :focus-visible { outline-color: var(--mint); }
.site-header .brand, .site-header .brand:hover { color: var(--cream); }
.site-header .brand { min-height: 44px; } /* tap target */
.header-row {
  padding-top: var(--s-3); padding-bottom: var(--s-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.wordmark { font-size: 28px; letter-spacing: -0.045em; line-height: 1; }
.wordmark-sm { font-size: 24px; }
.site-nav { display: flex; align-items: center; gap: var(--s-8); }
.site-nav a:not(.btn) { font-size: var(--text-sm); font-weight: 600; color: var(--cream); text-decoration: none; }
.site-nav a:not(.btn):hover { color: var(--mint); }
.menu-toggle {
  display: none; appearance: none; border: 1px solid var(--line-dark); background: transparent;
  border-radius: var(--r-md); height: 44px; padding: 0 var(--s-4); font: 600 var(--text-sm) var(--body); color: var(--cream); cursor: pointer;
}
@media (max-width: 759px) {
  .menu-toggle { display: inline-flex; align-items: center; }
  .site-nav {
    display: none; flex-basis: auto; width: calc(100% + 2 * var(--gutter)); flex-direction: column; align-items: stretch; gap: var(--s-1);
    border-top: 1px solid var(--line-dark); margin: 0 calc(-1 * var(--gutter)); padding: var(--s-3) var(--gutter) var(--s-2);
  }
  .site-nav.open { display: flex; }
  .site-nav a:not(.btn) { font-size: var(--text-lg); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-dark); }
  .site-nav .btn { margin-top: var(--s-3); }
}

/* Hero */
.hero {
  padding-top: clamp(48px, 8vw, 104px); padding-bottom: clamp(56px, 8vw, 112px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(40px, 6vw, 80px); align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: var(--s-6); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.hero-visual { display: flex; flex-direction: column; align-items: center; gap: var(--s-6); margin: 0; padding: var(--s-6) 0 0; }
.phone {
  display: block; width: min(100%, 320px); aspect-ratio: 390 / 802; border-radius: 36px; overflow: hidden;
  background: var(--white); box-shadow: 0 0 0 8px var(--ink); /* device frame, not a card */
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone:focus-visible { outline-offset: 16px; border-radius: 36px; }
.hero-visual figcaption { font-size: var(--text-sm); color: var(--muted); text-align: center; max-width: 340px; }

/* Bands */
.band { background: var(--cream); border-top: 1px solid var(--line); }
.band-white { background: var(--white); }
.band-rule { border-bottom: 1px solid var(--line); }
.band > .wrap, .band-rule > .wrap { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.stack-48 { display: flex; flex-direction: column; gap: var(--s-12); }
.stack-20 { display: flex; flex-direction: column; gap: var(--s-5); }
.section-head { display: flex; flex-direction: column; gap: var(--s-4); max-width: 720px; }
.split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 6vw, 80px); align-items: center;
}
.split-top { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); align-items: start; }

/* Dot lists */
.dots { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); line-height: 1.5; }
.dots li { position: relative; padding-left: var(--s-5); }
.dots li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
}
.dots-mint li::before { background: var(--mint); }
.dots .hl { font-weight: 600; color: var(--mint); }
.dots .off { color: var(--muted); }
.dots .off::before { background: transparent; border: var(--border) solid var(--muted); }

/* Cards: one radius, one border, no shadows */
.report, .plan, .form-card { border-radius: var(--r-lg); padding: clamp(24px, 4vw, 40px); }

/* Report card */
.report {
  background: var(--white); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--s-6);
}
.report-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.report-who { display: flex; align-items: center; gap: var(--s-3); }
.report-who div { display: flex; flex-direction: column; font-size: var(--text-sm); line-height: var(--lh-snug); }
.report-who strong { font-weight: 600; }
.tag {
  font-size: var(--text-xs); font-weight: 600; line-height: 1; color: var(--muted); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--cream);
}
.report-total { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--text-sm); }
.report-big { font-size: var(--text-2xl); letter-spacing: -0.04em; line-height: 1; }
.up { font-weight: 600; color: var(--green); }
.report-table { width: 100%; border-collapse: collapse; }
.report-table tr { border-top: 1px solid var(--line); }
.report-table tr:last-child { border-bottom: 1px solid var(--line); }
.report-table th, .report-table td { padding: var(--s-3) 0; text-align: left; font-weight: 400; }
.report-table td { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; padding-left: var(--s-3); }
.report-table td.up { font-size: var(--text-sm); width: 64px; }
.report figcaption { line-height: 1.55; }

/* Steps */
.steps {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(32px, 4vw, 48px);
}
.steps li { display: flex; flex-direction: column; gap: var(--s-3); border-top: 2px solid var(--ink); padding-top: var(--s-5); }
.step-num { font-size: var(--text-3xl); line-height: 1; letter-spacing: -0.04em; color: var(--green); }
.step-title { font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.03em; }
.steps p { color: var(--muted); text-wrap: pretty; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--s-5); align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: var(--s-6); }
.plan-dark { background: var(--night); color: var(--cream); }
.plan-light { background: var(--cream); border: 1px solid var(--line); }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 28px; }
.plan-name { font-size: var(--text-sm); font-weight: 600; font-family: var(--body); }
.plan-pick { font-size: var(--text-sm); font-weight: 600; color: var(--mint); }
.plan-price { display: flex; flex-direction: column; gap: var(--s-2); }
.plan-price p:first-child { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.price { font-size: var(--text-3xl); letter-spacing: -0.045em; line-height: 1; }
.price-note { color: var(--muted); }
.plan-dark .price-note { color: var(--muted-dark); }
.plan-list { border-top: 1px solid var(--line); padding-top: var(--s-6); }
.plan-dark .plan-list { border-top-color: var(--line-dark); }
.plan .btn { margin-top: auto; }
.note { font-size: var(--text-sm); line-height: 1.55; max-width: 640px; }

/* Form */
.form-card { background: var(--white); border: 1px solid var(--line); }
.form { display: flex; flex-direction: column; gap: var(--s-6); }
.field { display: flex; flex-direction: column; gap: var(--s-2); border: 0; padding: 0; margin: 0; min-width: 0; }
.field label:not(.check-row), .field legend { font-size: var(--text-sm); font-weight: 600; line-height: var(--lh-snug); padding: 0; }
.field legend { margin-bottom: var(--s-3); }
.field input[type=text], .field input[type=email], .field textarea {
  font: 400 var(--text-md)/1.5 var(--body); color: var(--ink); background: var(--white); width: 100%;
  border: var(--border) solid var(--line-input); border-radius: var(--r-md); outline: none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.field input[type=text], .field input[type=email] { padding: 0 var(--s-4); height: 52px; }
.field textarea { padding: var(--s-3) var(--s-4); min-height: 112px; resize: vertical; }
.field input::placeholder { color: var(--muted); }
/* Focus ring: the one place a soft shadow is used, as a halo on the active field */
.field input:focus, .field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(15, 122, 87, .15); }
.field input[aria-invalid=true] { border-color: var(--error); }
.err { font-size: var(--text-sm); color: var(--error); }
.err:empty { display: none; }
.hint { font-size: var(--text-sm); color: var(--muted); }
.goals { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.goal { position: relative; cursor: pointer; }
.goal input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.goal span {
  display: inline-flex; align-items: center; height: 44px; padding: 0 var(--s-4); border-radius: var(--r-md);
  font: 600 var(--text-sm) var(--body); background: var(--white); color: var(--ink);
  border: var(--border) solid var(--line-input);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.goal:hover span { border-color: var(--ink); }
.goal input:checked + span { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.goal input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sent { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); padding: var(--s-3) 0; outline: none; }
.sent[hidden], .form[hidden] { display: none; }
.sent-title { font-size: var(--text-2xl); line-height: var(--lh-tight); letter-spacing: -0.04em; }
.sent-body { line-height: 1.55; text-wrap: pretty; }

/* Footer */
.site-footer { background: var(--night); color: var(--cream); }
.footer-row { padding-top: var(--s-12); padding-bottom: var(--s-12); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6); }
.site-footer .brand { color: var(--cream); }
.footer-meta { display: flex; flex-wrap: wrap; gap: var(--s-6); font-size: var(--text-sm); color: var(--muted-dark); }
.footer-meta a { color: var(--mint); text-decoration: none; display: inline-block; padding: var(--s-3) 0; margin: calc(-1 * var(--s-3)) 0; } /* 44px tap target */
.footer-meta a:hover { color: var(--cream); }

/* Legal pages and 404 */
.page { padding-top: clamp(48px, 7vw, 88px); padding-bottom: var(--section-y); }
.prose { max-width: 720px; display: flex; flex-direction: column; gap: var(--s-4); line-height: 1.65; }
.prose h1 { font-size: clamp(40px, 5vw, 60px); margin-bottom: var(--s-1); }
.prose h2 { font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.03em; margin-top: var(--s-6); }
.prose ul { padding-left: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); }
.prose .updated { color: var(--muted); font-size: var(--text-sm); }
.lost { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-6); max-width: 620px; }

/* Header CTA: the nav button covers desktop; on phones the nav is collapsed, so show this one */
.header-cta { display: none; }
@media (max-width: 759px) {
  .header-row { gap: var(--s-2); }
  .brand { margin-right: auto; }
  .header-cta { display: inline-flex; padding: 0 var(--s-3); font-size: var(--text-sm); }
  .site-header .wordmark { font-size: 24px; }
  .menu-toggle { padding: 0 var(--s-3); }
  .site-nav .nav-cta { display: none; }
}
@media (max-width: 359px) {
  .site-header .wordmark { font-size: 22px; }
  .site-header .mark { width: 24px; height: 24px; }
  .header-cta { padding: 0 var(--s-2); font-size: var(--text-xs); }
  .menu-toggle { padding: 0 var(--s-2); font-size: var(--text-xs); }
}

@media (min-width: 900px) { #prototype .split-top > .stack-20 { position: sticky; top: 104px; } }

/* Site check (inside the prototype form) */
.check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.check-row {
  display: flex; align-items: center; gap: var(--s-3); cursor: pointer;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--white);
  border: var(--border) solid var(--line-input);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.check-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-box {
  flex: none; width: 24px; height: 24px; border-radius: var(--r-sm);
  border: var(--border) solid var(--line-input); background: var(--white); position: relative;
}
.check-text { display: flex; flex-direction: column; gap: var(--s-1); }
.check-text strong { font-size: var(--text-sm); font-weight: 600; line-height: var(--lh-snug); }
.check-row:hover { border-color: var(--ink); }
.check-row:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.check-row input:checked + .check-box { background: var(--mint); border-color: var(--mint); }
.check-row input:checked + .check-box::after {
  content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 12px;
  border: solid var(--night); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.check-row:has(input:focus-visible) { outline: 3px solid var(--green); outline-offset: 3px; }
/* Windows high-contrast (forced colors) mode drops background colors, which would hide which boxes are ticked:
   use the system's own colors so the box outline and the ticked state stay visible */
@media (forced-colors: active) {
  .check-box { border-color: CanvasText; background: Canvas; }
  .check-row input:checked + .check-box { background: Highlight; border-color: Highlight; }
  .check-row input:checked + .check-box::after { border-color: HighlightText; }
  .check-row:has(input:checked), .goal input:checked + span { border-color: Highlight; outline: 2px solid Highlight; }
  .check-row:has(input:focus-visible), .goal input:focus-visible + span { outline-color: Highlight; }
}
.consent .check-text { display: block; font-size: var(--text-sm); font-weight: 500; line-height: 1.45; }
.consent a { color: inherit; }

/* FAQ: opens with a short height transition where the browser supports it, instantly elsewhere */
.faq { border-bottom: 1px solid var(--line); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-6);
  padding: var(--s-6) 0; font-size: var(--text-lg); font-weight: 600; line-height: var(--lh-snug);
}
.faq-item summary::-webkit-details-marker { display: none; }
/* The empty alt text after "/" keeps screen readers from saying "plus" / "minus" after each question */
.faq-item summary::after { content: '+'; content: '+' / ''; font-family: var(--display); font-size: 28px; line-height: 1; color: var(--green); }
.faq-item summary:hover { color: var(--green); }
.faq-item[open] summary::after { content: '\2212'; content: '\2212' / ''; }
.faq-item::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size var(--medium) var(--ease), content-visibility var(--medium) allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }
.faq-item p { padding: 0 var(--s-10) var(--s-6) 0; max-width: 620px; text-wrap: pretty; }

.optional { font-weight: 400; color: var(--muted); }