/* Flinter · coming soon. A variation of hero-explorations/styles.css: the same type, flat surfaces, hairline rings and
   silk, warmed toward the mark's orange. Nothing casts a shadow and nothing rises on hover; edges are zero-blur rings,
   hover is a change of colour, and backgrounds are plain colour or a soft gradient. */

/* ───────────── Tokens ───────────── */
:root {
  --bg: #F3F1EE;
  --ink: #111113;
  --ink-2: #2C2C31;
  --soft: #5E5E66;
  --mute: #8A8A93;
  --line: rgba(17, 17, 19, .08);
  --line-2: rgba(17, 17, 19, .12);
  --flint: #FE6023;
  --flint-d: #D9480F;
  --tint: #FFF0E8;
  --eyebrow: #E8541C;
  /* The rest of the accent's family, so a palette (themes.js) can recolour the page: a hover shade; bright, light and
     pale shades for dark grounds; the shade the dark headline's sheen starts from; the accent on black and the text
     that sits on it; the paper the hero and the last word are lit on; the mark's gradient; the wordmark; and the three
     inks the hero's word is filled with, one per kind of thing it names. */
  --flint-h: #FF7238;
  --flint-b: #FF7A45;
  --flint-l: #FFB08C;
  --flint-p: #FFCCA8;
  --flint-s: #E6501A;
  --flint-k: #FE6023;
  --on-k: #1C0903;
  --paper: #FCF9F6;
  --paper-2: #F7F1EB;
  --mk-a: #FF8A4C;
  --mk-b: #F0471A;
  --mk-da: var(--mk-a);
  --mk-db: var(--mk-b);
  --wm: #161616;
  --w1-a: #B4390C; --w1-b: #FE6023; --w1-c: #FF9C62;
  --w2-a: #A85205; --w2-b: #EF7E0C; --w2-c: #FFBE5C;
  --w3-a: #A8263C; --w3-b: #EC4E62; --w3-c: #FF968A;
  --ok: #12A150;
  --bad: #C2330F;
  --accent: var(--flint);

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--flint); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

[data-ribbon] { pointer-events: none; }
[data-ribbon] canvas { display: block; width: 100%; height: 100%; }
.no-gl { background: radial-gradient(60% 40% at 45% 55%, color-mix(in srgb, var(--flint) 35%, transparent), transparent 70%), radial-gradient(40% 30% at 60% 45%, color-mix(in srgb, var(--flint-p) 50%, transparent), transparent 70%); }

/* ───────────── Icons ───────────── */
.li { display: inline-block; flex: none; width: var(--s, 16px); height: var(--s, 16px); line-height: 0; vertical-align: middle; }
.li svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--sw, 1.5); stroke-linecap: round; stroke-linejoin: round; }

/* The mark: the orange block, drawn by app.js as one evenodd path so the eyes stay true holes on any background.
   Its eyes move and blink by rewriting the path, so there is nothing to style here but its size and colour. It fills
   with the logo's gradient (#mk-fill, in the page's sprite); a mark given a flat colour fills with currentColor. */
.sprite { position: absolute; }
#mk-fill stop:first-child { stop-color: var(--mk-a); }
#mk-fill stop:last-child { stop-color: var(--mk-b); }
/* On the black grounds (early access, the footer) marks take #mk-fill-d, the same gradient unless a palette whose mark
   is dark gives it a lighter one there. */
#mk-fill-d stop:first-child { stop-color: var(--mk-da); }
#mk-fill-d stop:last-child { stop-color: var(--mk-db); }
.access .mk path { fill: url(#mk-fill-d); }
.mk { position: relative; display: inline-block; flex: none; width: var(--s, 28px); height: var(--s, 28px); color: var(--flint); vertical-align: middle; line-height: 0; }
.mk svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mk path { fill: url(#mk-fill); }
.mk.hop { animation: hop .7s var(--ease); }
@keyframes hop { 30% { translate: 0 -14%; } 55% { translate: 0 0; } 70% { translate: 0 -4%; } }

/* ───────────── Shared ───────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 17px; border-radius: 999px; font: 500 14px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; transition: background .2s; }
.btn-dark { color: #fff; background: var(--ink); }
.btn-dark:hover { background: var(--ink-2); }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes popIn { from { opacity: 0; translate: 0 6px; } }
.eyebrow { margin-bottom: 18px; font: 500 13px/1 var(--sans); color: var(--eyebrow); }

.sc-dots { display: flex; gap: 4px; padding: 7px 8px; }
.sc-dots i { width: 6px; height: 6px; border-radius: 50%; background: #E4E1DD; }
.sc-lines { display: grid; gap: 5px; }
.sc-lines i { display: block; width: var(--w, 100%); height: 5px; border-radius: 3px; background: #EEECE9; }
/* ───────────── Navigation ───────────── */
/* As on the main site: at the top of the page the bar is only its links, on nothing; a few pixels down it gathers
   into a glass island. Two menus (Product, Solutions), the blog, and one button that takes you to the form. The
   links are src/menu.ts and the behaviour public/assets/js/nav.js, on every page. */
.nav { position: fixed; z-index: 30; top: 0; left: 50%; width: min(1200px, calc(100% - 32px)); translate: -50% 0; transition: width .6s var(--ease), top .6s var(--ease); }
.nav-bar {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; padding: 0 4px; border-radius: 999px;
  background: rgba(255, 255, 255, 0);
  -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1);
  box-shadow: 0 0 0 1px rgba(17, 17, 19, 0);
  transition: height .6s var(--ease), padding .6s var(--ease), background-color .45s, box-shadow .45s, -webkit-backdrop-filter .45s, backdrop-filter .45s;
}
.nav.is-island { top: 12px; width: min(880px, calc(100% - 24px)); }
.nav.is-island .nav-bar {
  height: 60px; padding: 0 8px 0 16px;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 0 0 1px rgba(17, 17, 19, .08);
}
/* The logo: the live mark and the wordmark beside it. The wordmark's frame starts at the mark's right edge and is
   sized in the mark's units (--s), so the pair keeps the proportions and spacing of logos/flinter.svg at any size. */
.brand { --s: 24px; justify-self: start; display: inline-flex; align-items: center; text-decoration: none; color: var(--wm); }
.brand .mk, .brand .wm { transition: width .6s var(--ease), height .6s var(--ease); }
.brand .wm { display: block; flex: none; width: calc(var(--s) * 3.4713); height: calc(var(--s) * .98325); fill: currentColor; }
.nav.is-island .brand { --s: 22px; }

.nav-links { display: flex; align-items: center; }
.nav-link { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 40px; padding: 0 15px; border-radius: 999px; font: 500 14.5px/1 var(--sans); letter-spacing: -.01em; color: var(--ink-2); text-decoration: none; transition: color .2s; }
.nav-link:hover { color: var(--ink); }
.nav-glide { position: absolute; top: calc(50% - 20px); left: 0; width: 0; height: 40px; border-radius: 999px; background: rgba(17, 17, 19, .055); opacity: 0; pointer-events: none; transition: translate .4s var(--ease), width .4s var(--ease), opacity .25s; }
.nav-end { justify-self: end; display: flex; align-items: center; }
.nav-cta { height: 44px; padding: 0 16px 0 20px; font-size: 14.5px; transition: background .2s, height .6s var(--ease); }
.nav.is-island .nav-cta { height: 42px; }
.nav-cta .li { --s: 15px; --sw: 1.9; transition: translate .3s var(--ease); }
.nav-cta:hover .li { translate: 2px 0; }
.is-joined .nav-cta .li { color: var(--flint-l); }
.is-joined .nav-cta:hover .li { translate: none; }

/* The menus. Each opens under the bar from its button, on one white ground (.nav-pop) that changes height as you move
   from one menu to the other while their links blur out and in on top of it. Columns of links, each an icon tile, a
   name and one line; the last column sits on the warm paper. Above each open menu an invisible strip bridges the gap
   to the bar, so the pointer stays inside the nav on its way down. */
.nav-item { display: contents; }
.nav-trig { gap: 4px; padding-right: 11px; }
.nav-trig .li { --s: 14px; --sw: 1.8; color: var(--mute); transition: rotate .3s var(--ease), color .2s; }
.nav-trig:hover .li, .nav-trig[aria-expanded="true"] .li { color: var(--ink); }
.nav-trig[aria-expanded="true"] { color: var(--ink); }
.nav-trig[aria-expanded="true"] .li { rotate: 180deg; }
.nav-link[aria-current="page"] { color: var(--ink); }

.nav-pop, .nav-menu { position: absolute; top: calc(100% + 10px); left: 50%; width: min(880px, calc(100vw - 24px)); }
.nav-pop {
  height: 0; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line-2);
  opacity: 0; translate: -50% -4px; pointer-events: none;
  transition: opacity .16s, translate .16s, height .4s var(--ease);
}
.nav-pop.is-open { opacity: 1; translate: -50% 0; transition: opacity .26s var(--ease), translate .32s var(--ease), height .4s var(--ease); }
.nav-pop.is-snap { transition-property: opacity, translate; }
.nav-menu {
  z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px;
  opacity: 0; filter: blur(4px); translate: -50% -4px; visibility: hidden; pointer-events: none;
  transition: opacity .14s, filter .14s, translate .14s, visibility 0s .14s;
}
.nav-menu.is-on {
  opacity: 1; filter: none; translate: -50% 0; visibility: visible; pointer-events: auto;
  transition: opacity .3s var(--ease) .04s, filter .3s var(--ease) .04s, translate .34s var(--ease) .04s, visibility 0s;
}
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; }

.nm-col { display: flex; flex-direction: column; gap: 14px; padding: 16px 8px 8px; }
.nm-col.is-wide { grid-column: span 2; }
.nm-col.is-tint { border-radius: 18px; background: var(--paper-2); }
.nm-label { margin-bottom: 6px; padding: 0 10px; font: 500 12.5px/1 var(--sans); color: var(--mute); }
.nm-list { display: grid; margin: 0; padding: 0; list-style: none; }
.is-wide .nm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 1), auto); grid-auto-flow: column; }
.nm-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 9px 10px; border-radius: 14px; text-decoration: none; transition: background .2s; }
.nm-item:hover { background: rgba(17, 17, 19, .04); }
.nm-ic { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--ink-2); background: #fff; box-shadow: 0 0 0 1px var(--line-2); transition: color .2s; }
.nm-ic .li { --s: 17px; }
:is(.nm-item, .ns-item):is(:hover, :focus-visible) .nm-ic { color: var(--flint); }
.nm-t { font: 500 14px/1.3 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.nm-x { font: 400 12.5px/1.35 var(--sans); color: var(--soft); }

/* Under 1024px the links give way to the menu button, which opens the same links as a sheet under the bar: each menu
   folds open in place, then the blog. */
.nav-burger { display: none; place-items: center; width: 44px; height: 44px; margin-right: 8px; border-radius: 999px; color: var(--ink); background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .2s, width .6s var(--ease), height .6s var(--ease); }
.nav-burger:hover { background: #fff; }
.nav.is-island .nav-burger { width: 42px; height: 42px; }
.nav-burger .li { grid-area: 1 / 1; --s: 18px; --sw: 1.7; transition: opacity .2s, rotate .3s var(--ease); }
.nav-burger .li + .li { opacity: 0; rotate: -45deg; }
.nav-burger[aria-expanded="true"] .li:first-child { opacity: 0; rotate: 45deg; }
.nav-burger[aria-expanded="true"] .li + .li { opacity: 1; rotate: 0deg; }

.nav-sheet {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0; display: none;
  max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; padding: 6px;
  border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line-2);
  opacity: 0; filter: blur(4px); translate: 0 -4px; visibility: hidden;
  transition: opacity .14s, filter .14s, translate .14s, visibility 0s .14s;
}
.nav-sheet.is-open { opacity: 1; filter: none; translate: 0 0; visibility: visible; transition: opacity .28s var(--ease), filter .28s var(--ease), translate .32s var(--ease), visibility 0s; }
.ns-row { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 16px; border-radius: 16px; font: 500 16px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); text-decoration: none; list-style: none; cursor: pointer; transition: background .2s; }
.ns-row::-webkit-details-marker { display: none; }
.ns-row:hover { background: rgba(17, 17, 19, .04); }
.ns-row .li { --s: 16px; --sw: 1.8; color: var(--mute); transition: rotate .3s var(--ease); }
.ns-menu[open] > .ns-row .li { rotate: 180deg; }
.ns-body { display: grid; gap: 14px; padding: 6px 6px 14px; }
.ns-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ns-item { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 12px; font: 500 14.5px/1.25 var(--sans); letter-spacing: -.01em; color: var(--ink); text-decoration: none; transition: background .2s; }
.ns-item:hover { background: rgba(17, 17, 19, .04); }
.ns-item .nm-ic { flex: none; width: 32px; height: 32px; }

