@charset "UTF-8";
/* ============================================================================
   Stretch to Win Canada — FST Level 1 RMT landing page
   Design deliverable. Plain CSS, no build step, no framework.

   This is the HTML transcription of the Next.js draft in src/app/page.tsx.
   Same design, same copy, same assets. It exists so the page can be built as
   custom development on Kajabi without anyone having to read React.

   HOW THIS FILE IS ORGANISED (Task 4 note: ported verbatim from the
   design repo html/assets/styles.css, then split into Sass partials that
   mirror this same outline plus the section library. See
   styles/theme.scss for the resulting import order.)
     01  tokens          _tokens.scss
     02  reset + base    \
     03  type scale       \_ _chrome.scss (shared shell + design-system base)
     04  layout            /
     05  components      /
     06  sections        one partial per named section, in page order

   Breakpoint is 768px throughout, written mobile-first. There is exactly one
   other breakpoint (1024px) and it only governs the desktop nav and the
   three-column video wall.
   ========================================================================= */
/* -------------------------------------------------------------- 01 tokens --
   Brand Kit v1.0 values. The Next.js build declared these as plain custom
   properties already, so they carry across unchanged. Do not introduce a
   colour that is not in this block. */
:root {
  /* Brand Kit v1.0 (Spring 2026) scales. Navy is the stage, teal is
     interaction, gold is prestige and scarce, warm off-white is for reading.
     Every role below resolves to one of these. Do not paint with a raw hex. */
  --navy-deep: #071A28;
  --navy-base: #0D2B3E;
  --navy-700: #11364E;
  --navy-soft: #1F4359;
  --teal-wash: #E6F4F8;
  --teal-soft: #4DB1CC; /* teal on navy, 5.9:1. teal-base is 3.4:1 there */
  --teal-base: #0387A8;
  --teal-deep: #036A85; /* teal on paper, 5.7:1 */
  --gold-wash: #FFF7E8;
  --gold-soft: #FCE6BC;
  --gold-base: #F9D083;
  --gold-deep: #E0B05F;
  --gold-hover: #FBDB99;
  --n-100: #F2F2F3;
  --n-300: #D6D7D9;
  --n-700: #5E6266;
  --n-900: #2A2E31;
  /* status. The kit permits no red and no true green. */
  --status-warning: #E0B05F;
  --status-success: #2F8F86;
  /* act one — navy */
  --stw-bg: var(--navy-deep); /* the dark act, hero and close */
  --stw-surface: var(--navy-base); /* cards on the dark act */
  --stw-surface-2: var(--navy-soft); /* video wells before the poster loads */
  --stw-fg: var(--stw-paper); /* every word on navy */
  --stw-muted: #8FA6B5; /* dimmest legible on navy, small type only */
  --stw-muted-2: #B9C9D4; /* body copy on navy */
  --stw-line: rgba(247, 245, 241, 0.16);
  /* Gold: prestige, and scarce. Nine uses on the page, every one of them
     either a CTA or the single word in a sentence that carries the payoff.
     Interaction is teal now. A tenth gold spends the other nine. */
  --stw-accent: var(--gold-base);
  --stw-accent-hover: var(--gold-hover);
  /* act two — paper */
  --stw-paper: #F7F5F1;
  --stw-ink: #14181F; /* every heading on paper */
  --stw-n700: var(--n-700); /* body copy on paper */
  --stw-line-light: rgba(20, 24, 31, 0.12);
  /* The ticks and the one cross the page draws. Neither is gold any more:
     gold now means "recommended", and a tick beside every row would spend it
     on nothing. The kit permits no red, so the negative mark is the warning
     tone rather than a red X. */
  --stw-tick: var(--status-success); /* every confirmation tick */
  --stw-cross: var(--status-warning); /* the "today" cross in the compare table */
  --stw-radius: 18px; /* every card. The pills are fully round. */
  --stw-radius-sm: 14px; /* nested surfaces: survey frame, compare rows */
  --wrap: 72rem; /* the page measure. Nothing is wider. */
  --pad: 1.25rem; /* gutter, mobile */
  --pad-md: 2.5rem; /* gutter, 768px and up */
}

/* --------------------------------------------------------- 02 reset + base */
*, *::before, *::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--stw-bg);
  color: var(--stw-fg);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

img, video {
  height: auto;
}

