/* ==========================================================================
   TINKER DESIGN SYSTEM
   Quiet editorial: one ink, one accent, hairlines and whitespace.
   Inspired by Outfit (hellohello) & Nakula.
   ========================================================================== */

:root {
  /* Palette */
  --bg: #eee9e2;
  --bg-raised: #e5dfd6;
  --ink: #121212;
  --ink-2: #4b4842;
  --muted: #8b867d;
  --line: rgba(18, 18, 18, 0.14);
  --accent: #2b4dff;
  --on-ink: #eee9e2;
  --danger: #c8321e;

  /* Step colours (the Live Interface in Meet Tinker takes on the active step's colour) */
  --node-1: #2b4dff;
  --node-2: #7a3cff;
  --node-3: #f2541b;
  --node-4: #0f9f72;

  /* Type */
  --font-display: 'Anton', 'Impact', sans-serif;
  --font-body: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --gutter: clamp(16px, 3vw, 40px);
  --header-h: 76px;
  --radius: 20px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e0f;
    --bg-raised: #171718;
    --ink: #eee9e2;
    --ink-2: #b3aea6;
    --muted: #77736c;
    --line: rgba(238, 233, 226, 0.14);
    --accent: #7590ff;
    --on-ink: #0e0e0f;
    --danger: #ff7a66;
    --node-1: #7590ff;
    --node-2: #a98bff;
    --node-3: #ff8a5c;
    --node-4: #3fd3a0;
  }
}

@media (max-width: 767px) {
  :root { --header-h: 64px; }
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

html.drawer-open {
  overflow: hidden;
}

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

a {
  color: inherit;
  text-decoration: none;
}

img, picture {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
}

::selection {
  background: var(--accent);
  color: #fff;
}

/* Accessibility Utilities */
.sr-only, .hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Container */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Shared Type */
.eyebrow {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
}

.text-accent {
  color: var(--accent);
}

/* Keeps a phrase on one line */
.nowrap {
  white-space: nowrap;
}

/* Matches the orange plus in the logo mark (assets/tinker-mark.svg) */
.text-orange {
  color: #ff5f00;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn svg {
  transition: transform 0.3s var(--ease);
}

.btn:hover svg {
  transform: translateX(3px);
}

.btn-primary {
  background: var(--ink);
  color: var(--bg);
}

.btn-primary:hover {
  background: var(--accent);
  color: #fff;
}

.btn-outline {
  border-color: var(--ink);
  color: var(--ink);
}

.btn-outline:hover {
  background: var(--ink);
  color: var(--bg);
}

.btn-lg {
  height: 56px;
  padding: 0 28px;
  font-size: 1.0625rem;
}

/* ==========================================================================
   WORDMARK, DYNAMIC BRAND & HEADER
   ========================================================================== */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.06em;
  font-family: var(--font-display);
  /* Sized so TINKER + CLICK spans the full container width */
  font-size: calc((min(100vw, 1440px) - 2 * var(--gutter)) / 3.34);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  user-select: none;
}

.wordmark .click-word {
  font-size: 0.4em;
  letter-spacing: 0.02em;
  color: var(--accent);
}

/* Letters: each sits in a box clipped at the hero rule (its margin-top below), so it rises from behind it */
.wordmark .ltr {
  display: inline-block;
  clip-path: inset(-50% -20% calc(-1 * clamp(12px, 1.6vw, 24px)) -20%);
}

.wordmark .ltr > span {
  display: inline-block;
}

.js .dynamic-brand .ltr > span {
  transform: translateY(120%);
}

.js .dynamic-brand.is-ready .ltr > span {
  transform: none;
  transition: transform 0.9s var(--ease) calc(0.1s + var(--i) * 0.055s);
}

.hero-wordmark-ghost {
  visibility: hidden;
}

.dynamic-brand {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transform-origin: 0 0;
  will-change: transform;
  opacity: 0;
  transition: transform 0.85s var(--ease-in-out), opacity 0.4s ease;
}

.dynamic-brand.is-ready {
  opacity: 1;
}

.dynamic-brand.no-transition {
  transition: none;
}

.dynamic-brand.is-docked:hover {
  opacity: 0.7;
}

/* Bar that fades in behind the docked brand and CTA */
.site-header-bar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 900;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.brand-docked .site-header-bar {
  opacity: 1;
}

