/* ==========================================================================
   SECTIONS — page-level layout, in page order.
   Static first: every rule here describes the finished, no-motion state.
   Classes added by JS (.is-sequenced, .is-active …) layer the motion
   versions on top and are grouped at the end of each section.
   ========================================================================== */

/* Shared section head ---------------------------------------------------- */
.section-head { display: grid; gap: var(--space-5); margin-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.section-head .display { max-width: 16ch; }
.section-head__sub { max-width: 34ch; }
@media (min-width: 1080px) {
  .section-head--split { grid-template-columns: 1fr minmax(0, 26rem); align-items: end; column-gap: var(--space-9); }
  .section-head--split .display, .section-head--split .title { max-width: 15ch; }
}
.section-head .kicker, .how__intro .kicker, .tried__intro .kicker, .listen__copy .kicker, .faq__aside .kicker { margin-bottom: var(--space-2); }

/* ---------- 03 HERO ----------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* Round 6: tighter, and height-aware, so the call → booked line and the
     card sit inside the first screen at 1440 x 900 and 1280 x 800. */
  padding-top: clamp(5.5rem, 3rem + 4vw, 6.5rem);
  padding-bottom: clamp(1.25rem, .75rem + 1.6vw, 2rem);
}
.hero__inner { flex: 1; display: flex; flex-direction: column; }
.hero__kicker { display: flex; align-items: center; margin-bottom: clamp(1rem, .75rem + 1vw, 1.75rem); font-size: 1rem; color: var(--color-text); }
.hero__kicker .sq { border-color: var(--c-ink-600); }
.hero__title {
  /* never taller than the screen allows: 13svh caps it on short desktops */
  font-size: min(var(--text-hero), max(3rem, 13svh));
  line-height: .95;
  letter-spacing: var(--tracking-hero);
  font-weight: 350;
  max-width: 11.5em;
}
.hero__title em { color: var(--c-blue-500); font-weight: 320; }
.hero__foot {
  margin-top: auto;
  padding-top: clamp(1.5rem, .5rem + 2.4vw, 3rem);
  display: grid;
  gap: var(--space-6);
}
.hero__foot { gap: var(--space-5); }
.hero__copy { display: grid; gap: var(--space-5); max-width: 44rem; }
/* Short desktop screens (e.g. 1280 x 800, 1366 x 768): a little less air so
   the line and the card still land in the first screen. */
@media (min-width: 1080px) and (max-height: 820px) {
  .hero__copy { gap: var(--space-4); }
  .hero__foot { padding-top: 1.25rem; }
  .hero__trace { margin-top: .875rem; }
}
/* The line the gate ended on, kept and attributed: the call carries on. */
.hero__hello { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15em .6em; }
.hero__hello-who { font-size: var(--text-kicker); font-weight: 500; color: var(--color-text-muted); }
.hero__hello-q {
  font-family: var(--font-display);
  font-style: italic; font-weight: 360;
  font-size: clamp(1.1875rem, 1rem + .6vw, 1.5rem); line-height: 1.25; color: var(--color-text);
}
.hero__lead { max-width: 42ch; color: var(--color-text-soft); }
/* The outcome card: the confirmation text, and the booking it made.
   Beside the copy from 1080px; below the buttons, in the flow, under that
   (5b: it used to disappear there and leave a hole at tablet widths). */
.hero__msg {
  display: grid; gap: var(--space-3);
  width: min(100%, 22rem);
  margin-top: var(--space-3);
  padding: 1.1rem 1.1rem 1.25rem;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-line);
  border-radius: 22px;
  box-shadow: var(--shadow-3);
}
@media (min-width: 1080px) {
  .hero__foot { display: grid; grid-template-columns: minmax(0, 44rem) 21.5rem; justify-content: space-between; align-items: end; }
  .hero__msg { width: auto; margin-top: 0; }
}
/* Phones: one compact card; it keeps its pause button (it auto-advances),
   and prev/next go (they stay under reduced motion, where they are the only
   way through the examples). */