h1, h2, h3, p, ul, ol, figure, blockquote, dl {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Focus is a gold ring everywhere. On the paper act gold alone is faint, so it
   gains an ink hairline underneath and never disappears. */
:focus-visible {
  outline: 2px solid var(--stw-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.act--paper :focus-visible {
  outline-color: var(--stw-ink);
  box-shadow: 0 0 0 4px rgba(249, 208, 131, 0.55);
}

/* ------------------------------------------------------------ 03 type scale
   Sizes are the ones the Next.js build shipped, converted from Tailwind steps.
   Every rule with a desktop counterpart is written mobile-first, with the
   768px value in the responsive block at the end of the file. */
/* Small tracked uppercase labels. Brand Kit v1.0 permits Montserrat only and
   no monospace family, so the mono this design used to carry is gone and the
   label is tracked Montserrat SemiBold instead. Hierarchy comes from weight,
   size and casing, never from a second family. */
.label {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stw-muted-2);
}

.label--light {
  color: var(--stw-n700);
} /* the same label on the paper act */
.label--gold {
  color: var(--stw-accent);
}

.label--dim {
  color: var(--stw-muted);
}

.label--xs {
  font-size: 0.625rem;
} /* stat captions, figure keys */
.h1 {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--stw-fg);
}

.h2 {
  max-width: 48rem;
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.label + .h2 {
  margin-top: 1.5rem;
}

.h3 {
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.lead {
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--stw-muted-2);
}

.body-dim {
  color: var(--stw-muted-2);
  line-height: 1.625;
}

.body-ink {
  color: var(--stw-n700);
  line-height: 1.625;
}

.small {
  font-size: 0.875rem;
  line-height: 1.625;
}

.gold {
  color: var(--stw-accent);
}

/* The teal sibling of .gold. Gold is the payoff word; .lit is any word or
   figure the reader is meant to read as live: a data point, a ratio, a
   destination. On navy it has to be teal-soft, because teal-base is 3.4:1
   there and misses AA. */
.lit {
  color: var(--teal-soft);
}

.ink {
  color: var(--stw-ink);
}

.paper {
  color: var(--stw-fg);
}

/* ---------------------------------------------------------------- 04 layout */
/* Each modifier is self-sufficient, so `class="wrap--2xl"` alone still centres.
   Stacking `wrap wrap--2xl` also works and is the more explicit form. */
.wrap, .wrap--4xl, .wrap--3xl, .wrap--2xl, .wrap--xl {
  width: 100%;
  margin-inline: auto;
}

.wrap {
  max-width: var(--wrap);
}

.wrap--4xl {
  max-width: 56rem;
}

.wrap--3xl {
  max-width: 48rem;
}

.wrap--2xl {
  max-width: 42rem;
}

.wrap--xl {
  max-width: 36rem;
}

.center {
  text-align: center;
}

.sec {
  padding-inline: var(--pad);
}

/* The page runs in two acts. Act one is navy and argues the mechanism; act two
   is paper and answers the practical questions. The full-bleed photo band
   between them is the transition and belongs to neither. */
.act--navy {
  background: var(--stw-bg);
  color: var(--stw-fg);
}

.act--paper {
  background: var(--stw-paper);
  color: var(--stw-ink);
}

/* Anchor targets clear the sticky mobile bar. */
[id] {
  scroll-margin-top: 5rem;
}

/* The film grain this design used to lay over the dark act is gone: Brand Kit
   v1.0 runs navy as a flat stage. The wrapper stays so the stacking context
   and the z-index on its children keep working; only the texture is dropped. */
.grain {
  position: relative;
  isolation: isolate;
}

.grain::after {
  content: none;
}

.grain > * {
  position: relative;
  z-index: 1;
}

/* Card depth on the paper act: three stacked soft shadows, no border. */
.card-soft {
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.04), 0 8px 24px rgba(20, 24, 31, 0.06), 0 24px 64px rgba(20, 24, 31, 0.05);
}

.rule-top {
  border-top: 1px solid var(--stw-line);
}

.rule-top-lt {
  border-top: 1px solid var(--stw-line-light);
}

/* The three inline photographs. Fixed heights, not aspect ratios, because each
   one is a crop of a room and the subject sits mid-frame. */
.photo {
  width: 100%;
  object-fit: cover;
  border-radius: var(--stw-radius);
}

.photo--scope {
  height: 14rem;
}

.photo--kit {
  height: 16rem;
}

.photo--curric {
  height: 16rem;
  border-radius: 0;
} /* its wrapper carries the radius */
/* -- TICK LIST on the paper act. The halo and the stroke are both the kit's
      success tone. Confirmation is not a prestige signal, so it is not gold. */
.ticks > li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-top: 1px solid var(--stw-line-light);
  padding-top: 1.25rem;
}

.ticks > li + li {
  margin-top: 1.25rem;
}

.ticks svg {
  margin-top: 0.125rem;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* The payoff line under "yes, it bills like massage" — a teal rule on the left
   rather than a card, so it reads as emphasis inside the argument. */
.payoff {
  margin-top: 2.5rem;
  border-left: 2px solid var(--teal-base);
  padding-left: 1.25rem;
  font-size: 1.25rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--stw-ink);
}

/* ------------------------------------------------------------ 05 components */
/* -- pills. Two variants, and that is the whole button system.
      .pill--gold  the commitment: register, qualify. Navy on gold is 10.0:1.
      .pill--tint  the sideways step: browse cities, find a practitioner. */
.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 0.875rem 1.5rem;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.pill--gold {
  background: var(--stw-accent);
  color: #071A28;
}

.pill--gold:hover {
  background: var(--stw-accent-hover);
}

.pill--tint {
  padding-inline: 1.75rem;
  background: var(--teal-wash);
  color: var(--teal-deep); /* 5.7:1 on the wash */
}

.pill--tint:hover {
  background: #D5ECF4;
}

/* The standard-tuition button: same shape, no gold, because only one price on
   the pricing pair is the one being recommended. */
.pill--ghost {
  padding-inline: 1.75rem;
  background: rgba(3, 135, 168, 0.22); /* teal at low alpha: still a button, not the recommended one */
  color: var(--stw-fg);
}

