/* ==========================================================================
   newfunnelmv :: base.css
   Reset, container, grid, type scale, buttons, card, utilities.
   Uses only the tokens declared in tokens.css. Load tokens.css first.

   Type scale class names are Mindvalley's own, so a partial built from the
   page dumps maps 1:1 onto the markup you are reading.
   Breakpoints: sm 480px, md 768px, lg 992px, xl 1280px, content lock 1200px.
   ========================================================================== */

/* --- Space Grotesk, self hosted --------------------------------------------
   Three subsets of one variable face, weight 300 to 700, served from
   <out>/fonts next to this stylesheet. No Google Fonts request, no
   preconnect, nothing to block the first paint on a third party.
   Space Grotesk is SIL Open Font License 1.1, which permits redistribution
   inside a web build. Keep the files together with this notice.
   The unicode-range per subset is the one Google Fonts publishes, so a page
   that never prints a Vietnamese glyph never fetches that file. -----------*/
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/space-grotesk-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

/* --- Size adjusted fallback ------------------------------------------------
   Space Grotesk: 1000 upm, ascender 984, descender 273, x-height ~500.
   Arial: 2048 upm, x-height ratio .519. size-adjust = 500 / 519 = 96.3%.
   ascent 984 / .963 = 102.2%, descent 273 / .963 = 28.3%.
   Re-measure if you swap the display family. -------------------------------*/
@font-face {
  font-family: "Space Grotesk Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 96.3%;
  ascent-override: 102.2%;
  descent-override: 28.3%;
  line-gap-override: 0%;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

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

body {
  background: var(--color-surface);
  color: var(--color-ink-900);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .021875rem;
  line-height: 1.5rem;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; }

img, picture, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The dark hero band and the closing band paint white on violet, so a violet
   ring there is invisible. The source rings each control in its own colour;
   these two surfaces ring in white. */
.mv-hero-sales :focus-visible,
.mv-hero-event :focus-visible,
.mv-get-started :focus-visible { outline-color: #FFFFFF; }

/* --- Container ------------------------------------------------------------
   Mindvalley: 16px gutter to 1199px, then a hard 1200px with no gutter.
   The header uses the wider jumbo container, which is why the logo sits
   further left than the hero card above 1280px. -----------------------------*/
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  width: 100%;
}

.container-jumbo {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter-jumbo);
  padding-right: var(--gutter-jumbo);
  width: 100%;
}

@media (min-width: 992px) {
  .container-jumbo { padding-left: 40px; padding-right: 40px; }
}

@media (min-width: 1200px) {
  .container { max-width: var(--container-max); padding-left: 0; padding-right: 0; }
}

@media (min-width: 1280px) {
  .container-jumbo { max-width: var(--container-jumbo); }
}

/* --- Grid ------------------------------------------------------------------
   Six columns on mobile, twelve from 768px, 24px column gap throughout.
   Most blocks span the full width, so the grid aligns rather than columns.
   Responsive spans use a dash, not a colon, so no escaping is needed:
   .md-col-span-12, .lg-col-span-6. --------------------------------------------*/
.grid-12 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--space-6);
}

.col-span-6  { grid-column: span 6 / span 6; }
.col-span-12 { grid-column: span 12 / span 12; }

@media (min-width: 768px) {
  .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .md-col-span-5   { grid-column: span 5 / span 5; }
  .md-col-span-6   { grid-column: span 6 / span 6; }
  .md-col-span-7   { grid-column: span 7 / span 7; }
  .md-col-span-10  { grid-column: span 10 / span 10; }
  .md-col-span-12  { grid-column: span 12 / span 12; }
  .md-col-start-2  { grid-column-start: 2; }
}

@media (min-width: 992px) {
  .lg-col-span-5  { grid-column: span 5 / span 5; }
  .lg-col-span-6  { grid-column: span 6 / span 6; }
  .lg-col-span-7  { grid-column: span 7 / span 7; }
  .lg-col-span-12 { grid-column: span 12 / span 12; }
}

/* The two card hero butts its halves together, so it gets no column gap and
   clips both children with one radius on the parent. */
.grid-flush { column-gap: 0; }

/* --- Section rhythm --------------------------------------------------------
   Mindvalley grows the gaps as you descend: 40, 48, 64 on mobile and
   80, 80, 128 on desktop. Decision sections tight, reassurance airy. --------*/