.header-logo {
  position: fixed;
  top: calc((var(--header-h) - 32px) / 2);
  left: var(--gutter);
  z-index: 1001;
  display: block;
  width: 32px;
  height: 32px;
  transition: opacity 0.2s ease;
}

.header-logo img {
  width: 100%;
  height: 100%;
}

.header-logo:hover {
  opacity: 0.7;
}

@media (max-width: 767px) {
  .header-logo {
    top: calc((var(--header-h) - 28px) / 2);
    width: 28px;
    height: 28px;
  }
}

.header-cta {
  position: fixed;
  top: calc((var(--header-h) - 40px) / 2);
  right: var(--gutter);
  z-index: 1001;
  height: 40px;
  padding: 0 18px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.875rem;
}

.header-cta:hover {
  background: var(--accent);
  color: #fff;
}

.header-cta .label-close {
  display: none;
}

.header-cta .cta-icon {
  transition: transform 0.45s var(--ease);
}

.header-cta:hover svg {
  transform: none;
}

.header-cta[aria-expanded="true"] {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.header-cta[aria-expanded="true"] .label-open { display: none; }
.header-cta[aria-expanded="true"] .label-close { display: inline; }
.header-cta[aria-expanded="true"] .cta-icon { transform: rotate(45deg); }

/* ==========================================================================
   WAITLIST DRAWER
   ========================================================================== */
.waitlist-drawer {
  position: fixed;
  inset: 0;
  z-index: 950;
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.32);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.drawer-panel {
  position: absolute;
  inset: 0 0 auto 0;
  max-height: 100vh;
  overflow-y: auto;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: calc(var(--header-h) + clamp(40px, 6vw, 80px)) 0 clamp(40px, 6vw, 72px);
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease-in-out);
}

.waitlist-drawer.is-open .drawer-backdrop { opacity: 1; }
.waitlist-drawer.is-open .drawer-panel { transform: none; }

.drawer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px var(--gutter);
}

.drawer-grid > * {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.5s ease, transform 0.6s var(--ease);
}

.waitlist-drawer.is-open .drawer-grid > * {
  opacity: 1;
  transform: none;
  transition-delay: 0.25s;
}

.waitlist-drawer.is-open .drawer-grid > *:nth-child(2) {
  transition-delay: 0.33s;
}

.drawer-intro {
  grid-column: 1 / span 2;
}

.drawer-title {
  margin-top: 16px;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.drawer-form-col {
  grid-column: 3 / -1;
  align-self: end;
}

.drawer-copy {
  color: var(--ink-2);
  max-width: 44ch;
  margin-bottom: 28px;
}

.drawer-copy strong {
  color: var(--ink);
  font-weight: 500;
}

.composer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--ink);
  transition: border-color 0.25s ease;
}

.composer:focus-within {
  border-color: var(--accent);
}

.composer input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
  padding: 6px 0;
}

.composer input::placeholder {
  color: var(--muted);
}

.btn-submit:disabled {
  opacity: 0.5;
  cursor: progress;
}

.status {
  min-height: 1.5em;
  margin-top: 12px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.status.error { color: var(--danger); }

.status.ok {
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 500;
}

.status.ok::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.8em;
}

.signup-form.done .composer {
  display: none;
}

.drawer-fine {
  margin-top: 20px;
  font-size: 0.8125rem;
  color: var(--muted);
}

@media (max-width: 860px) {
  .drawer-intro, .drawer-form-col { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .composer { flex-direction: column; align-items: stretch; border-bottom: 0; padding: 0; }
  .composer input { border-bottom: 1.5px solid var(--ink); margin-bottom: 12px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  padding: calc(var(--header-h) + clamp(16px, 3vw, 40px)) 0 clamp(64px, 9vw, 120px);
}

.hero-wordmark-wrap {
  display: flex;
}

.hero-rule {
  height: 4px;
  background: var(--ink);
  margin-top: clamp(12px, 1.6vw, 24px);
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px var(--gutter);
  padding-top: 20px;
  transition: opacity 0.8s var(--ease) 0.35s, transform 0.8s var(--ease) 0.35s;
}

/* ==========================================================================
   INTRO: words rise from behind the hero rule before the wordmark does (assets/js/intro.js)
   ========================================================================== */
.intro {
  display: none;
}

html.has-intro {
  overflow: hidden;
}

html.has-intro .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg);
  transition: opacity 0.25s;
}