.pill--ghost:hover {
  background: rgba(247, 245, 241, 0.2);
}

/* -- video wells.
      Poster frame until clicked, then native controls. No custom player, no
      autoplay: these are long-form testimonials and the VSL, and a viewer who
      has not chosen to watch should never hear audio. app.js swaps the state. */
.vid {
  position: relative;
  overflow: hidden;
  border-radius: var(--stw-radius);
  background: var(--stw-surface-2);
  aspect-ratio: 16/9;
}

.vid--tall {
  aspect-ratio: 9/16;
} /* the student wall is phone-shot vertical */
.vid > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vid__hit {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 26, 40, 0.15);
  transition: background-color 160ms ease;
}

.vid__hit:hover {
  background: rgba(7, 26, 40, 0.05);
}

.vid.is-playing .vid__hit {
  display: none;
}

/* No-JS fallback: the markup ships `controls` on <video> for this case (see
   scripts/theme.js section 01), but this overlay still sits on top of them
   and would swallow the click. html.no-js is removed by the first line of
   theme.js, so this only applies when JS never ran. */
.no-js .vid__hit {
  display: none;
}

.vid__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 999px;
  background: var(--teal-base);
  color: #FFFFFF;
  font-size: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  transition: transform 160ms ease;
}

.vid__hit:hover .vid__play {
  transform: scale(1.05);
}

.vid--tall .vid__play {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 0.875rem;
}

/* -- the calculator. Two sliders, four derived figures. The point is not the
      arithmetic, it is that the reader supplies their own rate and watches the
      tuition stop being abstract. app.js owns the recalculation. */
.calc {
  border-radius: var(--stw-radius);
  background: var(--stw-surface);
  padding: 1.75rem;
}

.calc__row {
  margin-top: 2rem;
}

.calc__row + .calc__row {
  margin-top: 2rem;
}

.calc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

/* Measured data: SemiBold, tracked, tabular. This is what replaced the mono
   the draft used for its figures. */
.calc__val {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--stw-fg);
  font-variant-numeric: tabular-nums; /* so the figure does not jitter as it changes */
}

.calc__out {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.calc__fig {
  margin-top: 0.5rem;
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Range inputs get the teal thumb in both engines. accent-color handles
   Firefox and modern Chromium; the -webkit- block is for older Safari. */
.calc input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin-top: 0.75rem;
  height: 4px;
  border-radius: 999px;
  background: rgba(247, 245, 241, 0.2);
  accent-color: var(--teal-base);
  cursor: pointer;
}

.calc input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--teal-base);
  border: 0;
}

.calc input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: var(--teal-base);
}

.hero__bar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem var(--pad);
}

.hero__logo {
  height: 2.25rem;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  object-position: left;
}

/* No hamburger. Below 1024px the nav is simply absent: every destination it
   holds is also reachable from the sticky bar or the body copy, so a menu
   would be a control that duplicates what is already on screen. */
.hero__nav {
  display: none;
}

.hero__nav a {
  text-decoration: none;
  transition: color 160ms ease;
}

.hero__nav a:hover {
  color: var(--teal-soft);
}

/* ---------------------------------------------------------------------
   TASK 4 ADDITION, round 1 -- not part of the ported design.

   Task 3 pulled .hero__bar out of the design source's <section
   class="hero"> and into this theme's shared shell (see the comment at
   templates/index.liquid:63-71): this theme serves two Landing Pages that
   each supply their own hero, so the nav renders once at shell level
   instead of once per hero.

   That relocation has a CSS consequence. The design rule above
   (position: relative; z-index: 10) only overlaid the hero photo because
   it was a normal-flow child stacked inside .hero's own stacking context,
   painted above the hero's absolutely-positioned photo/scrim/fade layers.
   As a shell-level sibling that now precedes <section class="hero"> in
   the DOM, position: relative no longer overlaps anything -- it just
   occupies its own space above the hero, pushing the hero photo down by
   the bar's height.

   Fix, part 1: take .hero__bar out of flow entirely and pin it to the top
   of the page. Nothing between body and .hero__bar is positioned (body
   has margin: 0 from the reset above), so its containing block is the
   initial containing block -- i.e. the same origin as the page itself,
   not a "position: fixed" viewport overlay. It scrolls away with the
   page exactly as the design's in-hero bar did; it is not a persistent
   sticky nav. Once removed from flow, whatever section renders first
   inside {% content_for_index %} (each page's own <section
   class="hero">) starts exactly where the bar would have started, so the
   bar overlays its photo precisely as in html/index.html.

   Fix, part 2 (round 1 correction -- see styles/_hero.scss for the
   matching half of this fix). Taking the bar out of flow deletes the
   space it used to reserve as an in-flow sibling of .hero__body, and
   review round 1 found that .hero__bar and .hero__body then tie at
   z-index: 10 in the SAME stacking context: .hero has position: relative
   but no z-index, so it establishes no stacking context of its own, and
   .hero__bar/.hero (siblings under body) sit in the root stacking
   context right alongside .hero__body (.hero's in-flow child, also
   z-index: 10). Equal z-index ties resolve by document order, and
   .hero__body comes later in the DOM than .hero__bar -- so without a
   fix, .hero__body's content would paint OVER the bar, the opposite of
   the design.

   min-height guarantees the bar's own rendered height rather than
   leaving it to be estimated from its content: padding (1.25rem top and
   bottom, unchanged at every breakpoint -- only padding-inline is
   overridden at 768px) plus the taller of its two visible children.
   Mobile: .hero__logo is 2.25rem/36px; the .pill--gold CTA is
   0.875rem top+bottom padding (28px) plus a used line-height of
   1.2 x 13px = 15.6px per the CSS spec for a unitless line-height, so
   ~43.6px -- the CTA is tallest, giving 20+43.6+20 = 83.6px. Desktop
   (768px+): .hero__logo grows to 2.75rem/44px, now the tallest child
   (the pill and its 1024px-only nav siblings do not grow), giving
   20+44+20 = 84px. Both round to the same buffered 5.5rem/88px --
   deliberately generous since exact glyph rendering cannot be confirmed
   without a browser (see styles/_hero.scss for that disclosure); a few
   extra pixels of clearance is a far smaller deviation than restored
   overlap would be. Declaring it here (rather than only estimating it)
   also lets styles/_hero.scss reserve the identical value for
   .hero__body's compensating padding-top, so the two halves of this fix
   are tied to one shared number instead of two independent estimates
   that merely happen to agree.

   z-index: 20 (raised from the ported 10) settles the paint order
   definitively as a second, independent guarantee: even if a future
   content change (longer nav labels, a larger user font-size override,
   unusually generous browser zoom) ever pushed .hero__body's first line
   up into the reserved band, the bar still wins the paint order rather
   than the two fixes silently depending on the spacing estimate being
   exactly right forever. */
