/* templates/assets/pages/sales.css
 * Page-specific layer for body.et-p-sales (port of evertrail-demo/funnel/sales.html).
 * Selectors here are either unique to this page or differ from another
 * page's version of the same selector; both cases stay out of site.css by
 * design (spec 8.1, "The CSS trap"). Selector text is unprefixed and safe
 * because this file is linked only on this page, after site.css, so a rule
 * here overrides a shared rule of equal specificity for the same selector
 * text only when both target the same selector text (they never do here —
 * see the M2 report's shared/per-page partition).
 */
.fp-head:where(:not(.fp-sales-checkout *)) { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--mf-canvas) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--mf-limestone); }
.fp-head .site-head:where(:not(.fp-sales-checkout *)) { padding: 14px 0; }
.fp-head .btn:where(:not(.fp-sales-checkout *)) { padding: 12px 20px; font-size: 15px; }
.fp-head-note:where(:not(.fp-sales-checkout *)) { font-size: 13.5px; color: var(--mf-slate); }
.fp-head-right:where(:not(.fp-sales-checkout *)) { display: flex; align-items: center; gap: 16px; flex: none; }
.fp-hero:where(:not(.fp-sales-checkout *)) { background: var(--mf-g-morning); padding: 56px 0 72px; }
.fp-hero-grid:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: 1.02fr 1fr; gap: 52px; align-items: center; }
.fp-hero h1:where(:not(.fp-sales-checkout *)) { margin: 14px 0 18px; max-width: 14ch; }
.fp-hero .lead:where(:not(.fp-sales-checkout *)) { margin-bottom: 28px; }
.fp-cta-row:where(:not(.fp-sales-checkout *)) { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.fp-micro:where(:not(.fp-sales-checkout *)) { font-size: 14px; color: var(--mf-slate); margin-top: 14px; }
.fp-sec-head:where(:not(.fp-sales-checkout *)) { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.fp-sec-head h2:where(:not(.fp-sales-checkout *)) { margin: 12px 0 14px; }
.fp-sec-head p:where(:not(.fp-sales-checkout *)) { color: var(--mf-slate); font-size: 18px; }
.fp-prose:where(:not(.fp-sales-checkout *)) { max-width: 66ch; margin: 0 auto; display: grid; gap: 20px; font-size: 18px; }
.fp-prose .eyebrow:where(:not(.fp-sales-checkout *)) { display: block; }
.fp-prose h2:where(:not(.fp-sales-checkout *)) { margin-top: 10px; }
.fp-prose strong:where(:not(.fp-sales-checkout *)) { font-weight: 600; color: var(--mf-forest); }
.fp-cards:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fp-cards-2:where(:not(.fp-sales-checkout *)) { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-inline: auto; }
/* D537: two cards, centred, no empty third column */
.fp-card:where(:not(.fp-sales-checkout *)) { background: var(--mf-surface); border: 1px solid var(--mf-limestone); border-radius: var(--mf-radius-card); padding: 24px; display: grid; gap: 10px; align-content: start; }
.fp-card .fp-n:where(:not(.fp-sales-checkout *)) { font-family: var(--mf-font-display); font-weight: 600; font-size: 15px; color: var(--mf-pine); display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mf-shallows); }
.fp-card h3:where(:not(.fp-sales-checkout *)) { font-size: 20px; }
.fp-card .fp-card-line:where(:not(.fp-sales-checkout *)) { margin-top: -4px; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--mf-pine); }
/* D539 */
/* D538: a card's graphic (partials/fp-graphic.liquid) in place of its number. */
.fp-graphic:where(:not(.fp-sales-checkout *)) { width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center; background: var(--mf-g-shallows, var(--mf-shallows)); border: 1px solid var(--mf-line); }
.fp-graphic .fp-g-line:where(:not(.fp-sales-checkout *)) { stroke: var(--mf-forest); }
.fp-graphic .fp-g-accent:where(:not(.fp-sales-checkout *)) { stroke: var(--mf-pine); }
.fp-graphic .fp-g-fill:where(:not(.fp-sales-checkout *)) { fill: var(--mf-surface); }
.fp-graphic .fp-g-bar:where(:not(.fp-sales-checkout *)) { fill: var(--mf-pine); }
.fp-graphic .fp-g-soft:where(:not(.fp-sales-checkout *)) { fill: var(--mf-surface); stroke: var(--mf-pine); stroke-width: 2; }
.fp-graphic .fp-g-dot:where(:not(.fp-sales-checkout *)) { fill: var(--mf-forest); }
.fp-card p:where(:not(.fp-sales-checkout *)) { color: var(--mf-slate); font-size: 15.5px; line-height: 1.55; }
.fp-card.wide:where(:not(.fp-sales-checkout *)) { grid-column: 1 / -1; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; background: var(--mf-g-shallows); }
.fp-card.wide h3:where(:not(.fp-sales-checkout *)) { grid-column: 2; margin-top: 0; }
.fp-card.wide p:where(:not(.fp-sales-checkout *)) { grid-column: 2; }
.fp-card.wide .fp-n:where(:not(.fp-sales-checkout *)) { grid-row: 1 / span 2; width: 44px; height: 44px; font-size: 17px; background: var(--mf-surface); }
.fp-sample:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: start; }
.fp-sample-side:where(:not(.fp-sales-checkout *)) { position: sticky; top: 96px; }
.fp-sample-side h2:where(:not(.fp-sales-checkout *)) { margin: 12px 0 14px; }
.fp-sample-side p:where(:not(.fp-sales-checkout *)) { color: var(--mf-slate); }
.fp-sample-side .pill:where(:not(.fp-sales-checkout *)) { margin-top: 18px; }
.fp-browser:where(:not(.fp-sales-checkout *)) { border: 1px solid var(--mf-limestone); border-radius: 14px; background: var(--mf-canvas); box-shadow: var(--mf-shadow-card); overflow: hidden; }
.fp-browser-bar:where(:not(.fp-sales-checkout *)) { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--mf-surface); border-bottom: 1px solid var(--mf-limestone); }
.fp-dots:where(:not(.fp-sales-checkout *)) { display: flex; gap: 6px; }
.fp-dots i:where(:not(.fp-sales-checkout *)) { width: 10px; height: 10px; border-radius: 50%; background: var(--mf-limestone); }
.fp-url:where(:not(.fp-sales-checkout *)) { flex: 1; font-size: 12.5px; color: var(--mf-slate); background: var(--mf-canvas); border: 1px solid var(--mf-limestone); border-radius: 8px; padding: 6px 12px; font-family: ui-monospace, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-results:where(:not(.fp-sales-checkout *)) { padding: 26px 28px 0; position: relative; }
.fp-results-head:where(:not(.fp-sales-checkout *)) { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--mf-limestone); margin-bottom: 22px; }
.fp-results-head h3:where(:not(.fp-sales-checkout *)) { font-size: 22px; }
.fp-results-head .small:where(:not(.fp-sales-checkout *)) { margin-top: 4px; }
.fp-results-pills:where(:not(.fp-sales-checkout *)) { display: flex; gap: 8px; flex-wrap: wrap; }
.fp-rsec:where(:not(.fp-sales-checkout *)) { display: grid; gap: 10px; margin-bottom: 26px; }
.fp-rsec-t:where(:not(.fp-sales-checkout *)) { display: flex; align-items: center; gap: 10px; }
.fp-rsec-t .fp-n:where(:not(.fp-sales-checkout *)) { font-family: var(--mf-font-display); font-weight: 600; font-size: 13px; color: var(--mf-pine); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mf-shallows); }
.fp-rsec-t h4:where(:not(.fp-sales-checkout *)) { font-size: 18px; }
.fp-rsec p:where(:not(.fp-sales-checkout *)) { font-size: 15.5px; line-height: 1.6; }
.fp-rsec .fp-callout:where(:not(.fp-sales-checkout *)) { border-left: 3px solid var(--mf-lake); padding: 10px 14px; background: var(--mf-surface); border-radius: 0 10px 10px 0; font-size: 14.5px; }
.fp-table:where(:not(.fp-sales-checkout *)) { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--mf-surface); border: 1px solid var(--mf-limestone); border-radius: 10px; overflow: hidden; }
.fp-table th:where(:not(.fp-sales-checkout *)) { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--mf-limestone); vertical-align: top; }
.fp-table td:where(:not(.fp-sales-checkout *)) { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--mf-limestone); vertical-align: top; }
.fp-table th:where(:not(.fp-sales-checkout *)) { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mf-slate); font-weight: 600; background: var(--mf-canvas); }
.fp-table th.num:where(:not(.fp-sales-checkout *)) { text-align: right; }
.fp-table td .small:where(:not(.fp-sales-checkout *)) { display: block; margin-top: 2px; }
.fp-table tfoot td:where(:not(.fp-sales-checkout *)) { font-weight: 600; background: var(--mf-canvas); }
.fp-results-fade:where(:not(.fp-sales-checkout *)) { position: relative; height: 96px; margin-top: -40px; background: linear-gradient(180deg, transparent, var(--mf-canvas) 70%); display: grid; place-items: end center; padding-bottom: 16px; }
.fp-results-fade span:where(:not(.fp-sales-checkout *)) { font-size: 13px; color: var(--mf-slate); background: var(--mf-surface); border: 1px solid var(--mf-limestone); border-radius: 999px; padding: 6px 12px; }
.fp-steps:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fp-step:where(:not(.fp-sales-checkout *)) { padding: 26px; border-radius: var(--mf-radius-card); border: 1px solid var(--mf-limestone); background: var(--mf-surface); }
.fp-step .fp-big:where(:not(.fp-sales-checkout *)) { font-family: var(--mf-font-display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--mf-pine); margin-bottom: 14px; }
.fp-step h3:where(:not(.fp-sales-checkout *)) { margin-bottom: 8px; }
.fp-step p:where(:not(.fp-sales-checkout *)) { color: var(--mf-slate); font-size: 15.5px; }
.fp-two:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fp-two .card h3:where(:not(.fp-sales-checkout *)) { margin-bottom: 16px; }
.fp-not-list:where(:not(.fp-sales-checkout *)) { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fp-not-list li:where(:not(.fp-sales-checkout *)) { display: flex; gap: 12px; align-items: flex-start; color: var(--mf-slate); }
.fp-not-list li:where(:not(.fp-sales-checkout *))::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--mf-line); margin-top: 2px; background: linear-gradient(var(--mf-slate), var(--mf-slate)) center / 10px 1.5px no-repeat; }
.fp-proof:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.fp-proof .card:where(:not(.fp-sales-checkout *)) { display: grid; gap: 14px; align-content: start; }
.fp-proof .quote:where(:not(.fp-sales-checkout *)) { border: 0; padding: 0; font-size: 18px; }
.fp-who:where(:not(.fp-sales-checkout *)) { display: flex; align-items: center; gap: 12px; }
.fp-who .fp-av:where(:not(.fp-sales-checkout *)) { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mf-font-display); font-weight: 600; font-size: 14px; background: var(--mf-shallows); color: var(--mf-forest); }
.card.timber .fp-who .fp-av:where(:not(.fp-sales-checkout *)) { background: var(--mf-surface); color: var(--mf-heartwood); }
.fp-who b:where(:not(.fp-sales-checkout *)) { display: block; font-size: 15px; font-weight: 600; }
.fp-who span:where(:not(.fp-sales-checkout *)) { font-size: 13.5px; color: var(--mf-slate); }
.card.timber .fp-who span:where(:not(.fp-sales-checkout *)) { color: var(--mf-heartwood); }
.card.timber .quote:where(:not(.fp-sales-checkout *)) { color: var(--mf-ink); }
.fp-about:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: 72px 1fr; gap: 24px; align-items: start; max-width: 800px; margin: 0 auto; }
.fp-about img:where(:not(.fp-sales-checkout *)) { width: 72px; height: 72px; border-radius: 16px; border: 1px solid var(--mf-limestone); background: var(--mf-surface); padding: 8px; }
.fp-about h2:where(:not(.fp-sales-checkout *)) { margin: 6px 0 12px; }
.fp-about p:where(:not(.fp-sales-checkout *)) { color: var(--mf-slate); max-width: 62ch; }
.fp-facts:where(:not(.fp-sales-checkout *)) { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 18px; }
/* Klemen, 2026-10-16: the about's facts row spans the whole container under portrait and text, the three facts centred in equal columns. */
.fp-about > .fp-facts:where(:not(.fp-sales-checkout *)) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 20px; margin-top: 8px; text-align: center; }
.fp-facts div b:where(:not(.fp-sales-checkout *)) { display: block; font-family: var(--mf-font-display); font-weight: 600; font-size: 24px; color: var(--mf-ink); }
.fp-facts div span:where(:not(.fp-sales-checkout *)) { font-size: 13.5px; color: var(--mf-slate); }
.fp-price:where(:not(.fp-sales-checkout *)) { max-width: 620px; margin: 0 auto; padding: 36px; display: grid; gap: 22px; text-align: left; }
.fp-price-top:where(:not(.fp-sales-checkout *)) { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.fp-price-top h3:where(:not(.fp-sales-checkout *)) { font-size: 24px; }
.fp-amount:where(:not(.fp-sales-checkout *)) { font-family: var(--mf-font-display); font-weight: 700; font-size: 52px; line-height: 1; letter-spacing: -.02em; }
.fp-amount small:where(:not(.fp-sales-checkout *)) { font-family: var(--mf-font-body); font-weight: 500; font-size: 15px; color: var(--mf-slate); margin-left: 6px; letter-spacing: 0; }
.fp-price .check-list:where(:not(.fp-sales-checkout *)) { font-size: 16px; }
.fp-price .btn:where(:not(.fp-sales-checkout *)) { width: 100%; }
.fp-price .fp-micro:where(:not(.fp-sales-checkout *)) { margin-top: -8px; text-align: center; }
.fp-faq:where(:not(.fp-sales-checkout *)) { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.fp-faq details:where(:not(.fp-sales-checkout *)) { background: var(--mf-surface); border: 1px solid var(--mf-limestone); border-radius: 14px; padding: 0 22px; }
.fp-faq summary:where(:not(.fp-sales-checkout *)) { list-style: none; cursor: pointer; padding: 18px 0; font-family: var(--mf-font-display); font-weight: 600; font-size: 19px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.fp-faq summary:where(:not(.fp-sales-checkout *))::-webkit-details-marker { display: none; }
/* The plus and minus are drawn as two 12x2 bars, not glyphs, so they sit at the circle's exact middle (Klemen, 2026-10-16: the glyph rode low). */
.fp-faq summary:where(:not(.fp-sales-checkout *))::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(var(--mf-pine), var(--mf-pine)) center / 12px 2px no-repeat, linear-gradient(var(--mf-pine), var(--mf-pine)) center / 2px 12px no-repeat, var(--mf-shallows); }
.fp-faq details[open] summary:where(:not(.fp-sales-checkout *))::after { background: linear-gradient(var(--mf-pine), var(--mf-pine)) center / 12px 2px no-repeat, var(--mf-shallows); }
.fp-faq details p:where(:not(.fp-sales-checkout *)) { padding: 0 0 20px; color: var(--mf-slate); max-width: 64ch; }
.fp-close:where(:not(.fp-sales-checkout *)) { background: var(--mf-g-alpenglow); color: var(--mf-canvas); padding: 84px 0; text-align: center; }
.fp-close h2:where(:not(.fp-sales-checkout *)) { color: var(--mf-canvas); max-width: 18ch; margin: 12px auto 16px; }
.fp-close p:where(:not(.fp-sales-checkout *)) { color: color-mix(in srgb, var(--mf-canvas) 78%, transparent); max-width: 52ch; margin: 0 auto 30px; font-size: 18px; }
.fp-close .eyebrow:where(:not(.fp-sales-checkout *)) { color: var(--mf-shallows); }
.fp-btn-light:where(:not(.fp-sales-checkout *)) { background: var(--mf-canvas); color: var(--mf-forest); box-shadow: var(--mf-shadow-card); }
.fp-close .fp-cta-row:where(:not(.fp-sales-checkout *)) { justify-content: center; }
.fp-close .btn-primary:where(:not(.fp-sales-checkout *)) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--mf-canvas) 40%, transparent), var(--mf-shadow-btn); }
/* the primary CTA on the dark closing image keeps a light hairline edge (2026-10-16) */
.fp-close .fp-micro:where(:not(.fp-sales-checkout *)) { color: color-mix(in srgb, var(--mf-canvas) 65%, transparent); }
@media (max-width: 900px) {
  .fp-hero-grid:where(:not(.fp-sales-checkout *)) { grid-template-columns: 1fr; }
  .fp-cards:where(:not(.fp-sales-checkout *)) { grid-template-columns: 1fr; }
  .fp-sample:where(:not(.fp-sales-checkout *)) { grid-template-columns: 1fr; }
  .fp-steps:where(:not(.fp-sales-checkout *)) { grid-template-columns: 1fr; }
  .fp-two:where(:not(.fp-sales-checkout *)) { grid-template-columns: 1fr; }
  .fp-proof:where(:not(.fp-sales-checkout *)) { grid-template-columns: 1fr; }
  .fp-hero h1:where(:not(.fp-sales-checkout *)) { max-width: none; }
  .fp-sample-side:where(:not(.fp-sales-checkout *)) { position: static; }
  .fp-card.wide:where(:not(.fp-sales-checkout *)) { grid-template-columns: auto 1fr; }
}
@media (max-width: 760px) {
  .fp-hero:where(:not(.fp-sales-checkout *)) { padding: 36px 0 52px; }
  .fp-head-note:where(:not(.fp-sales-checkout *)) { display: none; }
  .fp-head .btn:where(:not(.fp-sales-checkout *)) { padding: 10px 16px; font-size: 14px; }
  .fp-head-price:where(:not(.fp-sales-checkout *)) { display: none; }
  .site-foot:where(:not(.fp-sales-checkout *)) { padding-bottom: 80px; }
  .fp-about:where(:not(.fp-sales-checkout *)) { grid-template-columns: 1fr; }
  .fp-price:where(:not(.fp-sales-checkout *)) { padding: 26px; }
  .fp-results:where(:not(.fp-sales-checkout *)) { padding: 20px 18px 0; }
  .fp-close:where(:not(.fp-sales-checkout *)) { padding: 60px 0; }
  .fp-cta-row .btn-lg:where(:not(.fp-sales-checkout *)) { width: 100%; }
  .media .play:where(:not(.fp-sales-checkout *)) { width: 56px; height: 56px; }
  .media .play svg:where(:not(.fp-sales-checkout *)) { width: 22px; height: 22px; }
  .fp-table:where(:not(.fp-sales-checkout *)) { font-size: 13px; }
  .fp-table th:where(:not(.fp-sales-checkout *)) { padding: 8px; }
  .fp-table td:where(:not(.fp-sales-checkout *)) { padding: 8px; }
}
.fp-img:where(:not(.fp-sales-checkout *)) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.media .play:where(:not(.fp-sales-checkout *)) { position: relative; z-index: 2; }
.fp-figure:where(:not(.fp-sales-checkout *)) { position: relative; overflow: hidden; border-radius: var(--mf-radius-card); background: var(--mf-g-jasna); box-shadow: var(--mf-shadow-card); aspect-ratio: 16 / 9; }
.fp-figure.r-4-5:where(:not(.fp-sales-checkout *)) { aspect-ratio: 4 / 5; }
.fp-figure.r-1-1:where(:not(.fp-sales-checkout *)) { aspect-ratio: 1 / 1; }
.fp-split:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: .92fr 1fr; gap: 46px; align-items: center; }
.fp-split .fp-prose:where(:not(.fp-sales-checkout *)) { margin: 0; }
.fp-step-img:where(:not(.fp-sales-checkout *)) { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 1 / 1; background: var(--mf-g-jasna); margin-bottom: 18px; }
.fp-sample-side .fp-figure:where(:not(.fp-sales-checkout *)) { margin-top: 20px; }
.fp-fit-grid:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; align-items: center; }
.fp-fit-grid .fp-two:where(:not(.fp-sales-checkout *)) { grid-template-columns: 1fr; }
.fp-who .fp-av:where(:not(.fp-sales-checkout *)) { width: 56px; height: 56px; overflow: hidden; padding: 0; position: relative; }
.fp-about:where(:not(.fp-sales-checkout *)) { grid-template-columns: 120px minmax(0, 1fr); }
.fp-about .fp-portrait:where(:not(.fp-sales-checkout *)) { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; padding: 0; border: 1px solid var(--mf-limestone); background: var(--mf-surface); }
.fp-price:where(:not(.fp-sales-checkout *)) { max-width: 780px; grid-template-columns: 210px minmax(0, 1fr); column-gap: 30px; align-items: center; }
.fp-price-body:where(:not(.fp-sales-checkout *)) { display: grid; gap: 22px; }
.fp-close:where(:not(.fp-sales-checkout *)) { position: relative; overflow: hidden; }
.fp-close > .fp-img:where(:not(.fp-sales-checkout *)) { filter: brightness(.78) saturate(.95); }
.fp-close .fp-close-veil:where(:not(.fp-sales-checkout *)) { position: absolute; inset: 0; z-index: 1; background: var(--mf-g-alpenglow); opacity: .86; }
.fp-close > .wrap:where(:not(.fp-sales-checkout *)) { position: relative; z-index: 2; }
@media (max-width: 900px) {
  .fp-about:where(:not(.fp-sales-checkout *)) { grid-template-columns: 1fr; }
  .fp-price:where(:not(.fp-sales-checkout *)) { grid-template-columns: 1fr; }
  .fp-split:where(:not(.fp-sales-checkout *)) { grid-template-columns: 1fr; }
  .fp-fit-grid:where(:not(.fp-sales-checkout *)) { grid-template-columns: 1fr; }
  .fp-price-media:where(:not(.fp-sales-checkout *)) { max-width: 240px; }
  .fp-step-img:where(:not(.fp-sales-checkout *)) { aspect-ratio: 16 / 9; }
  .fp-fit-grid .fp-figure.r-4-5:where(:not(.fp-sales-checkout *)) { max-width: 320px; }
  .fp-sample-side .fp-figure:where(:not(.fp-sales-checkout *)) { max-width: 460px; }
}
/* =========================================================================
 * Sales v2 sections (DECISIONS.md D36 / the sales-v2 build contract, M2).
 * Every selector below is NEW: nothing above this line is touched, and
 * nothing below re-declares an existing selector's own rule (a shared
 * element class like .card, .pill, .fp-figure, .fp-micro, .check-list,
 * .fp-proof, .quote, .btn* is reused on new markup by composing an
 * additional class, never by editing the shared rule itself). Covers the
 * new purchase-row partial and the hero / solution / comparison / sample /
 * breakdown / pricing / cta-closing sections that reference it or that have
 * no prototype source at all (solution, comparison, breakdown -- new at
 * D36 -- plus the value-stack additions inside pricing's now-upgraded
 * offer-summary card).
 * ========================================================================= */
