/* ---------- 10hub landing page (landing.html): the marketing page. It loads css/app.css first for the brand tokens,
   the top bar, buttons, the sticker, the one-QR map and the sign's day/night controls, and this file for everything
   only the landing page has: the hero with the demo phone (an iframe of the demo hub, /a/demo/), the callouts, the
   sign's chapters, the lead form, proof, the FAQ, the close and the foot, and the page's motion. The buyer app
   never loads this file. ---------- */
/* the shell: a plain document that scrolls (the app's html and body are 100% tall for its own scrollers; here the
   page is as tall as its chapters), the top bar stuck to it, the page above the atmosphere */
html,body{height:auto;min-height:100%}
.demo-bar{position:sticky;top:0;z-index:50}
main{position:relative;z-index:1}
.skip{text-decoration:none}
/* the hero: on a wide screen the pitch beside the demo phone; on a phone the demo fills the first screen (the pitch
   before it, see .mpitch) */
.demo-stage{height:calc(100vh - 46px - env(safe-area-inset-top,0px));position:relative}
@supports (height:100svh){ .demo-stage{height:calc(100svh - 46px - env(safe-area-inset-top,0px))} }
.demo-side{display:none}
.phone-3d{height:100%}
.app-frame{display:block;width:100%;height:100%;border:0;background:var(--ground)}
@media (min-width: 900px){
  .demo-stage{height:auto;display:grid;grid-template-columns:minmax(300px,1fr) 402px;gap:clamp(48px,5vw,88px);align-items:center;max-width:1160px;margin:0 auto;padding:clamp(40px,7vh,80px) clamp(24px,4vw,48px) clamp(64px,10vh,110px)}
  .demo-side{display:block}
  .phone-3d{height:auto}
  .phone .app-frame{border-radius:36px}
}
/* portrait tablets (600-899px): the pitch on top as on a phone, then the demo in a real phone frame, centred and
   moving as on a wide screen - not the bare 560px screen it was (owner, 2026-09-28: "where is the phone on the
   tablet version?"). The frame's numbers are app.css's wide-screen ones (402x824, 11px bezel, 46px corners). */
@media (min-width:600px) and (max-width:899px){
  .demo-stage{height:auto;display:grid;justify-content:center;padding:28px 24px 72px}
  .phone-stage{position:relative;width:402px;max-width:100%}
  .phone-3d{height:auto}
  .phone{width:402px;max-width:100%;height:824px;border-radius:46px;background:var(--phone-bezel);padding:11px;box-shadow:var(--shadow)}
  .phone .app-frame{border-radius:36px}
  .signpage{padding-left:24px;padding-right:24px}
}
/* the footer's legal links; a "Coming soon" badge on what is not live yet (the text-back code) */
.sp-foot-links{display:flex;gap:16px}
.sp-foot-links a{color:var(--ink-2);text-decoration:none;font-weight:500}
.sp-foot-links a:hover{color:var(--ink);text-decoration:underline}
.onsign b .soon{display:inline-block;margin:-2px 0 0 8px;vertical-align:middle}
/* the demo agent's picture on the sign's printed faces: the owner's, as on the photos */
.ff-ph.photo{background-image:url("../img/landing_agent.webp")}

/* ---------- the landing page's phone, moving like the one on 10hub.ai: it rises in, sways in 3D and follows the
   pointer (js: --rx/--ry), with callouts bobbing in front, a glow behind and a shadow under it. Wide screens only. ---------- */