.hero__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  min-height: 5.5rem;
}

/* -- STICKY MOBILE CTA. The ad surface that matters: paid traffic lands here
      on a phone. Desktop hides it because the hero CTA is still reachable.
      The footer carries matching bottom padding so this never covers it. */
.stickybar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  border-top: 1px solid rgba(247, 245, 241, 0.14);
  background: rgba(7, 26, 40, 0.94);
  backdrop-filter: blur(8px);
  padding: 0.75rem 1rem;
}

.stickybar__in {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stickybar__txt {
  min-width: 0;
  flex: 1;
}

.stickybar__txt p:last-child {
  font-size: 11px;
  color: var(--stw-muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stickybar a {
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--stw-accent);
  padding: 0.75rem 1rem;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #071A28;
  text-decoration: none;
}

/* -- FOOTER. */
.foot {
  border-top: 1px solid var(--stw-line);
  background: var(--stw-bg);
  color: var(--stw-fg);
  padding: 3.5rem var(--pad) 7rem; /* 7rem clears the sticky bar on mobile */
}

.foot__in {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
}

.foot__logo {
  height: 2.25rem;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  object-position: left;
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.foot__links a {
  text-decoration: none;
}

.foot__links a:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .sec {
    padding-inline: var(--pad-md);
  }
  .h1 {
    font-size: 3.1rem;
  }
  .h2 {
    font-size: 2.25rem;
  }
  .h3 {
    font-size: 1.25rem;
  }
  .hero__bar {
    padding-inline: var(--pad-md);
  }
  .hero__logo {
    height: 2.75rem;
    max-width: 210px;
  }
  .calc {
    padding: 2.25rem;
  }
  .payoff {
    font-size: 1.25rem;
  }
  .photo--scope {
    height: 16rem;
  }
  .photo--kit {
    height: 20rem;
  }
  .photo--curric {
    height: 24rem;
  }
  .foot {
    padding-inline: var(--pad-md);
    padding-bottom: 3.5rem;
  }
  .foot__in {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .stickybar {
    display: none;
  }
}
@media (min-width: 1024px) {
  .hero__nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--stw-muted-2);
  }
}
/* ---------------------------------------------------------------------
   TASK 4 ADDITION -- not part of the ported design.

   The source stylesheet carries no prefers-reduced-motion guard at all
   (its one true decorative animation -- the group rail's keyframe-driven
   ticker -- was already deleted along with the group rail in Task
   0/e766926; see the dead-rule assertions in tools/check.mjs). What remains
   are small hover/open transitions (.pill, .vid__hit, .vid__play, .hero__nav a,
   .faq__chev): none of them carry information, so under reduced motion
   they collapse to instant state changes rather than being removed. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* -- HERO. The VSL is the star and the photo is texture, not subject: it sits
      under two stacked scrims so the type never competes with it. The bottom
      of the gradient lands on flat --stw-bg so the hero dissolves into act one
      with no visible seam. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--stw-bg);
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 35%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(7, 26, 40, 0.6);
}

.hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 26, 40, 0.75) 0%, rgba(7, 26, 40, 0.55) 45%, #071A28 96%);
}

.hero__body {
  position: relative;
  z-index: 10;
  padding: 1.5rem var(--pad) 3rem;
}

.hero__eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stw-accent);
}

/* The objection the hero has to clear before anything else: an RMT reading
   "add a modality" hears "leave massage". Moved up from the 18:1 section. */
.hero__reassure {
  margin: 1.5rem auto 0;
  max-width: 36rem;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--stw-fg);
}

/* VSL and calculator side by side, per the client's 01:57 review note.
   One column until 1024px: below that, two columns leave the range sliders
   too narrow to drag accurately, which is the one control that has to work. */
