/* Studworks. Brand: amber #FFC83D, dark amber #E0A82E, charcoal navy #151A24, off-white text.
   Amber is kept for the logo, buttons, links and prices; headings stay off-white.
   Fredoka (assets/fonts) is under the SIL Open Font License 1.1. */
@font-face {
  font-family: 'Fredoka';
  src: url(/assets/fonts/fredoka-latin.woff2) format('woff2');
  font-weight: 500 700;
  font-display: swap;
}

:root {
  --amber: #FFC83D;
  --amber-dark: #E0A82E;
  --amber-light: #FFD86E;
  --navy: #151A24;
  --navy-deep: #0E121A;
  --navy-2: #1C2230;
  --navy-3: #252C3D;
  --text: #F3F0E8;
  --soft: #D8D5CD;
  --muted: #A9B0BF;
  --line: rgba(255, 255, 255, .1);
  --ok: #8FE3A6;
  --err: #FF9C8A;
  --display: 'Fredoka', 'Arial Rounded MT Bold', ui-rounded, system-ui, sans-serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
  --stud: radial-gradient(circle at center, rgba(255, 255, 255, .04) 0 3px, rgba(0, 0, 0, .16) 4px, transparent 5px) 0 0 / 30px 30px; /* a texture, kept quiet so it never pulls the eye */
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--text);
  font: 17px/1.6 var(--body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--amber); text-underline-offset: 3px; }
a:hover { color: var(--amber-light); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(255, 200, 61, .35); color: #fff; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(720px, 100% - 32px); margin-inline: auto; }
code { font: .95em var(--mono); background: var(--navy-3); padding: 2px 6px; border-radius: 4px; }

/* Header */
.top { position: relative; z-index: 5; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); text-decoration: none; font: 700 1.3rem var(--display); }
.brand img { width: 36px; height: 36px; transition: rotate .5s var(--ease); }
.brand:hover img { rotate: 45deg; } /* eight teeth, so an eighth of a turn lands on the same shape */
.brand:hover { color: var(--text); }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; font: 600 1rem var(--display); padding: 8px 12px; border-radius: 8px; white-space: nowrap; }
.nav a:hover, .nav a[aria-current] { color: var(--amber); }
.nav a:not(.nav-buy)::after { /* underline that slides in from the left */
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px; background: currentColor;
  scale: 0 1; transform-origin: left; transition: scale .25s var(--ease);
}
.nav a:not(.nav-buy):hover::after, .nav a[aria-current]:not(.nav-buy)::after { scale: 1 1; }
.nav .nav-buy { margin-left: 8px; padding-inline: 16px; color: var(--navy); background: var(--amber); box-shadow: 0 3px 0 var(--amber-dark); }
.nav .nav-buy:hover, .nav .nav-buy[aria-current] { color: var(--navy); background: var(--amber-light); }
@media (max-width: 480px) { /* room for four links on a phone: the logo alone stands for the name */
  .top .brand { font-size: 0; gap: 0; min-width: 44px; justify-content: center; }
  .nav a { padding-inline: 8px; }
  .nav a:not(.nav-buy)::after { left: 8px; right: 8px; }
  .nav .nav-buy { margin-left: 4px; padding-inline: 12px; }
}
.home .top { position: absolute; inset: 0 0 auto; }

