/* templates/assets/site.css
 * The one shared stylesheet (spec section 5). Two parts, in this order:
 *
 * 1. The prototype's shared base layer, ported verbatim from
 *    evertrail-demo/funnel/_tokens.css: the reset, body/heading defaults,
 *    .wrap, .eyebrow, .lead, .section*, .btn*, .card*, .pill*, .quote,
 *    .check-list, .site-head/.site-foot, .media placeholder, and its two
 *    @media blocks — everything in that file except its :root block
 *    (which lives in tokens.css, since render keys it per brand) and
 *    .demo-ribbon (prototype-only chrome, dropped for the same reason
 *    spec 8.1 already drops editor.css/editor.js from the port).
 *    All six prototype pages already loaded this layer identically via
 *    one <link>, so there is no cross-page byte-identity question for
 *    it the way there is for part 2 — it is copied through unchanged.
 *
 * 2. The 27 selectors from the six pages' own inline <style> blocks that
 *    are byte-identical (whitespace-normalised) on every prototype page
 *    that defines them. Every other inline selector — page-only or one
 *    that differs between pages — lives in templates/assets/pages/<page>.css
 *    instead. See the M2 report for the full inventory and the proof that
 *    this split renders identically to the untouched prototype pages.
 *
 * Ported pages link tokens.css, then this file, then their own
 * pages/<page>.css, and do NOT also link _tokens.css — this file
 * supersedes it. That order reconstructs the prototype's own cascade
 * (_tokens.css, then the inline block), and lets a page-specific rule in
 * pages/<page>.css override a shared rule here at equal specificity,
 * exactly as the per-page layer is meant to.
 */
[hidden] { display: none !important; } /* a component's own display (e.g. .btn inline-flex) must never un-hide it */

/* Klemen's Sales v3 edits, 2026-09-21 (D105): every eyebrow a bit larger, one shared style. The
   prototype's 12px / .14em became 14px / .12em: the same 1.68px of tracking, so the larger label still
   reads as an eyebrow. Every eyebrow on every page reads these two values (.eyebrow here, the upsell
   timer's in upsell.css), so they move together. */
