/* Flinter · the home page (src/pages/index.astro, src/components/front/), on top of home.css and nav.css, from
   Desktop/Flinter Website/flinter-home.html. Every class, id and token starts f- so nothing here reaches the nav, the
   footer or the questions, which keep home.css's styles.

   One column on white, with no lines drawn around or between the sections (2026-11-05: the rails and bands after
   otherwise.ai are gone; that version is in Desktop/Flinter Website/versions/frame-lines-2026-11-05/). What used to
   meet the rails square, the plates, the bento's cells and the questions, is rounded instead. The live gradients
   (gradient.js) sit only behind the key screens: the app's home under the hero (Ember, orange), the builder (Dusk) and
   the integrations (Deep). The text, the chat input and the buttons stay on white. The UI is neutral: ink and grey, no orange but the
   marks. */

:root {
  --f-bg: #FFFFFF;
  --f-ink: #111113;
  --f-ink-2: #2C2C31;
  --f-soft: #5E5E66;
  --f-mute: #8A8A93;
  --f-line: rgba(17, 17, 19, .08);
  --f-line-2: rgba(17, 17, 19, .12);
  --f-plate: #F4F4F5;
  /* The grey that breaks the white (Endi, 2026-11-05): the bento's cells and the questions. With no hairlines left
     to draw their edges, it is a step darker than the #FBFBFB it was, still lighter than the first #F7F7F8. */
  --f-grey: #F9F9FA;
  --f-ok: #12A150;
  --f-ease: cubic-bezier(.22, 1, .36, 1);
  /* The radii: the big plates (the gradients and the questions), and the bento's cells, which sit closer together. */
  --f-r-plate: 24px;
  --f-r-cell: 20px;
  /* The space between the column and the window's edge */
  --f-gut: 24px;
  --f-col: min(1184px, calc(100% - 2 * var(--f-gut)));
}
body { background: var(--f-bg); }
.f-page a { text-decoration: none; }
.f-page :focus-visible { outline-color: var(--f-ink); }
.f-page ul { margin: 0; padding: 0; list-style: none; }

/* ───────── The column ───────── */
/* The nav is fixed (nav.css), so the page starts under it. On this page its content lines up with the column. */
.f-page { position: relative; padding-top: 64px; }
.is-front .hd-shell { max-width: none; width: var(--f-col); padding: 0 24px; }
.f-col { width: var(--f-col); margin: 0 auto; }

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

/* ───────── Head: on white, as before the ClickUp test ───────── */
/* minmax(0, 1fr): the column stays the column's width, whatever the suggestion row or an input would like */
.f-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 20px; padding: 76px 24px 64px; text-align: center; }
.f-badge { display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px 0 3px; border-radius: 999px; font-size: 13.5px; color: var(--f-soft); background: var(--f-plate); }
/* The badge's word sits on a live shader chip (.chip, home.css and chips.js), as on every page's "In early access" pill. */
.f-head h1 { max-width: 780px; font: 500 clamp(40px, 5.4vw, 68px)/1.02 var(--sans); letter-spacing: -.045em; color: var(--f-ink); text-wrap: balance; }
/* The word that changes (front.js). It shares its line with "Your" only, so nothing else moves: the box eases to each
   word's width, the old word lifts away blurred and the new one rises in, sharpening as it is wiped in left to right.
   The padding lets the wipe's mask cover the descenders, which run past the tight line height. */