/* --- purchase row (templates/partials/purchase-row.liquid) -------------- */
.fp-purchase-row:where(:not(.fp-sales-checkout *)) { display: block; }
.fp-purchase-price:where(:not(.fp-sales-checkout *)) { margin: 0 0 14px; }
.fp-purchase-amount:where(:not(.fp-sales-checkout *)) { font-family: var(--mf-font-display); font-weight: 700; font-size: 28px; letter-spacing: -.01em; color: var(--mf-ink); }
.fp-purchase-note:where(:not(.fp-sales-checkout *)) { font-size: 14px; color: var(--mf-slate); margin-left: 8px; }
/* cta-closing's background is the dark alpenglow gradient (.fp-close, existing) -- override the
   row's default light-canvas price colors, and let text-align: center inherit from .fp-close
   itself rather than repeating it here. */
.fp-close .fp-purchase-amount:where(:not(.fp-sales-checkout *)) { color: var(--mf-canvas); }
.fp-close .fp-purchase-note:where(:not(.fp-sales-checkout *)) { color: color-mix(in srgb, var(--mf-canvas) 78%, transparent); }
/* pricing's offer-summary card is the one place the price is the point of the card (contract:
   "the actual price"); scale it up from the row's default compact size. */
.fp-price .fp-purchase-amount:where(:not(.fp-sales-checkout *)) { font-size: 42px; }
/* The existing .fp-price .fp-micro rule pulls a guarantee/micro line UP by 8px (margin-top: -8px)
   -- correct for the old layout, where .fp-micro sat right after a plain check-list. Here it sits
   right after the purchase row's own full-width button (.fp-price .btn is already 100% wide,
   existing rule), and that same -8px instead pulls the guarantee text up INTO the button, so it
   reads as overlapping/struck-through. Same specificity as the existing rule (two classes each),
   so this -- appended later in the file -- wins on margin-top only; text-align: center still
   cascades from the original rule, since this doesn't redeclare it. */
.fp-price .fp-purchase-guarantee:where(:not(.fp-sales-checkout *)) { margin-top: 14px; }
/* sample and breakdown end their section with a standalone purchase row, not tied to a left-
   aligned text column the way hero/sample's own intro copy is -- center it as a closing CTA. */
.fp-sample-purchase:where(:not(.fp-sales-checkout *)), .fp-breakdown-purchase:where(:not(.fp-sales-checkout *)) { text-align: center; margin-top: 36px; }
/* --- solution (templates/sections/solution.liquid, new) ----------------- */
.fp-solution-media:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: .92fr 1fr; gap: 46px; align-items: center; }
.fp-solution-flow:where(:not(.fp-sales-checkout *)) { display: flex; align-items: stretch; gap: 20px; }
.fp-solution-card:where(:not(.fp-sales-checkout *)) { flex: 1 1 0; min-width: 0; background: var(--mf-surface); border: 1px solid var(--mf-limestone); border-radius: var(--mf-radius-card); padding: 26px; display: grid; gap: 12px; align-content: start; }
.fp-solution-kicker:where(:not(.fp-sales-checkout *)) { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mf-pine); }
.fp-solution-input-list:where(:not(.fp-sales-checkout *)) { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15.5px; color: var(--mf-ink); }
.fp-solution-input-list li:where(:not(.fp-sales-checkout *)) { padding-left: 18px; position: relative; }
.fp-solution-input-list li:where(:not(.fp-sales-checkout *))::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--mf-lake); }
.fp-solution-arrow:where(:not(.fp-sales-checkout *)) { flex: none; align-self: center; display: grid; place-items: center; color: var(--mf-pine); }
.fp-solution-output h3:where(:not(.fp-sales-checkout *)) { font-size: 21px; }
.fp-solution-output p:where(:not(.fp-sales-checkout *)) { color: var(--mf-slate); font-size: 15.5px; line-height: 1.55; }
.fp-solution-format:where(:not(.fp-sales-checkout *)) { font-size: 13.5px; color: var(--mf-heartwood); font-weight: 600; margin-top: 2px; }
/* --- comparison charts (templates/sections/comparison.liquid, new) ------
   D35's Emphasis form (one de-emphasis gray, one accent, no numbers visible), re-coloured by Klemen's
   edit of 2026-09-21 (D139): the product's bar wears the brand's green gradient on a LIGHT panel, so it
   stands out. Checked with the dataviz skill's palette validator against surface #FFFFFF: gray #7F8B95
   and both green stops (pine #2E6F40 at the top, forest #173F27 at the base) each clear >= 3:1, and
   gray vs green separates for normal vision (dE 17.7 / 30.6) and every CVD type (dE >= 14.9). The
   summit gradient's teal end (#3F9E96) is deliberately left off the bars: against the gray it drops to
   dE 0.9 for deutan readers, i.e. the product bar would look like the alternatives. */
