/* kwm-1 KyberWatch marketing v2. KyberCopy style guide + Joe's reference (28px panels, 20px tiles, pills,
   black primary, lime #B4E373 accent). Motion: transform/opacity only, gated on html.m (off under
   prefers-reduced-motion, where every scene shows its final frame). */
@font-face { font-family: "Geist"; src: url("/assets/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Fallback"; src: local("Arial"); size-adjust: 104%; ascent-override: 93%; descent-override: 24%; line-gap-override: 0%; }
:root {
  --canvas: #f5f4f2; --paper: #fff; --paper-2: #f9f8f6; --paper-3: #f0efec;
  --ink: #161513; --ink-2: #5f5d59; --ink-3: #64625e; --line: #ebeae7; --line-2: #dedcd8;
  --slate: #0f1115; --slate-2: #1f2228; --lime: #b4e373; --lime-soft: #d6f0b0; --lime-tint: #f1f9e6; --lime-ink: #233512;
  --ok: #23703c; --ok-tint: #e3f4e7; --warn-ink: #8a5300; --warn-tint: #fdf0dc; --red: #c5332b; --red-tint: #fbe5e3; --info: #2f5fb8; --info-tint: #e6eefb;
  --r-panel: 28px; --r-tile: 20px; --shadow: 0 1px 2px rgb(20 18 14 / .04), 0 8px 24px -12px rgb(20 18 14 / .10);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.084 26.4%, 1.08 29.2%, 1.025 39.5%, 1.004 47.4%, .997 60%, 1);
  --spring-soft: linear(0, .028 2%, .11 4.5%, .45 12%, .74 20%, .9 28%, .97 37%, 1.002 50%, 1);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--slate); color: var(--ink); font: 400 16px/1.55 "Geist", "Geist Fallback", system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--lime); color: var(--lime-ink); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--slate); color: #fff; padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; border-radius: 12px; }
#top-sentinel { position: absolute; top: 0; height: 24px; width: 1px; }