@media (max-width: 599px) {
  .hero__msg { padding: .9rem .9rem 1rem; }
  .motion-ready .hero__msg-btn[data-dir] { display: none; }
}
.hero__msg-meta { text-align: center; font-size: .75rem; font-weight: 500; color: var(--color-text-muted); }
.bubble {
  justify-self: start; max-width: 90%;
  padding: .7rem .95rem .75rem;
  background: var(--c-dawn-200);
  border-radius: 20px 20px 20px 6px;
  font-size: .9875rem; line-height: 1.4; color: var(--color-text);
}
.hero__msg-cal { display: grid; gap: .4rem; padding-top: var(--space-3); border-top: 1px solid var(--color-line-soft); }
.hero__msg-lab { font-size: .75rem; font-weight: 500; color: var(--color-text-muted); }
.hero__msg .event { box-shadow: none; background: var(--c-gold-100); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
@media (max-width: 559px) { .hero__ctas .btn { flex: 1 1 100%; } }

/* The trace: a call → dots → a booked appointment */
.hero__trace { position: relative; height: 5rem; margin-top: clamp(1rem, .25rem + 1.6vw, 2rem); }
.trace-wrap { position: relative; height: 100%; }
.trace { position: absolute; left: 0; right: 0; top: 1rem; width: 100%; height: 2rem; overflow: visible; }
.trace__line { stroke: var(--c-dawn-400); stroke-width: 1.5; }
.trace__dot, .trace__node i {
  position: absolute; top: 2rem; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border: 1.5px solid var(--c-graphite-400); background: var(--c-dawn-100);
}
.trace__dot { left: var(--x); }
.trace__node { position: absolute; top: 0; display: flex; flex-direction: column; gap: 2.75rem; }
.trace__node i { position: relative; top: auto; margin: 0; width: 14px; height: 14px; margin-top: calc(2rem - 7px); }
.trace__node--start { left: 0; }
.trace__node--start i { border-color: var(--c-ink-600); }
.trace__node--end { right: 0; align-items: flex-end; flex-direction: column-reverse; }
.trace__node--end i { border-color: var(--c-gold-400); background: var(--c-gold-400); }
.trace__label { position: absolute; top: 3.1rem; white-space: nowrap; font-size: var(--text-kicker); font-weight: 500; color: var(--color-text-muted); }
.trace__node--end .trace__label { right: 0; color: var(--c-gold-700); }
@media (max-width: 559px) {
  .trace__node--start .trace__label { width: 8.5rem; white-space: normal; }
  .trace__node--end .trace__label { width: 10rem; white-space: normal; text-align: right; }
  .trace__dot:nth-of-type(odd) { display: none; }
}

/* ---------- 03b PITCH ---------------------------------------------------- */
.pitch { padding-top: var(--section-y); padding-bottom: var(--section-y-tight); }
.pitch__inner { display: grid; gap: var(--space-6); }
.pitch__text {
  font-size: var(--text-title);
  line-height: 1.14;
  letter-spacing: var(--tracking-title);
  font-weight: 370;
  max-width: 24em;
  text-wrap: pretty;
}
.pitch__outcome { white-space: nowrap; font-style: italic; color: var(--color-outcome-large); font-weight: 360; }
.pitch__coda { color: var(--color-text); font-size: var(--text-heading); font-family: var(--font-display); font-weight: 380; }
@media (min-width: 1080px) {
  .pitch__inner { grid-template-columns: 2fr 10fr; column-gap: var(--gutter); }
  .pitch__label { padding-top: .9em; }
  .pitch__text, .pitch__coda { grid-column: 2; }
}
/* EXPLAINER (round 6): the closing line of the pitch, and a 16:9 video
   slot for the CEO's explainer. Placeholder until explainer.json has a src. */
.explainer { margin-top: clamp(4rem, 3rem + 5vw, 8rem); display: grid; gap: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.explainer__copy { display: grid; gap: var(--space-4); max-width: 52rem; }
.explainer__line {
  font-family: var(--font-display);
  font-style: italic; font-weight: 340;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 4.25rem); line-height: 1.04; letter-spacing: -.025em;
  color: var(--color-text); text-wrap: balance;
}
.explainer__sub { font-size: var(--text-lead); line-height: 1.45; color: var(--color-text-soft); max-width: 40ch; }
.explainer__frame {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  overflow: hidden; border-radius: var(--radius-lg); background: #231F20; isolation: isolate;
}
.explainer__ph {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-4);
  background:
    radial-gradient(60% 80% at 78% 18%, rgb(221 187 108 / .26), transparent 62%),
    radial-gradient(50% 60% at 18% 88%, rgb(108 155 194 / .14), transparent 70%),
    linear-gradient(150deg, #43372F 0%, #2F2724 45%, #1E1A1B 100%);
}
.explainer__ph::after { /* grain */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("../img/grain.png"); background-size: 160px 160px; opacity: .14;
}
.explainer__ph-light { position: absolute; inset: 0; }
.explainer__ph-light i { position: absolute; top: -10%; bottom: -10%; width: 9%; background: linear-gradient(180deg, rgb(247 245 239 / .09), rgb(247 245 239 / .015)); transform: skewX(-14deg); filter: blur(10px); }
.explainer__ph-light i:nth-child(1) { left: 58%; }
.explainer__ph-light i:nth-child(2) { left: 70%; width: 6%; }
.explainer__ph-light i:nth-child(3) { left: 79%; width: 11%; }
/* the glyph is a picture of a play button, not a button: no fill, no hover */
.explainer__glyph {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: clamp(4rem, 3rem + 3vw, 6rem); aspect-ratio: 1;
  border: 1.5px solid rgb(247 245 239 / .5); color: rgb(247 245 239 / .78);
}
.explainer__glyph .icon { width: 36%; height: 36%; fill: currentColor; stroke: none; margin-left: 6%; }
.explainer__soon { position: relative; z-index: 1; font-size: var(--text-small); font-weight: 500; color: var(--c-graphite-200); }
/* with a video: poster + a real play button, then the native player */
.explainer__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.explainer__play {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: var(--space-3);
  background: linear-gradient(180deg, rgb(23 20 21 / 0) 40%, rgb(23 20 21 / .5)); color: var(--c-dawn-100); cursor: pointer; border: 0;
}
.explainer__play-btn { display: grid; place-items: center; width: clamp(4rem, 3rem + 3vw, 6rem); aspect-ratio: 1; background: var(--color-accent); color: var(--color-on-accent); transition: background-color var(--dur-instant) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.explainer__play:hover .explainer__play-btn { background: var(--c-blue-900); }
.explainer__play:active .explainer__play-btn { transform: scale(.97); }
.explainer__play-btn .icon { width: 36%; height: 36%; fill: currentColor; stroke: none; margin-left: 6%; }
.explainer__play-label { font-size: var(--text-small); font-weight: 600; text-shadow: 0 1px 8px rgb(23 20 21 / .6); }
.explainer__video { position: absolute; inset: 0; width: 100%; height: 100%; background: #171415; }

/* Round 7: the line sits ON the video (>= 768px) and fades out while the
   video plays. On phones the frame is too short to carry it, so it stacks
   above the frame as before. .is-playing is set by explainer.js. */
.explainer__stage { display: grid; gap: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.explainer__stage .explainer__copy { order: -1; }
@media (min-width: 768px) {
  .explainer__stage { position: relative; gap: 0; }
  .explainer__stage .explainer__copy {
    order: 0; position: absolute; z-index: 3; left: 0; bottom: 0;
    max-width: min(62%, 46rem); padding: clamp(1.5rem, .75rem + 2.5vw, 3.5rem);
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .explainer__stage .explainer__line { color: var(--c-dawn-100); font-size: clamp(1.75rem, .9rem + 2.4vw, 3.25rem); }
  .explainer__stage .explainer__sub { color: var(--c-graphite-200); }
  /* a scrim under the words, so they read over any poster or frame */
  .explainer__frame::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(20deg, rgb(23 20 21 / .78) 0%, rgb(23 20 21 / .45) 38%, rgb(23 20 21 / 0) 66%);
    transition: opacity var(--dur-base) var(--ease-out);
  }
  /* the placeholder's glyph and the play button sit above the scrim, top-centre-right
     of the copy so the two never collide */
  .explainer__ph { place-content: center end; padding-right: 22%; }
  .explainer__play { place-content: center end; padding-right: 22%; }
  .explainer__stage.is-playing .explainer__copy { opacity: 0; transform: translateY(.75rem); }
  .explainer__stage.is-playing .explainer__frame::after { opacity: 0; }
}

/* scrubbed words (JS wraps each word in .w) */
.pitch__text .w { transition: none; }

/* ---------- 04 HOW IT WORKS --------------------------------------------- */
.how { position: relative; padding-top: var(--section-y); padding-bottom: var(--section-y-tight); }
.how__intro { display: grid; gap: var(--space-5); margin-bottom: clamp(2.5rem, 1rem + 4vw, 5rem); }
.how__intro .display { max-width: 16ch; }
/* 26 Sept (Corey): at 12ch "One booking out." couldn't fit, so it broke as
   "One / booking out." -- the second line orphaned its first word. 16ch fits
   both lines; the markup binds "One" to "booking" so a narrow phone breaks
   before "out." instead. */
.how__sub { color: var(--color-text-soft); }
.how__grid { display: grid; gap: var(--space-7); }
@media (min-width: 1080px) {
  .how__grid { grid-template-columns: 4fr 7fr; column-gap: var(--space-9); align-items: center; }
}

.how__steps { display: grid; gap: 0; }
.how__step {
  display: grid; grid-template-columns: clamp(4.5rem, 3rem + 4vw, 7.5rem) 1fr; column-gap: var(--space-4);
  padding-block: var(--space-4); border-top: 1px solid var(--color-line);
}
.how__step:last-child { border-bottom: 1px solid var(--color-line); }
/* studiors-style numerals: large, in their own column */
.how__num {
  grid-row: span 2;
  font-family: var(--font-display);
  font-weight: 300; font-size: clamp(2.75rem, 1.5rem + 4vw, 5.5rem); line-height: .85;
  letter-spacing: -.04em; font-variant-numeric: lining-nums;
  color: var(--color-accent-text);
}
.how__step[data-step="3"] .how__num { color: var(--color-outcome-text); }
.how__step-title {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.015em;
  align-self: end;
}
.how__step-title button { all: unset; cursor: pointer; padding-block: 10px; margin-block: -10px; } /* 44px target */
.how__step-title button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.how__step-body { display: grid; grid-template-rows: 1fr; }
.how__step-body > div { overflow: hidden; }
.how__step p { color: var(--color-text-soft); max-width: 38ch; padding-top: var(--space-2); }

.how__stage { position: relative; aspect-ratio: 640 / 520; width: 100%; max-width: 820px; justify-self: center; }
.how__svg { width: 100%; height: 100%; overflow: visible; }
.how__rail { display: none; }

.how__field rect { fill: none; stroke: #3A3536; stroke-width: 1; rx: 1; }
.how__cal rect { fill: none; stroke: #57524F; stroke-width: 1; rx: 3; }
.how__cal rect.is-busy { fill: #3A3536; stroke: #3A3536; }
.how__cal rect.is-open-hit { stroke: var(--c-blue-300); }
.how__cal rect.is-booked { fill: var(--c-gold-400); stroke: var(--c-gold-400); }
.how__route { stroke: var(--c-blue-300); stroke-width: 1.5; stroke-linecap: square; fill: none; }
.how__route--ghost { display: none; } /* the pre-drawn dotted route read as a schematic */
.how__route--4 { stroke: var(--c-gold-400); }
.how__node { fill: var(--c-ink-950); stroke: var(--c-blue-300); stroke-width: 1.5; rx: 2; }
.how__sq { stroke-width: 3; fill: none; }
.how__sq--in { stroke: var(--c-blue-300); fill: var(--c-blue-300); }
.how__sq--out { stroke: var(--c-gold-400); fill: var(--c-gold-400); }
.how__ring { fill: none; stroke: var(--c-blue-200); stroke-width: 1.5; opacity: 0; }

.how__card {
  position: absolute;
  display: grid; gap: .3rem;
  padding: .7rem .9rem .8rem;
  background: var(--c-ink-900);
  border: 1px solid var(--c-ink-700);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  font-size: .875rem;
  line-height: 1.35;
}
.how__card .label { font-size: .8125rem; }
.how__card-main { color: var(--c-dawn-100); }
.how__card--call { left: 1%; top: 56.5%; max-width: 36%; }
.how__card--quote { left: 1%; top: 0; max-width: 46%; }
.how__card--quote .how__card-main { font-family: var(--font-display); font-size: 1.0625rem; font-style: italic; }
.how__card--sms { right: 0; top: 79%; max-width: 34%; border-color: rgb(201 154 52 / .45); }
.how__card--sms .label { color: var(--c-gold-200); }
.how__tags { position: absolute; left: 22.5%; top: 27%; display: grid; gap: .4rem; justify-items: start; }
.how__tags li {
  /* soft chips, not code tokens */
  font-family: var(--font-text); font-size: .8125rem; font-weight: 500;
  padding: .3rem .6rem; border-radius: var(--radius-sm);
  background: var(--c-ink-800); color: var(--c-dawn-100);
}
.how__cal-labels { position: absolute; left: 0; right: 0; top: 73.4%; height: 1rem; } /* under the calendar, clear of the route */
.how__cal-labels span {
  position: absolute; left: calc(46.875% + var(--c) * 5.3125%); transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .6875rem; color: var(--c-graphite-300);
}
.how__cal-labels span.is-hit { color: var(--c-blue-200); }
.how__outcome { position: absolute; left: 84.5%; top: 41%; color: var(--c-gold-200); font-size: var(--text-kicker); font-weight: 500; }
.how__caption { display: none; }
@media (max-width: 799px) {
  /* On small screens the callouts would be unreadably small; the step text
     carries the same words, so the stage becomes pure diagram. */
  .how__card, .how__tags, .how__outcome { display: none; }
  .how__cal-labels span { font-size: .75rem; }
}

/* sequenced (pinned) version */
.how.is-sequenced { padding-bottom: var(--section-y-tight); }
.how.is-sequenced .how__pin { height: 100svh; display: flex; align-items: center; }
.how.is-sequenced .how__pin > .container { width: 100%; }
/* One step at a time: inactive steps keep only their title (dimmed by
   COLOUR so they still pass 4.5:1 on Night) and fold their body away. */
.how.is-sequenced .how__step-title, .how.is-sequenced .how__num { transition: color var(--dur-base) var(--ease-out); }
.how.is-sequenced .how__step:not(.is-active) .how__step-title { color: var(--c-graphite-300); }
.how.is-sequenced .how__step:not(.is-active) .how__num { color: #7A7F87; }
.how.is-sequenced .how__step-body { transition: grid-template-rows 450ms var(--ease-expo); }
.how.is-sequenced .how__step:not(.is-active) .how__step-body { grid-template-rows: 0fr; }
@media (min-width: 1080px) {
  .how.is-sequenced .how__stage { width: min(100%, calc(78svh * 640 / 520)); }
}
@media (max-width: 1079px) {
  .how.is-sequenced .how__grid { gap: var(--space-4); }
  .how.is-sequenced .how__stage { width: 100%; justify-self: stretch; }
  .how.is-sequenced .how__steps { display: grid; order: 2; }
  .how.is-sequenced .how__stage { order: 1; }
  .how.is-sequenced .how__caption { order: 1; }
  /* One cell for all four steps (sized to the tallest), and a sequenced
     swap: the old step leaves in 150ms, the new one arrives 60ms later. */
  .how.is-sequenced .how__step { grid-area: 1 / 1; opacity: 0; visibility: hidden; border: 0; transition: opacity 150ms var(--ease-out), visibility 0s linear 150ms; }
  .how.is-sequenced .how__step.is-active { opacity: 1; visibility: visible; transition: opacity 250ms var(--ease-out) 210ms, visibility 0s linear 0s; }
  .how.is-sequenced .how__step:not(.is-active) .how__step-body,
  .how.is-sequenced .how__step.is-active .how__step-body { grid-template-rows: 1fr; transition: none; }
}
@media (max-width: 799px) {
  /* P1-5: tighter crop of the diagram (viewBox set in how.js), a 4-part
     progress rail, and one caption line that carries each step's payoff. */
  .how.is-sequenced .how__stage { aspect-ratio: 600 / 360; }
  .how.is-sequenced .how__rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; position: absolute; left: 0; right: 0; top: -14px; }
  .how__rail i { height: 2px; background: var(--c-ink-700); transition: background-color var(--dur-base) var(--ease-out); }
  .how__rail i.is-on { background: var(--c-blue-300); }
  .how__rail i.is-gold { background: var(--c-gold-400); }
  .how.is-sequenced .how__caption {
    display: flex; height: 4.75rem; align-items: flex-start; overflow: hidden;
  }
  .how__caption-in {
    display: inline-block; padding: .6rem .85rem; border-radius: 14px 14px 14px 4px;
    background: var(--c-ink-800); border: 1px solid var(--c-ink-700);
    font-size: .9375rem; line-height: 1.35; color: var(--c-dawn-100);
  }
  .how__caption.is-sms .how__caption-in { margin-left: auto; border-radius: 14px 14px 4px 14px; background: var(--c-dawn-100); color: var(--c-ink-900); border-color: var(--c-dawn-100); }
  .how.is-sequenced .how__num { font-size: 2.75rem; }
}

/* ---------- 05 MATH ------------------------------------------------------ */
.math { padding-block: var(--section-y); }
.math .display { max-width: 13ch; }
.math__grid { display: grid; gap: var(--space-8); }
@media (min-width: 1080px) {
  .math__grid { grid-template-columns: 5fr 7fr; column-gap: var(--space-9); align-items: start; }
  .math .kpi { position: sticky; top: 7rem; }
}
/* Business type: a row of pill-shaped radio buttons above the sliders. */
.calc__type { border: 0; padding: 0; margin: 0 0 var(--space-7); min-width: 0; }
html:not(.js) .calc__type { display: none; }
.calc__type-legend { font-family: var(--font-ui); padding: 0; margin-bottom: var(--space-3); font-size: var(--text-small); font-weight: 500; color: var(--color-text-muted); }
.calc__types { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.calc__types label { position: relative; }
.calc__types input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.calc__types span { font-family: var(--font-ui);
  display: inline-flex; align-items: center; min-height: 2.75rem; /* 44px touch target */
  padding: 0 var(--space-4); border: 1px solid var(--color-line); border-radius: 999px;
  font-size: var(--text-small); font-weight: 500; color: var(--color-text); background: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.calc__types label:hover span { border-color: var(--color-accent); }
.calc__types input:checked + span { background: var(--color-accent); border-color: var(--color-accent); color: var(--c-dawn-50); }
.calc__types input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.calc__note { margin-top: var(--space-8); color: var(--color-text-muted); max-width: 40ch; font-size: var(--text-small); padding-top: var(--space-5); border-top: 1px solid var(--color-line); }

/* ---------- 06 PHONES ---------------------------------------------------- */
.phones { padding-block: var(--section-y); }
.phones__player { display: grid; gap: var(--space-6); }
.phones__stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: var(--space-5);
  min-height: min(clamp(28rem, 22rem + 14vw, 36rem), calc(100svh - 14rem)); /* leave room for the timeline above it on short screens */
  padding: clamp(2rem, 1rem + 4vw, 4rem) var(--space-5);
  background: var(--color-bg-raised);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.phones__stage::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--c-dawn-400) 1px, transparent 1.5px);
  background-size: 32px 32px; background-position: 16px 16px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 45%, #000, transparent 85%);
  mask-image: radial-gradient(60% 60% at 50% 45%, #000, transparent 85%);
  pointer-events: none;
}
.phones__art { position: relative; width: clamp(220px, 26vw, 360px); aspect-ratio: 1; }
.phone-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: var(--c-ink-900); stroke-width: 1.4; stroke-linecap: butt; stroke-linejoin: miter;
  opacity: 0; visibility: hidden;
}
.phone-art .dots { stroke-width: 5; stroke-linecap: square; }
/* Caps are butt while a line is drawing or un-drawing: a zero-length dash
   with a square cap still paints a small tick (round-2 P0-2). Once a phone
   has fully drawn it gets .is-drawn and its square caps back. */
.phone-art.is-drawn { stroke-linecap: square; }
.phone-art--mark, .phone-art--mark.is-drawn { stroke-linecap: butt; } /* the logo's own caps */
.phones__count, .phones__tag { position: absolute; top: var(--space-5); z-index: 1; }
.phones__count { left: var(--space-5); font-variant-numeric: tabular-nums; }
.phones__tag { right: var(--space-5); }
@media (max-width: 559px) { .phones__tag { display: none; } }
.phone-art.is-active { opacity: 1; visibility: visible; }
.phone-art--mark { inset: auto; left: -10%; top: 20%; width: 120%; max-width: none; height: 60%; overflow: visible; } /* max-width: none, or the global svg { max-width: 100% } caps it at 100% and it sits 10% left */
.phone-art--mark .pm-body { stroke: var(--c-ink-900); stroke-width: 4; }
.phone-art--mark .pm-ai { fill: var(--c-ink-900); stroke: none; }
.phone-art--mark .pm-nodes { stroke: var(--c-blue-500); stroke-width: 4; }
.phone-art--mark .pm-out { stroke: var(--c-gold-400); fill: var(--c-gold-400); stroke-width: 4; }
/* "Now" ends like the intro gate (29 Sept): the logo lands at rest (blue
   squares, ink AI), then a gold call line draws through it on its centre
   axis. Each part turns gold as the head of the line reaches it: left
   square (outline), left dash, the AI, right dash, and the right square
   fills (answered). Classes set by js/phones.js; the colours match the
   gate's in components.css. Without JS the logo shows finished, as before. */
.phone-art--mark .pm-out.is-rest { stroke: var(--c-blue-500); fill: transparent; }
.phone-art--mark .pm-nodes > .is-gold { stroke: var(--c-gold-400); }
.phone-art--mark .pm-ai.is-lit { fill: var(--c-gold-400); }
.phone-art--mark :is(.pm-nodes > *, .pm-ai, .pm-out) { transition: fill var(--dur-fast) ease-out, stroke var(--dur-fast) ease-out; } /* --dur-fast is 1ms under reduced motion */
.phones__call { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.phones__call-line { fill: none; stroke: var(--c-gold-400); stroke-linecap: butt; } /* width set in px by phones.js: the logo's line weight */
/* static default: the last one (Now) shows */
.phones:not(.is-interactive) .phone-art[data-i="5"] { opacity: 1; visibility: visible; }
.phones__caption { position: relative; text-align: center; display: grid; gap: .35rem; }
.phones__era { color: var(--color-accent-text); }
.phones__name { font-family: var(--font-display); font-size: var(--text-title); font-weight: 380; line-height: 1.05; letter-spacing: -.02em; }
.phones__note { color: var(--color-text-muted); }
.phones__stage.is-now .phones__note { color: var(--color-outcome-text); font-weight: 500; }
.phones__play { position: relative; margin-top: var(--space-3); }
.phones__play .icon { fill: currentColor; stroke-width: 1.5; }
.phones:not(.is-interactive) .phones__play { display: none; }

/* The timeline sits above the stage: its rule is along the bottom, and the
   active era's bar sits on that rule, pointing down at the picture. */
.phones__timeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--color-line); }
.phones__timeline li { position: relative; }
.phones__timeline button {
  position: relative;
  display: grid; gap: .25rem; width: 100%;
  padding: var(--space-2) var(--space-3) var(--space-4) 0;
  text-align: left;
  border-radius: 0;
}
.phones__timeline button::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-expo);
}
.phones__timeline button[aria-current="true"]::before { transform: scaleX(1); }
.phones__timeline li.is-now button::before { background: var(--color-outcome); }
.phones__timeline .phones__t-name { font-weight: 600; font-size: var(--text-small); }
.phones__timeline .phones__t-note { font-size: .8125rem; color: var(--color-text-muted); }
.phones__timeline button:hover .phones__t-name { color: var(--color-accent-text); }
@media (max-width: 799px) {
  .phones__timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-3); }
  .phones__timeline .phones__t-note { display: none; }
}

/* WIDE SCREENS: timeline down the left, stage on the right, both on one
   screen (29 Sept; Option 1 of the mockups). The stage is sized to the
   viewport so the whole player fits under the header. The era and name
   are already in the timeline, so the big caption under the picture is
   hidden visually but kept for screen readers (it is the aria-live line
   that announces each phone). 1024px is also WIDE in js/phones.js. */
@media (min-width: 1024px) {
  .phones__player { grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); align-items: stretch; }
  .phones__timeline {
    grid-template-columns: 1fr; align-content: center;
    border-bottom: 0; border-left: 1px solid var(--color-line);
  }
  .phones__timeline button { gap: .15rem; padding: .8rem 0 .8rem 1.25rem; }
  /* the active era's bar now sits on the left rule, pointing at the picture */
  .phones__timeline button::before {
    left: -1px; right: auto; top: 0; bottom: 0; width: 2px; height: auto;
    transform: scaleY(0); transform-origin: top;
  }
  .phones__timeline button[aria-current="true"]::before { transform: scaleY(1); }
  /* quieter eras step back by colour, not opacity, so every label keeps
     its contrast (muted text still passes 4.5:1) */
  .phones__timeline li:not(.is-now) button:not([aria-current="true"]) .phones__t-name { color: var(--color-text-muted); font-weight: 500; }
  .phones__timeline li:not(.is-now) button:not([aria-current="true"]):hover .phones__t-name { color: var(--color-accent-text); }
  .phones__stage { min-height: 30rem; height: calc(100svh - 11rem); max-height: 44rem; }
  .phones__art { width: min(26vw, 360px, calc(100svh - 20rem)); min-width: 220px; }
  .phones__caption {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

/* ---------- 07 TRIED (round 5: studiors-style rail) ---------------------
   One markup, three presentations:
   - PHONES (< 768px), any motion setting: stacked scenes. Each item is a
     tall card with its own background (video or designed fallback) and the
     numeral, title and "And then" line over a dark scrim.
   - WIDE + STATIC (>= 768px, reduced motion or no JS): a plain numbered
     list, every item at full strength. No backgrounds, nothing moves.
   - WIDE + MOTION (.is-pinned, set by tried.js): the stage pins for
     PIN_PER_SCENE of a screen per scene. A big numbered rail 01-07 scrolls
     through a fixed reading line; the active item is full strength with its
     "And then" line, the rest dim. Its scene fills the stage behind
     everything and crossfades; only that scene's video plays.
   "And then" is blue ink, not clay, and never underlined (it is not a link).
   Dimmed rail text is #8A8F97, 5.0:1 on Ink, still AA for text. */
.tried { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.tried__intro { display: grid; gap: var(--space-5); margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.tried__intro .display { max-width: 20ch; }
.tried__intro .display em { color: var(--c-graphite-200); }
.tried__bg, .tried__scrim, .tried__meter { display: none; }
.tried__list { display: grid; gap: var(--space-4); }
.tried__item { position: relative; }
.tried__num {
  font-family: var(--font-display);
  font-weight: 300; line-height: .9; letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--c-dawn-100);
}
.tried__title {
  font-family: var(--font-display);
  font-size: var(--text-heading); font-weight: 400; line-height: 1.15; letter-spacing: -.015em;
  max-width: 22ch;
}
.tried__then { margin-top: var(--space-3); color: var(--color-text-soft); font-size: 1.0625rem; line-height: 1.45; max-width: 40ch; }
.tried__and {
  color: var(--c-blue-300); text-decoration: none;             /* blue ink on dark, never a link */
  font-style: italic; font-family: var(--font-display);
  font-size: 1.05em; margin-right: .1em;
}

/* The scene background: designed fallback (grain, big icon, slow ambient
   light) with an optional video on top. Used by every presentation that
   shows a background. */
.tried__media {
  position: absolute; inset: 0; z-index: 0;
  aspect-ratio: auto; border-radius: inherit;
  background:
    radial-gradient(60% 55% at 12% 100%, rgb(201 154 52 / .06), transparent 60%),
    linear-gradient(160deg, #2A2526 0%, #1D191A 60%, #171415 100%);
}
.tried__media::before {           /* grain */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("../img/grain.png"); background-size: 160px 160px;
  opacity: .12; /* plain alpha, not a blend mode: a blended layer re-composites every frame (5b) */
}
.tried__fb {
  position: absolute; inset: 0; display: grid; place-items: center end; padding-right: 8%; color: rgb(143 176 204 / .22);
  /* the ambient light rides on this layer; it drifts by transform only
     (composited), so it never repaints the stage */
  background: radial-gradient(70% 60% at 78% 30%, rgb(108 155 194 / .16), transparent 65%);
}
.tried__fb .icon { width: min(46vmin, 26rem); height: min(46vmin, 26rem); stroke-width: .6; }
.tried__media video { z-index: 2; }
.tried__media.has-poster .tried__fb, .tried__media.is-playing .tried__fb { opacity: 0; }
/* The ambient drift runs only where a fallback is actually on show: never
   behind footage (a poster or a playing clip), and on the pinned stage only
   on the active layer (5b). It moves by transform, never by repainting. */
@media (prefers-reduced-motion: no-preference) {
  .tried__media:not(.has-poster, .is-playing) .tried__fb { animation: tried-drift 18s var(--ease-in-out) infinite; will-change: transform; }
  .tried.is-pinned .tried__bg .tried__media:not(.is-active) .tried__fb { animation: none; will-change: auto; }
}
/* Footage carries its own grain: no blended grain layer on top of it. */
.is-tried-on .grain { visibility: hidden; } /* the page grain too, while the stage is pinned (tried.js) */
.tried__media.has-poster::before, .tried__media.is-playing::before { display: none; }
@keyframes tried-drift { 50% { transform: translate3d(-5%, 7%, 0) scale(1.06); } }

/* PHONES: stacked scenes, each with its own background. */
@media (max-width: 767px) {
  .tried__list { gap: var(--space-4); }
  .tried__item {
    display: grid; align-content: end; gap: var(--space-3);
    min-height: clamp(22rem, 90vw, 30rem);
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
  }
  .tried__item::after {            /* scrim: text sits on ~Night, AA */
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgb(23 20 21 / .15) 0%, rgb(23 20 21 / .78) 48%, rgb(23 20 21 / .94) 100%);
  }
  .tried__fb { place-items: start end; padding: 12% 10% 0 0; }
  .tried__fb .icon { width: 44vw; height: 44vw; }
  .tried__num, .tried__text { position: relative; z-index: 2; }
  .tried__num { font-size: clamp(3.5rem, 2.5rem + 6vw, 5rem); }
}

/* WIDE + STATIC: a numbered list. */
@media (min-width: 768px) {
  .tried:not(.is-pinned) .tried__media { display: none; }
  .tried:not(.is-pinned) .tried__list { gap: 0; border-bottom: 1px solid var(--color-line); }
  .tried:not(.is-pinned) .tried__item {
    display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: var(--space-6); align-items: baseline;
    padding-block: var(--space-6); border-top: 1px solid var(--color-line);
  }
  .tried:not(.is-pinned) .tried__num { font-size: clamp(3.25rem, 2rem + 3vw, 5rem); }
  .tried:not(.is-pinned) .tried__text { display: grid; gap: var(--space-2) var(--space-7); }
  .tried:not(.is-pinned) .tried__then { margin: 0; }
}
@media (min-width: 1080px) {
  .tried:not(.is-pinned) .tried__text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; }
}

/* WIDE + MOTION: the pinned stage. */
.tried.is-pinned { padding-bottom: 0; }
.tried.is-pinned .tried__stage {
  position: relative; height: 100svh; overflow: hidden;
  background: var(--c-ink-950);
}
.tried.is-pinned .tried__bg { display: block; position: absolute; inset: 0; z-index: 0; }
.tried.is-pinned .tried__bg .tried__media {
  /* Fade out, THEN stop painting it at all (visibility flips after the fade). */
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-in-out), visibility 0s linear var(--dur-slow);
}
.tried.is-pinned .tried__bg .tried__media.is-active {
  opacity: 1; visibility: visible;
  transition: opacity var(--dur-slow) var(--ease-in-out), visibility 0s linear 0s;
}
.tried.is-pinned .tried__scrim {
  display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Round 6, directional: dark only behind the text column (stops in rem
     from the page margin, because the column has a fixed measure), then
     clearing across the right side so the footage reads bright and in full
     colour there. Measured on the brightest frames of the real clips (see
     site-log, Round 6): all rail text stays AA. */
  background:
    linear-gradient(90deg,
      rgb(23 20 21 / .93) 0,
      rgb(23 20 21 / .9) calc(var(--margin) + 50rem),   /* the text column ends here at every width */
      rgb(23 20 21 / .45) calc(var(--margin) + 58rem),
      rgb(23 20 21 / .08) calc(var(--margin) + 70rem),
      rgb(23 20 21 / 0) 100%);
}
.tried.is-pinned .tried__rail { position: relative; z-index: 2; height: 100%; }
/* The rail fades out under two fixed bands instead of a mask-image on the
   moving rail (a mask re-composited the whole rail on every scroll frame). */
.tried.is-pinned .tried__stage::before,
.tried.is-pinned .tried__stage::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none;
}
.tried.is-pinned .tried__stage::before { top: 0; height: 30%; background: linear-gradient(180deg, var(--c-ink-900) 0%, var(--c-ink-900) 9%, rgb(35 31 32 / 0) 100%); }
.tried.is-pinned .tried__stage::after { bottom: 0; height: 26%; background: linear-gradient(0deg, var(--c-ink-900) 0%, var(--c-ink-900) 15%, rgb(35 31 32 / 0) 100%); }
.tried.is-pinned .tried__list { display: block; max-width: min(100%, 50rem); will-change: transform; }
.tried.is-pinned .tried__item {
  display: grid; grid-template-columns: 1.35em minmax(0, 1fr); column-gap: .35em; align-items: start;
  font-size: clamp(3.5rem, 1rem + 6vw, 8rem);               /* the numeral sets the em */
  padding-block: .12em;
}
.tried.is-pinned .tried__media { display: none; }           /* the copies in the rail; the stage has its own */
.tried.is-pinned .tried__bg .tried__media { display: block; }
.tried.is-pinned .tried__num { font-size: 1em; transition: color var(--dur-base) var(--ease-out); }
.tried.is-pinned .tried__text { font-size: 1rem; padding-top: .6rem; }
.tried.is-pinned .tried__title { font-size: clamp(1.5rem, .9rem + 1.4vw, 2.25rem); line-height: 1.08; max-width: none; transition: color var(--dur-base) var(--ease-out); }
.tried.is-pinned .tried__then {
  font-size: clamp(1.0625rem, .95rem + .35vw, 1.3125rem); color: var(--c-dawn-100); max-width: 46ch;
  opacity: 0; transform: translateY(.4rem);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.tried.is-pinned .tried__item:not(.is-active) .tried__num,
.tried.is-pinned .tried__item:not(.is-active) .tried__title { color: #8A8F97; }
.tried.is-pinned .tried__item:not(.is-active) .tried__num { color: #7A7677; } /* large numerals: >= 3.3:1 even over a white frame through the scrim */
.tried.is-pinned .tried__item.is-active .tried__then { opacity: 1; transform: none; }
/* Even rows: every row reserves exactly two lines for its "And then" line
   (the longest is two lines from 768px up), so a hidden consequence never
   leaves a bigger gap than a short one, and the active line never runs into
   the next row (5b: the earlier absolute line overlapped at 768-1440). */
@media (min-width: 768px) {
  .tried.is-pinned .tried__then { min-height: calc(2em * 1.45); }
}

.tried.is-pinned .tried__meter {
  display: flex; align-items: center; gap: var(--space-4);
  /* it sits over the bright side now: its own quiet dark backing */
  padding: .55rem .9rem; border-radius: 999px; background: rgb(23 20 21 / .78);
  position: absolute; z-index: 4; right: var(--margin); bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
  color: var(--c-dawn-100);
}
.tried__count b { font-weight: inherit; color: var(--c-dawn-100); }
.tried__count { color: #8A8F97; }
.tried__progress { position: relative; display: block; width: clamp(6rem, 4rem + 6vw, 11rem); height: 2px; background: rgb(247 245 239 / .16); }
.tried__progress i { position: absolute; inset: 0; background: var(--c-blue-300); transform-origin: left; transform: scaleX(0); }

/* How it works, closing beat: hear it for yourself (the voice-over player). */
.how__listen {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center;
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}
.how__listen-copy { display: grid; gap: var(--space-3); }
.how__listen-title {
  font-family: var(--font-display);
  font-size: var(--text-title); font-weight: 380; line-height: 1.08; letter-spacing: var(--tracking-title);
  max-width: 14ch;
}
.how__listen-sub { color: var(--color-text-soft); }
@media (min-width: 1080px) { .how__listen { grid-template-columns: 4fr 7fr; column-gap: var(--space-9); } }

/* ---------- 08 LISTEN ---------------------------------------------------- */
.listen { padding-block: var(--section-y-tight); }
.listen__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.listen__copy { display: grid; gap: var(--space-5); }
.listen__copy .display { max-width: 10ch; }
@media (min-width: 1080px) { .listen__grid { grid-template-columns: 5fr 7fr; column-gap: var(--space-9); } }

/* ---------- 13 CONTACT (round 6) ---------------------------------------- */
.contact { padding-block: var(--section-y); }
.contact__grid { display: grid; gap: var(--space-8); }
.contact__intro { display: grid; gap: var(--space-5); align-content: start; }
.contact__intro .title { max-width: 12ch; }
.contact__lead { max-width: 30ch; }
.contact__privacy { font-size: var(--text-small); color: var(--color-text-muted); max-width: 36ch; }
.contact__privacy a { color: var(--color-accent-text); }
.contact__panel {
  padding: clamp(1.25rem, .75rem + 2vw, 2.5rem);
  background: var(--color-bg-raised); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
@media (min-width: 1080px) {
  .contact__grid { grid-template-columns: 5fr 7fr; column-gap: var(--space-9); align-items: start; }
  .contact__intro { position: sticky; top: 7rem; }
}

/* ---------- CALENDAR EVENT (the booking a call becomes) ---------------- */
/* A tiny calendar event: booked is an outcome, so a gold edge. */
.event {
  display: inline-flex; flex-wrap: wrap; gap: .15em .6em; align-items: baseline;
  padding: .45rem .7rem .5rem .75rem;
  background: var(--color-bg-raised);
  border-left: 3px solid var(--c-gold-400);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-small); color: var(--color-text);
  box-shadow: var(--shadow-1);
}
.event__t { font-family: var(--font-mono); font-size: .8125rem; color: var(--color-outcome-text); }

/* ---------- 10 SETUP + PRICE --------------------------------------------- */
.setup { padding-block: var(--section-y); }
.setup .display { max-width: 14ch; }
.setup__steps { display: grid; gap: var(--space-7) var(--gutter); counter-reset: s; }
@media (min-width: 800px) { .setup__steps { grid-template-columns: repeat(3, 1fr); } }
.setup__step { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.setup__num { color: var(--color-accent-text); }
.setup__title { font-family: var(--font-display); font-size: var(--text-heading); font-weight: 400; line-height: 1.15; letter-spacing: -.015em; }
.setup__step p { color: var(--color-text-soft); max-width: 34ch; }

.price {
  margin-top: clamp(4rem, 3rem + 4vw, 7rem);
  display: grid; gap: var(--space-6);
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  background: var(--color-bg-raised);
  border-radius: var(--radius-lg);
}
.price__title { font-family: var(--font-display); font-size: var(--text-title); font-weight: 380; line-height: 1.08; letter-spacing: -.02em; margin-top: var(--space-3); max-width: 14ch; }
.price__list { display: grid; gap: var(--space-5); }
.price__list div { display: grid; gap: var(--space-1); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.price__list dt { font-weight: 600; }
.price__list dd { color: var(--color-text-soft); max-width: 36ch; }
.price__cta { justify-self: start; }
@media (min-width: 1080px) {
  .price { grid-template-columns: 5fr 5fr 2fr; column-gap: var(--space-8); align-items: end; }
  .price__cta { justify-self: end; }
}

/* ---------- 11 FAQ ------------------------------------------------------- */
.faq { padding-block: var(--section-y); }
.faq__grid { display: grid; gap: var(--space-7); }
.faq__aside { display: grid; gap: var(--space-4); align-content: start; }
.faq__aside .title { max-width: 11ch; }
.faq__more { color: var(--color-text-muted); }
.faq__more a { color: var(--color-accent-text); }
@media (min-width: 1080px) {
  .faq__grid { grid-template-columns: 5fr 7fr; column-gap: var(--space-9); }
  .faq__aside { position: sticky; top: 7rem; align-self: start; }
}

/* ---------- 12 CTA + FOOTER ---------------------------------------------- */
.cta { padding-top: var(--section-y); padding-bottom: clamp(4rem, 3rem + 5vw, 8rem); overflow: hidden; }
.cta__inner { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
.cta__mark { display: flex; align-items: center; width: min(100%, 22rem); }
.cta__sq { width: 18px; height: 18px; border: 3px solid var(--c-dawn-100); flex: none; }
.cta__sq--out { border-color: var(--c-gold-400); background: var(--c-gold-400); }
.cta__line { flex: 1; height: 1.5px; background: rgb(247 245 239 / .35); transform-origin: left; }
.cta__title {
  font-size: clamp(2.75rem, 1rem + 6.6vw, 7.75rem);
  line-height: .96; letter-spacing: var(--tracking-hero); font-weight: 350;
  max-width: 13em;
}
.cta__title em { color: var(--c-graphite-200); }
.cta__row { display: grid; gap: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-line); }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
@media (min-width: 1080px) { .cta__row { grid-template-columns: 1fr auto; align-items: center; } }

.footer { padding-bottom: var(--space-6); border-top: 1px solid var(--color-line); }
.footer__grid { display: grid; gap: var(--space-7) var(--gutter); padding-top: var(--space-8); padding-bottom: var(--space-8); }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer__logo { width: 210px; height: auto; }
.footer__tag { margin-top: var(--space-4); color: var(--color-text-muted); max-width: 30ch; font-size: var(--text-small); }
.footer__col ul { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.footer__col ul { gap: 0 !important; }
.footer__col a { display: inline-block; padding-block: .6rem; text-decoration: none; color: var(--color-text-soft); font-size: var(--text-small); }
.footer__col a:hover { color: var(--color-text); text-decoration: underline; }
.footer__base { display: flex; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.hero__title:focus { outline: none; }
/* How it works, finished state (static / reduced motion): the blue route has
   done its job and rests neutral; only gold touches gold. */
.how:not(.is-sequenced) .how__route--1,
.how:not(.is-sequenced) .how__route--2,
.how:not(.is-sequenced) .how__route--3 { stroke: #57524F; }
.how:not(.is-sequenced) .how__node:not(.how__node--out) { stroke: #57524F; }
.how__node--out { stroke: var(--c-gold-400); }
.how.is-sequenced .how__node--out { stroke: var(--c-blue-300); }

/* Math on phones: the answer stays in view while you drag (P1-6). The tile
   rides along the bottom of the screen in a compact form. */
@media (max-width: 799px) {
  .math .kpi {
    position: sticky; bottom: 12px; z-index: var(--z-sticky);
    padding: 1rem 1.25rem; gap: .35rem;
    box-shadow: var(--shadow-3);
  }
  .math .kpi__value { font-size: calc(3rem * var(--kpi-fit, 1)); }
  .math .kpi__weeks { display: none; }
  .math .kpi__foot { font-size: .875rem; }
  .math__grid { gap: var(--space-6); }
}
@media (max-width: 799px) {
  /* the mobile crop (viewBox 20 90 600 360) moves the day labels */
  .how.is-sequenced .how__cal-labels { top: 80%; }
  .how.is-sequenced .how__cal-labels span { left: calc(46.67% + var(--c) * 5.667%); }
}
.faq__aside .nw, .title .nw { white-space: normal; } /* guard: narrow columns may break bound pairs */
@media (min-width: 1080px) { .cta__actions { justify-content: flex-end; } }

/* Phones, motion version: one line that morphs from phone to phone. */
.phones.is-morph .phone-art:not(.phone-art--mark) { display: none; }
.phone-morph {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: var(--c-ink-900); stroke-width: 1.4;
  stroke-linecap: butt; stroke-linejoin: miter;
}
.phone-morph__line.is-drawn { stroke-linecap: square; }
.phone-morph__dots path { stroke-width: 5; stroke-linecap: square; }

/* ---------- HERO LOOP (round 5) -------------------------------------------
   The confirmation card cycles through four businesses as a pulse runs the
   line below. All four cards share one grid cell, so the card is always as
   tall as the tallest one: nothing jumps. */
.hero__msg-stack { display: grid; }
/* From 1200px the headline ends well left of the card, so the card may rise
   beside it instead of making the hero taller: without this the four-card
   stack pushed the trace (and the loop's pulse) below the fold at 1440 x 900. */
@media (min-width: 1200px) {
  /* Round 6: the card is anchored to the bottom of the copy and rises beside
     the headline as far as it needs, so it never makes the hero taller. */
  .hero__foot { position: relative; }
  .hero__msg { position: absolute; right: 0; bottom: 0; width: 21.5rem; margin: 0; }
}
.hero__card { grid-area: 1 / 1; display: grid; gap: var(--space-3); align-content: start; }
.hero__card:not(.is-active) { visibility: hidden; opacity: 0; }
.js.motion-ready .hero__card { transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
.js.motion-ready .hero__card.is-active { transition: opacity var(--dur-base) var(--ease-out) 120ms, visibility 0s linear 0s; }
.hero__msg-from { font-size: .75rem; font-weight: 600; color: var(--color-text-soft); }
.mail { display: grid; gap: .3rem; padding: .8rem .95rem .9rem; background: var(--c-dawn-50); border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.mail__from { font-size: .8125rem; font-weight: 600; color: var(--color-text); }
.mail__subj { font-size: .8125rem; color: var(--color-text-muted); }
.mail__body { font-size: .9375rem; line-height: 1.4; color: var(--color-text); padding-top: .35rem; border-top: 1px solid var(--color-line-soft); }
.hero__msg-ctrl { display: flex; align-items: center; gap: .35rem; padding-top: var(--space-3); border-top: 1px solid var(--color-line-soft); }
.hero__msg-btn {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none;
  border: 1px solid var(--color-line); border-radius: var(--radius-sm); color: var(--color-text-soft);
  transition: border-color var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out);
}
.hero__msg-btn:hover { border-color: var(--color-text); color: var(--color-text); }
.hero__msg-btn .icon { width: .95rem; height: .95rem; }
.hero__msg-btn[data-dir="-1"] .icon { transform: rotate(180deg); }
.hero__msg-count { margin-left: auto; font-size: .75rem; font-weight: 500; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* the pulse that runs the line */
.trace__pulse {
  position: absolute; top: 2rem; left: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: var(--color-text); opacity: 0; pointer-events: none;
}
.trace__dot.is-lit { border-color: var(--color-text); background: var(--color-text); }
.trace__dot { transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.trace__node--end i { transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.trace__node--end.is-waiting i { background: var(--c-dawn-100); border-color: var(--c-ink-600); }

/* ==========================================================================
   TYPE — Montserrat + Lora (the site's one pairing, chosen by Corey at launch)
   The families, weights, sizes and tracking are tokens (tokens.css). These
   rules set WHICH elements take which role, because the section styles above
   were written with their own weights:
   - Montserrat: headings and display, numerals, AND the interface (nav,
     buttons, kickers, form labels, the message mock-ups).
   - Lora: running text (the body default), and the italic accents in
     headlines.
   - JetBrains Mono: data (times, eras, durations).
   `:root` in front raises each rule by one class-level step, so it wins over
   the weight a section rule sets, without !important.
   ========================================================================== */
/* Headings, display and numerals: Montserrat, heavier. */
:root :is(.display, .title, .hero__title, .cta__title, .pitch__text, .pitch__coda,
  .gate__prompt, .gate__reply, .hero__hello-q, .how__step-title, .how__listen-title,
  .phones__name, .tried__title, .setup__title, .price__title, .accordion__item summary, .form__done-title,
  .ds-face__big, .ds-stagger-lines, .ds-ground__name, .ds-family__head h3) {
  font-weight: 600;
}
:root :is(.display, .hero__title, .cta__title) { font-weight: 640; }
:root .hero__title { line-height: 1; }
:root .hero__lead { font-size: clamp(1.0625rem, .95rem + .4vw, 1.3125rem); line-height: 1.42; }
/* Montserrat's headline is wide: below 1280px the hero card stays in its
   column instead of rising beside it. */
@media (min-width: 1200px) and (max-width: 1279px) { :root .hero__msg { position: static; } }

:root .pitch__text { font-weight: 500; }
:root :is(.kpi__value, .slider__val, .how__num, .tried__num, .ds-dash__num, .ds-pair__ratio) {
  font-weight: 500; letter-spacing: -.04em;
}
:root .tried.is-pinned .tried__item { font-size: clamp(3rem, 1rem + 5vw, 6.5rem); grid-template-columns: 1.5em minmax(0, 1fr); }
/* Italic accents: Lora italic. */
:root :is(.display, .title, .hero__title, .cta__title, .phones__name, .price__title,
  .how__listen-title, .pitch__text) em,
:root :is(.hero__hello-q, .tried__and, .how__card--quote .how__card-main, .pitch__outcome, .explainer__line, .ds-it) {
  font-family: var(--font-text); font-style: italic; font-weight: 500; letter-spacing: -.01em;
}
/* The interface: Montserrat. The phone and email mock-ups count as
   interface (a real text message is never set in a book face). */
:root :is(.nav, .btn, .kicker, .skip-link, button, input, select, textarea, label,
  .hero__msg, .hero__hello-who, .btn-note, .trace__label, .bubble, .mail, .how__card, .how__tags li,
  .event, .gate__status, .gate__hint, .footer, .ds-top) {
  font-family: var(--font-ui);
}
:root .kicker { letter-spacing: 0; }

/* ---------- HERO: THE CONFIRMATION, ON A REAL PHONE (28 Sept 2026) --------
   Every screen: the card shows each example as it really arrives (the exact
   text or email the system sends) and the slice of the business's calendar
   the booking lands in. Wide screens (1280px+): a photo of a hand holding a
   phone bleeds off the right edge, the message is drawn ON its screen
   (js/hero-phone.js maps it to the photo's perspective), and the card
   becomes the floating calendar + controls. The card stays the readable,
   controllable version everywhere; the phone is decorative (aria-hidden).
   Photo: Ekaterina Bolovtsova, Pexels (Pexels licence), cut out 28 Sept.
   Appointment dates roll forward: see rollHeroDates() in js/hero-phone.js. */

/* The calendar slice (all widths) */
.hero__msg-cal { display: grid; gap: .5rem; padding-top: var(--space-3); border-top: 1px solid var(--color-line-soft); }
.day__h { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin: 0; font-size: .75rem; color: var(--color-text-muted); }
.day__h b { font-weight: 600; color: var(--color-text); }
.day__date { font-size: .6875rem; white-space: nowrap; }
.day { position: relative; height: 133px; margin-left: 2.75rem;
  background: repeating-linear-gradient(to bottom, var(--color-line-soft) 0 1px, transparent 1px 44px); }
.day__hours i { position: absolute; left: -2.75rem; width: 2.3rem; text-align: right; font-style: normal;
  font-size: .6875rem; color: var(--color-text-muted); white-space: nowrap; transform: translateY(-.55em); }
.day__evs { position: absolute; inset: 1px 0 0 4px; overflow: hidden; }
.day__ev { position: absolute; left: 0; right: 0; margin: 0; overflow: hidden;
  padding: .3rem .55rem; border-radius: 6px; font-size: .72rem; line-height: 1.3; }
.day__ev--busy { background: var(--c-dawn-200); color: var(--color-text-soft); }
.day__ev--busy b { font-weight: 500; }
.day__ev--new { background: var(--c-gold-100); border-left: 3px solid var(--c-gold-400); color: var(--color-text); }
.day__ev--new b { display: block; font-weight: 600; }
.day__t { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.day__ev--new .day__t { color: var(--color-outcome-text); }
.day__new { float: right; margin: 0 0 0 .4rem; padding: 1px 6px; border-radius: 999px;
  background: var(--color-bg-raised); font-size: .625rem; font-weight: 600; color: var(--color-outcome-text); }
.mail__att { display: flex; align-items: center; gap: .4rem; justify-self: start; margin-top: .35rem;
  padding: .35rem .55rem; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-bg-raised); font-size: .75rem; }
.mail__att .icon { width: .95rem; height: .95rem; color: var(--c-blue-500); }
.mail__att span { color: var(--color-accent-text); font-weight: 600; }

/* The phone (wide screens only) */
.hero-phone { display: none; }
@media (min-width: 1280px) {
  .hero { overflow: hidden; }
  .hero__kicker, .hero__title, .hero__copy, .hero__trace { position: relative; z-index: 1; }
  .hero__foot {
    --pw: min(38vw, 680px, 60svh);            /* the photo's width; its height is 1.3275x */
    --bleed: calc((100% - 100vw) / 2 - 8vw);  /* from the container edge to past the screen edge */
    --lift: -1.25rem;
  }
  .hero-phone {
    display: block; position: absolute; z-index: 0; margin: 0; pointer-events: none;
    width: var(--pw); right: var(--bleed); bottom: var(--lift);
  }
  .hero-phone__img { display: block; width: 100%; height: auto;
    filter: drop-shadow(0 24px 30px rgba(60, 45, 20, .2)) drop-shadow(0 2px 4px rgba(0, 0, 0, .1)); }
  /* The card: now the business's calendar, floating over the phone's lower-left. */
  :root .hero__msg {
    position: absolute; z-index: 2; margin: 0; width: 19rem; padding: .85rem .9rem .9rem;
    /* Tucked into the phone's lower-left: the screen is tilted, so that corner
       is photo (fingers, bezel), not message. */
    right: calc(var(--bleed) + var(--pw) * .6);
    bottom: calc(var(--lift) + var(--pw) * 1.3275 * .05);
  }
  /* The message itself is on the phone: kept for screen readers, not drawn twice. */
  .hero__msg-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero__msg-cal { padding-top: 0; border-top: 0; }
}

/* The phone's screen: drawn flat at 300 x 680, then mapped onto the photo. */
.hero-phone__screen { position: absolute; left: 0; top: 0; width: 300px; height: 680px; transform-origin: 0 0;
  background: #fff; border-radius: 34px; overflow: hidden; color: #1b1b1b; font-family: var(--font-ui); visibility: hidden; }
.hero-phone__screen.is-placed { visibility: visible; }
.hero-phone__view { position: absolute; inset: 0; opacity: 0; }
.hero-phone__view.is-active { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .hero-phone__view { transition: opacity .45s var(--ease-out, ease); } }
.ph__sb { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px 0 34px; font-size: 13px; font-weight: 600; }
.ph__sig { display: inline-flex; align-items: flex-end; gap: 2px; }
.ph__sig i { width: 3px; background: #1b1b1b; border-radius: 1px; }
.ph__sig i:nth-child(1) { height: 5px; } .ph__sig i:nth-child(2) { height: 7px; } .ph__sig i:nth-child(3) { height: 9px; }
.ph__sig b { width: 20px; height: 9px; margin-left: 5px; border: 1.5px solid #1b1b1b; border-radius: 3px; box-shadow: inset -6px 0 0 #fff, inset 0 0 0 1px #fff; background: #1b1b1b; }
.ph__th { display: grid; justify-items: center; gap: 5px; padding: 14px 0 12px; border-bottom: 1px solid #ececec; }
.ph__av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #d6d0c4; color: #fff; font-weight: 600; font-size: 16px; }
.ph__av--sm { width: 34px; height: 34px; font-size: 12px; flex: none; }
.ph__nm { margin: 0; font-size: 13px; font-weight: 600; text-align: center; }
.ph__nm span { display: block; font-weight: 400; font-size: 11px; color: #8a8a8a; }
.ph__ts { margin: 16px 0 8px; text-align: center; font-size: 11px; color: #8a8a8a; }
.ph__ts b { font-weight: 600; }
.ph__bb { margin: 0 14px; max-width: 232px; padding: 11px 14px; border-radius: 20px 20px 20px 6px; background: #e9e9eb; font-size: 15.5px; line-height: 1.36; }
.ph__back { margin: 6px 16px 10px; font-size: 13px; color: var(--c-blue-500); }
.ph__subj { margin: 0 16px 14px; font-size: 17px; font-weight: 600; line-height: 1.25; }
.ph__from { display: flex; align-items: center; gap: 9px; margin: 0 16px 12px; }
.ph__from p { margin: 0; font-size: 12.5px; font-weight: 600; }
.ph__from span { display: block; font-weight: 400; font-size: 11px; color: #8a8a8a; }
.ph__mail { margin: 0 16px; font-size: 12.5px; line-height: 1.45; color: #333; }
.ph__in { display: block; margin: 0 0 10px; padding-left: 10px; border-left: 2px solid #e2dccf; font-weight: 600; color: #1b1b1b; }
.ph__att { display: flex; align-items: center; gap: 8px; margin: 14px 16px 0; padding: 9px 11px; border: 1px solid #e3e3e3; border-radius: 10px; font-size: 11px; color: #777; }
.ph__att .icon { width: 20px; height: 20px; color: var(--c-blue-500); flex: none; }
.ph__att b { display: block; font-size: 12px; color: #1b1b1b; }