/*
 * HERO: full-bleed night scene, promise column, combined session card, and the
 * recording lightbox. One module for the folder; hero-section.tsx,
 * session-card.tsx and recording-lightbox.tsx all read from here.
 *
 * Colors: --c-* tokens for brand values; the rgba() literals are alpha scrim
 * composites over the night photo (allowed literal per the landing
 * conventions). Gold only ever sits on the dark scene, never on cream.
 */

/* ── Section shell + night scene ─────────────────────────────────────────── */

.hero-section_hero__GuqY0 {
  position: relative;
  background: var(--c-navy);
  overflow: hidden;
  isolation: isolate;
}

.hero-section_scene__lAG7X {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-section_sceneImage__iZJ5y {
  object-fit: cover;
}

/* Horizontal scrim: keeps the copy column legible over the illustration. */
.hero-section_scrimCopy__Iqzbb {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(11, 18, 25, 0.62) 0%,
    rgba(11, 18, 25, 0.5) 34%,
    rgba(11, 18, 25, 0.3) 62%,
    rgba(11, 18, 25, 0.18) 100%
  );
}

/* Vertical scrim: darkens the y=0 band behind the fixed transparent nav and
   reaches solid navy at the floor so the next section seams cleanly. */
.hero-section_scrimVertical__ZxL_h {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(11, 18, 25, 0.55) 0%,
    rgba(11, 18, 25, 0.2) 14%,
    transparent 28%,
    transparent 48%,
    rgba(11, 18, 25, 0.35) 74%,
    rgba(11, 18, 25, 0.82) 90%,
    var(--c-navy) 100%
  );
}

.hero-section_heroGlow__1bbLp {
  top: -140px;
  left: 22%;
  width: 760px;
  height: 560px;
  z-index: 1;
}

.hero-section_heroFireflyA__kE2gy {
  left: 30%;
  top: 34%;
  z-index: 1;
}

.hero-section_heroFireflyB__pWxez {
  left: 58%;
  top: 22%;
  z-index: 1;
}

.hero-section_heroFireflyC__4FN5P {
  left: 44%;
  top: 54%;
  z-index: 1;
}

.hero-section_heroFireflyD__j6ES8 {
  left: 74%;
  top: 40%;
  z-index: 1;
}

/* ── Layout grid ─────────────────────────────────────────────────────────── */

.hero-section_grid___STPG {
  position: relative;
  z-index: 2;
  display: grid;
  /* min(340px, 100%) so a 360px viewport (340 + 64px padding) cannot
     overflow horizontally. */
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 48px 56px;
  align-items: center;
  /* 44px of visual air below the fixed nav, whatever height the nav +
     announcement banner currently add up to. */
  padding-top: calc(var(--nav-height) + 44px);
  padding-bottom: 64px;
}

/* ── Left column: the promise ────────────────────────────────────────────── */

.hero-section_promise__gaycv {
  max-width: 600px;
  /* The price row's divider has to disappear when the COLUMN is too narrow to
     keep that row on one line. Viewport width is the wrong proxy: the grid
     goes two-column at 800px, which drops this column from 600px to 340px,
     so a viewport-width guard leaves the divider stranded at the end of a
     wrapped line between 800 and 809px. Making the column a container lets
     the guard key off the thing that actually causes the wrap. */
  container-type: inline-size;
}

.hero-section_heading___sn0U {
  font-family: var(--font-heading);
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.08;
  color: var(--c-text);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  text-wrap: pretty;
  text-shadow: 0 2px 6px rgba(11, 18, 25, 0.85), 0 4px 22px rgba(11, 18, 25, 0.6);
}

/* Credibility line under the heading. Sits at body size, not heading size:
   it supports the h1 rather than competing with it. */
.hero-section_subline__vSC1A {
  font-size: 16.5px;
  line-height: 1.6;
  font-weight: 400;
  /* 0.9 rather than the mockup's 0.82: this is the smallest body text over the
     busiest part of the illustration, and the extra opacity removes the tail
     of pixels that fell under AA where a firefly drifts behind a glyph. The
     difference is imperceptible on cream over a night scene. */
  color: rgba(245, 240, 234, 0.9);
  max-width: 460px;
  margin-bottom: 20px;
  text-shadow: 0 2px 6px rgba(11, 18, 25, 0.85), 0 4px 22px rgba(11, 18, 25, 0.6);
}

.hero-section_sublineStrong__7frnC {
  font-weight: 600;
  color: var(--c-text);
}

.hero-section_lead__5Wd6H {
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-text);
  max-width: 540px;
  margin-bottom: 16px;
  text-shadow: 0 1px 4px rgba(11, 18, 25, 0.9), 0 2px 14px rgba(11, 18, 25, 0.7);
}

/* The six steps read as one journey, so a hairline rail joins the dots.
   Drawn as one connector PER GAP, on each step except the last, rather than
   as a single line down the list. A single line has to be inset from the
   list's bottom edge, but the last dot sits on that step's FIRST line, so any
   step that wraps pushes the list's bottom past the dot and the rail runs on
   into empty space: measured 25px past it at every phone width and again at
   800-1119px, 47px at 320px. Each connector instead spans dot-centre to
   dot-centre (9.5px down from its own step's top, to 11px of gap plus 9.5px
   into the next), which is fixed however many lines either step occupies.
   The per-step alphas below reproduce the original top-to-bottom fade, which
   a single gradient can no longer provide once the line is segmented. */
.hero-section_benefits__zE7nM {
  position: relative;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-width: 540px;
  margin-bottom: 30px;
}

.hero-section_benefit__Hqdcg:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 9.5px;
  bottom: -20.5px;
  width: 1px;
  background: rgba(221, 184, 74, 0.55);
}

.hero-section_benefit__Hqdcg:nth-child(2)::before {
  background: rgba(221, 184, 74, 0.46);
}
.hero-section_benefit__Hqdcg:nth-child(3)::before {
  background: rgba(221, 184, 74, 0.37);
}
.hero-section_benefit__Hqdcg:nth-child(4)::before {
  background: rgba(221, 184, 74, 0.28);
}
.hero-section_benefit__Hqdcg:nth-child(5)::before {
  background: rgba(221, 184, 74, 0.19);
}

.hero-section_benefit__Hqdcg {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.5;
  /* Same reason as .subline: nudged up from the mockup's 0.88. */
  color: rgba(245, 240, 234, 0.94);
  text-shadow: 0 1px 4px rgba(11, 18, 25, 0.9);
}

.hero-section_benefitDot__6eWJo {
  position: absolute;
  left: 2px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-gold);
  /* Halo so the dot reads against the illustration, not just the scrim. */
  box-shadow: 0 0 0 3px rgba(221, 184, 74, 0.22);
}

.hero-section_ctaRow__Kz9sq {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.hero-section_primaryCta__ZswA6 {
  text-decoration: none;
}

.hero-section_watchCta__AR_8w {
}

/* The badge brings its own disc; this only nudges it against the label. */
.hero-section_watchCtaBadge__oNiPK {
  margin-right: 2px;
}

/* Price row: the amount leads, the trial terms sit beside it behind a rule.
   Wraps to two lines on narrow phones, where the divider would sit at a line
   end, so it is hidden there rather than dangling. */
.hero-section_priceRow__Q0stX {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  text-shadow: 0 1px 4px rgba(11, 18, 25, 0.9);
}

.hero-section_priceAmount__PmC_x {
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--c-text);
  white-space: nowrap;
}

.hero-section_pricePeriod__fHVwS {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(245, 240, 234, 0.8);
}

.hero-section_priceDivider__gZe2z {
  width: 1px;
  height: 18px;
  background: rgba(251, 248, 242, 0.3);
  /* Baseline-aligned flex item: nudge so the rule straddles the x-height
     rather than hanging below it. */
  transform: translateY(3px);
}

.hero-section_priceTrial__fW1yK {
  font-size: 13.5px;
  color: rgba(245, 240, 234, 0.86);
  white-space: nowrap;
}

.hero-section_mission__HTWev {
  font-size: 13.5px;
  color: rgba(245, 240, 234, 0.78);
  max-width: 500px;
  padding-top: 22px;
  border-top: 1px solid rgba(251, 248, 242, 0.26);
  line-height: 1.7;
  text-shadow: 0 1px 4px rgba(11, 18, 25, 0.9);
}

/* The row needs ~345px to stay on one line. Below that the divider would be
   left dangling at the end of a wrapped line, so it goes; the 12px gap still
   separates the amount from the trial terms. 360px leaves margin for font
   loading and rounding. */
@container (max-width: 360px) {
  .hero-section_priceDivider__gZe2z {
    display: none;
  }
}

/* ── Right column: session card ──────────────────────────────────────────── */

.hero-section_cardColumn__a7_OS {
  justify-self: end;
  width: 100%;
  max-width: 460px;
}

.hero-section_card__ZV7Ae {
  width: 100%;
  background: rgba(11, 18, 25, 0.62);
  border: 1px solid rgba(251, 248, 242, 0.22);
  border-radius: 22px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 30px 64px -32px rgba(0, 0, 0, 0.7);
}

.hero-section_recordingButton__gv47A {
  display: block;
  width: 100%;
  position: relative;
  height: 214px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: filter 0.18s ease;
}

.hero-section_recordingButton__gv47A:hover {
  filter: brightness(1.06);
}

/* Inset outline so the ring is not clipped by the card's overflow: hidden. */
.hero-section_recordingButton__gv47A:focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: -3px;
}

.hero-section_posterImage__2Aryh {
  object-fit: cover;
}

.hero-section_posterScrim__bTBLC {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(11, 18, 25, 0.1) 0%,
    rgba(11, 18, 25, 0.35) 52%,
    rgba(11, 18, 25, 0.86) 100%
  );
}

