/* Glow Skin Health — the app's own tokens, so the site and the product look like one thing.
   Values are lifted from src/theme/themes.ts (Petal) and src/theme/tokens.ts. Do not invent
   new colours here: a shade that exists only on the website is how a brand starts drifting.

   Type follows the reference template: Instrument Serif at regular weight for the one big
   statement, and Inter for everything else — including the section headings, which are large
   and LIGHT rather than bold. That lightness is most of why the reference reads as calm, so
   resist the urge to embolden a heading that looks too quiet.

   Both faces are self-hosted, latin subset, 63KB together. That is not a preference: the
   privacy page says this site loads nothing from any other domain, and a webfont link from
   someone else's CDN would quietly make it untrue. */

@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/InstrumentSerif.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter.woff2') format('woff2');
  /* Variable: one file covers the whole range we use. */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fff4f7;
  --bg-warm: #fbf9f6;
  --surface: #ffffff;
  --surface-muted: #f3f0ea;
  --border: #ece7df;
  --border-strong: #d9d3c8;

  --ink: #1d1a17;
  --ink-2: #6a645c;
  --ink-3: #726d66;

  /* accentStrong, not accent: this is the tone measured to carry text at 4.5:1. */
  --accent: #bf3868;
  --accent-deep: #9e2b53;
  --accent-soft: #fce6ee;
  --on-accent: #ffffff;
  --tint: #fff1f5;

  /* The showcase ground. The app's default theme is Petal and it is light — it stays the
     default, and people change it in the app if they want to — so the screens are light, and
     on this site's cream they measure 1.19:1 and dissolve into the page. On this they read
     at 9.32:1. It is the one value here not lifted from the app's theme, because nothing in
     the theme is dark enough: --accent-deep is the next darkest and is still a mid tone. */
  --rose-deep: #5c1f38;

  /* --shadow-md is two warm shadows at 5% and 9%, measured to sit under a card on cream. On
     a ground this dark they are invisible. Same warm plum, carried up to where it reads. */
  --shadow-phone: 0 4px 14px rgba(26, 6, 15, 0.28), 0 30px 64px rgba(26, 6, 15, 0.44);

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(29, 26, 23, 0.04), 0 4px 16px rgba(191, 56, 104, 0.05);
  --shadow-md: 0 2px 8px rgba(29, 26, 23, 0.05), 0 18px 48px rgba(191, 56, 104, 0.09);

  --maxw: 1140px;
  --gutter: 24px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg-warm);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.8rem, 7.4vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); }
h3 { font-size: 1.32rem; font-weight: 500; letter-spacing: -0.015em; }

/* The serif is a single gesture, not a system. It carries the hero and the price, nothing else. */
.display {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.04;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; display: block; }

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

/* ---------------------------------------------------------------- nav ---- */

.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: calc(100% - 32px);
  max-width: var(--maxw);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 18px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(236, 231, 223, 0.9);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  box-shadow: var(--shadow-sm);
}
/* The reference puts the mark in the middle with links either side. A 1fr / auto / 1fr grid
   keeps it optically centred whatever the two link groups weigh. */
.nav-left { justify-self: start; }
.nav-mark { justify-self: center; }
.nav-right { margin-right: 8px; }
/* The links and the call to action share that third cell. They have to be wrapped rather than
   both given `grid-column: 3`, because grid puts the second of two items claiming one cell on
   a new row — which is what made the pill twice as tall as the reference's. */
.nav-end { grid-column: 3; justify-self: end; display: flex; align-items: center; }
.nav-right + .nav-cta { margin-left: 4px; }

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 600; letter-spacing: -0.01em; }
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.brand span { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.28rem; letter-spacing: -0.005em; }

