/* ===== Redo, product-page visual system =====
Near-white paper, ink text, one red accent. Generous whitespace,
centred section intros, tight display tracking, soft white cards.
Markup and content are unchanged from the source site. */
:root{
--paper:#F7F6F2;
--white:#FFFFFF;
--ink:#131313;
--red:#C11E1B;
--red-dark:#9E1815;
--blue:#9CC7F0;
--muted:rgba(19,19,19,0.66);
--muted-2:rgba(19,19,19,0.5);
--rule:rgba(19,19,19,0.12);
--rule-soft:rgba(19,19,19,0.09);
--ink-muted:rgba(247,246,242,0.72);
--ink-muted-2:rgba(247,246,242,0.55);
--ink-rule:rgba(247,246,242,0.18);
--card-radius:22px;
--sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
--sp-5:48px; --sp-6:64px; --sp-7:96px;
--sans:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
margin:0; overflow-x:clip; background:var(--paper); color:var(--ink);
font-family:var(--sans); font-weight:400;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; }
a{ color:var(--red); }
a:hover{ color:var(--ink); }
.site-page{ display:block; }
.site-page[hidden]{ display:none; }
.wrap{ max-width:1040px; margin:0 auto; padding:0 22px; }
/* ---------- section rhythm ---------- */
section{ padding:clamp(48px,6vw,96px) 0; }
.bg-cream{ background:var(--paper); color:var(--ink); }
.bg-blue{ background:var(--white); color:var(--ink); }
.bg-black{ background:var(--ink); color:var(--paper); }
.bg-cream + .bg-cream{ padding-top:0; }
.hero{ padding:clamp(48px,6.5vw,96px) 0 clamp(44px,5.5vw,84px); text-align:center; }
/* ---------- display type ---------- */
h1,h2,h3{ font-family:var(--sans); font-weight:600; letter-spacing:-0.03em; text-wrap:balance; }
h1 br,h2 br{ display:inline; }
@media(max-width:600px){ h1 br,h2 br{ display:none; } }
h1{ font-size:clamp(38px,6.6vw,84px); line-height:1.04; margin:0 auto 22px; max-width:20ch; }
h2{ font-size:clamp(28px,4.8vw,58px); line-height:1.08; letter-spacing:-0.028em; margin:0; }
.section-head h2{ max-width:30ch; }
h3{ font-size:clamp(19px,2.1vw,25px); line-height:1.18; letter-spacing:-0.02em; margin:0 0 12px; }
p{ margin:0 0 16px; }
p:last-child{ margin-bottom:0; }
.script{ color:var(--red); font-weight:600; }
.br-desktop{ display:inline; }
@media(max-width:700px){ .br-desktop{ display:none; } }
.br-mobile{ display:none; }
@media(max-width:700px){ .br-mobile{ display:inline; } }
@media(min-width:701px){ .nowrap-desktop{ white-space:nowrap; } }
@media(min-width:780px){ .closing-nowrap{ white-space:nowrap; } }
.bg-black .script{ color:var(--blue); }
.eyebrow{
font-size:clamp(15px,1.7vw,19px); font-weight:600; letter-spacing:-0.01em;
color:var(--red); margin:0 0 14px;
}
.bg-black .eyebrow{ color:var(--blue); }
.lede{
font-size:clamp(18px,2.1vw,25px); font-weight:400; line-height:1.36;
letter-spacing:-0.015em; color:var(--muted); max-width:62ch; margin:0 auto;
}
.bg-black .lede{ color:var(--ink-muted); }
.hero .lede{ margin:0 auto; }
.section-head{ text-align:center; margin:0 auto clamp(28px,3.4vw,48px); max-width:820px; }
.section-head p:not(.eyebrow){
font-size:clamp(16px,1.6vw,20px); line-height:1.5; letter-spacing:-0.01em;
color:var(--muted); max-width:56ch; margin:20px auto 0;
}
.bg-black .section-head p:not(.eyebrow){ color:var(--ink-muted); }
.section-head h2{ margin:0 auto; }
.narrative{
font-size:clamp(17px,1.8vw,21px); line-height:1.5; letter-spacing:-0.012em;
color:var(--muted); max-width:62ch; margin:0 auto; text-align:center;
}
.bg-black .narrative{ color:var(--ink-muted); }
.source,.billing-note,.group-note,.proof-disclaimer,.engine-caveat{
font-size:13px; line-height:1.55; color:var(--muted-2);
}
.bg-black .source,.bg-black .billing-note,.bg-black .group-note{ color:var(--ink-muted-2); }
.source{ margin:14px auto 0; max-width:none; white-space:nowrap; }
@media(max-width:820px){ .source{ white-space:normal; max-width:56ch; } }
.hero .source{ text-align:center; }
.billing-note{ margin:clamp(24px,3vw,36px) auto 0; text-align:center; max-width:70ch; }
.group-note,.proof-disclaimer{ margin:clamp(24px,3vw,36px) auto 0; text-align:center; max-width:74ch; }
.proof-disclaimer{ max-width:none; white-space:nowrap; }
@media(max-width:820px){ .proof-disclaimer{ white-space:normal; max-width:56ch; } }
/* ---------- nav ---------- */
nav{
position:sticky; top:0; z-index:60; height:48px; display:flex; align-items:center;
background:rgba(247,246,242,0.82);
-webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
border-bottom:1px solid rgba(19,19,19,0.08);
}
nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; }
.brand{
font-size:15px; font-weight:600; letter-spacing:-0.01em;
color:var(--ink); text-decoration:none; white-space:nowrap;
}
.brand span{ color:var(--muted-2); font-weight:400; }
.nav-links{ display:flex; align-items:center; gap:clamp(14px,2.4vw,30px); }
.nav-links a{ font-size:12px; color:rgba(19,19,19,0.78); text-decoration:none; white-space:nowrap; }
.nav-links a:hover{ color:var(--red); }
.nav-right-group{ display:flex; align-items:center; gap:16px; }
.nav-whatsapp{
display:inline-flex; align-items:center; gap:6px;
font-size:12px; color:rgba(19,19,19,0.78); text-decoration:none;
}
.nav-whatsapp:hover{ color:var(--red); }
.nav-cta{
font-size:12px; font-weight:500; text-decoration:none;
background:var(--red); color:var(--white);
padding:8px 16px; border-radius:999px; white-space:nowrap; transition:opacity .25s;
}
.nav-cta:hover{ opacity:0.86; color:var(--white); }
.back-link{ font-size:12px; color:var(--red); text-decoration:none; white-space:nowrap; }
@media(max-width:860px){ .nav-links{ display:none; } .nav-whatsapp span{ display:none; } }
/* ---------- calls to action ---------- */
.cta{
display:inline-flex; align-items:center; justify-content:center;
width:max-content; max-width:100%; white-space:nowrap;
background:var(--red); color:var(--white); border-radius:999px;
padding:13px 26px; margin-top:clamp(24px,3.4vw,40px);
font-size:15px; font-weight:500; letter-spacing:-0.01em; text-decoration:none;
transition:opacity .25s;
}
.cta:hover{ opacity:0.86; color:var(--white); }
.cta--check{ padding:16px 32px; font-size:17px; margin-top:clamp(10px,1.4vw,16px); }
.hero-cta-note{ display:block; margin-top:10px; font-size:13px; color:var(--muted-2); }
.pill-chain{
display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:10px;
margin-top:clamp(26px,3.4vw,40px);
}
@media(max-width:700px){ .pill-chain{ flex-wrap:wrap; } }
.pill{
display:inline-flex; align-items:center; gap:8px;
background:var(--white); border:1px solid var(--rule); border-radius:999px;
padding:10px 18px; font-size:13px; font-weight:500; letter-spacing:-0.005em;
}
.pill b{ font-weight:600; color:var(--red); }
.pill--fill{ background:var(--red); color:var(--white); border-color:transparent; }
.pill--fill b{ color:inherit; }
.arrow{ color:var(--muted-2); font-size:14px; }
/* ---------- cards ---------- */
.card-grid{
display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
gap:clamp(16px,2vw,24px);
}
.card-grid--3{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
@media(max-width:760px){ .card-grid,.card-grid--3{ grid-template-columns:1fr; } }
.card{
background:var(--white); border-radius:var(--card-radius);
padding:clamp(26px,3vw,42px); display:flex; flex-direction:column;
}
.bg-black .card{ background:#1E1E1E; }
.card .tag{ font-size:13px; font-weight:500; color:var(--red); margin:0 0 14px; }
.bg-black .card .tag{ color:var(--blue); }
.card p{ font-size:15px; line-height:1.55; color:var(--muted); margin:0 0 12px; }
.bg-black .card p{ color:var(--ink-muted); }
.card-stat{
margin:auto 0 0 !important; padding-top:16px;
font-size:13px !important; font-weight:600; color:var(--ink) !important;
letter-spacing:-0.005em;
}
.bg-black .card-stat{ color:var(--paper) !important; }
.problem-line{
text-align:center; font-size:clamp(22px,3.2vw,40px); font-weight:600;
line-height:1.12; letter-spacing:-0.03em;
margin:clamp(36px,5vw,72px) auto 0; max-width:26ch;
}
/* ---------- what changed / founders / our vision: compact editorial ---------- */
.add-section{ padding-top:clamp(32px,4vw,52px); padding-bottom:clamp(32px,4vw,52px); }
.add-head{ margin:0 auto clamp(10px,1.4vw,16px); }
.add-head h2{ font-size:clamp(24px,3.2vw,38px); line-height:1.2; letter-spacing:-0.02em; max-width:none; }
.add-body{ max-width:920px; margin:0 auto; text-align:center; }
.add-body p{ font-size:clamp(16px,1.6vw,19px); line-height:1.5; color:var(--muted); margin:0 0 6px; }
.add-body p:last-child{ margin-bottom:0; }
/* what changed */
.what-changed-emphasis{ font-weight:600 !important; color:var(--ink) !important; font-size:clamp(16px,1.6vw,19px) !important; }
/* founders */
.founders-grid{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(28px,4.4vw,64px); margin-top:clamp(20px,2.6vw,32px); text-align:left;
}
@media(max-width:760px){ .founders-grid{ grid-template-columns:1fr; gap:40px; } }
.founder{ border-top:1px solid var(--rule); padding-top:clamp(20px,2.4vw,28px); display:flex; flex-direction:column; }
.founder-photo{
width:100%; max-width:200px; aspect-ratio:4/5; overflow:hidden;
border-radius:var(--card-radius); background:var(--rule-soft); margin-bottom:18px;
}
.founder-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.founder-name{ font-size:clamp(19px,2vw,23px); font-weight:600; letter-spacing:-0.015em; margin:0 0 4px; }
.founder-role{ font-size:13px; font-weight:500; color:var(--red); margin:0 0 14px; }
.founder-bio{ font-size:15px; line-height:1.55; color:var(--muted); margin:0 0 14px; max-width:52ch; }
.founder-link{ font-size:14px; font-weight:500; color:var(--red); text-decoration:none; margin-top:auto; padding-top:14px; }
.founder-link:hover{ text-decoration:underline; }
/* our vision: single continuous editorial quote */
.add-section.vision-section{ padding-top:clamp(24px,3vw,40px); padding-bottom:clamp(40px,5.5vw,84px); }
.vision-quote{
max-width:980px; margin:clamp(24px,3vw,36px) auto 0; text-align:center;
font-style:italic; font-size:clamp(18px,2vw,23px); line-height:1.6;
letter-spacing:-0.01em; color:var(--ink);
}
/* ---------- stats ---------- */
.stat-row{
display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:clamp(24px,3.4vw,48px); margin-top:clamp(30px,4vw,56px);
}
.stat .num{ font-size:clamp(34px,4.4vw,58px); font-weight:600; line-height:1; letter-spacing:-0.035em; }
.stat .cap{
font-size:14px; line-height:1.5; color:var(--muted);
margin-top:14px; padding-top:14px; border-top:1px solid var(--rule);
}
.bg-black .stat .cap{ color:var(--ink-muted); border-top-color:var(--ink-rule); }
/* ---------- what you get ---------- */
.list-row{
display:grid; grid-template-columns:minmax(160px,270px) 1fr;
gap:10px clamp(20px,4vw,56px); padding:24px 0; border-bottom:1px solid var(--rule);
}
.list-row:first-child{ border-top:1px solid var(--rule); }
.list-row .label{ font-size:16px; font-weight:600; letter-spacing:-0.015em; }
.list-row .desc{ font-size:15px; line-height:1.55; color:var(--muted); }
@media(max-width:640px){ .list-row{ grid-template-columns:1fr; } }
/* ---------- example panel ---------- */
.example-panel{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(16px,2vw,24px); margin-top:clamp(32px,4vw,56px);
}
.example-col{ background:var(--white); border-radius:var(--card-radius); padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; justify-content:flex-start; }
.example-col:nth-child(2){ background:var(--ink); color:var(--paper); }
.ex-label{ font-size:17px; font-weight:600; letter-spacing:-0.015em; color:var(--ink); margin:0 0 14px; }
.example-col:nth-child(2) .ex-label{ color:var(--paper); }
.ex-question{ font-size:clamp(19px,2.2vw,26px); font-weight:600; line-height:1.3; letter-spacing:-0.02em; margin:0; }
.ex-answer{ font-size:16px; font-weight:500; margin:0; }
.ex-target{
display:inline-block; background:var(--red); color:var(--white);
border-radius:999px; padding:8px 16px; font-size:13px; font-weight:500;
}
.ex-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.ex-list li{ position:relative; padding-left:20px; font-size:15px; line-height:1.5; color:var(--muted); }
.ex-list li:before{ content:"\2713"; position:absolute; left:0; color:var(--red); font-size:13px; }
.example-col:nth-child(2) .ex-list li{ color:var(--ink-muted); }
/* ---------- process ---------- */
.steps{ margin-top:clamp(24px,3vw,44px); border-top:1px solid var(--rule); }
.step{
display:grid; grid-template-columns:60px 1fr; gap:clamp(14px,2.4vw,36px);
padding:26px 0; border-bottom:1px solid var(--rule);
}
.step .n{ font-size:15px; font-weight:600; color:var(--red); letter-spacing:-0.01em; }
.step p{ font-size:15px; line-height:1.55; color:var(--muted); margin:0; max-width:70ch; }
.kickoff-panel{
background:var(--white); border-radius:var(--card-radius);
padding:clamp(26px,3vw,42px); margin-top:clamp(22px,2.8vw,36px);
}
.kickoff-label{ font-size:clamp(15px,1.5vw,17px); font-weight:500; color:var(--muted); margin:0 0 20px; }
.kickoff-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px 32px; }
.kickoff-list li{ text-wrap:balance; }
/* ---------- packages ---------- */
.tier-grid{
display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:clamp(16px,2vw,24px);
}
@media(max-width:760px){ .tier-grid{ grid-template-columns:1fr; } }
.tier{
background:var(--paper); border-radius:var(--card-radius);
padding:clamp(28px,3.2vw,46px); display:flex; flex-direction:column;
}
.tier--maintain{ background:var(--ink); color:var(--paper); }
.tier h3{ font-size:clamp(22px,2.4vw,30px); margin:0 0 10px; }
.tier-desc{
font-size:15px; line-height:1.5; color:var(--muted);
margin:0 0 22px; padding-bottom:20px; border-bottom:1px solid var(--rule);
}
.tier--maintain .tier-desc{ color:var(--ink-muted); border-bottom-color:var(--ink-rule); }
.tier ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.tier li{ position:relative; padding-left:20px; font-size:15px; line-height:1.5; }
.tier li:before{ content:"\2713"; position:absolute; left:0; color:var(--red); font-size:13px; }
.tier--maintain li:before{ color:var(--blue); }
.tier .billing-note{ margin:20px 0 0 !important; text-align:left; }
.tier--maintain .billing-note{ color:var(--ink-muted-2); }
.price-flag{ margin-top:auto; padding-top:24px; }
.price-amount{ font-size:clamp(26px,2.8vw,36px); font-weight:600; letter-spacing:-0.03em; }
.price-detail{ font-size:13px; color:var(--muted-2); margin-top:8px; }
.tier--maintain .price-detail{ color:var(--ink-muted-2); }
.engine-coverage{ margin-top:clamp(32px,4vw,56px); padding-top:26px; border-top:1px solid var(--rule); }
.bg-black .engine-coverage{ border-top-color:var(--ink-rule); }
.engine-coverage-title{ font-size:clamp(20px,2.2vw,26px); font-weight:600; letter-spacing:-0.02em; color:var(--ink); margin:0 0 24px; text-align:center; }
.engine-coverage-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(18px,2.4vw,32px); }
.engine-label{ display:block; font-size:15px; font-weight:500; color:var(--muted); margin-bottom:10px; }
.engine-list{ font-size:16px; font-weight:500; letter-spacing:-0.01em; margin:0; }
.engine-caveat{ margin:8px 0 0; }
/* ---------- measurement ---------- */
.primary-metric{
background:var(--white); border-radius:var(--card-radius);
padding:clamp(30px,4vw,56px); margin-top:clamp(26px,3.4vw,44px); text-align:center;
}
.pm-label{ font-size:clamp(15px,1.5vw,17px); font-weight:500; color:var(--muted); margin:0 0 16px; }
.pm-value{ font-size:clamp(28px,3.8vw,50px); font-weight:600; line-height:1.06; letter-spacing:-0.033em; margin:0 0 16px; color:var(--red); }
.pm-desc{ font-size:16px; line-height:1.5; color:var(--muted); margin:0 auto; max-width:56ch; }
.dash-grid{
display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:0 clamp(24px,4vw,56px); margin-top:8px;
}
.dash-item{ padding:22px 0; border-bottom:1px solid var(--rule); }
.dash-item .k{ font-size:16px; font-weight:600; letter-spacing:-0.015em; }
.dash-item .v{ font-size:15px; line-height:1.55; color:var(--muted); margin-top:8px; }
.hero-visual{
margin:clamp(20px,3vw,36px) auto clamp(4px,1vw,12px);
width:min(480px,72vw); perspective:900px;
}
.hero-visual img{
display:block; width:100%; height:auto;
transform-origin:50% 88%;
transition:transform .35s cubic-bezier(0.28,0.11,0.32,1);
}
.hero-visual img{ will-change:transform; }
/* ---------- client logos + headshot ---------- */
.consultant{ display:flex; align-items:center; gap:10px; }
.headshot{
width:34px; height:34px; border-radius:50%; object-fit:cover;
flex-shrink:0; background:var(--white);
}
/* ---------- case index ---------- */
.case-sys-featured{
display:grid; grid-template-columns:1fr; gap:clamp(26px,3.4vw,52px);
background:var(--paper); border-radius:var(--card-radius);
padding:clamp(28px,3.6vw,56px); margin-bottom:clamp(16px,2vw,24px); text-align:left;
}
@media(min-width:820px){ .case-sys-featured{ grid-template-columns:1.05fr 1fr; } }
.cs-industry{ font-size:13px; font-weight:500; color:var(--red); margin:0 0 12px; }
.cs-client{ font-size:clamp(22px,2.6vw,32px); font-weight:600; line-height:1.1; letter-spacing:-0.028em; margin:0 0 16px; }
.cs-context{ font-size:16px; line-height:1.5; color:var(--muted); margin:0 0 22px; max-width:46ch; }
.cs-link{
display:inline-block; font-size:15px; font-weight:400;
color:var(--red); text-decoration:none; margin-top:4px;
}
.cs-link:hover{ text-decoration:underline; }
.cs-metric{ font-size:clamp(40px,5.4vw,72px); font-weight:600; line-height:1; letter-spacing:-0.04em; color:var(--red); margin:0; }
.cs-metric-label{ font-size:14px; color:var(--muted-2); margin:12px 0 0; }
.cs-support{ margin-top:clamp(24px,3vw,36px); display:grid; gap:0; }
.cs-support-item{ padding:16px 0; border-top:1px solid var(--rule); }
.cs-support-item .k{ font-size:16px; font-weight:600; letter-spacing:-0.015em; margin:0; }
.cs-support-item .v{ font-size:14px; line-height:1.5; color:var(--muted); margin:6px 0 0; }
.case-sys-grid{
display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:clamp(16px,2vw,24px); text-align:left;
}
.case-sys-card{
background:var(--paper); border-radius:var(--card-radius);
padding:clamp(26px,3vw,40px); display:flex; flex-direction:column;
}
.case-sys-card .cs-metric{ font-size:clamp(32px,3.6vw,46px); }
.case-sys-card .cs-client{ font-size:clamp(19px,2vw,24px); margin:0 0 18px; }
.case-sys-card .cs-desc{
font-size:15px; line-height:1.55; color:var(--muted);
margin:18px 0 22px; flex-grow:1;
}
.case-sys-card .cs-link{ margin-top:auto; }
.case-sys-card--cta{
background:var(--red); justify-content:center;
transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.case-sys-card--cta .cs-industry{ color:rgba(255,255,255,0.75); }
.case-sys-card--cta .cta-headline{
font-size:clamp(22px,2.6vw,30px); font-weight:600; line-height:1.16;
letter-spacing:-0.025em; color:var(--white); margin:0 0 24px;
}
.case-sys-card--cta .cs-link{ color:var(--white); margin-top:0; }
.case-sys-card--cta:hover{ background:var(--red-dark); transform:translateY(-2px); box-shadow:0 10px 28px rgba(19,19,19,0.16); }
/* ---------- case study pages ---------- */
.meta-row{
display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:clamp(18px,2.4vw,32px); margin-top:clamp(30px,4vw,52px);
padding-top:26px; border-top:1px solid var(--rule); text-align:left;
}
.meta-item .k{ font-size:13px; font-weight:500; color:var(--muted-2); margin-bottom:8px; }
.meta-item .v{ font-size:15px; font-weight:500; line-height:1.4; letter-spacing:-0.01em; }
.proof-stack{
display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:clamp(16px,2vw,24px); margin-top:clamp(28px,3.4vw,44px);
}
.proof-shot{
margin:0; background:var(--white); border-radius:18px; padding:14px;
box-shadow:0 1px 3px rgba(19,19,19,0.06);
}
.proof-shot img{ display:block; width:100%; height:auto; border-radius:8px; }
.proof-shot figcaption{ font-size:13px; line-height:1.5; color:var(--muted-2); padding:14px 4px 2px; }
/* case-study cards: heading reads as one unit with its body copy */
.case-cards .card{ padding-top:clamp(22px,2.2vw,28px); padding-bottom:clamp(22px,2.2vw,28px); }
.case-cards .card h3{ min-height:0; margin:0 0 8px; }
.case-cards .card .tag{ margin-bottom:10px; }
.case-cards .card p{ margin-bottom:0; }
.card--cta{ background:var(--red); color:var(--white); justify-content:center; position:relative; }
.card--cta .tag{ color:rgba(255,255,255,0.75) !important; }
.card--cta h3{ color:var(--white); }
.card-cta-link{ display:inline-block; color:var(--white); text-decoration:none; font-size:15px; margin-top:auto; }
.card-cta-link:hover{ text-decoration:underline; }
.card--cta .card-cta-link::after{ content:""; position:absolute; inset:0; }
/* case-study proof images: tighter gap into the next section */
section:has(.proof-stack){ padding-bottom:clamp(28px,3.4vw,44px); }
/* ===== intro sequence ===== */
.handshake{
position:relative; display:flex; align-items:center; justify-content:center;
width:100%; max-width:none;
margin-top:clamp(6px,1.2vw,18px); margin-bottom:clamp(6px,1.2vw,16px);
overflow:visible; pointer-events:none;
}
.hs-paw,.hs-bot{ display:block; flex:none; width:auto; max-width:none; --hs-h:clamp(150px,24vw,340px); height:var(--hs-h); }
.hs-paw{ margin-right:calc(var(--hs-h) * -16 / 664 + 0.75px); }
.hs-bot{ margin-left:calc(var(--hs-h) * -16 / 664 + 0.75px); }
@media(max-width:700px){ .hs-paw,.hs-bot{ --hs-h:clamp(110px,34vw,220px); } }
html.intro .hs-paw,html.intro .hs-bot{ transition:transform 1.4s cubic-bezier(0.22,1,0.36,1); }
html.intro .hs-paw{ transform:translateX(-22vw); }
html.intro .hs-bot{ transform:translateX(22vw); }
html.intro.stage-hands .hs-paw,html.intro.stage-hands .hs-bot{ transform:translateX(0); }
html.intro .hero .eyebrow,html.intro .hero h1{ animation:introRise .9s cubic-bezier(0.22,0.61,0.36,1) both; }
html.intro .hero h1{ animation-delay:.12s; }
@keyframes introRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
html.intro .hero .lede,html.intro .hero .cta,html.intro .hero .hero-cta-note{ opacity:0; transition:opacity .5s ease; }
html.intro.stage-copy .hero .lede,html.intro.stage-copy .hero .cta,html.intro.stage-copy .hero .hero-cta-note{ opacity:1; }
html.intro #page-ai-visibility > section:not(.hero),html.intro #page-ai-visibility > footer{
opacity:0; transition:opacity 1s ease;
}
html.intro.stage-rest #page-ai-visibility > section:not(.hero),html.intro.stage-rest #page-ai-visibility > footer{ opacity:1; }
/* ===== feedback pass ===== */
/* example panel, now vs target */
.ex-state{
font-size:clamp(20px,2.2vw,26px); font-weight:600; letter-spacing:-0.022em;
margin:0 0 22px; padding-bottom:18px; border-bottom:1px solid var(--rule);
}
.example-col:nth-child(2) .ex-state{ border-bottom-color:var(--ink-rule); }
.ex-label{ font-size:15px !important; font-weight:500; color:var(--muted-2) !important; }
.example-col:nth-child(2) .ex-label{ color:var(--ink-muted-2) !important; }
.ex-answer{ font-size:clamp(17px,1.8vw,21px) !important; letter-spacing:-0.015em; }
.comp{ font-weight:600; color:var(--muted); }
.example-col:nth-child(2) .comp{ color:var(--ink-muted); }
.comp-you{ color:var(--red); }
.example-col:nth-child(2) .comp-you{ color:var(--red); }
.ex-support{
grid-column:1 / -1; background:var(--white); border-radius:var(--card-radius);
padding:clamp(22px,2.4vw,32px) clamp(26px,3vw,40px);
}
.ex-list--row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 40px; }
@media(min-width:900px){ .ex-list--row{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:700px){ .example-panel{ grid-template-columns:1fr; } }
/* how it works: 4 light cards over 3 dark cards */
#how-it-works{ background:var(--paper); }
#how-it-works .card-grid{
display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(12px,1.3vw,16px);
}
#how-it-works .card{
grid-column:span 3; background:var(--white); border-radius:var(--card-radius);
padding:clamp(22px,2.2vw,26px) clamp(20px,2vw,24px); border:0;
}
#how-it-works .card:nth-child(n+5){ grid-column:span 4; background:var(--ink); }
#how-it-works .card .tag{
font-size:clamp(17px,1.8vw,22px) !important; font-weight:600; letter-spacing:-0.02em;
color:var(--red); margin:0 0 10px;
}
#how-it-works .card h3{
font-size:clamp(18px,1.6vw,21px); font-weight:600; letter-spacing:-0.02em;
line-height:1.2; margin:0 0 8px; min-height:0; color:var(--ink);
}
#how-it-works .card p{ font-size:15px; line-height:1.55; color:var(--muted); margin:0; }
#how-it-works .card:nth-child(n+5) .tag{ color:var(--blue); }
#how-it-works .card:nth-child(n+5) h3{ color:var(--paper); }
#how-it-works .card:nth-child(n+5) p{ color:var(--ink-muted); }
@media(max-width:900px){
#how-it-works .card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
#how-it-works .card, #how-it-works .card:nth-child(n+5){ grid-column:span 1; }
#how-it-works .card:last-child{ grid-column:1 / -1; }
}
@media(max-width:600px){
#how-it-works .card-grid{ grid-template-columns:1fr; margin-top:24px; }
#how-it-works .card:last-child{ grid-column:auto; }
}
.hiw-closing{
font-size:clamp(16px,1.6vw,20px); line-height:1.5; letter-spacing:-0.01em;
color:var(--muted); max-width:56ch; margin:clamp(28px,3.4vw,44px) auto 0; text-align:center;
}
@media(max-width:600px){ .hiw-closing{ font-size:15px; } }
/* headings and body text aligned across cards */
.card h3{ min-height:2.4em; }
@media(max-width:760px){ .card h3{ min-height:0; } }
.card .tag{ font-size:clamp(17px,1.8vw,22px) !important; font-weight:600; letter-spacing:-0.02em; }
/* kickoff panel centred */
.kickoff-panel{ text-align:center; }
.kickoff-list{ text-align:left; max-width:760px; margin:0 auto; }
/* engine coverage, readable */
.engine-label{ font-size:17px !important; }
.engine-list{ font-size:clamp(19px,2.1vw,25px) !important; letter-spacing:-0.02em; }
.engine-col{ container-type:inline-size; }
.engine-list{ white-space:nowrap; font-size:clamp(14px,6cqw,25px) !important; }
.engine-list--one{ font-size:clamp(11px,4cqw,18px) !important; }
@media(min-width:900px){ .engine-coverage-grid{ grid-template-columns:1fr 1.45fr; } }
.engine-caveat{ font-size:15px; }
.addon-badge{ font-size:14px !important; padding:8px 16px !important; }
.sub-head{
font-size:clamp(20px,2.2vw,26px); font-weight:600; letter-spacing:-0.022em;
margin:clamp(44px,5vw,64px) 0 4px;
}
/* case pages, bigger proof, tighter rhythm */
.site-page:not(#page-ai-visibility) section{ padding:clamp(40px,4.6vw,72px) 0; }
.stat-row--case{ gap:clamp(28px,4vw,64px) clamp(40px,6vw,90px); }
.stat-row--case:has(.stat:nth-child(4)){ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:620px){ .stat-row--case:has(.stat:nth-child(4)){ grid-template-columns:1fr; } }
.stat-row--case .num{ font-size:clamp(30px,3.4vw,46px); }
.stat-row--case .cap{ font-size:13px; }
/* one proof image per row, larger */
.proof-stack{ grid-template-columns:1fr !important; max-width:none; }
.cta--lg{ font-size:clamp(17px,1.9vw,21px); padding:19px 40px; font-weight:600; }
@media(max-width:430px){ .cta{ white-space:normal; } .cta--lg{ padding:17px 26px; } }
.card h3.engine-line{
white-space:nowrap; font-size:clamp(13px,4.1cqw,24px);
letter-spacing:-0.025em; margin:0 0 12px;
}
.card{ container-type:inline-size; }
.comp{ font-weight:600; }
.comp-a{ color:oklch(0.80 0.10 250); }
.comp-b{ color:oklch(0.80 0.10 80); }
.comp-c{ color:oklch(0.80 0.10 155); }
.outcome{
background:var(--white); border-radius:var(--card-radius);
margin-top:clamp(34px,4.4vw,64px); padding:clamp(28px,3.4vw,52px);
display:grid; grid-template-columns:1fr; gap:clamp(24px,3vw,44px); align-items:center;
}
@media(min-width:860px){ .outcome{ grid-template-columns:1.1fr 1fr; } }
.outcome-kicker{ font-size:clamp(15px,1.5vw,17px); font-weight:500; color:var(--muted); margin:0 0 16px; }
.outcome-num{
font-size:clamp(40px,6vw,76px); font-weight:600; line-height:0.95;
letter-spacing:-0.045em; color:var(--red); margin:0;
}
.outcome-label{
font-size:18px; font-weight:600; letter-spacing:-0.015em; margin:14px 0 0;
}
.outcome-side{ display:grid; gap:0; }
.outcome-fact{ padding:16px 0; border-top:1px solid var(--rule); }
.outcome-fact:last-child{ border-bottom:1px solid var(--rule); }
.outcome-fact .k{ font-size:18px; font-weight:600; letter-spacing:-0.015em; margin:0; }
.outcome-fact .v{ font-size:15px; line-height:1.5; color:var(--muted); margin:6px 0 0; }
h2.h2-tight{ font-size:clamp(26px,3.9vw,46px); }
.timeline{
position:relative; margin-top:clamp(30px,3.8vw,56px);
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px);
}
.tl-track{
position:absolute; top:17px; left:17px; right:17px; height:1px;
background:var(--rule);
}
.tl-step{ position:relative; }
.tl-node{
position:relative; z-index:1; width:34px; height:34px; border-radius:50%;
background:var(--red); color:var(--white);
display:flex; align-items:center; justify-content:center;
font-size:13px; font-weight:600; letter-spacing:0;
}
.tl-step p.tl-when{
font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
color:var(--muted-2); margin:34px 0 10px;
}
.tl-step h3{ font-size:clamp(17px,1.6vw,21px); margin:0 0 10px; }
.tl-step p{ font-size:14px; line-height:1.55; color:var(--muted); margin:0; }
@media(max-width:880px){
.timeline{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:34px; }
.tl-track{ display:none; }
}
@media(max-width:560px){ .timeline{ grid-template-columns:1fr; } }
.kickoff-list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 40px; }
@media(max-width:640px){ .kickoff-list{ grid-template-columns:1fr; } }
.addon-badge{
display:inline-block; white-space:nowrap; max-width:100%;
background:var(--red); color:var(--white);
border-radius:999px; padding:6px 14px; font-size:12px; font-weight:600;
letter-spacing:-0.005em;
}
.engine-caveat{ margin-top:12px; }
.case-sys-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:700px){ .case-sys-grid{ grid-template-columns:1fr; } }
/* ===== mobile pass ===== */
#product,#how-it-works,#pricing,#cases,#where-it-happens{ scroll-margin-top:64px; }
/* whole case card is one tap target (stretched link) */
.case-sys-card,.case-sys-featured{ position:relative; }
.case-sys-card .cs-link::after,.case-sys-featured .cs-link::after{
content:""; position:absolute; inset:0; z-index:1;
}
@media (hover: none), (pointer: coarse){
.cs-link{ padding:12px 0; }
.nav-links a,.back-link,.footer-link,.nav-whatsapp{ padding:10px 0; }
}
/* real navigation on small screens: links wrap onto their own scrollable row */
@media(max-width:860px){
nav{ height:auto; min-height:48px; padding:6px 0; }
nav .wrap{ flex-wrap:wrap; row-gap:2px; }
.nav-links{
display:flex; order:3; width:100%; gap:18px;
overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{ display:none; }
.nav-links a{ font-size:13px; white-space:nowrap; }
}
@media(max-width:899px){
.engine-list, .engine-list--one{ white-space:normal !important; font-size:17px !important; }
.engine-coverage-grid{ gap:22px; }
.card h3.engine-line{ white-space:normal; font-size:19px; }
.outcome{ text-align:left; }
.sub-head{ margin-top:34px; }
}
@media(max-width:560px){
h2.h2-tight{ font-size:26px; }
.tl-step p{ font-size:15px; }
.stat-row--case .num{ font-size:30px; }
.ex-state{ font-size:19px; }
.kickoff-panel{ text-align:left; }
.cs-metric{ font-size:44px; }
.case-sys-featured,.case-sys-card,.tier,.card,.example-col,.outcome,.primary-metric,.kickoff-panel,.ex-support{
padding:22px 20px;
}
.meta-row{ gap:18px; }
.handshake{ width:170vw; margin-left:calc(50% - 85vw); }
.hero{ padding-bottom:34px; }
}
/* ================================================================
MOBILE EDITORIAL RECOMPOSITION
Everything below is scoped to <=700px (or <=600px for the
headline fix) and to specific sections only. Pricing (#pricing)
and Cases (#cases) are deliberately left untouched and keep
whatever mobile styling they already had above. Desktop styles
are never touched by anything in this block.
================================================================ */
/* Two-sentence section headlines ("Four kinds of work.
Each earns
a citation differently.") currently lose their line break on
mobile because of the sitewide "hide
inside h1/h2 below 600px"
rule above. Any
is exempted from that
rule so the second sentence reads as an intentional subheading
instead of running into the first. */
@media(max-width:600px){
.br-sentence{ display:inline; }
}
@media(max-width:700px){
/* ---- nav: make the brand read as a header, not another link ---- */
.brand{ color:var(--red); font-size:20px; font-weight:800; }
.brand span{ color:var(--red); font-weight:800; }
.nav-links{ margin-top:14px; }
/* ---- hero: one intentional opening screen instead of a
compressed stack; artwork, image and copy are unchanged ---- */
.hero{
padding-top:clamp(32px,9vw,48px);
padding-bottom:clamp(44px,11vw,64px);
}
.hero h1{ margin-bottom:30px; }
.hero .handshake{ margin-top:34px; margin-bottom:34px; }
.hero .cta{ margin-top:34px; }
/* ---- shared rhythm + editorial section-head for the sections
being recomposed below (not applied to Pricing or Cases) ---- */
.mobile-recompose{ padding-top:44px; padding-bottom:44px; }
.mobile-recompose .section-head{ text-align:left; margin:0 0 26px; max-width:none; }
.mobile-recompose .section-head .eyebrow{ text-align:left; }
.mobile-recompose .section-head h2{
text-align:left; max-width:none;
font-size:clamp(24px,7.6vw,30px); line-height:1.16; letter-spacing:-0.02em;
}
.mobile-recompose .section-head p:not(.eyebrow){
text-align:left; max-width:none; margin:14px 0 0;
}
/* ---- center the section intro for these four sections specifically;
"what changed" and the section above it keep the left-aligned
default above, and Pricing/Cases are untouched ---- */
#product .section-head,
#how-it-works .section-head,
.sec-process .section-head,
.sec-track .section-head{
text-align:center; margin:0 auto 26px;
}
#product .section-head .eyebrow,
#how-it-works .section-head .eyebrow,
.sec-process .section-head .eyebrow,
.sec-track .section-head .eyebrow{ text-align:center; }
#product .section-head h2,
#how-it-works .section-head h2,
.sec-process .section-head h2,
.sec-track .section-head h2{ text-align:center; margin:0 auto; }
#product .section-head p:not(.eyebrow),
#how-it-works .section-head p:not(.eyebrow),
.sec-process .section-head p:not(.eyebrow),
.sec-track .section-head p:not(.eyebrow){ text-align:center; margin:14px auto 0; }
/* ---- the problem: center the intro as its own statement, and
give the lede its own weight as a subheading before the list ---- */
.sec-problem .section-head{ text-align:center; margin:0 auto 34px; }
.sec-problem .section-head .eyebrow{ text-align:center; }
.sec-problem .section-head h2{ text-align:center; max-width:26ch; margin:0 auto; }
.sec-problem .section-head p:not(.eyebrow){
text-align:center; margin:16px auto 0;
font-size:17px; line-height:1.55; color:var(--muted);
}
/* ---- the problem: keep the three findings as the site's normal
rounded cards, just spaced from the centered intro above ---- */
.sec-problem .card-grid--3{ margin-top:44px; }
.sec-problem .example-panel{ margin-top:30px; }
/* ---- the problem: "how it works now" comparison card becomes the
site red, with the existing light-on-dark text tokens reused for
contrast; the second ("our target") card is untouched ---- */
.sec-problem .example-col:first-child{ background:var(--red); color:var(--white); }
.sec-problem .example-col:first-child .ex-state{ border-bottom-color:var(--ink-rule); }
.sec-problem .example-col:first-child .ex-label{ color:var(--ink-muted-2) !important; }
.sec-problem .example-col:first-child .comp{ color:var(--ink-muted); }
/* ---- why this matters now: the two headline stat numbers pick up
the site red; supporting captions and the card itself are untouched ---- */
.sec-newdefault .stat .num{ color:var(--red); }
/* ---- what you get: the four rows become the site's normal
rounded cards instead of a divided list ---- */
#product .list-row{
display:block;
background:var(--white); border-radius:var(--card-radius);
padding:clamp(24px,5vw,32px);
border-top:none; border-bottom:none;
margin-bottom:16px;
}
#product .list-row:first-child{ border-top:none; }
#product .list-row:last-child{ margin-bottom:0; }
#product .list-row .label{ margin-bottom:8px; }
/* ---- what changed: tighten the before/now comparison rhythm ---- */
.sec-changed .example-panel{ margin-top:26px; }
/* ---- process: turn the 01-04 roadmap into stacked dark cards
instead of the desktop timeline-with-connector-line layout ---- */
.sec-process .timeline{
margin-top:26px; grid-template-columns:1fr; gap:16px;
}
.sec-process .tl-track{ display:none; }
.sec-process .tl-step{
background:var(--ink); color:var(--paper);
border-radius:var(--card-radius);
padding:clamp(24px,5vw,32px);
}
.sec-process .tl-step p.tl-when{ color:var(--ink-muted-2); }
.sec-process .tl-step h3{ color:var(--paper); }
.sec-process .tl-step p{ color:var(--ink-muted); }
.sec-process .kickoff-panel{ margin-top:30px; }
/* ---- what we track: tighten rhythm, center the supporting-metrics
label, and turn the six metrics into rounded cards ---- */
.sec-track .primary-metric{ margin-top:26px; }
.sec-track .sub-head{ margin-top:38px; text-align:center; }
.sec-track .dash-grid{ gap:16px; margin-top:20px; }
.sec-track .dash-item{
background:var(--white); border-radius:var(--card-radius);
padding:clamp(24px,5vw,32px);
border-bottom:none;
}
/* ---- founders: center the eyebrow, and give each founder a much
larger, centered portrait with centered copy beneath it ---- */
.sec-founders{ padding-top:44px; padding-bottom:44px; }
.sec-founders .section-head{ text-align:center; margin:0 0 22px; }
.sec-founders .founder{ align-items:center; text-align:center; }
.sec-founders .founder-photo{ width:70%; max-width:340px; margin-left:auto; margin-right:auto; }
.sec-founders .founder-bio{ max-width:46ch; margin-left:auto; margin-right:auto; }
/* ---- our vision: an editorial statement, not a standard section.
Give the quote more of the available width and a size that
wraps into fewer, more deliberate lines. ---- */
.vision-section{ padding-top:44px; padding-bottom:56px; }
.vision-section .wrap{ padding-left:16px; padding-right:16px; }
.vision-quote{ font-size:17px; line-height:1.5; margin-top:18px; }
/* ---- final closing CTA (homepage only, not the case-study pages'
closing sections): headline sized between the hero and body copy
so it stays substantial without dominating the whole screen ---- */
#page-ai-visibility .closing h2{ font-size:31px; }
#page-ai-visibility .closing .are-you-there{ font-size:22px; }
/* extend the closing section's own dark background well past its
box so there is no gap of the page's cream background visible
below it (mobile browser toolbars/overscroll can reveal a sliver
past the last section); this is a paint-only effect and does not
add scrollable height or touch the floating contact buttons */
#page-ai-visibility .closing{ box-shadow:0 100vh 0 100vh var(--ink); }
/* homepage footer hidden on mobile so the dark closing section is
the visual end of the page; desktop footer is untouched */
#page-ai-visibility footer{ display:none; }
}
/* ---------- closing + footer ---------- */
.closing{ text-align:center; padding:clamp(60px,7.5vw,112px) 0; }
.closing h2{ margin:0 auto 4px; max-width:22ch; font-size:clamp(30px,5.2vw,64px); letter-spacing:-0.032em; }
.closing p{ font-size:clamp(17px,1.8vw,21px); line-height:1.45; letter-spacing:-0.012em; color:var(--ink-muted); max-width:52ch; margin:0 auto 16px; }
.closing .are-you-there{
font-size:clamp(26px,4.2vw,48px); font-weight:600; line-height:1.1;
letter-spacing:-0.03em; color:var(--blue); margin:0 auto 22px !important;
}
footer{ background:var(--paper); border-top:1px solid var(--rule); padding:30px 0 44px; }
footer .wrap{
display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
font-size:12px; color:var(--muted-2);
}
.footer-link{ color:var(--muted-2); text-decoration:none; }
.footer-link:hover{ color:var(--red); }
/* ---------- floating social contact bar ---------- */
.social-bar{
position:fixed;
right:calc(16px + env(safe-area-inset-right, 0px));
bottom:calc(16px + env(safe-area-inset-bottom, 0px));
z-index:150; display:flex; flex-direction:row; align-items:center; gap:10px;
}
.social-bar__btn{
display:flex; align-items:center; justify-content:center;
width:42px; height:42px; border-radius:50%; flex-shrink:0;
color:var(--white); box-shadow:0 3px 12px rgba(19,19,19,0.2);
text-decoration:none; transition:transform .2s ease, box-shadow .2s ease;
}
.social-bar__btn:hover{ transform:translateY(-3px) scale(1.06); box-shadow:0 6px 18px rgba(19,19,19,0.26); }
.social-bar__btn--whatsapp{ background:#25D366; }
.social-bar__btn--instagram{ background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-bar__btn--email{ background:var(--red); }
@media(max-width:700px){
.social-bar{ gap:8px; }
.social-bar__btn{ width:40px; height:40px; }
.social-bar__btn:hover{ transform:none; }
}
/* ---------- cursor cat ----------
A fixed sticker that glides after the pointer. The image itself never changes:
only its position moves (translate3d). Hidden on touch / coarse pointers and
for reduced-motion users. pointer-events:none so it never blocks the UI. */
.cursor-cat{
position:fixed; top:0; left:0;
width:clamp(120px, 12vw, 200px); height:auto;
z-index:200; /* above nav and any sticky UI */
pointer-events:none; user-select:none; -webkit-user-drag:none;
opacity:0; transition:opacity .35s ease;
will-change:transform;
transform:translate3d(-100vw,-100vh,0); /* parked offscreen until the first move */
}
.cursor-cat.is-visible{ opacity:1; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce){
.cursor-cat{ display:none; }
}
.cursor-cat{ width:clamp(96px,9vw,150px); }
@media (hover: hover) and (pointer: fine){
html.cat-on, html.cat-on body{ cursor:none; }
a, button, [role="button"], input, textarea, select, label, summary{ cursor:pointer; }
}
.cursor-cat.is-over-ui{ opacity:0; }
html:not(.cat-on) .cursor-cat{ display:none; }
/* ===== buyer-question rows (case pages) ===== */
.q-list{ list-style:none; margin:clamp(20px,2.4vw,32px) 0 0; padding:0; border-top:1px solid var(--rule); }
.q-row{
display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,3vw,40px);
padding:clamp(14px,1.6vw,20px) 0; border-bottom:1px solid var(--rule);
}
.q-text{ font-size:clamp(15px,1.5vw,18px); line-height:1.4; letter-spacing:-0.01em; color:var(--ink); }
.q-pct{
flex:none; font-size:clamp(26px,3vw,40px); font-weight:600; line-height:1;
letter-spacing:-0.035em; color:var(--red); font-variant-numeric:tabular-nums;
}
/* ===== referral total + per-source row ===== */
.stat-row.stat-row--case.stat-row--total{ grid-template-columns:minmax(0,420px); }
.stat-row.stat-row--case.stat-row--sources{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:620px){ .stat-row.stat-row--case.stat-row--sources{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.stat .cap .stat-source{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.stat .cap .stat-source:hover{ color:var(--red); }
/* ===== nav CTA ===== */
.nav-right-group .nav-cta{ line-height:1.2; }
@media(max-width:700px){
nav .wrap{ column-gap:8px; }
.nav-cta{ padding:8px 10px; font-size:11.5px; }
.nav-right-group{ width:100%; justify-content:space-between; }
}
/* ===== audit form (dialog) ===== */
.audit-dialog{
width:min(640px, calc(100vw - 32px)); max-height:calc(100dvh - 32px);
padding:0; border:0; border-radius:var(--card-radius);
background:var(--paper); color:var(--ink); overflow:auto;
box-shadow:0 24px 64px rgba(19,19,19,0.22);
}
.audit-dialog::backdrop{ background:rgba(19,19,19,0.55); }
html.cat-on .audit-dialog{ cursor:auto; }
html.cat-on .audit-dialog input{ cursor:text; }
.audit-form{ position:relative; padding:clamp(28px,4vw,44px); }
.audit-close{
position:absolute; top:12px; right:12px; width:44px; height:44px;
display:grid; place-items:center; border:0; border-radius:999px;
background:transparent; color:var(--ink); cursor:pointer;
}
.audit-close:hover{ background:var(--rule-soft); }
.audit-form .eyebrow{ margin:0; }
.audit-form h2{
font-size:clamp(26px,3.2vw,36px); line-height:1.1; letter-spacing:-0.03em;
margin:10px 0 10px; max-width:20ch; padding-right:40px;
}
.audit-lede{ font-size:16px; line-height:1.5; color:var(--muted); margin:0 0 24px; }
.audit-fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@media(max-width:560px){ .audit-fields{ grid-template-columns:1fr; } }
.audit-field label{ display:block; font-size:13px; font-weight:500; color:var(--muted); margin-bottom:6px; }
.audit-field input{
width:100%; min-height:48px; padding:12px 14px; font:inherit; font-size:16px;
color:var(--ink); background:var(--white); border:1px solid var(--rule); border-radius:12px;
}
.audit-field input::placeholder{ color:var(--muted-2); }
.audit-field input:focus{ outline:2px solid var(--red); outline-offset:1px; border-color:transparent; }
.audit-form .cta{ margin-top:24px; border:0; font-family:inherit; cursor:pointer; }
.audit-form .cta[disabled]{ opacity:0.45; cursor:not-allowed; }
.audit-draft-note{ font-size:13px; line-height:1.5; color:var(--muted-2); margin:12px 0 0; max-width:52ch; }
/* ===== request form: validation ===== */
.audit-form h2{ margin-top:0; }
.audit-error{ margin:6px 0 0; font-size:13px; line-height:1.4; color:var(--red); min-height:0; }
.audit-error:empty{ display:none; }
.audit-field.is-invalid input{ border-color:var(--red); }
/* ===== request form: bot trap, single home stat ===== */
.audit-honey{ display:none !important; }
.stat-row.stat-row--single{ grid-template-columns:minmax(0,560px); justify-content:center; text-align:center; }
@media(max-width:700px){ .mobile-recompose .stat-row.stat-row--single{ justify-content:start; text-align:left; } }
/* ===== hero order: hands -> CTA -> lede ===== */
.hero .handshake + .cta{ margin-top:clamp(10px,1.6vw,22px); }
.hero .hero-cta-note + .lede{ margin-top:clamp(28px,3.4vw,44px); }
@media(max-width:700px){
.hero .handshake{ margin-bottom:22px; }
.hero .handshake + .cta{ margin-top:0; }
.hero .hero-cta-note + .lede{ margin-top:30px; }
}
/* ===== thank-you page ===== */
.thank-you{ min-height:calc(100vh - 49px); min-height:calc(100dvh - 49px); display:flex; align-items:center; text-align:center; }
.thank-you .wrap{ display:flex; flex-direction:column; align-items:center; }
.thank-you h1{ max-width:16ch; margin-left:auto; margin-right:auto; }
.thank-you .lede{ margin:0 auto; max-width:46ch; }
/* ===== desktop first screen: headline, hands and CTA fit the viewport ===== */
@media(min-width:701px){
.hero{ padding-top:clamp(28px,4.5vh,96px); }
/* hands stay edge-to-edge (combined width ~5.24x height) but shrink on short windows */
.hs-paw,.hs-bot{ --hs-h:clamp(170px, max(min(24vw, calc(100vh - 560px)), calc(100vw / 5.1)), 340px); }
.hero .handshake{ margin-top:clamp(4px,1.4vh,18px); margin-bottom:clamp(4px,1.2vh,16px); }
.hero .handshake + .cta{ margin-top:clamp(8px,1.6vh,22px); }
}
@media(min-width:701px) and (max-height:800px){
.hero h1{ font-size:clamp(38px, min(6.6vw, 9.2vh), 84px); }
}
.audit-form .cta[aria-busy="true"]{ opacity:0.7; cursor:progress; }
/* ===== request form: status + form-level error ===== */
.audit-status{ margin:12px 0 0; font-size:13px; line-height:1.5; color:var(--muted); }
.audit-status:empty, .audit-form-error:empty{ display:none; }
.audit-form-error{ margin:14px 0 0; font-size:14px; line-height:1.5; color:var(--red); max-width:52ch; }