:root {
  --bg: #fbfaf6;
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --line: rgba(0, 0, 0, 0.08);
  --green: #2c9f5c;
  --green-deep: #1e7a45;
  --red: #e5383b;
  --mint: #e6f4ea;
  --peach: #fdebe3;
  --sky: #e8f0fb;
  --cream: #f5f1e8;
  --radius: 32px;

  /* Liquid Glass: translucent, blurs what's behind, a bright rim instead of a heavy shadow. */
  --glass-fill: rgba(255, 255, 255, 0.55);
  --glass-blur: blur(24px) saturate(180%);
  --glass-rim: inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 -1px 1px rgba(255, 255, 255, 0.35),
               inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  --glass-lift: 0 1px 2px rgba(0, 0, 0, 0.05), 0 12px 32px -18px rgba(0, 0, 0, 0.25);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.47 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-deep); }
h1, h2, h3 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; margin: 0; }
h2 { font-size: clamp(34px, 5.2vw, 56px); line-height: 1.07; letter-spacing: -0.035em; text-align: center; font-weight: 700; }
h3 { font-size: 24px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; }
.muted { color: var(--ink-soft); }
.accent { color: var(--red); }
code { font: 0.88em ui-monospace, "SF Mono", Menlo, monospace; background: rgba(0, 0, 0, 0.05); padding: 1px 6px; border-radius: 6px; }
section { padding: 120px 22px; }

.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-rim), var(--glass-lift);
}