/* Klemen's sales edit, 2026-09-21 (D68): one chart per row, in a single centred column of about 720px,
   so the bars never stretch. Each row is the chart's computed headline (an h3), its card, and its
   optional caption. (This replaced a three-across flex-wrap grid.) */
.fp-compare-list:where(:not(.fp-sales-checkout *)) { display: grid; gap: 44px; max-width: 720px; margin: 0 auto; }
.fp-compare-row:where(:not(.fp-sales-checkout *)) { display: grid; gap: 14px; min-width: 0; }
.fp-chart-headline:where(:not(.fp-sales-checkout *)) { font-size: clamp(21px, 2.4vw, 26px); line-height: 1.2; text-align: center; margin: 0; }
.fp-chart-note:where(:not(.fp-sales-checkout *)) { margin: -2px 0 0; font-size: 13.5px; color: var(--mf-slate); text-align: center; }
.fp-chart:where(:not(.fp-sales-checkout *)) { background: var(--mf-surface); border: 1px solid var(--mf-line); border-radius: var(--mf-radius-card); padding: 24px 20px 20px; color: var(--mf-ink); display: flex; flex-direction: column; min-width: 0; }
.fp-chart-title:where(:not(.fp-sales-checkout *)) { font-size: 17px; font-weight: 600; color: var(--mf-ink); text-align: center; margin: 0; }
.fp-chart-caption:where(:not(.fp-sales-checkout *)) { font-size: 12.5px; color: var(--mf-slate); text-align: center; margin: 4px 0 16px; }
.fp-chart-plot:where(:not(.fp-sales-checkout *)) { height: 168px; display: flex; align-items: flex-end; justify-content: center; gap: 16px; padding: 0 4px; background-image: repeating-linear-gradient(to top, color-mix(in srgb, var(--mf-ink) 9%, transparent) 0, color-mix(in srgb, var(--mf-ink) 9%, transparent) 1px, transparent 1px, transparent 25%); }
.fp-chart-col:where(:not(.fp-sales-checkout *)) { flex: 1 1 0; min-width: 0; max-width: 92px; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.fp-chart-bar:where(:not(.fp-sales-checkout *)) { width: 56%; min-width: 16px; min-height: 4px; border-radius: 4px 4px 0 0; }
.fp-chart-bar-muted:where(:not(.fp-sales-checkout *)) { background: #7F8B95; }
.fp-chart-bar-accent:where(:not(.fp-sales-checkout *)) { background: linear-gradient(180deg, var(--mf-pine) 0%, var(--mf-forest) 100%); }
/* The label row mirrors the plot's columns exactly -- same flex basis, max-width, gap and padding -- so each label sits under its bar. */
.fp-chart-labels:where(:not(.fp-sales-checkout *)) { display: flex; justify-content: center; gap: 16px; padding: 0 4px; margin-top: 10px; }
.fp-chart-col-label:where(:not(.fp-sales-checkout *)) { flex: 1 1 0; min-width: 0; max-width: 92px; font-size: 12.5px; line-height: 1.3; text-align: center; color: var(--mf-slate); overflow-wrap: break-word; }
.fp-chart-col-label-emph:where(:not(.fp-sales-checkout *)) { color: var(--mf-ink); font-weight: 700; }
/* Visually hidden (not display:none, which a screen reader would skip too): the per-chart data
   table screen-reader users get instead of reading bar heights off the page. */
.fp-sr-only:where(:not(.fp-sales-checkout *)) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* --- sample (templates/sections/sample.liquid, changed) -----------------
   Replaces the retired .fp-browser mockup: sample.inputs beside the sample.sections output,
   the markdown-rendered .fp-sample-html content styled as bare tags (h3/p/ul/table/... carry no
   classes of their own -- they come straight out of runtime/src/core/markdown.js). */
.fp-sample-grid:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; margin-top: 8px; }
.fp-sample-inputs:where(:not(.fp-sales-checkout *)) { position: sticky; top: 96px; }
.fp-sample-input-list:where(:not(.fp-sales-checkout *)) { margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.fp-sample-input-row:where(:not(.fp-sales-checkout *)) { border-bottom: 1px solid var(--mf-limestone); padding-bottom: 10px; }
.fp-sample-input-row dt:where(:not(.fp-sales-checkout *)) { font-size: 12.5px; color: var(--mf-slate); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.fp-sample-input-row dd:where(:not(.fp-sales-checkout *)) { margin: 0; font-size: 15px; color: var(--mf-ink); font-weight: 500; }
.fp-sample-output:where(:not(.fp-sales-checkout *)) { min-width: 0; }
.fp-sample-section:where(:not(.fp-sales-checkout *)) { border: 1px solid var(--mf-limestone); border-radius: var(--mf-radius-card); background: var(--mf-surface); padding: 22px 24px; margin: 12px 0 0; box-shadow: var(--mf-shadow-card); }
.fp-sample-section h3:where(:not(.fp-sales-checkout *)) { font-size: 19px; margin-bottom: 10px; }
.fp-sample-more:where(:not(.fp-sales-checkout *)) { margin-top: 12px; }
.fp-sample-more summary:where(:not(.fp-sales-checkout *)) { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; font-family: var(--mf-font-display); font-weight: 600; font-size: 15px; background: var(--mf-surface); border: 1px solid var(--mf-limestone); border-radius: var(--mf-radius-pill); }
.fp-sample-more summary:where(:not(.fp-sales-checkout *))::-webkit-details-marker { display: none; }
.fp-sample-more summary:where(:not(.fp-sales-checkout *))::after { content: "+"; color: var(--mf-pine); }
.fp-sample-more[open] summary:where(:not(.fp-sales-checkout *))::after { content: "\2013"; }
.fp-sample-html h3:where(:not(.fp-sales-checkout *)), .fp-sample-html h4:where(:not(.fp-sales-checkout *)) { font-family: var(--mf-font-display); font-size: 16.5px; margin: 16px 0 8px; }
.fp-sample-html h3:first-child:where(:not(.fp-sales-checkout *)), .fp-sample-html h4:first-child:where(:not(.fp-sales-checkout *)) { margin-top: 0; }
.fp-sample-html p:where(:not(.fp-sales-checkout *)) { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; color: var(--mf-ink); }
.fp-sample-html ul:where(:not(.fp-sales-checkout *)), .fp-sample-html ol:where(:not(.fp-sales-checkout *)) { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 6px; font-size: 15.5px; color: var(--mf-ink); }
.fp-sample-html strong:where(:not(.fp-sales-checkout *)) { font-weight: 600; color: var(--mf-forest); }
.fp-sample-html a:where(:not(.fp-sales-checkout *)) { color: var(--mf-pine); }
.fp-sample-html table:where(:not(.fp-sales-checkout *)) { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 0 0 12px; }
.fp-sample-html th:where(:not(.fp-sales-checkout *)), .fp-sample-html td:where(:not(.fp-sales-checkout *)) { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--mf-limestone); vertical-align: top; }
.fp-sample-html th:where(:not(.fp-sales-checkout *)) { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mf-slate); font-weight: 600; }
.fp-sample-html blockquote:where(:not(.fp-sales-checkout *)) { margin: 0 0 12px; padding-left: 14px; border-left: 3px solid var(--mf-lake); color: var(--mf-slate); font-style: italic; }
.fp-sample-html code:where(:not(.fp-sales-checkout *)) { font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; background: var(--mf-canvas); border: 1px solid var(--mf-limestone); border-radius: 4px; padding: 1px 5px; }
.fp-sample-html > *:last-child:where(:not(.fp-sales-checkout *)) { margin-bottom: 0; }
/* --- breakdown (templates/sections/breakdown.liquid, new) ---------------
   Klemen's sales edit, 2026-09-21 (D68): one item per row, in a single centred column of about 720px,
   each stacked in his order -- title, image (16:9), description, value pill. (This replaced a card
   grid.) */
.fp-breakdown-list:where(:not(.fp-sales-checkout *)) { display: grid; gap: 22px; max-width: 720px; margin: 0 auto; }
.fp-breakdown-item:where(:not(.fp-sales-checkout *)) { display: grid; gap: 14px; min-width: 0; padding: 24px 26px 26px; border: 1px solid var(--mf-limestone); border-radius: var(--mf-radius-card); background: var(--mf-surface); }
.fp-breakdown-title:where(:not(.fp-sales-checkout *)) { font-size: 22px; margin: 0; }
.fp-breakdown-media:where(:not(.fp-sales-checkout *)) { width: 100%; margin: 0; border-radius: 12px; box-shadow: none; }
.fp-breakdown-desc:where(:not(.fp-sales-checkout *)) { color: var(--mf-slate); font-size: 15.5px; line-height: 1.6; margin: 0; }
.fp-breakdown-pill:where(:not(.fp-sales-checkout *)) { justify-self: start; }
/* --- pricing / offer summary (templates/sections/pricing.liquid, upgraded) --- */
.fp-offer-list:where(:not(.fp-sales-checkout *)) { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.fp-offer-row:where(:not(.fp-sales-checkout *)) { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--mf-line); font-size: 15.5px; }
.fp-offer-row-title:where(:not(.fp-sales-checkout *)) { flex: 1 1 auto; min-width: 0; color: var(--mf-ink); }
.fp-offer-row-value:where(:not(.fp-sales-checkout *)) { flex: none; font-weight: 600; color: var(--mf-heartwood); white-space: nowrap; }
.fp-offer-row-value-muted:where(:not(.fp-sales-checkout *)) { color: var(--mf-slate); font-weight: 500; }
.fp-offer-total:where(:not(.fp-sales-checkout *)) { display: flex; align-items: baseline; justify-content: space-between; font-weight: 600; font-size: 16px; color: var(--mf-ink); padding-top: 4px; }
.fp-offer-purchase-wrap:where(:not(.fp-sales-checkout *)) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; margin-top: 24px; }
.fp-offer-purchase:where(:not(.fp-sales-checkout *)) { flex: 1 1 240px; min-width: 0; }
.fp-offer-assurances:where(:not(.fp-sales-checkout *)) { flex: 1 1 220px; min-width: 0; margin-top: 4px; font-size: 15px; }
.fp-offer-refund-link:where(:not(.fp-sales-checkout *)) { margin-top: 4px; }
/* --- cta-closing (templates/sections/cta-closing.liquid, changed) ------- */
.fp-close-secondary:where(:not(.fp-sales-checkout *)) { margin-top: 18px; }
@media (max-width: 900px) {
  .fp-solution-media:where(:not(.fp-sales-checkout *)) { grid-template-columns: 1fr; }
  .fp-solution-flow:where(:not(.fp-sales-checkout *)) { flex-direction: column; }
  .fp-solution-arrow svg:where(:not(.fp-sales-checkout *)) { transform: rotate(90deg); }
  .fp-sample-grid:where(:not(.fp-sales-checkout *)) { grid-template-columns: 1fr; }
  .fp-sample-inputs:where(:not(.fp-sales-checkout *)) { position: static; }
}
@media (max-width: 760px) {
  .fp-chart-plot:where(:not(.fp-sales-checkout *)), .fp-chart-labels:where(:not(.fp-sales-checkout *)) { gap: 12px; }
  .fp-chart:where(:not(.fp-sales-checkout *)) { padding: 20px 16px 16px; }
  .fp-offer-row:where(:not(.fp-sales-checkout *)) { font-size: 14.5px; }
  .fp-compare-list:where(:not(.fp-sales-checkout *)) { gap: 36px; }
  .fp-chart-headline:where(:not(.fp-sales-checkout *)) { font-size: 20px; }
  .fp-breakdown-item:where(:not(.fp-sales-checkout *)) { padding: 18px 16px 20px; }
  .fp-breakdown-title:where(:not(.fp-sales-checkout *)) { font-size: 19.5px; }
}
@media (max-width: 420px) {
  .fp-chart-plot:where(:not(.fp-sales-checkout *)), .fp-chart-labels:where(:not(.fp-sales-checkout *)) { gap: 8px; padding: 0; }
  .fp-chart:where(:not(.fp-sales-checkout *)) { padding: 18px 12px 14px; }
  .fp-chart-col:where(:not(.fp-sales-checkout *)), .fp-chart-col-label:where(:not(.fp-sales-checkout *)) { max-width: none; }
  .fp-chart-col-label:where(:not(.fp-sales-checkout *)) { font-size: 11.5px; }
}
/* --- Upsell v2 (D61): the About portrait's labelled frame, sized to the 120px portrait slot. --- */
.fp-about .fp-portrait-frame:where(:not(.fp-sales-checkout *)) { width: 120px; height: 120px; aspect-ratio: 1 / 1; padding: 8px; gap: 2px; font-size: 13px; }
.fp-about .fp-portrait-frame .placeholder-ratio:where(:not(.fp-sales-checkout *)) { font-size: 11px; }
/* =========================================================================
 * Sales v3 (Klemen's Sales page edits, 2026-09-21; DECISIONS D97-D105).
 * Appended, like every block before it: the rules above keep working for
 * whatever still uses them, and each rule here either styles new markup or
 * is scoped by a new class (.fp-hero-v3, .fp-solution-v3) so it wins by
 * specificity, not by editing a shared rule.
 * ========================================================================= */
/* --- hero (sections/hero.liquid): his reference layout, light mode --------
   Two columns from 960px, stacked below it (text first, then the mockup). */
