/* =====================================================================
   FORMS & FLOWS SHOP - GLOBAL CSS
   Location: MemberVault > Settings > General > Advanced Settings > Custom CSS
   Version: 5.2 (2026-10-03) - built to the Forms & Flows design system
   (design/design-system/.../membervault-handoff/SPEC.md)
===================================================================== */


/* =====================================================================
   ✏️ SAFE TO EDIT - SETTINGS
   Everything between here and the DO NOT EDIT line is meant to be changed.
===================================================================== */

/* ========================
   1. FONT IMPORTS
   Fontshare needs one family per import (combined URLs only return the first).
======================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,400&family=IBM+Plex+Sans:wght@500&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');

/* LEGACY FONT NAMES - kept so older page content that still types
   font-family: 'Poppins Bold' (etc.) keeps rendering. */
@font-face { font-family: 'Poppins Regular'; src: url('https://fonts.gstatic.com/s/poppins/v21/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins Bold'; src: url('https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins Medium'; src: url('https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display Italic'; src: url('https://fonts.gstatic.com/s/playfairdisplay/v37/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgEM86xQ.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }


/* ========================
   2. 🎨 MEMBERVAULT COLORS (reference only - set these in Appearance)
======================== */
/* Read automatically by the Global JS from Appearance > Branding > Colors.
     --color-1  Body Background            #F8F6F2 (Bone)
     --color-2  Body Text                  #111111 (Ink)
     --color-3  Header Background          #F8F6F2 (Bone)
     --color-4  Header Text                #111111 (Ink)
     --color-5  Button Background & Links  #BF4333 (Coral Deep - white text passes contrast)
     --color-6  Button Text                #FFFFFF
   Announcement Bar: background #111111, text #FFFFFF. */


/* ========================
   3. 🎨 BRAND TOKENS (from the design system)
======================== */
:root {
    --ff-ink: #111111;          /* text, headlines, footer, ink buttons */
    --ff-slate: #66615B;        /* secondary text, captions, labels */
    --ff-coral: #E2604F;        /* the ampersand, accent fills, large italics ONLY */
    --ff-coral-deep: var(--color-5, #BF4333);  /* small coral text, buy/price pills (tracks Appearance Button color) */
    --ff-stone: #E4E0D9;        /* hairlines, borders, inputs */
    --ff-coral-tint: #FCE8E3;   /* Free tags, soft highlights */
    --ff-paper: #F1EFEA;        /* product photo stages, course section cards */
    --ff-bone: #F8F6F2;         /* page background; also text on ink */
    --ff-white: #FFFFFF;        /* input fills, lesson lists */
    --ff-ink-hover: #2B2B2B;
}


/* ========================
   4. FONT FAMILIES
======================== */
:root {
    --ff-serif: "Playfair Display", Georgia, serif;   /* headlines, titles, quotes, wordmark - never bold */
    --ff-sans: "Satoshi", system-ui, sans-serif;      /* body, nav, buttons */
    --ff-label: "IBM Plex Sans", system-ui, sans-serif; /* small uppercase labels only */
}


/* ========================
   5. LAYOUT & MOTION
======================== */
:root {
    --ff-max: 1240px;
    --ff-gutter: clamp(20px, 5vw, 64px);
    --ff-radius: 14px;
    --ff-ease: cubic-bezier(.2, .6, .2, 1);
    --ff-dur-fast: 120ms;
    --ff-dur: 200ms;
    --ff-dur-strip: 350ms;
    --ff-dur-image: 700ms;
    --ff-marquee: 60s;
}


/* =====================================================================
   ⚠️ DO NOT EDIT BELOW THIS LINE - TEMPLATE CODE
===================================================================== */

:root {
    --white: #FFFFFF;
    --black: #000000;
    /* Older component code reads these names */
    --font-family-p: var(--ff-sans);
    --font-family-h2: var(--ff-serif);
    --font-family-h3: var(--ff-label);
    --content-width: var(--ff-max);
}


/* ========================
   MULTI-PRODUCT PAGES
======================== */
/* ⚠️ The product IDs below must match FF_CONFIG.multiProductIds in the
   Global JS. Add a new kit ID in BOTH places.
   Kits: 1179310 Hibiscus · 1186476 Lotus · 1186477 Rosemary · 1186478 Zinnia · 1193879 Peony */

:is(.mv_product_1179310, .mv_product_1186476, .mv_product_1186477, .mv_product_1186478, .mv_product_1193879).mv_product_item .mv_product_item_buttons a.mv_primary_button:not(.ff-price-pill) {
    display: none !important;
}

:is(.mv_page_product_1179310, .mv_page_product_1186476, .mv_page_product_1186477, .mv_page_product_1186478, .mv_page_product_1193879) > div > div > img.w-full,
:is(.mv_page_product_1179310, .mv_page_product_1186476, .mv_page_product_1186477, .mv_page_product_1186478, .mv_page_product_1193879) > div > div > h2 {
    display: none;
}

.mv_page_product_1179310 a.mv_buy_button_1179310,
.mv_page_product_1186476 a.mv_buy_button_1186476,
.mv_page_product_1186477 a.mv_buy_button_1186477,
.mv_page_product_1186478 a.mv_buy_button_1186478,
.mv_page_product_1193879 a.mv_buy_button_1193879 {
    display: none !important;
}

:is(.mv_page_product_1179310, .mv_page_product_1186476, .mv_page_product_1186477, .mv_page_product_1186478, .mv_page_product_1193879) .mv_module_grid > .mv_module_item .mv_custom_button {
    display: none !important;
}

:is(.mv_page_product_1179310, .mv_page_product_1186476, .mv_page_product_1186477, .mv_page_product_1186478, .mv_page_product_1193879) .mv_module_grid > .mv_module_item .border-b {
    border: none !important;
}


/* ========================
   BASE + TYPOGRAPHY
======================== */
body {
    font-family: var(--ff-sans);
    font-size: 16px !important;
    line-height: 1.65;
    color: var(--ff-ink);
    -webkit-font-smoothing: antialiased;
}

/* Headings: Playfair 400, never bold. Case is typed by you: display lines
   go in CAPITALS with italic words in lowercase. line-height and weight are
   !important because MV's text-3xl / font-bold classes force px values. */
h1, h2 {
    font-family: var(--ff-serif);
    font-weight: 400 !important;
    letter-spacing: .005em;
    color: var(--ff-ink);
    text-wrap: balance;
}

h1 {
    font-size: clamp(40px, 5.2vw, 72px) !important;
    line-height: 1.04 !important;
    margin-bottom: 1.25rem;
}

h2 {
    font-size: clamp(30px, 3.6vw, 44px) !important;
    line-height: 1.1 !important;
    padding-bottom: 0.4rem;
}

.mv_content h2:not(.text-lg) {
    margin-top: 2.5rem;
}

h1 em, h1 i, h2 em, h2 i {
    font-family: var(--ff-serif);
    font-style: italic;
    font-weight: 400;
}

h1 b, h1 strong, h2 b, h2 strong {
    font-weight: 400;
}

/* Thin rule under every H1 (the heading rule used across the brand). It
   takes the heading's own color, so it is ink on light sections and bone
   on dark ones. Placed late so the hero's own "border: 0" can't remove it. */
h1,
#mv_welcome_area h1 {
    padding-bottom: .32em !important;
    border-bottom: 1px solid currentColor !important;
}


/* H3: small label */
h3 {
    font-family: var(--ff-label);
    font-weight: 500;
    font-size: 12px !important;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ff-slate);
    margin-bottom: 0.75rem;
}

h4 {
    font-family: var(--ff-sans);
    font-weight: 500;
    font-size: 17px !important;
    color: var(--ff-ink);
}

/* Lesson and section pages: a narrower column, so titles step down */
:is(.mv_page_lesson, .mv_page_unit, .mv_page_units, .mv_page_module) h1 {
    font-size: clamp(32px, 3.6vw, 48px) !important;
}

/* The coral ampersand (wrapped by the Global JS in h1-h3) */
.ff-amp {
    color: var(--ff-coral);
    font-family: var(--ff-serif);
    font-style: italic;
    font-weight: 400;
}

.ff-on-coral .ff-amp {
    color: inherit;
}

.mv_content a:not([class]) {
    color: var(--ff-coral-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Blockquote: the quote mark sits on its own line above the text, so the
   text never runs into it. Spacing out-ranks MemberVault's own blockquote
   margin and padding (which indented the box and cancelled the padding). */
blockquote, .mv_content blockquote {
    position: relative;
    margin: 2.5rem 0 !important;
    padding: 4.4rem 2.5rem 2.25rem !important;
    border: 0 !important;
    font-family: var(--ff-serif);
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--ff-ink);
    background-color: var(--ff-paper);
    border-radius: var(--ff-radius);
}

blockquote > *, .mv_content blockquote > * { margin: 0 !important; padding: 0 !important; }
blockquote > * + *, .mv_content blockquote > * + * { margin-top: .9em !important; }

blockquote::before {
    content: "\201C";
    position: absolute;
    top: 1.4rem;
    left: 2.5rem;
    font-family: var(--ff-serif);
    font-size: 4rem;
    line-height: .8;
    color: var(--ff-coral);
}

@media (max-width: 640px) {
    blockquote, .mv_content blockquote { padding: 3.8rem 1.4rem 1.6rem !important; font-size: 1.15rem; }
    blockquote::before { top: 1.1rem; left: 1.4rem; font-size: 3.4rem; }
}

code {
    background: var(--ff-paper);
    color: #A3352A;
    padding: 3px 6px;
    border-radius: 4px;
    font-family: monospace;
    cursor: pointer;
    user-select: none;
}

pre {
    background-color: var(--ff-paper);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--ff-stone);
    font-family: 'Courier New', monospace;
    font-size: 14px;
    overflow: auto;
    white-space: pre-wrap;
    margin-bottom: 25px;
}

/* Label utility: <p class="ff-eyebrow">Label</p> */
.ff-eyebrow,
.ff-label {
    display: block;
    font-family: var(--ff-label);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ff-slate);
}


/* ========================
   ANNOUNCEMENT BAR
======================== */
#mv_announcement {
    position: relative;
    z-index: 20;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    font-family: var(--ff-sans);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}

#mv_announcement a:not(.mv_close_button) {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ========================
   HEADER
======================== */
header.shadow-xl,
#mv_welcome_area.shadow-lg {
    box-shadow: none;
}

header {
    border-bottom: 1px solid var(--ff-stone);
}

/* Typeset wordmark: FORMS (spaced capitals) + coral italic & + italic flows */
.ff-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.18em;
    font-family: var(--ff-serif);
    font-weight: 400;
    font-size: 25px;
    line-height: 1;
    white-space: nowrap;
    color: var(--ff-ink);
    text-decoration: none;
}