.hero-section_recordingChip__TPm7a {
  position: absolute;
  top: 14px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text);
  background: rgba(11, 18, 25, 0.6);
  border: 1px solid rgba(251, 248, 242, 0.28);
  border-radius: 999px;
  padding: 5px 11px;
}

/* Placement only: PlayBadge owns the disc, triangle, shadow and hover grow.
   The translate has to be re-declared in the hover rule below because the
   badge's own scale() would otherwise replace it. */
.hero-section_playCircle__EJmSj {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
}

.hero-section_recordingButton__gv47A:hover .hero-section_playCircle__EJmSj {
  transform: translate(-50%, -50%) scale(1.06);
}

.hero-section_recordingText__3wM_4 {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  display: block;
}

.hero-section_recordingTitle__Ysn3s {
  display: block;
  font-family: var(--font-heading);
  font-size: 19px;
  line-height: 1.25;
  color: var(--c-text);
  margin-bottom: 4px;
}

.hero-section_recordingMeta__6up86 {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(245, 240, 234, 0.72);
}

/* Bottom block: next live session (or the none-state). */

.hero-section_sessionBlock__KM7KA {
  padding: 20px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(251, 248, 242, 0.16);
}

.hero-section_badgeRow__lucml {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Design's #e8b038 amber dot maps to the gold token; the alpha halo stays
   literal (scrim composite). */
.hero-section_badgeDot__7y_a3 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 4px rgba(232, 176, 56, 0.22);
  flex-shrink: 0;
}

.hero-section_badgeLabel__iWzth {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.hero-section_sessionTitle__ZPP2p {
  font-family: var(--font-heading);
  font-size: 21px;
  line-height: 1.22;
  color: var(--c-text);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.hero-section_sessionWhen__56qVA {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--c-text);
}

.hero-section_sessionDesc__BXMOx {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245, 240, 234, 0.78);
  /* Short block: balance the line lengths. The page default (pretty) only
     pulls one word down, which still left a 380/50 split here. Measured on
     production, where this element renders only when a real session exists:
     balance gives 199/231. */
  text-wrap: balance;
}

.hero-section_sessionCtaRow__5saSn {
  margin-top: 4px;
}

.hero-section_sessionCta__4_SFE {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-gold);
  border: 1px solid rgba(221, 184, 74, 0.55);
  border-radius: 999px;
  padding: 10px 20px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.hero-section_sessionCta__4_SFE:hover {
  background: rgba(221, 184, 74, 0.14);
  border-color: var(--c-gold);
}

.hero-section_sessionCta__4_SFE:focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: 3px;
}

.hero-section_notifyLine__YA7eL {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245, 240, 234, 0.78);
}

.hero-section_notifyLink__QCXnh {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  text-decoration: none;
}

.hero-section_notifyLink__QCXnh:hover {
  text-decoration: underline;
}

.hero-section_notifyLink__QCXnh:focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: 3px;
}

/* ── Recording lightbox ──────────────────────────────────────────────────────
 * The DS Dialog.Content is restyled into the design's full-screen backdrop
 * (the design's dialog IS the backdrop, with a 960px inner wrapper). Doubled
 * selectors outrank the DS single-class .content rules regardless of CSS
 * bundle order. */

.hero-section_lightboxContent__o0Ayx.hero-section_lightboxContent__o0Ayx {
  top: 0;
  left: 0;
  transform: none;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  background: rgba(6, 10, 14, 0.88);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 32px;
  display: flex;
  font-family: var(--font-body);
  color: var(--c-text);
  animation: hero-section_heroLightboxIn__lYuor 0.2s ease both;
}

@keyframes hero-section_heroLightboxIn__lYuor {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* margin: auto centers in both axes AND keeps the top reachable when the
   flex container has to scroll (align-items: center would clip it). */
.hero-section_lightboxInner__uTRtx {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: auto;
}

.hero-section_lightboxHead__AZohh {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.hero-section_lightboxChip__xVHm3 {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 6px;
}

.hero-section_lightboxTitle__X9lHo.hero-section_lightboxTitle__X9lHo {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--c-text);
  margin: 0;
}

.hero-section_lightboxActions__F2ywp {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-section_lightboxWatchLink__giUEa {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text);
  text-decoration: none;
  padding: 9px 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.hero-section_lightboxWatchLink__giUEa:hover {
  text-decoration: underline;
}

.hero-section_lightboxWatchLink__giUEa:focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: 2px;
}

.hero-section_lightboxClose__AzjhQ {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text);
  background: rgba(251, 248, 242, 0.1);
  border: 1px solid rgba(251, 248, 242, 0.32);
  border-radius: 999px;
  padding: 9px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease;
}

.hero-section_lightboxClose__AzjhQ:hover {
  background: rgba(251, 248, 242, 0.2);
}

.hero-section_lightboxClose__AzjhQ:focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: 2px;
}

.hero-section_lightboxFrame__yFHIj {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-navy);
  border: 1px solid rgba(251, 248, 242, 0.2);
  border-radius: 14px;
  overflow: hidden;
}

.hero-section_lightboxIframe__bjBVL {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 640px) {
  .hero-section_lightboxContent__o0Ayx.hero-section_lightboxContent__o0Ayx {
    padding: 16px;
  }
}

/*
 * Challenger founder ("04 So we built Nari"), per the extracted design spec.
 * Cream ground (#f5f2eb maps to --cream). Px values are the spec's, used
 * literally, matching the control's practice. Colors use the exact DS token
 * where one exists (#1B0F33 --light-head, #64822C --green, the artifact's
 * moss green; --moss itself holds #13170d and is NOT that green) and keep
 * the spec's untokened literals verbatim (#fffdf8 card white, #3c3a35 body,
 * #6b6560 credit, the rgba(45,74,50,.15) card border). The eyebrow uses
 * --wood-oak, the declared AA substitute on light grounds for the artifact's
 * #b98a1f, because it is text; the quote's left border keeps #b98a1f, because
 * a border is not text and the substitution does not reach it.
 *
 * Lora loads weights 400 and 500 only: headings are 500, the quote italic
 * is 400. Body copy inherits DM Sans 300, so no font-family is set on it.
 *
 * The bear illustration is in flow as the split block's second column, so
 * growth in the artwork can only push the row taller, never paint over the
 * quote (the bottom-anchor rule, in-flow form).
 */

.founder-section_founder__ds51G {
  background: var(--cream);
  padding: 92px 0;
}

.founder-section_inner__yP0AL {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-7);
}

.founder-section_intro__sEH7p {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.founder-section_eyebrow__J0mfu {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wood-oak);
  /* The artifact's global body line-height; nari-web declares none, so an
   * omitted line-height falls to normal (about 1.25). Every challenger
   * eyebrow carries it explicitly so the six sections match. */
  line-height: 1.6;
  /* 16px is the artifact's eyebrow-to-heading gap in every section. */
  margin: 0 0 16px;
}

.founder-section_heading__A9KKA {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.2;
  color: var(--light-head);
  text-wrap: balance;
  margin: 0;
}

.founder-section_cards__bo3CI {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 14px;
  margin: 36px 0 0;
  padding: 0;
}

/* The shared card recipe: card white, moss-tinted hairline, radius 14. */
.founder-section_card__awvrx {
  background: #fffdf8;
  border: 1px solid rgba(45, 74, 50, 0.15);
  border-radius: 14px;
  padding: 24px 26px;
}

.founder-section_cardTitle__Xg5xt {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  /* The artifact leaves card h3s at the inherited 1.6; the port's 1.3 cost
   * about 5px a row and lifted everything pinned below it. */
  line-height: 1.6;
  color: var(--light-head);
  text-wrap: balance;
  margin: 0 0 9px;
}

.founder-section_cardBody__aZeIh {
  font-size: 14px;
  line-height: 1.65;
  color: #3c3a35;
  margin: 0;
}

/* The mono "included" footer that sat under each card body is GONE by owner
   direction: her mockup has no footer row and her supplied copy carries no
   tag. Nothing became less honest by removing it, card two names weekly
   office hours only, and the pricing section still states the paid extras. */

.founder-section_split___ycxo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1.5fr));
  gap: 48px;
  align-items: center;
  margin-top: 64px;
}

.founder-section_story__ude9o {
  min-width: 0;
}

.founder-section_affordLead__MH54v {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.25;
  color: var(--light-head);
  text-wrap: balance;
  margin: 0;
}

.founder-section_affordBody__8ZvM6 {
  font-size: 16px;
  line-height: 1.7;
  color: #3c3a35;
  max-width: 600px;
  margin: 18px 0 0;
}

.founder-section_quote__I0Cqc {
  /* The artifact's #b98a1f, kept literal. The AA substitution to --wood-oak
   * applies to TEXT only; this 3px rule is a non-text border, and every
   * other non-text artifact color on the page stays literal. */
  border-left: 3px solid #b98a1f;
  padding: 4px 0 4px 20px;
  margin: 26px 0 0;
  max-width: 560px;
}

.founder-section_quoteText__oqR_c {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--light-head);
  margin: 0;
}

.founder-section_attribution__PHsBp {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6560;
  margin-top: 12px;
}

/* FRAMED per the owner's mockup, where the bear sits on a deeper cream panel
   rather than bare on the section ground. The frame is what lets the artwork
   be CONTAINED instead of cropped: the asset is 1008x563 with a transparent
   background, and `cover` at a fixed height was cutting the bear's paws and
   the lantern off at the panel edge. Contained on a matching panel, the whole
   drawing reads and the transparency composites onto the panel, not onto a
   hard edge. */
.founder-section_art__hF5qk {
  min-width: 0;
  background: var(--cream-dark);
  border-radius: 16px;
  padding: 18px;
}