@media (prefers-reduced-motion: reduce) {
  .nav-pop, .nav-menu, .nav-sheet, .nav-trig .li, .nav-burger .li, .ns-row .li { transition: none !important; }
  .nav-menu, .nav-sheet { filter: none; }
}

/* ═════════════ HERO ═════════════ */
/* The main hero, at night: a dark island like the early-access section and the footer (#0B0B0C, 40px corners, 12px
   in from the window on every side), with the bar inside it at the top. A veil of light (veil.js) bends through the
   form; the copy is centred in the room under the bar. */
.hero {
  --d-ink: #F5F5F7; --d-soft: rgba(245, 245, 247, .62); --d-mute: rgba(245, 245, 247, .4); --d-line: rgba(255, 255, 255, .08); --d-ring: rgba(255, 255, 255, .12);
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  min-height: min(calc(100svh - 24px), 900px); margin: 12px; padding-bottom: 56px; border-radius: 40px; color: var(--d-ink); background: #0B0B0C;
}
.hero-veil { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.hero-veil canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .9s var(--ease); }
.hero-veil canvas.is-on { opacity: 1; }
.hero-veil.no-gl { background: radial-gradient(55% 22% at 50% 74%, color-mix(in srgb, var(--flint) 32%, transparent), transparent 70%); }
.hero-in { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 96px 20px 0; }

/* The live chip: a word on a small WebGL shader (chips.js), in one of the plates' palettes (gradient.js). The colours
   flow through it like a tide and a light crosses it every few seconds. Every page's "In early access" / "Coming soon"
   pill and the home's badge use it, all in night (ink with the flint glow passing through). Until the first frame, and
   without WebGL, a CSS gradient in the same colours (chips.js sets it per palette; night's is here for no script).
   Light palettes get ink text (.chip-ink). */
.chip {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; height: 24px;
  padding: 0 10px; border-radius: 999px; font-weight: 500; color: #fff; white-space: nowrap;
  background: linear-gradient(100deg, #07081C 0%, #1A1D5A 33%, #3B2A9A 67%, #FE6023 100%);
  text-shadow: 0 0 6px rgb(0 0 0 / .35), 0 1px 1px rgb(0 0 0 / .2);
}
.chip canvas { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); }
.chip.chip-live canvas { opacity: 1; }
/* a hairline of light round the inside, so the chip reads as a surface, not a hole */
.chip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), inset 0 1px 0 rgb(255 255 255 / .16); }
.chip.chip-ink { color: var(--ink); text-shadow: 0 0 6px rgb(255 255 255 / .5); }

/* Coming soon: a white pill with a hairline, the label on a live chip (above), then the line. As the home's badge. */
.soon { display: inline-flex; align-items: center; gap: 10px; height: 32px; margin-bottom: 26px; padding: 0 14px 0 4px; border-radius: 999px; font: 500 13px/1 var(--sans); letter-spacing: -.01em; color: var(--soft); background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px var(--line-2); }
.soon span { display: inline-flex; align-items: center; }
/* On the dark hero the pill is dark glass. */
.hero .soon { color: var(--d-soft); background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px var(--d-ring); }

.headline { font: 500 clamp(44px, 7vw, 88px)/1 var(--sans); letter-spacing: -.052em; color: var(--d-ink); }
.sub { max-width: 680px; margin-top: 28px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: var(--d-soft); text-wrap: balance; }

/* The rotating word wears the silk, exactly as on the main site: each letter clips its own copy of one gradient,
   shifted by the letter's offset (--x), so the band runs unbroken across the word while --t slides it along. */
@property --t { syntax: "<number>"; inherits: true; initial-value: 0; }
.pick { position: relative; display: inline-block; white-space: nowrap; vertical-align: top; transition: width .55s var(--ease); }
.pick .w { display: inline-block; perspective: 5em; animation: flow 10s linear infinite; }
@keyframes flow { to { --t: 1; } }
.pick .ch {
  display: inline-block; padding: .1em .12em .18em; margin: -.1em -.12em -.18em;
  color: var(--accent);
  background: linear-gradient(90deg, var(--g1), var(--g2) 24%, var(--g3) 50%, var(--g2) 76%, var(--g1)) calc(var(--t) * var(--loop) - var(--x)) 0 / var(--loop) 100% repeat-x;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  transform-origin: 50% 100%;
  animation: chIn .8s var(--ease) calc(var(--i) * 34ms) both;
}
.pick .w.out .ch { transform-origin: 50% 0; animation: chOut .3s cubic-bezier(.5, 0, .75, 0) calc(var(--i) * 16ms) both; }
@keyframes chIn { from { opacity: 0; transform: translateY(.3em) rotateX(-80deg); } }
@keyframes chOut { to { opacity: 0; transform: translateY(-.24em) rotateX(80deg); } }

/* ───── The waitlist composer ───── */
/* The main composer cut down to one line: a dark glass rim (the light shows through it) round a dark face, and in it
   a bar in three (an envelope, the address, and the button that sends it). */
.stage { position: relative; width: min(600px, 100%); margin-top: 40px; }
.ask { position: relative; text-align: left; }
.rim {
  position: relative; z-index: 2; padding: 5px; border-radius: 36px;
  background: linear-gradient(180deg, rgba(255, 170, 120, .26), rgba(255, 255, 255, .08) 42%, rgba(255, 255, 255, .05));
  -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
  box-shadow: 0 0 0 .5px var(--d-ring);
}
.face { position: relative; overflow: hidden; border-radius: 31px; background: rgba(20, 20, 22, .88); box-shadow: 0 0 0 1px var(--d-line); transition: height .45s var(--ease); }