/* Fixed 21 September 2026. Every .section used to take 128px on BOTH edges
   from 992px up, so two neighbouring blocks sat 256px apart and the page read
   as a series of islands. The source rhythm is top weighted: the decision
   blocks take 80 at the top, the reassurance blocks take 128, and the bottom
   edge is always the smaller number, because the next section's top padding
   is doing most of the work. Bands keep a symmetrical 40. */
.section       { padding-top: var(--space-12); padding-bottom: var(--space-8); }  /* 48 / 32 */
.section-airy  { padding-top: var(--space-16); padding-bottom: var(--space-8); }  /* 64 / 32 */
.section-tight { padding-top: var(--space-12); }                                 /* 48      */
.section-hero  { padding-top: 40px; padding-bottom: 40px; }                      /* 40 / 40 */

/* A strip is its own object, so it takes the source member banner's ladder
   rather than the page rhythm: py-6 on a phone, md:py-4 from 768px. The timer
   strip overrides this to a flat py-4 in blocks.css, which is what the source
   countdown bar takes at every width. Only the two real strips take this tier,
   the countdown and the promo banner. A closing band that carries a heading
   and a button is an ordinary .section. */
.section-band  { padding-top: var(--space-6); padding-bottom: var(--space-6); }   /* 24 / 24 */

@media (min-width: 768px) {
  .section-hero { padding-top: 80px; padding-bottom: 80px; }
  .section-band { padding-top: var(--space-4); padding-bottom: var(--space-4); } /* 16 / 16 */
}

@media (min-width: 992px) {
  .section       { padding-top: 80px; padding-bottom: var(--space-10); }   /*  80 / 40 */
  .section-airy  { padding-top: 128px; padding-bottom: var(--space-10); }  /* 128 / 40 */
  .section-tight { padding-top: 80px; }
}

/* --- Type scale ------------------------------------------------------------
   Only the top of the scale is responsive. Everything at .title-7 and below
   is one size at every width, which is what stops the phone layout reading
   as a shrunk desktop. Letter-spacing is in rem so it tracks the root size:
   .015625rem = 0.25px, .021875rem = 0.35px, .03125rem = 0.5px. -------------*/

.title-bold-2,
.title-bold-4,
.title-bold-5,
.title-bold-6,
.title-bold-7,
.title-bold-8,
.title-bold-9 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .015625rem;
}

.title-7,
.title-8,
.title-9,
.title-10 {
  font-family: var(--font-display);
  font-weight: 500;
}

.body,
.body-small,
.body-2-xs,
.caption-disclaimer {
  font-family: var(--font-body);
  font-weight: 400;
}

.button-text,
.button-text-small {
  font-family: var(--font-display);
  font-weight: 500;
}

/* .title-bold-2 is the hero display step. The source mastery sales page sets
   its h1 in title-bold-2 and its fast-action hero in title-3; the compiled px
   for title-bold-2 was not in the capture, so this is the recipe's own value,
   one step above title-bold-4 and fluid between them. It is the only size in
   this file that is not a grepped source figure, and it is the size Sabrina
   signed off on 21 September 2026. */
.title-bold-2 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.08; letter-spacing: -.01em; } /* 36 to 60 */

.title-bold-4 { font-size: 1.75rem;  line-height: 2.125rem; }  /* 28 / 34 */
.title-bold-5 { font-size: 1.5rem;   line-height: 1.875rem; }  /* 24 / 30 */
.title-bold-6 { font-size: 1.375rem; line-height: normal; }    /* 22      */
.title-bold-7 { font-size: 1.25rem;  line-height: normal; }    /* 20      */
.title-bold-8 { font-size: 1.125rem; line-height: normal; }    /* 18      */
.title-bold-9 { font-size: 1rem;     line-height: normal; }    /* 16      */

.title-7  { font-size: 1rem;    line-height: 1.25rem;  letter-spacing: .015625rem; } /* 16 / 20 */
.title-8  { font-size: .875rem; line-height: 1.125rem; letter-spacing: .015625rem; } /* 14 / 18 */
.title-9  { font-size: .75rem;  line-height: 1rem;     letter-spacing: .021875rem; } /* 12 / 16 */
.title-10 { font-size: .625rem; line-height: .875rem;  letter-spacing: .021875rem; } /* 10 / 14 */