.ff-wordmark .ff-wm-forms {
    letter-spacing: .06em;
}

.ff-wordmark .ff-wm-amp {
    font-style: italic;
    font-size: 1.4em;
    line-height: .7;
    color: var(--ff-coral);
}

.ff-wordmark .ff-wm-flows {
    font-style: italic;
    font-size: 1.12em;
}

.ff-text-logo {
    display: flex;
    align-items: center;
    height: 100%;
    margin: auto 0;
}

/* Nav: Satoshi 15px, ink, sentence case (MV labels are typed in capitals) */
.flex-auto ul li a {
    display: inline-block;
    padding-bottom: 3px;
    font-family: var(--ff-sans);
    font-size: 15px;
    letter-spacing: 0;
    text-transform: lowercase;
    color: var(--ff-ink);
    border-bottom: 1px solid transparent;
    transition: border-color var(--ff-dur-fast) var(--ff-ease);
}

.flex-auto ul li a::first-letter,
.flex-auto ul li a span::first-letter {
    text-transform: uppercase;
}

.flex-auto ul li a span {
    display: inline-block;
    font-weight: inherit !important;
}

.hover\:border-b:hover,
.flex-auto ul li.active {
    border-bottom: 0;
}

.flex-auto ul li.active a {
    border-bottom-color: var(--ff-ink);
}

.mv_user_nav,
.mv_user_nav a {
    font-family: var(--ff-sans);
    font-size: 15px;
    color: var(--ff-ink);
}

/* Header CTA pill (FF_CONFIG.headerCta) */
.ff-header-cta {
    display: inline-flex;
    align-items: center;
    margin: auto 18px auto 0;
}

.relative.flex {
    position: relative;
    z-index: 10;
}

.selected-item {
    background-color: var(--ff-paper);
    color: var(--ff-ink);
    border: 1px solid var(--ff-stone);
}


/* ========================
   BUTTONS - pills, Satoshi 500, sentence case
======================== */
.mv_primary_button,
.mv_secondary_button,
.mv_custom_button,
.ff-btn {
    font-family: var(--ff-sans) !important;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 999px !important;
    transition: background-color var(--ff-dur-fast) var(--ff-ease), color var(--ff-dur-fast) var(--ff-ease), border-color var(--ff-dur-fast) var(--ff-ease), transform var(--ff-dur-fast) var(--ff-ease);
}

.mv_primary_button:active,
.mv_secondary_button:active,
.mv_custom_button:active,
.ff-btn:active {
    transform: scale(.985);
}

:is(.mv_primary_button, .mv_secondary_button, .mv_custom_button):where(:not(#mv_login *, #mv_reset *, header *)) {
    justify-content: center;
    text-align: center;
}

/* Template buttons */
.ff-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    border: 1px solid transparent;
    cursor: pointer;
}

.ff-btn--sm { font-size: 13px; padding: 10px 18px; }
.ff-btn--md { font-size: 15px; padding: 14px 26px; }
.ff-btn--lg { font-size: 17px; padding: 18px 34px; }

.ff-btn--ink {
    background: var(--ff-ink) !important;
    color: var(--ff-white) !important;
    border-color: var(--ff-ink) !important;
}

.ff-btn--accent {
    background: var(--ff-coral-deep) !important;
    color: var(--ff-white) !important;
    border-color: var(--ff-coral-deep) !important;
}

.ff-btn--outline {
    background: transparent !important;
    color: var(--ff-ink) !important;
    border-color: var(--ff-ink) !important;
}

/* MV secondary button = outline */
.mv_secondary_button {
    background-color: transparent !important;
    color: var(--ff-ink) !important;
    border: 1px solid var(--ff-ink) !important;
}

/* MODULE BUTTONS - multi-product option links (class="module-button") */
.module-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    font-family: var(--ff-sans);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    background-color: var(--ff-coral-deep);
    color: var(--ff-white) !important;
    border: 1px solid var(--ff-coral-deep);
    border-radius: 999px;
    transition: background-color var(--ff-dur-fast) var(--ff-ease);
}

.module-button.w-full {
    display: flex;
    width: 100%;
}

.module-button.outline {
    background-color: transparent;
    color: var(--ff-ink) !important;
    border-color: var(--ff-ink);
    outline: 0;                 /* MV's framework has an unrelated .outline utility */
}

.module-button:focus-visible,
.ff-btn:focus-visible {
    outline: 2px solid var(--ff-ink);
    outline-offset: 3px;
}

/* BUY BUTTON (native, on product pages) */
a.mv_custom_button.mv_primary_button.mt-4.mv_buy_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 24px 0;
    padding: 18px 34px;
    font-size: 17px;
    background: var(--ff-coral-deep) !important;
    color: var(--ff-white) !important;
    border: none;
    box-shadow: none;
}

a.affiliate_buy_button {
    display: inline-flex;
    margin: 24px 0;
    padding: 18px 34px;
    font-family: var(--ff-sans);
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    background: var(--ff-ink);
    color: var(--white);
    border: none;
    border-radius: 999px;
    transition: background-color var(--ff-dur-fast) var(--ff-ease);
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
    width: 100%;
}

.glowing-button {
    display: inline-flex;
    padding: 14px 26px;
    font-family: var(--ff-sans);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    background-color: var(--ff-ink);
    color: var(--white);
    border-radius: 999px;
}

/* BACK TO TOP (added by Global JS) - ink circle, white arrow */
.ff-back-to-top {
    position: fixed;
    right: 24px;
    bottom: 96px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: var(--ff-ink);
    color: var(--white);
    font-size: 17px;
    text-decoration: none;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--ff-dur) var(--ff-ease), transform var(--ff-dur) var(--ff-ease), visibility var(--ff-dur);
}

.ff-back-to-top.ff-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}


/* ========================
   SHOP HERO (welcome area)
======================== */
#mv_welcome_area {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background-color: transparent !important;
    color: var(--ff-ink) !important;
}

#mv_welcome_area > *:not(.ff-hero-deco):not(.ff-welcome-video) {
    position: relative;
    z-index: 2;
}

#mv_welcome_area h1,
#mv_welcome_area h2 {
    font-size: clamp(40px, 6vw, 80px) !important;
    line-height: 1.04 !important;
    letter-spacing: .01em;
    color: var(--ff-ink) !important;
    padding: 0;
    margin: 0;
    border: 0;
}

#mv_welcome_area h1 span,
#mv_welcome_area h2 span {
    color: inherit !important;
}

#mv_welcome_area h1 em, #mv_welcome_area h1 i,
#mv_welcome_area h2 em, #mv_welcome_area h2 i {
    letter-spacing: 0;
}

#mv_welcome_area p {
    display: block !important;
    max-width: 54ch;
    margin-top: 26px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ff-slate) !important;
}

#mv_welcome_area p span {
    color: inherit !important;
}

#mv_welcome_area .ff-blank {
    display: none;
}

#mv_welcome_area img {
    border-radius: var(--ff-radius);
    box-shadow: none;
}

/* Centered layout (FF_CONFIG.welcomeLayout = 'centered') */
.ff-hero-centered #mv_welcome_area > div:not(.ff-hero-deco) {
    justify-content: center;
    padding: clamp(72px, 9vw, 128px) var(--ff-gutter) 56px;
}

.ff-hero-centered #mv_welcome_area > div:not(.ff-hero-deco) > div:first-child {
    width: 100%;
    max-width: 980px;
    padding-left: 0;
    padding-right: 0;
}

.ff-hero-centered #mv_welcome_area > div:not(.ff-hero-deco) > div:not(:first-child),
.ff-hero-centered #mv_welcome_area > div:not(.ff-hero-deco) > div:first-child > img {
    display: none !important;
}

.ff-hero-centered #mv_welcome_area .mv_content,
.ff-hero-centered #mv_welcome_area .mv_content * {
    text-align: center !important;
}

.ff-hero-centered #mv_welcome_area p {
    margin-left: auto;
    margin-right: auto;
}

/* "(01) Client experience systems" label above the headline */
#mv_welcome_area .ff-hero-label {
    display: block;
    margin: 0 0 26px;
}

/* Hero button */
#mv_welcome_area .ff-hero-button {
    margin-top: 26px;
}

/* Hero pattern: 11 column rules (center skipped), crop marks, margin labels,
   and a faint coral ampersand. Built by the Global JS. */
