/* SnapFix.Homes — shared styles */
:root{
  --navy:#0E1B3D;
  --navy-2:#13234E;
  --blue:#1A6BEA;
  --blue-dark:#1257C4;
  --ink:#101828;
  --muted:#5B6577;
  --line:#E6E9F0;
  --bg:#FFFFFF;
  --bg-soft:#F6F8FC;
  --radius:14px;
  --shadow:0 10px 30px rgba(14,27,61,.10);
  font-size:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.hand{font-family:'Caveat',cursive;font-size:1.45rem;color:var(--blue);line-height:1.2}

/* ---------- Nav ---------- */
.nav{background:var(--navy);position:sticky;top:0;z-index:50}
.nav-inner{display:flex;align-items:center;gap:32px;height:62px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:1.12rem;letter-spacing:-.01em}
.brand .accent{color:#4D8DFF}
.brand svg{width:30px;height:30px}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{color:#C8D2E8;font-size:.92rem;font-weight:500;transition:color .15s}
.nav-links a:hover{color:#fff}
.nav-cta{display:flex;align-items:center;gap:18px;margin-left:8px}
.nav-cta .login{color:#C8D2E8;font-size:.92rem;font-weight:500}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--blue);color:#fff;font-weight:600;font-size:.95rem;padding:11px 20px;border-radius:10px;border:0;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--blue-dark)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{background:var(--bg-soft)}
.btn.big{padding:15px 24px;font-size:1rem}
.menu-toggle{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer}

/* ---------- Hero ---------- */
.hero{padding:64px 0 72px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.pill{display:inline-block;border:1.5px solid var(--blue);color:var(--blue);font-weight:700;font-size:.72rem;letter-spacing:.12em;padding:7px 16px;border-radius:999px;margin-bottom:22px}
h1{font-size:3.4rem;line-height:1.08;letter-spacing:-.03em;font-weight:800}
h1 .accent{color:var(--blue)}
.hero p.lede{margin:20px 0 30px;color:var(--muted);font-size:1.08rem;max-width:42ch}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.btn-sub{display:block;font-size:.72rem;font-weight:400;opacity:.85;margin-top:1px}
.hero-trust{display:flex;gap:34px;margin-top:42px;flex-wrap:wrap}
.trust{display:flex;gap:10px;align-items:flex-start}
.trust svg{width:22px;height:22px;color:var(--blue);flex:none;margin-top:2px}
.trust b{display:block;font-size:.9rem}
.trust span{font-size:.8rem;color:var(--muted)}

/* phone mockup */
.hero-visual{display:flex;justify-content:center;gap:28px;align-items:center}
.phone{width:280px;background:#0B0F1A;border-radius:42px;padding:12px;box-shadow:var(--shadow),0 30px 60px rgba(14,27,61,.18)}
.phone-screen{background:#fff;border-radius:32px;overflow:hidden}
.phone-status{display:flex;justify-content:space-between;font-size:.62rem;color:#475467;padding:8px 16px 4px}
.phone-brand{display:flex;align-items:center;gap:6px;font-weight:700;font-size:.8rem;padding:4px 14px 8px;color:var(--navy)}
.phone-brand svg{width:16px;height:16px;color:var(--blue)}
.phone-photo{height:150px;background:
  radial-gradient(60px 26px at 60% 42%, rgba(255,255,255,.5), transparent 70%),
  linear-gradient(160deg,#8a93a3 0%,#5c6678 45%,#3d4759 100%)}
.phone-photo .pipe{position:relative;top:48px;margin:0 auto;width:170px;height:26px;border-radius:13px;background:linear-gradient(#dfe4ec,#9aa4b5 55%,#6b7689);box-shadow:0 6px 14px rgba(0,0,0,.35)}
.phone-photo .joint{position:relative;top:30px;margin:0 auto;width:44px;height:44px;border-radius:8px;background:linear-gradient(#cfd6e2,#8a94a8);box-shadow:0 4px 10px rgba(0,0,0,.3)}
.drip{position:relative;top:34px;margin:0 auto;width:6px;height:10px;border-radius:50% 50% 60% 60%;background:#bcd6ff;opacity:.9;animation:drip 1.6s infinite}
@keyframes drip{0%{transform:translateY(0);opacity:.9}80%{transform:translateY(26px);opacity:.4}100%{transform:translateY(30px);opacity:0}}
.phone-body{padding:14px 16px 16px}
.row-between{display:flex;justify-content:space-between;align-items:center}
.phone-label{font-size:.62rem;color:#667085;font-weight:600;letter-spacing:.02em}
.phone-issue{font-weight:800;font-size:1.05rem;margin:2px 0 4px}
.conf{font-size:.66rem;color:#667085}
.conf b{color:#12B76A}
.phone-fix{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.phone-fix p{font-size:.72rem;color:#475467;margin-top:3px;line-height:1.45}
.phone-btn{display:block;text-align:center;background:var(--blue);color:#fff;font-size:.78rem;font-weight:700;border-radius:10px;padding:10px;margin-top:13px}
.phone-tabs{display:flex;justify-content:space-around;border-top:1px solid var(--line);padding:9px 6px 4px;margin-top:14px}
.phone-tabs span{font-size:.52rem;color:#98A2B3;display:flex;flex-direction:column;align-items:center;gap:3px}
.phone-tabs svg{width:15px;height:15px}
.phone-tabs .active{color:var(--blue)}
.qr-side{text-align:center}
.qr-card{background:#fff;border:3px solid var(--navy);border-radius:14px;padding:12px;display:inline-block;box-shadow:var(--shadow)}
.qr-card img{width:150px;height:150px}
.qr-tag{background:var(--navy);color:#fff;font-weight:800;font-size:.78rem;letter-spacing:.06em;border-radius:0 0 10px 10px;margin:12px -12px -12px;padding:9px}
.qr-note{margin-bottom:14px;max-width:170px;margin-left:auto;margin-right:auto}
.arrow{display:block;margin:4px auto 10px;width:42px;height:42px;color:var(--blue);transform:rotate(20deg)}

/* ---------- How it works (dark) ---------- */
.dark{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;padding:72px 0}
.kicker{text-align:center;color:#6FA0FF;font-weight:700;font-size:.74rem;letter-spacing:.18em;margin-bottom:12px}
.dark h2,.light h2{text-align:center;font-size:2.1rem;letter-spacing:-.02em;font-weight:800}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:54px;position:relative}
.step{text-align:center;position:relative}
.step-icon{width:88px;height:88px;border-radius:50%;background:rgba(77,141,255,.12);border:1px solid rgba(77,141,255,.35);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;position:relative}
.step-icon svg{width:36px;height:36px;color:#9CC0FF}
.step-num{position:absolute;left:6px;bottom:2px;width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.step b{font-size:1.06rem;display:block;margin-bottom:8px}
.step p{color:#AEBBDA;font-size:.9rem;max-width:24ch;margin:0 auto}
.step::after{content:"";position:absolute;top:44px;right:-12%;width:24%;border-top:2px dotted rgba(255,255,255,.25)}
.step:last-child::after{display:none}

/* ---------- Features (light) ---------- */
.light{padding:78px 0;background:var(--bg)}
.eyebrow{color:var(--blue);font-weight:700;font-size:.74rem;letter-spacing:.18em;margin-bottom:12px}
.features-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.features-grid h2{text-align:left;font-size:2.3rem}
.features-grid h2 .accent{color:var(--blue)}
.feature-list{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px;margin-top:36px}
.feature{display:flex;gap:12px;align-items:flex-start}
.feature-ic{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--blue);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none}
.feature-ic svg{width:19px;height:19px}
.feature b{font-size:.86rem;display:block;margin-bottom:3px}
.feature p{font-size:.76rem;color:var(--muted);line-height:1.45}
.house-blob{position:relative;display:flex;justify-content:center}
.house-blob::before{content:"";position:absolute;inset:-8% -6%;background:radial-gradient(circle at 60% 40%,#DCEBFF 0%,#EAF2FF 55%,transparent 72%);border-radius:50%;z-index:0}
.house-img{position:relative;z-index:1;border-radius:18px;width:100%;max-width:430px;box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover}

/* ---------- Examples ---------- */
.examples{padding:0 0 80px;background:var(--bg)}
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:44px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card-img{position:relative;aspect-ratio:4/3;background:#E9EDF4;object-fit:cover;width:100%}
.tag{position:absolute;left:10px;bottom:10px;background:var(--blue);color:#fff;font-size:.62rem;font-weight:700;padding:4px 10px;border-radius:6px}
.card-body{padding:14px 14px 16px}
.card-body b{font-size:.92rem;display:block;margin-bottom:5px}
.card-body p{font-size:.74rem;color:var(--muted);line-height:1.5}
.card-wrap{position:relative}

/* ---------- Pricing ---------- */
.pricing{padding:78px 0;background:var(--bg-soft)}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,380px));gap:24px;justify-content:center;margin-top:46px}
.plan{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px}
.plan.featured{border:2px solid var(--blue);position:relative;box-shadow:var(--shadow)}
.plan .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.08em;padding:5px 14px;border-radius:999px}
.plan h3{font-size:1.05rem}
.price{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;margin:12px 0 2px}
.price span{font-size:.95rem;font-weight:500;color:var(--muted)}
.plan ul{list-style:none;margin:20px 0 26px;display:grid;gap:11px}
.plan li{display:flex;gap:10px;font-size:.9rem;color:#344054}
.plan li svg{width:18px;height:18px;color:var(--blue);flex:none;margin-top:2px}
.plan .btn{width:100%}

/* ---------- FAQ ---------- */
.faq{padding:78px 0;background:var(--bg)}
.faq-list{max-width:760px;margin:42px auto 0;display:grid;gap:12px}
details{border:1px solid var(--line);border-radius:12px;padding:18px 20px;background:#fff}
details[open]{border-color:var(--blue)}
summary{font-weight:600;font-size:.98rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
summary::after{content:"+";font-size:1.3rem;color:var(--blue);font-weight:400;transition:transform .15s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:12px;color:var(--muted);font-size:.92rem}

/* ---------- Footer CTA + footer ---------- */
.cta-band{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;padding:56px 0}
.cta-grid{display:grid;grid-template-columns:auto auto 1fr;gap:44px;align-items:center}
.cta-brandline{display:flex;gap:16px;align-items:center}
.cta-brandline svg{width:62px;height:62px;color:#4D8DFF;flex:none}
.cta-brandline h3{font-size:1.55rem;line-height:1.25;letter-spacing:-.02em}
.cta-brandline .accent{color:#6FA0FF}
.cta-qr{display:flex;gap:14px;align-items:center}
.cta-qr .qr-card{border-color:#fff;padding:9px}
.cta-qr .qr-card img{width:108px;height:108px}
.cta-right h4{font-size:1.25rem;margin-bottom:6px}
.cta-right p{color:#AEBBDA;font-size:.92rem;margin-bottom:18px}
.store-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.store-badge{display:inline-flex;align-items:center;gap:9px;background:#000;border:1px solid #2a3756;border-radius:9px;padding:8px 16px;color:#fff}
.store-badge svg{width:22px;height:22px}
.store-badge small{display:block;font-size:.56rem;opacity:.8;font-weight:400;letter-spacing:.02em}
.store-badge b{font-size:.92rem;line-height:1.1;display:block}
.btn.outline-light{background:transparent;border:1.5px solid var(--blue);color:#fff}
.btn.outline-light:hover{background:rgba(77,141,255,.12)}
.footer{background:#0A1530;color:#8FA0C4;padding:22px 0}
.footer-inner{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.footer .brand{font-size:.98rem}
.footer-links{display:flex;gap:24px;margin-left:auto;flex-wrap:wrap}
.footer-links a{font-size:.84rem}
.footer-links a:hover{color:#fff}
.socials{display:flex;gap:14px}
.socials a{width:30px;height:30px;border-radius:50%;background:#16264C;display:flex;align-items:center;justify-content:center}
.socials svg{width:15px;height:15px;color:#C8D2E8}

/* ---------- Legal / doc pages ---------- */
.doc{max-width:780px;margin:0 auto;padding:56px 24px 80px}
.doc h1{font-size:2.2rem;margin-bottom:8px}
.doc .updated{color:var(--muted);font-size:.88rem;margin-bottom:36px}
.doc h2{font-size:1.25rem;margin:36px 0 12px;text-align:left}
.doc p,.doc li{color:#344054;font-size:.97rem;margin-bottom:12px}
.doc ul{padding-left:22px;margin-bottom:14px}
.doc a{color:var(--blue);text-decoration:underline}
.doc .notice{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:22px 0}

/* support page */
.support-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:36px 0}
.support-card{border:1px solid var(--line);border-radius:14px;padding:26px;background:#fff}
.support-card svg{width:28px;height:28px;color:var(--blue);margin-bottom:14px}
.support-card h3{font-size:1.05rem;margin-bottom:8px}
.support-card p{font-size:.9rem;color:var(--muted);margin-bottom:14px}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .hero-grid,.features-grid{grid-template-columns:1fr}
  .hero-visual{margin-top:26px}
  .cards{grid-template-columns:repeat(3,1fr)}
  .cta-grid{grid-template-columns:1fr;text-align:center}
  .cta-brandline,.cta-qr,.store-row{justify-content:center}
  .feature-list{grid-template-columns:repeat(2,1fr)}
  h1{font-size:2.6rem}
}
@media(max-width:720px){
  .nav-links,.nav-cta .login{display:none}
  .menu-toggle{display:block}
  .nav.open .nav-links{display:flex;position:absolute;top:62px;left:0;right:0;background:var(--navy);flex-direction:column;padding:18px 24px;gap:16px}
  .steps{grid-template-columns:1fr;gap:38px}
  .step::after{display:none}
  .cards{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:1fr}
  .support-cards{grid-template-columns:1fr}
  .qr-side{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   MOTION LAYER
   Opt-in: without JS the .js class is never set, so nothing is
   hidden and the page renders exactly as it did before.
   ============================================================ */
:root{ --mo-ease:cubic-bezier(.16,1,.3,1); }

/* Reveal targets are pre-hidden in CSS (not JS) so they never flash */
.js .hero .container > *,
.js section > .container > *,
.js .step,
.js .card,
.js .feature{
  opacity:0; transform:translate3d(0,20px,0);
  transition:opacity .7s var(--mo-ease), transform .7s var(--mo-ease);
  transition-delay:calc(var(--mo-i,0) * 80ms);
}
.js .mo-in{ opacity:1 !important; transform:none !important; }

/* Reading progress along the top of the sticky nav */
.mo-progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  background:linear-gradient(90deg,#5B9BFF,var(--blue));
  transform:scaleX(0); transform-origin:left; z-index:999; will-change:transform;
}
.nav{ transition:box-shadow .3s var(--mo-ease), background .3s var(--mo-ease); }
.nav.mo-scrolled{ box-shadow:0 6px 26px rgba(14,27,61,.28); }

/* Nav underline */
.nav-links a{ position:relative; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; border-radius:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:right;
  transition:transform .32s var(--mo-ease);
}
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* Hover polish */
.card, .step, .feature{ transition:transform .35s var(--mo-ease), box-shadow .35s var(--mo-ease); }
.card:hover{ transform:translateY(-6px); box-shadow:0 18px 44px rgba(14,27,61,.16); }
.step:hover .step-icon{ transform:translateY(-3px) scale(1.06); }
.step-icon{ transition:transform .4s var(--mo-ease); }
.btn{ transition:background .25s var(--mo-ease), transform .25s var(--mo-ease), box-shadow .25s var(--mo-ease); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(26,107,234,.28); }
.btn:active{ transform:translateY(0) scale(.985); transition-duration:.08s; }

@media (prefers-reduced-motion:reduce){
  .js .hero .container > *,
  .js section > .container > *,
  .js .step, .js .card, .js .feature{ opacity:1; transform:none; }
  .card:hover, .btn:hover{ transform:none; }
  .mo-progress{ display:none; }
}

/* ============================================================
   CLAYBIRD LABS BADGE — back-link to the studio site
   ============================================================ */
.cb-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  border:1px solid rgba(224,144,106,.42);
  background:rgba(224,144,106,.12);
  color:#F2C3AA; font-weight:650; font-size:.84rem;
  text-decoration:none; white-space:nowrap; line-height:1;
  transition:background .25s var(--mo-ease), border-color .25s var(--mo-ease),
             color .25s var(--mo-ease), transform .25s var(--mo-ease), box-shadow .25s var(--mo-ease);
}
.cb-badge:hover{
  background:rgba(224,144,106,.22); border-color:#E0906A; color:#FDF8F4;
  transform:translateY(-1px); box-shadow:0 8px 20px rgba(180,83,47,.22);
}
.cb-badge svg{ width:18px; height:18px; flex:none; transition:transform .35s var(--mo-ease); }
.cb-badge:hover svg{ transform:translateX(-3px) rotate(-8deg); }

/* Footer variant sits on the dark footer */
.cb-foot{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; color:#C8D2E8; font-size:.9rem; font-weight:600;
  transition:color .25s var(--mo-ease);
}
.cb-foot:hover{ color:#fff; }
.cb-foot svg{ width:20px; height:20px; flex:none; transition:transform .35s var(--mo-ease); }
.cb-foot:hover svg{ transform:translateX(-3px) rotate(-8deg); }

@media (prefers-reduced-motion:reduce){
  .cb-badge:hover{ transform:none; }
  .cb-badge:hover svg, .cb-foot:hover svg{ transform:none; }
}

/* ==========================================================================
   Additions — trust band, coverage grid, waitlist, timed modal
   Palette and tokens are the existing SnapFix ones; only new patterns here.
   ========================================================================== */

/* ---- Trust band ---------------------------------------------------------- */
.trust-band{ background:var(--bg-soft); border-block:1px solid var(--line); padding:34px 0; }
.trust-band .container{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:26px; }
.tb-item{ text-align:center; }
.tb-item b{ display:block; font-size:1.45rem; font-weight:800; color:var(--navy); letter-spacing:-.02em; }
.tb-item span{ display:block; font-size:.86rem; color:var(--muted); margin-top:4px; }

/* ---- Coverage grid ------------------------------------------------------- */
.coverage{ padding:76px 0; background:#fff; }
.cov-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:16px; margin-top:34px; }
.cov{ display:flex; align-items:center; gap:11px; padding:15px 16px; border:1px solid var(--line);
      border-radius:var(--radius); background:#fff; transition:box-shadow .25s var(--mo-ease), transform .25s var(--mo-ease); }
.cov:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.cov svg{ width:22px; height:22px; flex:none; color:var(--blue); }
.cov b{ font-size:.95rem; color:var(--ink); font-weight:600; }

/* ---- Waitlist ------------------------------------------------------------ */
.waitlist{ padding:76px 0; background:var(--bg-soft); border-top:1px solid var(--line); }
.wl-box{ max-width:620px; margin:26px auto 0; background:#fff; border:1px solid var(--line);
         border-radius:var(--radius); box-shadow:var(--shadow); padding:26px; }
.wl-form{ display:grid; gap:11px; }
.wl-row{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.wl-form input, .wl-form select{
  width:100%; padding:13px 14px; font:inherit; font-size:.95rem; color:var(--ink);
  border:1px solid var(--line); border-radius:10px; background:#fff; transition:border-color .2s, box-shadow .2s; }
.wl-form input:focus, .wl-form select:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,107,234,.14); }
.wl-form button{ padding:14px 18px; font:inherit; font-weight:700; font-size:.97rem; color:#fff;
  background:var(--blue); border:0; border-radius:10px; cursor:pointer; transition:background .2s, transform .15s; }
.wl-form button:hover{ background:var(--blue-dark); }
.wl-form button:active{ transform:translateY(1px); }
.wl-form button[disabled]{ opacity:.6; cursor:progress; }
.wl-note{ font-size:.78rem; color:var(--muted); text-align:center; margin:12px 0 0; }
.wl-done{ text-align:center; padding:14px 0; }
.wl-done b{ display:block; font-size:1.1rem; color:var(--navy); margin-bottom:5px; }
.wl-done p{ color:var(--muted); font-size:.9rem; margin:0; }
.wl-err{ color:#B42318; font-size:.85rem; text-align:center; margin:10px 0 0; min-height:1em; }
@media (max-width:560px){ .wl-row{ grid-template-columns:1fr; } }

/* Compact variant used in the hero */
.wl-inline{ display:flex; gap:9px; margin-top:18px; max-width:430px; }
.wl-inline input{ flex:1; padding:13px 14px; font:inherit; font-size:.94rem;
  border:1px solid rgba(255,255,255,.28); border-radius:10px; background:rgba(255,255,255,.10); color:#fff; }
.wl-inline input::placeholder{ color:rgba(255,255,255,.62); }
.wl-inline input:focus{ outline:none; border-color:#fff; background:rgba(255,255,255,.16); }
.wl-inline button{ padding:13px 20px; font:inherit; font-weight:700; font-size:.94rem; white-space:nowrap;
  color:var(--navy); background:#fff; border:0; border-radius:10px; cursor:pointer; }
.wl-inline button:hover{ background:#EAF1FF; }
@media (max-width:560px){ .wl-inline{ flex-direction:column; } }

/* ---- Ratings / store strip ---------------------------------------------- */
.rating-strip{ padding:30px 0; background:#fff; border-top:1px solid var(--line); }
.rs-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 28px; }
.rs-stars{ display:flex; align-items:center; gap:7px; font-size:.9rem; color:var(--muted); }
.rs-stars svg{ width:17px; height:17px; color:#F5A623; }
.rs-sep{ width:1px; height:22px; background:var(--line); }

/* ---- Timed modal --------------------------------------------------------- */
.modal-backdrop{
  position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(14,27,61,.55); opacity:0; pointer-events:none; transition:opacity .3s var(--mo-ease); }
.modal-backdrop.open{ opacity:1; pointer-events:auto; }
.modal{
  position:relative; width:100%; max-width:452px; background:#fff; border-radius:18px; padding:30px 28px 24px;
  box-shadow:0 24px 70px rgba(14,27,61,.30);
  transform:translateY(14px) scale(.98); transition:transform .32s var(--mo-ease); }
.modal-backdrop.open .modal{ transform:none; }
.modal h3{ font-size:1.32rem; font-weight:800; color:var(--navy); letter-spacing:-.02em; margin:0 0 8px; }
.modal p.sub{ color:var(--muted); font-size:.93rem; line-height:1.55; margin:0 0 18px; }
.modal-x{ position:absolute; top:12px; right:12px; width:32px; height:32px; display:grid; place-items:center;
  border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:1.35rem; line-height:1; cursor:pointer; }
.modal-x:hover{ background:var(--bg-soft); color:var(--ink); }
.modal-x:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.modal-badge{ display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.09em;
  color:var(--blue); background:rgba(26,107,234,.10); padding:5px 11px; border-radius:999px; margin-bottom:12px; }
@media (prefers-reduced-motion:reduce){
  .modal-backdrop, .modal{ transition:none; }
  .modal{ transform:none; }
}

/* ==========================================================================
   Contractor / live-agent cards + chat widget
   Uses the existing SnapFix tokens (blue/navy), not the preview's teal.
   ========================================================================== */
.beyond{ padding:76px 0; background:#fff; }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:38px; }
@media (max-width:900px){ .duo{ grid-template-columns:1fr; } }
.big-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius);
           overflow:hidden; display:flex; flex-direction:column; transition:.22s; }
.big-card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
.big-media{ aspect-ratio:16/9; overflow:hidden; background:var(--bg-soft); }
.big-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.big-body{ padding:24px 24px 28px; }
.big-body h3{ font-size:1.3rem; font-weight:800; color:var(--navy); margin:10px 0 10px; letter-spacing:-.02em; }
.big-body p{ color:var(--muted); font-size:.95rem; margin:0; }
.big-body ul{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; }
.big-body li{ display:flex; gap:10px; align-items:flex-start; font-size:.93rem; color:var(--ink); }
.big-body li svg{ width:19px; height:19px; flex:none; color:var(--blue); margin-top:2px; }
.pillchip{ display:inline-block; background:rgba(26,107,234,.10); color:var(--blue); font-size:.7rem;
           font-weight:800; letter-spacing:.06em; padding:5px 11px; border-radius:999px; }
.agent-media{ background:linear-gradient(135deg,var(--navy),); display:flex; align-items:center; padding:20px; }
.agent-media{ background:linear-gradient(135deg,#0E1B3D,#1A6BEA); }
.chat-demo{ display:grid; gap:8px; width:100%; }
.bubble{ font-size:.84rem; line-height:1.45; padding:9px 13px; border-radius:14px; max-width:86%; }
.bubble.them{ background:rgba(255,255,255,.95); color:var(--ink); justify-self:end; border-bottom-right-radius:5px; }
.bubble.me{ background:rgba(255,255,255,.16); color:#fff; justify-self:start; border-bottom-left-radius:5px; }
.bubble.sys{ background:transparent; color:rgba(255,255,255,.85); font-size:.75rem; justify-self:center;
             border:1px dashed rgba(255,255,255,.45); border-radius:999px; padding:5px 12px; }

.chat-fab{ position:fixed; right:20px; bottom:20px; z-index:110; width:58px; height:58px; border-radius:50%;
           border:0; cursor:pointer; background:var(--blue); color:#fff; display:grid; place-items:center;
           box-shadow:0 10px 30px rgba(14,27,61,.28); transition:.2s; }
.chat-fab:hover{ background:var(--blue-dark); transform:scale(1.05); }
.chat-fab svg{ width:26px; height:26px; }
.chat-panel{ position:fixed; right:20px; bottom:88px; z-index:110; width:min(384px,calc(100vw - 40px));
             height:min(548px,calc(100vh - 130px)); background:#fff; border-radius:18px; overflow:hidden;
             box-shadow:0 26px 70px rgba(14,27,61,.30); display:none; flex-direction:column; }
.chat-panel.open{ display:flex; }
.chat-head{ background:var(--navy); color:#fff; padding:15px 18px; display:flex; align-items:center; gap:10px; }
.chat-head b{ font-size:.97rem; }
.chat-head span{ font-size:.75rem; color:#9DB0C4; display:block; }
.chat-head button{ margin-left:auto; background:transparent; border:0; color:#9DB0C4; font-size:1.35rem; cursor:pointer; }
.chat-log{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--bg-soft); }
.msg{ font-size:.89rem; line-height:1.5; padding:10px 13px; border-radius:14px; max-width:84%; white-space:pre-wrap; }
.msg.bot{ background:#fff; border:1px solid var(--line); color:var(--ink); align-self:flex-start; border-bottom-left-radius:5px; }
.msg.user{ background:var(--blue); color:#fff; align-self:flex-end; border-bottom-right-radius:5px; }
.msg.note{ align-self:center; background:transparent; border:1px dashed var(--line); color:var(--muted);
           font-size:.78rem; border-radius:999px; padding:6px 13px; }
.chat-in{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:#fff; }
.chat-in input{ flex:1; padding:11px 14px; border:1px solid var(--line); border-radius:999px; font:inherit; font-size:.92rem; }
.chat-in input:focus{ outline:none; border-color:var(--blue); }
.chat-in button{ background:var(--blue); color:#fff; border:0; border-radius:50%; width:40px; height:40px; cursor:pointer; flex:none; }
.chat-in button:disabled{ opacity:.5; cursor:default; }
.esc{ display:grid; gap:8px; padding:12px; border-top:1px solid var(--line); background:#FFFDF5; }
.esc input{ padding:10px 13px; border:1px solid var(--line); border-radius:10px; font:inherit; font-size:.89rem; }
.esc button{ padding:11px; border:0; border-radius:10px; background:var(--navy); color:#fff; font:inherit; font-weight:700; cursor:pointer; }
.esc p{ font-size:.77rem; color:var(--muted); margin:0; }
@media (prefers-reduced-motion:reduce){ .chat-fab,.big-card{ transition:none; } }