@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&family=Space+Mono:wght@400;700&display=swap');
/*
@font-face {
  font-family: 'Space Grotesk';
  src: url('./assets/fonts/SpaceGrotesk.woff2') format('woff2'),
       url('./assets/SpaceGrotesk.otf') format('opentype'),
       url('./assets/SpaceGrotesk.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.font-space {
    font-family: 'Space Grotesk', sans-serif;
}
    */
.hero-gradient {
    background: linear-gradient(135deg, #6e8efb 0%, #4a6cf7 50%, #3a61f4 100%);
}
.glow-text {
    text-shadow: none;
}
/* Flow.42 redesign: warm light page + nav bar (matches the relaunch design) */
/* Single source of truth — light surface palette (mirrors local flow42-tokens.css) */
:root {
    /* THE single switch for the page background — change this one value only. */
    --ink: #f5f5f5;        /* page background — neutral light grey (test) */
    --ink-rgb: 245, 245, 245; /* same colour as --ink in rgb form (translucent surfaces) — keep in sync with --ink */
    --ink-2: #efece3;
    --surface: #ffffff;    /* cards */
    --surface-2: #f7f4ec;
    --line: #e3dfd3;
    --line-2: #d4cfc0;
}
.f42-page {
    background-color: var(--ink);
}
.f42-navbar {
    background: rgba(var(--ink-rgb), 0.85);
    border-bottom: 1px solid #e3dfd3;
}
/* Flow.42 redesign: light footer (white surface, warm divider) */
.f42-footer {
    background-color: var(--surface); /* #ffffff */
    border-top: 1px solid var(--line);
}
/* Configurator order modal — light tabs (active stays brand-blue, readable on white) */
#configurator-modal .tab-link { color: #4b5563; border-radius: 8px; }
#configurator-modal .tab-link:hover { color: #111827; }
#configurator-modal .tab-link.active { background: #1452ff !important; color: #ffffff !important; }
/* Light checkout: billing/validation fields override the dark global input base */
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout input[type="password"],
body.woocommerce-checkout input[type="number"],
body.woocommerce-checkout textarea,
body.woocommerce-checkout .input-text {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}
body.woocommerce-checkout input::placeholder,
body.woocommerce-checkout textarea::placeholder { color: #9ca3af !important; }
/* Checkout selects (Country/Region/State) — native + select2 */
body.woocommerce-checkout select,
body.woocommerce-checkout .select2-container--default .select2-selection--single,
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}
/* Light user portal: account/address/discord fields override the dark global input base */
body.woocommerce-account input[type="text"],
body.woocommerce-account input[type="email"],
body.woocommerce-account input[type="tel"],
body.woocommerce-account input[type="password"],
body.woocommerce-account input[type="number"],
body.woocommerce-account textarea,
body.woocommerce-account .input-text {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}
body.woocommerce-account input::placeholder,
body.woocommerce-account textarea::placeholder { color: #9ca3af !important; }
/* Light newsletter (Flow.42 drops) popup fields override the dark global input base */
#flow42-newsletter-panel input[type="text"],
#flow42-newsletter-panel input[type="email"] {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}
#flow42-newsletter-panel input::placeholder { color: #9ca3af !important; }
/* Flow.42 redesign: recurring "The Flow.42 way" brand band (self-contained light) */
.f42-way { border-top: 1px solid var(--line); background: var(--ink); padding: 52px 24px; }
.f42-way-in { max-width: 760px; margin: 0 auto; text-align: center; }
.f42-way-face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center 30%; border: 1px solid #d4cfc0; display: block; margin: 0 auto 18px; }
.f42-way-eyebrow { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #1452ff; margin: 0 0 12px; }
.f42-way-quote { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.25; letter-spacing: -.01em; color: #1a1815; font-weight: 600; margin: 0 auto; max-width: none; }
.f42-way-quote b { color: #1452ff; font-weight: 600; }
.f42-way-sub { margin: 16px auto 0; font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive; font-weight: 500; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; color: #C4602A; max-width: 30ch; }
.f42-way-sig { margin-top: 16px; font-family: 'Space Mono', monospace; font-size: 12.5px; color: #938d80; }
/* Flow.42 redesign: subtle card shadow (Education cards/video figures) */
.f42-card-shadow { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.012); transition: box-shadow .25s ease, transform .25s ease; }
.f42-card-shadow:hover { box-shadow: 0 2px 6px -3px rgba(0,0,0,0.035); transform: translateY(-3px); }
/* Light form fields on the affiliate page — override the dark global input base (input.css .f42_input_text !important) */
#affiliate-form input[type="text"],
#affiliate-form input[type="email"],
#affiliate-form input[type="url"],
#affiliate-form textarea {
    background-color: var(--surface) !important; /* #ffffff */
    border-color: #d1d5db !important;
    color: #111827 !important;
}
#affiliate-form input::placeholder,
#affiliate-form textarea::placeholder { color: #9ca3af !important; }
.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.icon-cart {
    width: 20px;
    height: 20px;
}
body {
    select {
        color: black;
    }
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    width:100% !important;
}

.woocommerce-account .woocommerce-MyAccount-content {
    width:100% !important;
    text-align: left;
}

.is_my_account_page .woocommerce-MyAccount-content p, 
.is_order_detail_page p, 
.is_order_detail_page #f42_order_summary,
.woocommerce-customer-details {display:none;}

.is_order_detail_page ul p {display:block;}





.woocommerce .hide-account-field { display: none !important; }


@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

.slide-in {
  animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}



        .video-glow {
            box-shadow:
                0 0 0 1px rgba(110, 142, 251, 0.18),
                0 20px 40px -25px rgba(0, 0, 0, 0.9),
                0 0 28px rgba(110, 142, 251, 0.18);
        }
        /* Removed .video-shell::before glow: it was a dark-theme remnant whose
           absolute, unbounded ::before (video-shell has no position) anchored to the
           page's <section.relative> and tinted the whole /my-account/ background with
           an indigo/purple radial gradient. The light video card already has its own
           border + shadow. */
    
:root {
    /* Modal sizing (edit these to cap "Enlarge") */
    --flow42VideoModalMaxW: 1100px;
    --flow42VideoModalMaxH: 78vh;
}
.flow42-modal-card {
    width: min(100%, var(--flow42VideoModalMaxW));
}
.flow42-modal-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: var(--flow42VideoModalMaxH);
}

/* ---- Flow.42 redesign: unified light screenshot frame ---- */
.f42-shot {
    position: relative;
    z-index: 10;
    display: block;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid #e6e4df;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 12px 32px -16px rgba(20, 82, 255, .10);
    transition: transform .25s ease, box-shadow .25s ease;
}
.f42-shot:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -24px rgba(20, 82, 255, .22), 0 10px 24px -12px rgba(12, 11, 10, .16);
}
.f42-shot-img { display: block; width: 100%; height: auto; cursor: pointer; }

/* Webinar summary section (Flow.42 Webinar plugin shortcode) — light theme override */
.f42-page .f42-webinar--summary { background:#ffffff !important; border:1px solid #e3dfd3 !important; border-radius:18px; padding:40px clamp(20px,4vw,40px); margin:48px auto; position:relative; overflow:hidden; box-shadow:0 1px 2px rgba(20,20,20,.04), 0 18px 44px -26px rgba(20,82,255,.16) !important; }
.f42-page .f42-webinar--summary .f42-webinar__glow { display:none !important; }
.f42-page .f42-webinar--summary .f42-webinar__eyebrow { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#1452ff !important; margin:0 0 12px !important; }
.f42-page .f42-webinar--summary .f42-webinar__title { font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.2; font-weight:700; color:#1a1815 !important; margin:0 0 12px !important; }
.f42-page .f42-webinar--summary .f42-webinar__subtitle { font-size:1rem; line-height:1.6; color:#615c52 !important; margin:0 0 22px !important; max-width:62ch; }
.f42-page .f42-webinar--summary .f42-webinar__meta { display:flex; flex-wrap:wrap; gap:26px; margin:0 0 26px !important; }
.f42-page .f42-webinar--summary .f42-webinar__meta-item { display:flex; flex-direction:column; gap:2px; }
.f42-page .f42-webinar--summary .f42-webinar__meta-item span { font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:#938d80 !important; }
.f42-page .f42-webinar--summary .f42-webinar__meta-item strong { font-size:1.05rem; color:#1a1815 !important; }
.f42-page .f42-webinar--summary .f42-webinar__cta { display:inline-flex; align-items:center; padding:12px 24px; background:#1452ff !important; color:#ffffff !important; border-radius:10px; font-weight:600; text-decoration:none; transition:background .2s ease; }
.f42-page .f42-webinar--summary .f42-webinar__cta:hover { background:#0f3fd6 !important; }

/* Floating webinar announcement card (front page, bottom-left, dismissible) */
#flow42-webinar-float { position:fixed; bottom:16px; left:16px; z-index:40; width:min(90vw,340px); background:#ffffff; border:1px solid #e3dfd3; border-radius:16px; padding:18px 18px 16px; box-shadow:0 12px 44px -14px rgba(20,82,255,.30), 0 2px 8px rgba(0,0,0,.06); transform:translateY(150%); opacity:0; transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .5s ease; pointer-events:none; }
#flow42-webinar-float.is-in { transform:translateY(0); opacity:1; pointer-events:auto; }
#flow42-webinar-float .f42-wf-close { position:absolute; top:8px; right:10px; background:none; border:0; font-size:18px; line-height:1; color:#938d80; cursor:pointer; padding:4px; }
#flow42-webinar-float .f42-wf-close:hover { color:#1a1815; }
#flow42-webinar-float .f42-wf-eyebrow { font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#1452ff; margin:0 0 8px; }
#flow42-webinar-float .f42-wf-title { font-size:1.05rem; line-height:1.25; font-weight:700; color:#1a1815; margin:0 0 6px; }
#flow42-webinar-float .f42-wf-when { font-size:.85rem; color:#615c52; margin:0 0 14px; }
#flow42-webinar-float .f42-wf-cta { display:inline-flex; align-items:center; gap:4px; padding:9px 16px; background:#1452ff; color:#ffffff; border-radius:9px; font-size:.9rem; font-weight:600; text-decoration:none; transition:background .2s ease; }
#flow42-webinar-float .f42-wf-cta:hover { background:#0f3fd6; }

/* Webinar TOP BAR (mode=bar) */
#flow42-webinar-bar { position:fixed; top:0; left:0; right:0; z-index:50; background:#1452ff; color:#fff; transform:translateY(-100%); transition:transform .45s cubic-bezier(.16,1,.3,1); }
#flow42-webinar-bar.is-in { transform:translateY(0); }
#flow42-webinar-bar .f42-wb-inner { max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:14px; padding:9px 20px; }
#flow42-webinar-bar .f42-wb-text { margin:0; font-size:.9rem; line-height:1.3; color:#fff; flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#flow42-webinar-bar .f42-wb-badge { display:inline-block; background:rgba(255,255,255,.18); border-radius:5px; padding:2px 8px; font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; margin-right:10px; vertical-align:middle; }
#flow42-webinar-bar .f42-wb-cta { flex:0 0 auto; background:#fff; color:#1452ff; border-radius:8px; padding:7px 16px; font-size:.85rem; font-weight:700; text-decoration:none; white-space:nowrap; }
#flow42-webinar-bar .f42-wb-cta:hover { background:#eef2ff; }
#flow42-webinar-bar .f42-wb-close { flex:0 0 auto; background:none; border:0; color:#fff; font-size:18px; line-height:1; cursor:pointer; opacity:.85; padding:2px 4px; }
#flow42-webinar-bar .f42-wb-close:hover { opacity:1; }
body.has-webinar-bar .f42-navbar { top:42px; }
body.has-webinar-bar { padding-top:42px; }
@media (max-width:640px){ #flow42-webinar-bar .f42-wb-inner { padding:8px 14px; gap:10px; } #flow42-webinar-bar .f42-wb-text { font-size:.8rem; } }

/* Webinar MODAL (mode=modal) */
#flow42-webinar-modal { position:fixed; inset:0; z-index:60; background:rgba(15,14,12,.55); display:flex; align-items:center; justify-content:center; padding:16px; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; }
#flow42-webinar-modal.is-in { opacity:1; visibility:visible; }
#flow42-webinar-modal .f42-wm-card { position:relative; width:min(94vw,460px); background:#fff; border:1px solid #e3dfd3; border-radius:18px; padding:34px 30px 30px; box-shadow:0 30px 80px -24px rgba(0,0,0,.5); transform:translateY(12px) scale(.98); transition:transform .3s cubic-bezier(.16,1,.3,1); }
#flow42-webinar-modal.is-in .f42-wm-card { transform:translateY(0) scale(1); }
#flow42-webinar-modal .f42-wm-close { position:absolute; top:12px; right:14px; background:none; border:0; font-size:22px; line-height:1; color:#938d80; cursor:pointer; }
#flow42-webinar-modal .f42-wm-close:hover { color:#1a1815; }
#flow42-webinar-modal .f42-wm-eyebrow { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#1452ff; margin:0 0 10px; }
#flow42-webinar-modal .f42-wm-title { font-size:1.5rem; line-height:1.2; font-weight:700; color:#1a1815; margin:0 0 10px; }
#flow42-webinar-modal .f42-wm-sub { font-size:.95rem; line-height:1.55; color:#615c52; margin:0 0 16px; }
#flow42-webinar-modal .f42-wm-when { font-size:1rem; color:#1a1815; margin:0 0 22px; }
#flow42-webinar-modal .f42-wm-cta { display:inline-flex; align-items:center; gap:5px; background:#1452ff; color:#fff; border-radius:10px; padding:12px 24px; font-weight:600; text-decoration:none; transition:background .2s ease; }
#flow42-webinar-modal .f42-wm-cta:hover { background:#0f3fd6; }

/* Checkout legal modal (Disclaimer / Refund / Terms) — keeps the customer in the cart */
html.f42-legal-lock, body.f42-legal-lock { overflow:hidden !important; }
.f42-legal-modal { position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; padding:16px; }
.f42-legal-modal.is-open { display:flex; }
.f42-legal-backdrop { position:absolute; inset:0; background:rgba(15,14,12,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.f42-legal-card { position:relative; z-index:1; display:flex; flex-direction:column; width:min(720px,100%); max-height:min(85vh,900px); background:#fff; border:1px solid var(--line,#e3dfd3); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden; }
.f42-legal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line,#e3dfd3); flex:0 0 auto; }
.f42-legal-title { margin:0; font-size:1rem; font-weight:700; color:#111827; }
.f42-legal-x { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; min-width:40px; padding:0; border:0; background:transparent; color:#374151; border-radius:10px; cursor:pointer; }
.f42-legal-x:hover { background:#f3f4f6; }
.f42-legal-body { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:4px 18px 8px; }
.f42-legal-body main { max-width:none; padding:12px 0 4px; margin:0; }
.f42-legal-body h1 { font-size:1.4rem; line-height:1.25; }
.f42-legal-body h2 { font-size:1.1rem; line-height:1.3; }
.f42-legal-foot { flex:0 0 auto; padding:12px 18px; border-top:1px solid var(--line,#e3dfd3); display:flex; justify-content:flex-end; }
.f42-legal-okbtn { background:#2563eb; color:#fff; border:0; border-radius:10px; padding:10px 18px; font-weight:600; cursor:pointer; }
.f42-legal-okbtn:hover { background:#1d4ed8; }
@media (max-width:640px){
  .f42-legal-modal { padding:0; }
  .f42-legal-card { width:100%; height:100%; max-height:100%; border-radius:0; border:0; }
}

/* Standalone legal / generic WordPress pages render through index.php's "Standard"
   branch inside #document-content, always on a LIGHT background. Some page content
   in the DB (e.g. /affiliate-terms-of-use/) was authored with DARK-theme colour
   classes (text-white / text-gray-300 / text-blue-400) plus a text-gray-300 wrapper,
   so the text came out near-white and unreadable. Remap those to the light palette. */
#document-content { color:#374151; }                 /* base body text = gray-700 */
#document-content .text-white   { color:#111827; }   /* headings = gray-900 */
#document-content .text-gray-300{ color:#374151; }   /* gray-700 (intro + article wrapper) */
#document-content .text-gray-400{ color:#4b5563; }   /* gray-600 */
#document-content .text-blue-400{ color:#2563eb; }   /* links = blue-600 */

/* ============================================================
   Flow.42 personal layer (f42p). Sep 2026.
   Walter speaks in handwriting (Caveat, rust), the product speaks in Space Grotesk.
   Used on: affiliate-program.php (hero, band), live-education.php (hero, band).
   ============================================================ */
:root {
    --f42p-rust: #C4602A;
    --f42p-accent: #1452ff;
    --f42p-txt: #1a1815;
    --f42p-txt2: #615c52;
    --f42p-txt3: #938d80;
    --f42p-line: #e3dfd3;
    --f42p-line2: #d4cfc0;
    --f42p-warm: #f7f4ec;
    --f42p-hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
    --f42p-mono: 'Space Mono', ui-monospace, Menlo, monospace;
}
/* founder block: face + label + handwritten intro */
.f42p-founder { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.f42p-face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center 30%; border: 1px solid var(--f42p-line2); }
.f42p-who, .f42p-eyebrow { font-family: var(--f42p-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--f42p-accent); margin-bottom: 8px; }
.f42p-hand { font-family: var(--f42p-hand); font-weight: 500; color: var(--f42p-rust); font-size: clamp(19px, 1.5vw, 24px); line-height: 1.25; max-width: 40ch; margin: 0; }
/* handwritten band at the decision point of a page */
.f42p-band { background: var(--f42p-warm); border-top: 1px solid var(--f42p-line); border-bottom: 1px solid var(--f42p-line); text-align: center; padding: clamp(40px, 6vw, 72px) 20px; }
.f42p-band-hand { font-family: var(--f42p-hand); font-weight: 500; color: var(--f42p-rust); font-size: clamp(30px, 3.6vw, 50px); line-height: 1.1; max-width: 22ch; margin: 0 auto; }
.f42p-band-by { margin-top: 14px; font-family: var(--f42p-mono); font-size: 11.5px; letter-spacing: .08em; color: var(--f42p-txt3); }
/* hero with the workspace motif as a quiet background on the right (affiliate) */
.f42p-hero--photo { position: relative; isolation: isolate; overflow: hidden; }
.f42p-hero--photo .f42p-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: center; }
.f42p-hero--photo .f42p-copy { min-width: 0; grid-column: 1; }
.f42p-bg { position: absolute; top: 50%; right: max(20px, calc((100% - 1280px) / 2)); width: min(40%, 520px); aspect-ratio: 4 / 5; transform: translateY(-50%); background-color: #f5f5f5; background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; }
.f42p-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #f5f5f5 0%, rgba(245,245,245,.8) 5%, transparent 22%, transparent 94%, #f5f5f5 100%), linear-gradient(180deg, #f5f5f5 0%, transparent 12%, transparent 83%, #f5f5f5 100%); }
@media (max-width: 900px) {
    .f42p-hero--photo { display: flex; flex-direction: column; padding-bottom: 0; }
    .f42p-hero--photo .f42p-in { grid-template-columns: minmax(0, 1fr); gap: 36px; width: 100%; flex: none; }
    .f42p-bg { position: relative; inset: auto; order: 2; width: min(100%, 320px); aspect-ratio: 4 / 5; margin: 24px auto 0; transform: none; }
}
@media (max-width: 560px) {
    .f42p-hero--photo h1 { font-size: clamp(30px, 7.5vw, 40px); }
}