.ff-hero-deco {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.ff-hero-deco .ff-rule {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(17, 17, 17, .055);
}

.ff-hero-deco .ff-crop {
    position: absolute;
    width: 28px;
    height: 28px;
    --ff-inset: clamp(20px, 3vw, 40px);
}

.ff-hero-deco .ff-crop--tl { top: var(--ff-inset); left: var(--ff-inset); border-top: 1px solid var(--ff-ink); border-left: 1px solid var(--ff-ink); }
.ff-hero-deco .ff-crop--tr { top: var(--ff-inset); right: var(--ff-inset); border-top: 1px solid var(--ff-ink); border-right: 1px solid var(--ff-ink); }
.ff-hero-deco .ff-crop--bl { bottom: var(--ff-inset); left: var(--ff-inset); border-bottom: 1px solid var(--ff-ink); border-left: 1px solid var(--ff-ink); }
.ff-hero-deco .ff-crop--br { bottom: var(--ff-inset); right: var(--ff-inset); border-bottom: 1px solid var(--ff-ink); border-right: 1px solid var(--ff-ink); }

.ff-hero-deco .ff-margin-label {
    position: absolute;
    font-family: var(--ff-label);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ff-slate);
    white-space: nowrap;
}

.ff-hero-deco .ff-margin-label--tl {
    top: clamp(26px, 3.4vw, 46px);
    left: calc(clamp(20px, 3vw, 40px) + 44px);
}

.ff-hero-deco .ff-margin-label--br {
    bottom: clamp(26px, 3.4vw, 46px);
    right: calc(clamp(20px, 3vw, 40px) + 44px);
}

.ff-hero-deco .ff-hero-amp {
    position: absolute;
    left: 50%;
    top: 46%;
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: clamp(360px, 48vw, 640px);
    line-height: 1;
    color: var(--ff-coral);
    opacity: .09;
    transform: translate(-50%, -50%);
    user-select: none;
}

/* Optional background video (welcomeMedia) */
#mv_welcome_area .ff-welcome-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}


/* ========================
   MOCKUP STRIP
======================== */
.ff-showcase {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ff-showcase__track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: ffMarquee var(--ff-marquee) linear infinite;
}

.ff-showcase:hover .ff-showcase__track,
.ff-showcase:focus-within .ff-showcase__track {
    animation-play-state: paused;
}

.ff-showcase__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 320px;
    aspect-ratio: 4 / 3;
    background-color: var(--ff-paper);
    border-radius: var(--ff-radius);
    overflow: hidden;
}

.ff-showcase__item img {
    width: 88%;
    height: 88%;
    object-fit: contain;
}

@keyframes ffMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


/* ========================
   INK BAND - "Every piece joined" (FF_CONFIG.inkBand)
======================== */
.ff-ink-band {
    margin-top: clamp(72px, 8vw, 112px);
    padding: clamp(80px, 9vw, 128px) var(--ff-gutter);
    background: var(--ff-ink);
    color: var(--ff-bone);
}

.ff-ink-band__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 6vw, 80px);
    max-width: var(--ff-max);
    margin: 0 auto;
}

.ff-ink-band__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.ff-ink-band__intro .ff-label {
    color: rgba(248, 246, 242, .7);
}

.ff-ink-band h2 {
    margin: 0;
    padding: 0;
    font-size: clamp(36px, 4.6vw, 60px) !important;
    line-height: 1.1 !important;
    color: var(--ff-bone);
}

.ff-ink-band h2 em {
    color: var(--ff-coral);
}

.ff-ink-band__intro p {
    margin: 0;
    font-size: 17px;
    line-height: 1.65;
    color: rgba(248, 246, 242, .78);
}

.ff-ink-band__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px 32px;
}

.ff-ink-band__col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 22px;
    border-top: 1px solid rgba(248, 246, 242, .22);
}

.ff-ink-band__num {
    font-family: var(--ff-label);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .14em;
    color: var(--ff-coral);
}

.ff-ink-band__col h3 {
    margin: 0;
    font-family: var(--ff-serif);
    font-weight: 400;
    font-size: 28px !important;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ff-bone);
}

.ff-ink-band__col p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(248, 246, 242, .78);
}


/* ========================
   SECTION INTRO (category pages, built by Global JS)
======================== */
.description-section {
    max-width: none;
    margin: clamp(40px, 5vw, 72px) 0 0;
    padding: clamp(72px, 8vw, 112px) max(var(--ff-gutter), calc((100% - 860px) / 2));
    text-align: center;
    background: var(--ff-ink);
    color: var(--ff-bone);
}

.description-section .ff-eyebrow {
    margin-bottom: 1rem;
    color: rgba(248, 246, 242, .7);
}

.description-section h2 {
    margin: 0 auto 1.1rem;
    padding: 0;
    font-size: clamp(36px, 4.6vw, 60px) !important;
    color: var(--ff-bone);
}

.description-section h2 em {
    color: var(--ff-coral);
}

.description-section p:not(.ff-eyebrow) {
    max-width: 54ch;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.65;
    color: rgba(248, 246, 242, .78);
}


/* Crop frame on the ink intro (built by the Global JS) */
.description-section {
    position: relative;
    overflow: hidden;
}

.description-section > :not(.ff-intro-deco) {
    position: relative;
    z-index: 1;
}

.ff-intro-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    --ff-inset: clamp(20px, 3vw, 40px);
}

.ff-intro-deco .ff-rule {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(248, 246, 242, .07);
}

.ff-intro-deco .ff-crop {
    position: absolute;
    width: 28px;
    height: 28px;
}

.ff-intro-deco .ff-crop--tl { top: var(--ff-inset); left: var(--ff-inset); border-top: 1px solid var(--ff-bone); border-left: 1px solid var(--ff-bone); }
.ff-intro-deco .ff-crop--br { bottom: var(--ff-inset); right: var(--ff-inset); border-bottom: 1px solid var(--ff-bone); border-right: 1px solid var(--ff-bone); }

@media (max-width: 768px) {
    .ff-intro-deco .ff-rule:nth-child(even) { display: none; }
}

/* Ink version for light sections (the product hero) */
.ff-intro-deco--ink .ff-rule { background: rgba(17, 17, 17, .05); }
.ff-intro-deco--ink .ff-crop--tl,
.ff-intro-deco--ink .ff-crop--br { border-color: var(--ff-ink); }

/* Category pages: the ink intro replaces the shop hero and product strip */
.ff-category-page #mv_welcome_area {
    display: none !important;
}

.ff-category-page .description-section {
    margin-top: 0;
}


/* ========================
   PRODUCT LIST - "Available resources"
======================== */
/* Shop sections on the page get the design system's width and gutters */
.mv_search_container,
.text-xl.font-semibold.mt-4.tracking-wide,
.mv_product_list {
    max-width: var(--ff-max);
    margin-left: auto;
    margin-right: auto;
}

/* Title row: big serif title with the family chips beside it */
.ff-list-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: clamp(80px, 9vw, 120px) 0 44px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--ff-ink);
}

.text-xl.font-semibold.mt-4.tracking-wide {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    font-family: var(--ff-serif);
    font-weight: 400 !important;
    font-size: clamp(40px, 5vw, 64px) !important;
    line-height: 1 !important;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    color: var(--ff-ink);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Without the JS title row, the title still gets its rule */
.text-xl.font-semibold.mt-4.tracking-wide:not(.ff-list-head *) {
    margin: clamp(80px, 9vw, 120px) auto 44px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--ff-ink);
}

/* Chips + search sit together on the right of the title row */
.ff-list-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ff-list-tools .mv_search_container {
    margin: 0 !important;
    padding: 0 !important;
}

.ff-list-tools .mv_search_box {
    min-height: 38px !important;
    width: 180px !important;
}

/* Family chips */
.ff-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ff-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    font-family: var(--ff-sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none !important;
    color: var(--ff-ink) !important;
    background: transparent;
    border: 1px solid var(--ff-stone);
    border-radius: 999px;
    transition: border-color var(--ff-dur-fast) var(--ff-ease), background-color var(--ff-dur-fast) var(--ff-ease);
}

.ff-chip .ff-chip-amp {
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 16px;
    line-height: 1;
    color: var(--ff-coral);
}

.ff-chip[aria-current="true"] {
    color: var(--ff-white) !important;
    background: var(--ff-ink);
    border-color: var(--ff-ink);
}

/* Native category dropdown is replaced by the chips; search stays */
.ff-has-chips .js_product_category {
    display: none !important;
}

.ff-has-chips .mv_search_container > div:first-child {
    display: none !important;
}

.mv_search_container {
    justify-content: flex-end;
    gap: 12px;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
}

.mv_search_container > div {
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.mv_search_container select,
.mv_search_container .mv_search_box {
    min-height: 42px;
    padding-top: 0;
    padding-bottom: 0;
    font-family: var(--ff-sans);
    font-size: 14px;
    color: var(--ff-ink) !important;
    background-color: var(--ff-white) !important;
    border: 1px solid var(--ff-stone) !important;
    border-radius: 999px !important;
}

.mv_search_container .mv_search_box {
    padding-left: 42px;
}

.mv_search_container select:focus,
.mv_search_container .mv_search_box:focus {
    border-color: var(--ff-ink) !important;
}

.mv_product_item_buttons .border-t {
    border-top: 0;
}

.border-b {
    border-bottom-width: 0;
}

/* Grid */
.mv_product_list,
.mv_module_grid:not(.ff-curriculum) {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 56px 32px !important;
}

/* PRODUCT CARD - boxless */
.mv_product_list .mv_product_item,
.mv_module_grid:not(.ff-curriculum) .mv_module_item,
.mv_footer_product_item_card {
    position: relative !important;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}

.mv_product_item .content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Photo stage */
.mv_product_item .content > a:first-child,
.mv_module_grid:not(.ff-curriculum) .mv_module_item .content > a:first-child,
.mv_footer_product_item_card a:first-child {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--ff-paper);
    border-radius: var(--ff-radius);
}

.mv_product_item .content > a:first-child img,
.mv_module_grid:not(.ff-curriculum) .mv_module_item .content > a:first-child img,
.mv_footer_product_item_card a:first-child img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 16px;
    object-fit: contain;
    transition: transform var(--ff-dur-image) var(--ff-ease);
}

