/* ════════════════════════════════════════════════════════════ HAPPY HEARTS — shared site stylesheet Display: Fraunces (warm, high-contrast serif) · Body: Lexend Palette: Deep Coral #B0361E · Trust Teal #1F6F66 · Honey Gold #E0A23D ════════════════════════════════════════════════════════════ */ *{box-sizing:border-box;margin:0;padding:0;} :root{ --coral:#B0361E; --coral-deep:#8E2B17; --coral-light:#D47058; --teal:#1F6F66; --teal-pale:rgba(31,111,102,0.12); --gold:#E0A23D; --gold-dark:#6A4C10; --ink:#23201C; --paper:#FBF7F0; --paper-2:#F0E9DF; --paper-gold:#FAF6ED; --gold-bright:#F2C57A; /* honey for use on coral — clears WCAG 3:1 for large text */ --mute:#6A6258; --white:#fff; --f:"Lexend",system-ui,sans-serif; --f-display:"Fraunces",Georgia,serif; --nav-h:64px; } html{scroll-behavior:smooth;font-size:18px;scroll-padding-top:80px;} body{font-family:var(--f);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;} h1,h2,h3,h4{text-wrap:balance;} p,li,blockquote,cite{text-wrap:pretty;} img{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} /* ─── DISPLAY TYPE: Fraunces, warm & high-contrast ───── */ .hero-h1,.section-h2,.product-headline,.cta-h2,.moment-message, .confirm-title,.enroll-heading .cta-h2{ font-family:var(--f-display);font-weight:700; font-optical-sizing:auto; } /* Article / long-form content headings also use Fraunces */ .content h1,.content h2,article h1,article h2{font-family:var(--f-display);font-weight:600;} /* ─── ACCESSIBILITY ──────────────────────────────────── */ .skip-link{ position:absolute;left:8px;top:0;z-index:200; background:#23201C;color:#FAF6ED;font-family:var(--f);font-weight:400; font-size:16px;line-height:1.2;padding:.4rem .9rem;border-radius:0 0 8px 8px; /* Fully tucked above the top edge; revealed only on keyboard focus. */ transform:translateY(-100%); transition:transform .18s ease; } .skip-link:focus{transform:translateY(0);outline:2px solid #FAF6ED;outline-offset:-2px;} /* The skip link targets #main (tabindex="-1") to move focus into the content. Suppress the outline on the container itself; the focus is programmatic. */ #main:focus{outline:none;} .visually-hidden{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } *:focus-visible{outline:3px solid var(--coral);outline-offset:2px;border-radius:3px;} /* ─── IMG PROMPT CAPTION (4px, selectable direction text) */ .img-prompt{ display:block;font-family:var(--f);font-size:4px;line-height:1.4; color:var(--mute);user-select:text;-webkit-user-select:text; position:static;clear:both;width:100%;max-width:100%; padding:4px 0 0;margin:.45rem 0 0;letter-spacing:0; } /* Full-bleed bands (hero, moment) carry the prompt below the band, in the section's normal content flow, on a quiet paper strip — never over a photo. */ .img-prompt-band{ display:block;font-family:var(--f);font-size:4px;line-height:1.4; color:var(--mute);user-select:text;-webkit-user-select:text; background:var(--paper);padding:.55rem 7%;margin:0; border-top:1px solid rgba(35,32,28,.06); } /* ─── AI STAMP ─────────────────────────────────────── */ .ai-stamp{position:absolute;bottom:.5rem;right:.5rem;font-size:.6rem;font-family:var(--f);background:rgba(0,0,0,.45);color:#fff;padding:2px 7px;border-radius:3px;letter-spacing:.04em;pointer-events:none;z-index:2;} /* ─── TOP NAV ─────────────────────────────────────────── */ /* Sticky lives on
(a direct child of ) so its containing block is the full page; putting it only on .site-nav failed because the parent
is exactly nav-height tall, giving the sticky element nowhere to stick. */ header{position:sticky;top:0;z-index:120;} .site-nav{ position:sticky;top:0;z-index:120; background:rgba(251,247,240,.94);backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid rgba(35,32,28,.10); } .nav-inner{ max-width:1240px;margin:0 auto;min-height:var(--nav-h); display:flex;align-items:center;justify-content:space-between; gap:1rem;padding:.5rem 4%; } .nav-logo{display:flex;align-items:center;flex-shrink:0;} .nav-logo img{height:30px;width:auto;display:block;} .nav-links{display:flex;align-items:center;gap:1.6rem;} .nav-links a{ font-family:var(--f);font-weight:400;font-size:.98rem;color:var(--ink); padding:.6rem 0;line-height:1.2;transition:color .18s ease;white-space:nowrap; } .nav-links a:hover{color:var(--coral);} .nav-links a[aria-current="page"]{color:var(--coral);font-weight:600;} /* Selector is .nav-links a.nav-cta so it OUT-specifies `.nav-links a` (which otherwise forces padding:.6rem 0 and zeroes the side padding). */ .nav-links a.nav-cta{ font-family:var(--f);font-weight:700;font-size:.95rem;line-height:1.1;color:#fff; background:var(--coral);padding:.72rem 1.8rem;border-radius:100px; display:inline-flex;align-items:center;justify-content:center; transition:transform .18s ease,box-shadow .18s ease;white-space:nowrap; } .nav-links a.nav-cta:hover,.nav-links a.nav-cta:focus{ color:#fff;transform:translateY(-2px);box-shadow:0 8px 28px rgba(176,54,30,.38); } .nav-toggle{ display:none;background:none;border:1.5px solid rgba(35,32,28,.20); border-radius:10px;width:48px;height:44px;cursor:pointer; align-items:center;justify-content:center;color:var(--ink); } .nav-toggle svg{width:24px;height:24px;} .nav-toggle .icon-close{display:none;} .nav-toggle[aria-expanded="true"] .icon-open{display:none;} .nav-toggle[aria-expanded="true"] .icon-close{display:block;} @media(max-width:860px){ .nav-toggle{display:inline-flex;} .nav-links{ position:absolute;top:100%;left:0;right:0; flex-direction:column;align-items:stretch;gap:0; background:var(--paper);border-bottom:1px solid rgba(35,32,28,.12); box-shadow:0 16px 40px rgba(35,32,28,.16); padding:.5rem 4% 1.2rem;display:none; } .nav-links.open{display:flex;} .nav-links a{ font-size:1.12rem;padding:.95rem .25rem;min-height:48px; display:flex;align-items:center;border-bottom:1px solid rgba(35,32,28,.07); } .nav-links a.nav-cta{ margin-top:1rem;justify-content:center;font-size:1.08rem; padding:.95rem 1.3rem;border-bottom:none; } } /* ─── SCROLL ANIMATIONS ─────────────────────────────── */ .reveal{ opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .reveal.visible{opacity:1;transform:translateY(0);} .reveal-fade{opacity:0;transition:opacity .85s ease;} .reveal-fade.visible{opacity:1;} .reveal-scale{ opacity:0;transform:scale(.93) translateY(16px); transition:opacity .6s ease, transform .65s cubic-bezier(.34,1.56,.64,1); } .reveal-scale.visible{opacity:1;transform:scale(1) translateY(0);} /* Stagger delays */ .d1{transition-delay:.08s;} .d2{transition-delay:.18s;} .d3{transition-delay:.28s;} .d4{transition-delay:.38s;} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;} .reveal,.reveal-fade,.reveal-scale{opacity:1!important;transform:none!important;} .hero-bg,.moment-bg{transform:none!important;} } /* ─── BUTTONS ───────────────────────────────────────── */ .btn{display:inline-block;font-family:var(--f);font-weight:700;font-size:.95rem;padding:.75rem 1.8rem;border-radius:100px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;min-height:44px;} .btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(176,54,30,.38);} .btn-coral{background:var(--coral);color:#fff;} .btn-white{background:#fff;color:var(--coral);} .btn-lg{font-size:1.05rem;padding:.95rem 2.4rem;} /* ─── HERO ──────────────────────────────────────────── */ .hero{position:relative;min-height:90vh;overflow:hidden;display:flex;align-items:center;} .hero-bg{ position:absolute;inset:0;width:100%;height:112%; object-fit:cover;object-position:100% 30%; z-index:0;will-change:transform; } .hero-overlay{ position:absolute;inset:0;z-index:1; background: linear-gradient(100deg, rgba(58,36,15,.82) 0%, rgba(66,42,18,.60) 38%, rgba(78,52,22,.26) 68%, rgba(86,58,26,.04) 100%), linear-gradient(to top, rgba(46,28,11,.42) 0%, transparent 48%); } .hero-content{position:relative;z-index:2;padding:5.5vh 4% 8vh;max-width:1240px;margin:0 auto;width:100%;} .hero-tag{ display:inline-flex;align-items:center;gap:.55rem; background:#fff;border:1px solid rgba(176,54,30,.20);border-radius:100px; padding:.4rem 1.1rem;font-family:var(--f);font-weight:600;font-size:.8rem; color:var(--coral);letter-spacing:.04em;margin-top:2.4rem;margin-bottom:0;white-space:nowrap; box-shadow:0 2px 10px rgba(35,32,28,.07); } .hero-tag::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--coral);flex-shrink:0;} .hero-h1{ font-weight:800; font-size:clamp(2rem, 3.4vw, 2.95rem);line-height:1.1; letter-spacing:-.015em;color:#fff;max-width:24ch; margin-bottom:1.5rem;text-shadow:0 2px 24px rgba(18,12,9,.35); } .hero-h1 .line1,.hero-h1 .line2{display:block;white-space:normal;} .hero-h1 .line2{display:block;color:#F2A07F;margin-top:.35rem;} .hero-body{font-family:var(--f);font-weight:400;font-size:1.12rem;color:rgba(255,255,255,.92);line-height:1.7;max-width:46ch;margin-bottom:2.4rem;text-shadow:0 1px 14px rgba(18,12,9,.30);} .hero-ctas{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;} .hero-note{font-family:var(--f);font-size:.82rem;font-weight:500;color:rgba(255,255,255,.90);margin-top:1.3rem;letter-spacing:.02em;} /* S9: shared long-form prose measure (~65ch) instead of per-element inline */ .prose-measure{max-width:65ch;} /* ─── TRUST BAR ──────────────────────────────────────── */ .trust-bar{background:var(--coral);padding:1.3rem 4%;} .trust-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:1240px;margin:0 auto;} .trust-item{display:flex;align-items:center;justify-content:center;gap:.7rem;color:#fff;} .trust-icon{flex-shrink:0;width:1.4rem;height:1.4rem;opacity:.92;} .trust-text{font-family:var(--f);font-weight:600;font-size:.88rem;} /* ─── SECTION BASE ───────────────────────────────────── */ section{padding:6rem 4%;} .section-inner{max-width:1240px;margin:0 auto;} .section-kicker{font-family:var(--f);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;color:var(--coral);margin-bottom:1rem;} .section-h2{font-size:2.8rem;line-height:1.08;letter-spacing:-.012em;color:var(--ink);margin-bottom:1.2rem;} .section-h2 em{font-style:normal;color:var(--coral);} .section-sub{font-family:var(--f);font-size:1.05rem;color:var(--mute);line-height:1.65;max-width:54ch;} /* ─── PRODUCT ────────────────────────────────────────── */ .product-section{background:#fff;} .product-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:6%;align-items:center;} .product-img-wrap{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1/1.05;} .product-img-wrap img{width:100%;height:100%;object-fit:cover;object-position:center 20%;} .product-detail{display:flex;flex-direction:column;gap:2.4rem;} .product-headline{font-size:2.5rem;line-height:1.1;letter-spacing:-.012em;color:var(--ink);} .product-headline em{font-style:italic;color:var(--coral);} .product-body{font-family:var(--f);font-size:1.05rem;color:var(--mute);line-height:1.7;max-width:44ch;} .product-items{display:flex;flex-direction:column;gap:1.2rem;} .product-item{display:flex;align-items:flex-start;gap:1rem;padding:1.2rem 1.4rem;background:var(--paper);border-radius:14px;border:1px solid rgba(35,32,28,.07);} .product-item-icon{flex-shrink:0;width:2.8rem;height:2.8rem;border-radius:10px;background:var(--coral);display:flex;align-items:center;justify-content:center;} .product-item-text .label{font-family:var(--f);font-weight:700;font-size:.88rem;color:var(--ink);margin-bottom:.2rem;} .product-item-text .desc{font-family:var(--f);font-size:.88rem;color:var(--mute);line-height:1.45;} .product-no-cost{display:inline-flex;align-items:center;gap:.6rem;background:rgba(176,54,30,.08);border-radius:100px;padding:.5rem 1.2rem;font-family:var(--f);font-weight:700;font-size:.88rem;color:var(--coral);} /* ─── TRACKS ─────────────────────────────────────────── */ .tracks-section{background:var(--paper);} .tracks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:4rem;} .track-card{border-radius:20px;overflow:hidden;background:#fff;border:1px solid rgba(35,32,28,.07);box-shadow:0 2px 20px rgba(35,32,28,.05);display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease;} .track-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(176,54,30,.14);} .track-img{position:relative;aspect-ratio:16/10;overflow:hidden;} .track-img img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .5s ease;} .track-card:hover .track-img img{transform:scale(1.04);} /* Track card 1 portrait: keep the face in frame, not nose-cropped */ .track-img img[src*="track-woman-monitor"]{object-position:center 32%;} .track-num{position:absolute;top:1rem;left:1rem;width:2rem;height:2rem;border-radius:50%;background:var(--coral);color:#fff;font-family:var(--f);font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center;} .track-body{padding:1.6rem 1.8rem;flex:1;display:flex;flex-direction:column;gap:.6rem;} .track-title{font-family:var(--f);font-weight:700;font-size:1.12rem;color:var(--ink);} .track-desc{font-family:var(--f);font-size:.92rem;color:var(--mute);line-height:1.55;flex:1;} .track-tag{align-self:flex-start;margin-top:.8rem;font-family:var(--f);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--coral);border:1px solid rgba(176,54,30,.28);border-radius:100px;padding:.28rem .8rem;} /* ─── HOW IT WORKS — white bg, teal border, gold numbers */ .how-section{background:#fff;overflow:hidden;} .steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:4rem;} .step{ display:flex;flex-direction:column;gap:.9rem; padding:2rem 1.8rem 1.8rem; background:var(--paper); border-radius:20px; border:1px solid rgba(35,32,28,.07); border-top:3px solid var(--teal); box-shadow:0 2px 16px rgba(35,32,28,.04); transition:transform .3s ease,box-shadow .3s ease; } .step:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(176,54,30,.12);} .step-number{ font-family:var(--f-display);font-weight:600;font-size:3.8rem;line-height:1; color:var(--gold-dark);opacity:.55; margin-bottom:-.4rem; } .step-title{font-family:var(--f);font-weight:700;font-size:1.15rem;color:var(--ink);line-height:1.25;} .step-desc{font-family:var(--f);font-size:.94rem;color:var(--mute);line-height:1.6;} /* ─── MOMENT SECTION ─────────────────────────────────── */ .moment-section{ position:relative;overflow:hidden; height:62vh;min-height:440px; } .moment-bg{ position:absolute;inset:0;width:100%;height:115%; object-fit:cover;object-position:center 12%; z-index:0;will-change:transform; } .moment-overlay{ position:absolute;inset:0;z-index:1; background:linear-gradient( to top, rgba(35,32,28,.78) 0%, rgba(35,32,28,.38) 38%, transparent 68% ); } .moment-content{ position:absolute;bottom:0;left:0;right:0;z-index:2; padding:3.5rem 7%; display:flex;justify-content:space-between;align-items:flex-end;gap:2rem; flex-wrap:wrap; } .moment-message{ font-weight:600; font-size:3rem;line-height:1.08; letter-spacing:-.015em;color:#fff; max-width:20ch; } .moment-message em{font-style:italic;color:var(--gold);} .moment-cta-wrap{flex-shrink:0;} /* ─── REASSURANCE ────────────────────────────────────── */ .reassure-section{background:var(--coral);color:#fff;} .reassure-inner{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center;} .reassure-quote{font-family:var(--f);font-style:italic;font-weight:300;font-size:1.85rem;line-height:1.45;color:#fff;} .reassure-quote::before{content:"\201C";font-family:var(--f-display);font-size:5rem;line-height:.52;color:rgba(255,255,255,.22);display:block;margin-bottom:.6rem;font-style:normal;font-weight:600;} .reassure-attr{margin-top:1.4rem;font-family:var(--f);font-size:.86rem;color:rgba(255,255,255,.90);font-style:normal;font-weight:400;} .reassure-stats{display:flex;flex-direction:column;gap:2rem;} .stat{border-left:2px solid rgba(255,255,255,.22);padding-left:1.4rem;} .stat-num{font-family:var(--f-display);font-weight:600;font-size:3rem;line-height:1;color:var(--gold-bright);} .stat-label{font-family:var(--f);font-size:.9rem;color:rgba(255,255,255,.90);margin-top:.35rem;} /* ─── WARM BAND (extra image band) ───────────────────── */ .warmband-section{background:var(--paper-2);} .warmband-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:5%;align-items:center;} .warmband-img-wrap{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3;} .warmband-img-wrap img{width:100%;height:100%;object-fit:cover;object-position:center;} .warmband-text{display:flex;flex-direction:column;gap:1.2rem;} .warmband-text p{font-family:var(--f);font-size:1.05rem;color:var(--mute);line-height:1.72;max-width:46ch;} /* ─── UNBOX ──────────────────────────────────────────── */ .unbox-section{background:var(--paper);} .unbox-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:5%;align-items:center;} .unbox-text{display:flex;flex-direction:column;gap:1.6rem;} .unbox-img-wrap{position:relative;border-radius:24px;overflow:hidden;} .unbox-img-wrap img{width:100%;height:auto;display:block;} .unbox-list{display:flex;flex-direction:column;gap:.9rem;margin-top:.5rem;} .unbox-list-item{display:flex;align-items:flex-start;gap:.85rem;font-family:var(--f);font-size:.95rem;color:var(--ink);line-height:1.45;} .unbox-list-item::before{content:"";flex-shrink:0;width:.5rem;height:.5rem;border-radius:50%;background:var(--teal);margin-top:.55rem;} /* ─── BH SECTION ─────────────────────────────────────── */ .bh-section{border-top:1px solid rgba(35,32,28,.07);} .bh-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;max-width:980px;margin:0 auto;} .bh-card{background:#fff;border-radius:16px;padding:1.5rem 1.75rem;display:flex;align-items:flex-start;gap:1rem;box-shadow:0 2px 14px rgba(35,32,28,.05);} .bh-card-text p:first-child{font-family:var(--f);font-weight:600;font-size:.95rem;color:var(--ink);margin-bottom:.3rem;} .bh-card-text p:last-child{font-family:var(--f);font-size:.88rem;color:var(--mute);line-height:1.6;} .bh-link{font-family:var(--f);font-size:.9rem;font-weight:600;color:var(--coral);display:inline-flex;align-items:center;gap:.4rem;padding:.75rem 0;} /* ─── CTA ────────────────────────────────────────────── */ .cta-section{background:var(--coral);overflow:hidden;position:relative;padding:7rem 4%;} .cta-section::before{content:"";position:absolute;inset:0;background:url('/assets/hero-bg.jpg') center 22%/cover no-repeat;opacity:.10;} .cta-inner{position:relative;z-index:2;max-width:780px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2rem;} .cta-h2{font-weight:600;font-size:3.4rem;line-height:1.04;letter-spacing:-.015em;color:#fff;} .cta-body{font-family:var(--f);font-size:1.1rem;color:rgba(255,255,255,.9);line-height:1.6;max-width:48ch;} .cta-btns{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;} .cta-note{font-family:var(--f);font-size:.8rem;color:rgba(255,255,255,.90);} /* ─── LEAD FORM ──────────────────────────────────────── */ .enroll-card{ background:var(--paper);border-radius:24px; width:100%;max-width:560px;margin:0 auto; padding:2.6rem 2.4rem 2.2rem;text-align:left; box-shadow:0 18px 60px rgba(35,32,28,.28); } .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;} .form-field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem;} .form-field label{ font-family:var(--f);font-weight:600;font-size:.92rem;color:var(--ink); } .form-field .req{color:var(--coral);} .form-field input{ font-family:var(--f);font-size:1.05rem;color:var(--ink); padding:.85rem 1rem;border:1.5px solid rgba(35,32,28,.55); border-radius:12px;background:#fff;width:100%;min-height:52px; transition:border-color .15s ease,box-shadow .15s ease; } .form-field input::placeholder{color:rgba(35,32,28,.62);} .form-field input:focus{ outline:none;border-color:var(--coral); box-shadow:0 0 0 3px rgba(176,54,30,.20); } .form-fieldset{border:none;margin:0 0 1.1rem;padding:0;} .form-fieldset legend{ font-family:var(--f);font-weight:600;font-size:.92rem;color:var(--ink); padding:0;margin-bottom:.6rem; } .radio-group{display:flex;gap:.7rem;flex-wrap:wrap;} .radio-pill{flex:1;min-width:120px;position:relative;} .radio-pill input{position:absolute;opacity:0;width:0;height:0;} .radio-pill label{ display:flex;align-items:center;justify-content:center; font-family:var(--f);font-weight:500;font-size:.98rem; color:var(--ink);text-align:center;cursor:pointer; padding:.8rem .9rem;min-height:52px; border:1.5px solid rgba(35,32,28,.55);border-radius:12px;background:#fff; transition:border-color .15s ease,background .15s ease,color .15s ease; } .radio-pill input:checked + label{ border-color:var(--coral);background:var(--coral);color:#fff; } .radio-pill input:focus-visible + label{ box-shadow:0 0 0 3px rgba(176,54,30,.30); } /* consent checkbox */ .form-consent{display:flex;align-items:flex-start;gap:.7rem;margin:.4rem 0 1.1rem;} .form-consent input[type="checkbox"]{ width:24px;height:24px;flex-shrink:0;margin-top:1px;accent-color:var(--coral);cursor:pointer; } .form-consent label{font-family:var(--f);font-size:.86rem;color:var(--ink);line-height:1.5;cursor:pointer;} .form-consent a{color:var(--coral);text-decoration:underline;} /* honeypot — visually hidden, off-screen, not a display:none (so bots fill it) */ .hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;} .form-presubmit{font-family:var(--f);font-size:.84rem;color:var(--mute);line-height:1.5;margin-bottom:.8rem;} .form-submit{ width:100%;border:none;margin-top:.2rem;min-height:58px; font-size:1.1rem; display:inline-flex;align-items:center;justify-content:center;gap:.6rem; } /* Loading state: spinner shown, button locked while the submission is in flight. */ .form-submit.loading{cursor:progress;opacity:.9;} .form-submit[disabled]{pointer-events:none;} .btn-spinner{ display:none;width:18px;height:18px;flex:none; border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%; animation:hh-spin .7s linear infinite; } .form-submit.loading .btn-spinner{display:inline-block;} @keyframes hh-spin{to{transform:rotate(360deg);}} .form-reassure{ font-family:var(--f);font-size:.82rem;color:var(--mute); text-align:center;margin-top:1rem;line-height:1.5; } .enroll-heading{margin-bottom:1.6rem;text-align:center;} .enroll-heading .cta-h2{color:var(--ink);font-size:2.6rem;} .enroll-heading .enroll-sub{ font-family:var(--f);font-size:1.05rem;color:var(--mute); line-height:1.6;margin-top:.8rem;max-width:42ch;margin-left:auto;margin-right:auto; } /* Confirmation state */ .enroll-confirm{display:none;text-align:center;padding:1.5rem .5rem;} .enroll-confirm.show{display:block;} .enroll-form.hide{display:none;} .confirm-icon{ width:4rem;height:4rem;border-radius:50%;background:var(--teal); display:flex;align-items:center;justify-content:center;margin:0 auto 1.4rem; } .confirm-title{font-weight:600;font-size:1.8rem;color:var(--ink);line-height:1.2;margin-bottom:.8rem;} .confirm-body{font-family:var(--f);font-size:1.05rem;color:var(--mute);line-height:1.65;max-width:40ch;margin:0 auto;} @media(max-width:600px){ .form-row{grid-template-columns:1fr;} .enroll-card{padding:2rem 1.4rem 1.8rem;} .enroll-heading .cta-h2{font-size:2.1rem;} .radio-pill{min-width:100%;} } /* ─── FOOTER ─────────────────────────────────────────── */ footer{background:var(--ink);color:rgba(255,255,255,.6);padding:3rem 4%;} .footer-inner{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:1.4rem;} .footer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;} .footer-links{display:flex;gap:1.6rem;flex-wrap:wrap;font-family:var(--f);font-size:.86rem;} .footer-links a{color:rgba(255,255,255,.6);transition:color .2s;padding:.2rem 0;} .footer-links a:hover{color:#fff;} .footer-disclaimer{font-family:var(--f);font-size:.75rem;line-height:1.65;color:rgba(255,255,255,.56);border-top:1px solid rgba(255,255,255,.10);padding-top:1.4rem;} /* ─── RESPONSIVE ─────────────────────────────────────── */ @media(max-width:960px){ .section-h2{font-size:2.1rem;} .trust-inner{grid-template-columns:1fr 1fr;} .product-grid,.reassure-inner,.unbox-grid,.bh-grid,.warmband-grid{grid-template-columns:1fr;} .tracks-grid,.steps-grid{grid-template-columns:1fr;} .moment-message{font-size:2.2rem;} .hero-tag{white-space:normal;border-radius:18px;line-height:1.5;} .footer-top{flex-direction:column;gap:1.2rem;align-items:flex-start;} .warmband-img-wrap{order:-1;} /* Let hero lines wrap rather than overflow on small screens */ .hero-h1 .line1,.hero-h1 .line2{white-space:normal;} }