/* ==========================================================================
   StayMatcher — customer-facing site
   Built to StayMatcher Brand Guidelines (Social & Communications) v1.0
   ========================================================================== */

:root{
  /* palette */
  --ink:#0A0A0A;
  --navy:#19276E;
  --blue:#4A69FF;
  --blue-deep:#3A57E8;
  --blue-mid:#3C6CE8;
  --mint:#16F3AD;
  --mint-dark:#0FDD9B;
  --slate:#5A6373;
  --surface:#F5F5F5;
  --offwhite:#FAFAFA;
  --white:#FFFFFF;
  --line:#E8EAF0;
  --line-soft:#E3E7F5;
  --tint:#EEF1FF;

  /* footer — single source of truth. Swap to var(--navy) for AA-compliant contrast. */
  --footer-bg:#4869FB;

  --r-card:24px;
  --r-pill:40px;
  --pad-card:40px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--surface);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
main{flex:1}
img,svg{display:block;max-width:100%}
a{color:var(--blue-deep);text-decoration:none}
/* a:hover{text-decoration:underline} */
:focus-visible{outline:3px solid var(--blue-deep);outline-offset:3px;border-radius:6px}
::selection{background:var(--mint);color:var(--ink)}

.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:12px 20px;z-index:99}
.skip:focus{left:12px;top:12px}

.wrap{width:min(1180px,100% - 48px);margin-inline:auto}
.wrap-narrow{width:min(720px,100% - 40px);margin-inline:auto}
.wrap-tight{width:min(480px,100% - 40px);margin-inline:auto}
@media(max-width:600px){.wrap{width:min(1180px,100% - 32px)}}

/* ---------- typography ---------- */
h1,h2,h3,h4,.num,.display{
  font-family:'Poppins',sans-serif;font-weight:600;line-height:1.12;letter-spacing:-0.02em;
}
h1{font-size:clamp(2.35rem,5.6vw,4.1rem);font-weight:700}
h2{font-size:clamp(1.8rem,3.6vw,2.85rem)}
h3{font-size:1.18rem;line-height:1.3;letter-spacing:-0.01em}
h4{font-size:1rem}
.lede{font-size:clamp(1.03rem,1.5vw,1.25rem);color:var(--slate);line-height:1.5;max-width:34em}
.small{font-size:.92rem;color:var(--slate)}
.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--slate)}
.hl{color:var(--blue)}
.center{text-align:center}
.center .lede{margin-inline:auto}

.pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-soft);
  border-radius:var(--r-pill);padding:8px 18px;background:var(--white)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);flex:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:1rem;
  padding:17px 32px;border-radius:var(--r-pill);border:1px solid transparent;
  cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease;
  text-decoration:none;white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{background:var(--mint);color:var(--ink)}      /* Ink on Mint = 13.6:1 */
.btn-primary:hover{background:var(--mint-dark)}
.btn-dark{background:var(--ink);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-soft)}
.btn-ghost:hover{background:var(--white)}
.btn-sm{padding:11px 22px;font-size:.92rem}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn-row-end{justify-content:flex-end}
.btn-row-split{justify-content:space-between}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:rgba(245,245,245,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0}
.brand{display:flex;align-items:center;gap:11px}
.brand:hover{text-decoration:none}
.brand img.mark{height:24px;width:auto}
.brand img.word{height:21px;width:auto}
.nav{display:flex;align-items:center;gap:28px}
.nav a{color:var(--ink);font-size:.95rem;font-weight:500}
.nav a:hover{color:var(--blue-deep)}
@media(max-width:780px){.nav .hide-sm{display:none}.nav{gap:16px}}

/* ---------- sections ---------- */
.sec{padding:clamp(60px,8vw,110px) 0}
.sec-tight{padding-top:0}
.sec-head{max-width:46rem;margin-bottom:clamp(34px,5vw,58px)}
.sec-head .eyebrow{display:block;margin-bottom:15px}
.sec-head h2{margin-bottom:16px}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,6.5vw,92px) 0 clamp(52px,6.5vw,92px)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,70px);align-items:center}
.hero h1{margin:24px 0 20px}
.hero .lede{margin-bottom:32px}
.hero-micro{margin-top:19px;font-size:.92rem;color:var(--slate)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}.hero-art{order:-1;max-width:420px}}

