/*
 * Trust section (id="trust"): the human side of the membership on the cream
 * surface. Tokens only (--c-* alias layer); the rgba() values below are the
 * design's alpha composites (hairlines, ring shadows, scrims), kept literal
 * per the landing conventions. Gold appears only as tiny decorative accents
 * (the design's row dots / active deck dot) and on dark surfaces.
 */

.trust-section_section__fn5qe {
  background: var(--c-cream);
  padding: 56px 0 60px;
}

/* ── 1 · Centered intro ────────────────────────────────────────────────────── */

.trust-section_intro__ApaCF {
  max-width: 900px;
  margin: 0 auto 44px;
  padding: 0 32px;
  text-align: center;
}

/* The coaching illustration (a coach and a member across a table) carries the
   emotional weight of this section, so it is a proper figure rather than a
   mascot ornament. No tilt: it is a scene, and rocking it would read as a
   sticker. Sized to the art's own 1.57:1 so nothing letterboxes.
   300px, not 420: at 420 it was 267px tall and pushed the heading it is meant
   to introduce most of a fold down the page. It sets the scene; it is not the
   argument. Keep this and the Image's `sizes` hint in step. */
.trust-section_mascot__lGBzY {
  width: min(300px, 72vw);
  margin: 0 auto 20px;
}

.trust-section_mascotImg__E4Waf {
  display: block;
  width: 100%;
  height: auto;
}

.trust-section_heading__Pf6II {
  font-family: var(--font-heading);
  font-size: clamp(28px, 5.4vw, 35px);
  line-height: 1.18;
  color: var(--c-light-head);
  font-weight: 500;
  letter-spacing: -0.02em;
  max-width: 680px;
  margin: 0 auto;
}

.trust-section_headingItalic__F_Ehp {
  font-style: italic;
  font-weight: inherit;
}

/* ── 2 · Coach / sessions two-column grid ──────────────────────────────────── */

.trust-section_columns__Ejv9q {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 52px;
  align-items: start;
}

.trust-section_eyebrow__zeKuS {
  margin-bottom: 20px;
}

.trust-section_coachRows__oIbtc {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.trust-section_coachRow__aIVGS {
  padding-top: 18px;
  border-top: 1px solid rgba(85, 111, 36, 0.24);
}

.trust-section_coachRowTitle__ZYLVs {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--c-light-head);
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.trust-section_coachRowDot__kJ5Ln {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  /* The design's gold dot, re-toned: gold never sits on cream (globals rule),
     so the row markers use the brand green instead. */
  background: var(--c-green-dark);
  flex-shrink: 0;
}

.trust-section_coachRowBody___AZsd {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-light-mute);
  /* Short block: balance the line lengths. */
  text-wrap: balance;
}

.trust-section_payoff__JJFmP {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 21px;
  line-height: 1.45;
  color: var(--c-green-dark);
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(85, 111, 36, 0.24);
  /* Short block: balance the line lengths. */
  text-wrap: balance;
}

.trust-section_payoffStrong__WNLCL {
  color: var(--c-light-head);
}

.trust-section_sessionsHeading__4_jBd {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 1.26;
  color: var(--c-light-head);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}

.trust-section_sessionsBody__L_Hh3 {
  font-size: 14.5px;
  color: var(--c-light-mute);
  line-height: 1.7;
  margin-bottom: 24px;
  /* Short block: balance the line lengths. */
  text-wrap: balance;
}

/* Recorded-session poster card: deliberately NOT interactive (the CTA below
   is the link out), so no hover/focus affordances here. */
.trust-section_posterCard__wwWFh {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 270px;
  box-shadow: 0 24px 50px -30px rgba(27, 15, 51, 0.45);
}

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

.trust-section_posterScrim__mPcLI {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 18, 25, 0.1), rgba(11, 18, 25, 0.7));
  pointer-events: none;
}

.trust-section_posterText__freEc {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  text-align: left;
  pointer-events: none;
}

/* Light-on-dark title over the scrim; Lora 600 in the design becomes 500
   (600 is not loaded). */
.trust-section_posterTitle__LycL_ {
  font-family: var(--font-heading);
  color: var(--c-cream);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
}

