. */
li,td,th,dd,figcaption,label,.stat .v,.plan-note,.fine,.hint,.step-label,.job-tag,.foot-bottom span{text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--pink-btn);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--paper);color:var(--ink);padding:12px 18px;font-weight:700}
.skip:focus{left:12px;top:12px}
/* ---------- type scale ---------- */
.h1,h1{font-size:clamp(37px,4.3vw,58px);letter-spacing:-.03em}
/* display type: pull a terminal period back inside the word it ends */
.tp{margin-left:-.055em;display:inline-block}
/* a phone number never breaks across two lines */
.nowrap{white-space:nowrap}
/* a list whose items carry their own number needs no bullet; the number is the
marker, and wrapped lines hang under the text rather than under the digit */
.numbered{list-style:none;padding-left:22px}
.numbered li{text-indent:-1.5em;padding-left:1.5em}
.h2,h2{font-size:clamp(29px,3.4vw,44px);letter-spacing:-.028em}
.h3,h3{font-size:clamp(22px,2vw,28px)}
h4{font-size:19px}
.lead{font-size:clamp(18px,1.4vw,21px);color:var(--ink-2);line-height:1.55;font-weight:400}
.eyebrow{margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--pink-ink)}
.eyebrow-light{color:#FFD3E4}
.fine{font-size:15px;color:var(--muted);max-width:min(100%,33em)}
.center .fine,.fine.center{margin-inline:auto}
.muted{color:var(--muted)}
.ink-2{color:var(--ink-2)}
.center{text-align:center}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--section)}
.section-cont{padding-top:0} /* continues the block above */
.section-lead{padding-top:clamp(34px,3.4vw,50px)} /* first section under a page hero */
.section-tight{padding-bottom:clamp(46px,4.6vw,68px)}
/* A section that hands over to a band, or to the footer, should not add its own
full bottom padding on top of theirs - that stack is what gap_check reads as
a hole on the shorter inner pages. */
.section:has(+ .band){padding-bottom:clamp(44px,4.4vw,64px)}
main > .section:last-of-type{padding-bottom:clamp(38px,3.8vw,56px)}
.section-head{max-width:760px;margin:0 auto clamp(40px,4vw,60px)}
.section-head.center{text-align:center}
.section-head p{color:var(--ink-2);font-size:clamp(17px,1.25vw,19px)}
.sep{height:1px;background:var(--line-soft);border:0;margin:0}
/* ---------- lists: indented under the line above, with a real gap ---------- */
.ticks{list-style:none;margin:20px 0 0;padding-left:20px}
.ticks li{position:relative;padding-left:27px;margin-bottom:13px;color:var(--ink-2)}
.ticks li:last-child{margin-bottom:0}
/* a tick beside "it does not fit" says the opposite of the sentence, so a
list of exclusions gets its own marker */
.ticks.nots li::before{background:#F3E4EC}
.ticks.nots li::after{
content:"";position:absolute;left:4px;top:.92em;width:10px;height:2px;
border:0;border-radius:1px;background:#B3306A;transform:none;
}
.ticks li::before{
content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;border-radius:50%;
background:var(--tint-pink);
}
.ticks li::after{
content:"";position:absolute;left:5px;top:.66em;width:8px;height:4px;
border-left:2px solid var(--pink-ink);border-bottom:2px solid var(--pink-ink);
transform:rotate(-45deg);
}
.ticks li b{color:var(--ink);font-weight:700}
.bullets{margin:20px 0 0;padding-left:44px}
.bullets li{margin-bottom:12px;color:var(--ink-2)}
.bullets li::marker{color:var(--pink)}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:52px;padding:14px 26px;border:0;border-radius:var(--r-pill);
font-size:16px;font-weight:700;letter-spacing:-.01em;cursor:pointer;
text-wrap:balance;
text-align:center;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .2s linear;
}
.btn .arw,.tlink .arw{width:1.15em;height:.82em;flex:0 0 auto;transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-primary{position:relative;overflow:hidden;background:var(--pink-btn);color:#fff}
.btn-primary:hover{background:#CE0049;transform:translateY(-2px);box-shadow:0 14px 32px rgba(227,0,80,.34)}
.btn-light{background:#fff;color:var(--ink);box-shadow:0 10px 26px rgba(59,15,55,.24)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(59,15,55,.3)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-2px)}
.btn-plum{background:var(--plum);color:#fff}
.btn-plum:hover{background:var(--plum-deep);transform:translateY(-2px)}
.btn-lg{min-height:58px;padding:16px 32px;font-size:17px}
.btn-block{width:100%}
/* Primary CTAs move: a soft pulsing glow plus one slow shine sweep. */
@media (prefers-reduced-motion:no-preference){
.btn-primary{animation:cta-glow 3.1s ease-in-out infinite}
.btn-primary::after{
content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
transform:skewX(-18deg);animation:cta-shine 4.6s ease-in-out infinite;pointer-events:none;
}
.btn-light{animation:cta-glow-light 3.4s ease-in-out infinite}
}
@keyframes cta-glow{
0%,100%{box-shadow:0 8px 22px rgba(227,0,80,.26),0 0 0 0 rgba(250,1,86,.34)}
50%{box-shadow:0 10px 26px rgba(227,0,80,.34),0 0 0 9px rgba(250,1,86,0)}
}
@keyframes cta-glow-light{
0%,100%{box-shadow:0 10px 26px rgba(59,15,55,.24),0 0 0 0 rgba(255,255,255,.5)}
50%{box-shadow:0 12px 30px rgba(59,15,55,.3),0 0 0 9px rgba(255,255,255,0)}
}
@keyframes cta-shine{0%{left:-140%}55%{left:160%}100%{left:160%}}
/* text link with arrow */
.tlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;font-size:16px;color:var(--pink-ink)}
.tlink:hover .arw{transform:translateX(4px)}
.tlink-ink{color:var(--ink)}
.tlink-light{color:#fff}
/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.93);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.hrow{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:flex;align-items:center;flex:0 0 auto;min-height:44px}
.brand img{height:auto;width:auto;max-height:26px;max-width:100%}
.nav-main{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-main>a,.nav-dd>button{
display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 13px;
border:0;background:none;border-radius:10px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;
transition:background-color .18s linear,color .18s linear;
}
.nav-main>a:hover,.nav-dd>button:hover,.nav-main>a[aria-current],.nav-dd>button[aria-current]{background:var(--tint-pink);color:var(--pink-ink)}
.nav-dd{position:relative}
.nav-dd>button::after{content:"";width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.nav-dd .menu{
position:absolute;top:calc(100% + 6px);left:0;min-width:214px;padding:8px;
background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lift);
display:none;
}
.nav-dd:hover .menu,.nav-dd:focus-within .menu,.nav-dd .menu.open{display:block}
.nav-dd .menu a{display:block;padding:11px 12px;border-radius:9px;font-size:15px;font-weight:600}
.nav-dd .menu a:hover{background:var(--tint-pink);color:var(--pink-ink)}
.nav-login{margin-left:6px;padding-left:18px;border-left:1px solid var(--line)}
.nav-sub{display:flex;justify-content:center;gap:26px;padding-bottom:10px;margin-top:-4px}
.nav-sub a{font-size:14px;font-weight:600;color:var(--ink-2);min-height:44px;display:inline-flex;align-items:center}
.nav-sub a:hover{color:var(--pink-ink)}
.burger{display:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.burger span{display:block;width:20px;height:2px;margin:4px auto;background:var(--ink);border-radius:2px;transition:transform .2s var(--ease),opacity .2s linear}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* ---------- scenic bands ----------
Adir, 2026-09-19: "background on top it is kind of cut on the top... the
photos are cut in the sides". They were: the slot was shorter than the
illustration, so its top was chopped, and the phone used a background-size
over 100%, so its sides were chopped.
The contract now is two rules that make cropping impossible at any width:
background-size: 100% auto - never wider than the slot, so no side crop
min-height: 100vw / --art - never shorter than the art, so no top crop
--art is the illustration's own ratio, and the flat colour behind it is
sampled from that illustration's top row, so when a band grows past its art
the join is invisible. */
.band{
position:relative;isolation:isolate;overflow:hidden;
background-repeat:no-repeat;background-size:100% auto;background-position:center bottom;
min-height:calc(100vw / var(--art));
}
.band-curve{position:absolute;left:0;right:0;width:100%;height:clamp(34px,4.4vw,64px);z-index:2;pointer-events:none}
.band-curve.top{top:-1px}
.band-curve.bottom{bottom:-1px}
.band>.wrap{position:relative;z-index:3}
/* hero */
.hero{
/* The illustration carries its OWN forest floor, so the mascot stands on the
same ground as the trees. --gline is where that floor's edge sits inside the
image, as a fraction of its height, which makes the standing line a pure
calculation - it cannot drift at any viewport width. */
--art:2.6510;
--gline:.1506;
--ground:calc(100vw / var(--art) * var(--gline));
background-color:#FEDDF0;
background-image:url('/assets/img/band-hero.ae0bc770.webp');
background-position:center bottom;
--fox:clamp(310px,calc(100vw / 3.5),540px);
--pad-b:calc(var(--ground) + clamp(22px,2.4vw,34px));
/* .hero-art is positioned against .hero-grid, so its offset from the band's
own foot has to subtract the padding that sits between them. */
--fox-bottom:calc(var(--ground) - var(--pad-b) - 15px);
min-height:calc(100vw / var(--art));
padding-block:clamp(44px,5vw,72px) var(--pad-b);
display:flex;align-items:center;
}
.hero>.wrap{width:100%}
.hero-grid{position:relative;
min-height:max(clamp(330px,26vw,400px), calc(var(--fox) + var(--fox-bottom) + clamp(20px,2vw,34px)))}
.hero-copy{position:relative;z-index:2;max-width:min(690px,100%);padding-block:clamp(10px,2vw,28px) 0}
.hero h1{margin-bottom:14px}
.hero h1 .pink{color:var(--pink-ink);display:block}
.hero .lead{margin-bottom:26px;max-width:560px}
.hero-fine{margin-top:16px;font-size:16px;color:var(--ink)}
/* The mascot is sized off the band, not off the viewport, so it can never grow
past the band and lose its ears to overflow:hidden. */
.hero-art{position:absolute;right:clamp(0px,2.4vw,52px);bottom:var(--fox-bottom);width:auto;z-index:2}
.hero-art img{display:block;width:auto;height:var(--fox);
filter:drop-shadow(-14px 4px 16px rgba(43,10,60,.2))}
/* a tight, dense contact shadow under the boots - a wide soft one reads as pasted */
.hero-art::after{
content:"";position:absolute;left:50%;bottom:clamp(8px,1vw,15px);transform:translateX(-50%);
width:96%;height:clamp(16px,1.8vw,26px);border-radius:50%;
background:radial-gradient(closest-side,rgba(0,0,0,.62),rgba(0,0,0,.28) 62%,rgba(0,0,0,0));z-index:-1;
}
/* report form */
.report-form{display:flex;gap:18px;align-items:stretch;max-width:540px}
.field{position:relative;flex:1 1 auto;min-width:0}
.field input{
width:100%;height:52px;padding:0 16px 0 46px;border:1px solid #F0D5E2;border-radius:var(--r-pill);
background:#fff;font-size:16px;box-shadow:0 6px 18px rgba(11,27,77,.06);
}
.field input::placeholder{color:#5F6780}
.field input:focus{border-color:var(--pink-btn);outline:3px solid rgba(227,0,80,.16);outline-offset:0}
.field .ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#5F6780}
.report-form .btn{flex:0 0 auto}
/* ---------- four job cards ---------- */
.jobs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.job{
display:flex;flex-direction:column;border-radius:var(--r-card);padding:28px 26px 22px;min-height:368px;
transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.job:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.job-1{background:var(--tint-pink)}
.job-2{background:var(--tint-lav)}
.job-3{background:var(--tint-pink-2)}
.job-4{background:var(--plum)}
.job-ico{display:flex;align-items:flex-end;height:132px;margin-bottom:auto}
.job-ico img{max-height:100%;width:auto}
.job-1 .job-ico img{max-height:100%}
.job-2 .job-ico img{max-height:80%}
.job-3 .job-ico img{max-height:94%}
.job-4 .job-ico img{max-height:84%}
.job h3{font-size:23px;line-height:1.16;margin:26px 0 16px;letter-spacing:-.02em}
.job-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.job-tag{font-size:15px;font-weight:700;color:var(--pink-ink)}
.job-arw{
display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
color:var(--pink-ink);transition:background-color .2s linear,transform .25s var(--ease);
}
.job-arw .arw{width:20px;height:14px}
.job:hover .job-arw{background:rgba(250,1,86,.1);transform:translateX(3px)}
.job-4 h3{color:#fff}
.job-4 .job-tag,.job-4 .job-arw{color:#FFD3E4}
.job-4:hover .job-arw{background:rgba(255,255,255,.14)}
/* ---------- where customers look ---------- */
.looks{display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(26px,3.4vw,52px)}
.looks .rule{background:var(--line-soft)}
.looks h3{font-size:23px;margin-bottom:10px}
.looks p{color:var(--ink-2);font-size:16.5px;max-width:420px}
.logo-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin:22px 0 18px}
@media (max-width:720px){.logo-row{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}}
.logo-chip{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--ink)}
.logo-chip img{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:#fff;padding:2px;box-sizing:border-box}
.logo-chip svg{width:30px;height:30px}
/* ---------- product preview frame ---------- */
.preview{margin:0;background:var(--tint-soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(16px,1.8vw,26px)}
.preview img{width:100%;max-width:1080px;height:auto;margin-inline:auto;border-radius:12px;background:#fff}
.preview{margin-bottom:0}
.preview figcaption{margin-top:14px;font-size:15px;color:var(--muted);max-width:min(100%,33em)}
.preview-head{margin-bottom:16px}
.preview-head .stamp{font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.preview-head h3{font-size:22px;margin-bottom:6px}
.preview-head p{font-size:15px;color:var(--ink-2);margin:0}
/* ---------- split rows ---------- */
.split{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,1fr);align-items:center;gap:clamp(32px,4.4vw,68px)}
.split-copy h2{margin-bottom:16px}
.split-copy p{color:var(--ink-2);font-size:clamp(17px,1.3vw,19px);max-width:min(100%,33em)}
.split.flip .split-copy{order:2}
.shot-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:clamp(12px,1.4vw,18px)}
.shot-card img{width:100%;height:auto;border-radius:12px}
.shot-card figcaption{margin-top:12px;font-size:15px;color:var(--muted)}
/* the same report, drawn for a phone - shown only where the screenshot cannot
be read (see the comment in autopilot-seo.html) */
.rep-rows{display:none;list-style:none;margin:0;padding:2px 0 0}
.rep-row{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;
padding:9px 0;border-bottom:1px solid var(--line-soft)}
.rep-row:last-child{border-bottom:0}
.rep-name{font-size:14.5px;font-weight:700;color:var(--ink)}
.rep-name{order:1}.rep-score{order:2}
.rep-bar{order:3;grid-column:1 / -1;height:8px;border-radius:999px;background:#EEF1F6;overflow:hidden}
.rep-fill{display:block;height:100%;border-radius:999px}
.rep-score{font-size:16px;font-weight:800;line-height:1.1;text-align:right;white-space:nowrap;display:flex;align-items:baseline;gap:7px}
.rep-score small{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.9}
.is-strong{color:#1E7A46}.rep-fill.is-strong{background:#34A853}
.is-fair{color:#1A56B8}.rep-fill.is-fair{background:#1A73E8}
.is-weak{color:#8A5A00}.rep-fill.is-weak{background:#F5B400}
.is-poor{color:#A34400}.rep-fill.is-poor{background:#F06A00}
.is-critical{color:#A31220}.rep-fill.is-critical{background:#E0313F}
.kpi-rows{display:none;list-style:none;margin:0;padding:2px 0 0}
.kpi-rows li{padding:12px 0;border-bottom:1px solid var(--line-soft)}
.kpi-rows li:last-child{border-bottom:0}
.kpi-l{display:block;font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.kpi-n{display:flex;align-items:baseline;gap:9px;font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:3px 0 2px}
.kpi-n em{font-style:normal;font-size:14px;font-weight:700;color:var(--pink-ink)}
.kpi-s{display:block;font-size:14px;color:var(--ink-2);line-height:1.5}
/* The review-pace capture was a 1x screenshot, so it could never be crisp on a
2x screen at any size. It is five labelled numbers, so it is drawn natively. */
.shot-title{margin:2px 0 12px;font-size:17px;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.pace-rows{margin:0;padding:0}
.pace-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:2px 20px;border-top:1px solid var(--line-soft)}
.pace-rows>div:last-child{grid-column:1 / -1}
.pace-rows>div{display:flex;flex-direction:column;gap:3px;padding:14px 14px 14px 0;
border-bottom:1px solid var(--line-soft)}
.pace-rows dt{order:2;font-size:13.5px;color:var(--ink-2);line-height:1.4}
.pace-rows dd{order:1;margin:0;font-size:26px;font-weight:800;letter-spacing:-.03em;
color:var(--ink);line-height:1;white-space:nowrap}
/* the AI visibility score, drawn instead of photographed */
.score-card{text-align:center;max-width:320px;margin-inline:auto}
.gauge{position:relative;width:clamp(180px,20vw,230px);margin:6px auto 0;aspect-ratio:1}
.gauge svg{width:100%;height:100%;transform:rotate(135deg)}
.gauge-track,.gauge-fill{fill:none;stroke-width:13;stroke-linecap:round}
.gauge-track{stroke:#EBEDF4;stroke-dasharray:254.5 84.8}
.gauge-fill{stroke:url(#gv);stroke-dasharray:122.1 217.1}
.gauge-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.gauge-num{font-size:clamp(44px,4.6vw,58px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.gauge-of{font-size:15px;color:var(--muted)}
.score-flag{display:inline-block;margin:-16px 0 0;padding:7px 16px;border-radius:999px;
background:#FDE7EC;color:#A31220;font-size:14.5px;font-weight:800}
.score-card figcaption{margin-top:14px}
/* assistant results, drawn rather than photographed: a 1200px capture could not
be read at any size it was shown */
.eng-card{padding:clamp(20px,2.2vw,30px)}
.preview-kicker{margin:0 0 6px;font-size:12.5px;font-weight:800;letter-spacing:.09em;
text-transform:uppercase;color:var(--muted)}
.eng-card .shot-title{margin:0 0 4px;font-size:20px}
.preview-sub{margin:0 0 20px;font-size:15px;color:var(--ink-2)}
.eng-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);
list-style:none;margin:0;padding:0}
.eng{display:flex;flex-direction:column;gap:12px;padding:16px;background:#fff;
border:1px solid var(--line);border-radius:var(--r-card)}
.eng-head{display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:800;color:var(--ink)}
.eng-head img{width:26px;height:26px;border-radius:7px;flex:0 0 auto;margin-inline:0;max-width:none}
.eng-body{display:flex;align-items:center;gap:12px}
.eng-ring{position:relative;flex:0 0 auto;width:56px;height:56px}
.eng-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.eng-ring circle{fill:none;stroke:#E9EDF5;stroke-width:6}
.eng-ring .eng-fill{stroke:#8B3FD1;stroke-linecap:round}
.eng-ring.is-zero .eng-fill{stroke:none}
.eng-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.eng-body p{margin:0;font-size:14px;line-height:1.45;color:var(--ink-2)}
.eng-flag{align-self:flex-start;padding:4px 11px;border-radius:999px;background:var(--tint-soft);
border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--muted)}
/* ---------- long-form pages get the same design as the rest of the site ----
Adir, 2026-09-20: "there's not enough graphics, there's not enough design,
the page is centered to the middle and not to the left." A prose column is
not a page. ------------------------------------------------------------ */
.brief-card{align-self:start}
.brief{display:grid;gap:14px}
.brief-col{padding:16px 18px;border-radius:var(--r-card);border:1px solid var(--line)}
.brief-col.is-thin{background:var(--tint-soft)}
.brief-col.is-full{background:var(--tint-pink);border-color:#F6D7E5}
.brief-tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.brief-in{margin:0 0 10px;font-size:14.5px;color:var(--ink-2);font-style:italic}
.brief-out{margin:0 0 12px;font-size:15.5px;line-height:1.55;color:var(--ink)}
.brief-verdict{display:inline-block;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:800}
.brief-verdict.is-bad{background:#FBE3E7;color:#A31220}
.brief-verdict.is-good{background:#E3F4EA;color:#1E7A46}
.never-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.mid-band .feature-soft{background:rgba(255,255,255,.96);border-color:#F0D8E6;border-style:solid;box-shadow:var(--shadow-card)}
.mid-band .feature{text-align:left}
.mid-band .never-grid{text-align:left}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px);
list-style:none;margin:0;padding:0;counter-reset:none}
.checks li{position:relative;padding:24px 26px 24px 78px;background:#fff;
border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.checks-n{position:absolute;left:24px;top:24px;display:flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:50%;background:var(--pink-btn);color:#fff;
font-size:17px;font-weight:800;letter-spacing:-.02em}
.checks h3{font-size:19px;margin:0 0 7px;letter-spacing:-.015em}
.checks p{margin:0;font-size:16px;color:var(--ink-2);line-height:1.55}
.slop-note p{margin:0}
.guide-q{margin:0 0 6px;font-size:15px;font-style:italic;color:var(--pink-ink);font-weight:700}
.guide-for{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-soft);
font-size:14.5px;color:var(--muted)}
/* ---------- handwritten margin notes -------------------------------------
Adir, 2026-09-20, pointing at lp.ranksteer.com: "the same kind of attitude
for all the pages... all these comments on sides of things." A note in the
margin with a hand-drawn arrow to the thing it is about. Caveat was loaded
on day one and never used.
They are decoration, so they are aria-hidden, never carry information that
is not also in the copy, and disappear below 1180px where there is no margin
to put them in. ------------------------------------------------------- */
.note{
--nt:8%;--nr:4.5%;--nb:10%;--nl:4.5%;
position:absolute;z-index:4;pointer-events:none;
font-family:Caveat,'Segoe UI',cursive;font-weight:700;
font-size:clamp(20px,1.55vw,25px);line-height:1.2;letter-spacing:.005em;
color:var(--ink);width:max-content;max-width:min(15ch,230px);
}
.note.is-pink{color:var(--pink-ink)}
.note.is-light{color:#FFD9EC}
.note-arrow{display:block;width:clamp(48px,4.4vw,72px);height:auto;margin-top:6px;
color:var(--pink);opacity:.82}
.note-arrow path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
/* corners: the number is how far in from the page edge the note sits */
.note-tr{top:var(--nt,8%);right:var(--nr,3%);text-align:left;transform:rotate(-4deg)}
.note-br{bottom:var(--nb,10%);right:var(--nr,3%);text-align:left;transform:rotate(3deg)}
.note-tl{top:var(--nt,8%);left:var(--nl,1.5%);text-align:right;transform:rotate(3deg)}
.note-bl{bottom:var(--nb,10%);left:var(--nl,1.5%);text-align:right;transform:rotate(-3deg)}
.note-tr .note-arrow{transform:scaleX(-1)}
.note-br .note-arrow{transform:scale(-1,-1)}
.note-tl .note-arrow,.note-bl .note-arrow{margin-left:auto}
.note-bl .note-arrow{transform:scaleY(-1)}
section{position:relative}
@media (max-width:1279px){ .note{display:none} }
.panel-quote{margin:0 0 12px;font-size:clamp(19px,1.9vw,23px);font-weight:700;line-height:1.35;
letter-spacing:-.02em;color:#fff}
.aside-card .ticks a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.aside-card .ticks a:hover{color:var(--pink-ink)}
/* a wide product screenshot gets the whole row: the copy sits above it rather
than beside it, so the image renders near 1:1 instead of at half scale */
.stack-wide{display:block}
.stack-wide .split-copy{max-width:min(100%,36em);margin-bottom:clamp(24px,2.6vw,36px)}
.stack-wide .shot-card{margin:0}
/* ---------- content band ---------- */
.content-band{
--art:2.945;
background-color:#FBE0EF;
background-image:url('/assets/img/band-content.698faca1.webp');
display:flex;align-items:center;
}
.content-band .box{max-width:min(450px,26vw);padding-block:clamp(40px,5vw,64px)}
.content-band h2{margin-bottom:12px}
.content-band p{color:var(--ink-2);font-size:clamp(17px,1.3vw,19px);max-width:min(100%,33em)}
/* ---------- mid band ---------- */
.mid-band{
--art:3.566;
background-color:#FEEDF7;
background-image:url('/assets/img/band-mid.5d8e50c4.webp');
text-align:center;display:flex;align-items:center;
padding-block:clamp(64px,5.6vw,88px);
}
.mid-band>.wrap{width:100%}
.mid-band h2{max-width:760px;margin-inline:auto}
.mid-band h2 .pink{color:var(--pink-ink);display:block}
.mid-band p{max-width:620px;margin-inline:auto;color:var(--ink-2);font-size:clamp(17px,1.3vw,19px)}
/* ---------- the AI slop objection ----------
Adir, 2026-09-20: "people don't believe that AI can solve the problem. They
call it AI slop. You need to talk about this. You need to sell and pitch
this." The competitor research said the same: answer it on the main page
with the real writing, not in a footnote. */
.section-after-band{padding-top:clamp(52px,5.2vw,78px)}
.slop{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,4vw,60px);align-items:center}
.slop-shot{margin:0}
.slop-copy .ticks{margin-top:0}
.slop-copy .ticks li{font-size:16.5px}
.slop-note{margin-top:22px;padding:16px 18px;border-left:3px solid var(--pink);background:var(--tint-soft);
border-radius:0 12px 12px 0;font-size:16px;color:var(--ink-2);max-width:min(100%,33em)}
@media (max-width:940px){.slop{grid-template-columns:1fr}}
/* ---------- autopilot spotlight ---------- */
.spot{background:var(--plum);color:#fff;border-radius:var(--r-lg);padding:clamp(28px,3.6vw,56px);position:relative;overflow:hidden}
.spot h2,.spot h3{color:#fff}
.spot p{color:#F0D9EC;max-width:min(100%,33em)}
.spot .eyebrow{color:#FFD3E4}
.spot-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,60px);align-items:center;position:relative;z-index:2}
.spot .ticks li{color:#F5E3F1}
.spot .ticks li b{color:#fff}
.spot .ticks li::before{background:rgba(255,255,255,.16)}
.spot .ticks li::after{border-color:#FFB6D5}
.spot-price{display:flex;align-items:baseline;gap:10px;margin:22px 0 6px}
.spot-price .num{font-size:clamp(38px,4vw,54px);font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1}
.spot-price .per{font-size:16px;color:#F0D9EC}
.spot-panel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-card);padding:clamp(20px,2.2vw,30px)}
.spot-panel h3{font-size:19px;margin-bottom:14px}
.panel-note{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);
font-size:14.5px;line-height:1.6;color:#F0D9EC}
.spot-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* ---------- plans ---------- */
/* cards size to their own content: stretching them to the tallest card left
170-260px of nothing above the shorter cards CTAs */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);align-items:stretch}
.plan{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:26px 22px}
.plan-name{font-size:16px;font-weight:800;letter-spacing:-.01em;margin:0 0 6px}
.plan-kind{font-size:13.5px;color:var(--muted);margin:0 0 18px}
.plan-price{display:flex;align-items:baseline;gap:7px;margin-bottom:6px}
.plan-price .num{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1}
.plan-price .per{font-size:14.5px;color:var(--muted)}
.plan-note{font-size:14px;color:var(--muted);margin:0 0 20px;min-height:42px}
.plan .ticks{margin-top:0;flex:0 0 auto;margin-bottom:22px}
/* the button sits at the foot of every card, and the cards are close
enough in height that the slack above it is small */
.plan>.btn.btn-block{margin-top:auto}
.plan .ticks li{font-size:15px}
.plan .btn{margin-top:22px}
.plan-featured{background:var(--plum);border-color:var(--plum);color:#fff;box-shadow:var(--shadow-lift)}
.plan-featured .plan-kind,.plan-featured .plan-note,.plan-featured .plan-price .per{color:#EBD3E6}
.plan-featured .ticks li{color:#F5E3F1}
.plan-featured .ticks li::before{background:rgba(255,255,255,.16)}
.plan-featured .ticks li::after{border-color:#FFB6D5}
.plan-flag{display:inline-block;align-self:flex-start;margin-bottom:14px;padding:5px 12px;border-radius:var(--r-pill);background:var(--pink-btn);color:#fff;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.plan-spacer{height:31px}
.plan-addon{margin:16px 0 0;padding:10px 13px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);font-size:14px;line-height:1.45;color:#F5E3F1}
.plan-addon b{color:#fff;font-weight:800;letter-spacing:-.01em}
/* the citations add-on, explained once under the grid instead of inside a card */
.addon{display:flex;align-items:center;gap:clamp(18px,2.4vw,32px);margin-top:clamp(18px,2vw,26px);
padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);border:1px solid var(--line);border-radius:var(--r-card);background:var(--tint-pink)}
.addon-mark{display:flex;align-items:baseline;gap:6px;flex:0 0 auto}
.addon-mark .num{font-size:clamp(28px,3vw,38px);font-weight:800;letter-spacing:-.03em;color:var(--pink-ink);line-height:1}
.addon-mark .per{font-size:14.5px;color:var(--muted)}
.addon-body{max-width:min(100%,34em)}
.addon-body h3{font-size:17px;margin:0 0 6px}
.addon-body p{font-size:15px;color:var(--ink-2);margin:0}
.addon-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:16px}
/* four jobs are four cards; what comes with them is quieter and clearly
not a fifth job */
.grid-kicker{display:flex;align-items:center;gap:14px;margin:clamp(26px,2.8vw,38px) 0 clamp(14px,1.6vw,20px);
font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.grid-kicker::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
/* declared with both classes because .feature-grid comes later in the file */
.feature-grid.feature-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.feature-soft{background:var(--tint-soft);border-style:dashed;border-color:#E9D3DF;box-shadow:none}
.feature-soft h3{font-size:17px}
/* a plan button must never drop its last word onto a line of its own */
.plan .btn-block{white-space:nowrap;padding-inline:14px;font-size:15.5px}
.plan-more{margin:10px 0 0;font-size:14.5px;text-align:center;line-height:1.7}
.plan-more a{display:inline-block;padding:13px 6px;margin:-13px -6px;
color:var(--ink-2);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.plan-more a:hover{color:var(--pink-ink)}
/* the featured card is dark, so its secondary links take the card's own ink */
.plan-featured .plan-more{color:#F3D9EA}
.plan-featured .plan-more a{color:#FFF1F8}
.plan-featured .plan-more a:hover{color:#fff}
/* ---------- buy bar (product pages) ---------- */
.buybar{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,300px);align-items:center;
gap:clamp(20px,2.6vw,34px);padding:clamp(22px,2.6vw,32px) clamp(22px,2.8vw,36px);
border:1px solid var(--line);border-radius:var(--r-lg);background:var(--tint-soft);box-shadow:var(--shadow-card)}
.buybar-price{display:flex;flex-direction:column;align-items:flex-start;flex:0 0 auto}
.buybar-price .num{font-size:clamp(34px,3.6vw,46px);font-weight:800;letter-spacing:-.03em;color:var(--pink-ink);line-height:1}
.buybar-price .per{font-size:14.5px;color:var(--muted);margin-top:2px}
.buybar-kind{font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.buybar-copy h2{font-size:clamp(21px,2vw,26px);margin:0 0 8px;letter-spacing:-.02em}
.buybar-copy p{font-size:15.5px;color:var(--ink-2);margin:0}
.buybar-act{text-align:center}
.buybar-act .btn{width:100%}
.buybar-act .fine{font-size:13.5px;color:var(--muted);margin:10px 0 0;line-height:1.6}
@media (max-width:720px){.addon{flex-direction:column;align-items:flex-start;gap:12px}}
/* ---------- steps ----------
Adir, 2026-09-19 on /how-it-works/: the three steps sat alone in a section
with a large empty band above and below, which read as broken. They now sit
in a tinted rail butted against the hero, with a line of copy under each. */
.steps-in-hero{margin-top:clamp(30px,3.4vw,46px);padding-top:clamp(26px,2.8vw,38px);border-top:1px solid rgba(250,1,86,.14)}
.steps-in-hero .steps{max-width:1040px;margin-inline:0;align-items:flex-start;justify-content:flex-start}
.steps-in-hero .step{align-items:flex-start}
.steps-in-hero .step-line{margin-top:20px}
.step-text{display:block}
.step-sub{display:block;font-size:14.5px;font-weight:400;color:var(--ink-2);margin-top:3px;max-width:22ch}
.steps{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;margin-inline:auto;max-width:900px}
.step{display:flex;align-items:center;gap:14px}
.step-dot{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--pink-btn);color:#fff;font-weight:800;font-size:22px;letter-spacing:-.02em;flex:0 0 auto}
.step-label{font-size:16px;font-weight:700;color:var(--ink)}
.step-line{width:clamp(28px,4vw,62px);height:0;border-top:2px dashed var(--pink);margin-inline:16px;flex:0 0 auto}
/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(26px,3.4vw,54px)}
.faq .rule{background:var(--line-soft)}
.faq-col>div{margin-bottom:26px}
.faq-col>div:last-child{margin-bottom:0}
.faq h3{font-size:18px;margin-bottom:8px;letter-spacing:-.015em}
.faq p{font-size:16px;color:var(--ink-2);margin:0}
/* ---------- final CTA ---------- */
.cta-band{
--art:2.945;
background-color:#7A1F58;
background-image:url('/assets/img/band-cta.031683d2.webp');
color:#fff;display:flex;align-items:flex-end;
padding-block:clamp(48px,7vw,104px) clamp(56px,5.4vw,80px);
}
/* readability scrim - only under the copy, never across the picture */
.cta-band::before{
content:"";position:absolute;inset:0 38% 0 0;z-index:1;pointer-events:none;
background:linear-gradient(to right,rgba(46,8,40,.86) 0%,rgba(46,8,40,.74) 58%,rgba(46,8,40,0) 100%);
}
.cta-band>.wrap{width:100%;position:relative;z-index:3}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);align-items:center;gap:30px}
.cta-art{align-self:end}
.cta-band h2{color:#fff;max-width:840px;text-shadow:0 2px 18px rgba(20,5,25,.4)}
.cta-band p{color:#FCE9F4;max-width:520px;margin-bottom:20px;text-shadow:0 1px 10px rgba(20,5,25,.5)}
.cta-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.cta-art{justify-self:end;align-self:end;width:auto;position:relative;
margin-bottom:calc(-1 * (clamp(56px,5.4vw,80px) - 26px))}
.cta-art img{display:block;width:auto;height:clamp(250px,26vw,400px);
filter:drop-shadow(-12px 6px 16px rgba(10,2,14,.45))}
.cta-art::after{content:"";position:absolute;left:50%;bottom:clamp(8px,1vw,14px);transform:translateX(-50%);
width:100%;height:clamp(15px,1.7vw,24px);border-radius:50%;
background:radial-gradient(closest-side,rgba(0,0,0,.72),rgba(0,0,0,.3) 60%,rgba(0,0,0,0));z-index:-1}
/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding-block:clamp(46px,5vw,64px) 28px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.foot-brand>a{display:inline-flex;align-items:center;min-height:44px;margin-bottom:6px}
.foot-brand img{height:auto;width:auto;max-height:28px;max-width:100%}
.foot-brand .built{font-size:14px;color:var(--muted);margin:0 0 14px}
.foot-brand .built a{display:inline-block;padding:12px 5px;margin:-12px -5px;color:var(--ink-2);font-weight:700}
.foot-brand .tel{display:inline-flex;min-height:44px;align-items:center;font-weight:700;font-size:16px}
.foot-col h3{font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.foot-col a{display:block;padding:10px 0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.foot-col a:hover{color:var(--pink-ink)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;margin-top:clamp(32px,3.4vw,48px);padding-top:22px;border-top:1px solid var(--line-soft);font-size:15px;color:var(--muted)}
.foot-bottom .legal-line{max-width:520px}
/* ---------- inner pages ---------- */
/* Inner page header. A woodland strip cannot be cut to a header ratio without
slicing the tree tops off, which is exactly what Adir saw, so the header is a
flat brand band closed by the same white curve the homepage hero uses. A
shape cannot be cropped. */
.page-hero::before{
content:"";position:absolute;right:0;bottom:0;width:48%;height:100%;z-index:0;pointer-events:none;
background:url('/assets/img/band-content-m.3956d84a.webp') right bottom / 100% auto no-repeat;
opacity:.5;
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 40%,#000 100%);
mask-image:linear-gradient(to right,transparent 0,#000 40%,#000 100%);
}
.page-hero{
position:relative;isolation:isolate;overflow:hidden;
background:var(--tint-pink);
padding-block:clamp(50px,5.2vw,78px) clamp(48px,5vw,74px);
}
.page-hero.lav{background:var(--tint-lav)}
.page-hero::after{
content:"";position:absolute;left:-4%;right:-4%;bottom:-2px;
height:clamp(30px,3.4vw,54px);background:#fff;
border-radius:50% 50% 0 0 / 100% 100% 0 0;z-index:0;
}
.page-hero>.wrap{position:relative;z-index:1}
.page-hero .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14.5px;font-weight:600;margin-bottom:16px}
.page-hero .crumb a{display:inline-block;padding:9px 4px;margin:-9px -4px}
.crumb a{color:var(--pink-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;padding:2px 0}
.crumb a:hover{text-decoration-thickness:2px}
.crumb [aria-current]{color:var(--ink-2);font-weight:700}
.crumb-sep{color:#C9A9BD}
.page-hero h1{max-width:820px;margin-bottom:16px}
.page-hero .lead{max-width:680px}
.page-hero .btn,.page-hero .report-form{margin-top:28px}
/* that selector also caught the submit button INSIDE the form, which pushed it
28px off its own field and stopped the two reading as one control */
.page-hero .report-form .btn{margin-top:0}
.prose{max-width:760px}
/* Long-form pages read as a document: the whole page narrows, so the column is
not a 760px slab of text with 400px of empty paper beside it. */
body.doc .prose{max-width:min(100%,34em)}
body.doc .prose h2{margin-top:clamp(34px,3.4vw,48px)}
.prose h2{margin-top:clamp(38px,3.6vw,52px);font-size:clamp(25px,2.4vw,32px)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:30px;font-size:20px}
.prose p,.prose li{color:var(--ink-2);max-width:min(100%,33em);font-size:clamp(17px,1.15vw,19.5px);line-height:1.68}
.prose ul{padding-left:44px;margin:18px 0}
.prose li{margin-bottom:10px}
.prose .updated{font-size:14px;color:var(--muted);margin-bottom:28px}
.prose a:not(.btn):not(.tlink){color:var(--pink-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:26px 24px}
.feature h3{font-size:19px;margin-bottom:10px}
.feature p{font-size:16px;color:var(--ink-2);margin:0}
.feature .mark{
width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
margin-bottom:18px;background:var(--tint-pink);color:var(--pink-ink);
box-shadow:inset 0 0 0 1px rgba(250,1,86,.12);
}
.feature .mark svg{width:24px;height:24px}
/* Each card in a set reads as its own thing, not as one repeated marker. */
.feature:nth-child(6n+2) .mark{background:var(--tint-lav);color:#3B2E8F;box-shadow:inset 0 0 0 1px rgba(59,46,143,.12)}
.feature:nth-child(6n+3) .mark{background:#EAF6F1;color:#0E6B4A;box-shadow:inset 0 0 0 1px rgba(14,107,74,.12)}
.feature:nth-child(6n+4) .mark{background:#FDF1E3;color:#8A4B06;box-shadow:inset 0 0 0 1px rgba(138,75,6,.14)}
.feature:nth-child(6n+5) .mark{background:#F1ECFB;color:#5B2E90;box-shadow:inset 0 0 0 1px rgba(91,46,144,.12)}
.feature:nth-child(6n+6) .mark{background:#E9F1FD;color:#0F4C91;box-shadow:inset 0 0 0 1px rgba(15,76,145,.12)}
.feature .mark-num{font-weight:800;font-size:18px;letter-spacing:-.02em}
.feature{transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s linear}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--line-soft)}
.stat-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.stat{background:var(--tint-soft);border:1px solid var(--line-soft);border-radius:var(--r-card);padding:24px}
.stat .k{display:block;font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.stat .v{font-size:19px;font-weight:700;color:var(--ink);line-height:1.35}
.cmp{width:100%;border-collapse:collapse;font-size:16px}
.cmp caption{text-align:left;font-size:14px;color:var(--muted);padding-bottom:12px}
.cmp th,.cmp td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.cmp thead th{font-size:13.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.cmp tbody tr:nth-child(even){background:var(--tint-soft)}
.cmp td:first-child{font-weight:700;color:var(--ink)}
.cmp td{color:var(--ink-2)}
.cmp .yes{color:var(--pink-ink);font-weight:800}
.table-scroll{overflow-x:auto}
/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,4vw,64px);align-items:start}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:clamp(22px,2.6vw,34px)}
.frow{margin-bottom:18px}
.frow label{display:block;font-size:14.5px;font-weight:700;margin-bottom:7px}
.frow input,.frow textarea,.frow select{
width:100%;min-height:50px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:16px;
}
.frow textarea{min-height:140px;resize:vertical}
.frow input:focus,.frow textarea:focus,.frow select:focus{border-color:var(--pink-btn);outline:3px solid rgba(227,0,80,.14)}
.frow .hint{font-size:13.5px;color:var(--muted);margin:6px 0 0}
.form-note{font-size:13.5px;color:var(--muted);margin-top:16px}
.aside-card{background:var(--tint-soft);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:clamp(22px,2.4vw,30px)}
.aside-card h3{font-size:18px;margin-bottom:10px}
.aside-card p{font-size:16px;color:var(--ink-2);max-width:min(100%,33em)}
.aside-card+.aside-card{margin-top:18px}
.formmsg{border-radius:12px;padding:14px 16px;font-size:15.5px;font-weight:600;margin-bottom:20px}
.formmsg.ok{background:#E8F7EE;color:#14532D}
.formmsg.bad{background:var(--tint-pink);color:#8C0032}
/* ---------- responsive ---------- */
@media (max-width:1080px){
.foot-grid{grid-template-columns:minmax(0,1fr) repeat(2,minmax(0,1fr))}
.jobs{grid-template-columns:repeat(2,minmax(0,1fr))}
.plans{grid-template-columns:repeat(2,minmax(0,1fr))}
.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:940px){
.nav-main,.nav-sub{display:none}
.burger{display:block}
.site-header.open .nav-main{
display:flex;flex-direction:column;align-items:stretch;gap:2px;margin:0;
position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);
padding:12px var(--gut) 22px;box-shadow:var(--shadow-lift);max-height:calc(100vh - 64px);overflow-y:auto;
}
.site-header.open .nav-main>a,.site-header.open .nav-dd>button{width:100%;justify-content:space-between;min-height:50px;font-size:16.5px}
.site-header.open .nav-dd{width:100%}
.site-header.open .nav-dd .menu{position:static;display:none;box-shadow:none;border:0;padding:0 0 6px 12px;min-width:0}
.site-header.open .nav-dd .menu.open{display:block}
.site-header.open .nav-dd:hover .menu:not(.open){display:none}
.site-header.open .nav-login{margin:10px 0 0;padding:0;border:0}
.hero-grid{min-height:0}
.hero-art{position:static;width:auto;margin:20px auto -11px;right:auto;bottom:auto;display:flex;justify-content:center}
.hero-art img{height:clamp(300px,86vw,400px);max-height:none;min-height:0}
.split,.spot-grid,.contact-grid,.cta-grid{grid-template-columns:1fr}
.split .split-copy{order:-1}
.split.flip .split-copy{order:0}
.cta-art{justify-self:center;margin-top:8px}
.buybar{grid-template-columns:1fr;text-align:left;gap:18px}
.buybar-price{flex-direction:row;align-items:baseline;gap:8px}
.buybar-kind{margin-top:0;align-self:center}
/* On a phone the plum block was eating 95px of left inset before a word of
copy started, so the checklists wrapped into a narrow ribbon beside a
wide marker rail. The list keeps its own indent; the box gives up padding. */
.spot{padding:24px 18px}
.spot-panel{padding:18px 16px}
.spot .ticks{padding-left:16px}
.spot .ticks li{padding-left:25px}
.shot-swap > img{display:none}
.rep-rows,.kpi-rows{display:block}
.page-hero::before{display:none}
.eng-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.never-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.checks{grid-template-columns:1fr}
.looks,.faq{grid-template-columns:1fr;gap:30px}
.looks .rule,.faq .rule{display:none}
.faq-col>div{margin-bottom:24px}
.content-band{background-position:center bottom}
.content-band .box{max-width:none}
.stat-strip{grid-template-columns:1fr}
}
@media (max-width:720px){
body{font-size:16.5px}
.report-form{flex-direction:column;gap:12px}
.report-form .btn{width:100%}
.jobs,.plans,.feature-grid{grid-template-columns:1fr}
.never-grid{grid-template-columns:1fr}
.checks li{padding:20px 20px 20px 70px}
.checks-n{left:20px;top:20px}
.eng-grid{grid-template-columns:1fr}
.eng{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
.eng-head{flex:1 1 100%}
.feature-grid.feature-grid-2{grid-template-columns:1fr}
.job{min-height:0}
.job-ico{height:88px}
.foot-grid{grid-template-columns:1fr 1fr}
.foot-brand{grid-column:1 / -1}
.steps{flex-direction:column;align-items:flex-start;gap:16px;max-width:360px}
.step-line{width:0;height:30px;border-top:0;border-left:2px solid rgba(250,1,86,.32);margin:0 0 0 22px}
.hero{--art:1.8300;--gline:.1506;background-image:url('/assets/img/band-hero-m.b9989de7.webp');
padding-bottom:calc(var(--ground) + 14px)}
.cta-band{--art:1.901;background-color:#792058;background-image:url('/assets/img/band-cta-m.3c019a08.webp');padding-bottom:clamp(96px,24vw,140px)}
.cta-art img{height:clamp(240px,62vw,320px)}
.cta-art{width:auto;margin-bottom:calc(-1 * (clamp(96px,24vw,140px) - 12px))}
.content-band{--art:1.901;background-color:#FBE0EF;background-image:url('/assets/img/band-content-m.3956d84a.webp')}
.content-band .box{max-width:none;padding-block:clamp(36px,7vw,50px) calc(100vw / var(--art) + 22px)}
/* On a phone a band is mostly padding, so both the strip of art and the
padding that keeps text off it are trimmed together. */
.mid-band{--art:1.901;background-color:#FEE6F3;background-image:url('/assets/img/band-mid-m.20054e99.webp');padding-block:52px calc(100vw / var(--art) + 18px)}
.band + .section{padding-top:54px}
.table-scroll{overflow-x:visible}
.cmp{font-size:16px;display:block}
.cmp caption{display:block;width:100%;text-align:left;padding-bottom:16px}
.cmp thead{display:none}
.cmp tbody,.cmp tr,.cmp td{display:block;width:auto}
/* One padded card per row turned a 14-row comparison into ~4,000px of
scrolling, so on a phone each row is a title plus its plans as inline
chips - two or three lines instead of five. */
.cmp tr{border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px;margin-bottom:10px;background:#fff}
.cmp tbody tr:nth-child(even){background:var(--tint-soft)}
.cmp td{border:0;padding:0;margin:0}
.cmp td:first-child{display:block;font-size:16.5px;font-weight:700;line-height:1.4;margin-bottom:8px}
.cmp td:not(:first-child){
display:inline-block;margin:0 6px 6px 0;padding:4px 10px;border-radius:999px;
background:var(--tint-pink);font-size:14px;line-height:1.45;color:var(--ink-2);
}
.cmp td:not(:first-child)::before{
content:attr(data-label) ": ";font-weight:800;color:var(--pink-ink);
}
/* AFTER the chip rule: an empty cell means the plan does not include the row,
and a chip with a plan name and no value reads as if it does. */
.cmp td:empty{display:none}
}
/* ==========================================================================
MOTION
Adir, 2026-09-19: "It's missing motions... if you look in our landing pages
you're going to see that there is so much better motions... give more life
into this." So this is the same vocabulary lp.ranksteer.com already uses -
fw-in for staggered entrances, a slow float on the mascot, a breathing
primary button, a glow on the step nodes - not a new invention.
Everything sits behind prefers-reduced-motion, and every reveal is opt-in
through html.js plus a hard 2.5s failsafe in site.js, so a blocked script can
never leave a section invisible.
========================================================================== */
@keyframes fw-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fw-in-left{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes fox-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes fox-float2{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes step-glow{0%,100%{box-shadow:0 0 0 6px rgba(255,227,238,1)}50%{box-shadow:0 0 0 11px rgba(255,227,238,.45)}}
@keyframes dash-flow{to{background-position:22px 0}}
@media (prefers-reduced-motion:no-preference){
/* hero settles in, headline first so nothing delays the thing being read */
.hero-copy>*{animation:fw-in .5s cubic-bezier(.2,.75,.2,1) both}
.hero-copy>:nth-child(1){animation-delay:.02s}
.hero-copy>:nth-child(2){animation-delay:.08s}
.hero-copy>:nth-child(3){animation-delay:.18s}
.hero-copy>:nth-child(4){animation-delay:.28s}
.hero-copy>:nth-child(5){animation-delay:.36s}
.hero-art{animation:fw-in .7s cubic-bezier(.2,.75,.2,1) .2s both}
.hero-art img{animation:fox-float 7.5s ease-in-out 1s infinite}
.cta-art img{animation:fox-float2 9s ease-in-out infinite}
.step-dot{animation:step-glow 3.2s ease-in-out infinite}
@media (min-width:721px){
.step-line{background-image:linear-gradient(90deg,var(--pink) 0 11px,transparent 11px 22px);
background-size:22px 2px;background-repeat:repeat-x;background-position:0 0;border-top:0;height:2px;
animation:dash-flow 1.6s linear infinite}
}
/* sections arrive as you reach them */
html.js .reveal{opacity:0}
html.js .reveal.in{animation:fw-in .62s cubic-bezier(.2,.75,.2,1) both}
html.js .reveal.in.from-left{animation-name:fw-in-left}
html.js .reveal.in:nth-child(2){animation-delay:.07s}
html.js .reveal.in:nth-child(3){animation-delay:.14s}
html.js .reveal.in:nth-child(4){animation-delay:.21s}
html.js .reveal.in:nth-child(5){animation-delay:.28s}
html.js .reveal.in:nth-child(6){animation-delay:.35s}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.btn,.btn::after,.hero-art,.hero-art img,.cta-art img,.step-dot,.reveal{
animation:none!important;transition:none!important}
html.js .reveal{opacity:1}
}
/* ---- 00-base.css ---- */
/* placeholder so the parts folder is never empty */
/* ---- 10-chrome.css ---- */
/* ==========================================================================
Header + footer chrome, rebuilt 2026-09-20 to match the approved
homepage-concept-20260920.png: centred main nav, a "Sign in" text link
plus a pink pill CTA on the right of the header, and a single-row footer
with a phone link on the right. Owned entirely by this file - never add
header/footer rules to site.css. Every var() below is already declared in
site.css's :root; no new custom property was needed.
========================================================================== */
/* ---------- header: centre the main nav between the logo and the actions -- */
@media (min-width:941px){
.nav-main{margin-inline:auto}
}
/* Sign-in text link. Used twice: once in the desktop actions cluster, once
in the mobile drawer copy. Not a descendant of .nav-main in the desktop
case, so it does not inherit .nav-main>a and gets its own full styling. */
.cta-signin{
display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
font-size:15px;font-weight:600;color:var(--ink-2);
transition:color .18s linear;
}
.cta-signin:hover{color:var(--pink-ink)}
/* Desktop actions cluster: sits after the centred nav, flush to the right
edge of the header row. Sibling of #nav-main, not inside it. */
.hactions{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.hactions .btn{min-height:44px;padding:11px 22px;font-size:14.5px}
/* Mobile-drawer copy of the same two actions, rendered as the last item
inside #nav-main so the existing open/close drawer JS and CSS (site.css,
untouched) stack it with the rest of the links automatically. Hidden on
desktop; the desktop copy above is hidden on mobile below. */
.nav-cta{display:none}
@media (max-width:940px){
.hactions{display:none}
.nav-cta{
display:flex;flex-direction:column;align-items:stretch;gap:12px;
width:100%;margin-top:14px;padding-top:16px;border-top:1px solid var(--line-soft);
}
.nav-cta .cta-signin{justify-content:center;min-height:46px;font-size:16px}
.nav-cta .btn{width:100%}
}
/* ---------- footer: one brand row, one link row, phone on the right ------ */
.foot-top{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:18px 32px;padding-bottom:clamp(24px,2.6vw,34px);
}
.foot-brand-link{display:inline-flex;align-items:center;flex:0 0 auto;min-height:44px}
.foot-brand-link img{height:auto;width:auto;max-height:26px;max-width:100%}
.foot-nav{display:flex;flex-wrap:wrap;align-items:center;gap:2px 24px}
.foot-nav a{
display:inline-flex;align-items:center;min-height:44px;
font-size:15px;font-weight:600;color:var(--ink-2);transition:color .18s linear;
}
.foot-nav a:hover{color:var(--pink-ink)}
.foot-side{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.foot-tel{
display:inline-flex;align-items:center;gap:8px;min-height:44px;
font-weight:700;font-size:15.5px;color:var(--ink);transition:color .18s linear;
}
.foot-tel svg{width:18px;height:18px;flex:0 0 auto;color:var(--pink-ink)}
.foot-tel:hover{color:var(--pink-ink)}
/* Legal links kept for compliance; the concept's own footer strip did not
show a fourth row, so these ride along with the copyright / disclaimer
line rather than getting a whole row of their own. */
.foot-legal-links{display:inline-flex;flex-wrap:wrap;gap:4px 16px}
.foot-legal-links a{
display:inline-flex;align-items:center;min-height:44px;
font-size:14px;font-weight:600;color:var(--muted);transition:color .18s linear;
}
.foot-legal-links a:hover{color:var(--pink-ink)}
@media (max-width:720px){
.foot-top{flex-direction:column;align-items:flex-start;gap:16px}
.foot-side{width:100%}
.foot-bottom{flex-direction:column;align-items:flex-start;gap:8px}
}
/* Adir's standing rule from the concept reviews: the Cyticx attribution sits
UNDER the RankSteer wordmark in the footer, never beside it and never gone. */
.foot-brand{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.foot-by{margin:0;font-size:14px;color:var(--muted);line-height:1.4}
/* ---- 20-hero.css ---- */
/* ---------------------------------------------------------------------------
Hero, to the 2026-09-20 concept: taller, a signpost standing on the same
forest floor as the fox, and three trust lines under the form.
The ground contract from site.css is untouched: --ground is where the
illustration's own floor sits, so anything standing on it is positioned off
that number and cannot drift at any width.
--------------------------------------------------------------------------- */
.hero{
/* Adir 2026-09-20: "make the hero a little bit more larger on the height".
Only the TOP grows - the art is anchored bottom, so the ground line and
everything standing on it stay exactly where they were. */
min-height:calc(100vw / var(--art) + clamp(30px,5.2vw,96px));
padding-block:clamp(56px,7.4vw,112px) var(--pad-b);
}
.hero .lead{max-width:min(100%,31em)}
/* three short reassurances under the form, the concept's chips */
.trust{
display:flex;flex-wrap:wrap;gap:10px 26px;
margin:20px 0 0;padding:0;list-style:none;
}
.trust li{
display:flex;align-items:center;gap:9px;
font-size:15px;font-weight:600;color:var(--ink-2);
}
.trust-ico{
display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;
border-radius:8px;background:#fff;color:var(--pink-ink);
box-shadow:0 1px 3px rgba(74,10,52,.14);
}
.trust-ico svg{width:15px;height:15px}
/* the signpost stands on the illustration's floor, like the fox does */
.signpost{
position:absolute;right:0;z-index:2;pointer-events:none;
width:clamp(150px,15vw,246px);
bottom:calc(var(--ground) - var(--pad-b) + 4px);
}
.signpost svg{display:block;width:100%;height:auto;
filter:drop-shadow(0 10px 18px rgba(74,10,52,.28))}
.signpost text{
font-family:inherit;font-weight:800;font-size:15px;letter-spacing:.02em;
fill:#FFF3E6;
}
.signpost .sp-1{transform:rotate(-2.5deg);transform-origin:120px 38px}
.signpost .sp-2{transform:rotate(1.8deg);transform-origin:120px 92px}
.signpost .sp-3{transform:rotate(-1.4deg);transform-origin:120px 146px}
.signpost .sp-3 text{font-size:12.5px}
@media (max-width:1100px){ .signpost{display:none} }
@media (max-width:860px){
.hero{min-height:calc(100vw / var(--art) + clamp(20px,6vw,60px))}
.trust{gap:8px 18px}
.trust li{font-size:14px}
}
/* ---- 30-jobs.css ---- */
/* ---------- home-jobs section ----------
The four-jobs intro under the hero. The left column reuses .split /
.split-copy from site.css for the copy column; the 2x2 icon list and the
product card are new here because nothing in site.css already covers a
compact icon+title+sentence list or a report mocked up as a nav rail plus
a gauge plus a trend line in one card. The gauge, the scored rows and the
card frame itself all reuse .gauge / .score-flag / .rep-rows / .shot-card /
.preview-head from site.css rather than inventing a second version of any
of them. */
/* ---------- 2x2 job list ---------- */
.jobs-mini{
list-style:none;margin:28px 0 0;padding:0;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 22px;
}
.jobs-mini li{display:flex;flex-direction:column}
.jobs-mini-ico{display:block;width:26px;height:26px;margin-bottom:12px;color:var(--pink-ink)}
.jobs-mini-ico svg{width:100%;height:100%}
.jobs-mini h3{font-size:16.5px;margin:0 0 6px;letter-spacing:-.01em;color:var(--ink)}
.jobs-mini p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
/* ---------- the report card ---------- */
.jobs-card-wrap{position:relative}
.jobs-pill{
position:absolute;top:-14px;right:20px;z-index:5;margin:0;
display:inline-flex;align-items:center;gap:8px;
padding:10px 18px;border-radius:var(--r-pill);background:var(--paper);
box-shadow:var(--shadow-lift);font-size:14px;font-weight:700;color:var(--ink);
transform:rotate(-2deg);
}
.jobs-pill svg{width:16px;height:16px;flex:0 0 auto;color:var(--pink-ink)}
.jobs-card{margin-top:22px;padding:22px 22px 20px}
.jobs-card-brand{margin:0 0 16px;font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.jobs-card .preview-head{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.jobs-card .preview-head h3{font-size:19px}
.jobs-card-body{display:grid;grid-template-columns:118px minmax(0,1fr);gap:20px}
.jobs-side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.jobs-side li{
padding:9px 10px;border-radius:9px;font-size:14px;font-weight:600;
color:var(--ink-2);line-height:1.3;
}
.jobs-side li[aria-current]{background:var(--tint-pink);color:var(--pink-ink);font-weight:700}
.jobs-main{min-width:0}
.jobs-top-row{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.jobs-score{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.jobs-score .gauge{width:92px;margin:0}
.jobs-score .gauge-num{font-size:24px}
.jobs-score .gauge-of{font-size:14px}
.jobs-score .score-flag{margin-top:-6px;padding:4px 12px;font-size:14px}
.jobs-chart{flex:1 1 auto;min-width:0;height:64px}
.jobs-chart svg{display:block;width:100%;height:100%}
.jobs-chart-line{fill:none;stroke:var(--pink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.jobs-chart-dot{fill:var(--pink-btn)}
/* the report rows are built to reuse .rep-rows, which site.css only shows
below 940px because everywhere else it stands in for a screenshot. Here
the whole card is real markup, so the rows are always on. */
.jobs-card .rep-rows{display:block;padding-top:2px;border-top:1px solid var(--line-soft)}
.jobs-card .rep-row{padding:8px 0}
.jobs-card .rep-name{font-size:14px}
@media (max-width:940px){
.jobs-mini{margin-top:24px}
}
@media (max-width:720px){
.jobs-mini{grid-template-columns:1fr;gap:20px}
.jobs-card-body{grid-template-columns:1fr}
.jobs-side ul{flex-direction:row;flex-wrap:wrap;gap:6px}
.jobs-side li{padding:7px 12px;background:var(--tint-soft)}
.jobs-side li[aria-current]{background:var(--tint-pink)}
.jobs-pill{right:12px;padding:9px 14px;font-size:14px}
.jobs-pill span{max-width:150px}
}
/* ---- 40-engines-reviews.css ---- */
/* ---------------------------------------------------------------------------
Home: "Where your customers look" (engine strip) and "Turn reviews into
relationships" (review reply demo). Concept 2026-09-20, middle band.
Reuses .eng-head (assistant mark + name, from the AI-visibility page),
.shot-card (white panel look) and .ticks rather than inventing new
equivalents. Only one token is genuinely new: --star, the review rating
colour, in the same warm amber already used site-wide for a "needs
attention" flag (.is-weak / .rep-fill.is-weak).
--------------------------------------------------------------------------- */
:root{
--star:#F5B400;
}
/* ---------- engine strip: one wide pill, five marks in a row ---------- */
.engines-pill{
margin:clamp(28px,3.2vw,46px) auto 0;
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:clamp(14px,2.2vw,30px) clamp(18px,2.6vw,34px);
max-width:960px;
background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--shadow-card);
padding:clamp(18px,2.4vw,24px) clamp(20px,3vw,36px);
}
.engines-pill .eng-head{padding-left:clamp(14px,2.2vw,30px)}
.engines-pill .eng-head:first-child{padding-left:0;border-left:0}
.engines-pill .eng-head:not(:first-child){border-left:1px solid var(--line)}
.engines-pill .eng-head span{white-space:nowrap}
@media (max-width:760px){
.engines-pill{flex-direction:column;align-items:flex-start;gap:16px;border-radius:var(--r-card)}
.engines-pill .eng-head{border-left:0;padding-left:0;width:100%}
}
/* ---------- review reply demo card: real markup, not a screenshot ---------- */
.review-demo-source{
display:flex;align-items:center;gap:7px;margin:0 0 14px;
font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.review-demo-source svg{flex:0 0 auto}
.review-demo-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px}
.review-demo-avatar{
display:flex;align-items:center;justify-content:center;flex:0 0 auto;
width:38px;height:38px;border-radius:50%;background:var(--tint-pink);color:var(--pink-ink);
font-weight:800;font-size:16px;
}
.review-demo-who{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0}
.review-demo-name{font-weight:800;font-size:15.5px;color:var(--ink)}
.review-demo-stars{color:var(--star);font-size:14px;letter-spacing:2px}
.review-demo-date{flex:0 0 auto;font-size:13px;color:var(--muted);white-space:nowrap;margin-left:auto}
.review-demo-text{margin:0 0 16px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.review-demo-ai{background:var(--tint-lav);border-radius:var(--r-card);padding:14px 16px;margin-bottom:16px}
.review-demo-ai-label{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#3B2E8F}
.review-demo-ai-text{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
/* Edit / Post Reply are a picture of the product, not live controls: no
button/anchor element, no focus ring, no hover, no pointer events. */
.review-demo-actions{display:flex;flex-wrap:wrap;gap:10px}
.review-demo-btn{
display:inline-flex;align-items:center;justify-content:center;min-height:42px;
padding:0 20px;border-radius:var(--r-pill);font-size:14.5px;font-weight:700;
user-select:none;pointer-events:none;
}
.review-demo-btn.is-edit{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.review-demo-btn.is-post{background:var(--pink-btn);color:#fff}
.review-demo-caption{margin:14px 0 0}
/* ---- 50-team-picture.css ---- */
/* ==========================================================================
home-team + home-picture sections. Owned only by these two selectors' rules.
No new custom properties: everything below reuses tokens already declared
in site.css (var(--tint-pink), var(--tint-lav), var(--line), var(--r-lg),
var(--r-pill), var(--shadow-card), var(--pink-ink), var(--pink-btn),
var(--muted), var(--ink), var(--line-soft)).
========================================================================== */
/* ---------- home-team: no real team photo exists yet, so the right column
is a composed panel built from a real claim already on the about page,
not an invented photo of people. See the HTML comment in home-team.html
for the slot a real photo drops into later. ---------- */
.team-visual{display:flex}
.team-card{
width:100%;min-height:320px;
display:flex;flex-direction:column;align-items:flex-start;gap:16px;
background:linear-gradient(165deg,var(--tint-pink) 0%,var(--tint-lav) 100%);
border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--shadow-card);
padding:clamp(26px,3.2vw,42px) clamp(24px,2.8vw,36px);
}
.team-mark{
display:flex;align-items:center;justify-content:center;flex:0 0 auto;
width:54px;height:54px;border-radius:15px;
background:#fff;color:var(--pink-ink);box-shadow:var(--shadow-card);
}
.team-mark svg{width:26px;height:26px}
.team-quote{
margin:0;font-size:clamp(19px,1.9vw,22px);font-weight:700;line-height:1.42;
letter-spacing:-.01em;color:var(--ink);
}
.team-from{margin:0;font-size:14px;color:var(--muted)}
.team-tag{
margin-top:auto;align-self:flex-start;
display:inline-flex;align-items:baseline;gap:6px;
padding:9px 16px;border-radius:var(--r-pill);
background:var(--pink-btn);color:#fff;
}
.team-tag span{font-weight:800;font-size:15px;letter-spacing:-.01em}
.team-tag small{font-size:14px;font-weight:600;opacity:.85}
@media (max-width:720px){
.team-card{min-height:0}
}
/* ---------- home-picture: the dashboard is drawn, not photographed (there is
no laptop photo), and the three tiles show what is tracked, not an
account's numbers, so nothing here is a fabricated result. ---------- */
.pic-dash{max-width:none}
.pic-chart-wrap{
margin:18px 0 20px;padding:14px 16px 4px;border-radius:14px;
background:#fff;border:1px solid var(--line-soft);
background-image:linear-gradient(var(--line-soft) 1px,transparent 1px);
background-size:100% 25%;
}
.pic-chart{width:100%;height:auto;display:block}
.pic-chart-fill{fill:var(--tint-pink)}
.pic-chart-line{fill:none;stroke:var(--pink-btn);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* the strip is built for a full-width row of three; here it sits in the
narrower half of a split, so it stacks as single tiles instead */
.pic-stats.stat-strip{grid-template-columns:1fr;gap:10px}
.pic-stats .stat{padding:16px 18px}
/* ---- 60-plans-faq.css ---- */
/* ==========================================================================
Home: "plans" and "faq" sections.
Facts (plan names, prices, feature lines, CTA destinations) come from
src/pages/pricing.html. Only layout follows the approved concept image.
No new colour tokens: every var() below is already declared in site.css.
========================================================================== */
/* ---------- plans: "Most Popular" badge overlapping the card top edge ---- */
.plan-popular{position:relative;border-color:var(--pink-btn);box-shadow:var(--shadow-card)}
.plan-popular .plan-flag{position:absolute;top:-14px;left:24px;margin:0}
/* ---------- faq: headline left, "View all FAQs" link right --------------- */
.faq-head{
display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
margin:0 0 clamp(28px,3vw,40px);
}
.faq-head h2{margin:0}
.faq-head .tlink{flex:0 0 auto}
/* ---------- faq: native accordion, CSS-only icon ----- */
.acc-faq .faq-col{display:flex;flex-direction:column;gap:2px}
.acc-item{border-bottom:1px solid var(--line-soft)}
.acc-item:first-child{border-top:1px solid var(--line-soft)}
.acc-q{
display:flex;align-items:center;justify-content:space-between;gap:16px;
min-height:44px;padding:18px 4px;cursor:pointer;list-style:none;
font-size:18px;font-weight:800;letter-spacing:-.015em;color:var(--ink);
}
.acc-q::-webkit-details-marker{display:none}
.acc-item[open] .acc-q{color:var(--pink-ink)}
/* a plus that becomes a minus on open: the vertical bar rotates flat onto
the horizontal one, so no new mark is drawn, the same one turns */
.acc-ico{position:relative;flex:0 0 auto;width:18px;height:18px}
.acc-ico::before,.acc-ico::after{
content:"";position:absolute;top:50%;left:50%;background:var(--pink-btn);
transform:translate(-50%,-50%);transition:transform .22s var(--ease);
}
.acc-ico::before{width:14px;height:2px}
.acc-ico::after{width:2px;height:14px}
.acc-item[open] .acc-ico::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc-a{margin:0 0 20px;padding-right:34px}
.acc-a p{margin:0;font-size:16px;color:var(--ink-2);line-height:1.6}
@media (prefers-reduced-motion:reduce){
.acc-ico::before,.acc-ico::after{transition:none}
}
@media (max-width:940px){
.faq-head{flex-direction:column;align-items:flex-start;gap:10px}
}
/* ---- 70-cta.css ---- */
/* ---------------------------------------------------------------------------
Final CTA band, to the 2026-09-20 concept: the fox moves to the left of the
copy, the website field sits inside the band, and the same three trust lines
from the hero repeat under it. The fox's footing is untouched - it is still
pinned to the band's bottom edge by the negative margin in site.css.
--------------------------------------------------------------------------- */
.cta-grid{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
.cta-art{justify-self:start}
.cta-band .cta-copy{min-width:0}
.cta-band p{color:#FCE9F4;max-width:min(100%,33em)}
.cta-band .report-form{margin-top:24px;max-width:600px}
/* the scrim in site.css darkens the LEFT of the band for the copy; with the
copy now on the right the gradient has to run the other way, or the headline
sits on the bright part of the picture */
.cta-band::before{inset:0 0 0 22%;
background:linear-gradient(to left,rgba(46,8,40,.88) 0%,rgba(46,8,40,.76) 58%,rgba(46,8,40,0) 100%)}
.trust-dark li{color:#FBDCEE}
.trust-dark .trust-ico{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}
.cta-alt{margin:18px 0 0}
.cta-alt:empty{display:none}
@media (max-width:860px){
.cta-grid{grid-template-columns:1fr}
.cta-band::before{inset:0;
background:linear-gradient(to bottom,rgba(46,8,40,.9) 0%,rgba(46,8,40,.62) 62%,rgba(46,8,40,.2) 100%)}
.cta-art{justify-self:center;order:2}
.cta-band .cta-copy{order:1}
.cta-band .report-form{max-width:none}
}
/* ---- 80-results.css ---- */
/* ==========================================================================
Results / portfolio page (results.html), added 2026-09-20.
The page carries the same section-by-section rhythm as the rest of the
site, but a case study is mostly plain white .section blocks with a spot
panel and a content-band in between, which reads as one long white slab.
These three utilities give alternating sections a background using tokens
already declared in site.css - no new custom property, just a place to
apply --tint-lav / --tint-soft / --tint-pink at the section level instead
of only inside a component. ==========================================================================*/
.tone-lav{background:var(--tint-lav)}
.tone-soft{background:var(--tint-soft)}
.tone-pink{background:var(--tint-pink)}
/* GPT-5.6 Sol, reading the rendered page: the seventh timeline item was stranded
in its column with a card-sized hole beside it, and the fourth "how we measure"
card sat alone under a row of three. Same defect both times - an item count
that does not divide the column count. A last item that would sit alone spans
the row instead. :nth-child(odd) covers a two-column grid, 3n+1 a three. */
@media (min-width:900px){
.checks > li:last-child:nth-child(odd),
.checks > li:last-child:nth-child(3n+1){grid-column:1 / -1}
.measure-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* GPT-5.6 Sol on the rendered page: "the three primary results are rendered as
sentence-sized copy inside oversized cards" and "31.4 to 22.6 can be mistaken
for deterioration because no direction is stated". The figure leads now, and
the position card says in words that lower is better. */
.res-stats .stat{display:flex;flex-direction:column;gap:6px}
.res-stats .big{
font-size:clamp(32px,3.6vw,48px);font-weight:800;letter-spacing:-.03em;
line-height:1.05;color:var(--pink-ink);
}
.res-stats .v{font-size:15px;color:var(--ink-2);line-height:1.5}
/* The tucked terminal period was an inline-block, which Chromium treats as an
atomic box it may break before even after a word joiner, so a long last word
left the period alone on the next line. An inline box takes the negative
margin just as well and cannot be broken away from the word before it. */
.tp{display:inline}
/* Sol, second pass: spanning the seventh timeline item fixed the hole but left
a mostly empty wide card. A chronology reads down, not across, so the results
timeline is a single column and the question stops arising. */
@media (min-width:900px){
.res-timeline{grid-template-columns:minmax(0,1fr);max-width:760px}
.res-timeline > li:last-child:nth-child(odd),
.res-timeline > li:last-child:nth-child(3n+1){grid-column:auto}
}
/* layout_economy_audit and Sol agreed: a chronology card holding a date and one
short sentence, stacked, leaves most of its own width empty. Each event is one
ROW instead - marker, date, sentence - so the card is the height of its content
and the width is actually used. */
@media (min-width:760px){
.res-timeline{max-width:none;margin-inline:0}
.res-timeline > li{
display:grid;grid-template-columns:auto 170px minmax(0,1fr);
align-items:center;gap:18px;padding-block:16px;
}
.res-timeline > li > .checks-n{position:static;margin:0}
.res-timeline > li > h3{margin:0;font-size:16px;white-space:nowrap}
.res-timeline > li > p{margin:0}
}
/* ---- 90-polish.css ---- */
/* ---------------------------------------------------------------------------
Assembly polish: defects found by looking at the rendered page after the six
section builds landed, each one measured before it was fixed.
--------------------------------------------------------------------------- */
/* 1. The report card's rail column was 118px and the word "Recommendations"
renders about 135px, so it ran straight over the scored rows beside it. */
.jobs-card-body{grid-template-columns:150px minmax(0,1fr)}
/* 2. The "most popular" flag was lifted out of flow, so that card's content
started 31px higher than its three neighbours. Every card now reserves the
same flag row, so all four names sit on one line. */
.plans .plan-popular .plan-flag{position:static;top:auto;left:auto;margin:0 0 14px}
.plans .plan:not(.plan-popular)::before{content:"";display:block;height:27px;margin-bottom:14px}
/* 3. The assistant marks were 26px in a pill built to show them off. */
.engines-pill .eng-head img,
.engines-pill .eng-head svg{width:32px;height:32px}
.engines-pill .eng-head{font-size:16px}
/* 4. A margin note inherits navy ink, which on the plum CTA band was navy on
near-navy. Notes on a dark band get light ink and a light arrow. */
.cta-band .note{color:#FFE4F3}
/* the arrow strokes with currentColor, so the colour above carries it */
/* 5. Adir 2026-09-20: "every section have padding on top and on the bottom, so
it is not going to show glued together." The old rhythm gave a full section
104px on each edge and zeroed the top of a .section-cont, so a boundary was
either 104px or, where two full sections met, 208px - which the hole
detector correctly called a 215px hole on the homepage. Every section now
carries the SAME padding on both edges, halved so a boundary still lands on
the rhythm the page already had. */
:root{--sec-edge:clamp(32px,3.6vw,56px)}
.section{padding-block:var(--sec-edge)}
.section-cont{padding-top:var(--sec-edge)}
.section-lead{padding-top:clamp(28px,2.8vw,46px)}
.section-tight{padding-bottom:clamp(26px,2.6vw,42px)}
/* 6. The header gained a CTA button, so at 1024 the nav items had to wrap and
"How it works" broke across two lines. Nav labels never wrap. */
.nav-main > a,
.nav-dd > button,
.foot-nav a{white-space:nowrap}