/* pwa.andrespreschel.com — one stylesheet for index.html, booked.html and the pages checkout.php can show.
   Same palette as apply.andrespreschel.com: slate ground, KYP green to mint, cyan accents. */
/* Inter, self-hosted. It used to come from fonts.googleapis.com, which blocked the render for about 1.2 s on a
   phone (measured 9 Sep 2026) because a stylesheet on another origin sits on the critical path. This is the same
   file Google serves — one variable woff2, latin subset, covering every weight from 400 to 800 — fetched once and
   kept in fonts/. The unicode-range is Google's, so anything outside latin still falls through to system-ui exactly
   as it did before. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/inter-latin-var.woff2?v=3100e775e8") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-primary: #288d71; --color-secondary: #5bccac; --color-accent: #22d3ee; --color-highlight: #fbbf24;
  --color-bg: #0f172a; --color-bg-deep: #020617; --color-surface: rgba(15, 23, 42, 0.72); --color-surface-solid: #111a2e;
  --color-line: rgba(148, 163, 184, 0.18); --color-text: #e2e8f0; --color-text-muted: #94a3b8; --color-text-dim: #7c8ba1;/* 5.16:1 on #0f172a, 6.06:1 on black; #64748b was 3.75:1 and failed */
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --radius: 14px; --radius-pill: 999px;
  --duration-fast: 150ms; --duration-normal: 300ms; --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --measure: 62ch;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg-deep); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.15; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
.wrap { width: min(100% - 2 * var(--space-6), 1120px); margin-inline: auto; }
.eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-secondary); }
.muted { color: var(--color-text-muted); }
.measure { max-width: var(--measure); }
.link { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: #fff; }

/* Buttons: the apply page's green pill with the cyan-to-blue hover sweep */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 14px 28px; border-radius: var(--radius-pill); font-weight: 700; font-size: var(--text-base); font-family: inherit; letter-spacing: 0.01em; text-decoration: none; border: 0; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform var(--duration-fast) var(--easing-default), box-shadow var(--duration-normal) var(--easing-default); }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 0 18px rgba(40, 141, 113, 0.35); }
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #06b6d4, #2563eb); opacity: 0; transition: opacity var(--duration-normal) var(--easing-default); }
.btn-primary:hover::after, .btn-primary:focus-visible::after { opacity: 1; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 28px rgba(34, 211, 238, 0.35); }
.btn-ghost { background: transparent; color: var(--color-text); border: 1px solid var(--color-line); }
.btn-ghost:hover { border-color: var(--color-secondary); }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
/* While the server is opening the Stripe session. The button is disabled the instant the form is taken, so a second
   press cannot make a second Checkout Session; it says what is happening rather than just going dull. */
.btn[disabled] { opacity: 0.6; cursor: progress; transform: none; box-shadow: none; }
.btn[disabled]:hover { transform: none; }
.btn[disabled]:hover::after, .btn[disabled]::after { opacity: 0; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(2, 6, 23, 0.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); }
.nav img { height: 32px; width: auto; }
.nav .btn { padding: 10px 20px; font-size: var(--text-sm); white-space: nowrap; }
@media (max-width: 480px) { .nav .btn { padding: 9px 14px; font-size: var(--text-xs); } }
@media (min-width: 768px) { .nav img { height: 40px; } }

/* Hero */
.hero { position: relative; overflow: hidden; padding-block: var(--space-16) var(--space-20); background: var(--color-bg); }
.hero::before { content: ""; position: absolute; inset: 0; background: url("images/hero-bg.webp?v=e1c8666e86") center / cover no-repeat; opacity: 0.28; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 6, 23, 0.55) 0%, rgba(2, 6, 23, 0.85) 70%, var(--color-bg-deep) 100%); }
.hero .wrap { position: relative; z-index: 1; display: grid; gap: var(--space-8); align-items: end; }
.hero-copy { display: grid; gap: var(--space-6); max-width: 640px; }
/* The founder, large, on the right. A cut-out portrait over a soft KYP-green glow, its lower edge fading into the
   section so it reads as part of the page and not a sticker. Samar, 14 Sep 2026: "a premium coaching business";
   the 112px thumbnails read as a video game character. There is no photo of Andrés and Dr. Joel together on
   record (Drive, every repo, the site mirror, searched 14 Sep), so the hero is Andrés and Dr. Joel is large below. */
