/* SmartSites VSL page. Cloned from the Stone Systems structure:
   headline, video, "Step 1" line, one big CTA, video testimonial, footer.

   Dials: VARIANCE 6 / MOTION 3 / DENSITY 3.

   MOTION IS LOW ON PURPOSE. The video is the conversion mechanism; anything else
   moving competes with it. Hover and active states only, no scroll animation. The
   single exception is the CTA pulse, which Stone runs too (optin-cta-pulse) and which
   is the one element whose whole job is to be noticed. It stops on hover and under
   prefers-reduced-motion.

   CENTERED LAYOUT IS A DELIBERATE OVERRIDE of the usual anti-center bias. There is
   exactly one path down this page and no second column to balance against.

   SHAPE RULE: ONE sharp radius, 4px, on every surface, input and button. Soft cards
   plus a pill CTA is the generic vocabulary that failed Gate 4b against
   make-it-happen at 74.4 (geometry scored a flat 1.00 match). Squared edges also read
   as direct rather than soft-SaaS, which suits a contractor better.

   TYPE: Space Grotesk Bold for display, self hosted, subset to Latin basic at 4.5KB,
   SIL OFL. Body stays on the system stack so paragraphs paint instantly.

   THEME IS LOCKED LIGHT on the brand palette. No prefers-color-scheme block. */

@font-face{
  font-family:"Space Grotesk";
  src:url("assets/fonts/spacegrotesk-bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  /* Exact SmartSites brand tokens, lifted from SmartSites-Landing/styles.css so the
     two pages read as one product.

     CONTRAST SPLIT, deliberate. Brand cyan #00B4D8 is excellent as a FILL and
     unusable as TEXT on white: it measures 2.5:1, a WCAG AA failure. The sister page
     ships .btn-primary as white-on-#00B4D8, i.e. 2.5:1 -- a real accessibility bug on
     the live site that is NOT copied here. Fills use brand cyan with near-black text
     on top (8.0:1); cyan TEXT on white uses --accent-text at 6.3:1. */
  --ink:#0b0b0b;           /* brand */
  --ink-2:#5b6570;         /* brand --muted */
  --paper:#fff;
  --paper-2:#eef6fb;       /* brand --soft */
  --line:#cfe3ee;
  --accent:#00B4D8;        /* brand. FILL only, pair with --ink text */
  --accent-ink:#0097b5;    /* brand. hover fill */
  --accent-text:#00697f;   /* derived. cyan TEXT on white, 6.3:1 */
  --go:#128a3e;            /* progress only. 3.60:1 on the track; brand #16a34a
                              measured 2.67:1, under the 3:1 WCAG floor for a
                              graphical object, so the fill was not reliably visible */
  --display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --r:4px;
  --wrap:720px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
body.modal-open{overflow:hidden}
img,video{max-width:100%;display:block}
a{color:var(--accent-text)}

/* masthead ---------------------------------------------------------------- */
.masthead{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:var(--wrap);margin:0 auto;padding:1.1rem 1.25rem;
}
.wordmark{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.wordmark span{color:var(--accent-text)}
.wordmark em{font-style:normal;font-weight:600;font-size:.78rem;color:var(--ink-2);letter-spacing:0}
.masthead-tel{font-weight:700;font-size:.95rem;text-decoration:none;white-space:nowrap}

/* hero -------------------------------------------------------------------- */
.hero{max-width:var(--wrap);margin:0 auto;padding:1.2rem 1.25rem 0;text-align:center}
h1{
  margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(1.9rem,5.6vw,2.85rem);
  line-height:1.1;letter-spacing:-.03em;
}
h1 .accent{display:block;color:var(--accent-text)}

/* stage: video, step line, CTA -------------------------------------------- */
.stage{max-width:var(--wrap);margin:0 auto;padding:1.6rem 1.25rem 0;text-align:center}

.video-slot{position:relative;width:100%;aspect-ratio:16/9;margin:0 auto}
.video{
  position:absolute;inset:0;
  border-radius:var(--r);overflow:hidden;
  background:#04323d;box-shadow:0 14px 38px rgba(6,60,80,.20);
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.facade{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;padding:0;border:0;background:#04323d;cursor:pointer;overflow:hidden;
}
.facade img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease,filter .2s ease}
.facade:hover img{transform:scale(1.03);filter:brightness(.9)}
.facade:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:50%;
  background:var(--accent);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.34);
  transition:transform .18s ease,background .18s ease;pointer-events:none;
}
.play svg{width:38px;height:38px;margin-left:4px}
.facade:hover .play{transform:translate(-50%,-50%) scale(1.07);background:var(--accent-ink)}
.dur{
  position:absolute;right:12px;bottom:12px;
  background:rgba(0,0,0,.78);color:#fff;
  font-size:.8rem;font-weight:700;padding:4px 9px;border-radius:var(--r);pointer-events:none;
}

.step-line{
  margin:1.5rem auto 0;max-width:34rem;
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.05rem,3vw,1.32rem);line-height:1.35;
}
.step-line span{text-decoration:underline}

