/* Bklit motion reference: https://bklit.com/docs/components/bar-chart
   Native adaptation of its staggered reveals and signature easing. */
:root {
  --motion-ease: cubic-bezier(.85, 0, .15, 1);
  --color-error: #b42318;
  --color-error-surface: #fff4f2;
  --text-on-dark: #aaa;
  --accent-soft: #9bbcff;
  --border-accent: #dbe3f2;
}
::selection { background: #dbe7ff; color: #102e73; }
.support-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; color: var(--blue-dark); font-size: .9rem; text-underline-offset: 4px; overflow-wrap: anywhere; }
.support-link:hover { color: var(--black); }
h1, h2, h3 { text-wrap: balance; }
.hero-sub, .feature-item p, .step-item p, .review-quote, .faq-answer { text-wrap: pretty; }
.waitlist-label:not(:first-child) { margin-top: 10px; }
.waitlist-error { color: var(--color-error); background: var(--color-error-surface); border-radius: 8px; padding: 12px 14px; text-align: left; font-size: .875rem; line-height: 1.5; }
.waitlist-error[hidden] { display: none; }
.waitlist-input[aria-invalid="true"] { border-color: var(--color-error); }
.waitlist-input { caret-color: var(--blue); }
.waitlist-status { font-size: .8rem; color: var(--gray-3); line-height: 1.5; }
.waitlist-status:empty { display: none; }
.waitlist-btn:disabled { cursor: wait; background: var(--gray-2); }
.waitlist-btn[aria-busy="true"]::before { content: ''; display: inline-block; vertical-align: -2px; width: 14px; height: 14px; margin-right: 9px; border: 2px solid #ffffff60; border-top-color: white; border-radius: 50%; animation: saving-spin .8s linear infinite; }
@keyframes saving-spin { to { transform: rotate(360deg); } }
:is(a,button,input) { -webkit-tap-highlight-color: #2563eb25; touch-action: manipulation; }
.footer-links a { text-underline-offset: 4px; }
.footer-links a:hover { color: var(--white); text-decoration: underline; }
.nav-logo { min-height: 44px; }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-login { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 12px; color: var(--black); font-size: .875rem; font-weight: 600; text-decoration: none; border-radius: 6px; }
.nav-login:hover { background: var(--gray-7); color: var(--blue-dark); }
.nav-mobile { display: none; position: relative; }
.nav-mobile summary { cursor: pointer; min-height: 44px; padding: 12px; font-size: .875rem; font-weight: 600; border-radius: 6px; }
.nav-mobile summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.nav-mobile-links { position: absolute; top: calc(100% + 12px); right: 0; width: 240px; padding: 12px; background: var(--white); border-radius: 12px; box-shadow: 0 12px 32px #0a0a0a24; display: grid; gap: 8px; }
@media (max-width: 600px) {
  .nav-actions { display: none; }
  .nav-mobile { display: block; }
}
/* Product demonstration and landing-page refinements. */
:root { --motion-ease: cubic-bezier(.85, 0, .15, 1); --gray-4: #707070; }
html { scroll-padding-top: 96px; }
nav { background: #fff; }
.nav-cta, .btn-primary, .btn-ghost, .btn-order, .btn-white {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; text-decoration: none;
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}
:is(a, button, input):focus-visible { outline: 3px solid #2563eb; outline-offset: 5px; }
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.hero-right { position: relative; min-width: 0; height: 620px; padding-bottom: 80px; isolation: isolate; }
.hero-right .iphone { flex-shrink: 0; margin-left: 112px; }
.iphone { transform-style: preserve-3d; }
.iphone-inner { backface-visibility: hidden; transform: translateZ(1px); }
.iphone-back {
  position: absolute; inset: 0; border-radius: 50px;
  background: linear-gradient(135deg, #758394, #394655 65%, #28323e);
  border: 5px solid #32363b; box-shadow: inset 0 0 0 2px #96a1ac;
  backface-visibility: hidden; transform: rotateY(180deg) translateZ(1px);
}
.camera-island { position: absolute; top: 22px; left: 18px; width: 106px; height: 112px; border-radius: 27px; background: #667382; box-shadow: 0 3px 6px #0005, inset 0 1px 2px #ffffff60; }
.camera-lens { position: absolute; width: 39px; height: 39px; border-radius: 50%; border: 4px solid #313b48; background: radial-gradient(circle at 40% 35%, #53749b 0%, #17283c 16%, #080d15 35%, #151e2a 58%, #05080c 60%); box-shadow: 0 0 0 2px #87919d, 0 2px 4px #0008; }
.camera-lens-one { top: 10px; left: 10px; }
.camera-lens-two { bottom: 10px; left: 10px; }
.camera-lens-three { top: 37px; right: 9px; }
.camera-flash { position: absolute; top: 10px; right: 20px; width: 14px; height: 14px; border-radius: 50%; background: #e5dec8; box-shadow: inset 0 0 0 3px #bab9af; }
.tap-ring { position: absolute; inset: -8px; border: 2px solid #80b4ff; border-radius: 34px; opacity: 0; }
.phone-back-mark { position: absolute; top: 48%; width: 100%; text-align: center; font-size: 18px; font-weight: 700; color: #dce3ec; letter-spacing: -.03em; }
.phone-back-mark span { display: block; margin-top: 10px; font-size: 10px; font-weight: 400; letter-spacing: 0; }
.demo-replay:disabled { cursor: default; color: #666; }
.hero-right .physical-card { position: absolute; left: 0; top: 285px; z-index: 2; transform: rotate(-9deg); }
.physical-card {
  overflow: hidden; align-items: center; justify-content: center;
  background: linear-gradient(115deg, #292929, #191919 55%, #0c0c0c);
  border-radius: 8px;
}
.physical-card-logo { display: flex; align-items: center; justify-content: center; width: 47%; gap: 1px; }
.physical-card::after {
  content: ''; position: absolute; inset: -100% -50%; pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, #ffffff20 50%, transparent 60%);
  transform: translateX(-80%);
}
.card-brand, .card-name-text { color: #d6d9e0; }
.card-url-text { color: #a1a6b0; }
.card-nfc { opacity: .65; }
.mock-title { color: #e3e9f1; }
.mock-photo { display: grid; place-items: center; }
.mock-photo svg { width: 34px; height: 34px; color: #e3e9f1; }
.tap-caption { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; color: #666; font-size: .75rem; }
.demo-replay { display: block; margin: 8px auto 0; padding: 10px 16px; min-height: 44px; border: 1px solid #dbe3f2; border-radius: 30px; background: white; color: #1d4ed8; font: 600 .75rem Inter, sans-serif; cursor: pointer; }
.tap-status { margin-top: 24px; padding: 10px; border-radius: 10px; background: #ffffffed; color: #1d4ed8; font-size: .65rem; text-align: center; }
.tap-status span { display: block; color: #555; margin-top: 4px; font-size: .6rem; }
.proof-school { color: #666; }
.features-section .section-eyebrow, .feature-item p, .bottom-cta p { color: #aaa; }
.footer-brand, .footer-links a, .footer-copy { color: #aaa; }
.waitlist-input::placeholder { color: #737373; }
.waitlist-input { font-size: 1rem; }
.waitlist-label { text-align: left; font-size: .8rem; font-weight: 600; }
.feature-line { width: 40px; }
.price-card { box-shadow: 0 16px 48px #0a0a0a08; border-color: #d9e1ef; }
.review-item { transition: border-color .22s ease, box-shadow .22s ease; }
.footer-links { flex-wrap: wrap; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
/* Bklit references: staggered reveals, glossy depth, and layered funnel halos.
   Adapted to the existing static page without adding a React runtime. */
.hero h1 em { position: relative; display: inline-block; }
.hero h1 em::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 4px; border-radius: 4px; background: var(--blue); transform-origin: left; }
.step-item { position: relative; }
.step-illustration { display: block; width: 48px; height: 48px; margin-bottom: 28px; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.step-item::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--accent-soft)); transform-origin: left; }
.step-item .step-number { color: var(--blue); }
.features-grid { gap: 20px; }
.feature-item { position: relative; padding: 30px; border: 1px solid #ffffff14; border-radius: 16px; background: #ffffff03; }
.feature-item, .review-item, .price-card { isolation: isolate; overflow: hidden; }
.review-item, .price-card { position: relative; }
.feature-item::before, .review-item::before, .price-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: 0;
  background: radial-gradient(260px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #6699ff22, transparent 75%);
  transition: opacity .3s ease;
}
.feature-line { transform-origin: left; transition: transform .3s ease; }
.price-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--accent-soft), var(--blue)); transform-origin: left; }
.price-check { background: var(--blue); }
.bottom-cta { position: relative; isolation: isolate; overflow: hidden; }
.bottom-cta::before, .bottom-cta::after {
  content: ''; position: absolute; width: min(680px, 95vw); aspect-ratio: 1; border-radius: 50%;
  left: 50%; top: 50%; translate: -50% -50%; border: 1px solid #5083ee30; pointer-events: none; z-index: -1;
}
.bottom-cta::after { width: min(920px, 125vw); border-color: #5083ee18; }
.bottom-cta .btn-white { position: relative; }
.btn-primary, .btn-order, .btn-white { position: relative; overflow: hidden; }
.btn-primary::after, .btn-order::after, .btn-white::after {
  content: ''; position: absolute; inset: -100% -50%; transform: translateX(-100%); pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, #9ebeff45 50%, transparent 60%);
}
@keyframes accent-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes halo-expand { from { opacity: 0; transform: scale(.6); } 45% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
@keyframes light-sweep { from { transform: translateX(-80%); } to { transform: translateX(80%); } }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 em::after { animation: accent-draw 1.1s .5s var(--motion-ease) backwards; }
  .step-item.motion-seen::after, .price-card.motion-seen::after { animation: accent-draw 1.1s .2s var(--motion-ease) backwards; }
  .bottom-cta.motion-seen::before { animation: halo-expand 1.8s var(--motion-ease) backwards; }
  .bottom-cta.motion-seen::after { animation: halo-expand 1.8s .2s var(--motion-ease) backwards; }
  .price-card.motion-seen .btn-order::after { animation: light-sweep 1.3s .9s var(--motion-ease) backwards; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.nav-cta,.btn-primary,.btn-order):hover { background: #333; }
  :is(.nav-cta,.btn-primary,.btn-ghost,.btn-order,.btn-white):hover { transform: translateY(-2px); box-shadow: 0 6px 18px #0a0a0a14; }
  .physical-card:hover::after { transform: translateX(80%); transition: transform 1.1s var(--motion-ease); }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 36px; }
  .hero-left { max-width: 560px; }
  .hero-right { width: min(100%, 440px); margin: auto; height: 600px; }
  .hero-right .iphone { margin-left: 65px; }
  .hero-right .physical-card { display: flex; top: 330px; left: 0; }
}
@media (max-width: 480px) {
  .hero { padding-top: 44px; }
  .hero h1 { font-size: clamp(2.5rem, 10.8vw, 3rem); }
  .hero-actions > a { width: 100%; }
  .hero-right .iphone { margin-left: 30px; }
  .hero-right .physical-card { width: 170px; height: 110px; top: 410px; padding: 14px; }
  .features-grid { grid-template-columns: 1fr; gap: 32px; }
  .stats-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-item { font-size: .7rem; }
  .proof-label { margin-right: 0; }
  .proof-schools { justify-content: center; gap: 16px 24px; }
  .waitlist-section, .bottom-cta { padding: 72px 24px; }
  .price-card { padding: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .demo-replay { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Consistent spacing and readable content. */
body { overflow-x: visible; }
main { min-width: 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 200; background: #fff; color: #111; padding: 14px 20px; border: 2px solid #2563eb; }
.skip-link:focus { top: 10px; }
:is(a, button, summary) { scroll-margin-top: 100px; }
summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; }
.hero { padding-top: 56px; padding-bottom: 56px; }
.hero h1 { font-weight: 800; }
.hero-sub { margin-bottom: 24px; }
.purchase-note { font-size: .8125rem; color: #595959; line-height: 1.8; margin-top: 18px; }
.hero-right { height: 610px; }
.iphone { box-shadow: 0 16px 30px #0002, 0 0 0 1px #000; }
.iphone-inner { background: #3a5270; }
.mock-title { font-size: .75rem; line-height: 1.6; }
.mock-btn { font-size: .75rem; }
.tap-status { font-size: .75rem; }
.tap-status span { font-size: .6875rem; }
.tap-caption { font-size: .75rem; line-height: 1.6; padding-inline: 8px; }
.demo-replay { border-radius: 6px; font-size: .8125rem; border-color: #8997b0; }
.demo-replay[hidden] { display: none; }
.demo-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hiw-section, .features-section, .faq-section, .pricing-section, .bottom-cta { padding-top: 72px; padding-bottom: 72px; }
.section-heading { margin-bottom: 32px; line-height: 1.2; }
.steps-grid { border: 0; border-radius: 0; background: transparent; gap: 32px; }
.step-item { padding: 24px 0 0; border-top: 1px solid #ccc; }
.step-item p, .feature-item p, .faq-answer, .pricing-note { font-size: 1rem; line-height: 1.75; }
.step-item .step-number { color: #1d4ed8; font-size: .8125rem; }
.features-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; max-width: 1104px; }
.features-inner > .section-eyebrow { grid-column: 1 / -1; }
.features-grid { display: flex; flex-direction: column; gap: 24px; margin: 0; }
.feature-item { padding-bottom: 24px; border-bottom: 1px solid #333; }
.feature-item:last-child { padding-bottom: 0; border: 0; }
.feature-item h3 { font-size: 1.0625rem; }
.features-section .section-eyebrow, .feature-item p { color: #bfbfbf; }
.faq-left { position: static; }
.faq-btn { list-style: none; gap: 18px; min-height: 60px; }
.faq-btn::-webkit-details-marker { display: none; }
.faq-question { line-height: 1.5; }
.faq-icon { flex-shrink: 0; }
.faq-answer { display: block; }
details[open] .faq-icon { transform: rotate(45deg); }
.price-card { border-radius: 8px; box-shadow: none; }
.nav-cta, .btn-primary, .btn-ghost, .btn-order, .btn-white { border-radius: 6px; font-size: .875rem; font-weight: 600; }
.bottom-cta { background: #f5f5f5; border-top: 1px solid #ddd; }
.bottom-cta h2 { color: #111; font-weight: 800; }
.bottom-cta p { color: #595959; margin-bottom: 24px; }
.btn-white { background: #0a0a0a; color: #fff; }
.footer-brand, .footer-links a, .footer-copy { color: #bfbfbf; font-size: .8125rem; }
.footer-links a:hover { color: #fff; }
@media (max-width: 900px) {
  .hero { gap: 36px; }
  .hero-right { height: 610px; }
  .features-inner { grid-template-columns: 1fr; gap: 16px; }
  .features-grid { margin-top: 0; }
  .steps-grid { gap: 24px; }
  .hiw-section, .features-section, .faq-section, .pricing-section, .bottom-cta { padding: 56px 24px; }
  .faq-section { gap: 24px; }
  .pricing-inner { gap: 28px; }
}
@media (max-width: 480px) {
  nav { padding: 12px 16px; gap: 12px; }
  .nav-cta { font-size: .75rem; padding-inline: 12px; }
  .hero { padding: 40px 20px; }
  .hero-right .iphone { margin-left: 0; }
  .hero-right .physical-card { top: 360px; }
  .stats-bar { padding: 16px 20px; gap: 12px; }
  .stat-item { font-size: .75rem; align-items: flex-start; }
  .stat-dot { margin-top: 5px; }
  .footer-links { gap: 8px 16px; }
}

/* Keep the simplified content layout with the restored motion accents. */
.feature-item { border-radius: 0; border: 0; border-bottom: 1px solid #333; background: transparent; padding: 0 0 24px; }
.bottom-cta::before, .bottom-cta::after { content: none; }
.waitlist-section { padding: 64px 24px; }
.waitlist-input { font-size: 1rem; }
.waitlist-legal, .waitlist-label { font-size: .875rem; }