/* Cobalt ERP marketing site — ported from the Claude Design prototype
   (Cobalt ERP Landing.html: variation B hero, light-themed, + variation A body). */

:root {
  --ink: #1c1f2e;
  --ink-soft: #5a6178;
  --ink-faint: #8a90a5;
  --indigo: #3d4bd0;
  --line: #dcdef0;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

a { color: inherit; text-decoration: none; }

.ms {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Offset anchor jumps so section titles aren't hidden behind the fixed header */
section[id], .hero { scroll-margin-top: 84px; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--indigo);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border-radius: 99px;
  padding: 13px 26px;
  box-shadow: 0 6px 18px rgba(61, 75, 208, .32);
  cursor: pointer;
  border: none;
  font-family: inherit;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(61, 75, 208, .38); }
.btn.sm { font-size: 13.5px; padding: 9px 20px; box-shadow: 0 4px 12px rgba(61, 75, 208, .28); }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px #c2c6e2, 0 4px 14px rgba(28, 31, 80, .08); }
.btn.dark { background: var(--ink); box-shadow: none; }
.btn.dark:hover { filter: brightness(1.25); box-shadow: none; }
.btn:disabled { opacity: .7; cursor: default; transform: none; }

/* ===== Hero ===== */
.hero {
  background: linear-gradient(160deg, #eef0fb 0%, #f7f4fc 55%, #fcf2f8 100%);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  padding-top: 64px; /* clear the fixed header, which overlays the top of the lavender */
  /* Text-only hero: a comfortable centred band, capped so it never floats in a
     huge empty space on tall monitors. */
  min-height: min(88vh, 680px);
  display: flex;
  align-items: center;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 420px at 80% -10%, rgba(123, 79, 214, .12), transparent 65%),
    radial-gradient(700px 420px at 8% 110%, rgba(61, 75, 208, .10), transparent 60%);
  pointer-events: none;
}
.hero-wrap { max-width: 1520px; width: 100%; margin: 0 auto; padding: 0 clamp(20px, 3vw, 44px); position: relative; }
.hero .btn { font-weight: 800; }

/* ===== Sticky site header — fixed so it's always on screen ===== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.site-header-in {
  max-width: 1520px;
  margin: 0 auto;
  padding: 16px clamp(20px, 3vw, 44px);
  display: flex;
  align-items: center;
  gap: 28px;
}
/* Frosted backdrop once the page scrolls under the bar (toggled by main.js) */
.site-header.scrolled {
  background: rgba(247, 245, 251, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: rgba(28, 31, 80, .07);
  box-shadow: 0 6px 24px -10px rgba(28, 31, 80, .14);
}
.site-header .btn { font-weight: 800; }

.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.logo i {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, #5560e8, #7b4fd6);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-style: normal; font-weight: 800; font-size: 16px;
}
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; font-size: 14px; font-weight: 600; }
.nav-links a {
  padding: 8px 15px;
  border-radius: 99px;
  color: #454b61;
  transition: color .15s ease, background-color .15s ease;
}
.nav-links a:hover { color: var(--indigo); background: rgba(61, 75, 208, .07); }
/* Active section highlight — pill matching the in-app active nav */
.nav-links a.active { color: var(--indigo); background: rgba(61, 75, 208, .12); }

.hero-grid {
  padding: 40px 0;
  position: relative;
}
/* Centred, single-column text hero */
.hero-copy {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-copy .hero-sub { max-width: 600px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); color: var(--indigo);
  font-size: 12.5px; font-weight: 700; border-radius: 99px; padding: 7px 16px;
}
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #43d684; }
.hero h1 {
  font-size: clamp(40px, 6.2vw, 76px); line-height: .98; letter-spacing: -.04em; font-weight: 800;
  margin: 26px 0 0; color: var(--ink); text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--indigo); }
.hero-sub { font-size: 18px; line-height: 1.65; color: var(--ink-soft); max-width: 480px; margin: 24px 0 0; text-wrap: pretty; }
.hero-ctas { display: flex; gap: 14px; margin-top: 32px; align-items: center; flex-wrap: wrap; }
.hero-fine { font-size: 12.5px; color: var(--ink-faint); margin-top: 14px; }

.hero-vis { position: relative; }
.hero-vis .mk-browser {
  transform: rotate(0.8deg);
  box-shadow:
    0 1px 2px rgba(28, 31, 80, .05),
    0 8px 18px -6px rgba(28, 31, 80, .10),
    0 34px 64px -20px rgba(28, 31, 80, .20),
    inset 0 1px 0 rgba(255, 255, 255, .7);
}
/* The SO card floats BELOW the approval rows (top clears the rows band ~y475),
   so it can never cover a customer name at any width — and it out-elevates the
   frame to read as the top layer. Scoped to .hero-vis; the WhatsApp card is unchanged. */