/* No fixed height and no object-fit: the panel hugs the artwork. A fixed
   320px box was width-limited at this column size, so the drawing rendered
   262px tall inside it and sat in 58px of letterbox with the frame drawn
   around the empty part too. Intrinsic height cannot crop and cannot pad. */
.founder-section_artImage__yWhmS {
  display: block;
  width: 100%;
  height: auto;
}

/* The module's shared breakpoint: single-column stacks, tighter gutters.
 * The quote reads first, the decorative bear follows it. */
@media (max-width: 900px) {
  .founder-section_inner__yP0AL {
    padding: 0 var(--space-5);
  }

  .founder-section_cards__bo3CI,
  .founder-section_split___ycxo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Challenger engine ("05 The Nari Career Engine"), rebuilt to the extracted
 * design spec (design fidelity pass). Cream ground, centered header, the loop
 * comparison, the video frame, the search-once row, then the CTA.
 *
 * Color mapping per the shared system, exact token first: #f5f2eb --cream,
 * #1B0F33 --light-head, #ddb84a --gold, #2d4a32 --green-dark, #64822C
 * --green, #ede9e0 --cream-dark. Artifact literals only where no token
 * exists: #fffdf8 card white, #8a3b2c rust, #3c3a35 and #6b6560 grays, and
 * the rgba hairlines. Note the moss hex #64822C maps to --green, its exact
 * token match; the token NAMED --moss is the dark ground #13170d, not this
 * green, so using it would paint the tag chip near black.
 *
 * Type: headings Lora via --font-heading at weight 500, body DM Sans 300
 * inherited, mono labels via --font-mono with no weight set (the control's
 * eyebrow primitive does the same). Sizes are the spec's literal px, the
 * convention the control uses.
 *
 * Contrast notes: rust #8a3b2c about 7.3:1 and #6b6560 about 5.6:1 on the
 * card whites, --gold about 5.2:1 and cream about 8.8:1 on --green-dark,
 * cream on --light-head about 16:1. The 9.5px moss tag chip sits near 3.9:1
 * on cream, the artifact's own value, kept per the spec and flagged for the
 * design owner in the build report.
 *
 * Both grids use the spec's auto-fit recipe, which stacks to one column
 * intrinsically on narrow viewports; min(320px, 100%) keeps every track
 * inside the viewport, so the one breakpoint at the bottom of this file
 * carries the shared mobile gutter and nothing else.
 */

/* Deeper cream, per the owner's mockup. The page alternates: founder on
   cream, this section on cream-dark, coaches back on cream. It was cream, so
   founder and engine ran together as one long ground with only a card edge
   between them. */
.engine-section_section__aaBTR {
  background: var(--cream-dark);
  padding: 92px 0;
  /* Anchor target for the nav's /#engine: land clear of the fixed nav and
     of the webinar banner when one is live. Same allowance as
     landing-shared's .anchor on the control. */
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}

/* The page-wide container: 1120px capped, var(--space-7) gutters stepping to
 * var(--space-5) under 900px. The header, video frame and search row keep
 * their own narrower caps INSIDE this container, per the artifact. */
.engine-section_inner__uz5nN {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-7);
}

/* Header */

.engine-section_header__pcvW8 {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}

.engine-section_eyebrowRow__KK8pj {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

.engine-section_eyebrow__fdUbF {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wood-oak);
  /* The artifact's global body line-height; nari-web declares none, so an
   * omitted line-height falls to normal (about 1.25). Every challenger
   * eyebrow carries it explicitly so the six sections match. */
  line-height: 1.6;
}

.engine-section_tag__gy_4d {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-transform: uppercase;
  /* The artifact's moss #64822C (var(--green)) measures 3.94:1 on cream,
     under AA at this size; --green-dark keeps the green voice at 8.79:1.
     The moss-alpha BORDER below is non-text and stays. */
  color: var(--green-dark);
  border: 1px solid rgba(100, 129, 44, 0.4);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.engine-section_heading__rAKQ6 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.2;
  color: var(--light-head);
  text-wrap: balance;
  margin: 0;
}

/* Loop comparison */

.engine-section_compare___YvST {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 14px;
  margin-top: 44px;
}

.engine-section_loopCard__DiJga {
  background: rgba(255, 253, 248, 0.65);
  border: 1px solid rgba(45, 74, 50, 0.15);
  border-radius: 14px;
  padding: 24px 26px;
}

.engine-section_loopLabel__tXtfY {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a3b2c;
  margin: 0 0 14px;
}

/* The ordered list is kept for semantics; visually it is the artifact's bare
   chip row, so the list styling is stripped. */
.engine-section_loopRow__aPznj {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
}

.engine-section_loopItem__RkzYK {
  display: flex;
  align-items: center;
  gap: 7px;
}

.engine-section_loopChip__MTgVr {
  font-family: var(--font-mono);
  font-size: 11.5px;
  /* Matches the mirror chip: without it the chip loses about 4px of height. */
  line-height: 1.6;
  color: #3c3a35;
  border: 1px solid rgba(27, 15, 51, 0.22);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}

.engine-section_loopArrow__MT9QM {
  color: #8a3b2c;
}

.engine-section_loopRepeat__68zjZ {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #8a3b2c;
  margin: 14px 0 0;
}

/* Nari card: the answer, dark ground, deliberately borderless. */

.engine-section_nariCard__Yq51W {
  background: var(--green-dark);
  border-radius: 14px;
  padding: 24px 26px;
}

.engine-section_nariLabel__qRw37 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}

.engine-section_nariLead__0OMnw {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.6;
  color: var(--cream);
  margin: 0;
}

.engine-section_nariBody__lhpZO {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(245, 240, 234, 0.85);
  margin: 10px 0 0;
}

/* Video frame */

.engine-section_videoFrame__833sI {
  max-width: 880px;
  margin: 40px auto 0;
  background: #fffdf8;
  border: 1px solid rgba(45, 74, 50, 0.15);
  border-radius: 16px;
  padding: 16px;
}

.engine-section_frameHeader__LsyG5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* A static label, deliberately not a button: the tab pair is retired. */
.engine-section_pill__cKXfM {
  font-weight: 500;
  font-size: 13px;
  color: var(--cream);
  background: var(--light-head);
  border-radius: 999px;
  padding: 8px 16px;
  white-space: nowrap;
}

.engine-section_process__KAYDc {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6560;
}

/* DemoVideoPlayer brings its own 16:9 box and styles; this wrapper rounds it
   with no inner border, per the spec.

   Deliberately height-free. The artifact fixes the frame at 430px, which at
   the 846px content width would letterbox or crop a 16:9 recording; the
   shared player is a video surface, so its own aspect-ratio 16/9 governs and
   the recording stays undistorted. Only the load GROUND is normalized: the
   player paints var(--c-cream) behind the poster, so the fallback below uses
   the same cream rather than the deeper cream-dark it had, which read as two
   different grounds depending on whether the bucket URL resolved. */
.engine-section_demoFrame__DRYJK {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

/* Fallback when the marketing bucket URL cannot be derived: static poster,
   no play affordance, mirroring the control's degrade path. Ground matches
   the shared player's, so the two paths load identically. */
.engine-section_posterOnly__hyMR0 {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--cream);
}

.engine-section_posterImg__qkxVA {
  object-fit: cover;
}

.engine-section_processNote__txs6K {
  font-size: 12.5px;
  color: #6b6560;
  text-align: center;
  margin: 10px 0 0;
}

/* Search-once row */

.engine-section_searchRow__wnOOL {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  align-items: center;
  max-width: 880px;
  margin: 44px auto 0;
}

.engine-section_searchLead__uVNlA {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.25;
  color: var(--light-head);
  text-wrap: balance;
  margin: 0;
}

/* The bullets stay a ul for semantics, styled as the artifact's rule lines. */
.engine-section_bullets__bmXHH {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
}

.engine-section_bullet__djxok {
  font-size: 13.5px;
  line-height: 1.6;
  color: #3c3a35;
  border-left: 2px solid var(--green);
  padding-left: 11px;
}

/* CTA */