.cta-big{
  position:relative;isolation:isolate;
  display:block;width:100%;max-width:30rem;margin:1.4rem auto 0;
  padding:1.15rem 1.5rem;border:0;border-radius:var(--r);
  background:var(--accent);color:var(--ink);
  font-family:var(--display);font-size:clamp(1.15rem,3.4vw,1.5rem);font-weight:700;
  letter-spacing:-.01em;cursor:pointer;
  box-shadow:0 8px 22px rgba(0,180,216,.34);
  transition:background .15s ease,transform .1s ease;
}
/* The pulse animates OPACITY on a pseudo-element, never box-shadow on the button.
   Animating box-shadow repaints every frame; opacity is composite-only and stays off
   the main thread. That distinction matters more here than anywhere, because this
   page exists to fix a mobile performance failure. */
.cta-big::after{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;
  box-shadow:0 8px 30px rgba(0,180,216,.62);
  opacity:0;
  animation:cta-pulse 3.4s ease-in-out infinite;
  pointer-events:none;
}
.cta-big:hover{background:var(--accent-ink);transform:scale(1.015)}
.cta-big:hover::after,
.cta-big:focus-visible::after{animation:none;opacity:0}
.cta-big:active{transform:scale(.985)}
.cta-big:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@keyframes cta-pulse{
  0%,100%{opacity:0}
  50%{opacity:1}
}

/* proof ------------------------------------------------------------------- */
.proof{max-width:var(--wrap);margin:0 auto;padding:2.8rem 1.25rem 0}
.proof-card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:0 8px 24px rgba(6,60,80,.10);
}
.tony{width:100%;background:#04323d}
.proof-body{padding:1.1rem 1.2rem}
.proof-quote{margin:0;font-size:.95rem;font-weight:600;color:var(--ink)}
.proof-name{margin:.5rem 0 0;font-size:.9rem;font-weight:700;color:var(--ink-2)}

/* reviews ----------------------------------------------------------------- */
.reviews{max-width:var(--wrap);margin:0 auto;padding:2.8rem 1.25rem 0;text-align:center}
.reviews h2{
  margin:0 0 1.2rem;font-family:var(--display);font-weight:700;
  font-size:clamp(1.35rem,3.8vw,1.75rem);letter-spacing:-.022em;
}
/* Reserve height so mounting the widget cannot shove the footer around and cost a
   layout shift. */
.reviews-slot{min-height:320px}
.reviews-slot iframe{width:100%;min-width:100%;border:0;display:block}

/* footer ------------------------------------------------------------------ */
.foot{
  max-width:var(--wrap);margin:3rem auto 0;
  padding:1.5rem 1.25rem 2.5rem;border-top:1px solid var(--line);
  font-size:.85rem;color:var(--ink-2);text-align:center;
}
.foot p{margin:0 0 .55rem}
.foot-biz strong{color:var(--ink)}
.foot-nap{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;font-weight:700}
.foot-legal{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:.9rem}

/* modal ------------------------------------------------------------------- */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal[hidden]{display:none}
.modal-scrim{position:absolute;inset:0;background:rgba(4,25,32,.62)}
.modal-card{
  position:relative;z-index:1;
  width:100%;max-width:29rem;max-height:92vh;overflow-y:auto;
  background:var(--paper);border-radius:var(--r);
  padding:1.6rem 1.4rem 1.4rem;
  box-shadow:0 24px 60px rgba(0,0,0,.38);
}
.modal-close{
  position:absolute;top:.7rem;right:.7rem;
  width:32px;height:32px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:var(--r);
  color:var(--ink-2);cursor:pointer;
}
.modal-close:hover{background:var(--paper-2);color:var(--ink)}
.modal-close svg{width:17px;height:17px}
.modal-close:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.modal-kicker{
  margin:0 0 1.1rem;padding-right:2rem;
  font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink);
}

/* quiz -------------------------------------------------------------------- */
.quiz{margin:0;text-align:left}

