/* ============================================================
   QUEUELY — shared stylesheet
   Designed & built by ARTistic AI Studios
   ------------------------------------------------------------
   ink        #16193A   deep indigo-ink (headings, dark bands)
   indigo     #4B3DF0   primary action
   indigo-deep#3527C4   hover / gradient stop
   indigo-tint#EDEBFF   soft fills
   mint       #35E2B2   accent fills, success
   mint-deep  #0A7457   AA-safe accent text
   mint-tint  #E0FAF1   soft accent fills
   paper      #FAFAFE   page ground
   body       #4A4F6D   body text
   line       #E6E7F3   hairlines & card borders
   Type: Bricolage Grotesque (display) / Outfit (body)
         Spline Sans Mono (times, labels, data chips)
   Radius: 20 cards · 12 controls · 999 pills
   ============================================================ */

:root{
  --ink:#16193A;
  --ink-soft:#232752;
  --indigo:#4B3DF0;
  --indigo-deep:#3527C4;
  --indigo-tint:#EDEBFF;
  --indigo-ghost:#F5F4FF;
  --mint:#35E2B2;
  --mint-deep:#0A7457;
  --mint-tint:#E0FAF1;
  --paper:#FAFAFE;
  --card:#FFFFFF;
  --body:#4A4F6D;
  --muted:#6A6F8E;
  --line:#E6E7F3;
  --on-ink:#C9CCE8;
  --wa:#1FA855;

  --font-display:"Bricolage Grotesque", "Outfit", sans-serif;
  --font-body:"Outfit", system-ui, sans-serif;
  --font-mono:"Spline Sans Mono", ui-monospace, monospace;

  --s1:0.25rem; --s2:0.5rem; --s3:0.75rem; --s4:1rem;
  --s5:1.5rem;  --s6:2rem;   --s7:3rem;    --s8:4.5rem; --s9:6.5rem;

  --section:var(--s8);        /* one vertical rhythm for every band */
  --track-label:.1em;         /* one tracking token for small-caps labels */

  --r-card:20px;
  --r-ctrl:12px;
  --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(22,25,58,.05), 0 2px 8px rgba(22,25,58,.05);
  --shadow-md:0 2px 6px rgba(22,25,58,.06), 0 12px 32px rgba(22,25,58,.10);
  --shadow-lg:0 4px 12px rgba(22,25,58,.08), 0 28px 64px rgba(53,39,196,.16);

  --nav-h:70px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

body{
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--body);
  background:var(--paper);
  overflow-x:clip;
  font-weight:400;
}

img,svg{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
a{ color:var(--indigo); text-decoration:none; }
ul{ list-style:none; }

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.12;
  letter-spacing:-0.02em;
  font-weight:700;
  text-wrap:balance;
}
h1{ font-size:clamp(2.5rem, 5.6vw, 4.05rem); font-weight:750; line-height:1.06; letter-spacing:-0.025em; }
h2{ font-size:clamp(1.85rem, 3.4vw, 2.7rem); line-height:1.1; }
h3{ font-size:1.25rem; line-height:1.3; }
p,li,blockquote{ text-wrap:pretty; }

:focus-visible{
  outline:3px solid var(--indigo);
  outline-offset:3px;
  border-radius:4px;
}
.on-dark :focus-visible,
.chat-panel :focus-visible{
  outline-color:var(--mint);
}

::selection{ background:var(--indigo-tint); color:var(--indigo-deep); }

::placeholder{ color:#9CA1C4; opacity:1; }

/* fixed-width figures wherever numbers sit next to numbers */
.price-line,.bill-note,.cmp-price,.cmp td,.cmp tbody th,
.stat-cell b,.prob-card .stat,.tile,.float-chip b,.case-metrics,
.mk-time,.mk-chip,.step-eta,.save-pill,.t-metric,.rm-tag,.tl-year,
.ns-result,.slot,.hero-proof strong{
  font-variant-numeric:tabular-nums;
}

.wrap{
  width:min(1160px, 100% - 2.5rem);
  margin-inline:auto;
}
@media (max-width:520px){
  .wrap{ width:calc(100% - 2.25rem); }
}

[id]{ scroll-margin-top:calc(var(--nav-h) + 16px); }

/* ---------- shared atoms ---------- */

.kicker{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--indigo-deep);
  background:var(--indigo-ghost);
  border:1px solid var(--indigo-tint);
  border-radius:var(--r-pill);
  padding:.42em 1em;
  margin-bottom:var(--s4);
}
.kicker::before{
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background:var(--mint);
  flex:none;
}
.kicker.mint{
  color:var(--mint-deep);
  background:var(--mint-tint);
  border-color:#C4F0E1;
}
.kicker.mint::before{ background:var(--indigo); }

.section-head{
  max-width:640px;
  margin-bottom:var(--s7);
}
.section-head.center{
  margin-inline:auto;
  text-align:center;
}
.section-head p{
  margin-top:var(--s4);
  font-size:1.125rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1rem;
  letter-spacing:-0.01em;
  padding:.85em 1.7em;
  border-radius:var(--r-ctrl);
  border:1.5px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--indigo);
  color:#fff;
  box-shadow:0 8px 20px rgba(75,61,240,.28);
}
.btn-primary:hover{
  background:var(--indigo-deep);
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(75,61,240,.34);
}
.btn:active{ transform:translateY(1px) scale(.99); transition-duration:.08s; }
.btn-primary:active{ background:var(--indigo-deep); box-shadow:0 4px 12px rgba(75,61,240,.24); }
.btn-ghost{
  background:var(--card);
  color:var(--ink);
  border-color:var(--line);
  box-shadow:var(--shadow-sm);
}
.btn-ghost:hover{
  border-color:var(--indigo);
  color:var(--indigo-deep);
  transform:translateY(-2px);
}
.btn-ghost:active{ box-shadow:none; }
.btn-mint{
  background:var(--mint);
  color:var(--ink);
  box-shadow:0 8px 20px rgba(12,138,103,.25);
}
.btn-mint:hover{
  background:#4BEDC0;
  transform:translateY(-2px);
}
.btn-mint:active{ box-shadow:0 4px 12px rgba(12,138,103,.2); }
.btn .arrow{ transition:transform .18s ease; }
.btn:hover .arrow{ transform:translateX(3px); }

.f-more{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-family:var(--font-display);
  font-weight:600;
  color:var(--indigo-deep);
  margin-top:var(--s4);
}
.f-more .arrow{ transition:transform .18s ease; }
.f-more:hover .arrow{ transform:translateX(3px); }

/* ---------- scroll reveal ---------- */

.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.2,.65,.25,1), transform .6s cubic-bezier(.2,.65,.25,1);
}
.reveal.in{
  opacity:1;
  transform:none;
}
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }

/* ============================================================
   NAV
   ============================================================ */

.nav{
  position:sticky;
  top:0;
  z-index:120;
  background:rgba(250,250,254,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.nav.scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 6px 24px rgba(22,25,58,.06);
}
.nav-inner{
  height:var(--nav-h);
  display:flex;
  align-items:center;
  gap:var(--s5);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-display);
  font-weight:750;
  font-size:1.35rem;
  letter-spacing:-0.02em;
  color:var(--ink);
}
.brand svg{ width:30px; height:30px; flex:none; }
.brand:hover{ color:var(--indigo-deep); }