html.has-intro .intro.is-out {
  opacity: 0;
}

html.has-intro .hero-grid {
  opacity: 0;
  transform: translateY(12px);
}

.intro-stack {
  position: absolute;
  top: 0;
  overflow: hidden;
}

/* 0.6 × the wordmark size, resting the same distance above the rule as the wordmark */
.intro-word {
  position: absolute;
  left: 0;
  bottom: var(--gap);
  font-family: var(--font-display);
  font-size: calc((min(100vw, 1440px) - 2 * var(--gutter)) / 3.34 * 0.6);
  line-height: 0.84;
  text-transform: uppercase;
  color: var(--ink);
  transform: translateY(calc(100% + var(--gap) + 0.25em));
}

.intro.is-play .intro-word {
  animation: intro-rise 0.6s var(--d) both;
}

@keyframes intro-rise {
  0% { transform: translateY(calc(100% + var(--gap) + 0.25em)); animation-timing-function: var(--ease); }
  45%, 70% { transform: none; animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  100% { transform: translateY(calc(100% + var(--gap) + 0.25em)); }
}

.intro-line {
  position: absolute;
  width: 0;
  background: var(--ink);
  transition: width 0.7s var(--ease-in-out);
}

.hero-meta p {
  font-size: 0.9375rem;
  line-height: 1.4;
}

.hero-statement {
  grid-column: 2 / span 2;
}

.hero-title {
  font-size: clamp(1.75rem, 2.8vw, 2.75rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.hero-lede {
  margin-top: 16px;
  max-width: 46ch;
  color: var(--ink-2);
}

/* On load the title, then the paragraph, slide in from the left while the wordmark letters rise */
.js .hero-title,
.js .hero-lede {
  animation: hero-slide-in 1.1s var(--ease) both;
}

.js .hero-title { animation-delay: 0.35s; }
.js .hero-lede { animation-delay: 0.5s; }

@keyframes hero-slide-in {
  from {
    opacity: 0;
    transform: translateX(-48px);
  }
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .hero-statement { grid-column: 1 / -1; grid-row: 1; }
}

@media (max-width: 560px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-meta { display: none; }
}

/* Hero slot: where the stage animation starts, bottom-right of the hero */
.hero-slot {
  grid-column: 4;
  justify-self: end;
  align-self: end;
  width: var(--slot-w, 136px);
  aspect-ratio: var(--slot-ratio, 1);
}

@media (max-width: 960px) {
  .hero-slot { grid-column: 2; }
}

@media (max-width: 560px) {
  .hero-slot { grid-column: 1; --slot-w: 96px; }
}

/* ==========================================================================
   HERO STAGE: the thinking sphere and "Make it. Use it. Share it."
   (assets/js/hero-stage.js + assets/js/sphere.js)
   ========================================================================== */
.stage {
  position: relative;
  height: 420vh;
  /* The next section rises in while the orb's particles are still flying apart */
  margin-bottom: -50vh;
}

.stage-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  padding: calc(var(--header-h) + 20px) 0 28px;
}

.stage-inner {
  display: grid;
  place-items: center;
}

html:not(.js) .stage { height: auto; margin-bottom: 0; }
html:not(.js) .stage-pin { position: static; height: auto; }

/* Where the sphere lands; the canvas itself covers the viewport so the words can run edge to edge */
.sphere-target {
  width: min(60vh, 540px, 46vw);
  aspect-ratio: 1;
}

.sphere-canvas { display: none; }

.js .sphere-canvas.is-ready {
  display: block;
  position: fixed;
  inset: 0;
  /* % of the viewport box (not 100vh, which on phones includes the hidden address bar area) */
  width: 100%;
  height: 100%;
  z-index: 800;
  pointer-events: none;
}

/* Phones: the sphere keeps one size. It starts right under the hero text, glides to the
   middle of the screen and waits while the hero scrolls out, then the words glide through. */
@media (max-width: 760px) {
  .stage-sphere {
    /* Clearly narrower than the words, so the lens doesn't stretch across the whole line */
    --sphere-size: min(58vw, 240px, 30svh);
    height: 300vh;
    height: 300svh;
    margin-bottom: -40svh;
    /* Start a little higher, so the stage pins as the last of the hero text slides under the header */
    margin-top: -96px;
  }

  .stage-sphere .stage-pin {
    padding: calc(var(--header-h) + 8px) 0 16px;
  }

  .sphere-target {
    width: var(--sphere-size);
  }

  /* The starting slot matches the stage's sphere exactly, so it glides without resizing */
  .tinker-app:has(.stage-sphere) .hero-slot {
    --sphere-size: min(58vw, 240px, 30svh);
    grid-column: 1 / -1;
    justify-self: center;
    width: var(--sphere-size);
    margin-top: 8px;
    align-self: start;
    /* Takes no page height, so the stage follows straight after the hero text */
    margin-bottom: calc(-1 * var(--sphere-size));
  }

  .tinker-app:has(.stage-sphere) .hero { padding-bottom: 8px; }
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section {
  padding: clamp(80px, 11vw, 160px) 0 0;
}

.section-head {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px var(--gutter);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  margin-bottom: clamp(48px, 7vw, 96px);
}

.section-head > div {
  grid-column: 2 / -1;
}

/* Features heading spans the full row, centred */
#features .section-head > div {
  grid-column: 1 / -1;
  text-align: center;
}

#features .section-title {
  margin-inline: auto;
}

.section-title {
  font-size: clamp(2rem, 4.6vw, 4.25rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.045em;
  max-width: 17em;
  text-wrap: balance;
}

.section-lede {
  margin-top: 24px;
  max-width: 48ch;
  font-size: 1.125rem;
  color: var(--ink-2);
}

/* Split heading: title on the left, lede on the right lined up with the title's last line */
.section-head-split {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 96px);
  align-items: end;
}

.section-head-split .section-title {
  max-width: none;
}

.section-head-split .section-lede {
  justify-self: end;
  max-width: 56ch;
  margin-top: 0;
}

/* Meet Tinker Click on desktop: the same columns as the animation + steps below (.live),
   so the title centres over the animation and the lede starts where the 01–04 steps do */
@media (min-width: 1024px) {
  #tinker .section-head-split {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 80px);
  }

  #tinker .section-head-split .section-title {
    justify-self: center;
    text-align: center;
  }

  #tinker .section-head-split .section-lede {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .section-head { grid-template-columns: 1fr; }
  .section-head > div { grid-column: 1; }
  .section-head-split .section-lede { justify-self: start; }
}