.nav-links { display: flex; gap: 2px; }
.nav-links a {
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  padding: 8px 12px;
  border-radius: var(--r-pill);
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-links a:hover { background: var(--tint); color: var(--ink); }

/* Under 800px the links fold into a panel and the two right-hand cells become CTA + button. */
.menu-btn {
  display: none;
  width: 40px; height: 40px;
  border: 0; border-radius: var(--r-pill);
  background: var(--tint);
  cursor: pointer;
  place-items: center;
  align-content: center;
  gap: 5px;
}
.menu-btn span { display: block; width: 16px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.nav-panel {
  position: fixed;
  top: 76px;
  left: 16px; right: 16px;
  z-index: 49;
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(236, 231, 223, 0.9);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  box-shadow: var(--shadow-md);
}
/* The script hides the panel with the `hidden` attribute, and the browser's own rule for that
   is `display: none` at the weakest possible specificity — which the class above beats, so the
   menu sat open on every page until this line. It has to stay next to that rule. */
.nav-panel[hidden] { display: none; }
.nav-panel a:not(.btn) { text-decoration: none; font-size: 1.05rem; font-weight: 500; color: var(--ink); padding: 12px 14px; border-radius: var(--r-md); }
.nav-panel a:not(.btn):hover { background: var(--tint); }
.nav-panel .btn { margin-top: 6px; justify-content: center; }

@media (max-width: 800px) {
  .nav { grid-template-columns: auto 1fr auto auto; padding-left: 10px; }
  .nav-links { display: none; }
  .nav-mark { justify-self: start; grid-column: 1; }
  .nav-cta { grid-column: 3; }
  .menu-btn { display: grid; grid-column: 4; }
}
@media (max-width: 420px) { .nav-cta { display: none; } }

/* ------------------------------------------------------------- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost { background: rgba(255, 255, 255, 0.86); color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { background: #fff; }
.btn-sm { padding: 10px 18px; font-size: 0.9rem; }

/* ---------------------------------------------------------------- hero ---- */

.hero {
  position: relative;
  min-height: min(92vh, 780px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bg);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 42%; }
/* The photograph already gives the words a clean dusty-rose field to sit on, so this is the
   lightest possible lift rather than a veil — enough that dark ink clears contrast wherever
   the crop lands, without washing the colour out of a shade that was chosen on purpose. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg, rgba(247, 233, 233, 0.58) 0%, rgba(247, 233, 233, 0.4) 40%, rgba(247, 233, 233, 0.08) 66%, rgba(247, 233, 233, 0) 100%);
}
/* padding-block, never the shorthand: .hero-inner also carries .wrap, whose side padding is the
   page gutter, and `padding: 168px 0 44px` silently set that gutter to zero on every screen. */
.hero-inner { position: relative; width: 100%; padding-block: clamp(116px, 22vw, 168px) clamp(32px, 6vw, 44px); }
.hero-copy { max-width: 640px; }
.hero h1 { margin-bottom: 20px; }
.hero-sub { font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: var(--ink-2); max-width: 30em; margin-bottom: 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  margin-bottom: 26px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero-facts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid rgba(191, 56, 104, 0.2);
  max-width: 720px;
}
/* The one place the page shouts. Poppins Bold against Inter's lightness everywhere else is
   the contrast Mina asked for, and it is why these three read as claims rather than captions. */
@media (max-width: 720px) {
  .hero-facts { grid-template-columns: 1fr; gap: 18px; margin-top: 40px; padding-top: 22px; }
  .hero-facts span { max-width: 34em; }
}

@media (max-width: 720px) {
  /* The scrim above runs left-to-right because on a wide screen the words live in the left third.
     On a phone they run the full width and continue down over the subject's face, so the hero
     needs a vertical wash as well — otherwise the benefit lines sit on skin and stop being
     readable exactly where someone is deciding whether to install this. */
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(247, 233, 233, 0.86) 0%, rgba(247, 233, 233, 0.72) 38%, rgba(247, 233, 233, 0.78) 70%, rgba(247, 233, 233, 0.9) 100%),
      linear-gradient(96deg, rgba(247, 233, 233, 0.5) 0%, rgba(247, 233, 233, 0.24) 55%, rgba(247, 233, 233, 0) 100%);
  }
  /* Two buttons of different widths stacked left looks like a mistake rather than a choice. */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }

  /* Measured, not guessed: with the wash above, the darkest backdrop under the subhead sits at
     L=0.475, where --ink-2 (#6A645C) reaches only 2.9:1. The headings are fine at 8.7:1 — it is
     the supporting copy that fails. Pushing the wash harder would bleach the photograph away, so
     the text darkens instead: #46413A clears 4.5:1 across the whole hero and still reads as
     secondary against the near-black headings. */
  .hero-sub, .hero-facts span { color: #46413a; }
}