.fp-hero-v3 .fp-hero-grid:where(:not(.fp-sales-checkout *)) { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.fp-hero-copy:where(:not(.fp-sales-checkout *)) { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
/* D462: the product's main VSL (VTurb) between the hero's headline and sub-headline, the full width of the
   copy column, 20px corners; VTurb's player.js sizes itself, the placeholder only holds the 16:9 box. */
.fp-hero-vsl:where(:not(.fp-sales-checkout *)) { width: 100%; margin: 0 0 20px; border-radius: 20px; overflow: hidden; background: var(--mf-g-deep); }
.fp-solution-vsl:where(:not(.fp-sales-checkout *)) { max-width: 860px; margin: 0 auto 36px; box-shadow: var(--mf-shadow-card); }
/* The cue above it (Klemen, 2026-10-16): pine, semibold, a gentle bounce; still for prefers-reduced-motion. */
.fp-vsl-cue:where(:not(.fp-sales-checkout *)) { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -6px auto 14px; font-size: 16px; font-weight: 600; color: var(--mf-pine); animation: fp-vsl-cue-bounce 1.8s ease-in-out infinite; }
.fp-vsl-cue svg:where(:not(.fp-sales-checkout *)) { flex: none; width: 18px; height: 18px; }
@keyframes fp-vsl-cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
  .fp-vsl-cue:where(:not(.fp-sales-checkout *)) { animation: none; }
}
/* the VSL under the Introducing sub-headline (Klemen, 2026-10-16) */
.fp-vturb:where(:not(.fp-sales-checkout *)) { display: block; width: 100%; }
.fp-vturb .vturb-player-placeholder:where(:not(.fp-sales-checkout *)) { position: relative; width: 100%; padding-top: 56.25%; }
/* Klemen, 2026-10-14 (D502, was 36/30px at 1.1, D359; desktop 30px -> 26px the same day): the sales headline is 26px on desktop and 24px on a phone,
   line-height 1.2 on both. The default for every funnel's sales page, existing and new. */
.fp-hero-v3 h1:where(:not(.fp-sales-checkout *)) { margin: 14px 0 16px; max-width: none; text-wrap: wrap; font-size: 26px; line-height: 1.2; }
.fp-hero-sub:where(:not(.fp-sales-checkout *)) { font-size: clamp(22px, 2.4vw, 28px); font-style: italic; font-weight: 500; line-height: 1.25; letter-spacing: -.005em; color: var(--mf-forest); margin: 0 0 16px; max-width: none; text-wrap: wrap; }
.fp-hero-subsub:where(:not(.fp-sales-checkout *)) { font-family: var(--mf-font-body); font-variation-settings: normal; font-size: 18px; font-weight: 400; line-height: 1.55; letter-spacing: 0; color: var(--mf-slate); margin: 0 0 18px; max-width: 34em; text-wrap: pretty; }
.fp-hero-note:where(:not(.fp-sales-checkout *)) { font-size: 14.5px; font-weight: 500; color: var(--mf-ink); margin: 0 0 22px; text-wrap: balance; }
.fp-hero-guarantee:where(:not(.fp-sales-checkout *)) { margin-top: 12px; }
.fp-hero-media:where(:not(.fp-sales-checkout *)) { position: relative; display: grid; place-items: center; min-width: 0; }
.fp-hero-media:where(:not(.fp-sales-checkout *))::before { content: ""; position: absolute; inset: 4% 2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(167, 221, 214, .6), rgba(167, 221, 214, 0)); pointer-events: none; }
.fp-hero-mockup:where(:not(.fp-sales-checkout *)) { position: relative; width: 100%; max-width: 520px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; filter: drop-shadow(0 28px 34px rgba(23, 63, 39, .22)); }
.fp-hero-frame:where(:not(.fp-sales-checkout *)) { position: relative; width: 100%; max-width: 460px; }
@media (max-width: 959px) {
  .fp-hero-v3 .fp-hero-grid:where(:not(.fp-sales-checkout *)) { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .fp-hero-v3 h1:where(:not(.fp-sales-checkout *)) { max-width: none; }
  .fp-hero-media:where(:not(.fp-sales-checkout *)) { justify-self: center; width: 100%; max-width: 440px; }
}
@media (max-width: 760px) {
  .fp-hero-v3 h1:where(:not(.fp-sales-checkout *)) { font-size: 24px; line-height: 1.2; }
}
@media (max-width: 760px) {
  .fp-hero-sub:where(:not(.fp-sales-checkout *)) { font-size: 22px; }
  .fp-hero-subsub:where(:not(.fp-sales-checkout *)) { font-size: 17px; }
  .fp-hero-copy .btn-lg:where(:not(.fp-sales-checkout *)) { width: 100%; }
}
/* The rating row: only rendered from a supplied rating (D97, D100). Five gold stars filled to
   value / 5, then the line. Honey is the brand's star colour (decorative, never text). */
.fp-rating:where(:not(.fp-sales-checkout *)) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 16px; font-size: 14px; font-weight: 500; color: var(--mf-slate); }
.fp-stars:where(:not(.fp-sales-checkout *)) { position: relative; flex: none; width: 92px; height: 17px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'><path d='M10 1.2l2.6 5.5 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L1.4 7.5l6-.8z' fill='%23E6DCC5'/></svg>") left center / 18.4px 17px repeat-x; }
.fp-stars-fill:where(:not(.fp-sales-checkout *)) { position: absolute; left: 0; top: 0; bottom: 0; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'><path d='M10 1.2l2.6 5.5 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L1.4 7.5l6-.8z' fill='%23D4A857'/></svg>") left center / 18.4px 17px repeat-x; }
/* --- the price line of every sales purchase row (partials/purchase-row.liquid, D97) -------------
   "Experts charge $1,000+." on its own line, then "You pay ~~$1,000~~ just $37 (one-time)" with the
   price set large. The struck figure is always the expert figure beside that sentence. */
.fp-purchase-price:where(:not(.fp-sales-checkout *)) { line-height: 1.35; }
.fp-price-experts:where(:not(.fp-sales-checkout *)) { display: block; font-size: 14.5px; font-weight: 500; color: var(--mf-slate); margin-bottom: 2px; }
.fp-price-you:where(:not(.fp-sales-checkout *)) { display: block; font-size: 17px; color: var(--mf-ink); }
.fp-price-struck:where(:not(.fp-sales-checkout *)) { color: var(--mf-slate); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(168, 65, 46, .85); }
.fp-price-you .fp-purchase-amount:where(:not(.fp-sales-checkout *)) { font-size: 30px; line-height: 1; }
.fp-price-tail:where(:not(.fp-sales-checkout *)) { white-space: nowrap; }
/* "$37 (one-time)" stays on one line: no break inside "(one-time)" or before it */
.fp-price .fp-price-you .fp-purchase-amount:where(:not(.fp-sales-checkout *)) { font-size: 42px; }
.fp-close .fp-price-experts:where(:not(.fp-sales-checkout *)), .fp-close .fp-price-struck:where(:not(.fp-sales-checkout *)) { color: color-mix(in srgb, var(--mf-canvas) 74%, transparent); }
.fp-close .fp-price-you:where(:not(.fp-sales-checkout *)) { color: var(--mf-canvas); }
.fp-close .fp-price-struck:where(:not(.fp-sales-checkout *)) { text-decoration-color: rgba(240, 168, 152, .95); }
/* --- problem (sections/problem.liquid, D102): the two common solutions as bad options ---------- */
.fp-problem-head:where(:not(.fp-sales-checkout *)) { margin-bottom: 18px; }
.fp-problem-body:where(:not(.fp-sales-checkout *)) { max-width: 66ch; margin: 0 auto; }
.fp-bad-options:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 900px; margin: 44px auto 0; }
.fp-bad-option:where(:not(.fp-sales-checkout *)) { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 26px 26px 24px; background: var(--mf-surface); border: 1px solid #EBD3CD; border-radius: var(--mf-radius-card); box-shadow: 0 16px 34px -26px rgba(120, 40, 25, .35); }
.fp-bad-tag:where(:not(.fp-sales-checkout *)) { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .06em; padding: 5px 11px; border-radius: var(--mf-radius-pill); background: #FBEAE6; color: #9A3A2A; }
.fp-bad-title:where(:not(.fp-sales-checkout *)) { font-size: 22px; }
.fp-bad-how:where(:not(.fp-sales-checkout *)) { font-size: 16px; line-height: 1.5; color: var(--mf-slate); }
.fp-bad-why:where(:not(.fp-sales-checkout *)) { margin-top: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #9A3A2A; }
.fp-bad-list:where(:not(.fp-sales-checkout *)) { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fp-bad-list li:where(:not(.fp-sales-checkout *)) { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--mf-ink); }
.fp-bad-list li:where(:not(.fp-sales-checkout *))::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: #F6DAD3 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8412E' stroke-width='3' stroke-linecap='round'><path d='M8 8l8 8M16 8l-8 8'/></svg>") center / 12px no-repeat; }
.fp-bad-range:where(:not(.fp-sales-checkout *)) { margin-top: auto; padding: 12px 14px; border-radius: 12px; background: #FBEFEC; color: #7F2E21; font-size: 15px; font-weight: 600; line-height: 1.45; }
.fp-problem-list:where(:not(.fp-sales-checkout *)) { display: grid; gap: 10px; max-width: 760px; margin: 30px auto 0; padding: 0; list-style: none; }
.fp-problem-item:where(:not(.fp-sales-checkout *)) { position: relative; padding: 14px 18px 14px 46px; background: var(--mf-surface); border: 1px solid #EBD3CD; border-radius: 14px; line-height: 1.45; }
.fp-problem-item:where(:not(.fp-sales-checkout *))::before { content: "\00D7"; position: absolute; left: 16px; top: 13px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #FBEFEC; color: #B4442F; font-size: 13px; font-weight: 700; }
.fp-problem-item strong:where(:not(.fp-sales-checkout *)) { color: var(--mf-ink); }
.fp-problem-item span:where(:not(.fp-sales-checkout *)) { color: var(--mf-slate); }
.fp-options-lead:where(:not(.fp-sales-checkout *)) { max-width: 720px; margin: 40px auto 0; text-align: center; font-family: var(--mf-font-display); font-variation-settings: "SOFT" 50; font-weight: 600; font-size: clamp(20px, 2.3vw, 25px); line-height: 1.3; color: var(--mf-ink); text-wrap: balance; }
.fp-bad-wasted:where(:not(.fp-sales-checkout *)) { display: grid; gap: 6px; }
.fp-bad-wasted p:where(:not(.fp-sales-checkout *)) { margin: 0; }
.fp-wasted-label:where(:not(.fp-sales-checkout *)) { font-weight: 800; }
.fp-transition:where(:not(.fp-sales-checkout *)) { display: grid; justify-items: center; gap: 18px; max-width: 720px; margin: 52px auto 0; text-align: center; }
.fp-transition-line:where(:not(.fp-sales-checkout *)) { font-family: var(--mf-font-display); font-variation-settings: "SOFT" 50; font-weight: 600; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25; color: var(--mf-ink); text-wrap: balance; }
.fp-transition-arrow:where(:not(.fp-sales-checkout *)) { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--mf-g-summit); color: var(--mf-canvas); box-shadow: var(--mf-shadow-btn); text-decoration: none; }
.fp-transition-arrow:focus-visible:where(:not(.fp-sales-checkout *)) { outline: 3px solid var(--mf-sky-light); outline-offset: 3px; }
.fp-solution-v3:where(:not(.fp-sales-checkout *)) { scroll-margin-top: 56px; }
@media (max-width: 760px) {
  .fp-bad-options:where(:not(.fp-sales-checkout *)) { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .fp-problem-list:where(:not(.fp-sales-checkout *)) { margin-top: 22px; }
  .fp-problem-item:where(:not(.fp-sales-checkout *)) { padding: 12px 14px 12px 42px; }
  .fp-options-lead:where(:not(.fp-sales-checkout *)) { margin-top: 30px; }
  .fp-bad-option:where(:not(.fp-sales-checkout *)) { padding: 22px 20px 20px; }
  .fp-transition:where(:not(.fp-sales-checkout *)) { margin-top: 40px; }
}
/* --- solution (sections/solution.liquid, D102): Price and Speed, the mockup row, the flow ------- */
.fp-solution-v3 .fp-sec-head:where(:not(.fp-sales-checkout *)) { margin-bottom: 30px; }
.fp-claims:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 860px; margin: 0 auto; }
.fp-claim:where(:not(.fp-sales-checkout *)) { display: flex; gap: 14px; align-items: flex-start; min-width: 0; padding: 18px 20px; background: var(--mf-canvas); border: 1px solid var(--mf-line); border-radius: var(--mf-radius-card); }
.fp-claim-icon:where(:not(.fp-sales-checkout *)) { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #DDEFE1; color: var(--mf-pine); }
.fp-claim-icon svg:where(:not(.fp-sales-checkout *)) { width: 20px; height: 20px; }
.fp-claim-copy:where(:not(.fp-sales-checkout *)) { min-width: 0; }
.fp-claim-label:where(:not(.fp-sales-checkout *)) { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mf-pine); }
.fp-claim-text:where(:not(.fp-sales-checkout *)) { font-size: 16.5px; font-weight: 500; line-height: 1.45; color: var(--mf-ink); text-wrap: pretty; }
/* S3 (2026-09-25): the same 1:1 product mockup the hero shows (.fp-hero-mockup/.fp-hero-frame), just
   in its own centered row here instead of beside the hero's copy column -- same proportions, same
   radial glow and drop-shadow treatment, so the two appearances of the image read as one system. */
.fp-solution-mockup:where(:not(.fp-sales-checkout *)) { position: relative; display: grid; place-items: center; max-width: 400px; margin: 40px auto 44px; }
.fp-solution-mockup:where(:not(.fp-sales-checkout *))::before { content: ""; position: absolute; inset: 4% 2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(167, 221, 214, .5), rgba(167, 221, 214, 0)); pointer-events: none; }
.fp-solution-mockup-img:where(:not(.fp-sales-checkout *)) { position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; filter: drop-shadow(0 26px 32px rgba(23, 63, 39, .2)); }
.fp-solution-mockup-frame:where(:not(.fp-sales-checkout *)) { position: relative; width: 100%; }
/* D361: the supplied 16:9 devices mockup, wider than the 1:1 product mockup. */
.fp-solution-mockup.is-devices:where(:not(.fp-sales-checkout *)) { max-width: 960px; }
.fp-solution-mockup.is-devices:where(:not(.fp-sales-checkout *))::before { inset: 10% 8%; }
.fp-solution-devices-img:where(:not(.fp-sales-checkout *)) { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; filter: drop-shadow(0 26px 32px rgba(23, 63, 39, .18)); }
.fp-solution-v3 .fp-solution-flow:where(:not(.fp-sales-checkout *)) { max-width: 860px; margin: 0 auto; }
@media (max-width: 760px) {
  .fp-claims:where(:not(.fp-sales-checkout *)) { grid-template-columns: minmax(0, 1fr); }
  .fp-solution-mockup:where(:not(.fp-sales-checkout *)) { margin: 32px auto 36px; max-width: 280px; }
  .fp-solution-mockup.is-devices:where(:not(.fp-sales-checkout *)) { max-width: 100%; }
}
/* --- Old Way vs New Way (sections/old-new-way.liquid, D104), light mode ------------------------
   Red tones for the old way, green for the new; a round VS badge on a dashed divider between the
   columns. From 960px the columns share one height, so the new way's three cards spread down the
   old way's length with long arrows, and the two result boxes sit level at the bottom. */
.fp-onw-grid:where(:not(.fp-sales-checkout *)) { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); column-gap: 26px; align-items: stretch; max-width: 940px; margin: 0 auto; }
.fp-onw-col:where(:not(.fp-sales-checkout *)) { display: flex; flex-direction: column; min-width: 0; }
.fp-onw-head:where(:not(.fp-sales-checkout *)) { margin-bottom: 22px; text-align: center; }
.fp-onw-label:where(:not(.fp-sales-checkout *)) { display: block; }
.fp-onw-old .fp-onw-label:where(:not(.fp-sales-checkout *)) { color: #A8412E; }
.fp-onw-title:where(:not(.fp-sales-checkout *)) { margin: 8px 0 6px; font-size: clamp(21px, 2.2vw, 24px); }
.fp-onw-sub:where(:not(.fp-sales-checkout *)) { font-size: 15.5px; line-height: 1.5; color: var(--mf-slate); }
.fp-onw-steps:where(:not(.fp-sales-checkout *)) { display: flex; flex: 1 1 auto; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.fp-onw-item:where(:not(.fp-sales-checkout *)) { display: flex; flex-direction: column; }
.fp-onw-step:where(:not(.fp-sales-checkout *)) { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border: 1px solid; border-radius: 12px; }
.fp-onw-n:where(:not(.fp-sales-checkout *)) { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 700; }
.fp-onw-step-copy:where(:not(.fp-sales-checkout *)) { min-width: 0; }
.fp-onw-step-title:where(:not(.fp-sales-checkout *)) { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--mf-ink); }
.fp-onw-step-body:where(:not(.fp-sales-checkout *)) { margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--mf-slate); }
.fp-onw-arrow:where(:not(.fp-sales-checkout *)) { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 26px; padding: 3px 0; }
.fp-onw-arrow:where(:not(.fp-sales-checkout *))::before { content: ""; flex: 1 1 auto; width: 0; margin-bottom: -10px; border-left: 1.5px solid currentColor; }
.fp-onw-arrow svg:where(:not(.fp-sales-checkout *)) { flex: none; }
.fp-onw-old .fp-onw-step:where(:not(.fp-sales-checkout *)) { background: #FDF3F1; border-color: #EECDC5; }
.fp-onw-old .fp-onw-n:where(:not(.fp-sales-checkout *)) { background: #F7D9D2; color: #A8412E; }
.fp-onw-old .fp-onw-arrow:where(:not(.fp-sales-checkout *)) { color: #D49A8D; }
.fp-onw-new .fp-onw-step:where(:not(.fp-sales-checkout *)) { background: #EDF7F0; border-color: #AFD8BA; }
.fp-onw-new .fp-onw-n:where(:not(.fp-sales-checkout *)) { background: var(--mf-pine); color: var(--mf-canvas); }
.fp-onw-new .fp-onw-arrow:where(:not(.fp-sales-checkout *)) { color: var(--mf-pine); }
.fp-onw-new .fp-onw-step-title:where(:not(.fp-sales-checkout *)) { color: var(--mf-forest); }
.fp-onw-result:where(:not(.fp-sales-checkout *)) { margin-top: 20px; padding: 20px; border-radius: 14px; text-align: center; }
.fp-onw-result-label:where(:not(.fp-sales-checkout *)) { margin-bottom: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.fp-onw-result-title:where(:not(.fp-sales-checkout *)) { margin-bottom: 6px; font-family: var(--mf-font-display); font-variation-settings: "SOFT" 50; font-size: 21px; font-weight: 700; line-height: 1.2; }
.fp-onw-result-body:where(:not(.fp-sales-checkout *)) { font-size: 14.5px; line-height: 1.5; }
.fp-onw-old .fp-onw-result:where(:not(.fp-sales-checkout *)) { background: #FBE9E5; border: 1px solid #E8B9AF; }
.fp-onw-old .fp-onw-result-label:where(:not(.fp-sales-checkout *)) { color: #A8412E; }
.fp-onw-old .fp-onw-result-title:where(:not(.fp-sales-checkout *)) { color: #8C3122; }
.fp-onw-old .fp-onw-result-body:where(:not(.fp-sales-checkout *)) { color: var(--mf-slate); }
.fp-onw-new .fp-onw-result:where(:not(.fp-sales-checkout *)) { background: var(--mf-g-summit); border: 1px solid transparent; }
.fp-onw-new .fp-onw-result-label:where(:not(.fp-sales-checkout *)), .fp-onw-new .fp-onw-result-body:where(:not(.fp-sales-checkout *)) { color: rgba(249, 248, 243, .88); }
.fp-onw-new .fp-onw-result-title:where(:not(.fp-sales-checkout *)) { color: var(--mf-canvas); }
.fp-onw-vs:where(:not(.fp-sales-checkout *)) { position: relative; display: flex; align-items: center; justify-content: center; }
.fp-onw-vs:where(:not(.fp-sales-checkout *))::before { content: ""; position: absolute; top: 40px; bottom: 40px; left: 50%; border-left: 1.5px dashed var(--mf-line); }
.fp-onw-vs span:where(:not(.fp-sales-checkout *)) { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--mf-surface); border: 1px solid var(--mf-line); box-shadow: 0 0 0 10px var(--mf-canvas); font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--mf-ink); }
@media (min-width: 960px) {
  .fp-onw-new .fp-onw-item:not(:last-child):where(:not(.fp-sales-checkout *)) { flex: 1 1 auto; }
  .fp-onw-new .fp-onw-item:not(:last-child) .fp-onw-arrow:where(:not(.fp-sales-checkout *)) { flex: 1 1 auto; }
}
@media (max-width: 959px) {
  .fp-onw-grid:where(:not(.fp-sales-checkout *)) { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .fp-onw-vs:where(:not(.fp-sales-checkout *)) { margin: 30px 0; }
  .fp-onw-vs:where(:not(.fp-sales-checkout *))::before { top: 50%; bottom: auto; left: 0; right: 0; border-left: 0; border-top: 1.5px dashed var(--mf-line); }
}
/* --- What you get (sections/breakdown.liquid, D103): the headline under each card's title ------ */
.fp-breakdown-headline:where(:not(.fp-sales-checkout *)) { margin: -6px 0 2px; font-family: var(--mf-font-display); font-variation-settings: "SOFT" 50; font-style: italic; font-size: 19px; font-weight: 500; line-height: 1.35; color: var(--mf-forest); text-wrap: pretty; }
@media (max-width: 760px) {
  .fp-breakdown-headline:where(:not(.fp-sales-checkout *)) { font-size: 17.5px; }
}
/* =========================================================================
 * The Sales follow-ups after v3 and M4 (Checkout v3 batch). Appended.
 * ========================================================================= */
/* --- the pricing card's image (sections/pricing.liquid): the ONE product image, the 3D mockup, whole
   on a light 1:1 tile (it was the flat 4:5 mockup); its labelled 1:1 frame fills the tile while it is
   not generated yet. */
.fp-price-mockup:where(:not(.fp-sales-checkout *)) { position: relative; overflow: hidden; aspect-ratio: 1 / 1; align-self: start; border-radius: var(--mf-radius-card); background: radial-gradient(closest-side, rgba(167, 221, 214, .45), rgba(167, 221, 214, 0)), var(--mf-surface); border: 1px solid var(--mf-limestone); }
.fp-price-mockup .fp-product-mockup:where(:not(.fp-sales-checkout *)) { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(23, 63, 39, .2)); }
.fp-price-mockup .fp-price-frame:where(:not(.fp-sales-checkout *)) { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: inherit; padding: 12px; font-size: 14px; }
/* --- the sample (sections/sample.liquid): the first two sections as excerpts of about 120 words, a
   fade where one continues, and every section in full behind "See the full example". While that is
   open the excerpts step aside, so nothing is shown twice. */
.fp-sample-excerpt.is-cut .fp-sample-html:where(:not(.fp-sales-checkout *)) { position: relative; }
.fp-sample-excerpt.is-cut .fp-sample-html:where(:not(.fp-sales-checkout *))::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 84px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--mf-surface) 88%); pointer-events: none; }
.fp-sample-output:has(.fp-sample-more[open]) .fp-sample-excerpt:where(:not(.fp-sales-checkout *)) { display: none; }
.fp-sample-more[open] > .fp-sample-section:first-of-type:where(:not(.fp-sales-checkout *)) { margin-top: 16px; }
/* =========================================================================
 * Intro (Authority + Opportunity) (sections/intro.liquid), Klemen's addition,
 * 2026-09-21. A letter from the author, in one narrow centred column, no
 * card and no box: the byline row, then the two parts, each headline in the
 * display serif, its lines with .8em of space between them (the container's
 * own font-size, so the space scales with the line size at each width).
 * ========================================================================= */
.fp-intro-col:where(:not(.fp-sales-checkout *)) { max-width: 680px; margin: 0 auto; display: grid; gap: 28px; }
.fp-intro-byline:where(:not(.fp-sales-checkout *)) { display: flex; align-items: center; gap: 14px; }
.fp-intro-avatar:where(:not(.fp-sales-checkout *)) { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; padding: 0; border: 1px solid var(--mf-limestone); background: var(--mf-surface); flex: none; }
.fp-intro-avatar-frame:where(:not(.fp-sales-checkout *)) { width: 56px; height: 56px; aspect-ratio: 1 / 1; padding: 4px; gap: 0; font-size: 8.5px; line-height: 1.2; flex: none; border-radius: 50%; }
.fp-intro-avatar-frame .placeholder-ratio:where(:not(.fp-sales-checkout *)) { display: none; }
.fp-intro-byline-text:where(:not(.fp-sales-checkout *)) { font-size: 15px; font-weight: 600; color: var(--mf-ink); }
/* D362: "From {name}" and one line per role, each with its organisation's logo. */
.fp-intro-byline:has(.is-roles):where(:not(.fp-sales-checkout *)) { gap: 18px; }
.fp-intro-byline:has(.is-roles) .fp-intro-avatar:where(:not(.fp-sales-checkout *)), .fp-intro-byline:has(.is-roles) .fp-intro-avatar-frame:where(:not(.fp-sales-checkout *)) { width: 76px; height: 76px; box-shadow: 0 10px 22px -14px rgba(23, 63, 39, .5); }
.fp-intro-byline-text.is-roles:where(:not(.fp-sales-checkout *)) { display: flex; flex-direction: column; gap: 5px; font-weight: 400; }
.fp-intro-from:where(:not(.fp-sales-checkout *)) { font-size: 16px; color: var(--mf-slate); }
.fp-intro-from b:where(:not(.fp-sales-checkout *)) { font-family: var(--mf-font-display); font-size: 19px; font-weight: 700; color: var(--mf-ink); letter-spacing: -.005em; }
.fp-intro-role:where(:not(.fp-sales-checkout *)) { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 14.5px; font-weight: 500; color: var(--mf-ink); }
.fp-intro-role-logo:where(:not(.fp-sales-checkout *)) { height: 16px; width: auto; display: inline-block; }
@media (max-width: 480px) {
  .fp-intro-byline:has(.is-roles):where(:not(.fp-sales-checkout *)) { gap: 14px; }
  .fp-intro-byline:has(.is-roles) .fp-intro-avatar:where(:not(.fp-sales-checkout *)), .fp-intro-byline:has(.is-roles) .fp-intro-avatar-frame:where(:not(.fp-sales-checkout *)) { width: 60px; height: 60px; }
  .fp-intro-from:where(:not(.fp-sales-checkout *)) { font-size: 15px; }
  .fp-intro-from b:where(:not(.fp-sales-checkout *)) { font-size: 17px; }
  .fp-intro-role:where(:not(.fp-sales-checkout *)) { flex-wrap: nowrap; white-space: nowrap; gap: 8px; font-size: 13px; }
  .fp-intro-role-logo:where(:not(.fp-sales-checkout *)) { height: 12px; }
}
.fp-intro-authority:where(:not(.fp-sales-checkout *)), .fp-intro-opportunity:where(:not(.fp-sales-checkout *)) { display: grid; gap: .8em; font-size: 20px; }
.fp-intro-opportunity:where(:not(.fp-sales-checkout *)) { margin-top: 28px; }
/* D529 (Klemen, 2026-10-20): up to three photos in one row above the Authority headline, equal 16:9 tiles on every width. */
.fp-intro-photos:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fp-intro-photo:where(:not(.fp-sales-checkout *)), .fp-intro-photo-frame:where(:not(.fp-sales-checkout *)) { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; display: block; }
@media (max-width: 640px) {
  .fp-intro-photos:where(:not(.fp-sales-checkout *)) { gap: 6px; }
  .fp-intro-photo:where(:not(.fp-sales-checkout *)), .fp-intro-photo-frame:where(:not(.fp-sales-checkout *)) { border-radius: 8px; }
}
/* The two headlines are section headlines, so they take the site's one H2 style (site.css) and no size of their own:
   Klemen, 2026-09-22, "H2 size for section Headline must be in the same font size everywhere" (D162). */
.fp-intro-line:where(:not(.fp-sales-checkout *)), .fp-intro-bridge:where(:not(.fp-sales-checkout *)) { line-height: 1.55; color: var(--mf-ink); margin: 0; text-wrap: pretty; }
.fp-intro-bridge:where(:not(.fp-sales-checkout *)) { font-weight: 600; }
@media (max-width: 760px) {
  .fp-intro-col:where(:not(.fp-sales-checkout *)) { gap: 24px; }
  .fp-intro-opportunity:where(:not(.fp-sales-checkout *)) { margin-top: 20px; }
  .fp-intro-authority:where(:not(.fp-sales-checkout *)), .fp-intro-opportunity:where(:not(.fp-sales-checkout *)) { font-size: 18px; }
}
@media (max-width: 400px) {
  .fp-intro-authority:where(:not(.fp-sales-checkout *)), .fp-intro-opportunity:where(:not(.fp-sales-checkout *)) { font-size: 17px; }
}
/* =========================================================================
 * Sales v4 (Klemen, 2026-09-22): What's inside your plan (sections/plan-contents.liquid, D217) and
 * What you get with your order (sections/order-stack.liquid, D218). Appended. The section headlines
 * keep the site's one H2 style (D162); only in-card titles are sized here.
 * ========================================================================= */
/* What's inside your plan: one card per plan section, in one centred column. The icon sits in a pale
   pine tile, the title and its value tag share a row, the includes read as the section's contents. */
.fp-plan-list:where(:not(.fp-sales-checkout *)) { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 14px; max-width: 820px; }
.fp-plan-item:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 24px; background: var(--mf-canvas); border: 1px solid var(--mf-limestone); border-radius: var(--mf-radius-card); min-width: 0; }
.fp-plan-icon:where(:not(.fp-sales-checkout *)) { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--mf-shallows); color: var(--mf-pine); }
.fp-plan-icon svg:where(:not(.fp-sales-checkout *)) { width: 26px; height: 26px; }
.fp-plan-body:where(:not(.fp-sales-checkout *)) { min-width: 0; }
.fp-plan-top:where(:not(.fp-sales-checkout *)) { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.fp-plan-title:where(:not(.fp-sales-checkout *)) { font-size: 20px; line-height: 1.25; margin: 0; min-width: 0; }
.fp-plan-value:where(:not(.fp-sales-checkout *)) { flex: none; white-space: nowrap; }
.fp-plan-blurb:where(:not(.fp-sales-checkout *)) { color: var(--mf-slate); font-size: 15.5px; line-height: 1.55; margin: 8px 0 0; }
.fp-plan-includes:where(:not(.fp-sales-checkout *)) { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--mf-limestone); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; }
.fp-plan-includes li:where(:not(.fp-sales-checkout *)) { position: relative; padding-left: 16px; font-size: 14.5px; line-height: 1.45; color: var(--mf-ink); overflow-wrap: anywhere; }
.fp-plan-includes li:where(:not(.fp-sales-checkout *))::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--mf-lake); }
.fp-plan-purchase:where(:not(.fp-sales-checkout *)) { text-align: center; margin-top: 36px; }
@media (max-width: 760px) {
  .fp-plan-item:where(:not(.fp-sales-checkout *)) { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding: 18px 16px; }
  .fp-plan-icon:where(:not(.fp-sales-checkout *)) { width: 42px; height: 42px; border-radius: 12px; }
  .fp-plan-icon svg:where(:not(.fp-sales-checkout *)) { width: 22px; height: 22px; }
  .fp-plan-title:where(:not(.fp-sales-checkout *)) { font-size: 18px; }
  .fp-plan-includes:where(:not(.fp-sales-checkout *)) { grid-template-columns: minmax(0, 1fr); }
}
/* What you get with your order: numbered cards in one column, the illustration on a light square tile
   left of the text (above it on a phone). Transparent PNGs sit whole on the tile, like the pricing card's
   mockup; a missing one is its labelled 1:1 frame filling the tile. */
.fp-stack-list:where(:not(.fp-sales-checkout *)) { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 18px; max-width: 880px; }
.fp-stack-item:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 28px; align-items: center; padding: 24px; background: var(--mf-surface); border: 1px solid var(--mf-limestone); border-radius: var(--mf-radius-card); min-width: 0; }
.fp-stack-media:where(:not(.fp-sales-checkout *)) { position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 14px; background: radial-gradient(closest-side, rgba(167, 221, 214, .45), rgba(167, 221, 214, 0)), var(--mf-canvas); border: 1px solid var(--mf-limestone); }
.fp-stack-img:where(:not(.fp-sales-checkout *)) { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(23, 63, 39, .18)); }
.fp-stack-media .fp-stack-frame:where(:not(.fp-sales-checkout *)) { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: inherit; padding: 12px; font-size: 14px; }
.fp-stack-body:where(:not(.fp-sales-checkout *)) { min-width: 0; display: grid; gap: 12px; align-content: start; }
.fp-stack-top:where(:not(.fp-sales-checkout *)) { display: flex; align-items: center; gap: 12px; }
.fp-stack-n:where(:not(.fp-sales-checkout *)) { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mf-pine); color: var(--mf-canvas); font-family: var(--mf-font-display); font-weight: 600; font-size: 15px; }
.fp-stack-title:where(:not(.fp-sales-checkout *)) { font-size: 21px; line-height: 1.25; margin: 0; min-width: 0; }
.fp-stack-desc:where(:not(.fp-sales-checkout *)) { color: var(--mf-slate); font-size: 15.5px; line-height: 1.55; margin: 0; }
.fp-stack-bullets:where(:not(.fp-sales-checkout *)) { gap: 9px; }
.fp-stack-bullets li:where(:not(.fp-sales-checkout *)) { font-size: 15px; line-height: 1.5; }
.fp-stack-bullets li:where(:not(.fp-sales-checkout *))::before { width: 20px; height: 20px; }
.fp-stack-tag:where(:not(.fp-sales-checkout *)) { justify-self: start; margin-top: 2px; }
@media (max-width: 760px) {
  .fp-stack-item:where(:not(.fp-sales-checkout *)) { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px 16px 20px; }
  .fp-stack-media:where(:not(.fp-sales-checkout *)) { width: min(100%, 240px); margin: 0 auto; }
  .fp-stack-title:where(:not(.fp-sales-checkout *)) { font-size: 19px; }
}
/* Message From Klemen (Klemen, 2026-09-23, D314): the fixed first-person section between the pricing
 * card and the FAQ. The round avatar beside the title, the paragraphs centred and narrow, then the
 * photo grid: five across in two rows on desktop, two across in five rows on a phone. Photos are 16:9
 * and cropped to it, so a mixed batch still reads as one grid. */