.hero-media { position: relative; margin: 0; justify-self: center; width: min(100%, 400px); }
.hero-media::before { content: ""; position: absolute; inset: 14% -12% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 141, 113, 0.55), rgba(40, 141, 113, 0)); filter: blur(18px); }
.hero-media img { position: relative; width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.hero-media figcaption { position: relative; margin-top: calc(-1 * var(--space-6)); font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; max-width: 34ch; margin-inline: auto; }
@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr); gap: var(--space-12); }
  .hero-media { width: 100%; max-width: 500px; justify-self: end; }
  .hero-media figcaption { text-align: left; margin-inline: 0; }
}
.hero h1 { font-size: clamp(2rem, 5.2vw, 3.5rem); font-weight: 800; color: #fff; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { font-size: var(--text-lg); color: var(--color-text-muted); max-width: var(--measure); }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.hero .fine { font-size: var(--text-sm); color: var(--color-text-dim); }
.hero.plain { padding-block: var(--space-20) var(--space-16); }

/* Sections */
section { padding-block: var(--space-16); }
.section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); max-width: 760px; }
.section-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; color: #fff; }
.section-head p { color: var(--color-text-muted); font-size: var(--text-lg); }

.cases { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .cases { grid-template-columns: 1fr 1fr; } }
.case { display: grid; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius); background: var(--color-surface); border: 1px solid var(--color-line); }
.case .tag { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.case h3 { font-size: var(--text-xl); color: #fff; }
.case p { color: var(--color-text-muted); }

.includes { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .includes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .includes { grid-template-columns: repeat(4, 1fr); } }
.item { display: grid; grid-template-rows: auto auto 1fr; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius); border: 1px solid var(--color-line); background: var(--color-surface-solid); }
.item .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(40, 141, 113, 0.25), rgba(91, 204, 172, 0.15)); color: var(--color-secondary); }
.item .ico svg { width: 22px; height: 22px; }
.item h3 { font-size: var(--text-lg); color: #fff; }
.item p { color: var(--color-text-muted); font-size: var(--text-sm); }
.more { margin-top: var(--space-4); padding: var(--space-6); border-radius: var(--radius); border: 1px dashed rgba(91, 204, 172, 0.45); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); color: var(--color-text-muted); }
.more strong { color: #fff; }

.people { display: grid; gap: var(--space-6); }
@media (min-width: 720px) { .people { grid-template-columns: 1fr 1fr; } }
.person { display: grid; grid-template-columns: minmax(200px, 44%) 1fr; gap: var(--space-6); align-items: center; padding: var(--space-6); border-radius: var(--radius); background: var(--color-surface); border: 1px solid var(--color-line); }
.person img { width: 100%; aspect-ratio: 6 / 7; object-fit: cover; border-radius: 12px; border: 1px solid var(--color-line); }
.person h3 { font-size: var(--text-lg); color: #fff; }
.person .role { font-size: var(--text-sm); color: var(--color-secondary); font-weight: 600; margin-bottom: var(--space-2); }
.person p { color: var(--color-text-muted); font-size: var(--text-sm); }
@media (max-width: 560px) { .person { grid-template-columns: 1fr; } .person img { width: 100%; max-width: 360px; } }

.steps { display: grid; gap: var(--space-4); counter-reset: step; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding: var(--space-6) var(--space-6) var(--space-6) 64px; border-radius: var(--radius); border: 1px solid var(--color-line); background: var(--color-surface-solid); }
.step::before { counter-increment: step; content: counter(step); position: absolute; left: 20px; top: 22px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: var(--text-sm); color: #041b16; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); }
.step h3 { font-size: var(--text-lg); color: #fff; margin-bottom: var(--space-2); }
.step p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Build your assessment: choices on the left, the running total on the right (stacked on phones) */
.build { background: var(--color-bg); border-block: 1px solid var(--color-line); }
.build-grid { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .build-grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); align-items: start; } }
.build fieldset { border: 0; padding: 0; margin: 0 0 var(--space-8); min-width: 0; display: grid; gap: var(--space-3); }
.build fieldset:last-of-type { margin-bottom: 0; }
/* What every option includes, and the expandable breakdown of the bloodwork panel: sits above Step 1 so the
   answer to "what does the price include" is read before the prices are. */
.build-includes { display: grid; gap: var(--space-3); padding: var(--space-4); margin-bottom: var(--space-6); border-radius: var(--radius); border: 1px solid var(--color-line); background: var(--color-surface-solid); }
.build-includes-label { margin: 0; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.02em; color: var(--color-secondary); }
.build-includes ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }
.build-includes li { color: var(--color-text-muted); font-size: var(--text-sm); }
.panel-detail { border-top: 1px solid var(--color-line); padding-top: var(--space-3); }
.panel-detail summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--color-secondary); list-style: none; }
.panel-detail summary::-webkit-details-marker { display: none; }
.panel-detail summary::before { content: "+ "; }
.panel-detail[open] summary::before { content: "\2013 "; }
.panel-detail summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.panel-detail-lede { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-text-dim); }
.panel-detail-grid { display: grid; gap: var(--space-4); margin-top: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.panel-detail-grid h4 { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text); margin: 0 0 4px; }
.panel-detail-grid p { font-size: var(--text-xs); color: var(--color-text-muted); }
.build legend { padding: 0; margin-bottom: var(--space-4); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-secondary); }
.build legend span { color: var(--color-text-dim); font-weight: 500; letter-spacing: 0; text-transform: none; }
.choice { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--space-3) var(--space-4); align-items: center; padding: var(--space-4) var(--space-4); border-radius: var(--radius); border: 1px solid var(--color-line); background: var(--color-surface-solid); cursor: pointer; transition: border-color var(--duration-fast) var(--easing-default), background var(--duration-fast) var(--easing-default); }
.choice:hover { border-color: rgba(91, 204, 172, 0.5); }
.choice.is-checked, .choice:has(input:checked) { border-color: var(--color-secondary); background: rgba(40, 141, 113, 0.14); }
.choice input { appearance: none; -webkit-appearance: none; margin: 0; width: 22px; height: 22px; border: 2px solid var(--color-text-dim); border-radius: 6px; background: transparent; display: grid; place-items: center; cursor: pointer; flex: none; }
.choice input[type="radio"] { border-radius: 50%; }
.choice input::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: #041b16; transform: scale(0); transition: transform var(--duration-fast) var(--easing-default); }
.choice input[type="radio"]::before { border-radius: 50%; }
.choice input:checked { border-color: var(--color-secondary); background: var(--color-secondary); }
.choice input:checked::before { transform: scale(1); }
.choice input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.choice .text { color: var(--color-text); font-weight: 500; line-height: 1.4; }
.choice .note { display: inline-block; margin-left: var(--space-2); padding: 1px 8px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-highlight); border: 1px solid rgba(251, 191, 36, 0.4); vertical-align: middle; }
.choice .price { font-weight: 700; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .choice { grid-template-columns: 24px minmax(0, 1fr); row-gap: var(--space-1); } .choice .price { grid-column: 2; } }

