/* ==========================================================================
   RankSteer marketing website
   One stylesheet, one set of tokens. Nothing declares a colour of its own.
   Built to match the approved concept-g design.
   ========================================================================== */

@font-face{font-family:Jakarta;src:url('/assets/fonts/jakarta.153fc85b.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Caveat;src:url('/assets/fonts/caveat.891951df.woff2') format('woff2');font-weight:400 700;font-display:swap}

:root{
  /* ink */
  --ink:#0B1B4D;          /* headings, primary text            16.4:1 on white */
  --ink-2:#39477A;        /* subheads, lead paragraphs          8.9:1 on white */
  --muted:#5A6484;        /* captions, fine print               5.9:1 on white */
  /* brand */
  --pink:#FA0156;         /* brand pink - fills and marks only */
  --pink-btn:#E30050;     /* brand pink for filled buttons      4.8:1 vs white */
  --pink-ink:#C70045;     /* brand pink used as text            6.0:1 on white */
  --plum:#5A1A50;         /* dark accent surface */
  --plum-deep:#3B0F37;
  /* surfaces */
  --paper:#FFFFFF;
  --tint-pink:#FDEEF4;
  --tint-pink-2:#FEECF4;
  --tint-lav:#EEF1FE;
  --tint-soft:#FBF7FA;
  --line:#E3E7F3;
  --line-soft:#EDF0F8;
  /* shape + rhythm */
  --r-card:18px;
  --r-lg:24px;
  --r-pill:999px;
  --shadow-card:0 10px 30px rgba(11,27,77,.07);
  --shadow-lift:0 18px 44px rgba(11,27,77,.12);
  --max:1240px;
  --gut:clamp(20px,4vw,40px);
  --section:clamp(72px,7.2vw,112px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Jakarta,'Segoe UI',system-ui,sans-serif;
  font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
/* An <img> carries its width/height attributes as presentational hints. Setting
   only a CSS height therefore leaves width at the attribute value (clamped by
   max-width) and squashes the picture, so height:auto is the default and any
   rule that fixes one axis must free the other. */
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.08;letter-spacing:-.022em;font-weight:800;text-wrap:balance}
p{margin:0 0 1.1em;text-wrap:pretty}
/* A single word alone on a last line is a defect, so every block that holds a
   sentence gets the same treatment as a paragraph, not just <p>. */
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}
.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:76ch}
.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(40px,4vw,56px)}  /* first section under a page hero */
.section-tight{padding-bottom:clamp(46px,4.6vw,68px)}
.section-head{max-width:760px;margin:0 auto clamp(40px,4vw,60px)}
.section-head.center{text-align:center}
.section-head p{color:var(--ink-2);font-size:clamp(17px,1.25vw,19px)}
.sep{height:1px;background:var(--line-soft);border:0;margin:0}

/* ---------- lists: indented under the line above, with a real gap ---------- */
.ticks{list-style:none;margin:20px 0 0;padding-left:20px}
.ticks li{position:relative;padding-left:27px;margin-bottom:13px;color:var(--ink-2)}
.ticks li:last-child{margin-bottom:0}
.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-align:center;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .2s linear;
}
.btn .arw{font-size:1.1em;line-height:1;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 .arw{transition:transform .25s var(--ease)}
.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{
  --art:2.358;
  background-color:#FDE6F0;
  background-image:url('/assets/img/band-hero.a500dc59.jpg');
  padding-block:clamp(44px,5vw,72px) clamp(68px,6.8vw,100px);
  display:flex;align-items:center;
}
.hero>.wrap{width:100%}
.hero-grid{position:relative;min-height:clamp(330px,26vw,400px)}
.hero-copy{position:relative;z-index:2;max-width:min(690px,100%);padding-block:clamp(10px,2vw,28px) 0}
.hero h1{margin-bottom:18px}
.hero h1 .pink{color:var(--pink-ink);display:block}
.hero .lead{margin-bottom:26px;max-width:560px}
.hero-fine{margin-top:14px;font-size:14.5px;color:var(--ink-2)}
/* 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:0;bottom:calc(-1 * clamp(30px,3.2vw,46px));width:auto;z-index:1}
.hero-art img{width:auto;height:calc(100vw / 3.15);max-height:640px;min-height:360px;
  filter:drop-shadow(0 26px 22px rgba(43,10,60,.28))}

/* report form */
.report-form{display:flex;gap:12px;align-items:stretch;max-width:520px}
.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:#8B93AC}
.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:#8B93AC}
.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);font-size:19px;transition:background-color .2s linear,transform .25s var(--ease);
}
.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 figcaption{margin-top:14px;font-size:15px;color:var(--muted);max-width:76ch}
.preview-head{margin-bottom:16px}
.preview-head .stamp{font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.preview-head h3{font-size:22px;margin-bottom:6px}
.preview-head p{font-size:15px;color:var(--ink-2);margin:0}

/* ---------- split rows ---------- */
.split{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,1fr);align-items:center;gap:clamp(32px,4.4vw,68px)}
.split-copy h2{margin-bottom:16px}
.split-copy p{color:var(--ink-2);font-size:clamp(17px,1.3vw,19px);max-width:62ch}
.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)}