.trust-section_posterMeta__Fn9y2 {
  font-size: 12px;
  color: rgba(245, 242, 235, 0.78);
  font-style: italic;
  margin-top: 6px;
  /* Short block: balance the line lengths. */
  text-wrap: balance;
}

/* Placement only; PlayBadge owns the disc. Gold on the dark poster imagery is
   the allowed surface. This card is decorative, not a control, so the badge
   never takes pointer events. */
.trust-section_posterPlay__3GXXw {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.trust-section_sessionsCtaRow__hlJFb {
  margin-top: 20px;
}

/* Outline pill on the cream surface: green-dark text, green-alpha border. */
.trust-section_sessionsCta__a_T_b {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-green-dark);
  border: 1px solid rgba(85, 111, 36, 0.3);
  padding: 13px 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.trust-section_sessionsCta__a_T_b:hover {
  background: rgba(85, 111, 36, 0.1);
  border-color: var(--c-green-dark);
}

.trust-section_sessionsCta__a_T_b:focus-visible {
  outline: 3px solid var(--c-green-dark);
  outline-offset: 3px;
}

/* ── 3 · Career experts behind the sessions ────────────────────────────────────── */

.trust-section_people__qjhjj {
  max-width: 960px;
  margin: 44px auto 0;
  padding: 0 32px;
  text-align: center;
}

.trust-section_peopleHeading__F1TVA {
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--c-light-head);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.trust-section_peopleSub__MeV5H {
  font-size: 14.5px;
  color: var(--c-light-mute);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 34px;
}

.trust-section_coachGrid__gtzVY {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 34px 30px;
}

.trust-section_coachCard__eqYh8 {
  padding: 0 8px;
  display: flex;
  flex-direction: column;
}

/* Extra class merged onto the shared CoachAvatar span: the design's warm ring,
   re-toned to golden-sand alphas because gold never sits on cream (globals
   rule). The lift lives on the avatar itself, a GRANDCHILD of the stagger
   container, so it never fights the .nari-reveal-stagger > * reveal transform
   on the card. */
.trust-section_coachPhoto__SBvUm {
  margin: 0 auto 16px;
  box-shadow: 0 0 0 1px rgba(168, 104, 32, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.trust-section_coachPhoto__SBvUm:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 2px rgba(168, 104, 32, 0.55),
    0 16px 30px -20px rgba(27, 15, 51, 0.5);
}

.trust-section_coachName__tQM1g {
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--c-light-head);
  font-weight: 500;
  text-align: center;
}

.trust-section_coachTitle__CM_uF {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-light-mute);
  letter-spacing: 0.04em;
  margin: 4px 0 12px;
  text-align: center;
}

.trust-section_coachQuote__jZGZy {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--c-light-mute);
  text-align: center;
}

/* Small standalone link; vertical padding brings the target to ~44px. */
.trust-section_coachLink__olRpU {
  font-size: 12px;
  color: var(--c-wood-oak);
  display: block;
  margin-top: auto;
  padding: 14px 8px;
  text-align: center;
  text-decoration: none;
}

.trust-section_coachLink__olRpU:hover {
  text-decoration: underline;
}

.trust-section_coachLink__olRpU:focus-visible {
  outline: 3px solid var(--c-green-dark);
  outline-offset: 2px;
  border-radius: 6px;
}

.trust-section_credentials__6sWqs {
  font-size: 14px;
  color: var(--c-light-body);
  max-width: 600px;
  margin: 28px auto 0;
  line-height: 1.75;
}

.trust-section_credentials__6sWqs strong {
  font-weight: 500;
  color: var(--c-light-head);
}

/* ── 4 · Deck intro + deck ─────────────────────────────────────────────────── */

.trust-section_deckIntro__dR5Wu {
  max-width: 820px;
  margin: 56px auto 0;
  padding: 0 32px;
  text-align: center;
}

.trust-section_deckIntroLead__UjpgP {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 19px;
  color: var(--c-green-dark);
  margin-bottom: 6px;
}

.trust-section_deckIntroSub__p_Kz1 {
  font-size: 14px;
  color: var(--c-light-mute);
}

