/* 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;
  --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%, rgba(254, 96, 35, .35), transparent 70%), radial-gradient(40% 30% at 60% 45%, rgba(255, 196, 160, .5), 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 { 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. There are no menus, only anchors down the page, and one button that takes you to the form. */
.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: #161616; }
.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 { position: relative; display: flex; }
.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: 0; 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: #FFB08C; }
.is-joined .nav-cta:hover .li { translate: none; }

/* ═════════════ HERO ═════════════ */
/* The main hero, warmed. A white sky into cream, a low glow of the mark's orange along the bottom like first light, and
   the ribbon across the middle, masked out at top and bottom as on the main site. */
/* overflow: clip, not hidden: a hidden box can still be scrolled by the browser (when a join button or the email
   field asks for its element to be brought into view), and that slid the logo, the badge and the top of the
   headline out of the hero while the page itself stayed at the top. clip never becomes a scroll container. */
.hero { position: relative; isolation: isolate; overflow: hidden; overflow: clip; min-height: min(100svh, 960px); padding-bottom: 64px; background: radial-gradient(110% 60% at 50% 0%, #FFFFFF 0%, #FCF9F6 50%, #F7F1EB 100%); }
.hero-glow { position: absolute; z-index: 0; left: 50%; bottom: -30%; width: 140%; height: 70%; translate: -50% 0; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(254, 96, 35, .13), rgba(254, 140, 80, .06) 45%, transparent 70%); }
/* The ribbon hangs from the composer, not the hero, so on any screen it runs behind the form and under the copy. */
.hero-ribbon { position: absolute; z-index: -1; left: 50%; top: -160px; width: 100vw; height: 640px; translate: -50% 0; -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 72%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 72%, transparent); }
.hero-in { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 128px 20px 0; }
.mk-hero { --s: 64px; margin-bottom: 30px; }

/* Coming soon: a white pill with a hairline, a pulsing orange dot, the label, and the line after a short rule. */
.soon { display: inline-flex; align-items: center; gap: 9px; height: 34px; margin-bottom: 26px; padding: 0 15px 0 13px; 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 > i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--flint); }
.soon > i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: ping 2.2s var(--ease) infinite; }
@keyframes ping { from { box-shadow: 0 0 0 0 rgba(254, 96, 35, .5); } 70%, to { box-shadow: 0 0 0 7px rgba(254, 96, 35, 0); } }
.soon b { font-weight: 500; color: var(--ink); }
.soon span { display: inline-flex; align-items: center; gap: 9px; }
.soon span::before { content: ""; width: 1px; height: 13px; background: var(--line-2); }