.nav-menu{
  display:flex;
  align-items:center;
  gap:var(--s2);
  margin-left:auto;
}
.nav-menu a{
  font-weight:500;
  font-size:.98rem;
  color:var(--body);
  padding:.5em .85em;
  border-radius:var(--r-pill);
  transition:color .15s ease, background .15s ease;
}
.nav-menu a:hover{
  color:var(--indigo-deep);
  background:var(--indigo-ghost);
}
.nav-menu a[aria-current="page"]{
  color:var(--indigo-deep);
  background:var(--indigo-ghost);
  font-weight:600;
}
.nav-cta{
  display:flex;
  align-items:center;
  gap:var(--s3);
}
.nav-cta .signin{
  font-weight:500;
  font-size:.98rem;
  color:var(--body);
  padding:.5em .6em;
}
.nav-cta .signin:hover{ color:var(--indigo-deep); }
.nav-cta .btn{ padding:.62em 1.3em; font-size:.95rem; }

.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:var(--r-ctrl);
  align-items:center;
  justify-content:center;
  border:1.5px solid var(--line);
  background:var(--card);
  margin-left:auto;
}
.nav-toggle .bars{
  position:relative;
  width:18px;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:background .2s ease;
}
.nav-toggle .bars::before,
.nav-toggle .bars::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .25s ease, top .25s ease;
}
.nav-toggle .bars::before{ top:-6px; }
.nav-toggle .bars::after{ top:6px; }
.menu-open .nav-toggle .bars{ background:transparent; }
.menu-open .nav-toggle .bars::before{ top:0; transform:rotate(45deg); }
.menu-open .nav-toggle .bars::after{ top:0; transform:rotate(-45deg); }