.index-num {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px var(--gutter);
  margin-bottom: clamp(64px, 9vw, 128px);
}

.stats dt {
  font-size: 0.8125rem;
  color: var(--muted);
}

.stats dd {
  margin-top: 8px;
  font-size: clamp(3rem, 7.5vw, 7rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}

.stats small {
  margin-left: 0.04em;
  font-size: 0.4em;
  letter-spacing: -0.02em;
  color: var(--muted);
}

/* Words instead of numbers (platform names) need a smaller size to fit a column */
.stats-words dd {
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr 1fr; }
}

/* Platform row: logo above each name; sits under the feature bento */
.platforms {
  margin: clamp(64px, 9vw, 128px) 0 0;
}

.platforms > div {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.platform-logo {
  display: block;
  width: clamp(32px, 3.4vw, 48px);
  height: clamp(32px, 3.4vw, 48px);
  margin-bottom: clamp(20px, 3vw, 40px);
  fill: currentColor;
  color: var(--ink);
  transition: color 0.4s ease, transform 0.6s var(--ease);
}

.platforms > div:hover .platform-logo {
  color: var(--accent);
  transform: translateY(-4px);
}

.platforms .is-upcoming dd,
.platforms .is-upcoming .platform-logo {
  color: var(--muted);
}

/* Feature bento: icon and title wear the frame's colour; on hover the colour rises to fill the frame */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 12px;
}

.bento-cell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.bento-big { grid-column: span 2; grid-row: span 2; }
.bento-wide { grid-column: span 2; }

.bento-fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c);
  transform: translateY(101%);
  transition: transform 0.65s var(--ease);
}

.bento-icon {
  color: var(--c);
  transition: color 0.45s ease, transform 0.6s var(--ease);
}