.trust-section_deckWrap__aQ3C4 {
  position: relative;
  max-width: 620px;
  /* 56px, not 32px: the perch sits in the gap between the intro copy and the
     card, and at 32px that gap is only 85px on a phone, too short for the
     illustration to stand in without landing on someone's words. */
  margin: 56px auto 0;
  padding: 0 32px;
}

/* Bear perched on the deck corner. right = 24px from the deck edge plus the
   wrapper's 32px gutter (absolute positioning ignores the padding box). */
/* Still a small perch, but the pondering panda is portrait (0.9:1) where the
   old bear was 3:2, so the slot follows the art instead of letterboxing it.

   Anchored by its BOTTOM edge, not its top. `top` was the original anchor, and
   it made the intrusion into the card depend on the art's aspect ratio: the old
   3:2 bear was 69px tall at this width and dipped 17px over the card, but the
   portrait panda is 103px tall and dipped 51px, far enough to paint opaque
   watercolour over whole words of the first quote line at every phone width.
   `bottom: calc(100% - 17px)` pins the dip at 17px whatever the crop is, so
   re-cropping the art can never eat the copy again.

   The slot is 76px, not 92px, because the perch has to stand in the gap
   between the intro copy and the card. At 92px the portrait crop is 104px
   tall against a gap of 85px on a phone and 95px on desktop: too tall
   everywhere, which is why it was painting over the quote. 76px makes it 85px
   tall, and with the wider 56px gap above it that leaves real clearance top
   and bottom for the tilt swing. Verified by measurement at 320 to 1440 on
   all six cards, not by arithmetic. */
.trust-section_deckBear__rjz7P {
  position: absolute;
  bottom: calc(100% - 17px);
  right: 56px;
  width: 76px;
  z-index: 50;
  pointer-events: none;
}

/* Narrow phones give the perch even less room: the intro wraps to more lines
   and the gap collapses further. */
@media (max-width: 400px) {
  .trust-section_deckBear__rjz7P {
    width: 62px;
  }
}

/*
 * Community section: dark green gradient panel, gold hairline borders, bottom
 * gold glow with three fireflies drifting over it.
 *
 * Colors follow the landing token map (--c-* only); the rgba() values are the
 * design's alpha composites over the dark surface and stay literal on purpose.
 * One deliberate deviation: the chips intro lifts from the design's 0.62 cream
 * alpha to 0.68, because 0.62 composites to 4.44:1 on green-dark (just under
 * the 4.5:1 AA floor for 13.5px text); 0.68 lands at 4.98:1.
 */

.community-section_section__DEdXF {
  position: relative;
  overflow: hidden;
  padding: 56px 0 60px;
  background: linear-gradient(
    180deg,
    var(--c-green-deep) 0%,
    var(--c-green-deep) 22%,
    var(--c-green-dark) 100%
  );
  border-top: 1px solid rgba(221, 184, 74, 0.4);
  border-bottom: 1px solid rgba(221, 184, 74, 0.4);
}

/* ── Ambient layers ──────────────────────────────────────────────────────── */

.community-section_glowBottom__8vfHZ {
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
}

.community-section_fly1__ve7Hg {
  left: 26%;
  bottom: 120px;
}

.community-section_fly2__T_Q_w {
  left: 70%;
  bottom: 180px;
}

.community-section_fly3__xAoP5 {
  left: 52%;
  bottom: 90px;
}

/* ── Centered column ─────────────────────────────────────────────────────── */

.community-section_column__QAFWz {
  position: relative;
  max-width: 820px;
  text-align: center;
}

.community-section_eyebrow__8ebmB {
  margin: 0 0 22px;
}

.community-section_heading__ELgzo {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--c-text);
}

.community-section_headingItalic__qyCcc {
  font-style: italic;
  color: var(--c-gold);
}

.community-section_body__LzXH_ {
  max-width: 600px;
  margin: 0 auto 38px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(245, 240, 234, 0.86);
}

.community-section_quote__JgVZM {
  max-width: 560px;
  margin: 0 auto 28px;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: var(--c-text);
}

/* ── Office-hours illustration ───────────────────────────────────────────── */