.fp-author-message:where(:not(.fp-sales-checkout *)) { max-width: 960px; margin: 0 auto; text-align: center; }
.fp-author-message-head:where(:not(.fp-sales-checkout *)) { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 auto 28px; text-align: left; }
.fp-author-message-head h2:where(:not(.fp-sales-checkout *)) { margin: 0; max-width: 14ch; }
/* Klemen, 2026-10-16: the Message From Klemen reads left-aligned, its head on the text column's left edge. */
.fp-author-message-head:where(:not(.fp-sales-checkout *)) { justify-content: flex-start; max-width: 720px; }
.fp-author-message-text:where(:not(.fp-sales-checkout *)) { text-align: left; }
/* The author's roles with their logos (partials/author-roles.liquid), under the Message's title and the About's headline. */
.fp-author-roles:where(:not(.fp-sales-checkout *)) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 10px 0 0; font-size: 15px; font-weight: 500; color: var(--mf-ink); }
.fp-about .fp-author-roles:where(:not(.fp-sales-checkout *)) { margin: -2px 0 14px; color: var(--mf-ink); max-width: none; }
.fp-author-role:where(:not(.fp-sales-checkout *)) { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.fp-author-role-logo:where(:not(.fp-sales-checkout *)) { height: 16px; width: auto; display: inline-block; }
.fp-about .fp-author-role-logo:where(:not(.fp-sales-checkout *)) { width: auto; height: 16px; padding: 0; border: 0; border-radius: 0; background: none; }
/* not the .fp-about img portrait tile */
.fp-author-message-avatar:where(:not(.fp-sales-checkout *)) { flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--mf-limestone); background: var(--mf-surface); }
.fp-author-message-avatar-frame:where(:not(.fp-sales-checkout *)) { flex: none; width: 96px; height: 96px; aspect-ratio: 1 / 1; padding: 8px; gap: 2px; font-size: 12px; }
.fp-author-message-text:where(:not(.fp-sales-checkout *)) { max-width: 720px; margin: 0 auto; }
.fp-author-message-text p:where(:not(.fp-sales-checkout *)) { color: var(--mf-slate); font-size: 18px; line-height: 1.6; margin: 0 0 18px; }
.fp-author-message-grid:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
/* height: auto, or the img's own height attribute (a presentational hint) would win over aspect-ratio and draw every tile 630px tall. */
.fp-author-message-photo:where(:not(.fp-sales-checkout *)) { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid var(--mf-limestone); background: var(--mf-surface); }
.fp-author-message-photo-frame:where(:not(.fp-sales-checkout *)) { width: 100%; aspect-ratio: 16 / 9; padding: 6px; gap: 2px; font-size: 11px; }
@media (max-width: 760px) {
  .fp-author-message-head:where(:not(.fp-sales-checkout *)) { flex-direction: column; align-items: flex-start; text-align: left; gap: 12px; }
  .fp-author-roles:where(:not(.fp-sales-checkout *)) { font-size: 13.5px; gap: 4px 14px; }
  .fp-author-role-logo:where(:not(.fp-sales-checkout *)), .fp-about .fp-author-role-logo:where(:not(.fp-sales-checkout *)) { height: 13px; }
  .fp-author-message-head h2:where(:not(.fp-sales-checkout *)) { max-width: none; }
  .fp-author-message-text p:where(:not(.fp-sales-checkout *)) { font-size: 16.5px; }
  .fp-author-message-grid:where(:not(.fp-sales-checkout *)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
}
/* D349: built from this information -- one line per intake field, two columns from tablet up. */
.fp-built-list:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; max-width: 860px; margin: 30px auto 0; padding: 0; list-style: none; }
.fp-built-item:where(:not(.fp-sales-checkout *)) { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--mf-surface); border: 1px solid var(--mf-line); border-radius: 12px; line-height: 1.4; color: var(--mf-ink); }
.fp-built-check:where(:not(.fp-sales-checkout *)) { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--mf-g-summit); color: var(--mf-canvas); }
@media (max-width: 640px) {
  .fp-built-list:where(:not(.fp-sales-checkout *)) { grid-template-columns: minmax(0, 1fr); margin-top: 22px; }
}
/* D374: the hero's image gallery -- one large image with its title on a brand-green gradient across the
   bottom (Apple TV style: an eased, mostly transparent gradient with no visible top edge), then the
   thumbnails, four per row, on no tile of their own, as in Klemen's reference. */