/* curtain: the canvas sheet with rounded bottom corners scrolls off the slate footer */
.curtain { position: relative; z-index: 1; background: var(--canvas); border-radius: 0 0 40px 40px; padding-bottom: 24px; }
main { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* buttons + chips */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; font: 500 14px/1 inherit; font-family: inherit; text-decoration: none; white-space: nowrap; transition: background-color .18s, color .18s, transform .18s var(--ease-out), box-shadow .18s; }
.btn:active { transform: scale(.97); }
.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
.btn-primary { background: var(--slate); color: #fff; }
.btn-primary:hover { background: var(--slate-2); }
.btn-white { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-white:hover { background: var(--paper-2); }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { color: var(--ink); background: var(--paper-2); }
.arr { display: inline-block; overflow: hidden; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-lime { background: var(--lime); color: var(--lime-ink); }
.chip-ok { background: var(--ok-tint); color: var(--ok); }
.chip-xs { height: 24px; padding: 0 10px; font-size: 12px; gap: 6px; }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill-on { background: var(--lime); color: var(--lime-ink); }
.pill-ok { background: var(--ok-tint); color: var(--ok); }
.pill-warn { background: var(--warn-tint); color: var(--warn-ink); }
.pill-red { background: var(--red); color: #fff; }
.pill-info { background: var(--info-tint); color: var(--info); }
.pill-lime { background: var(--lime); color: var(--lime-ink); }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.eyebrow.center { text-align: center; }
.eyebrow-lime { color: var(--lime); }
.display { font-size: clamp(42px, 6.2vw, 76px); font-weight: 600; letter-spacing: -.04em; line-height: 1.0; }
.h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; }
.h2.big { font-size: clamp(32px, 4.4vw, 56px); }
.sub, .lede { color: var(--ink-2); }
.lede { font-size: 18px; max-width: 520px; }

/* nav: full-width bar that morphs into a floating blurred pill after scroll */
.nav { position: sticky; top: 0; z-index: 50; padding: 12px 20px 0; }
.nav-pill { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 20px; height: 64px; padding: 0 12px 0 20px; border-radius: 999px; background: transparent; transition: background-color .35s var(--ease-out), box-shadow .35s var(--ease-out), transform .35s var(--ease-out); }
.nav.is-scrolled .nav-pill { background: rgb(255 255 255 / .72); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); box-shadow: 0 0 0 1px rgb(20 18 14 / .05), 0 10px 30px -14px rgb(20 18 14 / .25); transform: scale(.985); }
.nav-logo img { height: 34px; width: auto; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background-color .18s, color .18s; }
.nav-links a:hover { background: var(--paper); color: var(--ink); }
.nav-cta { display: flex; gap: 6px; }
@media (max-width: 900px) { .nav-links { display: none; } .nav-cta { margin-left: auto; } }
@media (max-width: 420px) { .nav { padding: 8px 10px 0; } .nav-pill { height: 56px; padding: 0 8px 0 14px; gap: 8px; } .nav-logo img { height: 26px; } .nav-signin { display: none; } .nav-cta .btn { height: 38px; padding: 0 14px; } }

/* hero */
.hero { display: grid; grid-template-columns: 1fr 1.08fr; gap: 40px; align-items: center; padding: 56px 0 48px; }
.hero-copy { display: grid; gap: 22px; justify-items: start; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-note { font-size: 14px; color: var(--ink-3); }
@media (max-width: 1000px) { .hero { grid-template-columns: 1fr; padding-top: 28px; } }

/* hero scene: live shift board */
.scene { position: relative; height: 520px; border-radius: var(--r-panel); background: var(--paper); box-shadow: var(--shadow); overflow: hidden; contain: layout paint; }
.scene::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgb(20 18 14 / .07) 1px, transparent 1.4px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(#000, transparent 85%); mask-image: linear-gradient(#000, transparent 85%); }
.scene-tag { position: absolute; right: 18px; top: 16px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.post-card { position: absolute; left: 22px; top: 48px; width: 196px; padding: 14px; border-radius: var(--r-tile); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.post-head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.post-head b { display: block; font-size: 14px; font-weight: 600; }
.post-head small, .board-head small, .row small, .ph-row small, .ph-card small { display: block; font-size: 12px; color: var(--ink-3); }
.post-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--slate); color: var(--lime); }
.qr-wrap { position: relative; width: 148px; height: 148px; margin: 0 auto; border-radius: 12px; overflow: hidden; }
.qr-wrap img { width: 148px; height: 148px; }
.br { position: absolute; width: 22px; height: 22px; border: 3px solid var(--lime); }
.br1 { left: 4px; top: 4px; border-width: 3px 0 0 3px; border-radius: 8px 0 0 0; }
.br2 { right: 4px; top: 4px; border-width: 3px 3px 0 0; border-radius: 0 8px 0 0; }
.br3 { left: 4px; bottom: 4px; border-width: 0 0 3px 3px; border-radius: 0 0 0 8px; }
.br4 { right: 4px; bottom: 4px; border-width: 0 3px 3px 0; border-radius: 0 0 8px 0; }
.scanline { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--lime); box-shadow: 0 0 14px 4px rgb(180 227 115 / .7); opacity: 0; }
.qr-bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.bar { position: relative; flex: 1; height: 4px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.bar i { position: absolute; inset: 0; background: var(--slate); transform-origin: left; transform: scaleX(.55); }
.bar-dark { background: rgb(35 53 18 / .2); }

.phone { position: absolute; left: 44px; top: 200px; width: 188px; height: 300px; padding: 7px; border-radius: 34px; background: var(--slate); box-shadow: 0 30px 50px -24px rgb(20 18 14 / .45); z-index: 3; }
.phone-in { position: relative; height: 100%; grid-template-columns: minmax(0, 1fr); border-radius: 28px; background: var(--canvas); padding: 18px 12px 12px; display: grid; align-content: start; gap: 10px; overflow: hidden; }
.ph-row { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 16px; background: var(--paper); }
.ph-row b { font-size: 12px; font-weight: 600; display: block; line-height: 1.2; }
.av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--paper-3); font-size: 11px; font-weight: 600; color: var(--ink); }
.av-lime { background: var(--lime); color: var(--lime-ink); }
.ph-geo { justify-self: start; }
.ph-card { position: relative; padding: 12px; border-radius: 16px; background: var(--slate); color: #fff; min-height: 86px; }
.ph-card small { color: #b9b7b2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-state { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 500; }
.ph-off { background: #2a2d33; color: #d8d6d1; }
.ph-on { position: absolute; left: 12px; top: 12px; background: var(--lime); color: var(--lime-ink); }
.ph-on .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ph-time { display: block; white-space: nowrap; font-size: 15px; font-weight: 600; letter-spacing: -.02em; margin: 8px 0 2px; }
.ph-btn { position: relative; display: grid; place-items: center; height: 40px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.ph-in { background: var(--lime); color: var(--lime-ink); }
.ph-out { background: var(--red); color: #fff; margin-top: -50px; }

.board { position: absolute; right: 22px; top: 48px; width: min(300px, calc(100% - 290px)); padding: 14px; border-radius: var(--r-tile); background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -22px rgb(20 18 14 / .3); z-index: 2; }
.board-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.board-head b { font-size: 14px; font-weight: 600; }
.tile-dark { padding: 8px 14px; border-radius: 14px; background: var(--slate); color: #fff; text-align: left; }
.tile-dark small { display: block; font-size: 11px; color: #c9c7c2; }
.roll { display: block; height: 30px; overflow: hidden; font-size: 28px; line-height: 30px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.roll-col { display: flex; flex-direction: column; transform: translateY(-30px); }
.rows { display: grid; gap: 0; }
.row { display: flex; align-items: center; gap: 10px; height: 52px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 500; }
.row .nm { flex: 1; min-width: 0; line-height: 1.25; }
.row-new { border-top: 0; }
.rows-old .row:first-child { border-top: 1px solid var(--line); }
.toast { position: absolute; right: 22px; bottom: 24px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--slate); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; z-index: 4; opacity: 0; }
.tick { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--lime); color: var(--lime-ink); font-size: 12px; }

/* Final frame (also the no-JS and reduced-motion state): checked in, 7 on site. */
.ph-off, .ph-in { opacity: 0; }
@media (max-width: 1000px) { .scene { height: 500px; } }
@media (max-width: 640px) {
  .scene { height: 660px; }
  .post-card { left: 14px; top: 44px; width: 150px; padding: 10px; }
  .post-head b { font-size: 12px; }
  .qr-wrap, .qr-wrap img { width: 110px; height: 110px; }
  .post-head small { display: none; }
  .phone { left: auto; right: 14px; top: 44px; width: 172px; height: 286px; }
  .board { left: 14px; right: 14px; top: 346px; width: auto; }
  .toast { right: 50%; bottom: 14px; margin-right: -120px; }
  .rows-old .row:nth-child(3) { display: none; }
  .scene { height: 668px; }
  @keyframes kw-phone { 0%, 4% { transform: translate(40px, 60px) rotate(6deg); } 30% { transform: translate(30px, 40px) rotate(4deg); } 40%, 100% { transform: none; } }
}

/* scene timeline (html.m only), 9s loop. JS sets data-play on #scene while in view. */
.m .scene[data-play] .scanline { animation: kw-scan 9s var(--ease-out) infinite; }
.m .scene[data-play] .br { animation: kw-br 9s var(--ease-out) infinite; }
.m .scene[data-play] .phone { animation: kw-phone 9s var(--ease-out) infinite; }
.m .scene[data-play] .ph-off, .m .scene[data-play] .ph-in { animation: kw-out-at-4 9s steps(1, end) infinite; }
.m .scene[data-play] .ph-on, .m .scene[data-play] .ph-out, .m .scene[data-play] .ph-time { animation: kw-in-at-4 9s var(--ease-out) infinite; }
.m .scene[data-play] .ph-in { animation-name: kw-press; animation-timing-function: var(--ease-out); }
.m .scene[data-play] .row-new { animation: kw-row 9s var(--ease-out) infinite; }
.m .scene[data-play] .rows-old { animation: kw-push 9s var(--ease-out) infinite; }
.m .scene[data-play] .roll-col { animation: kw-roll 9s var(--spring) infinite; }
.m .scene[data-play] .toast { animation: kw-toast 9s var(--ease-out) infinite; }
.m .scene[data-play] .bar i { animation: kw-bar 9s linear infinite; }
.m .scene:not([data-play]) * { animation-play-state: paused !important; }
@keyframes kw-scan { 0%, 6% { opacity: 0; transform: translateY(0); } 8% { opacity: 1; } 30% { opacity: 1; transform: translateY(145px); } 33%, 100% { opacity: 0; transform: translateY(145px); } }
@keyframes kw-br { 0%, 26% { transform: scale(1); } 31% { transform: scale(.82); } 38%, 100% { transform: scale(1); } }
@keyframes kw-phone { 0%, 4% { transform: translate(90px, 70px) rotate(7deg); } 30% { transform: translate(60px, 40px) rotate(4deg); } 40%, 100% { transform: translate(0, 0) rotate(0); } }
@keyframes kw-out-at-4 { 0% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes kw-press { 0%, 38% { opacity: 1; transform: scale(1); } 41% { opacity: 1; transform: scale(.94); } 44%, 100% { opacity: 0; transform: scale(1); } }
@keyframes kw-in-at-4 { 0%, 44% { opacity: 0; transform: translateY(6px); } 50%, 100% { opacity: 1; transform: none; } }
@keyframes kw-row { 0%, 50% { opacity: 0; transform: translateY(-14px) scale(.98); } 58%, 100% { opacity: 1; transform: none; } }
@keyframes kw-push { 0%, 50% { transform: translateY(-52px); } 58%, 100% { transform: none; } }
@keyframes kw-roll { 0%, 54% { transform: translateY(0); } 64%, 100% { transform: translateY(-30px); } }
@keyframes kw-toast { 0%, 46% { opacity: 0; transform: translateY(12px); } 52%, 82% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes kw-bar { 0% { transform: scaleX(.72); } 100% { transform: scaleX(.38); } }

/* reveals */
.m [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .9s var(--spring-soft); transition-delay: calc(var(--i, 0) * 70ms); }
.m [data-reveal].in { opacity: 1; transform: none; }
.display .w { display: inline-block; }
.m .display .w { opacity: .01; transform: translateY(.35em); animation: kw-rise .9s var(--spring-soft) forwards; animation-delay: calc(var(--w) * 70ms + 80ms); }
@keyframes kw-rise { to { opacity: 1; transform: none; } }

/* capability marquee */
.band { padding: 8px 0 56px; }
.band .eyebrow { margin-bottom: 18px; }
.marquee { display: grid; gap: 12px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-row { display: flex; width: max-content; }
.mq-track { display: flex; gap: 10px; padding-right: 10px; }
.mq-track li { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 8px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow); font-size: 14px; font-weight: 500; white-space: nowrap; transition: transform .3s var(--ease-out); }
.mq-track li::before { content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--paper-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161513' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; transition: background-color .3s; }
.mq-track li:hover { transform: translateY(-2px); }
.mq-track li:hover::before { background-color: var(--lime); }
.m .mq-row { animation: kw-mq 52s linear infinite; }
.m .mq-rev { animation-direction: reverse; animation-duration: 60s; }
.m .marquee:hover .mq-row, .m .marquee:focus-within .mq-row, .m .marquee:not(.in-view) .mq-row { animation-play-state: paused; }
@keyframes kw-mq { to { transform: translateX(-50%); } }
html:not(.m) .mq-clone { display: none; }
html:not(.m) .mq-row { width: auto; }
html:not(.m) .mq-track { flex-wrap: wrap; justify-content: center; }
@media (max-width: 640px) { .m .mq-rev { display: none; } }

/* panels and sections */
.panel { background: var(--paper); border-radius: var(--r-panel); box-shadow: var(--shadow); padding: 28px; }
.panel-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 22px; }
.panel-head .eyebrow, .sec-head .eyebrow { margin-bottom: 10px; }
.frame { border-radius: var(--r-tile); overflow: hidden; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); }
.caption { margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.section { padding: 88px 0 0; }
.sec-head { max-width: 720px; margin-bottom: 32px; display: grid; gap: 10px; }
@media (max-width: 640px) { .panel { padding: 16px; } .panel-head { flex-direction: column; align-items: start; } .section { padding-top: 64px; } .frame { max-width: 320px; margin: 0 auto; } }

/* bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.card { position: relative; background: var(--paper); border-radius: var(--r-panel); box-shadow: var(--shadow); padding: 24px; display: grid; gap: 10px; align-content: start; }
.card h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.card p { color: var(--ink-2); font-size: 15px; }
.card-dark { background: var(--slate); color: #fff; }
.card-dark p { color: #c4c2bd; }
.card-lime { background: var(--lime); color: var(--lime-ink); }
.card-lime p { color: #34481f; }
.card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--paper-3); }
.ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-lime { background: var(--lime); color: var(--lime-ink); }
.ico-dark { background: var(--slate); color: var(--lime); }
.corner { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / .1); overflow: hidden; text-decoration: none; }
.corner span { display: block; transition: transform .5s var(--ease-out); }
.card:hover .corner span, .corner-link:hover span { animation: kw-arrow .5s var(--ease-out); }
@keyframes kw-arrow { 0% { transform: none; } 40% { transform: translate(14px, -14px); opacity: 0; } 41% { transform: translate(-14px, 14px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.b-track { grid-column: span 3; }
.b-qr { grid-column: span 3; }
.b-shift, .b-lic, .b-alert { grid-column: span 2; }
.b-small { grid-column: span 2; }
@media (max-width: 1000px) { .b-track, .b-qr, .b-shift, .b-lic { grid-column: span 3; } .b-alert { grid-column: span 6; } .b-small { grid-column: span 2; } }
@media (max-width: 760px) { .bento > * { grid-column: span 6 !important; } }

.mini-list { display: grid; gap: 6px; margin-top: 8px; }
.mini-list li { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 14px; background: var(--slate-2); font-size: 14px; font-weight: 500; }
.mini-list em { margin-left: auto; font-style: normal; color: #a9a7a2; font-size: 13px; }
.mini-list .d, .dots .d { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex: none; }
.qr-mini { display: flex; gap: 14px; align-items: center; margin-top: 8px; padding: 12px; border-radius: var(--r-tile); background: rgb(255 255 255 / .55); }
.qr-mini img { width: 84px; height: 84px; border-radius: 10px; }
.qr-mini-r { position: relative; flex: 1; display: grid; gap: 10px; font-size: 13px; }
.qr-code-old, .qr-code-new { grid-area: 1 / 1; }
.qr-code-old { opacity: 0; }
.sched { display: grid; gap: 8px; margin-top: 8px; }
.sched > div:not(.legend) { display: flex; align-items: center; gap: 4px; }
.sched small { width: 34px; font-size: 12px; color: var(--ink-3); }
.seg { height: 22px; border-radius: 999px; flex: var(--w) 1 0; transform-origin: left; }
.seg.g { background: var(--ok-tint); box-shadow: inset 0 0 0 1px #bfe3c8; }
.seg.n { background: var(--warn-tint); box-shadow: inset 0 0 0 1px #f2d6a8; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-3); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.legend i.g { background: var(--ok); } .legend i.n { background: #d38b1c; }
.lic { display: grid; gap: 0; margin-top: 4px; }
.lic li { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 44px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.cycler { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 14px; border-radius: var(--r-tile); background: var(--paper-2); }
.cyc-label { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.cyc-stack { display: grid; }
.cyc-stack > * { grid-area: 1 / 1; justify-self: start; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease-out), transform .45s var(--spring-soft); }
.cyc-stack > .is-on { opacity: 1; transform: none; }
html:not(.m) .cyc-stack > * { display: none; }
html:not(.m) .cyc-stack > .is-on { display: inline-flex; }
.b-small { gap: 12px; }
.b-small .ico { margin-bottom: 4px; }

/* tile micro-stories, played once on enter (.in from the reveal observer) */
.m .b-track .mini-list li { opacity: 0; transform: translateX(-12px); }
.m .b-track.in .mini-list li { animation: kw-slide .6s var(--spring-soft) forwards; animation-delay: calc(var(--k) * 140ms + 300ms); }
.m .b-track.in .mini-list .d { animation: kw-pulse 2.4s ease-in-out 1.2s infinite; }
@keyframes kw-slide { to { opacity: 1; transform: none; } }
@keyframes kw-pulse { 50% { transform: scale(1.5); opacity: .55; } }
.m .b-qr.in .qr-code-old { animation: kw-swap-out 2.2s var(--ease-out) .4s both; }
.m .b-qr.in .qr-code-new { animation: kw-swap-in 2.2s var(--ease-out) .4s both; }
.m .b-qr.in .bar i { animation: kw-qrbar 2.2s linear .4s both; }
@keyframes kw-swap-out { 0%, 70% { opacity: 1; transform: none; } 85%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes kw-swap-in { 0%, 72% { opacity: 0; transform: translateY(8px); } 90%, 100% { opacity: 1; transform: none; } }
@keyframes kw-qrbar { 0% { transform: scaleX(.12); } 75% { transform: scaleX(1); } 76% { transform: scaleX(.02); } 100% { transform: scaleX(.1); } }
.m .b-shift .seg { transform: scaleX(0); }
.m .b-shift.in .seg { animation: kw-grow .8s var(--spring-soft) forwards; }
.m .b-shift.in .sched > div:nth-child(2) .seg { animation-delay: .12s; }
.m .b-shift.in .sched > div:nth-child(3) .seg { animation-delay: .24s; }
.m .b-shift.in .seg.n { animation-delay: calc(var(--d, 0s) + .35s); }
@keyframes kw-grow { to { transform: none; } }
.m .b-lic .lic li { opacity: 0; transform: translateY(8px); }
.m .b-lic.in .lic li { animation: kw-slide .55s var(--spring-soft) forwards; animation-delay: calc(var(--k) * 120ms + 250ms); }
.m .b-lic.in .lic .pill-warn { animation: kw-flag .9s var(--ease-out) 1s both; }
@keyframes kw-flag { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }

/* screens grid */
.screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.scr { background: var(--paper); border-radius: var(--r-tile); padding: 8px; box-shadow: var(--shadow); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.scr img { border-radius: 14px; aspect-ratio: 1200 / 750; }
.scr figcaption { padding: 10px 8px 4px; font-size: 14px; font-weight: 500; }
@media (hover: hover) { .scr:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgb(20 18 14 / .04), 0 22px 40px -18px rgb(20 18 14 / .3); } }
@media (max-width: 900px) { .screens { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .screens { grid-template-columns: 1fr; } }

/* how it works */
.how { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; background: var(--paper); border-radius: var(--r-panel); padding: 40px; box-shadow: var(--shadow); }
.how-copy { display: grid; gap: 10px; }
.steps { display: grid; gap: 10px; margin-top: 18px; }
.steps li { display: flex; gap: 16px; padding: 18px; border-radius: var(--r-tile); background: var(--paper-2); }
.steps h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
.steps p { color: var(--ink-2); font-size: 15px; }
.num { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--slate); color: var(--lime); font-weight: 600; font-variant-numeric: tabular-nums; }
.phones { position: relative; display: flex; justify-content: center; gap: 0; min-height: 520px; }
.phone-shot { width: 220px; padding: 6px; border-radius: 34px; background: var(--slate); box-shadow: 0 30px 50px -26px rgb(20 18 14 / .5); }
.phone-shot img { border-radius: 28px; aspect-ratio: 520 / 1126; }
.ps-1 { transform: rotate(-5deg) translate(26px, 18px); }
.ps-2 { transform: rotate(4deg) translate(-26px, -10px); position: relative; z-index: 1; }
@media (max-width: 900px) { .how { grid-template-columns: 1fr; padding: 20px; } .phones { min-height: 0; } .phone-shot { width: 46%; max-width: 200px; } }

/* platform */
.plat { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.plat-copy { padding: 36px; gap: 14px; }
.plat-copy .h2 { color: #fff; }
.dots { display: grid; gap: 10px; margin-top: 8px; }
.dots li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #e6e4df; }
.d-ok { background: #5cc27a !important; } .d-amber { background: #e3a43a !important; } .d-white { background: #fff !important; }
.plat-tiles { display: grid; gap: 12px; }
.ptile { position: relative; display: grid; align-content: end; gap: 4px; min-height: 160px; padding: 24px; border-radius: var(--r-panel); background: var(--paper); box-shadow: var(--shadow); }
.ptile small { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.ptile b { font-size: 28px; font-weight: 600; letter-spacing: -.03em; }
.ptile-black { background: var(--lime); color: var(--lime-ink); }
.ptile-black small { color: #3e5426; }
.ptile .corner { position: absolute; right: 18px; top: 18px; background: var(--paper-3); }
@media (max-width: 900px) { .plat { grid-template-columns: 1fr; } .plat-copy { padding: 24px; } }

/* CTA */
.cta { margin: 88px 0 0; padding: 64px 32px; border-radius: var(--r-panel); background: var(--paper); box-shadow: var(--shadow); text-align: center; display: grid; justify-items: center; gap: 18px; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: auto -10% -60% -10%; height: 90%; background: radial-gradient(closest-side, rgb(180 227 115 / .55), transparent); pointer-events: none; }
.cta > * { position: relative; }
.cta p { color: var(--ink-2); max-width: 520px; font-size: 17px; }
.cta .h2 { max-width: 760px; }

/* footer (revealed under the curtain) */
.footer { position: sticky; bottom: 0; z-index: 0; margin-top: -40px; padding: 96px 20px 32px; background: var(--slate); color: #c9c7c2; }
.foot-in, .foot-base { max-width: 1240px; margin: 0 auto; }
.foot-in { display: grid; grid-template-columns: 1.2fr 2fr; gap: 40px; }
.foot-logo { display: inline-block; padding: 10px 16px; border-radius: 16px; background: #fff; }
.foot-logo img { height: 28px; width: auto; }
.foot-brand p { margin-top: 16px; max-width: 320px; font-size: 14px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.foot-cols h2 { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lime); margin-bottom: 12px; }
.foot-cols a { display: block; padding: 6px 0; text-decoration: none; font-size: 14px; color: #e6e4df; }
.foot-cols a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 20px; border-top: 1px solid #2a2d33; font-size: 13px; color: #a9a7a2; }
.foot-base a { color: #fff; }
.footer :focus-visible { outline-color: var(--lime); }
@media (max-width: 760px) { .foot-in { grid-template-columns: 1fr; } .foot-cols { grid-template-columns: repeat(2, 1fr); } .footer { position: relative; } }