.engine-section_ctaRow__vLiQt {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.engine-section_cta__FSFSi {
  display: inline-block;
  font-weight: 500;
  font-size: 15.5px;
  color: var(--cream);
  background: var(--light-head);
  border-radius: 999px;
  padding: 14px 28px;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.engine-section_cta__FSFSi:hover {
  background: var(--green-dark);
}

.engine-section_cta__FSFSi:focus-visible {
  outline: 2px solid var(--light-head);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  /* The shared mobile gutter. Section padding stays at 92px: no challenger
   * section steps its vertical padding, so the page keeps one rhythm. */
  .engine-section_inner__uz5nN {
    padding: 0 var(--space-5);
  }
}

/*
 * Challenger trust ("06 The coaches"), rebuilt to the owner's mockup.
 *
 * Layout, in order: centred header, a 2x2 row of lane cards, the roster as a
 * two-column list divided by hairlines, the office-hours line, then the
 * recorded session as ONE full-width centred stack. The previous build put the
 * session in a narrow two-column row beside its copy; the mockup gives it the
 * whole content width with the CTA and fine print centred under it.
 *
 * DECLARED INTERPRETATION: the mockup draws the media frames with a dashed
 * border. That is its empty-media placeholder, the same dashed box that
 * appears around the engine section's missing walkthrough video and around the
 * coach avatars, all of which say "or browse files" inside. This arm ships a
 * real poster into that frame, so the border is a quiet solid hairline. A
 * dashed rule around a real image would read as a broken asset.
 *
 * Px sizes come from the mockup; colors are DS tokens where an exact token
 * exists and spec literals otherwise (#3c3a35 body, #6b6560 fine print,
 * #fffdf8 card white, the rgba(45,74,50,*) card borders).
 *
 * Contrast on the cream and card grounds, all AA at their sizes:
 *   wood-oak on cream          5.49:1  eyebrow
 *   #3c3a35 on cream           ~9:1    bios, lane text, office hours
 *   #6b6560 on cream           5.13:1  fine print, guides
 *   green-dark on cream        6.35:1  coach meta; the mockup's moss #64822C
 *                                      is 3.94:1 on cream and fails AA at
 *                                      10px, so --green-dark substitutes and
 *                                      keeps the green voice
 *   cream on green-dark        ~9:1    sessions CTA
 *   cream on light-head        ~13:1   sessions CTA hover
 */

.trust-section_section__mba_S {
  background: var(--cream);
  padding: 92px 0;
  /* Anchor target for the nav's /#trust: land clear of the fixed nav and of
     the webinar banner when one is live. Same allowance as
     landing-shared's .anchor on the control. */
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}

.trust-section_inner__UwhvP {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-7);
}

/* ── Centred header ──────────────────────────────────────────────────────── */

.trust-section_header__sY2Jv {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

/* No font-weight: the mockup sets none on mono labels, so they inherit the
 * page's 300 and resolve to DM Mono 400, as the other eyebrows do. */
.trust-section_eyebrow__KPbDY {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wood-oak);
  line-height: 1.6;
  /* 16px is the eyebrow-to-heading gap in every challenger section. It sits on
   * the eyebrow, not the heading, so the gap is one declaration. */
  margin: 0 0 16px;
}

.trust-section_heading__kuKRs {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.2;
  color: var(--light-head);
  text-wrap: balance;
  margin: 0;
}

/* ── The four lanes ──────────────────────────────────────────────────────── */

.trust-section_lanes__wWx6z {
  list-style: none;
  display: grid;
  /* Two up, exactly as the mockup, collapsing to one below the card's own
     comfortable width rather than at an arbitrary viewport. */
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 14px;
  max-width: 880px;
  margin: 40px auto 0;
  padding: 0;
}

.trust-section_lane__lrV3r {
  background: #fffdf8;
  border: 1px solid rgba(45, 74, 50, 0.15);
  border-radius: 14px;
  padding: 22px 26px 24px;
}

/* The short gold rule above each lane. DECORATION: it separates nothing a
   reader needs, and each lane's sentence stands alone, so it is aria-hidden
   in the markup and carries no meaning here. */
.trust-section_laneRule__bpEYS {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 14px;
}

.trust-section_laneText__7oAH4 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.35;
  color: var(--light-head);
  text-wrap: balance;
  margin: 0;
}

/* Was one short line under the lanes; it is two real paragraphs now, so this
   is a block rather than a <p>. Wider (640 held a single sentence comfortably,
   but at this length it made a narrow column of eight centred lines) and a
   touch darker: #6b6560 was fine for one line of aside, and this is body copy
   people are meant to read. #55524c is 6.8:1 on the cream. */
.trust-section_roads__TuaVZ {
  font-size: 14.5px;
  line-height: 1.7;
  color: #55524c;
  text-align: center;
  max-width: 720px;
  margin: 30px auto 0;
}

/* TWO TIERS, because the two paragraphs do different jobs. The first is the
   argument (why an outside read helps, and who these people are); the second
   is the practical note (what costs nothing, what membership opens, what you
   choose). Set at the same weight they read as one undifferentiated block of
   centred grey, which is the wall this splits.

   No gold rule here, unlike the hero's intro pair: four lane cards directly
   above already open with that exact motif, and a fifth would be repetition
   rather than structure. */
.trust-section_roadsPara__joR33 {
  margin: 0;
  /* On the BASE rule, not only on the two variants below: every text rule in
     this section declares its own line-height, and a variant-only declaration
     leaves the base depending on whatever it inherits. */
  line-height: 1.7;
  text-wrap: pretty;
}

.trust-section_roadsPara__joR33:first-child {
  font-size: 16px;
  color: #3c3a35;
}

/* The logistics. A tier down, and narrower, so it sits under the argument
   rather than beside it in importance. #6b6560 on the cream is 5.14:1. */
.trust-section_roadsPara__joR33 + .trust-section_roadsPara__joR33 {
  max-width: 620px;
  margin: 16px auto 0;
  font-size: 14px;
  color: #6b6560;
}

/* ── The roster ──────────────────────────────────────────────────────────── */

/* Two columns, each row opened by a hairline, per the mockup. The rule sits on
   the ITEM rather than between items so a column that ends one row short does
   not leave a rule hanging under nothing. */
.trust-section_coachList__FE3ZU {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 0 56px;
  margin: 42px 0 0;
  padding: 0;
}

.trust-section_coach__3rhWr {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border-top: 1px solid rgba(27, 15, 51, 0.12);
  padding: 26px 0 28px;
}

/* The disc. Doubles as the monogram ground when the live roster has no photo
   for this coach, which is why it centres its own text: a missing face
   degrades to an initial, never to a broken image or an invented portrait. */
.trust-section_coachPhoto__cUBLV {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--green-dark);
}

.trust-section_coachText__9bnCk {
  min-width: 0;
}

.trust-section_coachName__7HLE5 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--light-head);
  margin: 0;
}

.trust-section_coachMeta__UhcZP {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-dark);
  line-height: 1.6;
  margin: 5px 0 0;
}

.trust-section_coachBio__OlhQF {
  font-size: 13.5px;
  line-height: 1.65;
  color: #3c3a35;
  margin: 10px 0 0;
}

/* The mockup's bold lead-in. 500, not 700: DM Sans loads 500 and the jump from
   the body's 300 is already the emphasis; 700 would shout over the coach's
   own name directly above it. */
.trust-section_coachStrong__atJrT {
  font-weight: 500;
  color: var(--light-head);
}

/* .officeHours is deleted with the paragraph it styled. Left behind it would
   be a rule with no element, which is how a stylesheet starts drifting from
   the markup it describes. */

/* ── Recorded sessions, full width and centred ───────────────────────────── */

.trust-section_sessions__YBKv0 {
  border-top: 1px solid rgba(27, 15, 51, 0.12);
  margin-top: 46px;
  padding-top: 52px;
  text-align: center;
}

.trust-section_sessionsHeading__c_CWt {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.25;
  color: var(--light-head);
  text-wrap: balance;
  margin: 0;
}

.trust-section_sessionsSub__Dackg {
  font-size: 14.5px;
  line-height: 1.7;
  color: #6b6560;
  max-width: 620px;
  margin: 10px auto 0;
}

/* A real poster, so a quiet solid hairline rather than the mockup's dashed
   placeholder rule. See the file header. */
.trust-section_poster__D0WzB {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 560px;
  margin: 30px auto 0;
  padding: 0;
  border: 1px solid rgba(45, 74, 50, 0.15);
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream-dark);
  cursor: pointer;
  font-family: var(--font-body);
  transition: filter 160ms ease;
}

.trust-section_poster__D0WzB:hover {
  filter: brightness(1.04);
}

/* Inset outline so the ring is not clipped by the frame's overflow: hidden. */
.trust-section_poster__D0WzB:focus-visible {
  outline: 3px solid var(--green-dark);
  outline-offset: -3px;
}

.trust-section_posterImage__tFsJK {
  object-fit: cover;
}