.bento-cell h3 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--c);
  transition: color 0.45s ease;
}

.bento-cell p {
  margin-top: 6px;
  max-width: 40ch;
  font-size: 0.9375rem;
  color: var(--ink-2);
  transition: color 0.45s ease;
}

/* "Make me a game" cycling through languages */
.bento-say {
  position: relative;
  height: 1.15em;
  overflow: hidden;
  font-size: clamp(2.25rem, 4.6vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.1;
  color: var(--ink);
  transition: color 0.45s ease;
}

.bento-say span {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  transform: translateY(105%);
  transition: transform 0.8s var(--ease), color 0.45s ease;
}

/* Each language gets its own colour from the bento palette */
.bento-say span:nth-child(1) { color: #4a6bff; }
.bento-say span:nth-child(2) { color: #e24a12; }
.bento-say span:nth-child(3) { color: #8f5cff; }
.bento-say span:nth-child(4) { color: #e0457b; }
.bento-say span:nth-child(5) { color: #0e936c; }

.bento-say span.is-in { transform: none; }
.bento-say span.is-out { transform: translateY(-105%); }

.bento-cmds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bento-cmds code {
  padding: 6px 12px;
  border: 1px solid var(--c);
  border-radius: 999px;
  color: var(--c);
  font: 500 0.9375rem/1 var(--font-body);
  transition: color 0.45s ease, border-color 0.45s ease, transform 0.5s var(--ease);
}

/* Per-frame hover fill, used wherever the magnifier below isn't running */
@media (hover: hover) {
  .bento-stage:not(.has-lens) .bento-cell:hover .bento-fill { transform: none; }
  .bento-stage:not(.has-lens) .bento-cell:hover .bento-icon { transform: translateY(-4px); }

  .bento-stage:not(.has-lens) .bento-cell:hover .bento-icon,
  .bento-stage:not(.has-lens) .bento-cell:hover h3,
  .bento-stage:not(.has-lens) .bento-cell:hover p,
  .bento-stage:not(.has-lens) .bento-cell:hover .bento-say,
  .bento-stage:not(.has-lens) .bento-cell:hover .bento-say span {
    color: #121212;
  }

  .bento-stage:not(.has-lens) .bento-cell:hover .bento-cmds code {
    color: #121212;
    border-color: #121212;
    transform: translateY(-4px);
  }

  .bento-stage:not(.has-lens) .bento-cell:hover .bento-cmds code:nth-child(2) { transition-delay: 0.06s; }
  .bento-stage:not(.has-lens) .bento-cell:hover .bento-cmds code:nth-child(3) { transition-delay: 0.12s; }
}

/* Magnifier (assets/js/bento-lens.js): a copy of the grid, every frame flooded and zoomed 1.14×,
   seen through a wandering circle; --lens-x/-y/-r are set in px on .bento-stage */
.bento-stage {
  position: relative;
}

/* Touch screens (no lens): the frame at the middle of the screen floods with its colour
   through a circle growing from its centre, and drains again as it scrolls on */
.bento-stage.is-touch .bento-fill {
  transform: none;
  clip-path: circle(0 at 50% 50%);
  transition: clip-path 0.8s var(--ease);
}

.bento-stage.is-touch .bento-cell.is-focus .bento-fill {
  clip-path: circle(75% at 50% 50%);
}

.bento-stage.is-touch .bento-cell.is-focus :is(.bento-icon, h3, p, .bento-say),
.bento-stage.is-touch .bento-cell.is-focus .bento-say span {
  color: #121212;
}

.bento-stage.is-touch .bento-cell.is-focus .bento-cmds code {
  color: #121212;
  border-color: #121212;
}

.bento-lens {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: circle(var(--lens-r, 0px) at var(--lens-x, 50%) var(--lens-y, 50%));
}

.bento-lens .bento {
  transform: scale(1.14);
  transform-origin: var(--lens-x, 50%) var(--lens-y, 50%);
}

.bento-lens .bento-fill {
  transform: none;
}

.bento-lens :is(.bento-icon, h3, p, .bento-say),
.bento-lens .bento-say span {
  color: #121212;
}

.bento-lens .bento-cmds code {
  color: #121212;
  border-color: #121212;
}

.bento-ring {
  position: absolute;
  left: var(--lens-x, 50%);
  top: var(--lens-y, 50%);
  width: calc(var(--lens-r, 0px) * 2);
  height: calc(var(--lens-r, 0px) * 2);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}

@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento-big, .bento-wide { grid-column: auto; grid-row: auto; }
}

/* Live interface (Meet Tinker): an abstract app that assembles and evolves; --c is the active step's colour */
.live-stage {
  --c: var(--node-1);
  position: relative;
  aspect-ratio: 16 / 9;
  /* Sized from the viewport height so the stage and the steps under it fit on one screen */
  width: min(100%, max(480px, calc((100svh - 340px) * 16 / 9)));
  margin-inline: auto;
}

.live-stage > * {
  position: absolute;
  box-sizing: border-box;
  transition: left 0.9s var(--ease), top 0.9s var(--ease), width 0.9s var(--ease), height 0.9s var(--ease),
    opacity 0.5s ease, background-color 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease;
}

.ui-frame {
  border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent);
  border-radius: 14px;
  background: var(--bg);
  box-shadow: 0 30px 60px -30px rgba(18, 18, 18, 0.35);
}

.ui-ghost {
  border: 1.5px dashed color-mix(in srgb, var(--c) 55%, transparent);
  border-radius: 12px;
  background: repeating-linear-gradient(180deg, transparent 0 18%, color-mix(in srgb, var(--c) 14%, transparent) 18% 30%);
}

.ui-head {
  display: flex;
  align-items: center;
  padding: 0 12px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--c);
  color: #fff;
  font-size: clamp(0.6875rem, 1.3vw, 0.9375rem);
  font-weight: 500;
  white-space: nowrap;
}

.ui-tile {
  overflow: hidden;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 18%, var(--bg-raised));
}

.ui-tile::before {
  content: "";
  position: absolute;
  left: 12%;
  top: 16%;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c);
  opacity: 0.85;
  transition: background-color 0.6s ease;
}

.ui-tile:nth-of-type(odd)::before {
  border-radius: 6px;
}

.ui-tile::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 24%;
  bottom: 18%;
  height: 11%;
  border-radius: 4px;
  background: color-mix(in srgb, var(--c) 40%, transparent);
}