.hero__grid {
  margin-top: 2rem;
  display: grid;
  gap: 1.5rem;
}

.hero__vsl {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
}

.hero__vsl > .vid {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.hero__cta {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  .hero__body {
    padding: 3rem var(--pad-md) 5rem;
  }
  .hero__eyebrow {
    font-size: 1rem;
  }
  .hero__grid {
    margin-top: 3rem;
  }
  .hero__reassure {
    font-size: 1.25rem;
  }
  .hero__cta {
    margin-top: 2.5rem;
  }
}
@media (min-width: 1024px) {
  /* The VSL takes the larger share: it is the thing the hero asks you to do
     first, and the calculator is what you turn to once it has finished. */
  .hero__grid {
    grid-template-columns: 1.3fr 1fr;
    align-items: start;
    gap: 2rem;
  }
  .hero__vsl {
    max-width: none;
  }
}
/* -- HERO CTA. The button moved out of its own centred row under the whole
      hero and into the VSL column, directly under "Watch this first", which is
      the space the review pointed at. It is still a column so it centres under
      the video; the top margin comes down because it now follows a label
      rather than a whole grid. */
.hero__cta {
  margin-top: 1.5rem;
}

/* ---------------------------------------------------------------------
   TASK 4 ADDITION, round 1 -- not part of the ported design. Pairs with
   the .hero__bar fix in styles/_chrome.scss; read that comment first.

   Taking .hero__bar out of flow (the round-1 overlay fix) deleted the
   vertical space it used to reserve as .hero__body's in-flow preceding
   sibling inside <section class="hero">. Review round 1 found that
   without replacing that space, .hero__body's own padding-top (the
   ported 1.5rem mobile / 3rem desktop) starts right at the top of
   .hero -- inside the band the bar now occupies -- so the eyebrow label
   and h1 headline render underneath, and in some cases over, the bar.

   Fix: give .hero__body a padding-top equal to the bar's guaranteed
   min-height (5.5rem, declared alongside .hero__bar in _chrome.scss) PLUS
   the section's own original top padding, so the eyebrow starts at the
   same total distance from the top of .hero as it would have if
   .hero__bar were still an in-flow sibling ahead of it:

     mobile  (< 768px): 5.5rem (bar) + 1.5rem (ported .hero__body padding-top) = 7rem
     desktop (>= 768px): 5.5rem (bar) + 3rem (ported 768px .hero__body padding-top) = 8.5rem

   .hero has no explicit height -- .hero__photo/.hero__scrim/.hero__fade
   are position: absolute; inset: 0 and simply match whatever height
   .hero__body's own padding + content produce, since .hero__body is
   .hero's one in-flow child. So this doesn't just avoid the overlap: it
   makes .hero exactly as tall as the original nested design would have
   made it (out-of-flow bar height 0 + augmented body padding ==
   in-flow bar height + original body padding), and the photo/scrim/fade
   automatically extend to cover that same, unchanged total height.

   Only padding-top is set here (a longhand override applied after the
   ported padding shorthand, at the same specificity, so it wins for just
   that one side): the ported horizontal and bottom padding are untouched.

   Not independently confirmable without a browser -- see the concern
   noted at the end of the Task 4 report -- but the arithmetic is exact:
   .hero__bar's own rendered height is no longer estimated once
   min-height guarantees it, so this offset can't drift out of sync with
   it the way two independent estimates could. */
.hero__body {
  padding-top: 7rem;
}

@media (min-width: 768px) {
  .hero__body {
    padding-top: 8.5rem;
  }
}
/* -- THE LEAD CAPTURE. A navy card on the paper act, so the one place the page
      asks for something is the one place act one reappears. The GHL survey is
      an iframe on a white ground: it renders its own light theme and would
      otherwise sit as a white slab with no corner radius. */
.apply {
  border-radius: var(--stw-radius);
  /* One step lighter than the page ground, not equal to it. This card sits
     directly under the hero, where the page is still --stw-bg, so painting it
     --stw-bg made its edges disappear and the booking block read as loose copy
     rather than as the one thing the page is asking for. Every tone on it
     clears AA on this surface: paper 13.5:1, muted-2 8.6:1, gold 10.0:1. */
  background: var(--stw-surface);
  color: var(--stw-fg);
  padding: 1.75rem;
}

.apply__frame {
  margin-top: 2rem;
  overflow: hidden;
  border-radius: var(--stw-radius-sm);
  background: #FFFFFF;
}

.apply__frame iframe {
  width: 100%;
  height: 720px;
  border: 0;
}

@media (min-width: 768px) {
  .apply {
    padding: 3rem;
  }
}
/* -- ADVISOR CALL. The lead capture reframed. It is no longer a gate the
      reader has to pass ("see if you qualify"); it is a conversation with a
      named role, and the four things that conversation gives them are stated
      before the form rather than after it. */
.advisor__gets {
  margin-top: 1.75rem;
  display: grid;
  gap: 0.875rem;
  max-width: 40rem;
}

.advisor__gets li {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.advisor__gets svg {
  margin-top: 0.2rem;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.advisor__gets span {
  font-size: 15px;
  line-height: 1.5;
  color: var(--stw-muted-2);
}

/* -- THE AUTHORITY BAND. Gold, full bleed, five figures.
      This is the one place the review overrides the kit's own instinct: gold
      is prestige and scarce, and a whole band of it is the most expensive
      thing on the page. It buys the five numbers that carry the authority
      claim, and nothing else on the page is allowed to compete with it.
      Navy on gold is 10.0:1; the captions run navy at 76% and clear 7:1. */
.authority {
  background: var(--gold-base);
  color: var(--navy-base);
}

.authority__in {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 2.5rem var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 1.25rem;
}

.authority__n {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.authority__k {
  margin-top: 0.375rem;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(13, 43, 62, 0.76);
}

@media (min-width: 768px) {
  .authority__in {
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    padding: 3.25rem var(--pad-md);
  }
  .authority__n {
    font-size: 2.5rem;
  }
}
/* -- BENEFITS. Replaces the 18:1 ratio figure, which argued that almost nobody
      leaves massage therapy. The review says that is not a live concern for
      this audience, so the space now carries the five things that are:
      longevity, the hands, a premium service, the pace of the work, and
      staying current. */
.benefits {
  margin-top: 3rem;
  display: grid;
  gap: 1.25rem;
}

.benefits__item {
  border-top: 1px solid var(--stw-line);
  padding-top: 1.25rem;
}

.benefits__n {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--stw-accent);
}

.benefits__h {
  margin-top: 0.625rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--stw-fg);
}

.benefits__p {
  margin-top: 0.5rem;
  font-size: 15px;
  line-height: 1.55;
  color: var(--stw-muted-2);
}

@media (min-width: 768px) {
  .benefits {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 2.5rem;
  }
}
/* -- NUMBERED CLAIM LIST. Used twice: the four mechanics of FST, and the five
      days. The numeral is a column, not a bullet, so the claims align. */
.claims {
  margin-top: 2.5rem;
  max-width: 48rem;
  border-top: 1px solid var(--stw-line);
  border-bottom: 1px solid var(--stw-line);
}

.claims > li {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: 1.25rem 0;
}

.claims > li + li {
  border-top: 1px solid var(--stw-line);
}

/* One of the nine surviving golds: the clause numbers in the margin. */
.claims__n {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--stw-accent);
}

.claims__t {
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--stw-fg);
}