.mv_product_item:hover .content > a:first-child img,
.mv_module_grid:not(.ff-curriculum) .mv_module_item:hover .content > a:first-child img,
.mv_footer_product_item_card:hover a:first-child img {
    transform: scale(1.03);
}

/* Ink stage: Flow Kit photos are ink and fill the photo area edge to edge */
.mv_product_item.ff-card--ink .content > a:first-child {
    background-color: var(--ff-ink);
}

.mv_product_item.ff-card--ink .content > a:first-child img {
    padding: 0;
    object-fit: cover;
}

/* "Included" strip - slides up on hover (FF_CONFIG.cardIncludes) */
.ff-included {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px 18px;
    background: var(--ff-ink);
    color: var(--ff-bone);
    transform: translateY(101%);
    transition: transform var(--ff-dur-strip) var(--ff-ease);
}

.ff-included__label {
    font-family: var(--ff-label);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(248, 246, 242, .7);
}

.ff-included__list {
    font-family: var(--ff-sans);
    font-size: 14px;
    line-height: 1.45;
}

/* Paused GIFs: the first frame sits on a canvas over the image (Global JS) */
.ff-gif-still {
    position: absolute;
    pointer-events: none;
}

.ff-gif-still.ff-gif-off {
    visibility: hidden;
}

.ff-showcase__item {
    position: relative;
}

/* Products that belong to a collection, on the full shop (Global JS) */
.mv_product_item.ff-collection-part {
    display: none !important;
}

/* Category-only products: off the full shop (All), shown on their own
   category page and in My library. Add a product's ID to hide it from All.
   1198602 = Rosemary for Google Workspace */
body:has(.js_product_category option[value="0"]:checked) .mv_product_list .mv_product_item:is(.mv_product_1198602):not(.mv_my_products *) {
    display: none !important;
}

/* Not on Flow Kits: their photo already shows the counts, and the strip
   would cover them */
.mv_product_item.ff-card--ink .ff-included {
    display: none !important;
}

/* WordPress excerpt in the strip: up to four lines */
.ff-included--excerpt .ff-included__list {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.5;
}

.mv_product_item:hover .ff-included,
.mv_product_item:focus-within .ff-included {
    transform: none;
}

/* Card body */
.mv_product_item .content > .p-4:not(.mv_product_item_buttons) {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 !important;
    text-align: left;
}

/* Label line: LABEL · FORMAT · PLATFORM, plus the Free tag */
.ff-card-meta[hidden],
.ff-hero-meta[hidden] {
    display: none !important;
}

.ff-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ff-card-meta__text,
.ff-card-eyebrow {
    font-family: var(--ff-label);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ff-slate);
}

.ff-free-tag {
    padding: 5px 10px;
    font-family: var(--ff-label);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ff-ink);
    background: var(--ff-coral-tint);
    border-radius: 999px;
}

/* Title */
.mv_product_item h2.text-lg,
.mv_product_item h2.text-lg a {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--ff-serif);
    font-weight: 400 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    letter-spacing: 0;
    text-align: left;
    color: var(--ff-ink);
}

.mv_product_item h2 em {
    transition: color var(--ff-dur-fast) var(--ff-ease);
}

.mv_product_item:hover h2 em {
    color: var(--ff-coral);
}

/* Description - three lines */
.mv_product_item .mv_content,
.mv_product_item .mv_content p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    color: var(--ff-slate);
}

/* Footer row: "Learn more ->" + price pill */
.mv_product_item .mv_product_item_buttons {
    margin-top: auto;
    padding: 8px 0 0 !important;
}

.mv_product_item_buttons > .w-full {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;            /* the pill's height, so rows without a pill line up */
    margin: 0 !important;
    padding-top: 0 !important;
    text-align: left;
}

.mv_product_item_buttons a.mv_secondary_button {
    flex: 0 0 auto;
    width: auto;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    background: none !important;
    border: 0 !important;
    color: var(--ff-ink) !important;
}

.mv_product_item_buttons a.mv_secondary_button::after {
    content: " \2192";
}

.mv_product_item_buttons a.mv_primary_button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    box-sizing: border-box;
    height: 44px;
    margin: 0 !important;
    padding: 0 18px;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    background: var(--ff-coral-deep) !important;
    color: var(--ff-white) !important;
    border-color: var(--ff-coral-deep) !important;
}

/* Free products: ink "Get it free" pill */
.mv_product_item.free-product .mv_product_item_buttons a.mv_primary_button {
    background: var(--ff-ink) !important;
    border-color: var(--ff-ink) !important;
}

/* Option cards on multi-product pages (Peony, Lotus...) */
.mv_module_grid:not(.ff-curriculum) .mv_module_item .content > .p-4 {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
    padding: 16px 0 0 !important;
    text-align: left;
}

.mv_module_grid:not(.ff-curriculum) .mv_module_item h2 {
    margin: 0;
    padding: 0;
    font-size: 24px !important;
    line-height: 1.2 !important;
    text-align: left !important;
    background: none;
}

.mv_module_grid:not(.ff-curriculum) .mv_module_item .mv_content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.6;
    text-align: left !important;
    color: var(--ff-slate);
}

.mv_module_item .mv_content > p:last-of-type:not(.button-group p) {
    margin-bottom: 16px;
}

.mv_module_item .button-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.mv_module_item .button-group p {
    margin: 0;
}

.mv_module_item .button-group .module-button.outline {
    padding: 0;
    background: none !important;
    border: 0;
    color: var(--ff-ink) !important;
}

.mv_module_item .button-group .module-button.outline::after {
    content: "\00a0\2192";
}

.mv_module_grid {
    position: relative;
    z-index: 1;
}

.shadow-lg,
.shadow-md {
    box-shadow: none;
}

/* "2 Options" / "Other Available Resources" titles (not the lesson sidebar) */
body:not(.mv_page_module) h2.text-lg.pt-4.pb-4 {
    display: block;
    width: 100%;
    max-width: none;             /* same width as the module grid below it */
    margin: clamp(56px, 7vw, 96px) 0 36px;
    padding: 0 0 20px !important;
    font-family: var(--ff-serif);
    font-size: clamp(32px, 4vw, 48px) !important;
    line-height: 1.1 !important;
    text-align: left;
    text-transform: none;
    color: var(--ff-ink);
    background: none;
    border-bottom: 1px solid var(--ff-ink);
}

h2.text-lg.pt-4.pb-4 i.fas {
    display: none;
}


/* ========================
   LESSON SIDEBAR (lesson pages): the area's lessons as one card, like the
   product page's "What's inside" card. Global JS adds the count and moves
   the Next button and area menu into the card.
======================== */
.mv_page_module .ff-lesson-side > h2.text-lg.pt-4.pb-4 { display: none !important; }
.mv_page_module .ff-lesson-side { padding-top: 16px !important; }
.mv_page_module .ff-lesson-side > .w-full.mb-6 { margin-bottom: 0 !important; }
.ff-lesson-side .mv_module_item {
    padding: 26px 28px 28px !important;
    background: #FFFFFF !important;
    border: 1px solid #E4E0D9;
    border-radius: 16px !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.ff-lesson-side .ff-ls-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 0 0 18px !important;
    border-bottom: 1px solid #E4E0D9;
}
.ff-lesson-side .ff-ls-head h2 {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: var(--ff-label) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ff-slate) !important;
}
.ff-lesson-side .ff-ls-head .mv_content { display: none; }
.ff-lesson-side .ff-ls-count {
    flex: none;
    font-family: var(--ff-serif);
    font-size: 30px;
    line-height: 1;
    color: var(--ff-ink);
    font-variant-numeric: tabular-nums;
}
.ff-lesson-side [id^="mv_modules_lessons_"]:not([id*="container"]) { margin: 6px 0 0 !important; }
.ff-lesson-side [id^="mv_modules_lessons_container_"] > a {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 11px 0 !important;
    border: 0 !important;
    font-size: 16px;
    line-height: 1.35;
    color: var(--ff-ink) !important;
    text-decoration: none !important;
}
.ff-lesson-side [id^="mv_modules_lessons_container_"] > a > span.absolute { display: none !important; }
.ff-lesson-side [id^="mv_modules_lessons_container_"] > a > span.flex-none {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 26px !important;
    height: 26px;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50%;
    background: #FBE9E5 !important;
    color: var(--ff-coral-deep) !important;
    font-family: var(--ff-label);
    font-size: 12px !important;
    font-weight: 500;
}
.ff-lesson-side [id^="mv_modules_lessons_container_"] > a > span.flex-none.mv_custom_bg {
    background: var(--ff-coral-deep) !important;
    color: #FFFFFF !important;
}
.ff-lesson-side [id^="mv_modules_lessons_container_"] > a > span.flex-auto { padding-left: 0 !important; }
.ff-lesson-side [id^="mv_modules_lessons_container_"] > a > .mv_custom_text { color: var(--ff-coral-deep) !important; }
.ff-lesson-side [id^="mv_modules_lessons_container_"] > a:hover > span.flex-auto { color: var(--ff-coral-deep) !important; }
.ff-lesson-side .ff-ls-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
}
.ff-lesson-side .ff-ls-actions > :only-child { grid-column: 1 / -1; }
.ff-lesson-side .ff-ls-actions a.mv_primary_button {
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 56px;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: var(--ff-coral-deep) !important;
    border-color: var(--ff-coral-deep) !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    white-space: nowrap;
}
.ff-lesson-side .ff-ls-actions select {
    width: 100%;
    height: 56px;
    margin: 0 !important;
    padding: 0 38px 0 20px !important;
    border: 1px solid var(--ff-ink) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 18px center !important;
    -webkit-appearance: none;
    appearance: none;
    font-size: 15px !important;
    color: var(--ff-ink) !important;
    cursor: pointer;
}
/* Lesson text: headings step down to the narrower column */
.mv_page_module .mv_content h2 { font-size: clamp(26px, 2.6vw, 34px) !important; margin-top: 2.2rem; }
@media (min-width: 1024px) {
    .mv_page_module .ff-lesson-side { position: sticky; top: 96px; align-self: flex-start; }
}

