/* ═══════════════════════════════════════════════════════════════
   HRHS public pages

   Dark and light alternate so neither dominates: dark sections
   command, light sections let the reader breathe. Dark sections
   carry the full stack — base, gradient orbs, grain, dot grid —
   because flat dark reads as cheap while layered dark reads as
   built.
═══════════════════════════════════════════════════════════════ */
:root{
  --dark:#04202f;--dark-2:#06364f;--dark-3:#0a4363;--ink:#021723;
  --accent:#0BFF84;--accent-dk:#08cc6a;
  --primary:#4A90D9;--primary-dk:#2F6FB0;--primary-lt:#EBF4FF;
  --text:#3A4654;--muted:#6B7A8C;--border:#E4E9EF;--bg:#F5F7FA;
  --e1:0 1px 3px rgba(2,23,35,.15);
  --e2:0 4px 16px rgba(2,23,35,.10);
  --e3:0 8px 32px rgba(2,23,35,.14);
  --e4:0 20px 64px rgba(2,23,35,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;font-size:17px}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.narrow{max-width:660px}          /* 55–75 characters */

.note{background:#412402;color:#FAC775;padding:12px 20px;font-size:13px;text-align:center;line-height:1.6}
.note b{color:#FAEEDA}

/* ─── nav ─────────────────────────────────────────────────── */
.nav{background:rgba(4,32,47,.9);backdrop-filter:blur(14px);padding:15px 0;position:sticky;top:0;z-index:60;border-bottom:1px solid rgba(255,255,255,.07)}
.nav .wrap{display:flex;align-items:center;gap:26px}
.nav .logo{color:#fff;font-weight:900;font-size:20px;letter-spacing:-.03em;text-decoration:none}
.nav .logo span{color:var(--accent)}
.nav a.l{color:rgba(255,255,255,.72);text-decoration:none;font-size:15px;font-weight:600}
.nav a.l:hover{color:#fff}
.nav .sp{margin-left:auto;display:flex;gap:16px;align-items:center}

/* ─── buttons: weight and glow ────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:12px;padding:17px 30px;font-size:16px;font-weight:800;text-decoration:none;border:0;cursor:pointer;letter-spacing:-.01em;transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s}
.btn--a{background:linear-gradient(135deg,#12ff8c,var(--accent-dk));color:#04202f;box-shadow:0 8px 26px rgba(11,255,132,.34),inset 0 1px 0 rgba(255,255,255,.4)}
.btn--a:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(11,255,132,.46),inset 0 1px 0 rgba(255,255,255,.5)}
.btn--o{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px)}
.btn--o:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.btn--d{background:var(--dark);color:#fff;box-shadow:var(--e2)}
.btn--d:hover{transform:translateY(-2px);box-shadow:var(--e3)}
.btn--sm{padding:12px 20px;font-size:15px}
.cta-note{font-size:14px;color:var(--muted);margin:14px 0 0}
.cta-note--dark{color:rgba(255,255,255,.6)}

/* ─── dark sections: base + orbs + grain + grid ───────────── */
.dark{background:var(--dark);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.dark::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:26px 26px;opacity:.5}
.orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(10px);animation:drift 13s ease-in-out infinite alternate}
.orb--1{width:760px;max-width:130vw;height:760px;top:-320px;left:-180px;background:radial-gradient(circle,rgba(74,144,217,.32),transparent 66%)}
.orb--2{width:640px;max-width:120vw;height:640px;bottom:-300px;right:-140px;background:radial-gradient(circle,rgba(11,255,132,.20),transparent 66%);animation-delay:-6s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(26px,-22px,0) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.orb{animation:none}html{scroll-behavior:auto}}

.sec{padding:104px 0;position:relative}
.sec--tight{padding:72px 0}
.tint{background:var(--bg)}

/* ─── type ────────────────────────────────────────────────── */
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.eyebrow--dk{color:var(--primary-dk)}
h1{font-size:clamp(2.4rem,5.4vw,4rem);font-weight:900;letter-spacing:-.04em;line-height:1.04;margin:0 0 22px}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:800;letter-spacing:-.032em;line-height:1.13;margin:0 0 18px}
h3{font-size:1.22rem;font-weight:700;letter-spacing:-.02em;margin:0 0 9px;line-height:1.3}
.lede{font-size:clamp(1.06rem,1.6vw,1.26rem);line-height:1.62;margin:0 0 30px;max-width:58ch;color:var(--muted)}
.dark .lede{color:rgba(255,255,255,.78)}
p{line-height:1.7;margin:0 0 17px;max-width:68ch}
/* One gradient phrase per page. Never body copy. */
.grad{background:linear-gradient(100deg,#12ff8c 10%,#6fd3ff 90%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* hand-drawn underline under one word */
.mark{position:relative;display:inline-block}
.mark svg{position:absolute;left:0;right:0;bottom:-.22em;width:100%;height:.42em;color:var(--accent);overflow:visible}
.dark .mark svg{color:var(--accent)}
.annot{display:inline-flex;align-items:flex-start;gap:9px;font-size:15px;font-weight:700;color:var(--primary-dk);transform:rotate(-1.2deg);margin-top:6px}
.annot svg{flex-shrink:0;margin-top:2px}

/* ─── hero ────────────────────────────────────────────────── */
/* The cutout is taller than the text column, so centring it left a band of
   empty dark below the figure before the section ended. Bottom-aligning the
   image and dropping the section's bottom padding makes the boundary land
   exactly where the photograph stops. The text stays optically centred. */
.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:end}
.hero>div:first-child{align-self:center;padding-bottom:60px}
.sec--flush{padding-bottom:0}
.hero-img--cut img{margin-bottom:-2px}
.hero-img img{border-radius:22px;box-shadow:var(--e4)}
.hero-img--cut img{border-radius:0;box-shadow:none;filter:drop-shadow(0 30px 56px rgba(0,0,0,.5))}
.heroband{position:relative;overflow:hidden}
.heroband>img{width:100%;height:min(58vh,480px);object-fit:cover;opacity:.3}
.heroband .over{position:absolute;inset:0;display:flex;align-items:center;background:linear-gradient(180deg,rgba(4,32,47,.55),rgba(4,32,47,.94))}

/* trust strip */
.strip{display:flex;gap:36px;flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12)}
.strip div{font-size:14px;color:rgba(255,255,255,.72);display:flex;align-items:center;gap:9px}
.strip b{color:#fff;font-size:15px}

/* ─── bento ───────────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:30px;box-shadow:var(--e2);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--e3)}
/* Glass, because these sit over gradient rather than flat colour. */
.card--dark{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(16px);color:#fff;
  box-shadow:0 4px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.07)}
.card--dark:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.card--dark h3{color:#fff}
.card--dark p{color:rgba(255,255,255,.7)}
.card--wide{grid-column:span 2}
.card .ic{width:46px;height:46px;border-radius:13px;background:var(--primary-lt);color:var(--primary-dk);display:grid;place-items:center;margin-bottom:18px;font-size:19px;font-weight:800}
.card--dark .ic{background:rgba(11,255,132,.14);color:var(--accent);border:1px solid rgba(11,255,132,.22)}
.card p:last-child{margin-bottom:0}

/* ─── split ───────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split img{border-radius:22px;box-shadow:var(--e3)}

/* ─── steps, with decorative numerals behind ──────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:s}
.step{position:relative;padding-top:8px}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-34px;left:-6px;font-size:112px;font-weight:900;line-height:1;color:var(--dark);opacity:.07;z-index:0}
.dark .step::before{color:#fff;opacity:.1}
.step h3,.step p{position:relative;z-index:1}

/* ─── pricing ─────────────────────────────────────────────── */
.price{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:860px;margin:0 auto}
.plan{border:1px solid var(--border);border-radius:22px;padding:34px;background:#fff;box-shadow:var(--e2)}
.plan--hi{position:relative;border:1px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(140deg,var(--accent-dk),rgba(74,144,217,.5)) border-box;
  box-shadow:var(--e4)}
.plan--hi::before{content:"Most pros start free, then upgrade";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#12ff8c,var(--accent-dk));color:#04202f;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:6px 15px;border-radius:20px;white-space:nowrap;box-shadow:0 4px 14px rgba(11,255,132,.4)}
.plan .amt{font-size:2.9rem;font-weight:900;letter-spacing:-.045em;color:var(--dark);line-height:1}
.plan .per{font-size:1rem;color:var(--muted);font-weight:600}
.plan ul{list-style:none;padding:0;margin:22px 0}
.plan li{display:flex;gap:11px;padding:9px 0;font-size:15px;line-height:1.55;border-bottom:1px solid var(--bg)}
.plan li:last-child{border-bottom:0}
.plan li b{color:var(--accent-dk);flex-shrink:0}

/* ─── faq ─────────────────────────────────────────────────── */
.faq{max-width:780px;margin:0 auto}
.q{border-bottom:1px solid var(--border);padding:24px 0}
.q h3{margin-bottom:9px}
.q p{margin:0;color:var(--muted);max-width:none}

.final{text-align:center}
.final h2{max-width:17ch;margin-left:auto;margin-right:auto}
.final .lede{margin-left:auto;margin-right:auto;text-align:center}

.foot{background:var(--ink);color:rgba(255,255,255,.5);padding:38px 0;font-size:14px}
.foot a{color:rgba(255,255,255,.78);text-decoration:none;margin-left:20px}
.foot a:hover{color:#fff}

/* ─── the page responds to scrolling ──────────────────────── */
.rise{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

@media(max-width:900px){
  body{font-size:16px}
  .hero,.split{grid-template-columns:1fr;gap:36px;align-items:stretch}
  /* Stacked, the figure sits under the text and flush to the section edge. */
  .hero>div:first-child{padding-bottom:0}
  .bento,.steps{grid-template-columns:1fr}
  .card--wide{grid-column:auto}
  .price{grid-template-columns:1fr}
  .sec{padding:64px 0}
  .split img{order:-1}
  .nav .wrap{flex-wrap:wrap;gap:14px}
  .nav .sp{margin-left:0;width:100%}
  .hide-sm{display:none}
  .step::before{font-size:84px;top:-24px}
}

.checks{list-style:none;padding:0;margin:0 0 26px}
.checks li{display:flex;gap:11px;padding:9px 0;font-size:15.5px;line-height:1.6;border-bottom:1px solid var(--bg)}
.checks li:last-child{border-bottom:0}
.checks b{color:var(--accent-dk);flex-shrink:0}
.checks strong{color:var(--dark);font-weight:700}
.plan li b{color:var(--accent-dk);flex-shrink:0;line-height:1.5}
.plan li>span{display:block}
.plan li strong{font-weight:700;color:var(--dark);font-size:15px}
.fdesc{color:var(--muted);font-size:13.5px;line-height:1.5;display:block;margin-top:2px}

@media(max-width:900px){
  .prodsplit{grid-template-columns:1fr;gap:34px}
  .shot__app{grid-template-columns:1fr}
  .shot__rail{flex-direction:row;align-items:center;gap:10px;padding:10px}
  .shot__nav{flex-direction:row;overflow:hidden}
}

/* ─── Job board shot, with the notification email beside it ──
   Two halves of the same promise: the curated board, and the
   email that brings it to you. */
.shotwrap{position:relative;padding-bottom:46px}
.shot{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--e4);font-size:11px;line-height:1.35}
.shot__bar{background:#eef1f5;border-bottom:1px solid var(--border);padding:9px 12px;display:flex;align-items:center;gap:6px}
.shot__bar i{width:9px;height:9px;border-radius:50%;background:#cfd6de}
.shot__bar span{margin-left:10px;color:#93a1b0;font-size:10px}
.shot__app{display:grid;grid-template-columns:108px 1fr;min-height:330px}
.shot__rail{background:var(--dark);padding:14px 9px}
.shot__logo{color:#fff;font-weight:900;font-size:13px;letter-spacing:-.02em;padding:0 6px 12px}
.shot__logo em{color:var(--accent);font-style:normal}
.shot__nav{display:flex;flex-direction:column;gap:2px}
.shot__nav span{color:rgba(255,255,255,.6);padding:6px 8px;border-radius:6px}
.shot__nav .on{background:rgba(11,255,132,.14);color:#fff;font-weight:700}
.shot__main{background:var(--bg);padding:12px}
.shot__top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.shot__top b{font-size:13px;color:var(--dark)}
.shot__pill{margin-left:auto;background:#fff;border:1px solid var(--border);border-radius:20px;padding:3px 9px;color:var(--muted);font-size:9.5px}

.job{background:#fff;border:1px solid var(--border);border-radius:9px;padding:9px 10px;margin-bottom:7px}
.job--dim{opacity:.55}
.job__h{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.job__h b{font-size:11.5px;color:var(--dark)}
.job__h u{text-decoration:none;background:rgba(11,255,132,.18);color:#046b3a;font-size:8.5px;font-weight:800;padding:2px 6px;border-radius:20px}
.job__m{display:flex;gap:12px;color:var(--muted);font-size:9.5px;margin-bottom:6px}
.job__f{display:flex;align-items:center;gap:9px;border-top:1px solid var(--bg);padding-top:6px}
.job__f em{font-style:normal;font-weight:800;color:var(--dark);font-size:11px}
.job__f span{color:var(--muted);font-size:9.5px}
.job__f i{margin-left:auto;font-style:normal;background:var(--dark);color:#fff;font-size:9px;font-weight:700;padding:4px 9px;border-radius:6px}

/* the phone overlaps the browser, so the two read as one product */
/* iPhone proportions: 19.5:9, with the bezel radius and a pill notch. The
   earlier box was 1.5:1, which reads as a tablet and undercuts the point that
   this arrives on a phone. */
.phone{position:absolute;right:-18px;bottom:-26px;width:190px;font-size:11px;line-height:1.35;
  background:#0b0f14;border-radius:34px;padding:7px;
  box-shadow:0 26px 56px rgba(2,23,35,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
.phone__notch{width:52px;height:4px;border-radius:10px;background:#2a3238;margin:3px auto 5px}
.phone__scr{position:relative;background:#fff;border-radius:28px;overflow:hidden;
  aspect-ratio:9/19.5;display:flex;flex-direction:column}
.mail__bar{display:flex;align-items:center;padding:14px 12px 6px;background:var(--bg);font-size:8.5px;color:var(--muted)}
.mail__bar b{margin-left:auto;color:var(--dark)}
.mail__hd{display:flex;gap:7px;align-items:center;padding:8px 9px 6px}
.mail__av{width:22px;height:22px;border-radius:6px;background:var(--dark);color:var(--accent);display:grid;place-items:center;font-size:7.5px;font-weight:900}
.mail__from b{display:block;font-size:9px;color:var(--dark);line-height:1.2}
.mail__from span{font-size:8px;color:var(--muted)}
.mail__hd span{font-size:8px;color:var(--muted)}
.mail__subj{padding:0 9px 7px;font-size:10.5px;font-weight:800;color:var(--dark);line-height:1.25}
.mail__body{padding:0 9px 10px;flex:1}
.mail__job{border-top:1px solid var(--bg);padding:6px 0}
.mail__job b{display:block;font-size:9px;color:var(--dark);line-height:1.25}
.mail__job span{font-size:8.5px;color:var(--muted)}
.mail__cta{background:var(--accent);color:var(--dark);text-align:center;border-radius:6px;padding:6px;font-size:9px;font-weight:800;margin-top:8px}

@media(max-width:900px){
  .shotwrap{padding-bottom:0}
  .shot__app{grid-template-columns:1fr}
  .shot__rail{display:flex;align-items:center;gap:10px;padding:10px}
  .shot__nav{flex-direction:row;overflow:hidden}
  /* Below the board on a phone, rather than overlapping it. */
  .phone{position:static;width:190px;margin:18px auto 0}
}

/* ─── Feature grid, tightened ────────────────────────────────
   Five equal cards down a page is a lot of scrolling for a
   short read. Four features in a two-by-two, with the call to
   action occupying the fifth cell — so the section ends on an
   invitation rather than trailing off. */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.feat__card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(16px);
  border-radius:18px;padding:26px;box-shadow:0 4px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.07);
  transition:background .2s,border-color .2s}
.feat__card:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.feat__card h3{color:#fff;font-size:1.1rem;margin:0 0 8px}
.feat__card p{color:rgba(255,255,255,.7);font-size:.95rem;margin:0;max-width:none}
.feat__card--money{grid-column:span 2}
.feat__card .ic{width:44px;height:44px;border-radius:12px;background:rgba(11,255,132,.14);color:var(--accent);
  border:1px solid rgba(11,255,132,.22);display:grid;place-items:center;margin-bottom:16px;font-size:18px;font-weight:800}
/* The invitation reads as a different kind of thing from the cards around it. */
.feat__cta{background:linear-gradient(150deg,rgba(11,255,132,.16),rgba(74,144,217,.12));
  border:1px solid rgba(11,255,132,.28);border-radius:18px;padding:26px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px}
.feat__cta b{color:#fff;font-size:1.15rem;letter-spacing:-.02em}
.feat__cta span{color:rgba(255,255,255,.72);font-size:.92rem;line-height:1.5;margin-bottom:6px}
.feat__cta .btn{padding:13px 22px;font-size:15px}
.feat__cta small{color:rgba(255,255,255,.5);font-size:.78rem;margin-top:2px}
@media(max-width:900px){
  .feat{grid-template-columns:1fr;gap:14px}
  .feat__card--money{grid-column:auto}
  .feat__cta{align-items:stretch;text-align:center}
  .feat__cta .btn{width:100%}
}

/* ─── Listing overlays ───────────────────────────────────────
   Three cards over the photograph: what a listing holds, and a
   review arriving. Absolute on desktop, stacked underneath on a
   phone — overlapping cards at 380px would bury the picture. */
/* The photograph keeps its full width; the cards hang past the edges into
   the section's own padding rather than shrinking the image to make room. */
.hero-stack{position:relative;margin:46px 0}
.hero-stack>img{border-radius:22px;box-shadow:var(--e3)}
.mini{position:absolute;background:#fff;border-radius:14px;padding:12px 13px;font-size:11px;
  box-shadow:0 14px 40px rgba(2,23,35,.28);border:1px solid rgba(2,23,35,.06);width:200px;z-index:2}
/* Positioned to sit mostly *outside* the photograph. Overlaying the
   subject hides the thing the picture is there to show, so each card
   hangs off an edge and clips the image only at its corner. */
.mini--tl{top:-22px;left:-30px}/* Top-aligned with the categories card so the two read as a pair. */
.mini--tr{top:-22px;right:-46px;width:222px}
.mini__hd{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.mini__dot{width:7px;height:7px;border-radius:50%;background:var(--accent-dk)}
.mini__chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.mini__chips i{font-style:normal;font-size:10.5px;font-weight:700;background:var(--primary-lt);
  color:var(--primary-dk);padding:4px 9px;border-radius:20px}
.mini__row{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--bg);padding-top:8px}
.mini__row b{font-size:10.5px;color:var(--dark);font-weight:600}
/* The review card reads as the thing that just arrived. */
.mini--review{border:1px solid rgba(11,255,132,.4);box-shadow:0 18px 46px rgba(2,23,35,.32),0 0 0 4px rgba(11,255,132,.12)}
.mini__new{display:inline-block;background:var(--accent);color:var(--dark);font-size:9px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:20px;margin-bottom:8px}
.mini__stars{color:#F5A623;font-size:13px;letter-spacing:2px;margin-bottom:6px}
.mini--review p{font-size:11.5px;line-height:1.5;color:var(--text);margin:0 0 10px;max-width:none}
.mini__by{display:flex;align-items:center;gap:7px;border-top:1px solid var(--bg);padding-top:8px}
.mini__av{width:22px;height:22px;border-radius:50%;background:var(--dark);color:var(--accent);
  display:grid;place-items:center;font-size:8.5px;font-weight:800}
.mini__by b{font-size:11px;color:var(--dark)}
.mini__by em{font-style:normal;font-size:10px;color:var(--muted);margin-left:auto}
@media(max-width:1100px){
  /* Less room to hang off the edge, so tuck them back over the corners. */
  .hero-stack{margin:40px 40px 32px}
  .mini{width:176px}
  .mini--tl{left:-14px}  .mini--tr{right:-16px;width:190px}
}
@media(max-width:900px){
  .hero-stack{margin:0}
  .mini{width:auto}
  .mini{position:static;width:auto;margin-top:12px;box-shadow:var(--e2)}
  .mini--review{box-shadow:var(--e3)}
  .hero-stack{display:flex;flex-direction:column}
}

/* ── The claim preview ────────────────────────────────────────────────
 *
 * Private, token-gated, and shaped like the approved mockup: a two-column hero
 * with the copy left and the listing right, then the listing at full size, then
 * how it works, then the closing call to action.
 *
 * Every measurement is fluid rather than fixed. This lands in a business
 * owner's inbox and a good share of them will open it on a phone standing in
 * somebody's driveway, which is the least forgiving context this page has. */
.hrhs-preview { background: #fff; }

.hrhs-preview__kicker {
    display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.6px;
    text-transform: uppercase; color: #4A90D9; margin-bottom: 10px;
}

/* ── hero ─────────────────────────────────────────────────────────── */
.hrhs-preview__hero {
    display: grid; grid-template-columns: minmax(340px, 0.85fr) 1.15fr;
    gap: clamp(24px, 4vw, 48px); align-items: center;
    /* Weighted toward the panel's own #0B2A3D on the right, so the export sits
     * on a field close to its own background instead of on a lighter blue that
     * turns it into a visible rectangle. */
    background:
        radial-gradient(90% 80% at 18% 12%, #0C4A63 0%, rgba(12,74,99,0) 62%),
        linear-gradient(115deg, #073349 0%, #0B2A3D 58%, #0B2A3D 100%);
    color: #fff;
    /* No padding at the foot: the point is that the board runs off the bottom
     * of the section rather than sitting inside it. */
    padding: clamp(32px, 6vw, 64px) clamp(20px, 5vw, 44px) 0;
    overflow: hidden;
    /* Full bleed, edge to edge. Capping this would leave the page background
     * showing either side on a wide screen, and the panel could no longer run
     * off the right edge — which is the composition. */
}
/* Only the panel touches the floor; the copy keeps its own room. */
.hrhs-preview__copy { padding-bottom: clamp(32px, 6vw, 64px); }
.hrhs-preview__stage { align-self: end; }
.hrhs-preview__hero h1 {
    font-size: clamp(30px, 5vw, 44px); line-height: 1.1; font-weight: 800;
    letter-spacing: -1.4px; margin: 0 0 14px; color: #fff;
}
.hrhs-preview__copy p { font-size: clamp(15px, 2vw, 17px); line-height: 1.65; color: rgba(255,255,255,0.74); margin: 0 0 24px; }
.hrhs-preview__copy strong { color: #fff; }
.hrhs-preview__cta { font-size: clamp(15px, 2vw, 17px); }
/* Horizontal, and allowed to wrap rather than shrink.
 *
 * On a narrow screen these fold onto two or three lines, which is fine — the
 * alternative is type small enough that the reassurance stops reassuring. */
.hrhs-preview__reassure {
    list-style: none; margin: 14px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px 20px;
}
.hrhs-preview__reassure li {
    display: flex; align-items: center; gap: 7px;
    font-size: 13.5px; color: rgba(255,255,255,0.78); white-space: nowrap;
}
/* Drawn as a shape rather than a ✓ character: the glyph sits differently in
 * every font and would not line up with the text beside it. */
.hrhs-preview__reassure li::before {
    content: ""; flex: none; width: 9px; height: 5px; margin-top: -3px;
    border-left: 2px solid #0BFF84; border-bottom: 2px solid #0BFF84;
    transform: rotate(-45deg);
}

/* The deadline, given weight.
 *
 * Amber rather than the accent green: it is information about the link, not
 * another thing to press, and a second green element beside the button would
 * compete with it. */
.hrhs-preview__expiry {
    display: flex; align-items: flex-start; gap: 13px;
    margin-top: 22px; max-width: 46ch;
    background: rgba(232, 163, 61, 0.12);
    border: 1px solid rgba(232, 163, 61, 0.35);
    border-radius: 12px; padding: 14px 16px;
}
.hrhs-preview__expiry-ic { flex: none; color: #E8A33D; }
.hrhs-preview__expiry-ic svg { width: 20px; height: 20px; display: block; }
.hrhs-preview__expiry-b b {
    display: block; font-size: 15px; font-weight: 800; color: #FFD79A; letter-spacing: -0.2px;
}
.hrhs-preview__expiry-b span {
    display: block; font-size: 13px; color: rgba(255,255,255,0.62); margin-top: 3px; line-height: 1.5;
}

/* No surface of its own.
 *
 * This started as a white card holding a directory tile, and the padding and
 * background stayed behind when the contents became a full-bleed panel export —
 * which is where the white trim around the image came from. */

/* ── sections ─────────────────────────────────────────────────────── */
/* The standard container, 1280px — the same measure as the header, the footer
 * and every other page on the site. Set here as a variable so a future change
 * to .hrhs-content only has to be mirrored in one place rather than five.
 *
 * The hero is deliberately outside this: it is full bleed, because the panel
 * running off the right edge is the whole point of that composition. */
.hrhs-preview { --hrhs-preview-w: 1280px; }

.hrhs-preview__sec { padding: clamp(36px, 6vw, 64px) clamp(20px, 5vw, 44px); }

/* One real container per section, not a rule aimed at whatever children happen
 * to be there.
 *
 * The previous version capped `.hrhs-preview__sec > *`, which any later
 * single-class rule outranks on equal specificity — so the headings kept their
 * own max-width and sat at the section edge while the grids below them centred.
 * A container element cannot be overridden by accident. */
.hrhs-preview__in {
    max-width: var(--hrhs-preview-w);
    margin-inline: auto;
}
.hrhs-preview__sec--tint { background: #F4F6F9; }
.hrhs-preview__sec h2 {
    font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; color: #032333;
    letter-spacing: -0.8px; margin: 0 0 10px;
}
.hrhs-preview__lede { font-size: clamp(15px, 2vw, 16.5px); color: #6B7280; max-width: 62ch; margin: 0 0 28px; }

/* Held to a readable width.
 *
 * Left to fill the page the card stretched past 1100px, which pushed the cover
 * to a height that filled the screen on its own and left the details below the
 * fold. The card is the point of this section, so it has to be seen whole. */
/* 60/40, not a fixed sidebar.
 *
 * A 320px column meant the sidebar shrank in proportion as the container grew,
 * so the call to action kept getting quieter on exactly the screens with room
 * for it. Fractions hold the split at any width.
 *
 * minmax(0, …) on both: a grid track sized in fr will not shrink below its
 * content by default, and the cover image inside the card is happy to push past
 * 60% given the chance. */
.hrhs-preview__grid {
    display: grid;
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    gap: 28px; align-items: start;
}

/* The listing card carries the cover to its own edge, so its padding lives on
 * the body rather than the card. */
.hrhs-preview__listing { padding: 0; overflow: hidden; }

.hrhs-preview__cover { position: relative; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 14px 14px 0 0; }
.hrhs-preview__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Said on the image. Underneath it would be read after the photo has already
 * been taken for theirs. */
.hrhs-preview__phnote {
    position: absolute; right: 12px; bottom: 12px;
    background: rgba(3,35,51,0.72); color: #fff; font-size: 12px; font-weight: 600;
    padding: 7px 13px; border-radius: 999px;
}
.hrhs-preview__top {
    position: absolute; left: 14px; top: 14px;
    background: rgba(3,35,51,0.86); color: #fff; font-size: 11px; font-weight: 800;
    letter-spacing: 0.7px; text-transform: uppercase; padding: 7px 13px; border-radius: 999px;
    backdrop-filter: blur(6px);
}
.hrhs-preview__open {
    position: absolute; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px;
    background: #0BFF84; color: #032333; font-size: 11.5px; font-weight: 800;
    padding: 7px 14px; border-radius: 999px;
}
.hrhs-preview__open i { width: 8px; height: 8px; border-radius: 50%; background: #0B7A42; }

.hrhs-preview__body { padding: 18px clamp(16px, 3vw, 24px) 24px; position: relative; }
/* Overhangs the cover, the way a claimed listing shows it. */
.hrhs-preview__logo {
    position: absolute; left: clamp(16px, 3vw, 24px); top: -32px;
    width: 68px; height: 68px; border-radius: 17px; overflow: hidden;
    border: 4px solid #fff; background: #EBF4FF; display: grid; place-items: center;
    box-shadow: 0 8px 20px rgba(3,35,51,0.24);
}
.hrhs-preview__logo img { width: 100%; height: 100%; object-fit: contain; }
.hrhs-preview__logo-i { font-size: 22px; font-weight: 800; color: #357ABD; }
.hrhs-preview__head { padding-left: 82px; min-height: 40px; }
.hrhs-preview__body h3 { font-size: clamp(19px, 2.6vw, 22px); font-weight: 800; color: #032333; letter-spacing: -0.5px; margin: 0; }
.hrhs-preview__cat { font-size: 14.5px; color: #6B7280; margin: 5px 0 0; }
.hrhs-preview__head { display: flex; align-items: flex-start; gap: 20px; }
.hrhs-preview__head h3 { margin: 0; }
.hrhs-preview__rate { margin-left: auto; text-align: right; white-space: nowrap; }
.hrhs-preview__rate-stars { color: #F5A623; font-size: 17px; letter-spacing: 1.5px; }
.hrhs-preview__rate-n { font-size: 19px; font-weight: 800; color: #032333; margin-left: 6px; }
.hrhs-preview__rate-c { display: block; font-size: 13px; color: #6B7280; margin-top: 2px; }

.hrhs-preview__tile-eg {
    background: #F2F5F9; color: #8A97A5; font-size: 7.5px; font-weight: 800;
    letter-spacing: 0.4px; text-transform: uppercase; padding: 2px 6px; border-radius: 999px;
}
.hrhs-preview__desc { font-size: 15.5px; line-height: 1.6; color: #374151; margin: 14px 0 0; }
.hrhs-preview__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.hrhs-preview__meta {
    display: flex; gap: 26px; flex-wrap: wrap;
    font-size: 14px; color: #6B7280; margin: 16px 0 0;
    padding-top: 14px; border-top: 1px solid #E2E8F0;
}
.hrhs-preview__meta strong { color: #032333; font-weight: 700; }

.hrhs-preview__side { padding: 24px; position: sticky; top: 20px; }
.hrhs-preview__side h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: #032333; }
.hrhs-preview__side p { font-size: 14.5px; color: #6B7280; margin: 0 0 18px; line-height: 1.6; }
.hrhs-preview__side .hrhs-btn { width: 100%; }
.hrhs-preview__ticks { list-style: none; margin: 18px 0 0; padding: 0; }
.hrhs-preview__ticks li { font-size: 14.5px; color: #374151; padding: 6px 0 6px 24px; position: relative; }
.hrhs-preview__ticks li::before { content: "✓"; position: absolute; left: 0; color: #15B45C; font-weight: 800; }

.hrhs-preview__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hrhs-preview__steps .hrhs-card { padding: 24px; }
.hrhs-preview__steps b {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: #032333; color: #fff; font-size: 14px; margin-bottom: 14px;
}
.hrhs-preview__steps h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: #032333; }
.hrhs-preview__steps p { margin: 0; font-size: 14.5px; color: #6B7280; line-height: 1.6; }

.hrhs-preview__final {
    background: #032333; color: #fff; text-align: center;
    padding: clamp(40px, 7vw, 72px) clamp(20px, 5vw, 44px);
}
/* Centred as a block and as text. Without the first the container sat left of
 * centre on a wide screen while its text centred inside it, which reads as a
 * mistake rather than a layout. */
.hrhs-preview__final .hrhs-preview__in { display: flex; flex-direction: column; align-items: center; }
.hrhs-preview__final p { max-width: 60ch; }

.hrhs-preview__final h2 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; letter-spacing: -1px; margin: 0 0 10px; color: #fff; }
.hrhs-preview__final p { font-size: clamp(15px, 2vw, 16.5px); color: rgba(255,255,255,0.7); margin: 0 0 26px; }

/* ── narrow ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .hrhs-preview__hero { grid-template-columns: 1fr; }
    .hrhs-preview__grid { grid-template-columns: 1fr; }
    /* The logo would sit on top of the name at this width. */
    .hrhs-preview__head { padding-left: 0; padding-top: 42px; }
    /* Sticky in a single column pins the sidebar over the listing it is meant
     * to sit beside. */
    .hrhs-preview__side { position: static; }
    .hrhs-preview__steps { grid-template-columns: 1fr; }
    .hrhs-preview__cover { aspect-ratio: 16 / 9; }
}

@media (max-width: 560px) {
    /* A long business name has to fit the button that claims it. Wrapping is
     * uglier than truncating and far better than a half-shown company name. */
    .hrhs-preview__cta,
    .hrhs-preview__final .hrhs-btn,
    .hrhs-preview__side .hrhs-btn {
        display: block; width: 100%; white-space: normal; line-height: 1.35;
    }
}

/* ── Claim preview: the parts the first cut was missing ───────────────
 *
 * The hero stage, the four product shots, the plan cards and the FAQ. All of
 * it fluid, because a good share of these open on a phone. */

/* ── hero stage ───────────────────────────────────────────────────── */
.hrhs-preview__stage { position: relative; }
/* Runs off the right of the column, so the board reads as a screen continuing
 * behind the page rather than a picture placed on it. */
.hrhs-preview__panel {
    display: block; width: 122%; height: auto; margin: 0 -22% 0 0;
    /* No border radius and no shadow: the export already carries its own
     * rounded browser corners, and adding either here would draw a second
     * boundary around the first. */
}

/* Sits on the floor of the hero, cut off by the section below.
 *
 * The mask that used to soften these edges is gone: it thinned the whole panel
 * toward the bottom, which read as the image fading out rather than as a screen
 * running past the edge of the page. A hard cut is the more honest illusion. */
.hrhs-preview__tile {
    position: absolute; left: -4%; top: 14%; width: 46%;
    background: #fff; border-radius: 14px; box-shadow: 0 24px 56px rgba(0,0,0,0.5);
    overflow: hidden;
}
.hrhs-preview__tile-cover { position: relative; aspect-ratio: 16 / 9; }
.hrhs-preview__tile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hrhs-preview__tile-flag {
    position: absolute; left: 8px; top: 8px; background: #0BFF84; color: #032333;
    font-size: 9px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
    padding: 4px 9px; border-radius: 999px;
}
.hrhs-preview__tile-bd { padding: 10px 13px 13px; position: relative; }
.hrhs-preview__tile-logo {
    position: absolute; left: 13px; top: -20px; width: 38px; height: 38px;
    border-radius: 10px; overflow: hidden; border: 2px solid #fff; background: #EBF4FF;
    box-shadow: 0 4px 10px rgba(3,35,51,0.3); display: grid; place-items: center;
}
.hrhs-preview__tile-logo img { width: 100%; height: 100%; object-fit: contain; }
.hrhs-preview__tile-initials { font-size: 14px; font-weight: 800; color: #357ABD; }
.hrhs-preview__tile-n {
    padding-left: 46px; min-height: 22px; display: flex; align-items: center;
    font-size: 13px; font-weight: 800; color: #0B2E40; line-height: 1.25;
}
.hrhs-preview__tile-cat {
    display: inline-block; background: #EBF4FF; color: #357ABD; font-size: 9.5px;
    font-weight: 700; padding: 3px 9px; border-radius: 999px; margin-top: 9px;
}
/* Colour stated, not inherited: .hero p paints paragraphs white for the dark
 * panel, and a single class loses to .hero p on specificity. */
.hrhs-preview__hero .hrhs-preview__tile-d {
    font-size: 11px; color: #5A6B7B; margin: 7px 0 0; line-height: 1.5; max-width: none;
}
.hrhs-preview__tile-specs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.hrhs-preview__tile-specs span {
    background: #F2F5F9; color: #5A6B7B; font-size: 8.5px; font-weight: 600;
    padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.hrhs-preview__tile-f {
    display: flex; align-items: center; gap: 6px;
    margin-top: 9px; padding-top: 8px; border-top: 1px solid #EDF1F5;
    font-size: 9.5px; color: #8A97A5;
}
.hrhs-preview__tile-stars { color: #F5A623; font-size: 9px; letter-spacing: 0.5px; }
.hrhs-preview__tile-rate { font-weight: 800; color: #0B2E40; }
.hrhs-preview__tile-city { margin-left: auto; }

/* ── features ─────────────────────────────────────────────────────── */
.hrhs-preview__centre { text-align: center; max-width: 62ch; margin: 0 auto 30px; }
.hrhs-preview__centre .hrhs-preview__lede { margin-left: auto; margin-right: auto; }

.hrhs-preview__features { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.hrhs-preview__feature { padding: 0; overflow: hidden; }
.hrhs-preview__shot { background: #EDF2FA; line-height: 0; }
.hrhs-preview__shot img { width: 100%; display: block; }
.hrhs-preview__feature-b { padding: 22px 24px 24px; }
.hrhs-preview__feature-b h3 { margin: 0 0 7px; font-size: 17px; font-weight: 800; color: #032333; }
.hrhs-preview__feature-b p { margin: 0; font-size: 14.5px; color: #6B7280; line-height: 1.6; }

/* ── plans ────────────────────────────────────────────────────────── */
/* Narrower than the container on purpose: two plan cards at 1280px are wider
 * than anyone reads comfortably. */
.hrhs-preview__plans {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    max-width: 1000px; margin: 0 auto; align-items: start;
}
.hrhs-preview__plan { position: relative; padding: 32px; }
.hrhs-preview__plan--hi { border-color: #0BD672; box-shadow: 0 18px 46px rgba(11,214,114,0.16); }
.hrhs-preview__plan-flag {
    position: absolute; left: 50%; top: -14px; transform: translateX(-50%);
    background: #0BFF84; color: #032333; font-size: 11px; font-weight: 800;
    letter-spacing: 0.5px; text-transform: uppercase; padding: 6px 15px;
    border-radius: 999px; white-space: nowrap;
}
.hrhs-preview__plan h3 { margin: 0 0 6px; font-size: 25px; font-weight: 800; color: #032333; }
.hrhs-preview__plan-sub { font-size: 14px; color: #6B7280; margin: 0 0 16px; }
.hrhs-preview__plan-amt { margin-bottom: 20px; }
.hrhs-preview__plan-amt b { font-size: 40px; font-weight: 800; color: #032333; letter-spacing: -1.5px; }
.hrhs-preview__plan-amt span { font-size: 15px; color: #6B7280; font-weight: 600; }
.hrhs-preview__plan ul { list-style: none; margin: 0 0 22px; padding: 0; }
.hrhs-preview__plan li {
    padding: 13px 0 13px 26px; border-top: 1px solid #E2E8F0; position: relative; font-size: 15px;
}
.hrhs-preview__plan li:first-child { border-top: 0; }
.hrhs-preview__plan li::before { content: "✓"; position: absolute; left: 0; color: #15B45C; font-weight: 800; }
.hrhs-preview__plan li strong { display: block; color: #032333; font-weight: 800; }
.hrhs-preview__plan li span { display: block; font-size: 13.5px; color: #6B7280; line-height: 1.6; margin-top: 3px; }
.hrhs-preview__plan .hrhs-btn { width: 100%; }
.hrhs-preview__plan-note { text-align: center; font-size: 13px; color: #6B7280; margin: 12px 0 0; }
.hrhs-preview__plan-later {
    background: #F7F9FC; border: 1px solid #E2E8F0; border-radius: 10px;
    padding: 14px 16px; font-size: 13.5px; color: #6B7280; line-height: 1.6; margin: 0;
}

/* ── narrow ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    /* Stacked, the panel has no floor to sit on, so it goes back to being a
     * contained image with room beneath it. */
    .hrhs-preview__hero { padding-bottom: clamp(32px, 6vw, 64px); }
    .hrhs-preview__copy { padding-bottom: 0; }
    .hrhs-preview__panel { width: 100%; margin: 0; border-radius: 12px; }
    /* Absolute placement over a panel that is now full width would cover the
     * thing it is meant to sit beside. */
    .hrhs-preview__tile { position: static; width: 100%; margin-top: -34px; }
    .hrhs-preview__features { grid-template-columns: 1fr; }
    .hrhs-preview__plans { grid-template-columns: 1fr; }
    .hrhs-preview__plan--hi { margin-top: 22px; }
}

@media (max-width: 560px) {
    .hrhs-preview__plan { padding: 24px 20px; }
}

/* ── For homeowners ───────────────────────────────────────────────────
 *
 * Same container and rhythm as the rest of the marketing pages: 1280px inner,
 * full-bleed section backgrounds, fluid padding. Every measurement scales
 * rather than switching at a breakpoint, so there is one layout to reason about
 * instead of three. */
.hrhs-ho { --hrhs-ho-w: 1280px; background: #fff; }
.hrhs-ho__in { max-width: var(--hrhs-ho-w); margin-inline: auto; }

.hrhs-ho__kicker {
    display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.6px;
    text-transform: uppercase; color: #4A90D9; margin-bottom: 10px;
}
.hrhs-ho__lede { font-size: clamp(15px, 2vw, 17px); color: #6B7280; max-width: 62ch; line-height: 1.65; }

/* ── hero ─────────────────────────────────────────────────────────── */
.hrhs-ho__hero {
    background:
        radial-gradient(90% 80% at 18% 12%, #0C4A63 0%, rgba(12,74,99,0) 62%),
        linear-gradient(115deg, #073349 0%, #0B2A3D 58%, #0B2A3D 100%);
    color: #fff; padding: clamp(44px, 8vw, 88px) clamp(20px, 5vw, 44px);
}
/* Copy left, graphic right — the same shape as the outreach hero. Below 960 it
 * stacks, because the panel needs real width to read as a screen at all. */
.hrhs-ho__hero-grid {
    display: grid; grid-template-columns: minmax(340px, 0.9fr) 1.1fr;
    gap: clamp(24px, 4vw, 48px); align-items: center;
}
.hrhs-ho__hero { padding-bottom: 0; overflow: hidden; }
.hrhs-ho__copy { padding-bottom: clamp(44px, 8vw, 88px); }
.hrhs-ho__stage { position: relative; align-self: end; }

.hrhs-ho__hero h1 {
    font-size: clamp(32px, 5.4vw, 52px); line-height: 1.08; font-weight: 800;
    letter-spacing: -1.6px; margin: 0 0 16px; color: #fff; max-width: 18ch;
}
.hrhs-ho__hero .hrhs-ho__kicker { color: #7FD4F5; }
.hrhs-ho__hero .hrhs-ho__lede { color: rgba(255,255,255,0.76); max-width: 56ch; }

.hrhs-ho__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hrhs-ho__cta--centre { justify-content: center; }
/* A second button that is clearly secondary. A ghost outline reads as an
 * alternative; a second solid button reads as a choice the reader has to make
 * before doing anything. */
.hrhs-btn--ghost {
    background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.42);
}
.hrhs-btn--ghost:hover { border-color: #fff; }

.hrhs-ho__ticks {
    list-style: none; margin: 24px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px 20px;
}
.hrhs-ho__ticks li {
    display: flex; align-items: center; gap: 7px;
    font-size: 13.5px; color: rgba(255,255,255,0.78); white-space: nowrap;
}
/* Drawn, not a ✓ glyph: the character sits differently in every font and would
 * not line up with the text beside it. */
.hrhs-ho__ticks li::before {
    content: ""; flex: none; width: 9px; height: 5px; margin-top: -3px;
    border-left: 2px solid #0BFF84; border-bottom: 2px solid #0BFF84;
    transform: rotate(-45deg);
}

/* ── sections ─────────────────────────────────────────────────────── */
.hrhs-ho__sec { padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 44px); }
.hrhs-ho__sec h2 {
    font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; color: #032333;
    letter-spacing: -0.8px; margin: 0 0 10px;
}

/* ── trades ───────────────────────────────────────────────────────── */

/* ── closing ──────────────────────────────────────────────────────── */
.hrhs-ho__final {
    background: #032333; color: #fff; text-align: center;
    padding: clamp(44px, 7vw, 80px) clamp(20px, 5vw, 44px);
}
.hrhs-ho__final .hrhs-ho__in { display: flex; flex-direction: column; align-items: center; }
.hrhs-ho__final h2 {
    font-size: clamp(26px, 4vw, 36px); font-weight: 800; letter-spacing: -1px;
    margin: 0 0 12px; color: #fff;
}
.hrhs-ho__final p {
    font-size: clamp(15px, 2vw, 16.5px); color: rgba(255,255,255,0.72);
    margin: 0; max-width: 58ch; line-height: 1.65;
}

@media (max-width: 960px) {
.hrhs-ho__hero-grid { grid-template-columns: 1fr; }
    .hrhs-ho__copy { padding-bottom: 0; }
    .hrhs-ho__hero { padding-bottom: clamp(44px, 8vw, 88px); }
}

@media (max-width: 560px) {
/* Full width so neither is the harder tap target, and wrapping rather than
     * shrinking so the labels stay legible. */
    .hrhs-ho__cta { flex-direction: column; align-items: stretch; }
    .hrhs-ho__cta .hrhs-btn { width: 100%; white-space: normal; }
}

/* ── Feature sections ──────────────────────────────────────────────────
 * One feature per section, alternating dark and light. The shots carry the
 * most contrast on dark, but five dark sections in a row is fatiguing, so the
 * light ones between them reset the eye. Image side alternates too, and not in
 * step with the tone, so the pair does not read as one repeating unit.
 * ------------------------------------------------------------------ */
.hrhs-ho__ft { position: relative; overflow: hidden;
  padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 44px); }

.hrhs-ho__ft--dark { background: #032333; }
.hrhs-ho__ft--dark:nth-of-type(even) { background: #06293A; }
/* Depth rather than a flat fill: one soft orb and a fine dot grid. */
.hrhs-ho__ft--dark::before { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(760px 420px at 82% 12%, rgba(74,144,217,.20), transparent 62%),
    radial-gradient(620px 380px at 8% 96%, rgba(11,255,132,.10), transparent 64%);
  pointer-events: none; }
.hrhs-ho__ft--dark::after { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .16; pointer-events: none; }

.hrhs-ho__ft--light { background: #F7F8FB; }
.hrhs-ho__ft--light::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 400px at 92% 8%, rgba(74,144,217,.07), transparent 60%);
  pointer-events: none; }

.hrhs-ho__ft .hrhs-ho__in { position: relative; z-index: 1; }

.hrhs-ho__ft-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(32px, 5vw, 72px); align-items: center; }
.hrhs-ho__ft--imgleft .hrhs-ho__ft-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.hrhs-ho__ft--imgleft .hrhs-ho__ft-copy { order: 2; }
.hrhs-ho__ft--imgleft .hrhs-ho__ft-media { order: 1; }

.hrhs-ho__ft-over { display: block; font-size: 11.5px; font-weight: 800;
  letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 14px; }
.hrhs-ho__ft--dark .hrhs-ho__ft-over { color: #0BFF84; }
.hrhs-ho__ft--light .hrhs-ho__ft-over { color: #4A90D9; }

.hrhs-ho__ft h2 { font-size: clamp(30px, 3.9vw, 42px); font-weight: 800;
  letter-spacing: -1.1px; line-height: 1.14; margin: 0 0 16px; }
.hrhs-ho__ft--dark h2 { color: #fff; }
.hrhs-ho__ft--light h2 { color: #032333; }

.hrhs-ho__ft-lede { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.68;
  margin: 0; max-width: 46ch; }
.hrhs-ho__ft--dark .hrhs-ho__ft-lede { color: rgba(224,232,240,.80); }
.hrhs-ho__ft--light .hrhs-ho__ft-lede { color: #5B6672; }

/* The green check. Same mark on both tones; the disc and stroke shift so it
 * stays legible, because #0BFF84 on white is close to invisible. */
.hrhs-ho__usp { list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; gap: 13px; }
.hrhs-ho__usp li { display: flex; align-items: flex-start; gap: 13px;
  font-size: 16px; line-height: 1.5; }
.hrhs-ho__ft--dark .hrhs-ho__usp li { color: #E0E8F0; }
.hrhs-ho__ft--light .hrhs-ho__usp li { color: #33404D; }
.hrhs-ho__usp svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.hrhs-ho__usp circle { }
.hrhs-ho__ft--dark .hrhs-ho__usp circle { fill: rgba(11,255,132,.16); }
.hrhs-ho__ft--dark .hrhs-ho__usp path { stroke: #0BFF84; }
.hrhs-ho__ft--light .hrhs-ho__usp circle { fill: #DCF5E7; }
.hrhs-ho__ft--light .hrhs-ho__usp path { stroke: #157F45; }
.hrhs-ho__usp path { fill: none; stroke-width: 2.4; stroke-linecap: round;
  stroke-linejoin: round; }

.hrhs-ho__ft-act { margin-top: 30px; }
.hrhs-ho__ft-act a { display: inline-block; border-radius: 999px; font-weight: 800;
  font-size: 15.5px; padding: 14px 28px; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease; }
.hrhs-ho__ft--dark .hrhs-ho__ft-act a { background: #0BFF84; color: #032333;
  box-shadow: 0 12px 28px rgba(11,255,132,.28); }
.hrhs-ho__ft--light .hrhs-ho__ft-act a { background: #032333; color: #fff;
  box-shadow: 0 12px 28px rgba(3,35,51,.22); }
.hrhs-ho__ft-act a:hover { transform: translateY(-1px); }
.hrhs-ho__ft--dark .hrhs-ho__ft--light 
/* ── the shot, in a browser frame ─────────────────────────────────── */
.hrhs-ho__ft-media { position: relative; }
.hrhs-ho__frame { position: relative; border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: 0 30px 70px rgba(3,35,51,.34); }
.hrhs-ho__ft--light .hrhs-ho__frame { box-shadow: 0 26px 60px rgba(3,35,51,.16);
  border: 1px solid #E7ECF2; }
.hrhs-ho__frame img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
/* `.hrhs-ho__ft--imgleft .hrhs-ho__ft-grid` outranks a bare `.hrhs-ho__ft-grid`,
   * so the image-left sections kept their two columns here and squeezed to
   * 168px + 150px on a phone. Both selectors have to be named. */
  .hrhs-ho__ft-grid,
  .hrhs-ho__ft--imgleft .hrhs-ho__ft-grid { grid-template-columns: minmax(0, 1fr); }
  .hrhs-ho__ft--imgleft .hrhs-ho__ft-copy,
  .hrhs-ho__ft--imgleft .hrhs-ho__ft-media { order: initial; }
  .hrhs-ho__ft h2 { font-size: 28px; }
  .hrhs-ho__ft-act a { display: block; text-align: center; }
}

/* Icon sits above the label rather than beside it: the labels run to three
 * words and a side-by-side icon squeezes them onto two lines at tablet width. */
/* Definitions run four to six lines, so the tiles need to sit on a common
 * baseline rather than each shrinking to its own text. */

.hrhs-ho__stage img { display: block; height: 600px; width: auto; max-width: none;
  margin-left: auto; }
@media (max-width: 900px) {
.hrhs-ho__stage img { height: auto; width: 100%; }
}

.hrhs-ho__hero .hrhs-ho__ticks { gap: 12px 22px; max-width: 46ch; margin-top: 18px; }

/* A declaration, not a feature. It reads as something the business commits to
 * rather than another item on a list, so it gets its own frame, its own icon
 * and the company name rather than "we". */
.hrhs-ho__pledge { display: flex; align-items: flex-start; gap: 13px;
  margin: 26px 0 0; max-width: 47ch; padding: 15px 18px; border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(11,255,132,0.26);
  border-left: 3px solid #0BFF84;
  font-size: 14.5px; line-height: 1.55; color: rgba(224,232,240,0.88); }
.hrhs-ho__pledge svg { flex: none; width: 20px; height: 20px; margin-top: 1px;
  fill: none; stroke: #0BFF84; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }

/* With the three-steps section gone, the last feature and the closing CTA sit
 * against each other at the same #032333 and merge into one unbroken dark
 * block. The close should be the deepest thing on the page anyway, so it goes
 * darker and picks up its own glow — that gives the seam somewhere to land. */
.hrhs-ho__final { position: relative; overflow: hidden;
  background: #01161F;
  padding-top: clamp(64px, 9vw, 108px); padding-bottom: clamp(64px, 9vw, 108px); }
.hrhs-ho__final::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(620px 320px at 50% 0%, rgba(11,255,132,.13), transparent 68%);
  pointer-events: none; }
.hrhs-ho__final .hrhs-ho__in { position: relative; z-index: 1; }

/* ── Hero call to action (About) ──────────────────────────────────────
 * The same pair as the homepage, in the same order, with the same line under
 * it. Somebody convinced by the About page previously had nowhere to go from
 * there except back up to the header.
 * ------------------------------------------------------------------- */
.herocta {
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
    margin-top: 26px;
}
/* `flex: 0 0 100%`, not `flex-basis: 100%`. Basis is only a starting size and
 * flex-shrink defaults to 1, so the line shrank to 567px and stayed on the row
 * beside the buttons. Refusing to shrink is what forces it onto its own line —
 * it is a statement about the pair, not about the second button. */
.herocta__fine {
    flex: 0 0 100%; text-align: center; margin: 2px 0 0;
    /* The global `p { max-width: 68ch }` capped this at 567px, which let it
     * share the row despite refusing to shrink. Basis and shrink were never
     * the whole story. */
    max-width: none;
    font-size: .82rem; color: rgba(255,255,255,.62);
}

/* ── What you get (Join as a Pro) ─────────────────────────────────────
 * The same four shots as the claim preview, because it is the same promise
 * made to the same person. Two-up on desktop, one-up below 900 — at three
 * across the screenshots are too small to read, which defeats showing them.
 * ------------------------------------------------------------------- */
.jp-features {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px; margin-top: 40px;
}
.jp-feature {
    background: #fff; border: 1px solid var(--border);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 8px 26px rgba(3,35,51,.07);
}
.jp-feature__shot { background: #EEF3FB; padding: 22px 22px 0; }
.jp-feature__shot img {
    display: block; width: 100%; height: auto;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -2px 24px rgba(3,35,51,.10);
}
.jp-feature__bd { padding: 20px 24px 24px; }
.jp-feature__bd h3 { margin: 0 0 8px; font-size: 1.06rem; }
.jp-feature__bd p { margin: 0; color: var(--muted); max-width: none; }

@media (max-width: 900px) {
    .jp-features { grid-template-columns: 1fr; }
}