.ui-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  overflow: hidden;
  border: 1.5px solid var(--c);
  border-radius: 999px;
  background: var(--bg);
  font-size: clamp(0.75rem, 1.6vw, 1.0625rem);
  white-space: nowrap;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 12%, transparent);
}

.ui-caret {
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  background: var(--c);
  animation: ui-blink 1s steps(1) infinite;
}

@keyframes ui-blink {
  50% { opacity: 0; }
}

.ui-badge {
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  font-size: clamp(0.625rem, 1.2vw, 0.8125rem);
  font-weight: 600;
  white-space: nowrap;
}

.live-stage .live-counter {
  top: 16px;
  right: 18px;
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Steps under the stage: the active one is full strength, the rest wait in the background */
.live-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px var(--gutter);
  margin-top: clamp(24px, 3vw, 36px);
  list-style: none;
}

.live-step {
  display: block;
  width: 100%;
  text-align: left;
  opacity: 0.4;
  transition: opacity 0.5s ease;
}

.live-step[aria-current] {
  opacity: 1;
}

@media (hover: hover) {
  .live-step:hover { opacity: 1; }
}

.live-step[aria-current] .index-num {
  color: var(--node);
}

.live-step h3 {
  margin: 12px 0 10px;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.live-step p {
  max-width: 36ch;
  color: var(--ink-2);
}

.live-nav {
  display: none;
}

/* Desktop: animation on the left, the steps stacked beside it */
@media (min-width: 1024px) {
  .live {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
  }

  .live-stage {
    aspect-ratio: 4 / 3;
    width: min(100%, calc((100svh - 180px) * 4 / 3));
  }

  .live-steps {
    grid-template-columns: 1fr;
    gap: clamp(20px, 2.4vw, 32px);
    margin-top: 0;
  }

  .live-step h3 { margin-top: 6px; }
  .live-step p { max-width: 44ch; }
}

@media (max-width: 860px) {
  .live-stage { aspect-ratio: 1; width: min(100%, max(280px, calc(100svh - 440px))); }

  /* One step at a time under the animation: all four share one spot and cross-fade */
  .live-steps { grid-template-columns: 1fr; }
  .live-steps > li { grid-area: 1 / 1; }

  .live-step {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.6s var(--ease);
  }

  .live-step[aria-current] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0.15s;
  }
  /* Previous / next arrows with a dot per step between them */
  .live-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
  }

  .live-arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: border-color 0.3s ease, background 0.3s ease;
  }

  .live-arrow:active {
    background: var(--bg-raised);
  }

  .live-dots {
    display: flex;
    gap: 4px;
  }

  .live-dot {
    position: relative;
    width: 28px;
    height: 28px;
  }

  .live-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 999px;
    background: var(--line);
    transition: width 0.4s var(--ease), margin 0.4s var(--ease), background 0.4s ease;
  }

  .live-dot[aria-current]::after {
    width: 22px;
    margin-left: -11px;
    background: var(--node);
  }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px var(--gutter);
}

