. */
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. The .nowrap span comes from the
{{phone}} token, so the attribute selector is the backstop: a tel: link
written by hand, without the token, is protected too. */
.nowrap{white-space:nowrap}
a[href^="tel:"]{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(28px,3vw,44px)}
.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:14px 0 0;padding-left:20px}
.ticks li{position:relative;padding-left:27px;margin-bottom:9px;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));
--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;
}
/* 2026-09-22: band_fill_check measured this band 55-79% flat at 768/390 -
not because the art was ever cropped, but because the band-hero.jpg was
painted straight on .hero itself, so once the copy+form+trust list (real
content, not decoration) needed more height than the art's own ratio
gives at a narrow width, the extra was .hero's flat background-colour.
The art moves to a pseudo-element sized to EXACTLY calc(100vw/--art) - its
own true height, never more, never less, so it is always 100% painted -
while .hero itself is free to grow with its content and .hero's own
background-color (already the art's own top-row tint) fills the rest. */
.hero::before{
content:"";position:absolute;left:0;right:0;bottom:0;z-index:0;pointer-events:none;
height:calc(100vw / var(--art));
background-image:url('/assets/img/band-hero.05efeec8.webp');
background-repeat:no-repeat;background-size:100% auto;background-position:center bottom;
}
.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:10px}
.hero h1 .pink{color:var(--pink-ink);display:block}
.hero .lead{margin-bottom:18px;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:10px}
.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}
/* A second, unrelated caption under the same arrow (home-reviews: the pink
"Draft. Reply. Post." and the separate navy "It's that simple." beneath its
one arrow, exactly as the mockup draws it) - no new colour, --ink already
declared. */
.note-sub{display:block;margin-top:6px;color:var(--ink)}
.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;
--band-sky:#FBE0EF;
--band-art:'band-content.jpg';
background-color:var(--band-sky);
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;
--band-sky:#FEEDF7;
--band-art:'band-mid.jpg';
background-color:var(--band-sky);
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;
--band-sky:#7A1F58;
--band-art:'band-cta.jpg';
background-color:var(--band-sky);
color:#fff;display:flex;align-items:flex-end;
padding-block:clamp(48px,7vw,104px) clamp(56px,5.4vw,80px);
}
/* 2026-09-22: same fix as .hero::before - band_fill_check measured this band
63-76% flat at 768/390 because band-cta.jpg was painted on .cta-band
itself, so the real content (heading, paragraph, form, trust list) forced
the band well past the art's own height. The art moves to its own
pseudo-element, sized to exactly its true painted height; ::before is
already the readability scrim, so the art sits on ::after instead, one
z-index below it. */
.cta-band::after{
content:"";position:absolute;left:0;right:0;bottom:0;z-index:0;pointer-events:none;
height:calc(100vw / var(--art));
background-image:url('/assets/img/band-cta.031683d2.webp');
background-repeat:no-repeat;background-size:100% auto;background-position:center bottom;
}
/* 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}
/* 44px is the tap floor; 9px of padding round a 23px line gave 41 and the
negative margin keeps the visual spacing identical either way. */
.page-hero .crumb a{display:inline-block;padding:11px 4px;margin:-11px -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}
/* 2026-09-22 density pass: the stacked fox was clamp(300,86vw,400) tall,
which alone put the mobile hero band's real content 700-800px past the
background art's own height (390/1.83 = 213px), so most of the band was
flat fallback colour. Half the size still reads as the same mascot, on
the same ground line, without manufacturing a flat plum floor under it. */
.hero-art{position:static;width:auto;margin:10px auto -6px;right:auto;bottom:auto;display:flex;justify-content:center}
.hero-art img{height:clamp(160px,40vw,210px);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;padding-bottom:calc(var(--ground) + 14px)}
.hero::before{background-image:url('/assets/img/band-hero-m.61db6505.webp')}
.cta-band{--art:1.901;--band-sky:#792058;--band-art:'band-cta-m.jpg';background-color:var(--band-sky);padding-bottom:clamp(96px,24vw,140px)}
.cta-band::after{background-image:url('/assets/img/band-cta-m.3c019a08.webp')}
.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;--band-sky:#FBE0EF;--band-art:'band-content-m.jpg';background-color:var(--band-sky);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;--band-sky:#FEE6F3;--band-art:'band-mid-m.jpg';background-color:var(--band-sky);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){
/* Everything, not a list of selectors. The list covered exactly the things
that animated the day it was written, so the next animation added on any
other element would have kept moving for the people who asked their
operating system to stop it - and nothing on the page would have looked
wrong to whoever added it. A near-zero duration rather than none, because
animationend and transitionend still need to fire. */
*,*::before,*::after{
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important;
scroll-behavior:auto!important}
html{scroll-behavior:auto}
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}
}
/* Declared here so the build's undeclared-custom-property check has a real
definition to find; site.js overwrites this as an inline style on
the instant it measures the header, so this value only ever paints for the
one frame before that (or a no-JS session) - see main > .band:first-child
below, the only rule that reads it. */
:root{--header-h:65px}
/* Approved concept: the header has no white bar of its own at the very top of
a page that opens on a full-bleed band (the homepage hero, the plum CTA on
an inner page) - the nav sits directly on the art, which is light enough at
its own top edge for --ink text to stay well past 4.5:1. The mockup is
explicit about this: its top 136 pixel rows are unbroken pale artwork, with
the nav painted straight onto the sky. site.js adds this class while the
header's box is still clear of the band's own CONTENT (a sentinel at the
content edge + an IntersectionObserver - see site.js), and removes it the
instant a line of copy or a control would otherwise scroll under a
see-through bar, so every other page, and this one once scrolled, keeps the
solid header untouched. The bound is content, never the art: art under the
nav is the design, copy under the nav is the bug. `:not(.open)` because the mobile drawer (.nav-main,
solid white, opened by #burger) is a second piece of chrome directly under
this bar - the bar must never go transparent while that panel is open, or
two different backgrounds sit stacked on what reads as one control. */
.site-header{transition:background-color .22s linear,border-color .22s linear,box-shadow .22s linear}
.site-header.is-on-band:not(.open){background:transparent;backdrop-filter:none;border-bottom-color:transparent;box-shadow:none}
/* First paint and no-JS: site.js hasn't run yet (or never will), so nothing
has added .is-on-band. Without this, a page that opens on a full-bleed band
still gets the band's negative margin below (always on, CSS-only) but keeps
the default SOLID header, which permanently hides the artwork's own pale
top strip behind a white bar. This is the same visual result .is-on-band
produces, driven by CSS instead of a class, so the two can never disagree
on the very first frame. `html.band-js` is added by site.js the instant it
takes over (see site.js); from then on this rule stands down and the
scroll-linked class above is the only thing in control - a deterministic
handoff rather than a specificity fight between the two. (A true no-JS
session has no scroll listener at all, so the header stays on this rule for
the life of the page; accepted so the art is visible rather than
permanently hidden.) */
html:not(.band-js) .site-header:not(.open):has(+ main > .band:first-child){
background:transparent;backdrop-filter:none;border-bottom-color:transparent;box-shadow:none;
}
/* A sticky header still takes up its own height in normal flow, so making it
transparent on its own only reveals the page's white background - the band
starts AFTER the header's box, not behind it. Pulling the opening band up
by the header's own height puts the band's own top strip behind the
header's box instead of below it, so the header's z-index:40 stacking
context is what decides whether you see the header bar or the art through
it. Scoped to a literal first child of main, so every inner page
(page-hero, not a full-bleed band) is untouched.
--header-h is written by site.js from the header's own measured
offsetHeight, so this margin can never drift out of sync with the value the
scroll logic uses; the 65px fallback (.hrow's 64px + the 1px border) only
matters for the one frame before site.js runs, or for a no-JS session. */
main > .band:first-child{margin-top:calc(-1 * var(--header-h,65px))}
/* Invisible marker site.js drops at the top edge of the opening band's own
content box. Zero-size and unclickable - it exists purely so an
IntersectionObserver can report the moment the first line of copy reaches
the header, instead of guessing from the band's full height. */
.band-header-sentinel{position:absolute;left:0;right:0;height:1px;pointer-events:none}
/* The logo's a wide wordmark (841x128), so `max-height` alone fixes its
height everywhere and lets its WIDTH balloon at narrow viewports: the
26px desktop crop reads as ~12% of a 1440px screen but the same 26px was
44% of a 390px one, wide enough to paint straight over the hero CTA
beneath it. Scaling the crop with viewport width keeps it at roughly that
same ~12% share of the screen down to phone widths, then floors at 18px
so it never gets illegibly small. */
.brand img{max-height:clamp(18px,4.6vw,26px)}
/* 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:22px;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)}
/* Social row: the approved concept shows one bare row of brand marks after
the phone number, before the copyright. Real accounts do not exist yet
(see the HTML comment) so every href stays "#" rather than a guess. */
.foot-social{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.foot-social a{
display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
background:var(--tint-pink);color:var(--pink-ink);transition:background-color .18s linear,color .18s linear;
}
.foot-social a:hover{background:var(--pink-btn);color:#fff}
.foot-social svg{width:16px;height:16px}
.foot-copy{font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap}
/* Legal links + disclaimer: real compliance content the concept's thumbnail
was too small to render, so it stays, but as one thin fine-print line
under the main bar rather than a second block - the whole footer reads as
one slim bar with a caption, never the old tall multi-column footer. Each
link still meets the 44px tap target on its own height even though the
text is small, via padding rather than visible line height. */
.foot-legal-links{display:inline-flex;flex-wrap:wrap;gap:2px 14px}
.foot-legal-links a{
display:inline-flex;align-items:center;min-height:44px;
font-size:13px;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%;flex-wrap:wrap;row-gap:12px}
.foot-bottom{flex-direction:column;align-items:flex-start;gap:6px}
}
/* 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:6px;align-items:flex-start}
.foot-by{margin:0;font-size:13px;color:var(--muted);line-height:1.3}
/* Slim the whole bar: the old footer reserved 46-64px + 28px on the outside
and another 32-48px + 22px between the two rows, which is what read as a
"tall multi-column block" rather than the concept's one slim bar. */
.site-footer{padding-block:clamp(22px,2.4vw,30px) 18px}
.foot-top{padding-bottom:clamp(16px,1.8vw,22px)}
.foot-bottom{
margin-top:0;padding-top:14px;border-top:1px solid var(--line-soft);
font-size:13px;
}
.foot-bottom .legal-line{max-width:620px}
/* ---- 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.
2026-09-22 density pass: the previous extra (clamp(30,5.2vw,96) on top of
a padding-top already raised to clamp(56,7.4vw,112)) pushed the band to
625px at 1440 against a 383px mockup contract, and left an 82px flat
strip because the background art itself never grew. "A little bit taller"
is a small nudge over the natural min-height, not 60% over it. */
min-height:calc(100vw / var(--art) + clamp(8px,1.6vw,28px));
/* 2026-09-22: site.js now bounds the sticky header's transparency by this
band's own content box (.wrap), not by the artwork's top edge, so the
header only stays see-through while .wrap's top sits at or below the
header's own 65px. 85px = that 65px plus ~20px of clearance so the nav
never overlaps the eyebrow line - a fixed floor at every width, not a
vw-scaled value that could shrink under it on a phone. */
padding-block:clamp(85px,6vw,96px) 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:14px 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(6px,2vw,20px))}
.trust{gap:8px 18px}
.trust li{font-size:14px}
}
/* ---------------------------------------------------------------------------
2026-09-22 hero artwork regenerated FULL BLEED.
The old band-hero.jpg/-m were right-anchored: the mountains and pines lived
in the right 55-60% and the left 40-45% was flat pale pink with no art in
it, which is the gap Adir kept seeing against the approved mockup. The new
art is one continuous scene that runs edge to edge - a pink peak and plum
pines at the far left, the palest distant ridges through the left-centre
where the headline and lead sit, a small sun glow just right of centre and
the dense magenta ridges and pine stand on the right.
Nano Banana Pro only emits a fixed list of aspect ratios, so the art is
generated at the nearest listed one and --art is redeclared here as the
FILE'S OWN ratio. The CSS box and the painted image then agree exactly and
nothing is ever cropped or stretched by CSS.
band-hero.jpg 2200x851 -> 2.5852
band-hero-m.jpg 1300x726 -> 1.7906
The desktop file is the generated frame with 118 of its 1344 source rows of
EMPTY TOP SKY removed before the downscale - no part of the scene is lost,
every tree tip and peak is still whole, and the uncropped original is kept
at art/out2/hero3-d2.jpg. Sky is the one thing this band can give up for
free, because background-color below is the art's own top row, so the strip
the band paints above the image is the same sky continued. That buys 54px
at 1440. It is capped by the nav, not by the file: the crop is the deepest
one that still leaves 120px of clean pale sky above the artwork across the
whole width the nav occupies (measured 120.6px at the tightest point, the
left mountain at 6-30%). Only the far right 92-100% sits higher, at 51px,
which carries no nav content and is what the approved mockup does too.
The mobile file is NOT cropped: its band is content-driven with only 19px
of headroom at 390, so a crop there costs fill and buys nothing.
--gline is each file's measured floor line (where the flat plum clearing
starts), so the fox and the signpost keep standing on the illustration's
own ground. background-color is each file's own top row, so the sky that
fills the band above the art is seamless with it.
--------------------------------------------------------------------------- */
.hero{
--art:2.5852;
--gline:.1328;
--band-sky:#FEEAF3;
--band-art:'band-hero.jpg';
background-color:var(--band-sky);
}
@media (max-width:720px){
.hero{
--art:1.7906;
--gline:.0882;
--band-sky:#FDE6F0;
--band-art:'band-hero-m.jpg';
}
}
/* ---------------------------------------------------------------------------
The haze under the BOTTOM of the copy column.
Making the artwork full-bleed put a scene where there used to be flat pink,
which is the point - but it also put the left pine stand and the magenta
ridge directly behind the last line of the lead and the trust row. Measured
with qa/text_on_art_check.js (stroke by stroke, not against one sampled
colour): the lead's last line ran 1.23:1 at 1024 where a pine apex sits
behind "keep".
The house answer for art under text is a TINT, never restyling the copy and
never deleting the art. This one is deliberately anchored to the BOTTOM-LEFT
of the copy and gone by 72% of the way out: the headline zone keeps its
ridges, which is the part of the scene a reader actually registers, and only
the busy corner is quieted. It is the band's own sky colour, so it reads as
haze rolling off the mountains rather than as a panel behind the words - the
flat pink box that started all of this is exactly what must not come back.
--------------------------------------------------------------------------- */
/* The box is deliberately MUCH bigger than the haze inside it. The first
version stopped at the copy's own edges, so the gradient was still ~30%
opaque where the box ended and painted a translucent rectangle with two
crisp corners beside the CTA - the flat panel this exists to prevent. Every
stop below reaches full transparency well inside the box. */
/* Only where the copy actually sits ON the picture. Below 941px site.css drops
.hero-art out of absolute positioning and the artwork stacks BENEATH the
copy, so there is nothing behind the words to quiet - and painting it anyway
left a visibly lighter smudge on the flat sky at 768, which is the same
defect in the other direction. */
@media (min-width:941px){
.hero-copy::before{
content:"";position:absolute;z-index:-1;pointer-events:none;
left:-50vw;right:-4%;top:0;bottom:-56px;
/* Vertical gradient for the shape, horizontal MASK for the fade out to the
right. A radial gradient was the obvious tool and it is the wrong one: its
reach depends on the copy column's own height and width, so the same
percentages that covered the defect at 1440 fell short of it at 1024 while
still painting a corner at 768. Two one-dimensional fades are predictable
at every width - transparent at the top, transparent at the bottom,
transparent to the right, and off-screen to the left, so the box can never
show an edge of its own. */
background:linear-gradient(to bottom, transparent 0 28%, color-mix(in srgb, var(--band-sky) 88%, #fff) 52% 88%, transparent 100%);
-webkit-mask-image:linear-gradient(to right, #000 0 58%, transparent 88%);
mask-image:linear-gradient(to right, #000 0 58%, transparent 88%);
}
}
/* ---------------------------------------------------------------------------
The fox's contact shadow, below 940px.
site.css turns .hero-art into a STATIC, block-level flex row there so the
mascot can centre itself under the copy. That also strips .hero-art of its
containing block, so its absolutely-positioned ::after contact shadow
resolves left:50% and width:96% against .hero-grid instead - measured at
768px it painted a 678px-wide grey ellipse floating right across the band,
nowhere near the boots. Restoring a containing block and letting the row
shrink to the mascot puts the shadow back under the feet at every width;
the auto inline margins from site.css still centre it, so the layout is
unchanged.
--------------------------------------------------------------------------- */
@media (max-width:940px){
.hero-art{position:relative;width:fit-content}
}
/* ---- 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:18px 0 0;padding:0;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px;
}
.jobs-mini li{display:flex;flex-direction:column}
.jobs-mini-ico{display:block;width:24px;height:24px;margin-bottom:8px;color:var(--pink-ink)}
.jobs-mini-ico svg{width:100%;height:100%}
.jobs-mini h3{font-size:16.5px;margin:0 0 4px;letter-spacing:-.01em;color:var(--ink)}
.jobs-mini p{margin:0;font-size:15px;line-height:1.4;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)}
/* 2026-09-22 density pass: this real-markup card (brand row + head + a
118px rail + gauge + five scored rows + caption) was rendering 627px tall
against a ~330px mockup card at the same width, and it was the single
biggest contributor to the jobs section being 741px against a 383px
contract. Every gap below is tightened; nothing is removed. */
.jobs-card{margin-top:14px;padding:16px 18px 14px}
.jobs-card-brand{margin:0 0 10px;font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.jobs-card .preview-head{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.jobs-card .preview-head h3{font-size:18px}
.jobs-card-body{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px}
.jobs-side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.jobs-side li{
padding:7px 10px;border-radius:9px;font-size:14px;font-weight:600;
color:var(--ink-2);line-height:1.25;
}
.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:8px}
.jobs-score{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.jobs-score .gauge{width:76px;margin:0}
.jobs-score .gauge-num{font-size:20px}
.jobs-score .gauge-of{font-size:12.5px}
.jobs-score .score-flag{margin-top:-4px;padding:3px 11px;font-size:13px}
/* 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:5px 0}
.jobs-card .rep-name{font-size:13.5px}
@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(20px,2.4vw,32px) 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:1020px;
background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--shadow-card);
padding:clamp(16px,2vw,22px) clamp(20px,3vw,36px);
}
/* 2026-09-22: the mockup shows five plain marks in a row with no divider
between them and no card padding eating the gap - a hairline was added
here that the mockup never had, and the marks themselves were shrunk to
28px keeping the row on one line. The row is spaced with gap alone now,
and the marks are sized back up because that spacing does the work the
divider used to. */
.engines-pill .eng-head{padding-left:0}
.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 10px;
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:10px}
.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)}
/* 15px is the house floor for a rating glyph; these were 14. */
.review-demo-stars{color:var(--star);font-size:15px;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 12px;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.review-demo-ai{background:var(--tint-lav);border-radius:var(--r-card);padding:12px 14px;margin-bottom:12px}
.review-demo-ai-label{margin:0 0 4px;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.4;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:10px 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(--pink-ink), var(--muted), var(--ink), var(--line-soft)).
========================================================================== */
/* ---------- home-team: a real photo (see the HTML comment for how it was
cut out), floating on the section's own tex-blob backdrop rather than
boxed in a white card - the approved concept has no card here at all.
The asset is a FULL-LENGTH group shot: every subject ends inside the file
with transparent floor room beneath, so the drop-shadow falls on empty
pixels instead of announcing a straight cut across three waists. Nothing
here may re-introduce a fixed height or object-fit - that would crop the
shoes back off and bring the same defect back through CSS. The final width
cap is not decided here: 55-device.css loads after this file and its
2026-09-22 density pass sets the shipped .team-shot / .desk-shot caps. --- */
.team-visual{display:flex;align-items:center;justify-content:center;height:100%}
.team-shot{margin:0;max-width:min(100%,430px)}
.team-shot img{
width:100%;height:auto;display:block;
filter:drop-shadow(0 18px 30px rgba(74,10,52,.14));
}
@media (max-width:720px){
.team-visual{justify-content:center}
.team-shot{max-width:min(100%,300px)}
}
/* ---------- home-picture: a real photo of a laptop, plant and mug shot on a
seamless white sweep and cut out, so it genuinely floats the way the mockup
shows it. No border-radius here: rounding an image only makes sense on an
opaque rectangle, and pairing it with a drop-shadow is what produced the
rounded card casting a square shadow this section used to have. --------- */
.desk-shot{margin:0}
.desk-shot img{
width:100%;height:auto;display:block;
filter:drop-shadow(0 20px 34px rgba(74,10,52,.16));
}
.desk-shot figcaption{margin-top:16px;font-size:15px;color:var(--muted);max-width:min(100%,34em)}
/* ---- 55-device.css ---- */
/* The dashboard on a screen, for "See the bigger picture."
The mockup puts a laptop with the product on it here. Three paragraphs in
boxes was not that, and Adir has now said so three times. Drawn rather than
photographed: the numbers stay ours, the type stays crisp at every width,
and no customer's data ends up in a hero image. */
.device{margin:0;display:block}
.device-screen{
background:#fff;
border:1px solid var(--line);
border-radius:14px 14px 4px 4px;
box-shadow:0 22px 48px -26px rgba(26,12,32,.45), 0 2px 0 rgba(255,255,255,.7) inset;
padding:10px;
overflow:hidden}
/* the lid's foot, so the panel reads as a screen and not another card */
.device-base{
height:11px;
margin:0 auto;
width:min(100%, 118%);
background:linear-gradient(180deg,#E7E1EA,#CFC6D6);
border-radius:0 0 12px 12px;
box-shadow:0 10px 18px -12px rgba(26,12,32,.5)}
.device-base::after{
content:"";display:block;width:64px;height:3px;margin:4px auto 0;
border-radius:3px;background:rgba(26,12,32,.18)}
.device figcaption{margin-top:16px;font-size:15px;color:var(--muted);max-width:min(100%,34em)}
.dash{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;
background:var(--tint-soft);border-radius:9px;padding:10px}
.dash-side{display:flex;flex-direction:column;gap:5px;padding-right:8px;
border-right:1px solid var(--line)}
.dash-brand{font-weight:800;font-size:13px;letter-spacing:-.01em;margin-bottom:4px}
.dash-nav{font-size:12.5px;color:var(--muted);padding:4px 6px;border-radius:6px;white-space:nowrap}
.dash-nav.is-on{background:var(--tint-pink);color:var(--pink-ink);font-weight:700}
.dash-main{min-width:0;display:flex;flex-direction:column;gap:8px}
.dash-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dash-title{margin:0;font-size:14px;font-weight:800}
.dash-range{font-size:12px;color:var(--muted);border:1px solid var(--line);
border-radius:999px;padding:2px 9px;white-space:nowrap}
.dash-chart{display:block;width:100%;height:clamp(84px,9vw,124px)}
.dash-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dash-kpi{background:#fff;border:1px solid var(--line);border-radius:9px;
padding:9px 10px;display:grid;gap:1px;min-width:0}
.dash-n{font-size:clamp(17px,1.5vw,21px);font-weight:800;line-height:1.05;letter-spacing:-.015em}
.dash-l{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-up{font-size:12.5px;font-weight:800;color:#0F7A4A}
@media (max-width:720px){
.dash{grid-template-columns:minmax(0,1fr)}
.dash-side{flex-direction:row;flex-wrap:wrap;gap:4px;border-right:0;
border-bottom:1px solid var(--line);padding:0 0 8px}
.dash-brand{width:100%}
.dash-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
/* 12px is the floor at every width, phones included - this block was
taking the labels to 10px, which is what failed the type gate. */
.dash-n{font-size:16px}
.dash-l{font-size:12px}
}
/* ---------------------------------------------------------------------------
2026-09-22 density pass, overriding 50-team-picture.css (loads first, so a
more specific or later rule is required to win - this file loads after it).
home-team: .team-visual carries height:100% + align-items:flex-end, so it
was stretched to match the copy column's own height (597px, driven by a
paragraph plus three ticks) and the 345px-tall photo sat pinned to the
bottom of that box, leaving 252px of blank white above it. Sizing the
visual to its own content and letting the split's align-items:center
position it splits that gap evenly instead of stacking it all on one edge. */
.team-visual{height:auto;align-self:center}
/* the shipped cutout render is portrait (1200x1671, not the 2188x1574 the
markup's width/height attributes still claim from an earlier version), so
at its old 480px cap it rendered ~600px tall and became the section's own
tallest column instead of the paragraph. A narrower cap keeps a real
person-sized photo without it being the height budget on its own. */
.team-shot{max-width:min(100%,300px)}
@media (max-width:720px){
.team-shot{max-width:min(100%,240px)}
}
/* home-picture: the desk photo is a real landscape shot (1800x1005) filling
its whole ~490px-wide column, which alone put it at 273px tall - most of
this section's 442px against a 184px mockup contract. A narrower photo
column brings the whole section down without cropping or re-shooting it. */
.section:has(#picture-h) .desk-shot{max-width:380px;margin-inline:auto}
@media (max-width:940px){
.section:has(#picture-h) .desk-shot{max-width:440px}
}
/* ---- 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}
/* ---------- plans: the mockup's heading sits left, not centred ----------- */
.plans-head{text-align:left;margin-left:0;max-width:640px}
/* 2026-09-22: the free-report card has one fewer bullet than its three
neighbours, and with every card stretched to the same height that spare
line landed as a single 118px gap right before the button. Letting the
list itself grow and spread its items evenly turns one dead gap into a
few extra points of line-height per item instead. */
.plan .ticks{display:flex;flex-direction:column;flex:1 1 auto;justify-content:space-between}
.plan .ticks li:last-child{margin-bottom:0}
/* 2026-09-22 density pass: 654px cards against a ~280px mockup contract.
Tighter padding and rhythm, same facts on every card. */
.plan{padding:20px 18px}
.plan-kind{margin:0 0 12px}
.plan-price{margin-bottom:4px}
.plan-note{margin:0 0 14px;min-height:0}
.plan .ticks{margin-bottom:14px}
/* site.css pushes the CTA to the card foot with margin-top:auto, which would
fight the ticks list above for the same leftover space now that the list
grows to fill it - the button goes back to a fixed gap instead. */
.plan>.btn.btn-block{margin-top:14px}
/* ---------- 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}
/* the sentence break was landing as "Run your business." / "Let" / "RankSteer
handle the visibility.", an orphaned word alone on its own line - balancing
the two real lines instead removes the orphan without rewriting the copy. */
.cta-band h2{text-wrap:balance}
.cta-band p{color:#FCE9F4;max-width:min(100%,33em);margin-bottom:14px}
.cta-band .report-form{margin-top:16px;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:10px 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-report.css ---- */
/* ==========================================================================
The free-report flow, on ranksteer.com itself.
Three surfaces share this file because they share one vocabulary:
.rsm* the popup every "Get My Free Report" control opens
.fr-* the real page at /free-report/, which is also the no-JS form
.rv-* the viewer at /report/
Ported from lp.ranksteer.com, which was reviewed hard and twice failed by
GPT-5.6 Sol before it passed. What changed in the port is the palette only:
the landing page declared its own hexes, this site has tokens, so every
colour here is one of them or a mix of them. Nothing invents a colour.
========================================================================== */
/* ---------- the popup shell ---------- */
.rsm{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px}
.rsm[hidden]{display:none}
.rsm-back{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 62%,transparent);backdrop-filter:blur(3px)}
.rsm-box{
position:relative;width:min(600px,100%);max-height:94vh;overflow:auto;
padding:26px 22px 24px;border-radius:var(--r-lg);background:var(--paper);
box-shadow:0 40px 90px color-mix(in srgb,var(--ink) 42%,transparent);
animation:rsm-in .22s ease-out;
}
@keyframes rsm-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* the close button is absolutely positioned over this row: the label stops short of it */
.rsm-top{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-right:44px}
.rsm-top img{width:132px;height:auto}
.rsm-top span{color:var(--muted);font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
/* 44px, not the 36px circle it looks like: the tap target is the floor and the
background only has to read as a button */
.rsm-x{
position:absolute;top:8px;right:8px;width:44px;height:44px;display:grid;place-items:center;
border:0;border-radius:50%;background:var(--tint-soft);color:var(--ink-2);
font-size:22px;line-height:1;cursor:pointer;transition:background .15s,color .15s;
}
.rsm-x:hover{background:var(--tint-pink);color:var(--pink-ink)}
.rsm h3{margin:0;font-size:clamp(21px,2.4vw,27px);line-height:1.14;font-weight:800;letter-spacing:-.025em}
.rsm .rsm-sub{margin:9px 0 0;color:var(--ink-2);font-size:16px;line-height:1.5}
/* ---------- the details pane ---------- */
.rsm-field{display:block;margin-top:15px}
.rsm-field>span{display:block;margin-bottom:7px;color:var(--ink);font-size:14px;font-weight:700}
.rsm-field input{
width:100%;height:54px;padding:0 16px;border:1.5px solid var(--line);
border-radius:14px;background:var(--tint-soft);color:var(--ink);font:inherit;font-size:16px;
}
.rsm-field input:focus{
outline:0;border-color:var(--pink-btn);background:var(--paper);
box-shadow:0 0 0 4px color-mix(in srgb,var(--pink-btn) 16%,transparent);
}
/* 44px is the tap floor. Both of these are text links in a form, so the height
is taken as a minimum on an inline-flex box rather than as padding, and the
text sits where it looked right before. */
.rsm-more{
display:inline-flex;align-items:center;min-height:44px;
margin:9px 0 0;border:0;background:none;padding:0;color:var(--pink-ink);
font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
text-decoration:underline;text-underline-offset:3px;
}
.rsm-extra[hidden]{display:none}
.rsm .rsm-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.rsm .btn{width:100%;margin-top:18px}
.rsm .btn[disabled]{opacity:.62;cursor:default}
.rsm-note{display:block;margin-top:13px;color:var(--muted);font-size:13.5px;line-height:1.5;text-align:center}
.rsm-note a{color:var(--pink-ink);font-weight:700}
.rsm-err{
margin:15px 0 0;padding:12px 14px;border-radius:12px;
background:var(--tint-pink);color:var(--pink-ink);font-size:14.5px;font-weight:600;line-height:1.45;
}
.rsm-err[hidden]{display:none}
/* ---------- the waiting pane ---------- */
.rsm-meta{
display:flex;align-items:baseline;justify-content:space-between;gap:12px;
margin-top:16px;color:var(--muted);font-size:13.5px;font-weight:700;
}
.rsm-meta b{color:var(--ink);font-size:14.5px}
.rsm-shot{
position:relative;margin-top:10px;overflow:hidden;border:1px solid var(--line);
border-radius:16px;background:var(--paper);aspect-ratio:16/9;
}
.rsm-chrome{
position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:6px;
height:30px;padding:0 12px;background:var(--tint-soft);border-bottom:1px solid var(--line);
}
.rsm-chrome i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.rsm-chrome i:first-child{background:color-mix(in srgb,var(--pink) 34%,var(--paper))}
.rsm-chrome span{
margin-left:8px;padding:2px 10px;border-radius:var(--r-pill);background:var(--paper);
color:var(--muted);font-size:12px;font-weight:700;
max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rsm-skel{position:absolute;inset:30px 0 0;padding:18px 16px;display:grid;align-content:start;gap:12px}
.rsm-skel span{
display:block;height:14px;border-radius:8px;
background:linear-gradient(90deg,var(--tint-soft) 25%,var(--paper) 37%,var(--tint-soft) 63%);
background-size:400% 100%;animation:rsm-shim 1.4s ease-in-out infinite;
}
.rsm-skel span:first-child{height:40px;width:55%}
.rsm-skel span:nth-child(3){width:82%}
.rsm-skel span:last-child{width:64%}
@keyframes rsm-shim{0%{background-position:100% 0}100%{background-position:0 0}}
.rsm-shot img{
position:absolute;inset:30px 0 0;width:100%;height:calc(100% - 30px);
object-fit:cover;object-position:top center;animation:rsm-in .5s ease-out;
}
.rsm-scan{
position:absolute;left:0;right:0;height:38%;
background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--pink) 22%,transparent));
animation:rsm-scan 2.4s ease-in-out infinite;
}
@keyframes rsm-scan{0%{top:-38%}100%{top:100%}}
.rsm-shot.has .rsm-scan,.rsm-shot.has .rsm-skel{display:none}
.rsm-shotcap{
position:absolute;left:0;right:0;bottom:0;z-index:2;padding:8px 12px;
background:linear-gradient(0deg,color-mix(in srgb,var(--ink) 78%,transparent),transparent);
color:var(--paper);font-size:12.5px;font-weight:700;
}
.rsm-bar{height:8px;margin-top:15px;overflow:hidden;border-radius:var(--r-pill);background:var(--tint-pink)}
.rsm-bar i{
display:block;width:6%;height:100%;border-radius:var(--r-pill);background:var(--pink-btn);
transition:width .6s cubic-bezier(.2,.75,.2,1);
}
.rsm-live{display:flex;align-items:center;gap:10px;margin:13px 0 0;color:var(--ink);font-size:15.5px;font-weight:700}
.rsm-live i{
width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:var(--pink-btn);
animation:rsm-pulse 1.1s ease-in-out infinite;
}
@keyframes rsm-pulse{50%{opacity:.25}}
.rsm-feedhead{
display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:17px 0 0;
color:var(--ink);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.rsm-feed{
display:grid;gap:9px;max-height:176px;overflow:auto;margin:9px 0 0;padding:0;
list-style:none;scrollbar-width:thin;
}
.rsm-feed li{
display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;
color:var(--ink-2);font-size:14.5px;font-weight:600;line-height:1.4;
animation:rsm-fd .45s ease-out both;
}
.rsm-feed li b{
display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border-radius:50%;
background:var(--pink-btn);color:var(--paper);font-size:11px;font-weight:800;
}
@keyframes rsm-fd{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rsm .rsm-second{
display:block;width:100%;height:52px;margin-top:12px;border:1.5px solid var(--line);
border-radius:var(--r-pill);background:var(--paper);color:var(--ink);
font:inherit;font-size:15.5px;font-weight:700;line-height:48px;text-align:center;cursor:pointer;
}
.rsm .rsm-second:hover{border-color:var(--pink-btn);color:var(--pink-ink)}
/* ---------- the finished pane ---------- */
.rsm-done-top{display:flex;align-items:center;gap:18px}
.rsm-done-top>div:last-child{min-width:0}
.rsm-ring{position:relative;width:104px;height:104px;flex:0 0 auto}
.rsm-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.rsm-ring .trk{fill:none;stroke:var(--tint-pink);stroke-width:9}
.rsm-ring .prg{fill:none;stroke:var(--pink-btn);stroke-width:9;stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:264}
.rsm-ring .num{
position:absolute;inset:0;display:grid;place-content:center;text-align:center;
font-weight:800;font-size:30px;line-height:1;letter-spacing:-.03em;
}
.rsm-ring .num small{display:block;margin-top:3px;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:0}
.rsm-biz{margin:5px 0 0;color:var(--muted);font-size:14px;line-height:1.45;word-break:break-word}
.rsm-first{
margin:18px 0 0;padding:17px 17px 15px;border:1px solid var(--line);
border-radius:16px;background:var(--tint-pink-2);
}
.rsm-first[hidden]{display:none}
.rsm-first h4{margin:0;color:var(--ink);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.rsm-first ul{margin:12px 0 0;padding:0;display:grid;gap:11px;list-style:none}
.rsm-first ul li{
position:relative;padding-left:21px;color:var(--ink-2);font-size:15px;
font-weight:600;line-height:1.45;text-wrap:pretty;
}
.rsm-first ul li::before{content:'';position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--pink-btn)}
.rsm-first ul li b{display:block;color:var(--ink);font-size:13px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.rsm-first p{margin:13px 0 0;color:var(--muted);font-size:13.5px;font-weight:700;line-height:1.45}
/* ---------- the minimised pill ---------- */
.rsm-pill{
position:fixed;right:18px;bottom:18px;z-index:119;display:flex;align-items:center;gap:10px;
padding:13px 19px;border:0;border-radius:var(--r-pill);background:var(--ink);color:var(--paper);
font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
box-shadow:0 18px 40px color-mix(in srgb,var(--ink) 45%,transparent);
}
.rsm-pill[hidden]{display:none}
.rsm-pill i{width:9px;height:9px;border-radius:50%;background:var(--pink);animation:rsm-pulse 1.1s ease-in-out infinite}
@media (min-width:1200px){
.rsm-box{width:min(680px,100%);padding:32px 32px 30px}
}
@media (max-width:640px){
.rsm{padding:0;place-items:stretch}
.rsm-box{width:100%;max-height:100dvh;min-height:100dvh;border-radius:0;padding:20px 18px 28px}
.rsm-shot{aspect-ratio:16/10}
.rsm-feed{max-height:150px}
.rsm-done-top{gap:14px}
.rsm-ring{width:86px;height:86px}
.rsm-ring .num{font-size:25px}
.rsm-pill{right:12px;bottom:12px;left:12px;justify-content:center}
}
/* ==========================================================================
/free-report/ - the page the popup is built on top of
========================================================================== */
/* Adir, 2026-09-17: the starter is its own visually separated, labelled block,
never a field floating in the hero copy. Its own edge, its own label, a
labelled field, the primary button and the reassurance line, all inside it. */
/* The starter sits BESIDE the headline, in the page header, so the first
screen carries both the promise and the thing to do about it. */
/* The starter card is a good deal taller than the copy beside it, and a
centred grid row answered that by pushing the headline 389px down the
page, leaving a quarter of the screen empty above the breadcrumb. The
two columns start together; the card is simply allowed to be longer. */
.fr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:clamp(28px,4vw,56px);align-items:start}
.fr-copy h1{max-width:none;margin-bottom:16px}
/* the site's own two-line display heading: the second clause drops to its own
line in pink, which is also how a comma is kept out of a 58px line break -
Jakarta carries about 7px of sidebearing on each side of one at that size */
.fr-copy h1 .pink,.fr-sample h2 .pink{color:var(--pink-ink);display:block}
.fr-copy .lead{max-width:34em}
.fr-copy .trust{margin-top:22px}
.fr-starter{
position:relative;background:var(--paper);border:1px solid var(--line);
border-radius:var(--r-lg);box-shadow:var(--shadow-lift);
padding:clamp(22px,2.6vw,32px);
}
.fr-starter::after{
content:'';position:absolute;inset:0 0 auto;height:5px;border-radius:var(--r-lg) var(--r-lg) 0 0;
background:linear-gradient(90deg,var(--pink-btn),var(--plum));
}
.fr-badge{
display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;padding:6px 14px;
border-radius:var(--r-pill);background:var(--tint-pink);color:var(--pink-ink);
font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.fr-badge svg{width:15px;height:15px}
.fr-starter h2{font-size:clamp(22px,2.2vw,28px);margin-bottom:8px}
.fr-starter>p{color:var(--ink-2);font-size:16px;margin-bottom:18px}
.fr-starter .frow:last-of-type{margin-bottom:20px}
.fr-starter .hint a{color:var(--pink-ink);font-weight:700}
.fr-more{
display:inline-flex;align-items:center;min-height:44px;
margin:0 0 6px;border:0;background:none;padding:0;color:var(--pink-ink);
font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
text-decoration:underline;text-underline-offset:3px;
}
.fr-extra[hidden]{display:none}
.fr-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fr-reassure{
display:grid;gap:9px;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line-soft);
list-style:none;
}
.fr-reassure li{display:flex;align-items:flex-start;gap:10px;color:var(--ink-2);font-size:14.5px;font-weight:600;line-height:1.45}
.fr-reassure svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;color:var(--pink-btn)}
.fr-error{
margin:0 0 18px;padding:12px 14px;border-radius:12px;background:var(--tint-pink);
color:var(--pink-ink);font-size:14.5px;font-weight:700;line-height:1.45;
}
/* The seven checks, as a numbered run rather than a list of bullets. The band
they sit in centres its own text; a step is read left to right like any
other list, so it opts out the way .mid-band .feature already does. */
.fr-steps{counter-reset:frs;display:grid;gap:14px;margin:0;padding:0;list-style:none;text-align:left}
.fr-steps li{
counter-increment:frs;position:relative;padding:18px 20px 18px 64px;
border:1px solid var(--line-soft);border-radius:var(--r-card);background:var(--paper);
box-shadow:var(--shadow-card);
}
.fr-steps li::before{
content:counter(frs);position:absolute;left:20px;top:17px;width:30px;height:30px;
display:grid;place-items:center;border-radius:50%;background:var(--tint-pink);
color:var(--pink-ink);font-size:14px;font-weight:800;
}
.fr-steps b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em}
.fr-steps span{display:block;margin-top:4px;color:var(--ink-2);font-size:15.5px;line-height:1.5}
@media (min-width:860px){
.fr-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
/* seven items in two columns leaves one on its own: it takes the whole row
rather than sitting in a half-empty one */
.fr-steps li:last-child:nth-child(odd){grid-column:1 / -1}
}
.fr-sample{
display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,44px);
align-items:center;
}
.fr-sample figure{margin:0}
.fr-sample img{
width:100%;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);
}
@media (max-width:860px){
.fr-sample{grid-template-columns:1fr}
/* On a phone the starter goes directly under the headline, not below a
paragraph and a list of reassurances - a stranger sent the link has to
find the thing to do without scrolling past the sales copy first
(feedback_the_free_report_starter_must_be_unmistakable). The copy block
dissolves into the grid so its own children can be ordered around it. */
.fr-grid{grid-template-columns:1fr;gap:26px}
.fr-copy{display:contents}
.fr-copy .crumb{order:1}
.fr-copy .eyebrow{order:2;margin-bottom:0}
.fr-copy h1{order:3;margin-bottom:0}
.fr-starter{order:4}
.fr-copy .lead{order:5;margin-bottom:0}
.fr-copy .trust{order:6;margin-top:0}
}
/* ==========================================================================
/report/ - the viewer
========================================================================== */
.rv-bar{padding:14px 0;border-bottom:1px solid var(--line);background:var(--tint-soft)}
.rv-bar[hidden]{display:none}
.rv-bar>.wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rv-who{flex:1 1 220px;min-width:0;color:var(--muted);font-size:14px;font-weight:600;line-height:1.35;margin:0}
.rv-who b{display:block;color:var(--ink);font-size:17px;font-weight:800;letter-spacing:-.015em}
.rv-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rv-stage{background:var(--tint-soft)}
.rv-frame{
display:block;width:100%;height:calc(100dvh - 190px);min-height:520px;
border:0;border-top:1px solid var(--line);background:var(--paper);
}
.rv-frame[hidden]{display:none}
.rv-state{max-width:560px;margin:clamp(40px,7vw,90px) auto;padding:0 var(--gut) clamp(40px,7vw,90px);text-align:center}
.rv-state h1{font-size:clamp(25px,3vw,34px);margin-bottom:12px}
.rv-state p{color:var(--ink-2);font-size:16.5px}
.rv-spin{
width:40px;height:40px;margin:0 auto 20px;border:3px solid var(--tint-pink);
border-top-color:var(--pink-btn);border-radius:50%;animation:rv-sp 1s linear infinite;
}
@keyframes rv-sp{to{transform:rotate(360deg)}}
@media (max-width:640px){
.rv-frame{height:calc(100dvh - 210px)}
/* two stacked full-width buttons pushed the report a third of a screen down;
side by side they cost one row */
.rv-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rv-actions .btn{width:100%;justify-content:center;padding-inline:12px;font-size:14.5px;min-height:46px}
}
@media (prefers-reduced-motion:reduce){
.rsm-box,.rsm-scan,.rsm-live i,.rsm-pill i,.rsm-skel span,.rsm-feed li,.rv-spin{animation:none}
.rsm-bar i{transition:none}
.rsm-scan{opacity:.35}
}
/* ---- 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){
/* :nth-child(3n+1) was meant for a three-column grid, but .checks is two
columns everywhere it is used, so it spanned the FOURTH item of a four-item
list that was completing its row perfectly well (contact, 2026-09-20).
Only an ODD last item is ever alone in a two-column grid. */
.checks > li:last-child:nth-child(odd){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}
}
/* A chronology is not a grid of tiles. Boxing each dated line in its own card
meant every short sentence left most of a card empty, which both the layout
audit and the designer read kept calling out, and no amount of resizing fixes
it while the sentences differ in length. The rows are plain now: a marker, a
date, a sentence, separated by a hairline. Nothing to look half full. */
.res-timeline > li{
background:none;border:0;box-shadow:none;border-radius:0;
border-bottom:1px solid var(--line-soft);
}
.res-timeline > li:last-child{border-bottom:0}
/* The three result cards were 371px wide holding a short label and a short
figure, so most of each card was empty - the layout audit measured under 55%
fill. The strip is narrower now, so the content fills the card it sits in. */
.res-stats{max-width:940px;margin-inline:auto}
/* ---- 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. */
@media (min-width:721px){ .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}
/* The markup already carries a .plan-spacer on every card without a flag, so the
::before I added here was a SECOND reserve and pushed three of the four cards
29px lower than the popular one. The flag box is matched to the spacer box
instead, which is the only thing that had to be true. */
.plans .plan-popular .plan-flag{height:31px;margin-bottom:0;display:inline-flex;align-items:center}
/* 3. The assistant marks were 26px in a pill built to show them off.
2026-09-22: a later fix (11, below) shrank these back to 28px to keep five
marks on one line once a divider sat between each - the divider is gone
(40-engines-reviews.css), so the marks read at the mockup's larger, full
colour size again; #11 no longer overrides these. */
.engines-pill .eng-head img,
.engines-pill .eng-head svg{width:38px;height:38px}
.engines-pill .eng-head{font-size:16px;gap:12px}
/* 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}
/* 7. contrast_shot measured 2.26:1 on "The report is free" - the third hero trust
line sits over the dark foot of the illustration at some widths, and navy ink
on a dark plum band is unreadable.
2026-09-22 mockup parity: the approved concept runs this line as one plain
inline row directly on the hero art, no chip/pill/icon-box - the coordinator
flagged the pill as part of why the band ran 634px against the mockup's
363px. The pill is gone; the same legibility problem is solved with a soft
white halo behind the glyphs instead; it holds on both the light pink art
and the dark plum foot, which a flat background colour cannot do for both. */
.hero .trust li{
background:none;padding:0;border-radius:0;backdrop-filter:none;
color:var(--ink);
text-shadow:0 1px 5px rgba(255,255,255,.95),0 0 2px rgba(255,255,255,.9);
}
.hero .trust-ico{
width:19px;height:19px;background:none;box-shadow:none;color:var(--ink);
filter:drop-shadow(0 1px 3px rgba(255,255,255,.9));
}
.hero .trust-ico svg{width:100%;height:100%}
/* 8. GPT-5.6 Sol at 390px: the report preview kept its desktop two-column score
row, so its contents were cut off and the labels wrapped awkwardly. On a
phone the score row stacks. (The trend line this also covered has since
been removed for having no axis or period; the stacking rule stands.) */
@media (max-width:720px){
.jobs-top-row{flex-direction:column;align-items:flex-start;gap:14px}
}
/* 9. On a phone the report card's scored rows ran past the card edge (the label
wrapped and the bar kept its desktop width), and the floating pill sat over
the card's own top edge. Both are phone-only. */
@media (max-width:720px){
.jobs-card .rep-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:baseline}
.jobs-card .rep-bar{grid-column:1 / -1;width:100%}
.jobs-card .rep-name{min-width:0}
.jobs-pill{position:static;margin:0 0 12px;display:inline-flex}
}
/* 10. layout_economy: a primary button sitting 0px under the tick list above it
"reads as part of the list instead of an action below it". Give an action
that follows copy inside a split column real air.
2026-09-22: clamp(18,1.7vw,28) was one of several small gaps stacking up
across jobs/reviews/team/picture into a 2.25x-tall homepage; a little air
still separates the button from the list without adding to that stack. */
.split-copy > .btn,
.split-copy > a.btn{margin-top:clamp(12px,1.2vw,18px)}
/* 11. Sol: "Perplexity wraps onto an orphaned second row in an otherwise
horizontal platform list". Five marks have to sit on one line at the wrap
width, so the pill's own padding gives way before the row does.
2026-09-22: the divider that used to sit in that padding is gone and the
marks are the mockup's larger size again (fix 3, above) - this block
only needs to keep the row from wrapping, not shrink the marks back
down or reintroduce a padding rail. */
@media (min-width:1000px){
.engines-pill{flex-wrap:nowrap}
.engines-pill .eng-head{white-space:nowrap}
}
/* 12. Sol: "pricing-card content starts at different vertical positions". The
one-line positioning under each plan name wraps to two on some cards, so
everything below it slid. The line holds two lines of space on every card. */
@media (min-width:900px){
.plans .plan .plan-sub,
.plans .plan > p:first-of-type{min-height:2.8em}
}
/* 13. An accordion question is a short heading, so it balances its lines rather
than dropping one word onto a line of its own at 390. */
.acc-q{text-wrap:balance}
/* 14. Sol: an exact 61/100 beside the placeholder hostname "yourbusiness.com"
reads as an unresolved template. The card says outright that it is an
example, so the score can stay exactly what the real check returned. */
.jobs-sample{
display:inline-block;vertical-align:middle;margin-left:8px;
padding:3px 9px;border-radius:var(--r-pill);
background:var(--tint-soft);color:var(--muted);
font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
/* 15. The two-column FAQ reserves a 1px divider TRACK, so a page that forgets
the divider element drops its second column into that 1px track - which is
how the contact FAQ came out one word wide and 2,194px tall. A FAQ with no
divider gets two plain columns instead, so the mistake cannot recur. */
.faq:not(:has(.rule)){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* 16. A mid-band centres its text and reserves no room for its own artwork,
which is fine for a heading and a line of copy. The resources page put a
full two-column comparison inside one, so the art's hard top edge cut
straight through both lists and the trees ran over the last line of copy.
A band holding a comparison reserves the art strip at its foot, and the
comparison reads left-aligned like every other list on the site. */
.mid-band:has(.looks){
display:block;text-align:left;
padding-block:clamp(48px,4.6vw,72px) calc(100vw / var(--art) + clamp(20px,2vw,34px));
}
.mid-band:has(.looks) .section-head,
.mid-band:has(.looks) .section-head h2,
.mid-band:has(.looks) .section-head p{text-align:center}
.mid-band .looks,
.mid-band .looks li,
.mid-band .looks h3{text-align:left}
@media (max-width:860px){
.mid-band:has(.looks){padding-block:44px calc(100vw / var(--art) + 18px)}
}
/* 17. A content-band headline sits in a narrow box beside the artwork, so a long
one broke as "Or just look at / your / own business." - one word alone on
its own line. Balancing splits the lines evenly instead. */
.content-band h2{text-wrap:balance}
/* 18. The content-band copy box was min(450px, 26vw) - 374px at 1440 - which is
narrow enough that a seven-word headline broke as "Or just look at / your /
own business." with one word alone in the middle. A little more width lets
the line hold, and the box still sits on the light side of the artwork. */
@media (min-width:1000px){
.content-band .box{max-width:min(520px,32vw)}
}
/* 19. The fifth metric already spanned both columns, but each metric stacks its
number over its label, so a spanning row left its whole right half empty.
The spanning row lays out across instead: number left, label right. */
.pace-rows > div:last-child{
flex-direction:row;align-items:baseline;justify-content:space-between;gap:20px;
}
.pace-rows > div:last-child dt{text-align:right}
/* 20. Escape has to actually shut the dropdown, not just un-set a class.
.nav-dd:focus-within .menu opens the panel, so returning focus to the button -
which the disclosure pattern requires - held the panel open on screen while
aria-expanded said closed. This flag wins over both :hover and :focus-within
and is cleared the moment the pointer or focus leaves the dropdown. */
.nav-dd[data-dismissed] .menu{display:none}
/* 21. A note that annotates a panel has to sit in the margin BESIDE it, not on
top of it - but the standard arrow is only 48-72px, too short to cross the
gutter, so the placement solver had to choose between a note on the panel and
an arrow pointing at nothing. It had been choosing nothing. .note-far gives
the arrow the reach to cross the gap so the note can stay clear of the copy. */
.note-far .note-arrow{width:clamp(96px,9vw,150px)}
/* 22. 2026-09-22 density pass, overriding 10-chrome.css (loads first, so a
later file wins on equal specificity). The single-row footer 10-chrome.css
built was 1,167px of brand+nav+side content in a 1,160px container - 7px
over, which was enough to wrap .foot-top onto two lines, and .foot-bottom's
space-between then put its one wrapped line (the legal disclaimer) alone on
a line with nothing to space it against, reading as a 300px+ dead gutter.
Three visual rows where the mockup has one slim bar. Tighter gaps let the
brand, nav and phone/social/copyright share a single row again, and the
bottom row packs left instead of spacing a lone item across the width. */
@media (min-width:1060px){
.foot-top{flex-wrap:nowrap;gap:20px}
.foot-nav{gap:2px 18px}
.foot-side{gap:16px}
}
.foot-bottom{justify-content:flex-start;gap:8px 22px}
/* ---- 95-texture.css ---- */
/* ==========================================================================
Section texture: soft pink blobs + a faint dotted grid behind the plain
white sections, matching the approved 2026-09-22 homepage concept. The
concept never puts flat white behind a section once the hero band ends -
every one of them carries a soft irregular tint shape and, in a couple of
spots, a small dot grid, the same decorative language as the hand-drawn
notes and the {{icon:sparkle}} marks already on the page.
No new colour tokens: every colour below is one of --tint-pink / --tint-lav
/ --pink already declared in site.css, just used as a very soft backdrop
instead of a card fill. Purely decorative, so every layer is aria-hidden
via ::before/::after (nothing here is read by a screen reader) and sits at
z-index -1 behind the section's own .wrap content (z-index 3+ per .band,
or the default stacking order for a plain .section).
========================================================================== */
.tex-blob{position:relative;isolation:isolate;overflow:hidden}
.tex-blob::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
}
/* Blob weighted to the left edge, bleeding off-screen - the jobs and reviews
rows read left-to-right, so the tint sits behind the copy column's own
white space rather than fighting the card art on the right. */
.tex-blob-l::before{
background:
radial-gradient(closest-side, var(--tint-pink) 0%, rgba(253,238,244,0) 72%) -8% 18% / 52% 70% no-repeat,
radial-gradient(closest-side, var(--tint-lav) 0%, rgba(238,241,254,0) 72%) 6% 82% / 34% 46% no-repeat;
opacity:.8;
}
/* Blob weighted right, mirrored - used where the art/figure sits on the
right so the tint reads as sitting behind the whole row, not just one
half of it. */
.tex-blob-r::before{
background:
radial-gradient(closest-side, var(--tint-pink) 0%, rgba(253,238,244,0) 72%) 104% 22% / 54% 74% no-repeat,
radial-gradient(closest-side, var(--tint-lav) 0%, rgba(238,241,254,0) 72%) 88% 86% / 32% 42% no-repeat;
opacity:.8;
}
/* home-team / home-picture: one shape anchored at each section's own edge,
in the same tint and opacity, so the seam between the two sections reads
as one continuous backdrop behind the photo column rather than two
unrelated tints meeting at a hard line. */
.tex-blob-b::before{
background:
radial-gradient(closest-side, var(--tint-lav) 0%, rgba(238,241,254,0) 74%) 92% 100% / 58% 86% no-repeat,
radial-gradient(closest-side, var(--tint-pink) 0%, rgba(253,238,244,0) 74%) -6% 30% / 40% 52% no-repeat;
opacity:.85;
}
.tex-blob-t::before{
background:
radial-gradient(closest-side, var(--tint-lav) 0%, rgba(238,241,254,0) 74%) 92% 0% / 58% 86% no-repeat,
radial-gradient(closest-side, var(--tint-pink) 0%, rgba(253,238,244,0) 74%) -6% 74% / 40% 56% no-repeat;
opacity:.85;
}
/* A small dot grid, the same accent used near the fox's signpost - one or two
per page is decoration, not wallpaper, so it is a fixed small patch rather
than a full-section fill. */
.tex-dots{position:relative}
.tex-dots::after{
content:"";position:absolute;z-index:-1;pointer-events:none;
top:clamp(28px,6vw,64px);left:clamp(-6px,-1vw,4px);
width:112px;height:84px;
background-image:radial-gradient(var(--pink) 1.6px, transparent 1.6px);
background-size:15px 15px;
opacity:.28;
}
[dir="rtl"] .tex-dots::after,
.tex-blob-r.tex-dots::after{left:auto;right:clamp(-6px,-1vw,4px)}
/* Two placement modifiers for sections whose dot grid sits somewhere other
than the default top-left corner (home-jobs: bottom-left, under the
four-item icon list; home-reviews: top-right, matching the 2026-09-22
mockup exactly rather than reusing tex-blob's own side). Stack with
.tex-dots, applied after it in this file so the cascade wins. */
.tex-dots-b::after{top:auto;bottom:clamp(24px,5vw,56px)}
.tex-dots-r::after{left:auto;right:clamp(-6px,-1vw,4px)}
@media (max-width:720px){
/* A blob that reads as a deliberate accent at 1440 is just noise behind
stacked mobile copy, and the dot patch collides with a heading at this
width more often than it clears one. Both step back to a single faint
wash instead of fighting the text. */
.tex-blob::before{opacity:.5}
.tex-dots::after{display:none}
}
@media (prefers-reduced-motion:no-preference){
.tex-blob::before{transition:opacity .3s linear}
}