.community-section_officeHours__BCWJc {
  max-width: 480px;
  margin: 0 auto 36px;
  padding: 22px 22px 20px;
  background: rgba(11, 18, 25, 0.22);
  border: 1px solid rgba(221, 184, 74, 0.32);
  border-radius: 20px;
}

.community-section_officeHoursTitle__zmYLt {
  margin-bottom: 14px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 19px;
  color: var(--c-text);
  text-align: left;
}

/* The gallery is one illustration now, not a grid of built tiles. Its own
   tiles carry their backgrounds, so it needs no surface of its own. */
.community-section_officeHoursArt__NaqEx {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Support pillars ─────────────────────────────────────────────────────── */

.community-section_pillars__8iTid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  max-width: 600px;
  margin: 0 auto 30px;
}

.community-section_pillar__Bq2IR {
  flex: 1 1;
  padding: 0 22px;
  text-align: center;
}

.community-section_pillarArt__SSN4Z {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 46px;
  margin: 0 auto 12px;
}

.community-section_leafArt__ttxvO {
  stroke: var(--c-gold);
}

.community-section_pillarTitle__1ysZ4 {
  margin-bottom: 5px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
}

.community-section_pillarBody__Q_cw2 {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(245, 240, 234, 0.72);
}

.community-section_pillarDivider__iqo5X {
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(245, 240, 234, 0.22), transparent);
}

/* ── Conversation chips (illustrative, non-interactive) ──────────────────── */

.community-section_chipsIntro__0rCdA {
  margin: 0 0 22px;
  font-size: 13.5px;
  color: rgba(245, 240, 234, 0.68);
}

.community-section_chipsRow__jFkzv {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 660px;
  margin: 0 auto;
}

.community-section_chip__vLpAg {
  padding: 10px 18px;
  background: rgba(245, 240, 234, 0.06);
  border: 1px solid rgba(245, 240, 234, 0.2);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--c-text);
  white-space: nowrap;
}

/* ── Mascot closer ───────────────────────────────────────────────────────── */

/* The closing illustration: the panda who was helped, now with a paw on a
   younger fox. A scene rather than an ornament, so no tilt, and sized to the
   art's 1.53:1 instead of the old 4:3 mascot box. */
.community-section_mascot__5B4WN {
  width: min(360px, 84vw);
  margin: 38px auto 16px;
}

.community-section_mascotImg__mHRrt {
  display: block;
  width: 100%;
  height: auto;
}

.community-section_closer__167yS {
  margin: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  color: var(--c-text);
}

/*
 * Pricing section. Light gradient surface, so the CTA is the shared forest
 * pill (gold never sits on cream or white). The rgba() values are the
 * design's alpha composites and stay literal per the landing conventions.
 * The design's 900px shell is narrower than the shared inner variants, so
 * the two wrappers define their own shell declarations.
 */

.pricing-section_section__cfeTZ {
  background: linear-gradient(
    180deg,
    var(--c-cream-light) 0%,
    #fff 26%,
    #fff 58%,
    var(--c-cream) 100%
  );
  padding: 56px 0;
}

/* Centered intro shell: eyebrow, heading, narrative, then the two panels. */
.pricing-section_intro__alFsa {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}

.pricing-section_eyebrow__u59zp {
  margin-bottom: 22px;
}

.pricing-section_heading__YPzhN {
  font-family: var(--font-heading);
  font-size: 36px;
  line-height: 1.18;
  color: var(--c-light-head);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.pricing-section_headingItalic__tOS87 {
  font-style: italic;
}

.pricing-section_narrative__F8Hav {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-light-mute);
  max-width: 640px;
  margin: 0 auto 30px;
  /* Short block: balance the line lengths. */
  text-wrap: balance;
}

.pricing-section_narrative__F8Hav strong {
  font-weight: 500;
  color: var(--c-light-head);
}

/* Two panels: the room list and the membership card. */
.pricing-section_grid__7hz_h {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 32px;
  align-items: start;
  text-align: left;
}

/* Left: dark green room panel. Gold label and dots are fine here (dark). */
.pricing-section_roomPanel__pNqhZ {
  background: linear-gradient(160deg, var(--c-green-deep), var(--c-green-dark));
  border-radius: 18px;
  padding: 30px 32px;
}

.pricing-section_roomLabel__B5lO_ {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 15px;
}