.hero-vis .mk-socard {
  position: absolute;
  left: -64px;
  bottom: -134px;
  width: 300px;
  transform: rotate(1.6deg);
  z-index: 2;
  border-radius: 16px;
  border: 1px solid rgba(28, 31, 80, .10);
  background: linear-gradient(180deg, #ffffff, #fcfcff);
  box-shadow:
    0 2px 4px rgba(28, 31, 80, .06),
    0 10px 20px -8px rgba(28, 31, 80, .14),
    0 44px 70px -22px rgba(28, 31, 80, .34),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}
.hero-shot { width: 560px; max-width: none; }
.hero-shot-in { width: 760px; zoom: 0.7368; }

/* On large screens, give the hero copy a touch more presence. */
@media (min-width: 1200px) {
  .hero-sub { font-size: 19px; }
  .hero-ctas { margin-top: 36px; }
  .hero .btn { font-size: 16px; padding: 16px 30px; }
}

/* ===== Sections (body) ===== */
.wrap { max-width: 1520px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 44px); }
.sec { padding: clamp(56px, 7vw, 92px) 0; }
.sec.pt0 { padding-top: 0; }
.sec.pt8 { padding-top: 8px; }
.sec.pb0 { padding-bottom: 0; }

.kicker { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo); }
.sec h2 { font-size: clamp(28px, 3.5vw, 40px); line-height: 1.12; letter-spacing: -.03em; font-weight: 800; margin: 12px 0 0; text-wrap: balance; }
.secsub { font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); max-width: 620px; margin: 16px 0 0; text-wrap: pretty; }

/* Modules */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.feat-card { background: #f6f7fc; border-radius: 18px; padding: 26px 24px; }
.feat-card .ic {
  width: 42px; height: 42px; border-radius: 13px; background: #fff; color: var(--indigo);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(28, 31, 80, .08);
}
.feat-card .ic .ms { font-size: 21px; }
.feat-card b { display: block; font-size: 17.5px; font-weight: 800; letter-spacing: -.01em; margin: 16px 0 7px; }
.feat-card p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; text-wrap: pretty; }

/* WhatsApp panel */
.wa-panel {
  background: linear-gradient(160deg, #eef0fb, #f7f4fc 60%, #fcf2f8);
  border-radius: 28px;
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: center;
}
.wa-vis { position: relative; padding: 0 48px 70px 0; }
.wa-vis .mk-socard { position: absolute; right: -12px; bottom: 0; z-index: 2; }
.steps { display: flex; flex-direction: column; gap: 0; margin-top: 34px; }
.step { display: flex; gap: 16px; padding: 14px 0; align-items: flex-start; }
.step + .step { border-top: 1px solid rgba(28, 31, 80, .08); }
.step i {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
  background: var(--indigo); color: #fff; font-style: normal; font-weight: 800; font-size: 13.5px;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.step b { display: block; font-size: 15.5px; font-weight: 800; }
.step p { font-size: 13.5px; color: var(--ink-soft); margin: 3px 0 0; line-height: 1.55; }

/* Accounting beta */
.beta-tag {
  font-size: 11px; font-weight: 800; color: #b87514; background: #fdf0d5;
  border: 1px solid #f3ddae; border-radius: 99px; padding: 3px 10px;
  letter-spacing: .06em; vertical-align: middle; margin-left: 10px;
}
.chiprow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; background: #fff;
  border: 1px solid var(--line); border-radius: 99px; padding: 8px 16px;
  font-size: 13px; font-weight: 700; color: #454b61;
}
.chip .ms { font-size: 15px; color: var(--indigo); }
.acct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; align-items: start; }

