/* Classy marketing site. Plain CSS, no build step. */

/* ---------- Fonts (self-hosted, OFL; see fonts/OFL-*.txt) ---------- */
/* Fraunces 9pt optical size, latin-ext */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600 700;
  font-display: optional;
  src: url("fonts/fraunces-9pt-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces 9pt optical size, latin */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600 700;
  font-display: optional;
  src: url("fonts/fraunces-9pt-latin.woff2") 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;
}
/* Figtree, latin-ext */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Figtree, latin */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("fonts/figtree-latin.woff2") 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;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand palette */
  --clay: #A9563F;        /* primary / CTA. 4.8:1 on oat, white on it 5.1:1 */
  --clay-dark: #8F4631;   /* hover, and clay-coloured text on blush (5.2:1) */
  --sage: #7C9479;        /* secondary, decorative only (3.1:1 on oat) */
  --sage-dark: #4F6B4D;   /* sage for text (5.5:1 on oat) */
  --oat: #FBF6F1;         /* background */
  --blush: #F6DDD2;       /* accent */

  /* Neutrals */
  --ink: #2B211D;         /* body text, 14.6:1 on oat */
  --ink-soft: #62524A;    /* secondary text, 6.9:1 on oat, 5.7:1 on blush */
  --paper: #FFFCF9;
  --line: rgba(43, 33, 29, 0.12);

  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 18px 40px -18px rgba(75, 45, 32, 0.35), 0 4px 10px -4px rgba(75, 45, 32, 0.12);
  --header-h: 68px;
  --gutter: clamp(16px, 4vw, 32px);

  /* Phone widths (bezel included). A real phone screen is about 360-390px wide, so the
     screenshots only read like a real app when each screen is near that size. On small
     screens a phone is most of the viewport and rows of them scroll sideways. */
  --pw-single: min(84vw, 360px);   /* a lone phone: hero and one-phone feature rows */
  --pw-row: min(84vw, 360px);      /* phones in a scrolling row */
  --pw-promo: min(70vw, 360px);    /* the promo animation's phone */
}
@media (min-width: 768px) {
  :root { --pw-single: 372px; --pw-row: 360px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--oat);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5.2vw + 0.6rem, 3.6rem); font-weight: 700; }
h1 em { font-style: normal; color: var(--clay); }
h2 { font-size: clamp(1.75rem, 3vw + 0.7rem, 2.6rem); }
h3 { font-size: clamp(1.3rem, 1.2vw + 1rem, 1.7rem); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--clay-dark); }

.container { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 820px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

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

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }

.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sage-dark);
}
.lead { font-size: clamp(1.1rem, 0.6vw + 1rem, 1.3rem); color: var(--ink-soft); max-width: 40em; }
.fine { font-size: 0.9rem; color: var(--ink-soft); margin: 1.25rem 0 0; }
.note { font-size: 0.95rem; color: var(--ink-soft); border-left: 3px solid var(--sage); padding-left: 12px; }
.ticks + .note { margin-top: 1.5rem; }
.feature__copy > p.feature__sub { margin: 1.5rem 0 0; }
/* One calm line per feature: the relief it brings. */
.feature__copy > p.relief, .relief { margin: 1.5rem 0 0; font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; line-height: 1.35; color: var(--clay-dark); text-wrap: balance; }
.ticks + .relief + .note { margin-top: 1.25rem; }
.center { text-align: center; margin-top: 2.5rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.6rem 1.35rem;
  border-radius: 999px; border: 2px solid transparent;
  font: 700 1rem/1.2 var(--font-body); text-decoration: none; text-align: center;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
  cursor: pointer;
}
.btn--primary { background: var(--clay); color: #fff; }
.btn--primary:hover { background: var(--clay-dark); }
.btn--ghost { border-color: var(--clay); color: var(--clay-dark); background: transparent; }
.btn--ghost:hover { background: var(--blush); }
.btn--light { background: var(--oat); color: var(--clay-dark); }
.btn--light:hover { background: #fff; }
.btn--sm { min-height: 40px; padding: 0.45rem 1.1rem; font-size: 0.95rem; }
.btn--lg { min-height: 52px; padding: 0.8rem 1.8rem; font-size: 1.05rem; }
@media (prefers-reduced-motion: no-preference) { .btn:hover { transform: translateY(-1px); } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 246, 241, 0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.sprite { position: absolute; }
.logo__mark { flex: none; display: block; }
.logo__word { font-family: var(--font-head); font-weight: 700; font-size: 1.55rem; letter-spacing: -0.01em; }
.nav ul { display: flex; gap: 28px; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.98rem; padding: 8px 2px; }
.nav a:hover { color: var(--clay-dark); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.header-actions { display: flex; align-items: center; gap: 10px; }

.nav-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: transparent; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; content: ""; }
.nav-toggle__bars::before { position: absolute; top: -6px; left: 0; }
.nav-toggle__bars::after { position: absolute; top: 6px; left: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 859px) {
  .logo__word { font-size: 1.35rem; }
  .nav { display: none; }
  /* The menu button only exists when JS can drive it; without JS the page is still one scroll. */
  .js .nav-toggle { display: inline-flex; }
  .js .nav.is-open {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--oat); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 16px; box-shadow: 0 16px 24px -16px rgba(75, 45, 32, 0.3);
  }
  .js .nav.is-open ul { flex-direction: column; gap: 0; }
  .js .nav.is-open a { display: block; padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
}
@media (max-width: 400px) {
  .header-inner { gap: 8px; }
  .btn--sm { padding-inline: 0.9rem; font-size: 0.9rem; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 7vw, 96px); background: radial-gradient(120% 90% at 85% 0%, var(--blush) 0%, rgba(246, 221, 210, 0) 60%), var(--oat); }
.hero-grid { display: grid; gap: 48px; align-items: center; }
.hero__copy .lead { margin-bottom: 1.75rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__media { display: flex; justify-content: center; position: relative; }
.hero__media::before {
  content: ""; position: absolute; width: min(420px, 90%); aspect-ratio: 1; border-radius: 50%;
  background: var(--sage); opacity: 0.22; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 64px; }
}

/* ---------- Phone frames ---------- */
.phone { margin: 0; width: min(100%, 250px); position: relative; }
.phone--hero { width: min(100%, var(--pw-single)); transform: rotate(2deg); }
.phone__bezel {
  padding: 9px; border-radius: 40px;
  background: linear-gradient(160deg, #3b2e29, #231a17);
  /* Dark bezel + a hairline edge and a two-layer shadow keep a white/light screen
     clearly separated from the oat page and the pale backdrop behind the phone. */
  box-shadow:
    0 0 0 1px rgba(43, 33, 29, 0.55),
    0 30px 50px -22px rgba(75, 45, 32, 0.55),
    0 10px 18px -8px rgba(75, 45, 32, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.phone__bezel img {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top;
  border-radius: 32px;
  /* Light fill so the frame still looks intentional if a screenshot is missing. */
  background: linear-gradient(170deg, #fff 0%, var(--oat) 60%, #EADFD5 100%);
  color: var(--ink); font-size: 0.8rem; line-height: 1.3;
}
.phone figcaption { text-align: center; margin-top: 14px; font-size: 0.875rem; color: var(--ink-soft); font-weight: 500; }
.phones .phone__bezel, .shots .phone__bezel { padding: 7px; border-radius: 30px; }
.phones .phone__bezel img, .shots .phone__bezel img { border-radius: 24px; }

/* A single phone beside its text (Payments, Income). */
.phones { display: flex; justify-content: center; align-items: flex-start; gap: 24px; width: 100%; }
.phones .phone { width: min(100%, var(--pw-single)); min-width: 0; }

/* Rows of phones (Bookings: three; Also included: four). Each phone keeps close to its real size,
   so the row is a sideways scroller that snaps phone by phone, with the next phone peeking in,
   until the page is wide enough to show them all (see the media queries below). It bleeds out to
   the edge of the container so the peeking phone isn't cut off inside the gutter. */
.phones--three, .shots {
  display: flex; align-items: flex-start; justify-content: flex-start; gap: 16px;
  width: auto; margin-inline: calc(var(--gutter) * -1); padding: 12px var(--gutter) 28px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: thin; scrollbar-color: rgba(43, 33, 29, 0.35) transparent;
}
.phones--three .phone, .shots .phone { flex: 0 0 var(--pw-row); width: var(--pw-row); scroll-snap-align: start; }
.phones--three:focus-visible, .shots:focus-visible { outline-offset: -3px; }
.shots { margin-top: 44px; }
/* All three Bookings phones fit at full size. */
@media (min-width: 1200px) {
  .phones--three { justify-content: center; gap: 24px; margin-inline: 0; padding: 0; overflow: visible; }
}
/* Two phones (Payments) centre when they fit, and still scroll when they don't. */
.phones--two { justify-content: flex-start; justify-content: safe center; }
/* The six Also included phones wrap into two rows of three, a little smaller than the rest. */
@media (min-width: 1200px) {
  .shots { --pw-row: 340px; flex-wrap: wrap; justify-content: center; gap: 40px 24px; margin-inline: 0; padding: 0; overflow: visible; }
}

/* ---------- Promo animation ---------- */
/* A looping tour built from the screenshots. promo.js moves it along by toggling .is-active and
   .is-leaving on every [data-scenes] element (the numbers are the scenes it shows in); all the
   motion is CSS. Scene 1 is marked .is-active in the HTML, so before JavaScript runs, or without
   it, the stage is a still of scene 1. State classes on .promo__stage: .is-paused freezes every
   animation, .is-settled (a manual jump while paused) and .is-static (reduced motion) skip
   straight to each scene's finished look. */
.promo__stage { display: grid; gap: 28px; align-items: center; max-width: 1096px; margin-inline: auto; }
@media (min-width: 1000px) {
  .promo__stage { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); justify-content: center; }
  :root { --pw-promo: 372px; }
}

/* The brand pair slides in from the sides, so clip anything past the screen edge (it is invisible then) to keep the page from gaining a horizontal scroll. */
.promo { overflow-x: clip; }

/* Phone side */
.promo__visual { display: flex; justify-content: center; min-width: 0; }
.promo__phones { position: relative; width: min(100%, 620px); }
.promo__phones::before {
  content: ""; position: absolute; width: min(480px, 90%); aspect-ratio: 1; border-radius: 50%;
  background: var(--sage); opacity: 0.22; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.promo__device { position: relative; width: var(--pw-promo); margin-inline: auto; }
/* On phones the stage stays within about one screen: phone, caption and controls together. */
@media (max-width: 767px) { .promo__stage { gap: 20px; } .promo__controls { margin-top: 20px; } }
.promo__screen {
  position: relative; overflow: hidden; aspect-ratio: 740 / 1600; border-radius: 32px;
  container-type: inline-size;
  background: linear-gradient(170deg, #fff 0%, var(--oat) 60%, #EADFD5 100%);
}
/* The screenshots stack in the screen; the .promo prefix beats the generic ".phone__bezel img" rule. */
.promo .promo__shot {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  aspect-ratio: auto; border-radius: 0; object-fit: cover; object-position: top; background: none;
  z-index: 0;
}
.promo__shot--kb { transform-origin: 26% 16%; }

/* Two smaller phones for the branding scene */
.promo__pair { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3%; }
.promo__mini { width: 48%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.promo__mini .phone__bezel { padding: 6px; border-radius: 26px; }
.promo__mini .promo__screen { border-radius: 20px; }
.promo__mini--a { transform: translate(-24px, -18px); }
.promo__mini--b { transform: translate(24px, 18px); }
.promo__pair.is-active .promo__mini--a, .promo__pair.is-leaving .promo__mini--a { transform: translate(0, -18px); }
.promo__pair.is-active .promo__mini--b, .promo__pair.is-leaving .promo__mini--b { transform: translate(0, 18px); }

/* End card tile: the Classy mark */
.promo__tile {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: min(86%, 280px); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  border-radius: 36px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.promo__tile-word { font-family: var(--font-head); font-weight: 700; font-size: 2.3rem; letter-spacing: -0.01em; color: var(--ink); line-height: 1; }

/* Tap markers sit on the buttons, positioned in percentages of the screen so they scale with it. */
.promo__tap {
  position: absolute; z-index: 5; width: 12%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: transparent; border: 3px solid rgba(255, 255, 255, 0.95); pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(43, 33, 29, 0.28), 0 3px 10px rgba(0, 0, 0, 0.3);
}
.promo__tap::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid rgba(169, 86, 63, 0.75); opacity: 0; }
.promo__tap--s1 { left: 87.6%; top: 80.1%; }   /* the "Book" button on member-schedule */
.promo__tap--s2 { left: 50%; top: 95.3%; }     /* the "Book" button on member-class-detail */

/* "Booked" toast that slides up from the bottom of the screen */
.promo__toast {
  position: absolute; z-index: 5; left: 8%; right: 8%; bottom: 11%;
  display: flex; align-items: center; justify-content: center; gap: .45em; padding: .7em 1em; border-radius: 999px;
  background: var(--ink); color: #fff; font: 700 .85rem/1.2 var(--font-body); font-size: 5.4cqw;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.5);
}
.promo__toast svg { flex: none; width: 1.25em; height: 1.25em; color: #B5F2BF; }

/* Scene visibility. Inactive elements are hidden (and out of the tab order); the one that
   just left stays on screen for the length of the fade. */
.promo [data-scenes] { transition: opacity .5s ease, visibility 0s linear .5s; }
.promo [data-scenes]:where(:not(.is-active):not(.is-leaving)) { opacity: 0; visibility: hidden; }
.promo [data-scenes].is-active { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.promo [data-scenes].is-leaving { opacity: 0; visibility: visible; }
/* Screenshots crossfade by the new one fading in over the old one, so the screen never goes blank. */
.promo .promo__shot.is-active { z-index: 2; }
.promo .promo__shot.is-leaving { opacity: 1; z-index: 1; }

/* Per-scene motion (starts each time the scene's element becomes active) */
@keyframes promo-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.7); opacity: 0; } }
@keyframes promo-tap {
  0% { opacity: 0; scale: .5; } 15% { opacity: 1; scale: 1; } 45% { opacity: 1; scale: 1; }
  55% { opacity: 1; scale: .82; } 70% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.2; }
}
@keyframes promo-toast { from { opacity: 0; transform: translateY(170%); } to { opacity: 1; transform: none; } }
@keyframes promo-kb { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes promo-pop { from { scale: .94; } to { scale: 1; } }
@keyframes promo-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes promo-count-from { from { opacity: 1; } to { opacity: .45; } }
@keyframes promo-count-to { from { opacity: 0; transform: translateY(.7em); } to { opacity: 1; transform: none; } }
@keyframes promo-fill { from { width: 0; } to { width: 100%; } }

/* Taps are brief (appear, press, fade) so the button underneath stays readable. */
.promo__tap--s1.is-active { animation: promo-tap 1.6s ease-out 1s both; }
.promo__tap--s1.is-active::after { animation: promo-pulse .8s ease-out 1.6s both; }
.promo__tap--s2.is-active { animation: promo-tap 1.6s ease-out .8s both; }
.promo__tap--s2.is-active::after { animation: promo-pulse .8s ease-out 1.4s both; }
.promo__toast.is-active { animation: promo-toast .55s cubic-bezier(.2, .8, .2, 1) 1.75s both; }
.promo__shot--kb.is-active, .promo__shot--kb.is-leaving { animation: promo-kb 5.4s ease-out both; }
.promo__tile.is-active { animation: promo-pop .6s ease-out both; }

/* Captions */
.promo__side { min-width: 0; text-align: center; }
.promo__captions { display: grid; }
.promo__caption { grid-area: 1 / 1; align-self: center; }
.promo .promo__caption { transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s; }
.promo .promo__caption:where(:not(.is-active):not(.is-leaving)) { transform: translateY(14px); }
.promo .promo__caption.is-active { transition: opacity .5s ease .1s, transform .5s ease .1s, visibility 0s; transform: none; }
.promo .promo__caption.is-leaving { transform: translateY(-14px); }
.promo__line { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.65rem, 1.2vw + 1.3rem, 2.35rem); line-height: 1.18; letter-spacing: -0.01em; text-wrap: balance; color: var(--ink); }
.promo__caption .btn { margin-top: 1.5rem; }
@media (min-width: 768px) { .promo__side { text-align: left; } }

/* "Classes left: 6 -> 5" chip, beside the phone rather than on it. Illustrative, not from a screenshot. */
.promo__chip {
  display: inline-flex; align-items: center; gap: .45em; margin: 1.25rem 0 0; padding: .55rem 1.15rem; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: 0 8px 16px -10px rgba(75, 45, 32, 0.45);
  font-weight: 700; color: var(--ink);
}
.promo__chip > span { display: inline-block; }
.promo__from { color: var(--ink-soft); }
.promo__arrow { color: var(--ink-soft); }
.promo__to { color: var(--sage-dark); }
.promo__caption.is-active .promo__chip { animation: promo-fade-up .5s ease-out .5s both; }
.promo__caption.is-active .promo__from { animation: promo-count-from .4s ease 1.6s both; }
.promo__caption.is-active .promo__arrow, .promo__caption.is-active .promo__to { animation: promo-count-to .5s cubic-bezier(.2, .8, .2, 1) 1.6s both; }

/* Controls */
.promo__controls { margin-top: 28px; }
.promo__controls[hidden] { display: none; }
.promo__progress { display: flex; gap: 6px; }
.promo__seg { position: relative; flex: 1 1 0; min-width: 0; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; }
.promo__seg::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: rgba(43, 33, 29, 0.22); transition: background-color .15s; }
.promo__seg:hover::before { background: rgba(43, 33, 29, 0.38); }
.promo__fill { position: absolute; left: 0; top: 50%; height: 6px; margin-top: -3px; width: 0; border-radius: 3px; background: var(--clay-dark); }
.promo__seg.is-done .promo__fill { width: 100%; }
.promo__seg.is-active .promo__fill { animation: promo-fill var(--dur, 4.5s) linear both; }
.promo__buttons { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
@media (min-width: 768px) { .promo__buttons { justify-content: flex-start; } }
.promo__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid rgba(43, 33, 29, 0.28); border-radius: 999px; background: var(--paper); color: var(--ink);
  font: 700 .95rem/1 var(--font-body); cursor: pointer; transition: background-color .15s;
}
.promo__btn:hover { background: #fff; }
.promo__btn svg { display: block; flex: none; }
.promo__toggle { padding: 0 18px 0 14px; min-width: 112px; }
.promo__toggle .promo__ico-play { display: none; }
.promo__toggle.is-paused .promo__ico-pause { display: none; }
.promo__toggle.is-paused .promo__ico-play { display: block; }
.promo__toggle[hidden] { display: none; }

/* Settled: a manual jump while paused, or reduced motion. Each scene shows its finished look. */
.promo__stage.is-paused:not(.is-settled):not(.is-static) *, .promo__stage.is-paused:not(.is-settled):not(.is-static) *::before, .promo__stage.is-paused:not(.is-settled):not(.is-static) *::after { animation-play-state: paused !important; }
.promo__stage.is-settled *, .promo__stage.is-settled *::before, .promo__stage.is-settled *::after,
.promo__stage.is-static *, .promo__stage.is-static *::before, .promo__stage.is-static *::after {
  animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
}
.promo__stage.is-settled .promo__shot, .promo__stage.is-static .promo__shot { animation: none !important; }
.promo__stage.is-settled .promo__seg .promo__fill, .promo__stage.is-static .promo__seg .promo__fill { animation: none !important; }
.promo__stage.is-settled .promo__seg.is-active .promo__fill, .promo__stage.is-static .promo__seg.is-active .promo__fill { width: 100%; }
/* Reduced motion: no fades or slides either. */
.promo__stage.is-static [data-scenes], .promo__stage.is-static .promo__caption, .promo__stage.is-static .promo__mini,
.promo__stage.is-static .promo__seg::before { transition: none !important; }

/* No JavaScript: the first scene as a still, and every caption listed beside it. */
html:not(.js) .promo__captions { display: block; }
html:not(.js) .promo .promo__captions .promo__caption { margin: 0 0 1.5rem; opacity: 1; visibility: visible; transform: none; }
html:not(.js) .promo__line { font-size: 1.35rem; }
html:not(.js) .promo__tap { display: none; }

/* ?promo=record: just the stage, playing from scene 1, for screen-recording to video. */
.promo-record .skip-link, .promo-record .site-header, .promo-record .site-footer,
.promo-record main > :not(#promo), .promo-record #promo .section__head, .promo-record .promo__controls { display: none; }
.promo-record #promo { min-height: 100vh; display: grid; align-items: center; padding: 32px 0; }

/* ---------- Screenshot lightbox ---------- */
/* Each screenshot is a plain link to the full-size image. main.js upgrades it to a dialog. */
.zoom { position: relative; display: block; border-radius: 32px; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.phones .zoom, .shots .zoom { border-radius: 24px; }
.zoom:focus-visible { outline: 3px solid #fff; outline-offset: 0; }
.phone__bezel:has(.zoom:focus-visible) { outline: 3px solid var(--clay-dark); outline-offset: 3px; }
/* Small round magnifier badge, bottom-right of the screen. */
.zoom::after {
  content: ""; position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(43, 33, 29, 0.78)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='5.5'/%3E%3Cpath d='m15 15 5 5M8.2 10.5h4.6M10.5 8.2v4.6'/%3E%3C/g%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.zoom:hover::after, .zoom:focus-visible::after { opacity: 1; }
/* Touch screens have no hover: keep a smaller, quieter badge in view. */
@media (hover: none) { .zoom::after { opacity: 0.85; width: 28px; height: 28px; right: 10px; bottom: 10px; background-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .zoom::after { transition: none; } }

.lb-open { overflow: hidden; }
.lightbox {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 56px 16px 16px;
  border: 0; background: transparent; color: #fff; overscroll-behavior: contain;
}
.lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; animation: lb-fade .2s ease-out; }
.lightbox::backdrop { background: rgba(30, 22, 19, 0.88); }
.lightbox[open]::backdrop { animation: lb-fade .2s ease-out; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lightbox[open], .lightbox[open]::backdrop { animation: none; } }
.lightbox__img {
  display: block; width: auto; height: auto; max-width: 92vw; border-radius: 28px; background: var(--paper);
  max-height: 80vh; max-height: min(92vh, calc(100dvh - 150px));
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}
.lightbox__bar { display: flex; align-items: center; justify-content: center; gap: 12px; width: min(92vw, 420px); }
.lightbox__text { flex: 1; min-width: 0; margin: 0; text-align: center; line-height: 1.3; }
.lightbox__cap { display: block; font-weight: 600; font-size: 1.05rem; }
.lightbox__pos { display: block; font-size: 0.875rem; color: rgba(255, 255, 255, 0.78); }
.lightbox__btn {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; transition: background-color .15s;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.3); }
.lightbox__btn svg { display: block; width: 24px; height: 24px; }
.lightbox__close { position: absolute; top: 6px; right: 8px; }
.lightbox :focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 50%; }
.lightbox__img:focus-visible { border-radius: 28px; }

/* ---------- Studio strip ---------- */
.strip { border-block: 1px solid var(--line); background: var(--paper); padding: 28px 0; }
.strip__title { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); text-align: center; margin: 0 0 14px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chips li { padding: 8px 18px; border-radius: 999px; background: var(--blush); color: #5A2E21; font-weight: 600; font-size: 1rem; text-align: center; }
.chips .chips__more { background: transparent; border: 1.5px dashed rgba(43, 33, 29, 0.3); color: var(--ink-soft); font-weight: 500; }

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 112px) 0; }
.section--blush { background: var(--blush); }
.section--tint { background: var(--paper); border-block: 1px solid var(--line); }
.section__head { max-width: 46rem; margin-bottom: clamp(32px, 5vw, 64px); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .lead { margin-inline: auto; }
.section--blush .eyebrow { color: #3F5A3D; }
.section--blush .lead { color: #5A4A42; }

/* ---------- Features ---------- */
.feature { display: grid; gap: 28px; align-items: center; padding: clamp(24px, 3.75vw, 42px) 0; }
.feature + .feature { border-top: 1px solid var(--line); }
.feature__copy { max-width: 36rem; }
.feature__copy > p { color: var(--ink-soft); }
.feature__media { display: flex; justify-content: center; position: relative; min-width: 0; }
.feature__media::before {
  content: ""; position: absolute; inset: 6% 8%; border-radius: 48px;
  background: linear-gradient(160deg, rgba(246, 221, 210, 0.9), rgba(124, 148, 121, 0.28));
  z-index: 0;
}
.feature__media > * { position: relative; z-index: 1; }
@media (min-width: 960px) {
  /* Text beside a single phone: the phone column is wide enough for a full-size phone. */
  .feature { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: clamp(40px, 6vw, 88px); }
  .feature--flip { grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); }
  .feature--flip .feature__copy { order: 2; }
  .feature__media { padding: 15px 0; }
}
/* Rows of several phones: text on top at a readable width, the phones in a row below. */
.feature--wide { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.feature--wide .feature__copy { max-width: 65ch; }
.feature--wide .feature__media { display: block; padding: 15px 0; }
.feature--wide .feature__media::before { inset: 4% 0; border-radius: 40px; }
@media (min-width: 1200px) {
  /* Breaks out of the text measure (not the page) so three full-size phones fit. */
  .feature--wide .feature__media { width: 1136px; margin-inline: calc(50% - 568px); }
}

.ticks { display: grid; gap: 12px; margin: 1.25rem 0 0; }
.ticks li { position: relative; padding-left: 34px; color: var(--ink); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sage-dark)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* ---------- Steps ---------- */
.steps { display: grid; gap: 20px; counter-reset: step; }
.step { background: var(--oat); border-radius: var(--radius); padding: 28px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 24px -16px rgba(75, 45, 32, 0.4); }
.step h3 { margin-top: 14px; }
.step p { margin: 0; color: var(--ink-soft); }
.step__num {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--clay); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem;
}
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* ---------- Member cards ---------- */
.cards { display: grid; gap: 20px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.card__icon { display: block; color: var(--clay-dark); background: var(--blush); box-sizing: content-box; padding: 11px; border-radius: 14px; margin-bottom: 16px; }
.card h3 { font-size: 1.25rem; margin-bottom: 0.35em; }
.card p { margin: 0; color: var(--ink-soft); }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
/* Compact variant for the "Also included" grid */
.cards--compact .card { background: var(--oat); padding: 20px 22px; }
.cards--compact .card h3 { font-size: 1.1rem; }
@media (min-width: 1100px) { .cards--compact { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

/* ---------- Pricing ---------- */

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq details { background: var(--oat); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 56px 18px 20px; position: relative;
  font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; line-height: 1.3; border-radius: var(--radius-sm);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -8px;
  border-right: 2.5px solid var(--clay-dark); border-bottom: 2.5px solid var(--clay-dark); transform: rotate(45deg);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq summary:hover { color: var(--clay-dark); }
.faq details p { padding: 0 20px 20px; margin: 0; color: var(--ink-soft); }
.faq details p:not(:last-child) { padding-bottom: 12px; }
.faq details .ticks { margin: 0; padding: 0 20px 4px; }
.faq details .ticks + p { padding-top: 12px; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ---------- CTA band ---------- */
.cta-band { background: var(--clay); color: #fff; text-align: center; padding: clamp(56px, 8vw, 96px) 0; }
.cta-band h2 { color: #fff; }
.cta-band p { max-width: 36rem; margin: 0 auto 1.75rem; font-size: 1.15rem; }
.cta-band p.cta-band__email { margin: 1.25rem auto 0; font-size: 1rem; }
.cta-band__email a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.cta-band :focus-visible { outline-color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #E9DFD8; padding: 48px 0 28px; }
.footer-inner { display: grid; gap: 28px; }
.site-footer .logo { color: #fff; }
.footer-brand p { margin: 12px 0 0; color: #CBBDB3; max-width: 22rem; }
.footer-brand p.footer-email { margin-top: 8px; }
.site-footer .footer-email a { text-decoration: underline; text-underline-offset: 3px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer a { color: #fff; text-decoration: none; font-weight: 500; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer :focus-visible { outline-color: #fff; }
.footer-base { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.9rem; color: #CBBDB3; }
.footer-base p { margin: 0; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.footer-base a { color: #E9DFD8; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 760px) { .footer-inner { grid-template-columns: 1fr auto; align-items: start; } }

/* ---------- 404 ---------- */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 64px 0; }
.notfound .logo { margin-bottom: 2rem; }
.notfound .lead { margin-inline: auto; margin-bottom: 1.75rem; }