.pricing-section_roomList__F5_QT {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pricing-section_roomItem__P2BMU {
  font-size: 13.5px;
  color: rgba(245, 242, 235, 0.9);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pricing-section_roomDot__3yjWp {
  width: 5px;
  height: 5px;
  background: var(--c-gold);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Right: membership card. */
.pricing-section_card__S1_v2 {
  background: var(--c-cream-light);
  border: 1px solid rgba(85, 111, 36, 0.2);
  border-radius: 22px;
  padding: 34px 34px 28px;
  box-shadow: 0 30px 60px -34px rgba(27, 15, 51, 0.3);
  text-align: center;
  align-self: center;
}

.pricing-section_cardLabel__8P7TR {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-green-dark);
  margin-bottom: 14px;
}

.pricing-section_price__daUJK {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 500;
  color: var(--c-light-head);
  line-height: 1;
}

.pricing-section_priceUnit__xjg9j {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--c-light-mute);
}

.pricing-section_annualLine__e5nju {
  font-size: 13px;
  color: var(--c-light-mute);
  margin: 8px 0 22px;
}

/* Forest pill, not the mockup's gold: gold is banned on light surfaces.
   white-space normal so the label wraps instead of overflowing at 360px. */
.pricing-section_cta__OI_lY {
  width: 100%;
  justify-content: center;
  font-size: 15px;
  padding-left: 20px;
  padding-right: 20px;
  white-space: normal;
  text-align: center;
}

.pricing-section_ctaSub__yY5NC {
  font-size: 12.5px;
  color: var(--c-light-mute);
  margin-top: 10px;
}

.pricing-section_rule__MhMpU {
  border: none;
  border-top: 1px solid rgba(85, 111, 36, 0.14);
  margin: 24px 0 18px;
}

.pricing-section_fine__9ue25 {
  text-align: left;
}

.pricing-section_fineLine__Etx45 {
  font-size: 13.5px;
  line-height: 1.7;
  margin-bottom: 8px;
  color: var(--c-light-body);
  /* Short block: balance the line lengths. */
  text-wrap: balance;
}

.pricing-section_fineLine__Etx45 strong {
  font-weight: 500;
  color: var(--c-light-head);
}

.pricing-section_mission__Lyldl {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--c-green-dark);
  margin-top: 16px;
}

/* Download teasers. Plain divs, never links: the files are members-only in
   a private bucket, so there is no hover lift and no link affordance. */
.pricing-section_downloadsWrap__pkFfC {
  max-width: 900px;
  margin: 44px auto 0;
  padding: 0 32px;
}

.pricing-section_downloadsInner__ip47p {
  border-top: 1px solid rgba(85, 111, 36, 0.18);
  padding-top: 26px;
}

.pricing-section_downloadsLabel__Yird6 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-wood-oak);
  text-align: center;
  margin-bottom: 18px;
}

.pricing-section_downloadsGrid__8o5x5 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
}

.pricing-section_downloadCard__sSJ1i {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(85, 111, 36, 0.22);
  border-radius: 12px;
  padding: 12px 18px 12px 14px;
  box-shadow: 0 10px 22px -16px rgba(27, 15, 51, 0.3);
  color: var(--c-light-head);
}

.pricing-section_downloadIcon__yn8Ab {
  color: var(--c-wood-oak);
  flex-shrink: 0;
}

.pricing-section_downloadText__88nPG {
  min-width: 0;
}

.pricing-section_downloadTitle__scg4z {
  display: block;
  font-family: var(--font-heading);
  font-size: 14.5px;
  line-height: 1.3;
}

.pricing-section_downloadMeta__nALbN {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--c-light-mute);
  margin-top: 2px;
}

/* Where the design had a download arrow: a membership tag instead. */
.pricing-section_downloadTag__PKG6G {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--c-green-dark);
  text-align: right;
  max-width: 96px;
}

/* Tighter card padding on narrow phones so the pill label has room. */
@media (max-width: 420px) {
  .pricing-section_card__S1_v2 {
    padding: 28px 22px 24px;
  }
}

