/* Maxiform homepage. Warm-paper light page, the demo card as a dark contrast
   object. Scoped to index.html only; the other marketing pages keep site.css.
   Discipline rules for this page: system sans everywhere except the mono
   logotype, mono kicker, and mono LIVE DEMO badge; no italics; no decorative
   annotations or arrows; lime appears at most twice per viewport (nav CTA +
   the card's enabled submit button). */

:root{
  --bg:#FAFAF7; --surface:#FFFFFF; --surface2:#F4F4EF; --ink:#141417; --muted:#5A5A62;
  --faint:#90909A; --border:#E4E4DD; --lime:#A3E635; --lime-ink:#1A2E05;
  --ok:#16A34A; --warn:#D97706; --bad:#EF4444;
  --lime-text:#4D7C0F; --shadow:0 26px 70px rgba(20,20,23,.16);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root[data-theme="light"]{
  --bg:#FAFAF7; --surface:#FFFFFF; --surface2:#F4F4EF; --ink:#141417; --muted:#5A5A62;
  --faint:#90909A; --border:#E4E4DD; --lime-text:#4D7C0F;
  --shadow:0 26px 70px rgba(20,20,23,.16);
}
:root[data-theme="dark"]{
  --bg:#0B0B0C; --surface:#141416; --surface2:#1B1B1E; --ink:#F2F2F3; --muted:#9C9CA3;
  --faint:#6B6B73; --border:#26262A; --lime-text:#A3E635;
  --shadow:0 30px 80px rgba(0,0,0,.4);
}
/* THE CONTRAST OBJECT: the demo card and product mocks stay dark on any page
   theme. Local token override only. */
.demo,.blk .mock{
  --bg:#0B0B0C; --surface:#141416; --surface2:#1B1B1E; --ink:#F2F2F3; --muted:#9C9CA3;
  --faint:#8E8E96; --border:#2A2A2E; --lime-text:#A3E635;
  background:#141416;border-color:#26262A;color:#F2F2F3;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);overflow-x:clip;
  font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}

/* ---- nav (site chrome, new tokens; burger + toggle ported from site.css) -- */
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
  background:color-mix(in srgb,var(--bg) 84%,transparent);border-bottom:1px solid var(--border)}
.navin{display:flex;align-items:center;justify-content:space-between;height:62px;gap:12px}
.logo{display:flex;align-items:center;gap:9px}
.logo .mark{width:26px;height:26px;flex:none}
.logo .word{font-family:var(--mono);font-weight:700;font-size:16px;letter-spacing:-.02em}
.logo .word .care{color:var(--lime-text)}
.navlinks{display:flex;gap:16px;color:var(--muted);font-size:13.5px;font-weight:600}
.navlinks a:hover{color:var(--ink)}
/* 7 nav links + two buttons need the room: collapse to the burger below 1080 */
@media(max-width:1080px){.navlinks{display:none}}
.navr{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;
  padding:9px 16px;font-size:13.5px;font-weight:650;cursor:pointer;border:0;
  text-decoration:none;font-family:inherit;white-space:nowrap}
.btn.lime{background:var(--lime);color:var(--lime-ink)}
.btn.lime:hover{background:#BEF264}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink)}
.toggle{display:flex;gap:4px;background:var(--surface2);border:1px solid var(--border);
  border-radius:999px;padding:3px}
.toggle button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;
  font-weight:700;padding:5px 11px;border-radius:999px;cursor:pointer}
.toggle button.on{background:var(--surface);color:var(--ink)}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;
  padding:0 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);
  cursor:pointer;flex:none}
.burger span{display:block;width:100%;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease}
.burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobnav{display:none}
@media(max-width:1080px){
  .burger{display:inline-flex}
  .mobnav{position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg);
    border-bottom:1px solid var(--border);box-shadow:0 18px 44px rgba(20,20,23,.18);
    padding:6px 22px 16px;z-index:49}
  .mobnav.open{display:flex}
  .mobnav a{padding:14px 4px;font-size:16px;font-weight:600;color:var(--ink);
    border-bottom:1px solid var(--border)}
  .mobnav a:last-child{border-bottom:0}
  body.menu-open{overflow:hidden}
}
@media(max-width:560px){
  .toggle{display:none}
  nav .btn.ghost{display:none}
  nav .btn.lime{padding:9px 13px;font-size:13px}
  .logo .word{font-size:15px}
}

/* ---- hero ------------------------------------------------------------------ */
/* Two columns on a strict grid, both TOP-aligned: the card's top edge sits in
   the kicker/h1 zone at every desktop width. No floats, no offsets. */
.hero{display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:start;
  padding:64px 0 0}