.venn{width:100%;max-width:440px;margin-inline:auto}
.venn-labels{display:flex;justify-content:space-between;gap:12px;max-width:440px;margin:16px auto 0}
.venn-labels span{font-size:.8rem;font-weight:600;color:var(--slate)}
.venn-mid{text-align:center;margin-top:9px;font-size:.78rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--navy)}
.c-l{transform:translateX(22px)}
.c-r{transform:translateX(-22px)}
.lens{opacity:0}
@media(prefers-reduced-motion:no-preference){
  .c-l{animation:slL 1.05s cubic-bezier(.22,1,.36,1) .1s forwards}
  .c-r{animation:slR 1.05s cubic-bezier(.22,1,.36,1) .1s forwards}
  .lens{animation:fIn .6s ease .9s forwards}
}
@media(prefers-reduced-motion:reduce){.c-l,.c-r{transform:none}.lens{opacity:1}}
@keyframes slL{to{transform:translateX(0)}}
@keyframes slR{to{transform:translateX(0)}}
@keyframes fIn{to{opacity:1}}

/* ---------- request quotes grid ---------- */
.reqs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.req{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  padding:32px 30px;display:flex;flex-direction:column;gap:15px}
.req p{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.05rem;
  line-height:1.35;letter-spacing:-0.01em}
.req .tag{font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.req .rule{height:3px;width:32px;background:var(--mint);border-radius:2px}
@media(max-width:960px){.reqs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.reqs{grid-template-columns:1fr}}
.reqs-foot{margin-top:32px;font-size:1.02rem;color:var(--slate);max-width:42em}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--pad-card)}
.num{font-size:2.5rem;font-weight:700;color:var(--blue);line-height:1;margin-bottom:20px;display:block}
.step h3{margin-bottom:9px}
.step p{font-size:.95rem;color:var(--slate)}
@media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.steps{grid-template-columns:1fr}.step{padding:30px}}