/* -- PULL QUOTE. Real, sourced, and carried verbatim; see the comment in the
      markup naming where it came from. */
.pull {
  margin-top: 5rem;
  max-width: 56rem;
}

.pull blockquote {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.pull figcaption {
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .pull blockquote {
    font-size: 1.7rem;
  }
}
/* -- THE LEVERAGE BAND. What used to be the two-panel load diagram.
      The review: "We don't need a long explanation here. Replace/reduce this
      section and use the space for actual FST imagery showing full-body
      leverage." So the argument is now made by the photography and two lines,
      and the drawn figure is gone. */
.leverage {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
}

.leverage__art {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.leverage__art > * {
  border-radius: var(--stw-radius);
}

.leverage__lines {
  display: grid;
  gap: 1.25rem;
  align-content: center;
}

.leverage__line {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--stw-fg);
}

.leverage__line + .leverage__line {
  border-top: 1px solid var(--stw-line);
  padding-top: 1.25rem;
}

@media (min-width: 768px) {
  .leverage {
    grid-template-columns: 1.35fr 1fr;
    gap: 3rem;
    align-items: center;
  }
  .leverage__line {
    font-size: 1.375rem;
  }
}
/* -- THE ACT TRANSITION. A full-bleed photo whose gradient starts at navy and
      ends at paper, so the two acts are joined by the image rather than by a
      hard edge. Height is viewport-relative because the subject is the room,
      not any particular detail in it. */
.band {
  position: relative;
  height: 52vh;
  overflow: hidden;
  background: var(--stw-bg);
}

.band__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.band__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #071A28 0%, rgba(7, 26, 40, 0.82) 26%, rgba(7, 26, 40, 0.3) 58%, rgba(7, 26, 40, 0.3) 78%, var(--stw-paper) 100%);
}

.band__copy {
  position: absolute;
  inset-inline: 0;
  top: 0;
  padding: 2.5rem var(--pad) 0;
}

.band__copy p {
  max-width: 36rem;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--stw-fg);
}

@media (min-width: 768px) {
  .band {
    height: 62vh;
  }
  .band__copy {
    padding: 3rem var(--pad-md) 0;
  }
  .band__copy p {
    font-size: 1.5rem;
  }
}
@media (min-width: 768px) {
  .scope {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}
/* -- THE FIVE DAYS. Bookended by "before" and "after" rows so the course reads
      as longer than the week the reader is buying. */
.bookend {
  display: flex;
  gap: 1rem;
  border-top: 1px solid var(--stw-line-light);
  padding-top: 1.5rem;
}

.bookend__k {
  flex-shrink: 0;
  font-size: 11px;
}

.bookend p {
  max-width: 42rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--stw-n700);
}

.days > li {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: baseline;
  gap: 0 1rem;
  border-top: 1px solid var(--stw-line-light);
  padding: 1.75rem 0;
}

.days__n {
  font-size: 1.875rem;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--stw-ink);
}

.days p {
  margin-top: 0.5rem;
  max-width: 42rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--stw-n700);
}