:root { --et-eyebrow-size: 14px; --et-eyebrow-tracking: .12em; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--mf-canvas); color: var(--mf-ink); font-family: var(--mf-font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--mf-font-display); font-variation-settings: "SOFT" 50; margin: 0; line-height: 1.1; letter-spacing: -.012em; color: var(--mf-ink); text-wrap: balance; }
h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 700; line-height: 1.04; }
h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 600; }
h3 { font-size: 21px; font-weight: 600; }
p { margin: 0; }
a { color: var(--mf-pine); }
img { max-width: 100%; display: block; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.eyebrow { font-size: var(--et-eyebrow-size); font-weight: 600; letter-spacing: var(--et-eyebrow-tracking); text-transform: uppercase; color: var(--mf-pine); }
.lead { font-size: 19px; color: var(--mf-slate); max-width: 62ch; }
.muted { color: var(--mf-slate); }
.small { font-size: 14px; }
.section { padding: 64px 0; }
.section.tight { padding: 40px 0; }
.section.alt { background: var(--mf-surface); }
.section.dark { background: var(--mf-g-deep); color: var(--mf-canvas); }
.section.dark h2, .section.dark h3 { color: var(--mf-canvas); }
.section.dark p { color: #C6D5CB; }
.section.dark .eyebrow { color: var(--mf-shallows); }
.divider { height: 1px; background: var(--mf-g-divider); }

/* buttons (brand §7) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--mf-font-body); font-weight: 600; font-size: 16px; line-height: 1; padding: 15px 26px; border-radius: var(--mf-radius-pill); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; white-space: nowrap; }
.btn, .media, .card, .decline { background-origin: border-box; background-repeat: no-repeat; }
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 2px; }
.btn-primary { position: relative; isolation: isolate; background: transparent; color: var(--mf-canvas); box-shadow: var(--mf-shadow-btn); }
.btn-primary::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--mf-g-summit); z-index: -1; }
.btn-solid { background: var(--mf-pine); color: var(--mf-canvas); }
.btn-ghost { background: transparent; color: var(--mf-forest); border-color: var(--mf-forest); }
.btn-ghost.on-dark { color: var(--mf-canvas); border-color: rgba(249,248,243,.5); }
.btn-soft { background: var(--mf-shallows); color: var(--mf-forest); }
.btn-secondary { background: var(--mf-surface); color: var(--mf-forest); border-color: var(--mf-forest); } /* Klemen's secondary button (Checkout v3): dark border, dark text, light background */
.btn-lg { font-size: 18px; padding: 18px 32px; }
.btn-block { width: 100%; }
.btn .sub { display: block; font-size: 12.5px; font-weight: 500; opacity: .85; }
.decline { display: inline-block; background: transparent; border: 2px dashed rgba(23,63,39,.45); color: var(--mf-slate); border-radius: var(--mf-radius-pill); padding: 12px 20px; font-size: 14px; font-family: var(--mf-font-body); cursor: pointer; text-decoration: none; }

/* cards, pills, misc */
.card { background: var(--mf-surface); border: 1px solid var(--mf-limestone); border-radius: var(--mf-radius-card); padding: 28px; }
.card.premium { background: var(--mf-g-shallows); border-color: var(--mf-line); }
.card.timber { background: var(--mf-g-timber); border: 1px solid #D9C39A; color: var(--mf-ink); }
.card.timber h3 { color: #5E4218; } .card.timber p { color: #6B4E22; }
.pill { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .06em; padding: 6px 12px; border-radius: var(--mf-radius-pill); }
.pill.pine { background: #DDEFE1; color: #1E5A30; } .pill.sky { background: #DCEBF8; color: #1F4E82; } .pill.water { background: #D6F0EC; color: #1F5F5A; } .pill.stone { background: #E7E2D6; color: #4A5560; } .pill.honey { background: #F3E6C8; color: #8C6428; }
.quote { border-left: 3px solid var(--mf-lake); padding-left: 18px; font-family: var(--mf-font-display); font-style: italic; font-size: 19px; color: var(--mf-ink); }
.quote small { display: block; font-family: var(--mf-font-body); font-style: normal; font-size: 13.5px; color: var(--mf-slate); margin-top: 8px; }
.stars { color: var(--mf-heartwood); letter-spacing: .1em; font-size: 14px; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--mf-ink); }
.check-list li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--mf-pine); margin-top: 2px; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center/60% no-repeat, linear-gradient(#000,#000); mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center/60% no-repeat; }
.check-list li::before { background: var(--mf-pine); }

/* site header / footer shared by all funnel pages */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; }
.site-head img { height: 30px; width: auto; }
.site-foot { padding: 40px 0; background: var(--mf-g-deep); color: #C6D5CB; font-size: 13.5px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.site-foot img { height: 26px; width: auto; }
.site-foot a { color: var(--mf-canvas); text-decoration: none; margin-right: 18px; }
.site-foot a:hover { text-decoration: underline; }

/* media placeholder (VSL / images) — brand gradient, no stock photos */
.media { position: relative; border-radius: 16px; overflow: hidden; background: var(--mf-g-deep); box-shadow: var(--mf-shadow-card); aspect-ratio: 16 / 9; display: grid; place-items: center; color: var(--mf-canvas); }
.media.r-4-5 { aspect-ratio: 4 / 5; } .media.r-1-1 { aspect-ratio: 1 / 1; }
.media .play { width: 72px; height: 72px; border-radius: 50%; background: rgba(249,248,243,.94); display: grid; place-items: center; color: var(--mf-forest); box-shadow: var(--mf-shadow-card); cursor: pointer; }
.media .play svg { width: 28px; height: 28px; margin-left: 4px; }
.media .tag { position: absolute; top: 14px; left: 14px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(11,26,17,.65); padding: 5px 9px; border-radius: 6px; }
.media .dur { position: absolute; bottom: 12px; right: 14px; font-size: 12px; font-family: ui-monospace, Menlo, monospace; background: rgba(11,26,17,.65); padding: 4px 8px; border-radius: 6px; }
.media .glow { position: absolute; inset: 0; background: radial-gradient(circle at 72% 18%, rgba(167,221,214,.28), transparent 46%); pointer-events: none; }

@media (max-width: 760px) { .section { padding: 44px 0; } .wrap, .wrap-narrow { padding: 0 18px; } }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

.fp-head .site-head > a { flex: 0 1 262px; min-width: 0; display: block; }
.fp-head .site-head img { width: 100%; height: auto; max-width: 262px; }
.fp-media-cap { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; color: var(--mf-slate); }
.fp-media-cap svg { width: 16px; height: 16px; color: var(--mf-pine); flex: none; }
.media .fp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: color-mix(in srgb, var(--mf-canvas) 25%, transparent); }
.media .fp-bar { z-index: 2; }
.media .fp-bar i { display: block; height: 100%; width: 0; background: var(--mf-shallows); transition: width 90s linear; }
.media.is-playing .fp-bar i { width: 100%; }
.media .fp-title { position: absolute; left: 14px; bottom: 30px; right: 64px; font-size: 13.5px; font-weight: 500; color: var(--mf-canvas); opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media .fp-title { z-index: 2; }
.media .fp-now { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: color-mix(in srgb, var(--mf-forest) 70%, transparent); padding: 5px 9px; border-radius: 6px; display: none; }
.media .fp-now { z-index: 2; }
.media.is-playing .fp-now { display: block; }
.media .play .fp-ic-pause { display: none; }
.media.is-playing .play .fp-ic-play { display: none; }
.media.is-playing .play .fp-ic-pause { display: block; margin-left: 0; }
.fp-table tr:last-child td { border-bottom: 0; }
.fp-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-foot small { opacity: .75; }
.media .fp-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(11,26,17,.42), rgba(11,26,17,.10) 42%, rgba(11,26,17,.68)); }
.media .glow { z-index: 2; }
.media .tag { z-index: 2; }
.media .dur { z-index: 2; }
.fp-head .pill svg { width: 13px; height: 13px; }
.fp-top-in img { height: 24px; width: auto; }
.fp-sep { width: 1px; height: 22px; background: var(--mf-limestone); }
@media (max-width: 760px) {
  .fp-sep { display: none; }
}
.fp-prod { font-weight: 600; font-size: 15px; color: var(--mf-ink); white-space: nowrap; }
@media (max-width: 760px) {
  .fp-prod { display: none; }
}
.fp-grow { flex: 1; }
.fp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.site-foot.min { padding: 26px 0; }

/* --- Klemen's M2 review, 2026-09-21 (D53): compact header, footer logo --------------------------- */
/* Every header except the checkout's own static bar: 93px -> ~56px. 15px + a 26px logo + 15px. */
.site-head:not(.fp-head-static) { padding-block: 15px; }
.site-head-brand { display: block; line-height: 0; }
.site-head-brand .site-head-logo { height: 26px; width: auto; max-width: 100%; display: block; }
/* Klemen, 2026-10-16: the sales header shows his headshot right of the logo, the two centred as one group. The 34px
   circle overhangs the 26px logo row by 4px each way (negative margins), so the bar stays ~56px. */
.site-head-brand.has-avatar { display: flex; align-items: center; justify-content: center; gap: 12px; margin-inline: auto; width: max-content; max-width: 100%; }
.site-head-brand .site-head-avatar { flex: none; width: 34px; height: 34px; margin-block: -4px; border-radius: 50%; object-fit: cover; border: 1px solid var(--mf-limestone); background: var(--mf-surface); }
.site-head-brand.has-avatar .site-head-logo { min-width: 0; }
/* The checkout bar keeps its own padding (checkout.css); only its logo is sized so the wider
   Mount Founder wordmark and the Secure checkout mark share one row at 390px. */
.site-head-brand-static .site-head-logo { height: 26px; width: auto; max-width: 100%; display: block; }
/* The checkout's bar pads itself (checkout.css .site-head-inner-static, 14px); the shared .site-head's
   18px on top of that made the "compact" bar 93-96px. One padding, so it lands at ~54px too. */
.site-head.fp-head-static { padding-block: 0; }
@media (max-width: 480px) { .site-head-brand-static .site-head-logo { height: auto; width: 100%; max-width: 190px; } }
.site-foot-brand { display: grid; gap: 10px; justify-items: start; }
.site-foot .site-foot-logo { height: 30px; width: auto; max-width: 100%; display: block; }

/* --- Upsell v2 (D61): the labelled frame where supplied-only media is still missing ------------- */
/* The author's portrait, a Why chart and an offer page's VSL are supplied, never generated. Until
   they are, the page shows this frame, as Klemen's sandbox does: 1px gray, 10px radius, the label
   over the ratio (templates/partials/media-frame.liquid). Shared: the sales page's About uses it
   too. */
.media-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; aspect-ratio: var(--et-frame-ratio, 16 / 9); padding: 20px; border: 1px solid #A0A0A0; border-radius: 10px; background: var(--mf-canvas); color: var(--mf-slate); font-size: 16px; font-weight: 500; line-height: 1.4; text-align: center; overflow: hidden; overflow-wrap: anywhere; }
.media-placeholder .placeholder-ratio { font-size: 13px; }
.media-placeholder.uv-frame-portrait { aspect-ratio: 4 / 5; height: 100%; }

/* --- Klemen's Results review, 2026-09-21 (D66): a header with a slot ------------------------------- */
/* Logo left, the slot right (the results page's Share), on one row at every width. A header without a
   slot keeps its centred logo. On a phone too narrow for both, the logo shrinks in proportion
   (max-height instead of a fixed height) rather than pushing Share off the row. */
.site-head-inner.has-slot { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; } /* Share's height, reserved: revealing it (M3) moves nothing */
.site-head-inner.has-slot .site-head-brand { flex: 0 1 auto; min-width: 0; }
.site-head-inner.has-slot .site-head-logo { width: auto; height: auto; max-width: 100%; max-height: 26px; }
.site-head-slot { flex: none; display: flex; align-items: center; gap: 10px; }

/* Klemen's ~56px header on a page with a header slot too: 10px + the slot's reserved 36px + 10px. (The results
   page's Share lived here until D226; it is in the title block now, and the results header has no slot.) */
.site-head.has-slot:not(.fp-head-static) { padding-block: 10px; }
.site-head-inner.has-slot { min-height: 36px; }

/* --- Klemen's payment-UX pass, 2026-09-22 (D199): the shared "Payment processing…" overlay ------ */
/* Built by base.js (window.__etPaymentOverlay), on checkout and every upsell/downsell alike. z-index
   200 sits above the TEST MODE ribbon (inline, z-index 100) and everything else in normal flow; a
   native <dialog> (the upsell decline popup) still renders above it regardless, in the browser's own
   top layer, and the overlay is hidden outright before Stripe's own 3-D Secure window can appear, so
   neither ever needs to out-rank the other by z-index alone. No new colour: the scrim is the brand ink
   at partial opacity, the card is the canvas surface, the spinner is the brand pine. */
[data-et-payment-overlay] { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: color-mix(in srgb, var(--mf-ink) 55%, transparent); }
[data-et-payment-overlay][hidden] { display: none; }
[data-et-payment-overlay-card] { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 320px; padding: 28px 32px; border-radius: var(--mf-radius-card); background: var(--mf-canvas); color: var(--mf-ink); box-shadow: var(--mf-shadow-card); text-align: center; }
[data-et-payment-spinner] { width: 34px; height: 34px; border: 3px solid color-mix(in srgb, var(--mf-pine) 25%, transparent); border-top-color: var(--mf-pine); border-radius: 50%; animation: et-payment-spin .8s linear infinite; }
[data-et-payment-overlay-text] { margin: 0; font-family: var(--mf-font-display); font-size: 17px; font-weight: 600; }
[data-et-payment-overlay-note] { margin: 0; font-size: 14px; color: var(--mf-slate); }
@keyframes et-payment-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { [data-et-payment-spinner] { animation: none; } }

/* Video guide card (D410, D478): shared by the Results page's Results Page video guide (result-sections.liquid) and the
   Product Access page's Product Access Page video guide (access.liquid), both through partials/video-guide.liquid. base.js
   flips data-expanded. Moved here from results.css so the access page, which loads another sheet, can show it. */
/* The card, as D410 first wrote it: the provider's player sits in the card, playable small beside its words; Expand moves it full width under them and Collapse moves it back. Only grid areas change, so the iframe never moves and keeps playing. Never a modal. On a phone the player is always full width, with no button. */
.fp-vg { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); grid-template-areas: "media copy"; gap: 22px; align-items: center; padding: 18px; margin-bottom: 18px; }
.fp-vg-media { grid-area: media; position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 80% 0%, rgba(212, 168, 87, .35), transparent 55%), linear-gradient(135deg, var(--mf-forest), var(--mf-pine)); box-shadow: 0 14px 30px -18px rgba(13, 38, 24, .55); }
.fp-vg-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fp-vg-copy { grid-area: copy; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "title" "note" "toggle"; row-gap: 5px; align-items: center; justify-items: start; min-width: 0; }
.fp-vg-eyebrow { grid-area: eyebrow; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mf-pine); }
.fp-vg-title { grid-area: title; margin: 0; font-family: var(--mf-font-display); font-weight: 600; font-size: 21px; line-height: 1.25; color: var(--mf-ink); }
.fp-vg-note { grid-area: note; margin: 0; font-size: 14.5px; color: var(--mf-slate); }
.fp-vg-toggle { grid-area: toggle; margin-top: 9px; }
.fp-vg-toggle span { display: inline-flex; align-items: center; gap: 8px; }
.fp-vg-toggle svg { width: 15px; height: 15px; flex: none; }
.fp-vg-toggle[aria-expanded="true"] .fp-vg-expand, .fp-vg-toggle[aria-expanded="false"] .fp-vg-collapse { display: none; }
.fp-vg[data-expanded="true"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "media"; gap: 16px; }
.fp-vg[data-expanded="true"] .fp-vg-copy { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eyebrow toggle" "title toggle"; column-gap: 18px; }
.fp-vg[data-expanded="true"] .fp-vg-note { display: none; }
.fp-vg[data-expanded="true"] .fp-vg-toggle { margin-top: 0; }
.fp-vg[data-expanded="true"] .fp-vg-media { animation: fp-vg-grow .32s ease both; }
@keyframes fp-vg-grow { from { opacity: .4; transform: scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .fp-vg, .fp-vg[data-expanded="true"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "media"; gap: 14px; padding: 14px; }
  .fp-vg-copy, .fp-vg[data-expanded="true"] .fp-vg-copy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "title" "note"; }
  .fp-vg-title { font-size: 19px; }
  .fp-vg[data-expanded="true"] .fp-vg-note { display: block; }
  .fp-vg-toggle { display: none; }
  .fp-vg[data-expanded="true"] .fp-vg-media { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .fp-vg[data-expanded="true"] .fp-vg-media { animation: none; } }