.float,.stage-floor{display:none}
@media (min-width: 600px){   /* wide screens and portrait tablets alike; under 600px the demo is the first screen */
  .phone-stage{perspective:1400px}
  .phone-stage::before{content:"";position:absolute;inset:8% 6%;border-radius:40px;z-index:0;pointer-events:none;filter:blur(30px);
    background:radial-gradient(60% 60% at 30% 30%,rgba(150,205,175,.55),transparent 70%),radial-gradient(60% 60% at 75% 70%,rgba(163,160,214,.5),transparent 70%)}
  .phone-3d{position:relative;z-index:1;transform-style:preserve-3d;transform:rotateY(var(--ry,-16deg)) rotateX(var(--rx,7deg));will-change:transform}
  /* in use (a hand on the phone, or its walk-through playing; js: .demo-stage.is-flat): the phone stands straight, at
     once and by itself, so a demo is never watched at a slant */
  .demo-stage.is-flat .phone-3d{transform:none;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
  .phone{animation:rise 1.1s cubic-bezier(.2,.7,.3,1) both}
  .float{display:flex;position:absolute;z-index:2;align-items:center;gap:10px;padding:11px 14px;border-radius:16px;background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:0 18px 40px -20px rgba(18,32,26,.35);font-size:13px;line-height:1.25;color:var(--ink-2);white-space:nowrap;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .float b{display:block;font-size:14px;color:var(--ink);font-weight:600}
  .float .ic{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;flex:none;background:var(--tile);color:var(--tile-ink);box-shadow:var(--tile-shadow)}
  .float .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .f1{left:-64px;top:16%;animation:bob 6s ease-in-out .9s infinite}
  .f2{right:-58px;bottom:16%;animation:bob 7s ease-in-out .9s infinite reverse}
  /* the callouts step aside while the phone is in use: a pointer or focus on it, or, once it has been pressed or
     touched, until something outside it is pressed (js: .demo-stage.is-over) */
  .float{transition:opacity .3s ease,visibility .3s}
  .demo-stage.is-over .float{opacity:0;visibility:hidden}
  .stage-floor{display:block;position:absolute;left:14%;right:14%;bottom:-22px;height:30px;border-radius:50%;z-index:0;pointer-events:none;filter:blur(10px);background:radial-gradient(50% 50% at 50% 50%,rgba(15,20,18,.28),transparent 70%)}
  html[data-theme="dark"] .float{background:rgba(22,32,27,.92)}
}
@media (min-width: 900px) and (max-width: 1099px){ .f2{right:-14px} }
/* on a tablet the callouts sit over the phone's own screen, so they step aside for the walk-through as well */
@media (min-width: 600px) and (max-width: 899px){ .demo-stage.is-flat .float{opacity:0;visibility:hidden} }
@media (prefers-reduced-motion: reduce){ .demo-stage.is-flat .phone-3d{transform:none;transition:none} }
/* ---------- and the whole landing page moves as it scrolls (js marks blocks data-rv, adds html.reveal-on, then .in
   as each comes into view): headlines wipe up out of a mask, text arrives out of a soft blur, cards pop, the ones
   seen together one after another; the numbers count up; the sign glides in and its QR panel swings on its hooks,
   then stays in view while the four steps go by, each lit as it passes the middle, a rail filling beside them; the
   one-sign map draws its lines; comparison rows slide in and tick; the service trip line fills as you scroll past
   it; a line under the top bar fills as you read. On phones too; nothing is hidden unless the script is there to
   show it. ---------- */
.scroll-progress,.scroll-cue{display:none}
html.reveal-on [data-rv]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
html.reveal-on [data-rv="soft"]{transform:translateY(16px);filter:blur(8px);transition:opacity 1s var(--ease),transform 1.2s var(--ease),filter 1s var(--ease)}
html.reveal-on [data-rv="step"]{opacity:1;transform:translateY(26px);transition:transform 1.1s var(--ease)}  /* the story steps: no fade, their badges sit on the rail */
html.reveal-on [data-rv="title"]{transform:translateY(30px);transition:opacity .7s ease,transform 1.25s var(--ease)}
html.reveal-on [data-rv="left"]{transform:translateX(-52px)}
html.reveal-on [data-rv="right"]{transform:translateX(34px)}
html.reveal-on [data-rv="pop"]{transform:translateY(26px) scale(.94)}
html.reveal-on [data-rv="zoom"]{transform:scale(.93)}
html.reveal-on [data-rv].in{opacity:1;transform:none;filter:none}
/* the wipe is an animation, not a resting clip: a heading clipped to nothing is never "in view" to the script */
html.reveal-on [data-rv="title"].in{animation:title-wipe 1.25s var(--ease) backwards}
html.reveal-on [data-rv="photo"]{transform:translateY(48px)}
html.reveal-on [data-rv="photo"].in{animation:photo-wipe 1.5s var(--ease) backwards}
.rider{transform-origin:50% 0}
html.reveal-on .signcol.in .rider{animation:rider-swing 1.7s cubic-bezier(.3,.6,.3,1) .45s both}
/* the map: the sign pops, its line reaches the trunk, the trunk grows, then each home branches off in turn */
html.reveal-on .qrmap[data-rv] .qrmap-tag{opacity:0;transform:scale(.8);transition:opacity .4s ease .15s,transform .6s cubic-bezier(.3,1.5,.5,1) .15s}
html.reveal-on .qrmap[data-rv] .qrmap-tag::after{transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease) .5s}
html.reveal-on .qrmap.in .qrmap-tag,html.reveal-on .qrmap.in .qrmap-tag::after{opacity:1;transform:none}
/* the map draws with the scroll (js sets --mp on .qrmap.is-live and .on on each stop the line has reached) */
html.reveal-on .qrmap.is-live .qrmap-to::before{transform:scaleY(var(--mp,0));transform-origin:50% 0}
html.reveal-on .qrmap.is-live .qrmap-to li{opacity:0;transform:translateX(-12px);transition:opacity .45s ease,transform .55s var(--ease)}
html.reveal-on .qrmap.is-live .qrmap-to li::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
html.reveal-on .qrmap.is-live .qrmap-to li::after{transform:scale(0);transition:transform .45s cubic-bezier(.3,1.7,.5,1) .1s}
html.reveal-on .qrmap.is-live .qrmap-to li.on,html.reveal-on .qrmap.is-live .qrmap-to li.on::before,html.reveal-on .qrmap.is-live .qrmap-to li.on::after{opacity:1;transform:none}
/* the comparison: each row slides in, then its tick pops */
html.reveal-on .vs-rows li[data-rv] .vs-new::before{transform:scale(0);transition:transform .45s cubic-bezier(.3,1.7,.5,1) .4s}
html.reveal-on .vs-rows li.in .vs-new::before{transform:none}
/* the buttons that matter ring when they arrive */
html.reveal-on .in > .btn.primary,html.reveal-on .try-scan.in,html.reveal-on .in .try-scan{animation:cta-ring 1.4s ease-out .9s 2}
.scroll-progress{display:block;position:fixed;left:0;right:0;top:calc(46px + env(safe-area-inset-top, 0px));height:3px;z-index:60;pointer-events:none}
.scroll-progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--p, 0));background:linear-gradient(90deg,#4f9d75,#3f8ca6 50%,#6a6cc2)}
@media (min-width: 900px){
  .scroll-progress{top:52px}
  .scroll-cue{display:flex;align-items:center;gap:12px;margin-top:44px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
  .scroll-cue i{position:relative;flex:none;width:22px;height:34px;border-radius:12px;border:2px solid var(--line-3)}
  .scroll-cue i::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--accent);animation:cue 1.9s ease-in-out infinite}
  .scroll-cue.gone{opacity:0;transition:opacity .6s ease}
}
@keyframes photo-wipe{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes title-wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(-30% -6% -30% -6%)}}
@keyframes rider-swing{0%{transform:rotate(-9deg)}32%{transform:rotate(6deg)}56%{transform:rotate(-3deg)}76%{transform:rotate(1.2deg)}100%{transform:none}}
@keyframes cta-ring{0%{box-shadow:0 0 0 0 rgba(72,116,104,.45)}100%{box-shadow:0 0 0 14px rgba(72,116,104,0)}}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}80%,100%{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion: reduce){ html.reveal-on [data-rv]{opacity:1;transform:none;filter:none;transition:none;animation:none} .scroll-progress{display:none} .scroll-cue i::after{animation:none} }
@keyframes rise{from{opacity:0;transform:translateY(46px) translateZ(-80px) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateZ(70px) translateY(0)}50%{transform:translateZ(70px) translateY(-8px)}}
@media (prefers-reduced-motion: reduce){
  .phone-3d{transform:rotateY(-10deg) rotateX(4deg)}
  .phone,.float{animation:none}
}
.try-scan{margin-top:12px}
.try-scan svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ---------- stage side (desktop copy) ---------- */
.side-title{font-size:30px;margin-bottom:8px}
.demo-side p{color:var(--ink-2);max-width:52ch}
.demo-side .signmini{margin-top:22px}
/* the sticker beside the phone is a link to what a scan of it opens: it lifts under the pointer, like a button */
.signmini a.sticker{display:block;color:#0B0F0D;text-decoration:none;cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.signmini a.sticker:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.signmini a.sticker:focus-visible{outline:3px solid var(--accent,#4f9d75);outline-offset:4px}
/* ---------- the yard-sign page, a long-form product page in chapters: the sign in one line and four numbers; one QR
   code for every home (the sign stays in view while the steps go by); side by side with a traditional sign, on a
   dark band, with the sign itself folded in under it; full service or do it yourself; the close. Generous room
   between chapters, big
   Satoshi headlines with one gradient phrase each. The landing page carries it below the phone. ---------- */
.signpage{padding:0}
.sp-in{max-width:1160px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.sp-sec{padding:clamp(80px,13vh,150px) 0}
.sp-title{font-family:var(--font-display);font-weight:500;font-size:clamp(40px,5.4vw,78px);line-height:1;letter-spacing:-.045em;color:var(--ink);margin:16px 0 24px;max-width:15ch;text-wrap:balance}
.sp-title-md{font-size:clamp(34px,4vw,58px)}
.sp-lede{font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--ink-2);max-width:60ch;margin:0 0 24px;text-wrap:pretty}
/* the sign in one line, and four numbers */
.sp-intro{text-align:center}
.sp-intro .sp-title{margin-left:auto;margin-right:auto;max-width:12ch}
.sp-intro .sp-lede{margin-left:auto;margin-right:auto}
.sp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(48px,8vh,88px) 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:clamp(26px,4.5vh,44px) 16px}
.stat + .stat{border-left:1px solid var(--line)}
.stat-n{display:block;font-family:var(--font-display);font-weight:500;font-size:clamp(48px,5.4vw,84px);line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;background:linear-gradient(96deg,#4f9d75 0%,#3f8ca6 50%,#6a6cc2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="dark"] .stat-n{background:linear-gradient(92deg,#9ED8C4 0%,#C9D6F0 60%,#B9B5F0 100%);-webkit-background-clip:text;background-clip:text}
.stat-l{display:block;margin:14px auto 0;max-width:22ch;font-size:14px;line-height:1.45;color:var(--ink-3)}
/* the numbers roll in like an odometer (js wraps each digit in span.dg as it comes into view; data-strip holds the
   digits it rolls past, then its own). The strip is generated content with empty alternative text, the digit itself
   stays in the text below the 1em window; a browser without that syntax shows the digit, still */
.stat-n .dg{display:inline-block;height:1em;overflow:hidden;vertical-align:top}
.stat-n .dg::before{content:attr(data-strip) / "";display:block;white-space:pre;line-height:1;margin-top:0;transition:margin-top 1.6s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--k, 0) * 110ms)}
/* moved by layout, not transform: the gradient is clipped to the glyphs where layout puts them, and a transformed strip
   left the painted digit behind at its first line (Chrome, 2026-09-28) */