/* Customisation + migration */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
.fit-card { background: #f6f7fc; border-radius: 22px; padding: 34px 32px; }
.fit-card .ic {
  width: 46px; height: 46px; border-radius: 14px; background: #fff; color: var(--indigo);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(28, 31, 80, .08);
}
.fit-card .ic .ms { font-size: 23px; }
.fit-card b.t { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 18px 0 10px; }
.fit-card > p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 18px; text-wrap: pretty; }
.pts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; padding: 0; margin: 0; list-style: none; }
.pts li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pts .ms { font-size: 15px; color: #1d8a4e; }

/* Pricing */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; align-items: stretch; }
.tier { background: #fff; border: 1.5px solid #e4e6f2; border-radius: 22px; padding: 30px 28px; display: flex; flex-direction: column; }
.tier.hot { border-color: var(--indigo); box-shadow: 0 18px 44px -12px rgba(61, 75, 208, .25); position: relative; }
.hot-tag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--indigo); color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .06em; border-radius: 99px; padding: 4px 14px;
}
.tier .n { font-size: 15px; font-weight: 800; }
.tier .p { font-size: 40px; font-weight: 800; letter-spacing: -.03em; margin-top: 10px; }
.tier .p small { font-size: 14px; font-weight: 600; color: var(--ink-faint); letter-spacing: 0; }
.tier .d { font-size: 13.5px; color: var(--ink-soft); margin: 8px 0 18px; line-height: 1.5; }
.tier ul {
  list-style: none; padding: 18px 0 0; margin: 0 0 24px;
  border-top: 1px solid #f0f1f7; display: flex; flex-direction: column; gap: 9px; flex: 1;
}
.tier li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 600; }
.tier li .ms { font-size: 15px; color: #1d8a4e; }
.tier-cta { justify-content: center; }

/* Waitlist CTA */
.cta-panel {
  background: linear-gradient(150deg, #3d4bd0, #5a48cf 60%, #7b4fd6);
  border-radius: 28px;
  padding: 72px 56px;
  text-align: center;
  color: #fff;
}
.cta-panel h2 { color: #fff; font-size: clamp(30px, 4.4vw, 44px); margin: 0; }
.cta-panel p { color: rgba(255, 255, 255, .85); font-size: 16.5px; max-width: 520px; margin: 14px auto 0; line-height: 1.6; }
.cta-signup { margin-top: 30px; }
.email-form { display: flex; gap: 10px; max-width: 480px; margin: 30px auto 0; }
.email-form input {
  flex: 1; min-width: 0; border: none; border-radius: 99px; padding: 15px 24px;
  font-size: 15px; font-family: inherit; outline: none;
}
.email-form input:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }
.email-form input.invalid { box-shadow: 0 0 0 3px rgba(255, 120, 120, .75); }
.email-success {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  max-width: 480px; margin: 30px auto 0; background: #fff; color: #1d7a46;
  font-weight: 700; font-size: 15px; border-radius: 99px; padding: 15px 24px;
}
.email-success[hidden] { display: none; }
.email-err { font-size: 13px; font-weight: 600; color: #ffd7d7; margin-top: 12px; }
.cta-panel .fine { font-size: 12.5px; color: rgba(255, 255, 255, .65); margin-top: 14px; }

/* Footer */
.foot { display: flex; align-items: center; justify-content: space-between; padding: 30px 0 36px; font-size: 13px; color: var(--ink-faint); }
.foot-logo { font-size: 15px; }
.foot-logo i { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }

/* ===================================================================
   Recreated UI mocks (.mk-*) — verbatim from the design prototype
   =================================================================== */
.mk { font-family: 'Plus Jakarta Sans', sans-serif; color: #1c1f2e; -webkit-font-smoothing: antialiased; text-align: left; }
.mk .ms { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ---- browser chrome ---- */
.mk-browser {
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(28, 31, 80, .06), 0 24px 60px -12px rgba(28, 31, 80, .22);
  border: 1px solid rgba(28, 31, 80, .08);
}
.mk-browser-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f4f5fb; border-bottom: 1px solid rgba(28, 31, 80, .07); }
.mk-browser-dots { display: flex; gap: 6px; }
.mk-browser-dots span {
  width: 10px; height: 10px; border-radius: 50%; background: #d4d7ea;
  box-shadow: inset 0 -1px 1px rgba(28, 31, 80, .10), inset 0 1px 1px rgba(255, 255, 255, .6);
}
.mk-browser-url {
  flex: 0 1 320px; margin: 0 auto; background: #fff; border: 1px solid rgba(28, 31, 80, .08);
  border-radius: 99px; font-size: 11px; color: #7a8095; padding: 4px 12px 4px 10px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  box-shadow: inset 0 1px 2px rgba(28, 31, 80, .04);
}
.mk-browser-url .ms { font-size: 11px; color: #9aa0b5; }

/* ---- app frame ---- */
.mk-app { display: flex; gap: 10px; background: linear-gradient(135deg, #eef0fb 0%, #f6f3fb 60%, #fbf2f7 100%); padding: 10px; font-size: 12px; }
.mk-side { width: 178px; flex: 0 0 auto; background: rgba(255, 255, 255, .85); border-radius: 12px; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.mk-side-co { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; padding: 0 4px; }
.mk-side-logo {
  width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, #5560e8, #7b4fd6);
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.mk-side-co b { font-size: 12px; display: block; line-height: 1.2; }
.mk-side-co small { font-size: 9.5px; color: #7a8095; }
.mk-side-h { font-size: 9px; font-weight: 700; letter-spacing: .08em; color: #9aa0b5; margin: 9px 4px 3px; }
.mk-nav { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; color: #454b61; font-weight: 600; font-size: 11.5px; }
.mk-nav .ms { font-size: 15px; color: #5a6178; }
.mk-nav.on { background: #e3e6fb; color: #3340c0; }
.mk-nav.on .ms { color: #3d4bd0; }
.mk-beta {
  font-size: 8px; font-weight: 700; color: #b87514; background: #fdf0d5; border: 1px solid #f3ddae;
  border-radius: 99px; padding: 1px 6px; margin-left: 4px; letter-spacing: .04em;
}
.mk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mk-greet { font-size: 11px; font-weight: 600; color: #565c74; }
.mk-main .mk-h2 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 1px 0 0; }
.mk-main-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.mk-btn-pri {
  display: inline-flex; align-items: center; gap: 5px; background: #3d4bd0; color: #fff;
  font-weight: 700; font-size: 11.5px; border-radius: 99px; padding: 8px 14px;
  white-space: nowrap; flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(61, 75, 208, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.mk-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mk-stat { background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 1px 3px rgba(28, 31, 80, .05); }
.mk-stat-ic { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.mk-stat-ic .ms { font-size: 14px; }
.mk-stat b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; display: block; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.mk-stat small { font-size: 10px; color: #6a7088; display: block; margin-top: 1px; }
.mk-up { color: #1d8a4e; font-size: 9.5px; font-weight: 700; margin-top: 4px; display: inline-flex; align-items: center; gap: 2px; }
.mk-up .ms { font-size: 12px; }
.mk-list { background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 1px 3px rgba(28, 31, 80, .05); }
.mk-list-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mk-list-h .mk-stat-ic { margin: 0; }
.mk-list-h b { font-size: 12.5px; }
.mk-list-h small { display: block; font-size: 10px; color: #6a7088; }
.mk-row { display: flex; align-items: center; gap: 9px; padding: 7px 2px; border-top: 1px solid #f0f1f7; }
.mk-av { width: 24px; height: 24px; border-radius: 8px; color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mk-row-t { flex: 1; min-width: 0; }
.mk-row-t b { font-size: 11.5px; display: block; line-height: 1.25; }
.mk-row-t small { font-size: 9.5px; color: #7a8095; }
.mk-amt { font-weight: 800; font-size: 11.5px; text-align: right; flex: 0 0 64px; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.mk-amt small { display: block; font-weight: 500; color: #7a8095; font-size: 8.5px; }
.mk-reject { color: #c43c3c; font-weight: 700; font-size: 10.5px; }
.mk-approve { display: inline-flex; align-items: center; gap: 4px; background: #3d4bd0; color: #fff; font-weight: 700; font-size: 10.5px; border-radius: 99px; padding: 5px 11px; }
.mk-approve .ms { font-size: 11px; }

/* ---- whatsapp phone ---- */
.mk-phone {
  width: 280px; background: #0c0c0e; border-radius: 42px; padding: 6px;
  box-shadow: 0 0 0 1.5px #2a2a2e, 0 2px 6px rgba(15, 25, 40, .18), 0 34px 80px -18px rgba(15, 25, 40, .55);
}
.mk-phone-scr { background: #dcd4c8; border-radius: 36px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.mk-status {
  background: #075e54; color: #fff; display: flex; align-items: center; justify-content: space-between;
  padding: 9px 20px 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
}
.mk-status .r { display: flex; align-items: center; gap: 5px; }
.mk-status .r .ms { font-size: 14px; }
.mk-wa-head { background: #075e54; color: #fff; display: flex; align-items: center; gap: 9px; padding: 5px 12px 11px; }
.mk-wa-head .bk { font-size: 20px; margin: 0 -2px 0 -4px; opacity: .95; }
.mk-wa-av {
  width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #5560e8, #7b4fd6);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex: 0 0 auto;
}
.mk-wa-head b { font-size: 13px; display: block; line-height: 1.2; }
.mk-wa-head small { font-size: 10px; opacity: .78; }
.mk-wa-head .acts { margin-left: auto; display: flex; gap: 15px; opacity: .95; }
.mk-wa-head .acts .ms { font-size: 18px; }
.mk-wa-body {
  padding: 14px 11px; display: flex; flex-direction: column; gap: 8px; flex: 1;
  background: #d9d0c4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='%23cabfae' fill-opacity='.4'%3E%3Ccircle cx='8' cy='8' r='1.4'/%3E%3Ccircle cx='28' cy='22' r='1.4'/%3E%3Ccircle cx='18' cy='34' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
}
.mk-bub { max-width: 82%; border-radius: 12px; padding: 8px 11px; font-size: 11px; line-height: 1.45; position: relative; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); }
.mk-bub small { display: block; text-align: right; font-size: 8.5px; color: rgba(0, 0, 0, .4); margin-top: 2px; }
.mk-bub.in { background: #fff; align-self: flex-start; border-top-left-radius: 3px; }
.mk-bub.out { background: #d7f8c8; align-self: flex-end; border-top-right-radius: 3px; }
.mk-bub.out small { color: rgba(7, 94, 84, .55); }
.mk-bub table { width: 100%; border-collapse: collapse; margin: 5px 0 2px; font-size: 10.5px; }
.mk-bub td { padding: 2px 0; }
.mk-bub td:last-child { text-align: right; font-weight: 700; }
.mk-bub .tot td { border-top: 1px solid rgba(0, 0, 0, .12); padding-top: 4px; font-weight: 800; }
.mk-bub .ok { color: #0a7d43; font-weight: 700; }
.mk-wa-input { display: flex; align-items: center; gap: 8px; padding: 8px 11px 12px; background: #d9d0c4; }
.mk-wa-field {
  flex: 1; background: #fff; border-radius: 99px; padding: 9px 14px; font-size: 11px; color: #8a8f98;
  display: flex; align-items: center; justify-content: space-between;
}
.mk-wa-field .ms { font-size: 16px; color: #8a8f98; }
.mk-wa-send { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: #075e54; color: #fff; display: flex; align-items: center; justify-content: center; }
.mk-wa-send .ms { font-size: 18px; }

/* ---- created SO card ---- */
.mk-socard {
  background: #fff; border-radius: 14px; padding: 16px;
  box-shadow: 0 2px 6px rgba(28, 31, 80, .06), 0 18px 44px -10px rgba(28, 31, 80, .2);
  border: 1px solid rgba(28, 31, 80, .08); width: 300px; max-width: calc(100vw - 32px);
}
.mk-socard-top { display: flex; align-items: center; gap: 8px; }
.mk-socard-top b { font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.mk-pill { font-size: 9px; font-weight: 700; border-radius: 99px; padding: 3px 9px; display: inline-flex; align-items: center; gap: 4px; }
.mk-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mk-pill.sub { color: #9a6a10; background: #fbf1d9; }
.mk-pill.ok { color: #1d7a46; background: #ddf2e5; }
.mk-pill.wa { color: #0a7d43; background: #ddf6e8; }
.mk-socard dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 12px 0; padding: 11px 0; border-top: 1px solid #f0f1f7; border-bottom: 1px solid #f0f1f7; }
.mk-socard dt { font-size: 8.5px; font-weight: 700; letter-spacing: .07em; color: #9aa0b5; }
.mk-socard dd { font-size: 11.5px; font-weight: 700; margin: 2px 0 0; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.mk-incl { font-weight: 500; color: #7a8095; font-size: 9px; }
.mk-socard-foot { display: flex; align-items: center; justify-content: space-between; }
.mk-socard-foot .mk-reject { font-size: 11px; }

/* ---- accounting minis ---- */
.mk-acct { background: #fff; border-radius: 13px; padding: 14px; box-shadow: 0 1px 3px rgba(28, 31, 80, .06); border: 1px solid rgba(28, 31, 80, .06); font-size: 11px; }
.mk-acct-h { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; font-weight: 800; font-size: 12px; }
.mk-acct-h .mk-stat-ic { margin: 0; width: 24px; height: 24px; }
.mk-acct-row { display: flex; justify-content: space-between; gap: 10px; padding: 5.5px 0; border-top: 1px solid #f0f1f7; }
.mk-acct-row span:first-child { color: #454b61; }
.mk-acct-row b { font-variant-numeric: tabular-nums; }
.mk-code { font-size: 9.5px; font-weight: 700; color: #7a8095; font-variant-numeric: tabular-nums; margin-right: 7px; }
.mk-ok-dot { color: #1d8a4e; font-weight: 700; }

/* ===================================================================
   Responsive — the prototype was desktop-only; these adapt it down.
   =================================================================== */
@media (max-width: 1080px) {
  .hero { min-height: 0; }
  .hero-grid { padding: 40px 0 56px; }
  .hero-copy .hero-sub { max-width: 560px; }
}

@media (max-width: 1000px) {
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .wa-panel { grid-template-columns: 1fr; padding: 48px 36px; gap: 48px; }
  .wa-vis { margin: 0 auto; }
  .acct-grid { grid-template-columns: repeat(2, 1fr); }
  .acct-grid > :last-child { grid-column: 1 / -1; }
  .fit-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; gap: 26px; }
}

@media (max-width: 820px) {
  .nav-links { display: none; }
}

@media (max-width: 720px) {
  .site-header-in { padding-top: 14px; padding-bottom: 14px; }
  .hero-grid { padding: 32px 0 56px; }
  .wa-panel { padding: 40px 22px; border-radius: 22px; }
  .wa-vis { padding: 0 0 90px; }
  .wa-vis .mk-socard { right: 50%; transform: translateX(50%); }
  .acct-grid { grid-template-columns: 1fr; }
  .acct-grid > :last-child { grid-column: auto; }
  .pts { grid-template-columns: 1fr; }
  .cta-panel { padding: 56px 26px; border-radius: 22px; }
  .email-form { flex-direction: column; }
  .email-form .btn { width: 100%; }
  .foot { flex-direction: column; gap: 12px; padding: 26px 0 32px; }
}

/* ===================================================================
   Typewriter headline
   =================================================================== */
.hero-headline { min-height: 1.96em; } /* reserve two lines so typing doesn't reflow */
.tw-caret {
  display: inline-block;
  width: 3px;
  height: 0.82em;
  background: var(--indigo);
  border-radius: 1px;
  margin-left: 3px;
  vertical-align: -0.06em;
  animation: tw-blink 1s step-end infinite;
}
@keyframes tw-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tw-caret { display: none; } }

/* ===================================================================
   Hero mock — Sales-order detail (SO-00005), recreated from the app
   =================================================================== */
.mk-so-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mk-so-title { display: flex; align-items: center; gap: 8px; }
.mk-so-back {
  width: 24px; height: 24px; border-radius: 50%; background: #fff; flex: 0 0 auto;
  box-shadow: 0 1px 3px rgba(28, 31, 80, .08); display: flex; align-items: center; justify-content: center; color: #5a6178;
}
.mk-so-back .ms { font-size: 14px; }
.mk-so-id { font-size: 18px; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.mk-so-date { font-size: 10px; color: #7a8095; margin-top: 1px; }
.mk-so-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.mk-so-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; border-radius: 99px; padding: 7px 12px; white-space: nowrap; }
.mk-so-btn .ms { font-size: 13px; }
.mk-so-btn.ghost { background: #fff; color: #454b61; box-shadow: inset 0 0 0 1px #e4e6f2; }
.mk-so-btn.pri { background: #3d4bd0; color: #fff; box-shadow: 0 4px 12px rgba(61, 75, 208, .3); }

.mk-so-warn {
  display: flex; align-items: center; gap: 9px; background: #fff; border-radius: 12px;
  padding: 10px 12px; box-shadow: 0 1px 3px rgba(28, 31, 80, .05); position: relative; overflow: hidden;
}
.mk-so-warn::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #c43c3c; }
.mk-so-warn .wi { color: #c43c3c; font-size: 16px; flex: 0 0 auto; }
.mk-so-warn > div { flex: 1; font-size: 10.5px; line-height: 1.45; color: #6a7088; }
.mk-so-warn b { color: #c43c3c; font-weight: 800; }
.mk-so-addstock {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: #454b61;
  background: #fff; box-shadow: inset 0 0 0 1px #e4e6f2; border-radius: 99px; padding: 6px 10px; white-space: nowrap; flex: 0 0 auto;
}
.mk-so-addstock .ms { font-size: 12px; }

.mk-so-info {
  background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 1px 3px rgba(28, 31, 80, .05);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.mk-so-info .dt { display: block; font-size: 8px; font-weight: 700; letter-spacing: .07em; color: #9aa0b5; }
.mk-so-info .dd { display: block; font-size: 11px; font-weight: 700; margin-top: 3px; }
.mk-so-info .dd.link { color: #3d4bd0; }

.mk-so-gl {
  background: #fff; border-radius: 12px; padding: 11px 12px; box-shadow: 0 1px 3px rgba(28, 31, 80, .05);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.mk-so-gl-l b { font-size: 11.5px; font-weight: 800; display: block; }
.mk-so-gl-l small { font-size: 9px; color: #7a8095; }
.mk-so-glfield {
  display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; color: #1c1f2e;
  background: #fff; box-shadow: inset 0 0 0 1px #e4e6f2; border-radius: 8px; padding: 7px 10px; white-space: nowrap;
}
.mk-so-glfield .ms { font-size: 12px; color: #9aa0b5; }

.mk-so-table { background: #fff; border-radius: 12px; padding: 4px 12px; box-shadow: 0 1px 3px rgba(28, 31, 80, .05); }
.mk-so-row {
  display: grid; grid-template-columns: 16px 64px 1fr 52px 70px 44px 80px; gap: 8px; align-items: center;
  padding: 8px 0; border-top: 1px solid #f0f1f7; font-size: 10.5px;
}
.mk-so-row:first-child { border-top: none; }
.mk-so-hd { font-size: 8px; font-weight: 700; letter-spacing: .04em; color: #9aa0b5; padding: 7px 0; }
.mk-so-row .mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 9px; color: #454b61; }
.mk-so-row .ta-c { text-align: center; }
.mk-so-row .ta-r { text-align: right; font-weight: 700; }
.mk-so-step { display: inline-flex; align-items: center; border: 1px solid #e4e6f2; border-radius: 7px; overflow: hidden; background: #fff; }
.mk-so-step i { width: 17px; height: 19px; display: flex; align-items: center; justify-content: center; font-style: normal; color: #9aa0b5; font-size: 12px; }
.mk-so-step b { min-width: 20px; text-align: center; font-size: 10px; font-weight: 800; border-left: 1px solid #eef0f6; border-right: 1px solid #eef0f6; line-height: 19px; }
.mk-so-ord-warn { display: flex; flex-direction: column; }
.mk-so-ord-warn em { font-style: normal; color: #c43c3c; font-size: 8px; font-weight: 700; line-height: 1.2; margin-top: 1px; }
.mk-so-tax { font-size: 8px; font-weight: 700; color: #7a8095; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mk-so-totals { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 2px 6px; }
.mk-so-totals > div { display: flex; gap: 28px; font-size: 11px; color: #6a7088; }
.mk-so-totals b { color: #1c1f2e; font-weight: 700; min-width: 66px; text-align: right; }
.mk-so-totals .tot { font-size: 13.5px; margin-top: 2px; }
.mk-so-totals .tot span, .mk-so-totals .tot b { font-weight: 800; color: #1c1f2e; }

/* ===================================================================
   "Live in under a week" timeline
   =================================================================== */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
.tl-step { background: #f6f7fc; border-radius: 18px; padding: 24px 22px; }
.tl-step.done { background: linear-gradient(160deg, #eef0fb, #f7f4fc); box-shadow: inset 0 0 0 1.5px #d8dcf5; }
.tl-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tl-day { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #3d4bd0; }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; background: #c9cef3; }
.tl-step.done .tl-dot { background: #3d4bd0; box-shadow: 0 0 0 3px rgba(61, 75, 208, .18); }
.tl-ic {
  width: 42px; height: 42px; border-radius: 13px; background: #fff; color: #3d4bd0;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(28, 31, 80, .08); margin-bottom: 14px;
}
.tl-ic .ms { font-size: 21px; }
.tl-step b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.tl-step p { font-size: 13px; line-height: 1.55; color: #5a6178; margin: 0; text-wrap: pretty; }

/* ===================================================================
   "Return on day one" stat cards
   =================================================================== */
.roi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.roi-card { background: #f6f7fc; border-radius: 18px; padding: 28px 24px; }
.roi-card.hot {
  background: linear-gradient(155deg, #3d4bd0, #5a48cf 60%, #7b4fd6); color: #fff;
  box-shadow: 0 18px 44px -14px rgba(61, 75, 208, .4);
}
.roi-big { font-size: 40px; font-weight: 800; letter-spacing: -.03em; color: #3d4bd0; line-height: 1; }
.roi-card.hot .roi-big { color: #fff; }
.roi-card b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; margin: 14px 0 7px; }
.roi-card p { font-size: 13px; line-height: 1.55; color: #5a6178; margin: 0; text-wrap: pretty; }
.roi-card.hot p { color: rgba(255, 255, 255, .82); }

@media (max-width: 1000px) {
  .timeline, .roi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .timeline, .roi-grid, .feat-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   Embedded interactive walkthrough (the demo "video")
   =================================================================== */
.btn .ms { font-size: 18px; }
/* Wider, featured "video" stage (slightly bigger than the text column) */
.demo-stage { max-width: 1520px; margin: 44px auto 0; padding: 0 clamp(20px, 3vw, 44px); }
.demo-embed {
  position: relative;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden; /* clip the video + cover to rounded corners */
  box-shadow: 0 44px 100px -30px rgba(28, 31, 80, .5), 0 0 0 1px rgba(28, 31, 80, .07);
}
.demo-embed iframe {
  width: 100%;
  height: 800px; /* pre-load default; main.js auto-sizes it to the video */
  border: 0;
  display: block;
  background: #0e1220;
}
/* Cover / poster with a big centred play button (SAP-style); fades when it plays */
.demo-cover {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  border: 0; cursor: pointer; color: #fff; font-family: inherit;
  background: radial-gradient(70% 70% at 50% 44%, rgba(14, 18, 32, .28), rgba(14, 18, 32, .58));
  transition: opacity .5s ease, visibility .5s;
}
.demo-cover .play-circle {
  width: 88px; height: 88px; border-radius: 50%;
  background: rgba(255, 255, 255, .18); border: 1.5px solid rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, background .2s ease;
}
.demo-cover .play-circle svg { margin-left: 5px; }
.demo-cover:hover .play-circle, .demo-cover:focus-visible .play-circle { transform: scale(1.07); background: rgba(255, 255, 255, .3); }
.demo-cover .cover-label { font-size: 15px; font-weight: 700; letter-spacing: .01em; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
.demo-embed.is-playing .demo-cover { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 720px) {
  .demo-cover .play-circle { width: 68px; height: 68px; }
  .demo-cover .play-circle svg { width: 24px; height: 24px; }
  .demo-cover .cover-label { font-size: 13px; }
}

/* ===================================================================
   Scroll-reveal — section headings and cards fade + rise into view.
   Hidden state is gated by .js-anim (set on <html> before paint) and
   disabled under .no-anim (reduced motion) or with no JS — so there's
   no flash and the content is always visible without animation support.
   =================================================================== */
.js-anim:not(.no-anim) .sec > .wrap > .kicker,
.js-anim:not(.no-anim) .sec > .wrap > h2,
.js-anim:not(.no-anim) .sec > .wrap > .secsub,
.js-anim:not(.no-anim) .feat-card,
.js-anim:not(.no-anim) .fit-card,
.js-anim:not(.no-anim) .roi-card,
.js-anim:not(.no-anim) .tier,
.js-anim:not(.no-anim) .tl-step,
.js-anim:not(.no-anim) .mk-acct,
.js-anim:not(.no-anim) .chiprow .chip,
.js-anim:not(.no-anim) .wa-panel,
.js-anim:not(.no-anim) .cta-panel,
.js-anim:not(.no-anim) .foot {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .6s cubic-bezier(.22, .61, .36, 1),
    transform .6s cubic-bezier(.22, .61, .36, 1),
    translate .32s cubic-bezier(.34, 1.56, .64, 1);
}
.js-anim .in { opacity: 1 !important; transform: none !important; }

/* ===================================================================
   Hover lift — a very subtle upward bounce on the page's cards/panels.
   Uses the independent `translate` property (not `transform`) so it
   composes with the scroll-reveal transform instead of fighting its
   `transform: none !important`. The soft-overshoot easing (set above on
   the reveal transition, and below for the no-JS case) gives the bounce.
   =================================================================== */
/* Pricing tiers and the closing CTA panel deliberately don't lift — they
   hold interactive forms/buttons, so a whole-box bounce got in the way. */
.feat-card,
.fit-card,
.roi-card,
.tl-step,
.mk-acct,
.wa-panel {
  transition: translate .32s cubic-bezier(.34, 1.56, .64, 1);
}
.feat-card:hover,
.fit-card:hover,
.roi-card:hover,
.tl-step:hover,
.mk-acct:hover,
.wa-panel:hover {
  translate: 0 -4px;
}
@media (prefers-reduced-motion: reduce) {
  .feat-card:hover, .fit-card:hover, .roi-card:hover,
  .tl-step:hover, .mk-acct:hover, .wa-panel:hover { translate: none; }
}

/* ===================================================================
   Apple-style "liquid glass" — subtle frosted, light-catching surfaces.
   Page chrome (cards, panels, badges, chips, header, ghost buttons) turns
   to translucent frosted glass with a bright rim; product mockups stay solid.
   =================================================================== */
:root {
  --glass-bg: rgba(255, 255, 255, .62);
  --glass-bg-2: rgba(255, 255, 255, .56);
  --glass-edge: rgba(255, 255, 255, .6);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, .9);
  --glass-fx: saturate(1.5) blur(14px);
  --glass-shadow: 0 18px 46px -22px rgba(28, 31, 80, .3);
}

/* faint colour wash behind the page so the frosted surfaces have something to refract */
body { background: #f8f8fd; }
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(720px 560px at 9% 5%, rgba(123, 79, 214, .08), transparent 60%),
    radial-gradient(700px 560px at 91% 18%, rgba(61, 75, 208, .07), transparent 60%),
    radial-gradient(780px 640px at 82% 97%, rgba(194, 80, 154, .055), transparent 62%),
    radial-gradient(660px 560px at 5% 93%, rgba(29, 138, 78, .045), transparent 60%);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .feat-card, .fit-card, .roi-card:not(.hot), .tier:not(.hot), .tl-step:not(.done) {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-fx);
    backdrop-filter: var(--glass-fx);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--glass-rim), var(--glass-shadow);
  }
  .tier.hot {
    background: var(--glass-bg-2);
    -webkit-backdrop-filter: var(--glass-fx);
    backdrop-filter: var(--glass-fx);
    box-shadow: var(--glass-rim), 0 24px 54px -16px rgba(61, 75, 208, .32);
  }
  .badge, .chip {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-fx);
    backdrop-filter: var(--glass-fx);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--glass-rim), 0 6px 16px -10px rgba(28, 31, 80, .22);
  }
  .btn.ghost {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-fx);
    backdrop-filter: var(--glass-fx);
    box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(255, 255, 255, .5), 0 6px 16px -10px rgba(28, 31, 80, .2);
  }
  .btn.ghost:hover { background: rgba(255, 255, 255, .68); }
  .site-header.scrolled {
    background: rgba(250, 250, 255, .66);
    -webkit-backdrop-filter: saturate(1.8) blur(18px);
    backdrop-filter: saturate(1.8) blur(18px);
    border-bottom-color: rgba(255, 255, 255, .5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 8px 26px -12px rgba(28, 31, 80, .14);
  }
}

/* coloured surfaces keep their fill but gain a bright glass rim of light */
.roi-card.hot { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 24px 54px -18px rgba(61, 75, 208, .46); }
.tl-step.done { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 0 0 1.5px #d8dcf5; }
.cta-panel { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .3), 0 28px 66px -22px rgba(61, 75, 208, .42); }
.wa-panel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 22px 54px -26px rgba(28, 31, 80, .2); }

/* ===================================================================
   Pricing "Join Waiting List" — the button morphs into an inline email
   field with the arrow tucked inside. Clicking outside (or Esc) collapses
   it back to the full button. The button stays in flow and defines the
   control height; the form + success note overlay it, so opening and
   closing animate in place and never shift the card layout.
   =================================================================== */
.wait-wrap { position: relative; width: 100%; }

/* Button — visible by default; fades/scales out when a field is revealed.
   The delayed `visibility` keeps it un-focusable once it has faded. */
.wait-btn {
  width: 100%; min-height: 48px;
  /* coming back: flip to visible immediately, then fade opacity in */
  transition: opacity .28s ease, transform .28s ease, visibility 0s, box-shadow .15s ease;
}
/* Hover: a single uniform hairline ring — no glass rim or drop-shadow halo,
   so the outline is the same thin line all the way around. (Beats the
   .btn.ghost:hover rules on specificity, 0,4,0 > 0,3,0.) */
.btn.ghost.wait-btn:hover {
  box-shadow: inset 0 0 0 1px rgba(61, 75, 208, .5);
}
.wait-wrap.is-open .wait-btn,
.wait-wrap.is-done .wait-btn {
  opacity: 0; transform: scale(.97); visibility: hidden; pointer-events: none;
  /* fading out: stay visible through the fade, hide only after it finishes */
  transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
}

/* Form — overlays the button's footprint; hidden until .is-open. */
.wait-form {
  position: absolute; inset: 0;
  display: flex; align-items: stretch;
  opacity: 0; transform: scale(.97) translateY(4px); visibility: hidden; pointer-events: none;
  transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
}
.wait-wrap.is-open .wait-form {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity .28s cubic-bezier(.2,.7,.2,1), transform .28s cubic-bezier(.2,.7,.2,1), visibility 0s;
}

.wait-input {
  flex: 1; min-width: 0; height: 100%; padding: 0 52px 0 18px;
  border: 1.5px solid #e4e6f2; border-radius: 99px;
  font-size: 14.5px; font-family: inherit; color: var(--ink); outline: none;
  background: rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: saturate(1.5) blur(8px); backdrop-filter: saturate(1.5) blur(8px);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wait-input::placeholder { color: var(--ink-faint); }
.wait-input:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(61, 75, 208, .15); }
.wait-input.invalid { border-color: #c43c3c; box-shadow: 0 0 0 3px rgba(196, 60, 60, .15); }

/* Arrow — tucked inside the field, hard against the right edge. */
.wait-submit {
  position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--indigo); color: #fff; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -3px rgba(61, 75, 208, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: filter .15s ease, transform .15s ease;
}
@media (hover: hover) {
  .wait-submit:hover { filter: brightness(1.08); transform: translateY(-50%) scale(1.07); }
}
.wait-submit:active { transform: translateY(-50%) scale(.95); }
.wait-submit:disabled { opacity: .6; cursor: default; transform: translateY(-50%); }
.wait-submit .ms { font-size: 19px; }

/* Success note — overlays the same footprint once submitted. */
.wait-done {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 700; color: #1d7a46; text-align: center;
  opacity: 0; transform: scale(.97); visibility: hidden; pointer-events: none;
  transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
}
.wait-wrap.is-done .wait-done {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity .28s ease, transform .28s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .wait-btn, .wait-form, .wait-done { transition: visibility 0s !important; transform: none !important; }
}