/* Hero, live demo card, waitlist form (compact variant) */

.hero { padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5.5rem)); padding-bottom: clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__copy { display: grid; gap: 1.6rem; justify-items: start; }
.hero__copy h1 { max-width: 11.5em; }
.hero__form { width: 100%; max-width: 35rem; }
.hero__note { margin-top: -.5rem; }

/* One orchestrated entrance, then the page is still. */
.js [data-intro] { opacity: 0; transform: translateY(18px); animation: intro 900ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
.js [data-intro="0"] { --i: 0; } .js [data-intro="1"] { --i: 1; } .js [data-intro="2"] { --i: 2; } .js [data-intro="3"] { --i: 3; } .js [data-intro="4"] { --i: 4; }
@keyframes intro { to { opacity: 1; transform: none; } }

/* ---- Demo card ---- */
.demo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.demo__bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.demo__live { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-micro); font-weight: 600; color: var(--text-soft); }
.demo__rep { font-size: var(--fs-micro); color: var(--text-soft); }
.demo__rep b { color: var(--ink-900); font-weight: 600; }
.demo__tabs { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--page-deep); }
.demo__tabs button { border: 0; background: transparent; padding: .32rem .8rem; border-radius: 999px; font-size: var(--fs-micro); font-weight: 600; color: var(--text-soft); transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.demo__tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink-900); box-shadow: var(--shadow-sm); }

.demo__stage { position: relative; aspect-ratio: 1 / 0.86; background:
  radial-gradient(120% 90% at 50% 0%, #fff 0%, var(--mint-50) 60%, var(--mint-100) 100%); }
.demo__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo__brackets i, .cam__brackets i { position: absolute; width: 22px; height: 22px; border: 2px solid var(--line-strong); }
.demo__brackets i:nth-child(1), .cam__brackets i:nth-child(1) { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.demo__brackets i:nth-child(2), .cam__brackets i:nth-child(2) { top: 14px; right: 14px; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.demo__brackets i:nth-child(3), .cam__brackets i:nth-child(3) { bottom: 14px; left: 14px; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.demo__brackets i:nth-child(4), .cam__brackets i:nth-child(4) { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }

.demo__ghost { position: absolute; top: 14px; right: 44px; display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-micro); font-weight: 600; color: var(--text-soft); cursor: pointer; user-select: none; }
.demo__ghost input { position: absolute; opacity: 0; pointer-events: none; }
.switch { width: 30px; height: 18px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background var(--t-fast); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--t-fast) var(--ease-out); }
.demo__ghost input:checked + .switch { background: var(--teal-500); }
.demo__ghost input:checked + .switch::after { transform: translateX(12px); }
.demo__ghost input:focus-visible + .switch { outline: 2px solid var(--teal-500); outline-offset: 3px; }

/* Feedback toast, shared by hero, steps and features */
.toast { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: .65rem; padding: .7rem .95rem; border-radius: 14px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); box-shadow: var(--shadow-md); border: 1px solid var(--line); font-size: .92rem; font-weight: 500; color: var(--ink-900); transition: transform 420ms var(--ease-out), opacity 300ms, background 300ms, border-color 300ms; }
.toast p { line-height: 1.35; }
.toast__mark { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--teal-400); }
.toast[data-state="warn"] { background: #fff7f4; border-color: rgba(232,105,74,.35); }
.toast[data-state="warn"] .toast__mark { background: var(--alert); box-shadow: 0 0 0 4px rgba(232,105,74,.18); }
.toast[data-state="good"] { background: #f4fcf8; border-color: rgba(47,165,143,.4); }
.toast[data-state="good"] .toast__mark { background: var(--teal-500); box-shadow: 0 0 0 4px rgba(47,165,143,.18); }
.toast--static { position: static; backdrop-filter: none; box-shadow: var(--shadow-sm); }
.cam .toast--static { position: absolute; }

.demo__metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.metric { display: grid; gap: .1rem; padding: .85rem 1rem 1rem; border-left: 1px solid var(--line); min-width: 0; }
.metric:first-child { border-left: 0; }
.metric__label { font-size: var(--fs-micro); color: var(--text-faint); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric__val { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; letter-spacing: -.02em; color: var(--ink-900); transition: color 250ms; white-space: nowrap; }
.metric__val small { font-family: var(--font-body); font-size: .7rem; color: var(--text-faint); margin-left: .2rem; letter-spacing: 0; }
.metric__val.is-warn { color: var(--alert-ink); }
.demo__caption { margin-top: .85rem; text-align: center; }

/* Tech strip */
.stack { margin-top: clamp(3rem, 6vw, 5rem); display: flex; align-items: center; gap: 1.5rem 2rem; flex-wrap: wrap; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.stack__label { font-size: var(--fs-small); color: var(--text-faint); }
.stack__list { display: flex; flex-wrap: wrap; gap: .6rem 2.25rem; font-family: var(--font-display); font-size: 1.05rem; color: var(--ink-800); }

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__copy h1 { max-width: 13em; }
  .hero__demo { max-width: 640px; }
}
@media (max-width: 560px) {
  .demo__bar { justify-content: flex-start; }
  .demo__rep { margin-left: auto; }
  .demo__tabs { order: 3; width: 100%; }
  .demo__tabs button { flex: 1; }
  .demo__stage { aspect-ratio: 1 / 1; }
  .demo__ghost { right: 40px; }
  .demo__metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(3) { border-left: 0; }
  .metric:nth-child(n+3) { border-top: 1px solid var(--line); }
}