.body       { font-size: 1.125rem; line-height: 1.5rem;  letter-spacing: .021875rem; } /* 18 / 24 */
.body-small { font-size: .875rem;  line-height: 1.25rem; letter-spacing: .021875rem; } /* 14 / 20 */
.body-2-xs  { font-size: .625rem;  line-height: .9375rem; letter-spacing: .03125rem; } /* 10 / 15 */

.caption-disclaimer { font-size: .75rem; line-height: 1rem; letter-spacing: .021875rem; } /* 12 / 16 */

.button-text       { font-size: 1rem;   line-height: 1.25rem; letter-spacing: .015625rem; } /* 16 / 20 */
.button-text-small { font-size: .75rem; line-height: 1rem;    letter-spacing: .021875rem; } /* 12 / 16 */

@media (min-width: 992px) {
  .title-bold-4 { font-size: 2.25rem;  line-height: 2.75rem;  } /* 36 / 44 */
  .title-bold-5 { font-size: 1.75rem;  line-height: 2.125rem; } /* 28 / 34 */
  .title-bold-6 { font-size: 1.5rem;   line-height: normal; }   /* 24      */
  .title-bold-7 { font-size: 1.375rem; line-height: normal; }   /* 22      */
  .title-bold-8 { font-size: 1.25rem;  line-height: normal; }   /* 20      */
  .title-bold-9 { font-size: 1.125rem; line-height: normal; }   /* 18      */
}

/* A real <h1> is mandatory. These classes carry the size, the tag carries the
   document outline, and the two are set independently. Never style a <p> into
   a heading, and never invent a class that is not in this file or blocks.css. */

/* --- Reading column --------------------------------------------------------
   The legal, support, calendar and share bands all want one measure and a
   consistent vertical rhythm, and each used to set both with an inline style
   on every element. This is that measure and that rhythm as a class, which
   closes Known gap 2. 760px at 18px body is about 78 characters, the width the
   source's own prose sits at inside its ten of twelve column inset. The three
   widths are the only ones the pages need: 560 for a checkout column, 640 for
   a form, 760 for prose, 860 for a wide argument column.

   Spacing inside .prose: 16px between siblings, 32px before a heading, 8px
   after one, nothing above the first child. Set it here and nowhere else. ---*/
.prose        { max-width: 760px; }
.prose-narrow { max-width: 640px; }
.prose-wide   { max-width: 860px; }
.prose-column { max-width: 560px; }

.prose > * + *                  { margin-top: var(--space-4); }
.prose > h1, .prose > h2,
.prose > h3                     { margin-top: var(--space-8); }
.prose > h1 + *, .prose > h2 + *,
.prose > h3 + *                 { margin-top: var(--space-2); }
.prose > :first-child           { margin-top: 0; }
.prose > :last-child            { margin-bottom: 0; }

/* Prose lists keep their markers. base.css strips list-style and padding from
   every CLASSED list, which is right for a grid or a rail and wrong for a list
   inside a legal clause, so put them back here. */
.prose ul, .prose ol { list-style: revert; padding-left: var(--space-6); }
.prose li + li       { margin-top: var(--space-2); }

/* --- Colour helpers -------------------------------------------------------- */
.ink-900 { color: var(--color-ink-900); }
.ink-700 { color: var(--color-ink-700); }
.ink-600 { color: var(--color-ink-600); }
.ink-500 { color: var(--color-ink-500); }
.ink-450 { color: var(--color-ink-450); }
.tick    { color: var(--color-success); }

/* --- Buttons ---------------------------------------------------------------
   One pill shape, three heights, three roles. The primary and accent fills
   are top to bottom gradients that FLATTEN on hover rather than lighten,
   which is Mindvalley's own behaviour and reads as a press. ----------------*/
.btn {
  align-items: center;
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  gap: var(--space-2);
  justify-content: center;
  letter-spacing: .015625rem;
  line-height: 1.25rem;
  text-align: center;
  text-decoration: none;
  transition: background var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              transform var(--duration) var(--ease);
  white-space: nowrap;
}

/* svg is display:block globally (see the reset above), which is right for a
   full-width media image but wrong for a sprite icon that needs to sit on
   the same line as a text label. Scope the fix to where icon-plus-label
   actually happens -- inside a .btn and inside the header -- rather than
   flipping the default everywhere, so a block-level svg elsewhere (the
   hidden .mv-sprite defs, a full-bleed hero image) keeps behaving as a
   block. */
