/* ============================================================
EVO Health + Performance — shared site stylesheet
------------------------------------------------------------
Rules used by more than one page live here, defined once.
Pages link it from the head:
(design preview)
(live)
============================================================ */
/* ---- Checklist gate (unlocks steps 4-10) --------------------
Locked by default; evo-checklist-gate.js toggles the
.evo-guides-unlocked / .evo-gate-submitted classes on .
The gated content stays in the page source (SEO) — hidden with
CSS only. */
/* Locked: the gated article shows as a blurred teaser running under the card,
fading to nothing well before the footer. Unreadable + un-copyable, but still
real content in the source (SEO). */
.evo-gate-content{display:block;position:relative;z-index:0;margin-top:-34px;max-height:560px;overflow:hidden;pointer-events:none;user-select:none;-webkit-user-select:none;filter:blur(3px);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.45) 40%,rgba(0,0,0,0) 96%);mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.45) 40%,rgba(0,0,0,0) 96%);}
html.evo-guides-unlocked .evo-gate-content{margin-top:0;max-height:none;overflow:visible;pointer-events:auto;user-select:auto;-webkit-user-select:auto;filter:none;-webkit-mask-image:none;mask-image:none;}
html.evo-guides-unlocked:not(.evo-gate-submitted) .evo-gate{display:none;}
/* Blur-only companion: full-bleed image bands between gated blocks. Blur the
image itself (scaled up, clipped by the section) so no soft transparent edge
creates a dark seam against neighboring sections, and dim it to match the
teaser's washed-out read. */
html:not(.evo-guides-unlocked) .evo-gate-blur{overflow:hidden;pointer-events:none;user-select:none;-webkit-user-select:none;}
html:not(.evo-guides-unlocked) .evo-gate-blur img,
html:not(.evo-guides-unlocked) .evo-gate-blur image-slot{filter:blur(14px);transform:scale(1.08);opacity:.45;}
/* Unlocked + just submitted: the success card sits in flow like a step card —
no overlap pull, no fade hiding the bottom of step 3. */
html.evo-guides-unlocked .evo-gate{margin-top:22px;margin-bottom:22px;box-shadow:0 1px 2px rgba(60,45,20,0.05);}
html.evo-guides-unlocked .evo-gate::before{display:none;}
.evo-gate{position:relative;z-index:1;background:#100F0B;border:1px solid rgba(255,255,255,.09);border-radius:14px;margin-top:-150px;padding:clamp(28px,4.5vw,46px) clamp(22px,4vw,42px);color:#F4EEE3;box-shadow:0 42px 80px -36px rgba(16,15,11,.65),0 18px 38px -24px rgba(16,15,11,.5);break-inside:avoid;}
/* Fade the article out underneath the floating card, so the gate reads as
sitting OVER the checklist rather than inside it. */
.evo-gate::before{content:'';position:absolute;left:-24px;right:-24px;bottom:calc(100% - 1px);height:240px;background:linear-gradient(180deg,rgba(235,230,219,0) 0%,rgba(235,230,219,.85) 55%,#EBE6DB 100%);pointer-events:none;}
.evo-gate-eyebrow{font-family:'Libre Franklin','Helvetica Neue',Arial,sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:#8AC4EC;margin:0 0 16px;}
.evo-gate-headline{margin:0 0 12px;font-family:Archivo,'Helvetica Neue',Arial,sans-serif;font-weight:900;font-size:clamp(27px,3.4vw,36px);line-height:.98;letter-spacing:-.02em;text-indent:-.055em;text-transform:uppercase;color:#F4EEE3;}
.evo-gate-sub{margin:0 0 24px;font-family:'Libre Franklin','Helvetica Neue',Arial,sans-serif;font-size:clamp(15.5px,1.3vw,16.5px);line-height:1.6;color:#C7C2B6;max-width:56ch;}
.evo-gate-form{display:flex;flex-wrap:wrap;gap:10px;}
.evo-gate-input{flex:1 1 210px;min-width:0;padding:15px 16px;border:1px solid #D9D3C8;border-radius:10px;background:#FFFFFF;color:#15140F;font-family:'Libre Franklin','Helvetica Neue',Arial,sans-serif;font-size:15px;line-height:1.2;}
.evo-gate-input::placeholder{color:#8A8780;}
.evo-gate-input:focus{outline:2px solid #4BA0E0;outline-offset:1px;}
.evo-gate-btn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#1E6FB3;color:#FFFFFF;border:0;border-radius:10px;cursor:pointer;font-family:'Libre Franklin','Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:16px 26px;white-space:nowrap;transition:background .15s ease;}
.evo-gate-btn:hover{background:#17598F;}
.evo-gate-btn:disabled{opacity:.6;cursor:default;}
/* Success state uses the gate's own type system (eyebrow / headline / sub)
instead of a plain notice box, so the card reads the same before and after. */
.evo-gate-success{display:none;margin:0;}
.evo-gate-success .evo-gate-sub{margin-bottom:0;}
html.evo-gate-submitted .evo-gate > .evo-gate-eyebrow,
html.evo-gate-submitted .evo-gate > .evo-gate-headline,
html.evo-gate-submitted .evo-gate > .evo-gate-sub,
html.evo-gate-submitted .evo-gate > .evo-gate-form,
html.evo-gate-submitted .evo-gate > .evo-gate-fineprint{display:none;}
html.evo-gate-submitted .evo-gate-success{display:block;}
.evo-gate-fineprint{margin:14px 0 0;font-family:'Libre Franklin','Helvetica Neue',Arial,sans-serif;font-size:12.5px;line-height:1.5;color:#8A877F;}
@media print{
.evo-gate{display:none !important;}
html:not(.evo-guides-unlocked) .evo-gate-content{display:none !important;}
}