/* PROGRESS IS FRONT LOADED, AND THAT IS DELIBERATE (Curran, 2026-08-17):
   50 -> 90 -> 95 -> 99 -> 100 rather than the true 25/50/75/100. This is the endowed
   progress effect: a visitor who already feels half done is likelier to finish, and
   the tail steps read as trivial.

   BE HONEST ABOUT WHAT THIS IS. It is a persuasion device, not a readout, so it sits
   on the other side of the line from the sister page's scarcity counter. That one was
   cut because it made a false claim about a scarce resource (spots remaining) which
   pressured a buying decision. This one overstates how far through a form you are.
   The distinction is the SUBJECT of the claim, not the technique. Do not use this as
   a precedent for faking availability, pricing, results or review counts. */
.quiz-head{display:flex;align-items:center;gap:.85rem;margin-bottom:1.3rem}
.quiz-track{flex:1;height:8px;background:#e9eff2;border-radius:var(--r);overflow:hidden}
.quiz-fill{
  display:block;height:100%;width:50%;
  background:var(--go);
  transition:width .42s cubic-bezier(.16,1,.3,1);
}
.quiz-count{margin:0;flex:0 0 auto;font-size:.82rem;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}

.quiz-step{border:0;padding:0;margin:0;min-width:0}
.quiz-step legend{
  padding:0;margin:0 0 .95rem;
  font-family:var(--display);font-weight:700;
  font-size:1.14rem;line-height:1.3;letter-spacing:-.018em;color:var(--ink);
}

.choices{display:grid;gap:.5rem}
.choice{
  width:100%;text-align:left;padding:.82rem 1rem;
  font-family:inherit;font-size:1rem;font-weight:600;color:var(--ink);
  background:var(--paper);border:1px solid #b9d2df;border-radius:var(--r);
  cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .08s ease;
}
.choice:hover{border-color:var(--accent)}
.choice:active{transform:translateY(1px)}
.choice:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.choice.is-picked{border-color:var(--accent);background:var(--accent);color:var(--ink)}

.field{margin-bottom:.9rem}
.field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.3rem}
.field input{
  width:100%;padding:.7rem .85rem;
  font-size:16px; /* 16px min or iOS zooms the viewport on focus */
  font-family:inherit;color:var(--ink);background:var(--paper);
  border:1px solid #b9c8d0;border-radius:var(--r);
}
.field input::placeholder{color:#6d7d86}
.field input:focus{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent-text)}
.field input[aria-invalid="true"]{border-color:#b3261e}
.err{margin:.3rem 0 0;font-size:.85rem;color:#b3261e;font-weight:600}

.consent{display:flex;flex-wrap:wrap;gap:.55rem;margin:.3rem 0 1.1rem}
.consent input{width:20px;height:20px;margin:.2rem 0 0;flex:0 0 auto;accent-color:var(--accent-text)}
.consent label{flex:1;min-width:0;font-size:.8rem;line-height:1.5;color:var(--ink-2)}
.consent .err{flex:1 0 100%}

.submit{
  display:block;width:100%;padding:.95rem 1.2rem;
  border:0;border-radius:var(--r);
  background:var(--accent);color:var(--ink);
  font-family:var(--display);font-size:1.05rem;font-weight:700;letter-spacing:-.005em;
  cursor:pointer;white-space:nowrap;transition:background .18s ease,transform .08s ease;
}
.submit:hover{background:var(--accent-ink)}
.submit:active{transform:translateY(1px)}
.submit:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.submit[disabled]{opacity:.6;cursor:progress}

.quiz-back{
  display:block;margin:.9rem auto 0;padding:.35rem 0;
  background:none;border:0;font-family:inherit;font-size:.88rem;font-weight:700;
  color:var(--accent-text);cursor:pointer;text-decoration:underline;
}
.quiz-back:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.form-fail{
  margin:.9rem 0 0;padding:.7rem .85rem;
  background:#fdeceb;border:1px solid #f0c4c1;border-radius:var(--r);
  color:#8c1d18;font-size:.9rem;font-weight:600;
}

/* Step announcer. Off-screen but readable by assistive tech; display:none would
   hide it from screen readers too. */
.quiz-live{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* mobile ------------------------------------------------------------------ */
@media(max-width:600px){
  .masthead-tel{font-size:.9rem}
  .play{width:62px;height:62px}
  .play svg{width:29px;height:29px}
  .modal{padding:.6rem}
  .modal-card{padding:1.4rem 1.1rem 1.2rem}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .facade:hover img{transform:none}
  .facade:hover .play{transform:translate(-50%,-50%)}
  .cta-big::after{animation:none;opacity:0}
}