/* milanhealth.ai layout. Colours and fonts come from theme.css (Milan-Health/Brand-Assets),
   copied in by build.sh.
   The look (2026-10-11): bright and calm. A warm light page with plenty of air, sections that
   alternate between the page colour and sand, rounded white cards, and restrained type. Navy is
   the ink, gold is the highlight, the TV is the one dark object.
   The page (2026-10-12): the hero, How it works, Questions, Join. Nothing else. */

:root {
  color-scheme: var(--milan-scheme, light);
  --measure: 34rem;
  --gutter: clamp(1.5rem, 5vw, 2.5rem);
  --page: 72rem;
  --radius-card: 20px;
  --shadow-card: 0 1px 2px rgba(19, 33, 63, 0.04), 0 14px 34px -16px rgba(19, 33, 63, 0.16);
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.1875rem;
  --step-2: 1.4rem;
  --step-3: clamp(2rem, 3.6vw, 2.75rem);
  --step-4: clamp(2.6rem, 4.6vw, 4.1rem);
}

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

/* The header stays on screen, so links to #how or #join stop below it. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }

body {
  margin: 0;
  background: var(--milan-page);
  color: var(--milan-ink);
  font-family: var(--milan-font-body);
  font-size: var(--step-0);
  line-height: 1.6;
}

img, video, svg { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--milan-font-display);
  font-weight: var(--milan-display-weight, 400);
  font-stretch: var(--milan-display-stretch, 100%);
  text-transform: var(--milan-display-case, none);
  line-height: 1.1;
  letter-spacing: var(--milan-display-tracking, -0.01em);
  text-wrap: balance;
  margin: 0;
}
h2 { font-size: calc(var(--step-3) * (0.5 + var(--milan-display-scale, 1) / 2)); }
h3 { font-size: calc(var(--step-2) * (0.5 + var(--milan-display-scale, 1) / 2)); line-height: 1.2; }
p { margin: 0; }

a { color: var(--milan-accent); text-underline-offset: 0.18em; text-decoration-color: var(--milan-mark); text-decoration-thickness: 2px; }
a:hover { text-decoration-color: var(--milan-accent); }

:focus-visible {
  outline: 3px solid var(--milan-mark);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Keeps short phrases like "1-on-1" on one line. */
.nowrap { white-space: nowrap; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Buttons: navy and solid for the main action, outlined for the second. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--milan-action);
  color: var(--milan-on-action);
  font-family: var(--milan-font-body);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1;
  padding: 1.05rem 1.7rem;
  border: 1px solid var(--milan-action);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.button:hover { color: var(--milan-on-action); transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(19, 33, 63, 0.55); }
.button--ghost { background: var(--milan-surface); color: var(--milan-ink); border-color: var(--milan-rule); }
.button--ghost:hover { color: var(--milan-ink); box-shadow: 0 10px 22px -14px rgba(19, 33, 63, 0.35); }
.button--small { padding: 0.75rem 1.2rem; font-size: var(--step--1); }

/* The badge above the headline. */
/* The badge text is 1.5x its first size (21px, Pranesh, 2026-10-12) on every screen; on phones narrower
   than about 400 it shrinks with the screen so it stays on one line. Padding and the dot are in em, so
   they grow with it. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.7em;
  border-radius: 999px;
  background: var(--milan-mark-soft);
  color: var(--milan-ink);
  font-size: clamp(1rem, 5.3vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.badge::before { content: ""; flex: none; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--milan-mark); }

/* Header */
/* The header stays on screen as he scrolls, so "Book a free assessment" is always one tap away. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--milan-page);
  background: color-mix(in srgb, var(--milan-page) 90%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--milan-rule);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}
.wordmark {
  font-family: var(--milan-font-display);
  font-weight: var(--milan-display-weight, 400);
  letter-spacing: var(--milan-display-tracking, -0.01em);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--milan-ink);
  text-decoration: none;
}
.wordmark:hover { color: var(--milan-ink); }
.site-nav { display: flex; align-items: center; gap: 1.75rem; }
.site-nav a:not(.button) { color: var(--milan-steel); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.site-nav a:not(.button):hover { color: var(--milan-ink); }
@media (max-width: 40rem) { .site-nav a:not(.button) { display: none; } }

/* Hero: the words left, the photo right. */
/* The photo gets the wider column: it shows how Milan works, so it should be big. */
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3.5rem, 6vw, 5rem);
}
@media (max-width: 52rem) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } }
/* The badge sits on its own line above the hero, centered on the page, on phones and laptops
   (Pranesh, 2026-10-12). The words and the photo below it stay as they are. */
.hero .wrap.hero-badge-row { display: flex; justify-content: center; padding-block: clamp(1.5rem, 3vw, 2.25rem) 0; }
.hero h1 {
  margin-top: 0;
  font-size: calc(var(--step-4) * var(--milan-display-scale, 1));
  line-height: var(--milan-display-leading, 1.06);
}
/* On phones the headline grows with the screen, so its longest line ("than you were") runs nearly to the
   right edge instead of stopping at the smallest size (Pranesh, 2026-10-12). */
@media (max-width: 52rem) {
  .hero h1 { font-size: calc(clamp(2.6rem, 15.6vw - 0.5rem, 4.1rem) * var(--milan-display-scale, 1)); }
}
/* Each line of the headline is set by hand and never breaks inside itself. */
.hero h1 span { display: block; white-space: nowrap; }
.hero-lede { margin-top: 1.5rem; font-size: var(--step-1); max-width: 30rem; color: var(--milan-steel); }
.hero-actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-note { margin-top: 1.25rem; color: var(--milan-steel); font-size: var(--step--1); }

