/* ═══ CHALKLINE HANDYMAN — Sanford, FL ═══════════════════════════════════════
   A demonstration site. The company is invented; the page says so on every
   screen (the utility-bar chip and the footer).

   ⭐ THE LOOK IS A LEGAL PAD: yellow ground, blue ruled lines, one red margin
   rule. The whole selling idea of this trade is "the list", and a legal pad is
   the list before anybody has said a word.
   ⛔ RED NEVER GOES ON A DARK GROUND. --margin on --board measures 2.39:1. On
      the clipboard band and on photographs the accent is the highlighter
      yellow --hi instead.
   ⛔ NO BLOBS. No radial or elliptical gradient anywhere in this file. Every
      scrim and sheen is a linear fade anchored to an edge.
   ⛔ NO PURPLE, NO PINK.
   Contrast (WCAG, flat colours):
     --ink    #22252A on --pad 14.02 · on --card 15.09
     --ink-2  #4A4D52 on --pad 7.74
     --margin #B42318 white on it 6.57 · as text on --pad 6.00 · on --card 6.45
     --pencil #1D4C86 on --pad 7.88 · white on it 8.64
     --tick   #2D6A3E on --pad 5.91 · white on it 6.48
     --rule   #A9C2DC DECORATIVE ONLY (1.68:1) — never text
     --board-ink #F3EBD6 on --board 13.23 · --hi #F4DB6A on --board 11.9
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --pad:#FAF5DC;
  --pad-2:#F3ECC8;
  --card:#FFFDF4;
  --ink:#22252A;
  --ink-2:#4A4D52;
  --margin:#B42318;
  --margin-dk:#8F1B12;
  --pencil:#1D4C86;
  --tick:#2D6A3E;
  --amber:#7A5300;
  --rule:#A9C2DC;
  --board:#2B211A;
  --board-2:#382B22;
  --board-ink:#F3EBD6;
  --board-ink-2:#D9CDB3;
  --hi:#F4DB6A;
  --seam:#DCD2A8;
  --seam-2:#E9E1BC;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --r:10px;
  --shadow:0 1px 2px rgba(43,33,26,.10),0 6px 18px rgba(43,33,26,.08);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--pad);color:var(--ink);font-family:var(--sans);
  font-size:1.0625rem;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--pencil);text-underline-offset:3px}
a:hover{color:var(--margin-dk)}
h1,h2,h3,h4{line-height:1.15;margin:0;letter-spacing:-.015em}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem;padding-left:1.2rem}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:0;z-index:200}
.skip:focus{left:0;background:var(--ink);color:#fff;padding:.6rem 1rem}
.mono{font-family:var(--mono)}
.muted{color:var(--ink-2)}
.small{font-size:.94rem}
.lab{display:inline-block;font-family:var(--mono);font-size:.78rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--pencil);margin-bottom:.55rem}
.h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.35rem);font-weight:800}
.h3{font-size:1.2rem;font-weight:750}
.lead{font-size:1.15rem;color:var(--ink-2);max-width:44rem}

/* ── the demo's own disclosure chip, inside the utility bar ─────────────── */
.utilbar{background:#1D1813;color:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(255,255,255,.14);font-size:.78rem;line-height:1.4;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.utilbar__in{display:flex;align-items:center;justify-content:space-between;
  gap:.9rem;min-height:38px;padding:.3rem 20px;flex-wrap:wrap;max-width:1180px;margin:0 auto}