@media(max-width:880px){.hero{grid-template-columns:1fr;gap:36px;padding:40px 0 0}}
.kick{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px}
h1{font-size:clamp(30px,4.6vw,44px);line-height:1.08;letter-spacing:-.02em;margin:0 0 16px;
  font-weight:700;text-wrap:balance}
.sub{color:var(--muted);font-size:16.5px;max-width:46ch;margin:0}
.sub b{color:var(--ink)}
.try{font-size:13px;color:var(--faint);margin:28px 0 10px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--border);background:var(--surface);color:var(--muted);
  border-radius:999px;padding:6px 13px;font-size:12.5px;cursor:pointer;font-family:inherit}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip:focus-visible{outline:2px solid var(--lime)}

/* ---- the live demo card ----------------------------------------------------- */
.demo{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;
  box-shadow:var(--shadow)}
.demoWrap{display:flex;flex-direction:column;gap:6px;min-width:0}

/* the field breathes until the visitor touches it: a quiet 2px ring, no lamp */
#email.invite{animation:beckon 2.4s ease-in-out infinite}
@keyframes beckon{
  0%,100%{border-color:var(--border);box-shadow:0 0 0 0 rgba(163,230,53,0)}
  50%{border-color:var(--lime);box-shadow:0 0 0 2px rgba(163,230,53,.14)}
}
/* verified state: the enabled button carries a small steady ring, not a glow */
#submit.pulse{animation:btnpulse 2s ease-in-out infinite}
@keyframes btnpulse{0%,100%{box-shadow:0 0 0 0 rgba(163,230,53,0)}
  50%{box-shadow:0 0 0 3px rgba(163,230,53,.3)}}
/* LIVE DEMO badge: in-flow neutral pill, mono caps, green status dot. Not lime;
   the enabled submit button is the card's only lime. */
.demo .cap{display:inline-flex;align-items:center;gap:7px;background:var(--surface2);
  border:1px solid var(--border);color:var(--muted);font-family:var(--mono);
  font-size:10.5px;font-weight:700;letter-spacing:.08em;border-radius:999px;
  padding:4px 11px;margin-bottom:16px}
.cap .livedot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none;
  animation:pulse 2s ease infinite}
.f-title{font-size:16px;font-weight:650;margin:0 0 4px}
.f-sub{font-size:13px;color:var(--muted);margin:0 0 16px}
.demo label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:0 0 6px}
input{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:9px;
  color:var(--ink);font-size:14px;padding:11px 12px;outline:none;font-family:inherit;
  transition:border-color .18s ease}