/* Placement only: PlayBadge owns the disc, triangle and shadow. */
.trust-section_posterBadge__8nhyf {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.trust-section_sessionsCta__pDQa1 {
  display: inline-block;
  margin: 30px 0 0;
  padding: 15px 32px;
  border-radius: 999px;
  background: var(--green-dark);
  color: var(--cream);
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.trust-section_sessionsCta__pDQa1:hover {
  background: var(--light-head);
}

.trust-section_sessionsCta__pDQa1:focus-visible {
  outline: 2px solid var(--light-head);
  outline-offset: 3px;
}

.trust-section_sessionsBody__JMSsU {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #6b6560;
  margin: 14px 0 0;
}

.trust-section_guides__RAw_N {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 2;
  color: #6b6560;
  max-width: 900px;
  margin: 26px auto 0;
}

@media (max-width: 900px) {
  .trust-section_inner__UwhvP {
    padding: 0 var(--space-5);
  }

  .trust-section_lanes__wWx6z,
  .trust-section_coachList__FE3ZU {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Single column: the hairline now separates every consecutive pair, so the
     first one would sit directly under the roads line as a stray rule. */
  .trust-section_coach__3rhWr:first-child {
    border-top: 0;
    padding-top: 8px;
  }

  .trust-section_sessions__YBKv0 {
    padding-top: 40px;
  }
}

/*
 * Challenger guides ("06b The guides"), between the coaches and the room.
 *
 * Ground is --cream-dark (#ede9e0), which puts it between two cream sections
 * and keeps the page's alternation going: coaches on cream, guides on deep
 * cream, room on deep cream... no, the room is cream-dark too, so this section
 * seams into it deliberately and the CARDS carry the separation instead. That
 * is why the cards are the lighter surface here and not the ground.
 *
 * Colors are DS tokens where an exact token exists, spec literals otherwise
 * (#fffdf8 card white, #3c3a35 body, the rgba(45,74,50,*) card border).
 *
 * Contrast on the grounds, all AA at their sizes:
 *   wood-oak on cream-dark    5.15:1  eyebrow
 *   light-head on cream-dark 13.8:1   heading, card titles
 *   #55524c on cream-dark     6.9:1   lead
 *   green-dark on #fffdf8    10.5:1   card kickers
 *   #3c3a35 on #fffdf8        9.1:1   card bodies
 *   #6b6560 on #fffdf8        5.3:1   the included footer
 *
 * MOTION. The cascade is the whole animation, and it is functional rather than
 * decorative: the heading promises five, and the five cards arrive one after
 * another under it. It rides the global .nari-reveal-stagger, so it dies with
 * the rest under data-motion="static" and it needs no per-component media
 * query (the html attribute is the single source of truth).
 *
 * Hover deliberately does NOT lift. The stagger's own
 * `.nari-reveal-stagger.reveal-armed.is-revealed > *` rule sets
 * `transform: none` at three classes, which outranks any `.card:hover`
 * transform permanently, so a lift here would simply never fire. Border and
 * shadow carry the hover instead, and those cannot collide with the reveal.
 */

.guides-section_section___HZ1w {
  background: var(--cream-dark);
  padding: 92px 0;
}

.guides-section_inner__C1I2l {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-7);
}

/* ── Centred header ──────────────────────────────────────────────────────── */

.guides-section_header__kzI6i {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

/* No font-weight: mono inherits the page's 300 and resolves to DM Mono 400,
   matching every other challenger eyebrow. */
.guides-section_eyebrow__N_H_N {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wood-oak);
  line-height: 1.6;
  /* 16px is the eyebrow-to-heading gap in every challenger section. */
  margin: 0 0 16px;
}

.guides-section_heading__2CY1u {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.2;
  color: var(--light-head);
  text-wrap: balance;
  margin: 0;
}

.guides-section_lead__RnRGA {
  font-size: 15.5px;
  line-height: 1.7;
  color: #55524c;
  max-width: 620px;
  margin: 16px auto 0;
  text-wrap: pretty;
}

/* ── The five cards ──────────────────────────────────────────────────────── */

/* Three up, so the five land 3 + 2 with the last row left-aligned under the
   first, exactly as the mockup sets them. auto-fit rather than a fixed
   repeat(3): the cards collapse to two and then one on their own comfortable
   width instead of at an arbitrary viewport. */
.guides-section_grid__Tf1vX {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  margin: 44px 0 0;
  padding: 0;
}

/* Flex column so the footer can be pinned to the bottom: the bodies are
   different lengths and the mockup aligns the rules and the footers across a
   row. Without margin-top: auto on the tag, each footer floats up under its
   own paragraph and the row reads as ragged. */
.guides-section_card__5QJJE {
  display: flex;
  flex-direction: column;
  background: #fffdf8;
  border: 1px solid rgba(45, 74, 50, 0.15);
  border-radius: 14px;
  padding: 24px 26px 22px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.guides-section_card__5QJJE:hover {
  border-color: rgba(45, 74, 50, 0.32);
  box-shadow: 0 10px 28px rgba(27, 15, 51, 0.08);
}

.guides-section_kicker__50W_0 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.6;
  /* Not the artifact moss #64822C: 4.33:1 on the card white, under AA at 10px.
     --green-dark keeps the green voice at 10.5:1. */
  color: var(--green-dark);
  margin: 0 0 8px;
}

.guides-section_title__UPHlc {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.35;
  color: var(--light-head);
  text-wrap: balance;
  margin: 0;
}

.guides-section_body__X9G7v {
  font-size: 14px;
  line-height: 1.65;
  color: #3c3a35;
  margin: 10px 0 0;
  text-wrap: pretty;
}

/* Pinned to the card's floor, above its own hairline. */
.guides-section_tag__eC7nn {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
  color: #6b6560;
  margin: 24px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(27, 15, 51, 0.1);
  margin-top: auto;
}

@media (max-width: 900px) {
  .guides-section_inner__C1I2l {
    padding: 0 var(--space-5);
  }

  .guides-section_grid__Tf1vX {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Challenger room ("07 After the offer"), design-fidelity pass. The extracted
 * artifact spec is authoritative: px sizes from the spec are used literally
 * (the control does the same), and colors map to tokens only on exact match.
 *
 * Ground: the artifact's #ede9e0 is an exact match for --cream-dark, the same
 * deep-cream mapping the mirror section uses. Ink: #1B0F33 is --light-head
 * exactly. The eyebrow swaps the artifact's #b98a1f for --wood-oak, the
 * declared AA substitute on light grounds (5.06:1 here; the raw hex fails
 * 4.5:1). The card surface #fffdf8, the card border rgba(45,74,50,.15), and
 * the card body ink #3c3a35 have no tokens, so the artifact literals stand.
 *
 * Fully static section: no interactive elements, so no focus styles live
 * here. The room cards carry no mono footers, and the closing line is the one
 * serif-400 paragraph on the page.
 */

.room-section_room__H_Kkb {
  background: var(--cream-dark);
  padding: 92px 0;
}

/* The page-wide container: 1120px capped, var(--space-7) gutters stepping to
 * var(--space-5) under 900px, shared with every other challenger section. */
.room-section_inner__Ukbci {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-7);
}

.room-section_header__eH_As {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.room-section_eyebrow__NgCPU {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wood-oak);
  /* The artifact's global body line-height; nari-web declares none, so an
   * omitted line-height falls to normal (about 1.25). Every challenger
   * eyebrow carries it explicitly so the six sections match. */
  line-height: 1.6;
  /* 16px is the artifact's eyebrow-to-heading gap in every section. */
  margin: 0 0 16px;
}

/* Lora ships in weights 400 and 500 only; never ask the serif for 600. */
.room-section_heading__81HA1 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.2;
  color: var(--light-head);
  margin: 0;
  text-wrap: balance;
}

/* The auto-fit grid is the spec's own stacking mechanism: columns collapse
 * fluidly, so no breakpoint override is needed for the cards. */
.room-section_cards__HxLgC {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 14px;
  margin: 40px 0 0;
  padding: 0;
}

.room-section_card__U9hWo {
  background: #fffdf8;
  border: 1px solid rgba(45, 74, 50, 0.15);
  border-radius: 14px;
  padding: 24px 26px;
}

.room-section_cardTitle__d0hbv {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 19px;
  /* The artifact leaves card h3s at the inherited 1.6; the port's 1.3 cost
   * about 5px a row against the identical cards in the founder section. */
  line-height: 1.6;
  color: var(--light-head);
  margin: 0 0 8px;
  text-wrap: balance;
}

.room-section_cardBody__oUIih {
  font-size: 14px;
  line-height: 1.65;
  color: #3c3a35;
  margin: 0;
}

/* Serif at weight 400 on purpose: the artifact's one 400-weight serif
 * paragraph, distinct from every 500-weight heading around it. */
.room-section_closer__1tggx {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--light-head);
  text-align: center;
  max-width: 620px;
  margin: 36px auto 0;
}

/* The module's existing breakpoint, kept for the shared mobile gutter only;
 * the card grid stacks itself. The section's own 92px vertical padding does
 * NOT step down here: this was the page's only section that shortened on
 * mobile, which broke the shared rhythm against its neighbours. */
@media (max-width: 900px) {
  .room-section_inner__Ukbci {
    padding: 0 var(--space-5);
  }
}

/*
 * Challenger layers ("08 Pricing"), rebuilt to the owner's mockup. The page's
 * one dark section: green-dark ground with cream type.
 *
 * Layout: centred header, then two columns. Left stacks the includes card over
 * the extras card; right holds the CTA card, top-aligned. The previous build
 * was three side-by-side tiers, which invited a comparison between three plans
 * when there is only one.
 *
 * Colors. The ground is --green-dark. Everything drawn on it is cream, either
 * solid or as an alpha composite rgba(245, 240, 234, x), kept literal exactly
 * as the control keeps its own composites.
 *
 * SOLID cream here is #f5f0ea, the ON-DARK cream (--c-text), NOT the --cream
 * token, which resolves to #f5f2eb. Verified on the running page, not assumed:
 * the two are a shade apart, this section sets solid and alpha cream on the
 * same elements, and mixing the families is drift nobody notices until they
 * cannot unsee it.
 *
 * #ecca6a is the lifted gold for prices and card labels on this dark ground.
 * The --gold token (#ddb84a) is 6.6:1 here and would pass, but the mockup's
 * own price colour is the lighter one and it reads as the same gold family.
 *
 * Contrast on the green-dark ground (#2d4a32), all AA at their sizes:
 *   cream on green-dark              9.06:1  body, row text
 *   rgba(245,240,234,.78) composite  6.4:1   secondary body
 *   #ecca6a on green-dark            8.05:1  labels, prices
 *   light-head on gold               8.9:1   the trial CTA
 *   cream on light-head             13.2:1   the CTA hover
 */

.layers-section_layers__m47G3 {
  background: var(--green-dark);
  padding: 92px 0;
  /* Anchor target for the hero and engine CTAs: land clear of the fixed nav
     and of the webinar banner when one is live. */
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}

.layers-section_inner__DNyuJ {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-7);
}

/* ── Centred header ──────────────────────────────────────────────────────── */

.layers-section_header__uTId9 {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* Gold, not wood-oak: the light-ground substitution exists because #b98a1f
   fails on cream. On this dark ground gold is 8:1 and is the mockup's own
   colour. No font-weight, so mono inherits the page's 300 and resolves to
   DM Mono 400, as the other eyebrows do. */
.layers-section_eyebrow__j1VTy {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ecca6a;
  line-height: 1.6;
  margin: 0 0 16px;
}

.layers-section_heading__aAN_7 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.2;
  color: #f5f0ea;
  text-wrap: balance;
  margin: 0;
}

/* ── Two columns ─────────────────────────────────────────────────────────── */

/* align-items: start so the right card keeps its own height instead of
   stretching to match the seven-row card beside it. */
.layers-section_columns__J4Xlz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 22px;
  align-items: start;
  margin-top: 44px;
}

.layers-section_left__3Z3U7 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

/* The membership card is the one thing on the page edged in gold: it is what
   the section is selling, and the extras card beside it is deliberately
   quieter. */
