/* CardioClear7USA design layer v4 (2026-10-21): warm sun theme, capsule hero card, energetic motion. Loaded after v2.css; replaces v3. */
:root{
 --bg:#fffaf0;--surface:#ffffff;--surface-alt:#fff6e2;--ink:#1d2433;--ink-soft:#4a5266;
 --brand:#22408a;--forest:#1b2f5c;--navy:#1b2f5c;--brand-soft:#fff0cc;--sage:#ffe2a0;--gold:#d99a1e;
 --amber-1:#e8861a;--amber-2:#f6ad3c;--accent:#e8861a;--sun:#ffd66b;--line:#f1e2bf;
 --shadow:0 1px 2px rgba(27,47,92,.05),0 10px 28px -14px rgba(27,47,92,.22);--shadow-lg:0 2px 4px rgba(27,47,92,.06),0 30px 60px -26px rgba(27,47,92,.38);
 --ease:cubic-bezier(.2,.7,.2,1);--ease-io:cubic-bezier(.65,0,.35,1);--spring:cubic-bezier(.34,1.56,.64,1)
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink)}
h1,h2{color:var(--navy)}
h3{color:var(--navy)}
a{color:var(--brand)}
::selection{background:var(--sun);color:var(--navy)}
/* progress */
.v3-progress{position:fixed;top:0;left:0;height:4px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#1b2f5c,#e8861a 60%,#ffd66b);z-index:9999;pointer-events:none}
/* top bars */
.disclosure{background:var(--navy);color:#e6ebf6}
.disclosure a{color:var(--sun)}
.site-header{background:rgba(255,250,240,.9);border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease)}
.v3-scrolled .site-header{box-shadow:0 12px 30px -20px rgba(27,47,92,.5)}
.logo{color:var(--navy)}
.logo-mark{background:linear-gradient(145deg,#2a4a94,#1b2f5c)!important;position:relative;overflow:hidden}
.logo-mark::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:linear-gradient(90deg,var(--amber-2),var(--sun))}
.nav a[aria-current="page"]{background:var(--brand-soft);color:var(--navy)}
.nav a{transition:background .2s,color .2s}
.nav a:hover{background:#fff3d6;color:var(--navy)}
/* buttons */
.btn,.hdr-cta{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#ffc14d 0%,#f39a1f 100%)!important;color:var(--navy)!important}
.btn::after,.hdr-cta::after{content:"";position:absolute;z-index:-1;top:-20%;bottom:-20%;left:-60%;width:40%;transform:skewX(-20deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));animation:v4shine 4.5s var(--ease) infinite 1.5s}
@keyframes v4shine{0%{left:-60%}25%,100%{left:130%}}
.btn{transition:transform .25s var(--spring),box-shadow .25s var(--ease)}
.btn:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -3px 0 rgba(120,55,0,.2) inset,0 22px 34px -14px rgba(232,134,26,.9)}
.hero .btn{animation:v4nudge 3.4s var(--ease-io) infinite 1s}
@keyframes v4nudge{0%,84%,100%{transform:none}88%{transform:translateY(-4px) scale(1.02)}92%{transform:translateY(0)}96%{transform:translateY(-2px)}}
.btn-outline{border-color:var(--navy);color:var(--navy)}
/* ===== HERO ===== */
.hero{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(900px 520px at 80% 30%,#ffefc2 0%,rgba(255,239,194,0) 65%),linear-gradient(180deg,#fff8e8 0%,var(--bg) 100%)}
.hero::before{content:"";position:absolute;z-index:-1;width:1700px;height:1700px;right:-640px;top:-700px;border-radius:50%;
 background:repeating-conic-gradient(from 0deg,rgba(246,173,60,.22) 0deg 4deg,rgba(246,173,60,0) 4deg 12deg);
 -webkit-mask:radial-gradient(circle,#000 0 22%,transparent 62%);mask:radial-gradient(circle,#000 0 22%,transparent 62%);animation:v4spin 120s linear infinite}
.hero::after{content:"";position:absolute;z-index:-1;width:560px;height:560px;right:2%;top:4%;border-radius:50%;background:radial-gradient(circle,rgba(255,214,107,.55),rgba(255,214,107,0) 70%);filter:blur(12px);animation:v4breathe 5s var(--ease-io) infinite alternate}
@keyframes v4spin{to{transform:rotate(360deg)}}
@keyframes v4breathe{from{transform:scale(.9);opacity:.7}to{transform:scale(1.08);opacity:1}}
.hero .eyebrow{position:relative;padding-left:24px;background:#fff;border:1px solid var(--line);color:var(--navy)}
.hero .eyebrow::before{content:"";position:absolute;left:10px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--amber-1);animation:v4ping 2s var(--ease) infinite}
@keyframes v4ping{0%{box-shadow:0 0 0 0 rgba(232,134,26,.6)}80%,100%{box-shadow:0 0 0 12px rgba(232,134,26,0)}}
.hero h1{color:var(--navy);font-size:clamp(2.3rem,4.8vw,3.6rem)}
.hero h1 .v4-hl{font-style:italic;background:linear-gradient(90deg,#e8861a,#f6ad3c,#e8861a);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:v4grad 6s linear infinite}
@keyframes v4grad{to{background-position:200% 0}}
.hero-grid{align-items:start!important;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr)!important;grid-template-areas:"text fig" "card fig"!important;column-gap:clamp(28px,4vw,56px)!important}
.hero-grid>.v4-cap{grid-area:fig}
.hero-grid>.quickcard{grid-area:card;margin-top:26px}
.hero .eyebrow{letter-spacing:.02em}
.v4-row b{white-space:nowrap}
.hero .v4-cap{margin-top:6px}
/* capsule card */
.v4-cap{position:relative;background:#fff;border:2px solid #f6dc9b;border-radius:30px;padding:22px 22px 18px;box-shadow:0 40px 80px -40px rgba(27,47,92,.45),0 0 0 8px rgba(255,214,107,.18);animation:v4in .9s var(--spring) both}
@keyframes v4in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.v4-cap-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.v4-cap-head b{font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);font-weight:800}
.v4-dot{width:10px;height:10px;border-radius:50%;background:var(--amber-1);animation:v4ping 2s var(--ease) infinite}
.v4-pill{margin-left:auto;background:#f2f3f7;color:#55607a;font-weight:700;font-size:.8rem;padding:5px 12px;border-radius:99px}
.v4-stage{position:relative}
.v4-stage svg{display:block;width:100%;height:auto;overflow:visible}
.v4-bottle{position:absolute;left:0;bottom:-2%;width:18%;height:auto;filter:drop-shadow(0 18px 18px rgba(27,47,92,.25));animation:v4float 4.6s var(--ease-io) infinite alternate}
@keyframes v4float{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-12px) rotate(2deg)}}
.v4-membrane{animation:v4dash 12s linear infinite}
.v4-orbit{transform-origin:444px 215px;animation:v4spin 14s linear infinite}
.v4-halo{transform-origin:444px 215px;animation:v4pulse 2.4s var(--ease-io) infinite}
@keyframes v4pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.08)}}
.v4-mito{transform-box:fill-box;transform-origin:center;animation:v4beat 2.4s var(--ease-io) infinite}
@keyframes v4beat{0%,100%{transform:rotate(-16deg) scale(1)}12%{transform:rotate(-16deg) scale(1.05)}24%{transform:rotate(-16deg) scale(.99)}36%{transform:rotate(-16deg) scale(1.03)}}
.v4-mito{transform:rotate(-16deg)}
.v4-cristae{stroke-dasharray:70;animation:v4draw 2.4s var(--ease-io) infinite}
@keyframes v4draw{0%{stroke-dashoffset:70}40%,100%{stroke-dashoffset:0}}
.v4-flow{fill:none;stroke-width:3.5;stroke-dasharray:3 10;stroke-linecap:round;animation:v4dash 1.2s linear infinite}
.v4-flow.fa{stroke:#ea8a1c}.v4-flow.fb{stroke:#2b2b2b}.v4-flow.fc{stroke:#3b6fd8}
@keyframes v4dash{to{stroke-dashoffset:-26}}
.v4-cap-l,.v4-cap-r{transform-box:fill-box;transform-origin:center}
.v4-cap-l{animation:v4capl 3.2s var(--ease-io) infinite}
.v4-cap-r{animation:v4capr 3.2s var(--ease-io) infinite}
@keyframes v4capl{0%,100%{transform:translate(0,0)}35%,75%{transform:translate(-14px,0) rotate(-10deg)}}
@keyframes v4capr{0%,100%{transform:translate(0,0)}35%,75%{transform:translate(14px,0) rotate(10deg)}}
.v4-sparks>*{opacity:0;transform-box:fill-box;transform-origin:center;animation:v4spark 2.4s var(--ease) infinite}
.v4-sparks .s2{animation-delay:.3s}.v4-sparks .s3{animation-delay:.6s}.v4-sparks .s4{animation-delay:.9s}.v4-sparks .s5{animation-delay:.15s}
@keyframes v4spark{0%{opacity:0;transform:translateY(8px) scale(.4)}30%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-26px) scale(.8)}}
.v4-labels .lab{transform-box:fill-box;transform-origin:center;animation:v4bob 3s var(--ease-io) infinite alternate}
.v4-labels .l2{animation-delay:.5s}.v4-labels .l3{animation-delay:1s}
@keyframes v4bob{from{transform:translateY(0)}to{transform:translateY(-5px)}}
.v4-cap-note{font-size:.95rem;color:#5b6378;margin:8px 4px 14px;line-height:1.55}
.v4-cap-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:12px}
.v4-holds{background:#fffaf0;border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.v4-kicker{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#a05a00;margin-bottom:6px}
.v4-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:6px;font-size:.95rem;color:var(--ink-soft)}
.v4-row b{font-family:var(--serif);font-size:1.25rem;color:var(--navy);font-variant-numeric:tabular-nums}
.v4-total{margin-top:10px;font-weight:700;color:var(--navy)}
.v4-bar{height:8px;border-radius:99px;background:#f3ead4;overflow:hidden;margin-top:4px}
.v4-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#f6ad3c,#e8861a);transition:width 1.4s var(--ease)}
.v4-bar i.dk{background:linear-gradient(90deg,#555,#222)}.v4-bar i.bl{background:linear-gradient(90deg,#6c97ec,#3b6fd8)}.v4-bar i.nv{background:linear-gradient(90deg,#2a4a94,#1b2f5c)}
.v4-cap.v3-in .v4-bar i,.v4-on .v4-bar i{width:var(--w)}
.v4-link{display:inline-block;margin-top:10px;font-weight:800;font-size:.92rem;color:var(--brand)}
.v4-tags{display:grid;gap:12px}
.v4-tag{border-radius:18px;padding:14px 16px;border:1px solid}
.v4-tag span{display:block;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.v4-tag b{display:block;font-size:1.05rem;line-height:1.35;margin-top:3px}
.v4-tag.t1{background:#fff6d9;border-color:#f6dc9b;color:#7a4b00}.v4-tag.t1 b{color:var(--navy)}
.v4-tag.t2{background:#fdeee7;border-color:#f6cdbb;color:#b2481d}.v4-tag.t2 b{color:#c4531f}
.v4-band{position:relative;margin-top:12px;background:linear-gradient(135deg,#1b2f5c,#22408a);border-radius:18px;min-height:86px;overflow:hidden}
.v4-band::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);background-size:250% 100%;animation:v4sheen 3.5s linear infinite}
@keyframes v4sheen{from{background-position:150% 0}to{background-position:-100% 0}}
.v4-fact{position:absolute;inset:0;padding:16px 20px;opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.v4-fact.on{opacity:1;transform:none}
.v4-fact span{display:block;color:var(--sun);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}
.v4-fact b{display:block;color:#fff;font-size:1.12rem;margin-top:4px}
.v4-steps{list-style:none;margin:12px 0 0;padding:6px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:#fbf5e6;border-radius:18px}
.v4-steps li{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 12px;border-radius:14px;transition:background .5s var(--ease),transform .5s var(--spring)}
.v4-steps i{grid-row:1/3;width:38px;height:38px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--navy);box-shadow:0 4px 10px -6px rgba(27,47,92,.5)}
.v4-steps i svg{width:20px;height:20px}
.v4-steps span{font-size:.8rem;font-weight:800;color:#a05a00;letter-spacing:.06em}
.v4-steps b{font-size:.98rem;color:var(--navy);line-height:1.2}
.v4-steps li.on{background:linear-gradient(180deg,#ffd166,#f6b43a);transform:translateY(-2px)}
.v4-steps li.on span{color:#7a4b00}
/* ===== Sections ===== */
main>section:not(.hero){position:relative}
main>section.alt,main>section.faq{background:linear-gradient(180deg,#fff6e2,#fffaf0)}
.tag,.eyebrow{letter-spacing:.14em}
section .tag{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);color:#a05a00;border-radius:99px;padding:6px 14px;font-weight:800;text-transform:uppercase;font-size:.78rem}
section .tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber-1);box-shadow:0 0 0 0 rgba(232,134,26,.5);animation:v4ping 2.4s var(--ease) infinite}
.card{border-radius:22px;border:1px solid var(--line);background:#fff;position:relative;overflow:hidden;transition:transform .35s var(--spring),box-shadow .35s var(--ease)}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#1b2f5c,#e8861a,#ffd66b);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(27,47,92,.5)}
.card:hover::before,.v3-in>.card::before{transform:scaleX(1)}
.how-step,.t-card,.who,.bonus,.ing{transition:transform .35s var(--spring),box-shadow .35s var(--ease)}
.how-step:hover,.t-card:hover,.ing:hover{transform:translateY(-5px);box-shadow:0 26px 50px -26px rgba(27,47,92,.45)}
.step-tag{background:var(--navy)!important;color:#fff!important}
.checklist li::before{color:var(--amber-1)!important}
/* split blocks: bigger image, no empty space */
.split{align-items:start!important;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;gap:clamp(24px,4vw,56px)!important}
.split.split-rev{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important}
.split>.figure{position:sticky;top:96px;margin:0;background:radial-gradient(circle at 50% 45%,#fff3d1 0%,#ffffff 70%);border:1px solid var(--line);border-radius:28px;padding:clamp(14px,2vw,26px);box-shadow:var(--shadow-lg)}
.split>.figure img{width:100%!important;max-width:560px;height:auto;display:block;margin:0 auto;border-radius:18px;animation:v4float2 6s var(--ease-io) infinite alternate}
@keyframes v4float2{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.split>.figure figcaption{text-align:center;margin-top:10px}
.mid-img img,.small-img img{transition:transform .5s var(--spring)}
.mid-img:hover img,.small-img:hover img{transform:scale(1.04) rotate(-1deg)}
/* tables */
table thead th{background:var(--navy)!important;color:#fff!important}
table tbody tr{transition:background .2s}
table tbody tr:hover{background:#fff6e2}
/* trust strip marquee */
.trust-strip{background:var(--navy)!important;color:#fff!important;overflow:hidden}
.trust-strip li,.trust-strip span{color:#fff!important}
.trust-strip svg{color:var(--sun)!important}
@media (max-width:900px){
 .trust-strip .wrap{padding:0}
 .trust-strip ul.v4-marq{display:flex!important;flex-wrap:nowrap!important;width:max-content;gap:34px;animation:v4marq 26s linear infinite;padding:12px 0}
 .trust-strip ul.v4-marq li{flex:0 0 auto;white-space:nowrap}
}
@keyframes v4marq{to{transform:translateX(-50%)}}
/* pricing */
.price{transition:transform .35s var(--spring),box-shadow .35s var(--ease)}
.price:hover{transform:translateY(-8px);box-shadow:0 36px 64px -30px rgba(27,47,92,.55)}
.ribbon{animation:v4glow 2.2s var(--ease-io) infinite alternate}
@keyframes v4glow{from{box-shadow:0 0 0 0 rgba(232,134,26,0)}to{box-shadow:0 0 0 7px rgba(232,134,26,.22)}}
/* faq */
details{border-radius:16px;transition:box-shadow .3s var(--ease),background .3s}
details[open]{background:#fff;box-shadow:0 20px 44px -28px rgba(27,47,92,.45)}
details[open]>*:not(summary){animation:v4fade .45s var(--ease) both}
@keyframes v4fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* footer */
.site-footer{background:#14244a!important;color:#cfd8ec!important}
.site-footer a{color:#fff!important}.site-footer h3{color:var(--sun)!important}
/* reveal */
.v3-js .v3-rv{opacity:0;transform:translateY(34px) scale(.985);transition:opacity .8s var(--ease),transform .9s var(--spring)}
.v3-js .v3-rv.v3-in{opacity:1;transform:none}
.v3-js .v3-stagger>*{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .7s var(--spring)}
.v3-js .v3-stagger.v3-in>*{opacity:1;transform:none}
.v3-js .v3-stagger.v3-in>*:nth-child(2){transition-delay:.09s}.v3-js .v3-stagger.v3-in>*:nth-child(3){transition-delay:.18s}.v3-js .v3-stagger.v3-in>*:nth-child(4){transition-delay:.27s}.v3-js .v3-stagger.v3-in>*:nth-child(5){transition-delay:.36s}.v3-js .v3-stagger.v3-in>*:nth-child(n+6){transition-delay:.42s}
.sticky-cta .btn{animation:none}
.refs{list-style:none;padding:0;margin:10px 0 26px;display:grid;gap:8px}
.refs li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px 10px 40px;position:relative;font-size:.96rem}
.refs li::before{content:"↗";position:absolute;left:14px;top:9px;color:var(--amber-1);font-weight:800}
.refs a{text-decoration:none;font-weight:700}
/* responsive */
@media (max-width:1100px){.v4-cap-grid{grid-template-columns:1fr}}
@media (max-width:900px){
 .hero-grid>.v4-cap{order:3;margin:18px 0 6px}
 .split,.split.split-rev{grid-template-columns:1fr!important}
 .split>.figure{position:relative;top:auto;order:-1}
 .split>.figure img{max-width:440px}
 .hero::before{right:-900px;top:-760px}
 .hero::after{width:340px;height:340px;right:-80px;top:auto;bottom:10%}
}
@media (max-width:560px){
 .v4-cap{padding:16px 14px 14px;border-radius:24px}
 .v4-cap-head b{font-size:.78rem}
 .v4-steps{grid-template-columns:1fr;}
 .v4-steps li{padding:9px 10px}
 .v4-fact b{font-size:1.02rem}
 .v4-bottle{width:19%}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.v3-js .v3-rv,.v3-js .v3-stagger>*{opacity:1!important;transform:none!important}.v4-bar i{width:var(--w)!important}}
/* ===== Mobile: larger, easier-to-read type (2026-10-21c) ===== */
@media (max-width:760px){
 body{font-size:21px;line-height:1.7}
 main p,main li,.lead,.answer p,.ans p,.card p,.how-step p,.who p,.bonus p,.t-card p,.callout p,.verdict p,.cta-box p{font-size:21px!important;line-height:1.72!important}
 .hero .lead{font-size:22px!important}
 .hero h1,h1{font-size:40px!important;line-height:1.14!important}
 main h2{font-size:31px!important;line-height:1.2!important}
 main h3{font-size:24px!important}
 table,td,th,.facts li,.quickcard li{font-size:19px!important}
 details summary{font-size:21px!important;line-height:1.45!important;padding-top:16px!important;padding-bottom:16px!important}
 .btn{font-size:20px!important;min-height:62px}
 .btn-note,figcaption,.byline,.updated,.crumbs,.rating-note,.v4-cap-note,.fda,.site-footer p{font-size:17px!important;line-height:1.6!important}
 .site-footer li a{font-size:20px}
 .nav a{font-size:19px!important}
 .disclosure{font-size:18px!important;line-height:1.5}
 .tag,section .tag,.eyebrow{font-size:17px!important}
 .trust-strip li,.trust-strip span{font-size:19px!important}
 .checklist li{font-size:21px!important}
 .refs li{font-size:19px}
 /* capsule card */
 .v4-cap-head b{font-size:17px!important}
 .v4-pill{font-size:17px}
 .v4-row{font-size:20px}
 .v4-row b{font-size:25px}
 .v4-kicker,.v4-tag span{font-size:16px!important}
 .v4-tag b{font-size:20px}
 .v4-fact span{font-size:17px}
 .v4-fact b{font-size:20px!important}
 .v4-band{min-height:112px}
 .v4-fact{padding:16px 18px}
 .v4-steps span{font-size:17px}
 .v4-steps b{font-size:20px}
 .v4-link{font-size:19px}
 .sticky-cta .btn{font-size:18px!important;padding:14px 10px!important;white-space:nowrap;letter-spacing:-.01em}
}