/* ========================
   COURSE / LIBRARY SECTIONS (product pages, not kit option pages)
======================== */
.mv_module_grid.ff-curriculum {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;          /* opening one section's areas does not stretch its row */
    gap: 20px;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    counter-reset: ff-module;
}

@media (max-width: 1100px) { .mv_module_grid.ff-curriculum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .mv_module_grid.ff-curriculum { grid-template-columns: 1fr; } }

/* Locked cards keep the title clear of the "Locked" pill */
.mv_module_grid.ff-curriculum > .mv_module_item.ff-locked .content > .p-4:first-of-type { padding-right: 96px !important; }

.mv_module_grid.ff-curriculum > .mv_module_item {
    position: relative;
    counter-increment: ff-module;
    padding: clamp(24px, 3vw, 36px) !important;
    background-color: var(--ff-paper) !important;
    border: 0 !important;
    border-radius: var(--ff-radius) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.mv_module_grid.ff-curriculum > .mv_module_item .content > a:first-child {
    display: none;   /* section images are hidden in the list layout */
}

.mv_module_grid.ff-curriculum > .mv_module_item .content > .p-4 {
    display: block;
    flex: 0 0 auto !important;
    padding: 0 !important;
}

/* Header: (01) above the title */
.mv_module_grid.ff-curriculum > .mv_module_item .content > .p-4:first-of-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* Card order: header, "5 areas", "View this section", then the opened area list */
.mv_module_grid.ff-curriculum > .mv_module_item .content > .p-4:not(:first-of-type) { order: 1; }
.mv_module_grid.ff-curriculum > .mv_module_item .content > .w-full.pl-4.pr-4 { order: 2; }
.mv_module_grid.ff-curriculum > .mv_module_item .content > [id^="mv_modules_lessons_"] { order: 3; }

.mv_module_grid.ff-curriculum > .mv_module_item .content > .p-4:first-of-type::before {
    content: "(" counter(ff-module, decimal-leading-zero) ")";
    flex: 0 0 auto;
    font-family: var(--ff-label);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .14em;
    color: var(--ff-coral-deep);
}

.mv_module_grid.ff-curriculum > .mv_module_item h2 {
    margin: 0;
    padding: 0;
    font-size: clamp(24px, 2.6vw, 32px) !important;
    line-height: 1.15 !important;
    text-align: left !important;
}

.mv_module_grid.ff-curriculum > .mv_module_item h2 span[style] {
    display: inline-block;
    margin-top: 8px;
    padding: 0 !important;
    font-family: var(--ff-label) !important;
    font-size: 11px !important;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ff-slate) !important;
    background: none !important;
}

.mv_module_grid.ff-curriculum > .mv_module_item .mv_content:empty {
    display: none;
}

/* "5 areas" toggle */
.mv_module_grid.ff-curriculum > .mv_module_item .content > .p-4:not(:first-of-type) {
    margin-top: 14px;
}

.mv_module_grid.ff-curriculum > .mv_module_item a.mv_custom_text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ff-label);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ff-slate) !important;
}

/* Lesson list (the outer box only: a margin on the inner container is not
   counted when MemberVault measures it to open the list, which cut off the last area) */
.mv_module_grid.ff-curriculum > .mv_module_item [id^="mv_modules_lessons_"]:not([id*="button"]):not([id*="container"]) {
    margin: 20px 0 0 !important;
    background-color: var(--ff-white) !important;
    border-radius: 10px;
}

.mv_module_grid.ff-curriculum > .mv_module_item [id^="mv_modules_lessons_container_"] > a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px !important;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ff-ink);
    border-color: var(--ff-stone) !important;
    transition: background-color var(--ff-dur-fast) var(--ff-ease);
}

.mv_module_grid.ff-curriculum > .mv_module_item [id^="mv_modules_lessons_container_"] > a:first-child {
    border-top: 0 !important;
}

.mv_module_grid.ff-curriculum > .mv_module_item [id^="mv_modules_lessons_container_"] > a::after {
    content: "\2192";
    margin-left: auto;
    font-size: 14px;
    color: var(--ff-slate);
}

.mv_module_grid.ff-curriculum > .mv_module_item [id^="mv_modules_lessons_container_"] > a > span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    font-family: var(--ff-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--ff-ink);
    border: 1px solid var(--ff-ink) !important;
    border-radius: 50%;
}

.mv_module_grid.ff-curriculum > .mv_module_item [id^="mv_modules_lessons_container_"] > a > span:last-child {
    padding-left: 0 !important;
}

.mv_module_grid.ff-curriculum > .mv_module_item [id^="mv_modules_lessons_container_"] > .border-t:last-child,
.mv_module_grid.ff-curriculum > .mv_module_item .content > p.flex-auto {
    display: none;
}

/* "View this section" - outline pill under the "5 areas" toggle */
.mv_module_grid.ff-curriculum > .mv_module_item .w-full.pl-4.pr-4 {
    width: auto !important;
    margin-top: 18px;
    padding: 0 !important;
}

.mv_module_grid.ff-curriculum > .mv_module_item .mv_custom_button.mv_primary_button {
    display: inline-flex !important;
    width: auto !important;
    padding: 9px 18px;
    font-size: 14px;
    white-space: nowrap;
    background-color: transparent !important;
    color: var(--ff-ink) !important;
    border: 1px solid var(--ff-ink) !important;
}

/* Locked sections: white "Locked" pill top right, whole card opens checkout */
.mv_module_grid.ff-curriculum > .mv_module_item.ff-locked .w-full.pl-4.pr-4 {
    display: none !important;
}

.mv_module_grid.ff-curriculum > .mv_module_item.ff-locked a.absolute {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: clamp(24px, 3vw, 36px);
    border-radius: var(--ff-radius);
}

.mv_module_grid.ff-curriculum > .mv_module_item.ff-locked a.absolute > div {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    background-color: var(--ff-white) !important;
    color: var(--ff-ink) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

.mv_module_grid.ff-curriculum > .mv_module_item.ff-locked a.absolute i {
    padding: 0 !important;
    font-size: 11px !important;
    color: var(--ff-ink) !important;
}

.ff-locked-label {
    font-family: var(--ff-label);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
}


/* ========================
   PRODUCT PAGE
======================== */
body.mv_page_product .mv_breadcrumbs,
.hidden.flex-none.p-4.lg\:inline-block.lg\:w-16,
h1.hidden.text-3xl.font-bold.mb-4.lg\:inline-block {
    display: none !important;
}

.mv_page_product img.w-full.mb-2.lg\:rounded-lg.lg\:shadow-md {
    display: none;
}

/* PRODUCT HERO (built by Global JS): label, title, description, buy button
   on the left; mockup on a paper stage on the right */
.product-hero-section {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 7vw, 96px) var(--ff-gutter) 64px;
}

.product-hero-section > .product-hero-inner {
    position: relative;
    z-index: 1;
}

.product-hero-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: clamp(40px, 6vw, 88px);
    align-items: center;
    max-width: var(--ff-max);
    margin: 0 auto;
}

.product-hero-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.product-hero-title .ff-hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.product-hero-title .ff-hero-meta .ff-amp {
    font-size: 18px;
    letter-spacing: 0;
    text-transform: none;
}

.product-hero-section h1 {
    margin: 0;
    font-size: clamp(40px, 5.2vw, 72px) !important;
    line-height: 1.04 !important;
    color: var(--ff-ink);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 600ms var(--ff-ease), transform 600ms var(--ff-ease);
}

.product-hero-section.show h1 {
    opacity: 1;
    transform: none;
}

.product-hero-title .ff-hero-desc {
    max-width: 48ch;
    margin: 0;
    font-size: 18px !important;
    line-height: 1.65;
    color: var(--ff-slate);
}

.product-hero-title .ff-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.product-hero-media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background-color: var(--ff-paper);
    border-radius: var(--ff-radius);
}

.product-hero-media img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.product-hero-section.ff-no-image .product-hero-inner {
    grid-template-columns: 1fr;
}

/* Product description below the hero: the hero already shows the mockup,
   so the description's own image column is hidden and its heading steps down */
.ff-has-product-hero .product-header {
    display: block;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.ff-has-product-hero .product-header .image-column {
    display: none;
}

.ff-has-product-hero .product-header .text-column {
    padding: 0;
}

.product-header h1 {
    font-size: clamp(30px, 3.6vw, 44px) !important;
    line-height: 1.1 !important;
}

.ff-has-product-hero .mv_content > .w-full.text-right.mt-4 {
    max-width: 760px;
    margin: 0 auto;
    text-align: left !important;
}

/* Old product descriptions have colors typed into their headings */
.product-header :is(h1, h2, h3, h4) {
    color: var(--ff-ink) !important;
}

/* Center the product short description (not on cards or the shop hero) */
.mt-4.mv_content:where(:not(.mv_product_item *, .mv_module_item *, #mv_welcome_area *)) {
    text-align: center;
}

.mt-4.mv_content:where(:not(.mv_product_item *, .mv_module_item *, #mv_welcome_area *)) p {
    display: inline-block;
    text-align: center;
}


/* ========================
   MENU - MV's slide-out menu (#mv_main_nav) in ink
   Content is MemberVault's own: nav links, search, My / Available Resources.
======================== */
#mv_main_nav {
    width: min(100%, 560px) !important;
    padding: 0 30px 40px;
    box-sizing: border-box;
    background: var(--ff-ink) !important;
    color: var(--ff-bone) !important;
    box-shadow: 0 0 80px rgba(17, 17, 17, .45);
    overflow-x: hidden !important;
}
#mv_main_nav a { color: var(--ff-bone); text-decoration: none; }

#mv_main_nav > * { position: relative; z-index: 1; }

/* Top bar: wordmark (added by the JS) + close */
#mv_main_nav .ff-nav-mark {
    display: block; margin: 0 -30px; padding: 24px 30px;
    border-bottom: 1px solid rgba(248, 246, 242, .14);
    font: 400 22px/1 var(--ff-serif); letter-spacing: .04em;
}
#mv_main_nav .ff-nav-mark em { font-style: italic; letter-spacing: 0; }
#mv_main_nav .ff-nav-amp { color: var(--ff-coral); }
#mv_main_nav > .mv_close_button {
    position: absolute !important; top: 14px !important; right: 18px !important; z-index: 2;
    width: 40px; height: 40px; margin: 0 !important;
    display: grid !important; place-items: center;
    background: transparent !important; color: var(--ff-bone) !important; font-size: 22px;
    transition: color var(--ff-dur) ease;
}
#mv_main_nav > .mv_close_button:hover { color: var(--ff-coral) !important; }