/* The photo (later the demo video): a session at home, filmed from the couch. */
.hero-media { margin: 0; position: relative; }
/* 7:5, so the photo stands about as tall as the words beside it. The crop takes a strip off the left
   (window and sofa); the man and the whole TV stay in, with a little room on both sides. */
.hero-media img,
.hero-media video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 5;
  object-fit: cover;
  object-position: 86% 50%;
  border-radius: 18px;
  box-shadow: 0 40px 70px -40px rgba(19, 33, 63, 0.55);
}
/* The session card that sits on the corner of the photo: what a member sees on his phone. */
.session-card {
  position: absolute;
  left: -1.25rem;
  bottom: -1.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1.1rem 0.85rem 0.85rem;
  background: var(--milan-surface);
  border: 1px solid var(--milan-rule);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  color: var(--milan-ink);
}
.session-card small { display: block; font-size: 0.75rem; color: var(--milan-steel); line-height: 1.3; }
.session-card strong { display: block; font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
.session-icon {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--milan-mark-soft);
  display: grid;
  place-items: center;
}
.session-icon svg { width: 1.2rem; height: 1.2rem; }
@media (max-width: 52rem) { .session-card { left: 0.75rem; } }

/* Sections and their backgrounds. */
.section { padding-block: clamp(5rem, 9vw, 7rem); }
.section--band { background: var(--milan-band); }
.section-head { max-width: 40rem; }
/* How it works: 50% wider than the other section heads (Pranesh, 2026-10-12). */
.section-head--wide { max-width: 60rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 1rem; color: var(--milan-steel); font-size: var(--step-1); }

/* How it works: a real sequence, so it is numbered, in gold circles. */
.steps {
  list-style: none;
  margin: 3.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(1.5rem, 4vw, 3rem);
  counter-reset: step;
}
@media (max-width: 52rem) { .steps { grid-template-columns: minmax(0, 1fr); } }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--milan-mark);
  color: var(--milan-ink);
  font-family: var(--milan-font-display);
  font-size: 1.35rem;
  line-height: 1;
  margin-bottom: 1.25rem;
}
.steps p { margin-top: 0.5rem; color: var(--milan-steel); }

/* Questions: one white panel. */
.faq {
  margin: 2.5rem auto 0;
  max-width: 48rem;
  background: var(--milan-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 0.5rem clamp(1.25rem, 3vw, 2rem);
}
.faq details + details { border-top: 1px solid var(--milan-rule); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.2rem 2.25rem 1.2rem 0;
  font-weight: 600;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--milan-mark-soft);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: 1.3rem; max-width: var(--measure); color: var(--milan-steel); }

/* Join form: one centred white card, three fields stacked. */
.join-card {
  background: var(--milan-surface);
  border-radius: 28px;
  box-shadow: var(--shadow-card);
  padding: clamp(1.75rem, 5vw, 3.25rem);
  max-width: 34rem;
  margin-inline: auto;
}
.join-card > h2, .join-card > p { text-align: center; }
.join-card > p { margin: 1rem auto 0; color: var(--milan-steel); max-width: var(--measure); }
.form { margin-top: 2rem; display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.45rem; min-width: 0; }
.field label { font-weight: 600; font-size: var(--step--1); }
/* 17px text, so phones don't zoom in when a field is tapped. */
.field input {
  width: 100%;
  font: inherit;
  color: var(--milan-ink);
  background: var(--milan-page);
  /* The outline is how people see where to type: it needs 3:1 against the white card (WCAG 1.4.11).
     80% steel is 3.8:1 on the card and 3.5:1 on the field; browsers without color-mix() keep steel. */
  border: 1px solid var(--milan-steel);
  border-color: color-mix(in srgb, var(--milan-steel) 80%, var(--milan-surface));
  border-radius: 12px;
  padding: 0.85rem 1rem;
}
.field input:focus-visible { outline-offset: 1px; background: var(--milan-surface); }
.form-foot { display: grid; gap: 1rem; margin-top: 0.5rem; }
/* Full width already, so less side padding: "Book a free assessment" stays on one line on a 320px phone. */
.form-foot .button { width: 100%; padding-inline: 1rem; }
.form-foot p { color: var(--milan-steel); font-size: var(--step--1); text-align: center; }
.hidden-field { display: none; }

/* Footer */
.site-footer { border-top: 1px solid var(--milan-rule); padding-block: 2.5rem 3rem; color: var(--milan-steel); font-size: var(--step--1); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-footer a { color: var(--milan-ink); }

/* Plain pages: privacy, terms, thanks */
.doc { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 8vw, 6rem); }
.doc-body { max-width: 42rem; }
.doc h1 { font-size: var(--step-3); }
.doc h2 { font-size: var(--step-2); margin-top: 2.5rem; }
.doc p, .doc ul { margin-top: 1rem; color: var(--milan-steel); }
.doc strong { color: var(--milan-ink); }
.doc li + li { margin-top: 0.4rem; }
.doc .updated { margin-top: 0.75rem; font-size: var(--step--1); }
.draft-banner {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  background: #fff4d6;
  border: 1px solid #e8c766;
  color: #3d2e00;
  font-size: var(--step--1);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}