.headline { font: 500 clamp(44px, 7vw, 88px)/1 var(--sans); letter-spacing: -.052em; color: var(--ink); }
.sub { max-width: 680px; margin-top: 28px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: var(--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 glass rim round a white 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, 236, 224, .8), rgba(255, 255, 255, .5) 42%, rgba(176, 160, 150, .5));
  -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
  box-shadow: 0 0 0 .5px rgba(17, 17, 19, .12);
}
.face { position: relative; overflow: hidden; overflow: clip; border-radius: 31px; background: rgba(252, 251, 250, .92); box-shadow: 0 0 0 1px rgba(255, 255, 255, .9); 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(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); 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) 40%, 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(--ink); caret-color: var(--flint); }
.bar-m input::placeholder { color: #8F8B88; }

.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: #FF7238; }
.go[disabled] { cursor: progress; }

/* While a sign-up is in flight the label and a spinner become one group, centered, and the enter hint steps aside.
   app.js freezes the button's width at its resting size, so the composer beside it does not jump when the label
   changes from "Join the waitlist" to "Saving…". */
.wl .go.is-busy { justify-content: center; gap: 9px; padding: 0 16px; }
.wl .go.is-busy kbd { display: none; }
.wl .go.is-busy::before { content: ""; flex: none; width: 13px; height: 13px; border: 1.6px solid rgba(255, 255, 255, .32); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }

/* 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 rgba(254, 96, 35, .4); }
  to { opacity: 0; box-shadow: 0 0 0 12px rgba(254, 96, 35, 0); }
}
.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; }

/* 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(--ink); }
.done-p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--soft); }
.done-p b { font-weight: 500; color: var(--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(--line); }
.share-l { margin-right: 4px; font-size: 13px; color: var(--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: var(--ink-2); text-decoration: none; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .2s, color .2s; }
.share-b:hover { color: var(--ink); background: #FAF7F4; }
.share-b .li { --s: 15px; }
.share-b.is-copied { color: var(--ok); }
.share-ic { width: 34px; padding: 0; }
.done-reset { margin-top: 14px; font-size: 12.5px; color: var(--mute); text-decoration: underline transparent; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.done-reset:hover { color: var(--ink-2); text-decoration-color: currentColor; }
.stage.is-done .wl-msg { visibility: hidden; }

/* ═════════════ BELOW THE HERO ═════════════ */
.below { position: relative; isolation: isolate; padding: 40px 24px 12px; background: linear-gradient(#F7F1EB, var(--bg) 360px); }
.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(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 rgba(254, 96, 35, .3); 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 rgba(254, 96, 35, .45), 0 0 0 4px rgba(254, 96, 35, .1); }
.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: #FFF8F4; box-shadow: inset 0 0 0 1px rgba(254, 96, 35, .35); }
.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: #FFF8F4; }
.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: #FF7A45; }
.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, #E6501A, #FF8A50 12.5%, #FFCCA8 25%, #FF8A50 37.5%, #E6501A 50%, #FF8A50 62.5%, #FFCCA8 75%, #FF8A50 87.5%, #E6501A) 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: #FF7A45; }
.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); 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: #1C0903; background: var(--flint); 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: #FFB08C; }
.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: #FF7A45; }
.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: #1C0903; background: var(--flint); 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%, #FCF9F6 55%, #F7F1EB 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 rgba(254, 96, 35, .45), 0 0 0 7px rgba(254, 96, 35, .12); }
.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 main site's near-black island, the name across the bottom 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; align-items: end; gap: 48px; padding: 0 4px; }
.foot-brand .brand { color: var(--d-ink); }
.foot-brand p { max-width: 360px; margin-top: 22px; font-size: 14px; line-height: 1.55; color: var(--d-soft); }
.foot-join { display: flex; align-items: center; gap: 12px; width: 320px; padding: 8px 18px 8px 8px; border-radius: 20px; text-decoration: none; background: #18181B; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: background .2s; }
.foot-join:hover { background: #1F1F23; }
.foot-join-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; color: #1C0903; background: var(--flint); }
.foot-join-ic .li { --s: 20px; }
.foot-join-tx { display: grid; flex: 1; gap: 3px; }
.foot-join-tx b { font: 500 14px/1.2 var(--sans); letter-spacing: -.01em; color: var(--d-ink); }
.foot-join-tx small { font-size: 12.5px; color: var(--d-soft); }
.foot-join > .li { --s: 15px; --sw: 1.9; color: var(--d-mute); transition: translate .3s var(--ease), color .2s; }
.foot-join:hover > .li { color: var(--d-ink); translate: 3px 0; }
.foot-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 64px; padding: 20px 4px; border-top: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); font-size: 13px; color: var(--d-mute); }
.foot-legal { display: flex; gap: 22px; }
.foot-legal a { color: var(--d-soft); text-decoration: none; transition: color .2s; }
.foot-legal a:hover { color: var(--d-ink); }
.foot-status { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; color: var(--d-soft); }
.foot-status i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--flint); }
.foot-status i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: ping 2.4s var(--ease) infinite; }

/* Contact line: the one way to reach us while there are no social accounts to follow. */
.foot-contact { margin-top: 18px; font-size: 14px; color: var(--d-mute); }
.foot-contact a { color: var(--d-soft); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .18); transition: color .2s, border-color .2s; }
.foot-contact a:hover { color: var(--d-ink); border-color: var(--flint); }

/* The page's own sections, linked from the bottom the way the top bar links them. */
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 56px; padding: 0 4px; }
.foot-links a { font-size: 13.5px; color: var(--d-soft); text-decoration: none; transition: color .2s; }
.foot-links a:hover { color: var(--d-ink); }
.foot-links ~ .foot-bar { margin-top: 20px; }

/* The name, sized by app.js so its ink runs edge to edge, cut off by the island a little above its baseline. Its
   layers blend into one on black: white letters, the silk multiplied into them, the grey letters lightened over that,
   and the footer's own black lightened over everything. See hero-explorations for the long version. */
.foot-word { position: relative; isolation: isolate; overflow: hidden; max-width: 1180px; height: .6em; margin: 40px 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: block; 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-ink { color: #1B1B1E; mix-blend-mode: lighten; }

/* ───────────── Responsive ───────────── */
@media (max-width: 1023px) {
  .nav-bar { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
}
@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); align-items: start; }
}

/* 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: #FF9D72; 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; }

  .hero-in { padding: 108px 14px 0; }
  .mk-hero { --s: 52px; margin-bottom: 24px; }
  .soon { margin-bottom: 22px; }
  .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-join { width: 100%; }
  .foot-links { gap: 9px 18px; margin-top: 40px; }
  .foot-bar { margin-top: 48px; }
  .foot-status { margin-left: 0; }
  .foot-word { margin-top: 36px; }
}
@media (max-width: 480px) {
  .fs { scale: .84; }
  .access .fs { scale: .9; }
}
@media (max-width: 380px) {
  .fs { scale: .76; }
}

@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; }
}