@media (max-width:900px){
  .nav-menu,
  .nav-cta .signin{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-cta{ margin-left:0; }
  .menu-open .nav-menu{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:.25rem;
    position:absolute;
    top:calc(var(--nav-h) + 8px);
    left:1rem;
    right:1rem;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    padding:var(--s4);
    box-shadow:var(--shadow-lg);
  }
  .menu-open .nav-menu a{
    padding:.8em 1em;
    border-radius:var(--r-ctrl);
    font-size:1.05rem;
  }
}
@media (max-width:420px){
  .nav-cta .btn{ padding:.55em 1em; font-size:.9rem; }
}

/* ============================================================
   HERO (homepage) + PAGE HERO (inner pages)
   ============================================================ */

.hero{
  position:relative;
  padding:calc(var(--s7) + 1rem) 0 var(--section);
  background:
    radial-gradient(52rem 30rem at 82% -10%, rgba(75,61,240,.09), transparent 60%),
    radial-gradient(40rem 26rem at -12% 30%, rgba(53,226,178,.11), transparent 60%),
    var(--paper);
  overflow:clip;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}
.hero-copy .kicker{ margin-bottom:var(--s5); }
.hero-copy h1 .tick{
  position:relative;
  z-index:0;
  white-space:nowrap;
}
.hero-copy h1 .tick::after{
  content:"";
  position:absolute;
  left:2%;
  bottom:.06em;
  width:96%;
  height:.3em;
  background:linear-gradient(90deg, var(--mint), #7FF0D2);
  border-radius:var(--r-pill);
  z-index:-1;
  transform:scaleX(0);
  transform-origin:left center;
  animation:underline-grow .7s .5s cubic-bezier(.2,.65,.25,1) forwards;
}
@keyframes underline-grow{ to{ transform:scaleX(1); } }
.hero-copy .lede{
  margin-top:var(--s5);
  font-size:1.2rem;
  max-width:33em;
}
.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3);
  margin-top:var(--s6);
}
.hero-note{
  margin-top:var(--s4);
  font-size:.9rem;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:.5em;
}
.hero-note svg{ width:15px; height:15px; color:var(--mint-deep); flex:none; }
.hero-proof{
  margin-top:var(--s6);
  display:flex;
  align-items:center;
  gap:var(--s4);
}
.avatars{ display:flex; }
.avatars span{
  width:38px;
  height:38px;
  border-radius:50%;
  border:2.5px solid var(--paper);
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.8rem;
  color:#fff;
  margin-left:-10px;
}
.avatars span:first-child{ margin-left:0; }
.av1{ background:linear-gradient(135deg,#4B3DF0,#7A6FF5); }
.av2{ background:linear-gradient(135deg,#0C8A67,#35E2B2); color:var(--ink); }
.av3{ background:linear-gradient(135deg,#232752,#4A4F6D); }
.av4{ background:linear-gradient(135deg,#3527C4,#4B3DF0); }
.hero-proof p{
  font-size:.92rem;
  line-height:1.45;
  color:var(--muted);
  max-width:19em;
}
.hero-proof strong{ color:var(--ink); font-weight:600; }
.stars{
  display:inline-flex;
  gap:2px;
  vertical-align:-2px;
  margin-right:.35em;
}
.stars svg{ width:14px; height:14px; color:#F5B93D; }

/* inner-page hero */
.page-hero{
  position:relative;
  padding:calc(var(--s7) + .5rem) 0 var(--s7);
  background:
    radial-gradient(46rem 26rem at 80% -18%, rgba(75,61,240,.09), transparent 60%),
    radial-gradient(36rem 22rem at -10% 50%, rgba(53,226,178,.10), transparent 60%),
    var(--paper);
  border-bottom:1px solid var(--line);
  overflow:clip;
}
.page-hero-inner{
  max-width:780px;
  margin-inline:auto;
  text-align:center;
}
.page-hero h1{
  font-size:clamp(2.35rem, 5vw, 3.5rem);
}
.page-hero .lede{
  margin:var(--s4) auto 0;
  font-size:1.18rem;
  max-width:38em;
}
.page-hero .hero-ctas{ justify-content:center; }
.page-hero .hero-note{ justify-content:center; }

/* ---------- the mockup (signature element) ---------- */

.mockup-wrap{
  position:relative;
  max-width:480px;
  margin-inline:auto;
  width:100%;
}
.mockup{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.mk-topbar{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:.8rem 1.1rem;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, #FCFCFF, #F7F7FC);
}
.mk-dots{ display:flex; gap:6px; }
.mk-dots i{
  width:10px; height:10px;
  border-radius:50%;
  background:var(--line);
}
.mk-dots i:first-child{ background:#F0A9A0; }
.mk-dots i:nth-child(2){ background:#F5D488; }
.mk-dots i:last-child{ background:#9FE8CB; }
.mk-url{
  flex:1;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--muted);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:.3em 1em;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mk-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.25rem .8rem;
}
.mk-title b{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.1rem;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.mk-title span{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--muted);
  letter-spacing:var(--track-label);
}
.mk-chips{ display:flex; gap:.4rem; }
.mk-chip{
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:500;
  padding:.35em .8em;
  border-radius:var(--r-pill);
  background:var(--indigo-ghost);
  color:var(--indigo-deep);
  border:1px solid var(--indigo-tint);
  white-space:nowrap;
}
.mk-chip.mint{
  background:var(--mint-tint);
  color:var(--mint-deep);
  border-color:#C4F0E1;
}
.mk-day{
  padding:.35rem 1.25rem 1.25rem;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.mk-row{
  display:grid;
  grid-template-columns:3.2rem 1fr;
  gap:.7rem;
  align-items:stretch;
}
.mk-time{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--muted);
  padding-top:.65rem;
  text-align:right;
}
.mk-appt{
  position:relative;
  display:flex;
  align-items:center;
  gap:.7rem;
  background:var(--indigo-ghost);
  border:1px solid var(--indigo-tint);
  border-radius:14px;
  padding:.6rem .8rem;
}
.mk-appt::before{
  content:"";
  width:4px;
  align-self:stretch;
  border-radius:var(--r-pill);
  background:var(--indigo);
  flex:none;
}
.mk-appt.tint-mint{
  background:var(--mint-tint);
  border-color:#CDF2E4;
}
.mk-appt.tint-mint::before{ background:var(--mint-deep); }
.mk-appt.tint-slate{
  background:#F3F4FA;
  border-color:var(--line);
}
.mk-appt.tint-slate::before{ background:var(--muted); }
.mk-appt-copy{ min-width:0; flex:1; }
.mk-appt-copy b{
  display:block;
  font-weight:600;
  font-size:.86rem;
  color:var(--ink);
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mk-appt-copy small{
  font-family:var(--font-mono);
  font-size:.66rem;
  color:var(--muted);
  letter-spacing:.02em;
}
.mk-flag{
  font-family:var(--font-mono);
  font-size:.62rem;
  font-weight:600;
  color:var(--mint-deep);
  background:#fff;
  border:1px solid #C4F0E1;
  border-radius:var(--r-pill);
  padding:.25em .7em;
  flex:none;
}
.mk-flag.indigo{
  color:var(--indigo-deep);
  border-color:var(--indigo-tint);
}
.mk-slot-cell{ position:relative; min-height:52px; }
.mk-free{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  border:1.5px dashed #C9CBE4;
  border-radius:14px;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--muted);
  letter-spacing:.05em;
  animation:free-cycle 9s infinite;
}
.mk-new{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(.92);
  animation:booked-cycle 9s infinite;
}
@keyframes free-cycle{
  0%, 30%   { opacity:1; }
  36%, 92%  { opacity:0; }
  100%      { opacity:1; }
}
@keyframes booked-cycle{
  0%, 31%   { opacity:0; transform:scale(.92); }
  38%, 92%  { opacity:1; transform:scale(1); }
  100%      { opacity:0; transform:scale(.92); }
}
.mk-toast{
  position:absolute;
  top:56px;
  right:12px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:.6rem;
  background:var(--ink);
  color:#fff;
  border-radius:14px;
  padding:.6rem .9rem;
  box-shadow:var(--shadow-md);
  opacity:0;
  transform:translateY(-10px);
  animation:toast-cycle 9s infinite;
  max-width:calc(100% - 24px);
}
.mk-toast .bell{
  width:30px; height:30px;
  border-radius:10px;
  background:var(--mint);
  display:grid;
  place-items:center;
  flex:none;
}
.mk-toast .bell svg{ width:16px; height:16px; color:var(--ink); }
.mk-toast b{
  display:block;
  font-size:.8rem;
  font-weight:600;
  line-height:1.2;
}
.mk-toast small{
  font-family:var(--font-mono);
  font-size:.64rem;
  color:var(--on-ink);
  letter-spacing:.02em;
}
@keyframes toast-cycle{
  0%, 8%    { opacity:0; transform:translateY(-10px); }
  14%, 46%  { opacity:1; transform:translateY(0); }
  54%, 100% { opacity:0; transform:translateY(-10px); }
}
.mk-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  border-top:1px solid var(--line);
  padding:.75rem 1.25rem;
  background:#FCFCFF;
}
.mk-footer span{
  font-family:var(--font-mono);
  font-size:.68rem;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:.5em;
}
.mk-footer .pulse{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--mint);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(53,226,178,.5); }
  60%{ box-shadow:0 0 0 7px rgba(53,226,178,0); }
}

.float-chip{
  position:absolute;
  z-index:6;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow-md);
  padding:.6rem .95rem;
  font-size:.8rem;
  color:var(--muted);
  line-height:1.35;
}
.float-chip b{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.float-chip b .up{ color:var(--mint-deep); }
.fc1{ top:34%; left:-3.6rem; animation:bob 7s ease-in-out infinite; }
.fc2{ bottom:-1.4rem; right:-2.2rem; animation:bob 7s 1.2s ease-in-out infinite; }
@keyframes bob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

@media (max-width:1080px){
  .fc1{ left:-1rem; }
  .fc2{ right:-.5rem; }
}
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-copy{ text-align:center; }
  .hero-copy .lede{ margin-inline:auto; }
  .hero-ctas, .hero-proof{ justify-content:center; }
  .mockup-wrap{ margin-top:var(--s4); }
  .fc1{ top:auto; bottom:30%; left:-.4rem; }
  .fc2{ bottom:-1rem; right:-.4rem; }
}
@media (max-width:560px){
  .hero{ padding-top:var(--s6); }
  .kicker{ font-size:.63rem; padding:.45em .85em; gap:.45em; }
  .mk-chips .mk-chip:last-child{ display:none; }
  .float-chip{ padding:.5rem .75rem; font-size:.72rem; }
  .float-chip b{ font-size:.92rem; }
  .fc1{ left:-.25rem; }
  .fc2{ right:-.25rem; }
}

/* ============================================================
   LOGO STRIP
   ============================================================ */

.logos{
  padding:var(--s6) 0 var(--s7);
  border-bottom:1px solid var(--line);
}
.logos p{
  text-align:center;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:var(--s5);
}
.logo-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:var(--s5) var(--s7);
}
.logo-row li{
  color:#9DA2C0;
  font-size:1.05rem;
  transition:color .2s ease;
  white-space:nowrap;
}
.logo-row li:hover{ color:var(--ink-soft); }
.lg-serifish{ font-family:var(--font-display); font-weight:800; letter-spacing:.12em; font-size:.95rem; }
.lg-mono{ font-family:var(--font-mono); font-weight:500; letter-spacing:.05em; }
.lg-round{ font-family:var(--font-display); font-weight:600; font-style:italic; font-size:1.15rem; }
.lg-caps{ font-family:var(--font-body); font-weight:700; letter-spacing:.22em; font-size:.85rem; text-transform:uppercase; }
.lg-script{ font-family:var(--font-display); font-weight:400; font-size:1.2rem; letter-spacing:-.01em; }
.lg-wide{ font-family:var(--font-mono); font-weight:600; letter-spacing:.3em; font-size:.8rem; text-transform:uppercase; }

/* ============================================================
   PROBLEM / INFO CARDS
   ============================================================ */

.problem{ padding:var(--section) 0; }
.prob-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--s5);
}
.prob-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:var(--s6) var(--s5) var(--s5);
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.prob-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:#D8D9EE;
}
.prob-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  margin-bottom:var(--s4);
  background:var(--indigo-ghost);
  border:1px solid var(--indigo-tint);
}
.prob-icon svg{ width:22px; height:22px; color:var(--indigo); }
.prob-icon.mint{
  background:var(--mint-tint);
  border-color:#C4F0E1;
}
.prob-icon.mint svg{ color:var(--mint-deep); }
.prob-card .stat{
  font-family:var(--font-display);
  font-weight:750;
  font-size:2rem;
  letter-spacing:-0.02em;
  color:var(--ink);
  display:block;
  margin-bottom:var(--s2);
}
.prob-card .stat em{
  font-style:normal;
  color:var(--indigo);
}
.prob-card h3{ margin-bottom:var(--s2); }
.prob-card p{ font-size:.98rem; }
.prob-src{
  margin-top:var(--s5);
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.04em;
  color:var(--muted);
}
@media (max-width:860px){
  .prob-grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
}

/* ============================================================
   FEATURES
   ============================================================ */

.features{
  padding:var(--section) 0;
  background:
    linear-gradient(180deg, #F4F4FB 0%, var(--paper) 8rem),
    var(--paper);
  border-top:1px solid var(--line);
}
.feature{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem, 5vw, 5rem);
  align-items:center;
  padding:var(--s7) 0;
}
.feature + .feature{ border-top:1px dashed var(--line); }
.feature.flip .f-copy{ order:2; }
.feature.flip .f-vig{ order:1; }
.f-copy .f-num{
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:var(--track-label);
  color:var(--mint-deep);
  display:block;
  margin-bottom:var(--s3);
}
.f-copy h3,
.f-copy h2{
  font-size:clamp(1.5rem, 2.4vw, 1.9rem);
  margin-bottom:var(--s3);
}
.f-copy p{ max-width:30em; }
.f-copy p + p{ margin-top:var(--s3); }
.f-list{
  margin-top:var(--s4);
  display:grid;
  gap:.6rem;
}
.f-list li{
  display:flex;
  gap:.6em;
  align-items:flex-start;
  font-size:.98rem;
}
.f-list svg{
  width:18px; height:18px;
  color:var(--mint-deep);
  flex:none;
  margin-top:.2em;
}

/* vignettes — small CSS product moments */
.f-vig{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-md);
  padding:var(--s5);
  overflow:hidden;
}
.f-vig::before{
  content:"";
  position:absolute;
  inset:auto -20% -55% -20%;
  height:70%;
  background:radial-gradient(closest-side, rgba(75,61,240,.06), transparent);
  pointer-events:none;
}

/* v1 — booking page phone */
.vig-booking{ display:flex; justify-content:center; padding:var(--s6) var(--s5); }
.phone{
  width:min(280px, 100%);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:26px;
  padding:1rem .9rem 1.1rem;
  box-shadow:var(--shadow-sm);
}
.phone-pill{
  width:76px;
  height:5px;
  border-radius:var(--r-pill);
  background:var(--line);
  margin:0 auto .85rem;
}
.phone-head b{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  color:var(--ink);
  font-size:1rem;
  letter-spacing:-0.01em;
}
.phone-head span{
  font-family:var(--font-mono);
  font-size:.66rem;
  color:var(--muted);
  letter-spacing:var(--track-label);
}
.svc{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:.55rem .7rem;
  margin-top:.55rem;
}
.svc div b{
  display:block;
  font-size:.82rem;
  font-weight:600;
  color:var(--ink);
  line-height:1.25;
}
.svc div span{
  font-family:var(--font-mono);
  font-size:.64rem;
  color:var(--muted);
}
.svc-btn{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.72rem;
  color:var(--indigo-deep);
  background:var(--indigo-ghost);
  border:1px solid var(--indigo-tint);
  border-radius:var(--r-pill);
  padding:.35em .95em;
  flex:none;
}
.svc.sel{ border-color:var(--indigo); box-shadow:0 0 0 3px var(--indigo-tint); }
.svc.sel .svc-btn{ background:var(--indigo); color:#fff; border-color:var(--indigo); }
.slot-row{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:.8rem;
}
.slot{
  font-family:var(--font-mono);
  font-size:.66rem;
  padding:.4em .75em;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:var(--card);
  color:var(--body);
}
.slot.sel{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.pay-strip{
  margin-top:.85rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--mint-tint);
  border:1px solid #C4F0E1;
  border-radius:12px;
  padding:.55rem .75rem;
  font-size:.74rem;
  color:var(--mint-deep);
  font-weight:600;
}
.pay-strip span{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.64rem;
  letter-spacing:var(--track-label);
}

/* v2 — reminders thread */
.vig-remind{ display:grid; gap:.7rem; }
.rm-meta{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
}
.rm-tag{
  font-family:var(--font-mono);
  font-size:.66rem;
  padding:.35em .8em;
  border-radius:var(--r-pill);
  background:var(--indigo-ghost);
  border:1px solid var(--indigo-tint);
  color:var(--indigo-deep);
}
.sms{
  max-width:88%;
  padding:.7rem .95rem;
  border-radius:16px;
  font-size:.88rem;
  line-height:1.5;
}
.sms.out{
  background:var(--indigo);
  color:#fff;
  border-bottom-left-radius:5px;
  align-self:flex-start;
}
.sms.out small{
  display:block;
  font-family:var(--font-mono);
  font-size:.62rem;
  color:#CFC9FC;
  margin-top:.35rem;
  letter-spacing:var(--track-label);
}
.sms.in{
  background:#F0F1F8;
  color:var(--ink);
  font-weight:600;
  border-bottom-right-radius:5px;
  justify-self:end;
  align-self:flex-end;
}
.sms.note{
  justify-self:center;
  background:var(--mint-tint);
  border:1px solid #C4F0E1;
  color:var(--mint-deep);
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:600;
  padding:.45em 1em;
  border-radius:var(--r-pill);
}

/* v3 — AI assistant draft */
.vig-ai{ display:grid; gap:.8rem; }
.dm{
  display:flex;
  gap:.65rem;
  align-items:flex-start;
}
.dm-av{
  width:34px; height:34px;
  border-radius:50%;
  background:linear-gradient(135deg,#B95BD6,#E86AA6);
  color:#fff;
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.8rem;
  flex:none;
}
.dm-bubble{
  background:#F0F1F8;
  border-radius:16px;
  border-top-left-radius:5px;
  padding:.65rem .9rem;
  font-size:.88rem;
  color:var(--ink);
}
.dm-src{
  font-family:var(--font-mono);
  font-size:.6rem;
  color:var(--muted);
  display:block;
  margin-top:.3rem;
  letter-spacing:var(--track-label);
}
.ai-draft{
  border:1.5px solid var(--indigo-tint);
  background:linear-gradient(180deg, #FBFAFF, #F5F4FF);
  border-radius:16px;
  padding:.9rem 1rem;
}
.ai-tag{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-family:var(--font-mono);
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--indigo-deep);
  background:#fff;
  border:1px solid var(--indigo-tint);
  border-radius:var(--r-pill);
  padding:.3em .8em;
  margin-bottom:.6rem;
}
.ai-tag svg{ width:11px; height:11px; }
.ai-tag.mint{
  color:var(--mint-deep);
  border-color:#C4F0E1;
}
.ai-draft p{
  font-size:.9rem;
  color:var(--ink-soft);
}
.ai-actions{
  display:flex;
  gap:.5rem;
  margin-top:.75rem;
}
.mini-btn{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.74rem;
  border-radius:var(--r-pill);
  padding:.45em 1.1em;
}
.mini-btn.solid{ background:var(--indigo); color:#fff; }
.mini-btn.line{ background:#fff; border:1px solid var(--line); color:var(--body); }

/* v4 — analytics */
.vig-stats{ display:grid; gap:var(--s4); }
.stat-tiles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem;
}
.tile{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:.8rem .95rem;
}
.tile small{
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--muted);
  display:block;
  margin-bottom:.2rem;
}
.tile b{
  font-family:var(--font-display);
  font-weight:750;
  font-size:1.3rem;
  color:var(--ink);
  letter-spacing:-0.02em;
}
.tile .delta{
  font-family:var(--font-mono);
  font-size:.66rem;
  font-weight:600;
  color:var(--mint-deep);
  margin-left:.4em;
}
.tile .delta.down{ color:var(--mint-deep); }
.bars{
  display:flex;
  align-items:flex-end;
  gap:.55rem;
  height:120px;
  padding:.5rem .3rem 0;
}
.bar{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
  height:100%;
  justify-content:flex-end;
}
.bar i{
  width:100%;
  max-width:34px;
  height:var(--h, 40%);
  border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg, #8B81F6, var(--indigo));
  transform-origin:bottom;
  transform:scaleY(0);
  transition:transform .8s cubic-bezier(.2,.65,.25,1);
}
.in .bar i{ transform:scaleY(1); }
.bar:nth-child(2) i{ transition-delay:.06s; }
.bar:nth-child(3) i{ transition-delay:.12s; }
.bar:nth-child(4) i{ transition-delay:.18s; }
.bar:nth-child(5) i{ transition-delay:.24s; }
.bar:nth-child(6) i{ transition-delay:.3s; }
.bar:nth-child(7) i{ transition-delay:.36s; }
.bar.hot i{ background:linear-gradient(180deg, #7FF0D2, var(--mint)); }
.bar span{
  font-family:var(--font-mono);
  font-size:.64rem;
  color:var(--muted);
}
.bar.hot span{ color:var(--mint-deep); font-weight:600; }

@media (max-width:860px){
  .feature{ grid-template-columns:1fr; gap:var(--s5); padding:var(--s6) 0; }
  .feature.flip .f-copy{ order:1; }
  .feature.flip .f-vig{ order:2; }
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */

.how{ padding:var(--section) 0; }
.steps{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--s5);
  counter-reset:step;
}
.step{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:var(--s6) var(--s5);
  box-shadow:var(--shadow-sm);
}
.step-num{
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:14px;
  background:var(--ink);
  color:var(--mint);
  font-family:var(--font-mono);
  font-weight:600;
  font-size:1rem;
  margin-bottom:var(--s4);
}
.step h3{ margin-bottom:var(--s2); }
.step p{ font-size:.98rem; }
.step .step-eta{
  display:inline-block;
  margin-top:var(--s4);
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.06em;
  color:var(--mint-deep);
  background:var(--mint-tint);
  border:1px solid #C4F0E1;
  border-radius:var(--r-pill);
  padding:.35em .9em;
}
.step::after{
  content:"";
  position:absolute;
  top:50%;
  right:-1.9rem;
  width:1.6rem;
  border-top:2px dashed #C9CBE4;
}
.step:last-child::after{ display:none; }
@media (max-width:860px){
  .steps{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .step::after{
    top:auto; right:auto;
    bottom:-1.9rem; left:2.4rem;
    width:0; height:1.6rem;
    border-top:none;
    border-left:2px dashed #C9CBE4;
  }
}

/* ============================================================
   PRICING
   ============================================================ */

.pricing{
  padding:var(--section) 0;
  background:
    radial-gradient(46rem 26rem at 50% 0%, rgba(75,61,240,.06), transparent 65%),
    linear-gradient(180deg, #F4F4FB, var(--paper) 10rem);
  border-top:1px solid var(--line);
}
.billing-toggle{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  margin:calc(var(--s6) * -0.5) 0 var(--s6);
}
.billing-toggle .switch{
  display:inline-flex;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:4px;
  box-shadow:var(--shadow-sm);
}
.billing-toggle .switch button{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.92rem;
  padding:.55em 1.4em;
  border-radius:var(--r-pill);
  color:var(--muted);
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.billing-toggle .switch button[aria-pressed="true"]{
  background:var(--ink);
  color:#fff;
  box-shadow:0 4px 12px rgba(22,25,58,.24);
}
.save-pill{
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--mint-deep);
  background:var(--mint-tint);
  border:1px solid #C4F0E1;
  border-radius:var(--r-pill);
  padding:.4em 1em;
}
.plans{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--s5);
  align-items:stretch;
}
.plan{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:var(--s6) var(--s5);
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
}
.plan:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.plan.featured{
  border:2px solid var(--indigo);
  box-shadow:var(--shadow-lg);
  background:linear-gradient(180deg, #FCFBFF, #FFFFFF 30%);
}
.plan-flag{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--ink);
  background:var(--mint);
  border-radius:var(--r-pill);
  padding:.4em 1.1em;
  white-space:nowrap;
}
.plan-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.2rem;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.plan-for{
  font-size:.9rem;
  color:var(--muted);
  margin-top:.25rem;
  min-height:2.6em;
}
.price-line{
  display:flex;
  align-items:baseline;
  gap:.15em;
  margin-top:var(--s4);
}
.price-line .cur{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.4rem;
  color:var(--ink);
}
.price-line .amt{
  font-family:var(--font-display);
  font-weight:750;
  font-size:3rem;
  letter-spacing:-0.03em;
  color:var(--ink);
  line-height:1;
}
.price-line .per{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--muted);
  margin-left:.35em;
}
.bill-note{
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--muted);
  margin-top:.55rem;
  letter-spacing:.02em;
  min-height:2.2em;
}
.plan-cta{ margin-top:var(--s4); }
.plan-cta .btn{ width:100%; }
.plan-feats{
  margin-top:var(--s5);
  padding-top:var(--s4);
  border-top:1px dashed var(--line);
  display:grid;
  gap:.55rem;
}
.plan-feats li{
  display:flex;
  gap:.6em;
  align-items:flex-start;
  font-size:.94rem;
}
.plan-feats svg{
  width:17px; height:17px;
  color:var(--mint-deep);
  flex:none;
  margin-top:.22em;
}
.plan-feats li.dim{ color:var(--muted); }
.plan-feats li.dim svg{ color:#C9CBE4; }
.pricing-fine{
  text-align:center;
  margin-top:var(--s6);
  font-size:.9rem;
  color:var(--muted);
}
@media (max-width:960px){
  .plans{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .plan.featured{ order:-1; }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */

.testimonials{ padding:var(--section) 0; }
.t-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--s5);
}
.t-card{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:var(--s6) var(--s5);
  box-shadow:var(--shadow-sm);
}
.t-metric{
  align-self:flex-start;
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--indigo-deep);
  background:var(--indigo-ghost);
  border:1px solid var(--indigo-tint);
  border-radius:var(--r-pill);
  padding:.4em 1em;
  margin-bottom:var(--s4);
}
.t-metric.mint{
  color:var(--mint-deep);
  background:var(--mint-tint);
  border-color:#C4F0E1;
}
.t-card blockquote{
  font-size:1.02rem;
  line-height:1.6;
  color:var(--ink-soft);
  flex:1;
}
.t-card blockquote::before{
  content:"\201C";
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:2.6rem;
  line-height:.6;
  color:var(--mint);
  margin-bottom:.45rem;
}
.t-who{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-top:var(--s5);
  padding-top:var(--s4);
  border-top:1px dashed var(--line);
}
.t-av{
  width:44px; height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:700;
  color:#fff;
  font-size:.9rem;
  flex:none;
}
.t-av.a{ background:linear-gradient(135deg,#4B3DF0,#8B81F6); }
.t-av.b{ background:linear-gradient(135deg,#0C8A67,#35E2B2); color:var(--ink); }
.t-av.c{ background:linear-gradient(135deg,#232752,#4B3DF0); }
.t-av.d{ background:linear-gradient(135deg,#B95BD6,#E86AA6); }
.t-av.e{ background:linear-gradient(135deg,#3527C4,#7A6FF5); }
.t-who b{
  display:block;
  font-weight:600;
  color:var(--ink);
  font-size:.95rem;
  line-height:1.3;
}
.t-who span{
  font-size:.82rem;
  color:var(--muted);
}
@media (max-width:960px){
  .t-grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
}

/* ============================================================
   STATS BAND (dark numbers strip)
   ============================================================ */

.stats-band{ padding:0 0 var(--section); }
.stats-inner{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--s5);
  background:linear-gradient(120deg, var(--ink), #1D2150);
  border-radius:calc(var(--r-card) + 8px);
  padding:clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  text-align:center;
}
.stat-cell b{
  display:block;
  font-family:var(--font-display);
  font-weight:750;
  font-size:clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing:-0.02em;
  color:#fff;
}
.stat-cell b em{ font-style:normal; color:var(--mint); }
.stat-cell span{
  display:block;
  margin-top:.3rem;
  font-size:.88rem;
  color:var(--on-ink);
}
@media (max-width:860px){
  .stats-inner{ grid-template-columns:1fr 1fr; gap:var(--s5) var(--s4); }
}

/* ============================================================
   CTA BAND
   ============================================================ */

.cta-band{ padding:0 0 var(--section); }
.cta-inner{
  position:relative;
  overflow:hidden;
  background:linear-gradient(120deg, var(--ink) 0%, var(--indigo-deep) 55%, var(--indigo) 100%);
  border-radius:calc(var(--r-card) + 8px);
  padding:clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align:center;
  color:#fff;
}
.cta-inner::before{
  content:"";
  position:absolute;
  top:-40%;
  right:-10%;
  width:26rem;
  height:26rem;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(53,226,178,.22), transparent);
  pointer-events:none;
}
.cta-inner::after{
  content:"";
  position:absolute;
  bottom:-55%;
  left:-8%;
  width:22rem;
  height:22rem;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.10), transparent);
  pointer-events:none;
}
.cta-inner h2{
  color:#fff;
  max-width:17em;
  margin-inline:auto;
}
.cta-inner p{
  margin:var(--s4) auto 0;
  max-width:34em;
  color:var(--on-ink);
  font-size:1.1rem;
}
.cta-inner .hero-ctas{
  justify-content:center;
  position:relative;
  z-index:1;
}
.cta-inner .btn-ghost{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.35);
  box-shadow:none;
}
.cta-inner .btn-ghost:hover{
  border-color:var(--mint);
  color:var(--mint);
}

/* ============================================================
   INTEGRATIONS
   ============================================================ */

.integrations{
  padding:0 0 var(--section);
}
.int-inner{
  border:1px solid var(--line);
  border-radius:var(--r-card);
  background:var(--card);
  padding:var(--s6) var(--s5);
  text-align:center;
  box-shadow:var(--shadow-sm);
}
.int-inner h2{
  font-size:1.35rem;
  margin-bottom:var(--s2);
}
.int-inner > p{
  font-size:.98rem;
  color:var(--muted);
  max-width:38em;
  margin:0 auto var(--s5);
}
.int-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.7rem;
}
.int-chip{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-weight:500;
  font-size:.92rem;
  color:var(--ink-soft);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:.55em 1.1em;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.int-chip:hover{
  border-color:var(--indigo);
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.int-chip svg{ width:17px; height:17px; color:var(--indigo); flex:none; }
.int-chip.soon{ color:var(--muted); }
.int-chip.soon svg{ color:#C9CBE4; }
.int-chip .soon-tag{
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--mint-deep);
  background:var(--mint-tint);
  border-radius:var(--r-pill);
  padding:.2em .6em;
}

/* ============================================================
   FAQ
   ============================================================ */

.faq{
  padding:var(--section) 0;
  background:linear-gradient(180deg, #F4F4FB, var(--paper) 12rem);
  border-top:1px solid var(--line);
}
.faq-list{
  max-width:760px;
  margin-inline:auto;
  display:grid;
  gap:var(--s3);
}
.faq-item{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.faq-item.open{
  border-color:#C9C4F8;
  box-shadow:var(--shadow-sm);
}
.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s4);
  text-align:left;
  padding:1.15rem 1.4rem;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.05rem;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.faq-q:hover{ color:var(--indigo-deep); }
.faq-q .chev{
  flex:none;
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--indigo-ghost);
  border:1px solid var(--indigo-tint);
  transition:transform .25s ease, background .25s ease;
}
.faq-q .chev svg{
  width:15px; height:15px;
  color:var(--indigo-deep);
  transition:color .25s ease;
}
.faq-item.open .chev{
  transform:rotate(180deg);
  background:var(--indigo);
}
.faq-item.open .chev svg{ color:#fff; }
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s cubic-bezier(.2,.65,.25,1);
}
.faq-a p{
  padding:0 1.4rem 1.3rem;
  font-size:.98rem;
  max-width:56em;
}
.faq-a p + p{ padding-top:0; margin-top:-.5rem; }

/* ============================================================
   SIGNUP / CONTACT FORM
   ============================================================ */

.signup{ padding:var(--section) 0; }
.signup-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}
.signup-copy h2{ max-width:12em; }
.signup-copy > p{
  margin-top:var(--s4);
  max-width:28em;
}
.signup-points{
  margin-top:var(--s5);
  display:grid;
  gap:var(--s3);
}
.signup-points li{
  display:flex;
  gap:.7em;
  align-items:flex-start;
}
.signup-points svg{
  width:20px; height:20px;
  color:var(--mint-deep);
  flex:none;
  margin-top:.15em;
}
.signup-points b{ color:var(--ink); font-weight:600; }
.signup-contact{
  margin-top:var(--s6);
  padding:var(--s4) var(--s5);
  background:var(--indigo-ghost);
  border:1px solid var(--indigo-tint);
  border-radius:var(--r-card);
  font-size:.92rem;
}
.signup-contact b{
  display:block;
  font-family:var(--font-display);
  color:var(--ink);
  margin-bottom:.2rem;
}
.signup-contact a{ font-weight:600; }

.lead-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:calc(var(--r-card) + 4px);
  box-shadow:var(--shadow-lg);
  padding:clamp(1.5rem, 3.5vw, 2.5rem);
}
.lead-card .form-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.3rem;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.lead-card .form-sub{
  font-size:.92rem;
  color:var(--muted);
  margin:.3rem 0 var(--s5);
}
.field{ margin-bottom:var(--s4); }
.field label{
  display:block;
  font-weight:600;
  font-size:.9rem;
  color:var(--ink);
  margin-bottom:.4rem;
}
.field label .opt{
  font-weight:400;
  color:var(--muted);
  font-size:.82rem;
}
.field input,
.field select,
.field textarea{
  width:100%;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--r-ctrl);
  padding:.75em 1em;
  font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field textarea{ resize:vertical; min-height:96px; }
.field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%234A4F6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1em center;
  background-size:14px;
  padding-right:2.6em;
}
.field select:required:invalid{
  color:#9CA1C4; /* select resting on its placeholder option reads like ::placeholder */
}
.field select:has(option[value=""]:checked){
  color:#9CA1C4; /* optional selects match too, so both read alike */
}
.field select option{ color:var(--body); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--indigo);
  background:#fff;
  box-shadow:0 0 0 4px var(--indigo-tint);
}
.field.invalid input,
.field.invalid select{
  border-color:#D6455D;
  background:#FFF7F8;
}
.field .err{
  display:none;
  font-size:.82rem;
  color:#B5324A;
  margin-top:.35rem;
  font-weight:500;
}
.field.invalid .err{ display:block; }
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s4);
}
.lead-card .btn{ width:100%; margin-top:var(--s2); }
.form-fine{
  margin-top:var(--s3);
  text-align:center;
  font-size:.8rem;
  color:var(--muted);
}
/* inline submit failure – injected by js/main.js when FORM_ENDPOINT is
   set and the POST doesn't come back 2xx (role="alert" in the markup) */
.form-error{
  margin:var(--s2) 0 var(--s3);
  padding:.7em 1em;
  background:#FFF7F8;
  border:1.5px solid #F0C4CE;
  border-radius:var(--r-ctrl);
  color:#B5324A;
  font-size:.9rem;
  font-weight:500;
  text-align:center;
}
.form-success{
  text-align:center;
  padding:var(--s5) var(--s3);
}
.form-success .big-tick{
  width:64px; height:64px;
  border-radius:50%;
  background:var(--mint-tint);
  border:1.5px solid #C4F0E1;
  display:grid;
  place-items:center;
  margin:0 auto var(--s4);
}
.form-success .big-tick svg{
  width:30px; height:30px;
  color:var(--mint-deep);
}
.form-success h3{ margin-bottom:var(--s2); }
.form-success p{ max-width:26em; margin:0 auto; font-size:.98rem; }
.form-success .demo-note{
  margin-top:var(--s4);
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--muted);
}
@media (max-width:900px){
  .signup-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .form-row{ grid-template-columns:1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer{
  background:var(--ink);
  color:var(--on-ink);
  padding:var(--section) 0 var(--s6);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:var(--s6);
  padding-bottom:var(--s7);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer .brand{ color:#fff; }
.footer-about p{
  margin-top:var(--s4);
  font-size:.94rem;
  max-width:24em;
  line-height:1.6;
}
.footer h4{
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:#8F94BE;
  margin-bottom:var(--s4);
}
.footer-col ul{ display:grid; gap:.6rem; }
.footer-col a{
  color:var(--on-ink);
  font-size:.95rem;
  transition:color .15s ease;
}
.footer-col a:hover{ color:var(--mint); }
.footer-col address{
  font-style:normal;
  font-size:.95rem;
  line-height:1.7;
}
.footer-col address a{ color:var(--mint); font-weight:500; }
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3) var(--s5);
  padding-top:var(--s5);
  font-size:.85rem;
  color:#8F94BE;
}
.footer-bottom a{ color:#B9BDDE; font-weight:500; }
.footer-bottom a:hover{ color:var(--mint); }
.studio-credit{
  width:100%;
  text-align:center;
  margin-top:var(--s4);
  padding-top:var(--s4);
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.82rem;
  color:#8F94BE;
}
.studio-credit a{
  color:var(--mint);
  font-weight:600;
}
@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-about{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer{ padding-bottom:7rem; } /* keep credit clear of the two floating action buttons */
}

/* ============================================================
   WHATSAPP · CHAT WIDGET
   ============================================================ */

/* WhatsApp — bottom left */
.wa-fab{
  position:fixed;
  bottom:1.4rem;
  left:1.4rem;
  z-index:150;
  display:flex;
  align-items:center;
  gap:.65rem;
}
.wa-btn{
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--wa);
  display:grid;
  place-items:center;
  box-shadow:0 10px 24px rgba(31,168,85,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.wa-btn svg{ width:28px; height:28px; color:#fff; }
.wa-fab:hover .wa-btn,
.wa-btn:focus-visible{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 14px 30px rgba(31,168,85,.4);
}
.wa-label{
  background:var(--ink);
  color:#fff;
  font-size:.82rem;
  font-weight:500;
  border-radius:var(--r-pill);
  padding:.45em 1em;
  opacity:0;
  transform:translateX(-8px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  white-space:nowrap;
}
.wa-fab:hover .wa-label,
.wa-btn:focus-visible + .wa-label{
  opacity:1;
  transform:translateX(0);
}

/* Chat — bottom right */
.chat-fab{
  position:fixed;
  bottom:1.4rem;
  right:1.4rem;
  z-index:150;
  width:60px;
  height:60px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--indigo), var(--indigo-deep));
  display:grid;
  place-items:center;
  box-shadow:0 12px 28px rgba(75,61,240,.4);
  transition:transform .2s ease, box-shadow .2s ease;
}
.chat-fab svg{ width:27px; height:27px; color:#fff; }
.chat-fab:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 16px 34px rgba(75,61,240,.46);
}
.chat-fab .fab-close{ display:none; }
.chat-open .chat-fab .fab-chat{ display:none; }
.chat-open .chat-fab .fab-close{ display:block; }
.chat-fab .fab-ping{
  position:absolute;
  top:2px;
  right:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--mint);
  border:2.5px solid var(--paper);
  animation:pulse 2.4s infinite;
}
.chat-open .chat-fab .fab-ping{ display:none; }

.chat-panel{
  position:fixed;
  bottom:calc(1.4rem + 72px);
  right:1.4rem;
  z-index:160;
  width:min(380px, calc(100vw - 2rem));
  max-height:min(600px, calc(100dvh - 7rem));
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 24px 70px rgba(22,25,58,.30);
  overflow:hidden;
  opacity:0;
  transform:translateY(14px) scale(.98);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.chat-open .chat-panel{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.chat-head{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:1rem 1.15rem;
  background:linear-gradient(120deg, var(--ink), var(--indigo-deep));
  color:#fff;
}
.chat-head .q-mark{
  width:40px;
  height:40px;
  border-radius:14px;
  background:var(--mint);
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.2rem;
  color:var(--ink);
  flex:none;
}
.chat-head b{
  display:block;
  font-family:var(--font-display);
  font-size:1.02rem;
  letter-spacing:-0.01em;
  line-height:1.25;
}
.chat-head small{
  display:flex;
  align-items:center;
  gap:.4em;
  font-size:.74rem;
  color:var(--on-ink);
}
.chat-head small i{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--mint);
}
.chat-close{
  margin-left:auto;
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.12);
  transition:background .15s ease;
}
.chat-close:hover{ background:rgba(255,255,255,.22); }
.chat-close svg{ width:15px; height:15px; color:#fff; }
.chat-body{
  flex:1;
  overflow-y:auto;
  padding:1.05rem;
  display:flex;
  flex-direction:column;
  gap:.65rem;
  background:var(--paper);
  min-height:220px;
}
.msg{
  max-width:86%;
  padding:.65rem .95rem;
  border-radius:16px;
  font-size:.9rem;
  line-height:1.5;
}
.msg.bot{
  background:#fff;
  border:1px solid var(--line);
  border-bottom-left-radius:5px;
  align-self:flex-start;
  color:var(--ink-soft);
}
.msg.bot a{ font-weight:600; }
.msg.user{
  background:var(--indigo);
  color:#fff;
  border-bottom-right-radius:5px;
  align-self:flex-end;
}
.msg.typing{
  display:inline-flex;
  gap:5px;
  align-items:center;
  padding:.8rem 1rem;
}
.msg.typing i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#B4B8D6;
  animation:blink 1.1s infinite;
}
.msg.typing i:nth-child(2){ animation-delay:.18s; }
.msg.typing i:nth-child(3){ animation-delay:.36s; }
@keyframes blink{
  0%,100%{ opacity:.3; transform:translateY(0); }
  45%{ opacity:1; transform:translateY(-3px); }
}
.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  padding:.35rem 1.05rem .8rem;
  background:var(--paper);
}
.chip{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.8rem;
  color:var(--indigo-deep);
  background:#fff;
  border:1.5px solid var(--indigo-tint);
  border-radius:var(--r-pill);
  padding:.45em 1em;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.chip:hover{
  background:var(--indigo-ghost);
  border-color:var(--indigo);
  transform:translateY(-1px);
}
.chip:active{ transform:translateY(0); background:var(--indigo-tint); }
.chat-input{
  display:flex;
  gap:.55rem;
  padding:.8rem 1.05rem;
  border-top:1px solid var(--line);
  background:#fff;
}
.chat-input input{
  flex:1;
  min-width:0;
  border:1.5px solid var(--line);
  border-radius:var(--r-pill);
  padding:.6em 1.1em;
  font-size:.92rem;
  background:var(--paper);
}
.chat-input input:focus{
  outline:none;
  border-color:var(--indigo);
  box-shadow:0 0 0 3px var(--indigo-tint);
}
.chat-send{
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--indigo);
  display:grid;
  place-items:center;
  flex:none;
  transition:background .15s ease, transform .15s ease;
}
.chat-send:hover{ background:var(--indigo-deep); transform:scale(1.05); }
.chat-send svg{ width:18px; height:18px; color:#fff; }
.chat-foot{
  text-align:center;
  font-size:.68rem;
  color:var(--muted);
  padding:.5rem .9rem .7rem;
  background:#fff;
}
.chat-foot a{ color:var(--indigo-deep); font-weight:600; }

@media (max-width:520px){
  .chat-panel{
    inset:0;
    width:100%;
    max-height:none;
    height:100dvh;
    border-radius:0;
    border:none;
    bottom:0;
    right:0;
  }
  .chat-input input{ font-size:1rem; } /* 16px floor stops iOS focus zoom */
  .chat-open .chat-fab{ display:none; }
  .wa-fab{ bottom:1.1rem; left:1.1rem; }
  .chat-fab{ bottom:1.1rem; right:1.1rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .bar i{ transform:scaleY(1); }
  .mk-toast{ opacity:0; }
  .mk-free{ opacity:0; }
  .mk-new{ opacity:1; transform:none; }
  .hero-copy h1 .tick::after{ transform:scaleX(1); }
}

/* ============================================================
   FORM SPAM TRAP (HONEYPOT)
   ------------------------------------------------------------
   Parked off-screen rather than display:none so naive bots
   still "see" and auto-fill it; people never do. The wrapper is
   aria-hidden and the input carries tabindex="-1", keeping it
   out of the accessibility tree and the tab order. Submissions
   with a value here are silently dropped in js/main.js.
   ============================================================ */

.hp-field{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ============================================================
   PRINT
   ------------------------------------------------------------
   Tuned so pricing.html prints cleanly: tiers and the full
   comparison table in black on white, chrome and widgets gone,
   scroll-reveal flattened and every FAQ answer open.
   ============================================================ */

@media print{
  @page{ margin:1.5cm; }

  html{ scroll-behavior:auto; }
  body{ background:#fff; color:#000; font-size:10.5pt; }

  /* chrome + interactive widgets carry no meaning on paper */
  .nav,.wa-fab,.chat,.footer,.cta-band,
  .billing-toggle,.table-hint,.plan-cta,.hero-ctas,
  .compare-link{ display:none !important; }

  /* scroll-reveal must never hide content in print */
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }

  section{ padding:1rem 0 !important; background:#fff !important; border:none !important; }
  .wrap{ width:100%; }

  h1,h2,h3,p,li,blockquote,td,th,a,address,
  .lede,.hero-note,.kicker,.helper-answer,
  .plan-name,.plan-for,.bill-note,.pricing-fine,
  .price-line .cur,.price-line .amt,.price-line .per,
  .cmp-plan,.cmp-price,.cmp td small,.cmp td .no,.faq-q{ color:#000 !important; }
  a{ text-decoration:underline; }

  .kicker,.save-pill,.rm-tag{ background:#fff; border:1px solid #000; }
  .kicker::before,.kicker.mint::before{ background:#000; }

  .stats-band,.stats-inner{ background:#fff !important; }
  .stat-cell b,.stat-cell b em,.stat-cell span{ color:#000 !important; }

  /* pricing tiers: stacked, boxed, black on white */
  .plans{ display:block; }
  .plan{
    max-width:none;
    margin:0 0 .8rem;
    border:1.5px solid #000;
    background:#fff;
    box-shadow:none;
    transform:none;
    break-inside:avoid;
    page-break-inside:avoid;
  }
  .plan.featured{ border:2.5px solid #000; }
  .plan-flag{
    position:static;
    transform:none;
    display:inline-block;
    width:max-content;
    margin-bottom:.6rem;
    background:#fff;
    border:1px solid #000;
    color:#000;
  }
  .plan-feats{ border-top-color:#000; }
  .plan-feats svg,.plan-feats li.dim svg{ color:#000; }
  .plan-feats li.dim{ color:#000; }

  /* comparison table: full width, nothing clipped, hairlines only */
  .compare-wrap{
    overflow:visible;
    border:none;
    border-radius:0;
    box-shadow:none;
    background:#fff;
  }
  .cmp{ min-width:0; width:100%; font-size:8pt; }
  .cmp col.hl{ background:transparent; }
  .cmp th,.cmp td{ border-bottom:1px solid #000; padding:.45rem .5rem; }
  .cmp .cmp-sect th{ background:#fff !important; border-bottom:2px solid #000; }
  .cmp td svg{ color:#000; }
  .cmp-flag{ background:#fff; border:1px solid #000; color:#000; }
  .cmp tbody tr{ break-inside:avoid; }

  /* cards elsewhere print as plain boxes */
  .prob-card,.t-card,.plan,.channel,.lead-card{ box-shadow:none; }
  .prob-card,.t-card,.channel{ border:1px solid #000; background:#fff; break-inside:avoid; }

  /* FAQ: every answer open, chevrons gone */
  .faq{ background:#fff; border-top:none; }
  .faq-item{ border:1px solid #000; background:#fff; break-inside:avoid; }
  .faq-a{ max-height:none !important; overflow:visible; }
  .faq-q .chev{ display:none; }
}