/* ============================================================ FOCUS 30 — landing page Every band on this page is green. The surface--* modifiers are value steps in one green ladder (deep → mid → forest → sage), not light/dark themes. Texture, gradient and glow carry the difference between sections. ============================================================ */ :root{ --warm:#FAF9F6; --champ:#D8C3A5; --champ-2:#F1E3CB; --sage:#C9D3CC; /* green value ladder */ --deep:#07110E; --mid:#0D1F1A; --forest:#173F35; --forest-2:#1E5346; --on-dark:rgba(250,249,246,.84); /* primary body on dark — was .72, too washed */ --on-mute:rgba(250,249,246,.70); /* secondary on dark — was .62 */ --paper:#FAF9F6; --paper-ink:#1F2421; /* near-black, faintly green */ --paper-ink-2:#414B45; /* secondary on paper */ --line:rgba(216,195,165,.18); --line-2:rgba(216,195,165,.32); --display:'Archivo','Helvetica Neue',Arial,sans-serif; --sans:'Inter','Helvetica Neue',Arial,sans-serif; --serif:'Instrument Serif',Georgia,serif; --wrap:1200px; --gut:clamp(20px,5vw,48px); --pad:clamp(84px,10vw,152px); --r-s:14px; --r:22px; --r-l:30px; --e:cubic-bezier(.22,.68,.32,1); --e-out:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box} [hidden]{display:none !important} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:#081511;color:var(--warm); font-family:var(--sans);font-size:17px;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:clip; } img{max-width:100%;height:auto;display:block} /* deter casual image lifting: no drag, no long-press save sheet on iOS, no selection. Text stays fully selectable — people need to copy the price. */ img{ -webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;user-drag:none; -webkit-touch-callout:none; -webkit-user-select:none;-moz-user-select:none;user-select:none; } ul{margin:0;padding:0;list-style:none} p{margin:0 0 1em} h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.02} a{color:inherit;text-decoration:none} s{opacity:.55} :focus-visible{outline:2px solid var(--champ);outline-offset:3px;border-radius:6px} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} } /* ---------- primitives ---------- */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)} .wrap--mid{max-width:900px} .wrap--narrow{max-width:800px} .ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .sec{padding-block:var(--pad)} /* --- the green ladder --- Every band sits on ONE continuous base colour (set on ). A band's identity comes from a wash that fades to transparent well before its own edges, so neighbouring sections dissolve into each other instead of meeting at a line. No borders between bands, ever. */ /* overflow:hidden keeps the aurora/beam layers (which are inset past the section box on purpose) from widening the document */ .surface{position:relative;isolation:isolate;background:transparent;overflow:hidden} /* the vertical mask is what kills the seams: no band paints anything at its own top or bottom edge, so every boundary is pure base colour */ .surface::before{ content:"";position:absolute;inset:0;z-index:-3;pointer-events:none; -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 80%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 80%,transparent 100%); } .aurora{ -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%); } .surface--dark::before{ background:radial-gradient(110% 72% at 50% 0%,rgba(23,63,53,.46),transparent 68%); } .surface--tint::before{ background: radial-gradient(94% 70% at 50% 42%,rgba(30,83,70,.40),transparent 70%), radial-gradient(52% 40% at 50% 100%,rgba(216,195,165,.05),transparent 72%); } .surface--forest::before{ background: radial-gradient(120% 80% at 50% 50%,rgba(27,74,62,.85),transparent 72%), radial-gradient(60% 40% at 50% 6%,rgba(216,195,165,.06),transparent 70%); } .surface--sage::before{ background: radial-gradient(115% 78% at 50% 50%,rgba(32,88,73,.9),transparent 72%), radial-gradient(64% 46% at 50% 34%,rgba(201,211,204,.13),transparent 70%); } /* aurora + texture */ .aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-2} .aurora i{ position:absolute;display:block;border-radius:50%; filter:blur(80px);opacity:.78; animation:drift 22s var(--e) infinite alternate; } /* deep green | champagne | sage — the three brand shades as light */ .aurora .a1{width:64vw;height:64vw;max-width:940px;max-height:940px;top:-26%;right:-14%;background:radial-gradient(circle,rgba(43,124,103,1),transparent 64%)} .aurora .a2{width:52vw;height:52vw;max-width:740px;max-height:740px;bottom:-20%;left:-12%;background:radial-gradient(circle,rgba(216,195,165,.52),transparent 62%);animation-duration:28s;animation-direction:alternate-reverse} .aurora .a3{width:40vw;height:40vw;max-width:580px;max-height:580px;top:28%;left:42%;background:radial-gradient(circle,rgba(174,205,190,.30),transparent 64%);animation-duration:34s} @keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(4%,6%,0) scale(1.14)}} /* --- hero texture: outsized line-art glyphs of the things you'll be proving every day. Kept to the outer thirds and masked away from the centre column so they never fight the headline. --- */ .glyphs{ position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden; -webkit-mask-image: radial-gradient(58% 62% at 50% 46%,transparent 0%,transparent 48%,#000 88%), linear-gradient(180deg,transparent 0%,#000 14%,#000 82%,transparent 100%); -webkit-mask-composite:source-in; mask-image: radial-gradient(58% 62% at 50% 46%,transparent 0%,transparent 48%,#000 88%), linear-gradient(180deg,transparent 0%,#000 14%,#000 82%,transparent 100%); mask-composite:intersect; } .glyph{ position:absolute;fill:none;stroke:var(--champ); stroke-width:.42;stroke-linecap:round;stroke-linejoin:round; opacity:.12; animation:glyphFloat 18s ease-in-out infinite alternate; } .glyph--cal {left:-2%; top:14%; width:clamp(150px,17vw,250px);height:auto;aspect-ratio:1;transform:rotate(-13deg);animation-duration:20s} .glyph--list {left:8%; bottom:2%; width:clamp(130px,14vw,210px);height:auto;aspect-ratio:1;transform:rotate(9deg);animation-duration:24s;animation-direction:alternate-reverse} .glyph--phone{right:1%; top:9%; width:clamp(120px,13vw,190px);height:auto;aspect-ratio:1;transform:rotate(12deg);animation-duration:22s} .glyph--clock{right:7%; bottom:4%; width:clamp(140px,15vw,225px);height:auto;aspect-ratio:1;transform:rotate(-8deg);animation-duration:26s;animation-direction:alternate-reverse} .glyph--moon {left:20%; top:2%; width:clamp(90px,9vw,130px); height:auto;aspect-ratio:1;transform:rotate(16deg);opacity:.11;animation-duration:28s} .glyph--steps{right:22%; bottom:-1%;width:clamp(90px,9vw,130px); height:auto;aspect-ratio:1;transform:rotate(-14deg);opacity:.11;animation-duration:30s;animation-direction:alternate-reverse} @keyframes glyphFloat{ 0%{translate:0 0} 100%{translate:0 -18px} } @media (prefers-reduced-motion:reduce){.glyph{animation:none}} @media (max-width:900px){ .glyph--moon,.glyph--steps,.glyph--clock{display:none} .glyph{opacity:.1} .glyph--cal{left:-8%;top:9%} .glyph--phone{right:-6%;top:6%} .glyph--list{left:-6%;bottom:4%} } .gridlines{ position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35; background-image: linear-gradient(to right,rgba(250,249,246,.045) 1px,transparent 1px), linear-gradient(to bottom,rgba(250,249,246,.045) 1px,transparent 1px); background-size:96px 96px; -webkit-mask-image:radial-gradient(130% 92% at 50% 0%,#000 12%,transparent 76%); mask-image:radial-gradient(130% 92% at 50% 0%,#000 12%,transparent 76%); } /* --- aurora beams: soft raking light bars, one flavour per band --- */ .beams{ position:absolute;inset:-16% -12%;z-index:-2;pointer-events:none;overflow:hidden; -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 76%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 76%,transparent 100%); } .beams i{ position:absolute;top:-24%;height:150%; width:clamp(160px,24vw,460px); background:linear-gradient(90deg,transparent,rgba(216,195,165,.14) 45%,transparent); filter:blur(30px); animation:sweep 26s ease-in-out infinite alternate; } /* light green | sage | deep green — three shades raking across each band */ .beams i:nth-child(1){left:4%;transform:rotate(16deg);background:linear-gradient(90deg,transparent,rgba(216,195,165,.15) 45%,transparent)} .beams i:nth-child(2){left:40%;transform:rotate(-12deg);background:linear-gradient(90deg,transparent,rgba(122,176,155,.20) 45%,transparent);animation-duration:34s;animation-direction:alternate-reverse} .beams i:nth-child(3){right:2%;transform:rotate(11deg);background:linear-gradient(90deg,transparent,rgba(46,130,106,.62) 45%,transparent);animation-duration:30s} @keyframes sweep{ 0%{transform:translateX(-6%) rotate(var(--r,14deg)) scaleY(1)} 100%{transform:translateX(8%) rotate(var(--r,14deg)) scaleY(1.1)} } .beams i:nth-child(1){--r:16deg} .beams i:nth-child(2){--r:-12deg} .beams i:nth-child(3){--r:11deg} @media (prefers-reduced-motion:reduce){.beams i{animation:none}} .noise{ position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } /* dotted texture for the mid bands so they don't read the same as deep */ .surface--tint::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5; background-image:radial-gradient(rgba(216,195,165,.09) 1px,transparent 1px); background-size:26px 26px; -webkit-mask-image:radial-gradient(80% 60% at 50% 40%,#000,transparent 72%); mask-image:radial-gradient(80% 60% at 50% 40%,#000,transparent 72%); } /* ---------- reveal ---------- */ .js .reveal{opacity:0;transform:translateY(26px);filter:blur(6px)} .js .reveal.in{ opacity:1;transform:none;filter:blur(0); transition:opacity .9s var(--e-out),transform .9s var(--e-out),filter .9s var(--e-out); transition-delay:var(--d,0ms); } @media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;filter:none}} html:not(.js) .bar u{width:var(--f)} /* ---------- spotlight ---------- */ .spot{position:relative} .spot::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; opacity:0;transition:opacity .35s var(--e); background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(216,195,165,.16),transparent 62%); } .spot:hover::after{opacity:1} /* ---------- scroll progress ---------- */ .scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;pointer-events:none} .scrollbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--champ),var(--champ-2));box-shadow:0 0 14px rgba(216,195,165,.7)} /* ---------- buttons ---------- */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:16px 30px;border:0;border-radius:999px;cursor:pointer;overflow:hidden; font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.02em;white-space:nowrap; color:#12241E; background:linear-gradient(180deg,var(--champ-2) 0%,var(--champ) 62%,#CBB392 100%); box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 30px -12px rgba(216,195,165,.75),0 2px 6px rgba(0,0,0,.16); transition:transform .25s var(--e),box-shadow .25s var(--e); } .btn>span,.btn>.ic{position:relative;z-index:1} .btn::before{ content:"";position:absolute;top:0;left:-140%;width:60%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent); transform:skewX(-18deg);transition:left .7s var(--e); } .btn:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 20px 42px -14px rgba(216,195,165,.9),0 4px 10px rgba(0,0,0,.2)} .btn:hover::before{left:140%} .btn:active{transform:translateY(-1px)} .btn .ic{width:18px;height:18px;stroke-width:2.2;transition:transform .25s var(--e)} .btn:hover .ic{transform:translateX(4px)} .btn--sm{padding:11px 20px;font-size:14.5px} .btn--lg{padding:19px 38px;font-size:clamp(16px,1.5vw,18px)} .btn--xl{padding:22px 46px;font-size:clamp(17px,1.7vw,19.5px)} .btn--wide{width:100%;max-width:420px} .cta{position:relative;margin-top:clamp(34px,4vw,52px);display:flex;flex-direction:column;align-items:center;gap:14px} .cta--mid{margin-top:clamp(50px,6vw,80px)} .cta::before,.finalbox::before{ content:"";position:absolute;top:-34px;left:50%;transform:translateX(-50%); width:min(380px,92%);height:130px;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(216,195,165,.28),transparent 72%); filter:blur(18px);animation:breathe 5s ease-in-out infinite; } .finalbox::before{top:auto;bottom:34px} @keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}} @media (prefers-reduced-motion:reduce){.cta::before,.finalbox::before{animation:none;opacity:.7}} .cta__note{ margin:0;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase; color:var(--on-mute);text-align:center; } /* ============================================================ HEADER ============================================================ */ .hdr{position:fixed;inset:0 0 auto;z-index:80;transition:background .35s var(--e),box-shadow .35s var(--e)} /* logo | centred nav | CTA — the 1fr side columns keep the nav on the page axis regardless of how wide the logo or button get */ .hdr__in{ width:100%;max-width:var(--wrap);margin-inline:auto;padding:13px var(--gut); display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px; transition:padding .35s var(--e); } .hdr__in > .mark{justify-self:start} .hdr__in > .btn{justify-self:end} @media (max-width:900px){.hdr__in{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:12px}} .hdr.stuck{ background:rgba(7,17,14,.74); -webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px); box-shadow:0 1px 0 rgba(216,195,165,.14),0 18px 40px -30px rgba(0,0,0,.9); } .hdr.stuck .hdr__in{padding-block:10px} /* ---- logo lockup: FOCUS | (30) ---- */ .mark{display:inline-flex;align-items:center;gap:12px;color:var(--warm)} .mark__word{ font-family:var(--sans);font-weight:300; font-size:var(--mark-size,19px);letter-spacing:.16em;line-height:1; text-transform:uppercase;color:var(--warm); padding-right:2px; } .mark__rule{ width:1px;height:calc(var(--mark-ring,30px) * .78); background:linear-gradient(180deg,transparent,var(--champ) 18%,var(--champ) 82%,transparent); opacity:.85; } .mark__ring{ position:relative;display:grid;place-items:center;flex:none; width:var(--mark-ring,30px);height:var(--mark-ring,30px); color:var(--champ); } .mark__ring svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .5s var(--e-out)} .mark__ring b{ position:relative;font-family:var(--sans);font-weight:300; font-size:calc(var(--mark-ring,30px) * .40);letter-spacing:.01em;line-height:1; color:var(--warm); } .mark:hover .mark__ring svg{transform:rotate(90deg)} .mark--sm{--mark-size:17px;--mark-ring:27px} /* section nav */ .nav{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.4vw,34px)} .nav a{ position:relative;font-size:14.5px;font-weight:500;letter-spacing:-.01em; color:rgba(250,249,246,.72);transition:color .25s var(--e);white-space:nowrap; } .nav a::after{ content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px; background:var(--champ);transition:right .3s var(--e); } .nav a:hover{color:var(--warm)} .nav a:hover::after{right:0} /* ---------- mobile menu ---------- */ .navtoggle{ display:none;width:42px;height:42px;flex:none;border-radius:12px;cursor:pointer; border:1px solid var(--line-2);background:rgba(250,249,246,.05); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); align-items:center;justify-content:center;flex-direction:column;gap:5px; } .navtoggle span{ display:block;width:17px;height:1.5px;border-radius:2px;background:var(--champ); transition:transform .3s var(--e-out),opacity .18s var(--e); } .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0} .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} @media (max-width:900px){ /* menu and logo sit together on the left; the CTA is pushed to the right */ .navtoggle{display:flex;order:0} .hdr__in > .mark{order:1} .hdr__in > .btn{order:2;margin-left:auto} /* The panel is hidden with visibility, not display, so it can animate and so its links stay out of the tab order while closed. */ .nav{ position:absolute;top:calc(100% + 8px);left:var(--gut);right:var(--gut); flex-direction:column;align-items:stretch;gap:2px;padding:8px; border-radius:16px;border:1px solid var(--line-2); background:rgba(13,31,26,.94); -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%); box-shadow:0 26px 60px -22px rgba(0,0,0,.8); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .25s var(--e-out),transform .25s var(--e-out),visibility .25s; } .nav.is-open{opacity:1;visibility:visible;transform:none} .nav a{padding:13px 14px;border-radius:10px;font-size:15.5px;white-space:normal} .nav a::after{display:none} .nav a:hover,.nav a:focus-visible{background:rgba(216,195,165,.10);color:var(--warm)} } @media (prefers-reduced-motion:reduce){.nav,.navtoggle span{transition:none}} /* anchors clear the fixed header */ [id]{scroll-margin-top:96px} /* ============================================================ HERO ============================================================ */ /* Tuned so the five habit cards clear the fold on a ~780px desktop viewport. */ .hero{ padding-top:clamp(96px,9.5vw,120px); padding-bottom:clamp(64px,7vw,96px); overflow:hidden; } .hero::before{ background: radial-gradient(86% 56% at 50% 4%,rgba(32,90,75,.72),transparent 68%), radial-gradient(48% 36% at 50% 32%,rgba(216,195,165,.11),transparent 70%); /* hero starts at the top of the page, so only its bottom edge needs to fade */ -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 74%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 74%,transparent 100%); } .hero .aurora{ -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%); } /* soft corner falloff, but nothing that reaches the band edges */ .hero::after{ content:"";position:absolute;inset:0;z-index:-2;pointer-events:none; background:radial-gradient(130% 84% at 50% 40%,transparent 44%,rgba(3,8,6,.55) 100%); -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%); } .hero__in{display:flex;flex-direction:column;align-items:center;text-align:center} /* date line — plain, no container, deliberately large */ .hmeta{ display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px 12px;margin:0; } .hmeta .ic{width:22px;height:22px;color:var(--champ);stroke-width:1.8} .hmeta__k{ font-size:clamp(15px,1.6vw,18px);font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:rgba(250,249,246,.8); } .hmeta__date{ font-size:clamp(17px,1.9vw,22px);font-weight:800;letter-spacing:.06em; color:var(--champ); } .hero__h1{ margin-top:clamp(18px,2.2vw,26px); font-size:clamp(38px,5.5vw,72px);line-height:1;letter-spacing:-.04em;font-weight:800; max-width:17ch;text-wrap:balance; } .grad{ background:linear-gradient(100deg,#F6ECD9 6%,var(--champ) 44%,#B49A73 92%); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero__sub{ margin:clamp(16px,1.7vw,20px) 0 0;max-width:52ch; font-size:clamp(17px,1.75vw,20px);line-height:1.42;color:rgba(250,249,246,.8);text-wrap:balance; } .hero__global{ display:block;text-align:center; margin:clamp(12px,1.2vw,15px) 0 0;max-width:54ch; font-size:clamp(14.5px,1.45vw,16px);line-height:1.5;color:var(--on-mute);text-wrap:balance; } .hero__global .ic{ display:inline-block;width:17px;height:17px;margin-right:8px; vertical-align:-3px;color:var(--champ); } .proofrow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:clamp(26px,3vw,36px)} .avs{display:flex} .avs img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--deep);box-shadow:0 0 0 1px rgba(216,195,165,.45)} .avs img+img{margin-left:-12px} .stars{display:flex;gap:2px;color:var(--champ)} .stars .ic{width:15px;height:15px;fill:currentColor;stroke-width:0} .proofrow__t{font-size:15px;color:var(--on-dark)} .pricechip{ display:inline-flex;align-items:center;gap:10px;margin:26px 0 0; padding:11px 22px;border-radius:999px; border:1px solid var(--line-2); background:linear-gradient(180deg,rgba(216,195,165,.16),rgba(216,195,165,.06)); font-size:15.5px;color:rgba(250,249,246,.92);text-align:center; } .pricechip b{color:var(--champ);font-weight:800;white-space:nowrap} .pricechip s{white-space:nowrap} .pricechip .ic{width:17px;height:17px;color:var(--champ)} .label{ margin:clamp(24px,2.6vw,34px) 0 13px; font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--champ); } /* habits — always all five visible, always centred, never a carousel */ .habits{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;width:100%} .habit{ flex:0 0 calc((100% - 4 * 14px) / 5); display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center; padding:20px 14px 18px;border-radius:var(--r); border:1px solid var(--line); background:linear-gradient(180deg,rgba(250,249,246,.065),rgba(250,249,246,.02)); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(255,255,255,.06) inset; transition:transform .35s var(--e),border-color .35s var(--e),box-shadow .35s var(--e); } .habit:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 26px 50px -30px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.1) inset} .habit__ring{ display:grid;place-items:center;width:46px;height:46px;border-radius:50%; border:1px solid rgba(216,195,165,.3);color:var(--champ); background:radial-gradient(circle at 50% 15%,rgba(216,195,165,.2),transparent 72%); } .habit__ring .ic{width:22px;height:22px} .habit b{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.2} .habit em{font-style:normal;font-size:13.5px;line-height:1.35;color:var(--on-mute);max-width:20ch} /* benefits — no container; block centred on the page, ticks left-aligned so they stack in a column */ .checks{ display:grid;gap:13px; margin:clamp(30px,3.4vw,44px) auto 0; width:fit-content;max-width:100%; } .checks li{ display:flex;align-items:center;gap:12px;text-align:left; font-size:clamp(15.5px,1.55vw,17px);line-height:1.4;color:rgba(250,249,246,.9); } .checks__tick{ display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%; border:1px solid rgba(216,195,165,.38);color:var(--champ); background:radial-gradient(circle at 50% 18%,rgba(216,195,165,.22),transparent 72%); } .checks .ic{width:13px;height:13px;flex:none;color:var(--champ);stroke-width:2.8} /* removal warning — a rule, not a promise, so it gets its own frame */ .warn{ display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 8px; margin:clamp(18px,2vw,24px) auto 0;padding:8px 15px; border-radius:9px; border:1px solid rgba(216,195,165,.26); background:rgba(216,195,165,.055); text-align:center; } .warn .ic{width:14px;height:14px;flex:none;color:var(--champ);stroke-width:1.9;opacity:.9} .warn b{ font-size:11.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--champ); } .warn span{font-size:12.5px;color:var(--on-mute)} @media (max-width:520px){ .warn{padding:7px 13px;gap:3px 7px} .warn b{letter-spacing:.07em;font-size:11px} .warn span{font-size:12px} } /* ============================================================ TICKER — lit, not neon ============================================================ */ .ticker{ display:block;position:relative;overflow:hidden;padding:17px 0; background:linear-gradient(90deg,rgba(10,27,22,0) 0%,rgba(24,68,58,.92) 50%,rgba(10,27,22,0) 100%); border-top:1px solid rgba(216,195,165,.2); border-bottom:1px solid rgba(216,195,165,.2); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); transition:filter .3s var(--e); } .ticker:hover{filter:brightness(1.12)} .ticker__t{display:flex;width:max-content;animation:marquee var(--marquee-dur,40s) linear infinite} .ticker:hover .ticker__t{animation-play-state:paused} .ticker__s{display:flex;align-items:center;gap:26px;padding-right:26px} .ticker__s b{ font-family:var(--sans);font-size:13px;font-weight:700; letter-spacing:.18em;text-transform:uppercase;white-space:nowrap; color:var(--champ-2); } .ticker__s i{font-style:normal;font-size:11px;color:rgba(216,195,165,.55)} @keyframes tick{to{transform:translateX(-50%)}} /* distance comes from JS so it always equals exactly one set */ @keyframes marquee{to{transform:translateX(calc(var(--marquee-w,50%) * -1))}} @media (prefers-reduced-motion:reduce){.ticker__t{animation:none}} /* ============================================================ SECTION HEADS ============================================================ */ .head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:clamp(46px,5.5vw,76px)} .h2{font-size:clamp(31px,4.6vw,60px);line-height:1.02;max-width:20ch;text-wrap:balance} .sub{margin:20px 0 0;font-size:clamp(17px,1.6vw,20.5px);color:var(--on-dark);max-width:58ch;text-wrap:balance} .sub--gold{color:var(--champ) !important;font-weight:600} /* Sentence-case subhead. The all-caps label style it replaced relied on heavy letter-spacing, which reads as cramped once the caps come off. */ .sub-lead{ margin:14px 0 0;font-size:clamp(15px,1.5vw,17px);font-weight:500; line-height:1.5;letter-spacing:.005em;color:var(--champ); } .sub-lead + .sub-lead{margin-top:5px} .sub-italic{ margin:10px 0 0;font-size:clamp(15px,1.5vw,17px);line-height:1.45;color:var(--on-dark); } .sub-italic em{font-style:italic} /* ============================================================ 02 · SOUNDS FAMILIAR ============================================================ */ .pains{display:grid;gap:10px;max-width:790px;margin-inline:auto} .pain{ position:relative;overflow:hidden; display:flex;align-items:flex-start;gap:clamp(12px,1.5vw,18px); padding:clamp(14px,1.6vw,19px) clamp(18px,2.2vw,27px); border-radius:var(--r); border:1px solid var(--line); background:linear-gradient(180deg,rgba(250,249,246,.06),rgba(250,249,246,.02)); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 26px 54px -44px rgba(0,0,0,.95); transition:transform .35s var(--e),border-color .35s var(--e),box-shadow .35s var(--e); } /* lit left edge — reads as the row being "flagged" */ .pain::before{ content:"";position:absolute;left:0;top:16%;bottom:16%;width:2px; background:linear-gradient(180deg,transparent,var(--champ),transparent); opacity:.35;transition:opacity .35s var(--e),top .35s var(--e),bottom .35s var(--e); } .pain:hover{transform:translateX(4px);border-color:var(--line-2);box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 34px 66px -40px rgba(0,0,0,1)} .pain:hover::before{opacity:1;top:6%;bottom:6%} .pain__x{ display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%; border:1px solid rgba(216,195,165,.34);color:var(--champ); background:radial-gradient(circle at 50% 20%,rgba(216,195,165,.18),transparent 72%); margin-top:1px; } .pain__x .ic{width:13px;height:13px;stroke-width:2.4} .pain p{ margin:0;font-size:clamp(15.5px,1.5vw,17px);line-height:1.5; color:rgba(250,249,246,.92);letter-spacing:-.012em; } /* this section runs ~85% of the page's default type scale */ #sounds-familiar .h2{font-size:clamp(26px,3.9vw,51px)} #sounds-familiar .sub{font-size:clamp(15px,1.36vw,17.5px)} .pains{--pain-scale:.85} .turn{ margin:clamp(20px,2.2vw,30px) auto 0;max-width:28ch;text-align:center; font-family:var(--display);font-weight:600;letter-spacing:-.03em; font-size:clamp(19px,2.3vw,28px);line-height:1.16; color:rgba(250,249,246,.82);text-wrap:balance; } /* this section is one short emotional beat — it does not need a full band */ #sounds-familiar{padding-block:clamp(46px,5vw,72px)} #sounds-familiar .head{margin-bottom:clamp(24px,2.6vw,34px)} .turn b{font-weight:800;color:var(--warm)} .turn__hl{color:var(--champ) !important} /* ============================================================ 03 · CARDS + VALUE STACK ============================================================ */ .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,22px);max-width:920px;margin-inline:auto} .card{ position:relative;overflow:hidden; display:flex;flex-direction:column;align-items:center;text-align:center; padding:clamp(36px,3.6vw,48px) clamp(24px,2.4vw,32px) clamp(32px,3.2vw,42px); border-radius:var(--r-l); border:1px solid var(--line); background:linear-gradient(180deg,rgba(250,249,246,.085),rgba(250,249,246,.022)); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 34px 70px -46px rgba(0,0,0,.95); transition:transform .4s var(--e),box-shadow .4s var(--e),border-color .4s var(--e); } /* lit top edge — the detail that makes glass read as glass */ .card::before{ content:"";position:absolute;top:0;left:14%;right:14%;height:1px; background:linear-gradient(90deg,transparent,rgba(240,226,203,.55),transparent); opacity:.7;transition:opacity .4s var(--e),left .4s var(--e),right .4s var(--e); } .card:hover{transform:translateY(-8px);border-color:var(--line-2);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 52px 90px -44px rgba(0,0,0,1)} .card:hover::before{opacity:1;left:4%;right:4%} .card__ring{ position:relative;display:grid;place-items:center;width:62px;height:62px;border-radius:20px; margin-bottom:clamp(20px,2.2vw,28px); border:1px solid rgba(216,195,165,.36);color:var(--champ); background:linear-gradient(160deg,rgba(216,195,165,.26),rgba(216,195,165,.03)); box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 14px 30px -18px rgba(216,195,165,.5); transition:transform .4s var(--e),box-shadow .4s var(--e); } .card:hover .card__ring{transform:translateY(-2px) scale(1.05);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 20px 40px -18px rgba(216,195,165,.75)} .card__ring .ic{width:26px;height:26px} .card h3{font-size:21px;line-height:1.2;margin-bottom:13px;letter-spacing:-.03em} .card p{margin:0;color:var(--on-dark);font-size:17px;line-height:1.6} .stack{ --stack-pad:clamp(30px,4vw,46px); position:relative;max-width:780px;margin:clamp(50px,6vw,80px) auto 0; padding:var(--stack-pad);border-radius:var(--r-l); border:1px solid var(--line); background:linear-gradient(180deg,rgba(250,249,246,.075),rgba(250,249,246,.025)); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 44px 90px -50px rgba(0,0,0,1); text-align:center; } .stack__h{ font-size:clamp(26px,3.2vw,40px);line-height:1.06;margin-bottom:16px; } .stack__p{ margin:0 auto;max-width:48ch; font-size:clamp(16px,1.6vw,18.5px);line-height:1.55;color:var(--on-dark);text-wrap:balance; } .stack__mockup{ position:relative; margin:clamp(26px,3.2vw,36px) auto 0; width:100%; } .stack__mockup img{ width:100%;height:auto; filter: drop-shadow(0 22px 20px rgba(1,9,7,.34)) drop-shadow(0 5px 8px rgba(1,9,7,.18)); } .stack__label{ margin:0 0 22px;font-size:11.5px;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:var(--champ); } .stack ul li{ display:flex;align-items:baseline;justify-content:space-between;gap:18px;text-align:left; padding:14px 0;border-bottom:1px dashed rgba(216,195,165,.2);font-size:16.5px; } .stack ul li b{font-size:15px;font-weight:500;color:var(--on-mute);text-decoration:line-through} .stack__inv b{ font-family:var(--serif) !important;font-style:italic;font-size:25px !important; color:var(--champ) !important;text-decoration:none !important;line-height:1; } .stack__total{ display:flex;align-items:baseline;justify-content:space-between;gap:18px; margin:22px 0 0;padding-top:20px;border-top:2px solid var(--champ); } .stack__total span{font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase} .stack__total b{font-family:var(--display);font-size:clamp(30px,3.6vw,42px);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums} .stack__buy{ margin:clamp(24px,2.8vw,34px) calc(var(--stack-pad) * -1) calc(var(--stack-pad) * -1); padding:clamp(30px,4vw,44px) clamp(24px,4vw,46px); border-radius:0 0 var(--r-l) var(--r-l); border-top:1px solid var(--line-2); background:linear-gradient(165deg,#174035,#0B1F1A); display:flex;flex-direction:column;align-items:center; } .stack__today{margin:0;font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--champ)} .stack__price{margin:6px 0 0;font-family:var(--display);font-size:clamp(56px,7vw,82px);font-weight:800;letter-spacing:-.05em;line-height:1} .stack__price span{font-size:.26em;font-weight:600;letter-spacing:-.01em;color:var(--champ);vertical-align:.5em;margin-left:4px} .stack__terms{margin:8px 0 0;font-size:15px;color:var(--on-dark)} .stack__promo{ margin:16px 0 26px; color:var(--champ); font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase; } .stack__buy .cta__note{margin-top:14px} /* ============================================================ 03 · HOW IT WORKS ============================================================ */ .steps{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(74px,8vw,124px)} .step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:900px} /* sequence is carried by a short connector that sits entirely inside the gap between steps — it never crosses a headline or an image */ .step + .step::before{ content:"";position:absolute;left:50%;transform:translateX(-50%); top:calc(clamp(74px,8vw,124px) * -1 + 14px); width:1px;height:calc(clamp(74px,8vw,124px) - 30px); background:linear-gradient(180deg,transparent,rgba(216,195,165,.42) 40%,rgba(216,195,165,.42) 60%,transparent); } .step + .step::after{ content:"";position:absolute;left:50%;top:-16px; width:5px;height:5px;margin-left:-2.5px;border-radius:50%; background:var(--champ);opacity:.55; } /* mobile keeps the connector — the gap is still taller than the stem, so it never reaches the heading above or below it */ @media (max-width:820px){ .step + .step::before{ top:calc(clamp(74px,8vw,124px) * -1 + 16px); height:calc(clamp(74px,8vw,124px) - 34px); } .step + .step::after{top:-14px} } .step__n{ display:grid;place-items:center;width:62px;height:62px;border-radius:50%; border:1px solid rgba(216,195,165,.42);color:var(--champ); background:linear-gradient(180deg,rgba(216,195,165,.18),rgba(7,17,14,.94)); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); font-family:var(--display);font-size:18px;font-weight:700; box-shadow:0 0 0 1px rgba(216,195,165,.12),0 14px 34px -16px rgba(0,0,0,.9); } .step__h{margin-top:26px;font-size:clamp(27px,3.4vw,42px);line-height:1.04} .step__p{margin:16px 0 0;font-size:clamp(16.5px,1.6vw,19px);color:var(--on-dark);max-width:48ch;text-wrap:balance} .fine{margin:22px 0 0;font-size:15px;line-height:1.55;color:var(--on-mute);max-width:48ch} .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px} .chips li{ display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px; border:1px solid rgba(216,195,165,.2);background:rgba(250,249,246,.05); font-size:15.5px;color:rgba(250,249,246,.92); } .chips .ic{width:16px;height:16px;color:var(--champ)} .step__v{width:100%;margin-top:clamp(30px,3.5vw,44px);display:flex;justify-content:center} .step__v--sm{max-width:640px;margin-inline:auto} .tilt{transition:transform .5s var(--e-out);transform-style:preserve-3d;will-change:transform} .frame{ margin:0;border-radius:var(--r);overflow:hidden; border:1px solid var(--line); box-shadow:0 50px 90px -50px rgba(0,0,0,1),0 1px 0 rgba(255,255,255,.08) inset; } /* scorecard — glass, same material as the rest of the page */ .score{ position:relative;overflow:hidden; width:100%;max-width:560px;padding:28px;border-radius:var(--r);text-align:left; color:var(--warm); border:1px solid var(--line); background:linear-gradient(180deg,rgba(250,249,246,.10),rgba(250,249,246,.028)); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 44px 88px -48px rgba(0,0,0,1); } /* lit top edge */ .score::before{ content:"";position:absolute;top:0;left:12%;right:12%;height:1px; background:linear-gradient(90deg,transparent,rgba(240,226,203,.6),transparent); } .score__top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line-2)} .score__top b{font-family:var(--display);font-size:18px;letter-spacing:-.03em;color:var(--warm)} .score__top span{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--champ)} .score ul li{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:10px 12px;padding:15px 0;border-bottom:1px solid rgba(250,249,246,.08)} .score ul li:last-child{border-bottom:0} .score .ic{width:18px;height:18px;color:var(--champ)} .score span{font-weight:600;font-size:15.5px;letter-spacing:-.015em;color:var(--warm)} .score em{font-style:normal;font-size:14px;color:var(--on-mute)} .bar{grid-column:1/-1;display:block;height:6px;border-radius:99px;background:rgba(250,249,246,.10);overflow:hidden} .bar u{ display:block;height:100%;width:0;border-radius:99px;text-decoration:none; background:linear-gradient(90deg,var(--champ),var(--champ-2)); box-shadow:0 0 12px -2px rgba(216,195,165,.65); transition:width 1.2s var(--e-out); } .in .bar u{width:var(--f)} .score li:nth-child(2) .bar u{transition-delay:.1s} .score li:nth-child(3) .bar u{transition-delay:.2s} .score li:nth-child(4) .bar u{transition-delay:.3s} .score li:nth-child(5) .bar u{transition-delay:.4s} .pstack{position:relative;width:100%;max-width:760px;padding-bottom:46px} .pstack figure{margin:0} .pstack__main img{border-radius:var(--r);box-shadow:0 50px 90px -50px rgba(0,0,0,1)} .pstack__ph{ position:absolute;bottom:0;width:21%;min-width:104px; border:5px solid #0A0A0A;border-radius:18px;overflow:hidden;background:#0A0A0A; box-shadow:0 30px 50px -24px rgba(0,0,0,.95); } .pstack__ph img{border-radius:12px} .pstack__ph--a{left:5%;transform:rotate(-5deg)} .pstack__ph--b{left:26%;transform:rotate(3.5deg)} /* Device render on transparency. box-shadow would trace the image's rectangle through the empty corners, so the depth comes from stacked drop-shadow()s, which follow the alpha silhouette instead. The warm halo behind lifts the dark devices off the dark band. */ .devicemock{position:relative;isolation:isolate;width:100%} .devicemock::before{ content:'';position:absolute;inset:4% 0 12%;z-index:0;pointer-events:none; background:radial-gradient(58% 56% at 50% 46%, rgba(216,195,165,.32) 0, rgba(216,195,165,.12) 46%, rgba(216,195,165,0) 72%); filter:blur(40px); } .devicemock picture{display:block;position:relative;z-index:1} .devicemock img{ display:block;width:100%;height:auto; filter: drop-shadow(0 14px 22px rgba(0,0,0,.50)) drop-shadow(0 38px 64px rgba(0,0,0,.42)) drop-shadow(0 0 24px rgba(216,195,165,.20)); } @media (max-width:640px){ .devicemock img{filter: drop-shadow(0 10px 16px rgba(0,0,0,.50)) drop-shadow(0 24px 40px rgba(0,0,0,.40)) drop-shadow(0 0 18px rgba(216,195,165,.20));} } .formmock{width:100%;border-radius:var(--r);overflow:hidden;box-shadow:0 50px 90px -50px rgba(0,0,0,1);background:#F7F5EF} .formmock__bar{ display:flex;align-items:center;gap:10px;padding:15px 20px; background:linear-gradient(180deg,#16302A,#0B1C17);color:var(--warm); font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; } .formmock__bar .ic{width:16px;height:16px;color:var(--champ)} .formmock__c{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--champ)} .formmock img{padding:18px;background:#EDEBF7} .night__cap{ margin:clamp(30px,3.5vw,44px) auto clamp(20px,2.4vw,30px);max-width:24ch; font-family:var(--display);font-weight:700;letter-spacing:-.03em; font-size:clamp(21px,2.8vw,32px);line-height:1.18;color:var(--champ);text-wrap:balance; } .night{ position:relative;margin:0;width:100%; border-radius:var(--r-l);overflow:hidden; border:1px solid var(--line); box-shadow:0 50px 90px -50px rgba(0,0,0,1); } .night img{width:100%;aspect-ratio:16/9;object-fit:cover} @media (max-width:720px){.night img{aspect-ratio:1/1}} /* ============================================================ 04 · RULES ============================================================ */ .rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .rule{ position:relative;overflow:hidden;text-align:center; padding:44px 28px 34px;border-radius:var(--r-l); background:linear-gradient(180deg,rgba(23,63,53,.55),rgba(7,17,14,.72)); border:1px solid var(--line); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); box-shadow:0 30px 60px -40px rgba(0,0,0,.95); transition:transform .35s var(--e),box-shadow .35s var(--e),border-color .35s var(--e); } .rule:hover{transform:translateY(-7px);border-color:var(--line-2);box-shadow:0 44px 80px -40px rgba(0,0,0,1)} .rule__n{ position:absolute;top:-26px;left:50%;transform:translateX(-50%); font-family:var(--display);font-size:132px;font-weight:900;letter-spacing:-.07em;line-height:1; color:rgba(216,195,165,.09);pointer-events:none; } .rule__k{ position:relative;display:inline-block;margin:0 0 16px;padding:6px 14px;border-radius:999px; background:rgba(216,195,165,.14);color:var(--champ); font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; } .rule h3{position:relative;font-size:21px;line-height:1.2;margin-bottom:14px} .rule p{position:relative;margin:0;font-size:16.5px;line-height:1.6;color:var(--on-dark)} .callout{ display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;text-align:center; max-width:900px;margin:26px auto 0;padding:28px clamp(24px,3vw,40px);border-radius:var(--r-l); background:linear-gradient(180deg,var(--champ),#CFB894); box-shadow:0 30px 70px -44px rgba(216,195,165,.6); } .callout__k{ flex:none;padding:7px 16px;border-radius:999px;background:var(--forest);color:var(--champ); font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; } .callout p{margin:0;font-size:clamp(17px,1.8vw,20.5px);line-height:1.45;font-weight:500;color:#12241E;max-width:56ch} .callout p b{font-weight:800} /* ============================================================ 05 · VS ============================================================ */ .vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1000px;margin-inline:auto} .vs__col{padding:36px clamp(22px,2.6vw,34px) 34px;border-radius:var(--r-l);text-align:center} .vs__col--a{border:1px dashed rgba(250,249,246,.18);background:rgba(250,249,246,.028)} .vs__col--b{ border:1px solid var(--line-2); background:linear-gradient(180deg,rgba(30,83,70,.72),rgba(9,24,20,.86)); box-shadow:0 40px 80px -50px rgba(0,0,0,1),0 0 0 1px rgba(216,195,165,.06) inset; } .vs__h{ margin:0 0 24px;padding-bottom:18px;border-bottom:1px solid rgba(250,249,246,.12); font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; } .vs__col--a .vs__h{color:rgba(250,249,246,.5)} .vs__col--b .vs__h{color:var(--champ);border-bottom-color:rgba(216,195,165,.26)} .vs__col ul{display:grid;gap:14px} .vs__col li{display:flex;align-items:flex-start;gap:12px;text-align:left;font-size:clamp(15.5px,1.6vw,17.5px);line-height:1.38} .vs__col li .ic{width:19px;height:19px;margin-top:2px;stroke-width:2.4} .vs__col--a li{color:rgba(250,249,246,.62)} .vs__col--a li .ic{color:#C4584B} .vs__col--b li{color:var(--warm);font-weight:600} .vs__col--b li .ic{color:var(--champ)} /* ============================================================ 06 · PROOF ============================================================ */ .shotrail{overflow-x:auto;overflow-y:hidden;touch-action:pan-x;cursor:grab;scrollbar-width:none;-ms-overflow-style:none;margin-block:clamp(6px,1vw,14px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .shotrail::-webkit-scrollbar{display:none} .shotrail.is-grabbing{cursor:grabbing} .shotrail.is-grabbing figure{pointer-events:none} .shotrail__t{display:flex;width:max-content;gap:20px} .shotrail figure{ margin:0;flex:none;width:clamp(230px,26vw,340px);border-radius:22px;overflow:hidden; background:#0B0B0B;border:1px solid var(--line); box-shadow:0 30px 60px -40px rgba(0,0,0,.95); transition:transform .4s var(--e); } .shotrail figure:nth-child(even){transform:translateY(18px)} .shotrail figure:hover{transform:translateY(-6px) scale(1.02)} .quotes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:clamp(46px,5vw,72px)} .quote{ display:flex;flex-direction:column;justify-content:space-between;gap:20px;text-align:center;align-items:center; padding:32px 24px 26px;border-radius:var(--r-l); border:1px solid var(--line); background:linear-gradient(180deg,rgba(250,249,246,.075),rgba(250,249,246,.025)); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 30px 60px -44px rgba(0,0,0,.95); transition:transform .35s var(--e),box-shadow .35s var(--e),border-color .35s var(--e); } .quote:hover{transform:translateY(-6px);border-color:var(--line-2)} .quote__m{display:block;font-family:var(--serif);font-size:52px;line-height:.6;color:var(--champ);height:26px} .quote p{margin:0;font-size:17px;line-height:1.5;font-weight:500;letter-spacing:-.015em;color:var(--warm)} .quote__by{display:flex;align-items:center;gap:12px;padding-top:20px;border-top:1px solid var(--line);width:100%;justify-content:center} .quote__by img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none} .quote__by span{display:flex;flex-direction:column;line-height:1.3;text-align:left} .quote__by b{font-size:15px;letter-spacing:-.015em} .quote__by em{font-style:normal;font-size:13px;color:var(--on-mute)} /* ============================================================ 07 · ABOUT ============================================================ */ /* the whole bio sits in one glass panel so it carries the same weight as the card sections around it */ .bio{ position:relative; padding:clamp(30px,4.4vw,60px) clamp(24px,4vw,56px) clamp(34px,4vw,52px); border-radius:var(--r-l); border:1px solid var(--line); background:linear-gradient(180deg,rgba(250,249,246,.08),rgba(250,249,246,.025)); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 50px 100px -56px rgba(0,0,0,1); text-align:center; } /* stacked on mobile — flatten the columns so the reading order stays portrait → name → story → credentials */ @media (max-width:900px){ .bio{display:flex;flex-direction:column} .bio__col{display:contents} /* these need .bio in front — the base .bio__lead / .about rules sit later in the file and would otherwise win on equal specificity */ .bio .bio__pic{order:1;width:min(460px,100%);margin-inline:auto} .bio .bio__lead{order:2;margin-top:clamp(28px,5vw,38px)} .bio .about{order:3;margin-top:clamp(16px,3vw,22px)} .bio .creds{order:4} } /* two columns on desktop: portrait + credentials | name + story */ @media (min-width:901px){ .bio{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,4vw,56px);align-items:start;text-align:left} .bio__col--b{padding-top:6px} .bio .about{text-align:left} .bio .about p{margin-inline:0;text-wrap:pretty} .bio .creds{justify-content:flex-start;flex-direction:column;align-items:flex-start;border-top:0;padding-top:0} .bio .creds li{border-radius:16px;text-align:left} } .bio__pic{ position:relative;margin:0 auto;width:100%; border-radius:var(--r);overflow:hidden; border:1px solid rgba(216,195,165,.34); box-shadow:0 30px 70px -44px rgba(0,0,0,1),0 0 0 6px rgba(216,195,165,.05); } .bio__pic img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 38%} .bio__lead{ margin:0; font-family:var(--display);font-weight:800;letter-spacing:-.035em; font-size:clamp(28px,3.6vw,44px);line-height:1;color:var(--champ); } .about{margin-top:clamp(18px,2vw,24px);text-align:center} .about p{font-size:clamp(16.5px,1.6vw,19px);line-height:1.58;color:rgba(250,249,246,.82);max-width:52ch;margin-inline:auto;text-wrap:balance} .about__last{font-weight:700;color:var(--warm);margin-bottom:0 !important} .creds{ display:flex;flex-wrap:wrap;justify-content:center;gap:10px; margin-top:clamp(24px,2.6vw,32px);padding-top:clamp(24px,2.6vw,32px); border-top:1px solid var(--line); } .creds li{ display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px; border:1px solid var(--line);background:rgba(250,249,246,.05); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); font-size:15px;color:rgba(250,249,246,.9);font-weight:500; transition:border-color .3s var(--e),background .3s var(--e),transform .3s var(--e); } .creds li:hover{border-color:var(--line-2);background:rgba(250,249,246,.08);transform:translateY(-2px)} .creds .ic{width:17px;height:17px;color:var(--champ);opacity:.9} .creds__t{min-width:0} .creds__k{display:block;font-size:.88em;color:var(--on-mute);letter-spacing:.01em} .creds em{display:block;font-style:italic;font-family:inherit;font-size:inherit;line-height:1.35} /* ============================================================ 08 · FIT ============================================================ */ .fit{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:start;max-width:1040px;margin-inline:auto} .fit__c{padding:clamp(30px,3.4vw,44px);border-radius:var(--r-l);text-align:center} .fit__c--y{ background:linear-gradient(170deg,rgba(30,83,70,.8),rgba(10,26,21,.9)); border:1px solid var(--line-2); box-shadow:0 40px 80px -50px rgba(0,0,0,1); } .fit__c--n{background:rgba(250,249,246,.03);border:1px dashed rgba(250,249,246,.2)} .fit__h{ margin:0 0 24px;padding-bottom:18px; font-size:clamp(14.5px,1.5vw,16px);font-weight:700;letter-spacing:.1em;text-transform:uppercase; } .fit__c--y .fit__h{color:var(--champ);border-bottom:1px solid rgba(216,195,165,.24)} .fit__c--n .fit__h{color:var(--on-mute);border-bottom:1px solid rgba(250,249,246,.14)} .fit__c ul{display:grid;gap:14px} .fit__c li{display:flex;align-items:flex-start;gap:13px;text-align:left;font-size:clamp(15.5px,1.55vw,17px);line-height:1.4} .fit__c li .ic{width:19px;height:19px;margin-top:2px;stroke-width:2.4} .fit__c--y li{color:var(--warm)} .fit__c--y li .ic{color:var(--champ)} .fit__c--n li{color:rgba(250,249,246,.6)} .fit__c--n li .ic{color:#C4584B} .closer{ margin:clamp(48px,5.5vw,80px) auto 0;max-width:22ch;text-align:center; font-family:var(--display);font-weight:800;font-size:clamp(28px,4.4vw,52px);line-height:1.06; letter-spacing:-.035em;color:var(--champ);text-wrap:balance; } /* ============================================================ 09 · FAQ ============================================================ */ .faq{display:grid;gap:12px} .q{ border-radius:var(--r-s); border:1px solid var(--line); background:linear-gradient(180deg,rgba(250,249,246,.06),rgba(250,249,246,.02)); transition:border-color .3s var(--e),background .3s var(--e); } .q[open]{border-color:var(--line-2);background:linear-gradient(180deg,rgba(250,249,246,.085),rgba(250,249,246,.03))} .q summary{ display:flex;align-items:center;gap:18px;justify-content:space-between; padding:22px clamp(20px,2.4vw,28px);cursor:pointer;list-style:none; font-size:clamp(16.5px,1.7vw,19px);font-weight:600;letter-spacing:-.022em;line-height:1.35; color:var(--warm);transition:color .2s var(--e); } .q summary::-webkit-details-marker{display:none} .q summary:hover{color:var(--champ)} .q summary i{ position:relative;flex:none;width:30px;height:30px;border-radius:50%; border:1px solid var(--line-2); transition:background .3s var(--e),border-color .3s var(--e),transform .3s var(--e),color .3s var(--e); } .q summary i::before,.q summary i::after{ content:"";position:absolute;inset:50% 8px auto;height:1.6px;background:currentColor;transform:translateY(-50%); transition:transform .3s var(--e),opacity .3s var(--e); } .q summary i::after{transform:translateY(-50%) rotate(90deg)} .q[open] summary{color:var(--champ)} .q[open] summary i{background:var(--champ);border-color:var(--champ);color:#12241E;transform:rotate(180deg)} .q[open] summary i::after{opacity:0} .a{padding:0 clamp(20px,2.4vw,28px) 26px;max-width:72ch;animation:aIn .4s var(--e-out)} .a p{margin:0 0 .8em;color:var(--on-dark);font-size:17px;line-height:1.65} .a p:last-child{margin-bottom:0} @keyframes aIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .faq__rest{display:grid;gap:12px;margin-top:12px;animation:aIn .4s var(--e-out)} .faq__more{ display:flex;align-items:center;justify-content:center;gap:8px; margin:22px auto 0;padding:14px 18px;min-height:44px; border:0;background:none;cursor:pointer; font-family:var(--sans);font-size:14.5px;font-weight:500;letter-spacing:-.01em; color:var(--on-mute); transition:color .25s var(--e); } .faq__more:hover{color:var(--warm)} .faq__more .ic{width:15px;height:15px;stroke-width:2;transition:transform .3s var(--e)} .faq__more[aria-expanded="true"] .ic{transform:rotate(180deg)} .faq__more span{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(216,195,165,.4)} /* ============================================================ 10 · FINAL ============================================================ */ .sec--final{overflow:hidden} .final{display:flex;flex-direction:column;align-items:center;text-align:center} .daygrid{display:grid;grid-template-columns:repeat(30,1fr);gap:5px;width:min(540px,100%);margin-bottom:clamp(32px,4vw,48px)} .daygrid span{aspect-ratio:1;border:1px solid rgba(216,195,165,.28);border-radius:3px;transition:background .45s var(--e),border-color .45s var(--e),box-shadow .45s var(--e)} .daygrid span.on{background:var(--champ);border-color:var(--champ);box-shadow:0 0 12px rgba(216,195,165,.45)} .final__h{font-size:clamp(32px,5vw,62px);line-height:1.02;margin-bottom:26px;max-width:18ch;text-wrap:balance} .final__p{max-width:60ch} .final__p p{font-size:clamp(16.5px,1.7vw,19px);line-height:1.6;color:var(--on-dark)} .final__or{color:var(--champ) !important;font-weight:700} .finalbox{ position:relative; margin-top:clamp(34px,4vw,52px);width:min(520px,100%); padding:clamp(30px,3.6vw,44px) clamp(24px,3vw,38px); border-radius:var(--r-l); border:1px solid var(--line-2); background:linear-gradient(180deg,rgba(250,249,246,.09),rgba(250,249,246,.03)); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); box-shadow:0 40px 90px -50px rgba(0,0,0,1),0 1px 0 rgba(255,255,255,.1) inset; display:flex;flex-direction:column;align-items:center; } .finalbox__k{margin:0;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--champ)} .finalbox__p{margin:8px 0 26px;font-family:var(--display);font-size:clamp(40px,5vw,58px);font-weight:800;letter-spacing:-.045em;line-height:1} .finalbox__p span{font-size:.36em;font-weight:600;letter-spacing:-.01em;color:var(--on-mute)} .finalbox .cta__note{margin-top:16px} /* ============================================================ CHECKOUT OVERLAY ============================================================ */ .co{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(12px,3vw,40px)} .co[hidden]{display:none} .co__scrim{ position:absolute;inset:0;background:rgba(4,10,8,.78); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); animation:coFade .3s var(--e-out); } .co__panel{ position:relative;width:min(1040px,100%);max-height:calc(100dvh - clamp(16px,3vw,48px)); overflow:hidden; border-radius:var(--r-l); border:1px solid var(--line-2); background:linear-gradient(170deg,#123028,#0A1A15 62%); box-shadow:0 60px 120px -50px rgba(0,0,0,1),0 1px 0 rgba(255,255,255,.08) inset; animation:coRise .42s var(--e-out); } @keyframes coFade{from{opacity:0}to{opacity:1}} @keyframes coRise{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.co__scrim,.co__panel{animation:none}} .co__x{ position:absolute;top:14px;right:14px;z-index:3; display:grid;place-items:center;width:38px;height:38px;border-radius:50%; border:1px solid var(--line);background:rgba(250,249,246,.07);color:var(--warm); cursor:pointer;transition:background .25s var(--e),border-color .25s var(--e),transform .25s var(--e); } .co__x:hover{background:rgba(250,249,246,.14);border-color:var(--line-2);transform:rotate(90deg)} .co__x .ic{width:17px;height:17px;stroke-width:2.2} /* the panel itself never scrolls, so the close button stays pinned */ .co__scroll{max-height:inherit;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .co__grid{display:grid;grid-template-columns:1fr 1.02fr;gap:0;align-items:stretch} /* left: the offer */ .co__side{ padding:clamp(28px,3.4vw,46px); border-right:1px solid var(--line); display:flex;flex-direction:column;text-align:center; } .co__eyebrow{ margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.22em; text-transform:uppercase;color:var(--champ); } .co__title{font-size:clamp(33px,3.6vw,45px);line-height:1.08;margin-bottom:18px} .co__title em{font-style:italic} .co__title .co__hl{font-style:italic;color:var(--champ)} .co__lede{margin:0 0 14px;font-size:16.5px;line-height:1.6;color:var(--on-dark)} .co__lede--strong{color:var(--warm);font-weight:600} /* Exit-intent variant only. The offer panel is centred when someone opts in deliberately; when we catch them leaving it reverts to the original left-aligned argument, which reads as prose rather than as a summary. */ .co--exit .co__side{text-align:left} .co--exit .co__list--icons, .co--exit .co__trust{justify-content:start;justify-items:start} .co__mockup{ margin:clamp(6px,1.2vw,12px) -4px 2px; } .co__mockup img{ width:100%;height:auto; filter: drop-shadow(0 18px 17px rgba(1,9,7,.30)) drop-shadow(0 4px 7px rgba(1,9,7,.16)); } .co__list{ display:grid;gap:11px;margin:clamp(18px,2vw,24px) 0 0; padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--line); } .co__list li{ position:relative;padding-left:22px;font-size:15.5px;line-height:1.5;color:rgba(250,249,246,.9); } .co__list li::before{ content:"";position:absolute;left:0;top:.66em;width:12px;height:1px;background:var(--champ);opacity:.8; } /* Emoji stand in for the champagne dash — drawing both would double the marker. */ .co__list--icons{justify-content:center} .co__list--icons li{padding-left:30px;text-align:left} .co__list--icons li::before{content:none} .co__ico{position:absolute;left:0;top:0;width:22px;font-size:15px;line-height:1.5;font-style:normal} .co__total{ display:flex;align-items:baseline;justify-content:space-between;gap:16px; margin:clamp(20px,2.2vw,28px) 0 0;padding-top:clamp(18px,2vw,24px); border-top:1px solid var(--line); } .co__total span{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-mute)} .co__total b{font-family:var(--display);font-size:clamp(30px,3.2vw,38px);font-weight:800;letter-spacing:-.04em} .co__promo{ align-self:flex-end;display:inline-flex;margin:8px 0 0;padding:6px 11px; border:1px solid rgba(240,226,203,.30);border-radius:999px; background:linear-gradient(180deg,rgba(240,226,203,.16),rgba(216,195,165,.09)); box-shadow:0 1px 0 rgba(255,255,255,.10) inset; color:var(--champ-2);font-size:11.5px;font-weight:700;line-height:1.3; letter-spacing:.015em; } /* sits directly under the total — `margin-top:auto` used to shove it to the bottom of the column, leaving a dead gap */ .co__trust{display:grid;justify-content:center;gap:9px;margin:clamp(18px,2vw,24px) 0 0} .co__trust li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--on-mute)} .co__trust .ic{width:15px;height:15px;flex:none;color:var(--champ);stroke-width:1.9} /* right: the Stripe form */ /* Nothing here may constrain height: Stripe measures its own content and pins the iframe to that. .co__scroll is the only scroll container, so this column is free to grow past the panel and centring is a no-op whenever the form is taller than the minimum. */ .co__pay{padding:clamp(22px,2.6vw,34px);min-height:440px;display:flex;flex-direction:column;justify-content:center} #stripe-mount{width:100%} #stripe-mount:not(:empty){min-height:440px} .co__loading{ display:flex;align-items:center;justify-content:center;gap:12px; padding:60px 0;font-size:14px;color:var(--on-mute); } .co__spin{ width:18px;height:18px;border-radius:50%;flex:none; border:2px solid rgba(216,195,165,.25);border-top-color:var(--champ); animation:coSpin .8s linear infinite; } @keyframes coSpin{to{transform:rotate(360deg)}} .co__msg{ padding:clamp(24px,3vw,36px);border-radius:var(--r);text-align:center; border:1px solid var(--line);background:rgba(250,249,246,.05); } .co__msg h3{font-size:22px;margin-bottom:12px} .co__msg p{margin:0 0 .7em;font-size:15px;line-height:1.55;color:var(--on-dark)} .co__msg p:last-child{margin-bottom:0} .co__msg--err h3{color:var(--champ)} body.co-open{overflow:hidden} @media (max-width:860px){ .co{padding:0;place-items:stretch} .co__panel{width:100%;max-height:100dvh;border-radius:0;border:0} .co__grid{grid-template-columns:1fr} .co__side{border-right:0;border-bottom:1px solid var(--line);padding-top:clamp(48px,9vw,64px)} .co__trust{margin-top:clamp(20px,4vw,28px)} .co__pay{min-height:0;padding-bottom:clamp(32px,8vw,56px)} } /* ============================================================ ENROLMENT TOAST ============================================================ */ .toast{ position:fixed;left:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:110; display:flex;align-items:flex-start;gap:12px; width:min(324px,calc(100vw - 28px)); padding:14px 14px 13px; border-radius:18px; border:1px solid var(--line-2); background:linear-gradient(165deg,rgba(21,52,44,.94),rgba(8,20,16,.96)); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); box-shadow:0 30px 70px -34px rgba(0,0,0,1),0 1px 0 rgba(255,255,255,.08) inset; opacity:0;transform:translateX(-18px) scale(.97);pointer-events:none; transition:opacity .5s var(--e-out),transform .5s var(--e-out); } .toast.on{opacity:1;transform:none;pointer-events:auto} @media (prefers-reduced-motion:reduce){ .toast{transform:none;transition:opacity .2s linear} } .toast__av{ position:relative;flex:none;display:grid;place-items:center; width:40px;height:40px;border-radius:50%; background:linear-gradient(160deg,var(--champ-2),var(--champ) 60%,#C0A87F); color:#12241E; box-shadow:0 8px 22px -10px rgba(216,195,165,.8),0 1px 0 rgba(255,255,255,.5) inset; } .toast__av .ic{width:19px;height:19px;stroke-width:2.6} .toast__dot{ position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%; background:#4ADE80;border:2px solid #0B1C17; } .toast__body{flex:1;min-width:0} .toast__who{margin:0;font-size:14px;line-height:1.3;color:var(--warm);letter-spacing:-.015em} .toast__who b{font-weight:700} .toast__who span{font-weight:400;color:rgba(250,249,246,.86)} .toast__act{margin:2px 0 0;font-size:13px;line-height:1.3;color:var(--on-dark)} .toast__meta{ display:flex;align-items:center;gap:5px;margin:6px 0 0; font-size:11.5px;color:var(--on-mute); } .toast__meta .ic{width:13px;height:13px;flex:none;color:#4ADE80;stroke-width:2} .toast__ctrl{display:flex;align-items:center;gap:2px;flex:none;margin:-3px -3px 0 0} .toast__btn{ display:grid;place-items:center;width:25px;height:25px;border-radius:50%; border:0;background:transparent;color:var(--on-mute);cursor:pointer; transition:color .2s var(--e),background .2s var(--e); } .toast__btn:hover{color:var(--warm);background:rgba(250,249,246,.08)} .toast__btn .ic{width:14px;height:14px} /* Mobile: a small nudge in the corner, not a bar across the screen. */ @media (max-width:860px){ .toast{ bottom:calc(12px + env(safe-area-inset-bottom)); left:12px;right:auto; width:min(286px,calc(100vw - 24px)); gap:10px;padding:10px 11px;border-radius:15px; } .toast__av{width:32px;height:32px} .toast__av .ic{width:16px;height:16px} .toast__dot{width:9px;height:9px;border-width:1.5px} .toast__who{font-size:12.5px} .toast__act{font-size:11.5px;margin-top:1px} .toast__meta{font-size:10.5px;margin-top:4px;gap:4px} .toast__meta .ic{width:11px;height:11px} .toast__ctrl{margin:-2px -2px 0 0} .toast__btn{width:22px;height:22px} .toast__btn .ic{width:12px;height:12px} } /* ============================================================ FOOTER ============================================================ */ .foot{background:transparent;color:var(--on-mute);padding:38px 0 44px} .foot__in{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;text-align:center} .foot p{margin:0;font-size:14.5px;line-height:1.5} /* ============================================================ PAPER SECTIONS — warm-white chapter breaks Two full-bleed resets in the dark-green rhythm. The band fades in and out at its own edges so the change of chapter reads as an editorial dissolve rather than a hard switch. ============================================================ */ .surface--paper{ --fade:clamp(40px,3.4vw,60px); color:var(--paper-ink); /* Short, front-loaded dissolve. The extra stop pushes most of the opacity into the first third of the distance, so the milky mid-tone never gets enough height to read as a grey band. */ background:linear-gradient(180deg, rgba(250,249,246,0) 0, rgba(250,249,246,.88) calc(var(--fade) * .55), var(--paper) var(--fade), var(--paper) calc(100% - var(--fade)), rgba(250,249,246,.88) calc(100% - var(--fade) * .55), rgba(250,249,246,0) 100%); } /* the fade already supplies visual breathing room, so the band itself does not need the full section padding on top of it */ .surface--paper.sec{padding-block:clamp(60px,6.4vw,96px)} .surface--paper::before,.surface--paper::after{display:none} .surface--paper .aurora,.surface--paper .beams,.surface--paper .noise{display:none} /* accent word: champagne is invisible on warm white, so it deepens to bronze */ .surface--paper .grad{ background:linear-gradient(100deg,#8F7134 6%,#B8975A 60%,#96793C 96%); -webkit-background-clip:text;background-clip:text;color:transparent; } .surface--paper .h2{color:var(--forest)} .surface--paper .sub{color:var(--paper-ink-2)} .surface--paper .spot::after{ background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(23,63,53,.07),transparent 62%); } /* deliverable cards — clean paper, no glow */ .surface--paper .card{ background:#fff; border:1px solid rgba(23,63,53,.14); -webkit-backdrop-filter:none;backdrop-filter:none; box-shadow:0 1px 2px rgba(23,63,53,.04),0 14px 34px -26px rgba(23,63,53,.30); } .surface--paper .card::before{ background:linear-gradient(90deg,transparent,rgba(23,63,53,.18),transparent); } .surface--paper .card:hover{ border-color:rgba(23,63,53,.26); box-shadow:0 1px 2px rgba(23,63,53,.05),0 26px 48px -28px rgba(23,63,53,.38); } .surface--paper .card__ring{ border-color:rgba(23,63,53,.16);color:var(--champ); background:linear-gradient(160deg,var(--forest),#0F2A23); box-shadow:0 8px 18px -10px rgba(23,63,53,.45); } .surface--paper .card:hover .card__ring{box-shadow:0 12px 26px -10px rgba(23,63,53,.55)} .surface--paper .card h3{color:var(--forest)} .surface--paper .card p{color:var(--paper-ink-2)} /* offer card — light shell, dark price block kept for contrast */ .surface--paper .stack{ background:#fff; border:1px solid rgba(23,63,53,.14); -webkit-backdrop-filter:none;backdrop-filter:none; box-shadow:0 1px 2px rgba(23,63,53,.04),0 26px 60px -38px rgba(23,63,53,.35); } .surface--paper .stack__h{color:var(--forest)} .surface--paper .stack__p{color:var(--paper-ink-2)} .stack__buy{color:var(--warm)} .surface--paper .stack__mockup img{border-color:rgba(23,63,53,.12)} /* FAQ rows */ .surface--paper .q{ background:#fff; border:1px solid rgba(23,63,53,.13); box-shadow:0 1px 2px rgba(23,63,53,.03); } .surface--paper .q[open]{border-color:rgba(23,63,53,.24);background:#fff;box-shadow:0 12px 30px -24px rgba(23,63,53,.4)} .surface--paper .q summary{color:var(--forest)} .surface--paper .q summary:hover{color:#0F2A23} .surface--paper .q summary i{border-color:rgba(23,63,53,.22)} .surface--paper .q[open] summary i{background:var(--forest);border-color:var(--forest);color:var(--champ)} .surface--paper .a p{color:var(--paper-ink-2)} .surface--paper .faq__more{color:var(--paper-ink-2)} .surface--paper .faq__more:hover{color:var(--forest)} .surface--paper .faq__more span{text-decoration-color:rgba(23,63,53,.35)} .surface--paper :focus-visible{outline-color:var(--forest)} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1100px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} .quotes{grid-template-columns:repeat(2,minmax(0,1fr))} } /* habits: 5 across → 3 + 2 → 2 + 2 + 1, always centred */ @media (max-width:920px){ .habit{flex-basis:calc((100% - 2 * 14px) / 3)} } @media (max-width:900px){ .rules{grid-template-columns:1fr;max-width:560px;margin-inline:auto} .rule__n{font-size:110px} .fit{grid-template-columns:1fr;max-width:600px} .vs{grid-template-columns:1fr;max-width:600px} } @media (max-width:860px){ } @media (max-width:600px){ .habits{gap:10px} .habit{flex-basis:calc((100% - 10px) / 2);padding:22px 12px 18px} .habit b{font-size:15px} .habit em{font-size:12px} } @media (max-width:720px){ body{font-size:16.5px} .hero{padding-top:118px} .hero__h1{font-size:clamp(34px,9.4vw,46px);line-height:1.02} .hero__sub{font-size:17.5px} .hmeta__k{font-size:14px;letter-spacing:.13em} .hmeta__date{font-size:17px} .hmeta .ic{width:19px;height:19px} .hdr__in{padding-inline:18px} .hdr .btn--sm{padding:10px 16px;font-size:13.5px} .mark__txt{font-size:18px} .mark__badge{width:32px;height:32px} .h2{font-size:clamp(27px,7.6vw,36px)} .step__h{font-size:clamp(24px,7vw,32px)} .final__h{font-size:clamp(28px,8vw,38px)} .closer{font-size:clamp(26px,8.4vw,38px)} /* keep the block centred on mobile; ticks stay aligned in a column */ .checks{gap:12px} .checks li{font-size:15px} .pain{gap:14px;padding:18px 18px} .pain__x{width:26px;height:26px} .pain__x .ic{width:13px;height:13px} .card p{font-size:16.5px} .rule p{font-size:16px} .a p{font-size:16.5px} .quote p{font-size:16.5px} .about p{font-size:17px} .fine{font-size:14.5px} .cards{grid-template-columns:1fr;max-width:460px;margin-inline:auto} .quotes{grid-template-columns:1fr;max-width:460px;margin-inline:auto} .callout{flex-direction:column;gap:14px} .stack ul li{font-size:15.5px;gap:12px} .stack__inv b{font-size:21px !important} .btn--lg,.btn--xl{width:100%} .cta{width:100%} .daygrid{grid-template-columns:repeat(15,1fr);gap:4px;width:min(300px,100%)} .pstack__ph{width:27%} .pstack__ph--b{left:33%} .foot__in{flex-direction:column;gap:12px} }