.layers-section_includesCard__0mG3_ {
  background: rgba(221, 184, 74, 0.08);
  border: 1px solid rgba(221, 184, 74, 0.55);
  border-radius: 16px;
  padding: 26px 28px 28px;
}

.layers-section_extrasCard__IBgWe {
  background: rgba(245, 240, 234, 0.04);
  border: 1px solid rgba(245, 240, 234, 0.22);
  border-radius: 16px;
  padding: 26px 28px 28px;
}

.layers-section_cardLabel__2yW7o {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ecca6a;
  line-height: 1.6;
  margin: 0;
}

.layers-section_includesList__LRbcH {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

/* One hairline per row rather than a border between siblings: a top border on
   every row but the first keeps the card's own edge clean at both ends. */
.layers-section_includesRow__bLucW {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 15px 0;
}

.layers-section_includesRow__bLucW + .layers-section_includesRow__bLucW {
  border-top: 1px solid rgba(245, 240, 234, 0.16);
}

/* Decoration: every row's sentence says what it is, so the tick carries no
   meaning and is aria-hidden in the markup. */
.layers-section_check__QsHXa {
  flex: 0 0 auto;
  color: #ecca6a;
  font-size: 13px;
  line-height: 1.65;
}

.layers-section_rowText__G_YfN {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245, 240, 234, 0.88);
  margin: 0;
  min-width: 0;
}

/* The bold lead-in. 500, not 700: DM Sans loads 500 and the jump from the
   body's 300 already reads as emphasis. Full cream so the opener separates
   from its own sentence. */
.layers-section_rowTitle__4y46c {
  font-weight: 500;
  color: #f5f0ea;
}

.layers-section_extrasBody__AXof9 {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245, 240, 234, 0.78);
  margin: 14px 0 0;
}

.layers-section_extrasList__IyUWD {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
}

.layers-section_extrasRow__hc4VK {
  border: 1px solid rgba(245, 240, 234, 0.18);
  border-radius: 12px;
  padding: 15px 18px;
}

/* Mono gold for the money, per the mockup: the price is the one thing in the
   row a reader scans for. */
.layers-section_price__KSFvI {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #ecca6a;
}

/* ── Right column ────────────────────────────────────────────────────────── */

.layers-section_right__B0DpE {
  background: rgba(245, 240, 234, 0.05);
  border: 1px solid rgba(245, 240, 234, 0.18);
  border-radius: 16px;
  padding: 28px 30px 30px;
  min-width: 0;
}

.layers-section_noPromise__4TQ3r {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(245, 240, 234, 0.88);
  margin: 0;
}

/* The gold pill, the section's one loud element. Dark type on gold is 8.9:1,
   which is why the trial CTA can be the brightest thing here without the
   fine print under it having to compete. */
.layers-section_primaryCta__YsF5k {
  display: inline-block;
  margin: 22px 0 0;
  padding: 15px 30px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--light-head);
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.layers-section_primaryCta__YsF5k:hover {
  background: var(--light-head);
  color: #f5f0ea;
}

.layers-section_primaryCta__YsF5k:focus-visible {
  outline: 2px solid #f5f0ea;
  outline-offset: 3px;
}

.layers-section_priceTerms__c3bun {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: rgba(245, 240, 234, 0.78);
  margin: 14px 0 0;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(245, 240, 234, 0.18);
}

.layers-section_notReady__NImRM {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245, 240, 234, 0.88);
  margin: 22px 0 0;
}

.layers-section_ghostCta__LxEpu {
  display: inline-block;
  margin: 14px 0 0;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid rgba(245, 240, 234, 0.45);
  color: #f5f0ea;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.layers-section_ghostCta__LxEpu:hover {
  border-color: #f5f0ea;
  background: rgba(245, 240, 234, 0.08);
}

.layers-section_ghostCta__LxEpu:focus-visible {
  outline: 2px solid #f5f0ea;
  outline-offset: 3px;
}

.layers-section_quote__daqtv {
  border-left: 2px solid var(--gold);
  padding-left: 18px;
  margin: 28px 0 0;
}

.layers-section_quoteText__HcWzv {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(245, 240, 234, 0.9);
  margin: 0;
}

.layers-section_quoteAttribution__Bw2x3 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ecca6a;
  line-height: 1.6;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .layers-section_inner__DNyuJ {
    padding: 0 var(--space-5);
  }

  .layers-section_columns__J4Xlz {
    grid-template-columns: minmax(0, 1fr);
  }

  .layers-section_includesCard__0mG3_,
  .layers-section_extrasCard__IBgWe,
  .layers-section_right__B0DpE {
    padding: 22px 20px 24px;
  }
}

/*
 * Challenger close ("09 The close").
 *
 * THIS IS THE CONTROL'S CLOSE SECTION, COPIED, with the challenger's copy and
 * type on top. See close-section.tsx for why: the artifact's own structure (a
 * bottom-anchored band under a mask) was rebuilt six times and produced a new
 * defect each time, all of which components/marketing/landing/close/ had
 * already solved. The scene geometry and both veils below are that file's,
 * value for value. Keep them in step: if the control's close is ever retuned,
 * retune this one with it.
 *
 * What is the challenger's own, deliberately: the larger close heading the
 * artifact specifies (clamp 30 to 48 at 1.18), the forest CTA pill in the
 * artifact's proportions, and the mono price line.
 *
 * The rgba(245, 242, 235, x) stops are alpha composites of the cream token,
 * kept literal exactly as the control keeps them.
 */

.close-section_section__NfMke {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--cream);
}

/* The scene bleeds 96px below the section so the asset's patched bottom band
   stays hidden; keep this inset exactly. Shipping without it put a band of
   smeared pixels across the bottom of the preview. */
.close-section_scene__w7mbk {
  position: absolute;
  inset: 96px 0 -96px 0;
  z-index: 0;
  pointer-events: none;
}

.close-section_sceneImage__FF93H {
  object-fit: cover;
}

/* Full-height veil: seams the section to the one above and keeps the copy
   legible on the watercolour. */
.close-section_veilSeam__iZ4On {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--cream) 0%,
    rgba(245, 242, 235, 0.92) 7%,
    rgba(245, 242, 235, 0.72) 16%,
    rgba(245, 242, 235, 0.42) 26%,
    rgba(245, 242, 235, 0.16) 36%,
    transparent 46%
  );
}

/* Denser 600px upper veil behind the copy block. The PAIR is what gives the
   copy a legible ground with no hard edge anywhere, which is exactly what
   every single-veil attempt in this section failed to do. */
.close-section_veilUpper__1WRIV {
  position: absolute;
  inset: 0 0 auto 0;
  height: 600px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(245, 242, 235, 0.96) 0%,
    rgba(245, 242, 235, 0.94) 52%,
    rgba(245, 242, 235, 0.88) 68%,
    rgba(245, 242, 235, 0.6) 78%,
    rgba(245, 242, 235, 0.22) 88%,
    transparent 96%
  );
}

/* Deep bottom padding leaves the meadow visible below the copy. */
.close-section_content__HcQM3 {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  padding: 52px 32px 340px;
  text-align: center;
}

/* Type below is the challenger's own. */
.close-section_heading__lbqkY {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 48px);
  line-height: 1.18;
  color: var(--light-head);
  text-wrap: balance;
}

/* The turn is italic inside the one h2. Lora italic 500 is loaded, so the
   slant is a real face, not synthesized. */
.close-section_headingTurn__mLtRI {
  font-style: italic;
}

/* Body copy: DM Sans 300 inherited, never redeclared. */
.close-section_body__oj_GA {
  max-width: 520px;
  margin: 18px auto 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: #55524c;
}

.close-section_ctaRow__B_KZ5 {
  margin-top: 32px;
}