.hero-facts b {
  display: block;
  font-family: 'Poppins', Inter, -apple-system, sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.55vw, 1.3rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.hero-facts span { font-size: 0.9rem; color: var(--ink-2); }

/* ------------------------------------------------------------ sections ---- */

section { padding: clamp(80px, 11vw, 152px) 0; }
.section-pink { background: var(--bg); }
.section-white { background: var(--surface); }

.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head p { color: var(--ink-2); margin-top: 16px; font-size: 1.05rem; }
.kicker { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }

.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 30px;
  box-shadow: var(--shadow-sm);
}
.section-white .card { background: var(--bg-warm); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-2); font-size: 0.98rem; }

.card-media { padding: 0; overflow: hidden; }
.card-media img { width: 100%; height: 210px; object-fit: cover; }
.card-media .card-body { padding: 26px 30px 30px; }

/* Alternating feature rows, the way the reference template stacks them. */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.feature + .feature { margin-top: clamp(56px, 8vw, 104px); }
.feature:nth-child(even) .feature-media { order: -1; }
.feature-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
.feature h3 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 400; letter-spacing: -0.022em; margin-bottom: 14px; }
.feature p { color: var(--ink-2); }
@media (max-width: 880px) {
  .feature { grid-template-columns: 1fr; }
  .feature:nth-child(even) .feature-media { order: 0; }
}

/* ------------------------------------------------------------- pricing ---- */

.price {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 38px;
  box-shadow: var(--shadow-md);
  text-align: center;
  max-width: 460px;
  margin: 0 auto;
}
.price .amount { font-family: 'Instrument Serif', Georgia, serif; font-size: 3.8rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1; }
.price .per { color: var(--ink-2); font-size: 0.98rem; margin-top: 8px; }
.price ul { list-style: none; padding: 0; margin: 28px 0; text-align: left; display: grid; gap: 11px; }
.price li { position: relative; padding-left: 28px; color: var(--ink-2); font-size: 0.98rem; }
.price li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.price .btn { width: 100%; }
.price .fine { font-size: 0.82rem; color: var(--ink-3); margin-top: 16px; }

/* ----------------------------------------------------------------- faq ---- */

details {
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
}
details summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.05rem;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
details[open] summary::after { content: "–"; }
details p { color: var(--ink-2); margin-top: 14px; max-width: 62ch; font-size: 0.99rem; }

/* -------------------------------------------------------------- footer ---- */