.stat-n .dg.go::before{margin-top:calc(var(--i) * -1em)}
/* one QR code for every home: the sign stays in view while the steps go by */
.sp-story-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,104px);align-items:start}
.signcol{min-width:0}
.sp-stick{position:sticky;top:max(116px,calc(50vh - 300px))}
.sp-steps{min-width:0}
.qrsteps{list-style:none;counter-reset:qs;margin:0;padding:0;position:relative}
.qrsteps::before,.qrsteps::after{content:"";position:absolute;left:21px;top:56px;bottom:56px;width:2px;background:var(--line)}
.qrsteps::after{background:linear-gradient(#4f9d75,#3f8ca6 55%,#6a6cc2);transform-origin:50% 0;transform:scaleY(var(--rail, 1))}
.qrsteps li{counter-increment:qs;position:relative;margin:0;min-height:clamp(170px,28vh,280px);padding:40px 0 40px 76px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.qrsteps li::before{content:"0" counter(qs);position:absolute;left:0;top:34px;z-index:1;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;background-color:var(--surface);background-image:var(--tile);color:var(--tile-ink);box-shadow:var(--tile-shadow);transition:transform .5s,color .5s,box-shadow .5s var(--ease),box-shadow .5s ease}
.qrsteps b{display:block;font-family:var(--font-display);font-weight:500;font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px}
/* the steps not at the middle of the screen fade by colour, not opacity: the whole step going translucent let the rail
   show through its number badge, which stays opaque and simply goes quiet */
.qrsteps li,.qrsteps b{transition:color .5s ease}
.sp-story.is-live .qrsteps li.in:not(.is-on){color:color-mix(in srgb, var(--ink-2) 40%, transparent)}
.sp-story.is-live .qrsteps li.in:not(.is-on) b{color:color-mix(in srgb, var(--ink) 40%, transparent)}
.sp-story.is-live .qrsteps li.in:not(.is-on)::before{background-image:none;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line)}
.sp-story.is-live .qrsteps li.is-on::before{transform:scale(1.12);box-shadow:var(--tile-shadow),0 0 0 7px rgba(143,191,176,.22)}
/* side by side with a traditional sign: a dark band (it re-declares the colours, so what sits in it follows) */
.sp-band{margin:0 clamp(12px,2vw,28px);border-radius:clamp(28px,3vw,48px);color:#F2F5F3;
  background:radial-gradient(60% 55% at 10% 0%,rgba(127,209,174,.17),transparent 70%),radial-gradient(55% 60% at 100% 100%,rgba(106,108,194,.22),transparent 70%),#0B0F0D;
  --ink:#F2F5F3;--ink-2:rgba(242,245,243,.78);--ink-3:rgba(242,245,243,.56);--ink-4:rgba(242,245,243,.42);--line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.07);
  --surface-2:rgba(255,255,255,.07);--glass:rgba(255,255,255,.035);--glass-line:rgba(255,255,255,.09);--glass-shadow:0 30px 60px -40px rgba(0,0,0,.6);
  --tile:linear-gradient(145deg,#1f3a2e 0%,#2d5242 100%);--tile-ink:#B9E3D3;--tile-shadow:inset 0 1px 0 rgba(255,255,255,.12);--accent-deep:#9ED8C4;--mint-deep:#9ED8C4}
html[data-theme="dark"] .sp-band{background:radial-gradient(60% 55% at 10% 0%,rgba(127,209,174,.12),transparent 70%),radial-gradient(55% 60% at 100% 100%,rgba(106,108,194,.16),transparent 70%),#070a09;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.sp-band .grad{background:linear-gradient(92deg,#9ED8C4 0%,#C9D6F0 60%,#B9B5F0 100%);-webkit-background-clip:text;background-clip:text}
.sp-band .eyebrow{background:rgba(255,255,255,.06);border-color:rgba(143,191,176,.35)}
.sp-band .sp-title{max-width:17ch}
.vs{border-radius:28px;overflow:hidden;margin-top:clamp(28px,5vh,52px)}
.vs-head,.vs-rows li{display:grid;grid-template-columns:minmax(140px,.7fr) minmax(0,1.4fr) minmax(0,1.4fr);gap:0 28px;align-items:start;padding:20px 30px}
.vs-head{padding-top:16px;padding-bottom:16px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line)}
.vs-head .vs-us{color:var(--accent-deep)}
.vs-rows{list-style:none;margin:0;padding:0}
.vs-rows li + li{border-top:1px solid var(--line-2)}
.vs-rows b{font-family:var(--font-display);font-weight:500;font-size:17px;line-height:1.35;color:var(--ink)}
.vs-rows p{position:relative;margin:0;padding-left:32px;font-size:15.5px;line-height:1.55}
.vs-rows p::before{position:absolute;left:0;top:.1em;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;line-height:1}
.vs-old{color:var(--ink-3)}
.vs-old::before{content:"\2715";background:var(--surface-2);color:var(--ink-4)}
.vs-new{color:var(--ink)}
.vs-new::before{content:"\2713";background:var(--tile);color:var(--tile-ink);box-shadow:var(--tile-shadow)}
/* the sign itself, folded in under the comparison (the page used to give it a chapter of its own; folded in, the
   two run about 40% shorter on a phone): the close-up beside three things printed on the sign. The standalone sign
   page has no photo, so one column there */
.sp-onsign{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;margin-top:clamp(48px,8vh,88px)}
.onsign-copy .sp-title{margin-top:12px}
.onsign-copy .sp-lede{margin-bottom:22px}
.onsign{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.onsign li{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-line);font-size:15px;line-height:1.5;color:var(--ink-2)}
.spec-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:var(--tile);color:var(--tile-ink);box-shadow:var(--tile-shadow)}
.spec-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.onsign b{display:block;font-family:var(--font-display);font-weight:500;font-size:19px;letter-spacing:-.015em;color:var(--ink);margin-bottom:3px}
/* what it costs, at the end of the band, only once the owner has written real prices (data/prices.json) */
.sp-prices{margin-top:clamp(40px,7vh,72px);padding-top:clamp(28px,4vh,44px);border-top:1px solid var(--line)}
.sp-prices .proof-ex{margin:0 0 14px 10px;vertical-align:middle}
.price-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}   /* four tiles in a row; two on tablets, one column on phones (below): never an orphan tile on its own row */
.price-row div{padding:22px 22px 20px;border-radius:22px;background:var(--glass);border:1px solid var(--glass-line)}
/* the number sized so "$55 a month" stays on one line in a quarter-width tile from 1000px up, and in a half-width tile on
   tablets. The tile stops growing at 256px (the page's width is capped from 1280px up), so the number stops at 35px:
   at 44px "$30 a month" broke in two from 1440px up, on every large monitor (seen 2026-09-29) */
.price-row b{display:block;font-family:var(--font-display);font-weight:500;font-size:clamp(26px,2.7vw,35px);line-height:1;letter-spacing:-.04em;color:var(--ink);margin-bottom:8px}
@media (max-width:999px){ .price-row{grid-template-columns:repeat(2,minmax(0,1fr))} .price-row b{font-size:clamp(28px,4.2vw,40px)} }
@media (max-width:599px){ .price-row{grid-template-columns:minmax(0,1fr)} }
.price-row span{font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.price-note{margin:14px 0 0;font-size:13.5px;color:var(--ink-3)}
.price-acts{margin-top:24px}
.price-acts .btn{padding:14px 24px;font-size:15px}
/* questions agents ask: native <details>, one line each until opened */
.sp-faq{padding-top:0}
/* the FAQ is a 760px column: its container narrows to fit it, so the eyebrow, the title and the questions sit
   centred on the page as one block instead of anchored to the left edge of the wide container (owner, 2026-09-28) */
.sp-faq .sp-in{max-width:calc(760px + 2 * clamp(20px,4vw,48px))}
.faq{max-width:760px;margin-top:8px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 0;font-family:var(--font-display);font-weight:500;font-size:clamp(17px,1.4vw,20px);line-height:1.3;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:18px;line-height:1;color:var(--ink-2);transition:transform .25s}
/* the badge: a quarter turn on hover, a springy 45° and a fill when open; the rows come in one by one and the badge spins in after each */
.faq summary{transition:padding-left .35s var(--ease),color .2s}
.faq details:not([open]) summary:hover{padding-left:6px;color:var(--accent-deep)}
.faq summary::after{transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .25s,color .25s,border-color .25s,opacity .3s}
.faq details:not([open]) summary:hover::after{transform:rotate(90deg) scale(1.1);border-color:var(--accent);color:var(--accent-deep)}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
html.reveal-on [data-rv="row"]{transform:translateX(-22px);transition:opacity .7s ease,transform .9s var(--ease)}
html.reveal-on .faq details[data-rv] summary::after{opacity:0;transform:rotate(-90deg) scale(.4)}
html.reveal-on .faq details[data-rv].in summary::after{opacity:1;transform:none}
html.reveal-on .faq details[data-rv].in:not([open]) summary:hover::after{transform:rotate(90deg) scale(1.1)}
html.reveal-on .faq details[data-rv].in[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.faq p{margin:0 0 18px;max-width:62ch;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.faq .faq-more{display:none}  /* phones: three questions, then this shows the rest (two classes: .btn sets display later in the sheet) */
/* the foot of the landing page */
.sp-foot{padding:0 0 clamp(28px,4vh,44px);font-size:13px;color:var(--ink-3)}
.sp-foot-row{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid var(--line)}
.sp-foot-brand{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-weight:500}
.sp-foot .eho{display:flex;align-items:center;gap:8px}
.sp-foot .eho svg{width:22px;height:22px;flex:none}
.sp-foot-more{margin-top:16px}
.sp-foot-more summary{cursor:pointer;color:var(--ink-2);font-weight:500;list-style:none;display:inline-flex;align-items:center;gap:9px}
.sp-foot-more summary::-webkit-details-marker{display:none}
.sp-foot-more summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.sp-foot-more[open] summary::after{transform:translateY(2px) rotate(225deg)}
.sp-foot-more p{margin:8px 0 0;max-width:72ch;line-height:1.55}
.sp-foot-fine{margin:14px 0 0;line-height:1.5}
.lead-note{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.lead-found{margin-top:6px;color:var(--ink-2)}
/* the close: a little sign drops in, wobbles and pulses a scan ring; colour drifts behind the card; the order button rings once or twice; Copy link bounces */
.sp-close{position:relative;overflow:hidden}
.sp-close .sp-in{position:relative;z-index:1}
.sp-close .orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;opacity:.6}
.sp-close .orb-a{width:min(48vw,480px);height:min(48vw,480px);left:-8%;top:-6%;background:radial-gradient(circle,rgba(79,157,117,.55),rgba(79,157,117,0) 68%);animation:orb-a 24s ease-in-out infinite alternate}
.sp-close .orb-b{width:min(42vw,420px);height:min(42vw,420px);right:-6%;bottom:-6%;background:radial-gradient(circle,rgba(123,95,190,.5),rgba(123,95,190,0) 68%);animation:orb-b 30s ease-in-out infinite alternate}
@keyframes orb-a{to{transform:translate(80px,60px) scale(1.15)}}
@keyframes orb-b{to{transform:translate(-70px,-80px) scale(1.1)}}
.cta-sign{display:block;margin:0 auto 18px;width:72px;height:108px;overflow:visible}
.cta-sign .cs-post{fill:#2f5f52}
.cta-sign .cs-face{fill:#fff;stroke:#2f5f52;stroke-width:1.6}
.cta-sign .cs-cap{fill:#9fb3ab}
.cta-sign .cs-teal{fill:#2f5f52}
.cta-sign .cs-avatar{fill:#dfe6e2;stroke:#1E3A2F;stroke-width:1.4}
.cta-sign .cs-ink{fill:#1E3A2F}
.cta-sign .cs-ink2{fill:#9fb3ab}
.cta-sign .cs-qr rect{fill:#0B0F0D}
.cta-sign .cs-ring{fill:none;stroke:var(--accent);stroke-width:2;opacity:0;transform-origin:40px 89px}
.cta-sign .cs-panel{transform-origin:40px 118px}  /* the wobble is from the ground, like a sign just planted */
html.reveal-on .sp-cta[data-rv].in .cta-sign{animation:sign-drop .9s cubic-bezier(.34,1.56,.64,1) .25s both}
html.reveal-on .sp-cta[data-rv].in .cta-sign .cs-panel{animation:sign-wobble .9s ease-in-out 1.05s both}
html.reveal-on .sp-cta[data-rv].in .cta-sign .cs-ring{animation:scan-ring 2.8s ease-out 2.2s infinite}
@keyframes sign-drop{from{transform:translateY(-70px);opacity:0}to{transform:none;opacity:1}}
@keyframes sign-wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}60%{transform:rotate(2deg)}}
@keyframes scan-ring{0%{transform:scale(.6);opacity:.8}70%{opacity:0}100%{transform:scale(2.4);opacity:0}}
.sp-cta-acts .btn{transition:transform .3s var(--ease),filter .15s,border-color .15s,background .15s}
.sp-cta-acts .btn:hover{transform:translateY(-2px)}
.sp-cta-acts .btn.primary{position:relative}
.sp-cta-acts .btn.primary::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:2px solid var(--accent);opacity:0;pointer-events:none}
html.reveal-on .sp-cta-acts[data-rv].in .btn.primary::after{animation:btn-ring 1.5s ease-out 1.2s 2}
@keyframes btn-ring{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.45);opacity:0}}
.btn.is-copied{animation:copied-pop .55s cubic-bezier(.34,1.56,.64,1);border-color:var(--accent);color:var(--accent-deep)}
@keyframes copied-pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
/* the foot: the logo pops in, the house hops; the logo tilts on hover */
.sp-foot-brand svg{transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
html.reveal-on .sp-foot-row[data-rv] .sp-foot-brand svg{opacity:0;transform:scale(.5) rotate(-10deg);transition:opacity .4s ease .25s,transform .8s cubic-bezier(.3,1.5,.5,1) .25s}
html.reveal-on .sp-foot-row[data-rv].in .sp-foot-brand svg{opacity:1;transform:none;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
html.reveal-on .sp-foot-row[data-rv].in .sp-foot-brand:hover svg,.sp-foot-brand:hover svg{transform:rotate(-6deg) scale(1.08)}
html.reveal-on .sp-foot-row[data-rv].in .eho svg{animation:house-hop .9s cubic-bezier(.3,1.5,.5,1) .5s both}
@keyframes house-hop{0%{transform:translateY(12px);opacity:0}55%{transform:translateY(-5px);opacity:1}100%{transform:none;opacity:1}}
/* full service or do it yourself: a sign's trip, then the two ways */
.sp-journey{list-style:none;margin:clamp(40px,7vh,72px) 0 clamp(40px,7vh,64px);padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:relative}
.sp-journey::before,.sp-journey::after{content:"";position:absolute;left:calc(100% / 12);right:calc(100% / 12);top:9px;height:2px;background:var(--line)}
.sp-journey::after{background:linear-gradient(90deg,#4f9d75,#3f8ca6 50%,#6a6cc2);transform-origin:0 50%;transform:scaleX(var(--jp, 1))}
.sp-journey li{position:relative;padding:36px 6px 0;text-align:center;font-size:14.5px;font-weight:600;line-height:1.35;color:var(--ink-2)}
.sp-journey li::before{content:"";position:absolute;left:50%;top:0;z-index:1;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--accent);border:2px solid var(--accent);box-shadow:0 0 0 6px var(--ground);transition:background .4s ease,border-color .4s ease,transform .5s var(--ease)}
.sp-journey.is-live li::before{background:var(--ground);border-color:var(--mint-line)}
.sp-journey.is-live li.on::before{background:var(--accent);border-color:var(--accent);transform:scale(1.12)}
.svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.svc-card{border-radius:30px;padding:32px 32px 30px}
.svc-card.svc-full{border-color:var(--mint-line);box-shadow:var(--glass-shadow),0 0 0 1px var(--mint-line)}
.svc-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.svc-ic{flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:var(--tile);color:var(--tile-ink);box-shadow:var(--tile-shadow)}
.svc-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc-tag{margin:0;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep)}
.svc-name{display:block;font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.svc-steps{list-style:none;counter-reset:sv;margin:0;padding:0;display:grid;gap:12px}
.svc-steps li{counter-increment:sv;position:relative;padding-left:34px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.svc-steps li::before{content:counter(sv);position:absolute;left:0;top:1px;width:23px;height:23px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--surface-2);color:var(--ink-3)}
.svc-full .svc-steps li::before{background:var(--tile);color:var(--tile-ink)}
.svc-steps b{color:var(--ink);font-weight:600}
/* the close */
.sp-close{padding-top:0}
.sp-cta{border-radius:clamp(28px,3vw,48px);padding:clamp(56px,10vh,110px) clamp(24px,5vw,80px);text-align:center;border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);
  background:radial-gradient(70% 90% at 0% 0%,rgba(150,205,175,.38),transparent 70%),radial-gradient(70% 90% at 100% 100%,rgba(163,160,214,.34),transparent 70%),var(--card)}
html[data-theme="dark"] .sp-cta{background:radial-gradient(70% 90% at 0% 0%,rgba(127,209,174,.14),transparent 70%),radial-gradient(70% 90% at 100% 100%,rgba(106,108,194,.18),transparent 70%),#16201b}
.sp-cta .sp-title{margin:0 auto 20px;max-width:13ch}
.sp-cta .sp-lede{margin:0 auto 34px}
.sp-cta-acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:30px}
.sp-cta-acts .btn{padding:14px 24px;font-size:15px}
.sp-cta .urlbox{max-width:520px;margin:0 auto}
/* ---------- the landing page's ways to act: a button for agents in the first screen, a pitch before the app on
   phones, a way in for the undecided after the comparison, and proof from agents (only once there is real proof) */
.hero-acts{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 6px}
.hero-acts .btn{padding:12px 20px;font-size:14.5px}
/* the price up top, under the buttons: what a stand and the subscription cost, before the agent reads on */
.hero-price{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--ink-3);max-width:52ch}
.hero-price b{font-weight:600;color:var(--ink)}
.demo-side .hero-price{font-size:14px;line-height:1.5;color:var(--ink-3)}
.mpitch{display:none}
@media (max-width: 899px){
  .mpitch{display:block;padding:24px clamp(18px,5vw,32px) 22px;border-bottom:1px solid var(--line)}
  .mp-title{font-family:var(--font-display);font-weight:500;font-size:clamp(34px,9.4vw,46px);line-height:1.02;letter-spacing:-.04em;margin:10px 0}
  .mp-lede{font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:42ch}
  .mp-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
  .mp-acts .btn{padding:12px 18px;font-size:14.5px}
  .mpitch .hero-price{margin-top:12px;font-size:13.5px}
}
.sp-lead{padding-bottom:0}
.lead-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(26px,4vw,52px);border-radius:clamp(24px,3vw,36px);background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow)}
.lead-copy .sp-title{margin:12px 0 16px}
.lead-copy .sp-lede{margin:0}
.lead-form{display:grid;gap:14px}
.lead-want{display:grid;gap:8px;border:0;margin:0;padding:0;min-width:0}
.lead-want label{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;font-weight:600;font-size:14.5px;color:var(--ink)}
.lead-want label:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px rgba(143,191,176,.25)}
.lead-want input{width:18px;height:18px;margin:0;accent-color:var(--accent);flex:none}
.lead-form .btn.primary{justify-self:start;padding:13px 28px;font-size:15px}
.lead-status{min-height:1.4em;font-size:14px;color:var(--ink-2)}
.lead-status.ok{color:var(--accent-deep);font-weight:600}
.lead-status.err{color:#b24a31;font-weight:600}
html[data-theme="dark"] .lead-status.err{color:#ee8a6e}
.sp-proof .proof-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:clamp(28px,4vh,44px)}
.proof-q{margin:0;display:grid;gap:16px;align-content:start;padding:26px 26px 22px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow)}
.proof-q blockquote{margin:0;font-family:var(--font-display);font-weight:500;font-size:19px;line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
.proof-q figcaption{font-size:13.5px;color:var(--ink-2)}
.proof-q figcaption b{display:block;font-size:14.5px;color:var(--ink)}
.proof-ex,.soon{justify-self:start;padding:5px 9px;border-radius:999px;background:#fbefcf;color:#7a5200;font:600 10.5px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase}
.proof-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,4vh,44px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof-stats div{padding:22px 10px;text-align:center}
.proof-stats b{display:block;font-family:var(--font-display);font-weight:500;font-size:clamp(34px,4vw,52px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.proof-stats span{font-size:13.5px;color:var(--ink-2)}
@media (max-width: 899px){ .lead-card{grid-template-columns:minmax(0,1fr)} }
@media (max-width: 640px){ .proof-stats{grid-template-columns:minmax(0,1fr)} .proof-stats div + div{border-top:1px solid var(--line)} }
/* on a phone, once the visitor is past the app, a slim bar at the bottom keeps a way to order on screen (the closing
   button is fifteen screens down); it steps aside where the page has its own buttons (the lead form, the close),
   while someone types, and off the landing page (js: orderBar) */
.order-bar{display:none}
@media (max-width: 899px){
  .order-bar{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:70;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 18px;border-radius:999px;background:var(--bar);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--bar-line);box-shadow:0 18px 40px -18px rgba(12,24,18,.45);animation:barup .35s var(--ease) both}
  .order-bar[hidden]{display:none}
  .order-bar span{min-width:0;font-family:var(--font-display);font-weight:500;font-size:15.5px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .order-bar .btn{flex:none;padding:11px 16px;font-size:14px}
}
@keyframes barup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .order-bar{animation:none} }

/* the landing page's two photos of the sign (the demo agent's, so the landing page only): the wide one opens the
   sign page and widens to the page's edges as it comes up the screen, slowly settling; the close-up sits beside the
   specs and drifts slower than the page. Each has the live QR drawn over the photo's panel (the js sets --cp, how far
   the wide one has come in, and --cq, how far each has gone by; without it both simply rest) */
.sp-cine,.sp-closeup{display:none}
/* ---------- the sign's printed faces on its photos. The photos' own print was blanked (it was soft, and its code
   pointed nowhere useful); the page prints each face again as type, crisp at any size and live (the agent's name,
   phone, picture, text code and QR). Each face is laid out flat, W x H in the photo's own pixels, and a matrix3d
   maps it onto the panel as the camera sees it; .faces is the photo at its natural size, scaled to the photo on
   screen by --k (js). Multiplied into the panel, the ink takes the photo's light. ---------- */
.faces{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--k, .4));pointer-events:none}
.face{position:absolute;left:0;top:0;transform-origin:0 0;mix-blend-mode:multiply}
.ff{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center;white-space:nowrap;color:#0B0F0D;--lockup-bracket:#2f5f52;-webkit-font-smoothing:antialiased}
.ff-panel{justify-content:center;padding:.9em .6em}
.ff-fs{font:700 3.2em/1 var(--font-display);letter-spacing:.035em;color:#1E3A2F}
.ff-bk{font:600 .98em/1.2 var(--font-body);letter-spacing:.13em;text-transform:uppercase;color:#2f5f52;margin-top:.45em}
.ff-ph{display:block;width:4.2em;height:4.2em;border-radius:50%;border:.2em solid #1E3A2F;background:#dfe6e2 center/cover no-repeat;margin:.75em 0 .6em}
.ff-ag{font:500 1.5em/1.15 var(--font-display)}
.ff-tel{font:600 1.4em/1.2 var(--font-body);margin-top:.1em}
.ff-rider{justify-content:space-between;padding:1.35em 1em 1.25em}
.ffc{position:absolute;width:1.9em;height:1.9em;border:0 solid #1E3A2F}
.ffc.tl{left:.5em;top:.5em;border-left-width:.32em;border-top-width:.32em}
.ffc.tr{right:.5em;top:.5em;border-right-width:.32em;border-top-width:.32em}
.ffc.bl{left:.5em;bottom:.5em;border-left-width:.32em;border-bottom-width:.32em}
.ffc.br{right:.5em;bottom:.5em;border-right-width:.32em;border-bottom-width:.32em}
.ff-top,.ff-bot{display:flex;flex-direction:column;align-items:center}
.ff-scan{font:500 1.42em/1.15 var(--font-display)}
.ff-walk{font:600 .8em/1.2 var(--font-body);letter-spacing:.05em;text-transform:uppercase;color:#2f5f52;margin-top:.3em}
.ff-qr{display:block;width:9em;height:9em}
.photo-qr svg{display:block;width:100%;height:100%}
.ff-txt{font:600 1.08em/1.25 var(--font-body)}
.ff-txt b{color:#2f5f52;font-weight:700}
.ff-wm{display:block;height:1em;width:auto;margin-top:.5em;color:#0B0F0D}
.ff-brk{font:500 .66em/1.2 var(--font-body);color:#56615c;margin-top:.35em}
/* the morning and night shots zoom in on the sign so its print reads */
.shot{transform-origin:var(--ox, 50%) var(--oy, 50%);transform:scale(1.45)}
@media (min-width: 900px){
  .sp-cine{display:block;position:relative;margin:0}
  .sp-cine-frame{position:relative;overflow:hidden;background:#0d1310;clip-path:inset(0 calc(clamp(12px,2vw,28px) + (1 - var(--cp, 1)) * 7%) round calc(clamp(28px,3vw,48px) + (1 - var(--cp, 1)) * 16px))}
  .sp-cine-media{position:relative;aspect-ratio:1916/821;transform:translateY(calc((.5 - var(--cq, .5)) * 5%)) scale(calc(1.14 - var(--cq, .5) * .12));will-change:transform}
  .sp-cine-media img{display:block;width:100%;height:100%}
  .sp-cine-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,10,8,0) 38%,rgba(6,10,8,.74) 100%),linear-gradient(270deg,rgba(6,10,8,.5),rgba(6,10,8,0) 52%)}
  .sp-cine-cap{position:absolute;z-index:2;right:calc(clamp(12px,2vw,28px) + (1 - var(--cp, 1)) * 7% + clamp(28px,4.5vw,72px));bottom:clamp(28px,6vh,64px);width:min(500px,38%);color:#F2F5F3}
  .sp-cine-cap .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(143,191,176,.45);color:#DDEEE6}
  .sp-cine-title{font-family:var(--font-display);font-weight:500;font-size:clamp(34px,3.7vw,58px);line-height:1.02;letter-spacing:-.04em;margin:14px 0;color:#fff;text-wrap:balance}
  .sp-cine-title .grad{background:linear-gradient(92deg,#9ED8C4 0%,#C9D6F0 60%,#B9B5F0 100%);-webkit-background-clip:text;background-clip:text}
  .sp-cine-sub{font-size:16.5px;line-height:1.55;color:rgba(242,245,243,.86);margin:0;text-wrap:pretty}
  .sp-onsign{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .sp-closeup{display:block;position:relative;margin:0;overflow:hidden;border-radius:clamp(28px,3vw,40px);aspect-ratio:1024/1536;background:#0d1310;box-shadow:0 50px 90px -50px rgba(12,24,18,.55)}
  .sp-closeup-media{position:absolute;left:0;top:0;width:100%;aspect-ratio:1024/1536;transform:translateY(calc((.5 - var(--cq, .5)) * 9%)) scale(1.1);will-change:transform}
  .sp-closeup-media img{display:block;width:100%;height:100%}
}
@media (max-width: 899px){
  .sp-cine{display:block;margin:0;padding:clamp(28px,7vw,48px) clamp(12px,4vw,28px) 0}
  .sp-cine-frame{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:26px;background:#0d1310;box-shadow:0 30px 60px -36px rgba(12,24,18,.5)}
  .sp-cine-media{position:absolute;left:0;top:0;height:100%;aspect-ratio:1916/821;transform-origin:26% 50%;transform:translateX(-8%) scale(calc(1.12 - var(--cq, .5) * .12))}
  .sp-cine-media img{display:block;width:100%;height:100%}
  .sp-cine-cap{padding:26px 8px 0}
  .sp-cine-title{font-family:var(--font-display);font-weight:500;font-size:clamp(34px,9vw,48px);line-height:1.02;letter-spacing:-.04em;margin:12px 0;color:var(--ink);text-wrap:balance}
  .sp-cine-sub{font-size:16px;line-height:1.55;color:var(--ink-2);margin:0;text-wrap:pretty}
  /* cropped to the sign itself (the panel and the QR), so the folded-in chapter stays short */
  .sp-closeup{display:block;position:relative;overflow:hidden;margin:0 auto;width:min(100%,400px);aspect-ratio:9/10;border-radius:22px;background:#0d1310;box-shadow:0 30px 60px -36px rgba(12,24,18,.5)}
  .sp-closeup-media{position:absolute;left:0;top:-13%;width:100%;aspect-ratio:1024/1536}
  .sp-closeup-media img{display:block;width:100%;height:100%}
}
@media (min-width: 600px) and (max-width: 899px){  /* portrait tablets: a wider cut, the sign and the start of the house */
  .sp-cine-frame{aspect-ratio:4/3}
  .sp-cine-media{transform:scale(calc(1.12 - var(--cq, .5) * .12))}
}
/* narrower screens: one column, the sign scrolls with the page */
@media (max-width:899px){
  .sp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .sp-story-grid{grid-template-columns:minmax(0,1fr)}
  .sp-stick{position:static}
  .qrsteps li{min-height:0;padding:26px 0 26px 66px}
  .qrsteps li::before{top:22px}
  .sp-journey{grid-template-columns:minmax(0,1fr);gap:22px}
  .sp-journey::before,.sp-journey::after{left:9px;right:auto;top:10px;bottom:10px;width:2px;height:auto}
  .sp-journey::after{transform:scaleY(var(--jp, 1));transform-origin:50% 0}
  .sp-journey li{text-align:left;padding:0 0 0 38px}
  .sp-journey li::before{left:0;margin-left:0}
}
@media (max-width:640px){
  .svc{grid-template-columns:minmax(0,1fr)}
  .vs-head{display:none}
  .vs-rows li{grid-template-columns:minmax(0,1fr);gap:8px;padding:18px 18px}
  .vs-rows .sr-only{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;font-weight:600}  /* no column heads on a phone: each line says which sign */
  .sp-band,.sp-cta{border-radius:24px}
}

.sp-band .vs{background:rgba(255,255,255,.035);-webkit-backdrop-filter:none;backdrop-filter:none}
.side-title{font-size:clamp(42px,4.8vw,68px);line-height:1;letter-spacing:-.045em;margin-bottom:22px}
.demo-side p{font-size:17.5px;line-height:1.65;color:var(--ink-2)}
/* on the landing page the sign is the owner's two photos of it, morning and night, cross-fading on a tap */
.sign-shots{display:none}
.sign-shots{display:block;position:relative;margin:0 auto;width:min(100%,440px);aspect-ratio:1122/1402;border-radius:30px;overflow:hidden;isolation:isolate;cursor:pointer;background:#0d1310;box-shadow:0 40px 80px -46px rgba(12,24,18,.55);-webkit-tap-highlight-color:transparent;outline:none}
.sign-shots:focus-visible{box-shadow:0 0 0 3px var(--accent),0 40px 80px -46px rgba(12,24,18,.55)}
.shot{position:absolute;inset:0;transition:opacity .9s ease}
.shot img{display:block;width:100%;height:100%}
.shot-night{opacity:0}
.is-night .shot-night{opacity:1}
.shot.is-missing{visibility:hidden}   /* its photo never arrived (js): the other shot stays clean */
.signcol .daynight{margin-top:24px}
/* ---------- a shorter phone page: tighter chapters, smaller numbers and steps, the comparison and the sign's cards
   closer set, the service trip line left out (its two cards say the same), so the page runs about an eighth shorter
   on a phone. These come last so they win over the phone rules above. ---------- */
@media (max-width:899px){
  .sp-sec{padding:clamp(48px,8vh,72px) 0}
  .sp-stats{margin-top:clamp(28px,5vh,44px)}
  .stat{padding:18px 12px}
  .stat-n{font-size:40px}
  .stat-l{margin-top:8px;font-size:13px}
  .qrsteps li{padding:16px 0 16px 58px;font-size:15px;line-height:1.5}
  .qrsteps li::before{top:14px;width:38px;height:38px;font-size:13px}
  .qrsteps b{font-size:20px}
  .qrsteps::before,.qrsteps::after{left:18px;top:40px;bottom:40px}
  .sp-journey{display:none}
  .vs-rows li{padding:14px 16px;gap:6px}
  .vs-rows p{font-size:14.5px;line-height:1.5}
  .onsign li{padding:12px 14px;font-size:14px}
  .onsign b{font-size:17px}
  .sp-closeup{width:min(100%,320px)}
  .svc-card{padding:22px 20px 20px}
}
@media (max-width:899px){.faq summary{padding:13px 0;font-size:16px}.faq p{font-size:14.5px}.sp-foot-row{padding-top:18px}}
@media (prefers-reduced-motion: reduce){.sp-close .orb{animation:none}.cta-sign .cs-ring{display:none}.btn.is-copied{animation:none}}
/* the prices as rows (the number beside its words) only where the tiles stand in ONE column, on phones: at tablet widths
   two tiles share a row and the words were squeezed into a narrow column beside the number (owner, 2026-09-28: "the
   words look like shit"), so from 600px the tiles keep the number above the words as on a wide screen */
@media (max-width:599px){
  .price-row{gap:8px}
  .price-row div{display:flex;align-items:baseline;gap:12px;padding:13px 16px;border-radius:16px}
  .price-row b{font-size:26px;margin:0;flex:none;min-width:5.4ch}
  .price-row span{font-size:13.5px;line-height:1.4}
}
/* phones, shorter: a tighter rhythm below 900px, three questions with "4 more", a smaller closing card and footer, the
   optional name field left out of the lead form (last, so it wins) */
@media (max-width:899px){
  .sp-sec{padding:clamp(40px,6vh,56px) 0}
  .sp-stats{margin-top:24px}
  .stat{padding:14px 10px}
  .stat-n{font-size:36px}
  .stat-l{margin-top:6px;font-size:12.5px}
  .qrsteps li{padding:12px 0 12px 58px}
  .vs-rows li{padding:12px 14px;gap:4px}
  .vs-rows p{font-size:14px;line-height:1.45}
  .onsign li{padding:10px 12px;font-size:13.5px}
  .sp-closeup{width:min(100%,260px)}
  .sp-prices{margin-top:40px;padding-top:24px}
  .price-note{margin-top:10px;font-size:12.5px}
  .price-acts{margin-top:16px}
  .lead-card label.field:has(#lead-name){display:none}
  .svc-card{padding:18px 18px 16px}
  .svc-steps li{font-size:14.5px;line-height:1.45}
  .sp-faq .faq:not(.is-all) details:nth-of-type(n+4){display:none}
  .faq .faq-more{display:inline-flex;margin-top:14px}
  .faq.is-all .faq-more{display:none}
  .sp-cta{padding:48px 22px}
  .sp-cta .sp-lede{margin-bottom:24px}
  .cta-sign{width:56px;height:84px;margin-bottom:12px}
  .sp-foot{padding-bottom:24px;font-size:12.5px}
  .sp-foot-row{padding-top:14px;gap:10px 20px}
  .sp-foot-more{margin-top:10px}
  .sp-foot-fine{margin-top:10px}
}