/*
 * CLOSE section: cream surface with the sunset-meadow scene bleeding off the
 * bottom edge. The rgba(245, 242, 235, x) stops in the veils are alpha
 * composites of the cream token, kept literal per the landing conventions.
 */

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

/* The scene bleeds 96px below the section so the asset's patched bottom band
   stays hidden; keep this inset exactly. */
.close-section_scene__kXJF0 {
  position: absolute;
  inset: 96px 0 -96px 0;
  z-index: 0;
  pointer-events: none;
}

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

/* Full-height veil: seams the section to pricing above and keeps the copy
   legible on the watercolour. */
.close-section_veilSeam__mOOkT {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--c-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. */
.close-section_veilUpper__Fj65c {
  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__F6n1B {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  padding: 52px 32px 340px;
  text-align: center;
}

.close-section_heading__noAa3 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--c-light-head);
  font-weight: 500;
  margin-bottom: 16px;
}

.close-section_headingItalic__IP5AK {
  font-style: italic;
}

.close-section_body__cmv6e {
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-light-body);
  max-width: 500px;
  margin: 0 auto 26px;
}

.close-section_cta__zbGOV {
}

.close-section_priceLine__Dh6iK {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--c-light-body);
}

/*
 * Landing page shell. The heavy lifting lives in the per-section modules under
 * components/marketing/landing/; this file only anchors the page container.
 * (The previous 1470-line single-module layout was retired with the 2026-08
 * redesign.)
 */

.page_page__duJP_ {
  position: relative;
  /* Widow/orphan control for the whole landing, inherited by every section.
   * `pretty` keeps a last line from stranding a single word, which is the
   * failure this page kept hitting ("...no pitch at the | end."). Carried over
   * from the pre-redesign page module, which set the same pair. */
  text-wrap: pretty;
}

/* Headings balance instead: even line lengths read better than one long line
 * plus a short one, and it fixes "Nari hands you a | resume." Browsers cap
 * balancing at a handful of lines, so this is safe on the clamped hero h1. */
.page_page__duJP_ h1,
.page_page__duJP_ h2,
.page_page__duJP_ h3 {
  text-wrap: balance;
}

/*
 * Webinar modal: the poster beside the copy, on the site's cream ground.
 *
 * Warm rather than urgent, deliberately. Promo modals reach for red badges and
 * countdowns; this one is a card with a photograph and a sentence, because the
 * thing it is inviting people to is free and the register of the rest of the
 * page is calm. The only saturated colour is the forest CTA.
 *
 * Motion rides the global system: the panel's entrance is a time-based
 * animation, so html[data-motion="static"] snaps it in with no per-component
 * media query (the attribute is the single source of truth). The overlay fade
 * is the same. Nothing here loops, so the continuous tier does not apply.
 *
 * Contrast on the #fffdf8 panel, all AA at their sizes:
 *   wood-oak on panel      5.4:1   eyebrow
 *   light-head on panel   14.5:1   headline, when
 *   #3c3a35 on panel       9.1:1   body
 *   #6b6560 on panel       5.3:1   subline, dismiss
 *   cream on green-dark    9.1:1   the LinkedIn CTA
 */

.webinar-modal_overlay__NDO02 {
  position: fixed;
  inset: 0;
  /* On the design system's scale rather than a local number. It was 120, which
     is below --z-toast (2000) and --z-modal (1000) both, so anything on the
     real scale rendered over this dialog. */
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(27, 15, 51, 0.55);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  animation: webinar-modal_webinarModalFade__VYbjT 220ms ease both;
}

