/* Marketing site */
.mk { --brand: #4f46e5; background: var(--bg); font-size: 16px; }
.mk-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.mk-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(14px); background: color-mix(in oklab, var(--bg) 78%, transparent); border-bottom: 1px solid transparent; transition: border-color .2s; }
.mk-nav.scrolled { border-bottom-color: var(--border); }
.mk-nav .mk-wrap { display: flex; align-items: center; gap: 32px; height: 68px; }
.mk-links { display: flex; gap: 28px; font-size: 14.5px; font-weight: 500; color: var(--muted); }
.mk-links a:hover { color: var(--text); }
.mk-nav .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.hero { position: relative; padding: 88px 0 40px; text-align: center; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto; height: 900px; z-index: -1;
  background:
    radial-gradient(600px 380px at 30% 30%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 70%),
    radial-gradient(500px 340px at 72% 22%, color-mix(in oklab, #06b6d4 18%, transparent), transparent 70%),
    radial-gradient(500px 300px at 55% 60%, color-mix(in oklab, #a855f7 14%, transparent), transparent 70%);
  filter: blur(10px);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px; opacity: .55;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 20%, #000, transparent 75%);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 6px; border-radius: 99px;
  border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 80%, transparent);
  font-size: 13.5px; font-weight: 500; color: var(--text-2); box-shadow: var(--shadow-sm);
}
.eyebrow b { background: var(--brand); color: #fff; font-size: 11.5px; padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.hero h1 { font-size: clamp(44px, 7.4vw, 84px); font-weight: 700; letter-spacing: -.055em; line-height: .98; margin: 26px auto 0; max-width: 940px; }
.hero h1 .grad { background: linear-gradient(100deg, var(--brand), #06b6d4 60%, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { font-size: 20px; color: var(--muted); max-width: 640px; margin: 24px auto 0; line-height: 1.55; }
.hero .ctas { display: flex; gap: 12px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.hero .fine { font-size: 13.5px; color: var(--faint); margin-top: 16px; }

/* product shot built in HTML */
.shot { position: relative; margin: 72px auto 0; max-width: 1080px; perspective: 2000px; }
.shot-frame {
  border-radius: 18px; border: 1px solid var(--border); background: var(--surface);
  box-shadow: 0 40px 100px -30px rgba(30, 27, 75, .35), 0 0 0 8px color-mix(in oklab, var(--surface) 50%, transparent);
  overflow: hidden; text-align: left; transform: rotateX(8deg); transform-origin: top center;
  animation: tilt 1.4s var(--ease) .2s both;
}
@keyframes tilt { from { transform: rotateX(22deg) translateY(30px); opacity: 0; } }
.shot-bar { height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.shot-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); }
.shot-bar .url { margin: 0 auto; font-size: 12px; color: var(--faint); padding: 3px 60px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); }
.shot-body { display: grid; grid-template-columns: 190px 1fr; min-height: 440px; font-size: 13px; }
.shot-side { border-right: 1px solid var(--border); padding: 14px 10px; background: var(--surface-2); }
.shot-side .nav-link { height: 30px; font-size: 12.5px; }
.shot-main { padding: 20px 24px; }
.shot .stat { padding: 14px 16px; }
.shot .stat-value { font-size: 24px; margin-top: 8px; }
.float {
  position: absolute; z-index: 2; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-lg); text-align: left;
  animation: float-in .8s var(--ease) both, bob 6s ease-in-out infinite 1.6s;
}
.float.notif { right: -28px; top: 90px; width: 300px; padding: 14px; display: flex; gap: 12px; align-items: center; animation-delay: .9s, 1.7s; }
.float.kiosk { left: -36px; bottom: -30px; width: 250px; padding: 20px; animation-delay: 1.1s, 1.9s; }
@keyframes float-in { from { opacity: 0; transform: translateY(20px) scale(.96); } }
@keyframes bob { 50% { transform: translateY(-8px); } }

.logos { padding: 72px 0 24px; text-align: center; }
.logos p { font-size: 13.5px; color: var(--faint); font-weight: 500; }
.logos .row { justify-content: center; gap: 48px; margin-top: 22px; flex-wrap: wrap; }
.logos span { font-weight: 700; font-size: 21px; letter-spacing: -.03em; color: var(--faint); opacity: .8; }

.mk-section { padding: 110px 0 0; }
.mk-head { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.mk-head .kicker { font-size: 13.5px; font-weight: 600; color: var(--brand); letter-spacing: .02em; }
.mk-head h2 { font-size: clamp(32px, 4.4vw, 50px); letter-spacing: -.045em; font-weight: 700; line-height: 1.05; margin-top: 12px; }
.mk-head p { font-size: 18px; color: var(--muted); margin-top: 16px; line-height: 1.55; }

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bento .tile { grid-column: span 2; padding: 28px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.bento .tile.wide { grid-column: span 3; }
.bento .tile.hero-tile { grid-column: span 4; background: linear-gradient(160deg, color-mix(in oklab, var(--brand) 8%, var(--surface)), var(--surface) 60%); }
.bento .tile .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); margin-bottom: 18px; }
.bento h3 { font-size: 18px; letter-spacing: -.02em; }
.bento p { color: var(--muted); margin-top: 8px; font-size: 15px; line-height: 1.55; }
.bento .demo { margin-top: 22px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: s; }
.steps > div { padding-top: 24px; border-top: 1px solid var(--border); }
.steps > div::before { counter-increment: s; content: "0" counter(s); font-family: var(--mono); font-size: 13px; color: var(--brand); font-weight: 600; }
.steps h3 { font-size: 19px; margin-top: 12px; letter-spacing: -.02em; }
.steps p { color: var(--muted); margin-top: 8px; line-height: 1.55; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.plan { padding: 32px; border-radius: 22px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.plan.featured { background: #0b0b0f; color: #fafafa; border-color: #0b0b0f; box-shadow: 0 30px 60px -20px rgba(15, 15, 30, .45); position: relative; }
[data-theme="dark"] .plan.featured { background: var(--surface-3); border-color: var(--brand); }
.plan.featured .muted, .plan.featured li { color: #a1a1aa; }
.plan .tagline { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); }
.plan.featured .tagline { color: #a5b4fc; }
.plan h3 { font-size: 20px; }
.plan .price { font-size: 48px; font-weight: 700; letter-spacing: -.05em; margin: 18px 0 2px; line-height: 1; }
.plan .price small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.plan ul { list-style: none; padding: 0; margin: 24px 0 28px; display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; }
.plan li { display: flex; gap: 10px; align-items: center; color: var(--text-2); }
.plan li .icon { color: var(--green); }
.plan .btn { margin-top: auto; }
.plan.featured .btn-primary { --brand: #fff; --brand-fg: #0b0b0f; box-shadow: none; }

.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--border); padding: 20px 0; }
.faq summary { font-weight: 600; font-size: 17px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 22px; color: var(--muted); transition: transform .2s; line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--muted); margin-top: 12px; line-height: 1.65; }

.cta-band { margin: 120px 0 0; padding: 72px 40px; border-radius: 28px; text-align: center; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(600px 300px at 20% 0%, color-mix(in oklab, var(--brand) 80%, white), transparent 70%), radial-gradient(600px 300px at 90% 100%, #0891b2, transparent 70%), var(--brand); }
.cta-band h2 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.045em; font-weight: 700; }
.cta-band p { opacity: .85; font-size: 18px; margin-top: 12px; }
.cta-band .btn { --_bg: #fff; --_fg: #0b0b0f; --_bd: transparent; margin-top: 28px; }

.mk-foot { padding: 64px 0 48px; margin-top: 80px; border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; }
.mk-foot .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.mk-foot h4 { color: var(--text); font-size: 13.5px; margin-bottom: 14px; }
.mk-foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mk-foot a:hover { color: var(--text); }

/* signup */
.signup-plan { padding: 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }

@media (max-width: 900px) {
  .mk-links { display: none; }
  .bento .tile, .bento .tile.wide, .bento .tile.hero-tile { grid-column: span 6; }
  .steps, .plans { grid-template-columns: 1fr; }
  .shot-body { grid-template-columns: 1fr; } .shot-side { display: none; }
  .float { display: none; }
  .mk-foot .cols { grid-template-columns: 1fr 1fr; }
  .shot-frame { transform: none; }
}