@media (min-width: 768px) {
  .kit {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
  }
  .days > li {
    grid-template-columns: 110px 1fr;
    gap: 0 2.5rem;
  }
  .days__n {
    font-size: 2.25rem;
  }
}
/* -- THE MAP. "Add a map of Canada showing where FST is taught."
      Drawn from real coordinates in a Lambert conformal conic, the projection
      Canada is always drawn in; see scripts/build-canada-map.mjs. The pins are
      where the cities are, not where they looked good.

      City names are HTML chips positioned over the drawing by percentage, not
      SVG text: at 390px the map is a third of its drawn width and SVG text
      would set at 5px. Below 640px the chips are dropped and the list beneath
      carries every name. */
.map {
  margin-top: 3rem;
  display: grid;
  gap: 2rem;
}

.map__fig {
  position: relative;
}

.map__svg {
  width: 100%;
  height: auto;
}

.map__land {
  fill: rgba(3, 135, 168, 0.14);
  stroke: rgba(3, 135, 168, 0.45);
  stroke-width: 2;
}

.map__isles {
  fill: rgba(3, 135, 168, 0.07);
  stroke: rgba(3, 135, 168, 0.22);
  stroke-width: 2;
}

.map__pins circle {
  fill: var(--teal-deep);
  stroke: var(--stw-paper);
  stroke-width: 4;
}

.map__chip {
  position: absolute;
  display: none; /* chips appear at 640px; see the responsive block */
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal-deep);
}

.map__chip--r {
  transform: translate(0.9rem, -50%);
}

.map__chip--l {
  transform: translate(-100%, -50%) translateX(-0.9rem);
}

.map__chip--b {
  transform: translate(-50%, 0.7rem);
}

.map__chip--t {
  transform: translate(-50%, -100%) translateY(-0.7rem);
}

/* The list is not a legend. It is the same six cities as a readable column,
   and below 640px it is the only carrier of the names. */
.map__list {
  display: grid;
  gap: 0;
  align-content: start;
}

.map__list li {
  display: grid;
  grid-template-columns: 1.75rem 1fr auto;
  align-items: baseline;
  gap: 0.75rem;
  border-top: 1px solid var(--stw-line-light);
  padding: 0.875rem 0;
}

.map__list li:last-child {
  border-bottom: 1px solid var(--stw-line-light);
}

.map__i {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--teal-deep);
  font-variant-numeric: tabular-nums;
}

.map__city {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--stw-ink);
}

.map__prov {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stw-n700);
}

@media (min-width: 640px) {
  .map__chip {
    display: block;
  }
}
@media (min-width: 768px) {
  .map {
    grid-template-columns: 1.55fr 1fr;
    gap: 3.5rem;
    align-items: center;
  }
  .map__city {
    font-size: 1.25rem;
  }
}
/* -- STUDENT VIDEO WALL, then the message wall beneath it.
      The message wall is a CSS column flow, not a grid, because the
      screenshots have wildly different heights and a grid would letterbox
      them. break-inside stops a shot splitting across a column. */