/* ---------- promise strip ---------- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--offwhite)}
.strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.strip-item{background:var(--offwhite);padding:32px 28px;display:flex;gap:16px;align-items:flex-start}
.strip-item p{font-size:.97rem;font-weight:500;line-height:1.45}
@media(max-width:820px){.strip-grid{grid-template-columns:1fr}}
.ico{width:44px;height:44px;border-radius:20px;background:var(--tint);display:grid;place-items:center;flex:none}
.ico svg{width:22px;height:22px;stroke:var(--blue);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ico img{width:22px;height:22px;stroke:var(--blue);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- dark band ---------- */
.band{background:linear-gradient(135deg,var(--navy) 0%,var(--blue-mid) 100%);color:#fff}
.band h2,.band h3{color:#fff}
.band .eyebrow{color:rgba(255,255,255,.72)}
.band .lede{color:rgba(255,255,255,.83)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.col{border-radius:var(--r-card);padding:var(--pad-card)}
.col-a{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.col-b{background:rgba(255,255,255,.13);border:1px solid rgba(22,243,173,.42)}
.col .eyebrow{display:block;margin-bottom:24px}
.col ul{list-style:none;display:flex;flex-direction:column;gap:19px}
.col li{display:flex;gap:14px;align-items:flex-start;font-size:1rem;line-height:1.45}
.mark-i{flex:none;width:22px;height:22px;margin-top:1px}
.mark-i svg{width:22px;height:22px;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.col-a .mark-i svg{stroke:rgba(255,255,255,.5)}
.col-b .mark-i svg{stroke:var(--mint)}
.col-a li{color:rgba(255,255,255,.72)}
.band-note{margin-top:32px;font-size:1rem;color:rgba(255,255,255,.78);max-width:44em}
@media(max-width:820px){.compare{grid-template-columns:1fr}.col{padding:30px}}

/* ---------- benefit cards (stay provider) ---------- */
.bens{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ben{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:34px 32px}
.ben.accent{border-color:rgba(22,243,173,.55);background:#F4FFFB}
.ben .ico{margin-bottom:20px}
.ben h3{margin-bottom:9px}
.ben p{font-size:.96rem;color:var(--slate)}
@media(max-width:760px){.bens{grid-template-columns:1fr}}

/* ---------- generic card / panel ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--pad-card)}
.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(30px,4.5vw,52px)}
.final{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(42px,6vw,72px);text-align:center}
.final h2{margin-bottom:16px}
.final .lede{margin:0 auto 30px}
.final-micro{margin-top:20px;font-size:.93rem;color:var(--slate)}

/* ---------- forms ---------- */
.field{margin-bottom:22px}
.field:last-child{margin-bottom:0}
label,.lbl{display:block;font-size:.9rem;font-weight:600;margin-bottom:8px;color:var(--ink)}
.hint{font-size:.85rem;color:var(--slate);margin-top:7px;line-height:1.4}
.hint-above{font-size:.85rem;color:var(--slate);margin:-2px 0 10px;line-height:1.4}
input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=time],input[type=number],input[type=password],select,textarea{
  width:100%;font-family:'Inter',sans-serif;font-size:1rem;color:var(--ink);
  background:var(--white);border:1px solid var(--line-soft);border-radius:12px;
  padding:14px 16px;transition:border-color .15s ease;
}
input:focus,select:focus,textarea:focus{border-color:var(--blue-deep);outline:none;
  box-shadow:0 0 0 3px rgba(58,87,232,.13)}
input::placeholder,textarea::placeholder{color:#A5ADBC}
textarea{min-height:96px;resize:vertical}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:640px){.grid-2{grid-template-columns:1fr}.grid-4{grid-template-columns:repeat(2,1fr)}}

/* choice chips */
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--line-soft);background:var(--white);border-radius:var(--r-pill);
  padding:12px 22px;font-size:.95rem;font-weight:500;cursor:pointer;
  transition:all .15s ease;
}
.choice span:hover{border-color:var(--blue-deep)}
.choice input:checked + span{background:var(--navy);border-color:var(--navy);color:#fff}
.choice input:focus-visible + span{outline:3px solid var(--blue-deep);outline-offset:2px}

/* stay-type tiles */
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:760px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:460px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{position:relative}
.tile input{position:absolute;opacity:0;width:0;height:0}
.tile span{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  border:1px solid var(--line-soft);background:var(--white);border-radius:16px;
  padding:20px 10px;font-size:.88rem;font-weight:500;cursor:pointer;text-align:center;
  transition:all .15s ease;height:100%;
}
.tile span svg{width:24px;height:24px;stroke:var(--slate);stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s ease}
.tile span:hover{border-color:var(--blue-deep)}
.tile input:checked + span{background:var(--tint);border-color:var(--blue);color:var(--navy)}
.tile input:checked + span svg{stroke:var(--blue)}
.tile input:focus-visible + span{outline:3px solid var(--blue-deep);outline-offset:2px}

/* budget slider */
.slider-row{display:flex;align-items:center;gap:18px}
.slider-row .cap{font-size:.9rem;color:var(--slate);white-space:nowrap}
.slider-val{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.5rem;
  color:var(--navy);white-space:nowrap;min-width:6.5em;text-align:right}
input[type=range]{-webkit-appearance:none;appearance:auto;width:100%;height:6px;
  background:var(--line-soft);border-radius:3px;outline:none;padding:0;border:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:50%;background:var(--white);
  border:3px solid var(--blue);cursor:pointer}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--white);border:3px solid var(--blue);cursor:pointer}

/* checkbox */
.check{display:flex;flex-wrap: wrap;gap:12px;align-items:flex-start;font-size:.93rem;
  color:var(--slate);line-height:1.45;cursor:pointer;font-weight:400}
.check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--navy);cursor:pointer}

/* validation */
.err{color:#C1121F;font-size:.85rem;margin-top:7px;display:none}
.err.show{display:block}
input.invalid,select.invalid{border-color:#C1121F}

/* ---------- step progress ---------- */
.prog{margin-bottom:30px}
.prog-bar{height:5px;background:var(--line-soft);border-radius:3px;overflow:hidden}
.prog-fill{height:100%;background:var(--mint);border-radius:3px;transition:width .35s cubic-bezier(.22,1,.36,1)}
.prog-meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px;gap:12px}
.prog-meta .step-name{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.02rem}
.prog-meta .step-count{font-size:.85rem;color:var(--slate);white-space:nowrap}
.fstep{display:none}
.fstep.active{display:block;animation:stepIn .3s ease}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fstep h2{font-size:1.6rem;margin-bottom:8px}
.fstep .sub{color:var(--slate);font-size:.97rem;margin-bottom:26px}
.form-nav{margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}

/* ---------- status timeline ---------- */
.tl{list-style:none;display:flex;flex-direction:column;gap:0}
.tl li{display:flex;gap:16px;padding:16px 0;position:relative}
.tl li:not(:last-child)::before{content:"";position:absolute;left:17px;top:46px;bottom:-6px;
  width:2px;background:var(--line-soft)}
.tl .bubble{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line-soft)}
.tl .bubble svg{width:18px;height:18px;stroke:var(--slate);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.tl .t{font-weight:600;font-size:1rem}
.tl .s{font-size:.87rem;color:var(--slate);margin-top:2px}
.tl li.done .bubble{background:#E6FBF3;border-color:rgba(22,243,173,.6)}
.tl li.done .bubble svg{stroke:#08A972}
.tl li.now .bubble{background:var(--tint);border-color:var(--blue)}
.tl li.now .bubble svg{stroke:var(--blue)}
.tl li.wait .t,.tl li.wait .s{color:var(--slate)}
.notice{display:flex;gap:13px;align-items:flex-start;background:var(--tint);
  border:1px solid var(--line-soft);border-radius:14px;padding:16px 18px;
  font-size:.92rem;line-height:1.45;color:var(--navy)}
.notice svg{width:19px;height:19px;flex:none;margin-top:2px;stroke:var(--blue);
  stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- auth pages ---------- */
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 74px)}
.auth-brand{background:var(--white);padding:clamp(36px,6vw,72px);display:flex;
  flex-direction:column;justify-content:center;border-right:1px solid var(--line)}
.auth-brand img{height:auto;width:190px;margin-bottom:30px}
.auth-brand h1{font-size:clamp(1.7rem,2.6vw,2.35rem);margin-bottom:16px}
.auth-brand p{color:var(--slate);max-width:26em;margin-bottom:14px}
.auth-form{padding:clamp(36px,6vw,72px);display:flex;flex-direction:column;justify-content:center}
/* .auth-form .inner{width:min(380px,100%);margin-inline:auto} */
.auth-form .inner{width: 500px;margin-right: auto;padding-left: 100px;}
@media(max-width:860px){.auth{grid-template-columns:1fr;min-height:0}
  .auth-brand{border-right:none;border-bottom:1px solid var(--line);padding-block:44px}}
.btn-google{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-pill);
  padding:15px 24px;font-size:.98rem;font-weight:600;color:var(--ink);cursor:pointer;
  transition:border-color .15s ease}
.btn-google:hover{border-color:var(--slate);text-decoration:none}
.btn-google svg{width:19px;height:19px}
.divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--slate);font-size:.85rem}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line-soft)}

