/* ============================================================
REYAH, marketing website design system
Clinical premium · light/white · DM Sans · orange-red accent
Used by: Home, Calculator, (future) Blog, SEO pages, Footer
============================================================ */
/* ---------- font ----------
Fonts are loaded via in each page
(with preconnect), NOT via @import here. An @import forces a serial
download chain (CSS → font CSS → font files) that blocks the LCP text.
Keep the in head in sync if weights change. */
:root{
/* Single merged :root. Where a property was later re-declared in the
v2 / v2.2 layers, the final effective value is used here. */
/* ---- ink + neutrals ---- */
--ink:#0E1217; /* near-black primary text */
--ink-2:#39414C; /* strong secondary */
--body:#525B66; /* body copy */
--muted:#636A73; /* muted / captions, AA (>=4.6:1) on white AND warm --bg-soft-2 */
--faint:#5F6671; /* faintest labels, AA on white AND warm soft surfaces */
/* ---- surfaces (warm paper, per Elevation Pass v2.2) ---- */
--bg:#FFFFFF;
--bg-soft:#F8F6F2; /* warm soft section */
--bg-soft-2:#F1EDE6; /* slightly deeper warm */
--ink-bg:#0E1217; /* rare dark surface (footer) */
/* ---- lines (warm, per v2.2) ---- */
--line:#E9E5DE; /* default border */
--line-soft:#F0ECE5; /* hairline */
--line-strong:#DBD6CD;
/* ---- brand accent (orange-red) ---- */
--accent:#FF4A1C;
--accent-2:#E11D2A;
--accent-ink:#D81F23; /* accent used as text on white */
--accent-wash:#FFF1ED; /* faint accent fill */
--accent-line:#FFD3C7;
--grad:linear-gradient(135deg,#FF4A1C 0%,#E11D2A 100%);
--grad-cta:linear-gradient(135deg,#D93A14 0%,#E11D2A 100%); /* darker start so #fff text hits WCAG AA 4.5:1 on gradient backgrounds */
--grad-soft:linear-gradient(135deg,#FFF3EF 0%,#FFEAE6 100%);
/* ---- radius ---- */
--r:16px;
--r-lg:22px;
--r-xl:30px;
--r-pill:999px;
/* ---- shadow (soft, clinical) ---- */
--sh-xs:0 1px 2px rgba(14,18,23,0.05);
--sh-sm:0 1px 2px rgba(14,18,23,0.04), 0 4px 12px rgba(14,18,23,0.05);
--sh-md:0 2px 4px rgba(14,18,23,0.04), 0 12px 28px rgba(14,18,23,0.07);
--sh-lg:0 4px 8px rgba(14,18,23,0.05), 0 24px 60px rgba(14,18,23,0.10);
--sh-accent:0 12px 34px rgba(225,29,42,0.28);
--sh-ring:inset 0 1px 0 rgba(255,255,255,0.65), 0 1px 2px rgba(14,18,23,0.04), 0 10px 30px rgba(14,18,23,0.06);
--sh-pop:0 2px 4px rgba(14,18,23,0.04), 0 18px 48px rgba(14,18,23,0.10);
--accent-glow:0 10px 30px -6px rgba(225,29,42,0.40);
/* ---- motion ---- */
--ease:cubic-bezier(.22,.61,.36,1);
/* ---- type ---- */
--f:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
--f-mono:'DM Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
--fs-display:clamp(2.7rem,1.6rem + 4.0vw,4.6rem);
--fs-h1:clamp(2.0rem,1.4rem + 2.4vw,3.05rem);
--fs-h2:clamp(1.7rem,1.25rem + 1.8vw,2.5rem);
--fs-h3:1.32rem;
--fs-lead:clamp(1.08rem,1.0rem + 0.4vw,1.3rem);
--fs-body:1.0625rem;
--fs-sm:0.9375rem;
--fs-xs:0.8125rem;
--fs-eyebrow:0.8125rem;
/* ---- layout (wider content, per v2.2) ---- */
--container:1340px;
--container-wide:1480px;
--gutter:clamp(20px,4vw,52px);
--nav-h:72px;
}
/* ---------- reset ---------- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}
body{
margin:0;font-family:var(--f);background:var(--bg);color:var(--ink);
font-size:var(--fs-body);line-height:1.6;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4,p{margin:0;}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:4px;}
/* ---------- layout helpers ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.container.wide{max-width:var(--container-wide);}
.section{padding-block:clamp(64px,8vw,118px);}
.section.tight{padding-block:clamp(48px,6vw,80px);}
.section--soft{background:var(--bg-soft);}
.stack{display:flex;flex-direction:column;}
.center{text-align:center;}
.row{display:flex;align-items:center;}
.wrap{flex-wrap:wrap;}
/* ---------- type utilities ---------- */
.display{
font-size:var(--fs-display);font-weight:600;line-height:1.04;
letter-spacing:-0.033em;color:var(--ink);text-wrap:balance;
}
.h1{font-size:var(--fs-h1);font-weight:600;line-height:1.08;letter-spacing:-0.028em;text-wrap:balance;}
.h2{font-size:var(--fs-h2);font-weight:600;line-height:1.12;letter-spacing:-0.026em;text-wrap:balance;}
.h3{font-size:var(--fs-h3);font-weight:600;line-height:1.25;letter-spacing:-0.015em;}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--body);font-weight:400;text-wrap:pretty;}
.body{color:var(--body);text-wrap:pretty;}
.muted{color:var(--muted);}
.sm{font-size:var(--fs-sm);}
.xs{font-size:var(--fs-xs);}
.accent{color:var(--accent-ink);}
.grad-text{color:var(--accent-ink);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.grad-text{
background:var(--grad);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
}
.mono{font-family:var(--f-mono);}
.eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:0.13em;
text-transform:uppercase;color:var(--accent-ink);
}
.eyebrow.muted-eye{color:var(--muted);}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;opacity:0.65;}
.eyebrow.bare::before{display:none;}
/* ---------- pill badge ---------- */
.badge{
display:inline-flex;align-items:center;gap:9px;
padding:7px 15px 7px 11px;border-radius:var(--r-pill);
background:var(--bg);border:1px solid var(--line);
font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);
box-shadow:var(--sh-xs);
}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px var(--accent-wash);}
.badge.soft{background:var(--accent-wash);border-color:var(--accent-line);color:var(--accent-ink);}
.badge.soft .dot{box-shadow:none;}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-family:var(--f);font-size:var(--fs-body);font-weight:600;line-height:1;
padding:14px 24px;border-radius:var(--r-pill);border:1px solid transparent;
cursor:pointer;transition:transform .16s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
white-space:nowrap;
}
.btn svg{width:18px;height:18px;}
.btn--primary{background:var(--grad-cta);color:#fff;box-shadow:var(--sh-accent);background-size:140% 140%;background-position:0% 50%;}
.btn--primary:hover{transform:translateY(-1px);background-position:100% 50%;box-shadow:0 16px 40px rgba(225,29,42,0.34);}
.btn--ghost{background:var(--bg);color:var(--ink);border-color:var(--line-strong);box-shadow:var(--sh-xs);}
.btn--ghost:hover{border-color:var(--ink-2);transform:translateY(-1px);}
.btn--dark{background:var(--ink);color:#fff;}
.btn--dark:hover{transform:translateY(-1px);background:#1b212b;}
.btn--light{background:rgba(255,255,255,0.14);color:#fff;border-color:rgba(255,255,255,0.30);}
.btn--light:hover{background:rgba(255,255,255,0.22);}
.btn--white{background:#fff;color:var(--accent-ink);}
.btn--white:hover{transform:translateY(-1px);box-shadow:var(--sh-md);}
.btn--sm{padding:10px 18px;font-size:var(--fs-sm);}
.btn--lg{padding:17px 30px;font-size:1.12rem;}
.btn--block{width:100%;}
.btn-link{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--accent-ink);}
.btn-link svg{width:16px;height:16px;transition:transform .18s ease;}
.btn-link:hover svg{transform:translateX(3px);}
/* ---------- card ---------- */
.card{
background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--sh-sm);
}
.card.pad{padding:clamp(24px,3vw,34px);}
.card.hover{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.card.hover:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--line-strong);}
.card--soft{background:var(--bg-soft);box-shadow:none;}
.card--accent{background:var(--grad-cta);color:#fff;border:none;}
/* ---------- nav ---------- */
.nav{
position:sticky;top:0;z-index:60;
background:rgba(255,255,255,0.78);backdrop-filter:saturate(180%) blur(18px);
-webkit-backdrop-filter:saturate(180%) blur(18px);
border-bottom:1px solid transparent;transition:border-color .2s ease,box-shadow .2s ease;
}
.nav.scrolled{border-bottom-color:var(--line);box-shadow:0 1px 0 rgba(14,18,23,0.02);}
.nav__inner{height:var(--nav-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;}
.nav__logo{display:flex;align-items:center;gap:10px;flex:0 0 auto;justify-self:start;}
.nav__logo img{height:26px;width:auto;}
.nav__links{display:flex;align-items:center;gap:4px;justify-self:center;}
.nav__links a{
padding:11px 14px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:500;
color:var(--ink-2);transition:background .15s ease,color .15s ease;
}
.nav__links a:hover{background:var(--bg-soft-2);color:var(--ink);}
.nav__cta{display:flex;align-items:center;gap:10px;flex:0 0 auto;justify-self:end;}
.nav__toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:#fff;align-items:center;justify-content:center;}
.nav__toggle span{position:relative;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.2s;}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.2s;}
.nav__toggle span::before{top:-6px;}
.nav__toggle span::after{top:6px;}
/* ---------- stat ---------- */
.stat{display:flex;flex-direction:column;gap:6px;}
.stat__num{
font-size:clamp(2.4rem,1.6rem + 2.6vw,3.6rem);font-weight:600;
letter-spacing:-0.035em;line-height:1;color:var(--ink);
}
.stat__num .u{font-size:0.5em;font-weight:600;vertical-align:0.06em;margin-left:1px;}
.stat__num.grad{color:var(--accent-ink);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.stat__num.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
}
.stat__label{font-size:var(--fs-sm);color:var(--muted);font-weight:500;letter-spacing:0.005em;}
/* ---------- step (how it works) ---------- */
.step{position:relative;display:flex;flex-direction:column;gap:16px;height:100%;}
.step__num{
font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:500;letter-spacing:0.14em;
text-transform:uppercase;color:var(--accent-ink);
}
.step__icon{
width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
background:var(--accent-wash);border:1px solid var(--accent-line);color:var(--accent-2);
}
.step__icon svg{width:24px;height:24px;}
/* ---------- logo strip ---------- */
.logostrip{display:flex;align-items:center;justify-content:center;gap:clamp(28px,5vw,62px);flex-wrap:wrap;}
.logostrip img{
width:auto;opacity:0.95;filter:grayscale(1);
transition:filter .25s ease,opacity .25s ease;
}
.logostrip img:hover{filter:grayscale(0);opacity:1;}
/* ---------- testimonial ---------- */
.quote-card{display:flex;flex-direction:column;gap:22px;height:100%;}
.quote-card p{font-size:1.18rem;line-height:1.5;color:var(--ink);letter-spacing:-0.012em;font-weight:500;}
.quote-card .by{display:flex;align-items:center;gap:13px;margin-top:auto;}
.quote-card .by .av{width:44px;height:44px;border-radius:50%;background:var(--bg-soft-2);object-fit:cover;border:1px solid var(--line);}
.quote-card .by b{font-size:var(--fs-sm);font-weight:600;display:block;}
.quote-card .by span{font-size:var(--fs-xs);color:var(--muted);display:block;}
.qmark{font-family:Georgia,serif;font-size:2.4rem;line-height:0;color:var(--accent-ink);height:18px;}
/* ---------- portrait video card ---------- */
.vcard{
position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/4;
background:var(--bg-soft-2);border:1px solid var(--line);box-shadow:var(--sh-sm);
display:flex;align-items:flex-end;
}
.vcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.vcard__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,18,23,0) 38%,rgba(14,18,23,0.72) 100%);}
.vcard__play{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,0.92);
display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-md);
transition:transform .18s ease,background .18s ease;
}
.vcard:hover .vcard__play{transform:translate(-50%,-50%) scale(1.07);}
.vcard__play svg{width:22px;height:22px;color:var(--accent-2);margin-left:3px;}
.vcard__cap{position:relative;z-index:2;padding:20px;color:#fff;}
.vcard__cap b{display:block;font-weight:600;font-size:var(--fs-sm);}
.vcard__cap span{display:block;font-size:var(--fs-xs);opacity:0.82;}
/* ---------- CTA banner (gradient) ---------- */
.cta-banner{
position:relative;overflow:hidden;border-radius:var(--r-xl);
background:var(--grad-cta);color:#fff;padding:clamp(40px,6vw,76px);
box-shadow:var(--sh-accent);
}
.cta-banner__glow{position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 140% at 85% -10%,rgba(255,255,255,0.30),transparent 55%),
radial-gradient(80% 120% at 0% 120%,rgba(0,0,0,0.18),transparent 60%);}
.cta-banner > *{position:relative;z-index:1;}
/* ---------- FAQ accordion ---------- */
.faq{border-top:1px solid var(--line);}
.faq__item{border-bottom:1px solid var(--line);}
.faq__q{
width:100%;display:flex;align-items:center;gap:18px;justify-content:space-between;
background:none;border:none;text-align:left;padding:26px 6px;
font-size:1.16rem;font-weight:600;color:var(--ink);letter-spacing:-0.01em;
}
.faq__q .ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong);
display:flex;align-items:center;justify-content:center;color:var(--accent-2);transition:.22s;}
.faq__q .ic svg{width:14px;height:14px;}
.faq__item.open .faq__q .ic{background:var(--grad);border-color:transparent;color:#fff;transform:rotate(180deg);}
.faq__a{overflow:hidden;max-height:0;transition:max-height .3s ease;}
.faq__a-inner{padding:0 6px 26px;color:var(--body);max-width:64ch;}
/* ---------- footer ---------- */
.footer{background:var(--ink-bg);color:#C9CDD4;}
.footer a{color:#C9CDD4;transition:color .15s ease;}
.footer a:hover{color:#fff;}
.footer__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;padding-block:clamp(48px,6vw,72px);}
.footer__brand img{height:58px;width:auto;filter:brightness(0) invert(1);opacity:0.95;}
.footer h5,.footer .footer__col-title{color:#fff;font-size:var(--fs-xs);font-weight:600;letter-spacing:0.12em;text-transform:uppercase;margin:0 0 16px;}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:var(--fs-sm);}
.footer__bottom{border-top:1px solid rgba(255,255,255,0.10);padding-block:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:var(--fs-xs);color:#8A909A;}
/* ---------- divider ---------- */
.hr{height:1px;background:var(--line);border:0;}
/* ---------- reveal animation ---------- */
@media (prefers-reduced-motion:no-preference){
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
}
/* ---------- responsive ---------- */
@media (max-width:920px){
:root{--nav-h:64px;}
.nav__links{display:none;}
.nav__toggle{display:flex;}
.footer__grid{grid-template-columns:1fr 1fr;gap:32px;}
.footer__brand{grid-column:1 / -1;}
}
@media (max-width:560px){
.footer__grid{grid-template-columns:1fr;}
.btn--block-m{width:100%;}
}
/* ============================================================
PREMIUM LAYER v2, depth, motion, refinement + new components
(source-order overrides the base above)
============================================================ */
body{background:var(--bg);}
/* faint warm page wash so white isn't clinical-flat */
body::before{
content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
background:
radial-gradient(60% 50% at 88% -8%, rgba(255,74,28,0.05), transparent 60%),
radial-gradient(50% 40% at -6% 4%, rgba(225,29,42,0.035), transparent 60%);
}
/* ---------- background ornaments (subtle) ---------- */
.mesh{position:relative;isolation:isolate;}
.mesh::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(46% 60% at 82% 0%, rgba(255,74,28,0.07), transparent 62%),
radial-gradient(40% 55% at 6% 18%, rgba(225,29,42,0.05), transparent 60%);
}
.dotgrid{position:relative;}
.dotgrid::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0.6;
background-image:radial-gradient(rgba(14,18,23,0.05) 1px, transparent 1px);
background-size:30px 30px;-webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);
mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);
}
.dotgrid > *{position:relative;z-index:1;}
/* ---------- refined nav ---------- */
.nav{background:rgba(255,255,255,0.72);}
.nav.scrolled{box-shadow:0 1px 0 var(--line), 0 8px 30px -18px rgba(14,18,23,0.18);}
.nav__links a{position:relative;}
.nav__links a.active{color:var(--ink);background:var(--bg-soft-2);}
.nav__links a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);}
.nav__links a.active::after{transform:scaleX(1);}
/* nav dropdown */
.nav__has{position:relative;}
.nav__menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(6px);min-width:248px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-pop);padding:8px;opacity:0;visibility:hidden;transition:.18s var(--ease);}
.nav__has:hover .nav__menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.nav__menu a{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border-radius:10px;}
.nav__menu a:hover{background:var(--bg-soft);}
.nav__menu a b{font-size:var(--fs-sm);font-weight:600;color:var(--ink);}
.nav__menu a span{font-size:var(--fs-xs);color:var(--muted);}
.drawer__panel .sub{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);font-weight:600;padding:14px 12px 4px;}
.skip-link{position:absolute;left:8px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:11px 18px;border-radius:0 0 12px 12px;font-weight:600;font-size:var(--fs-sm);transition:top .18s var(--ease);}
.skip-link:focus{top:0;}
.guidegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:860px){.guidegrid{grid-template-columns:1fr;}}
.byline{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:0.04em;color:var(--muted);margin-top:14px;}
.founder{display:grid;grid-template-columns:300px 1fr;gap:clamp(28px,4vw,56px);align-items:center;}
.founder__photo{width:100%;border-radius:var(--r-xl);aspect-ratio:1/1;object-fit:cover;box-shadow:var(--sh-pop);}
@media(max-width:760px){.founder{grid-template-columns:1fr;}.founder__photo{max-width:240px;}}
.mobile-cta{display:none;}
@media(max-width:760px){.mobile-cta{position:fixed;left:14px;right:14px;bottom:14px;z-index:90;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--grad);color:#fff;padding:15px;border-radius:var(--r-pill);font-weight:600;font-size:1.02rem;box-shadow:var(--accent-glow);}.mobile-cta svg{width:18px;height:18px;}}
/* ---------- buttons: sheen + lift ---------- */
.btn{transition:transform .18s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),border-color .2s var(--ease),color .2s var(--ease);}
.btn--primary{box-shadow:var(--accent-glow);position:relative;overflow:hidden;}
.btn--primary::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,0.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s var(--ease);}
.btn--primary:hover::after{transform:translateX(120%);}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px -8px rgba(225,29,42,0.5);}
.btn--ghost{background:rgba(255,255,255,0.9);}
.btn--ghost:hover{box-shadow:var(--sh-sm);}
/* ---------- cards: ring + hover ---------- */
.card{box-shadow:var(--sh-ring);transition:transform .25s var(--ease),box-shadow .3s var(--ease),border-color .25s var(--ease);}
.card.hover:hover{transform:translateY(-4px);box-shadow:var(--sh-pop);}
.card--glass{background:rgba(255,255,255,0.7);backdrop-filter:blur(10px);}
/* ---------- kicker (numbered eyebrow) ---------- */
.kicker{display:inline-flex;align-items:center;gap:11px;font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:0.13em;text-transform:uppercase;color:var(--accent-ink);}
.kicker .num{font-family:var(--f-mono);font-size:11px;font-weight:500;background:var(--accent-wash);border:1px solid var(--accent-line);color:var(--accent-ink);width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;letter-spacing:0;}
/* ---------- staggered reveal ---------- */
@media (prefers-reduced-motion:no-preference){
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease),transform .65s var(--ease);}
[data-reveal].in{opacity:1;transform:none;}
[data-reveal-stagger] > *{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
[data-reveal-stagger].in > *{opacity:1;transform:none;}
[data-reveal-stagger].in > *:nth-child(1){transition-delay:.02s;}
[data-reveal-stagger].in > *:nth-child(2){transition-delay:.09s;}
[data-reveal-stagger].in > *:nth-child(3){transition-delay:.16s;}
[data-reveal-stagger].in > *:nth-child(4){transition-delay:.23s;}
[data-reveal-stagger].in > *:nth-child(5){transition-delay:.30s;}
[data-reveal-stagger].in > *:nth-child(6){transition-delay:.37s;}
}
/* ---------- marquee (logo strip) ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee__track{display:flex;align-items:center;gap:clamp(34px,5vw,64px);width:max-content;animation:marquee 38s linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee__track img{height:30px;width:auto;filter:grayscale(1);opacity:0.62;transition:.25s;}
.marquee__track img:hover{filter:grayscale(0);opacity:1;}
@keyframes marquee{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none;}}
/* ---------- pill stat / inline metric ---------- */
.metric-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 11px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--line);box-shadow:var(--sh-xs);font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);white-space:nowrap;}
.metric-pill b{color:var(--accent-ink);font-weight:700;}
/* ---------- mechanism flow ---------- */
.flow{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;align-items:stretch;}
.flow__node{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:16px 14px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sh-xs);position:relative;}
.flow__node .ic{width:34px;height:34px;border-radius:10px;background:var(--accent-wash);color:var(--accent-2);display:flex;align-items:center;justify-content:center;}
.flow__node .ic svg{width:18px;height:18px;}
.flow__node b{font-size:var(--fs-sm);font-weight:600;letter-spacing:-0.01em;line-height:1.2;}
.flow__node span{font-size:12px;color:var(--muted);line-height:1.35;}
.flow__node.win{background:var(--grad);border:none;color:#fff;box-shadow:var(--accent-glow);}
.flow__node.win .ic{background:rgba(255,255,255,0.2);color:#fff;}
.flow__node.win span{color:rgba(255,255,255,0.9);}
@media (max-width:860px){.flow{grid-template-columns:repeat(2,1fr);} }
/* ---------- 10-day sequence timeline ---------- */
.seq{position:relative;display:flex;flex-direction:column;}
.seq__item{display:grid;grid-template-columns:84px 1fr;gap:22px;padding:18px 0;border-bottom:1px solid var(--line-soft);position:relative;}
.seq__item:last-child{border-bottom:none;}
.seq__day{display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.seq__day .d{font-family:var(--f-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);}
.seq__day .n{font-size:1.5rem;font-weight:700;letter-spacing:-0.03em;color:var(--ink);line-height:1;}
.seq__body b{font-size:1.02rem;font-weight:600;display:flex;align-items:center;gap:10px;}
.seq__chan{font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:var(--accent-wash);color:var(--accent-ink);border:1px solid var(--accent-line);font-weight:500;}
.seq__body p{font-size:var(--fs-sm);color:var(--body);margin-top:5px;max-width:58ch;}
.seq__item.peak .seq__chan{background:var(--grad);color:#fff;border:none;}
/* ---------- compare table (agency vs system) ---------- */
.compare{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg);box-shadow:var(--sh-ring);}
.compare th,.compare td{text-align:left;padding:18px 22px;vertical-align:middle;font-size:var(--fs-sm);}
.compare thead th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);font-weight:600;background:var(--bg-soft);border-bottom:1px solid var(--line);}
.compare thead th.reyah{color:#fff;background:var(--grad);}
.compare tbody tr+tr td{border-top:1px solid var(--line-soft);}
.compare .rl{font-weight:600;color:var(--ink);width:30%;}
.compare td.old{color:var(--muted);}
.compare td.reyah{background:var(--accent-wash);color:var(--ink);font-weight:600;}
.compare td .ck{color:var(--accent-2);}
.compare tbody tr:last-child td.reyah{}
/* ---------- pricing card ---------- */
.pricecard{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--ink-bg);color:#fff;padding:clamp(30px,3.4vw,48px);box-shadow:var(--sh-lg);}
.pricecard::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 100% -10%,rgba(255,74,28,0.5),transparent 55%),radial-gradient(50% 60% at -10% 110%,rgba(225,29,42,0.4),transparent 55%);opacity:.5;}
.pricecard > *{position:relative;}
.pricecard .price{font-size:clamp(3rem,2rem + 3.4vw,4.4rem);font-weight:700;letter-spacing:-0.04em;line-height:1;}
.pricecard .price .cur{font-size:0.42em;font-weight:600;vertical-align:0.7em;color:rgba(255,255,255,0.7);margin-right:4px;}
.pricecard ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:13px;}
.pricecard li{display:flex;gap:12px;align-items:flex-start;color:rgba(255,255,255,0.92);font-size:var(--fs-sm);line-height:1.45;}
.pricecard li svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;color:#fff;}
.pricecard .split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px;}
.pricecard .split div{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);border-radius:14px;padding:16px;}
.pricecard .split b{font-size:1.5rem;font-weight:700;letter-spacing:-0.02em;}
.pricecard .split span{display:block;font-size:var(--fs-xs);color:rgba(255,255,255,0.7);margin-top:3px;}
/* ---------- callout / note ---------- */
.callout{border:1px solid var(--accent-line);background:var(--accent-wash);border-radius:var(--r);padding:20px 22px;display:flex;gap:14px;align-items:flex-start;}
.callout svg{width:20px;height:20px;color:var(--accent-2);flex:0 0 auto;margin-top:2px;}
.callout p{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5;}
.callout b{color:var(--ink);}
/* ---------- breadcrumb ---------- */
.crumb{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--muted);flex-wrap:wrap;}
.crumb a{color:var(--muted);}
.crumb a:hover{color:var(--accent-ink);}
.crumb svg{width:13px;height:13px;opacity:0.6;}
.crumb .here{color:var(--ink-2);font-weight:600;}
/* ---------- article / prose ---------- */
.prose{max-width:72ch;}
.prose > * + *{margin-top:1.15em;}
.prose h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);font-weight:600;letter-spacing:-0.02em;line-height:1.2;margin-top:2em;scroll-margin-top:calc(var(--nav-h) + 20px);}
.prose h3{font-size:1.28rem;font-weight:600;letter-spacing:-0.015em;margin-top:1.6em;}
.prose p,.prose li{font-size:1.075rem;line-height:1.72;color:var(--ink-2);}
.prose ul,.prose ol{padding-left:1.3em;display:flex;flex-direction:column;gap:.5em;}
.prose li::marker{color:var(--accent-2);}
.prose strong{color:var(--ink);font-weight:600;}
.prose a{color:var(--accent-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:3px;}
/* buttons inside prose must keep their own colour, not the inline-link style */
.prose a.btn{text-decoration:none;}
.prose a.btn--primary{color:#fff;}
.prose a.btn--white{color:var(--accent-ink);}
.prose a.btn--ghost,.prose a.btn--light{color:inherit;}
.prose blockquote{border-left:3px solid var(--accent);padding:6px 0 6px 22px;margin-left:0;font-size:1.2rem;line-height:1.5;color:var(--ink);font-weight:500;}
.prose .lead{font-size:1.22rem;color:var(--ink-2);}
/* ---------- article card (guides hub): text-only, no thumbnail ---------- */
.artcard{position:relative;display:flex;flex-direction:column;height:100%;padding:30px 28px 26px;overflow:hidden;}
.artcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.artcard:hover::before{transform:scaleX(1);}
.artcard .tag{align-self:flex-start;font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.07em;color:var(--accent-ink);background:var(--accent-wash);border:1px solid var(--accent-line);padding:5px 11px;border-radius:var(--r-pill);}
.artcard h3,.artcard h2{font-size:1.2rem;font-weight:600;letter-spacing:-0.015em;line-height:1.3;margin-top:20px;color:var(--ink);}
.artcard p{font-size:var(--fs-sm);color:var(--body);margin-top:10px;line-height:1.6;flex:1 1 auto;}
.artcard .more{margin-top:20px;}
/* ---------- footer CTA strip ---------- */
.footcta-strip{border-top:1px solid rgba(255,255,255,0.1);}
/* ---------- section heading helper ---------- */
.shead{max-width:62ch;}
.shead.center{margin-inline:auto;text-align:center;}
.shead.center .kicker,.shead.center .eyebrow{justify-content:center;}
.shead .kicker, .shead .eyebrow{margin-bottom:18px;}
.shead .lead{margin-top:18px;}
@media (max-width:920px){
.nav__menu{display:none;}
}
/* ============================================================
PREMIUM HOVER / DEPTH, cards & buttons (v2.1)
============================================================ */
/* every card lifts on hover with deeper shadow */
.card{transition:transform .26s var(--ease),box-shadow .3s var(--ease),border-color .25s var(--ease);}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-pop);border-color:var(--line-strong);}
.card--accent:hover,.fix--reyah:hover{box-shadow:0 18px 48px -10px rgba(225,29,42,0.45);}
.card--soft:hover{box-shadow:var(--sh-md);}
/* stat cells */
.stat{transition:background .25s var(--ease);}
.stats .stat:hover{background:var(--bg-soft);}
/* mechanism flow nodes */
.flow__node{transition:transform .22s var(--ease),box-shadow .26s var(--ease);}
.flow__node:hover{transform:translateY(-4px);box-shadow:var(--sh-md);}
.flow__node.win:hover{box-shadow:0 16px 40px -10px rgba(225,29,42,0.5);}
/* buttons, richer press + lift */
.btn{will-change:transform;}
.btn:active{transform:translateY(0) scale(.985);}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 42px -10px rgba(225,29,42,0.52);}
.btn--ghost:hover{border-color:var(--accent-line);box-shadow:0 10px 24px -10px rgba(14,18,23,0.22);transform:translateY(-2px);}
.btn--dark:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(14,18,23,0.45);}
.btn--white:hover{transform:translateY(-2px);box-shadow:0 14px 32px -10px rgba(14,18,23,0.25);}
.btn--light:hover{transform:translateY(-2px);}
/* link-arrow buttons nudge */
.btn-link:hover{color:var(--accent-2);}
/* ============================================================
ELEVATION PASS v2.2, warmth, depth, designed detail
============================================================ */
/* (Token overrides from this layer were merged into the single :root at the top.) */
/* ambient brand blooms behind everything */
body::before{
content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
background:
radial-gradient(38% 32% at 84% -4%, rgba(255,74,28,0.10), transparent 70%),
radial-gradient(34% 30% at 6% 8%, rgba(225,29,42,0.06), transparent 70%),
radial-gradient(40% 36% at 92% 96%, rgba(255,106,44,0.06), transparent 72%);
}
/* fine grain for a tactile, non-flat surface */
body::after{
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.035;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* richer hero mesh glow */
.mesh::before{
background:
radial-gradient(42% 56% at 80% -6%, rgba(255,74,28,0.13), transparent 64%),
radial-gradient(38% 50% at 4% 14%, rgba(225,29,42,0.08), transparent 62%);
}
/* soft sections get a hairline gradient top edge */
.section--soft{position:relative;}
.section--soft::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--accent-line),transparent);opacity:.7;}
/* upgrade icon tiles to a soft gradient + ring */
.step__icon,.comply .ic,.infra .ic{
background:linear-gradient(150deg,#FFF1EC,#FFE2D9)!important;
border:1px solid var(--accent-line)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
}
/* mechanism flow: pipeline connectors + nicer nodes */
.flow__node{border-radius:16px;}
@media (min-width:861px){
.flow__node + .flow__node::before{
content:"";position:absolute;left:-9px;top:50%;width:7px;height:7px;
border-top:2px solid var(--accent);border-right:2px solid var(--accent);
transform:translateY(-50%) rotate(45deg);opacity:.55;
}
}
/* gradient underline accent for a keyword */
.u-grad{position:relative;white-space:nowrap;}
.u-grad::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:5px;border-radius:3px;
background:var(--grad);opacity:.22;}
/* card: subtle gradient sheen on hover (premium) */
.card{position:relative;}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
background:radial-gradient(80% 120% at 100% 0%, rgba(255,74,28,0.06), transparent 60%);transition:opacity .3s var(--ease);}
.card:hover::after{opacity:1;}
.card--accent::after,.fix--reyah::after{display:none;}
/* quote cards get an oversized soft quote mark */
.qmark{font-size:3rem;opacity:.9;}
/* ============================================================
Cookie consent banner (GDPR / AU Privacy Act).
Hidden until reyah-web.js shows it (no stored choice). Gates
GA4 via Google Consent Mode v2 — analytics fires only on Accept.
Sits above the mobile CTA (which is suppressed while open).
============================================================ */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:150;display:none;
padding:16px clamp(14px,4vw,28px);
padding-bottom:max(16px,env(safe-area-inset-bottom));
background:var(--bg);border-top:1px solid var(--line-strong);box-shadow:var(--sh-pop);}
.cc.cc--show{display:block;}
body.cc-open .mobile-cta{display:none;}
.cc__inner{max-width:var(--container);margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.cc__text{flex:1 1 340px;margin:0;font-size:var(--fs-sm);line-height:1.55;color:var(--body);}
.cc__text a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;}
.cc__actions{display:flex;gap:10px;flex:0 0 auto;}
.cc__btn{font-family:var(--f);font-size:var(--fs-sm);font-weight:600;cursor:pointer;
border-radius:var(--r-pill);padding:11px 22px;border:1px solid transparent;
transition:transform .12s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);}
.cc__btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;}
.cc__btn--decline{background:var(--bg);color:var(--ink-2);border-color:var(--line-strong);}
.cc__btn--decline:hover{background:var(--bg-soft);}
.cc__btn--accept{background:var(--grad);color:#fff;box-shadow:var(--sh-accent);}
.cc__btn--accept:hover{transform:translateY(-1px);}
@media(max-width:520px){
.cc__inner{flex-direction:column;align-items:stretch;gap:12px;}
.cc__actions{justify-content:stretch;}
.cc__btn{flex:1;}
}
@media(prefers-reduced-motion:reduce){.cc__btn{transition:none;}.cc__btn--accept:hover{transform:none;}}
/* ============================================================
Booking calendar (GHL) loading skeleton
Shows a centered "Loading Reyah's calendar…" message + spinner
behind the booking iframe while GoHighLevel connects. The
iframe paints its own white background over this once loaded,
so no JS toggle is required. Layered behind the iframe via a
::before (backdrop + copy) and ::after (spinner) on the embed.
============================================================ */
.booker__embed--loading{position:relative;background:var(--bg-soft);}
/* keep the iframe above the placeholder so GHL's white bg hides it */
.booker__embed--loading > iframe{position:relative;z-index:2;background:transparent;}
/* backdrop + "Loading Reyah's calendar…" copy */
.booker__embed--loading::before{
content:"Loading Reyah\2019s calendar\2026";
position:absolute;inset:0;z-index:1;
display:flex;align-items:center;justify-content:center;
padding-top:54px; /* sits just below the spinner */
font-family:var(--f-mono);font-size:var(--fs-sm);letter-spacing:0.04em;
color:var(--muted);text-align:center;
}
/* spinner: CSS-only border spinner, centered above the copy */
.booker__embed--loading::after{
content:"";
position:absolute;left:50%;top:50%;z-index:1;
width:34px;height:34px;margin:-44px 0 0 -17px; /* nudge above the text */
border-radius:50%;
border:3px solid var(--line-strong);
border-top-color:var(--accent-ink);
animation:bookerSpin .7s linear infinite;
}
@keyframes bookerSpin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){
.booker__embed--loading::after{animation:none;}
}