/* Search row */
#mv_main_nav .border-b { border-color: rgba(248, 246, 242, .14) !important; }
#mv_main_nav > div.p-4 { padding: 16px 0 !important; }
#mv_main_nav .mv_search_container { display: flex; align-items: center; gap: 10px; color: rgba(248, 246, 242, .62); }
#mv_main_nav .mv_search_container a, #mv_main_nav .mv_search_container i { color: rgba(248, 246, 242, .62); }
#mv_main_nav .mv_search_box {
    flex: 1; width: auto !important; opacity: 1 !important;
    padding: 10px 16px !important; border: 0 !important; border-radius: 999px !important;
    background: rgba(248, 246, 242, .08) !important; color: var(--ff-bone) !important;
    font: 400 15px/1.2 var(--ff-sans);
}
#mv_main_nav .mv_search_box::placeholder { color: rgba(248, 246, 242, .5); }

/* "Menu" heading: the wordmark replaces it */
#mv_main_nav > div.mt-4 { display: none !important; }

/* Main nav rows: numbered, large Playfair */
#mv_main_nav > ul:not([id]) { counter-reset: ffnav; margin: 8px 0 28px; }
#mv_main_nav > ul:not([id]) > li { counter-increment: ffnav; border-bottom: 1px solid rgba(248, 246, 242, .14) !important; }
#mv_main_nav > ul:not([id]) > li:first-child { border-top: 1px solid rgba(248, 246, 242, .14); }
/* The big quiet ampersand, behind the main nav rows only */
#mv_main_nav > ul:not([id])::after {
    content: "&"; position: absolute; top: 50%; right: -80px; z-index: -1;
    transform: translateY(-50%);
    font: italic 400 400px/1 var(--ff-serif); color: var(--ff-coral); opacity: .14;
    pointer-events: none;
}
#mv_main_nav > ul:not([id]) > li > a { align-items: center; gap: 24px; padding: 22px 0 !important; }
#mv_main_nav > ul:not([id]) > li > a::before {
    content: "(" counter(ffnav, decimal-leading-zero) ")"; flex: none; width: 2.6em;
    font: 500 11px/1 var(--ff-label); letter-spacing: .14em; color: var(--ff-coral);
}
#mv_main_nav > ul:not([id]) > li > a > span:first-child {
    flex: 1 !important; width: auto !important;
    font: 400 clamp(30px, 6vw, 42px)/1.05 var(--ff-serif); letter-spacing: .02em;
    transition: transform 300ms var(--ff-ease);
}
#mv_main_nav > ul:not([id]) span { font-weight: 400 !important; }
#mv_main_nav > ul:not([id]) > li > a:hover > span:first-child { transform: translate3d(6px, 0, 0); }

/* Arrows: a thin → in place of MV's chevron */
#mv_main_nav li > a > span:last-child { flex: none !important; width: auto !important; }
#mv_main_nav li > a .fa-angle-right { display: none; }
#mv_main_nav li > a > span:last-child::after { content: "\2192"; font: 400 22px/1 var(--ff-sans); transition: transform 300ms var(--ff-ease), color var(--ff-dur) ease; display: inline-block; }
#mv_main_nav li > a:hover > span:last-child::after { transform: translateX(4px); color: var(--ff-coral); }

/* My / Available Resources tabs */
#mv_main_nav_my_link, #mv_main_nav_available_link {
    padding: 14px 0 !important; border-bottom: 1px solid rgba(248, 246, 242, .14) !important;
    font: 500 11px/1 var(--ff-label) !important; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(248, 246, 242, .55) !important;
}
#mv_main_nav_my_link.mv_custom_text, #mv_main_nav_available_link.mv_custom_text,
#mv_main_nav_my_link.selected-item, #mv_main_nav_available_link.selected-item {
    color: var(--ff-bone) !important; border-bottom-color: var(--ff-coral) !important;
}

/* Resource lists */
#mv_main_nav_my_content > li > a, #mv_main_nav_available_content > li > a {
    align-items: center; gap: 16px; padding: 16px 0 !important;
    font: 400 16px/1.45 var(--ff-sans);
}
#mv_main_nav_my_content > li > a:hover, #mv_main_nav_available_content > li > a:hover { color: var(--ff-coral); }
#mv_main_nav_my_content > li, #mv_main_nav_available_content > li { border-bottom: 1px solid rgba(248, 246, 242, .1) !important; }
#mv_main_nav_my_content > li > a > span:first-child, #mv_main_nav_available_content > li > a > span:first-child { flex: 1 !important; width: auto !important; }
#mv_main_nav_my_content span, #mv_main_nav_available_content span { font-weight: 400 !important; }

@media (max-width: 480px) {
    #mv_main_nav { padding: 0 20px 32px; }
    #mv_main_nav .ff-nav-mark { margin: 0 -20px; padding: 20px; }
    #mv_main_nav > ul:not([id]) > li > a { gap: 16px; padding: 18px 0 !important; }
    #mv_main_nav > ul:not([id])::after { font-size: 300px; right: -60px; }
}