/* ---------- content band ---------- */
.content-band{
  --art:3.400;
  background-color:#DCAAC6;
  background-image:url('/assets/img/band-content.3ea7bc33.jpg');
  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:56ch}

/* ---------- mid band ---------- */
.mid-band{
  --art:3.601;
  background-color:#F8E0ED;
  background-image:url('/assets/img/band-mid.a08f0389.jpg');
  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)}

/* ---------- 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:62ch}
.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}
.spot-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------- plans ---------- */
.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:1 1 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:64ch}
.addon-body h3{font-size:17px;margin:0 0 6px}
.addon-body p{font-size:15px;color:var(--ink-2);margin:0}
@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:3.099;
  background-color:#A14767;
  background-image:url('/assets/img/band-cta.e78f9007.jpg');
  color:#fff;display:flex;align-items:flex-end;
  padding-block:clamp(70px,7vw,104px) clamp(56px,5.4vw,80px);
}
.cta-band>.wrap{width:100%}
.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:#FBE4F1;max-width:520px;margin-bottom:26px}
.cta-art{justify-self:end;align-self:end;width:clamp(150px,15.5vw,215px);margin-bottom:calc(-1 * clamp(66px,6.6vw,96px))}
.cta-art img{width:100%;height:auto;filter:drop-shadow(0 20px 20px rgba(10,2,14,.4))}

/* ---------- 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{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 .note{max-width:520px}

/* ---------- inner pages ---------- */
/* Every inner page gets a real header band, not a flat tint: the same woodland
   floor as the homepage runs along the bottom of the hero, on the same
   never-cropped contract as the big bands (100% width, and the padding below
   the copy reserves exactly the strip's own height). The tint curves down over
   the strip's top edge so the join is a designed shape, not a straight seam. */
.page-hero{
  --strip:8;
  position:relative;isolation:isolate;overflow:hidden;
  background:url('/assets/img/band-strip.8e9116d4.jpg') center bottom / 100% auto no-repeat,
             var(--tint-pink);
  padding-block:clamp(48px,5vw,76px) calc(clamp(30px,3vw,46px) + 100vw / var(--strip));
}
.page-hero.lav{background:url('/assets/img/band-strip.8e9116d4.jpg') center bottom / 100% auto no-repeat,
             var(--tint-lav)}
.page-hero::after{
  content:"";position:absolute;left:-3%;right:-3%;
  bottom:calc(100vw / var(--strip) - 22px);
  height:clamp(38px,4vw,62px);background:inherit;background-image:none;
  border-radius:0 0 50% 50% / 0 0 100% 100%;z-index:0;
}
.page-hero>.wrap{position:relative;z-index:1}
.page-hero .crumb{font-size:14px;font-weight:700;color:var(--pink-ink);margin-bottom:14px}
.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}