.fp-hero-media-gallery:where(:not(.fp-sales-checkout *))::before { display: none; }
/* Two columns: the gallery starts level with the H1 (the eyebrow above it is ~59px), not centred. */
@media (min-width: 960px) {
  .fp-hero-v3 .fp-hero-media-gallery:where(:not(.fp-sales-checkout *)) { align-self: start; margin-top: 59px; }
}
.fp-gallery:where(:not(.fp-sales-checkout *)) { position: relative; width: 100%; max-width: 520px; }
/* The large image sits on no card: only a very gentle green radial glow behind the transparent image. */
.fp-gallery-main:where(:not(.fp-sales-checkout *)) { container-type: inline-size; position: relative; margin: 0; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: radial-gradient(closest-side, rgba(62, 140, 96, .13), rgba(62, 140, 96, .05) 60%, rgba(62, 140, 96, 0) 100%); }
.fp-gallery-img:where(:not(.fp-sales-checkout *)) { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(23, 63, 39, .14)); }
.fp-gallery-caption:where(:not(.fp-sales-checkout *)) { position: absolute; left: 0; right: 0; bottom: 0; min-height: 40%; display: flex; align-items: flex-end; padding: 64px 20px 16px; /* the CTA button's first colour, forest #173F27 (brand gradients.summit) */ background: linear-gradient(to top, rgba(23, 63, 39, .66) 0%, rgba(23, 63, 39, .56) 14%, rgba(23, 63, 39, .42) 30%, rgba(23, 63, 39, .27) 48%, rgba(23, 63, 39, .14) 66%, rgba(23, 63, 39, .04) 84%, rgba(23, 63, 39, 0) 100%); color: #fff; font-family: var(--mf-font-body); font-weight: 400; font-size: clamp(12.5px, 3.75cqi, 15px); line-height: 1.4; letter-spacing: .005em; text-shadow: 0 1px 3px rgba(6, 24, 13, .5); }
.fp-gallery-caption-inner:where(:not(.fp-sales-checkout *)) { display: -webkit-box; width: 100%; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.fp-gallery-caption strong:where(:not(.fp-sales-checkout *)) { font-weight: 700; }
.fp-gallery-thumbs:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.fp-gallery-thumb:where(:not(.fp-sales-checkout *)) { display: block; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; background: transparent; border: 1px solid rgba(0, 0, 0, .12); border-radius: 8px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.fp-gallery-thumb img:where(:not(.fp-sales-checkout *)) { display: block; width: 100%; height: 100%; object-fit: contain; }
.fp-gallery-thumb:hover:where(:not(.fp-sales-checkout *)) { border-color: rgba(23, 63, 39, .35); }
.fp-gallery-thumb.is-active:where(:not(.fp-sales-checkout *)) { border-color: var(--mf-honey); box-shadow: 0 0 0 1px var(--mf-honey); }
.fp-gallery-thumb:focus-visible:where(:not(.fp-sales-checkout *)) { outline: 3px solid var(--mf-sky-light); outline-offset: 2px; }
@media (max-width: 640px) {
  .fp-gallery-caption:where(:not(.fp-sales-checkout *)) { padding: 34px 13px 12px; }
  .fp-gallery-thumbs:where(:not(.fp-sales-checkout *)) { gap: 6px; }
}
/* D376: the call to action that ends every major section of the sales page. */
.fp-section-cta:where(:not(.fp-sales-checkout *)) { display: grid; grid-column: 1 / -1; justify-self: stretch; justify-items: center; gap: 10px; width: 100%; margin: 44px auto 0; text-align: center; }
.fp-section-cta .fp-section-cta-note:where(:not(.fp-sales-checkout *)) { margin: 0; }
/* Klemen, 2026-10-16: the guarantee line under every purchase button opens with the shield (the gallery's guarantee badge icon). */
.fp-hero-guarantee:where(:not(.fp-sales-checkout *)), .fp-section-cta-note:where(:not(.fp-sales-checkout *)) { display: flex; align-items: center; gap: 6px; }
.fp-guarantee-shield:where(:not(.fp-sales-checkout *)) { flex: none; width: 1.25em; height: 1.25em; color: var(--mf-pine); }
.fp-close .fp-section-cta .btn:where(:not(.fp-sales-checkout *)), .fp-dark .fp-section-cta .btn:where(:not(.fp-sales-checkout *)) { background: #fff; }
@media (max-width: 640px) {
  .fp-section-cta:where(:not(.fp-sales-checkout *)) { margin-top: 32px; }
  .fp-section-cta .btn:where(:not(.fp-sales-checkout *)) { width: 100%; }
}
/* D377: the Introducing section shows the hero's gallery, same size and behaviour. */
.fp-solution-mockup.is-gallery:where(:not(.fp-sales-checkout *)) { max-width: 520px; }
.fp-solution-mockup.is-gallery:where(:not(.fp-sales-checkout *))::before { display: none; }
@media (max-width: 760px) {
  .fp-solution-mockup.is-gallery:where(:not(.fp-sales-checkout *)) { max-width: 100%; }
}
/* D379: the checkout the sales page carries (sections/checkout-embed.liquid). Everything inside it is
   styled by checkout.css, scoped to it at render time (scripts/lib/render/css-scope.mjs), and no rule of
   this file reaches inside it. Here only the wrapper itself: a hairline to set it off from the section
   above, and room for the sticky header (and a Test Mode ribbon) when a Get my ... button scrolls to it. */
.fp-sales-checkout:where(:not(.fp-sales-checkout *)) { border-top: 1px solid var(--mf-limestone); scroll-margin-top: calc(56px + var(--et-ribbon-h, 0px)); }
/* D380: with the checkout on the page, the pricing section is only its headline and the checkout
   container stands where the offer card stood: one block, no hairline, no second top padding. */
.fp-price-head-only:where(:not(.fp-sales-checkout *)) { padding-bottom: 8px; background: #fff; }
.fp-price-head-only + .fp-sales-checkout:where(:not(.fp-sales-checkout *)) { border-top: 0; background: #fff; }
.fp-price-head-only .fp-sec-head:where(:not(.fp-sales-checkout *)) { margin-bottom: 0; scroll-margin-top: calc(76px + var(--et-ribbon-h, 0px)); }
.fp-price-head-sub:where(:not(.fp-sales-checkout *)) { margin: 10px 0 0; font-family: var(--mf-font-display); font-size: clamp(18px, 2.2vw, 22px); font-weight: 600; color: var(--mf-pine); }
/* D516: brand marks after "Claude" and "ChatGPT" in the sales page's text (scripts/lib/render/brand-marks.mjs), on a funnel whose funnel.json lists brandMarks. Sized to the line; Claude in its orange, ChatGPT in green. */
.et-brand:where(:not(.fp-sales-checkout *)) { white-space: nowrap; }
.et-mark:where(:not(.fp-sales-checkout *)) { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; margin-left: .22em; overflow: visible; }
.et-mark-claude:where(:not(.fp-sales-checkout *)) { color: #d97757; }
.et-mark-chatgpt:where(:not(.fp-sales-checkout *)) { color: #10a37f; }
/* D518: "Made for Claude" / "Made for ChatGPT" badges over the gallery's first image (funnel.json madeFor). Klemen's
   approved image style, in CSS: canvas pills with a limestone hairline, the mark white on its brand disc with a soft
   grey ring, DM Sans 500 with the name in 700. Sized from the frame's width, 24px text at most; every other measure
   is in em so the badge keeps its proportions on a phone. */
.fp-madefor:where(:not(.fp-sales-checkout *)) { position: absolute; top: 4.5%; left: 4.5%; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: .27em; font-size: min(15px, 3.25cqw); pointer-events: none; }
/* Klemen, 2026-10-16: about 35% smaller than D518's 18px / 3.97cqw, then 1.25x on every screen */
.fp-gallery.is-not-first .fp-madefor:where(:not(.fp-sales-checkout *)) { display: none; }
.fp-madefor-bottom:where(:not(.fp-sales-checkout *)) { top: auto; bottom: 50px; }
/* D519: the trust badges, 50px above the image's bottom edge */
.fp-madefor-pill:where(:not(.fp-sales-checkout *)) { display: inline-flex; align-items: center; gap: .37em; padding: .17em .67em .17em .17em; border-radius: 999px; background: color-mix(in srgb, var(--mf-canvas) 70%, transparent); border: 1px solid var(--mf-limestone); font-family: var(--mf-font-body); font-weight: 500; line-height: 1; letter-spacing: -.01em; color: var(--mf-ink); white-space: nowrap; }
.fp-madefor-pill b:where(:not(.fp-sales-checkout *)) { font-weight: 700; }
/* Klemen, 2026-10-16: the pill's white at 0.7 opacity; text and disc stay solid */
.fp-madefor-disc:where(:not(.fp-sales-checkout *)) { flex: none; display: grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; box-sizing: border-box; border: 1px solid #C9C4B8; color: #fff; }
.fp-madefor-claude:where(:not(.fp-sales-checkout *)) { background: #D97757; }
.fp-madefor-chatgpt:where(:not(.fp-sales-checkout *)) { background: #10A37F; }
.fp-madefor-guarantee:where(:not(.fp-sales-checkout *)) { background: var(--mf-pine); }
.fp-madefor-delivery:where(:not(.fp-sales-checkout *)) { background: var(--mf-sky); }
.fp-madefor-icon:where(:not(.fp-sales-checkout *)) { width: 62%; height: 62%; }
.fp-madefor-mark:where(:not(.fp-sales-checkout *)) { display: block; width: 60%; height: 60%; }
/* Klemen, 2026-10-16: one body text on the whole sales page -- every paragraph and list item of running copy is the
   page's body size (17px, line-height 1.6) in ink, whatever section it sits in. Headings, eyebrows, labels, pills,
   the small print under buttons and the dark sections' own colours stay as they are. */
body.et-p-sales :is( .fp-bad-how, .fp-bad-list li, .fp-solution-input-list li, .fp-solution-output p, .fp-solution-format, .fp-onw-sub, .fp-onw-step-body, .fp-onw-result-body, .fp-plan-blurb, .fp-plan-item li, .fp-about > div > p:not(.fp-author-roles), .fp-step p, .fp-not-list li, .check-list li, .fp-stack-desc, .fp-stack-bullets li, .fp-author-message-text p, .fp-faq details p, .fp-close p:not(.fp-purchase-note):not(.fp-purchase-amount) ):where(:not(.fp-sales-checkout *)) { font-size: 17px; line-height: 1.6; color: var(--mf-ink); font-weight: 400; }
body.et-p-sales .fp-close p:not(.fp-purchase-note):not(.fp-purchase-amount):where(:not(.fp-sales-checkout *)) { color: color-mix(in srgb, var(--mf-canvas) 88%, transparent); }
html body.et-p-sales [data-et-onw-col="new"].fp-onw-new .fp-onw-result-body:where(:not(.fp-sales-checkout *)) { color: color-mix(in srgb, var(--mf-canvas) 88%, transparent); }
/* The About: the headline fills the column (no balanced wrap), and on a phone the portrait sits centred above the text. */
.fp-about h2:where(:not(.fp-sales-checkout *)) { text-wrap: pretty; max-width: none; }
@media (max-width: 900px) {
  .fp-about .fp-portrait:where(:not(.fp-sales-checkout *)), .fp-about .fp-portrait-frame:where(:not(.fp-sales-checkout *)) { justify-self: center; }
}
/* Klemen, 2026-10-16: the Problem section's body reads like the Intro letter above it -- the same 680px column and
   the same text size (20px, 18px under 760px, 17px under 400px) and line height. */
body.et-p-sales [data-section="problem"] .fp-problem-body:where(:not(.fp-sales-checkout *)) { max-width: 680px; }
body.et-p-sales [data-section="problem"] .fp-problem-body p:where(:not(.fp-sales-checkout *)) { font-size: 20px; line-height: 1.55; text-wrap: pretty; }
@media (max-width: 760px) {
  body.et-p-sales [data-section="problem"] .fp-problem-body p:where(:not(.fp-sales-checkout *)) { font-size: 18px; }
}
@media (max-width: 400px) {
  body.et-p-sales [data-section="problem"] .fp-problem-body p:where(:not(.fp-sales-checkout *)) { font-size: 17px; }
}
/* Klemen, 2026-10-16: the hero's sub-sub-headline (H4) at the Intro's body size too: 20px, 18px under 760px, 17px under 400px. */
body.et-p-sales .fp-hero-subsub:where(:not(.fp-sales-checkout *)) { font-size: 20px; line-height: 1.55; color: var(--mf-ink); font-weight: 400; }
@media (max-width: 760px) {
  body.et-p-sales .fp-hero-subsub:where(:not(.fp-sales-checkout *)) { font-size: 18px; }
}
@media (max-width: 400px) {
  body.et-p-sales .fp-hero-subsub:where(:not(.fp-sales-checkout *)) { font-size: 17px; }
}
/* Klemen, 2026-10-16: every section's sub-headline is the second-largest line of its head -- under the headline, above
   the eyebrow and the body text: 22px on desktop, 20px under 760px, 19px under 400px (body 20 / 18 / 17). */
body.et-p-sales .fp-sec-head > p:where(:not(.fp-sales-checkout *)) { font-size: 22px; line-height: 1.45; color: var(--mf-ink); font-weight: 400; text-wrap: pretty; }
@media (max-width: 760px) {
  body.et-p-sales .fp-sec-head > p:where(:not(.fp-sales-checkout *)) { font-size: 20px; }
}
@media (max-width: 400px) {
  body.et-p-sales .fp-sec-head > p:where(:not(.fp-sales-checkout *)) { font-size: 19px; }
}
/* D523 (Klemen, 2026-10-16): the 1:1 setup call stands out in What you get -- a honey border and a soft, slow glow
   (still under prefers-reduced-motion). */
.fp-stack-item.is-highlight:where(:not(.fp-sales-checkout *)) { border: 2px solid var(--mf-honey); background: linear-gradient(180deg, #FFFBF1 0%, var(--mf-surface) 100%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mf-honey) 18%, transparent), 0 12px 36px -10px color-mix(in srgb, var(--mf-honey) 60%, transparent); animation: fp-call-glow 3.2s ease-in-out infinite; }
@keyframes fp-call-glow { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mf-honey) 16%, transparent), 0 12px 30px -12px color-mix(in srgb, var(--mf-honey) 50%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--mf-honey) 26%, transparent), 0 16px 44px -8px color-mix(in srgb, var(--mf-honey) 75%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  .fp-stack-item.is-highlight:where(:not(.fp-sales-checkout *)) { animation: none; }
}
/* D523: the hero's "Included today" box under the button (Klemen's reference, in this page's light style). */
.fp-hero-included:where(:not(.fp-sales-checkout *)) { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 16px 18px; max-width: 560px; background: var(--mf-surface); border: 1px solid var(--mf-limestone); border-radius: 14px; box-shadow: 0 10px 28px -18px rgba(23, 63, 39, .35); }
.fp-hero-included-avatar:where(:not(.fp-sales-checkout *)) { position: relative; flex: none; width: 56px; height: 56px; }
.fp-hero-included-avatar img:where(:not(.fp-sales-checkout *)) { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; border: 1px solid var(--mf-limestone); }
.fp-hero-included-zoom:where(:not(.fp-sales-checkout *)) { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 8px; background: #0B5CFF; border: 2px solid var(--mf-surface); display: grid; place-items: center; }
.fp-hero-included-zoom svg:where(:not(.fp-sales-checkout *)) { width: 16px; height: 16px; }
.fp-hero-included-text:where(:not(.fp-sales-checkout *)) { display: grid; gap: 4px; min-width: 0; }
.fp-hero-included-head:where(:not(.fp-sales-checkout *)) { font-size: 16px; line-height: 1.4; color: var(--mf-ink); }
.fp-hero-included-head b:where(:not(.fp-sales-checkout *)) { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 14px; }
.fp-hero-included-pill:where(:not(.fp-sales-checkout *)) { display: inline-block; margin-left: 4px; padding: 3px 9px; border-radius: 999px; background: var(--mf-heartwood); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; vertical-align: 1px; }
.fp-hero-included-line:where(:not(.fp-sales-checkout *)) { font-size: 14.5px; line-height: 1.45; color: var(--mf-slate); }
@media (max-width: 400px) {
  .fp-hero-included:where(:not(.fp-sales-checkout *)) { padding: 14px; gap: 12px; }
  .fp-hero-included-avatar:where(:not(.fp-sales-checkout *)), .fp-hero-included-avatar img:where(:not(.fp-sales-checkout *)) { width: 48px; height: 48px; }
}
/* Klemen, 2026-10-16: in the plan's section cards the value pill always sits top right and the title fills the rest
   of the row (never wrapped under the pill, never balanced into a short block). */
.fp-plan-top:where(:not(.fp-sales-checkout *)) { flex-wrap: nowrap; align-items: flex-start; }
.fp-plan-title:where(:not(.fp-sales-checkout *)) { flex: 1 1 auto; text-wrap: pretty; }
.fp-plan-value:where(:not(.fp-sales-checkout *)) { align-self: flex-start; margin-top: 1px; }
/* Klemen, 2026-10-16: the "Included today" value pill sits in the box's top right corner; the title keeps clear of it. */
.fp-hero-included:where(:not(.fp-sales-checkout *)) { position: relative; }
.fp-hero-included-pill:where(:not(.fp-sales-checkout *)) { position: absolute; top: 12px; right: 12px; margin: 0; }
.fp-hero-included-head:where(:not(.fp-sales-checkout *)) { padding-right: 96px; }
/* Klemen, 2026-10-16: on a phone the Included today box is two rows -- photo | "Included today" + title | value pill,
   then the line across the full width. */
@media (max-width: 640px) {
  .fp-hero-included:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av head pill" "line line line"; align-items: center; column-gap: 12px; row-gap: 10px; }
  .fp-hero-included-text:where(:not(.fp-sales-checkout *)) { display: contents; }
  .fp-hero-included-avatar:where(:not(.fp-sales-checkout *)) { grid-area: av; }
  .fp-hero-included-head:where(:not(.fp-sales-checkout *)) { grid-area: head; padding-right: 0; }
  .fp-hero-included-pill:where(:not(.fp-sales-checkout *)) { grid-area: pill; position: static; align-self: center; }
  .fp-hero-included-line:where(:not(.fp-sales-checkout *)) { grid-area: line; }
}
/* Klemen, 2026-10-16: the two new gallery badges' discs. */
.fp-madefor-custom:where(:not(.fp-sales-checkout *)) { background: var(--mf-heartwood); }
.fp-madefor-call:where(:not(.fp-sales-checkout *)) { background: #0B5CFF; }
/* Klemen, 2026-10-16: no gallery caption (and no green gradient under it). */
.fp-gallery-caption:where(:not(.fp-sales-checkout *)) { display: none; }
/* Klemen, 2026-10-16: the price ladder under "Try It Risk-Free Now": old prices struck in red, then "just" and the price in green. */
.fp-price-ladder:where(:not(.fp-sales-checkout *)) { margin: 12px 0 0; font-family: var(--mf-font-display); font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: var(--mf-ink); }
.fp-price-ladder s:where(:not(.fp-sales-checkout *)) { color: #B3402E; text-decoration-thickness: 2px; margin-right: .1em; }
.fp-price-ladder b:where(:not(.fp-sales-checkout *)) { color: #1E8A4C; font-weight: 700; }
/* D573 (Klemen, 2026-10-28): four reusable sales sections -- use-cases (.fp-uc), comparison-table (.fp-ct),
   logos (.fp-lg) and card-grid (.fp-cg). Only the new classes below; no existing rule is touched. */
/* use-cases */
.fp-uc-list:where(:not(.fp-sales-checkout *)) { display: grid; gap: 22px; }
.fp-uc-card:where(:not(.fp-sales-checkout *)) { display: grid; gap: 22px; padding: 28px; }
.fp-uc-card > h3:where(:not(.fp-sales-checkout *)) { font-size: 22px; }
.fp-uc-flow:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: minmax(0, 260px) auto minmax(0, 1fr); gap: 18px; align-items: center; }
.fp-uc-in:where(:not(.fp-sales-checkout *)), .fp-uc-out:where(:not(.fp-sales-checkout *)) { display: grid; gap: 10px; align-content: start; min-width: 0; }
.fp-uc-in:where(:not(.fp-sales-checkout *)) { background: var(--mf-canvas); border: 1.5px dashed var(--mf-line); border-radius: 16px; padding: 18px; justify-items: start; }
.fp-uc-in b:where(:not(.fp-sales-checkout *)) { font-family: var(--mf-font-display); font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--mf-ink); }
.fp-uc-out:where(:not(.fp-sales-checkout *)) { background: var(--mf-g-shallows, var(--mf-shallows)); border: 1px solid var(--mf-line); border-radius: 16px; padding: 18px; }
.fp-uc-tag:where(:not(.fp-sales-checkout *)) { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mf-pine); }
.fp-uc-arrow:where(:not(.fp-sales-checkout *)) { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mf-pine); color: var(--mf-canvas); }
.fp-uc-arrow svg:where(:not(.fp-sales-checkout *)) { width: 22px; height: 22px; }
.fp-uc-chips:where(:not(.fp-sales-checkout *)) { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 10px; }
.fp-uc-chip:where(:not(.fp-sales-checkout *)) { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--mf-surface); border: 1px solid var(--mf-limestone); border-radius: var(--mf-radius-pill); padding: 8px 14px; font-size: 14.5px; color: var(--mf-ink); min-width: 0; }
.fp-uc-chip b:where(:not(.fp-sales-checkout *)) { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fp-uc-chip span:where(:not(.fp-sales-checkout *)) { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: var(--mf-forest); background: var(--mf-shallows); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.fp-uc-chip.fp-uc-fmt:where(:not(.fp-sales-checkout *)) { background: var(--mf-surface); font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 600; color: var(--mf-forest); }
.fp-uc-extra:where(:not(.fp-sales-checkout *)) { margin: 0; font-size: 15px; font-weight: 600; color: var(--mf-forest); }
.fp-uc-examples:where(:not(.fp-sales-checkout *)) { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--mf-limestone); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fp-uc-ex:where(:not(.fp-sales-checkout *)) { display: grid; gap: 8px; align-content: start; min-width: 0; }
.fp-uc-ex .media:where(:not(.fp-sales-checkout *)) { border-radius: 12px; }
.fp-uc-ex .media .play:where(:not(.fp-sales-checkout *)) { width: 44px; height: 44px; }
.fp-uc-ex .media .play svg:where(:not(.fp-sales-checkout *)) { width: 18px; height: 18px; margin-left: 2px; }
.fp-uc-ex .media .tag:where(:not(.fp-sales-checkout *)) { top: 8px; left: 8px; font-size: 10px; padding: 3px 7px; }
.fp-uc-ex .media-placeholder:where(:not(.fp-sales-checkout *)) { width: 100%; margin: 0; border-radius: 12px; }
.fp-uc-ex-title:where(:not(.fp-sales-checkout *)) { font-size: 14px; font-weight: 600; color: var(--mf-ink); line-height: 1.35; }
@media (max-width: 760px) {
  .fp-uc-card:where(:not(.fp-sales-checkout *)) { padding: 20px; }
  .fp-uc-flow:where(:not(.fp-sales-checkout *)) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fp-uc-arrow:where(:not(.fp-sales-checkout *)) { justify-self: center; transform: rotate(90deg); width: 38px; height: 38px; }
  .fp-uc-chips:where(:not(.fp-sales-checkout *)) { grid-template-columns: minmax(0, 1fr); }
  .fp-uc-examples:where(:not(.fp-sales-checkout *)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* comparison-table */
.fp-ct-scroll:where(:not(.fp-sales-checkout *)) { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--mf-limestone); border-radius: var(--mf-radius-card); background: var(--mf-surface); box-shadow: var(--mf-shadow-card); }
.fp-ct-table:where(:not(.fp-sales-checkout *)) { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; }
.fp-ct-table th:where(:not(.fp-sales-checkout *)), .fp-ct-table td:where(:not(.fp-sales-checkout *)) { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mf-limestone); line-height: 1.45; }
.fp-ct-table thead th:where(:not(.fp-sales-checkout *)) { font-family: var(--mf-font-display); font-size: 15px; font-weight: 600; background: var(--mf-canvas); color: var(--mf-ink); vertical-align: bottom; }
.fp-ct-table tbody th:where(:not(.fp-sales-checkout *)) { font-weight: 600; color: var(--mf-forest); background: var(--mf-surface); white-space: nowrap; }
.fp-ct-table td:where(:not(.fp-sales-checkout *)) { color: var(--mf-slate); }
.fp-ct-table tbody tr:last-child th:where(:not(.fp-sales-checkout *)), .fp-ct-table tbody tr:last-child td:where(:not(.fp-sales-checkout *)) { border-bottom: 0; }
.fp-ct-table .is-hl:where(:not(.fp-sales-checkout *)) { background: var(--mf-shallows); }
.fp-ct-table td.is-hl:where(:not(.fp-sales-checkout *)) { color: var(--mf-ink); font-weight: 700; }
.fp-ct-table thead th.is-hl:where(:not(.fp-sales-checkout *)) { background: var(--mf-pine); color: var(--mf-canvas); }
.fp-ct-note:where(:not(.fp-sales-checkout *)) { margin: 14px 0 0; font-size: 13.5px; color: var(--mf-slate); text-align: center; }
@media (max-width: 640px) {
  /* Four columns at most, so the table fits a phone by wrapping its cells: the highlighted column is never hidden off to the side. The wrapper still scrolls sideways (alone) when a long word forces it. */
  .fp-ct-table:where(:not(.fp-sales-checkout *)) { table-layout: fixed; font-size: 13.5px; }
  .fp-ct-table th:where(:not(.fp-sales-checkout *)), .fp-ct-table td:where(:not(.fp-sales-checkout *)) { padding: 10px 8px; overflow-wrap: anywhere; hyphens: auto; }
  .fp-ct-table thead th:where(:not(.fp-sales-checkout *)) { font-size: 13px; }
  .fp-ct-table tbody th:where(:not(.fp-sales-checkout *)) { white-space: normal; width: 24%; }
}
/* logos */
.fp-lg-row:where(:not(.fp-sales-checkout *)) { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fp-lg-item:where(:not(.fp-sales-checkout *)) { display: grid; place-items: center; min-height: 56px; min-width: 120px; padding: 10px 24px; background: var(--mf-surface); border: 1px solid var(--mf-limestone); border-radius: var(--mf-radius-pill); }
.fp-lg-word:where(:not(.fp-sales-checkout *)) { font-family: var(--mf-font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--mf-forest); white-space: nowrap; }
.fp-lg-item img:where(:not(.fp-sales-checkout *)) { display: block; max-height: 30px; width: auto; max-width: 140px; object-fit: contain; }
@media (max-width: 640px) {
  .fp-lg-row:where(:not(.fp-sales-checkout *)) { gap: 10px; }
  .fp-lg-item:where(:not(.fp-sales-checkout *)) { min-width: 0; padding: 8px 18px; min-height: 48px; }
  .fp-lg-word:where(:not(.fp-sales-checkout *)) { font-size: 16px; }
}
/* card-grid */
.fp-cg-grid:where(:not(.fp-sales-checkout *)) { display: grid; grid-template-columns: repeat(var(--fp-cg-cols, 3), minmax(0, 1fr)); gap: 18px; }
.fp-cg-card:where(:not(.fp-sales-checkout *)) { display: grid; gap: 10px; align-content: start; padding: 24px; min-width: 0; }
.fp-cg-card h3:where(:not(.fp-sales-checkout *)) { font-size: 20px; line-height: 1.25; }
.fp-cg-card p:where(:not(.fp-sales-checkout *)) { margin: 0; color: var(--mf-slate); font-size: 15.5px; line-height: 1.55; }
.fp-cg-n:where(:not(.fp-sales-checkout *)) { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--mf-shallows); color: var(--mf-pine); font-family: var(--mf-font-display); font-weight: 700; font-size: 17px; }
.fp-cg-ic:where(:not(.fp-sales-checkout *)) { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--mf-g-shallows, var(--mf-shallows)); border: 1px solid var(--mf-line); color: var(--mf-pine); }
.fp-cg-ic svg:where(:not(.fp-sales-checkout *)) { width: 22px; height: 22px; }
.fp-cg-cmd:where(:not(.fp-sales-checkout *)) { display: block; justify-self: start; max-width: 100%; overflow-wrap: anywhere; font-family: ui-monospace, Menlo, monospace; font-size: 14px; font-weight: 600; color: var(--mf-canvas); background: var(--mf-forest); border-radius: 8px; padding: 6px 12px; }
.fp-cg-checks:where(:not(.fp-sales-checkout *)) { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 860px; display: grid; grid-template-columns: repeat(var(--fp-cg-cols, 2), minmax(0, 1fr)); gap: 12px 28px; }
.fp-cg-checks li:where(:not(.fp-sales-checkout *)) { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 1.4; color: var(--mf-ink); }
.fp-cg-checks svg:where(:not(.fp-sales-checkout *)) { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--mf-pine); color: var(--mf-canvas); margin-top: 1px; }
.fp-cg-foot:where(:not(.fp-sales-checkout *)) { margin: 22px 0 0; text-align: center; font-size: 13.5px; color: var(--mf-slate); }
@media (max-width: 900px) {
  .fp-cg-grid:where(:not(.fp-sales-checkout *)) { grid-template-columns: repeat(min(var(--fp-cg-cols, 3), 2), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .fp-cg-grid:where(:not(.fp-sales-checkout *)) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fp-cg-card:where(:not(.fp-sales-checkout *)) { padding: 20px; }
  .fp-cg-checks:where(:not(.fp-sales-checkout *)) { gap: 10px 16px; }
  .fp-cg-checks li:where(:not(.fp-sales-checkout *)) { font-size: 15px; }
}