@keyframes webinar-modal_webinarModalFade__VYbjT {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* The panel is a two-column card above 760px and a single column below it.
   `overflow: hidden` lets the poster bleed to the rounded corner without its
   own radius, which would leave a hairline of panel showing through. */
.webinar-modal_panel__Ou806 {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  /* minmax(0, 1fr), not the implicit `auto`. A grid row's default minimum is
     its content, so when the copy grew past max-height the row refused to
     shrink and `overflow: hidden` simply CUT the overspill: the body never
     became scrollable, it was clipped, and the footer links went with it.
     Pinning the row's minimum to 0 lets the row shrink and hands the overflow
     to .body, which is the element that knows how to scroll it. */
  grid-template-rows: minmax(0, 1fr);
  width: min(880px, 100%);
  max-height: min(90vh, 720px);
  overflow: hidden;
  background: #fffdf8;
  border-radius: 20px;
  box-shadow: 0 30px 80px -24px rgba(27, 15, 51, 0.45);
  animation: webinar-modal_webinarModalRise__o31aC 260ms cubic-bezier(0.2, 0.65, 0.25, 1) both;
}

@keyframes webinar-modal_webinarModalRise__o31aC {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.webinar-modal_art__s4ji3 {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--cream-dark);
}

/* The same poster again, blurred and overscanned, purely as the ground the
   contained poster sits on. Without it a CONTAINED 4:5 poster leaves flat
   letterbox bars, which look like a loading error; a wash of the image's own
   colours reads as a deliberate presentation instead.

   Same `src`, same width/height and no `sizes` on either, so both <Image>s
   resolve to the identical srcset candidate and this costs no second request.
   `inset: -6%` overscans the blur past the box, otherwise blur() feathers the
   edges and a pale halo traces the band. */
.webinar-modal_artBackdrop__at8sV {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  filter: blur(24px) saturate(0.82);
  opacity: 0.55;
  display: block;
}

/* ABSOLUTE, so the poster cannot contribute its intrinsic height to the grid
   row. Left in flow it did: the 4:5 art scaled to the column width came out
   taller than the copy and drove the panel, leaving about 130px of empty
   cream under the last link. Out of flow, the COPY sets the panel height and
   the art fills whatever that turns out to be, which is the right way round
   for a card whose text is the content.

   CONTAIN, not cover. Cover crops to whatever aspect the band happens to be,
   and this poster is ALL TYPE: a wordmark at the top, "The Interview
   Advantage" down the left, "Tell Your Story." under it. Every crop cut some
   of it, and because the band's aspect moves with the viewport the cut moved
   too, which is why it broke on one phone and not another. Measured: the
   170px mobile band hid 62 to 68% of the poster across 360 to 430px wide, and
   the desktop column hid up to 39% once the speaker block made the panel
   taller. A sliced wordmark on an invitation reads as a scam, so the band
   stops cropping: the whole poster shows at every size and the blurred
   backdrop fills whatever the letterbox leaves. */
.webinar-modal_artImage__Htw8o {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.webinar-modal_body__XHOcw {
  min-width: 0;
  /* Pair to the row's minmax(0, …) above: without this the item's own auto
     minimum reinstates the same floor the track just gave up, and overflow-y
     has nothing to scroll. */
  min-height: 0;
  padding: 34px 34px 30px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.webinar-modal_eyebrow__DrgvT {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--wood-oak);
  margin: 0 0 14px;
}

.webinar-modal_headline__uMTaa {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(23px, 2.4vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--light-head);
  text-wrap: pretty;
  margin: 0;
}

.webinar-modal_copy__9JC3r {
  font-size: 14.5px;
  line-height: 1.7;
  color: #3c3a35;
  margin: 14px 0 0;
  text-wrap: pretty;
}

/* The date leads the sentence and is the one thing a reader scans for. */
.webinar-modal_when__iKpFJ {
  font-weight: 500;
  color: var(--light-head);
}

.webinar-modal_actions__9J4d9 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

/* Both watch links are real anchors opening the platform in a new tab, so the
   browser affordances survive. min-height is the touch-target floor. */
.webinar-modal_primaryCta__RNsiw,
.webinar-modal_secondaryCta__cEzh9 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.webinar-modal_primaryCta__RNsiw {
  background: var(--green-dark);
  color: var(--cream);
}

.webinar-modal_primaryCta__RNsiw:hover {
  background: var(--light-head);
}

.webinar-modal_secondaryCta__cEzh9 {
  border: 1.5px solid rgba(27, 15, 51, 0.3);
  color: var(--light-head);
}

.webinar-modal_secondaryCta__cEzh9:hover {
  border-color: var(--light-head);
  background: rgba(27, 15, 51, 0.04);
}

.webinar-modal_primaryCta__RNsiw:focus-visible,
.webinar-modal_secondaryCta__cEzh9:focus-visible,
.webinar-modal_notify__GhUVL:focus-visible,
.webinar-modal_dismiss__I8cYX:focus-visible,
.webinar-modal_close__Qmpv9:focus-visible {
  outline: 2px solid var(--light-head);
  outline-offset: 3px;
}

.webinar-modal_subline__5t2u3 {
  font-size: 13px;
  line-height: 1.6;
  color: #6b6560;
  margin: 14px 0 0;
}

/* ── Who is running this ───────────────────────────────────────────────────
   A tinted panel rather than another hairline row: it is a different KIND of
   information from the invite above it (who, not what and when), and the
   footer already owns the one rule in this card. The tint is the same
   cream-dark the poster sits on, so it reads as part of the card. */
.webinar-modal_speaker__rfWmD {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--cream-dark);
  border-radius: 12px;
}

/* Name, role and link on one wrapping line: three short things that belong
   together, and stacking them would make a four-line block out of a byline. */
.webinar-modal_speakerLine__2O3lN {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
}

.webinar-modal_speakerName__KfKvy {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  color: var(--light-head);
}

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

/* Pushed to the end of the line, so the name reads first and the link sits
   where a reader looks for an action. */
.webinar-modal_speakerLink__HRWOF {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--light-head);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.webinar-modal_speakerLink__HRWOF:hover {
  color: var(--green-dark);
}

.webinar-modal_speakerLink__HRWOF:focus-visible {
  outline: 2px solid var(--light-head);
  outline-offset: 3px;
  border-radius: 3px;
}

.webinar-modal_footer__fPrL_ {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(27, 15, 51, 0.1);
}

/* "Notify me" goes to /webinar, where the existing signup form already
   takes an email and the Engine sends the details. No second email capture is
   introduced here: one form, one place it is maintained. */
.webinar-modal_notify__GhUVL {
  font-size: 14px;
  font-weight: 500;
  color: var(--light-head);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.webinar-modal_notify__GhUVL:hover {
  color: var(--green-dark);
}

.webinar-modal_dismiss__I8cYX {
  font-size: 13.5px;
  color: #6b6560;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  min-height: 44px;
}

.webinar-modal_dismiss__I8cYX:hover {
  color: var(--light-head);
}

.webinar-modal_close__Qmpv9 {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 1;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: var(--light-head);
  background: rgba(255, 253, 248, 0.9);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.webinar-modal_close__Qmpv9:hover {
  background: #fffdf8;
}

@media (max-width: 760px) {
  .webinar-modal_overlay__NDO02 {
    padding: 16px;
  }

  /* The poster becomes a banner across the top rather than a column, capped so
     it can never push the CTAs below the fold on a short phone. */
  /* Two rows here: the poster band is a fixed 200 and the copy takes the rest,
     with the same minmax(0, …) floor so the copy scrolls instead of being cut
     off. A phone is where this bites: at 360x740 the panel hits its 92vh cap
     and the footer was landing below the fold with no way to reach it. */
  .webinar-modal_panel__Ou806 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    max-height: 92vh;
  }

  /* An EXPLICIT height, not a max. The poster is absolutely positioned so it
     contributes nothing to flow, which is what stops it driving the panel on
     desktop; in this single-column layout there is no grid stretch to give it
     height instead, so without this the whole band collapsed to zero and the
     art disappeared.

     The height comes from the ARTWORK now, not a guess. Below this breakpoint
     the band loads the landscape cut (see ART_MOBILE_MEDIA in the component,
     which must stay equal to the 760px above), and matching the band's aspect
     to that file's 900x496 means contain fits it exactly: no letterbox, no
     crop, and the art scales with the phone instead of sitting at a fixed
     160px wide the way the contained portrait poster did. */
  .webinar-modal_art__s4ji3 {
    height: auto;
    aspect-ratio: 900 / 496;
  }

  .webinar-modal_body__XHOcw {
    padding: 24px 22px 22px;
  }

  /* margin-left: auto only reads as "end of the line" while the line HOLDS.
     Once the name and role fill the width the link wraps, and the auto margin
     strands it alone against the right edge, away from the name it belongs
     to. On a wrapped line it should simply follow the role. */
  .webinar-modal_speakerLink__HRWOF {
    margin-left: 0;
  }
}