.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 .wrap{max-width:880px}
body.doc .band .wrap,body.doc .site-footer .wrap,body.doc .site-header .wrap{max-width:var(--max)}
body.doc .prose{max-width:none}
.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:74ch}
.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:62ch}
.aside-card+.aside-card{margin-top:18px}
.formmsg{border-radius:12px;padding:14px 16px;font-size:15.5px;font-weight:600;margin-bottom:20px}
.formmsg.ok{background:#E8F7EE;color:#14532D}
.formmsg.bad{background:var(--tint-pink);color:#8C0032}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .foot-grid{grid-template-columns:minmax(0,1fr) repeat(2,minmax(0,1fr))}
  .jobs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:940px){
  .nav-main,.nav-sub{display:none}
  .burger{display:block}
  .site-header.open .nav-main{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;margin:0;
    position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);
    padding:12px var(--gut) 22px;box-shadow:var(--shadow-lift);max-height:calc(100vh - 64px);overflow-y:auto;
  }
  .site-header.open .nav-main>a,.site-header.open .nav-dd>button{width:100%;justify-content:space-between;min-height:50px;font-size:16.5px}
  .site-header.open .nav-dd{width:100%}
  .site-header.open .nav-dd .menu{position:static;display:none;box-shadow:none;border:0;padding:0 0 6px 12px;min-width:0}
  .site-header.open .nav-dd .menu.open{display:block}
  .site-header.open .nav-dd:hover .menu:not(.open){display:none}
  .site-header.open .nav-login{margin:10px 0 0;padding:0;border:0}
  .hero-grid{min-height:0}
  .hero-art{position:static;width:auto;margin:20px auto calc(-1 * clamp(74px,19vw,104px));right:auto;bottom:auto;display:flex;justify-content:center}
  .hero-art img{height:clamp(360px,104vw,480px);max-height:none;min-height:0}
  .split,.spot-grid,.contact-grid,.cta-grid{grid-template-columns:1fr}
  .split.flip .split-copy{order:0}
  .cta-art{justify-self:center;margin-top:8px}
  .looks,.faq{grid-template-columns:1fr;gap:30px}
  .looks .rule,.faq .rule{display:none}
  .faq-col>div{margin-bottom:24px}
  .content-band{background-position:82% center}
  .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}
  .report-form .btn{width:100%}
  .jobs,.plans,.feature-grid{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:24px;border-top:0;border-left:2px dashed var(--pink);margin:0 0 0 19px}
  .hero{--art:1.9;background-image:url('/assets/img/band-hero-m.52b6629c.jpg');padding-bottom:clamp(120px,30vw,170px)}
  .cta-band{--art:1.9;background-color:#913158;background-image:url('/assets/img/band-cta-m.266dcbdb.jpg');padding-bottom:clamp(96px,24vw,140px)}
  .cta-art{width:min(52%,195px);margin-bottom:calc(-1 * clamp(88px,23vw,124px))}
  .content-band{--art:1.900;background-color:#FCE8F5;background-image:url('/assets/img/band-content-m.8c559b3d.jpg')}
  .content-band .box{max-width:none;padding-block:clamp(36px,7vw,50px) clamp(150px,40vw,210px)}
  /* 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.9;background-color:#FCE6F2;background-image:url('/assets/img/band-mid-m.5ea14e7a.jpg');padding-block:52px clamp(96px,25vw,130px)}
  .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}
  .cmp tr{border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px;margin-bottom:14px;background:#fff}
  .cmp tbody tr:nth-child(even){background:var(--tint-soft)}
  .cmp td{border:0;padding:0;margin-bottom:8px}
  .cmp td:empty{display:none}
  .cmp td:first-child{font-size:18px;margin-bottom:12px}
  .cmp td:not(:first-child)::before{
    content:attr(data-label) ": ";font-weight:700;color:var(--ink);
  }
  .cmp td:last-child{margin-bottom:0}
}

/* ==========================================================================
   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}
  .step-line{background-image:linear-gradient(90deg,var(--pink) 0 11px,transparent 11px 22px);
    background-size:22px 2px;background-repeat:repeat-x;background-position:0 0;border-top:0;height:2px;
    animation:dash-flow 1.6s linear infinite}

  /* sections arrive as you reach them */
  html.js .reveal{opacity:0}
  html.js .reveal.in{animation:fw-in .62s cubic-bezier(.2,.75,.2,1) both}
  html.js .reveal.in.from-left{animation-name:fw-in-left}
  html.js .reveal.in:nth-child(2){animation-delay:.07s}
  html.js .reveal.in:nth-child(3){animation-delay:.14s}
  html.js .reveal.in:nth-child(4){animation-delay:.21s}
  html.js .reveal.in:nth-child(5){animation-delay:.28s}
  html.js .reveal.in:nth-child(6){animation-delay:.35s}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.btn::after,.hero-art,.hero-art img,.cta-art img,.step-dot,.reveal{
    animation:none!important;transition:none!important}
  html.js .reveal{opacity:1}
}