.btn svg,
.mv-header svg {
  display: inline-block;
  vertical-align: middle;
}

.btn:hover { text-decoration: none; }

.btn:disabled,
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn-sm { height: 36px; padding: 0 var(--space-4); font-size: .75rem; line-height: 1rem; letter-spacing: .021875rem; }
.btn-md { height: 40px; padding: 0 var(--space-5); }
.btn-lg { height: 48px; padding: 0 var(--space-6); }

/* White on the old tint-to-primary gradient measured 3.44 at the top stop.
   Primary to deep measures 4.97 at its lightest point. 22 Sep 2026. */
.btn-primary {
  background: linear-gradient(to bottom, var(--color-primary), var(--color-primary-deep));
  color: #FFFFFF;
}
.btn-primary:hover { background: var(--color-primary-deep); }

.btn-outline {
  background: transparent;
  border: 2px solid var(--color-ink-900);
  color: var(--color-ink-900);
}
.btn-outline:hover { background: var(--color-ink-100); }

.btn-accent {
  background: linear-gradient(to bottom, var(--color-accent-top), var(--color-accent));
  box-shadow: var(--shadow-button);
  color: var(--color-on-accent);
  width: 100%;
}
.btn-accent:hover { background: var(--color-accent-top); box-shadow: var(--shadow-hover); }

/* The CTA is full width on mobile and hugs its label from 768px, except in
   the checkout card where it stays full width. */
.btn-fit { width: auto; }
.btn-block-mobile { width: 100%; }

@media (min-width: 768px) {
  .btn-block-mobile { width: auto; }
}

/* --- Card ------------------------------------------------------------------ */
.card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}

.card-flat   { box-shadow: none; border: 1px solid var(--color-ink-250); }
.card-option { box-shadow: var(--shadow-option); }
/* A card that manages its own inner padding, so .card's responsive ladder
   below never doubles the inset. */
.card-bare   { padding: 0; }

/* Selected payment option: 90 percent white laid over the accent, which gives
   a very pale accent wash rather than a tint token. */
.card-option[data-state="checked"] {
  background: linear-gradient(0deg, var(--color-card), var(--color-card)), var(--color-accent-top);
  border: 2px solid var(--color-accent);
}

@media (min-width: 768px) {
  .card { padding: var(--space-10); }
}

@media (min-width: 992px) {
  .card { padding: var(--space-14); }
}

/* After the ladder, so a radio option is 16px at every width and a bare card
   is 0 at every width. Both used to be beaten by .card's 992px rule, which put
   56px of padding inside a 16px option and inside the checkout panel. */
.card-option { padding: var(--space-4); }
.card-bare   { padding: 0; }

/* --- Pill badge ------------------------------------------------------------ */
.pill-badge {
  align-items: center;
  background: var(--color-accent-tint);
  border-radius: var(--radius-pill);
  color: var(--color-ink-900);
  display: inline-flex;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 500;
  gap: var(--space-2);
  letter-spacing: .021875rem;
  line-height: 1rem;
  padding: var(--space-1) var(--space-3);
  white-space: nowrap;
}

.pill-badge-primary { background: var(--color-primary); color: #FFFFFF; }

/* --- Utilities ------------------------------------------------------------- */

/* Countdown digits and prices. Without this the figure jitters every second. */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

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

/* Visibility. -up hides from that breakpoint, -down hides below it.
   Each is scoped to the range it applies to, so neither ever forces a display
   value back on and a flex or grid child keeps its own display. */
@media (max-width: 767.98px) { .hidden-md-down { display: none; } }
@media (min-width: 768px)    { .hidden-md-up   { display: none; } }
@media (max-width: 991.98px) { .hidden-lg-down { display: none; } }
@media (min-width: 992px)    { .hidden-lg-up   { display: none; } }

/* Horizontal rails keep their scroll and lose their scrollbar. */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* One line clamp on a story author, so a long name never pushes the card. */
.clamp-1 {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* --- Reduced motion --------------------------------------------------------
   Freeze movement, never remove content. A rail that stops auto scrolling
   must still be scrollable by hand. ----------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }

  .btn:hover { transform: none !important; }
}