/* Button type: DM Sans inherited, weight 500. */
.close-section_cta___YYLx {
  display: inline-block;
  padding: 15px 32px;
  border-radius: 999px;
  background: var(--green-dark);
  color: var(--cream);
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.close-section_cta___YYLx:hover {
  background: var(--light-head);
}

.close-section_cta___YYLx:focus-visible {
  outline: 2px solid var(--light-head);
  outline-offset: 3px;
}

.close-section_priceLine__qaGKi {
  margin: 14px 0 0;
  font-size: 12.5px;
  /* The artifact's global body line-height; nari-web declares none, so an
     omitted line-height falls to normal (about 1.25). */
  line-height: 1.6;
  color: #6b6560;
}

@media (max-width: 900px) {
  /* The shared mobile gutter; the vertical values are the control's. */
  .close-section_content__HcQM3 {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}

.browser-mock_frame__OmMxn {
  background: var(--c-cream-light);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(30, 20, 10, 0.06), 0 18px 48px rgba(30, 20, 10, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
}

.browser-mock_chrome__RMfjU {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--c-cream-dark) 60%, var(--c-cream-light));
  border-bottom: 1px solid var(--c-border);
}

.browser-mock_dots__ng3nQ {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.browser-mock_dot__MhZeF {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Monochrome brand dots (2026-08 landing redesign): the design keeps the
   browser chrome in the restrained palette, three green-deep dots fading in
   opacity, instead of macOS traffic lights. The class names keep their
   position meaning (first/second/third dot). */
.browser-mock_dotRed__sxNyb {
  background: var(--c-green-deep);
  opacity: 0.85;
}

.browser-mock_dotAmber__IzMwK {
  background: var(--c-green-deep);
  opacity: 0.55;
}

.browser-mock_dotGreen__X17M_ {
  background: var(--c-green-deep);
  opacity: 0.3;
}

.browser-mock_urlBar__tpV8x {
  flex: 1 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-cream-light);
  border-radius: 999px;
  padding: 4px 14px;
  border: 1px solid color-mix(in srgb, var(--c-border-mid) 50%, transparent);
}

.browser-mock_urlText__WnDHg {
  font-family: var(--font-mono, "DM Mono", monospace);
  font-size: 11px;
  color: var(--c-light-mute);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.browser-mock_body__OMAxX {
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--c-cream-light);
}

/*
 * Question deck, two render modes sharing one card style:
 *   - unenhanced (SSR / crawlers / no-JS): .staticList, a plain ordered list
 *     with every card visible at natural height;
 *   - enhanced: .deck, a fixed-height stack of absolutely positioned .slide
 *     wrappers whose transforms come inline from the component.
 * The white card surfaces use --c-cream-light (the closest token to the
 * design's #fff; no white token exists). Gold appears on the dark answer
 * panel (allowed) and as the active indicator dot (per the section task).
 */

/* ── Unenhanced list ───────────────────────────────────────────────────────── */

.question-deck_staticList__Gmwbz {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.question-deck_staticItem__7sUd_ {
  margin: 0;
}

.question-deck_staticIndex__gcwCa {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--c-light-mute);
  margin-bottom: 8px;
}

/* ── Shared card ───────────────────────────────────────────────────────────── */

.question-deck_card__sbFlK {
  width: 100%;
  background: var(--c-cream-light);
  border: 1px solid rgba(85, 111, 36, 0.2);
  border-radius: 20px;
  padding: 36px 36px 32px;
  box-shadow: 0 20px 40px -24px rgba(27, 15, 51, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
}

.question-deck_question__sRtBq {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 20px;
  color: var(--c-light-head);
  line-height: 1.5;
}

/* #945a1b in the design has no token; wood-oak is the mapped small-text
   stand-in (gold is banned on light surfaces). */
.question-deck_quoteMark__1GDUd {
  color: var(--c-wood-oak);
}

.question-deck_answer__lpZZa {
  background: var(--c-green-deep);
  border-radius: 14px;
  padding: 18px 22px;
  color: rgba(245, 242, 235, 0.92);
  font-size: 14px;
  line-height: 1.65;
}

/* Gold label on the dark green panel: allowed surface for gold. */
.question-deck_who__a_gpi {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 6px;
}

/* ── Enhanced deck ─────────────────────────────────────────────────────────── */

/* Fixed heights sized to the longest card (question one) at each width band;
   cards stretch to fill so the stack edge is uniform. */
.question-deck_deck__PwvqG {
  position: relative;
  height: 520px;
  outline-offset: 6px;
}

.question-deck_deck__PwvqG:focus-visible {
  outline: 3px solid var(--c-green-dark);
}

@media (min-width: 480px) {
  .question-deck_deck__PwvqG {
    height: 460px;
  }
}

@media (min-width: 700px) {
  .question-deck_deck__PwvqG {
    height: 340px;
  }
}

/* Transform/opacity/z-index come inline from the component. Time-based
   transitions, so html[data-motion="static"] snaps card changes. */
.question-deck_slide__MeKXi {
  position: absolute;
  inset: 0;
  cursor: pointer;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.question-deck_slide__MeKXi .question-deck_card__sbFlK {
  height: 100%;
}

.question-deck_slideHidden__1IAN7 {
  pointer-events: none;
  cursor: default;
}

/* ── Controls ──────────────────────────────────────────────────────────────── */

.question-deck_controls__OSsI0 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}

.question-deck_navBtn__kXePZ {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(85, 111, 36, 0.24);
  background: var(--c-cream-light);
  color: var(--c-green-dark);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.question-deck_navBtn__kXePZ:hover {
  background: rgba(85, 111, 36, 0.1);
}

.question-deck_navBtn__kXePZ:focus-visible {
  outline: 3px solid var(--c-green-dark);
  outline-offset: 2px;
}

.question-deck_dots__tAgK2 {
  display: flex;
  gap: 7px;
}

.question-deck_dot__sbyxt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(85, 111, 36, 0.28);
  transition: background 0.15s ease;
}

.question-deck_dotActive__7KiO4 {
  /* Position indicator (informational): needs 3:1 on cream, which gold fails
     (1.68:1) and is banned there anyway. Green-dark is 8.79:1. */
  background: var(--c-green-dark);
}

.question-deck_count__xWrtV {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--c-light-mute);
  min-width: 40px;
}

/* ── Narrow screens ────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .question-deck_card__sbFlK {
    padding: 26px 22px 24px;
  }

  .question-deck_question__sRtBq {
    font-size: 18px;
  }
}

/*
 * WHY section: dark narration panel bridging the navy hero into the deep-green
 * body of the page. Left column narrates, right column stacks the three
 * "absent insider" portrait rows.
 *
 * rgba(245, 240, 234, 0.78) is the design's soft-text alpha composite of
 * --c-text on the dark gradient and stays literal per the landing conventions
 * (alpha composites, not brand colors).
 */

.why-section_section__WY8ay {
  /* -1px overlap hides the seam against the hero above. */
  margin-top: -1px;
  padding: 40px 0 84px;
  background: linear-gradient(
    180deg,
    var(--c-navy) 0%,
    var(--c-navy) 14%,
    var(--c-green-deep) 58%,
    var(--c-green-deep) 100%
  );
}

.why-section_grid__MG04Z {
  display: grid;
  /* min(300px, 100%) so a 360px viewport (296px of content) cannot overflow. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 44px 52px;
  align-items: center;
}

/* ── Left · the narration ─────────────────────────────────────────────────── */

.why-section_eyebrow__mdYQY {
  margin: 0 0 20px;
}

.why-section_heading__4AcMC {
  font-family: var(--font-heading);
  font-size: 34px;
  line-height: 1.16;
  color: var(--c-text);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 26px;
  text-wrap: pretty;
}

.why-section_headingItalic__zNwrx {
  font-style: italic;
}

.why-section_body__jqczV {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(245, 240, 234, 0.78);
  margin: 0;
  /* Short block: balance the line lengths. */
  text-wrap: balance;
}

/* ── Right · the absent insiders ──────────────────────────────────────────── */

.why-section_insiders__25PME {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.why-section_row__c1FwB {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 4px;
}

.why-section_portraitWrap__QxsRp {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-section_portraitHalo__zQZCO {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(221, 184, 74, 0.15),
    transparent 62%
  );
}

/* Paints the art above its absolutely positioned halo. */
.why-section_portraitArt__t_2qS {
  position: relative;
}

.why-section_rowBody__8aunY {
  flex: 1 1;
}

.why-section_rowTitle__FMZWX {
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--c-text);
  line-height: 1.3;
  margin: 0;
}

/* The design's #b8cca0 is exactly --sage-bg in tokens.css (aliased as
   --c-sage-bg); --c-sage-text is its dark companion (#1e3028), so the bg
   token is the correct exact match for this sage label on the dark surface
   (about 8.2:1 on green-deep). */
.why-section_tag__yYh85 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-sage-bg);
  margin-left: 8px;
  white-space: nowrap;
  display: inline-block;
}

.why-section_quote__MLtqL {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(245, 240, 234, 0.78);
  margin: 7px 0 0;
}

.why-section_quoteMark__nJhtm {
  color: var(--c-gold);
}

/*
 * "So we built Nari." section.
 *
 * White section. The top 420px is a dawn-panorama band: the image layer is
 * parallax-scrolled (ParallaxLayer), masked from transparent at the top to
 * solid, and a white gradient wash seats the band into the white surface
 * below. Content rises out of the band; the three cards cascade in via the
 * global stagger reveal and lift on hover.
 *
 * The rgba() values below are the design's alpha composites (scrims, washes,
 * tinted borders/shadows), kept literal per the landing conventions.
 */

.built-section_section__7dMfI {
  position: relative;
  overflow: hidden;
  background: #fff; /* design: pure white surface (no brand token for white) */
  padding: 0;
}

/* ── Dawn band ─────────────────────────────────────────────────────────────── */

.built-section_band__5iYm2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 420px;
  overflow: hidden;
  background: var(--c-green-deep);
}

/* The parallax-transformed layer: bleeds 70px past the band on both vertical
   edges so the 30px parallax travel never exposes the band background. The
   mask fades the image in from transparent at the top to solid past the
   midpoint (the design's seat-into-the-dark-section-above fade). */
.built-section_bandParallax__m9MOp {
  position: absolute;
  inset: -70px 0;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 8%,
    rgba(0, 0, 0, 0.12) 16%,
    rgba(0, 0, 0, 0.32) 24%,
    rgba(0, 0, 0, 0.58) 33%,
    rgba(0, 0, 0, 0.82) 42%,
    #000 52%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 8%,
    rgba(0, 0, 0, 0.12) 16%,
    rgba(0, 0, 0, 0.32) 24%,
    rgba(0, 0, 0, 0.58) 33%,
    rgba(0, 0, 0, 0.82) 42%,
    #000 52%
  );
}

.built-section_bandImage__xm1io {
  object-fit: cover;
}

/* White wash rising from the bottom of the band: seats the panorama into the
   white section (also the scrim under the heading, preserved per a11y rule). */
.built-section_bandWash__fZjQR {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    #fff 0%,
    rgba(255, 255, 255, 0.92) 8%,
    rgba(252, 250, 245, 0.7) 18%,
    rgba(245, 242, 235, 0.4) 30%,
    rgba(237, 233, 224, 0.18) 42%,
    transparent 56%
  );
}

/* ── Content ───────────────────────────────────────────────────────────────── */

.built-section_bodyWrap__DSHWC {
  position: relative;
  padding: 0 0 60px;
}

.built-section_content__IJzU4 {
  position: relative;
  padding-top: 190px;
  text-align: center;
}

.built-section_heading__zxLXg {
  font-family: var(--font-heading);
  font-size: clamp(31px, 5.2vw, 38px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-light-head);
  margin-bottom: 10px;
}