.closer { background: var(--accent); color: var(--on-accent); text-align: center; }
.closer h2 { color: var(--on-accent); max-width: 16ch; margin: 0 auto 18px; }
.closer p { color: rgba(255, 255, 255, 0.86); max-width: 46ch; margin: 0 auto 30px; }
.closer .btn-ghost { background: #fff; color: var(--accent); border-color: transparent; }

footer { background: var(--bg-warm); padding: 64px 0 40px; border-top: 1px solid var(--border); }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
footer h4 { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; font-weight: 600; }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
footer a { color: var(--ink-2); text-decoration: none; font-size: 0.94rem; }
footer a:hover { color: var(--accent); }
.foot-note { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 0.86rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }

/* --------------------------------------------------------- legal pages ---- */

.legal { padding: 148px 0 96px; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(2.1rem, 5vw, 3rem); margin-bottom: 12px; }
.legal .updated { color: var(--ink-3); font-size: 0.92rem; margin-bottom: 44px; }
.legal h2 { font-size: 1.45rem; margin: 46px 0 14px; }
.legal h3 { margin: 28px 0 8px; }
.legal p, .legal li { color: var(--ink-2); font-size: 1rem; }
.legal p + p { margin-top: 14px; }
.legal ul { padding-left: 22px; display: grid; gap: 9px; margin: 14px 0; }
.legal strong { color: var(--ink); }
.legal .callout { background: var(--accent-soft); border-radius: var(--r-lg); padding: 22px 26px; margin: 26px 0; }
.legal .callout p { color: var(--ink); }

/* A single entrance, used sparingly — the reference site reveals, it does not bounce. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: none; }

/* The faces band. Four portraits, equal weight, no captions — the point is made by showing
   rather than saying, and a caption under a face turns a person into an example. */
.faces {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: clamp(72px, 10vw, 128px);
}
.faces img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-lg); }
@media (max-width: 760px) { .faces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------- glass, pink and orbs ---- */
/* From Mina's UI references: frosted panels floating over soft pink, connected pill
   controls, wide open arcs, blurred spheres for depth. The rule that keeps it from
   turning into decoration — an orb is always BEHIND content, never on top of it. */

.section-pink {
  position: relative;
  overflow: hidden;
  background: linear-gradient(168deg, #fff4f7 0%, #ffe9f0 38%, #fdf2f5 72%, #fff8fa 100%);
}

/* Blurred spheres of colour. Pointer-events off so they can never eat a tap. */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.orb-a { width: 460px; height: 460px; top: -140px; right: -90px; background: radial-gradient(circle at 30% 30%, #ffc2d6, #ff9dbd 55%, rgba(255,157,189,0) 72%); }
.orb-b { width: 380px; height: 380px; bottom: -130px; left: -110px; background: radial-gradient(circle at 40% 40%, #ffd9e4, #f7a8c4 55%, rgba(247,168,196,0) 72%); }
.section-pink > .wrap { position: relative; z-index: 1; }

/* The frosted panel. On the pink sections the cards stop being white boxes and
   become glass, which is the whole look. */
.section-pink .card {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(160%) blur(22px);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.6) inset, 0 18px 44px rgba(176, 54, 106, 0.1);
}
.section-pink details { border-bottom-color: rgba(191, 56, 104, 0.14); }

/* Connected pills: one silhouette, a number either side of the action. */
.pillrow {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.pillrow > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--r-pill);
  padding: 12px 26px;
  text-align: center;
}
.pillrow b { font-size: 1.32rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.pillrow small { font-size: 0.72rem; color: var(--ink-3); letter-spacing: 0.02em; }
.pillrow .pill-mid { flex: 1; font-weight: 500; font-size: 0.98rem; }
@media (max-width: 560px) { .pillrow { width: 100%; } .pillrow > * { padding: 12px 14px; } }

/* A wide open arc for a proportion. Never a bar, never a percentage of someone's skin. */
.arc { display: grid; place-items: center; position: relative; width: 210px; height: 210px; margin: 0 auto; }
.arc svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.arc .track { fill: none; stroke: rgba(191, 56, 104, 0.14); stroke-width: 6; }
.arc .value { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.arc .inner { text-align: center; }
.arc .inner b { display: block; font-family: 'Instrument Serif', Georgia, serif; font-size: 2.6rem; font-weight: 400; line-height: 1; }
.arc .inner span { font-size: 0.82rem; color: var(--ink-2); }

/* ------------------------------------------------------ provider page ---- */
/* Everything below is only used by /provider. It is a variant of the home page's furniture,
   not a second design: same nav, same cards, same type, same pink. */

/* The home hero sets the words over a full-bleed photograph, which works because that crop
   was chosen for those four words. This page opens with a paragraph a clinician has to read,
   so the photograph moves into a card beside the copy and the words sit on the pink field
   instead — no line of ink is ever asked to clear contrast over a face. */
.hero-split {
  min-height: 0;
  align-items: center;
  background: linear-gradient(168deg, #fff4f7 0%, #ffe9f0 38%, #fdf2f5 72%, #fff8fa 100%);
}
.hero-split .hero-inner { padding-block: clamp(116px, 15vw, 168px) clamp(48px, 8vw, 96px); z-index: 1; }
.hero-split .hero-copy { max-width: none; }
.hero-split .hero-facts { max-width: none; margin-top: clamp(48px, 6vw, 72px); }

.hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* Below the copy rather than above it: on a phone the first thing on screen should be the
     sentence that says what this is. */
  .hero-shot img { aspect-ratio: 3 / 2; }
}

/* Two lists facing each other: what a provider can see, and what they cannot. A clinician
   reads the second one first, so it gets the same weight as the first rather than becoming
   fine print at the bottom of the page. The marks are drawn in CSS because the self-hosted
   latin subsets have no tick glyph to lend. */
.marks { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.marks li { position: relative; padding-left: 30px; color: var(--ink-2); font-size: 0.98rem; }
.marks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--accent-soft);
}
.marks li::after { content: ""; position: absolute; }
.marks-yes li::after {
  left: 5px;
  top: 0.63em;
  width: 8px;
  height: 4px;
  border-left: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent);
  transform: rotate(-45deg);
}
.marks-no li::before { background: var(--surface-muted); }
.marks-no li::after { left: 5px; top: 0.86em; width: 9px; border-top: 1.6px solid var(--ink-3); }

/* A step number needs to look like a number, not a bullet. Reuses the kicker's letterspacing
   so the three cards still belong to the same page as every other small label. */
.step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* --------------------------------------------------- the app showcase ---- */
/* Five screens of the app, upright, centre forward, on the one dark band of an otherwise
   cream page. From the reference Mina sent — read off the live page rather than remembered:

     - ZERO rotation. Every screen is perfectly upright. It is a depth stack, not a paper fan;
       tilting the phones is the single most common way this effect is botched. If someone
       later "improves" this with a few degrees of rotate(), that is the regression.
     - The centre screen is the largest and sits highest, reaching above AND below its
       neighbours. 2 and 4 step down, 1 and 5 step down again — but only slightly, so the
       outer pair reads as further away rather than as a separate size.
     - Each join overlaps by about 17% of the smaller screen's width.
     - Nothing is cropped. All five are whole.

   The ground is --rose-deep, and that is the consequence of the app's theme, not a mood: the
   default theme is Petal and it is light (people change it in the app if they want to), so a
   light screen on this site's cream reaches 1.19:1 and simply dissolves. On --rose-deep the
   same screen reads at 9.32:1. Inverting the reference — light product on a dark band instead
   of dark product on a light one — is what makes the screens the brightest thing on the page.

   Every number below is a percentage of the track, so the whole composition is one shape that
   scales rather than five numbers re-guessed at each width. */

.section-rose {
  background: var(--rose-deep);
  color: var(--on-accent);
}
.section-rose h2 { color: var(--on-accent); }
/* The same value .closer already uses for body copy on a coloured ground: 9.47:1 here. */
.section-rose .section-head p { color: rgba(255, 255, 255, 0.86); }
/* --accent on this ground is 2.33:1, so the kicker cannot stay accent-coloured. --accent-soft
   is the same hue read from the other end and measures 10.36:1. The kicker IS a .section-head p,
   so this selector has to out-specify the line above it — `.section-rose .kicker` loses to it
   and the kicker silently comes out the same colour as the sentence under it. */
.section-rose .section-head .kicker { color: var(--accent-soft); }

/* The two photos inside the Home and Progress frames are the sample client's, and
   docs/SAMPLE-CLIENT.md is explicit that they are AI-generated and must be labelled as such
   wherever they appear. On a marketing page an unlabelled before-and-after also reads as a
   results claim, which is the one thing this product does not make. Hence the line — quieter
   than the sentence above it, still comfortably over 4.5:1 on --rose-deep. */
/* Sits inside .section-head, so it has to out-specify `.section-rose .section-head p` above —
   the same specificity trap the kicker hit two rules up. Quieter than the lead on purpose: it is
   a footnote, not a second opening line. Measured 6.21:1 on --rose-deep, well over the 4.5 AA
   needs for body text. */
.section-rose .section-head p.appshow-note {
  margin-block: 16px 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.66);
}

.appshow {
  list-style: none;
  margin: 0;
  /* padding-block, never the shorthand — .appshow sits inside .wrap and a `padding: 0 0 24px`
     here would not zero the gutter, but the shorthand habit is how that bug shipped once. */
  padding-block: 0;
  padding-inline: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Below 1024px this is a scroll container, and a scroll container has to be reachable from a
   keyboard. Chrome does not focus one on its own, so the markup carries tabindex="0" and this
   is the ring it gets — light, because --accent is 2.33:1 on this ground. */
.appshow:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 14px; border-radius: var(--r-lg); }

.appshow-phone {
  /* 25.5% of the track. At a 1440 viewport the track is 1092, so a screen is 278 x 603 and the
     whole stack is 1041 x 603 — the same order as the reference's 1248 x 644, and modest: a
     calm element inside the page's one content column, not a hero. */
  flex: 0 0 25.5%;
  /* The overlap, half on each side so the five stay optically centred. It is not one number,
     because the screens are different sizes: scaling shrinks each one about its own centre, so
     equal spacing would leave the outer joins barely touching. Solve per join instead, for a
     box width B, visual half-widths 0.5B / 0.43B / 0.395B and an overlap of 17% of the smaller:
       centre-to-inner   pull3 + pull2 = 0.2162 * B
       inner-to-outer    pull2 + pull1 = 0.3093 * B
     which at B = 25.5% is the three values below. Change a scale and these must be re-solved. */
  margin-inline: calc(var(--pull) * -1);
  aspect-ratio: 430 / 932;
  overflow: hidden;
  /* A phone's corner is about 12.8% of its width. --r-xl alone reads tight at 278px, so it is
     the token times a quarter again rather than a fourth radius in the file. Because the radius
     is painted before the transform, the outer screens get a proportionally smaller one free. */
  border-radius: calc(var(--r-xl) * 1.25);
  /* Petal's own ground, so a screen that has not loaded yet is not a white flash on the rose. */
  background: var(--bg);
  box-shadow: var(--shadow-phone);
  transform: translateY(var(--lift)) scale(var(--scale));
}
.appshow-phone img { width: 100%; height: 100%; object-fit: cover; }

/* The stack. --lift is a percentage of the screen's own unscaled height, so the step down
   travels with the screens instead of drifting apart from them at a smaller width. Centres are
   aligned first, so the centre screen already reaches furthest in both directions; the lift
   only decides how much of that the neighbours give back at the top. */
.appshow-phone:nth-child(1) { --scale: 0.79; --lift: 5%; --pull: 5.19%; z-index: 1; }
.appshow-phone:nth-child(2) { --scale: 0.86; --lift: 4%; --pull: 2.70%; z-index: 2; }
.appshow-phone:nth-child(3) { --scale: 1;    --lift: 0;  --pull: 2.81%; z-index: 3; }
.appshow-phone:nth-child(4) { --scale: 0.86; --lift: 4%; --pull: 2.70%; z-index: 2; }
.appshow-phone:nth-child(5) { --scale: 0.79; --lift: 5%; --pull: 5.19%; z-index: 1; }

/* Below 1024px the stack stops being honest: five screens across a tablet is a 200px-wide
   screenshot, and across a phone it is 90px — a picture of an app rather than a look at one.
   A three-screen arrangement does not rescue it either; at 360px that is still 110px each.
   So it becomes a snap rail: the same five screens at a size you can actually read, one and a
   bit in view so it is obvious there are more, scrolling inside its own box so the page itself
   never moves sideways. It is also the gesture the App Store already taught everyone. */
@media (max-width: 1023px) {
  .appshow {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(66vw, 288px);
    gap: 16px;
    align-items: start;
    /* The stack centres its five screens; a scroll container must not. A centred track wider
       than its box overhangs BOTH edges, and the overhang before the start edge cannot be
       scrolled to — it costs you the first screens, silently, on every phone. */
    justify-content: start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* Snapping to the START of each screen, not its centre: the first screen's centred
       position is off the left end of the scroll range, so the browser re-snaps to whichever
       screen it can centre and the rail quietly opens on the third one. scroll-padding matches
       the rail's own padding, which makes scrollLeft 0 a real snap position. */
    scroll-padding-inline: var(--gutter);
    /* Edge to edge. The negative margin is exactly .wrap's own padding, so the rail's edges
       land on the viewport's and never past them — this is the line that keeps the page from
       scrolling sideways, so it has to stay equal to --gutter. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    /* A scroll container clips to its padding box and --shadow-phone reaches 62px below the
       screen (30px down, then half of a 64px blur). Without this the shadow is sheared off,
       and the negative block margin hands most of the room back so the rhythm is unchanged. */
    padding-block: 12px 64px;
    margin-block: -12px -52px;
    scrollbar-width: none;
  }
  .appshow::-webkit-scrollbar { display: none; }
  .appshow-phone {
    margin: 0;
    transform: none;
    scroll-snap-align: start;
  }
}

/* Mandatory snapping takes the scroll away from the reader, which is exactly what someone with
   a vestibular sensitivity has asked not to happen. Proximity keeps the tidy resting places and
   gives the gesture back. Nothing else here animates or transitions. */
@media (prefers-reduced-motion: reduce) {
  .appshow { scroll-behavior: auto; scroll-snap-type: x proximity; }
}