.utilbar__hours{margin:0;display:flex;align-items:center;gap:.45rem;min-width:0}
.utilbar__hours b{font-weight:600;color:#fff}
.utilbar__hours>span:last-child{opacity:.78}
.utilbar__right{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;min-width:0}
.utilbar__social{display:inline-flex;align-items:center;gap:.55rem;opacity:.62}
.utilbar__social svg{width:15px;height:15px;display:block}
.utilbar .demostrip{display:inline-flex;align-items:center;gap:.4rem;
  padding:.16rem .55rem;border-radius:999px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);font-size:.72rem;color:#fff;text-decoration:none}
.utilbar .demostrip:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.38);color:#fff}
.utilbar .demostrip b{text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;font-weight:700}
.demostrip__dot{width:7px;height:7px;border-radius:50%;background:#ff7a5c;display:block}
@media (max-width:860px){
  .utilbar__demotail{display:none}
  .utilbar .demostrip{min-height:30px}
}
@media (max-width:560px){
  .utilbar__social,.utilbar__hours>span:last-child{display:none}
  .utilbar .demostrip{min-height:34px;padding-inline:.7rem}
}
/* ⛔ Inside our own iframe the surrounding chrome carries the disclosure, so the
   chip hides there and ONLY there. A standalone page always keeps it. */
html[data-embedded] .demostrip{display:none !important}

/* ── header ─────────────────────────────────────────────────────────────── */
.mast{background:var(--card);border-bottom:1px solid var(--seam);position:sticky;top:0;z-index:80;
  transition:box-shadow .2s var(--ease)}
html[data-scrolled] .mast{box-shadow:0 2px 14px rgba(43,33,26,.12)}
.mast__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.mark{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.mark:hover{color:var(--ink)}
.mark__glyph{flex:0 0 auto;width:34px;height:34px}
.mark__nm{display:block;font-weight:850;font-size:1.12rem;letter-spacing:-.01em;line-height:1.1}
.mark__sub{display:block;font-family:var(--mono);font-size:.72rem;color:var(--ink-2);letter-spacing:.04em}
.mast__act{display:flex;align-items:center;gap:.9rem}
.tel{font-family:var(--mono);font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.tel:hover{color:var(--margin)}
/* ⚠️ .mast__act .mast__cta, not .mast__cta: the .btn rule below is later in
   the file and would win at equal specificity, leaving a four-line pill. */
@media (max-width:760px){.mast__act .mast__cta{display:none}}
@media (max-width:400px){.mark__sub{display:none}.tel{font-size:.92rem}}

/* nav — a checkbox menu on phones, a row on wide screens */
.navq{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
.navbtn{display:none}
.nav{background:var(--board)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0}
.nav a{display:block;padding:.72rem .85rem;color:var(--board-ink);text-decoration:none;font-size:.95rem;font-weight:600}
.nav a:hover{color:#fff;background:var(--board-2)}
.nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -3px 0 var(--hi)}
@media (max-width:900px){
  .navbtn{display:flex;align-items:center;gap:.55rem;background:var(--board);color:var(--board-ink);
    padding:.7rem 20px;font-weight:700;font-size:.95rem;cursor:pointer;min-height:44px}
  .navbtn__ico{position:relative;width:16px;height:2px;background:currentColor}
  .navbtn__ico::before,.navbtn__ico::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor}
  .navbtn__ico::before{top:-5px}.navbtn__ico::after{top:5px}
  .navq:focus-visible + .navbtn{outline:2px solid var(--hi);outline-offset:-4px}
  .nav{display:none}
  .navq:checked ~ .nav{display:block}
  .nav ul{flex-direction:column}
  .nav a{padding:.8rem 20px;border-top:1px solid rgba(255,255,255,.08)}
}

/* ── the offer strip: the $2,500 promise, under the header on every page ── */
.offerbar{background:var(--card);border-bottom:1px solid var(--seam)}
.offerbar__in{display:flex;align-items:center;gap:.7rem;padding-top:.6rem;padding-bottom:.6rem;font-size:.93rem;color:var(--ink-2)}
.offerbar__in b{color:var(--ink)}
.offerbar__s{display:none}
@media (max-width:640px){.offerbar__l{display:none}.offerbar__s{display:inline}}
.offerbar__tag{flex:0 0 auto;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.06em;
  color:#fff;background:var(--margin);border-radius:4px;padding:.18rem .45rem}

/* ── the front-page hero ────────────────────────────────────────────────────
   ⭐ The photograph IS the hero. Text sits on the left over a LINEAR fade that
   starts at the left edge (wide) or the bottom edge (phone). ⛔ No radial or
   ellipse behind the type — measured, not eyeballed:
   node tools/hero-glyph-contrast.mjs <url> <w> <h> ".hero h1" */
.hero{position:relative;isolation:isolate;overflow:hidden;background:#1D1813;color:#fff}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 22%;z-index:-2}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,
    rgba(24,19,15,.92) 0%,
    rgba(24,19,15,.86) 32%,
    rgba(24,19,15,.62) 50%,
    rgba(24,19,15,.18) 70%,
    rgba(24,19,15,0) 84%)}
.hero__in{min-height:clamp(560px,78vh,760px);display:flex;flex-direction:column;justify-content:center;
  padding-top:4.5rem;padding-bottom:7.5rem}
.hero__col{max-width:34rem}
.hero h1{font-size:clamp(2.2rem,1.4rem + 3.3vw,3.9rem);font-weight:850;letter-spacing:-.025em;line-height:1.04;
  color:#fff;margin:0 0 1.1rem}
.h1__where{display:block;font-family:var(--mono);font-size:.9rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--hi);margin-bottom:.9rem}
.hl{font-style:normal;color:var(--hi)}
.hero__lead{font-size:1.14rem;line-height:1.55;color:#F4EFE3;max-width:32rem;margin-bottom:1.5rem}
.hero .btnrow{margin-top:0}
.herodoc{position:absolute;left:0;right:0;bottom:0;z-index:1}
.herodoc__row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem;
  background:var(--card);color:var(--ink);border-radius:var(--r) var(--r) 0 0;
  padding:.8rem 1.1rem;max-width:760px;box-shadow:0 -4px 18px rgba(0,0,0,.18);
  background-image:linear-gradient(90deg,transparent 2.6rem,var(--margin) 2.6rem,var(--margin) calc(2.6rem + 2px),transparent calc(2.6rem + 2px))}
.herodoc__no{font-family:var(--mono);font-weight:700;color:var(--ink-2);width:1.6rem}
.herodoc__item{font-size:.98rem;line-height:1.35}
.herodoc__item b{color:var(--margin)}
.herodoc__amt{font-family:var(--mono);font-weight:800;color:var(--margin);font-size:1.05rem}
/* ⭐ PHONES: the photograph is its own block ABOVE the words, not a ground
   under them. Behind the type on a 390px screen the scrim had to be so dark
   that the picture was a strip at the top. Now the whole photograph shows and
   the type sits on the solid hero ground, with one linear fade from the
   photograph's bottom EDGE into it — no overlay behind the type at all. */
@media (max-width:900px){
  .hero{background:#18130F}
  .hero__bg{position:relative;inset:auto;display:block;height:min(62vw,300px);object-position:60% 30%;z-index:0}
  .hero__scrim{inset:auto;left:0;right:0;top:calc(min(62vw,300px) - 70px);height:71px;z-index:1;
    background:linear-gradient(180deg,rgba(24,19,15,0) 0%,rgba(24,19,15,1) 100%)}
  .hero__in{position:relative;z-index:2;min-height:0;display:block;padding-top:.6rem;padding-bottom:8.5rem}
  .herodoc__row{grid-template-columns:auto 1fr;border-radius:0;margin:0;padding:.75rem 1rem .75rem .9rem;
    background-image:linear-gradient(90deg,transparent 2.3rem,var(--margin) 2.3rem,var(--margin) calc(2.3rem + 2px),transparent calc(2.3rem + 2px))}
  .herodoc__amt{grid-column:2}
  .herodoc .wrap{padding:0}
}

/* ── inner-page hero: a shorter photograph, same edge-anchored fade ─────── */
.phero{position:relative;isolation:isolate;overflow:hidden;background:#1D1813;color:#fff}
.phero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,65% 28%);z-index:-2}
.phero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(24,19,15,.92) 0%,rgba(24,19,15,.84) 38%,rgba(24,19,15,.40) 64%,rgba(24,19,15,0) 86%)}
.phero__in{min-height:460px;display:flex;flex-direction:column;justify-content:center;padding-top:3.2rem;padding-bottom:3.2rem}
.phero__col{max-width:36rem}
.phero h1{font-size:clamp(2rem,1.5rem + 2.2vw,3rem);font-weight:850;letter-spacing:-.02em;color:#fff;margin:0 0 .9rem}
.phero p{color:#F4EFE3;font-size:1.1rem;max-width:34rem}
.phero .lab{color:var(--hi)}
@media (max-width:900px){
  .phero{background:#18130F}
  .phero img{position:relative;inset:auto;display:block;height:min(56vw,240px);object-position:60% 30%;z-index:0}
  .phero__scrim{inset:auto;left:0;right:0;top:calc(min(56vw,240px) - 60px);height:61px;z-index:1;
    background:linear-gradient(180deg,rgba(24,19,15,0) 0%,rgba(24,19,15,1) 100%)}
  .phero__in{position:relative;z-index:2;min-height:0;display:block;padding-top:.4rem;padding-bottom:2rem}
}
/* a plain header for the quiet pages (privacy) */
.ptitle{padding:3rem 0 1.5rem;border-bottom:1px solid var(--seam)}
.ptitle h1{font-size:clamp(2rem,1.5rem + 2vw,2.8rem);font-weight:850}

/* ── buttons ─────────────────────────────────────────────────────────────
   ⛔ Unlayered CSS: the LAST .btn rule must not come after the last
   .btn--ghost rule, or the ghost loses its fill (check-demo-polish). */
.btnrow{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;
  padding:.7rem 1.25rem;border-radius:999px;background:var(--margin);color:#fff;
  border:1px solid var(--margin-dk);font:inherit;font-weight:700;font-size:1rem;
  text-decoration:none;cursor:pointer;line-height:1.2;transition:background-color .16s var(--ease),transform .16s var(--ease)}
.btn:hover{background:var(--margin-dk);color:#fff}
.btn:focus-visible{outline:3px solid var(--pencil);outline-offset:3px}
.btn--sm{min-height:40px;padding:.5rem 1rem;font-size:.93rem}
.btn--light{background:var(--card);color:var(--ink);border-color:rgba(255,255,255,.6)}
.btn--light:hover{background:#fff;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.hero .btn--ghost,.phero .btn--ghost,.band--board .btn--ghost{color:#fff;border-color:rgba(255,255,255,.75)}
.hero .btn--ghost:hover,.phero .btn--ghost:hover,.band--board .btn--ghost:hover{background:#fff;color:var(--ink)}
.hero .btn:focus-visible,.phero .btn:focus-visible,.band--board .btn:focus-visible{outline-color:var(--hi)}
@media (prefers-reduced-motion:no-preference){.btn:hover{transform:translateY(-1px)}}

/* ── bands ──────────────────────────────────────────────────────────────── */
.band{padding:4.2rem 0}
.band--tight{padding:2.6rem 0}
.band--card{background:var(--card);border-top:1px solid var(--seam);border-bottom:1px solid var(--seam)}
/* the ruled pad: blue lines every 32px and one red margin rule — all linear */
.band--ruled{background-color:var(--pad);
  background-image:
    linear-gradient(90deg,transparent 46px,rgba(180,35,24,.42) 46px,rgba(180,35,24,.42) 48px,transparent 48px),
    repeating-linear-gradient(180deg,transparent 0 31px,rgba(169,194,220,.55) 31px 32px)}
/* ⚠️ phones: at 46px the red margin rule ran THROUGH the text (the wrap's
   gutter is 20px). It moves into the gutter, where a legal pad keeps it. */
@media (max-width:760px){
  .band--ruled{background-image:
    linear-gradient(90deg,transparent 9px,rgba(180,35,24,.42) 9px,rgba(180,35,24,.42) 11px,transparent 11px),
    repeating-linear-gradient(180deg,transparent 0 31px,rgba(169,194,220,.55) 31px 32px)}
}
.band--board{background:var(--board);color:var(--board-ink)}
.band--board .h2,.band--board h3{color:#fff}
.band--board .lab{color:var(--hi)}
.band--board .lead,.band--board p{color:var(--board-ink-2)}
.band--board a:not(.btn){color:var(--hi)}
.sechead{max-width:48rem;margin-bottom:2rem}
.sechead .lead{margin-top:.8rem}
.grid{display:grid;gap:1.2rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:1fr}}
@media (max-width:760px){.g2,.g4{grid-template-columns:1fr}}
.p{background:var(--card);border:1px solid var(--seam);border-radius:var(--r);padding:1.4rem;box-shadow:var(--shadow)}
.p h3{margin-bottom:.5rem}
.p p:last-child{margin-bottom:0}

/* split: words on one side, a photograph on the other */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:2.4rem;align-items:center}
.split--flip > :first-child{order:2}
.split--top{align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:1.6rem}.split--flip > :first-child{order:0}}
.pfig{margin:0}
.pfig img{width:100%;border-radius:var(--r);box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover}
.pfig figcaption{font-size:.86rem;color:var(--ink-2);margin-top:.55rem;line-height:1.45}
.pfig--tall img{aspect-ratio:4/5}

/* ── THE PUNCH LIST — the hero document, on legal-pad paper ───────────── */
.sheet{background-color:var(--card);border:1px solid var(--seam);border-radius:4px 4px var(--r) var(--r);
  box-shadow:var(--shadow);position:relative;padding:0 0 1rem;overflow:hidden;
  background-image:linear-gradient(90deg,transparent 3.1rem,var(--margin) 3.1rem,var(--margin) calc(3.1rem + 2px),transparent calc(3.1rem + 2px))}
.sheet__hd{background:#F2D86A;padding:.85rem 1rem .85rem 3.9rem;display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;
  border-bottom:2px solid #D8BB45}
.sheet__hd b{font-weight:850;letter-spacing:-.01em}
.sheet__hd span{font-family:var(--mono);font-size:.8rem;color:#3D3413}
.sheet__row{display:grid;grid-template-columns:3.1rem 1fr auto;align-items:baseline;gap:0 .9rem;
  padding:.62rem 1rem .62rem 0;border-bottom:1px solid rgba(169,194,220,.75)}
.sheet__n{font-family:var(--mono);font-size:.85rem;color:var(--ink-2);text-align:center}
.sheet__t{line-height:1.4}
.sheet__t small{display:block;color:var(--ink-2);font-size:.86rem}
.sheet__m{font-family:var(--mono);font-size:.88rem;color:var(--pencil);text-align:right;white-space:nowrap}
.tag{display:inline-block;font-family:var(--mono);font-size:.7rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;border-radius:3px;padding:.12rem .38rem;margin-left:.35rem;vertical-align:.1em;white-space:nowrap}
.tag--done{color:var(--tick);border:1.5px solid var(--tick)}
.tag--ref{color:#fff;background:var(--margin);border:1.5px solid var(--margin)}
.tag--own{color:var(--amber);border:1.5px solid var(--amber)}
.sheet__row--ref{background:linear-gradient(90deg,rgba(180,35,24,.07),rgba(180,35,24,0) 70%)}
.sheet__row--ref .sheet__m{color:var(--margin);font-weight:800}
.sheet__tot{display:grid;grid-template-columns:3.1rem 1fr auto;gap:0 .9rem;padding:.8rem 1rem .2rem 0;font-weight:800}
.sheet__tot .sheet__m{color:var(--ink);font-weight:800}
.sheet__note{padding:.4rem 1rem 0 3.9rem;font-size:.86rem;color:var(--ink-2)}

/* ── the three lists ─────────────────────────────────────────────────── */
.sort{border-radius:var(--r);background:var(--card);border:1px solid var(--seam);box-shadow:var(--shadow);overflow:hidden}
.sort__hd{padding:1rem 1.2rem;border-bottom:1px solid var(--seam)}
.sort__hd h3{font-size:1.15rem}
.sort__hd p{margin:.3rem 0 0;font-size:.92rem;color:var(--ink-2)}
.sort ul{list-style:none;margin:0;padding:.4rem 1.2rem 1.1rem}
.sort li{padding:.5rem 0 .5rem 1.6rem;border-bottom:1px dashed var(--seam);position:relative;font-size:.97rem;line-height:1.45}
.sort li:last-child{border-bottom:0}
.sort li::before{position:absolute;left:0;top:.5rem;font-family:var(--mono);font-weight:800}
.sort--yes .sort__hd{border-top:5px solid var(--tick)}
.sort--yes li::before{content:"\2713";color:var(--tick)}
.sort--ref .sort__hd{border-top:5px solid var(--margin)}
.sort--ref li::before{content:"\2192";color:var(--margin)}
.sort--own .sort__hd{border-top:5px solid var(--amber)}
.sort--own li::before{content:"?";color:var(--amber)}
.sort li b{font-weight:700}

/* ── service cards with photographs ──────────────────────────────────── */
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--seam);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.card:hover{color:var(--ink);box-shadow:0 2px 4px rgba(43,33,26,.12),0 14px 30px rgba(43,33,26,.14)}
@media (prefers-reduced-motion:no-preference){.card:hover{transform:translateY(-3px)}}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card__b{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.card__b h3{font-size:1.1rem}
.card__b p{margin:0;font-size:.94rem;color:var(--ink-2)}
.card__go{margin-top:auto;padding-top:.5rem;font-weight:700;color:var(--pencil);font-size:.93rem}
/* phones: two cards a row, title only — eight full cards stacked was 5,000px */
@media (max-width:760px){
  .grid.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .cards .card__b{padding:.7rem .75rem .8rem}
  .cards .card__b h3{font-size:.98rem}
  .cards .card__b p,.cards .card__go{display:none}
}

/* ── full-bleed photograph band ─────────────────────────────────────── */
.photoband{margin:0;position:relative;background:#1D1813}
.photoband img{width:100%;height:clamp(300px,52vw,620px);object-fit:cover;object-position:50% 30%}
.photoband__cap{max-width:1180px;margin:0 auto;padding:.8rem 20px 1rem;color:var(--board-ink-2);font-size:.9rem;background:#1D1813}
.photoband__cap b{color:#fff}

/* ── the "life" gallery: people using what got fixed ─────────────────── */
.life{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:1rem}
.life figure{margin:0;background:var(--card);border:1px solid var(--seam);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.life img{width:100%;aspect-ratio:4/3;object-fit:cover}
.life figure:first-child img{aspect-ratio:auto;height:100%;min-height:100%}
.life figure:first-child{grid-row:span 2;display:flex;flex-direction:column}
.life figure:first-child img{flex:1;min-height:0}
.life figcaption{padding:.7rem .9rem .85rem;font-size:.9rem;color:var(--ink-2);line-height:1.45}
@media (max-width:860px){.life{grid-template-columns:1fr 1fr}.life figure:first-child{grid-column:span 2;grid-row:auto}.life figure:first-child img{aspect-ratio:16/10;height:auto}}
@media (max-width:560px){.life{grid-template-columns:1fr}.life figure:first-child{grid-column:auto}}

/* ── the $2,500 line (on the clipboard) ───────────────────────────────── */
.line2500{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center}
.line2500__fig{font-family:var(--mono);font-weight:800;font-size:clamp(3rem,2rem + 5vw,5.6rem);color:var(--hi);letter-spacing:-.03em;line-height:1}
.line2500__fig small{display:block;font-size:.95rem;letter-spacing:.06em;color:var(--board-ink-2);font-weight:700;text-transform:uppercase;margin-top:.5rem}
@media (max-width:760px){.line2500{grid-template-columns:1fr;gap:1rem}}
.quote{border-left:3px solid var(--hi);padding:.2rem 0 .2rem 1rem;margin:1rem 0;font-size:1.02rem;color:#fff}
.quote cite{display:block;font-style:normal;font-size:.85rem;color:var(--board-ink-2);margin-top:.3rem}

/* ── steps ─────────────────────────────────────────────────────────── */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:1rem;counter-reset:s}
.steps li{counter-increment:s;background:var(--card);border:1px solid var(--seam);border-radius:var(--r);
  padding:1.1rem 1.2rem 1.1rem 4rem;position:relative;box-shadow:var(--shadow)}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:1.1rem;top:1.05rem;
  font-family:var(--mono);font-weight:800;color:var(--margin);font-size:1.05rem}
.steps h3{font-size:1.08rem;margin-bottom:.3rem}
.steps p{margin:0;color:var(--ink-2);font-size:.97rem}

/* ── modes: who the list is for ─────────────────────────────────────── */
.mode{display:flex;flex-direction:column;gap:.6rem}
.mode img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:calc(var(--r) - 2px)}
.mode h3{margin-top:.4rem}
.mode p{color:var(--ink-2);font-size:.96rem}
.mode > a{align-self:flex-start;margin-top:auto}

/* ── chat demo bubble (on the page, not the chat itself) ─────────────── */
.convo{background:var(--card);border:1px solid var(--seam);border-radius:14px;padding:1rem;box-shadow:var(--shadow);display:grid;gap:.55rem}
.convo__b{max-width:88%;padding:.6rem .8rem;border-radius:12px;font-size:.95rem;line-height:1.45}
.convo__b--bot{background:#fff;border:1px solid var(--seam)}
.convo__b--me{background:var(--pencil);color:#fff;margin-left:auto}
.convo__b--ref{border-left:4px solid var(--margin)}
.convo__b--own{border-left:4px solid var(--amber)}
.convo__sum{font-family:var(--mono);font-size:.86rem;font-weight:700;padding:.5rem .7rem;border:1px dashed var(--ink-2);border-radius:8px;color:var(--ink)}
.convo__cap{font-size:.84rem;color:var(--ink-2);margin:0}

/* ── facts / definition lists ─────────────────────────────────────── */
.facts{display:grid;gap:0;margin:0;border:1px solid var(--seam);border-radius:var(--r);overflow:hidden;background:var(--card)}
.facts div{display:grid;grid-template-columns:12rem 1fr;gap:1rem;padding:.8rem 1rem;border-bottom:1px solid var(--seam-2)}
.facts div:last-child{border-bottom:0}
.facts dt{font-weight:700}
.facts dd{margin:0;color:var(--ink-2)}
@media (max-width:640px){.facts div{grid-template-columns:1fr;gap:.2rem}}

/* ── prose pages ─────────────────────────────────────────────────── */
.prose{max-width:46rem}
.prose h2{font-size:1.5rem;font-weight:800;margin:2.2rem 0 .7rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.15rem;margin:1.5rem 0 .5rem}
.prose li{margin-bottom:.45rem}
.prose .pfig{margin:2rem 0 .6rem}
.side .pfig img{aspect-ratio:4/3}
.aside{background:var(--card);border:1px solid var(--seam);border-left:4px solid var(--margin);border-radius:var(--r);padding:1.1rem 1.2rem;margin:1.4rem 0}
.aside p:last-child{margin-bottom:0}
.twocol{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:2.6rem;align-items:start}
@media (max-width:900px){.twocol{grid-template-columns:1fr}}
.side{display:grid;gap:1rem;position:sticky;top:96px}
@media (max-width:900px){.side{position:static}}

/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq details{background:var(--card);border:1px solid var(--seam);border-radius:var(--r);margin-bottom:.7rem}
.faq summary{cursor:pointer;padding:1rem 1.2rem;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--margin);font-weight:800}
.faq details[open] summary::after{content:"\2212"}
.faq details > div{padding:0 1.2rem 1.1rem;color:var(--ink-2)}
.faq details > div p:last-child{margin-bottom:0}

/* ── chips for the service area ─────────────────────────────────── */
.chips{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{background:var(--card);border:1px solid var(--seam);border-radius:999px;padding:.35rem .8rem;font-size:.93rem;font-weight:600}
.chips li.is-home{background:var(--margin);border-color:var(--margin-dk);color:#fff}

/* ── the request form (book.html) ────────────────────────────────── */
.form{display:grid;gap:1rem;background:var(--card);border:1px solid var(--seam);border-radius:var(--r);padding:1.4rem;box-shadow:var(--shadow)}
.form label{display:grid;gap:.35rem;font-weight:700;font-size:.95rem}
.form input,.form textarea,.form select{font:inherit;font-weight:400;padding:.7rem .8rem;border:1px solid #BDB28A;border-radius:8px;background:#fff;color:var(--ink);width:100%}
.form textarea{min-height:10rem;line-height:1.5;
  background-image:repeating-linear-gradient(180deg,transparent 0 23px,rgba(169,194,220,.6) 23px 24px);background-attachment:local;line-height:24px}
.form input:focus,.form textarea:focus,.form select:focus{outline:3px solid rgba(29,76,134,.35);border-color:var(--pencil)}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:640px){.form .row2{grid-template-columns:1fr}}
.form__ok{display:none;background:#EAF3EC;border:1px solid var(--tick);border-radius:8px;padding:1rem;color:var(--ink)}
.form[data-sent] .form__ok{display:block}

/* ── the empty reviews state ─────────────────────────────────────── */
.empty{border:2px dashed var(--seam);border-radius:var(--r);padding:2.4rem 1.4rem;text-align:center;background:var(--card)}
.empty b{display:block;font-size:1.2rem;margin-bottom:.4rem}

/* ── footer (the clipboard) ─────────────────────────────────────── */
.foot{background:var(--board);color:var(--board-ink-2);padding:3.2rem 0 2rem;font-size:.95rem}
.foot h4{color:#fff;font-size:1rem;margin:0 0 .7rem}
.foot a{color:var(--board-ink);text-decoration:none}
.foot a:hover{color:var(--hi);text-decoration:underline}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin:.3rem 0}
.foot__cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem}
@media (max-width:900px){.foot__cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot__cols{grid-template-columns:1fr}}
.foot__base{border-top:1px solid rgba(255,255,255,.14);margin-top:2.4rem;padding-top:1.4rem;font-size:.88rem;display:grid;gap:.4rem}
.foot__base b{color:#fff}
.foot__credit{font-size:.82rem;opacity:.9}

/* ── section reveal. ADDITIVE ONLY: every block is visible without it. ── */
@media (prefers-reduced-motion:no-preference){
  .rv.is-in{animation:rv-up .6s var(--ease) both}
}
@keyframes rv-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* 🔴 768 FAILED, MEASURED 25 Sep 2026 (tools/hero-glyph-contrast.mjs):
   h1 1.71, accent 1.23, lead 1.77 — the desktop overlay on a tablet, with the
   type running past where the scrim had faded. The stacked layout now runs to
   900px; from 901 to 1240px the scrim reaches further across, because the text
   column there is over half the width. Still LINEAR and edge-anchored. */
@media (min-width:901px) and (max-width:1240px){
  .hero__scrim{background:linear-gradient(90deg,
    rgba(24,19,15,.94) 0%,
    rgba(24,19,15,.90) 48%,
    rgba(24,19,15,.72) 62%,
    rgba(24,19,15,.30) 80%,
    rgba(24,19,15,0) 94%)}
  .phero__scrim{background:linear-gradient(90deg,
    rgba(24,19,15,.94) 0%,
    rgba(24,19,15,.88) 50%,
    rgba(24,19,15,.55) 70%,
    rgba(24,19,15,0) 92%)}
}

/* ═══ THE CHAT ═══════════════════════════════════════════════════════════
   A scripted demonstration. It sorts a job list one item at a time into
   ours / refer to a licensed trade / the owner decides, keeps the list in
   view, and takes a name and a number. It cannot book, hold or price, and
   nothing typed leaves the browser. Script: chat.js. */
.chat{position:fixed;right:16px;bottom:16px;z-index:120;font-family:var(--sans)}
.chat__win{display:none;position:absolute;right:0;bottom:calc(100% + 10px);width:min(400px,calc(100vw - 32px));
  max-height:min(640px,calc(100vh - 120px));background:var(--card);border:1px solid #CFC39A;border-radius:14px;
  box-shadow:0 18px 50px rgba(20,16,12,.28);overflow:hidden;flex-direction:column}
.chat__win[data-open="1"]{display:flex}
.chat__hd{background:var(--board);color:#fff;padding:.75rem .9rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex:0 0 auto}
.chat__hd b{font-size:.98rem;font-weight:800;display:block}
.chat__hd small{display:block;font-size:.76rem;color:var(--board-ink-2);font-weight:500}
.chat__x{background:none;border:0;color:#fff;font:inherit;font-size:1.5rem;line-height:1;cursor:pointer;padding:.1rem .35rem;border-radius:6px;min-width:36px;min-height:36px}
.chat__x:hover{background:rgba(255,255,255,.12)}
.chat__x:focus-visible{outline:2px solid var(--hi)}
/* ⭐ the list itself, kept in view while it grows */
.chat__sheet{display:none;flex:0 0 auto;max-height:9.5rem;overflow-y:auto;background-color:#FFFBE6;border-bottom:1px solid var(--seam);
  background-image:linear-gradient(90deg,transparent 2rem,rgba(180,35,24,.55) 2rem,rgba(180,35,24,.55) calc(2rem + 1.5px),transparent calc(2rem + 1.5px))}
.chat__sheet[data-on="1"]{display:block}
.chat__sheet ol{list-style:none;margin:0;padding:.35rem .6rem .2rem 0;counter-reset:ci}
.chat__sheet li{counter-increment:ci;display:grid;grid-template-columns:2rem 1fr auto;gap:.5rem;align-items:baseline;font-size:.84rem;
  line-height:1.35;padding:.25rem 0;border-bottom:1px solid rgba(169,194,220,.7)}
.chat__sheet li::before{content:counter(ci);font-family:var(--mono);color:var(--ink-2);text-align:center;font-size:.76rem}
.chat__sheet li span{min-width:0;overflow-wrap:anywhere}
.chat__sheet .tag{margin:0}
.chat__sum{position:sticky;bottom:0;background:#FFF6CC;border-top:1px solid var(--seam);font-family:var(--mono);font-size:.76rem;font-weight:700;padding:.35rem .7rem;color:var(--ink)}
.chat__log{flex:1 1 auto;min-height:7rem;overflow-y:auto;padding:.85rem;background:var(--pad);display:flex;flex-direction:column;gap:.5rem}
.chat__msg{font-size:.93rem;line-height:1.5;padding:.6rem .75rem;border-radius:12px;max-width:92%;overflow-wrap:anywhere}
.chat__msg--bot{background:#fff;border:1px solid var(--seam);align-self:flex-start}
.chat__msg--me{background:var(--pencil);color:#fff;align-self:flex-end}
.chat__msg--ref{border-left:4px solid var(--margin)}
.chat__msg--own{border-left:4px solid var(--amber)}
.chat__msg--yes{border-left:4px solid var(--tick)}
.chat__msg--sum{font-family:var(--mono);font-size:.84rem;font-weight:700;background:#FFF6CC;border:1px dashed var(--ink-2)}
.chat__opts{flex:0 0 auto;padding:.6rem .8rem .7rem;border-top:1px solid var(--seam);background:var(--card);display:flex;flex-wrap:wrap;gap:.4rem}
.chat__opt{font:inherit;font-size:.88rem;font-weight:600;padding:.5rem .8rem;border-radius:999px;border:1.5px solid var(--ink);
  background:#fff;color:var(--ink);cursor:pointer;text-align:left;line-height:1.25;min-height:38px}
.chat__opt:hover{background:var(--ink);color:#fff}
.chat__opt:focus-visible{outline:3px solid var(--pencil);outline-offset:2px}
.chat__opt--go{background:var(--margin);border-color:var(--margin-dk);color:#fff}
.chat__opt--go:hover{background:var(--margin-dk)}
.chat__in{display:flex;gap:.4rem;width:100%}
.chat__in input{flex:1;min-width:0;font:inherit;font-size:16px;padding:.55rem .7rem;border:1px solid #BDB28A;border-radius:10px;background:#fff;color:var(--ink)}
.chat__in input:focus{outline:3px solid rgba(29,76,134,.3);border-color:var(--pencil)}
.chat__in button{font:inherit;font-size:.9rem;font-weight:700;padding:.5rem .9rem;border-radius:10px;border:1px solid var(--margin-dk);background:var(--margin);color:#fff;cursor:pointer}
.chat__in button:hover{background:var(--margin-dk)}
.chat__foot{flex:0 0 auto;margin:0;padding:.5rem .85rem;background:var(--pad-2);font-size:.74rem;color:var(--ink-2);line-height:1.4}
@media (max-width:480px){
  .chat__win{position:fixed;left:8px;right:8px;bottom:76px;width:auto;max-height:calc(100vh - 96px)}
}

/* ── 💬 THE CHAT LAUNCHER — 24 Sep 2026, one design across the demos ─────────
   Owner: "these buttons all chat are no good look old 2018 style", then "make
   sure all are newest and the buttons on rt side not lt".
   ⭐ A pill in the brand's own SOLID fill (no gradient, no glow), a real 1px
   edge and ONE short shadow, sentence case in the site's sans at 15px/600, and
   a live dot — the single cue that says something is there right now. The
   label is the trade's own words, shortened on a phone.
   ⭐ BOTTOM-RIGHT, and the window it opens moves with it.
   ⛔ Keep this block ABOVE the selling band: tools/demo-sellband.mjs rewrites
   from its marker to end-of-file and would delete anything placed after it.
   ⛔ Label contrast is measured, not assumed: fill #B42318 / ink #FFFFFF = 6.57:1.
   The dot is the highlighter yellow, not red on red. */
:root{--lch-fill:#B42318;--lch-fill-hover:#8F1B12;--lch-ink:#FFFFFF;--lch-dot:#F4DB6A}
.chat{left:auto;right:16px;bottom:16px}
.chat__win{left:auto;right:0}
.chat__btn{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:10px;
  width:auto;height:auto;min-height:44px;padding:0 18px 0 15px;
  border-radius:999px;background:var(--lch-fill);color:var(--lch-ink);
  border:1px solid color-mix(in srgb,#000 22%,var(--lch-fill));
  box-shadow:0 2px 10px color-mix(in srgb,#030a12 42%,transparent);
  font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.2;
  letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer;
  transform:none;transition:transform .16s ease,background-color .16s ease;
}
.chat__btn:hover{background:var(--lch-fill-hover)}
.chat__btn:focus-visible{outline:2px solid var(--pencil);outline-offset:3px}
.chat__btn i{position:relative;display:block;flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--lch-dot)}
.chat__btn .lch-s{display:none}
@media (max-width:480px){
  .chat__btn .lch-l{display:none}
  .chat__btn .lch-s{display:inline}
}
@media (prefers-reduced-motion:no-preference){
  .chat__btn:hover{transform:translateY(-1px)}
  .chat__btn:active{transform:translateY(0)}
  .chat__btn i{animation:lch-pulse 2.6s ease-out infinite}
}
@keyframes lch-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--lch-dot) 60%,transparent)}
  70%{box-shadow:0 0 0 7px color-mix(in srgb,var(--lch-dot) 0%,transparent)}
  100%{box-shadow:0 0 0 0 transparent}
}


/* ── 🧲 THE SELLING BAND — 24 Sep 2026 ───────────────────────────────────────────
   Written by tools/demo-sellband.mjs. Read that file before changing anything
   here; it records why the ground is ours and fixed while the accent is derived
   from this folder's own brand token and resolved to a literal.
   ⛔ The ground is deliberately NOT var(--anything): borrowing each site's
      surface made this read as the invented company's own sales copy, and the
      point of the band is that a stranger can see it is not.
   ⛔ The accent paints a pip, a rule and a chevron. It never carries prose. */
.sellband{--sb-accent:#e64e42;--sb-ground:#0f1b2a;--sb-card:#182b40;
  background:var(--sb-ground);color:#eef3f8;
  border-top:3px solid var(--sb-accent);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  padding:clamp(2.2rem,5vw,3.4rem) 0;
  /* ⛔ isolate: several demos paint body gradients and grids that would show
     through, and one composites a fixed background over its sections. */
  position:relative;z-index:1;isolation:isolate}
.sellband *{box-sizing:border-box}
/* 🔴 TYPE IS NORMALISED, AND THIS IS NOT FUSSINESS.
   Each demo styles its h2 and h3 with its own display face — rv-powersports
   puts them in condensed UPPERCASE, tree-service in a serif, garage-door in a
   third face. Inheriting those made our pitch render in the invented company's
   own signature type on all thirteen, which is precisely the illusion the band
   exists to step outside of, and it made one heading read as their headline.
   ⛔ Compound selectors (0,2,0) on purpose: a bare .sellband__h loses to a site
   rule such as .sec h2 (0,1,1), and it loses SILENTLY.
   ⛔ No backticks anywhere in this CSS — it lives in a template literal. */
.sellband .sellband__h,.sellband .sellband__k,.sellband .sellband__sum{
  font-family:inherit;text-transform:none;font-style:normal}
.sellband .sellband__h{letter-spacing:-.015em}
.sellband .sellband__k,.sellband .sellband__sum{letter-spacing:0}
.sellband .sellband__h::after,.sellband .sellband__k::after,
.sellband .sellband__h::before,.sellband .sellband__k::before{content:none}
.sellband__in{padding-inline:20px}
/* ⛔ flex-start, not center: the eyebrow wraps to two lines at phone width and
   a centred pip then floats in the gap between them, pointing at nothing. */
.sellband__eyebrow{display:flex;align-items:flex-start;gap:.5rem;margin:0 0 .6rem;
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  line-height:1.45;color:#c7d4e0}
.sellband__pip{width:8px;height:8px;border-radius:50%;background:var(--sb-accent);
  flex:0 0 auto;margin-top:.38em}
.sellband__h{margin:0 0 1.5rem;font-size:clamp(1.45rem,3.1vw,2.1rem);line-height:1.18;
  font-weight:800;letter-spacing:-.015em;color:#fff;max-width:32ch}
.sellband__grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);align-items:start}
.sellband__card{background:var(--sb-card);border:1px solid #35506e;border-radius:12px;
  padding:1.1rem 1.15rem 1.2rem;min-width:0}
.sellband__k{margin:0 0 .5rem;font-size:.95rem;font-weight:700;color:#fff;line-height:1.3}
.sellband__p{margin:0 0 .6rem;font-size:.9rem;line-height:1.55;color:#dae3ec}
.sellband__fine{margin:.5rem 0 0;font-size:.8rem;line-height:1.5;color:#b2c0ce}
/* ⛔ Each figure is one unwrappable unit. Without this "$349" and "a month"
   land on different lines and the page appears to publish a bare number. */
.sellband__price{margin:0 0 .6rem;font-size:1.05rem;line-height:1.4;color:#fff;
  font-weight:400;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .45rem}
.sellband__fig{white-space:nowrap}
.sellband__price b{font-size:1.5rem;font-weight:800;letter-spacing:-.01em}
.sellband__dot{color:var(--sb-accent)}

/* the disclosure — it answers "what comes with it" where the question is asked,
   which is the only reason to add one. No JavaScript. */
.sellband__more{margin-top:.7rem;border-top:1px solid #35506e;padding-top:.6rem}
.sellband__sum{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  cursor:pointer;list-style:none;font-size:.85rem;font-weight:700;color:#fff;
  padding:.2rem 0;min-height:32px}
.sellband__sum::-webkit-details-marker{display:none}
.sellband__chev{width:9px;height:9px;border-right:2px solid var(--sb-accent);
  border-bottom:2px solid var(--sb-accent);transform:rotate(45deg);flex:0 0 auto;
  margin-bottom:3px;transition:transform .18s ease}
.sellband__more[open] .sellband__chev{transform:rotate(-135deg);margin-bottom:-3px}
.sellband__list{margin:.5rem 0 0;padding:0;list-style:none;display:grid;gap:.34rem}
.sellband__list li{position:relative;padding-left:1.05rem;font-size:.84rem;
  line-height:1.5;color:#dae3ec}
.sellband__list li::before{content:"";position:absolute;left:0;top:.52em;
  width:5px;height:5px;border-radius:50%;background:var(--sb-accent)}
.sellband__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin:1.4rem 0 0}
.sellband__go{display:inline-flex;align-items:center;min-height:44px;
  padding:.6rem 1.25rem;border-radius:8px;background:#fff;color:#0f1b2a;
  font-weight:700;font-size:.92rem;text-decoration:none;border:1px solid #fff}
.sellband__go:hover{background:#dce7f2;border-color:#dce7f2}
.sellband__alt{display:inline-flex;align-items:center;min-height:44px;
  color:#dae3ec;font-size:.9rem;text-decoration:none;
  border-bottom:1px solid #46586c;padding-bottom:1px}
.sellband__alt:hover{color:#fff;border-bottom-color:#fff}
@media (prefers-reduced-motion:no-preference){
  .sellband__card{transition:border-color .18s ease}
  .sellband__card:hover{border-color:#4a6a8f}
}
@media (max-width:900px){
  .sellband__grid{grid-template-columns:1fr}
  .sellband__h{max-width:28ch}
}
@media (max-width:560px){
  .sellband__in{padding-inline:16px}
  .sellband__price b{font-size:1.35rem}
}
/* ⛔ Inside our own iframe the surrounding chrome already sells; the band is a
   second pitch on top of the pitch. Hidden there and ONLY there, exactly as the
   disclosure chip is. */
html[data-embedded] .sellband{display:none !important}