/* Design system carried over from the approved landing page. */
:root {
  color-scheme: light;
  --plum: #21144f;
  --plum-600: #33247a;
  --mint: #c8fbe2;
  --mint-600: #a9f0cf;
  --paper: #faf7f2;
  --surface: #ffffff;
  --ink: #1d1637;
  --ink-soft: #514a6b;
  --line: #e3ddec;
  --on-plum-soft: #dcd6f0;
  --error: #a3152a;
  --focus: var(--plum);
  --font-display: "Unna", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --step--1: 0.9375rem;
  --step-0: 1.125rem;
  --step-1: 1.3125rem;
  --step-2: clamp(1.625rem, 1.25rem + 1.6vw, 2.25rem);
  --step-3: clamp(2.125rem, 1.2rem + 3.6vw, 3.5rem);
  --gutter: clamp(1rem, 4vw, 2rem);
  --max: 72rem;
  --section: clamp(3.5rem, 8vw, 6.5rem);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2 { font-family: var(--font-display); font-weight: 400; color: var(--plum); text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: var(--step-3); line-height: 1.08; }
h2 { font-size: var(--step-2); line-height: 1.15; }
h3 { font-size: var(--step-1); line-height: 1.25; color: var(--plum); font-weight: 700; }
a { color: var(--plum); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
[id] { scroll-margin-top: 5.5rem; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.lede { color: var(--ink-soft); max-width: 36rem; }
.on-plum { --focus: var(--mint); background: var(--plum); color: var(--surface); }
.on-plum h2, .on-plum h3 { color: var(--surface); }
.on-plum a { color: var(--mint); }
.skip { position: absolute; left: 1rem; top: -5rem; z-index: 100; background: var(--plum); color: var(--surface); padding: 0.75rem 1rem; border-radius: 10px; --focus: var(--mint); }
.skip:focus { top: 1rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.75rem 1.5rem; border: 2px solid transparent; border-radius: 14px; font: inherit; font-size: 1.0625rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.btn-primary { background: var(--plum); color: var(--surface); }
.btn-primary:hover { background: var(--plum-600); }
.btn-outline { background: transparent; border-color: var(--plum); color: var(--plum); }
.btn-outline:hover { background: var(--plum); color: var(--surface); }
.btn-mint { background: var(--mint); color: var(--plum); }
.btn-mint:hover { background: var(--mint-600); }
.on-plum .btn-mint { color: var(--plum); }
.on-plum .btn-outline { border-color: var(--mint); color: var(--surface); }
.on-plum .btn-outline:hover { background: var(--mint); color: var(--plum); }
.btn-sm { min-height: 2.75rem; padding: 0.5rem 1.125rem; font-size: 1rem; border-radius: 12px; }
.btn-block { width: 100%; }
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); z-index: 20; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.75rem; }
.wordmark { display: inline-flex; align-items: center; min-height: 3.25rem; text-decoration: none; }
.brand-logo { width: 64px; height: auto; }
.header-actions { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; }
.header-phone { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; font-weight: 700; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.header-phone-label { font-weight: 500; color: var(--ink-soft); }
.header-cta { display: none; }
@media (min-width: 720px) { .site-header { position: sticky; top: env(safe-area-inset-top, 0px); } .header-cta { display: inline-flex; } }
.frame { position: relative; }
.frame::before { content: ""; position: absolute; background: var(--mint); border-radius: 14px; }
.frame img { position: relative; width: 100%; object-fit: cover; border-radius: 14px; background: var(--line); }
.frame--hero { padding: 0 12px 12px 0; }
.frame--hero::before { inset: 12px 0 0 12px; }
.frame--hero img { aspect-ratio: 4 / 3; }
.frame--founder { padding: 0 0 12px 12px; max-width: 26rem; }
.frame--founder::before { inset: 12px 12px 0 0; }
.frame--founder img { aspect-ratio: 4 / 5; }
.hero { padding-block: clamp(2rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem); }
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero-copy { display: grid; gap: 1.25rem; min-width: 0; }
.hero-copy .lede { font-size: var(--step-1); line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-top: 0.5rem; }
.hero-media { min-width: 0; }
@media (max-width: 479px) { .hero-actions .btn { width: 100%; } }
@media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.fit { background: var(--mint); padding-block: clamp(2rem, 5vw, 3rem); }
.fit-title { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; line-height: 1.15; color: var(--plum); margin-bottom: 1.5rem; }
.fit-list { display: grid; gap: 1.25rem 2rem; }
.fit-item { border-top: 2px solid var(--plum); padding-top: 0.75rem; min-width: 0; }
.fit-name { display: block; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; color: var(--plum); }
.fit-desc { display: block; margin-top: 0.25rem; font-size: var(--step--1); line-height: 1.45; color: var(--ink); }
@media (min-width: 520px) { .fit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .fit-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.request-panel { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; border-radius: 16px; padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem); }
.request-copy { display: grid; gap: 1rem; min-width: 0; }
.request-copy > p { color: var(--on-plum-soft); max-width: 30rem; }
.expect { display: grid; gap: 0.75rem; margin-top: 0.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.2); }
.expect-title { font-size: 1.05rem; font-weight: 700; color: var(--mint); }
.expect li { position: relative; padding-left: 1.5rem; color: var(--surface); max-width: 30rem; }
.expect li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 0.75rem; height: 2px; background: var(--mint); }
.request-call { color: var(--on-plum-soft); }
.request-call a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.form-card { --focus: var(--plum); background: var(--surface); color: var(--ink); border-radius: 20px; padding: clamp(1.25rem, 3.5vw, 2rem); min-width: 0; }
.form-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--plum); }
.form-intro { margin-top: 0.375rem; font-size: var(--step--1); color: var(--ink-soft); }
.care-form { display: grid; gap: 1rem; margin-top: 1.25rem; }
.field-row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 0.375rem; min-width: 0; }
.field label { font-size: var(--step--1); font-weight: 700; color: var(--plum); }
.field input { width: 100%; min-height: 3.25rem; padding: 0.625rem 0.875rem; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 1.0625rem; }
.field input:hover { border-color: var(--ink-soft); }
.field input:focus-visible { border-color: var(--plum); outline-offset: 1px; border-radius: 12px; }
.field input[aria-invalid="true"] { border-color: var(--error); }
.field-error { font-size: var(--step--1); font-weight: 600; color: var(--error); }
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; min-height: 2.75rem; }
.consent input { width: 1.5rem; height: 1.5rem; margin: 0.2rem 0 0; accent-color: var(--plum); cursor: pointer; }
.consent label { font-size: 0.875rem; line-height: 1.45; color: var(--ink-soft); cursor: pointer; }
.form-fine { font-size: 0.875rem; line-height: 1.45; color: var(--ink-soft); }
.mock-note { margin-top: 1rem; padding-top: 0.875rem; border-top: 1px dashed var(--line); font-size: 0.8125rem; line-height: 1.45; color: var(--ink-soft); }
.form-success { display: grid; gap: 0.875rem; margin-top: 0.25rem; }
.form-success:focus { outline: none; }
@media (min-width: 900px) { .request-panel { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.steps-head { display: grid; gap: 0.75rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.steps { display: grid; gap: 2rem; }
.step { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; row-gap: 0.375rem; }
.step-num { grid-row: 1 / span 2; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--mint); color: var(--plum); font-family: var(--font-display); font-size: 1.375rem; line-height: 1; }
.step h3 { align-self: center; grid-column: 2; }
.step p { grid-column: 2; color: var(--ink-soft); max-width: 34rem; }
.step:not(:last-child)::after { content: ""; position: absolute; left: calc(1.5rem - 1px); top: 3.75rem; bottom: -1.25rem; width: 2px; background: var(--line); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } .step { display: block; } .step-num { margin-bottom: 1.25rem; } .step h3 { margin-bottom: .5rem; } .step:not(:last-child)::after { left: 3.75rem; right: -1.75rem; top: calc(1.5rem - 1px); bottom: auto; width: auto; height: 2px; } }
.founder { background: var(--surface); border-block: 1px solid var(--line); overflow: clip; }
.founder-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.founder-copy { display: grid; gap: 1rem; min-width: 0; }
.founder-role { font-weight: 700; color: var(--plum); }
.founder-copy p:not(.founder-role):not(.owner-note) { color: var(--ink-soft); max-width: 36rem; }
.owner-note { color: var(--plum); font-weight: 700; }
.founder-link { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-top: .25rem; color: var(--plum); font-weight: 800; text-decoration: underline; text-decoration-color: var(--mint-600); text-decoration-thickness: 2px; text-underline-offset: .32em; }
.founder-link:hover { text-decoration-thickness: 3px; }
@media (min-width: 820px) { .founder-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.reviews-band { background: var(--surface); border-block: 1px solid var(--line); padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.reviews-head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.75rem; }
.reviews-head p { max-width: 34rem; color: var(--ink-soft); }
.review-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; padding: 0 0 1.25rem; scrollbar-color: var(--mint-600) transparent; scrollbar-width: thin; }
.review-track::-webkit-scrollbar { height: 8px; }
.review-track::-webkit-scrollbar-thumb { background: var(--mint-600); border-radius: 999px; }
.review { flex: 0 0 min(360px, 86vw); scroll-snap-align: start; display: grid; gap: 1rem; align-content: start; padding: 1.35rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.review-stars { display: flex; gap: 0.2rem; color: #e4a700; }
.review-stars svg { width: 18px; height: 18px; fill: currentColor; }
.review blockquote p { font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--ink); }
.review-text { min-height: 7.75em; }
.review figcaption { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.reviewer-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--line); }
.reviewer-meta { display: grid; gap: 0.05rem; }
.review-name { font-weight: 700; color: var(--ink); }
.review-source { font-size: 0.8125rem; color: var(--ink-soft); }
.reviews-foot { display: flex; justify-content: flex-end; margin-top: .5rem; }
.review-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--plum); font-weight: 800; text-decoration: underline; text-decoration-color: var(--mint-600); text-decoration-thickness: 2px; text-underline-offset: .32em; }
.review-link:hover { text-decoration-thickness: 3px; }
.request-service { color: var(--mint) !important; font-weight: 800; }
@media (max-width: 479px) { .reviews-foot { justify-content: flex-start; } }
.faq-section { padding-top: clamp(3.75rem, 8vw, 6rem); }
.faq-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.faq-item { display: grid; gap: .625rem; padding-block: 1.75rem; border-top: 1px solid var(--line); }
.faq-item:first-child { padding-top: 0; border-top: 0; }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item p { color: var(--ink-soft); max-width: 40rem; }
.faq-item p + p { margin-top: .75rem; }
.faq-answer { min-width: 0; }
@media (min-width: 820px) { .faq-item { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3rem; } }
.final-grid { display: grid; gap: 1.75rem; align-items: center; }
.final-copy { display: grid; gap: .75rem; min-width: 0; }
.final-copy p { color: var(--on-plum-soft); max-width: 34rem; }
.final-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 479px) { .final-actions .btn { width: 100%; } }
@media (min-width: 900px) { .final-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; } }
.site-footer { padding-block: 1.75rem; border-top: 1px solid rgba(255,255,255,.18); font-size: var(--step--1); }
.footer-row { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; align-items: center; color: var(--on-plum-soft); }
.footer-row strong { color: var(--surface); }
.footer-row a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mobile-bar { display: none; }
@media (max-width: 719px) { .mobile-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .625rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: .625rem var(--gutter) calc(.625rem + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(33,20,79,.08); } .mobile-bar .btn { min-height: 3rem; padding-inline: 1.125rem; font-size: 1rem; } .site-footer { padding-bottom: calc(1.75rem + 4.75rem + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