.f-rot { display: inline-block; text-align: left; }
.f-rot-w { display: inline-block; white-space: nowrap; }
.f-rot.f-on { display: inline-grid; transition: width .6s var(--f-ease); }
.f-rot.f-on .f-rot-w { grid-area: 1 / 1; justify-self: start; padding: .14em 0 .22em; margin: -.14em 0 -.22em; opacity: 0; user-select: none; }
.f-rot.f-on .f-rot-w.f-cur { opacity: 1; user-select: auto; }
.f-rot-w.f-in {
  mask-image: linear-gradient(90deg, #000 34%, transparent 66%); mask-size: 300% 100%; mask-repeat: no-repeat;
  animation: f-rot-in .8s var(--f-ease) backwards;
}
.f-rot-w.f-out { animation: f-rot-out .5s var(--f-ease) both; }
@keyframes f-rot-in { from { opacity: 0; filter: blur(10px); translate: 0 .3em; mask-position: 100% 0; } to { opacity: 1; filter: blur(0); translate: 0 0; mask-position: 0 0; } }
@keyframes f-rot-out { from { opacity: 1; filter: blur(0); translate: 0 0; } to { opacity: 0; filter: blur(8px); translate: 0 -.3em; } }
/* The changing word in colour, so it stands out from the ink around it: each word wears one of the plates' palettes
   (gradient.js), in the order front.js adds them (Hero.astro's turns, after "website"). Only the deeper stops, so every
   colour holds at least 3:1 on white at headline size. The gradient covers the padding the wipe uses, so descenders
   stay coloured. */
.f-rot-w { background: linear-gradient(90deg, var(--g1), var(--g2) 55%, var(--g3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.f-rot-w:nth-child(7n + 1) { --g1: #3B2A9A; --g2: #C42E7A; --g3: #E8481C; } /* website · night */
.f-rot-w:nth-child(7n + 2) { --g1: #B8251A; --g2: #E8421A; --g3: #F0641C; } /* online store · ember */
.f-rot-w:nth-child(7n + 3) { --g1: #0B7F7A; --g2: #0E8F80; --g3: #2F6BF5; } /* booking site · lagoon */
.f-rot-w:nth-child(7n + 4) { --g1: #3A1E9C; --g2: #6B4BFF; --g3: #B94DF5; } /* portfolio · dusk */
.f-rot-w:nth-child(7n + 5) { --g1: #1E3BFF; --g2: #2F6BF5; --g3: #7A6BF0; } /* web app · ocean */
.f-rot-w:nth-child(7n + 6) { --g1: #5A5CFF; --g2: #C43BD9; --g3: #F0337F; } /* blog · sunset */
.f-rot-w:nth-child(7n + 7) { --g1: #7A4DFF; --g2: #E0338F; --g3: #F0552E; } /* landing page · flint */
@media (forced-colors: active) { .f-rot-w { background: none; -webkit-text-fill-color: currentColor; } }
/* Narrow phones: "Your landing page", the longest line, still fits on one line, so the headline keeps its height. */
@media (max-width: 360px) { .f-head h1 { font-size: 34px; } }
.f-head .f-sub { max-width: 520px; font-size: 18px; line-height: 1.5; color: var(--f-soft); text-wrap: pretty; }
.f-head .f-ask { width: min(760px, 100%); margin-top: 12px; }

/* ───────── Arriving: the head on load, once ─────────
   In reading order, each piece rises out of a blur: the badge, the headline word by word (60ms apart, the changing word
   as one), the line, the input, the suggestions, then the plate fades up and the app rises into it. CSS animations, so
   they stay smooth while the page is still loading, all done by 2s (the word starts changing at 2.6s). Backwards fill
   only, so nothing is held once they end; front.js adds .f-landed after, so a row the composer hides and shows again
   doesn't replay it. Without script (no .f-js) everything simply shows. */
.f-w { display: inline-block; }
.f-js:not(.f-landed) .f-head > .f-badge { animation: f-arrive-badge .7s var(--f-ease) backwards; }
.f-js:not(.f-landed) .f-head h1 .f-w { animation: f-arrive-word .9s var(--f-ease) calc(.12s + var(--i, 0) * .06s) backwards; }
.f-js:not(.f-landed) .f-head > .f-sub { animation: f-arrive .8s var(--f-ease) .5s backwards; }
.f-js:not(.f-landed) .f-head > .f-ask { animation: f-arrive .8s var(--f-ease) .6s backwards; }
.f-js:not(.f-landed) .f-head > .f-ideas { animation: f-arrive .8s var(--f-ease) .7s backwards; }
.f-js:not(.f-landed) #f-hero { animation: f-arrive-fade .9s var(--f-ease) .7s backwards; }
.f-js:not(.f-landed) #f-devices { animation: f-arrive-app 1.2s var(--f-ease) .8s backwards; }
@keyframes f-arrive-badge { from { opacity: 0; scale: .96; filter: blur(4px); } }
@keyframes f-arrive-word { from { opacity: 0; translate: 0 .28em; filter: blur(10px); } }
@keyframes f-arrive { from { opacity: 0; translate: 0 12px; filter: blur(6px); } }
@keyframes f-arrive-fade { from { opacity: 0; } }
@keyframes f-arrive-app { from { opacity: 0; translate: 0 48px; } }
/* Reduced motion: the same order as a plain fade, nothing moving, nothing waiting. */
@media (prefers-reduced-motion: reduce) {
  .f-js:not(.f-landed) .f-head > .f-badge, .f-js:not(.f-landed) .f-head h1 .f-w, .f-js:not(.f-landed) .f-head > .f-sub,
  .f-js:not(.f-landed) .f-head > .f-ask, .f-js:not(.f-landed) .f-head > .f-ideas, .f-js:not(.f-landed) #f-hero,
  .f-js:not(.f-landed) #f-devices { animation: f-arrive-fade .4s ease backwards; }
}

/* ───────── Suggestions under the chat input (after Desktop/Flinter/hero-explorations) ─────────
   "Or try a suggestion", a hairline and the arrows, then three cards at a time; the arrows page through the rest and
   wrap at the end. Each card is a scene (scenes.js), a name and a line. Picking one types its sentence in (front.js). */
.f-ideas { width: min(760px, 100%); text-align: left; }
.f-ideas[hidden] { display: none; }
.f-ideas-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 8px; }
.f-ideas-lab, .f-ideas-nav, .f-idea {
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .78));
  -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 .5px rgba(17, 17, 19, .12), 0 6px 18px -12px rgba(17, 17, 19, .22);
}
.f-ideas-lab { display: inline-flex; align-items: center; flex: none; height: 30px; padding: 0 13px; border-radius: 999px; font: 500 13px/1 var(--sans); letter-spacing: -.01em; color: var(--f-ink-2); }
.f-ideas-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(17, 17, 19, .1), rgba(17, 17, 19, 0)); }
.f-ideas-nav { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; color: var(--f-soft); transition: opacity .3s, color .2s, transform .3s var(--f-ease); }
.f-ideas-nav:hover { color: var(--f-ink); }
.f-ideas-nav[data-dir="1"]:hover { transform: translateX(2px); }
.f-ideas-nav[data-dir="-1"]:hover { transform: translateX(-2px); }
.f-ideas-nav .f-li { --s: 15px; --sw: 1.8; }
.f-ideas-nav[data-dir="-1"]:not(.f-on) { opacity: 0; pointer-events: none; }
/* A scroller clips its overflow, so the track is padded out (and pulled back by margins) far enough to hold the
   cards' rings and shadows. The side padding stays under the gap, so no sliver of the next card shows. */
.f-ideas-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 3); gap: 12px;
  margin: -6px -8px -14px; padding: 6px 8px 14px; scroll-padding: 0 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.f-ideas-track::-webkit-scrollbar { display: none; }
.f-idea { display: flex; align-items: center; gap: 13px; min-width: 0; padding: 7px 12px 7px 7px; border-radius: 20px; text-align: left; scroll-snap-align: start; transition: background .3s; }
.f-idea:hover { background: #fff; }
.f-idea > span { display: grid; gap: 4px; min-width: 0; }
.f-idea b { font: 500 13.5px/1.2 var(--sans); letter-spacing: -.012em; color: var(--f-ink); }
.f-idea small { display: -webkit-box; overflow: hidden; font-size: 12.5px; line-height: 1.38; color: var(--f-soft); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Scene tiles (scenes.js): a light tint with a band of silk drifting across it. */
.f-scene {
  position: relative; isolation: isolate; overflow: hidden; display: block; flex: none; width: 84px; height: 63px; border-radius: 13px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--l, #EEF0F4) 55%, #fff), color-mix(in srgb, var(--l, #EEF0F4) 78%, var(--b, #DDE1E8)));
  box-shadow: 0 0 0 .5px color-mix(in srgb, var(--d, #15171F) 22%, transparent);
}
.f-scene::before {
  content: ""; position: absolute; z-index: 0; inset: -50%;
  background: radial-gradient(circle at 100% 100%, transparent 36%, color-mix(in srgb, var(--b) 28%, transparent) 42%, color-mix(in srgb, var(--b) 62%, transparent) 47%, rgba(255, 255, 255, .7) 50%, color-mix(in srgb, var(--b) 55%, transparent) 53%, transparent 62%);
  filter: blur(4px);
  animation: f-silk 13s ease-in-out var(--dl, 0s) infinite alternate;
}
.f-scene::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.f-scene svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
@keyframes f-silk { from { transform: rotate(-16deg) scale(1.02); } to { transform: rotate(14deg) scale(1.1); } }
.f-s-w { fill: #fff; }
.f-s-edge { stroke: rgba(17, 17, 19, .07); stroke-width: .5; }
.f-s-chrome { fill: #F1F2F5; }
.f-s-dot { fill: #D3D6DD; }
.f-s-t { fill: #E1E3E9; }
.f-s-t2 { fill: #ABB0BC; }
.f-s-ink { fill: #1B1D23; }
.f-s-grid { fill: rgba(17, 17, 19, .07); }
.f-s-l { fill: var(--l); }
.f-s-b { fill: var(--b); }
.f-s-c { fill: var(--c); }
.f-s-d { fill: var(--d); }
.f-s-gold { fill: #FFB224; }
.f-s-gl { stop-color: var(--l); }
.f-s-gb { stop-color: var(--b); }
.f-s-gc { stop-color: var(--c); }
.f-s-gd { stop-color: var(--d); }
.f-s-o1 { opacity: .1; } .f-s-o15 { opacity: .15; } .f-s-o2 { opacity: .2; } .f-s-o25 { opacity: .25; } .f-s-o35 { opacity: .35; }
.f-s-o5 { opacity: .5; } .f-s-o6 { opacity: .6; } .f-s-o7 { opacity: .7; } .f-s-o8 { opacity: .8; } .f-s-o9 { opacity: .9; }
.f-s-tick, .f-s-road, .f-s-route, .f-s-stick, .f-s-bean, .f-s-ring, .f-s-arc, .f-s-hole, .f-s-cur, .f-s-line, .f-s-wx, .f-s-sel { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.f-s-tick { stroke: #fff; stroke-width: .9; }
.f-s-road { stroke: #fff; stroke-width: 1.8; }
.f-s-route { stroke: var(--c); stroke-width: 1.1; stroke-dasharray: 1.4 1.9; }
.f-s-stick { stroke: var(--d); stroke-width: 1; }
.f-s-bean { stroke: var(--l); stroke-width: .7; }
.f-s-ring { stroke: var(--l); stroke-width: 3; }
.f-s-arc { stroke: var(--c); stroke-width: 3; }
.f-s-hole { stroke: #D3D6DD; stroke-width: .9; }
.f-s-cur { stroke: var(--c); stroke-width: .9; }
.f-s-av { stroke: #fff; stroke-width: 1; }
.f-s-line { stroke: var(--c); stroke-width: 1.1; }
.f-s-wf { fill: #F8F9FB; stroke: #C9CED8; stroke-width: .5; stroke-dasharray: 1.4 1; }
.f-s-wx { stroke: #D9DCE3; stroke-width: .5; }
.f-s-sel { stroke: var(--c); stroke-width: .7; }
.f-s-selh { stroke: var(--c); stroke-width: .5; }

/* ───────── The chat input (Composer.astro): a soft rim around a white face, one line at a time ───────── */
.f-ask { position: relative; width: min(620px, 100%); text-align: left; }
.f-ask-rim { padding: 5px; border-radius: 24px; background: linear-gradient(180deg, rgba(17, 17, 19, .055), rgba(17, 17, 19, .03)); box-shadow: 0 0 0 .5px rgba(17, 17, 19, .08); transition: box-shadow .25s; }
.f-ask:focus-within .f-ask-rim { box-shadow: 0 0 0 .5px rgba(17, 17, 19, .16), 0 0 0 5px rgba(17, 17, 19, .04); }
.f-ask-face { overflow: hidden; border-radius: 19px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .1), 0 10px 28px -14px rgba(0, 0, 0, .2); }
.f-ask-bar { display: flex; align-items: center; gap: 10px; height: 62px; padding: 0 8px 0 10px; }
.f-ask-bar[hidden], .f-ask-chat[hidden], .f-ask-done[hidden] { display: none; }
.f-ask-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; color: var(--f-soft); background: var(--f-plate); transition: color .2s; }
.f-ask-ic .f-li { --s: 17px; }
.f-ask:focus-within .f-ask-ic { color: var(--f-ink); }
/* width 0: an input's built-in width would otherwise widen the grid column it sits in on phones */
.f-ask input[type="text"], .f-ask input[type="email"] { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: 400 16px/1 var(--sans); letter-spacing: -.01em; color: var(--f-ink); caret-color: var(--f-ink); }
.f-ask input::placeholder { color: #9A9AA2; }
/* Build: the label and a small arrow that nudges on hover, even padding, corners concentric with the face's (19px
   less the 8px between them). While it sends, the arrow turns into a spinner. */
.f-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; height: 46px; padding: 0 16px 0 20px; border-radius: 11px; font: 500 14.5px/1 var(--sans); letter-spacing: -.01em; color: #fff; white-space: nowrap; background: var(--f-ink); transition: background-color .15s; }
.f-go:hover { background: var(--f-ink-2); }
.f-go-ic { display: grid; place-items: center; width: 16px; height: 16px; }
.f-go-ic .f-li { --s: 16px; --sw: 1.8; transition: transform .25s var(--f-ease); }
.f-go:hover .f-go-ic .f-li { transform: translateX(2px); }
.f-go[disabled] { cursor: progress; }
.f-go[disabled] .f-go-ic .f-li { display: none; }
.f-go[disabled] .f-go-ic::before { content: ""; width: 12px; height: 12px; border: 1.6px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: f-spin .7s linear infinite; }
/* The hero's is a step bigger than the close's (Endi, 2026-11-05: "make it a bit bigger the prompt"); on narrow
   phones only its words are (the rest is under "Narrow phones", below). */
.f-head .f-ask input[type="text"], .f-head .f-ask input[type="email"] { font-size: 17px; }
@media (min-width: 481px) {
  .f-head .f-ask-bar { height: 70px; padding: 0 10px 0 12px; }
  .f-head .f-ask-ic { width: 40px; height: 40px; }
  .f-head .f-ask-ic .f-li { --s: 19px; }
  .f-head .f-go { height: 50px; padding: 0 18px 0 22px; font-size: 15px; }
}
.f-ask-done button { flex: none; font-size: 13px; color: var(--f-mute); text-decoration: underline; text-decoration-color: rgba(17, 17, 19, .25); text-underline-offset: 3px; transition: color .15s; }
.f-ask-done button:hover { color: var(--f-ink); }
.f-ask-done { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 16px 10px 12px; font-size: 14.5px; line-height: 1.4; color: var(--f-soft); }
.f-ask-done:focus { outline: none; }
.f-ask-done-tx { flex: 1; min-width: 0; }
.f-ask-done b { font-weight: 500; color: var(--f-ink); overflow-wrap: anywhere; }
.f-ask-ok { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: var(--f-ink); }
.f-ask-ok .f-li { --s: 17px; --sw: 2.2; }
.f-ask.f-is-joined .f-ask-ok { animation: f-cm-pop .6s cubic-bezier(.34, 1.56, .64, 1) backwards, f-halo 1.1s .25s var(--f-ease); }
@keyframes f-cm-pop { from { scale: .4; opacity: 0; } }
.f-ask.f-is-bad .f-ask-face { animation: f-nope .4s var(--f-ease); }
.f-ask-msg { margin: 0; font-size: 13px; line-height: 1.4; color: var(--f-mute); }
.f-ask-msg.f-is-bad { color: #C2330F; }
.f-ask-msg:empty { display: none; }
@keyframes f-nope { 20% { translate: -6px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
@keyframes f-spin { to { rotate: 360deg; } }

/* ───────── The hero plate: the app's home on the live gradient, cut by the plate's lower edge ───────── */
/* The gradient fills the column's width, rounded, like the builder's and the integrations' plates (gradient.js gives
   every [data-gradient] overflow: hidden, so the corners clip the canvas and the app). */
.f-plate-wrap { padding: 0; }
.f-plate { padding-top: 64px; }
.f-plate, .f-pw-stage, .f-ig-stage { border-radius: var(--f-r-plate); }
/* The grain at full strength, as it was reviewed in the design (its --grain token leaked into gradient.js there). */
.f-page [data-gradient] { --grain: 1; }
/* The desktop: drawn at 1080 wide and scaled to the plate (front.js); the last part fades into the gradient. */
.f-devices { position: relative; width: 100%; height: calc(var(--vis) * var(--z, 1) * 1px); --vis: 560;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, rgb(0 0 0 / .2) 100%); mask-image: linear-gradient(180deg, #000 62%, rgb(0 0 0 / .2) 100%); }
.f-dv-stage { position: absolute; top: 0; left: var(--x, 0px); width: 1080px; height: 716px; transform: scale(var(--z, 1)); transform-origin: 0 0; text-align: left; }
.f-glass { position: absolute; padding: 8px; background: rgb(255 255 255 / .2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .42), 0 40px 80px -30px rgb(30 6 40 / .45); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.f-dv-desk { left: 0; top: 0; border-radius: 22px; }
.f-dv-desk .f-dash { width: 1064px; height: 700px; box-shadow: 0 0 0 1px rgba(17, 17, 19, .06); }

/* The plates that hold a screen: the gradient fills the column, the screen sits in it, scaled to fit (script below). */
.f-stage { display: grid; place-items: center; padding: 72px 48px; }
.f-fit { transform-origin: top left; }


/* ───────── The app's home (rebuilt from the dashboard) ───────── */
.f-dash { display: grid; grid-template-columns: 220px 1fr; width: 1040px; height: 660px; overflow: hidden; border-radius: 14px; background: #FAFAFA; box-shadow: 0 0 0 1px rgba(17, 17, 19, .08), 0 2px 6px rgba(0, 0, 0, .05), 0 30px 60px -30px rgba(0, 0, 0, .35); font-size: 13px; color: var(--f-ink); text-align: left; }
.f-dash .f-li { --s: 15px; color: #6B6B73; }

.f-sb { display: flex; flex-direction: column; gap: 2px; min-height: 0; padding: 12px 10px 10px; }
.f-sb-top { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 4px 0 6px; margin-bottom: 6px; }
.f-sb-top b { font: 600 19px/1 var(--sans); letter-spacing: -.04em; }
.f-sb-ws { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 6px; margin-bottom: 10px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .1); }
.f-sb-ws i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font: 600 10px/1 var(--sans); font-style: normal; color: #fff; background: #B8325A; }
.f-sb-ws span { flex: 1; font-weight: 500; }
.f-sb-ws .f-li { --s: 13px; }
.f-sb-it { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 8px; border-radius: 8px; color: var(--f-ink-2); }
.f-sb-it.f-is-on { background: #EFEFF0; color: var(--f-ink); }
.f-sb-it.f-is-on .f-li { color: var(--f-ink); }
.f-sb-g { display: flex; align-items: center; justify-content: space-between; height: 28px; margin-top: 14px; padding: 0 8px; font-size: 11.5px; color: var(--f-mute); }
.f-sb-g .f-li { --s: 12px; }
.f-sb-p { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 8px; color: var(--f-ink-2); white-space: nowrap; overflow: hidden; }
.f-sb-p i { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 4px; font: 500 8.5px/1 var(--sans); font-style: normal; color: var(--f-soft); box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .12); }
.f-sb-c { display: flex; align-items: center; height: 28px; padding: 0 8px; color: var(--f-ink-2); white-space: nowrap; overflow: hidden; }
.f-sb-more { padding: 4px 8px 0; font-size: 11.5px; color: var(--f-soft); text-decoration: underline; text-decoration-color: rgba(17, 17, 19, .25); text-underline-offset: 3px; }
.f-sb-ref { display: flex; align-items: center; gap: 10px; height: 30px; margin-top: auto; padding: 0 6px 0 8px; color: var(--f-soft); }
.f-sb-ref em { margin-left: auto; padding: 3px 7px; border-radius: 999px; font: 500 10px/1 var(--sans); font-style: normal; color: var(--f-soft); background: #EFEFF0; }
/* "Soon" is a live chip, as every page's "Coming soon" (.chip, home.css), at the app's size. */
.f-sb-ref em.chip { height: 18px; padding: 0 7px; color: #fff; background: linear-gradient(100deg, #07081C 0%, #1A1D5A 33%, #3B2A9A 67%, #FE6023 100%); }
.f-sb-me { display: flex; align-items: center; gap: 9px; height: 44px; margin-top: 6px; padding: 0 8px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .08); }
.f-sb-me i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 600 9.5px/1 var(--sans); font-style: normal; color: #fff; background: #5B4BD6; }
.f-sb-me span { display: grid; gap: 2px; flex: 1; }
.f-sb-me b { font-weight: 500; font-size: 12px; line-height: 1.1; }
.f-sb-me small { font-size: 10.5px; line-height: 1.1; color: var(--f-mute); }
.f-sb-me .f-li { --s: 14px; }

.f-mn { position: relative; isolation: isolate; margin: 8px 8px 8px 0; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .07); }
/* The app's own glow: a warm dome rising from the bottom. */
.f-mn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(66% 58% at 50% 104%, #F2421E 0%, #FF7432 26%, #FFAA6A 48%, rgb(255 214 178 / .55) 66%, transparent 80%); }
.f-mn-in { display: grid; gap: 16px; width: 520px; margin: 92px auto 0; }
.f-app-ic { display: block; width: 58px; height: 58px; }
.f-mn-in h2 { margin: 2px 0 4px; font: 600 23px/1.2 var(--sans); letter-spacing: -.035em; }
.f-cmp { display: grid; gap: 14px; padding: 13px 12px 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .1), 0 4px 14px -6px rgba(0, 0, 0, .1); }
.f-cmp p { font-size: 13px; color: #9A9AA2; }
.f-cmp-row { display: flex; align-items: center; gap: 10px; }
.f-cmp-plus { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .12); }
.f-cmp-plus .f-li { --s: 14px; color: var(--f-ink); }
.f-cmp-mode { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.f-cmp-mode .f-li { --s: 12px; }
.f-cmp-send { display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; border-radius: 50%; background: #EFEFF0; }
.f-cmp-send .f-li { --s: 13px; color: #A8A8B0; }
.f-rec { display: grid; gap: 9px; margin-top: 10px; }
.f-rec small { font-size: 11.5px; color: var(--f-mute); }
.f-rec span { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--f-ink-2); }
.f-rec span > .f-li { --s: 15px; color: #8A8A93; }
.f-lg { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 3px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .1); }
.f-lg img, .f-lg svg { display: block; width: 14px; height: 14px; }
.f-sheet { position: absolute; left: 18px; right: 18px; bottom: 0; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px 0 12px; border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .08); }
.f-sheet-tabs { display: flex; align-items: center; gap: 2px; height: 34px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .1); }
.f-sheet-tabs > span { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; color: var(--f-soft); }
.f-sheet-tabs > span:first-child { width: 120px; color: var(--f-mute); }
.f-sheet-tabs > span:first-child .f-li { --s: 13px; color: var(--f-mute); }
.f-sheet-tabs .f-is-on { font-weight: 500; color: var(--f-ink); background: #EFEFF0; }
.f-sheet > b { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13px; }
.f-sheet > b .f-li { --s: 14px; color: var(--f-ink); }

/* ───────── The app at work (front.js) ─────────
   After the reference Endi sent on 2026-11-05: the highlight moves from item to item, a skeleton fills in, a soft halo
   pulses on what just happened, and new things glide into place. The highlights are ink and grey, not orange
   (the UI stays neutral; the orange is the plate's). With reduced motion none of these classes are ever set. */
@keyframes f-halo { from { box-shadow: 0 0 0 0 rgb(17 17 19 / .22); } to { box-shadow: 0 0 0 10px rgb(17 17 19 / 0); } }
@keyframes f-halo-tile { from { box-shadow: inset 0 0 0 1px rgb(17 17 19 / .3), 0 0 0 0 rgb(17 17 19 / .2); } to { box-shadow: inset 0 0 0 1px rgb(17 17 19 / .12), 0 0 0 6px rgb(17 17 19 / 0); } }
@keyframes f-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes f-caret { 50% { opacity: 0; } }

/* The composer: the placeholder steps aside, the sentence types in behind a caret, and the rim darkens a little. */
.f-cmp { transition: box-shadow .45s ease; }
.f-cmp.f-is-on { box-shadow: 0 0 0 1px rgba(17, 17, 19, .22), 0 0 0 4px rgba(17, 17, 19, .045), 0 8px 20px -8px rgba(0, 0, 0, .16); }
.f-cmp-tx { position: relative; height: 16px; line-height: 16px; white-space: nowrap; }
.f-cmp-ph { display: block; transition: opacity .25s ease; }
.f-cmp.f-is-on .f-cmp-ph { opacity: 0; }
.f-cmp-ty { position: absolute; left: 0; top: 0; color: var(--f-ink); transition: opacity .35s ease, translate .45s var(--f-ease); }
.f-cmp.f-is-on .f-cmp-ty::after { content: ""; display: inline-block; width: 1.5px; height: 15px; margin-left: 1px; vertical-align: -3px; background: var(--f-ink); animation: f-caret 1s steps(1) infinite; }
.f-cmp-ty.f-is-sent { opacity: 0; translate: 0 -8px; }
/* Send: grey until there is something to send, then ink with a halo, then a press. */
.f-cmp-send { position: relative; transition: background-color .3s ease, scale .14s ease; }
.f-cmp-send .f-li { transition: color .3s ease; }
.f-cmp-send.f-is-ready { background: var(--f-ink); }
.f-cmp-send.f-is-ready .f-li { color: #fff; }
.f-cmp-send.f-is-ready::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: f-halo 1.4s ease-out infinite; }
.f-cmp-send.f-is-press { scale: .86; }

/* Recommended: a soft tile under the row being looked at, its icon in ink and an arrow at the end; a press before it
   is picked. */
.f-rec > span { position: relative; z-index: 0; }
.f-rec > span::before { content: ""; position: absolute; inset: -6px -10px; z-index: -1; border-radius: 9px; background: #F6F6F7; box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .06); opacity: 0; scale: .985; transition: opacity .35s ease, scale .5s var(--f-ease); }
.f-rec > span > .f-li:first-child { transition: color .3s ease; }
.f-rec .f-rec-go { margin-left: auto; opacity: 0; translate: -4px 0; transition: opacity .3s ease, translate .45s var(--f-ease); }
.f-rec > span.f-is-hot::before { opacity: 1; scale: 1; }
.f-rec > span.f-is-hot > .f-li:first-child, .f-rec > span.f-is-hot .f-rec-go { color: var(--f-ink); }
.f-rec > span.f-is-hot .f-rec-go { opacity: 1; translate: 0 0; }
.f-rec > span.f-is-press::before { scale: .97; transition-duration: .12s; }

/* The sidebar's projects: a new one opens in at the top while the last one closes, so the list keeps its height. It
   comes in as a skeleton with a spinner, then shows its name and a New tag, with a halo round its tile. */
.f-sb-list { display: flex; flex-direction: column; gap: 2px; }
.f-sb-p { border-radius: 8px; transition: height .6s var(--f-ease), margin .6s var(--f-ease), opacity .45s ease, background-color 1s ease; }
.f-sb-p.f-is-shut { height: 0; margin-bottom: -2px; opacity: 0; }
.f-sb-p.f-is-hi { background: #EFEFF0; transition-duration: .6s, .6s, .45s, .25s; }
.f-sb-n { position: relative; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: color .4s ease; }
.f-sk { position: absolute; left: 0; top: 50%; width: 76%; height: 8px; margin-top: -4px; border-radius: 4px; background: linear-gradient(90deg, #E9E9EC 30%, #F7F7F8 50%, #E9E9EC 70%) 0 0 / 300% 100%; opacity: 0; transition: opacity .3s ease; }
.f-sb-tag { position: relative; display: grid; place-items: center; flex: none; min-width: 14px; height: 16px; font: 500 10px/1 var(--sans); font-style: normal; color: var(--f-soft); }
.f-sb-tag span { padding: 3px 6px; border-radius: 999px; background: #EFEFF0; opacity: 0; scale: .8; transition: opacity .35s ease, scale .5s var(--f-ease); }
.f-spin { position: absolute; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgb(17 17 19 / .14); border-top-color: var(--f-ink-2); opacity: 0; transition: opacity .25s ease; }
.f-sb-p.f-is-busy .f-sb-n { color: transparent; }
.f-sb-p.f-is-busy .f-sk { opacity: 1; animation: f-shimmer 1.3s linear infinite; }
.f-sb-p.f-is-busy .f-spin { opacity: 1; animation: f-spin .8s linear infinite; }
.f-sb-p.f-is-done .f-sb-tag span { opacity: 1; scale: 1; }
.f-sb-p.f-is-done > i { animation: f-halo-tile 1.3s ease-out 2; }

/* ───────── Sections ───────── */
.f-sec { padding: 96px 24px; }
.f-sec-head { display: grid; gap: 14px; max-width: 620px; margin-bottom: 48px; }
.f-sec-head.f-is-c { justify-items: center; margin-inline: auto; text-align: center; }
.f-eyebrow { font-size: 14px; color: var(--f-mute); }
.f-sec-head h2 { font: 500 clamp(32px, 3.8vw, 46px)/1.06 var(--sans); letter-spacing: -.04em; text-wrap: balance; }
.f-sec-head p { font-size: 17px; line-height: 1.5; color: var(--f-soft); text-wrap: pretty; }
.f-sec.f-is-lead { padding-bottom: 72px; }
.f-sec.f-is-lead .f-sec-head { margin-bottom: 0; }

/* The ticks in the Features drawings */
.f-na-ck { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; color: #fff; background: var(--f-ink); }
.f-na-ck .f-li { --s: 10px; --sw: 2.6; }

/* ───────── Why Flinter (Why.astro): the card with the big mark ─────────
   Between the hero's orange plate and How it works' purple one, so the two colours don't meet (Endi, 2026-11-05). After
   Endi's reference: a grey card, the words on its left, and on its right the Flinter mark, big, rising out of the card's
   top and cut off by its bottom edge (.f-wyb-art clips only below). Still, and drawn in lines on white ("no need to move
   here and maybe not that black just lines"); the white keeps the card's top edge from showing through the ears. The
   versions before: Desktop/Flinter Website/versions/why-*-2026-11-05/. */
.f-wyb-sec { padding: 196px 0 0; }
.f-wyb { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: 380px; border-radius: var(--f-r-plate); background: var(--f-grey); }
.f-wyb-tx { display: grid; gap: 18px; padding: 64px 24px 64px 64px; }
.f-wyb-tx h2 { font: 500 clamp(30px, 3.3vw, 42px)/1.06 var(--sans); letter-spacing: -.04em; color: var(--f-ink); text-wrap: balance; }
.f-wyb-tx p { max-width: 480px; font-size: 17px; line-height: 1.6; color: var(--f-soft); text-wrap: pretty; }
.f-wyb-art { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; clip-path: inset(-260px -120px 0 -120px); pointer-events: none; }
.f-wyb-mark { position: absolute; right: 8%; bottom: -70px; display: block; width: min(520px, 92%); height: auto; overflow: visible;
  filter: drop-shadow(0 22px 40px rgba(17, 17, 19, .06)); }
/* Dashed, as a drawing in progress (Endi: "with dotted or separated lines") */
.f-wyb-mark > * { fill: #fff; stroke: rgba(17, 17, 19, .28); stroke-width: 1.5px; stroke-dasharray: 7 5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
@media (max-width: 900px) {
  .f-wyb-tx { padding: 48px 16px 48px 40px; }
  .f-wyb-mark { right: 4%; bottom: -56px; width: min(420px, 96%); }
}
@media (max-width: 700px) {
  .f-wyb-sec { padding-top: 72px; }
  .f-wyb { grid-template-columns: minmax(0, 1fr); align-items: start; min-height: 0; border-radius: var(--f-r-cell); }
  .f-wyb-tx { gap: 12px; padding: 32px 24px 0; }
  .f-wyb-tx p { font-size: 16px; }
  .f-wyb-art { position: relative; width: auto; height: 250px; clip-path: inset(0 0 0 0 round 0 0 var(--f-r-cell) var(--f-r-cell)); }
  .f-wyb-mark { right: auto; left: 50%; bottom: -46px; width: 270px; translate: -50% 0; }
}

/* ───────── How it works (Builder.astro): a row of pages, the prompt under them, and the four steps ─────────
   Each prompt is typed and sent, and the row slides to the pages it changes (--f, the card it looks at, front.js),
   which lift while they change. front.js sets each card's state: f-is-in (arrived), f-is-copy (words, not grey bars),
   f-is-photo (pictures in), f-is-green (the second prompt's style), f-is-lit (changing now), f-is-live, f-is-out (the
   loop ending). f-snap jumps to a moment without transitions. */
.f-pw-stage { padding: 0; }
.f-pw { --ez: cubic-bezier(.65, 0, .35, 1); --wf: #ECECEF; --wf-2: #DCDCE1; position: relative; height: max(500px, calc(700px * var(--z, 1))); }
.f-pw.f-snap, .f-pw.f-snap * { transition: none !important; }
/* The row, drawn for a 1184-wide plate and scaled to this one (--z); it fades out behind the prompt. */
.f-pw-world { position: absolute; top: 0; left: 0; width: calc(100% / var(--z, 1)); height: 700px; transform: scale(var(--z, 1)); transform-origin: 0 0;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 95%); mask-image: linear-gradient(180deg, #000 62%, transparent 95%); }
.f-pw-track { position: absolute; top: 56px; left: 50%; display: flex; gap: 28px; transform: translateX(calc(var(--f, 1.5) * -328px - 150px)); transition: transform 1.6s var(--ez); }
.f-pw-card { position: relative; flex: none; width: 300px; height: 620px; overflow: hidden; border-radius: 14px; background-color: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 19, .06), 0 2px 6px rgba(0, 0, 0, .05), 0 30px 60px -30px rgba(20, 10, 60, .45);
  opacity: 0; translate: 90px 0; filter: blur(6px);
  transition: opacity .8s var(--f-ease), translate 1.2s var(--f-ease), filter .8s var(--f-ease), box-shadow .6s, background-color 1.1s; }
.f-pw-card.f-is-in { opacity: 1; translate: none; filter: none; }
.f-pw-card.f-is-lit { translate: 0 -14px; box-shadow: 0 0 0 2px #fff, 0 0 0 7px rgb(255 255 255 / .24), 0 44px 70px -28px rgba(20, 10, 60, .6); }
.f-pw-card.f-is-out { opacity: 0; translate: 0 24px; filter: blur(6px); }
.f-pw-card.f-is-green { background-color: #F6F0E4; }

/* Each card's address bar: the page's path, and a tag for what just happened to it */
.f-pw-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 8px 0 11px; border-bottom: 1px solid var(--f-line); background: #fff; }
.f-pw-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #C4C4CA; transition: background .4s, box-shadow .4s; }
.f-pw-card.f-is-live .f-pw-dot { background: var(--f-ok); box-shadow: 0 0 0 3px rgb(18 161 80 / .16); }
.f-pw-url { font: 400 10.5px/1 var(--mono); color: var(--f-mute); white-space: nowrap; }
.f-pw-url b { font-weight: 400; color: var(--f-ink-2); }
.f-pw-tag { margin-left: auto; height: 18px; padding: 0 7px; border-radius: 999px; font: 500 10px/18px var(--sans); font-style: normal; white-space: nowrap; color: var(--f-ink); background: #EFEFF0; opacity: 0; scale: .8; transition: opacity .3s, scale .45s var(--f-ease); }
.f-pw-tag.f-is-on { opacity: 1; scale: 1; }
.f-pw-tag.f-is-new { color: #fff; background: var(--f-ink); }
.f-pw-tag.f-is-live { color: #0E7A3D; background: rgb(18 161 80 / .1); }

/* ── The pages, drawn 640 wide and shown at 300. Before "copy" every line (.t) is a grey bar and before "photo" every
   picture (.ph) is a grey block, so a page lands as a wireframe and fills in. The second prompt's style (f-is-green)
   is the page's three colours: cream ground, green buttons, a warmer tint. ── */
.f-pg-page { --pg-bg: #fff; --pg-ac: #1E1814; --pg-tint: #F6F2EC; --pg-line: rgb(30 24 20 / .09);
  width: 640px; transform: scale(.46875); transform-origin: 0 0; background-color: var(--pg-bg); color: #1E1814; font-size: 13px; line-height: 1.4; transition: background-color .8s; }
.f-pw-card.f-is-green .f-pg-page { --pg-bg: #F6F0E4; --pg-ac: #2C4A34; --pg-tint: #EAE0CC; --pg-line: rgb(44 74 52 / .14); }
.f-pg-page .t { -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color .5s, background-color .7s, box-shadow .5s; }
.f-pw-card:not(.f-is-copy) .t { color: transparent !important; background-color: var(--wf) !important; box-shadow: none !important; border-radius: 6px; }
.f-pw-card:not(.f-is-copy) :is(.ph, .f-pg-pay) .t { background-color: var(--wf-2) !important; }
.f-pw-card:not(.f-is-copy) .f-pg-pay { background-color: var(--wf); }
.f-pg-page .ph { position: relative; display: block; overflow: hidden; background-color: var(--wf); }
.f-pg-page .ph img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: blur(14px); scale: 1.08; transition: opacity .7s, filter .9s, scale 1.2s var(--f-ease); }
.f-pw-card.f-is-photo .ph img { opacity: 1; filter: none; scale: 1; }

.f-pg-nav { display: flex; align-items: center; gap: 20px; height: 62px; padding: 0 16px 0 24px; }
.f-pg-nav b { margin-right: auto; font: 400 25px/1 var(--serif); }
.f-pg-nav span { font-size: 13px; color: #6B625B; }
.f-pg-nav em { padding: 9px 15px; border-radius: 999px; font: 500 13px/1 var(--sans); font-style: normal; color: #fff; background-color: var(--pg-ac); }
/* The third prompt's page joins every nav */
.f-pg-nav-new { display: none; }
.f-has-classes .f-pg-nav-new { display: inline; }

.f-pg-hero { height: 340px; margin: 0 14px; border-radius: 12px; }
.f-pg-hero::before, .f-pg-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .8s; }
.f-pg-hero::before { background: linear-gradient(90deg, rgb(20 12 6 / .62), transparent 72%); }
.f-pg-hero::after { background: linear-gradient(90deg, rgb(22 44 28 / .7), transparent 76%); }
.f-pw-card.f-is-photo .f-pg-hero::before, .f-pw-card.f-is-green.f-is-photo .f-pg-hero::after { opacity: 1; }
.f-pg-hero > div { position: absolute; z-index: 2; left: 30px; bottom: 30px; display: grid; justify-items: start; gap: 14px; color: #fff; }
.f-pg-page .f-pg-hl { font: 400 54px/.98 var(--serif); letter-spacing: -.015em; }
.f-pg-hero small { font-size: 13.5px; color: rgb(255 255 255 / .86); }
.f-pg-hero em { margin-top: 6px; padding: 11px 17px; border-radius: 999px; font: 500 13px/1 var(--sans); font-style: normal; color: #1E1814; background-color: #fff; }

.f-pg-h { display: flex; align-items: baseline; justify-content: space-between; padding: 38px 28px 16px; }
.f-pg-h b { font: 400 32px/1 var(--serif); }
.f-pg-h span { font-size: 13px; color: #6B625B; text-decoration: underline; text-underline-offset: 3px; }
.f-pg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 14px; }
.f-pg-cards > span { display: grid; justify-items: start; gap: 6px; }
.f-pg-cards .ph { width: 100%; height: 176px; margin-bottom: 6px; border-radius: 10px; }
.f-pg-cards b { font: 400 19px/1.1 var(--serif); }
.f-pg-cards small { font: 400 12px/1 var(--mono); color: #6B625B; }
.f-pg-story { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; padding: 44px 28px; }
.f-pg-story .ph { height: 250px; border-radius: 10px; }
.f-pg-story div { display: grid; justify-items: start; gap: 14px; }
.f-pg-story b { font: 400 32px/1.02 var(--serif); }
.f-pg-story p { font-size: 13.5px; line-height: 1.6; color: #6B625B; }

.f-pg-title { display: grid; justify-items: start; gap: 12px; padding: 40px 28px 22px; }
.f-pg-title b { font: 400 56px/.95 var(--serif); letter-spacing: -.015em; }
.f-pg-title p { font-size: 14px; color: #6B625B; }
.f-pg-wide + .f-pg-title { padding-top: 32px; }
.f-pg-pills { display: flex; gap: 8px; padding: 0 28px 18px; }
.f-pg-pills > * { padding: 9px 15px; border-radius: 999px; font-size: 13px; font-style: normal; color: #3D352E; box-shadow: inset 0 0 0 1px rgb(30 24 20 / .14); }
.f-pg-pills em { color: #fff; background-color: var(--pg-ac); box-shadow: none; }
.f-pg-rows { display: grid; margin: 0 28px; }
.f-pg-rows > span { display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--pg-line); transition: border-color .8s; }
.f-pg-rows .ph { width: 52px; height: 52px; border-radius: 8px; }
.f-pg-rows > span > span:not(.ph) { display: grid; justify-items: start; gap: 5px; }
.f-pg-rows b { font: 400 19px/1.1 var(--serif); }
.f-pg-rows small { font-size: 12.5px; color: #8B827A; }
.f-pg-rows em { font: 400 13px/1 var(--mono); font-style: normal; color: #3D352E; }
.f-pg-ord em { padding: 8px 12px; border-radius: 999px; white-space: pre; box-shadow: inset 0 0 0 1px rgb(30 24 20 / .14); }
.f-pg-dates > span { grid-template-columns: 1fr auto; padding: 16px 0; }
.f-pg-dates b { font-size: 21px; }
.f-pg-dates em { padding: 10px 18px; border-radius: 999px; font: 500 13px/1 var(--sans); color: #fff; background-color: var(--pg-ac); }
.f-pg-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 14px 0; }
.f-pg-duo .ph { height: 220px; border-radius: 10px; }
.f-pg-wide { height: 270px; margin: 0 14px; border-radius: 12px; }
.f-pg-visit { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 0 28px; }
.f-pg-hrs { display: grid; align-content: start; }
.f-pg-hrs > span { display: flex; justify-content: space-between; gap: 10px; padding: 13px 0; border-top: 1px solid var(--pg-line); font-size: 13px; transition: border-color .8s; }
.f-pg-hrs em { font: 400 12px/1.3 var(--mono); font-style: normal; color: #6B625B; }
.f-pg-map { height: 210px; border-radius: 10px; transition: background-color .8s; }
.f-pw-card.f-is-photo .f-pg-map { background-color: #EEE8DF; }
.f-pw-card.f-is-green.f-is-photo .f-pg-map { background-color: #DCE2D1; }
.f-pg-map > * { opacity: 0; transition: opacity .7s .2s; }
.f-pw-card.f-is-photo .f-pg-map > * { opacity: 1; }
.f-pg-map svg { display: block; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; }
.f-pg-map i { position: absolute; left: 41%; top: 36%; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; rotate: -45deg; background-color: var(--pg-ac); box-shadow: 0 0 0 5px rgb(30 24 20 / .14); transition: background-color .8s; }
.f-pg-slots { display: flex; align-items: center; gap: 8px; padding: 22px 28px 0; }
.f-pg-slots small { margin-right: 6px; font-size: 13px; color: #6B625B; }
.f-pg-slots > span, .f-pg-slots > em { padding: 9px 13px; border-radius: 8px; font: 400 12.5px/1 var(--mono); font-style: normal; box-shadow: inset 0 0 0 1px rgb(30 24 20 / .14); }
.f-pg-slots > em { color: #fff; background-color: var(--pg-ac); box-shadow: none; }
.f-pg-pay { display: grid; gap: 14px; margin: 24px 14px 0; padding: 20px 18px; border-radius: 12px; background-color: var(--pg-tint); transition: background-color .8s; }
.f-pg-pay > span { display: flex; align-items: baseline; justify-content: space-between; font-size: 14px; }
.f-pg-pay b { font: 400 30px/1 var(--serif); }
.f-pg-pay em { display: grid; place-items: center; height: 46px; border-radius: 999px; font: 500 14px/1 var(--sans); font-style: normal; color: #fff; background-color: var(--pg-ac); }

/* ── The prompt, at its real size, in a glass rim like the hero's app (.f-glass). Over the input, a strip that opens
   once the first prompt is sent: the mark, what Flinter is doing, and a chip for each page the prompt touches (f-is-on),
   waiting, then busy (a spinner), then done (ink) or live (green). ── */
.f-pw-ask { position: absolute; left: 50%; bottom: 32px; z-index: 2; width: min(720px, calc(100% - 32px)); translate: -50% 0; padding: 6px; border-radius: 26px; text-align: left; color: var(--f-ink);
  background: rgb(255 255 255 / .22); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5), 0 40px 80px -30px rgb(30 6 40 / .55);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); transition: background-color .4s, box-shadow .4s; }
.f-pw-ask.f-typing { background-color: rgb(255 255 255 / .36); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), 0 0 0 6px rgb(255 255 255 / .1), 0 40px 80px -30px rgb(30 6 40 / .55); }
.f-pw-face { overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .06), 0 10px 28px -14px rgba(0, 0, 0, .2); }

.f-pw-st { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--f-ease); }
.f-pw-st > div { min-height: 0; overflow: hidden; }
.f-pw-st.f-is-on { grid-template-rows: 1fr; }
.f-pw-st p { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--f-line); font-size: 14px; color: var(--f-soft); background: #FAFAFA; white-space: nowrap; }
/* The mark is the live agent (agent.js, played by front.js); its ears sit above the body, so it is lifted to centre the body on the line. */
.f-pw-mk { flex: none; width: 22px; translate: 0 -2px; }
.f-pw-mk svg { display: block; width: 100%; height: auto; overflow: visible; }
.f-pw-st p { overflow: hidden; }
.f-pw-st-tx { display: inline-block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.f-pw-st-tx.f-is-new { animation: f-pw-in .5s var(--f-ease); }
.f-pw-chips { display: flex; gap: 6px; margin-left: auto; }
.f-pw-chip { display: none; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 7px; border-radius: 999px; font: 500 12.5px/1 var(--sans); color: var(--f-mute); background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .1); transition: color .3s, box-shadow .3s; }
.f-pw-chip.f-is-on { display: inline-flex; animation: f-pw-in .5s var(--f-ease) backwards; }
.f-pw-chip > i { position: relative; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(17, 17, 19, .14); transition: background .3s, box-shadow .3s; }
.f-pw-chip .f-li { --s: 9px; --sw: 2.8; opacity: 0; scale: .5; transition: opacity .25s, scale .4s var(--f-ease); }
.f-pw-chip.f-is-busy { color: var(--f-ink); box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .22); }
.f-pw-chip.f-is-busy > i::after { content: ""; position: absolute; inset: 0; border: 1.5px solid transparent; border-top-color: var(--f-ink); border-radius: 50%; animation: f-hw-spin .8s linear infinite; }
.f-pw-chip:is(.f-is-done, .f-is-live) { color: var(--f-ink); }
.f-pw-chip.f-is-done > i { background: var(--f-ink); box-shadow: none; }
.f-pw-chip.f-is-live > i { background: var(--f-ok); box-shadow: none; }
.f-pw-chip:is(.f-is-done, .f-is-live) .f-li { opacity: 1; scale: 1; }

.f-pw-box { display: grid; gap: 16px; padding: 18px 14px 14px 20px; }
.f-pw-tx { display: grid; min-height: 52px; padding-right: 6px; font-size: 18px; line-height: 26px; letter-spacing: -.012em; }
.f-pw-tx > * { grid-area: 1 / 1; }
.f-pw-ph { color: #9A9AA2; transition: opacity .25s; }
.f-pw-ask.f-has .f-pw-ph { opacity: 0; }
.f-pw-ty { color: var(--f-ink); transition: opacity .4s, translate .5s var(--f-ease), filter .4s; }
.f-pw-ty.f-is-sent { opacity: 0; translate: 0 -10px; filter: blur(3px); }
.f-pw-ask.f-typing .f-pw-ty::after { content: ""; display: inline-block; width: 2px; height: 1.15em; margin-left: 2px; vertical-align: -.2em; border-radius: 1px; background: var(--f-ink); animation: f-hw-blink 1s steps(1) infinite; }
.f-pw-row { display: flex; align-items: center; gap: 8px; }
.f-pw-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; height: 36px; padding: 0 9px; border-radius: 999px; font: 500 14px/1 var(--sans); color: var(--f-ink-2); box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .12); }
.f-pw-tool .f-li { --s: 16px; }
.f-pw-mode { padding: 0 12px 0 14px; }
.f-pw-mode .f-li { --s: 13px; color: var(--f-mute); }
.f-pw-send { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border-radius: 50%; color: #A8A8B0; background: #EFEFF0; transition: background .3s, color .3s; }
.f-pw-send .f-li { --s: 18px; --sw: 2; }
.f-pw-ask.f-is-ready .f-pw-send { color: #fff; background: var(--f-ink); }
.f-pw-send.f-is-press { animation: f-hw-press .4s var(--f-ease); }

/* ── The four steps under the plate: the current one's bar fills as it plays (--p, front.js) ──
   No lines between or above them, and no track: only the playing step shows its bar, rounded and inset to its text,
   as it fills. */
.f-hw-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 12px auto 0; padding: 0; list-style: none; }
.f-hw-step { position: relative; display: grid; align-content: start; gap: 6px; width: 100%; height: 100%; padding: 28px 24px 30px; border: 0; border-radius: 14px; font: inherit; text-align: left; color: inherit; background: none; cursor: pointer; }
.f-hw-step small { margin-bottom: 10px; font: 400 12px/1 var(--mono); color: var(--f-mute); }
.f-hw-step b { font: 500 16px/1.25 var(--sans); letter-spacing: -.015em; color: var(--f-soft); transition: color .3s; }
.f-hw-step span { font-size: 14px; line-height: 1.5; color: var(--f-mute); text-wrap: pretty; transition: color .3s; }
.f-hw-step:hover b, .f-hw-step[aria-current] b { color: var(--f-ink); }
.f-hw-step[aria-current] span { color: var(--f-soft); }
.f-hw-step[aria-current] small { color: var(--f-ink); }
.f-hw-step:focus-visible { outline: 2px solid var(--f-ink); outline-offset: -2px; }
.f-hw-bar { position: absolute; top: 8px; left: 24px; right: 24px; height: 2px; overflow: hidden; border-radius: 2px; }
.f-hw-bar::after { content: ""; position: absolute; inset: 0; background: var(--f-ink); transform: scaleX(var(--p, 0)); transform-origin: left; }
.f-hw-step:not([aria-current]) .f-hw-bar::after { transform: scaleX(0); }

@keyframes f-hw-spin { to { rotate: 1turn; } }
@keyframes f-hw-blink { 50% { opacity: 0; } }
@keyframes f-hw-press { 40% { scale: .9; } }
@keyframes f-pw-in { from { opacity: 0; translate: 0 5px; filter: blur(2px); } }

/* ───────── Bento: seven features, sized by how much they matter ───────── */
/* Six columns (Features.astro): the two big features (f-is-xl: the database, analytics) take four, payments and SEO
   (f-is-md) two, and the last row (f-is-sm: AI, agents, versions) is shorter. Those first four are the ones Endi wants
   pushed (2026-11-05), so each gets three points under its text. Every cell's text is the same size. The big cells get a
   faint dot grid behind their drawing. Each drawing plays its feature at work (front.js, "The features at work"); the
   classes it moves between are below, next to each drawing. */
/* The column's full width. No hairline grid: each cell is its own rounded card in a very light cool grey (--f-grey),
   with white between them. */
.f-bento { --f-cell: var(--f-grey); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
/* (.f-page ul's reset would otherwise pull it to the left, off the column) */
.f-page .f-bento { margin: 0 auto; }
.f-cell { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--f-r-cell); background: var(--f-cell); }
.f-cell.f-is-xl { grid-column: span 4; }
.f-cell.f-is-md, .f-cell.f-is-sm { grid-column: span 2; }
.f-cell-art { position: relative; display: grid; place-items: center; height: 384px; overflow: hidden; container-type: inline-size; }
.f-cell.f-is-sm .f-cell-art { height: 268px; }
.f-cell.f-is-xl .f-cell-art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(rgba(17, 17, 19, .16) 1px, transparent 1.4px) 50% 50% / 16px 16px;
  mask-image: radial-gradient(closest-side, #000 20%, transparent); -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent);
}
.f-cell-art > * { position: relative; }
.f-cell .f-tx { display: grid; gap: 6px; align-content: start; padding: 0 28px 28px; }
.f-cell h3 { font: 500 18px/1.3 var(--sans); letter-spacing: -.015em; color: var(--f-ink); }
.f-cell p { max-width: 520px; font-size: 15px; line-height: 1.5; color: var(--f-soft); text-wrap: pretty; }
.f-ft-pts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 6px !important; }
.f-ft-pts li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--f-ink-2); }
.f-ft-pts .f-li { --s: 14px; --sw: 2.2; color: var(--f-ink); }

/* The drawings: white windows with a hairline and a soft shadow, as the nav's. */
.f-na-win { display: block; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .08), 0 1px 2px rgba(0, 0, 0, .04), 0 12px 28px -14px rgba(0, 0, 0, .18); }
/* One typeface everywhere (Endi): addresses, emails, prices and counts are Geist too, with even-width digits so the
   numbers still line up. (The class keeps its old name.) */
.f-na-mono { font-family: var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.f-cell-art img { display: block; object-fit: cover; }
/* Shared: a typed line's caret, a pressed button, a row that opens or closes, a message coming in. */
.f-ft-caret { display: inline-block; width: 1px; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: var(--f-ink); opacity: 0; }
.f-is-typing .f-ft-caret { opacity: 1; animation: f-caret 1s step-end infinite; }
.f-ft-btn, .f-ft-apple, .f-ft-send, .f-ft-v-rs { transition: scale .15s ease, background-color .25s, color .25s; }
.f-cell .f-is-press { scale: .95; }
.f-ft-enter { animation: f-ft-enter .5s var(--f-ease) both; }
@keyframes f-ft-enter { from { opacity: 0; translate: 0 8px; filter: blur(3px); } }
@keyframes f-ft-bump { 40% { scale: 1.08; } }
@keyframes f-ft-travel { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes f-ft-flash { 0% { background: #EDEDEF; box-shadow: inset 0 0 0 1.5px var(--f-ink); } 100% { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(17, 17, 19, 0); } }
@keyframes f-ft-dot { 0%, 60%, 100% { opacity: .3; translate: 0 0; } 30% { opacity: 1; translate: 0 -2px; } }
@keyframes f-ft-ping { from { opacity: .5; scale: 1; } to { opacity: 0; scale: 2.6; } }
@keyframes na-breathe { 50% { opacity: .35; } }

/* 1 · Accounts and a database. The email types in, Create account spins, a dot runs down the wire, and the person's
   row opens at the top of Users as a skeleton, then fills (f-is-busy → f-is-hi), while the last row closes. */
.f-ft-auth { display: flex; align-items: center; }
.f-ft-join { width: 236px; flex: none; }
.f-ft-bar { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-bottom: 1px solid var(--f-line); background: #FAFAFA; }
.f-ft-bar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(17, 17, 19, .12); }
.f-ft-bar span { margin-left: 7px; font-size: 9.5px; color: var(--f-mute); }
.f-ft-join-b { display: grid; gap: 8px; padding: 16px; }
.f-ft-join-h { font: 500 14px/1.2 var(--sans); letter-spacing: -.015em; color: var(--f-ink); }
.f-ft-join-s { margin-top: -3px; font-size: 10.5px; color: var(--f-mute); }
.f-ft-field { display: grid; gap: 5px; margin-top: 4px; }
.f-ft-field small { font-size: 10px; color: var(--f-mute); }
.f-ft-in { display: flex; align-items: center; height: 30px; padding: 0 9px; border-radius: 8px; font-size: 11px; color: var(--f-ink-2); box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .1); transition: box-shadow .25s; }
.f-ft-field.f-is-typing .f-ft-in { box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .4), 0 0 0 3px rgba(17, 17, 19, .06); }
.f-ft-btn, .f-ft-apple { position: relative; display: grid; place-items: center; height: 32px; border-radius: 8px; font: 500 11px/1 var(--sans); color: #fff; background: var(--f-ink); }
.f-ft-btn > *, .f-ft-apple > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; transition: opacity .25s, translate .4s var(--f-ease); }
.f-ft-btn .f-spin, .f-ft-apple .f-spin { position: static; border-color: rgba(255, 255, 255, .25); border-top-color: #fff; }
.f-ft-btn-b, .f-ft-apple-b { opacity: 0; translate: 0 6px; }
.f-ft-btn-b .f-li, .f-ft-apple-b .f-li { --s: 12px; --sw: 2.4; }
.f-is-busy > .f-ft-btn-a, .f-is-busy > .f-ft-apple-a { opacity: 0; }
.f-is-busy > .f-spin { opacity: 1; animation: f-spin .8s linear infinite; }
.f-is-ok > .f-ft-btn-a, .f-is-ok > .f-ft-apple-a { opacity: 0; translate: 0 -6px; }
.f-is-ok > .f-ft-btn-b, .f-is-ok > .f-ft-apple-b { opacity: 1; translate: none; }
.f-ft-wire { position: relative; flex: none; align-self: center; width: 64px; height: 1px; background: linear-gradient(90deg, rgba(17, 17, 19, .25) 50%, transparent 0) 0 0 / 6px 1px repeat-x; }
.f-ft-wire::before, .f-ft-wire::after { content: ""; position: absolute; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(17, 17, 19, .25); }
.f-ft-wire::before { left: -3px; }
.f-ft-wire::after { right: -3px; }
.f-ft-wire i { position: absolute; top: 0; left: 0; z-index: 1; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--f-ink); box-shadow: 0 0 0 4px rgba(17, 17, 19, .1); opacity: 0; }
.f-ft-wire.f-is-go i { animation: f-ft-travel .75s var(--f-ease) both; }
.f-ft-db { width: 352px; flex: none; }
.f-ft-db-top { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 12px; border-bottom: 1px solid var(--f-line); }
.f-ft-tabs { display: flex; align-items: center; gap: 14px; font-size: 11px; color: var(--f-mute); }
.f-ft-tabs b { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--f-ink); }
.f-ft-n { padding: 3px 6px; border-radius: 999px; font-size: 9.5px; font-style: normal; color: var(--f-soft); background: rgba(17, 17, 19, .06); transition: background-color .3s, color .3s; }
.f-ft-n.f-is-up { color: #fff; background: var(--f-ink); animation: f-ft-bump .5s var(--f-ease); }
.f-ft-db-ic .f-li { --s: 14px; color: var(--f-mute); }
.f-ft-db-rows { display: flex; flex-direction: column; }
.f-ft-db-row { position: relative; display: grid; grid-template-columns: 116px minmax(0, 1fr) 30px; align-items: center; gap: 10px; flex: none; height: 36px; padding: 0 12px; overflow: hidden; font-size: 10.5px; color: var(--f-ink-2); border-top: 1px solid rgba(17, 17, 19, .05); transition: height .6s var(--f-ease), opacity .45s ease, background-color 1s ease; }
.f-ft-db-row.f-is-h { height: 28px; border-top: 0; font-size: 10px; color: var(--f-mute); }
.f-ft-db-row > * { transition: opacity .35s ease; }
.f-ft-db-row .f-na-mono { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; color: var(--f-soft); }
.f-ft-db-row time { text-align: right; font-size: 10px; color: var(--f-mute); }
.f-ft-db-row.f-is-new time { font-weight: 500; color: var(--f-ink); }
.f-ft-who { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; }
.f-ft-who img { flex: none; width: 18px; height: 18px; border-radius: 50%; }
.f-ft-db-row::after { content: ""; position: absolute; left: 12px; top: 50%; width: 62%; height: 8px; margin-top: -4px; border-radius: 4px; background: linear-gradient(90deg, #E9E9EC 30%, #F7F7F8 50%, #E9E9EC 70%) 0 0 / 300% 100%; opacity: 0; transition: opacity .3s ease; }
.f-ft-db-row.f-is-busy > * { opacity: 0; }
.f-ft-db-row.f-is-busy::after { opacity: 1; animation: f-shimmer 1.3s linear infinite; }
.f-ft-db-row.f-is-hi, .f-ft-p.f-is-hi, .f-ft-v.f-is-hi { background: #F2F2F3; transition-duration: .6s, .45s, .25s; }
.f-ft-db-row.f-is-shut, .f-ft-p.f-is-shut, .f-ft-v.f-is-shut { height: 0; opacity: 0; border-top-color: transparent; }

/* 2 · Payments. The item changes, Pay is pressed and spins, says Paid, and the payment opens at the top of Today while
   the total counts up. */
.f-ft-pay { display: grid; gap: 10px; width: 258px; }
.f-ft-co { display: grid; gap: 7px; padding: 12px; }
.f-ft-co-item { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 3px; border-bottom: 1px solid var(--f-line); }
.f-ft-co-item > * { transition: opacity .3s ease, translate .45s var(--f-ease); }
.f-ft-co-item.f-is-swap > * { opacity: 0; translate: 0 4px; }
.f-ft-co-img { flex: none; width: 34px; height: 34px; overflow: hidden; border-radius: 8px; }
.f-ft-co-img img { width: 100%; height: 100%; }
.f-ft-co-tx { display: grid; gap: 4px; flex: 1; min-width: 0; }
.f-ft-co-tx b { font: 500 11.5px/1.1 var(--sans); color: var(--f-ink); white-space: nowrap; }
.f-ft-co-tx small { font-size: 10px; color: var(--f-mute); }
.f-ft-co-item em { font-size: 11px; font-style: normal; color: var(--f-ink); }
.f-ft-apple { font-size: 11.5px; background: #000; }
.f-ft-apple .f-fill { --s: 13px; }
.f-ft-card { display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border-radius: 8px; font: 500 11px/1 var(--sans); color: var(--f-ink-2); box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .12); }
.f-ft-card .f-li { --s: 14px; color: var(--f-mute); }
.f-ft-today { padding: 12px 0 4px; }
.f-ft-today-h { display: flex; align-items: baseline; gap: 8px; padding: 0 12px 10px; border-bottom: 1px solid var(--f-line); }
.f-ft-today-h small { font-size: 10px; color: var(--f-mute); }
.f-ft-sum { display: inline-block; font-size: 16px; font-weight: 500; letter-spacing: -.03em; color: var(--f-ink); }
.f-ft-sum.f-is-up { animation: f-ft-bump .5s var(--f-ease); }
.f-ft-today-h em { margin-left: auto; font-size: 10px; font-style: normal; color: var(--f-mute); }
.f-ft-pays { display: flex; flex-direction: column; }
.f-ft-p { display: flex; align-items: center; gap: 8px; flex: none; height: 32px; padding: 0 12px; overflow: hidden; font-size: 10.5px; color: var(--f-ink-2); border-top: 1px solid rgba(17, 17, 19, .05); transition: height .6s var(--f-ease), opacity .45s ease, background-color 1s ease; }
.f-ft-p:first-child { border-top-color: transparent; }
.f-ft-p img { flex: none; width: 18px; height: 18px; border-radius: 50%; }
.f-ft-p small { flex: 1; font-size: 10px; color: var(--f-mute); }
.f-ft-p em { font-size: 10.5px; font-style: normal; color: var(--f-ink); }
.f-ft-p.f-is-new em { font-weight: 500; }

/* 5 · AI in your app (short row). A question types in and is sent, three dots, then the answer comes in word by word,
   sometimes with a button. The thread slides up as it grows (front.js moves .f-ft-ai-feed). */
.f-ft-ai { display: flex; flex-direction: column; }
.f-ft-ai-h { display: flex; align-items: center; gap: 9px; flex: none; padding: 9px 12px; border-bottom: 1px solid var(--f-line); }
.f-ft-ai-av { flex: none; width: 24px; height: 24px; overflow: hidden; border-radius: 50%; }
.f-ft-ai-av img { width: 100%; height: 100%; }
.f-ft-ai-h > span:last-child { display: grid; gap: 4px; }
.f-ft-ai-h b { font: 500 11.5px/1 var(--sans); color: var(--f-ink); }
.f-ft-ai-h small { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; color: var(--f-mute); }
.f-ft-ai-h small i { width: 5px; height: 5px; border-radius: 50%; background: var(--f-ok); }
.f-ft-ai-log { display: flex; flex-direction: column; justify-content: flex-end; flex: 1; min-height: 0; padding: 0 12px 10px; overflow: hidden; mask-image: linear-gradient(transparent, #000 36px); -webkit-mask-image: linear-gradient(transparent, #000 36px); }
.f-ft-ai-feed { display: flex; flex-direction: column; gap: 8px; }
.f-ft-q { align-self: flex-end; max-width: 82%; padding: 7px 10px; border-radius: 12px 12px 4px 12px; font-size: 11px; line-height: 1.35; color: var(--f-ink); background: #F1F1F2; }
.f-ft-a { display: flex; gap: 7px; max-width: 94%; font-size: 11px; line-height: 1.45; color: var(--f-ink-2); }
.f-ft-a > .f-li { --s: 12px; margin-top: 2px; color: var(--f-ink); }
.f-ft-act { align-self: flex-start; margin-left: 19px; padding: 6px 10px; border-radius: 999px; font: 500 10.5px/1 var(--sans); color: var(--f-ink); box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .14); }
.f-ft-dots { display: inline-flex; align-items: center; gap: 3px; height: 16px; }
.f-ft-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--f-soft); animation: f-ft-dot 1s ease-in-out infinite; }
.f-ft-dots i:nth-child(2) { animation-delay: .15s; }
.f-ft-dots i:nth-child(3) { animation-delay: .3s; }
.f-ft-ai-in { display: flex; align-items: center; gap: 8px; flex: none; height: 34px; margin: 0 8px 8px; padding: 0 5px 0 12px; border-radius: 10px; font-size: 11px; color: var(--f-ink); box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .12); transition: box-shadow .25s; }
.f-ft-ai-in.f-is-typing { box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .4), 0 0 0 3px rgba(17, 17, 19, .06); }
.f-ft-in-tx { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.f-ft-ph { color: var(--f-mute); }
.f-ft-ai-in.f-has-tx .f-ft-ph { display: none; }
.f-ft-send { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; color: var(--f-mute); background: #F1F1F2; }
.f-ft-send .f-li { --s: 13px; --sw: 2; }
.f-ft-send.f-is-ready { color: #fff; background: var(--f-ink); }

/* 3 · SEO. A search types in, the page comes up (its lines one after another), and the panel under it fills in what
   Flinter set for that page, row by row, each with a green tick. */
.f-ft-sx { display: grid; gap: 10px; width: 262px; }
.f-ft-seo { display: grid; gap: 12px; padding: 12px; }
.f-ft-seo-q { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 11px; color: var(--f-ink); box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .12); transition: box-shadow .25s; }
.f-ft-seo-q.f-is-typing { box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .4), 0 0 0 3px rgba(17, 17, 19, .06); }
.f-ft-seo-q .f-li { --s: 13px; color: var(--f-mute); }
.f-ft-res { position: relative; display: grid; align-content: start; gap: 5px; padding: 0 4px 2px; }
.f-ft-res > * { transition: opacity .4s ease, translate .5s var(--f-ease); }
.f-ft-res > :nth-child(2) { transition-delay: .08s; }
.f-ft-res > :nth-child(3) { transition-delay: .16s; }
.f-ft-res.f-is-off > * { opacity: 0; translate: 0 5px; transition-delay: 0s; }
.f-ft-res::after {
  content: ""; position: absolute; inset: 1px 4px; opacity: 0; transition: opacity .3s ease; pointer-events: none;
  background:
    linear-gradient(#EDEDEF 0 0) 0 2px / 46% 8px no-repeat, linear-gradient(#EDEDEF 0 0) 0 21px / 78% 10px no-repeat,
    linear-gradient(#F2F2F3 0 0) 0 41px / 96% 7px no-repeat, linear-gradient(#F2F2F3 0 0) 0 55px / 64% 7px no-repeat;
}
.f-ft-res.f-is-off::after { opacity: 1; }
.f-ft-res-u { display: flex; align-items: center; gap: 6px; font-size: 9.5px; color: var(--f-soft); }
.f-ft-res-u small { color: var(--f-mute); }
.f-ft-fav { flex: none; width: 16px; height: 16px; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 1px rgba(17, 17, 19, .08); }
.f-ft-fav img { width: 100%; height: 100%; }
.f-ft-res-t { font: 500 12.5px/1.25 var(--sans); letter-spacing: -.01em; color: var(--f-ink); }
.f-ft-res-d { font-size: 10.5px; line-height: 1.45; color: var(--f-soft); }
.f-ft-meta { padding-bottom: 4px; }
.f-ft-meta-h { display: flex; align-items: baseline; justify-content: space-between; padding: 11px 12px 9px; border-bottom: 1px solid var(--f-line); }
.f-ft-meta-h b { font: 500 11.5px/1 var(--sans); color: var(--f-ink); }
.f-ft-meta-h small { font-size: 10px; color: var(--f-mute); }
.f-ft-mrs { display: grid; padding: 4px 6px; }
.f-ft-mr { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr) 14px; align-items: center; gap: 8px; height: 30px; padding: 0 6px; border-radius: 7px; font-size: 10.5px; color: var(--f-ink-2); transition: background-color .3s; }
.f-ft-mr + .f-ft-mr::before { content: ""; position: absolute; top: 0; left: 6px; right: 6px; height: 1px; background: rgba(17, 17, 19, .05); }
.f-ft-mr small { font-size: 10px; color: var(--f-mute); }
.f-ft-mr > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: opacity .3s; }
.f-ft-mr .f-li { --s: 12px; --sw: 2.4; color: var(--f-ok); opacity: 0; scale: .4; transition: opacity .25s, scale .45s var(--f-ease); }
.f-ft-mr::after { content: ""; position: absolute; left: 80px; top: 50%; width: 50%; height: 7px; margin-top: -3.5px; border-radius: 4px; background: #F0F0F1; opacity: 0; transition: opacity .3s; }
.f-ft-mr.f-is-off > span { opacity: 0; }
.f-ft-mr.f-is-off::after { opacity: 1; }
.f-ft-mr.f-is-hot { background: #F5F5F6; }
.f-ft-mr.f-is-ok .f-li { opacity: 1; scale: 1; }

/* 4 · Analytics and heatmaps. The pointer moves over the bakery's page and clicks; each click warms its spot on the
   heatmap, a dot runs down the wire and its row on the right counts it. Then the switch moves to Scroll: the click heat
   fades, the scroll map comes in and the fold line drops to where 64% of people stop. The heat is one blue, light to
   dark (the dataviz rule: sequential is one hue, with a key), never a rainbow and never orange. The page is drawn at a
   fixed 300 × 262 so the clicks' coordinates (Features.astro, front.js) land on its buttons. */
.f-ft-hm { display: flex; align-items: center; }
.f-ft-site { flex: none; width: 300px; }
.f-ft-bar .f-ft-mode { position: relative; display: flex; margin-left: auto; padding: 2px; border-radius: 6px; background: rgba(17, 17, 19, .06); }
.f-ft-mode::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: 40px; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 .5px rgba(17, 17, 19, .08); transition: translate .45s var(--f-ease); }
.f-ft-mode b { position: relative; width: 40px; padding: 3px 0; text-align: center; font: 500 9px/1 var(--sans); color: var(--f-mute); transition: color .3s; }
.f-ft-hm:not(.f-is-scroll) .f-ft-mode b:first-child, .f-ft-hm.f-is-scroll .f-ft-mode b:last-child { color: var(--f-ink); }
.f-ft-hm.f-is-scroll .f-ft-mode::before { translate: 40px 0; }
.f-ft-pg { position: relative; display: block; height: 262px; overflow: hidden; }
.f-ft-pg > * { position: absolute; }
.f-ft-pg-nav { left: 12px; right: 12px; top: 0; height: 30px; }
.f-ft-pg-nav > * { position: absolute; top: 50%; translate: 0 -50%; }
.f-ft-pg-nav b { left: 0; font: 600 10px/1 var(--sans); letter-spacing: -.01em; color: var(--f-ink); }
.f-ft-pg-menu, .f-ft-pg-visit { width: 34px; text-align: center; font-size: 9.5px; line-height: 1; color: var(--f-soft); }
.f-ft-pg-menu { left: 148px; }
.f-ft-pg-visit { left: 184px; }
.f-ft-pg-nav em { right: 0; width: 46px; height: 18px; border-radius: 5px; text-align: center; font: 500 9px/18px var(--sans); font-style: normal; color: #fff; background: var(--f-ink); }
.f-ft-pg-hero { left: 12px; top: 30px; width: 276px; height: 82px; overflow: hidden; border-radius: 8px; }
.f-ft-pg-hero img { width: 100%; height: 100%; }
.f-ft-pg-h { left: 12px; top: 121px; font: 500 12.5px/1.2 var(--sans); letter-spacing: -.015em; white-space: nowrap; color: var(--f-ink); }
.f-ft-pg-s { left: 12px; top: 140px; font-size: 9.5px; line-height: 1.2; white-space: nowrap; color: var(--f-mute); }
.f-ft-pg-cta, .f-ft-pg-alt { top: 160px; display: grid; place-items: center; height: 24px; border-radius: 6px; font: 500 9.5px/1 var(--sans); }
.f-ft-pg-cta { left: 12px; width: 96px; color: #fff; background: var(--f-ink); }
.f-ft-pg-alt { left: 114px; width: 78px; color: var(--f-ink-2); box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .14); }
.f-ft-pg-cards { left: 12px; top: 196px; display: grid; grid-template-columns: repeat(3, 88px); gap: 6px; }
.f-ft-pg-cards > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 4px; }
.f-ft-pg-cards img { grid-column: 1 / -1; width: 100%; height: 40px; border-radius: 6px; }
.f-ft-pg-cards b { font: 500 9.5px/1 var(--sans); color: var(--f-ink); }
.f-ft-pg-cards small { font-size: 9px; color: var(--f-mute); }
.f-ft-heat { left: 0; top: 0; width: 300px; height: 262px; overflow: visible; pointer-events: none; transition: opacity .6s ease; }
.f-ft-hm.f-is-scroll .f-ft-heat { opacity: 0; }
.f-ft-smap { inset: 0; opacity: 0; transition: opacity .6s ease; background: linear-gradient(rgba(28, 92, 171, .5), rgba(57, 135, 229, .36) 38%, rgba(134, 182, 239, .28) 62%, rgba(205, 226, 251, .2) 86%, rgba(205, 226, 251, .1)); }
.f-ft-hm.f-is-scroll .f-ft-smap { opacity: 1; }
.f-ft-fold { position: absolute; left: 0; right: 0; top: 0; border-top: 1.5px dashed var(--f-ink); transition: top 1.3s var(--f-ease); }
.f-ft-fold em { position: absolute; right: 8px; top: 0; translate: 0 -50%; padding: 4px 7px; border-radius: 999px; font: 500 9px/1 var(--sans); font-style: normal; white-space: nowrap; color: #fff; background: var(--f-ink); }
.f-ft-hm.f-is-scroll .f-ft-fold { top: 62%; transition-delay: .25s; }
.f-ft-cur { left: 0; top: 0; z-index: 2; width: 12px; height: 16px; margin: -1px 0 0 -1px; opacity: 0; transform-origin: 1px 1px; transition: translate .8s var(--f-ease), opacity .3s ease, scale .15s ease; }
.f-ft-cur.f-is-on { opacity: 1; }
.f-ft-cur svg { display: block; width: 12px; height: 16px; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .25)); }
.f-ft-cur path { fill: var(--f-ink); stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.f-ft-cur i { position: absolute; left: 1px; top: 1px; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--f-ink); opacity: 0; }
.f-ft-cur.f-is-click i { animation: f-ft-ripple .6s ease-out; }
.f-cell .f-ft-cur.f-is-press { scale: .86; }
@keyframes f-ft-ripple { from { opacity: .7; scale: .3; } to { opacity: 0; scale: 1.3; } }
.f-ft-key { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-top: 1px solid var(--f-line); font-size: 9.5px; color: var(--f-mute); }
.f-ft-key small { margin-right: auto; font-size: 9.5px; font-weight: 500; color: var(--f-soft); }
.f-ft-key-s, .f-ft-hm.f-is-scroll .f-ft-key-c { display: none; }
.f-ft-hm.f-is-scroll .f-ft-key-s { display: inline; }
.f-ft-key i { width: 64px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #CDE2FB, #86B6EF, #3987E5, #256ABF, #184F95); }
.f-ft-ins { flex: none; width: 272px; }
.f-ft-ins-h { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 12px; border-bottom: 1px solid var(--f-line); }
.f-ft-ins-h b { font: 500 11.5px/1 var(--sans); color: var(--f-ink); }
.f-ft-ins-h small { font-size: 10px; color: var(--f-mute); }
.f-ft-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 6px; border-bottom: 1px solid var(--f-line); }
.f-ft-kpis > span { display: grid; gap: 5px; padding: 5px 6px; border-radius: 7px; transition: background-color .4s; }
.f-ft-kpis small { font-size: 9.5px; white-space: nowrap; color: var(--f-mute); }
.f-ft-kpis b { justify-self: start; font-size: 15px; font-weight: 500; letter-spacing: -.02em; color: var(--f-ink); }
.f-ft-kpis b.f-is-up { animation: f-ft-bump .5s var(--f-ease); }
.f-ft-kpis > .f-is-hi { background: rgba(57, 135, 229, .12); }
.f-ft-tops { display: grid; gap: 2px; padding: 10px 8px 10px; }
.f-ft-cap { padding: 0 4px 4px; font-size: 9.5px; color: var(--f-mute); }
.f-ft-top { position: relative; z-index: 0; display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 8px; font-size: 10.5px; color: var(--f-ink-2); }
.f-ft-top::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--w); border-radius: 6px; background: rgba(57, 135, 229, .1); transition: width .6s var(--f-ease), background-color .35s; }
.f-ft-top em { font-size: 10px; font-style: normal; color: var(--f-soft); transition: color .3s; }
.f-ft-top.f-is-hi::before { background: rgba(57, 135, 229, .22); }
.f-ft-top.f-is-hi em { font-weight: 500; color: var(--f-ink); }
.f-ft-src { display: grid; gap: 8px; margin: 0 12px; padding: 11px 0 12px; border-top: 1px solid var(--f-line); }
.f-ft-src-bar { display: flex; gap: 2px; height: 6px; }
.f-ft-src-bar i { width: var(--w); border-radius: 3px; transition: width .9s var(--f-ease); }
.f-ft-src-bar i:nth-child(1), .f-ft-src-l span:nth-child(1) i { background: var(--f-ink); }
.f-ft-src-bar i:nth-child(2), .f-ft-src-l span:nth-child(2) i { background: rgba(17, 17, 19, .42); }
.f-ft-src-bar i:nth-child(3), .f-ft-src-l span:nth-child(3) i { background: rgba(17, 17, 19, .14); }
.f-ft-src-l { display: flex; gap: 12px; font-size: 9.5px; color: var(--f-soft); }
.f-ft-src-l span { display: inline-flex; align-items: center; gap: 5px; }
.f-ft-src-l i { width: 6px; height: 6px; border-radius: 2px; }

/* The short row's three windows are one size, so they sit level (Endi): the same width and height, each filling it. */
.f-ft-ai, .f-ft-ag, .f-ft-ver { box-sizing: border-box; width: 282px; height: 208px; }

/* 6 · Agents (short row). The morning run checks off its steps, each with the run's clock, then says Done. */
.f-ft-ag { display: flex; flex-direction: column; }
.f-ft-run-h { display: flex; align-items: center; gap: 10px; flex: none; padding: 10px 12px; border-bottom: 1px solid var(--f-line); }
.f-ft-run-ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; color: #fff; background: var(--f-ink); }
.f-ft-run-ic .f-li { --s: 14px; }
.f-ft-run-t { display: grid; gap: 4px; flex: 1; min-width: 0; }
.f-ft-run-t b { font: 500 12.5px/1 var(--sans); letter-spacing: -.01em; color: var(--f-ink); }
.f-ft-run-t small { font-size: 10px; color: var(--f-mute); }
.f-ft-state { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; font: 500 10px/1 var(--sans); font-style: normal; color: var(--f-ink-2); background: rgba(17, 17, 19, .06); transition: color .3s, background-color .3s; }
.f-ft-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--f-ink); animation: na-breathe 1.6s ease-in-out infinite; }
.f-ft-state-b { display: none; }
.f-ft-ag.f-is-done .f-ft-state { color: #0E7A3E; background: #E5F5EB; }
.f-ft-ag.f-is-done .f-ft-state i { background: var(--f-ok); animation: none; }
.f-ft-ag.f-is-done .f-ft-state-a { display: none; }
.f-ft-ag.f-is-done .f-ft-state-b { display: inline; }
.f-ft-steps { display: grid; align-content: center; flex: 1; padding: 4px 6px; }
.f-ft-step { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 8px; border-radius: 8px; font-size: 11.5px; color: var(--f-mute); transition: color .3s, background-color .3s; }
.f-ft-step > span { flex: 1; }
.f-ft-step img { width: 14px; height: 14px; object-fit: contain; opacity: .45; transition: opacity .3s; }
.f-ft-step time { width: 26px; text-align: right; font-size: 10px; color: var(--f-mute); visibility: hidden; }
.f-ft-mk { position: relative; display: grid; place-items: center; flex: none; width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(17, 17, 19, .16); transition: background-color .3s, box-shadow .3s; }
.f-ft-mk .f-spin { left: 0; top: 0; width: 15px; height: 15px; box-sizing: border-box; }
.f-ft-mk .f-li { --s: 9px; --sw: 2.8; color: #fff; opacity: 0; scale: .4; transition: opacity .25s, scale .45s var(--f-ease); }
.f-ft-step.f-is-now { font-weight: 500; color: var(--f-ink); background: #F5F5F6; }
.f-ft-step.f-is-now .f-ft-mk { box-shadow: none; }
.f-ft-step.f-is-now .f-spin { opacity: 1; animation: f-spin .8s linear infinite; }
.f-ft-step.f-is-ok { color: var(--f-ink-2); }
.f-ft-step.f-is-ok .f-ft-mk { background: var(--f-ink); box-shadow: none; }
.f-ft-step.f-is-ok .f-ft-mk .f-li { opacity: 1; scale: 1; }
.f-ft-step.f-is-now img, .f-ft-step.f-is-ok img { opacity: 1; }
.f-ft-step.f-is-now time, .f-ft-step.f-is-ok time { visibility: visible; }
.f-ft-step.f-is-now time { color: var(--f-ink); }

/* 7 · Versions. The highlight rests on an older version, Restore is pressed, and it comes back on top as Current;
   in between, a new change lands on top on its own. */
.f-ft-ver { display: flex; flex-direction: column; padding-bottom: 6px; }
.f-ft-ver-h { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px 10px; border-bottom: 1px solid var(--f-line); }
.f-ft-ver-h b { font: 500 12.5px/1 var(--sans); color: var(--f-ink); }
.f-ft-ver-h small { font-size: 10px; color: var(--f-mute); }
.f-ft-vers { display: flex; flex-direction: column; justify-content: center; flex: 1; padding: 6px; }
.f-ft-v { position: relative; display: flex; align-items: center; gap: 10px; flex: none; height: 48px; padding: 0 8px 0 12px; overflow: hidden; border-radius: 8px; transition: height .6s var(--f-ease), opacity .45s ease, background-color .3s ease; }
/* The timeline: each row draws its half of the line above and below its dot, so it follows rows coming and going. */
.f-ft-v:not(:first-child)::before, .f-ft-v:not(:last-child)::after { content: ""; position: absolute; left: 16px; width: 1px; height: 50%; background: var(--f-line-2); }
.f-ft-v::before { top: 0; }
.f-ft-v::after { bottom: 0; }
.f-ft-v > i { z-index: 1; position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(17, 17, 19, .25); transition: background-color .3s, box-shadow .3s; }
.f-ft-v.f-is-cur > i { background: var(--f-ink); box-shadow: 0 0 0 3px rgba(17, 17, 19, .1); }
.f-ft-v > span { display: grid; gap: 3px; flex: 1; min-width: 0; }
.f-ft-v b { overflow: hidden; font: 500 11px/1.1 var(--sans); white-space: nowrap; text-overflow: ellipsis; color: var(--f-ink-2); }
.f-ft-v small { font-size: 9.5px; color: var(--f-mute); }
.f-ft-v em { display: none; flex: none; padding: 4px 7px; border-radius: 999px; font: 500 9.5px/1 var(--sans); font-style: normal; }
.f-ft-v.f-is-cur .f-ft-v-tag { display: inline-block; color: var(--f-ink); background: rgba(17, 17, 19, .07); }
.f-ft-v-rs { color: #fff; background: var(--f-ink); }
.f-ft-v.f-is-hot { background: #F2F2F3; }
.f-ft-v.f-is-hot .f-ft-v-rs { display: inline-block; animation: f-ft-enter .35s var(--f-ease) both; }

/* The two big drawings in narrower cells: tighter, then (phones) one window above the other, the wire upright. */
@container (max-width: 700px) {
  .f-ft-wire { width: 36px; }
  .f-ft-db { width: 316px; }
  .f-ft-db-row { grid-template-columns: 104px minmax(0, 1fr) 30px; }
  .f-ft-ins { width: 252px; }
}
@container (max-width: 620px) {
  .f-ft-auth, .f-ft-hm { zoom: .92; }
}
@container (max-width: 560px) {
  .f-ft-auth, .f-ft-hm { flex-direction: column; gap: 0; zoom: 1; }
  .f-ft-wire { width: 1px; height: 30px; background: linear-gradient(rgba(17, 17, 19, .25) 50%, transparent 0) 0 0 / 1px 6px repeat-y; }
  .f-ft-wire::before { top: -3px; left: -2.5px; }
  .f-ft-wire::after { top: auto; bottom: -3px; left: -2.5px; right: auto; }
  .f-ft-wire.f-is-go i { animation-name: f-ft-travel-y; }
  .f-ft-db { width: min(352px, 94cqw); }
  .f-ft-ins { width: 300px; }
}
@keyframes f-ft-travel-y { 0% { top: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* ───────── Integrations (Tools.astro): a prompt floating above the wires of the tools it connects ─────────
   After the "Connect your favourite tools" card Endi sent on 2026-11-05, in the site's own look: the Night plate (the
   gradient of every "Coming soon" chip), white glass cards like the suggestion cards, ink for emphasis, green only
   for connected, white light on the wires. In the middle, the prompt floats above the wires: the mark, the sentence and
   send on a white face in a glass rim, and the dark tray of connected apps tucked under it.
   front.js ("Integrations at work") sets the states: f-is-hot (being connected), f-is-busy (the spinner), f-is-on
   (connected), f-is-go (light running along a wire), f-is-flare / f-is-typing / f-is-ready (the prompt), f-is-press
   (send). f-is-sm is the phone drawing. */
.f-sec-link { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 2px; font-size: 15px; font-weight: 500; color: var(--f-ink); }
.f-sec-link .f-li { --s: 15px; --sw: 1.8; transition: transform .25s var(--f-ease); }
.f-sec-link:hover .f-li { transform: translateX(3px); }

.f-ig { --glass: linear-gradient(180deg, rgb(255 255 255 / .95), rgb(255 255 255 / .84));
  --rim: inset 0 0 0 1px rgb(255 255 255 / .7), 0 0 0 .5px rgb(17 17 19 / .2);
  position: relative; width: 1080px; height: 448px; text-align: left; color: var(--f-ink); }
.f-is-sm .f-ig { width: 360px; height: 496px; }

/* The wires: thin white lines, light running out along one when it connects (f-ig-run, outward from the mark), and
   now and then a faint spark coming in (f-ig-amb), each wire at its own time (--d). */
.f-ig-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.f-ig-svg-sm, .f-is-sm .f-ig-svg-lg { display: none; }
.f-is-sm .f-ig-svg-sm { display: block; }
.f-ig-w { fill: none; stroke: rgb(255 255 255 / .2); stroke-width: 1.2; transition: stroke .7s ease, stroke-width .7s ease; }
.f-ig-w.f-is-on { stroke: rgb(255 255 255 / .72); stroke-width: 1.5; }
.f-ig-run, .f-ig-amb { fill: none; stroke-linecap: round; }
.f-ig-run { stroke: #fff; stroke-width: 2.6; stroke-dasharray: 16 100; stroke-dashoffset: 16; opacity: 0; }
.f-ig-run.f-is-go { animation: f-ig-run .85s cubic-bezier(.45, 0, .2, 1) forwards; }
.f-ig-amb { stroke: rgb(255 255 255 / .55); stroke-width: 1.3; stroke-dasharray: 7 100; stroke-dashoffset: -100; animation: f-ig-amb 8s linear var(--d, 0s) infinite; }
.f-ig-sock { fill: #10122E; stroke: rgb(255 255 255 / .4); stroke-width: 1; transition: fill .5s, stroke .5s; }
.f-ig-sock.f-is-on { fill: #fff; stroke: #fff; }
@keyframes f-ig-run { 0% { stroke-dashoffset: 16; opacity: 1; } 80% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes f-ig-amb { 0% { stroke-dashoffset: -100; } 20%, 100% { stroke-dashoffset: 7; } }

/* The cards (left) and the pills (right): white glass, the logo on a white tile with a hairline. */
.f-ig-card, .f-ig-pill { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center;
  background: var(--glass); box-shadow: var(--rim), 0 18px 36px -18px rgb(4 5 30 / .75);
  -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
  transition: box-shadow .5s ease, translate .6s var(--f-ease); }
.f-is-sm .f-ig-card, .f-is-sm .f-ig-pill { left: var(--sx); top: var(--sy); }
.f-ig-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px rgb(17 17 19 / .08), 0 2px 6px -2px rgb(17 17 19 / .12); }
.f-ig-ic img { display: block; width: 22px; height: 22px; object-fit: contain; }
.f-ig-card { gap: 12px; width: 210px; height: 60px; padding: 0 13px 0 11px; border-radius: 17px; }
.f-ig-card b { flex: 1; font: 500 16px/1 var(--sans); letter-spacing: -.02em; color: var(--f-ink); }
/* Being connected: a white halo, and the card leans toward its wire. */
.f-ig-card.f-is-hot, .f-ig-pill.f-is-hot {
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgb(255 255 255 / .9), 0 0 0 5px rgb(255 255 255 / .16), 0 0 40px -6px rgb(255 255 255 / .55); }
.f-ig-card.f-is-hot { translate: 4px 0; }
.f-ig-pill.f-is-hot { translate: -4px 0; }
.f-is-sm .f-ig-pill.f-is-hot { translate: 3px 0; }
.f-is-sm .f-ig-card.f-is-hot { translate: -3px 0; }
/* + to connect; a spinner while it connects; an ink tick once it is. */
.f-ig-add { position: relative; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; color: var(--f-ink-2); box-shadow: inset 0 0 0 1px rgb(17 17 19 / .14); transition: background-color .3s, color .3s, box-shadow .3s; }
.f-ig-add > .f-li { grid-area: 1 / 1; --s: 14px; --sw: 2; transition: opacity .25s, scale .45s var(--f-ease); }
.f-ig-add > .f-li + .f-li { --sw: 2.4; opacity: 0; scale: .4; }
.f-ig-add .f-spin { width: 14px; height: 14px; }
.f-ig-card.f-is-busy .f-ig-add > .f-li:first-child, .f-ig-card.f-is-on .f-ig-add > .f-li:first-child { opacity: 0; scale: .4; }
.f-ig-card.f-is-busy .f-spin { opacity: 1; animation: f-spin .8s linear infinite; }
.f-ig-card.f-is-on:not(.f-is-busy) .f-ig-add { color: #fff; background: var(--f-ink); box-shadow: none; }
.f-ig-card.f-is-on:not(.f-is-busy) .f-ig-add > .f-li + .f-li { opacity: 1; scale: 1; }
.f-ig-pill { gap: 10px; width: 172px; height: 40px; padding: 0 13px 0 6px; border-radius: 12px; }
.f-ig-pill .f-ig-ic { width: 28px; height: 28px; border-radius: 8px; }
.f-ig-pill .f-ig-ic img { width: 16px; height: 16px; }
.f-ig-pill b { flex: 1; min-width: 0; font: 500 13px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; color: var(--f-ink-2); }
.f-ig-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgb(17 17 19 / .16); transition: background-color .4s, box-shadow .4s; }
.f-ig-pill.f-is-on .f-ig-dot { background: var(--f-ok); box-shadow: 0 0 0 3px rgb(18 161 80 / .16); }

/* The prompt: it floats (a slow bob) above the wires, which run in under it. A soft white glow behind flares when a
   sentence is sent. */
.f-ig-ask { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 392px; animation: f-ig-float 7s ease-in-out infinite; }
.f-is-sm .f-ig-ask { left: var(--sx); top: var(--sy); width: 332px; }
.f-ig-glow { position: absolute; inset: -60px -40px; z-index: -1; border-radius: 50%; opacity: .5; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 255 255 / .3), rgb(196 180 255 / .12) 55%, transparent); transition: opacity .7s ease, scale .9s var(--f-ease); }
.f-ig-ask.f-is-flare .f-ig-glow { opacity: 1; scale: 1.1; }
.f-ig-ask-rim { position: relative; z-index: 2; padding: 5px; border-radius: 22px;
  background: linear-gradient(180deg, rgb(255 255 255 / .55), rgb(255 255 255 / .28) 45%, rgb(190 196 220 / .4));
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4), 0 30px 60px -22px rgb(4 5 30 / .8); transition: box-shadow .5s ease; }
.f-ig-ask.f-is-flare .f-ig-ask-rim { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), 0 0 0 6px rgb(255 255 255 / .12), 0 30px 60px -22px rgb(4 5 30 / .8); }
.f-ig-ask-face { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 9px 9px 12px; border-radius: 17px; background: rgb(251 251 252 / .97); box-shadow: 0 0 0 1px rgb(255 255 255 / .9); }
.f-ig-ask-mk { flex: none; width: 22px; height: 22px; }
.f-ig-ask-tx { flex: 1; min-width: 0; margin: 0; font: 400 15px/1.4 var(--sans); letter-spacing: -.012em; color: var(--f-ink); white-space: nowrap; overflow: hidden; }
.f-ig-ask-tx:empty::before { content: "Ask Flinter to connect anything…"; color: #8A8F99; }
.f-ig-ask.f-is-typing .f-ig-ask-tx::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -.18em; background: var(--f-ink); animation: f-caret 1s steps(1) infinite; }
.f-ig-ask.f-is-typing .f-ig-ask-tx:empty::before { margin-right: -1.5px; }
.f-ig-ask.f-is-sent .f-ig-ask-tx { opacity: 0; translate: 0 -8px; }
.f-ig-ask-tx { transition: opacity .35s ease, translate .45s var(--f-ease); }
/* Send: grey while typing, ink once there is a sentence, a press when it goes. */
.f-ig-ask-go { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; color: #A8A8B0; background: #EFEFF0; transition: background-color .3s, color .3s, scale .14s ease; }
.f-ig-ask-go .f-li { --s: 17px; --sw: 1.9; }
.f-ig-ask:not(.f-is-typing) .f-ig-ask-tx:not(:empty) + .f-ig-ask-go, .f-ig-ask.f-is-ready .f-ig-ask-go { color: #fff; background: var(--f-ink); }
.f-ig-ask-go.f-is-press { scale: .88; }
/* The tray: dark, tucked under the face, the apps connected so far as chips, the newest first. */
.f-ig-tray { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; height: 50px; margin: -14px 16px 0; padding: 14px 8px 0 14px;
  border-radius: 0 0 18px 18px; font: 500 12.5px/1 var(--sans); color: rgb(255 255 255 / .92);
  background: linear-gradient(180deg, rgb(22 24 30 / .94), rgb(44 48 56 / .92)); box-shadow: 0 20px 40px -20px rgb(4 5 30 / .8); }
.f-ig-tray-lead { display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap; }
.f-ig-tray-lead .f-li { --s: 15px; color: rgb(255 255 255 / .8); }
.f-ig-tray-sep { flex: none; width: 1px; height: 14px; background: rgb(255 255 255 / .22); }
.f-ig-chips { display: flex; flex: 1; gap: 6px; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.f-ig-chip { display: none; align-items: center; gap: 6px; flex: none; height: 24px; padding: 0 8px 0 3px; border-radius: 999px; font: 500 12px/1 var(--sans); color: #fff; white-space: nowrap; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
.f-ig-chip.f-is-on { display: inline-flex; }
.f-js .f-ig.f-is-seen .f-ig-chip.f-is-on { animation: f-ig-pop .45s var(--f-ease); }
.f-ig-chip > i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.f-ig-chip > i img { width: 11px; height: 11px; object-fit: contain; }
.f-ig-chip > .f-li { --s: 11px; --sw: 2.4; color: #A7E9C6; }
.f-ig-none { color: rgb(255 255 255 / .45); white-space: nowrap; }
.f-ig-chips:has(.f-is-on) .f-ig-none { display: none; }
@keyframes f-ig-float { 50% { translate: 0 -5px; } }
@keyframes f-ig-pop { from { opacity: 0; scale: .7; } }

/* The phone drawing: smaller cards and pills. */
.f-is-sm .f-ig-card { gap: 8px; width: 148px; height: 52px; padding: 0 9px 0 8px; border-radius: 14px; }
.f-is-sm .f-ig-card b { font-size: 14px; }
.f-is-sm .f-ig-card .f-ig-ic { width: 32px; height: 32px; border-radius: 9px; }
.f-is-sm .f-ig-card .f-ig-ic img { width: 18px; height: 18px; }
.f-is-sm .f-ig-add { width: 24px; height: 24px; }
.f-is-sm .f-ig-add > .f-li { --s: 12px; }
.f-is-sm .f-ig-pill { gap: 8px; width: 148px; padding: 0 10px 0 6px; }
.f-is-sm .f-ig-pill .f-ig-ic { width: 26px; height: 26px; }
.f-is-sm .f-ig-pill b { font-size: 11.5px; }
.f-is-sm .f-ig-ask-tx { white-space: normal; font-size: 14.5px; }

/* Off screen, the sparks and the bob wait (front.js sets f-is-seen). */
.f-js .f-ig:not(.f-is-seen) :is(.f-ig-amb, .f-ig-ask) { animation-play-state: paused; }

/* ───────── Questions (home.css's, from Questions.astro) and the close ───────── */
/* A rounded grey plate, set off from the integrations' plate above it. */
.f-faq { margin-top: 24px; padding: 96px 24px; border-radius: var(--f-r-plate); background: var(--f-grey); }
/* In ink and grey like the other sections: home.css gives the eyebrow the flint orange. */
.f-faq .eyebrow { color: var(--f-mute); }
.f-faq .faq-head h2 { font-size: clamp(32px, 3.8vw, 46px); letter-spacing: -.04em; }
/* ───────── The close: a card stepping up out of the footer ───────── */
/* The card is narrower than the footer (home.css's .foot: 12px in, 40px corners), so the footer's shoulders show on
   both sides and inward curves (--f-cl-fil) join the card's foot to them. The live gradient colours the top and a veil
   takes it down to the footer's own black (#0B0B0C) well before the foot, so the seam doesn't show. The footer sits in
   front, and the card rises out from behind it as it comes into view. */
.f-close { --f-cl-ink: #0B0B0C; --f-cl-fil: 28px; --f-cl-r: 32px; position: relative; z-index: 0; width: min(1184px, calc(100% - 24px - 2 * (40px + var(--f-cl-fil)))); margin: 112px auto -1px; }
.is-front .foot { z-index: 1; }
.f-close-card { position: relative; border-radius: var(--f-cl-r) var(--f-cl-r) 0 0; background: var(--f-cl-ink); }
.f-close-card::before, .f-close-card::after { content: ""; position: absolute; bottom: 0; width: var(--f-cl-fil); height: var(--f-cl-fil); pointer-events: none; }
.f-close-card::before { right: 100%; background: radial-gradient(circle at 0 0, transparent calc(var(--f-cl-fil) - .5px), var(--f-cl-ink) var(--f-cl-fil)); }
.f-close-card::after { left: 100%; background: radial-gradient(circle at 100% 0, transparent calc(var(--f-cl-fil) - .5px), var(--f-cl-ink) var(--f-cl-fil)); }
/* .f-close in front: gradient.js's own [data-gradient] rule (position: relative) is added later, at the same weight. */
.f-close .f-close-glow { position: absolute; inset: 0; border-radius: inherit; }
.f-close-glow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 12, .06) 0%, rgba(11, 11, 12, .22) 30%, rgba(11, 11, 12, .72) 58%, rgba(11, 11, 12, .96) 80%, var(--f-cl-ink) 92%); }
.f-close-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; padding: 120px 32px 152px; text-align: center; }
.f-close h2 { font: 500 clamp(34px, 4.2vw, 56px)/1.04 var(--sans); letter-spacing: -.045em; color: #fff; text-wrap: balance; }
.f-close-in > p { max-width: 440px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.f-close .f-ask { margin-top: 14px; width: min(560px, 100%); }
.f-close .f-ask-rim { background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 .5px rgba(255, 255, 255, .22), 0 24px 60px -24px rgba(0, 0, 0, .6); }
.f-close .f-ask:focus-within .f-ask-rim { box-shadow: 0 0 0 .5px rgba(255, 255, 255, .4), 0 0 0 5px rgba(255, 255, 255, .08), 0 24px 60px -24px rgba(0, 0, 0, .6); }
.f-close .f-ask-face { box-shadow: none; }
.f-close .f-ask-msg { color: rgba(255, 255, 255, .5); }
.f-close .f-ask-msg.f-is-bad { color: #FF9C86; }
/* Stepping up: it starts lower, its foot behind the footer, and rises once its lines start coming in. */
.f-js .f-close-card { translate: 0 96px; transition: translate 1.3s var(--f-ease); }
.f-js .f-close-card:has(> .f-in) { translate: none; }
@media (prefers-reduced-motion: reduce) {
  .f-js .f-close-card { translate: none; transition: none; }
}

/* ───────── Coming in: once, as it scrolls into view ───────── */
.f-js .f-rv { opacity: 0; filter: blur(6px); translate: 0 10px; transition: opacity .8s var(--f-ease), filter .8s var(--f-ease), translate .9s var(--f-ease); }
.f-js .f-rv.f-in { opacity: 1; filter: none; translate: none; }
/* Section heads and the close: their lines one after another, 70ms apart (the eyebrow, the heading, the line, the input). */
.f-js .f-rv-kids > * { opacity: 0; filter: blur(6px); translate: 0 10px; transition: opacity .8s var(--f-ease), filter .8s var(--f-ease), translate .9s var(--f-ease); }
.f-js .f-rv-kids > :nth-child(2) { transition-delay: .07s; }
.f-js .f-rv-kids > :nth-child(3) { transition-delay: .14s; }
.f-js .f-rv-kids > :nth-child(n + 4) { transition-delay: .21s; }
.f-js .f-rv-kids.f-in > * { opacity: 1; filter: none; translate: none; }
@media (prefers-reduced-motion: reduce) {
  .f-js .f-rv, .f-js .f-rv-kids > * { opacity: 1; filter: none; translate: none; transition: none; }
  .f-scene::before { animation: none; }
  .f-ft-state i, .f-ft-dots i { animation: none; }
  .f-pw-chip > i::after, .f-pw-ask.f-typing .f-pw-ty::after { animation: none; }
  .f-ig-amb { display: none; }
  .f-ig-ask { animation: none; }
}

/* ───────── Tablets and phones ───────── */
@media (max-width: 980px) {
  .f-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-cell.f-is-xl, .f-cell.f-is-sm:last-child { grid-column: span 2; }
  .f-cell.f-is-md, .f-cell.f-is-sm { grid-column: span 1; }
  .f-hw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-stage { padding: 48px 28px; }
}
@media (max-width: 640px) {
  :root { --f-gut: 16px; --f-r-plate: 20px; --f-r-cell: 18px; }
  .is-front .hd-shell { padding: 0 16px; }
  .f-head { gap: 18px; padding: 56px 16px 48px; }
  .f-head .f-sub { font-size: 16px; }
  .f-plate { padding-top: 40px; }
  .f-faq { padding: 72px 16px; }
  /* No room for shoulders on a phone: the card takes the footer's width and its square top (home.css: 8px in). */
  .f-close { --f-cl-r: 30px; width: calc(100% - 16px); margin-top: 72px; }
  .f-close-card::before, .f-close-card::after { display: none; }
  .is-front .foot { border-top-left-radius: 0; border-top-right-radius: 0; }
  .f-close-in { padding: 88px 16px 112px; }
  .f-stage { padding: 20px 12px; }
  .f-pw-ask { bottom: 14px; width: calc(100% - 24px); padding: 5px; border-radius: 22px; }
  .f-pw-face { border-radius: 17px; }
  .f-pw-st p { height: 42px; font-size: 13px; }
  .f-pw-chips { display: none; }
  .f-pw-box { gap: 12px; padding: 14px 10px 10px 16px; }
  .f-pw-tx { min-height: 48px; font-size: 16px; line-height: 24px; }
  .f-sec { padding: 72px 16px; }
  .f-sec-head { margin-bottom: 32px; }
  .f-sec-head p { font-size: 16px; }
  .f-bento { grid-template-columns: 1fr; }
  .f-cell.f-is-xl, .f-cell.f-is-md, .f-cell.f-is-sm, .f-cell.f-is-sm:last-child { grid-column: auto; }
  .f-cell-art { height: 360px; }
  .f-cell.f-is-xl .f-cell-art { height: auto; padding: 40px 0; }
  .f-cell.f-is-sm .f-cell-art { height: 256px; }
  .f-cell .f-tx { padding: 0 20px 24px; }
  .f-ft-pts li { font-size: 13.5px; }
  .f-ig-stage { padding: 28px 12px; }
  .f-hw-step { padding: 18px 16px 22px; }
  .f-hw-step small { margin-bottom: 6px; }
  .f-hw-step span { font-size: 13.5px; }
}
/* Narrow phones: the button keeps its words and drops the key, so the field has room. */
@media (max-width: 480px) {
  .f-ask-bar { gap: 8px; padding: 0 6px 0 8px; }
  .f-ask-ic { width: 32px; height: 32px; }
  .f-go { padding: 0 14px; }
  .f-go:not([disabled]) .f-go-ic { display: none; }
}
@media (max-width: 760px) {
  .f-ideas-track { grid-auto-columns: calc((100% - 12px) / 2); }
}
@media (max-width: 520px) {
  .f-ideas-track { grid-auto-columns: 86%; }
}

/* ───────── The buddy (Buddy.astro, buddy.js) ───────── */
/* The Flinter mark, alive, in its orange: on the hero's plate, a bit smaller, then following you down the right side
   as you scroll (buddy.js moves .f-bd-fly: a slide by default, or a skid, a slinky or hops, ?move=; .f-bd-ride carries
   its size, stretch, squash and lean). It stands free on the white, with a soft white halo so its
   orange still reads where a plate passes under it; over the dark parts the halo goes and its ink turns white. Its few
   words sit to its left; tapped, the hero's prompt pops out beside it; dragged, it stretches the way it's pulled, and
   dropped on something it hops out beside it and the big dark card says how that thing helps. Below the nav (z 30),
   so an open menu covers it. Phones don't get it. */
.f-bd { position: fixed; inset: 0; z-index: 29; overflow: hidden; pointer-events: none; font-family: var(--sans); }
.f-bd[hidden] { display: none; }
.f-bd-fly { position: absolute; left: 0; top: 0; width: 86px; height: 86px; transform: translate3d(110vw, 30vh, 0); will-change: transform; }
.f-bd-me, .f-bd-say, .f-bd.f-is-open .f-bd-ask, .f-bd.f-is-big .f-bd-big { pointer-events: auto; }
.f-bd-me { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 24px; background: none; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.f-bd-me::before { content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: 50%; pointer-events: none; transition: opacity .35s;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .94), rgba(255, 255, 255, .72) 52%, rgba(255, 255, 255, 0)); }
.f-bd-me:focus, .f-bd-me:focus-visible { outline: none; }   /* no box round him (Endi) */
.f-bd-ride { display: block; width: 64px; margin-top: 6px; transform-origin: 50% 100%; }
.f-bd-mk { width: 64px; color: var(--f-ink); --ground: rgba(17, 17, 19, .13); }
.f-bd.f-on-dark .f-bd-me::before { opacity: 0; }
.f-bd.f-on-dark .f-bd-mk { color: #fff; --ground: rgba(0, 0, 0, .45); }
.f-bd-mk .sh { display: none; }
/* Its shadow on the ground: it stays put and shrinks as the mark lifts towards you (buddy.js) */
.f-bd-shade { position: absolute; left: 13px; top: 64px; width: 46px; height: 10px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(17, 17, 19, .22), rgba(17, 17, 19, 0)); }
.f-bd.f-on-dark .f-bd-shade { background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }
.f-bd-shade { transition: opacity .25s; }                   /* gone while it sits on something (buddy.js) */
.f-bd.f-is-drag .f-bd-shade { opacity: 0 !important; }
/* The splash where it lands: drops thrown up and out in its orange, and a ring on the ground */
.f-bd-splash { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.f-bd-splash i { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%;
  background: #FE6023; animation: f-bd-drop .62s cubic-bezier(.2, .7, .4, 1) both; }
.f-bd-splash b { position: absolute; left: -24px; top: -5px; width: 48px; height: 10px; border: 1.5px solid rgba(254, 96, 35, .55); border-radius: 50%; animation: f-bd-ring .6s ease-out forwards; }
@keyframes f-bd-drop { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 45% { transform: translate(var(--mx), var(--my)) scale(1); opacity: 1; } 100% { transform: translate(var(--ex), var(--ey)) scale(.2); opacity: 0; } }
@keyframes f-bd-ring { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
/* The skid's speed lines, and the dust where it stops */
.f-bd-streak { position: absolute; left: 0; top: 0; width: 22px; height: 2px; margin: -1px 0 0 -22px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(17, 17, 19, 0), rgba(17, 17, 19, .28)); animation: f-bd-streak .42s ease-out forwards; }
@keyframes f-bd-streak { from { opacity: 1; } to { opacity: 0; translate: -10px 0; scale: .5 1; } }
.f-bd-dust i { background: rgba(17, 17, 19, .14); }
.f-bd.f-on-dark .f-bd-dust i { background: rgba(255, 255, 255, .2); }
/* Only while ?move= is in the address: a switcher to compare how it gets about */
.f-bd-try { position: fixed; left: 16px; bottom: 16px; z-index: 31; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 19, .1), 0 12px 30px -12px rgba(0, 0, 0, .3); font: 500 13px/1 var(--sans); }
.f-bd-try span { padding: 0 8px 0 6px; color: var(--f-mute); }
.f-bd-try button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; color: var(--f-ink-2); background: none; font: inherit; cursor: pointer; }
.f-bd-try button:hover { background: var(--f-plate); }
.f-bd-try button.f-on { color: #fff; background: var(--f-ink); }
/* The big one, in the Why card (buddy.js grows it into the card's mark): no halo or shadow on the ground. As it grows it
   turns into the card's drawing, white with dashed lines (the f-bd-ln layers, faded in by buddy.js), with the
   drawing's soft shadow; the card's own drawing is hidden, so there's only one (f-bd-owns, desktop and tablet only). */
.f-bd.f-is-huge .f-bd-me::before { opacity: 0; transition: none; }
.f-bd-lnb, .f-bd-lne { opacity: 0; stroke: rgba(17, 17, 19, .28); stroke-linecap: round; stroke-linejoin: round; }
.f-bd-lnb { fill: #fff; }
.f-bd-lne { fill: none; }
.f-bd.f-is-lined .f-bd-me { filter: drop-shadow(0 22px 40px rgba(17, 17, 19, .06)); }
@media (min-width: 768px) { .f-wyb.f-bd-owns .f-wyb-mark { visibility: hidden; } }
.f-bd.f-is-drag .f-bd-me { cursor: grabbing; }
.f-bd.f-is-drag .f-bd-me::before { opacity: 0; }
html.f-bd-dragging, html.f-bd-dragging * { cursor: grabbing !important; user-select: none; }

/* A few words, coming in one after another */
.f-bd-say { position: absolute; right: calc(100% - 6px); bottom: 54px; padding: 8px 12px 9px; border-radius: 14px 14px 4px 14px; white-space: nowrap; cursor: pointer;
  font: 500 13.5px/1.2 var(--sans); letter-spacing: -.012em; color: var(--f-ink); background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 19, .08), 0 14px 32px -14px rgba(0, 0, 0, .3), 0 3px 8px -5px rgba(0, 0, 0, .1);
  opacity: 0; translate: 8px 4px; scale: .9; transform-origin: 100% 100%; transition: opacity .2s, translate .45s var(--f-ease), scale .45s var(--f-ease); }
.f-bd-say[hidden] { display: none; }
.f-bd.f-is-saying .f-bd-say { opacity: 1; translate: 0 0; scale: 1; }
.f-bd-say span { display: inline-block; opacity: 0; filter: blur(3px); translate: 0 3px; animation: f-bd-word .45s var(--f-ease) calc(var(--i) * 60ms) forwards; }
@keyframes f-bd-word { to { opacity: 1; filter: blur(0); translate: 0 0; } }
/* on the left of the page (dropped there) its words come out on its right */
.f-bd.f-is-west .f-bd-say { right: auto; left: calc(100% - 6px); border-radius: 14px 14px 14px 4px; translate: -8px 4px; transform-origin: 0 100%; }
.f-bd.f-is-west.f-is-saying .f-bd-say { translate: 0 0; }

/* The prompt: the hero's, popped out beside the mark */
.f-bd-ask { position: absolute; right: calc(100% + 2px); top: 50%; width: min(440px, calc(100vw - 132px)); text-align: left;
  opacity: 0; visibility: hidden; translate: 14px -50%; scale: .9; transform-origin: 100% 50%;
  transition: opacity .18s, translate .3s var(--f-ease), scale .3s var(--f-ease), visibility 0s .3s; }
.f-bd.f-is-open .f-bd-ask { opacity: 1; visibility: visible; translate: 0 -50%; scale: 1; transition: opacity .2s, translate .55s var(--f-ease), scale .55s var(--f-ease), visibility 0s; }
.f-bd.f-is-west .f-bd-ask { right: auto; left: calc(100% + 2px); translate: -14px -50%; transform-origin: 0 50%; }
.f-bd.f-is-west.f-is-open .f-bd-ask { translate: 0 -50%; }
.f-bd-rim { padding: 5px; border-radius: 24px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 0 .5px rgba(17, 17, 19, .1), 0 26px 60px -22px rgba(0, 0, 0, .35), 0 8px 20px -12px rgba(0, 0, 0, .12); }
.f-bd-face { overflow: hidden; border-radius: 19px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .1); }
.f-bd-ask.f-is-bad .f-bd-face { animation: f-nope .4s var(--f-ease); }
.f-bd-bar { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 7px 0 9px; }
.f-bd-bar[hidden], .f-bd-idea[hidden], .f-bd-done[hidden] { display: none; }
.f-bd-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; color: var(--f-soft); background: var(--f-plate); transition: color .2s; }
.f-bd-ic .f-li { --s: 16px; }
.f-bd-ask:focus-within .f-bd-ic { color: var(--f-ink); }
.f-bd-bar input { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: 400 15.5px/1 var(--sans); letter-spacing: -.01em; color: var(--f-ink); caret-color: var(--f-ink); }
.f-bd-bar input::placeholder { color: #9A9AA2; }
.f-bd .f-go { height: 44px; padding: 0 14px 0 17px; border: 0; border-radius: 11px; font-size: 14px; cursor: pointer; }
.f-bd-idea { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 12px 14px 2px 16px; font-size: 13.5px; line-height: 1.4; color: var(--f-soft); }
.f-bd-idea q { flex: 1; min-width: 0; overflow: hidden; color: var(--f-ink); white-space: nowrap; text-overflow: ellipsis; }
.f-bd-idea button { flex: none; padding: 0; border: 0; background: none; font: 500 13px/1 var(--sans); color: var(--f-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.f-bd-idea button:hover { color: var(--f-ink); }
.f-bd-done { display: flex; align-items: center; gap: 12px; padding: 14px 16px; outline: 0; font-size: 14px; line-height: 1.4; color: var(--f-ink-2); }
.f-bd-done b { font-weight: 500; color: var(--f-ink); }
.f-bd-ok { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--f-ok); }
.f-bd-ok .f-li { --s: 15px; --sw: 2.2; }
.f-bd-msg { margin: 0; padding: 0 16px 12px; font-size: 12.5px; line-height: 1.4; color: var(--f-soft); }
.f-bd-msg:empty { display: none; }
.f-bd-msg.f-is-bad { color: #C2330F; }

/* The ring round what it was dropped on: that thing's own shape, 6px out (white on the dark plates) */
.f-bd-hl { position: absolute; left: 0; top: 0; border-radius: 20px; opacity: 0; pointer-events: none; transition: opacity .25s;
  box-shadow: 0 0 0 1.5px rgba(17, 17, 19, .55), 0 0 0 7px rgba(17, 17, 19, .05); }
.f-bd-hl.f-glide { transition: opacity .25s, transform .4s var(--f-ease), width .4s var(--f-ease), height .4s var(--f-ease); }
.f-bd-hl.f-on-dark { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85), 0 0 0 7px rgba(255, 255, 255, .1); }
.f-bd.f-is-lit .f-bd-hl { opacity: 1; }

/* The big dark card: how the thing it was dropped on helps you */
.f-bd-big { position: absolute; left: 0; top: 0; width: 344px; padding: 18px 20px 20px; border-radius: 20px; color: #fff; background: #111113;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 30px 70px -24px rgba(0, 0, 0, .55), 0 10px 24px -12px rgba(0, 0, 0, .3);
  opacity: 0; scale: .92; transform-origin: 100% 0; transition: opacity .2s, scale .45s var(--f-ease); }
.f-bd-big[data-side="r"] { transform-origin: 0 0; }
.f-bd-big[hidden] { display: none; }
.f-bd.f-is-big .f-bd-big { opacity: 1; scale: 1; }
.f-bd-big small { display: block; margin-bottom: 8px; font: 500 12px/1.2 var(--sans); letter-spacing: -.005em; color: rgba(255, 255, 255, .5); }
.f-bd-big b { display: block; margin: 0 28px 8px 0; font: 600 19px/1.22 var(--sans); letter-spacing: -.02em; }
.f-bd-big b:empty { display: none; }
.f-bd-big p { margin: 0; font-size: 14.5px; line-height: 1.55; letter-spacing: -.008em; color: rgba(255, 255, 255, .76); }
.f-bd-big ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, .1); list-style: none; }
.f-bd-big ul[hidden] { display: none; }
.f-bd-big li { position: relative; padding-left: 26px; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .9); }
.f-bd-big li::before { content: ""; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.f-bd-big li::after { content: ""; position: absolute; left: 6px; top: 4.5px; width: 4px; height: 7.5px; border: solid #fff; border-width: 0 1.6px 1.6px 0; rotate: 45deg; }
.f-bd-big-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .08); cursor: pointer; transition: background-color .2s, color .2s; }
.f-bd-big-x:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.f-bd-big-x .f-li { --s: 14px; --sw: 1.8; }

/* Phones: no buddy (Endi, 2026-11-05); tablets get the desktop one */
@media (max-width: 767px) { .f-bd { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .f-bd-say, .f-bd-ask, .f-bd.f-is-open .f-bd-ask, .f-bd-hl, .f-bd-hl.f-glide, .f-bd-big { transition: none; }
  .f-bd-say span { opacity: 1; filter: none; translate: none; animation: none; }
}
@media print { .f-bd { display: none; } }

/* ───────── The summon (Summon.astro, summon.js) ───────── */
/* Tap the buddy: the page fades behind a white veil and the Flinter colours (a live gradient, gradient.js, seen through
   a moving oval mask) burst out of it and gather into a glow round a prompt in the middle of the screen, How it works'
   prompt (.f-pw-ask's look). Build floods the screen with the colour and /build opens. Leaving through the top of the
   window: the colour drains out (a grey veil) and a card in the Why section's look (.f-wyb) comes in, the big Flinter
   crying on its right while the things you'd lose fall out of it; an answer brings the colour back (f-is-warm). Above
   the nav (z 50); the buddy comes up over it while it's open (html.f-sm-on). Endi asked for this colour on 2026-11-05,
   so here, as on the close card, there is colour round the prompt; the words and inputs themselves stay on white. */
@property --f-sm-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.f-sm { position: fixed; inset: 0; z-index: 50; font-family: var(--sans); }
.f-sm[hidden] { display: none; }
html.f-sm-on { overflow: hidden; }
html.f-sm-on .f-bd { z-index: 55; }
.f-sm-veil { position: absolute; inset: 0; opacity: 0; background: rgba(255, 255, 255, .64);
  -webkit-backdrop-filter: blur(7px) saturate(.55); backdrop-filter: blur(7px) saturate(.55);
  transition: opacity .45s var(--f-ease), background-color 1.4s ease, -webkit-backdrop-filter 1.4s ease, backdrop-filter 1.4s ease; }
.f-sm.f-is-on .f-sm-veil { opacity: 1; }
/* leaving: the colour drains out of the page */
.f-sm.f-is-sad .f-sm-veil { background: rgba(232, 233, 236, .58); -webkit-backdrop-filter: blur(2px) saturate(0); backdrop-filter: blur(2px) saturate(0); }
.f-sm-wash { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, transparent); mask-image: linear-gradient(transparent, transparent); }
.f-sm-wash .f-sm-g { position: absolute; inset: 0; }
.f-sm-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 72px 16px 40px; overflow-y: auto; }
.f-sm-pane { display: flex; flex-direction: column; align-items: center; width: min(720px, 100%); }
.f-sm-pane[hidden] { display: none; }
.f-sm-x { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 10px; border-radius: 999px;
  font: 500 13px/1 var(--sans); color: var(--f-soft); background: rgba(255, 255, 255, .86); box-shadow: 0 0 0 1px rgba(17, 17, 19, .08), 0 8px 20px -12px rgba(0, 0, 0, .25); opacity: 0; }
.f-sm.f-is-on .f-sm-x { opacity: 1; transition-delay: .25s; }
.f-sm-x:hover { color: var(--f-ink); }
.f-sm-x .f-li { --s: 15px; --sw: 1.8; }
.f-sm-x kbd { padding: 3px 6px; border-radius: 6px; font: 500 11px/1 var(--sans); color: var(--f-mute); background: var(--f-plate); }
.f-sm-pane, .f-sm-x { transition: opacity .3s, scale .4s var(--f-ease), filter .3s, color .2s; }
.f-sm:not(.f-is-on) .f-sm-pane, .f-sm.f-is-going .f-sm-pane, .f-sm.f-is-going .f-sm-x { opacity: 0; scale: .97; filter: blur(4px); }
@keyframes f-sm-spin { to { --f-sm-ang: 360deg; } }
@keyframes f-sm-in { from { opacity: 0; translate: 0 18px; scale: .97; filter: blur(6px); } }

/* The prompt: How it works' (front/Builder.astro), in the middle of the screen. A glass rim with a ring of the colours
   hugging it (and showing through it), a white face; the strip on top says what Flinter is doing, with a chip for each
   part the sentence names (spinning, then ticked, on Build); the sentence two lines tall; pills and the round send. */
.f-sm-h { margin: 0 0 22px; font: 500 clamp(26px, 3vw, 34px)/1.1 var(--sans); letter-spacing: -.035em; color: var(--f-ink); text-align: center; }
.f-sm-ask { position: relative; width: 100%; text-align: left; }
.f-sm-rim { position: relative; isolation: isolate; padding: 6px; border-radius: 26px; color: var(--f-ink);
  background: rgb(255 255 255 / .3); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .65), 0 40px 80px -30px rgb(30 6 40 / .4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); transition: background-color .4s, box-shadow .4s; }
.f-sm-ask:focus-within .f-sm-rim { background-color: rgb(255 255 255 / .42); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .8), 0 0 0 6px rgb(255 255 255 / .16), 0 40px 80px -30px rgb(30 6 40 / .4); }
.f-sm-rim::before { content: ""; position: absolute; inset: -8px -12px; z-index: -1; border-radius: 34px; opacity: 0; pointer-events: none;
  background: conic-gradient(from var(--f-sm-ang), #FF7A1A, #FF3B5C, #E0338F, #7A4DFF, #FF5E3A, #FFB199, #FF7A1A);
  filter: blur(20px); animation: f-sm-spin 5s linear infinite; transition: opacity .8s var(--f-ease), inset .5s var(--f-ease), filter .5s; }
.f-sm.f-is-on .f-sm-rim::before { opacity: .62; transition-delay: .5s; }
.f-sm.f-is-building .f-sm-rim::before { opacity: 1; inset: -16px -20px; filter: blur(26px); transition-delay: 0s; }
.f-sm-face { overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .06), 0 10px 28px -14px rgba(0, 0, 0, .2); }
.f-sm-box { display: grid; gap: 14px; padding: 18px 14px 14px 20px; }
.f-sm-box textarea { display: block; width: 100%; min-height: 52px; max-height: 112px; padding: 0 6px 0 0; border: 0; outline: 0; resize: none; overflow-y: auto; background: transparent;
  font: 400 18px/26px var(--sans); letter-spacing: -.012em; color: var(--f-ink); caret-color: var(--f-ink); }
.f-sm textarea::placeholder, .f-sm input::placeholder { color: #9A9AA2; }
.f-sm-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.f-sm-row-lab { margin-right: 2px; font-size: 13px; color: var(--f-mute); }
.f-sm-tool { display: inline-flex; align-items: center; height: 36px; padding: 0 13px; border-radius: 999px; font: 500 13.5px/1 var(--sans); color: var(--f-ink-2); white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .12); transition: background-color .2s, box-shadow .2s; }
.f-sm-tool:hover { background: var(--f-grey); box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .2); }
.f-sm-send { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: auto; border-radius: 50%; color: #A8A8B0; background: #EFEFF0; transition: background .3s, color .3s, scale .3s var(--f-ease); }
.f-sm-send .f-li { --s: 18px; --sw: 2; }
.f-sm-ask.f-is-ready .f-sm-send { color: #fff; background: var(--f-ink); }
.f-sm-ask.f-is-ready .f-sm-send:hover { scale: 1.06; }
.f-sm-ask.f-is-busy .f-sm-send { cursor: progress; }
.f-sm-ask.f-is-busy .f-sm-send .f-li { opacity: 0; }
.f-sm-ask.f-is-busy .f-sm-send::after { content: ""; position: absolute; width: 16px; height: 16px; border: 1.8px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: f-spin .7s linear infinite; }
.f-sm-msg { min-height: 18px; margin: 10px 4px 0; font-size: 13px; line-height: 1.4; color: var(--f-mute); text-align: center; }
.f-sm-msg:empty { visibility: hidden; }
.f-sm-msg.f-is-bad { color: #C2330F; }
.f-sm-ask.f-is-bad .f-sm-face, .f-sm-form.f-is-bad .f-ask-face, .f-sm-note.f-is-bad textarea { animation: f-nope .4s var(--f-ease); }
/* in, one after another */
.f-sm.f-is-on .f-sm-build > * { animation: f-sm-in .7s var(--f-ease) backwards; }
.f-sm.f-is-on .f-sm-build > .f-sm-h { animation-delay: .12s; }
.f-sm.f-is-on .f-sm-build > .f-sm-ask { animation-delay: .2s; }

/* Leaving: the Why card's look (front/Why.astro, .f-wyb). A grey card, the words on the left; on the right the big
   Flinter (a live agent, summon.js) in white with a dashed outline like the Why drawing, rising out of the card's top and
   cut off by its bottom, crying. Round him float the things you'd leave behind, ticked; one by one they slip and fall
   out of the card. Cheered up he fills with his orange, the outline goes and the things fly back. */
.f-sm-exit { position: relative; isolation: isolate; align-self: center; width: min(1040px, 100%); }
/* the colour back: a ring of it round the card */
.f-sm-exit::before { content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: 30px; opacity: 0; pointer-events: none;
  background: conic-gradient(from var(--f-sm-ang), #FF7A1A, #FF3B5C, #E0338F, #7A4DFF, #FF5E3A, #FFB199, #FF7A1A);
  filter: blur(26px); animation: f-sm-spin 6s linear infinite; transition: opacity 1.2s var(--f-ease) .3s; }
.f-sm.f-is-warm .f-sm-exit::before { opacity: .4; }
.f-sm.f-is-on .f-sm-exit { animation: f-sm-drop 1s var(--f-ease) .3s backwards; }
@keyframes f-sm-drop { from { opacity: 0; translate: 0 -16px; filter: blur(4px); } }
.f-sm-card { position: relative; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); width: 100%; min-height: 380px; border-radius: 24px; background: var(--f-grey);
  box-shadow: 0 0 0 1px rgba(17, 17, 19, .06), 0 44px 90px -34px rgba(17, 17, 19, .35), 0 12px 30px -18px rgba(17, 17, 19, .16); }
.f-sm-words { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 46px 24px 20px 48px; }
.f-sm-art { position: relative; clip-path: inset(-600px -600px 0 -600px); pointer-events: none; }
/* (.f-sm-art in front: agent.js's own .fa-host { position: relative } comes later on the page) */
.f-sm-art .f-sm-big, .f-sm-art .f-sm-lost { position: absolute; right: 9%; bottom: -40px; width: min(400px, 88%); aspect-ratio: 103.708 / 102.125; }
.f-sm-big { color: rgba(17, 17, 19, .45); filter: drop-shadow(0 22px 40px rgba(17, 17, 19, .06)); }
.f-sm-big .root > g[mask] { fill: #fff; transition: fill 1.2s var(--f-ease) .15s; }
/* the outline: under him, so its fill shows through his eye holes (a light grey), and his eyes' own dashed outlines on
   top, as the Why drawing has */
.f-sm-ln, .f-sm-lne { stroke: rgba(17, 17, 19, .28); stroke-linecap: round; stroke-linejoin: round; transition: opacity 1s .15s; }
.f-sm-ln { fill: #EDEDEF; }
.f-sm-lne { fill: none; }
.f-sm.f-is-warm .f-sm-big .root > g[mask] { fill: #FE6023; }
.f-sm.f-is-warm .f-sm-ln, .f-sm.f-is-warm .f-sm-lne { opacity: 0; }
/* his tears, two from each eye in turn */
.f-sm-tear { opacity: 0; fill: #5FB8FF; }
.f-sm.f-is-sad .f-sm-tear { animation: f-sm-tear 2s cubic-bezier(.55, 0, .75, .5) infinite; }
@keyframes f-sm-tear {
  0% { opacity: 0; transform: translate(var(--x), 70px) scale(.35); }
  12% { opacity: 1; transform: translate(var(--x), 73px) scale(1); }
  76% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), 100px) scale(.9, 1.2); }
}
/* what he's losing: ticked, floating round him; lost, the tick goes and it slips, then falls out of the card */
.f-sm-thing { position: absolute; translate: -50% -50%; display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 999px; white-space: nowrap;
  font: 500 13px/1 var(--sans); color: var(--f-ink); background: #fff; transition: color .3s;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .1), 0 12px 26px -12px rgba(17, 17, 19, .3); animation: f-sm-thing-in .6s var(--f-ease) var(--d) backwards; }
@keyframes f-sm-thing-in { from { opacity: 0; transform: scale(.7); } }
.f-sm-thing.f-is-lost { color: var(--f-mute); animation: f-sm-fall 1.7s cubic-bezier(.5, 0, .85, .45) forwards; }
@keyframes f-sm-fall {
  0% { transform: none; }
  8% { transform: translate(0, -3px) rotate(-4deg); }
  16% { transform: translate(0, 0) rotate(4deg); }
  26% { transform: translate(0, 2px) rotate(-2deg); opacity: 1; }
  100% { transform: translate(var(--dx), 460px) rotate(var(--r)); opacity: .5; }
}
.f-sm-thing.f-is-back { animation: f-sm-back .8s cubic-bezier(.34, 1.4, .64, 1) var(--d) backwards; }
@keyframes f-sm-back { from { opacity: 0; transform: translate(0, 140px) scale(.8); } }
/* the words */
.f-sm-step[hidden], .f-sm-back[hidden], .f-sm-bye[hidden] { display: none; }
.f-sm-step:not([hidden]) { animation: f-sm-step .45s var(--f-ease); }
@keyframes f-sm-step { from { opacity: 0; translate: -10px 0; } }
.f-sm-xh { margin: 0; font: 500 clamp(26px, 2.6vw, 34px)/1.08 var(--sans); letter-spacing: -.035em; color: var(--f-ink); text-wrap: balance; }
.f-sm-p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; letter-spacing: -.006em; color: var(--f-soft); text-wrap: pretty; }
.f-sm-try { align-self: flex-start; height: 46px; margin-top: 20px; padding: 0 16px 0 20px; font-size: 15px; }
.f-sm-or { margin: 22px 0 0; font-size: 13px; color: var(--f-mute); }
.f-sm-back { position: absolute; top: 14px; left: 40px; display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 10px 0 4px; border-radius: 8px;
  font: 500 13px/1 var(--sans); color: var(--f-mute); transition: color .2s, background-color .2s; }
.f-sm-back:hover { color: var(--f-ink); background: #fff; }
.f-sm-back .f-li { --s: 15px; --sw: 1.8; }
.f-sm-step[data-step="ideas"], .f-sm-step[data-step="later"], .f-sm-step[data-step="missing"] { padding-top: 12px; }
.f-sm-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.f-sm-opts button { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 12px 7px 7px; border-radius: 14px; text-align: left;
  font: 500 13.5px/1.25 var(--sans); letter-spacing: -.01em; color: var(--f-ink); background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 19, .07), 0 6px 16px -12px rgba(17, 17, 19, .25); transition: box-shadow .2s, translate .3s var(--f-ease); }
.f-sm-opts button:hover { translate: 0 -1px; box-shadow: 0 0 0 1px rgba(17, 17, 19, .16), 0 10px 22px -12px rgba(17, 17, 19, .3); }
.f-sm-opts i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; color: var(--f-soft); background: var(--f-grey); }
.f-sm-opts i .f-li { --s: 15px; }
.f-sm-opts button:hover i { color: var(--f-ink); }
.f-sm-done .f-sm-2nd { height: 46px; padding: 0 16px 0 20px; font-size: 15px; }
.f-sm-2nd { height: 46px; padding: 0 16px; border-radius: 11px; font: 500 15px/1 var(--sans); color: var(--f-ink); background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .14); transition: background-color .2s; }
.f-sm-2nd:hover { background: var(--f-plate); }
.f-sm-ideas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.f-sm-ideas .f-idea { flex-direction: column; align-items: stretch; gap: 8px; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .07); -webkit-backdrop-filter: none; backdrop-filter: none; transition: box-shadow .2s, translate .3s var(--f-ease); }
.f-sm-ideas .f-idea:hover { translate: 0 -1px; box-shadow: 0 0 0 1px rgba(17, 17, 19, .16), 0 10px 22px -12px rgba(17, 17, 19, .3); }
.f-sm-ideas .f-scene { width: 100%; height: auto; aspect-ratio: 4 / 2.2; border-radius: 11px; }
.f-sm-ideas .f-idea > span { padding: 0 6px 6px; }
.f-sm-form { margin-top: 18px; }
.f-sm-form .f-ask-bar { height: 58px; padding: 0 7px 0 9px; }
.f-sm-form .f-ask-ic { width: 34px; height: 34px; }
.f-sm input[type="email"] { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: 400 15.5px/1 var(--sans); letter-spacing: -.01em; color: var(--f-ink); caret-color: var(--f-ink); }
.f-sm-form .f-go { height: 44px; padding: 0 14px 0 17px; font-size: 14px; }
.f-sm-form .f-sm-msg { margin: 8px 4px 0; text-align: left; }
.f-sm-form .f-sm-msg:empty { display: none; }
.f-sm-note textarea { display: block; width: 100%; min-height: 84px; padding: 12px 14px; border: 0; border-radius: 14px; outline: 0; resize: vertical;
  font: 400 15px/1.45 var(--sans); color: var(--f-ink); background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .08); transition: box-shadow .2s; }
.f-sm-note textarea:focus { box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .28), 0 0 0 4px rgba(17, 17, 19, .04); }
.f-sm-note-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 5px 5px 5px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .1); }
.f-sm-note-row:focus-within { box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .28); }
.f-sm-note-row input[type="email"] { height: 44px; font-size: 15px; }
.f-sm-done { padding-top: 4px; outline: 0; }
.f-sm-ok { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 50%; color: #fff; background: var(--f-ok); animation: f-cm-pop .6s cubic-bezier(.34, 1.56, .64, 1) .1s backwards; }
.f-sm-ok .f-li { --s: 18px; --sw: 2.2; }
.f-sm-done .f-sm-2nd { margin-top: 20px; }
.f-sm-bye { align-self: flex-start; margin: auto 0 0; padding: 18px 0 4px; font: 500 13px/1 var(--sans); color: var(--f-mute); text-decoration: underline; text-decoration-color: rgba(17, 17, 19, .2); text-underline-offset: 3px; transition: color .2s; }
.f-sm-bye:hover { color: var(--f-ink); }
/* the buddy goes into the big one while the card is open (buddy.js) */
.f-bd.f-is-away { opacity: 0; transition: opacity .35s .25s; }
.f-bd.f-is-away .f-bd-me { pointer-events: none; }

@media (max-width: 960px) {
  .f-sm-card { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .f-sm-words { padding: 40px 16px 18px 32px; }
  .f-sm-back { left: 24px; }
  .f-sm-opts, .f-sm-ideas { grid-template-columns: 1fr; }
  .f-sm-art .f-sm-big, .f-sm-art .f-sm-lost { right: 4%; bottom: -32px; }
}
@media (max-width: 640px) {
  .f-sm-box { padding: 14px 10px 10px 16px; }
  .f-sm-box textarea { font-size: 16px; line-height: 24px; }
  .f-sm-tool:nth-of-type(n + 3) { display: none; }
  .f-sm-card { grid-template-columns: minmax(0, 1fr); }
  .f-sm-art { display: none; }
  .f-sm-words { padding: 30px 18px 14px; }
  .f-sm-x kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .f-sm-rim::before, .f-sm-exit::before { animation: none; }
  .f-sm.f-is-on .f-sm-build > *, .f-sm.f-is-on .f-sm-exit, .f-sm-step:not([hidden]), .f-sm-thing, .f-sm-thing.f-is-back { animation: none; }
  .f-sm.f-is-sad .f-sm-tear { animation: none; opacity: 1; transform: translate(var(--x), 80px); }
  .f-sm-thing.f-is-lost { animation: none; opacity: .5; text-decoration: line-through; }
}
@media print { .f-sm { display: none; } }