.summary { display: grid; gap: var(--space-3); padding: var(--space-6); border-radius: 20px; background: linear-gradient(135deg, rgba(40, 141, 113, 0.22), rgba(34, 211, 238, 0.08)); border: 1px solid rgba(91, 204, 172, 0.35); scroll-margin-top: 92px; }
@media (min-width: 900px) { .summary { position: sticky; top: 92px; } }
.summary .label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.summary .total { display: block; font-size: var(--text-5xl); font-weight: 800; line-height: 1; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.summary .micro { font-size: var(--text-sm); color: var(--color-text-muted); }
.summary .credit { font-size: var(--text-sm); color: var(--color-secondary); padding: var(--space-3) var(--space-4); border-radius: 10px; background: rgba(2, 6, 23, 0.5); border: 1px solid rgba(91, 204, 172, 0.25); }
.summary .btn { width: 100%; margin-top: var(--space-2); }
.summary .trust { font-size: var(--text-xs); color: var(--color-text-dim); text-align: center; }
/* Under the pay button: the quieter path for anyone who will not put $2,500 on a card before speaking to a person. */
.summary .talk { font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }
/* Shown only when Stripe sends someone back without paying, so the page can say so rather than leave them guessing. */
.summary .notice { font-size: var(--text-sm); color: var(--color-text); background: rgba(34, 211, 238, 0.12); border: 1px solid rgba(34, 211, 238, 0.4); border-radius: 10px; padding: var(--space-3) var(--space-4); }
.summary .notice[hidden] { display: none; }

/* The running total on a phone. Below 900px the summary is stacked after every option, about a screen below the fold
   while choosing (measured 10 Sep 2026), so a compact bar fixed to the bottom mirrors it. index.html shows it only while
   the builder is on screen and the real summary is not. Sits under the sticky nav (z 50), clears the iPhone home bar. */
.summary-bar { display: none; }
@media (max-width: 899px) {
  .summary-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: rgba(2, 6, 23, 0.94); backdrop-filter: blur(10px); border-top: 1px solid rgba(91, 204, 172, 0.35); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35); }
  .summary-bar[hidden] { display: none; }
  .summary-bar-text { display: grid; line-height: 1.15; min-width: 0; }
  .summary-bar-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
  .summary-bar-total { font-size: var(--text-2xl); font-weight: 800; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .summary-bar .btn { padding: 10px 18px; font-size: var(--text-sm); white-space: nowrap; flex: none; }
}