.built-section_subline___El4J {
  font-size: 16px;
  color: var(--c-light-body);
  max-width: 460px;
  margin: 0 auto 34px;
  text-wrap: balance;
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */

.built-section_grid__M86eT {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
  list-style: none;
  padding: 0;
}

.built-section_card__lYHUV {
  position: relative;
  overflow: hidden;
  background: linear-gradient(168deg, #fffdf9 0%, #faf7f0 100%);
  border: 1px solid rgba(85, 111, 36, 0.14);
  border-radius: 14px;
  padding: 26px 26px 28px;
  box-shadow: 0 20px 44px -34px rgba(27, 15, 51, 0.4);
  /* `opacity` appended for the nari-reveal-fade arm: this shorthand outranks
     the global fade transition in the cascade (globals.css gotcha). */
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s,
    border-color 0.22s,
    opacity 0.6s cubic-bezier(0.2, 0.65, 0.25, 1);
}

/* Tripled class on purpose: after reveal, the global stagger rule
   (.nari-reveal-stagger.reveal-armed.is-revealed > *) pins `transform: none`
   on the cards at three-class specificity, and the per-child stagger rule adds
   a transition-delay; a plain .card:hover would lose to both. (0,4,1) wins,
   and the zeroed delay keeps the lift immediate. */
.built-section_card__lYHUV.built-section_card__lYHUV.built-section_card__lYHUV:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 56px -32px rgba(27, 15, 51, 0.42);
  border-color: rgba(168, 104, 32, 0.55);
  transition-delay: 0s;
}

/* Top accent bar. The design drew it gold, but gold never sits on cream/white
   (globals rule), so it is re-toned to golden-sand, the DS's warm accent for
   light surfaces (3.9:1 non-text on white). */
.built-section_cardBar__x809C {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-golden-sand), rgba(168, 104, 32, 0.15));
}

/* Giant ghost number behind the card content. */
.built-section_cardGhost__LiP2m {
  position: absolute;
  right: 16px;
  bottom: -14px;
  font-family: var(--font-heading);
  font-size: 92px;
  font-weight: 400; /* Lora 300 is not loaded; pin to a real weight */
  line-height: 1;
  color: rgba(45, 74, 50, 0.06);
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

/* Replaces the old mono eyebrow. The eyebrow named the thing ("The engine")
   and the title named it again, so the icon carries that job silently and the
   title gets to be the first words read. Golden-sand on a tinted square, not
   gold: gold is banned on light surfaces. */
.built-section_cardIcon__aup5e {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  margin-bottom: 18px;
  color: var(--c-wood-oak);
  background: rgba(168, 104, 32, 0.09);
}

.built-section_cardTitle__uA89J {
  position: relative;
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--c-light-head);
  margin-bottom: 10px;
  text-wrap: pretty;
}

/* The promise. Carries the weight the old italic emphasis used to, but on the
   whole line rather than a single word spliced in by an indexOf. */
.built-section_cardLead__t8Lzv {
  position: relative;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-green-dark);
  margin-bottom: 12px;
  text-wrap: pretty;
}

.built-section_cardBody__tXq6b {
  position: relative;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-light-mute);
  text-wrap: pretty;
}

.built-section_closer__e_UN7 {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 18px;
  font-weight: 400; /* Lora italic 400 is loaded; avoid a faux 300 */
  color: var(--c-green-dark);
  margin-top: 34px;
  /* Short block: balance the line lengths. */
  text-wrap: balance;
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .built-section_band__5iYm2 {
    height: 300px;
  }

  .built-section_content__IJzU4 {
    padding-top: 140px;
  }
}

/*
 * Job search card: the Engine section's second half.
 *
 * Dark green card, so gold is allowed here (it is banned on cream/white).
 * The right-hand panel is a light surface INSIDE that card, so anything on it
 * uses the light-surface tokens.
 *
 * Motion: the panel's assembly comes from the shared .nari-reveal-stagger
 * classes in globals.css. The only bespoke motion is the Search press below,
 * and it follows the page convention: the base (un-animated) state is the
 * resting button, so Static mode freezes on something presentable.
 */

.job-search-card_wrap__GiNsu {
  max-width: 1060px;
  margin: 44px auto 0;
  padding: 0 32px;
}

.job-search-card_card__moOmK {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--c-green-deep), var(--c-green-dark));
  border-radius: 20px;
  padding: 34px 36px 36px;
  box-shadow: 0 30px 60px -34px rgba(27, 15, 51, 0.4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 34px 42px;
  align-items: center;
}

.job-search-card_topBar__kQC5K {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-gold), rgba(221, 184, 74, 0.12));
}

/* ── Left column ─────────────────────────────────────────────────────────── */

.job-search-card_eyebrow__FX0XB {
  font-size: 9.5px;
  margin-bottom: 14px;
}

.job-search-card_heading__svJEG {
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1.24;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--c-text);
  margin-bottom: 12px;
}

.job-search-card_headingItalic__6Yokf {
  font-style: italic;
}

/* Gold, not body copy. This is the claim the bullets then evidence, so it
   carries the section's accent. Gold is fine here: the card is dark green. */
.job-search-card_goldLine__TOolG {
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-gold);
  margin-bottom: 18px;
  text-wrap: pretty;
}

.job-search-card_bullets__1TJBl {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.job-search-card_bullet__7gaq0 {
  display: flex;
  align-items: baseline;
  gap: 11px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245, 240, 234, 0.86);
}

.job-search-card_bulletDot__6mslE {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-gold);
  flex-shrink: 0;
  transform: translateY(-2px);
}

/* ── Right column: the panel illustration ────────────────────────────────── */

.job-search-card_panel__FQd8r {
  background: var(--c-cream-light);
  border: 1px solid rgba(85, 111, 36, 0.18);
  border-radius: 14px;
  padding: 20px 20px 22px;
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.6);
}

.job-search-card_panelInner__gwZVV {
  display: block;
}

.job-search-card_fieldLabel__RsRAd {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-light-mute);
  margin-bottom: 8px;
}

.job-search-card_field__NNsnF {
  display: block;
  background: var(--c-cream-light);
  border: 1px solid rgba(85, 111, 36, 0.22);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--c-light-body);
}

.job-search-card_fieldHelp__IkrS_ {
  font-size: 11.5px;
  color: var(--c-light-mute);
  margin: 8px 0 18px;
}

.job-search-card_chips__ZZOjH {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.job-search-card_chip___UY6E {
  font-size: 12.5px;
  color: var(--c-light-body);
  background: var(--c-cream-light);
  border: 1px solid rgba(85, 111, 36, 0.22);
  border-radius: 999px;
  padding: 7px 14px;
  /* A filter pill that wraps mid-label stops reading as a control. */
  white-space: nowrap;
  flex-shrink: 0;
}

.job-search-card_searchRow__dUhOv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(85, 111, 36, 0.16);
}

.job-search-card_directOnly__b_nkP {
  font-size: 13px;
  color: var(--c-light-body);
}

.job-search-card_searchBtn__zN6zX {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-cream);
  background: var(--c-green-dark);
  border-radius: 8px;
  padding: 8px 18px;
}

/* The one bespoke beat: after the panel has assembled, the Search button gives
   a single press. Base state is the resting button, so Static mode (and every
   mobile visitor) simply sees it at rest. */
/* The ring spreads onto the PANEL, which is a light surface, so it is toned in
   golden-sand alphas rather than gold (same reason the trust deck's ring is).
   The card being dark buys nothing here. */
@keyframes job-search-card_nariJobsPress__jIE7A {
  0% { transform: none; box-shadow: 0 0 0 0 rgba(168, 104, 32, 0); }
  45% { transform: scale(0.96); box-shadow: 0 0 0 6px rgba(168, 104, 32, 0.22); }
  100% { transform: none; box-shadow: 0 0 0 0 rgba(168, 104, 32, 0); }
}

.job-search-card_panelInner__gwZVV.is-revealed .job-search-card_searchBtn__zN6zX {
  animation: job-search-card_nariJobsPress__jIE7A 0.6s 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* The picker sits above the downloads now rather than beside them: at the
   panel's width a named resume plus two buttons on one line left every item
   too narrow to read as itself. */
.job-search-card_applyingRow__zd8Q3 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.job-search-card_resumePick__bZ6Bx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--c-cream-light);
  border: 1px solid rgba(85, 111, 36, 0.22);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--c-light-body);
}

.job-search-card_downloads__ay0Y5 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.job-search-card_download__fTEBj {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--c-light-body);
  background: var(--c-cream-light);
  border: 1px solid rgba(85, 111, 36, 0.22);
  border-radius: 8px;
  padding: 9px 10px;
  white-space: nowrap;
}

/* Both panel glyphs. Muted so they read as affordance hints on a mock rather
   than as live controls. */
.job-search-card_glyph__QzAt4 {
  flex-shrink: 0;
  color: var(--c-light-mute);
}

/* ── Foot row ────────────────────────────────────────────────────────────── */

.job-search-card_footRow__ORzGa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.job-search-card_footnote__x2zaB {
  font-size: 13.5px;
  color: var(--c-light-mute);
}

.job-search-card_cta__R_fsr {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-wood-oak);
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Underline, not a colour shift: the foot row sits OUTSIDE the dark card, on
   the section's cream gradient, where golden-sand is 4.03:1 (fails AA, and
   fails at the exact moment the visitor is targeting the link). Matches the
   identical CTA one section up, which keeps wood-oak in both states. */
.job-search-card_cta__R_fsr:hover {
  text-decoration: underline;
}

.job-search-card_cta__R_fsr:focus-visible {
  outline: 3px solid var(--c-green-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (max-width: 600px) {
  .job-search-card_card__moOmK {
    padding: 28px 22px 30px;
  }
}