input:focus{border-color:#4A4A52}
.field{margin-bottom:14px}
#email.ok{border-color:var(--ok)} #email.bad{border-color:var(--bad)} #email.warn{border-color:var(--warn)}
.status{min-height:20px;display:flex;gap:6px;align-items:flex-start;font-size:12.5px;
  margin-top:6px;line-height:1.4}
.status .ic{width:15px;height:15px;border-radius:50%;flex:none;display:inline-flex;
  align-items:center;justify-content:center;font-size:10px;font-weight:800;margin-top:1px;color:#fff}
.st-ok{color:var(--ok)} .st-ok .ic{background:var(--ok)}
.st-bad{color:var(--bad)} .st-bad .ic{background:var(--bad)}
.st-warn{color:var(--warn)} .st-warn .ic{background:var(--warn)}
.st-warn a{color:var(--lime);cursor:pointer;text-decoration:underline;pointer-events:auto}
.captured{display:none;align-items:center;gap:7px;background:var(--surface2);
  border:1px solid var(--border);border-radius:8px;padding:7px 11px;font-size:12px;
  color:var(--muted);margin:4px 0 12px}
.captured.show{display:flex;animation:rise .35s ease}
.captured .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;
  animation:pulse 1.6s ease infinite}
.captured b{color:var(--ink)}
.submit{width:100%;margin-top:4px}
/* disabled = neutral surface, no lime tint; enabled = full lime, dark text */
.btn.submit[disabled]{background:var(--surface2);color:var(--faint);cursor:default;
  box-shadow:inset 0 0 0 1px var(--border)}

/* ---- booking step (simulated scheduler: computed weekdays + sample slots,
   zero external calls; a customer form wires this step to their real booking
   link) ----------------------------------------------------------------------- */
.cal{display:none;margin-top:4px}
.cal.show{display:block;animation:rise .4s ease}
.cal .d{font-size:12.5px;color:var(--muted);font-weight:500;margin-bottom:10px}
.sched{min-width:0}
.days-row{display:flex;align-items:stretch;gap:6px;min-width:0}
.chev{flex:none;width:26px;border:1px solid var(--border);background:var(--surface2);
  color:var(--muted);border-radius:8px;cursor:pointer;font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0 0 2px;font-family:inherit}
.chev:hover{color:var(--ink);border-color:var(--faint)}
.chev:disabled{opacity:.35;cursor:default}
.days{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;min-width:0;flex:1;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px;cursor:grab}
.days::-webkit-scrollbar{display:none}
.days.dragging{scroll-snap-type:none;cursor:grabbing}
.day{flex:none;scroll-snap-align:start;border:1px solid var(--border);background:var(--surface2);
  color:var(--muted);border-radius:9px;padding:7px 0;width:64px;text-align:center;cursor:pointer;
  font-family:inherit}
.day .dw{display:block;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.day .dd{display:block;font-size:11.5px;margin-top:1px}
.day:hover{border-color:var(--faint);color:var(--ink)}
.day.sel{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
@media(max-width:400px){.slots{grid-template-columns:repeat(2,1fr)}}
.slot{border:1px solid var(--border);background:var(--surface2);color:var(--ink);
  border-radius:8px;padding:8px 4px;font-size:12px;font-weight:600;cursor:pointer;
  font-family:inherit;font-variant-numeric:tabular-nums;text-align:center;
  animation:rise .25s ease}
.slot:hover{border-color:var(--faint)}
.slot.pick{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.sched-note{font-size:11.5px;color:var(--faint);margin-top:10px}
.cal-fallback{font-size:13px;color:var(--muted);background:var(--surface2);
  border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-top:4px}
.cal-skip{display:inline-block;font-size:12.5px;color:var(--muted);text-decoration:underline;
  cursor:pointer;margin-top:10px}
.cal-skip:hover{color:var(--ink)}
.booked{display:none;margin-top:14px;align-items:center;gap:10px}
.booked.show{display:flex;animation:rise .4s ease}
.booked .ring{width:34px;height:34px;border-radius:50%;background:var(--ok);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;flex:none;
  animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
.booked .t{font-size:13.5px;font-weight:650}
.booked .s{font-size:12px;color:var(--muted)}
.closer{display:none;margin-top:16px;border-top:1px solid var(--border);padding-top:14px}
.closer.show{display:block;animation:rise .45s ease}
.closer p{font-size:13px;color:var(--muted);margin:0 0 12px;line-height:1.5}
.closer p b{color:var(--ink)}
.closer .row{display:flex;gap:8px;flex-wrap:wrap}
.closer .btn{flex:1;text-align:center;white-space:nowrap}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{from{transform:scale(.4)}to{transform:scale(1)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---- trust row + stats strip ------------------------------------------------- */
.trust{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:56px 0 0;
  color:var(--faint);font-size:13px}
.trust .sep{color:var(--border)}
.strip{display:flex;gap:36px;flex-wrap:wrap;margin:16px 0 0;padding:22px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stat .v{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .k{font-size:12px;color:var(--faint)}

/* ---- feature blocks ---------------------------------------------------------- */
section.blk{margin-top:80px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:880px){section.blk{grid-template-columns:1fr;gap:28px}}
h2{font-size:26px;letter-spacing:-.015em;margin:0 0 12px;text-wrap:balance}
.blk p{color:var(--muted);margin:0 0 12px;max-width:52ch}
.blk .mock{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:18px;font-size:13px}
.ledger{display:flex;flex-direction:column;gap:8px}
.lrow{display:flex;justify-content:space-between;gap:10px;border:1px solid var(--border);
  border-radius:8px;padding:9px 12px;font-size:12.5px;background:var(--bg)}
.lrow .who{font-weight:600}
.lrow .tag{font-size:11px;font-weight:600}
.tag.p{color:var(--warn)} .tag.q{color:var(--ok)}
.scan{display:flex;gap:8px;margin-top:14px}
.scan input{flex:1;min-width:0}

/* ---- pricing (restored #pricing anchor: beta terms, no fake tiers) ---------- */
section.pricing{margin-top:80px}
.psub{color:var(--muted);margin:0 0 20px;max-width:52ch}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:880px){.plans{grid-template-columns:1fr}}
.plan{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px}
.plan h3{margin:0 0 8px;font-size:16px;letter-spacing:-.01em}
.plan p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}

/* ---- closer + footer ---------------------------------------------------------- */
footer.cta{margin-top:90px;text-align:center;border:1px solid var(--border);border-radius:16px;
  padding:48px 24px;background:var(--surface)}
footer.cta h2{margin-bottom:8px}
footer.cta p{color:var(--muted);margin:0 0 20px}
footer.cta .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.footer{color:var(--muted);font-size:13px;padding:40px 0 70px;margin-top:70px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--border)}
.footer .word{font-family:var(--mono);color:var(--ink)}
.footer a:hover{color:var(--ink)}

/* ---- reduced motion: no theater, nothing hidden ------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}