/* ========================
   SIGN IN + PASSWORD RESET - MV's slide-in panels (#mv_login, #mv_reset) in ink
   Matches the menu. Fields, buttons and messages stay MemberVault's.
======================== */
:is(#mv_login, #mv_reset) {
    width: min(100%, 560px) !important;
    padding: 0 30px 40px;
    box-sizing: border-box;
    background: var(--ff-ink) !important;
    color: var(--ff-bone) !important;
    box-shadow: 0 0 80px rgba(17, 17, 17, .45);
    overflow-x: hidden !important;
}
:is(#mv_login, #mv_reset) > * { position: relative; z-index: 1; }
:is(#mv_login, #mv_reset) a { color: var(--ff-bone); }
:is(#mv_login, #mv_reset) .ff-nav-mark {
    display: block; margin: 0 -30px; padding: 24px 30px;
    border-bottom: 1px solid rgba(248, 246, 242, .14);
    font: 400 22px/1 var(--ff-serif); letter-spacing: .04em; color: var(--ff-bone); text-decoration: none;
}
:is(#mv_login, #mv_reset) .ff-nav-mark em { font-style: italic; letter-spacing: 0; }
:is(#mv_login, #mv_reset) .ff-nav-amp { color: var(--ff-coral); }
:is(#mv_login, #mv_reset) > .mv_close_button {
    position: absolute !important; top: 14px !important; right: 18px !important; z-index: 2;
    width: 40px; height: 40px; margin: 0 !important;
    display: grid !important; place-items: center;
    background: transparent !important; color: var(--ff-bone) !important; font-size: 22px;
    transition: color var(--ff-dur) ease;
}
:is(#mv_login, #mv_reset) > .mv_close_button:hover { color: var(--ff-coral) !important; }

/* Title block: large Playfair "Sign In" */
:is(#mv_login, #mv_reset) > .bg-gray-200 {
    position: relative; overflow: visible;
    padding: 56px 0 28px !important; text-align: left !important;
    background: transparent !important;
}
:is(#mv_login, #mv_reset) > .bg-gray-200 > .rounded-full { display: none !important; }
:is(#mv_login, #mv_reset) > .bg-gray-200 > .font-semibold {
    margin: 0 !important;
    font: 400 clamp(40px, 7vw, 56px)/1.05 var(--ff-serif) !important; letter-spacing: .01em;
    color: var(--ff-bone);
}
/* The quiet ampersand, anchored to the bottom of the panel */
:is(#mv_login, #mv_reset)::after {
    content: "&"; position: absolute; bottom: -10px; right: -70px; z-index: 0;
    font: italic 400 420px/1 var(--ff-serif); color: var(--ff-coral); opacity: .14;
    pointer-events: none;
}

/* Form */
:is(#mv_login, #mv_reset) :is(#login_before, #login_forgot, #reset_before) {
    padding: 28px 0 0 !important; font-size: 15px !important;
    border-top: 1px solid rgba(248, 246, 242, .14);
}
:is(#mv_login, #mv_reset) h3 {
    margin: 0 0 14px !important; font-weight: 500 !important;
    color: rgba(248, 246, 242, .62) !important;
}
:is(#mv_login, #mv_reset) p { color: rgba(248, 246, 242, .75); font-weight: 400 !important; line-height: 1.6; }
:is(#mv_login, #mv_reset) input[type="text"], :is(#mv_login, #mv_reset) input[type="password"] {
    padding: 15px 18px !important;
    background: rgba(248, 246, 242, .06) !important; color: var(--ff-bone) !important;
    border: 1px solid rgba(248, 246, 242, .18) !important; border-radius: 12px !important;
    font: 400 16px/1.2 var(--ff-sans);
    transition: border-color var(--ff-dur) ease, background var(--ff-dur) ease;
}
:is(#mv_login, #mv_reset) input::placeholder { color: rgba(248, 246, 242, .45); }
:is(#mv_login, #mv_reset) input:focus { outline: 0; border-color: var(--ff-bone) !important; background: rgba(248, 246, 242, .1) !important; }
:is(#mv_login, #mv_reset) .flex-wrap.mt-2 { margin-top: 12px !important; }
:is(#mv_login, #mv_reset) a.mv_custom_button {
    margin-top: 22px !important; padding: 18px 24px !important;
    background: var(--ff-coral-deep) !important; border: 0 !important; color: var(--ff-white) !important;
    font: 500 17px/1 var(--ff-sans) !important; border-radius: 999px !important;
    transition: background var(--ff-dur) ease;
}
:is(#mv_login, #mv_reset) a.mv_custom_button:hover { background: var(--ff-coral) !important; }

/* Messages */
:is(#mv_login, #mv_reset) .text-red-700 { color: #F4A397 !important; font-weight: 500 !important; margin-top: 12px; }
:is(#mv_login, #mv_reset) .text-green-700 { color: var(--ff-bone) !important; font-weight: 500 !important; margin-top: 12px; }

/* "admin login" / "forgot password?" row */
#mv_login > .italic {
    padding: 20px 0 0 !important; margin-top: 0 !important;
    font-style: normal !important; font: 400 14px/1.4 var(--ff-sans) !important;
}
#mv_login > .italic a { color: rgba(248, 246, 242, .62); text-decoration: none; transition: color var(--ff-dur) ease; }
#mv_login > .italic a:hover { color: var(--ff-coral); }

/* Dimmed page behind any open panel */
#mv_cover { background: var(--ff-ink) !important; opacity: .55 !important; }

@media (max-width: 480px) {
    :is(#mv_login, #mv_reset) { padding: 0 20px 32px; }
    :is(#mv_login, #mv_reset) .ff-nav-mark { margin: 0 -20px; padding: 20px; }
    :is(#mv_login, #mv_reset)::after { font-size: 320px; right: -50px; bottom: -5px; }
}

/* ========================
   FOOTER - ink
======================== */
.mv_footer {
    margin-top: clamp(64px, 8vw, 112px);
    padding: clamp(48px, 6vw, 80px) var(--ff-gutter) 32px;
    background-color: var(--ff-ink) !important;
    border-top: 0 !important;
    font-size: 14px;
    color: var(--ff-white);
}

.mv_footer .border-b {
    border: 0 !important;
}

.mv_footer h3 {
    color: rgba(255, 255, 255, .7);
    font-size: 11px !important;
}

.mv_footer a {
    color: var(--ff-white);
    line-height: 2;
}

.mv_footer.ff-footer-built {
    padding: clamp(48px, 6vw, 80px) var(--ff-gutter) 32px !important;
}

.ff-footer {
    max-width: var(--ff-max);
    margin: 0 auto;
}

.ff-footer__top {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    align-items: flex-start;
}

/* Brand statement: exactly two lines, each nowrap. Every & and "more." in coral */
.ff-footer__statement {
    flex: 2 1 520px;
    min-width: 260px;
    margin: 0;
    font-family: var(--ff-serif);
    font-size: clamp(24px, 3vw, 42px);
    line-height: 1.2;
    letter-spacing: .02em;
    color: var(--ff-bone);
}

.ff-footer__statement > span {
    display: block;
    white-space: nowrap;
}

.ff-footer__statement em {
    font-style: italic;
}

.ff-footer__statement .ff-coral {
    color: var(--ff-coral);
}

.ff-footer__cols {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
}

.ff-footer__col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 120px;
    max-width: 210px;
}

/* Menu labels are typed in capitals in MV; sentence case here */
.ff-footer__col--menu a {
    display: inline-block;
    text-transform: lowercase;
}

.ff-footer__col--menu a::first-letter {
    text-transform: uppercase;
}

.ff-footer__col .ff-label {
    margin: 0;
    font-size: 11px;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .7);
}

.ff-footer__col ul {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ff-footer__col a {
    font-family: var(--ff-sans);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    color: var(--ff-white);
}

.ff-footer__mark {
    margin-top: 64px;
}

.ff-footer__mark .ff-wordmark {
    font-size: 26px;
    color: var(--ff-white);
}

.ff-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
}

.ff-footer__bottom p {
    margin: 0;
}

.ff-footer__social {
    display: flex;
    gap: 10px;
}

.ff-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 14px;
    line-height: 1;
    color: var(--ff-white);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
}

.ff-footer__social i {
    margin: 0 !important;
}


/* ========================
   COMPONENT: IMAGE BACKGROUND SECTION
   (class="section-background" + inner "section-content")
======================== */
.section-background {
    position: relative;
    z-index: 1;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 120px 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--white);
    text-align: center;
    overflow: visible;
}

.section-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(17, 17, 17, 0.45);
}

.section-content {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    color: var(--white);
    overflow: visible;
}

.section-content h1,
.section-content h2 {
    color: var(--white);
}

.hero-heading {
    position: relative;
    z-index: 10;
    font-size: 48px;
    line-height: 1.1;
    padding: 0 50px;
    color: var(--white);
}


/* ========================
   COMPONENT: VIDEO BAND (new)
   <div class="ff-video-band">
     <video src="VIDEO-URL" autoplay muted loop playsinline></video>
     <div class="ff-video-band__content"> ...headings, text, button... </div>
   </div>
======================== */
.ff-video-band {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: clamp(72px, 10vw, 140px) 24px;
    overflow: hidden;
    background-color: var(--ff-ink);
    color: var(--white);
}

.ff-video-band > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}

.ff-video-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(17, 17, 17, 0.85), rgba(17, 17, 17, 0.25));
}

.ff-video-band__content {
    position: relative;
    z-index: 1;
    max-width: var(--content-width);
    margin: 0 auto;
}

.ff-video-band h1,
.ff-video-band h2 {
    max-width: 14em;
    color: var(--white);
}

.ff-video-band .mv_custom_button {
    background: transparent !important;
    color: var(--white) !important;
    border: 1px solid var(--white) !important;
}


/* ========================
   COMPONENT: COOL TWO COLUMN
======================== */
.dynamic-two-column-section {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 50px;
    overflow: hidden;
}

.dynamic-column {
    flex: 1;
    margin: 20px;
}

.sliding-image {
    flex-grow: 1;
    height: 100%;
    background-position: center;
    background-size: cover;
    transition: transform 1s ease-in-out;
}

.image-column:hover .sliding-image {
    transform: scale(1.03);
}

.animated-highlight {
    position: relative;
    overflow: hidden;
    padding: 20px;
    font-size: 1.1rem;
    color: var(--ff-ink);
    background: var(--ff-paper);
    border-left: 3px solid var(--ff-coral);
}


/* ========================
   COMPONENT: PRODUCT HEADER TWO COLUMN
======================== */
.product-header {
    margin: 20px 0;
}

.two-column-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 85%;
    margin: auto;
}

.text-column {
    flex: 1;
    padding-right: 20px;
    text-align: left;
}

.image-column {
    justify-content: center;
    width: 50%;
}


/* ========================
   COMPONENT: ICON BOXES (mv-container / mv-column / mv-icon-box)
======================== */
.mv-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch !important;
    max-width: var(--content-width);
    margin: 50px auto;
    padding: 0;
}

.mv-column {
    flex: 1 1 30%;
    margin: 15px;
    text-align: center;
}

.mv-icon-box {
    height: 100%;
    padding: 32px 24px;
    background-color: var(--ff-paper);
    border: 1px solid var(--ff-stone);
}

.mv-heading {
    font-size: 1.5rem;
    color: var(--ff-ink);
    text-align: center;
    margin-bottom: 0;
}

.mv-icon-box i {
    font-size: 2.5rem;
    color: var(--ff-coral);
}

.mv-icon-box h3 {
    margin-top: 20px;
}

.mv-icon-box p {
    margin-top: 10px;
    font-size: 15px;
    color: var(--ff-ink);
}


/* ========================
   COMPONENT: FEATURES ("What you get" click-to-expand list)
======================== */
.features-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 64px 0;
}

.features-section h1 {
    text-align: center;
    margin-bottom: 32px;
}

.feature-item {
    display: flex;
    align-items: center;
    padding: 24px;
    background-color: var(--white);
    border: 1px solid var(--ff-stone);
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.feature-item.active {
    background-color: var(--ff-paper);
    border-color: var(--ff-paper);
}

.feature-icon {
    margin-right: 20px;
}

.feature-icon img {
    width: 50px;
    height: 50px;
    transition: transform 0.3s ease;
}

.feature-content h2 {
    font-size: 1.4rem !important;
    padding: 0;
}

.feature-content p {
    margin: 10px 0;
    font-size: 15px;
    color: var(--ff-ink);
}

.hidden-content {
    display: none;
}

.feature-item.active .hidden-content {
    display: block;
}

.bonus {
    background-color: var(--ff-paper);
    border-left: 3px solid var(--ff-ink);
}

.text-wrapper {
    max-width: 850px;
    margin: 0 auto;
    padding: 0;
}


/* ========================
   COMPONENT: SCROLLING IMAGE SHOWCASE
======================== */
.single-sliding-image-container {
    width: 100%;
    max-width: 250px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--ff-stone);
}

.scroll-on-hover {
    width: 100%;
    height: 100%;
    background-position: top center;
    background-size: cover !important;
    background-repeat: no-repeat;
    transition-duration: 5s;
}

.showcase-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: var(--content-width);
    margin: 0 auto;
}

.showcase-column {
    flex: 1 1 22%;
    margin: 10px;
    text-align: center;
}

.showcase-column h3 {
    margin-top: 15px;
}


/* ========================
   COMPONENT: FAQ
======================== */
.faq-section {
    margin-top: 64px;
    padding: 40px 20px;
}

.faq-section h1 {
    text-align: center;
    margin-bottom: 40px;
}

.faq-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.faq-container {
    flex: 1;
    max-width: 520px;
    margin-bottom: 30px;
    padding: 12px 24px;
    background-color: var(--ff-paper);
}

.faq-item {
    position: relative;
    padding: 18px 8px;
    border-bottom: 1px solid var(--ff-stone);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin: 0;
    font-family: var(--font-family-h2);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--ff-ink);
}

.faq-question::after {
    content: "+";
    font-family: var(--font-family-p);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ff-coral);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
    content: "\2212";
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 8px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ff-ink);
    transition: max-height 0.4s ease;
}