.wall {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.wall figcaption {
  margin-top: 0.75rem;
}

.wall__q {
  font-size: 13px;
  line-height: 1.35;
  color: var(--stw-ink);
}

.shots {
  margin-top: 2rem;
  columns: 2;
  column-gap: 1rem;
}

.shots img {
  width: 100%;
  margin-bottom: 1rem;
  break-inside: avoid;
  border-radius: 0.5rem;
}

@media (min-width: 768px) {
  .wall {
    gap: 1.25rem;
  }
  .wall__q {
    font-size: 0.875rem;
  }
}
@media (min-width: 1024px) {
  .wall {
    grid-template-columns: repeat(3, 1fr);
  }
  .shots {
    columns: 3;
  }
}
/* -- COMPARE TABLE. Two readings of the same five rows.
      Mobile: each pair is one grouped card, with its own TODAY / WITH FST keys,
      because two columns at 390px would set each cell four words wide.
      Desktop: the keys move to a single header row and the pairs become one
      aligned table with a hard navy/white split down the middle. */
.compare {
  margin-top: 3rem;
  display: grid;
  gap: 0.75rem;
}

.compare__head {
  display: none;
}

.compare__row {
  display: grid;
  overflow: hidden;
  border-radius: var(--stw-radius-sm);
}

.compare__cell {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
}

.compare__cell svg {
  margin-top: 0.25rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.compare__cell--today {
  background: #FFFFFF;
}

.compare__cell--today span {
  font-size: 15px;
  line-height: 1.35;
  color: var(--stw-n700);
}

.compare__cell--fst {
  background: var(--stw-bg);
  color: var(--stw-fg);
}

.compare__cell--fst span {
  font-size: 15px;
  line-height: 1.35;
}

.compare__k {
  margin-right: 0.5rem;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.compare__k--today {
  color: var(--stw-n700);
  opacity: 0.7;
}

.compare__k--fst {
  color: var(--status-success);
}

@media (min-width: 768px) {
  /* The compare table stops being cards and becomes one aligned surface. */
  .compare {
    margin-top: 3.5rem;
    gap: 0;
    overflow: hidden;
    border-radius: var(--stw-radius);
    box-shadow: 0 1px 2px rgba(20, 24, 31, 0.04), 0 8px 24px rgba(20, 24, 31, 0.06), 0 24px 64px rgba(20, 24, 31, 0.05);
  }
  .compare__head {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .compare__head > div {
    padding: 1.25rem 2rem;
  }
  .compare__head > div:first-child {
    background: #FFFFFF;
  }
  .compare__head > div:last-child {
    background: var(--stw-bg);
  }
  .compare__row {
    grid-template-columns: 1fr 1fr;
    border-radius: 0;
    box-shadow: none;
  }
  .compare__cell {
    padding: 1.5rem 2rem;
  }
  .compare__cell span {
    font-size: 1rem;
    line-height: 1.625;
  }
  .compare__cell--fst span {
    font-weight: 300;
  }
  .compare__row + .compare__row .compare__cell--today {
    border-top: 1px solid var(--stw-line-light);
  }
  .compare__row + .compare__row .compare__cell--fst {
    border-top: 1px solid rgba(247, 245, 241, 0.12);
  }
  .compare__k {
    display: none;
  } /* the header row carries the keys from here up */
}
/* -- COMPARE TABLE: the emphasis switches sides.
      "Use yellow strategically to make important statements pop... switch the
      emphasis so the FST-focused piece is yellow." The right-hand column now
      carries the gold key and a gold edge; the left column loses its emphasis
      entirely and reads as the plain state it describes. */
.compare__k--fst {
  color: var(--stw-accent);
}

.compare__cell--fst {
  box-shadow: inset 3px 0 0 var(--stw-accent);
}

.compare__cell--fst svg path {
  stroke: var(--stw-accent);
}

@media (min-width: 768px) {
  /* The header row is inside the desktop-only .compare__head, so its gold edge
     belongs with the rest of the desktop table rules. */
  .compare__head > div:last-child {
    box-shadow: inset 3px 0 0 var(--stw-accent);
  }
}
/* -- TUITION. Early bird is navy, standard is the lighter navy surface: the
      recommended price is the darker, heavier card, and gold appears on only
      one of the two. */
.tuition {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.5rem;
}

.tuition__card {
  border-radius: var(--stw-radius);
  padding: 2.25rem;
  color: var(--stw-fg);
}

.tuition__card--early {
  background: var(--stw-bg);
}

.tuition__card--std {
  background: var(--stw-surface);
}

.tuition__price {
  margin-top: 1.5rem;
  font-size: 3.75rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* -- THE GUARANTEE. Set off by a 2px ink rule rather than a card, because it is
      the strongest claim on the page and a card would file it with the others. */
.guarantee {
  margin-top: 4rem;
  border-top: 2px solid var(--stw-ink);
  padding-top: 2.5rem;
}

.guarantee__grid {
  display: grid;
  gap: 2rem;
}

.guarantee__seal {
  width: 5rem;
  flex-shrink: 0;
}

.guarantee__seal svg {
  width: 5rem;
  height: 5rem;
}

.guarantee__claim {
  max-width: 48rem;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--stw-ink);
}

@media (min-width: 768px) {
  .tuition {
    grid-template-columns: 1fr 1fr;
  }
  .guarantee__grid {
    grid-template-columns: auto 1fr;
    gap: 3rem;
  }
  .guarantee__claim {
    font-size: 1.75rem;
  }
}
/* -- TUITION: the tax mark. The review asks for "+ tax" on every appearance of
      the price. On the tuition cards it sits against the numeral as a smaller
      superior mark rather than on its own line, so the price still reads as
      one figure. */
.tuition__tax {
  margin-left: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: 0.9rem;
  color: var(--stw-muted-2);
}

/* -- GUARANTEE headline. The claim had no heading; the review asks for one,
      and for "zero risk" language. */
.guarantee__h {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--stw-ink);
}

.guarantee__h + .guarantee__grid {
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .guarantee__h {
    font-size: 2rem;
  }
}
/* -- TEAM. Two columns of rows, not a card grid: these are credentials to be
      read, and a grid of headshot cards would invite skimming past them. */
.team {
  margin-top: 2.5rem;
  display: grid;
  gap: 0 3rem;
}

.team__row {
  display: flex;
  gap: 1.25rem;
  border-top: 1px solid var(--stw-line-light);
  padding: 1.5rem 0;
}

.team__row img {
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
  border-radius: 999px;
  object-fit: cover;
}

.team__row h3 {
  font-weight: 500;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .team {
    grid-template-columns: 1fr 1fr;
  }
}
/* -- FAQ. Native <details>. No JS, no ARIA to get wrong, and it works before
      the stylesheet loads. The marker is suppressed and replaced by a drawn
      chevron that rotates on open. */
.faq {
  margin-top: 2.5rem;
  max-width: 48rem;
  border-top: 1px solid var(--stw-line-light);
  border-bottom: 1px solid var(--stw-line-light);
}

.faq > details {
  padding: 1.5rem 0;
}

.faq > details + details {
  border-top: 1px solid var(--stw-line-light);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  line-height: 1.4;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::marker {
  content: "";
}

.faq__chev {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.25rem;
  transition: transform 200ms ease;
}

.faq > details[open] .faq__chev {
  transform: rotate(180deg);
}

.faq p {
  margin-top: 1rem;
  line-height: 1.625;
  color: var(--stw-n700);
}