/* Buttons */
.button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 0;
  background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; font-size: 17px;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.button:hover { background: #3a3a3c; }
.button:active { transform: scale(0.97); }
.button-quiet { background: rgba(0, 0, 0, 0.06); color: var(--ink); }
.button-quiet:hover { background: rgba(0, 0, 0, 0.09); }
.button-small { padding: 7px 15px; font-size: 14px; }
.button-disabled { cursor: default; color: var(--ink-soft); }
.button-disabled:hover { background: rgba(0, 0, 0, 0.06); }
.button-disabled:active { transform: none; }
.link-arrow { color: var(--green-deep); text-decoration: none; font-size: 17px; font-weight: 500; }
.link-arrow::after { content: " ›"; }
.link-arrow:hover { text-decoration: underline; }
.button:focus-visible, a:focus-visible, summary:focus-visible, .say input:focus-visible { outline: 3px solid rgba(44, 159, 92, 0.4); outline-offset: 3px; }

/* Navigation */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding: 0 max(22px, calc((100vw - 1040px) / 2));
  background: rgba(251, 250, 246, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.brand img { border-radius: 7px; }
/* On the home page the logo lives next to the headline until you scroll past it. */
.home .brand { opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.home.past-hero .brand { opacity: 1; transform: none; pointer-events: auto; }
.nav nav { display: flex; align-items: center; gap: 26px; }
.nav nav a:not(.button) { color: var(--ink-soft); text-decoration: none; font-size: 13px; }
.nav nav a:not(.button):hover { color: var(--ink); }

/* Hero */
.hero { text-align: center; padding: 96px 22px 48px; }
.eyebrow { margin: 0 0 10px; color: var(--red); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.hero h1 {
  display: inline-flex; align-items: center; gap: 0.22em;
  font-size: clamp(52px, 9vw, 104px); line-height: 1; letter-spacing: -0.045em; font-weight: 800;
}
.h1-icon { width: 0.92em; height: 0.92em; border-radius: 22%; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 24px -12px rgba(0, 0, 0, 0.35); }
.lede { max-width: 640px; margin: 22px auto 30px; font-size: clamp(19px, 2.2vw, 23px); line-height: 1.38; color: var(--ink-soft); letter-spacing: -0.015em; }
.actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 22px; }

/* The garden stage */
.stage-wrap { padding: 0 22px 40px; }
.stage {
  position: relative; overflow: hidden;
  max-width: 1200px; margin: 0 auto; height: min(620px, 62vw); min-height: 420px;
  border-radius: var(--radius);
  background: #e7f1e3;
}
.stage-fallback, #stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#stage-canvas { display: none; }
.stage--live .stage-fallback { display: none; }
.stage--live #stage-canvas { display: block; }
.stage--pointer { cursor: pointer; }

/* The password game, floating on the stage */
.say {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  width: min(340px, calc(100% - 40px)); padding: 6px 6px 6px 20px; border-radius: 28px;
}
.say input {
  flex: 1; min-width: 0; height: 36px; border: 0; background: none; outline: none;
  font: 500 16px/1.2 -apple-system, system-ui, sans-serif; color: var(--ink);
}
.say input::placeholder { color: var(--ink-soft); }
.say button {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: var(--ink); color: #fff; cursor: pointer; transition: transform 0.15s ease, background-color 0.2s ease;
}
.say button:active { transform: scale(0.92); }
.say.yes button { background: var(--green); }
.say.nope { animation: nope 0.45s ease; }
@keyframes nope {
  0%, 100% { transform: translateX(-50%); }
  20% { transform: translateX(calc(-50% - 9px)); } 40% { transform: translateX(calc(-50% + 8px)); }
  60% { transform: translateX(calc(-50% - 5px)); } 80% { transform: translateX(calc(-50% + 3px)); }
}
.say-reply { flex-basis: 100%; margin: 0; padding: 0 2px 4px 0; font-size: 14px; color: var(--ink-soft); }
.say-reply:empty { display: none; }
.say-reply a { font-weight: 600; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Bento grid */
.features h2 { margin-bottom: 64px; }
.bento {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  max-width: 1080px; margin: 0 auto;
}
.tile {
  position: relative; overflow: hidden; border-radius: var(--radius);
  display: flex; flex-direction: column; justify-content: space-between; min-height: 460px;
}
.tile-wide { grid-column: span 2; flex-direction: row; align-items: stretch; }
.tile-full { grid-column: 1 / -1; flex-direction: row; align-items: stretch; min-height: 380px; }
.tile-full .tile-copy { flex: 1; padding: 48px; align-self: center; }
.tile-mint { background: var(--mint); }
.tile-peach { background: var(--peach); }
.tile-sky { background: var(--sky); }
.tile-cream { background: var(--cream); }
.tile-copy { padding: 40px 40px 0; position: relative; z-index: 1; }
.tile-wide .tile-copy { flex: 1; padding: 48px; align-self: center; }
.tile-copy h3 { font-size: clamp(26px, 2.6vw, 32px); }
.tile-copy p { margin: 12px 0 0; color: var(--ink-soft); font-size: 17px; max-width: 34ch; }
.tile-shot {
  width: 300px; align-self: flex-end; margin: 40px 48px -90px 0;
  border-radius: 17px 17px 0 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 20px 50px -30px rgba(0, 0, 0, 0.45);
}
.tile-popup { width: 78%; margin: 28px auto 0; border-radius: 18px 18px 0 0; box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.4); }
.tile-art { width: 82%; margin: 0 auto; mix-blend-mode: multiply; }
.tile-wide .tile-art { width: 360px; align-self: center; margin: 0 24px 0 0; }
/* Flat mini interface mockups inside tiles */
.mini { margin: 32px 40px 40px; }
.mini-lock { display: grid; gap: 12px; }
.mini-field {
  display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 18px; border-radius: 16px;
  background: #fff; color: var(--ink-soft); box-shadow: 0 0 0 1px var(--line);
}
.mini-dots { color: var(--ink); font-size: 22px; letter-spacing: 0.08em; line-height: 1; }
.mini-cta { height: 50px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 600; display: grid; place-items: center; }
.mini-scan { display: grid; place-items: center; }
.viewfinder {
  position: relative; width: 200px; aspect-ratio: 1; padding: 26px; border-radius: 34px;
  background: #fff; box-shadow: 0 0 0 1px var(--line);
  /* Four corner brackets */
  background-image:
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-size: 28px 4px, 4px 28px, 28px 4px, 4px 28px, 28px 4px, 4px 28px, 28px 4px, 4px 28px;
  background-position: left 12px top 12px, left 12px top 12px, right 12px top 12px, right 12px top 12px,
                       left 12px bottom 12px, left 12px bottom 12px, right 12px bottom 12px, right 12px bottom 12px;
}
.qr { width: 100%; height: 100%; color: var(--ink); fill: currentColor; }
.laser {
  position: absolute; left: 18px; right: 18px; top: 50%; height: 3px; border-radius: 2px;
  background: var(--red); box-shadow: 0 0 12px rgba(229, 56, 59, 0.6);
  animation: scan 2.4s ease-in-out infinite alternate;
}
@keyframes scan { from { top: 22%; } to { top: 78%; } }
.mini-touch { display: grid; justify-items: center; gap: 14px; margin-bottom: 48px; }
.touch-ring { display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%; background: #fff; color: var(--red); box-shadow: 0 0 0 1px var(--line), 0 0 0 12px rgba(255, 255, 255, 0.5); }
.touch-label { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.tile-visual { display: flex; align-items: center; padding: 0 40px 0 0; flex: 0 0 46%; }
.mini-history { list-style: none; padding: 8px; margin: 40px 0; width: 100%; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.mini-history li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: 13px; color: var(--ink-soft); }
.mini-history li strong { display: block; font-size: 15px; color: var(--ink); font-weight: 600; }
.mini-history li.picked { background: var(--mint); }
.mini-history li b { font-size: 13px; color: #fff; background: var(--green); padding: 6px 12px; border-radius: 999px; font-weight: 600; }

.chips { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.75); font-size: 14px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--line); }

/* Statement */
.statement { text-align: center; background: #1d1d1f; color: #f5f5f7; }
.statement h2 { font-size: clamp(40px, 6.5vw, 76px); }
.statement .accent { color: #ff6b5e; }
.statement-copy { max-width: 620px; margin: 24px auto 0; color: #a1a1a6; font-size: clamp(19px, 2.2vw, 23px); line-height: 1.4; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 900px; margin: 72px auto 0; }
.facts strong { display: block; font-size: clamp(40px, 5vw, 60px); letter-spacing: -0.04em; line-height: 1; }
.facts span { display: block; margin-top: 10px; color: #a1a1a6; font-size: 17px; }

/* Download */
.download { text-align: center; }
.download > img { margin: 0 auto 22px; border-radius: 24px; }
.download h2 .get { font-weight: 400; color: var(--ink-soft); }
.download .muted { margin: 12px 0 0; font-size: 19px; }
.download-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; max-width: 700px; margin: 44px auto 0; }
.download-card { border-radius: 28px; padding: 34px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.download-card p { color: var(--ink-soft); font-size: 15px; margin: 6px 0 22px; }
.text-link { display: block; margin-top: 12px; font-size: 14px; }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; padding-top: 40px; }
.faq h2 { margin-bottom: 40px; }
details { border-bottom: 1px solid var(--line); padding: 20px 4px; }
summary { cursor: pointer; font-weight: 600; font-size: 19px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--ink-soft); font-size: 26px; font-weight: 300; line-height: 1; transition: transform 0.2s ease; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--ink-soft); margin: 12px 0 0; }

/* Legal pages */
.legal { max-width: 720px; margin: 0 auto; padding: 72px 22px 96px; }
.legal h1 { font-size: clamp(36px, 5vw, 48px); letter-spacing: -0.035em; }
.legal .updated { margin: 8px 0 0; font-size: 15px; color: var(--ink-soft); }
.legal h2 { text-align: left; font-size: 22px; letter-spacing: -0.02em; margin: 40px 0 8px; }
.legal p { color: var(--ink-soft); }

/* Footer */
.footer { text-align: center; padding: 36px 22px 52px; color: var(--ink-soft); font-size: 13px; border-top: 1px solid var(--line); }
.footer a { color: inherit; }

/* Small screens */
@media (max-width: 860px) {
  section { padding: 88px 18px; }
  .nav nav a:not(.button) { display: none; }
  .hero { padding: 64px 18px 32px; }
  .hero h1 { flex-direction: column; gap: 0.18em; }
  .stage-wrap { padding: 0 12px 28px; }
  .stage { border-radius: 26px; height: 520px; }
  .bento { grid-template-columns: 1fr; }
  .tile-wide, .tile-full { grid-column: auto; flex-direction: column; }
  .tile-full .tile-copy { padding: 36px 32px 0; align-self: stretch; }
  .tile-wide .tile-copy { padding: 36px 32px 0; align-self: stretch; }
  .tile-copy { padding: 36px 32px 0; }
  .tile-shot { width: 260px; align-self: center; margin: 32px auto -80px; }
  .tile-visual { padding: 0 24px; flex-basis: auto; }
  .mini { margin: 28px 28px 32px; }
  .facts { grid-template-columns: 1fr; gap: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home .brand { transition: none; }
  .button, .say button { transition: none; }
  .say.nope, .laser { animation: none; }
}