/* ========================
   COMPONENT: IMAGE SLIDER
======================== */
.custom-slider-container {
    position: relative;
    max-width: 600px;
    margin: auto;
}

.custom-slider .custom-slide {
    display: none;
}

.custom-slider .custom-slide:first-child {
    display: block;
}

.custom-caption {
    margin-top: 20px;
    padding: 12px;
    text-align: center;
    font-family: var(--font-family-h3);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background-color: var(--ff-paper);
    color: var(--ff-ink);
}

.custom-prev,
.custom-next {
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    color: var(--white);
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    user-select: none;
    transform: translateY(-50%);
    transition: 0.6s ease;
}

.custom-prev {
    left: -50px;
}

.custom-next {
    right: -50px;
}


/* ========================
   COMPONENT: TESTIMONIALS
======================== */
.testimonial-section {
    position: relative;
    left: 50%;
    right: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 80px 20px;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.testimonial-container {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
    padding: 56px;
    background: rgba(255, 255, 255, 0.94);
}

.testimonial-slider {
    position: relative;
    overflow: hidden;
}

.testimonial-slide {
    position: relative;
    display: none;
    text-align: center;
    font-family: var(--font-family-h2);
    font-size: 1.35rem;
    line-height: 1.55;
    color: var(--ff-ink);
}

.testimonial-slide.active {
    display: block;
}

.client-info {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    font-family: var(--font-family-p);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.client-info img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-navigation {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none;
}

.testimonial-navigation span {
    position: absolute;
    top: 50%;
    margin-top: 5px;
    padding: 10px;
    font-size: 24px;
    line-height: 1;
    color: var(--ff-coral);
    background: none;
    cursor: pointer;
    user-select: none;
    pointer-events: all;
    transform: translateY(-50%);
}

.testimonial-navigation .prev {
    left: calc(50% - 170px);
}

.testimonial-navigation .next {
    right: calc(50% - 170px);
}


/* ========================
   COMPONENT: VIDEO LIBRARY (Studio Moorgean)
======================== */
.video-container {
    position: relative;
    max-width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 */
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.thumbnail-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.thumbnail-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}




/* ========================
   HOVER EFFECTS
======================== */
.ff-btn--ink:hover {
    background: var(--ff-ink-hover) !important;
    border-color: var(--ff-ink-hover) !important;
}

.ff-btn--accent:hover,
.mv_product_item_buttons a.mv_primary_button:hover,
a.mv_custom_button.mv_primary_button.mt-4.mv_buy_button:hover,
.module-button:not(.outline):hover {
    filter: brightness(.92);
}

.mv_product_item.free-product .mv_product_item_buttons a.mv_primary_button:hover {
    filter: none;
    background: var(--ff-ink-hover) !important;
}

.ff-btn--outline:hover,
.mv_secondary_button:not(.mv_product_item_buttons a):hover,
.module-button.outline:not(.button-group .module-button):hover,
.mv_module_grid.ff-curriculum > .mv_module_item .mv_custom_button.mv_primary_button:hover {
    background-color: var(--ff-ink) !important;
    color: var(--ff-white) !important;
}

.mv_product_item_buttons a.mv_secondary_button:hover,
.mv_module_item .button-group .module-button.outline:hover {
    color: var(--ff-slate) !important;
}

.flex-auto ul li a:hover {
    border-bottom-color: var(--ff-ink);
}

.ff-chip:not([aria-current="true"]):hover {
    border-color: var(--ff-ink);
}

.mv_module_grid.ff-curriculum > .mv_module_item [id^="mv_modules_lessons_container_"] > a:hover {
    background-color: var(--ff-bone);
}

a.affiliate_buy_button:hover {
    background-color: var(--ff-ink-hover);
}

.ff-footer__col a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ff-footer__social a:hover {
    background-color: var(--ff-white);
    color: var(--ff-ink);
    border-color: var(--ff-white);
}

.mv_footer:not(.ff-footer-built) a:hover {
    color: rgba(255, 255, 255, .7);
}

.feature-item:hover {
    border-color: var(--ff-ink);
}

.scroll-on-hover:hover {
    background-position: bottom center !important;
}

.custom-prev:hover,
.custom-next:hover {
    background-color: rgba(17, 17, 17, 0.8);
}

.ff-back-to-top:hover {
    background-color: var(--ff-ink-hover);
}


/* ========================
   ✨ ANIMATIONS
======================== */
/* Everything hidden here waits for .ff-anim-ready on <body> (added by
   the Global JS), so if the script ever fails, content stays visible. */
.ff-anim-ready .ff-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 600ms var(--ff-ease), transform 600ms var(--ff-ease);
}

.ff-anim-ready .ff-reveal.ff-in {
    opacity: 1;
    transform: none;
}

.slide-in {
    position: relative;
    z-index: 10;
    transition: transform 700ms var(--ff-ease), opacity 700ms var(--ff-ease);
}

.ff-anim-ready .slide-in:not(.active) {
    opacity: 0;
}

.ff-anim-ready .slide-in[data-slide-direction="top"]:not(.active)    { transform: translateY(-40px); }
.ff-anim-ready .slide-in[data-slide-direction="bottom"]:not(.active) { transform: translateY(40px); }
.ff-anim-ready .slide-in[data-slide-direction="left"]:not(.active)   { transform: translateX(-40px); }
.ff-anim-ready .slide-in[data-slide-direction="right"]:not(.active)  { transform: translateX(40px); }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }

    .ff-anim-ready .ff-reveal,
    .ff-anim-ready .slide-in:not(.active),
    .product-hero-section h1 {
        opacity: 1 !important;
        transform: none !important;
    }

    .ff-showcase {
        overflow-x: auto;
    }

    .ff-showcase__track {
        animation: none !important;
    }

    .ff-showcase__item[aria-hidden="true"] {
        display: none;
    }

    .section-background,
    .testimonial-section {
        background-attachment: scroll;
    }
}


/* ========================
   📱 MOBILE STYLES
======================== */
@media (max-width: 1023px) {
    .ff-header-cta {
        display: none;
    }
}

@media (max-width: 768px) {

    .heading-text {
        font-size: 42px;
    }

    .ff-wordmark {
        font-size: 21px;
    }

    #mv_welcome_area p {
        font-size: 16px;
    }

    .ff-hero-deco .ff-margin-label {
        display: none;
    }

    .ff-hero-deco .ff-rule:nth-child(even) {
        display: none;
    }

    .ff-showcase__item {
        width: 240px;
    }

    .ff-list-head {
        align-items: flex-start;
    }

    :is(.mv_primary_button, .mv_secondary_button, .mv_custom_button):where(:not(#mv_login *, #mv_reset *, header *, .mv_product_item_buttons *, .mv_module_item *)) {
        margin-bottom: 10px;
    }

    /* Locked: leave room for the badge in the top-right corner */
    .mv_module_grid.ff-curriculum > .mv_module_item.ff-locked .content > .p-4:first-of-type {
        flex-wrap: wrap;
        gap: 6px 14px;
        padding-right: 96px !important;
    }

    .mv_module_grid.ff-curriculum > .mv_module_item.ff-locked a.absolute {
        padding: 22px;
    }

    .ff-footer__statement > span {
        white-space: normal;
    }

    .ff-video-band::after {
        background: rgba(17, 17, 17, 0.6);
    }

    .section-background {
        padding: 60px 0 !important;
        background-attachment: scroll;
    }

    .hero-heading {
        font-size: 32px;
        padding: 0 20px !important;
    }

    .section-content h1 {
        display: block !important;
        padding: 0 !important;
        font-size: 35px;
        text-align: center;
        color: var(--white) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .section-content h3 {
        padding: 0;
        text-align: center;
    }

    .ff-anim-ready .slide-in:not(.active) {
        opacity: 1;
        transform: none;
    }

    .dynamic-two-column-section {
        flex-direction: column;
        padding: 0;
    }

    .dynamic-column {
        order: 1;
    }

    .image-column {
        order: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
    }

    .sliding-image {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        margin-bottom: 20px;
    }

    .animated-highlight,
    .section-content p {
        padding: 20px;
    }

    .glowing-title {
        font-size: 1.8rem;
        text-align: center !important;
    }

    .two-column-layout {
        flex-direction: column;
    }

    .text-column {
        padding-right: 0;
        padding-bottom: 20px;
    }

    .mv-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 20px auto;
    }

    .mv-column {
        width: 100%;
        margin: 10px auto;
    }

    .showcase-container {
        flex-direction: column;
        align-items: center;
    }

    .showcase-column {
        width: 90%;
        margin-bottom: 30px;
    }

    .single-sliding-image-container {
        width: 100%;
        max-width: 100%;
    }

    .faq-columns {
        flex-direction: column;
        gap: 20px;
    }

    .testimonial-section {
        background-attachment: scroll;
    }

    .testimonial-container {
        padding: 40px 24px;
    }

    .ff-back-to-top {
        right: 16px;
        bottom: 88px;
    }
}

@media (max-width: 480px) {
    .section-background {
        padding: 50px 0 !important;
    }

    .hero-heading {
        font-size: 24px;
        line-height: 1.2;
        padding: 0 15px !important;
    }
}

html{ font-size: 100%}