/* Hormone Health Explained
Men's performance magazine, not a journal. Full bleed imagery, duotone
category colour, heavy display type, big numbers. Built for an affluent
Marbella reader with no patience: the hook is above the fold, the contact
is always one tap away, and every card is numbered so he knows where he is.
Display type uses the system heavy stack so it renders as real SF Pro Black
on Apple devices instead of a synthetic bold. Costs zero bytes. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600.woff2) format('woff2');}
:root{
--ink:#04070a;
--ground:#070b10;
--surface:#0d141c;
--surface-2:#131d27;
--surface-3:#1b2833;
--line:#22303d;
--line-bright:#33475a;
--text:#f4f7fa;
--text-soft:#a8b8c6;
--text-dim:#748899;
/* category colours, the grid must not be one flat green */
--c-start:#19d68a; /* start here */
--c-know:#3ba9ff; /* recognition, cause */
--c-risk:#ff5f45; /* the stakes */
--c-test:#c084fc; /* diagnosis */
--c-body:#ffb020; /* training, body */
--c-life:#2dd4bf; /* everyday */
--acc:#19d68a;
--acc-deep:#0f9c65;
--wa:#25d366;
--max:44rem;
--bar:78px;
--display:-apple-system,'SF Pro Display','Segoe UI',Roboto,'Helvetica Neue',Inter,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;color:var(--text);background:var(--ground);
font-family:'Inter',system-ui,-apple-system,sans-serif;
font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;
padding-bottom:var(--bar);overflow-x:hidden;
}
body::before{
content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
background:
radial-gradient(900px 600px at 15% -10%, rgba(25,214,138,.10), transparent 62%),
radial-gradient(800px 560px at 95% 6%, rgba(59,169,255,.09), transparent 60%),
linear-gradient(180deg,#080d13 0%,#060a0f 50%,#04070a 100%);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--acc);text-decoration-thickness:1px;text-underline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
/* ---------------- header ---------------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(7,11,16,.84);
backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);
border-bottom:1px solid var(--line)}
.hdr-in{max-width:74rem;margin:0 auto;padding:11px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.mark{display:flex;flex-direction:column;text-decoration:none;color:var(--text);line-height:1}
.mark b{font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:-.02em;text-transform:uppercase}
.mark span{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin-top:5px;font-weight:600}
.hdr-r{display:flex;align-items:center;gap:10px}
.langs{display:flex;gap:2px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
border:1px solid var(--line);border-radius:100px;padding:3px;background:var(--surface)}
.langs a{color:var(--text-dim);text-decoration:none;padding:4px 9px;border-radius:100px}
.langs a[aria-current]{color:var(--ink);background:#fff}
.hdr-cta{background:linear-gradient(180deg,var(--acc),var(--acc-deep));color:#04140d;text-decoration:none;
padding:10px 17px;border-radius:100px;font-size:13px;font-weight:700;white-space:nowrap;
box-shadow:0 6px 20px rgba(25,214,138,.26),inset 0 1px 0 rgba(255,255,255,.3)}
.hdr-cta:hover{filter:brightness(1.08)}
@media(max-width:600px){.hdr-cta{display:none}}
/* ---------------- hero: full bleed image, headline over it ---------------- */
.hero-wrap{position:relative;isolation:isolate;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;
filter:grayscale(1) contrast(1.15) brightness(.62)}
.hero-bg::after{
content:"";position:absolute;inset:0;
background:
linear-gradient(180deg,rgba(7,11,16,.55) 0%,rgba(7,11,16,.80) 55%,var(--ground) 100%),
radial-gradient(120% 90% at 50% 0%,rgba(25,214,138,.30),transparent 62%);
mix-blend-mode:normal;
}
.hero{padding:34px 0 20px;text-align:center;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.2em;
text-transform:uppercase;color:var(--acc);font-weight:700;border:1px solid rgba(25,214,138,.4);
background:rgba(25,214,138,.10);padding:6px 13px;border-radius:100px;margin-bottom:15px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
h1{
font-family:var(--display);font-weight:800;
font-size:clamp(2.5rem,9vw,4.4rem);line-height:.92;letter-spacing:-.038em;
margin:0 0 14px;text-transform:uppercase;color:#fff;
text-shadow:0 4px 40px rgba(0,0,0,.6);
}
h1 .hl{
background:linear-gradient(100deg,var(--acc) 0%,#7ef5c0 50%,var(--acc) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{font-size:1.02rem;color:var(--text-soft);margin:0 auto;max-width:32rem}
.meta{margin-top:15px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);font-weight:700}
.meta i{font-style:normal;color:var(--acc);margin:0 8px}
/* recognition lines */
.hooks{max-width:38rem;margin:18px auto 2px;padding:0 22px;position:relative}
.hooks ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
@media(min-width:620px){.hooks ul{grid-template-columns:1fr 1fr}}
.hooks li{background:rgba(19,29,39,.72);backdrop-filter:blur(8px);
border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:9px;
padding:11px 14px;font-size:.92rem;display:flex;gap:9px;align-items:baseline;text-align:left}
.hooks li b{font-family:var(--display);font-weight:800;color:#fff;font-size:.95rem;text-transform:uppercase;letter-spacing:-.01em;flex:0 0 auto}
.hooks li span{color:var(--text-soft)}
/* authority strip */
.proof{max-width:64rem;margin:20px auto 0;padding:0 22px;position:relative}
.proof ul{list-style:none;margin:0;padding:13px 18px;display:flex;flex-wrap:wrap;gap:9px 24px;justify-content:center;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(13,20,28,.6)}
.proof li{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-dim);font-weight:700;display:flex;align-items:center;gap:7px}
.proof li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.proof li b{color:#fff;font-weight:700}
/* ---------------- prose ---------------- */
.prose{padding:8px 0 34px;font-size:1.05rem}
.prose h2{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,4.6vw,2.15rem);
line-height:1.06;margin:2.1em 0 .5em;color:#fff;letter-spacing:-.028em}
.prose h2:first-child{margin-top:.5em}
.prose h3{font-size:1rem;font-weight:700;margin:1.8em 0 .4em;color:#fff}
.prose p{margin:0 0 1.05em;color:var(--text-soft)}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.1em}
.prose li{margin-bottom:.48em;color:var(--text-soft)}
.prose li::marker{color:var(--acc)}
.prose strong{font-weight:600;color:#fff}
.prose em{color:var(--text)}
.punch{background:linear-gradient(150deg,rgba(25,214,138,.14),rgba(19,29,39,.9));
border:1px solid var(--line-bright);border-left:3px solid var(--acc);border-radius:13px;
padding:19px 21px;margin:0 0 2em;font-size:1.07rem;box-shadow:0 18px 46px rgba(0,0,0,.45)}
.punch p{margin:0;color:var(--text)}
.punch p+p{margin-top:.6em}
.punch strong{color:#fff}
.pull{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,4.6vw,2.05rem);
line-height:1.08;color:#fff;letter-spacing:-.028em;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
padding:.95em 0;margin:2em 0;text-align:center;position:relative}
.pull::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
width:64px;height:2px;background:var(--acc);box-shadow:0 0 14px var(--acc)}
.note{background:var(--surface);border:1px solid var(--line);border-radius:11px;
padding:17px 19px;font-size:.93rem;color:var(--text-dim);margin:2em 0}
.note strong{color:#fff}
.note p{margin:0;color:var(--text-dim)}
.stat{border:1px solid var(--line-bright);border-radius:15px;
background:radial-gradient(120% 150% at 50% 0%,rgba(25,214,138,.18),var(--surface) 62%);
padding:26px 20px;margin:2em 0;text-align:center;box-shadow:0 22px 54px rgba(0,0,0,.5)}
.stat b{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.045em;
font-size:clamp(3rem,12vw,4.6rem);line-height:.9;
background:linear-gradient(180deg,#fff 20%,var(--acc));
-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:10px;font-size:.92rem;color:var(--text-soft)}
/* ---------------- contact ---------------- */
.ask{border-top:1px solid var(--line);padding:34px 0 40px;margin-top:8px;
background:radial-gradient(120% 100% at 50% 0%,rgba(25,214,138,.09),transparent 66%)}
.ask h2{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,5vw,2.1rem);
line-height:1.04;margin:0 0 9px;text-align:center;color:#fff;letter-spacing:-.03em}
.ask p{text-align:center;color:var(--text-soft);margin:0 auto 20px;max-width:30rem}
.btns{display:flex;flex-direction:column;gap:10px;max-width:25rem;margin:0 auto}
.b-wa,.b-tel{display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;
border-radius:100px;text-decoration:none;font-size:1rem;font-weight:700}
.b-wa{background:linear-gradient(180deg,#2ee97a,#17b862);color:#04170d;
box-shadow:0 12px 32px rgba(37,211,102,.3),inset 0 1px 0 rgba(255,255,255,.34)}
.b-wa:hover{filter:brightness(1.07)}
.b-tel{background:var(--surface-2);color:var(--text);border:1px solid var(--line-bright)}
.b-tel:hover{border-color:var(--acc);background:var(--surface-3)}
.b-form{display:block;text-align:center;margin-top:5px;font-size:12.5px;color:var(--text-dim)}
.ask small{display:block;text-align:center;margin-top:18px;font-size:11.5px;color:var(--text-dim);line-height:1.5}
.ask .who{text-align:center;font-size:12.5px;color:var(--acc);margin:12px auto 0;max-width:27rem;font-weight:600}
/* ---------------- sticky bar ---------------- */
.wa-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(5,9,13,.93);
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line-bright);
padding:10px 14px calc(10px + env(safe-area-inset-bottom));display:flex;gap:8px;
align-items:center;justify-content:center;box-shadow:0 -14px 42px rgba(0,0,0,.65)}
.wa-bar a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:54px;
border-radius:100px;text-decoration:none;font-size:.97rem;font-weight:700;flex:1 1 0;max-width:19rem}
.wa-bar .w{background:linear-gradient(180deg,#2ee97a,#17b862);color:#04170d;
box-shadow:0 8px 24px rgba(37,211,102,.34),inset 0 1px 0 rgba(255,255,255,.32)}
.wa-bar .c{background:var(--surface-2);color:var(--text);border:1px solid var(--line-bright);flex:0 0 auto;max-width:none;padding:0 20px}
.wa-bar .c span{display:none}
@media(min-width:560px){.wa-bar .c span{display:inline}}
/* ---------------- grid: image cards, duotone by category ---------------- */
.grid{display:grid;gap:13px;max-width:74rem;margin:0 auto;padding:0 22px;counter-reset:card}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;counter-increment:card;overflow:hidden;
background:var(--surface);border:1px solid var(--line);border-radius:15px;
text-decoration:none;color:var(--text);display:flex;flex-direction:column;
transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-4px);border-color:var(--cc,var(--acc));
box-shadow:0 26px 58px rgba(0,0,0,.55)}
/* the duotone thumbnail: one shared photo, a different colour per category,
so the grid reads as six distinct sections and never as one flat wall */
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface-3)}
.thumb img{width:100%;height:100%;object-fit:cover;
filter:grayscale(1) contrast(1.25) brightness(.55);transition:transform .5s ease}
.card:hover .thumb img{transform:scale(1.06)}
.thumb::after{content:"";position:absolute;inset:0;
background:linear-gradient(155deg,var(--cc,var(--acc)) 0%,transparent 62%),
linear-gradient(0deg,var(--surface) 2%,transparent 60%);
opacity:.72;mix-blend-mode:screen}
.thumb .n{position:absolute;left:14px;top:11px;z-index:2;
font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1;
color:#fff;opacity:.92;text-shadow:0 2px 14px rgba(0,0,0,.7);letter-spacing:-.03em}
.thumb .n::before{content:counter(card,decimal-leading-zero)}
.card-b{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.card .k{font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--cc,var(--acc));font-weight:700;margin-bottom:8px}
.card h3{font-family:var(--display);font-weight:800;font-size:1.22rem;line-height:1.08;
margin:0 0 8px;color:#fff;letter-spacing:-.026em}
.card p{margin:0;font-size:.88rem;color:var(--text-dim);line-height:1.48}
.card .more{margin-top:auto;padding-top:13px;font-size:10.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--cc,var(--acc));font-weight:700}
.card .more::after{content:" \203A";font-size:1.25em;line-height:0}
/* card one is the entry point */
.card.first{--cc:var(--c-start);border-color:rgba(25,214,138,.5);
box-shadow:0 22px 50px rgba(0,0,0,.5)}
@media(min-width:640px){
.card.first{grid-column:1 / -1;flex-direction:row}
.card.first .thumb{aspect-ratio:auto;flex:0 0 44%}
.card.first .card-b{justify-content:center;padding:24px 26px}
.card.first h3{font-size:1.75rem}
.card.first p{font-size:.98rem;max-width:34rem}
}
.card .badge{display:inline-block;background:linear-gradient(180deg,var(--acc),var(--acc-deep));
color:#04140d;font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
padding:5px 11px;border-radius:100px;margin-bottom:10px;box-shadow:0 4px 14px rgba(25,214,138,.34)}
/* category colours */
.c-know{--cc:var(--c-know)} .c-risk{--cc:var(--c-risk)} .c-test{--cc:var(--c-test)}
.c-body{--cc:var(--c-body)} .c-life{--cc:var(--c-life)} .c-start{--cc:var(--c-start)}
.sec-head{padding:40px 0 18px;text-align:center}
.sec-head h2{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,5.4vw,2.5rem);
margin:0 0 8px;line-height:1;color:#fff;letter-spacing:-.035em;text-transform:uppercase}
.sec-head p{color:var(--text-soft);margin:0 auto;max-width:32rem;font-size:.96rem}
/* ---------------- faq ---------------- */
.faq{padding:4px 0 18px}
.faq-grp{margin:0 0 28px}
.faq-grp>h2{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,4.4vw,1.95rem);
line-height:1.04;margin:0 0 4px;color:#fff;letter-spacing:-.03em}
.faq-grp>.sub{color:var(--text-dim);font-size:.92rem;margin:0 0 13px}
details.f{border:1px solid var(--line);border-radius:11px;background:var(--surface);margin-bottom:8px;overflow:hidden}
details.f[open]{border-color:var(--line-bright);background:var(--surface-2)}
details.f>summary{cursor:pointer;list-style:none;padding:15px 44px 15px 17px;position:relative;
font-weight:600;font-size:1rem;line-height:1.3;color:var(--text)}
details.f>summary::-webkit-details-marker{display:none}
details.f>summary::after{content:"";position:absolute;right:17px;top:21px;width:8px;height:8px;
border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(45deg);transition:transform .18s ease}
details.f[open]>summary::after{transform:rotate(-135deg);top:24px}
details.f>summary:hover{color:#fff}
details.f .a{padding:0 17px 17px}
details.f .a p{margin:0 0 .8em;color:var(--text-soft)}
details.f .a p:last-child{margin-bottom:0}
details.f .a strong{color:#fff}
/* ---------------- footer ---------------- */
.ftr{border-top:1px solid var(--line);background:var(--ink);padding:30px 0 38px;font-size:12.5px;color:var(--text-dim)}
.ftr-in{max-width:74rem;margin:0 auto;padding:0 22px}
.ftr a{color:var(--text-dim)}
.ftr p{margin:0 0 .7em;line-height:1.55}
.ftr strong{color:#fff}
.ftr .rule{height:1px;background:var(--line);margin:16px 0}
.ftr nav{margin:0 0 14px;display:flex;flex-wrap:wrap;gap:6px 18px}
.ftr nav a{text-decoration:none;font-weight:600}
.ftr nav a:hover{color:var(--acc)}
.back{display:inline-flex;align-items:center;gap:7px;margin:0 0 20px;font-size:12.5px;color:var(--text-dim);text-decoration:none}
.back:hover{color:var(--acc)}
.next{border-top:1px solid var(--line);padding:22px 0 4px;margin-top:8px}
.next .k{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--acc);font-weight:700;margin-bottom:7px}
.next a{font-family:var(--display);font-weight:800;font-size:1.3rem;text-decoration:none;
line-height:1.08;display:block;color:#fff;letter-spacing:-.028em}
.next a:hover{color:var(--acc)}
/* ---------------- quiz ---------------- */
.q{max-width:34rem;margin:0 auto 8px;background:linear-gradient(180deg,var(--surface-2),var(--surface));
border:1px solid var(--line-bright);border-radius:18px;padding:21px 19px 23px;
box-shadow:0 28px 64px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05)}
.q-prog{margin-bottom:18px}
.q-bar{height:5px;background:var(--surface-3);border-radius:100px;overflow:hidden}
.q-bar i{display:block;height:100%;width:11%;border-radius:100px;
background:linear-gradient(90deg,var(--acc-deep),var(--acc));
box-shadow:0 0 14px rgba(25,214,138,.5);transition:width .3s ease}
.q-n{margin-top:8px;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--text-dim);font-weight:700}
.q-stage{min-height:206px;display:flex;flex-direction:column;justify-content:center}
.q-txt{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,6vw,2.4rem);
line-height:1;margin:0 0 20px;text-align:center;color:#fff;letter-spacing:-.032em}
.q-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.q-b{appearance:none;cursor:pointer;font:inherit;min-height:64px;border-radius:100px;
background:linear-gradient(180deg,var(--acc),var(--acc-deep));color:#04140d;border:0;
font-size:1.02rem;font-weight:800;letter-spacing:.05em;
box-shadow:0 10px 28px rgba(25,214,138,.28),inset 0 1px 0 rgba(255,255,255,.32);
transition:transform .1s ease,filter .18s ease}
.q-b:hover{filter:brightness(1.08)}
.q-b:active{transform:scale(.98)}
.q-b.alt{background:var(--surface-3);color:var(--text);border:1px solid var(--line-bright);box-shadow:none}
.q-b.alt:hover{border-color:var(--acc);background:#22323f}
.q-back{appearance:none;background:none;border:0;cursor:pointer;font:inherit;margin:13px auto 0;
display:block;color:var(--text-dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.q-back:hover{color:var(--acc)}
.q-back[hidden]{display:none}
.q-score{width:92px;height:92px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-family:var(--display);font-size:1.9rem;font-weight:800;color:#fff;letter-spacing:-.03em;
background:radial-gradient(circle at 50% 28%,rgba(25,214,138,.32),var(--surface-3));
border:2px solid var(--acc);box-shadow:0 0 36px rgba(25,214,138,.3),inset 0 0 22px rgba(0,0,0,.45)}
.q-verdict{font-family:var(--display);font-weight:800;text-align:center;letter-spacing:-.03em;
font-size:clamp(1.5rem,5vw,2.05rem);line-height:1.04;margin:0 0 9px;color:#fff}
.q-read{text-align:center;font-size:1rem;color:var(--text-soft);margin:0 auto 20px;max-width:29rem}
.q-again{appearance:none;background:none;border:0;cursor:pointer;font:inherit;margin:15px auto 0;
display:block;color:var(--text-dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.q-again:hover{color:var(--acc)}
@media(max-width:430px){
body{font-size:17px}
.q{padding:17px 14px 19px;border-radius:15px}
.q-btns{grid-template-columns:1fr}
.q-b{min-height:58px}
.hero{padding:26px 0 12px}
.hooks li{font-size:.88rem;padding:10px 12px}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{transition:none !important}
}
/* full width call to action dropped into the middle of the grid, so a reader
who is scrolling and not clicking still gets handed a route to WhatsApp */
.cta-tile{
grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
padding:22px 24px;border-radius:15px;
background:linear-gradient(120deg,rgba(25,214,138,.22),rgba(19,29,39,.94));
border:1px solid rgba(25,214,138,.45);
box-shadow:0 22px 52px rgba(0,0,0,.5);
}
.cta-tile h3{font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,3.6vw,1.6rem);
line-height:1.05;margin:0 0 6px;color:#fff;letter-spacing:-.028em}
.cta-tile p{margin:0;color:var(--text-soft);font-size:.94rem;max-width:38rem}
.cta-go{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
background:linear-gradient(180deg,#2ee97a,#17b862);color:#04170d;text-decoration:none;
padding:15px 24px;border-radius:100px;font-weight:800;font-size:1rem;
box-shadow:0 12px 30px rgba(37,211,102,.32),inset 0 1px 0 rgba(255,255,255,.32)}
.cta-go:hover{filter:brightness(1.07)}
/* the escalation ladder: free reading, free question, then deeper education.
Every rung is education, which is what keeps this advertisable. */
.ladder{display:grid;gap:12px;max-width:74rem;margin:0 auto 6px;padding:0 22px}
@media(min-width:660px){.ladder{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.ladder{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;background:linear-gradient(180deg,var(--surface-2),var(--surface));
border:1px solid var(--line);border-radius:14px;padding:20px 20px 18px;display:flex;flex-direction:column}
.step:nth-child(1),.step:nth-child(2){border-color:rgba(25,214,138,.42)}
.s-n{font-family:var(--display);font-weight:800;font-size:.95rem;letter-spacing:.02em;
color:var(--acc);opacity:.85;margin-bottom:9px}
.step h3{font-family:var(--display);font-weight:800;font-size:1.14rem;line-height:1.1;
margin:0 0 7px;color:#fff;letter-spacing:-.025em}
.step p{margin:0 0 14px;font-size:.89rem;color:var(--text-dim);line-height:1.5}
.s-tag{margin-top:auto;align-self:flex-start;font-size:9.5px;letter-spacing:.15em;
text-transform:uppercase;font-weight:800;padding:5px 11px;border-radius:100px;
background:var(--surface-3);color:var(--text-dim);border:1px solid var(--line)}
.s-tag.free{background:linear-gradient(180deg,var(--acc),var(--acc-deep));color:#04140d;border:0;
box-shadow:0 4px 14px rgba(25,214,138,.3)}
/* the three part promise, stated as a claim about what this site does for him */
.promise{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:20px auto 0;max-width:34rem}
.promise span{
font-family:var(--display);font-weight:800;font-size:clamp(.82rem,2.7vw,1rem);
letter-spacing:-.015em;text-transform:uppercase;color:#fff;
padding:10px 16px;border-radius:100px;
background:linear-gradient(180deg,rgba(25,214,138,.18),rgba(19,29,39,.85));
border:1px solid rgba(25,214,138,.45);
box-shadow:0 6px 20px rgba(0,0,0,.4);
}
/* objection killer and hard close, placed after the reader has seen the goods */
.close{padding:44px 0 10px;text-align:center;max-width:52rem}
.close h2{font-family:var(--display);font-weight:800;letter-spacing:-.035em;text-transform:uppercase;
font-size:clamp(1.7rem,5.4vw,2.5rem);line-height:1;margin:0 0 12px;color:#fff}
.close-a{color:var(--text-soft);font-size:1.04rem;margin:0 auto 26px;max-width:36rem}
.close-a em{color:#fff;font-style:normal;font-weight:600}
.close-grid{display:grid;gap:10px;margin:0 0 26px;text-align:left}
@media(min-width:620px){.close-grid{grid-template-columns:1fr 1fr}}
.close-grid div{background:linear-gradient(180deg,var(--surface-2),var(--surface));
border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:11px;padding:15px 17px}
.close-grid b{display:block;font-family:var(--display);font-weight:800;font-size:1rem;
letter-spacing:-.02em;color:#fff;margin-bottom:5px}
.close-grid span{font-size:.89rem;color:var(--text-dim);line-height:1.5}
.close-cta{display:inline-flex;align-items:center;gap:11px;
background:linear-gradient(180deg,#2ee97a,#17b862);color:#04170d;text-decoration:none;
padding:19px 34px;border-radius:100px;font-weight:800;font-size:1.08rem;letter-spacing:-.01em;
box-shadow:0 16px 40px rgba(37,211,102,.34),inset 0 1px 0 rgba(255,255,255,.34)}
.close-cta:hover{filter:brightness(1.07)}
.close-fine{margin:14px auto 0;font-size:12.5px;color:var(--text-dim);max-width:32rem}
/* authority. Local board certification and a checkable registration number are
the one thing the offshore competition cannot copy. */
.auth{padding:46px 0 6px;text-align:center;max-width:56rem}
.auth h2{font-family:var(--display);font-weight:800;letter-spacing:-.035em;
font-size:clamp(1.6rem,5vw,2.35rem);line-height:1.02;margin:0 0 12px;color:#fff}
.auth-lead{color:var(--text-soft);font-size:1.02rem;margin:0 auto 26px;max-width:37rem}
.auth-grid{display:grid;gap:10px;text-align:left}
@media(min-width:620px){.auth-grid{grid-template-columns:1fr 1fr}}
.auth-card{background:linear-gradient(180deg,var(--surface-2),var(--surface));
border:1px solid var(--line-bright);border-radius:13px;padding:17px 19px;
box-shadow:0 14px 36px rgba(0,0,0,.4)}
.a-k{display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--acc);font-weight:800;margin-bottom:8px}
.auth-card b{display:block;font-family:var(--display);font-weight:800;font-size:1.22rem;
letter-spacing:-.028em;color:#fff;margin-bottom:6px;line-height:1.1}
.a-v{display:block;font-size:.88rem;color:var(--text-dim);line-height:1.5}
.a-v strong{color:var(--text-soft);font-weight:600}
.auth-fine{margin:20px auto 0;font-size:12.5px;color:var(--text-dim);max-width:33rem}
/* online is where the advertising lands, so it gets the weight */
.step.big{
border-color:rgba(25,214,138,.55);
background:radial-gradient(130% 130% at 0% 0%,rgba(25,214,138,.20),var(--surface-2) 60%);
box-shadow:0 22px 52px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
}
.step.big h3{font-size:1.34rem}
.step.big .s-tag{background:linear-gradient(180deg,var(--acc),var(--acc-deep));color:#04140d;border:0;
box-shadow:0 4px 14px rgba(25,214,138,.32)}
@media(min-width:660px) and (max-width:1039px){.step.big{grid-column:1 / -1}}
/* ============================================================
PHOTO CARDS. The headline sits ON the image, not under it, so
the eye lands on words instead of a random picture. Duotone by
category keeps 18 cards from reading as one grey wall.
============================================================ */
.thumb.photo{aspect-ratio:4/3;overflow:hidden;position:relative;background:#0b1219}
.thumb.photo img{
width:100%;height:100%;object-fit:cover;
filter:grayscale(1) contrast(1.3) brightness(.44);
transition:transform .6s ease,filter .4s ease;
}
.card:hover .thumb.photo img{transform:scale(1.07);filter:grayscale(1) contrast(1.35) brightness(.52)}
/* category wash + a hard bottom scrim so type always reads */
.thumb.photo::after{
content:"";position:absolute;inset:0;
background:
linear-gradient(0deg, rgba(6,10,14,.97) 0%, rgba(6,10,14,.72) 34%, rgba(6,10,14,.10) 68%),
linear-gradient(145deg, var(--cc,var(--acc)) 0%, transparent 58%);
mix-blend-mode:normal;opacity:.94;
}
.thumb.photo .n{
position:absolute;left:15px;top:12px;z-index:3;
font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1;
color:var(--cc,var(--acc));letter-spacing:-.03em;
text-shadow:0 2px 16px rgba(0,0,0,.9);
}
.thumb.photo .n::before{content:counter(card,decimal-leading-zero)}
/* the lava: the headline erupting off the image */
h3.on-img{
position:absolute;z-index:3;left:16px;right:16px;bottom:14px;margin:0;
font-family:var(--display);font-weight:800;
font-size:clamp(1.28rem,2.4vw,1.62rem);line-height:.98;letter-spacing:-.035em;
text-transform:uppercase;color:#fff;
text-shadow:0 3px 22px rgba(0,0,0,.95),0 1px 3px rgba(0,0,0,.9);
}
/* card one gets the biggest eruption */
.card.first h3.on-img{font-size:clamp(1.7rem,4vw,2.5rem)}
@media(min-width:640px){
.card.first .thumb.photo{aspect-ratio:auto;flex:0 0 46%}
}
.card-b{padding:15px 17px 18px}
.card .k{margin-bottom:7px}
/* hero photograph: keep the subject in frame on tall mobile heroes, and put
enough darkness under the type that it reads at any image brightness */
.hero-bg img{
width:100%;height:100%;object-fit:cover;
object-position:70% 28%;
filter:grayscale(.85) contrast(1.18) brightness(.34) saturate(.7);
}
.hero-bg::after{
background:
linear-gradient(180deg, rgba(6,10,14,.72) 0%, rgba(6,10,14,.80) 42%, rgba(7,11,16,.94) 78%, var(--ground) 100%),
radial-gradient(115% 80% at 50% 0%, rgba(25,214,138,.26), transparent 64%);
}
@media(max-width:640px){
.hero-bg img{object-position:64% 22%}
}
/* the colour wash was drowning the photograph. Let the picture read, keep the
category tint as a signal rather than a paint bucket. */
.thumb.photo::after{
background:
linear-gradient(0deg, rgba(6,10,14,.96) 0%, rgba(6,10,14,.66) 30%, rgba(6,10,14,.05) 62%),
linear-gradient(150deg, var(--cc,var(--acc)) 0%, transparent 42%);
opacity:.55;
}
.thumb.photo img{filter:grayscale(.9) contrast(1.22) brightness(.62)}
.card:hover .thumb.photo img{filter:grayscale(.55) contrast(1.25) brightness(.72)}
/* a thin category rule at the top of each photo, so the colour still codes */
.thumb.photo::before{
content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:4;
background:var(--cc,var(--acc));box-shadow:0 0 14px var(--cc,var(--acc));
}
/* photographs on the escalation ladder, so the steps are not four grey boxes */
.step{padding:0;overflow:hidden}
.s-pic{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface-3)}
.s-pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(.9) contrast(1.2) brightness(.5)}
.s-pic::after{content:"";position:absolute;inset:0;
background:linear-gradient(0deg,var(--surface-2) 2%,rgba(19,29,39,.35) 46%,transparent 78%),
linear-gradient(150deg,var(--acc) 0%,transparent 44%);opacity:.5}
.step .s-n{position:absolute;left:14px;top:11px;z-index:3;margin:0;
text-shadow:0 2px 14px rgba(0,0,0,.9);font-size:1.05rem}
.step h3,.step p,.step .s-tag{margin-left:19px;margin-right:19px}
.step h3{margin-top:15px}
.step .s-tag{margin-bottom:18px}
.step.big .s-pic::after{background:linear-gradient(0deg,var(--surface-2) 2%,rgba(19,29,39,.3) 46%,transparent 78%),
linear-gradient(150deg,var(--acc) 0%,transparent 38%);opacity:.62}
/* the consult page opens on the conversation it is selling */
.consult-hero{position:relative;height:clamp(180px,32vw,320px);overflow:hidden;margin-bottom:-8px}
.consult-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;
filter:grayscale(.85) contrast(1.18) brightness(.5)}
.consult-hero::after{content:"";position:absolute;inset:0;
background:linear-gradient(0deg,var(--ground) 3%,rgba(7,11,16,.55) 45%,rgba(7,11,16,.25) 100%),
linear-gradient(160deg,rgba(25,214,138,.24),transparent 52%)}
/* the waiting room. The single strongest argument on the page: he can wait
months for this chair, or speak to the specialist this week. */
.waitband{position:relative;margin:34px 0 6px;isolation:isolate;overflow:hidden;
border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wb-pic{position:absolute;inset:0;z-index:-1}
.wb-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;
filter:grayscale(1) contrast(1.3) brightness(.32)}
.wb-pic::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(6,10,14,.94) 0%,rgba(6,10,14,.80) 46%,rgba(6,10,14,.55) 100%),
linear-gradient(180deg,rgba(6,10,14,.5),rgba(6,10,14,.72))}
.wb-txt{padding:46px 22px 48px;max-width:44rem;text-align:left}
.wb-txt h2{font-family:var(--display);font-weight:800;letter-spacing:-.035em;text-transform:uppercase;
font-size:clamp(1.7rem,6vw,2.7rem);line-height:.98;margin:0 0 12px;color:#fff}
.wb-txt p{color:var(--text-soft);margin:0 0 22px;max-width:33rem;font-size:1.02rem}
.wb-cta{display:inline-flex;align-items:center;gap:9px;
background:linear-gradient(180deg,#2ee97a,#17b862);color:#04170d;text-decoration:none;
padding:16px 28px;border-radius:100px;font-weight:800;font-size:1rem;
box-shadow:0 14px 34px rgba(37,211,102,.32),inset 0 1px 0 rgba(255,255,255,.32)}
.wb-cta:hover{filter:brightness(1.07)}
/* closing image, the last thing he sees before the final call to action */
.closeband{position:relative;height:clamp(190px,34vw,330px);overflow:hidden;margin-top:26px}
.closeband img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
filter:grayscale(.8) contrast(1.2) brightness(.46)}
.closeband::after{content:"";position:absolute;inset:0;
background:linear-gradient(0deg,var(--ground) 4%,rgba(7,11,16,.55) 52%,rgba(7,11,16,.3) 100%)}
.closeband p{position:absolute;z-index:2;left:0;right:0;bottom:26px;margin:0 auto;padding:0 24px;
max-width:34rem;text-align:center;color:#fff;
font-family:var(--display);font-weight:800;letter-spacing:-.028em;
font-size:clamp(1.1rem,3.4vw,1.5rem);line-height:1.12;
text-shadow:0 3px 20px rgba(0,0,0,.95)}
/* ============ THE ALGORITHM ============ */
.algo{max-width:76rem;margin:0 auto;padding:0 0 8px}
.a-step{position:relative;margin:0 0 46px;scroll-margin-top:86px;
--k:var(--acc);--k-soft:rgba(25,214,138,.14);--k-glow:rgba(25,214,138,.34)}
#step-test{--k:var(--c-test);--k-soft:rgba(192,132,252,.15);--k-glow:rgba(192,132,252,.36)}
#step-why {--k:var(--c-risk);--k-soft:rgba(255,95,69,.15); --k-glow:rgba(255,95,69,.36)}
#step-who {--k:var(--c-know);--k-soft:rgba(59,169,255,.15);--k-glow:rgba(59,169,255,.36)}
.a-step:last-child{margin-bottom:30px}
/* ---- section intro above the four steps ---- */
.algo-intro{max-width:46rem;margin:0 auto;padding:44px 22px 34px;text-align:center}
.algo-intro .eyebrow{display:inline-flex;align-items:center;gap:9px;
font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
color:var(--acc);background:rgba(25,214,138,.12);border:1px solid rgba(25,214,138,.34);
padding:7px 14px;border-radius:999px;margin:0 0 16px}
.algo-intro h2{font-family:var(--display);font-weight:900;letter-spacing:-.045em;
font-size:clamp(2.2rem,8vw,3.6rem);line-height:.98;margin:0 0 14px;color:#fff}
.algo-intro h2 em{font-style:normal;
background:linear-gradient(100deg,var(--c-start),var(--c-test) 45%,var(--c-know));
-webkit-background-clip:text;background-clip:text;color:transparent}
.algo-intro p{font-size:1.04rem;line-height:1.55;color:var(--text-soft);margin:0}
.algo-rail{display:flex;justify-content:center;gap:7px;margin:22px 0 0}
.algo-rail i{width:34px;height:4px;border-radius:2px;display:block;opacity:.9}
.algo-rail i:nth-child(1){background:var(--c-start)}
.algo-rail i:nth-child(2){background:var(--c-test)}
.algo-rail i:nth-child(3){background:var(--c-risk)}
.algo-rail i:nth-child(4){background:var(--c-know)}
/* ---- image with a colour-graded scrim ---- */
.a-pic{position:relative;width:100%;aspect-ratio:16/9;min-height:280px;max-height:54vh;
overflow:hidden;background:var(--surface-3)}
.a-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;
transform:scale(1.04);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.a-step.in .a-pic img{transform:scale(1)}
.a-pic::after{content:"";position:absolute;inset:0;
background:
radial-gradient(120% 90% at 80% 0%, var(--k-soft) 0%, transparent 55%),
linear-gradient(180deg,rgba(7,11,16,.30) 0%,rgba(7,11,16,.05) 26%,
rgba(7,11,16,.58) 64%,rgba(7,11,16,.94) 88%,rgba(7,11,16,1) 100%)}
/* ---- the giant ghost numeral ---- */
.a-body{position:relative;margin-top:-72px;z-index:2;padding-bottom:4px}
.a-body::before{content:attr(data-n);position:absolute;right:14px;top:-126px;z-index:0;
font-family:var(--display);font-weight:900;font-size:clamp(6.5rem,24vw,13rem);line-height:.7;
letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--k);opacity:.42;
pointer-events:none}
.a-body > *{position:relative;z-index:1}
/* ---- kicker chip ---- */
.a-kick{display:inline-flex;align-items:center;gap:8px;
font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--k);background:var(--k-soft);border:1px solid var(--k-glow);
padding:7px 13px 7px 11px;border-radius:999px;margin:0 0 14px}
.a-kick::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--k);
box-shadow:0 0 0 4px var(--k-soft)}
/* ---- headline with a colour swipe under it ---- */
.a-step h3{position:relative;display:block;
font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1.02;
font-size:clamp(2.15rem,7.6vw,3.9rem);margin:0;color:#fff}
.a-h3wrap{position:relative;margin:0 0 20px;padding-bottom:16px;max-width:22ch}
.a-h3wrap::after{content:"";position:absolute;left:0;bottom:0;height:5px;width:0;border-radius:3px;
background:linear-gradient(90deg,var(--k),var(--k-glow));
box-shadow:0 0 18px var(--k-glow);
transition:width 1s cubic-bezier(.2,.7,.2,1) .3s}
.a-step.in .a-h3wrap::after{width:min(180px,52%)}
.a-lead{font-size:clamp(1.14rem,3vw,1.5rem);line-height:1.34;color:#fff;
font-weight:650;letter-spacing:-.018em;margin:0 0 14px;max-width:40rem}
.a-lead b,.a-lead strong{color:var(--k)}
.a-txt{font-size:clamp(1rem,2.2vw,1.06rem);line-height:1.62;color:var(--text-soft);
margin:0 0 22px;max-width:41rem}
/* ---- the marker pills, step 2 ---- */
.a-marks{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;max-width:41rem}
.a-marks span{font-size:.82rem;font-weight:700;letter-spacing:.01em;color:#fff;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid var(--k-glow);padding:8px 13px;border-radius:9px;white-space:nowrap}
.a-marks span:last-child{color:var(--k);border-style:dashed}
/* ---- WhatsApp button, glowing ---- */
.a-wa{position:relative;display:inline-flex;align-items:center;gap:10px;text-decoration:none;
background:linear-gradient(180deg,#2ee56f,#1fbe5a);color:#03140a;
font-weight:850;font-size:1rem;letter-spacing:-.01em;
padding:15px 24px;border-radius:999px;border:1px solid rgba(255,255,255,.22);
box-shadow:0 10px 30px rgba(37,211,102,.28),inset 0 1px 0 rgba(255,255,255,.4);
transition:transform .18s,box-shadow .18s}
.a-wa::after{content:"";position:absolute;inset:-3px;border-radius:999px;
border:2px solid rgba(37,211,102,.5);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
.a-wa::after{animation:waPulse 2.8s ease-out infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.14);opacity:0}100%{opacity:0}}
}
.a-wa::before{content:"";width:18px;height:18px;flex:none;background:#03140a;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
/* ---- article cards ---- */
.a-arts{display:flex;gap:13px;overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;padding:22px 22px 4px;align-items:stretch;margin:0;scrollbar-width:none}
.a-arts::-webkit-scrollbar{display:none}
.a-art{position:relative;flex:0 0 80%;max-width:23rem;scroll-snap-align:start;
background:linear-gradient(180deg,var(--surface-2),var(--surface));
border:1px solid var(--line);border-radius:16px;
padding:20px 20px 17px 22px;text-decoration:none;color:var(--text);
display:flex;flex-direction:column;gap:8px;overflow:hidden;
transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .22s,box-shadow .22s}
/* accent bar down the left */
.a-art::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:linear-gradient(180deg,var(--k),transparent 85%);opacity:.85}
/* glow that appears on hover */
.a-art::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
background:radial-gradient(90% 60% at 0% 0%,var(--k-soft) 0%,transparent 60%);
opacity:0;transition:opacity .22s}
.a-art h4{font-family:var(--display);font-size:clamp(1.38rem,4.6vw,1.72rem);font-weight:900;
line-height:1.02;margin:0 0 2px;color:#fff;letter-spacing:-.035em;
text-shadow:0 2px 18px rgba(0,0,0,.55)}
.a-art p{font-size:.9rem;line-height:1.48;color:var(--text-dim);margin:0;flex:1}
.a-go{display:inline-flex;align-items:center;gap:7px;
font-size:.74rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:var(--k)}
/* chevron drawn in CSS, no glyph */
.a-go::after{content:"";width:6px;height:6px;flex:none;
border-right:2px solid currentColor;border-top:2px solid currentColor;
transform:rotate(45deg);transition:transform .22s}
@media (hover:hover){
.a-art:hover{transform:translateY(-4px);border-color:var(--k-glow);
box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 1px var(--k-glow)}
.a-art:hover::after{opacity:1}
.a-art:hover .a-go::after{transform:rotate(45deg) translate(3px,-3px)}
.a-wa:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(37,211,102,.42),inset 0 1px 0 rgba(255,255,255,.4)}
}
/* ---- scroll reveal ---- */
@media (prefers-reduced-motion:no-preference){
.a-step .a-body,.a-step .a-arts{opacity:0;transform:translateY(26px);
transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.a-step.in .a-body{opacity:1;transform:none}
.a-step.in .a-arts{opacity:1;transform:none;transition-delay:.14s}
}
@media (min-width:760px){
.a-pic{aspect-ratio:21/9;min-height:0;max-height:none}
.a-body{margin-top:-104px}
.a-body::before{top:-150px;right:26px}
.a-arts{display:grid;grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr));
overflow:visible;padding:28px 22px 4px}
.a-art{flex:none;max-width:none}
}
/* ============ ARTICLE HERO ============ */
.art-hero{position:relative;width:100%;aspect-ratio:16/9;min-height:230px;max-height:46vh;
overflow:hidden;background:var(--surface-3);margin:0 0 6px}
.art-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;display:block}
.art-hero::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(7,11,16,.18) 0%,rgba(7,11,16,.04) 34%,
rgba(7,11,16,.62) 76%,rgba(7,11,16,.97) 96%,rgba(7,11,16,1) 100%)}
@media (min-width:760px){ .art-hero{aspect-ratio:21/9;min-height:0;max-height:none} }
/* ============ LEAD FORM ============ */
.lead{max-width:34rem;margin:22px auto 0;padding:0 22px;box-sizing:border-box;text-align:left}
.lead label{display:block;font-size:.82rem;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:var(--text-soft);margin:16px 0 7px}
.lead input,.lead textarea{width:100%;box-sizing:border-box;background:var(--surface);
border:1px solid var(--line);border-radius:11px;padding:14px 15px;color:var(--text);
font:inherit;font-size:1rem;line-height:1.45}
.lead input:focus,.lead textarea:focus{outline:none;border-color:var(--acc)}
.lead textarea{resize:vertical;min-height:118px}
.lead button{width:100%;margin-top:20px;background:var(--acc);color:#04140a;border:0;
border-radius:11px;padding:16px 20px;font:inherit;font-size:1.02rem;font-weight:800;cursor:pointer}
.lead-note{font-size:.86rem;line-height:1.5;color:var(--text-dim);margin:14px 0 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (hover:hover){ .lead button:hover{background:var(--acc-deep)} }
/* ============ THE SUPERVOLCANO CTA ============ */
.volcano{position:relative;overflow:hidden;margin:0;padding:0}
.volcano-in{position:relative;z-index:2;max-width:50rem;margin:0 auto;
padding:clamp(48px,10vw,86px) 22px clamp(44px,9vw,78px);text-align:center}
.volcano::before{content:"";position:absolute;inset:0;z-index:0;
background:
radial-gradient(70% 120% at 50% 118%, rgba(25,214,138,.34) 0%, transparent 62%),
radial-gradient(58% 100% at 18% 108%, rgba(59,169,255,.22) 0%, transparent 60%),
radial-gradient(58% 100% at 84% 112%, rgba(192,132,252,.20) 0%, transparent 60%),
linear-gradient(180deg,var(--ground) 0%,#0a1119 55%,#08131a 100%)}
/* the erupting rim */
.volcano::after{content:"";position:absolute;left:50%;bottom:-58%;width:150%;height:112%;
transform:translateX(-50%);z-index:1;border-radius:50% 50% 0 0;pointer-events:none;
background:radial-gradient(closest-side,rgba(25,214,138,.20),transparent 72%);
filter:blur(26px)}
.volcano-top{border-bottom:1px solid var(--line)}
.volcano-end{border-top:1px solid var(--line)}
.v-chip{display:inline-flex;align-items:center;gap:9px;
font-size:.7rem;font-weight:850;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);
background:rgba(25,214,138,.13);border:1px solid rgba(25,214,138,.4);
padding:8px 15px;border-radius:999px;margin:0 0 20px}
.v-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc)}
@media (prefers-reduced-motion:no-preference){
.v-chip::before{animation:vDot 2s ease-in-out infinite}
@keyframes vDot{0%,100%{box-shadow:0 0 0 0 rgba(25,214,138,.6)}50%{box-shadow:0 0 0 7px rgba(25,214,138,0)}}
}
.volcano h2{font-family:var(--display);font-weight:900;letter-spacing:-.05em;
font-size:clamp(2.4rem,9.5vw,4.6rem);line-height:.94;margin:0 0 18px;color:#fff;
text-shadow:0 2px 40px rgba(0,0,0,.6)}
.volcano h2 em{font-style:normal;
background:linear-gradient(100deg,#19d68a,#5ee2ff 48%,#c084fc);
-webkit-background-clip:text;background-clip:text;color:transparent}
.volcano p{font-size:clamp(1.06rem,3vw,1.32rem);line-height:1.46;color:#dfe8ef;
margin:0 auto 28px;max-width:34rem;font-weight:550}
.v-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.v-wa{position:relative;display:inline-flex;align-items:center;gap:11px;text-decoration:none;
background:linear-gradient(180deg,#31ea74,#1fbe5a);color:#03140a;
font-weight:900;font-size:clamp(1rem,2.6vw,1.12rem);letter-spacing:-.015em;
padding:18px 30px;border-radius:999px;border:1px solid rgba(255,255,255,.26);
box-shadow:0 14px 44px rgba(37,211,102,.4),inset 0 1px 0 rgba(255,255,255,.45);
transition:transform .18s,box-shadow .18s}
.v-wa::after{content:"";position:absolute;inset:-4px;border-radius:999px;
border:2px solid rgba(37,211,102,.55);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
.v-wa::after{animation:waPulse 2.6s ease-out infinite}
}
.v-wa::before{content:"";width:20px;height:20px;flex:none;background:#03140a;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.v-alt{display:inline-flex;align-items:center;text-decoration:none;color:#dfe8ef;
font-weight:750;font-size:1rem;padding:18px 26px;border-radius:999px;
background:rgba(255,255,255,.06);border:1px solid var(--line-bright)}
.v-note{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
margin:22px 0 0;font-size:.92rem;font-weight:700;color:var(--acc)}
.v-note i{font-style:normal;color:var(--text-dim);font-weight:500}
@media (hover:hover){
.v-wa:hover{transform:translateY(-3px);box-shadow:0 20px 54px rgba(37,211,102,.5),inset 0 1px 0 rgba(255,255,255,.45)}
.v-alt:hover{background:rgba(255,255,255,.1);border-color:var(--acc)}
}
/* ============ ERUPTION HEADINGS ============ */
.pop-head{max-width:48rem;margin:0 auto;padding:52px 22px 8px;text-align:center}
.pop-head .v-chip{margin-bottom:16px}
.pop-head h2{font-family:var(--display);font-weight:900;letter-spacing:-.048em;
font-size:clamp(2.15rem,8.4vw,3.7rem);line-height:.98;margin:0 0 14px;color:#fff}
.pop-head h2 em{font-style:normal;
background:linear-gradient(100deg,#19d68a,#5ee2ff 50%,#c084fc);
-webkit-background-clip:text;background-clip:text;color:transparent}
.pop-head p{font-size:1.05rem;line-height:1.55;color:var(--text-soft);margin:0 auto;max-width:36rem}
/* the wait band, erupting */
.waitband .wb-txt h2{font-family:var(--display);font-weight:900;letter-spacing:-.05em;
font-size:clamp(2.3rem,9vw,4.1rem);line-height:.95;color:#fff;
text-shadow:0 2px 34px rgba(0,0,0,.7)}
.waitband .wb-txt h2 em{font-style:normal;
background:linear-gradient(100deg,#ff5f45,#ffb020 55%,#19d68a);
-webkit-background-clip:text;background-clip:text;color:transparent}
.waitband .wb-pic::after{content:"";position:absolute;inset:0;
background:radial-gradient(80% 100% at 50% 120%,rgba(255,95,69,.22) 0%,transparent 60%)}
/* the credential band, erupting */
.close h2{font-family:var(--display);font-weight:900;letter-spacing:-.048em;
font-size:clamp(2.2rem,8.6vw,3.8rem);line-height:.97;color:#fff}
.close h2 em{font-style:normal;
background:linear-gradient(100deg,#19d68a,#5ee2ff 50%,#c084fc);
-webkit-background-clip:text;background-clip:text;color:transparent}
/* the consequences callout inside step 3 */
.a-harm{display:grid;gap:10px;margin:0 0 22px;max-width:41rem}
.a-harm div{position:relative;padding:13px 16px 13px 40px;border-radius:12px;
background:linear-gradient(180deg,rgba(255,95,69,.10),rgba(255,95,69,.03));
border:1px solid rgba(255,95,69,.26);font-size:.98rem;line-height:1.48;color:#efe6e3}
.a-harm div b{color:#ff8b76;font-weight:800}
.a-harm div::before{content:"";position:absolute;left:15px;top:17px;width:9px;height:9px;
border-radius:2px;transform:rotate(45deg);background:var(--c-risk);
box-shadow:0 0 12px rgba(255,95,69,.7)}
/* ---- step three cards run hot, they carry the consequences ---- */
#step-why .a-art{
background:linear-gradient(180deg,rgba(255,95,69,.11),rgba(20,13,12,.55));
border-color:rgba(255,95,69,.30);
padding-top:22px}
#step-why .a-art::before{width:4px;
background:linear-gradient(180deg,#ff5f45,#ffb020 55%,transparent 92%);opacity:1}
#step-why .a-art h4{
background:linear-gradient(100deg,#fff 0%,#ffd9cf 42%,#ff8b76 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
text-shadow:none}
#step-why .a-art p{color:rgba(240,226,222,.66)}
#step-why .a-go{color:#ff8b76}
@media (hover:hover){
#step-why .a-art:hover{border-color:rgba(255,95,69,.62);
box-shadow:0 18px 46px rgba(0,0,0,.55),0 0 0 1px rgba(255,95,69,.5),0 0 34px rgba(255,95,69,.22)}
}
/* every card title gets a little more room to breathe */
.a-art{padding:22px 20px 18px 22px;gap:9px}
/* ============ INTERSTITIAL ERUPTIONS ============ */
.vband{position:relative;overflow:hidden;margin:0 0 46px;
--b1:#c084fc;--b2:#5ee2ff;--bg:rgba(192,132,252,.20)}
.vband-hot{--b1:#ff5f45;--b2:#ffb020;--bg:rgba(255,95,69,.22)}
.vband-cool{--b1:#5ee2ff;--b2:#19d68a;--bg:rgba(94,226,255,.20)}
.vband::before{content:"";position:absolute;inset:0;z-index:0;
background:
radial-gradient(75% 130% at 50% 122%, var(--bg) 0%, transparent 62%),
linear-gradient(180deg,transparent 0%,rgba(9,14,20,.75) 45%,var(--ground) 100%)}
.vband::after{content:"";position:absolute;left:50%;bottom:-62%;width:160%;height:118%;
transform:translateX(-50%);z-index:1;border-radius:50% 50% 0 0;pointer-events:none;
background:radial-gradient(closest-side,var(--bg),transparent 74%);filter:blur(30px)}
.vband-in{position:relative;z-index:2;max-width:46rem;margin:0 auto;
padding:clamp(40px,8vw,68px) 22px clamp(38px,7vw,60px);text-align:center}
.vband h2{font-family:var(--display);font-weight:900;letter-spacing:-.05em;
font-size:clamp(2.15rem,8.6vw,3.9rem);line-height:.95;margin:0 0 16px;color:#fff;
text-shadow:0 2px 34px rgba(0,0,0,.65)}
.vband h2 em{font-style:normal;
background:linear-gradient(100deg,var(--b1),var(--b2));
-webkit-background-clip:text;background-clip:text;color:transparent}
.vband p{font-size:clamp(1.02rem,2.9vw,1.24rem);line-height:1.46;color:#dbe4ec;
margin:0 auto 22px;max-width:32rem;font-weight:550}
.vband-cta{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
color:#03140a;background:linear-gradient(180deg,#2ee56f,#1fbe5a);
font-weight:850;font-size:.98rem;padding:14px 24px;border-radius:999px;
border:1px solid rgba(255,255,255,.24);
box-shadow:0 10px 30px rgba(37,211,102,.3),inset 0 1px 0 rgba(255,255,255,.4);
transition:transform .18s,box-shadow .18s}
.vband-cta::after{content:"";width:6px;height:6px;flex:none;
border-right:2px solid currentColor;border-top:2px solid currentColor;
transform:rotate(45deg);transition:transform .2s}
@media (hover:hover){
.vband-cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(37,211,102,.44),inset 0 1px 0 rgba(255,255,255,.4)}
.vband-cta:hover::after{transform:rotate(45deg) translate(3px,-3px)}
}
@media (prefers-reduced-motion:no-preference){
.vband .vband-in{opacity:0;transform:translateY(22px);
transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.vband.in .vband-in{opacity:1;transform:none}
}
/* ============ ERUPTING CAPTIONS: the four named cards ============ */
h3.on-img.pop{
font-size:clamp(1.62rem,3.4vw,2.3rem);font-weight:900;line-height:.92;
letter-spacing:-.045em;padding-bottom:13px;
text-shadow:0 3px 26px rgba(0,0,0,.96),0 1px 3px rgba(0,0,0,.9),0 0 36px var(--pk,rgba(25,214,138,.5))}
h3.on-img.pop::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:88px;
border-radius:3px;background:linear-gradient(90deg,var(--pc,#19d68a),transparent);
box-shadow:0 0 16px var(--pk,rgba(25,214,138,.6))}
.card.c-know h3.on-img.pop{--pc:#3ba9ff;--pk:rgba(59,169,255,.62)}
.card.c-risk h3.on-img.pop{--pc:#ff5f45;--pk:rgba(255,95,69,.68)}
.card.c-test h3.on-img.pop{--pc:#c084fc;--pk:rgba(192,132,252,.62)}
/* ============ PHOTO BACKDROPS UNDER THE ERUPTIONS ============ */
.volcano .v-bg,.vband .vb-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.volcano .v-bg img,.vband .vb-bg img{width:100%;height:100%;object-fit:cover}
.volcano.has-bg::before{z-index:1;background:
radial-gradient(70% 120% at 50% 118%, rgba(25,214,138,.28) 0%, transparent 62%),
linear-gradient(180deg,rgba(4,7,10,.82) 0%,rgba(7,11,16,.48) 52%,rgba(4,7,10,.88) 100%)}
.volcano.has-bg::after{z-index:1}
.vband.has-bg::before{z-index:1;background:
radial-gradient(75% 130% at 50% 122%, var(--bg) 0%, transparent 62%),
linear-gradient(180deg,rgba(4,7,10,.76) 0%,rgba(9,14,20,.5) 46%,rgba(7,11,16,.92) 100%)}
.vband.has-bg::after{z-index:1}
.vb-kick{display:inline-block;font-size:.7rem;font-weight:850;letter-spacing:.17em;
text-transform:uppercase;color:#fff;background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.24);padding:7px 14px;border-radius:999px;margin:0 0 18px}
/* full-bleed photo band with one line over it */
.imgband{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.imgband img{width:100%;height:clamp(200px,36vw,360px);object-fit:cover;display:block;
filter:contrast(1.04) brightness(.82)}
.imgband::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(4,7,10,.5),transparent 42%,rgba(4,7,10,.8))}
.imgband p{position:absolute;left:0;right:0;bottom:16px;z-index:2;text-align:center;margin:0;
font-family:var(--display);font-weight:850;letter-spacing:-.02em;color:#fff;
font-size:clamp(1.2rem,4.4vw,1.8rem);text-shadow:0 2px 22px rgba(0,0,0,.9);padding:0 20px}
.imgband p b{background:linear-gradient(100deg,#19d68a,#5ee2ff);
-webkit-background-clip:text;background-clip:text;color:transparent}
/* ============ MANIFESTO: what is for sale here ============ */
.manifesto{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
background:
radial-gradient(60% 90% at 50% 112%, rgba(25,214,138,.12) 0%, transparent 60%),
linear-gradient(180deg,#081019,#070b10)}
.mf-in{max-width:50rem;margin:0 auto;padding:clamp(46px,9vw,80px) 22px;text-align:center}
.manifesto h2{font-family:var(--display);font-weight:900;letter-spacing:-.05em;
font-size:clamp(2.2rem,8.6vw,4rem);line-height:.95;margin:0 0 16px;color:#fff}
.manifesto h2 em{font-style:normal;background:linear-gradient(100deg,#19d68a,#5ee2ff 48%,#c084fc);
-webkit-background-clip:text;background-clip:text;color:transparent}
.mf-lead{font-size:clamp(1.02rem,2.9vw,1.22rem);line-height:1.5;color:#dbe4ec;max-width:38rem;margin:0 auto 22px}
.mf-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:0 0 18px}
.mf-chips span{font-size:.68rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase;
color:var(--acc);background:rgba(25,214,138,.11);border:1px solid rgba(25,214,138,.36);
padding:8px 14px;border-radius:999px}
.mf-oath{font-family:var(--display);font-weight:800;letter-spacing:-.02em;color:#fff;
font-size:clamp(1.15rem,3.6vw,1.5rem);margin:0 0 18px}
.mf-help{font-size:.98rem;line-height:1.55;color:var(--text-soft);max-width:36rem;margin:0 auto 26px}
.mf-help b{color:#fff}
.mf-nosell{display:grid;gap:3px;max-width:34rem;margin:0 auto;border:1px solid rgba(255,95,69,.38);
border-radius:14px;padding:16px 18px;background:linear-gradient(180deg,rgba(255,95,69,.08),transparent)}
.mf-nosell b{font-family:var(--display);font-weight:900;letter-spacing:-.02em;color:#fff;
font-size:clamp(1.05rem,3.4vw,1.35rem)}
.mf-nosell span{font-size:.85rem;color:var(--text-dim)}
/* compliance strip at the top of every footer */
.ftr-nosell{margin:0 0 18px;padding:12px 16px;border:1px solid rgba(255,95,69,.34);border-radius:12px;
text-align:center;font-family:var(--display);font-weight:800;letter-spacing:-.01em;color:#fff;
font-size:clamp(.95rem,2.8vw,1.08rem);background:linear-gradient(180deg,rgba(255,95,69,.07),transparent)}
/* read next: two connected articles */
.next2{display:grid;gap:18px}
@media(min-width:640px){.next2{grid-template-columns:1fr 1fr;gap:26px}}
/* ============ TWO VIEWS: how he thinks ============ */
.twoview{position:relative;overflow:hidden;border-top:1px solid var(--line);
background:radial-gradient(70% 90% at 50% -10%, rgba(59,169,255,.10) 0%, transparent 60%),
linear-gradient(180deg,#080d14,#070b10)}
.tv-in{max-width:52rem;margin:0 auto;padding:clamp(46px,9vw,78px) 22px}
.twoview .eyebrow{display:block;text-align:center}
.twoview h2{font-family:var(--display);font-weight:900;letter-spacing:-.05em;text-align:center;
font-size:clamp(2.1rem,8vw,3.6rem);line-height:.97;margin:0 0 16px;color:#fff}
.twoview h2 em{font-style:normal;background:linear-gradient(100deg,#ff5f45,#ffb020 60%,#5ee2ff);
-webkit-background-clip:text;background-clip:text;color:transparent}
.tv-lead{text-align:center;font-size:clamp(1rem,2.9vw,1.18rem);line-height:1.5;color:#dbe4ec;
max-width:36rem;margin:0 auto 30px}
.tv-grid{display:grid;gap:14px;margin:0 0 30px}
@media(min-width:700px){.tv-grid{grid-template-columns:1fr 1fr;gap:18px}}
.tv-card{position:relative;border:1px solid var(--line-bright);border-radius:16px;
padding:20px 20px 22px;background:linear-gradient(180deg,var(--surface-2),rgba(13,20,28,.6))}
.tv-card::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:3px}
.tv-a::before{background:linear-gradient(180deg,#ff5f45,transparent)}
.tv-b::before{background:linear-gradient(180deg,#3ba9ff,transparent)}
.tv-card .k{display:block;font-size:.66rem;font-weight:850;letter-spacing:.17em;text-transform:uppercase;
margin:0 0 8px}
.tv-a .k{color:#ff8b76}
.tv-b .k{color:#7cc4ff}
.tv-card b{display:block;font-family:var(--display);font-weight:850;letter-spacing:-.03em;
font-size:clamp(1.15rem,3.6vw,1.42rem);line-height:1.06;color:#fff;margin:0 0 9px}
.tv-card span.v{display:block;font-size:.95rem;line-height:1.5;color:var(--text-soft)}
.tv-pivot{text-align:center;font-family:var(--display);font-weight:850;letter-spacing:-.03em;
font-size:clamp(1.3rem,4.6vw,2rem);line-height:1.1;color:#fff;margin:0 0 20px}
.tv-pivot em{font-style:normal;color:var(--acc)}
.tv-req{display:grid;gap:10px;margin:0 0 12px}
.tv-req div{position:relative;padding:12px 15px 12px 40px;border-radius:12px;
background:linear-gradient(180deg,rgba(25,214,138,.07),transparent);
border:1px solid rgba(25,214,138,.22);font-size:.97rem;line-height:1.48;color:#e6eef4}
.tv-req div b{color:#fff;font-weight:800}
.tv-req div::before{content:"";position:absolute;left:16px;top:19px;width:8px;height:8px;border-radius:50%;
background:var(--acc);box-shadow:0 0 10px rgba(25,214,138,.65)}
.tv-ref{font-size:.8rem;color:var(--text-dim);margin:0 0 30px;text-align:center}
.tv-nojudge{border:1px solid var(--line-bright);border-radius:16px;padding:22px 20px;
background:linear-gradient(180deg,rgba(19,29,39,.9),rgba(13,20,28,.5));margin:0 0 24px}
.tv-nojudge b{display:block;font-family:var(--display);font-weight:900;letter-spacing:-.03em;
font-size:clamp(1.2rem,4vw,1.6rem);line-height:1.08;color:#fff;margin:0 0 10px}
.tv-nojudge p{font-size:.98rem;line-height:1.55;color:var(--text-soft);margin:0 0 9px}
.tv-nojudge p:last-child{margin:0}
.tv-close{text-align:center;font-size:clamp(1rem,3vw,1.16rem);line-height:1.5;color:#dbe4ec;
max-width:34rem;margin:0 auto}
.tv-close b{color:#fff}
/* secondary write button, ranked above call */
.b-write{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
color:#dbe4ec;background:var(--surface-2);border:1px solid var(--line-bright);
font-weight:800;font-size:.98rem;padding:15px 22px;border-radius:999px;transition:border-color .18s,color .18s}
@media (hover:hover){.b-write:hover{border-color:var(--acc);color:#fff}}
.wa-bar .wr{display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;
color:#dbe4ec;background:var(--surface-2);border:1px solid var(--line-bright);
font-weight:800;font-size:.9rem;padding:0 16px;border-radius:999px;height:52px;flex:none}
@media (hover:hover){.wa-bar .wr:hover{border-color:var(--acc);color:#fff}}
.wa-bar .c{opacity:.72}
@media (max-width:420px){
.wa-bar .wr span{display:none}
.wa-bar .wr{padding:0 15px}
}
/* slim education-only notice, sits under the header on every page */
.eonly{border-bottom:1px solid var(--line);background:rgba(13,20,28,.55)}
.eonly p{max-width:74rem;margin:0 auto;padding:7px 22px;text-align:center;
font-size:11px;line-height:1.4;letter-spacing:.03em;color:var(--text-dim)}
.eonly p b{color:var(--text-soft);font-weight:700}