.ask-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; height: 62px; }
.bar-l, .bar-m, .bar-r { display: flex; align-items: center; min-width: 0; }
.bar-l { padding: 0 6px 0 14px; background: radial-gradient(130% 150% at 0% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); transition: background .6s; }
.bar-m { padding: 0 8px 0 8px; background: radial-gradient(90% 140% at 25% 130%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); }
.bar-r { padding: 0 9px 0 4px; }
.bar-r .go { height: 46px; padding-left: 20px; }
.bar-r .go kbd { width: 34px; height: 34px; }
.ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; color: var(--d-ink); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--d-ring); transition: color .25s, box-shadow .25s; }
.ic .li { --s: 17px; }
.ask:has(input:focus) .ic { color: var(--flint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--flint) 50%, transparent); }
.bar-m input { width: 100%; height: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font: 400 16px/1 var(--sans); letter-spacing: -.01em; color: var(--d-ink); caret-color: var(--flint); }
.bar-m input::placeholder { color: #77777F; }

.go { display: inline-flex; align-items: center; gap: 10px; flex: none; height: 40px; padding: 0 5px 0 16px; border-radius: 999px; font: 500 14.5px/1 var(--sans); letter-spacing: -.01em; color: #fff; white-space: nowrap; background: #25282F; transition: background .2s; }
.go:hover { background: #33363E; }
.go kbd { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 500 13px/1 var(--sans); color: #fff; background: var(--flint); transition: background .2s; }
.go:hover kbd { background: var(--flint-h); }
.go[disabled] { cursor: progress; }
.go[disabled] kbd { font-size: 0; }
.go[disabled] kbd::before { content: ""; width: 12px; height: 12px; border: 1.6px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
/* On the dark hero the button is white, as the bar's is over the dark sections. */
.hero .go { color: var(--ink); background: #fff; }
.hero .go:hover { background: #E9E9EC; }

/* A nudge landing in the composer: one soft ring in the accent, as on the main site. */
.rim::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
.ask.took .rim::after { animation: took .9s var(--ease); }
@keyframes took {
  from { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--flint) 40%, transparent); }
  to { opacity: 0; box-shadow: 0 0 0 12px transparent; }
}
.ask.is-bad .face { animation: nope .4s var(--ease); }
.ask.is-bad .bar-m { background: radial-gradient(90% 140% at 25% 130%, rgba(194, 51, 15, .1), transparent 70%); }
@keyframes nope { 20% { translate: -6px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }

.wl-msg { display: flex; justify-content: center; margin-top: 18px; font-size: 13px; line-height: 1.4; color: var(--mute); }
/* White glass, like the main site's suggestion labels, so it holds up when the ribbon swings behind it. */
.wl-msg span { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 6px 13px 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); box-shadow: 0 0 0 .5px rgba(17, 17, 19, .1); }
.wl-msg span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .6; }
.wl-msg.is-bad { color: var(--bad); }
.wl-msg.is-bad span::before { opacity: 1; }
/* On the dark hero the label is dark glass. */
.hero .wl-msg { color: var(--d-mute); }
.hero .wl-msg span { background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 .5px var(--d-ring); }
.hero .wl-msg.is-bad { color: #FF8A6B; }

/* Joined: the bar gives way to the confirmation, and the face eases to its new height (app.js). */
.wl-done { display: grid; justify-items: center; padding: 30px 24px 18px; text-align: center; }
.wl-done[hidden] { display: none; }
.wl-done:focus { outline: none; }
.wl-form[hidden] { display: none; }
.done-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; background: var(--flint); }
.done-ic .li { --s: 24px; --sw: 2.2; }
.is-done .done-ic { animation: doneIn .6s var(--spring) both; }
@keyframes doneIn { from { scale: .5; opacity: 0; } }
.done-h { margin-top: 16px; font: 500 24px/1.15 var(--sans); letter-spacing: -.03em; color: var(--d-ink); }
.done-p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--d-soft); }
.done-p b { font-weight: 500; color: var(--d-ink); word-break: break-all; }
.share { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--d-line); }
.share-l { margin-right: 4px; font-size: 13px; color: var(--d-soft); }
.share-b { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px 0 12px; border-radius: 999px; font: 500 13px/1 var(--sans); color: rgba(245, 245, 247, .86); text-decoration: none; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--d-ring); transition: background .2s, color .2s; }
.share-b:hover { color: var(--d-ink); background: rgba(255, 255, 255, .1); }
.share-b .li { --s: 15px; }
.share-b.is-copied { color: color-mix(in srgb, var(--ok) 55%, #fff); }
.share-ic { width: 34px; padding: 0; }
.done-reset { margin-top: 14px; font-size: 12.5px; color: var(--d-mute); text-decoration: underline transparent; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.done-reset:hover { color: var(--d-ink); text-decoration-color: currentColor; }
.stage.is-done .wl-msg { visibility: hidden; }

/* ═════════════ BELOW THE HERO ═════════════ */
.below { position: relative; isolation: isolate; padding: 40px 24px 12px; background: var(--bg); }
.sec + .sec { margin-top: 140px; }
.sec-in { max-width: 1180px; margin: 0 auto; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: 48px; align-items: end; margin-bottom: 30px; padding: 0 4px; }
.sec-head h2 { font: 500 clamp(36px, 4.4vw, 56px)/1.02 var(--sans); letter-spacing: -.048em; color: var(--ink); }
.sec-copy { display: grid; gap: 12px; padding-bottom: 4px; font-size: 15px; line-height: 1.55; color: var(--soft); }

/* ───── Works with ───── */
/* Two rows of white chips, edge to edge, drifting opposite ways and resting under the pointer. Each row is doubled by
   app.js and slides by exactly half its width, so the loop has no seam. Without motion they simply wrap. */
.sec.trust { margin-top: 0; }
.sec.trust + .sec { margin-top: 120px; }
.tr-cap { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 24px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.tr-cap::before, .tr-cap::after { content: ""; width: 56px; height: 1px; background: var(--line); }
.tools {
  display: grid; gap: 10px; margin: 0 -24px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.tools-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tool { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 13px; border-radius: 999px; font: 500 14.5px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; color: var(--ink-2); background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .06); transition: background .2s; }
.tool:hover { background: #FFFCFA; }
.tool img { display: block; width: 20px; height: 20px; object-fit: contain; }
.tools-row.is-drift { flex-wrap: nowrap; justify-content: flex-start; width: max-content; gap: 0; animation: drift 60s linear infinite; }
.tools-row.is-drift .tool { margin-right: 10px; }
.tools-row-b.is-drift { animation-direction: reverse; }
.tools:hover .tools-row { animation-play-state: paused; }
@keyframes drift { to { translate: -50% 0; } }

/* ───── Examples ───── */
/* Six finished sites in the bento's white tray: one large, five small. Each frame is a browser bar over a page drawn
   at one width (--w, in px) and scaled to the frame (--k, app.js). Under the pointer the page scrolls by --sy. Each
   site keeps its own type and colour, so no two look alike. */
.ex-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .05); }
.ex { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 8px 8px 0; border-radius: 20px; background: #F5F4F2; }
.ex-big { grid-column: span 2; grid-row: span 2; }
.ex-frame { display: flex; flex: 1; flex-direction: column; overflow: hidden; border-radius: 13px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .07); }
.ex-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; flex: none; height: 32px; padding: 0 4px; border-bottom: 1px solid var(--line); }
.ex-bar small { display: inline-flex; align-items: center; gap: 5px; font: 400 11px/1 var(--sans); color: var(--soft); }
.ex-bar .li { --s: 11px; --sw: 1.8; color: var(--mute); }
.ex-fit { position: relative; flex: 1; min-height: 0; overflow: hidden; aspect-ratio: 520 / 390; }
.ex-big .ex-fit { aspect-ratio: auto; }
.ex-site { position: absolute; top: 0; left: 0; width: calc(var(--w) * 1px); scale: var(--k, 1); transform-origin: 0 0; font: 400 13px/1.45 var(--sans); }
.ex-page { transition: translate 2.4s cubic-bezier(.45, 0, .2, 1); }
.ex:hover .ex-page { translate: 0 calc(var(--sy) * -1px); }
.ex-site img { display: block; object-fit: cover; }
.ex-cap { display: flex; align-items: flex-start; gap: 12px; padding: 14px 8px 16px 6px; }
.ex-cap p { display: flex; flex: 1; gap: 10px; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.ex-cap .mk { --s: 18px; margin-top: 1px; }
.ex-tag { flex: none; padding: 6px 9px; border-radius: 999px; font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }

/* Ombak House: full-bleed photograph, serif headline, a booking bar; then the rooms on sand. */
.om { color: #fff; background: #F3EEE6; }
.om-hero { position: relative; isolation: isolate; height: 640px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 40px 36px; }
.om-hero > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; }
.om-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(rgba(10, 18, 22, .78), rgba(10, 18, 22, .42) 12%, rgba(10, 18, 22, 0) 28%, rgba(10, 18, 22, 0) 45%, rgba(10, 18, 22, .6)); }
.om-hero > :not(img) { position: relative; }
.om-nav { position: absolute !important; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 26px; height: 76px; padding: 0 40px; font-size: 13.5px; font-weight: 500; color: #fff; }
.om-nav b { margin-right: auto; font: 400 28px/1 var(--serif); letter-spacing: -.01em; color: #fff; }
.om-nav em { padding: 10px 18px; border-radius: 999px; font-style: normal; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.om-t small { display: block; margin-bottom: 14px; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.om-t b { display: block; font: 400 76px/.96 var(--serif); letter-spacing: -.02em; }
.om-t i { font-style: italic; }
.om-book { display: flex; align-items: center; gap: 0; margin-top: 30px; padding: 8px 8px 8px 0; border-radius: 16px; color: #1D2A2E; background: #fff; }
.om-book span { flex: 1; padding: 4px 22px; border-right: 1px solid rgba(0, 0, 0, .08); font-size: 14px; font-weight: 500; }
.om-book span:nth-child(3) { border: 0; }
.om-book small { display: block; margin-bottom: 4px; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #7B8A8E; }
.om-book em { padding: 16px 22px; border-radius: 11px; font-style: normal; font-weight: 500; font-size: 14px; color: #fff; background: #1D3B44; }
.om-rooms { padding: 44px 40px 40px; color: #1E2526; }
.om-h { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; margin-bottom: 22px; }
.om-h b { font: 400 40px/1 var(--serif); }
.om-h span { max-width: 260px; font-size: 13px; color: #6B7272; }
.om-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.om-cards span { display: grid; gap: 3px; }
.om-cards img { width: 100%; height: 190px; margin-bottom: 10px; border-radius: 4px; }
.om-cards b { font: 400 22px/1.1 var(--serif); }
.om-cards small { font-size: 12.5px; color: #6B7272; }

/* Brasa: near-black and ember, an italic serif, tonight's menu with dotted leaders. */
.br { padding-bottom: 30px; color: #F2E6D6; background: #15110E; }
.br-nav { display: flex; align-items: center; gap: 20px; height: 58px; padding: 0 24px; font-size: 12.5px; color: rgba(242, 230, 214, .7); }
.br-nav b { margin-right: auto; font: 600 13px/1 var(--sans); letter-spacing: .34em; color: #F2E6D6; }
.br-nav em { padding: 8px 14px; border-radius: 999px; font-style: normal; font-weight: 500; color: #1B0E07; background: #E0703A; }
.br-t { display: flex; align-items: flex-end; justify-content: space-between; padding: 16px 24px 20px; }
.br-t b { font: 400 50px/.95 var(--serif); letter-spacing: -.01em; color: #FBF1E4; }
.br-t i { color: #F4A574; }
.br-t small { font-size: 11.5px; line-height: 1.5; text-align: right; color: rgba(242, 230, 214, .55); }
.br-hero { height: 200px; margin: 0 24px; overflow: hidden; border-radius: 6px; }
.br-hero img { width: 100%; height: 100%; object-position: 50% 60%; }
.br-res { display: flex; gap: 8px; margin: 14px 24px 0; }
.br-res span { flex: 1; padding: 11px 14px; border-radius: 8px; font-size: 13px; box-shadow: inset 0 0 0 1px rgba(242, 230, 214, .16); }
.br-res em { padding: 11px 16px; border-radius: 8px; font-style: normal; font-weight: 500; color: #1B0E07; background: #F2E6D6; }
.br-menu { position: relative; margin: 30px 24px 0; padding-right: 150px; }
.br-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.br-h b { font: italic 400 30px/1 var(--serif); }
.br-h small { font-size: 11.5px; color: rgba(242, 230, 214, .55); }
.br-menu p:not(.br-h) { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; font-size: 13.5px; }
.br-menu p i { flex: 1; border-bottom: 1px dotted rgba(242, 230, 214, .3); }
.br-menu p b { font: 400 18px/1 var(--serif); color: #F4A574; }
.br-menu > img { position: absolute; right: 0; top: 4px; width: 130px; height: 170px; border-radius: 6px; }

/* Sève: cream and olive, a serif, and a shelf of three cut from one photograph. */
.sv { color: #2E3328; background: #EFE9E0; }
.sv-nav { display: flex; align-items: center; gap: 20px; height: 58px; padding: 0 24px; font-size: 12.5px; color: #5E6355; }
.sv-nav b { margin-right: auto; font: 400 28px/1 var(--serif); color: #2E3328; }
.sv-nav em { font-style: normal; font-weight: 500; color: #2E3328; }
.sv-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; height: 300px; padding: 0 24px; }
.sv-t { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.sv-t small { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #7E8270; }
.sv-t b { margin-top: 14px; font: 400 50px/.95 var(--serif); letter-spacing: -.01em; }
.sv-t i { font-style: italic; color: #6E7A4E; }
.sv-t span { margin-top: 14px; font-size: 13px; line-height: 1.5; color: #5E6355; }
.sv-t em { margin-top: 18px; padding: 11px 18px; border-radius: 999px; font-style: normal; font-weight: 500; font-size: 13px; color: #F4F0E8; background: #3E4A34; }
.sv-hero > img { width: 100%; height: 100%; border-radius: 6px; object-position: 50% 60%; }
.sv-shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 28px 24px 30px; }
.sv-shelf span { display: grid; gap: 2px; }
.sv-shelf i { display: block; height: 170px; margin-bottom: 9px; border-radius: 6px; background: url(../img/photos/seve-flatlay.jpg) var(--x) var(--y) / 330% auto no-repeat; }
.sv-shelf b { font: 400 20px/1.1 var(--serif); }
.sv-shelf small { font-size: 12.5px; color: #7E8270; }

/* Atelier Nord: white, black, tracked capitals, the work at full width. */
.nd { padding-bottom: 30px; color: #111; background: #fff; }
.nd-nav { display: flex; align-items: center; gap: 22px; height: 56px; padding: 0 24px; font-size: 12px; color: #555; }
.nd-nav b { margin-right: auto; font: 600 11.5px/1 var(--sans); letter-spacing: .24em; color: #111; }
.nd-t { display: flex; align-items: flex-end; justify-content: space-between; padding: 26px 24px 22px; }
.nd-t b { font: 500 46px/.98 var(--sans); letter-spacing: -.055em; }
.nd-t small { font: 400 11px/1.5 var(--mono); text-align: right; color: #777; }
.nd-hero { position: relative; margin: 0 24px; }
.nd-hero img { width: 100%; height: 250px; }
.nd-hero small { display: block; margin-top: 8px; font: 400 11px/1 var(--mono); color: #777; }
.nd-work { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 24px 0; }
.nd-work span { display: grid; grid-template-columns: 1fr auto; gap: 8px 0; }
.nd-work img { grid-column: 1 / -1; width: 100%; height: 200px; }
.nd-work b { font: 500 14px/1 var(--sans); letter-spacing: -.02em; }
.nd-work small { font: 400 11px/1 var(--mono); color: #777; }

/* Field: sand and deep green, rounded type, a plan picker, this month's bean. */
.fd { padding-bottom: 30px; color: #1F3A2E; background: #EDE3D3; }
.fd-nav { display: flex; align-items: center; gap: 20px; height: 58px; padding: 0 24px; font-size: 12.5px; color: #4D5F55; }
.fd-nav b { margin-right: auto; font: 600 22px/1 var(--sans); letter-spacing: -.05em; color: #1F3A2E; }
.fd-nav b i { font-style: normal; font-size: 10px; color: #D06A2C; vertical-align: 6px; margin-left: 1px; }
.fd-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 18px; height: 300px; padding: 0 24px; }
.fd-t { display: flex; flex-direction: column; justify-content: center; }
.fd-t b { font: 600 38px/1 var(--sans); letter-spacing: -.05em; }
.fd-plans { display: flex; gap: 6px; margin-top: 22px; }
.fd-plans em { display: grid; gap: 3px; flex: 1; padding: 10px 11px; border-radius: 10px; font-style: normal; font-weight: 600; font-size: 13px; box-shadow: inset 0 0 0 1px rgba(31, 58, 46, .2); }
.fd-plans small { font-weight: 400; font-size: 11.5px; color: #4D5F55; }
.fd-plans .on { color: #EDE3D3; background: #1F3A2E; box-shadow: none; }
.fd-plans .on small { color: rgba(237, 227, 211, .75); }
.fd-go { margin-top: 10px; padding: 13px; border-radius: 10px; font-weight: 600; font-size: 13px; text-align: center; color: #fff; background: #D06A2C; }
.fd-hero > img { width: 100%; height: 100%; border-radius: 14px; }
.fd-month { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; margin: 26px 24px 0; padding: 12px; border-radius: 14px; font-size: 13px; color: #4D5F55; background: #F6EFE3; }
.fd-month img { width: 150px; height: 110px; border-radius: 9px; }
.fd-month small { display: block; font: 500 10px/1 var(--mono); letter-spacing: .12em; color: #D06A2C; }
.fd-month b { display: block; margin: 6px 0 4px; font: 600 18px/1.1 var(--sans); letter-spacing: -.03em; color: #1F3A2E; }

/* Sól: the members' app. Warm white, terracotta, a serif greeting, the next class and the week. */
.so { padding-bottom: 24px; color: #2B211C; background: #FAF6F1; }
.so-nav { display: flex; align-items: center; gap: 6px; height: 58px; padding: 0 20px; font-size: 12.5px; color: #7A6B62; border-bottom: 1px solid rgba(43, 33, 28, .07); }
.so-nav b { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font: 600 17px/1 var(--sans); letter-spacing: -.03em; color: #2B211C; }
.so-nav b i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 50% 70%, #F2A65A, #C8553D); }
.so-nav span { padding: 8px 12px; border-radius: 999px; }
.so-nav .on { color: #2B211C; background: #F0E7DE; }
.so-nav img { width: 30px; height: 30px; margin-left: 8px; border-radius: 50%; }
.so-hi { padding: 24px 20px 16px; font: 400 32px/1 var(--serif); }
.so-hi small { display: block; margin-top: 8px; font: 400 12.5px/1 var(--sans); color: #8A7B71; }
.so-next { position: relative; isolation: isolate; height: 190px; margin: 0 20px; overflow: hidden; border-radius: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px; color: #fff; }
.so-next > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; }
.so-next::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(rgba(40, 20, 10, 0) 30%, rgba(40, 20, 10, .7)); }
.so-next > :not(img) { position: relative; }
.so-next span { font-size: 12.5px; color: rgba(255, 255, 255, .85); }
.so-next small { display: block; font: 500 10px/1 var(--mono); letter-spacing: .12em; color: rgba(255, 255, 255, .7); }
.so-next b { display: block; margin: 6px 0 3px; font: 400 30px/1 var(--serif); color: #fff; }
.so-next em { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 999px; font-style: normal; font-weight: 500; font-size: 12px; color: #2B211C; background: #fff; }
.so-next em .li { --s: 13px; --sw: 2.2; color: #C8553D; }
.so-week { margin: 14px 20px 0; }
.so-week p { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(43, 33, 28, .07); font-size: 12px; color: #8A7B71; }
.so-week img { width: 46px; height: 46px; border-radius: 10px; }
.so-week span { flex: 1; }
.so-week b { display: block; margin-bottom: 2px; font: 500 14px/1.2 var(--sans); color: #2B211C; }
.so-week em { padding: 8px 14px; border-radius: 999px; font-style: normal; font-weight: 500; color: #fff; background: #C8553D; }
.so-week em.w { color: #2B211C; background: #F0E7DE; }

/* ───── How it works: the demo ───── */
/* One white panel, as the bento is. Inside, a warm grey tile holds the window, drawn at one size and scaled to fit
   (--k, set by app.js). Each phase of the build is a class on .dm-comp; everything else is CSS. */
.demo { padding: 8px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .05); }
.dm-fit { position: relative; overflow: hidden; height: calc(var(--k, 1) * 640px); border-radius: 20px; background: #F2EFEB; }
.dm-comp { position: absolute; top: 0; left: 50%; width: 1160px; height: 640px; translate: -50% 0; scale: var(--k, 1); transform-origin: 50% 0; font-size: 13px; }
.dm-win { position: absolute; inset: 26px; display: grid; grid-template-rows: 48px minmax(0, 1fr); overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .08); }

.dm-top { display: flex; align-items: center; gap: 12px; padding: 0 10px 0 8px; border-bottom: 1px solid var(--line); }
.dm-proj { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); letter-spacing: -.01em; }
.dm-proj .mk { --s: 16px; }
.dm-tabs { display: flex; gap: 2px; margin: 0 auto; padding: 3px; border-radius: 10px; background: #F4F2EF; }
.dm-tabs span { display: grid; place-items: center; height: 26px; padding: 0 12px; border-radius: 7px; font: 500 12px/1 var(--sans); color: var(--soft); }
.dm-tabs .on { color: var(--ink); background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .07); }
.dm-pub { display: flex; align-items: center; gap: 8px; }
.dm-state { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 10px; border-radius: 999px; font: 500 12px/1 var(--sans); color: var(--soft); background: #F4F2EF; transition: color .3s, background .3s; }
.dm-state i { width: 6px; height: 6px; border-radius: 50%; background: #C9C5C0; transition: background .3s; }
.s-reply .dm-state i { background: var(--flint); animation: blink 1s steps(1) infinite; }
.s-live .dm-state { color: #0E7A3E; background: #E5F5EB; }
.s-live .dm-state i { background: var(--ok); animation: none; }
.dm-pub em { display: grid; place-items: center; height: 30px; padding: 0 13px; border-radius: 999px; font: 500 12px/1 var(--sans); font-style: normal; color: #fff; background: var(--ink); transition: background .3s; }
.s-deploy .dm-pub em { animation: tap .35s var(--ease); }
@keyframes tap { 50% { scale: .9; } }

.dm-main { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 0; }

/* The conversation: your sentence, then Flinter's reply with its jobs. A job waits unseen, runs with a turning
   spinner on a pale tint, and ends on an orange tick. */
.dm-chat { display: flex; flex-direction: column; min-height: 0; padding: 18px 16px 14px; border-right: 1px solid var(--line); background: #FCFBFA; }
.dm-log { display: flex; flex: 1; flex-direction: column; gap: 16px; min-height: 0; }
.dm-you { align-self: flex-end; max-width: 270px; padding: 10px 13px; border-radius: 16px 16px 5px 16px; font-size: 13px; line-height: 1.45; color: var(--ink); background: #F1EEEA; opacity: 0; translate: 0 8px; transition: opacity .3s, translate .45s var(--ease); }
.s-sent .dm-you { opacity: 1; translate: 0 0; }
.dm-fl { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; opacity: 0; translate: 0 8px; transition: opacity .3s, translate .45s var(--ease); }
.dm-fl .mk { --s: 18px; margin-top: 1px; }
.dm-fl p { font-size: 13px; line-height: 1.45; color: var(--soft); }
.dm-fl p b { font-weight: 500; color: var(--ink); }
.s-reply .dm-fl:not(.dm-done), .s-live .dm-done { opacity: 1; translate: 0 0; }
.dm-jobs { display: grid; gap: 2px; margin: 10px 0 0 -8px; padding: 0; list-style: none; }
.dm-jobs li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; opacity: 0; translate: 0 4px; transition: opacity .3s, translate .4s var(--ease), background .3s; }
.dm-jobs li.is-run, .dm-jobs li.is-ok { opacity: 1; translate: 0 0; }
.dm-jobs li.is-run { background: var(--tint); }
.dm-jobs b { display: block; font: 500 12.5px/1.2 var(--sans); color: var(--ink); }
.dm-jobs small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.3; color: var(--mute); }
.dm-ji { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--flint); background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--flint) 30%, transparent); transition: background .3s, color .3s, box-shadow .3s; }
.dm-ji .li { --s: 13px; --sw: 2; grid-area: 1 / 1; transition: opacity .2s, scale .35s var(--spring); }
.dm-ji .li:first-child { animation: spin 1.1s linear infinite; }
.dm-ji .li:last-child { opacity: 0; scale: .5; }
.is-ok .dm-ji { color: #fff; background: var(--flint); box-shadow: none; }
.is-ok .dm-ji .li:first-child { opacity: 0; animation: none; }
.is-ok .dm-ji .li:last-child { opacity: 1; scale: 1; }
.dm-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; height: 26px; padding: 0 10px 0 8px; border-radius: 999px; font: 500 12px/1 var(--sans); color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.dm-link .li { --s: 13px; color: var(--ok); }

.dm-in { display: flex; align-items: center; gap: 10px; flex: none; height: 48px; margin-top: 12px; padding: 0 7px 0 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .3s; }
.s-type .dm-in { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--flint) 45%, transparent), 0 0 0 4px color-mix(in srgb, var(--flint) 10%, transparent); }
.dm-in-t { position: relative; flex: 1; min-width: 0; overflow: hidden; height: 18px; font-size: 13px; line-height: 18px; color: var(--ink); white-space: nowrap; }
.dm-typed { display: inline-block; max-width: 100%; overflow: hidden; vertical-align: top; direction: rtl; text-align: left; text-overflow: clip; }
.dm-in-t > i { display: none; width: 1.5px; height: 14px; margin-left: 1px; vertical-align: -2px; border-radius: 1px; background: var(--flint); animation: blink 1.05s steps(1) infinite; }
.s-type .dm-in-t > i { display: inline-block; }
.dm-ph { position: absolute; left: 0; top: 0; color: #A19D99; }
.s-type .dm-ph { display: none; }
.dm-in-go { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: #E5E2DE; transition: background .25s, scale .2s var(--ease); }
.dm-in-go .li { --s: 16px; --sw: 2; }
.s-type .dm-in-go { background: var(--ink); }
.s-sent:not(.s-reply) .dm-in-go { animation: tap .35s var(--ease); }

/* The preview: the site in a browser on a warm grey, built a part at a time. Before a part is built its place is a
   grey skeleton; the skeleton fades as the part arrives. */
.dm-prev { position: relative; min-height: 0; padding: 16px 18px 0; overflow: hidden; background: #F4F1ED; }
.dm-browser { position: relative; height: 100%; overflow: hidden; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .07); }
.dm-url { position: relative; display: grid; place-items: center; height: 40px; border-bottom: 1px solid var(--line); }
.dm-addr { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 300px; height: 26px; padding: 0 14px; border-radius: 999px; font: 400 12px/1 var(--sans); color: var(--soft); background: #F4F2EF; transition: color .3s; }
.dm-addr .li { --s: 12px; --sw: 1.8; color: var(--mute); transition: color .3s; }
.s-live .dm-addr { color: var(--ink); }
.s-live .dm-addr .li { color: var(--ok); }
.dm-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; opacity: 0; transition: opacity .3s; }
.dm-bar i { display: block; width: 0; height: 100%; background: var(--flint); }
.s-deploy .dm-bar { opacity: 1; }
.s-deploy .dm-bar i { width: 100%; transition: width 1.5s cubic-bezier(.4, 0, .2, 1); }
.s-live .dm-bar { opacity: 0; }

.ds { position: relative; height: calc(100% - 40px); }
.ds > :not(.ds-empty, .ds-skel) { opacity: 0; translate: 0 8px; transition: opacity .45s, translate .55s var(--ease); }
.ds-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; transition: opacity .4s; }
.ds-empty .mk { --s: 44px; color: #E8E4DF; }
.ds-empty .mk path { fill: currentColor; }
.ds-empty small { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #ADA9A4; }
.s-reply .ds-empty { opacity: 0; }
.ds-skel { position: absolute; inset: 0; padding: 0 20px; opacity: 0; transition: opacity .4s; }
.ds-skel i { display: block; border-radius: 10px; background: #F2F0ED; transition: opacity .4s; }
.sk-nav { height: 46px; margin: 0 -20px; border-radius: 0 !important; background: #FAF9F7 !important; border-bottom: 1px solid var(--line); }
.sk-hero { height: 184px; margin-top: 14px; }
.sk-row { height: 38px; margin-top: 10px; }
.sk-row:first-of-type { margin-top: 44px; }
.s-reply .ds-skel { opacity: 1; }
.s-1 :is(.sk-nav, .sk-hero), .s-2 .sk-row { opacity: 0; }

.ds-nav { display: flex; align-items: center; gap: 18px; height: 46px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--soft); }
.ds-nav b { margin-right: auto; font: 400 20px/1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.ds-lang { display: flex; gap: 1px; padding: 2px; border-radius: 7px; background: #F4F2EF; opacity: .35; transition: opacity .4s; }
.ds-lang em { display: grid; place-items: center; width: 24px; height: 20px; border-radius: 5px; font: 500 9.5px/1 var(--mono); font-style: normal; letter-spacing: .04em; color: var(--mute); transition: background .25s, color .25s; }
.ds-lang em.on { color: var(--ink); background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .07); }
.s-5-run .ds-lang, .s-5 .ds-lang { opacity: 1; }
.ds-book { display: grid; place-items: center; height: 28px; padding: 0 13px; border-radius: 999px; font: 500 12px/1 var(--sans); color: #fff; background: var(--ink); }

/* The bakery's own look: a dark photograph of its loaves, a serif, cream type. */
.ds-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; height: 184px; margin: 14px 20px 0; padding: 20px 22px; border-radius: 12px; background: #2A211B; }
.ds-hero > img { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ds-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(24, 17, 12, .94), rgba(24, 17, 12, .86) 40%, rgba(24, 17, 12, .3) 72%, rgba(24, 17, 12, .1)); }
.ds-hero-t { display: grid; justify-items: start; gap: 7px; max-width: 340px; }
.ds-hero-t small { font: 500 9.5px/1 var(--mono); letter-spacing: .14em; color: rgba(255, 240, 225, .7); }
.ds-hero-t b { font: 400 34px/1 var(--serif); letter-spacing: -.01em; color: #FFF6EC; }
.ds-hero-t span { font-size: 12.5px; line-height: 1.45; color: rgba(255, 240, 225, .78); }
.ds-hero-t em { display: grid; place-items: center; height: 30px; margin-top: 5px; padding: 0 14px; border-radius: 999px; font: 500 12px/1 var(--sans); font-style: normal; color: #2A211B; background: #FFF6EC; }
.ds-hero-t [data-l10n] { transition: opacity .18s; }
.ds-hero-t.is-swap [data-l10n] { opacity: 0; }

.ds-week { margin: 14px 20px 0; }
.ds-week-h { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px 8px; font-size: 12px; color: var(--mute); }
.ds-week-h b { font: 600 14px/1 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.ds-row { display: grid; grid-template-columns: 62px 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; height: 50px; padding: 0 8px 0 12px; border-top: 1px solid var(--line); }
.ds-th { display: block; width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.ds-day { font: 500 11px/1.2 var(--mono); color: var(--soft); }
.ds-day b { display: block; font-weight: 500; color: var(--ink); }
.ds-what b { display: block; font: 500 13px/1.2 var(--sans); color: var(--ink); }
.ds-what small { font-size: 11.5px; color: var(--mute); }
.ds-price, .ds-btn { opacity: 0; transition: opacity .4s; }
.ds-price { font: 500 13px/1 var(--sans); color: var(--ink); }
.ds-btn { display: grid; place-items: center; min-width: 64px; height: 28px; padding: 0 12px; border-radius: 999px; font: 500 12px/1 var(--sans); color: #fff; background: var(--flint-d); }
.ds-wait { color: var(--ink-2); background: #F1EEEA; }
.s-3 :is(.ds-price, .ds-btn) { opacity: 1; }
.s-3 .ds-row:nth-child(3) :is(.ds-price, .ds-btn) { transition-delay: .1s; }
.s-3 .ds-row:nth-child(4) :is(.ds-price, .ds-btn) { transition-delay: .2s; }
.ds-pay { display: flex; align-items: center; gap: 12px; margin: 6px 20px 0; padding: 12px 12px 0; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--mute); }
.ds-bm { display: inline-block; width: 26px; height: 16px; background: #9C9894; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }

.s-1 :is(.ds-nav, .ds-hero), .s-2 .ds-week, .s-3 .ds-pay { opacity: 1; translate: 0 0; }
.s-1 .ds-hero { transition-delay: .12s; }

/* Over the preview: search is ready, a status line for narrow screens, and the first booking once it's live. */
.dm-chip, .dm-toast, .dm-ticker { position: absolute; opacity: 0; scale: .94; transition: opacity .3s, scale .45s var(--spring), translate .45s var(--ease); }
.dm-seo { right: 36px; top: 246px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 12px; border-radius: 999px; font: 400 12.5px/1 var(--sans); color: var(--ink-2); background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .1); }
.dm-seo .li { --s: 14px; --sw: 1.8; color: var(--mute); }
.dm-seo b { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font: 500 11.5px/1 var(--sans); color: var(--flint-d); background: var(--tint); }
.s-4 .dm-seo { opacity: 1; scale: 1; }
.dm-toast { right: 30px; bottom: 22px; display: flex; align-items: center; gap: 11px; width: 300px; padding: 10px 10px 10px 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .1); translate: 0 14px; }
.dm-toast-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; color: var(--flint-d); background: var(--tint); }
.dm-toast-ic .li { --s: 18px; }
.dm-toast > span:nth-child(2) { flex: 1; min-width: 0; }
.dm-toast b { display: block; font: 500 13px/1.2 var(--sans); color: var(--ink); }
.dm-toast small { font-size: 11.5px; color: var(--mute); }
.dm-toast em { padding: 5px 9px; border-radius: 999px; font: 500 11px/1 var(--sans); font-style: normal; color: #0E7A3E; background: #E5F5EB; }
.s-book .dm-toast { opacity: 1; scale: 1; translate: 0 0; }
.dm-ticker { display: none; }

/* The three steps under the window keep time with it: the one playing is a grey tile and its line fills. */
.dm-foot { display: flex; align-items: stretch; gap: 8px; padding-top: 8px; }
.dm-steps { display: grid; flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.dm-steps li { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px 20px; overflow: hidden; border-radius: 18px; transition: background .3s; }
.dm-steps li.on { background: #F5F3F0; }
.dm-n { padding-top: 2px; font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--mute); transition: color .3s; }
.dm-steps li.on .dm-n, .dm-steps li.is-past .dm-n { color: var(--eyebrow); }
.dm-steps b { display: block; font: 500 14.5px/1.25 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.dm-steps small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--soft); }
.dm-p { position: absolute; left: 18px; right: 18px; bottom: 10px; height: 2px; overflow: hidden; border-radius: 1px; background: var(--line); }
.dm-p i { display: block; width: calc(var(--p, 0) * 100%); height: 100%; background: var(--flint); transition: width .25s linear; }
.dm-pause { display: grid; place-items: center; flex: none; align-self: center; width: 40px; height: 40px; margin: 0 8px 0 4px; border-radius: 50%; color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); transition: color .2s, background .2s; }
.dm-pause:hover { color: var(--ink); background: #FAF8F6; }
.dm-pause[hidden] { display: none; }
.dm-pause .li { --s: 15px; }

/* ───── What you can build: the bento ───── */
.fc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 8px; border-radius: 28px; list-style: none; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .05); }
.fc { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 32px 34px; overflow: hidden; border-radius: 20px; text-align: center; background: #F5F4F2; }
.fc-stage { position: relative; isolation: isolate; display: grid; place-items: center; align-self: stretch; height: 340px; margin: 0 -32px 30px; }
.fc-stage::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(rgba(17, 17, 19, .1) 1px, transparent 1.4px) 0 0 / 14px 14px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent);
}
.fc h3 { font: 500 17px/1.25 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.fc > p { position: relative; max-width: 410px; margin-top: 18px; padding-top: 18px; font-size: 14.5px; line-height: 1.55; color: var(--soft); text-wrap: pretty; }
.fc > p::before { content: ""; position: absolute; top: 0; left: 50%; width: min(300px, 70%); height: 1px; translate: -50% 0; background: linear-gradient(90deg, transparent, rgba(17, 17, 19, .12) 18% 82%, transparent); }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; }
.tags em { display: grid; place-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font: 500 10.5px/1 var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.fs { position: relative; z-index: 1; display: grid; place-items: center; }
.fs > * { grid-area: 1 / 1; }
.fw { background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px rgba(17, 17, 19, .07); }
.fp { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 11px; border-radius: 999px; font: 500 12.5px/1 var(--sans); color: var(--ink-2); white-space: nowrap; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .08); }
.fp .li { --s: 15px; --sw: 1.8; color: var(--mute); transition: color .3s; }
.is-lit .fp .li { color: var(--flint); }
/* A replay snaps the picture back without animating, so it can play forward again (app.js). */
.is-reset, .is-reset * { transition: none !important; }

/* 1 · Websites: the page, the search it ranks for, and its speed. */
.bs-win { display: grid; gap: 10px; width: 310px; padding-bottom: 14px; transition: translate .6s var(--ease); }
.bs-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding-right: 50px; }
.bs-bar small { justify-self: center; font: 400 10.5px/1 var(--sans); color: var(--mute); }
.bs-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; height: 122px; margin: 0 9px; padding: 12px; border-radius: 9px; background: #1E1814; }
.bs-hero img { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bs-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(rgba(20, 14, 10, .55), rgba(20, 14, 10, 0) 60%); }
.bs-hero b { max-width: 8em; font: 400 19px/1.02 var(--serif); text-align: left; color: #FFF6EC; }
.bs-hero em { flex: none; padding: 6px 9px; border-radius: 999px; font: 500 10px/1 var(--sans); font-style: normal; color: #2A211B; background: #FFF6EC; }
.bs-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 9px; }
.bs-cols img { display: block; width: 100%; height: 44px; border-radius: 7px; object-fit: cover; }
.bs-win .sc-lines { padding: 0 12px; }
.bs-rank { translate: -96px 120px; transition: translate .6s var(--ease); }
.bs-rank b, .bs-speed b { display: grid; place-items: center; min-width: 30px; height: 22px; margin-left: 2px; padding: 0 7px; border-radius: 999px; font: 600 11.5px/1 var(--sans); color: var(--soft); background: #F3F1EE; transition: color .3s .7s, background .3s .7s; }
.is-lit .bs-rank b { color: #fff; background: var(--flint-d); }
.bs-speed { translate: 118px -120px; }
.bs-dot { width: 7px; height: 7px; border-radius: 50%; background: #D4D0CB; transition: background .3s; }
.is-lit .bs-dot { background: var(--ok); }
.is-lit .bs-speed b { color: #0E7A3E; background: #E5F5EB; transition-delay: 1s; }
.is-lit .bs-win { translate: 0 -6px; }
.is-lit .bs-rank { translate: -96px 116px; }

/* 2 · Online stores: the shelf, and the bag over it being paid for. */
.st-shelf { display: flex; gap: 10px; translate: -36px -46px; transition: translate .6s var(--ease); }
.st-p { display: grid; gap: 3px; width: 116px; padding: 6px 6px 10px; text-align: left; }
.st-p img { display: block; width: 100%; height: 100px; margin-bottom: 5px; border-radius: 9px; object-fit: cover; background: #ECE6DE; }
.st-p b { padding: 0 3px; font: 500 12px/1.2 var(--sans); color: var(--ink); }
.st-p small { padding: 0 3px; font-size: 11px; color: var(--mute); }
.st-bag { display: grid; gap: 8px; width: 214px; padding: 14px 14px 12px; text-align: left; translate: 104px 76px; transition: translate .6s var(--ease); }
.st-bag-h { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 4px; }
.st-bag-h b { font: 600 13px/1 var(--sans); letter-spacing: -.01em; }
.st-bag-h small { font-size: 10.5px; color: var(--ok); }
.st-line { display: flex; justify-content: space-between; font-size: 12px; color: var(--soft); }
.st-line b { font-weight: 500; color: var(--ink); }
.st-pay { position: relative; display: grid; height: 36px; margin-top: 4px; overflow: hidden; border-radius: 999px; font: 500 12.5px/1 var(--sans); color: #fff; background: var(--ink); transition: background .35s 1s; }
.st-pay > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 6px; transition: opacity .25s 1s, translate .35s var(--ease) 1s; }
.st-pay .li { --s: 15px; --sw: 2.2; }
.st-pay-b { opacity: 0; translate: 0 10px; }
.is-lit .st-pay { background: var(--flint-d); }
.is-lit .st-pay-a { opacity: 0; translate: 0 -10px; }
.is-lit .st-pay-b { opacity: 1; translate: 0 0; }
.is-lit .st-shelf { translate: -36px -52px; }
.is-lit .st-bag { translate: 104px 70px; }

/* 3 · Web apps: a studio's admin, its numbers counting up, and a booking landing. */
.ap-win { display: grid; gap: 12px; width: 344px; padding: 14px; text-align: left; }
.ap-h { display: flex; align-items: center; gap: 8px; }
.ap-h b { font: 600 13.5px/1 var(--sans); letter-spacing: -.02em; }
.ap-h small { padding: 4px 7px; border-radius: 6px; font: 500 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); background: #F4F2EF; }
.ap-av { display: block; width: 24px; height: 24px; margin-left: auto; border-radius: 50%; object-fit: cover; }
.ap-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ap-stats > span { display: grid; gap: 6px; padding: 10px 11px; border-radius: 10px; background: #F7F5F2; }
.ap-stats small { font-size: 10.5px; color: var(--mute); }
.ap-stats b { font: 500 19px/1 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.ap-cls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ap-c { display: grid; gap: 4px; padding: 5px 5px 11px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s .8s, background .3s .8s; }
.ap-c img { display: block; width: 100%; height: 48px; margin-bottom: 4px; border-radius: 6px; object-fit: cover; }
.ap-c > :not(img) { margin: 0 5px; }
.ap-c small { font: 500 9px/1 var(--mono); letter-spacing: .06em; color: var(--mute); }
.ap-c b { font: 500 12px/1.2 var(--sans); color: var(--ink); }
.ap-c em { justify-self: start; margin-top: 2px !important; padding: 3px 7px; border-radius: 999px; font: 500 10px/1 var(--sans); font-style: normal; color: var(--flint-d); background: var(--tint); }
.ap-c.is-full em { color: var(--soft); background: #F1EEEA; }
.is-lit .ap-c:first-child { background: color-mix(in srgb, var(--flint) 4%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--flint) 35%, transparent); }
.ap-new { translate: 64px -160px; opacity: 0; transition: opacity .3s .7s, translate .5s var(--spring) .7s; }
.is-lit .ap-new { opacity: 1; translate: 64px -150px; }

/* 4 · Internal tools: the orders, filtered; a pending one is paid; support's role is fenced off. */
.tl-win { display: grid; width: 372px; padding: 12px 6px 6px; text-align: left; }
.tl-h { display: flex; align-items: center; gap: 10px; padding: 0 8px 10px; }
.tl-h b { margin-right: auto; font: 600 13.5px/1 var(--sans); letter-spacing: -.02em; }
.tl-seg { display: flex; gap: 1px; padding: 2px; border-radius: 8px; background: #F4F2EF; }
.tl-seg em { padding: 5px 8px; border-radius: 6px; font: 500 10.5px/1 var(--sans); font-style: normal; color: var(--mute); }
.tl-seg .on { color: var(--ink); background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .07); }
.tl-exp { padding: 6px 9px; border-radius: 999px; font: 500 10.5px/1 var(--sans); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.tl-row { display: grid; grid-template-columns: 60px minmax(0, 1fr) 48px 72px; align-items: center; height: 38px; padding: 0 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.tl-row > span:first-child { font: 500 11px/1 var(--mono); color: var(--soft); }
.tl-row > span:nth-child(2) { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; }
.tl-row img { display: block; flex: none; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.tl-th { height: 28px; border-top: 0; font: 500 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.tl-th > span:first-child { font-size: 9.5px; color: var(--mute); }
.tl-row em { justify-self: start; padding: 4px 8px; border-radius: 999px; font: 500 10.5px/1 var(--sans); font-style: normal; }
.tl-row .ok { color: #0E7A3E; background: #E5F5EB; }
.tl-row .wait { color: #A15C00; background: #FFF1D9; transition: color .3s 1.3s, background .3s 1.3s; }
.tl-row .back { color: var(--soft); background: #F1EEEA; }
.is-lit .tl-row .wait { color: #0E7A3E; background: #E5F5EB; }
.tl-row:has(.wait) { transition: background .4s .9s; }
.is-lit .tl-row:has(.wait) { background: color-mix(in srgb, var(--flint) 4%, #fff); }
.tl-role { translate: -76px 126px; opacity: 0; transition: opacity .3s .5s, translate .5s var(--spring) .5s; }
.is-lit .tl-role { opacity: 1; translate: -76px 116px; }

/* ═════════════ EARLY ACCESS ═════════════ */
/* The page turns dark, as the main site does for stores and apps: a near-black island inset from the window, the same
   flat rules in reverse. The word in the headline wears the orange silk; the three steps are the bento in black. */
.access {
  --d-ink: #F5F5F7; --d-soft: rgba(245, 245, 247, .62); --d-mute: rgba(245, 245, 247, .4); --d-line: rgba(255, 255, 255, .08);
  position: relative; isolation: isolate; margin-left: -12px; margin-right: -12px; padding: 136px 12px 100px; border-radius: 40px; color: var(--d-ink); background: #0B0B0C;
}
.ac-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 64px; padding: 0 12px; text-align: center; }
.ac-head .eyebrow { margin-bottom: 24px; color: var(--flint-b); }
.ac-head h2 { font: 500 clamp(44px, 6.6vw, 88px)/1.02 var(--sans); letter-spacing: -.052em; color: var(--d-ink); }
.ink {
  display: inline-block; padding: .1em .1em .18em; margin: -.1em -.1em -.18em;
  background: linear-gradient(90deg, var(--flint-s), var(--flint-b) 12.5%, var(--flint-p) 25%, var(--flint-b) 37.5%, var(--flint-s) 50%, var(--flint-b) 62.5%, var(--flint-p) 75%, var(--flint-b) 87.5%, var(--flint-s)) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: ink 9s linear infinite;
}
@keyframes ink { to { background-position: 100% 0; } }
.ac-sub { max-width: 560px; margin-top: 28px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: var(--d-soft); text-wrap: balance; }
.ac-btn { height: 46px; margin-top: 34px; padding: 0 18px 0 22px; font-size: 15px; color: var(--ink); background: #fff; }
.ac-btn:hover { background: #E8E6E3; }
.ac-btn .li { --s: 15px; --sw: 1.9; transition: translate .3s var(--ease); }
.ac-btn:hover .li { translate: 2px 0; }
.is-joined .ac-btn .li { color: var(--flint); }

.ac-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); background: #141416; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.access .fc { padding-bottom: 32px; background: #1A1A1D; }
.access .fc-stage { height: 290px; margin-bottom: 18px; }
.access .fc-stage::before { background: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.4px) 0 0 / 14px 14px; }
.access .fc h3 { color: var(--d-ink); }
.access .fc > p { max-width: 300px; color: var(--d-soft); }
.access .fc > p::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14) 18% 82%, transparent); }
.ac-n { margin-bottom: 12px; font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--flint-b); }
.ac-dw { background: #232327; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }

/* 01 · Join: the address types itself in and the button says you're on the list. */
.ac-field { display: flex; align-items: center; gap: 9px; width: 336px; height: 54px; padding: 0 7px 0 16px; border-radius: 999px; font-size: 14px; color: var(--d-ink); background: #232327; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); translate: 0 -18px; }
.ac-field > .li { --s: 17px; color: var(--d-mute); }
.ac-typed { overflow: hidden; white-space: nowrap; }
.ac-caret { flex: none; width: 1.5px; height: 16px; margin-left: -8px; border-radius: 1px; background: var(--flint-k); animation: blink 1.05s steps(1) infinite; }
.ac-go { position: relative; display: grid; flex: none; height: 40px; margin-left: auto; overflow: hidden; border-radius: 999px; font: 500 13px/1 var(--sans); color: var(--on-k); background: var(--flint-k); transition: background .3s; }
.ac-go > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; transition: opacity .25s, translate .35s var(--ease); }
.ac-go .li { --s: 14px; --sw: 2.2; }
.ac-go-b { opacity: 0; translate: 0 10px; }
.ac-join.s-ok .ac-go { background: var(--flint-l); }
.ac-join.s-ok .ac-go-a { opacity: 0; translate: 0 -10px; }
.ac-join.s-ok .ac-go-b { opacity: 1; translate: 0 0; }
.ac-saved { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px; border-radius: 999px; font: 500 12px/1 var(--sans); color: var(--d-soft); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); translate: 0 52px; opacity: 0; transition: opacity .3s, translate .5s var(--spring); }
.ac-saved .li { --s: 15px; color: var(--flint-b); }
.ac-saved b { padding-left: 8px; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; color: var(--d-ink); border-left: 1px solid rgba(255, 255, 255, .14); }
.ac-join.s-ok .ac-saved { opacity: 1; translate: 0 42px; }

/* 02 · Invite: the notification drops in on top of the last one, and the wave's ticket slides out from under it. */
.ac-note { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; width: 300px; padding: 13px 14px 14px 12px; border-radius: 20px; text-align: left; background: #2A2A2F; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); translate: 0 -40px; transition: translate .6s var(--spring), opacity .3s; }
.ac-note .mk { --s: 30px; margin-top: 2px; }
.ac-note-t b { display: flex; justify-content: space-between; font: 500 12px/1 var(--sans); color: var(--d-soft); }
.ac-note-t b small { font-weight: 400; color: var(--d-mute); }
.ac-note-t strong { display: block; margin-top: 6px; font: 600 14px/1.2 var(--sans); letter-spacing: -.01em; color: var(--d-ink); }
.ac-note-t span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--d-soft); }
.ac-note-b { height: 84px; padding: 0; background: #212125; translate: 0 -26px; scale: .92; opacity: .7; }
.fc:not(.is-lit) .ac-note:not(.ac-note-b) { translate: 0 -64px; opacity: 0; }
.ac-ticket { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 12px; border-radius: 10px; font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--on-k); background: var(--flint-k); rotate: -5deg; translate: 64px 74px; opacity: 0; transition: opacity .3s .55s, translate .6s var(--spring) .55s, rotate .6s var(--spring) .55s; }
.ac-ticket .li { --s: 17px; }
.ac-ticket b { padding-left: 9px; font-weight: 600; border-left: 1.5px dashed rgba(28, 9, 3, .35); }
.is-lit .ac-ticket { opacity: 1; translate: 52px 58px; rotate: -7deg; }

/* 03 · Live: the sentence is sent and the site appears under it, live on its domain. */
.ac-prompt { display: flex; align-items: center; gap: 10px; width: 290px; height: 50px; padding: 0 6px 0 10px; border-radius: 999px; font-size: 13.5px; color: var(--d-ink); background: #2A2A2F; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); translate: 0 -10px; transition: translate .6s var(--ease); }
.ac-prompt .mk { --s: 24px; }
.ac-prompt > span:not(.mk) { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; }
.ac-send { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; color: var(--ink); background: #fff; }
.ac-send .li { --s: 16px; --sw: 2; }
.ac-site { display: grid; gap: 8px; width: 260px; padding-bottom: 12px; overflow: hidden; border-radius: 14px; background: #fff; translate: 0 64px; opacity: 0; transition: opacity .4s .4s, translate .6s var(--ease) .4s; }
.ac-site-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 12px; border-bottom: 1px solid var(--line); font: 400 11px/1 var(--sans); color: var(--ink-2); }
.ac-site-bar .li { --s: 12px; color: var(--ok); }
.ac-site-bar em { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 4px 8px; border-radius: 999px; font: 500 10px/1 var(--sans); font-style: normal; color: #0E7A3E; background: #E5F5EB; }
.ac-site-bar em i { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }
.ac-site-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-start; height: 84px; margin: 0 8px; padding: 10px; border-radius: 8px; background: #1E1814; }
.ac-site-hero img { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ac-site-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(rgba(20, 14, 10, .55), rgba(20, 14, 10, 0) 70%); }
.ac-site-hero b { max-width: 8em; font: 400 17px/1 var(--serif); text-align: left; color: #FFF6EC; }
.ac-site-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 0 8px; }
.ac-site-cols img { display: block; width: 100%; height: 34px; border-radius: 6px; object-fit: cover; }
.is-lit .ac-prompt { translate: 0 -76px; }
.is-lit .ac-site { opacity: 1; translate: 0 30px; }

/* ═════════════ QUESTIONS ═════════════ */
.faq-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 700px); gap: 48px; align-items: start; }
.faq-head { position: sticky; top: 112px; padding: 4px 4px 0; }
.faq-head h2 { font: 500 clamp(36px, 4.4vw, 56px)/1.02 var(--sans); letter-spacing: -.048em; color: var(--ink); }
.faq-copy { max-width: 340px; margin-top: 24px; font-size: 15px; line-height: 1.55; color: var(--soft); text-wrap: pretty; }
.faq-ask { display: flex; align-items: center; gap: 12px; width: min(320px, 100%); margin-top: 32px; padding: 8px 16px 8px 8px; border-radius: 20px; text-decoration: none; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .05); transition: background .2s; }
.faq-ask:hover { background: #FBFAF8; }
.faq-ask-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; color: var(--ink-2); background: #F5F4F2; transition: color .25s; }
.faq-ask-ic .li { --s: 20px; }
.faq-ask:hover .faq-ask-ic { color: var(--flint); }
.faq-ask-tx { display: grid; flex: 1; gap: 3px; min-width: 0; }
.faq-ask-tx b { font: 500 14px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.faq-ask-tx small { font-size: 12.5px; line-height: 1.3; color: var(--soft); }
.faq-ask > .li { --s: 15px; --sw: 1.9; color: var(--mute); transition: translate .3s var(--ease), color .2s; }
.faq-ask:hover > .li { color: var(--ink); translate: 3px 0; }

.faq-list { padding: 8px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .05); }
.qa { position: relative; border-radius: 20px; transition: background .3s; }
.qa + .qa::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: var(--line); transition: opacity .3s; }
.qa:hover { background: #FBFAF8; }
.qa.is-open { background: #F5F4F2; }
.qa:hover::before, .qa:hover + .qa::before, .qa.is-open::before, .qa.is-open + .qa::before { opacity: 0; }
.qa h3 { font: inherit; }
.qa-q { display: flex; align-items: center; gap: 20px; width: 100%; padding: 20px 18px 20px 24px; border-radius: 20px; text-align: left; font: 500 17px/1.35 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.qa-q:focus-visible { outline-offset: -2px; border-radius: 20px; }
.qa-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin-left: auto; border-radius: 50%; color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .3s, color .3s, box-shadow .3s; }
.qa-ic .li { --s: 15px; --sw: 1.8; transition: rotate .45s var(--ease); }
.qa.is-open .qa-ic { color: #fff; background: var(--ink); box-shadow: none; }
.qa.is-open .qa-ic .li { rotate: 45deg; }
.qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.qa.is-open .qa-a { grid-template-rows: 1fr; }
.qa-a > div { min-height: 0; overflow: hidden; }
.qa-a p { max-width: 560px; padding: 0 72px 24px 24px; margin-top: -4px; font-size: 15px; line-height: 1.6; color: var(--soft); text-wrap: pretty; opacity: 0; translate: 0 -6px; transition: opacity .25s, translate .45s var(--ease); }
.qa.is-open .qa-a p { opacity: 1; translate: 0 0; transition-delay: .08s; }

/* ═════════════ THE LAST WORD ═════════════ */
/* The main site's light island, two bands of silk rising out of its lower corners in a soft V, here in orange. The
   mark watches the field. The form is one line: an envelope, the address, and the button. */
.cta {
  position: relative; isolation: isolate; overflow: hidden; margin-left: -12px; margin-right: -12px; padding: 112px 24px 136px; border-radius: 40px; text-align: center;
  background: radial-gradient(110% 70% at 50% 0%, #FFFFFF 0%, var(--paper) 55%, var(--paper-2) 100%); box-shadow: 0 0 0 1px rgba(17, 17, 19, .05);
}
.cta-silk { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.cta-silk canvas {
  position: absolute; bottom: -27%; display: block; width: 74%; height: 76%;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 40%, transparent); mask-image: radial-gradient(50% 50% at 50% 50%, #000 40%, transparent);
}
.cta-silk canvas:first-child { left: -17%; rotate: 33deg; }
.cta-silk canvas:last-child { right: -17%; rotate: -33deg; scale: -1 1; }
.cta-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 760px; margin: 0 auto; }
.mk-cta { --s: 60px; margin-bottom: 40px; }
.cta h2 { font: 500 clamp(44px, 6.6vw, 88px)/1.02 var(--sans); letter-spacing: -.052em; color: var(--ink); }
.cta-sub { max-width: 540px; margin-top: 26px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: var(--soft); text-wrap: balance; }
.cta-ask {
  position: relative; display: flex; align-items: center; gap: 10px; width: min(560px, 100%); height: 62px; margin-top: 40px; padding: 0 8px 0 18px; border-radius: 999px; text-align: left;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
  box-shadow: 0 0 0 1px rgba(17, 17, 19, .08), 0 0 0 7px rgba(255, 255, 255, .45); transition: box-shadow .3s;
}
.cta-ask:focus-within { box-shadow: 0 0 0 1px color-mix(in srgb, var(--flint) 45%, transparent), 0 0 0 7px color-mix(in srgb, var(--flint) 12%, transparent); }
.cta-ic { display: grid; place-items: center; flex: none; color: var(--mute); transition: color .25s; }
.cta-ic .li { --s: 19px; }
.cta-ask:focus-within .cta-ic { color: var(--flint); }
.cta-ask input[type="email"] { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: 400 16.5px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); caret-color: var(--flint); }
.cta-ask input::placeholder { color: #8F8B88; }
.cta-ask .go { height: 46px; padding: 0 6px 0 18px; font-size: 15px; }
.cta-ask .go kbd { width: 34px; height: 34px; }
.cta-ask.is-bad { animation: nope .4s var(--ease); box-shadow: 0 0 0 1px rgba(194, 51, 15, .5), 0 0 0 7px rgba(194, 51, 15, .08); }
.cta-done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; font-size: 15px; color: var(--soft); animation: popIn .4s var(--ease); }
.cta-done[hidden] { display: none; }
.cta-done .li { --s: 22px; --sw: 2.2; flex: none; padding: 4px; border-radius: 50%; color: #fff; background: var(--flint); }
.cta-done b { font-weight: 500; color: var(--ink); }
.cta-ask.is-done > :not(.cta-done) { visibility: hidden; }
.cta-msg { margin-top: 20px; }
.cta-in.is-done .cta-msg { visibility: hidden; }

/* ═════════════ FOOTER ═════════════ */
/* The near-black island, kept minimal: the logo and a line, four columns of links, a plain bar, and the name across
   the bottom, still and tone on tone, cut off by the island's lower edge. */
.foot {
  --d-ink: #F5F5F7; --d-soft: rgba(245, 245, 247, .62); --d-mute: rgba(245, 245, 247, .4); --d-line: rgba(255, 255, 255, .08);
  position: relative; isolation: isolate; overflow: hidden; margin: 0 12px 12px; padding: 80px 24px 0; border-radius: 40px; color: var(--d-ink); background: #0B0B0C;
}
.foot-in { max-width: 1180px; margin: 0 auto; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; padding: 0 4px; }
.foot-brand .brand { color: var(--d-ink); }
/* The footer logo is flat white, like the header's is flat black: the mark takes the wordmark's colour. */
.foot-brand .brand .mk { color: inherit; }
.foot-brand .brand .mk path { fill: currentColor; }
.foot-brand p { max-width: 280px; margin-top: 20px; font-size: 14px; line-height: 1.55; color: var(--d-soft); }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(120px, auto)); gap: 32px 56px; }
.foot-h { margin-bottom: 16px; font-size: 13px; color: var(--d-mute); }
.foot-col ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.foot-col a, .foot-legal a { font-size: 14px; color: var(--d-soft); text-decoration: none; transition: color .2s; }
.foot-col a:hover, .foot-legal a:hover { color: var(--d-ink); }
.foot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; margin-top: 72px; padding: 20px 4px; border-top: 1px solid var(--d-line); font-size: 13px; color: var(--d-mute); }
.foot-legal { display: flex; gap: 22px; }
.foot-legal a { font-size: 13px; }

/* The name, sized by the script so its ink runs edge to edge, a shade lighter than the island. On hover a patch of
   silk follows the pointer through the letters (site.js); the canvas is only shown while it does. The layers blend
   into one on black: white letters, the silk multiplied into them, the grey letters lightened over that, and the
   island's own black lightened over everything. */
.foot-word { position: relative; isolation: isolate; overflow: hidden; max-width: 1180px; height: .6em; margin: 24px auto 0; font: 600 var(--fs, 280px)/1 var(--sans); letter-spacing: -.055em; background: #000; }
.foot-word::after { content: ""; position: absolute; inset: 0; background: #0B0B0C; mix-blend-mode: lighten; }
.fwd-cut, .fwd-ink { position: absolute; top: 0; left: 0; white-space: nowrap; translate: var(--ox, 0) var(--oy, 0); }
.fwd-cut { color: #fff; }
.fwd-silk { position: absolute; inset: 0; background: #000; mix-blend-mode: multiply; }
.fwd-silk canvas {
  display: none; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(var(--r, 0px) var(--r, 0px) at var(--mx, 50%) var(--my, 60%), #000 10%, transparent);
          mask-image: radial-gradient(var(--r, 0px) var(--r, 0px) at var(--mx, 50%) var(--my, 60%), #000 10%, transparent);
}
.fwd-silk.is-on canvas { display: block; }
.fwd-ink { color: #161618; mix-blend-mode: lighten; }

/* ───────────── Responsive ───────────── */
@media (max-width: 1023px) {
  .nav-bar { grid-template-columns: 1fr auto; }
  .nav-links, .nav-pop { display: none; }
  .nav-burger { display: grid; }
  .nav-sheet { display: block; }
}
@media (max-width: 960px) {
  .sec-head { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fc-grid, .ac-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .faq-head { position: static; }
  .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-big { grid-column: auto; grid-row: auto; }
  .ex-big .ex-fit { aspect-ratio: 520 / 390; }
  .om-hero { height: 600px; }
  .foot-top { grid-template-columns: minmax(0, 1fr); }
  .foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
}

/* On a narrow screen the demo is redrawn tall: the conversation folds down to its input under the preview, and a
   status line over the preview says what is being built. */
@media (max-width: 760px) {
  .dm-fit { height: calc(var(--k, 1) * 720px); }
  .dm-comp { width: 460px; height: 720px; font-size: 13px; }
  .dm-win { inset: 12px; grid-template-rows: 46px minmax(0, 1fr); }
  .dm-tabs { display: none; }
  .dm-pub { margin-left: auto; }
  .dm-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .dm-chat { order: 2; padding: 0 10px 10px; border-right: 0; background: #F4F1ED; }
  .dm-log { display: none; }
  .dm-in { margin-top: 0; }
  .dm-prev { padding: 12px 10px 10px; }
  .dm-browser { border-radius: 12px; }
  .dm-addr { min-width: 0; }
  .ds-nav span:not(.ds-lang, .ds-book) { display: none; }
  .ds-nav { gap: 10px; }
  .ds-hero { height: 196px; margin: 12px 12px 0; padding: 16px; }
  .ds-hero-t b { font-size: 23px; }
  .ds-week, .ds-pay { margin-left: 12px; margin-right: 12px; }
  .ds-skel { padding: 0 12px; }
  .sk-nav { margin: 0 -12px; }
  .sk-hero { height: 196px; margin-top: 12px; }
  .ds-row { grid-template-columns: 44px 30px minmax(0, 1fr) auto auto; gap: 9px; padding: 0 4px 0 8px; }
  .ds-th { width: 30px; height: 30px; }
  .ds-hero-t b { font-size: 30px; }
  .ds-hero::after { background: linear-gradient(rgba(24, 17, 12, .6), rgba(24, 17, 12, .9)); }
  .dm-ticker { position: absolute; left: 50%; bottom: 24px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; font: 500 12px/1 var(--sans); color: #fff; background: var(--ink); translate: -50% -6px; white-space: nowrap; }
  .dm-ticker .li { --s: 14px; --sw: 2; color: var(--flint-l); animation: spin 1.1s linear infinite; }
  .s-reply:not(.s-live) .dm-ticker { opacity: 1; scale: 1; translate: -50% 0; }
  .dm-seo { right: 18px; top: 318px; }
  .dm-toast { right: 50%; bottom: 18px; width: 300px; translate: 50% 14px; }
  .s-book .dm-toast { translate: 50% 0; }
  .dm-foot { flex-direction: column; align-items: stretch; }
  .dm-steps { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dm-steps li { padding: 12px 14px 16px; }
  .dm-steps small { display: none; }
  .dm-pause { align-self: flex-end; margin: 2px 6px 4px 0; }
}

@media (max-width: 640px) {
  .nav, .nav.is-island { width: calc(100% - 24px); }
  .nav-bar { height: 64px; padding: 0 2px; }
  .nav.is-island .nav-bar { height: 56px; padding: 0 6px 0 14px; }
  .brand { --s: 22px; }
  .nav-cta { height: 42px; padding: 0 16px; font-size: 14px; }
  .nav-cta .li { display: none; }
  .is-joined .nav-cta .li { display: inline-block; }
  .nav-burger, .nav.is-island .nav-burger { width: 42px; height: 42px; margin-right: 6px; }
  .ns-list { grid-template-columns: minmax(0, 1fr); }

  .hero { min-height: min(calc(100svh - 16px), 900px); margin: 8px; padding-bottom: 48px; border-radius: 30px; }
  .hero-in { padding: 88px 14px 0; }
  .soon { margin-bottom: 22px; padding-right: 4px; }
  .soon span { display: none; }
  .sub { margin-top: 22px; }
  .stage { margin-top: 32px; }
  .rim { border-radius: 33px; }
  .face { border-radius: 28px; }
  .ask-bar { grid-template-columns: auto minmax(0, 1fr); height: auto; }
  .bar-l, .bar-m { height: 56px; }
  .bar-r { grid-column: 1 / -1; padding: 0 6px 6px; }
  .bar-r .go { flex: 1; justify-content: space-between; height: 48px; padding-left: 20px; }
  .share-l { width: 100%; margin: 0 0 4px; }

  .below { padding: 24px 16px 8px; }
  .sec + .sec { margin-top: 100px; }
  .tools { margin: 0 -16px; gap: 8px; }
  .tool { height: 42px; padding: 0 15px 0 11px; font-size: 13.5px; }
  .tools-row.is-drift .tool { margin-right: 8px; }
  .ex-grid { grid-template-columns: minmax(0, 1fr); padding: 6px; gap: 6px; border-radius: 24px; }
  .ex { border-radius: 18px; }
  .om { --w: 600 !important; }
  .om-nav span:nth-of-type(n+3) { display: none; }
  .om-hero { height: 450px; padding-bottom: 26px; }
  .om-t b { font-size: 60px; }
  .om-book { margin-top: 22px; }
  .om-book span:nth-child(3) { display: none; }
  .om-book span:nth-child(2) { border: 0; }

  .demo { padding: 6px; border-radius: 24px; }
  .dm-fit { border-radius: 18px; }
  .fc-grid { padding: 6px; border-radius: 24px; }
  .fc { padding: 0 20px 28px; border-radius: 18px; }
  .fc-stage { height: 300px; margin: 0 -20px 24px; }
  .access, .cta { margin-left: -8px; margin-right: -8px; border-radius: 30px; }
  .access { padding: 100px 8px 72px; }
  .ac-head { margin-bottom: 44px; padding: 0 8px; }
  .access .fc-stage { height: 260px; }

  .faq-list { padding: 6px; border-radius: 24px; }
  .qa, .qa-q { border-radius: 18px; }
  .qa-q { gap: 14px; padding: 18px 14px 18px 18px; font-size: 16px; }
  .qa + .qa::before { left: 18px; right: 18px; }
  .qa-a p { padding: 0 18px 20px; font-size: 14.5px; }

  .cta { padding: 88px 14px 150px; }
  .mk-cta { --s: 48px; margin-bottom: 32px; }
  .cta-ask { height: auto; flex-wrap: wrap; padding: 6px; border-radius: 28px; }
  .cta-ic { display: none; }
  .cta-ask input[type="email"] { flex-basis: 100%; height: 52px; padding: 0 14px; }
  .cta-ask .go { flex: 1; justify-content: space-between; }
  .cta-done { position: static; min-height: 98px; }
  .cta-ask.is-done > :not(.cta-done) { display: none; }

  .foot { margin: 0 8px 8px; padding: 64px 14px 0; border-radius: 30px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-bar { margin-top: 48px; }
  .foot-word { margin-top: 20px; }
}
@media (max-width: 480px) {
  .fs { scale: .84; }
  .access .fs { scale: .9; }
}
@media (max-width: 380px) {
  .fs { scale: .76; }
}

/* ───────────── Palette switcher ───────────── */
/* themes.js adds it when the address has ?palette=, for trying the page in other colours: a swatch per palette in its
   mark's gradient, the chosen one ringed. */
.pal-bar { position: fixed; z-index: 40; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 6px 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); box-shadow: 0 0 0 1px var(--line-2); }
.pal-l { margin-right: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.pal-sw { flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(var(--a), var(--b)); box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .12); transition: box-shadow .2s; }
.pal-sw:hover { box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .12), 0 0 0 2px #fff, 0 0 0 3px var(--line-2); }
.pal-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.pal-name { min-width: 72px; margin: 0 4px 0 8px; font: 500 13.5px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.pal-all { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; font: 500 13px/1 var(--sans); color: var(--ink-2); text-decoration: none; background: rgba(17, 17, 19, .05); transition: background .2s; }
.pal-all:hover { background: rgba(17, 17, 19, .09); }
@media (max-width: 640px) {
  .pal-bar { left: 12px; right: 12px; bottom: 12px; justify-content: center; padding: 0 6px; }
  .pal-l, .pal-name { display: none; }
  .pal-all { margin-left: 4px; padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ex:hover .ex-page { translate: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ═════════════ Links in copy ═════════════ */
/* The links in the questions' answers and the Examples header, to the landing pages (src/data/faq.ts). */
.qa-a a, .sec-more { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--flint) 55%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.qa-a a:hover, .sec-more:hover { text-decoration-color: var(--flint); }

/* A closing band with a page's own headline: one size down from the home page's. */
.cta .cta-h-page { font-size: clamp(40px, 5.6vw, 72px); text-wrap: balance; }

/* Examples: the sentence links each example to its /for/ page; the link covers the whole card. */
.ex-linked { position: relative; }
.ex-link { color: inherit; text-decoration: none; }
.ex-link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.ex-linked:hover .ex-link { color: var(--ink); }