/* ---------- confirmation panels ---------- */
.confirm{text-align:center;max-width:520px;margin-inline:auto}
.confirm .badge{width:64px;height:64px;border-radius:50%;background:#E6FBF3;
  display:grid;place-items:center;margin:0 auto 24px}
.confirm .badge svg{width:30px;height:30px;stroke:#08A972;stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.confirm h1{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:14px}
.confirm p{color:var(--slate);margin-bottom:10px}

/* ---------- footer (matches live site) ---------- */
.ftr{background:var(--footer-bg);color:#fff;padding:44px 0 24px;margin-top:auto}
.ftr a{color:#fff;font-weight:500}
.ftr a:hover{color:var(--mint);text-decoration:none}
.ftr-in{display:flex;justify-content:space-between;align-items:flex-start;
  gap:36px;flex-wrap:wrap;padding-bottom:30px}
.ftr-word{height:26px;width:auto;margin-bottom:20px}
.ftr-social{display:flex;gap:11px}
.ftr-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.42);
  display:grid;place-items:center}
.ftr-social a:hover{border-color:var(--mint);background:rgba(255,255,255,.1)}
.ftr-social svg{width:17px;height:17px;fill:#fff}
.ftr-social a:hover svg{fill:var(--mint)}
.ftr-menu{display:flex;flex-direction:column;gap:13px;text-align:right;font-size:1rem}
@media(max-width:640px){.ftr-menu{text-align:left}.ftr-in{gap:28px}}
.ftr-bot{border-top:1px solid rgba(255,255,255,.32);padding-top:20px;text-align:center;
  font-size:.94rem;font-weight:500;color:#fff}
.ftr-bot .op{display:block;margin-top:7px;font-size:.88rem;color:rgba(255,255,255,.85)}

/* ---------- chat bubble ---------- */
.chat-fab{position:fixed;right:22px;bottom:22px;z-index:50;width:58px;height:58px;
  border-radius:50%;background:var(--mint);border:none;cursor:pointer;
  display:grid;place-items:center;transition:transform .18s ease}
.chat-fab:hover{transform:scale(1.06)}
.chat-fab svg{width:26px;height:26px;stroke:var(--ink);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}