/* Stud grid, the Roblox stud pattern from the banner */
.studs {
  position: absolute; inset: -60px;
  background: var(--stud);
  -webkit-mask: radial-gradient(ellipse 70% 42% at 50% 46%, transparent 35%, #000 100%); /* clear behind the hero's text */
  mask: radial-gradient(ellipse 70% 42% at 50% 46%, transparent 35%, #000 100%);
}

/* Front page hero: the brand mark and, until Friday, the countdown */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; padding: 104px 0 88px; }
.hero:has(.launch.is-out) { min-height: 0; padding-bottom: 56px; }
.hero::before { /* light from above, fading into the page below */
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(90% 60% at 50% 0%, #1E2638 0%, transparent 70%), linear-gradient(180deg, transparent 75%, var(--navy) 100%);
}
.stage { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.stage .studs { background: none; overflow: hidden; }
.stage .studs::before { /* falls straight down one tile per loop, so the loop has no seam */
  content: ''; position: absolute; inset: -30px 0 0; background: var(--stud);
  animation: rain 3s linear infinite; will-change: transform;
}
.gear-ghost { position: absolute; color: var(--amber); opacity: .07; will-change: transform; }
.gear-ghost.big { width: 115vmin; right: -38vmin; top: -20vmin; animation: spin 90s linear infinite; }
.gear-ghost.small { width: 48vmin; left: -16vmin; bottom: -10vmin; animation: spin 45s linear infinite reverse; }
.parallax { transition: translate .6s cubic-bezier(.2, .7, .2, 1); } /* translate, so it stacks on the spin transform */

.hero-inner { position: relative; text-align: center; width: min(920px, 100% - 32px); }
.hero-logo { width: clamp(96px, 22vw, 136px); margin: 0 auto 4px; }
.wordmark { font-size: clamp(3.3rem, 15vw, 6.4rem); letter-spacing: -.01em; margin: 0; color: var(--amber); text-shadow: 0 .06em 0 #9C6E10; }
.tagline { font: 600 clamp(1.2rem, 4.2vw, 1.6rem)/1.3 var(--display); margin: .45em 0 0; }

/* Launch countdown: digits roll down like the rain behind them */
.launch { margin: clamp(32px, 6vw, 48px) auto 0; }
.launch-label { margin: 0 0 14px; font: 600 1.05rem var(--display); color: var(--muted); }
.countdown { display: flex; justify-content: center; gap: clamp(8px, 2.4vw, 16px); }
.unit { display: grid; justify-items: center; gap: 8px; }
.tile {
  position: relative; display: grid; place-items: center; overflow: hidden;
  min-width: clamp(72px, 19vw, 128px); padding: clamp(10px, 2vw, 16px) clamp(4px, 1.4vw, 12px); border-radius: clamp(10px, 2vw, 14px);
  background: linear-gradient(180deg, #252C3E 0 50%, #1F2534 50% 100%);
  box-shadow: 0 5px 0 #0D1118;
}
.tile::after { /* the hinge line of a flip clock */
  content: ''; position: absolute; left: 0; right: 0; top: 50%; z-index: 2; height: 2px; margin-top: -1px; background: rgba(10, 13, 19, .7);
}
.digits { position: relative; z-index: 1; display: flex; font: 700 clamp(2.5rem, 10.5vw, 5.2rem)/1 var(--display); color: var(--amber); }
.slot { position: relative; width: .6em; height: 1.08em; overflow: hidden; }
.slot > span { position: absolute; inset: 0; text-align: center; line-height: 1.08; }
.unit-label { font: 600 1rem var(--display); color: var(--muted); }
.launch-when { margin: 18px 0 0; font: 600 clamp(1.05rem, 3.6vw, 1.3rem) var(--display); }
.preorder-hero { margin-top: 22px; }
.preorder > button { min-width: 220px; }
.launch.is-out .launch-label { font-size: clamp(1.4rem, 5vw, 2rem); color: var(--text); margin: 0; }

/* Demo video slot, 16:9. A <video> dropped in fills the frame. */
.video-frame { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0B0E14; box-shadow: 0 0 0 1px var(--line); }
.video-frame > video, .video-frame > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.video-frame figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 6px; background: rgba(14, 18, 26, .92); color: var(--text); font: 600 1rem var(--display); }
.demo { padding: 0 0 clamp(56px, 9vw, 96px); }
.page-head + .demo { padding-top: 40px; }

/* Buttons: amber with a brick's lip under it */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  font: 700 1rem var(--display); cursor: pointer; text-decoration: none;
  background: var(--amber); color: var(--navy); border: 0; border-radius: 10px; padding: 12px 22px;
  box-shadow: 0 3px 0 var(--amber-dark);
  transition: translate .15s var(--ease), box-shadow .15s var(--ease);
}
button:hover, .btn:hover { background: var(--amber-light); color: var(--navy); }
.btn-ghost, .btn-ghost:hover, .btn-ghost:active { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
.btn-ghost:hover { color: var(--amber); box-shadow: inset 0 0 0 1.5px var(--amber); }
@media (hover: hover) { /* lifts off its lip under the mouse, presses into it on a click */
  button:hover, .btn:hover { translate: 0 -2px; box-shadow: 0 5px 0 var(--amber-dark); }
  .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--amber); }
  .field button:hover { translate: none; box-shadow: 0 3px 0 var(--amber-dark); }
}
button:active, .btn:active { translate: 0 2px; box-shadow: 0 1px 0 var(--amber-dark); }
.btn-ghost:active { box-shadow: inset 0 0 0 1.5px var(--amber); }
button:disabled, button:disabled:hover { cursor: not-allowed; translate: none; color: var(--muted); background: var(--navy-3); box-shadow: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }

/* Sign-up form */
.signup { position: relative; max-width: 500px; }
.field-wrap { position: relative; }
.field { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 14px; border: 1.5px solid rgba(255, 255, 255, .18); border-radius: 12px; background: var(--navy-deep); }
.field input { flex: 1; min-width: 0; min-height: 48px; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 1.05rem; padding: 0 4px; }
.field input::placeholder { color: #7D8597; }
.field input:focus { outline: none; }
.field button { flex: none; position: relative; }
.field:focus-within { border-color: var(--amber); }
.field:has(button:focus-visible) { border-color: rgba(255, 255, 255, .18); } /* the button shows its own ring */
.field-wrap::after { /* a soft glow that fades in around the field while you type */
  content: ''; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 4px rgba(255, 200, 61, .16); opacity: 0; transition: opacity .2s var(--ease);
}
.field-wrap:has(input:focus)::after { opacity: 1; }
.is-error .field-wrap::after { box-shadow: 0 0 0 4px rgba(255, 156, 138, .16); }

.spinner { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border: 3px solid rgba(21, 26, 36, .25); border-top-color: var(--navy); border-radius: 50%; opacity: 0; animation: spin .7s linear infinite; }
.btn-label { transition: opacity .2s; }
.is-busy .field button { cursor: progress; }
.is-busy .btn-label { opacity: 0; }
.is-busy .spinner { opacity: 1; }
.is-error .field, .is-error .field:focus-within { border-color: var(--err); }

.hp { position: absolute; left: -9999px; }
.fine { color: var(--muted); font-size: 1rem; margin: 1em 0 0; max-width: 32em; }
.msg { margin: .9em 0 0; font-weight: 600; min-height: 1.6em; }
.msg-ok { color: var(--ok); }
.msg-err { color: var(--err); }

/* After a sign-up the field gives way to the message */
.is-done .field-wrap, .is-done .fine { display: none; }
.msg-err { animation: drop .3s var(--ease) backwards; }
.msg-card { animation: rise .5s var(--ease) backwards; margin: 0; padding: 16px 18px; color: var(--soft); font-weight: 400; border-radius: 10px; background: var(--navy-2); border-left: 4px solid var(--ok); }
.msg-card strong { display: block; color: var(--text); font: 700 1.2rem/1.3 var(--display); margin-bottom: 2px; }
.again { min-height: 44px; margin-top: 8px; padding: 8px 0; background: none; box-shadow: none; color: var(--muted); font: 600 1rem var(--body); text-decoration: underline; text-underline-offset: 3px; }
.again:hover, .again:active { color: var(--amber); background: none; box-shadow: none; translate: none; }
.burst { position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; z-index: 3; }


/* Sections below the hero */
.section { padding: clamp(56px, 9vw, 96px) 0; border-top: 1px solid var(--line); }
.section h2, .section-title { font-size: clamp(1.8rem, 4.6vw, 2.6rem); }
.lede { color: var(--soft); max-width: 38em; }
.muted { color: var(--muted); }
.cols { display: grid; gap: 32px; }
@media (min-width: 820px) { .cols { grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: start; } }

/* Front page: what it costs */
.prices { margin: 0; }
.prices div { padding: 16px 0; border-top: 1px solid var(--line); }
.prices div:last-child { border-bottom: 1px solid var(--line); }
.prices dt { display: flex; justify-content: space-between; gap: 12px; font: 700 1.2rem var(--display); }
.prices dt span { color: var(--amber); }
.prices dd { margin: 4px 0 0; color: var(--muted); }

/* Front page: newsletter on a band of studs */
.news { position: relative; overflow: hidden; background: var(--navy-deep); }
.news::before { content: ''; position: absolute; inset: 0; background: var(--stud); -webkit-mask: linear-gradient(90deg, transparent 40%, #000); mask: linear-gradient(90deg, transparent 40%, #000); pointer-events: none; }
.news .cols { position: relative; align-items: center; }
.news p { margin-top: 0; }

/* Front page: example shops. site.js moves the strip on every few seconds; a finger, the mouse or keyboard focus holds it.
   Without JavaScript it is a plain strip that scrolls. */
.section-head { margin-bottom: 20px; }
.section-head h2 { margin: 0; }
.section-head p { margin: 6px 0 0; color: var(--muted); }
.slider { --slide-time: 5.5s; }
.slides { list-style: none; margin: 0; padding: 0 0 12px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-color: var(--navy-3) transparent; }
.slides > li { flex: 0 0 min(100%, 820px); scroll-snap-align: start; }
.slides.is-live { padding-bottom: 0; scrollbar-width: none; }
.slides.is-live::-webkit-scrollbar { display: none; }
.slides.is-live > li { transition: opacity .5s var(--ease), scale .5s var(--ease); }
.slides.is-live > li:not(.is-on) { opacity: .4; scale: .97; }
.slide-bar { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.slide-dots { flex: 1; display: flex; max-width: 360px; }
.slide-dots button, .slide-dots button:hover, .slide-dots button:active {
  flex: 1; position: relative; min-height: 44px; padding: 0; border-radius: 0; background: none; box-shadow: none; translate: none;
}
.slide-dots button::before, .slide-dots button::after { /* the track, and the amber fill that runs along it */
  content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--navy-3);
}
.slide-dots button::after { background: var(--amber); scale: 0 1; transform-origin: left; }
.slide-dots button:hover::before { background: #343C50; }
.slide-dots .is-done::after { scale: 1 1; }
.slide-dots [aria-current]::after { animation: fill var(--slide-time) linear forwards; }
.slider:is(.is-held, .is-away, :has(:focus-visible)) .slide-dots [aria-current]::after { animation-play-state: paused; }
@media (hover: hover) { .slider:hover .slide-dots [aria-current]::after { animation-play-state: paused; } }
.slide-nav { display: flex; gap: 8px; margin-left: auto; }
.slide-nav button { width: 48px; padding: 0; color: var(--text); background: var(--navy-3); box-shadow: 0 3px 0 #0D1118; }
.slide-nav button:hover { color: var(--amber); background: #2C3447; }
@media (hover: hover) { .slide-nav button:hover { box-shadow: 0 5px 0 #0D1118; } }
.slide-nav button:active { box-shadow: 0 1px 0 #0D1118; }
.slide-nav svg { transition: translate .2s var(--ease); }
.slide-nav [data-step="-1"]:hover svg { translate: -2px 0; }
.slide-nav [data-step="1"]:hover svg { translate: 2px 0; }
.slides img { width: 100%; aspect-ratio: 836 / 560; object-fit: contain; border-radius: 10px; background: #0B0E14; box-shadow: 0 0 0 1px var(--line); }
.slides figure { margin: 0; }
.slides figcaption { margin-top: 10px; color: var(--muted); }
.slides figcaption strong { color: var(--text); font-weight: 600; }

/* Front page: combinations, set out like Studio's Properties window */
.combo { display: grid; gap: 20px; padding: 36px 0; border-top: 1px solid var(--line); }
.combo:first-of-type { border-top: 0; padding-top: 12px; }
@media (min-width: 820px) {
  .combo { grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: center; }
  .combo:nth-of-type(even) { grid-template-columns: 1fr 1.35fr; }
  .combo:nth-of-type(even) > img { order: 2; }
}
.combo img { border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.combo h3 { font-size: 1.5rem; }
.combo p { color: var(--soft); margin: 14px 0 0; }
.props { margin: 0; display: grid; grid-template-columns: max-content 1fr; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--navy-deep); }
.props dt, .props dd { margin: 0; padding: 6px 12px; border-top: 1px solid var(--line); }
.props dt:first-of-type, .props dt:first-of-type + dd { border-top: 0; }
.props dt { color: var(--muted); border-right: 1px solid var(--line); }
.props dd { font-family: var(--mono); color: var(--text); }

.closing .wrap > p { font: 600 clamp(1.3rem, 3.6vw, 1.7rem)/1.3 var(--display); margin: 0; }
.closing .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }

/* Inner pages */
.page-head { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 72px) 0 clamp(32px, 5vw, 52px); border-bottom: 1px solid var(--line); }
.page-head .studs { inset: 0; -webkit-mask: linear-gradient(90deg, transparent 45%, #000 100%); mask: linear-gradient(90deg, transparent 45%, #000 100%); }
.page-head > div:not(.studs) { position: relative; }
.page-head h1 { font-size: clamp(2.3rem, 7vw, 3.6rem); margin-bottom: .25em; }
.page-head p { color: var(--muted); margin: 0; max-width: 36em; font-size: 1.08rem; }
.prose { padding: 48px 0 72px; }
.prose h2 { font-size: 1.6rem; margin-top: 1.8em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--soft); }
.prose code { white-space: nowrap; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.figure { margin: 24px 0; }
.figure img { border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.figure figcaption { margin-top: 8px; color: var(--muted); }

/* FAQ */
.faq h2 { margin: 1.6em 0 .2em; font-size: 1.25rem; color: var(--muted); }
.faq h2:first-child { margin-top: 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 40px 16px 0; font: 600 1.1rem/1.35 var(--display); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 6px; top: 12px; font-size: 1.5rem; color: var(--muted); transition: rotate .25s var(--ease); }
.faq details[open]:not(.is-closing) summary::after { rotate: 45deg; } /* site.js adds .is-closing while an answer folds away */
.faq summary:hover { color: var(--amber); }
.faq details > div { padding: 0 0 14px; }
.faq details[open] > div { animation: drop .3s var(--ease); }
.faq details > div p { margin: 0 0 .8em; }
.faq .figure { margin: 4px 0 16px; }
.chat-slot { margin-top: 48px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--navy-2); }
.chat-slot h2 { margin: 0 0 .3em; font-size: 1.3rem; }
.chat-slot p { margin: 0; color: var(--muted); }

/* Cashier page */
.feature { display: grid; gap: 20px; padding: 40px 0; border-top: 1px solid var(--line); }
.feature:first-of-type { border-top: 0; padding-top: 8px; }
@media (min-width: 820px) {
  .feature { grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: center; }
  .feature.flip { grid-template-columns: 1.3fr 1fr; }
  .feature.flip > img { order: -1; }
}
.feature h3 { font-size: 1.5rem; }
.feature p { color: var(--soft); }
.feature img { border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.feature + h2 { margin-top: 48px; }
.facts { display: grid; gap: 0 48px; margin: 8px 0 0; }
@media (min-width: 720px) { .facts { grid-template-columns: 1fr 1fr; } }
.facts div { padding: 16px 0; border-top: 1px solid var(--line); }
.facts dt { font: 600 1.1rem var(--display); }
.facts dd { margin: 4px 0 0; color: var(--muted); }
.styles { list-style: none; padding: 0; margin: 28px 0 20px; display: grid; gap: 28px 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.shot { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--navy-2); box-shadow: 0 0 0 1px var(--line); }
.styles .shot { aspect-ratio: 5 / 3; object-fit: cover; object-position: top; }
.style-tile p, .prose .example-tile p { margin: 10px 0 0; color: var(--muted); }
.style-tile strong, .example-tile strong { color: var(--text); font-weight: 600; }

/* Buy page: the two choices side by side */
.plans { display: grid; gap: 24px; padding-block: clamp(36px, 6vw, 56px) 8px; }
@media (min-width: 780px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { display: flex; flex-direction: column; padding: 24px; border-radius: 12px; background: var(--navy-2); border: 1px solid var(--line); }
.plan.is-full { border-top: 4px solid var(--amber); }
.plan h2 { font-size: 1.8rem; margin: 0; }
.plan .price { font: 700 1.5rem var(--display); color: var(--amber); margin: .1em 0 .8em; }
.plan .shot { margin-bottom: 18px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.plan ul { margin: 0 0 24px; padding-left: 1.2em; color: var(--soft); }
.plan li + li { margin-top: .35em; }
.plan > button, .plan > .btn { width: 100%; margin-top: auto; }
.plan > button { position: relative; } /* holds the spinner */
.buy-msg { min-height: 1.6em; margin: 12px 0 0; font-weight: 600; color: var(--muted); }
.buy-msg.msg-err { color: var(--err); }
.buy-msg:empty { min-height: 0; margin: 0; } /* keeps the two buttons level until there is something to say */
.pay-note { margin: 6px 0 0; color: var(--muted); }
.buy-help { color: var(--muted); padding: 24px 0 80px; }

/* Thanks page */
.order { display: flex; gap: 18px; align-items: flex-start; padding: 22px; margin-bottom: 8px; border-radius: 12px; background: var(--navy-2); border: 1px solid var(--line); }
.order-icon { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--navy-3) center / 24px no-repeat; }
.order[data-state="checking"] .order-icon { border-radius: 50%; border: 4px solid rgba(255, 200, 61, .2); border-top-color: var(--amber); animation: spin .8s linear infinite; }
.order[data-state="ok"] .order-icon, .order[data-state="paid"] .order-icon {
  background-color: var(--amber);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151A24' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.order:not([data-state="checking"]) .order-icon { animation: pop .45s var(--ease) backwards; } /* the answer lands */
.order-download:not([hidden]) { animation: rise .5s .1s var(--ease) backwards; }
.order[data-state="error"] .order-icon, .order[data-state="stub"] .order-icon {
  background-color: rgba(255, 156, 138, .14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF9C8A' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18.5v.01'/%3E%3C/svg%3E");
}
.prose .order-title { font-size: 1.4rem; margin: 4px 0 .3em; }
.prose .order-text { margin: 0; color: var(--muted); }
.order-download { margin-top: 18px; }

/* Placeholder pages: a dashed box says what isn't there yet */
.note-card { padding: 20px 22px; border-radius: 10px; border: 1.5px dashed rgba(255, 255, 255, .2); }
.prose .note-card h2 { font-size: 1.3rem; margin: 0 0 .3em; }
.note-card p { margin: 0; }

/* Patch notes */
.versions { display: flex; flex-wrap: wrap; gap: 0 10px; margin: 0 0 40px; padding: 0; list-style: none; font: 600 1rem var(--display); }
.prose .versions li + li { margin-top: 0; }
.versions a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.release { padding: 0 0 44px; margin: 0 0 44px; border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.prose .release h2 { margin: 0; font-size: 2rem; }
.prose .release-date { color: var(--muted); margin: .2em 0 1em; }
.prose .release h3 { margin: 1.6em 0 .5em; font-size: 1.15rem; }
.prose .release ul { margin: 0 0 .4em; }
.release.is-small h2 { font-size: 1.5rem; }

/* Docs */
.on-page { columns: 2 220px; margin: 0 0 8px; padding-left: 1.3em; }
.prose .on-page li { margin: 0; }
.on-page a { display: inline-block; padding-block: 9px; }
.docs [id] { scroll-margin-top: 16px; }
.docs h3 { font-size: 1.2rem; margin: 1.7em 0 .4em; }
.ref dt { font: 600 1.05rem var(--display); color: var(--text); margin-top: 1.1em; }
.ref dd { margin: .2em 0 0; color: var(--soft); }
.examples { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 28px 20px; }
@media (min-width: 720px) { /* one shop leads, the rest sit in pairs under it */
  .examples { grid-template-columns: 1fr 1fr; }
  .examples > li:first-child { grid-column: 1 / -1; }
}
.next-links { padding-left: 1.2em; }

/* Footer */
.site-footer { background: var(--navy-deep); border-top: 1px solid var(--line); padding: 48px 0 32px; }
/* Columns wrap as space allows, so a column hidden until launch leaves no hole */
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 28px 48px; }
.site-footer .wrap > * { flex: 1 1 150px; }
.site-footer .wrap > .foot-brand { flex: 1.6 1 240px; }
.site-footer .wrap > .legal { flex-basis: 100%; }
.site-footer h2 { font: 600 1rem var(--display); color: var(--muted); margin: 0 0 .6em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0; }
.site-footer li a { position: relative; display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 10px 0; color: var(--text); text-decoration: none; }
.site-footer li a:hover { color: var(--amber); }
.site-footer li a::after { /* the same sliding underline as the top nav */
  content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; border-radius: 2px; background: currentColor;
  scale: 0 1; transform-origin: left; transition: scale .25s var(--ease);
}
.site-footer li a:hover::after { scale: 1 1; }
.site-footer .handle { color: var(--muted); }
.site-footer .tag { color: var(--muted); margin: .5em 0 0; max-width: 22em; }
.legal { color: #7D8597; margin: 0; padding-top: 20px; border-top: 1px solid var(--line); }

/* Preview gate */
.gate { min-height: 100svh; display: grid; place-items: center; background: var(--navy); }
.gate-card { width: min(400px, 100% - 32px); text-align: center; background: var(--navy-2); border: 1px solid var(--line); border-radius: 12px; padding: 32px 24px; }
.gate-card img { margin: 0 auto 6px; }
.gate-card h1 { color: var(--amber); font-size: 2.2rem; margin: 0; }
.gate-card p { color: var(--muted); }
.gate-card form { display: grid; gap: 10px; }
.gate-card input { font: inherit; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--navy); color: var(--text); }
.gate-back { font-size: .9rem; margin: 18px 0 0; }

/* Motion. Only transform and opacity move, so nothing reflows.
   The hero and page heads rise in on load in CSS alone, so they finish visible even if the script never runs.
   Further down, site.js marks what starts below the fold with .reveal and adds .is-in when it scrolls into view. */
.hero-logo { animation: pop .7s var(--ease) backwards; }
.wordmark { animation: rise .7s .08s var(--ease) backwards; }
.tagline { animation: rise .7s .16s var(--ease) backwards; }
.launch { animation: rise .7s .24s var(--ease) backwards; }
.page-head :is(.wrap, .narrow) > * { animation: rise .6s var(--ease) backwards; }
.page-head :is(.wrap, .narrow) > :nth-child(2) { animation-delay: .06s; }
.page-head :is(.wrap, .narrow) > :nth-child(n+3) { animation-delay: .12s; }
.reveal:not(.is-in) { opacity: 0; }
.reveal.is-in { animation: rise .6s var(--ease) var(--d, 0s) backwards; }
@media print { .reveal:not(.is-in) { opacity: 1; } }
@media (hover: hover) { /* screenshots lift a little under the mouse */
  .plan, .shot, .combo > img, .feature > img { transition: translate .35s var(--ease); }
  .plan:hover, :is(.style-tile, .example-tile):hover .shot, .combo:hover > img, .feature:hover > img { translate: 0 -4px; }
}
.nav a:active, .site-footer li a:active, .faq summary:active, .versions a:active, .on-page a:active { translate: 0 1px; }

@keyframes rain { to { transform: translateY(30px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fill { to { scale: 1 1; } }
@keyframes rise { from { opacity: 0; translate: 0 18px; } }
@keyframes pop { from { opacity: 0; scale: .8; } }
@keyframes drop { from { opacity: 0; translate: 0 -6px; } }

/* Background motion (anything marked .loop) always runs: Peter's call, 2026-10-27. "Reduce motion" in the system
   turns off hover and click transitions, and whatever rises, pops or drops in only fades in, without moving. */
@media (prefers-reduced-motion: reduce) {
  :not(.loop), :not(.loop)::before, :not(.loop)::after { transition: none !important; }
  .faq details[open] > div { animation: none; }
  @keyframes rise { from { opacity: 0; } }
  @keyframes pop { from { opacity: 0; } }
  @keyframes drop { from { opacity: 0; } }
}