.options { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .options { grid-template-columns: repeat(3, 1fr); } }
.option { padding: var(--space-6); border-radius: var(--radius); border: 1px solid var(--color-line); background: var(--color-surface); }
.option h3 { font-size: var(--text-lg); color: #fff; margin-bottom: var(--space-2); }
.option p { color: var(--color-text-muted); font-size: var(--text-sm); }

.band { padding: var(--space-12) var(--space-6); border-radius: 20px; text-align: center; display: grid; gap: var(--space-4); justify-items: center; background: linear-gradient(135deg, rgba(40, 141, 113, 0.22), rgba(34, 211, 238, 0.08)); border: 1px solid rgba(91, 204, 172, 0.35); }
.band h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); color: #fff; font-weight: 800; }
.band p { color: var(--color-text-muted); max-width: 56ch; }
.band .fine { font-size: var(--text-sm); }

/* Plain pages: booked.html and the pages checkout.php can show */
.plain-page { min-height: 60vh; display: grid; align-content: start; gap: var(--space-6); padding-block: var(--space-20) var(--space-24); max-width: 720px; }
.plain-page h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; color: #fff; }
.plain-page p { color: var(--color-text-muted); font-size: var(--text-lg); }
.plain-page .actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.plain-page .reach { font-size: var(--text-base); color: var(--color-text-muted); }
.policy h2 { font-size: var(--text-xl); font-weight: 700; color: #fff; margin-top: var(--space-4); }
.policy .fine { font-size: var(--text-sm); color: var(--color-text-dim); }
/* What a person who has just paid is shown: the amount, what it bought, and the reference to quote. */
.receipt { display: grid; gap: var(--space-2) var(--space-8); margin: 0; padding: var(--space-4) var(--space-6); border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); }
.receipt dt { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-muted); }
.receipt dd { margin: 0; color: #fff; overflow-wrap: anywhere; }
@media (min-width: 640px) { .receipt { grid-template-columns: auto 1fr; align-items: baseline; } }

footer { background: #000; border-top: 1px solid #0f172a; padding-block: var(--space-12); }
footer .wrap { display: grid; justify-items: center; gap: var(--space-6); text-align: center; }
footer img { height: 48px; width: auto; opacity: 0.9; }
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-8); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); }
footer nav a { text-decoration: none; }
footer nav a:hover { color: #fff; }
footer .disclaimer { max-width: 760px; font-size: 10px; line-height: 1.6; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-dim); }
footer .copy { font-size: var(--text-xs); color: var(--color-text-dim); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .btn-primary::after, .choice, .choice input::before { transition: none; } }