.section-head-stack {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* FAQ heading stays in view, just under the header, while the questions scroll past */
.faq-layout .section-head-stack {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  align-self: start;
}

.section-head-stack .section-title {
  margin-top: 24px;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
}

.faq-list {
  grid-column: 2 / -1;
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-question-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 0;
  text-align: left;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  transition: color 0.2s;
}

.faq-question-btn:hover {
  color: var(--ink-2);
}

.faq-icon {
  position: relative;
  flex: 0 0 14px;
  height: 14px;
  transition: transform 0.4s var(--ease);
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
}

.faq-icon::after {
  transform: rotate(90deg);
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 0 28px;
  max-width: 64ch;
  color: var(--ink-2);
  animation: flash 0.4s ease;
}

.faq-answer p + p {
  margin-top: 12px;
}

.faq-answer a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 860px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-layout .section-head-stack { position: static; }
  .faq-list { grid-column: 1; }
}

/* Last section before the footer keeps breathing room above it */
.section-last {
  padding-bottom: clamp(80px, 11vw, 160px);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  padding: 0 0 32px;
}

.footer-statement {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  border-top: 4px solid var(--ink);
}

.footer-headline {
  font-size: clamp(2.25rem, 6vw, 5.5rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

/* Oversized year mark, its top lined up with "Built to tinker." */
.footer-mark {
  margin-top: -0.06em;
  font-size: clamp(3.5rem, 13vw, 12rem);
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.06em;
}

.footer-cta {
  margin-top: clamp(24px, 3vw, 40px);
}

/* Sits just above the bottom line */
.footer-blurb {
  max-width: 62ch;
  margin-top: clamp(56px, 8vw, 112px);
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--ink-2);
  text-wrap: pretty;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
}

.footer-legal {
  display: flex;
  gap: 20px;
}

.footer-legal a:hover,
.footer-credit a:hover {
  color: var(--accent);
}

.footer-credit a {
  color: var(--ink-2);
}

@media (max-width: 760px) {
  .footer-bottom { flex-direction: column; }
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 1s var(--ease);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   POLICY PAGES
   ========================================================================== */
.policy-nav-header {
  border-bottom: 1px solid var(--line);
}

.policy-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.brand-logo {
  width: 104px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 500;
}

.back-link:hover {
  color: var(--accent);
}

.policy-main {
  padding: clamp(56px, 8vw, 112px) 0 clamp(80px, 10vw, 140px);
}

.policy-section {
  max-width: 760px;
}

.policy-header {
  margin-bottom: 48px;
}

.policy-header h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
}

.policy-meta {
  margin-top: 16px;
  font-size: 0.875rem;
  color: var(--muted);
}

.policy-card {
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.policy-card h2 {
  margin-bottom: 12px;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.policy-card p,
.policy-card li {
  color: var(--ink-2);
  line-height: 1.7;
}

.policy-card p + p,
.policy-card p + ul,
.policy-card ul + p {
  margin-top: 12px;
}

.policy-card ul {
  padding-left: 20px;
}

.policy-card strong {
  color: var(--ink);
  font-weight: 500;
}

.policy-card a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.policy-card.highlight {
  margin-top: 16px;
  padding: 28px;
  border: 0;
  border-radius: var(--radius);
  background: var(--bg-raised);
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js .reveal { opacity: 1; transform: none; }
}