/* Flinter · every page but the home: the landing pages, pricing, the roadmap, about, contact, examples, the
   changelog, the blog and its posts, CMS pages, the legal pages, the comparisons, the SEO checker and the 404.

   Since 2026-11-05 they wear the home page's look (index.astro, front.css): one column on white with no lines drawn
   around or between the sections, the home's heads, grey cards (front.css .f-cell) and the questions' grey plate,
   live gradients (gradient.js) only behind screens, and the home's close card rising out of the dark footer. The UI is
   ink and grey, with green only for done; no orange but the marks.

   Loaded after home.css, nav.css, front.css and art.css, so it reuses front.css's tokens (--f-*) and parts and adds
   each page's own layout. Behaviour: inner.js (and site.js for the marks, the questions and the drawings).
   The pages before this look are in Desktop/Flinter Website/versions/inner-pages-before-2026-11-05/. */

/* ───────── The page ───────── */
/* The nav is fixed (nav.css), so the page starts under it, and its content lines up with the column, as on the home. */
.page { position: relative; padding-top: 64px; --f-cell: var(--f-grey); }
.is-inner .hd-shell { max-width: none; width: var(--f-col); padding: 0 24px; }
/* The close card rises out from behind the footer, so the footer sits in front (front.css does it for the home). */
.is-inner .foot { z-index: 1; }
.page [data-gradient] { --grain: 1; }
.page :focus-visible { outline-color: var(--f-ink); }
/* Zero specificity, so a list that is also a column (.f-col's margin: 0 auto) stays centred. */
:where(.page) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.page) :where(a) { text-decoration: none; }

/* The head (inner/Head.astro) is the home's (front.css .f-head): its buttons arrive after the line, as its input does. */
.i-head .f-sub { max-width: 600px; }
.f-js:not(.f-landed) .f-head > .i-acts { animation: f-arrive .8s var(--f-ease) .6s backwards; }
@media (prefers-reduced-motion: reduce) { .f-js:not(.f-landed) .f-head > .i-acts { animation: f-arrive-fade .4s ease backwards; } }
.i-head .f-ask { margin-top: 12px; width: min(720px, 100%); }
/* The section heads (inner/SecHead.astro) a little closer to what they introduce than the home's. */
.i-sec { padding-bottom: 56px; }

/* ───────── Buttons ───────── */
/* The home's Build (front.css .f-go): ink, 12px corners, the arrow nudging on hover; and a white one with a hairline. */
.i-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.i-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 18px 0 20px; border: 0; border-radius: 12px; font: 500 14.5px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; color: #fff; background: var(--f-ink); cursor: pointer; transition: background-color .15s; }
.i-btn:hover { background: var(--f-ink-2); }
.i-btn .f-li { --s: 16px; --sw: 1.8; transition: transform .25s var(--f-ease); }
.i-btn:hover .f-li:last-child { transform: translateX(2px); }
.i-btn .f-li:first-child:not(:last-child) { transform: none; }
.i-btn-alt { padding: 0 20px; color: var(--f-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--f-line-2); }
.i-btn-alt:hover { background: #F6F6F7; }
.i-btn .li { --s: 15px; --sw: 1.8; }

/* ───────── The mesh: the live gradient's still stand-in ─────────
   For small cards (the related pages, the blog), where a live canvas each would be too many: the palettes' six points
   (gradient.js, the same formula as its fallback), with the same grain. It drifts a little under the pointer. */
.i-mesh { position: relative; isolation: isolate; overflow: hidden; background-size: 130% 130% !important; background-position: 0 0 !important; transition: background-position 1.6s var(--f-ease); }
.i-mesh::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: overlay; opacity: .9; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.9' intercept='-.45'/%3E%3CfeFuncG type='linear' slope='1.9' intercept='-.45'/%3E%3CfeFuncB type='linear' slope='1.9' intercept='-.45'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 200px 200px; }
a:hover .i-mesh, a:focus-visible .i-mesh { background-position: 100% 100% !important; }
.i-mesh[data-mesh="flint"] { background: radial-gradient(83% 83% at 96% 0%, #FF7A1A 0%, transparent 70%), radial-gradient(75% 75% at 52% -2%, #FF3B5C 0%, transparent 70%), radial-gradient(75% 75% at 4% 10%, #E0338F 0%, transparent 70%), radial-gradient(69% 69% at 0% 80%, #7A4DFF 0%, transparent 70%), radial-gradient(69% 69% at 94% 64%, #FF5E3A 0%, transparent 70%), radial-gradient(63% 63% at 55% 106%, #FFB199 0%, transparent 70%), #FF3B5C; }
.i-mesh[data-mesh="sunset"] { background: radial-gradient(75% 75% at 98% 4%, #FF6A3D 0%, transparent 70%), radial-gradient(83% 83% at 50% 0%, #FF3D8E 0%, transparent 70%), radial-gradient(75% 75% at 2% 26%, #C43BD9 0%, transparent 70%), radial-gradient(75% 75% at 4% 96%, #5A5CFF 0%, transparent 70%), radial-gradient(68% 68% at 92% 70%, #FF5C7A 0%, transparent 70%), radial-gradient(60% 60% at 56% 106%, #A9A4FF 0%, transparent 70%), #FF3D8E; }
.i-mesh[data-mesh="ember"] { background: radial-gradient(75% 75% at 94% 0%, #FFB347 0%, transparent 70%), radial-gradient(83% 83% at 46% 4%, #FF6A1F 0%, transparent 70%), radial-gradient(75% 75% at 2% 20%, #E8421A 0%, transparent 70%), radial-gradient(68% 68% at 0% 94%, #B8251A 0%, transparent 70%), radial-gradient(68% 68% at 96% 72%, #FF7F3F 0%, transparent 70%), radial-gradient(63% 63% at 55% 106%, #FFD2B0 0%, transparent 70%), #FF6A1F; }
.i-mesh[data-mesh="dusk"] { background: radial-gradient(83% 83% at 10% 0%, #3A1E9C 0%, transparent 70%), radial-gradient(75% 75% at 60% 4%, #6B4BFF 0%, transparent 70%), radial-gradient(68% 68% at 98% 26%, #B94DF5 0%, transparent 70%), radial-gradient(68% 68% at 86% 88%, #FF5FA2 0%, transparent 70%), radial-gradient(60% 60% at 40% 106%, #FF9466 0%, transparent 70%), radial-gradient(68% 68% at 0% 72%, #241466 0%, transparent 70%), #6B4BFF; }
.i-mesh[data-mesh="ocean"] { background: radial-gradient(83% 83% at 5% 5%, #1E3BFF 0%, transparent 70%), radial-gradient(75% 75% at 55% 0%, #2F6BF5 0%, transparent 70%), radial-gradient(68% 68% at 98% 20%, #3DB8FF 0%, transparent 70%), radial-gradient(68% 68% at 0% 86%, #8E7BFF 0%, transparent 70%), radial-gradient(63% 63% at 86% 96%, #6FE0E6 0%, transparent 70%), radial-gradient(57% 57% at 50% 108%, #C9D6FF 0%, transparent 70%), #2F6BF5; }
.i-mesh[data-mesh="lagoon"] { background: radial-gradient(83% 83% at 5% 5%, #0B7F7A 0%, transparent 70%), radial-gradient(75% 75% at 55% 0%, #11B39A 0%, transparent 70%), radial-gradient(68% 68% at 98% 20%, #2FC6F0 0%, transparent 70%), radial-gradient(63% 63% at 0% 90%, #2F6BF5 0%, transparent 70%), radial-gradient(63% 63% at 90% 96%, #B8F27A 0%, transparent 70%), radial-gradient(57% 57% at 50% 108%, #CFF5EC 0%, transparent 70%), #11B39A; }
.i-mesh[data-mesh="candy"] { background: radial-gradient(83% 83% at 4% 4%, #FF9CC8 0%, transparent 70%), radial-gradient(75% 75% at 96% 4%, #FFC59E 0%, transparent 70%), radial-gradient(75% 75% at 0% 76%, #C3B2FF 0%, transparent 70%), radial-gradient(68% 68% at 96% 86%, #9FDDFF 0%, transparent 70%), radial-gradient(60% 60% at 50% 36%, #FFE3EE 0%, transparent 70%), radial-gradient(60% 60% at 50% 106%, #E4D4FF 0%, transparent 70%), #FFC59E; }
.i-mesh[data-mesh="night"] { background: radial-gradient(90% 90% at 10% 5%, #07081C 0%, transparent 70%), radial-gradient(75% 75% at 70% 0%, #1A1D5A 0%, transparent 70%), radial-gradient(68% 68% at 0% 72%, #3B2A9A 0%, transparent 70%), radial-gradient(60% 60% at 86% 102%, #FE6023 0%, transparent 70%), radial-gradient(57% 57% at 44% 108%, #FF4F8B 0%, transparent 70%), radial-gradient(75% 75% at 96% 40%, #0B0C26 0%, transparent 70%), #1A1D5A; }

/* ───────── The glass rim ─────────
   What a screen sits in on a plate, as the home's app does (front.css .f-glass): a thin pane of frosted white with a
   bright edge and a deep, soft shadow. */
.lp-glass { position: relative; width: 100%; padding: 8px; border-radius: 26px; 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); }

/* ═════════════ Landing pages (Landing.astro) ═════════════ */
/* Show: the drawings, a Build picture or the example sites in the glass rim on the page's plate (src/lib/look.ts). */
.lp-plate { display: grid; place-items: center; padding: 64px 48px; border-radius: var(--f-r-plate); }
.lp-plate > .lp-glass { max-width: 1040px; }
/* The tray: light grey, a faint dot grid fading out from the middle, the drawings in a row. */
.lp-tray { position: relative; container-type: inline-size; display: flex; align-items: center; justify-content: center; gap: 44px; min-height: 420px; padding: 56px 32px; overflow: hidden; border-radius: 19px; background: #F7F7F8; box-shadow: 0 0 0 1px rgba(17, 17, 19, .06); }
.lp-tray::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgba(17, 17, 19, .14) 1px, transparent 1.4px) 50% 50% / 16px 16px; mask-image: radial-gradient(closest-side, #000 25%, transparent); -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent); }
.lp-tray > * { position: relative; }
/* A Build picture (src/components/build/) at home.css's size, in the tray. */
.lp-glass-pic { max-width: 820px !important; }
.lp-glass-pic .lp-tray { display: block; min-height: 0; padding: 0; }
.lp-glass-pic .lp-tray::before { display: none; }
.lp-pic { padding: 0; }
.lp-pic .fc-stage { height: 440px; margin: 0; }
.lp-pic .fs { scale: 1.2; }
/* The example sites: one or two, each in its own rim. */
.lp-sites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; max-width: 1088px; }
.lp-sites.is-one { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.lp-sites .lp-glass .ex, .xp-plate .lp-glass .ex { margin: 0; }
.lp-note { margin-top: 16px; font-size: 13px; line-height: 1.5; text-align: center; color: var(--f-mute); text-wrap: balance; }

/* Features: the home's bento (front.css .f-bento) with six cells: 4 + 2, 2 + 4, 3 + 3. Each cell takes two of the
   bento's rows (a subgrid), its drawing and then its words, so a row of drawings is only as tall as the tallest drawing
   in it (plus its margin) and the headings in a row stay in line. A fixed height left empty grey over the short ones. */
.f-cell.lp-is-half { grid-column: span 3; }
.f-cell.lp-is-third { grid-column: span 2; }
.lp-bento { margin-top: 0; }
.lp-bento > .lp-cell { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.lp-cell .f-cell-art { height: auto; }

/* ───────── How Flinter helps (inner/Help.astro) ─────────
   On the Solutions pages, under the head's plate: the head, then one grey cell a problem. On the cell's left the
   problem in the reader's words and what it costs them; on its right a white card with how Flinter solves it and small
   links to the pages that show it. No lines: the grey and the white card's soft shadow do the separating. */
.slv { padding-top: 96px; }
.slv-head { padding: 0 24px; margin-bottom: 56px; }
.slv-list { display: grid; gap: 12px; }
.slv-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 8px; border-radius: var(--f-r-cell); background: var(--f-grey); }
.slv-pain, .slv-fix { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 26px 28px 28px; }
.slv-pain { padding-left: 24px; }
.slv-fix { border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .05), 0 1px 2px rgba(0, 0, 0, .03), 0 12px 28px -18px rgba(0, 0, 0, .16); }
.slv-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13px; color: var(--f-mute); }
.slv-n { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--f-ink); }
.slv-pain h3 { font: 500 clamp(21px, 2.1vw, 26px)/1.2 var(--sans); letter-spacing: -.03em; color: var(--f-ink); text-wrap: balance; }
.slv-fix-h { font: 500 18px/1.35 var(--sans); letter-spacing: -.015em; color: var(--f-ink); text-wrap: balance; }
.slv-tx { max-width: 500px; font-size: 15px; line-height: 1.55; color: var(--f-soft); text-wrap: pretty; }
.slv-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.slv-links a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--f-ink-2); background: var(--f-grey); transition: background-color .15s; }
.slv-links a:hover, .slv-links a:focus-visible { background: #EEEEF0; }
.slv-links .f-li { --s: 12px; --sw: 2; color: var(--f-mute); transition: translate .25s var(--f-ease); }
.slv-links a:hover .f-li { translate: 2px 0; }
@media (max-width: 720px) {
  .slv { padding-top: 72px; }
  .slv-head { padding: 0 8px; margin-bottom: 32px; }
  .slv-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 6px; }
  .slv-pain { padding: 20px 16px 14px; }
  .slv-fix { padding: 20px 18px 22px; }
}

/* ═════════════ Solutions (solutions.astro) ═════════════
   The head with chips that jump to each group, then each group's grey cards: the page's icon on a white tile and its
   name, its first problem in quotes, how Flinter solves it, and the link. Four a row (three for the six industries). */
.sl-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.sl-jump a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--f-ink-2); background: var(--f-grey); transition: background-color .15s, color .15s; }
.sl-jump a:hover, .sl-jump a:focus-visible { color: var(--f-ink); background: #EEEEF0; }
.sl-group { scroll-margin-top: 40px; }
/* The first group follows the head closely: there's no plate between them, as on the landing pages. */
.sl-is-first .f-sec { padding-top: 40px; }
.sl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sl-grid[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl-grid > li { display: grid; }
.sl-card { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 20px 20px; border-radius: var(--f-r-cell); background: var(--f-grey); transition: background-color .25s; }
.sl-card:hover, .sl-card:focus-visible { background: #F3F3F5; }
.sl-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sl-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; color: var(--f-ink); background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .05), 0 6px 14px -8px rgba(0, 0, 0, .2); transition: transform .5s var(--f-ease); }
.sl-ic .li { --s: 17px; --sw: 1.6; }
.sl-card:hover .sl-ic { transform: translateY(-2px); }
.sl-top b { font: 500 15px/1.3 var(--sans); letter-spacing: -.01em; color: var(--f-ink); }
.sl-q { font: 500 18px/1.3 var(--sans); letter-spacing: -.02em; color: var(--f-ink); text-wrap: balance; }
.sl-tx { font-size: 14.5px; line-height: 1.5; color: var(--f-soft); text-wrap: pretty; }
.sl-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 500; color: var(--f-ink); }
.sl-go .f-li { --s: 14px; --sw: 1.8; transition: transform .25s var(--f-ease); }
.sl-card:hover .sl-go .f-li { transform: translateX(3px); }
@media (max-width: 980px) {
  .sl-grid, .sl-grid[data-n="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sl-grid, .sl-grid[data-n="6"] { grid-template-columns: minmax(0, 1fr); }
  .sl-card { padding: 18px; }
}

/* ───────── How it works (inner/How.astro) ───────── */
.i-how { display: grid; place-items: center; padding: 64px 48px; border-radius: var(--f-r-plate); }
.i-how-in { display: grid; justify-items: center; width: min(640px, 100%); }
/* The prompt, in the home builder's glass rim (front.css .f-pw-ask), at its real size. */
.i-how-ask { position: relative; z-index: 1; width: 100%; padding: 6px; border-radius: 26px; 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; }
.i-how-ask.i-is-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); }
.i-how-face { overflow: hidden; border-radius: 20px; text-align: left; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .06), 0 10px 28px -14px rgba(0, 0, 0, .2); }
.i-how-st { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--f-line); font-size: 13.5px; color: var(--f-soft); white-space: nowrap; overflow: hidden; background: #FAFAFA; }
.i-how-st .mk { --s: 18px; }
.i-how-st [data-st] { transition: opacity .25s; }
.i-how-st.i-is-swap [data-st] { opacity: 0; }
.i-how-box { display: grid; gap: 14px; padding: 16px 12px 12px 18px; }
.i-how-tx { min-height: 52px; font-size: 17px; line-height: 26px; letter-spacing: -.01em; color: var(--f-ink); text-wrap: pretty; }
.i-caret { display: none; 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; }
.i-is-typing .i-caret { display: inline-block; }
.i-how-bar { display: flex; align-items: center; gap: 8px; }
.i-how-plus { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--f-soft); box-shadow: inset 0 0 0 1px var(--f-line-2); }
.i-how-plus .f-li { --s: 15px; }
.i-how-mode { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--f-ink-2); box-shadow: inset 0 0 0 1px var(--f-line-2); }
.i-how-mode .f-li { --s: 13px; color: var(--f-mute); }
.i-how-send { display: grid; place-items: center; width: 34px; height: 34px; margin-left: auto; border-radius: 50%; color: #fff; background: var(--f-ink); transition: background-color .25s, scale .15s ease; }
.i-how-send .f-li { --s: 16px; --sw: 2; }
.i-how-ask.i-is-empty .i-how-send { background: #D6D6DB; }
.i-how-send.i-is-press { scale: .86; animation: f-halo .9s var(--f-ease); }
/* The plan, tucked under the prompt: the page's first four features, then the bar. */
.i-how-plan { width: calc(100% - 40px); margin-top: -10px; padding-top: 10px; overflow: hidden; border-radius: 0 0 16px 16px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .06), 0 24px 50px -24px rgb(30 6 40 / .5); text-align: left; transition: opacity .5s var(--f-ease), translate .6s var(--f-ease); }
.i-how-plan.i-is-off { opacity: 0; translate: 0 -16px; }
.i-how-part { display: grid; grid-template-columns: 28px minmax(0, 1fr) 18px; align-items: center; gap: 12px; height: 46px; padding: 0 16px; }
.i-how-part + .i-how-part { border-top: 1px solid rgba(17, 17, 19, .05); }
.i-how-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--f-mute); box-shadow: inset 0 0 0 1px var(--f-line); transition: color .3s; }
.i-how-ic .li { --s: 15px; }
.i-how-part b { overflow: hidden; font-size: 13.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; color: var(--f-mute); transition: color .3s; }
.i-how-part.i-is-busy b, .i-how-part.i-is-ok b, .i-how-part.i-is-busy .i-how-ic, .i-how-part.i-is-ok .i-how-ic { color: var(--f-ink); }
.i-how-ck { position: relative; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(17, 17, 19, .16); transition: background-color .25s, box-shadow .25s; }
.i-how-ck .f-li { --s: 11px; --sw: 2.6; opacity: 0; scale: .5; transition: opacity .25s, scale .4s cubic-bezier(.34, 1.56, .64, 1); }
.i-spin { position: absolute; inset: 0; border: 1.5px solid transparent; border-top-color: var(--f-ink); border-radius: 50%; opacity: 0; }
.i-how-part.i-is-busy .i-spin { opacity: 1; animation: f-spin .8s linear infinite; }
.i-how-part.i-is-ok .i-how-ck { background: var(--f-ink); box-shadow: none; }
.i-how-part.i-is-ok .i-how-ck .f-li { opacity: 1; scale: 1; }
.i-how-live { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 8px 0 18px; border-top: 1px solid var(--f-line); font-size: 13px; color: var(--f-mute); background: #FAFAFA; }
.i-how-live > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #D6D6DB; transition: background-color .3s; }
.i-how-live.i-is-building > i { background: var(--f-ink-2); animation: f-hw-blink 1.2s ease-in-out infinite; }
.i-how-live.i-is-live > i { background: var(--f-ok); box-shadow: 0 0 0 4px rgb(18 161 80 / .14); }
.i-how-live.i-is-live span { color: var(--f-ink); }
.i-how-live em { display: grid; place-items: center; height: 32px; margin-left: auto; padding: 0 14px; border-radius: 9px; font: 500 12.5px/1 var(--sans); font-style: normal; color: #fff; background: var(--f-ink); opacity: 0; scale: .9; transition: opacity .3s, scale .3s var(--f-ease); }
.i-how-live.i-is-ready em { opacity: 1; scale: 1; }
.i-how-live em.i-is-press { scale: .88; }
/* The three steps under the plate (front.css .f-hw-steps, three of them). */
.i-how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

/* ───────── More (inner/More.astro) ───────── */
.i-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.i-more[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.i-more[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.i-more-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; height: 100%; padding: 10px; border-radius: var(--f-r-cell); background: var(--f-grey); transition: background-color .25s; }
.i-more-card:hover { background: #F3F3F5; }
.i-more-art { grid-column: 1 / -1; display: grid; place-items: center; height: 148px; margin-bottom: 18px; border-radius: 14px; }
.i-more-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: var(--f-ink); background: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / .7), 0 14px 30px -12px rgb(20 8 40 / .55); transition: transform .5s var(--f-ease); }
.i-more-ic .li { --s: 24px; --sw: 1.6; }
.i-more-card:hover .i-more-ic { transform: translateY(-3px) scale(1.04); }
.i-more-tx { display: grid; gap: 4px; min-width: 0; padding: 0 0 12px 12px; }
.i-more-tx b { font: 500 16.5px/1.3 var(--sans); letter-spacing: -.015em; color: var(--f-ink); }
.i-more-tx small { font-size: 14px; line-height: 1.45; color: var(--f-soft); text-wrap: pretty; }
.i-more-go { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 6px 12px 0; border-radius: 50%; color: var(--f-soft); background: #fff; box-shadow: 0 0 0 1px var(--f-line); transition: color .2s, transform .3s var(--f-ease); }
.i-more-go .f-li { --s: 15px; }
.i-more-card:hover .i-more-go { color: var(--f-ink); transform: translateX(3px); }

/* The questions on the grey plate, as on the home (front.css .f-faq): a step down from the section above. */
.page .f-faq { margin-top: 112px; }
.page .f-faq + .i-sec { padding-top: 112px; }

/* The close card (inner/Join.astro) is the home's (front.css .f-close). */
.page > .f-close:last-child { margin-bottom: -1px; }

/* ═════════════ Articles: about's story, a post, a CMS page, the legal pages ═════════════ */
.pg-article { width: min(720px, calc(100% - 2 * var(--f-gut))); margin: 0 auto; padding-top: 88px; }
.art-head { padding: 0 4px; }
.art-head .f-badge { margin-bottom: 24px; }
.back { display: inline-flex; align-items: center; gap: 8px; height: 32px; margin-bottom: 36px; padding: 0 14px 0 10px; border-radius: 999px; font: 500 13.5px/1 var(--sans); color: var(--f-soft); background: #fff; box-shadow: 0 0 0 1px var(--f-line-2); transition: color .2s, background .2s; }
.back:hover { color: var(--f-ink); background: #F6F6F7; }
.back .li { --s: 14px; --sw: 1.8; rotate: 180deg; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 500 12.5px/1.2 var(--sans); color: var(--f-mute); }
.post-meta > * + *::before { content: "·"; margin-right: 10px; }
.art-head .post-meta { margin-bottom: 20px; }
.art-head h1 { font: 500 clamp(36px, 5vw, 56px)/1.04 var(--sans); letter-spacing: -.045em; color: var(--f-ink); text-wrap: balance; }
.art-lead { margin-top: 22px; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--f-soft); text-wrap: pretty; }
.art-image { margin: 48px 0 0; overflow: hidden; border-radius: var(--f-r-cell); background: var(--f-grey); }
.art-image img { display: block; width: 100%; height: auto; }
.art-plate { display: grid; place-items: center; height: 280px; margin-top: 48px; border-radius: var(--f-r-plate); }
.pg-article .pg-empty { margin-top: 40px; }

/* The body: the CMS's Portable Text, or a page's own, in one readable column. No rule above it: white space only. */
.prose { margin-top: 56px; padding: 0 4px; font-size: 17px; line-height: 1.7; color: var(--f-ink-2); }
.prose > * + * { margin-top: 1.1em; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 2em; font: 500 26px/1.2 var(--sans); letter-spacing: -.03em; color: var(--f-ink); text-wrap: balance; }
.prose h3 { margin-top: 1.7em; font: 500 20px/1.3 var(--sans); letter-spacing: -.02em; color: var(--f-ink); }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose a, .prose-links a, .qa-a a { color: var(--f-ink); text-decoration: underline; text-decoration-color: rgba(17, 17, 19, .25); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.prose a:hover, .prose-links a:hover, .qa-a a:hover { text-decoration-color: var(--f-ink); }
.prose strong { font-weight: 600; color: var(--f-ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--f-mute); }
.prose blockquote { margin: 1.6em 0; padding: 18px 22px; border-radius: 16px; font-size: 19px; line-height: 1.55; color: var(--f-ink); background: var(--f-grey); }
.prose code { padding: 2px 6px; border-radius: 6px; font: 400 .88em/1 var(--mono); background: rgba(17, 17, 19, .05); }
.prose pre { overflow-x: auto; padding: 18px 20px; border-radius: 14px; font: 400 14px/1.6 var(--mono); background: var(--f-grey); }
.prose pre code { padding: 0; background: none; }
.prose img { display: block; max-width: 100%; height: auto; border-radius: 14px; }
.prose figure { margin: 2em 0; }
.prose figcaption { margin-top: 10px; font-size: 13.5px; color: var(--f-mute); }
.prose hr { height: 0; margin: 2.4em 0; border: 0; }
.pg-article .prose h2:first-child { margin-top: 0; }

/* A post's table of contents (blog/[slug].astro .toc): a grey card above the body; on wide screens a list left of the
   column that stays in view, the section you're reading in ink (inner.js). No lines: weight and colour only. */
.art-body { position: relative; display: flow-root; }
.toc { margin-top: 48px; }
.toc-in { padding: 22px 24px 20px; border-radius: var(--f-r-cell); background: var(--f-grey); }
.toc-h { margin-bottom: 10px; font: 500 12.5px/1.2 var(--sans); color: var(--f-mute); }
.toc ol { list-style: none; padding: 0; }
.toc .toc-sub { padding-left: 16px; }
.toc a { display: block; padding: 5px 0; font: 500 15px/1.35 var(--sans); letter-spacing: -.01em; color: var(--f-ink-2); text-wrap: pretty; transition: color .2s; }
.toc .toc-sub a { font-weight: 400; font-size: 14.5px; color: var(--f-soft); }
.toc a:hover, .toc a[aria-current="true"] { color: var(--f-ink); }
.has-toc .prose { margin-top: 40px; }
@media (min-width: 1280px) {
  .toc { position: absolute; top: 56px; bottom: 0; right: calc(100% + 56px); width: 216px; margin: 0; }
  .toc-in { position: sticky; top: 112px; max-height: calc(100vh - 140px); overflow-y: auto; padding: 0; border-radius: 0; background: none; }
  .toc a, .toc .toc-sub a { font-size: 14px; font-weight: 400; color: var(--f-mute); }
  .toc a:hover, .toc a[aria-current="true"], .toc .toc-sub a[aria-current="true"] { color: var(--f-ink); }
  .toc a[aria-current="true"] { font-weight: 500; }
  .has-toc .prose { margin-top: 56px; }
}

.pg-empty { display: grid; justify-items: start; gap: 6px; padding: 32px 28px; }
.pg-empty b { font: 500 17px/1.3 var(--sans); letter-spacing: -.02em; color: var(--f-ink); }
.pg-empty span { color: var(--f-soft); }
.pg-empty .i-btn { margin-top: 14px; }

/* ═════════════ The blog ═════════════ */
.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bl-card { display: grid; align-content: start; gap: 10px; height: 100%; padding: 10px 10px 26px; transition: background-color .25s; }
.bl-card:hover { background: #F3F3F5; }
.bl-art { display: grid; place-items: center; height: 200px; margin-bottom: 10px; border-radius: 14px; }
.bl-tile { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; background: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / .7), 0 14px 30px -12px rgb(20 8 40 / .55); transition: transform .5s var(--f-ease); }
.bl-tile .mk { --s: 28px; }
.bl-card:hover .bl-tile { transform: translateY(-3px) scale(1.04); }
.bl-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 0 16px; font: 500 12.5px/1.2 var(--sans); color: var(--f-mute); }
.bl-meta > * + *::before { content: "·"; margin-right: 10px; }
.bl-t { padding: 0 16px; font: 500 20px/1.25 var(--sans); letter-spacing: -.025em; color: var(--f-ink); text-wrap: balance; }
.bl-x { padding: 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--f-soft); text-wrap: pretty; }
.pager { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }

/* ═════════════ Pricing ═════════════ */
/* Three plans as skeletons (no numbers) on Candy, the middle one in ink, a light sweeping across the bars. */
.pr-plate { display: grid; place-items: center; padding: 64px 48px; border-radius: var(--f-r-plate); }
.pr-glass { max-width: 940px; }
.pr-plans { --bone: #ECECEF; position: relative; display: flex; justify-content: center; gap: 16px; padding: 56px 40px 92px; border-radius: 19px; background: #F7F7F8; box-shadow: 0 0 0 1px rgba(17, 17, 19, .06); }
.pr-plan { display: grid; align-content: start; gap: 12px; width: 250px; padding: 24px 20px 20px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .06), 0 12px 28px -16px rgba(0, 0, 0, .18); opacity: .75; }
.pr-mid { opacity: 1; translate: 0 -10px; box-shadow: 0 0 0 1.5px var(--f-ink), 0 24px 40px -20px rgba(0, 0, 0, .3); }
.pr-plans .ab { position: relative; overflow: hidden; background: var(--bone); }
.pr-price { display: flex; align-items: flex-end; gap: 6px; margin: 4px 0 2px; }
.pr-price i { width: 84px; height: 30px; border-radius: 8px; background: var(--bone); }
.pr-price small { width: 40px; height: 8px; margin-bottom: 3px; border-radius: 4px; background: var(--bone); }
.pr-plan ul { display: grid; gap: 12px; margin: 6px 0 4px; padding: 16px 0 0; border-top: 1px solid var(--f-line); }
.pr-plan li { display: flex; align-items: center; gap: 10px; }
.pr-plan li .ab { flex: none; }
.pr-tick { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--bone); }
.pr-mid .pr-tick { background: #DCDCE1; }
.pr-btn { height: 36px; margin-top: 8px; border-radius: 10px; background: var(--bone); }
.pr-mid .pr-btn { background: var(--f-ink); }
/* The light: a soft band across every bone, left to right, every few seconds. */
.pr-plans :is(.ab, .pr-price i, .pr-price small, .pr-tick, .pr-plan:not(.pr-mid) .pr-btn) { background-image: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .85) 50%, transparent 70%); background-size: 300% 100%; background-repeat: no-repeat; background-position: 150% 0; animation: pr-sweep 3.6s var(--f-ease) infinite; }
@keyframes pr-sweep { 0% { background-position: 150% 0; } 55%, 100% { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .pr-plans * { animation: none !important; } }
.pr-soon { position: absolute; left: 50%; bottom: 40px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px; font: 500 14px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; color: var(--f-ink); background: #fff; box-shadow: 0 0 0 1px var(--f-line-2), 0 12px 28px -14px rgba(0, 0, 0, .25); translate: -50% 0; }
.pr-soon .mk { --s: 18px; }
.pr-known { margin-top: 0; }

/* ═════════════ The roadmap: a board in a window on Dusk ═════════════ */
.rd-plate { display: grid; place-items: center; padding: 64px 48px; border-radius: var(--f-r-plate); }
.rd-glass { max-width: 1088px; }
.rd-board { overflow: hidden; border-radius: 19px; background: #F7F7F8; box-shadow: 0 0 0 1px rgba(17, 17, 19, .06); }
.rd-bar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px; border-bottom: 1px solid var(--f-line); background: #fff; }
.rd-bar .mk { --s: 20px; }
.rd-bar b { font: 500 14.5px/1 var(--sans); letter-spacing: -.01em; color: var(--f-ink); }
.rd-bar small { margin-left: auto; font-size: 13px; color: var(--f-mute); }
.rd-bar small a { color: var(--f-ink-2); text-decoration: underline; text-decoration-color: rgba(17, 17, 19, .25); text-underline-offset: 3px; }
.rd-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.rd-col { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 14px; border-radius: 16px; background: #EFEFF1; }
.rd-col-h { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 10px; padding: 4px 4px 8px; }
.rd-col-h h2 { font: 500 20px/1.1 var(--sans); letter-spacing: -.03em; color: var(--f-ink); }
.rd-count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--f-soft); background: #fff; box-shadow: inset 0 0 0 1px var(--f-line); }
.rd-col-h p { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.45; color: var(--f-soft); }
.rd-col ul { display: grid; gap: 8px; }
.rd-card { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 12px; padding: 14px 14px 14px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .06), 0 6px 14px -10px rgba(0, 0, 0, .18); transition: box-shadow .25s, translate .3s var(--f-ease); }
.rd-card:hover { translate: 0 -2px; box-shadow: 0 0 0 1px rgba(17, 17, 19, .12), 0 14px 24px -14px rgba(0, 0, 0, .28); }
.rd-ic { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--f-ink-2); box-shadow: inset 0 0 0 1px var(--f-line); }
.rd-ic .li { --s: 16px; }
.rd-tx { display: grid; gap: 3px; min-width: 0; }
.rd-tx b { font: 500 14.5px/1.3 var(--sans); letter-spacing: -.01em; color: var(--f-ink); }
.rd-tx small { font-size: 13px; line-height: 1.45; color: var(--f-soft); }
.rd-st { grid-column: 2; display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 6px; padding: 4px 9px 4px 7px; border-radius: 999px; font: 500 11.5px/1 var(--sans); font-style: normal; color: var(--f-soft); background: #F4F4F5; }
.rd-st i { width: 6px; height: 6px; border-radius: 50%; background: #C4C4CB; }
.rd-is-now .rd-st { color: #0E7A3D; background: #E9F6EE; }
.rd-is-now .rd-st i { background: var(--f-ok); }
.rd-is-next .rd-st { color: var(--f-ink-2); }
.rd-is-next .rd-st i { background: var(--f-ink-2); animation: f-hw-blink 1.6s ease-in-out infinite; }
/* Coming in: each column's cards one after another once the board is in view. */
.f-js .rd-glass .rd-card { opacity: 0; translate: 0 8px; transition: opacity .6s var(--f-ease), translate .7s var(--f-ease), box-shadow .25s; transition-delay: calc(var(--k, 0) * 70ms + 200ms); }
.f-js .rd-glass.f-in .rd-card { opacity: 1; translate: none; }
.f-js .rd-glass.f-in .rd-card:hover { translate: 0 -2px; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .f-js .rd-glass .rd-card { opacity: 1; translate: none; transition: none; } }

/* ═════════════ About ═════════════ */
.ab-plate { display: grid; place-items: center; padding: 64px 48px; border-radius: var(--f-r-plate); }
.ab-glass { max-width: 560px; }
.ab-win { overflow: hidden; border-radius: 19px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .06); text-align: left; }
.ab-win-h { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-bottom: 1px solid var(--f-line); }
.ab-win-h .mk { --s: 20px; }
.ab-win-h b { font: 500 14.5px/1 var(--sans); color: var(--f-ink); }
.ab-win-h small { margin-left: auto; font-size: 13px; color: var(--f-soft); transition: opacity .3s; }
.ab-win ul { display: grid; padding: 6px 0; }
.ab-row-p { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 52px; padding: 0 18px; font-size: 13.5px; color: var(--f-soft); transition: background-color .4s, opacity .4s; }
.ab-row-p + .ab-row-p { border-top: 1px solid rgba(17, 17, 19, .05); }
.ab-row-p img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; filter: grayscale(.6); opacity: .7; transition: filter .4s, opacity .4s; }
.ab-row-p em { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; font: 500 12px/1 var(--sans); font-style: normal; color: var(--f-mute); background: #F4F4F5; transition: color .3s, background-color .3s; }
.ab-row-p em i { width: 6px; height: 6px; border-radius: 50%; background: #C4C4CB; transition: background-color .3s; }
.ab-row-p.ab-is-in { color: var(--f-ink); }
.ab-row-p.ab-is-in img { filter: none; opacity: 1; }
.ab-row-p.ab-is-in em { color: #0E7A3D; background: #E9F6EE; }
.ab-row-p.ab-is-in em i { background: var(--f-ok); }
.ab-row-p.ab-is-new { background: #FAFAFB; }
.ab-row-p.ab-is-new em { animation: f-cm-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
.ab-win-f { padding: 14px 18px; border-top: 1px solid var(--f-line); font-size: 13px; color: var(--f-mute); background: #FAFAFA; }
/* The story: each part a row, its heading on the left, the text on the right, white space between them. */
.ab-story { display: grid; gap: 72px; padding: 112px 24px 0; }
.ab-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
.ab-row h2 { font: 500 clamp(26px, 2.6vw, 32px)/1.12 var(--sans); letter-spacing: -.035em; color: var(--f-ink); text-wrap: balance; }
.ab-row .prose { margin-top: 0; padding: 0; }

/* ═════════════ Contact (pages/contact.astro) ═════════════ */
/* The form (after LanderLab's) on a grey card on the right; on the left an email being written to the team on Lagoon
   (a drawing, inner.js types it), then the other ways to reach us on a grey card. Neutral throughout: the picked
   chip, the focused field and the ticked box are ink, and only an error is coloured. The fields are white, as the
   home's windows are on its grey cells. */
.ct { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "side card"; gap: 12px; align-items: start; }
.ct-side { grid-area: side; display: grid; gap: 12px; min-width: 0; }
.ct-card { grid-area: card; padding: 36px; scroll-margin-top: 96px; }
.ct-plate { display: grid; place-items: center; padding: 40px 28px; border-radius: var(--f-r-cell); }
.ct-glass { max-width: 420px; }
.ct-mw { display: grid; overflow: hidden; border-radius: 19px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .06); text-align: left; font-size: 13.5px; }
.ct-mw-row { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 18px; border-bottom: 1px solid var(--f-line); color: var(--f-ink); white-space: nowrap; overflow: hidden; }
.ct-mw-row small { width: 52px; flex: none; font-size: 12.5px; color: var(--f-mute); }
.ct-mw-row b { font-weight: 500; }
.ct-mw-body { min-height: 110px; padding: 16px 18px; line-height: 1.55; color: var(--f-ink-2); }
.ct-mw-send { display: flex; align-items: center; gap: 12px; padding: 0 12px 12px; }
.ct-send-b { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 14px; border-radius: 9px; font-weight: 500; color: #fff; background: var(--f-ink); transition: scale .15s; }
.ct-send-b .f-li { --s: 14px; --sw: 2; }
.ct-send-b.i-is-press { scale: .9; }
.ct-mw-send small { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #0E7A3D; opacity: 0; transition: opacity .3s; }
.ct-mw-send small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--f-ok); }
.ct-mw.i-is-sent .ct-mw-send small { opacity: 1; }
.ct-aside { padding: 28px 24px 16px; }

.ct-mail { display: grid; gap: 8px; padding: 0 4px; }
.ct-mail small { font-size: 13px; color: var(--mute); }
.ct-mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ct-mail-row a { font: 500 clamp(20px, 2vw, 24px)/1.2 var(--sans); letter-spacing: -.03em; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.ct-mail-row a:hover { color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.ct-copy { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; font: 500 12.5px/1 var(--sans); color: var(--soft); background: #fff; box-shadow: 0 0 0 1px var(--line-2); transition: color .2s, background .2s; }
.ct-copy:hover { color: var(--ink); background: #fff; }
.ct-copy .li { --s: 13px; --sw: 1.8; }

.ct-ways { display: grid; gap: 2px; margin: 22px -12px 0 !important; }
.ct-way { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; text-decoration: none; transition: background .2s; }
.ct-way:hover { background: #fff; }
.ct-way-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--soft); background: #fff; box-shadow: 0 0 0 1px var(--line); transition: color .2s; }
.ct-way-ic .li { --s: 17px; --sw: 1.6; }
.ct-way:hover .ct-way-ic { color: var(--ink); }
.ct-way-tx b { display: block; font: 500 15px/1.3 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.ct-way-tx small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--soft); }
.ct-way-go { --s: 15px; --sw: 1.8; color: var(--mute); transition: translate .3s var(--ease), color .2s; }
.ct-way:hover .ct-way-go { color: var(--ink); translate: 3px 0; }

.ct-title { font: 500 22px/1.2 var(--sans); letter-spacing: -.03em; color: var(--ink); outline: 0; }
.ct-form { display: grid; gap: 20px; }
.ct-alert { padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; color: var(--bad); background: #FBF0EC; outline: 0; }

.ct-label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font: 500 13.5px/1.25 var(--sans); color: var(--ink-2); }
.ct-opt { margin-left: auto; font-weight: 400; font-size: 12.5px; color: var(--mute); }
.ct-field { display: grid; align-content: start; min-width: 0; }
.ct-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
.ct-input { width: 100%; height: 44px; margin: 0; padding: 0 14px; border: 0; border-radius: 12px; outline: 0; font: 400 15px/1.3 var(--sans); color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .1); -webkit-appearance: none; appearance: none; transition: background .2s, box-shadow .2s; }
.ct-input::placeholder { color: #9A9AA2; }
.ct-input:hover { box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .18); }
.ct-input:focus { background: #fff; box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 3px rgba(17, 17, 19, .07); }
.ct-input[aria-invalid="true"] { background: #fff; box-shadow: inset 0 0 0 1px var(--bad); }
.ct-input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--bad), 0 0 0 3px rgba(194, 51, 15, .1); }
textarea.ct-input { height: auto; min-height: 140px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.ct-select { position: relative; display: block; }
.ct-select::after { content: ""; position: absolute; top: 50%; right: 16px; width: 7px; height: 7px; border-right: 1.5px solid var(--soft); border-bottom: 1.5px solid var(--soft); rotate: 45deg; translate: 0 -70%; pointer-events: none; }
select.ct-input { padding-right: 38px; text-overflow: ellipsis; cursor: pointer; }
select.ct-input:has(> option[value=""]:checked) { color: #9A9AA2; }
.ct-err { margin-top: 7px; font-size: 12.5px; line-height: 1.4; color: var(--bad); }
.ct-err:empty { display: none; }

/* Each topic's own questions show while its chip is picked (the page writes the rules from src/data/contact.ts). */
.ct-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px 14px; }
.ct-extra { display: none; }

.ct-topics { min-width: 0; margin: 0; padding: 0; border: 0; }
.ct-topics legend { padding: 0; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-chip { position: relative; display: inline-flex; }
.ct-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ct-chip span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; font: 500 13.5px/1 var(--sans); letter-spacing: -.01em; color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .1); pointer-events: none; transition: background .2s, color .2s; }
.ct-chip:hover span { box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .2); }
.ct-chip input:checked + span { color: #fff; background: var(--ink); box-shadow: none; }
.ct-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.ct-check { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.4; color: var(--ink); cursor: pointer; }
.ct-check input { display: grid; place-content: center; flex: none; width: 18px; height: 18px; margin: 1px 0 0; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .2); -webkit-appearance: none; appearance: none; cursor: pointer; transition: background .2s; }
.ct-check input:checked { background: var(--ink); box-shadow: none; }
.ct-check input:checked::after { content: ""; width: 9px; height: 5px; border-bottom: 1.8px solid #fff; border-left: 1.8px solid #fff; rotate: -45deg; translate: 0 -1px; }
.ct-check input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ct-check small { display: block; margin-top: 2px; font-size: 13px; color: var(--mute); }

.ct-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
.ct-go .li { --s: 15px; --sw: 1.9; transition: translate .3s var(--ease); }
.ct-go:hover .li { translate: 3px 0; }
.ct-go:disabled { cursor: progress; background: var(--ink-2); }
.ct-go:disabled .li { display: none; }
.ct-fine { font-size: 13px; color: var(--mute); }
.ct-fine a { color: var(--soft); text-decoration: underline; text-underline-offset: 3px; }
.ct-fine a:hover { color: var(--ink); }

/* Sent: the card says so, and offers the next thing to do. */
.ct-done { display: grid; justify-items: start; gap: 12px; padding: 8px 0 4px; }
.ct-done-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%; color: #fff; background: var(--ink); }
.ct-done-ic .li { --s: 20px; --sw: 2; }
.ct-done p { max-width: 440px; font-size: 16px; line-height: 1.55; color: var(--soft); }
.ct-done p b { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.ct-done .ct-done-note { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
.ct-done-note .li { --s: 15px; --sw: 2; margin-top: 3px; color: var(--ok); }
.ct-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* ═════════════ Examples ═════════════ */
.xp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 12px; }
.xp-plate { display: grid; place-items: center; padding: 40px; border-radius: var(--f-r-plate); }
.xp-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 18px 8px 0; font-size: 14px; line-height: 1.45; color: var(--f-soft); }
.xp-info b { font-weight: 500; color: var(--f-ink); }
.xp-info a { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 500; color: var(--f-ink); }
.xp-info a .f-li { --s: 15px; transition: transform .3s var(--f-ease); }
.xp-info a:hover .f-li { transform: translateX(2px); }

/* ═════════════ The changelog ═════════════ */
.lg-list { display: grid; gap: 12px; }
.lg-item { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px 32px; align-items: start; }
.lg-when { display: grid; justify-items: start; gap: 10px; padding-top: 30px; font-size: 14px; color: var(--f-soft); }
.lg-card { padding: 28px 32px 30px; }
.lg-card h2 { font: 500 22px/1.25 var(--sans); letter-spacing: -.03em; color: var(--f-ink); text-wrap: balance; }
.lg-card p { max-width: 640px; margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--f-ink-2); text-wrap: pretty; }

/* ═════════════ 404 ═════════════ */
.pg-404 { display: grid; justify-items: center; gap: 18px; padding: 56px 24px 0; text-align: center; }
.pg-404-game { width: 100%; padding: 40px 0 24px; }
.pg-404 .f-badge { margin-top: 36px; }
.pg-404 h1 { font: 500 clamp(40px, 5.4vw, 64px)/1.02 var(--sans); letter-spacing: -.045em; color: var(--f-ink); text-wrap: balance; }
.pg-sub { max-width: 520px; font-size: 18px; line-height: 1.5; color: var(--f-soft); }
.pg-404 + * { margin-top: 0; }
/* The game (runner.js): the mark stands on a ground line that fades out at both ends, and slides once it's played. The
   score sits at the top right once there is one, and one line of help in the middle blurs in when there's something to
   say. The canvas's height is the script's 184 world units at its scale: the width over 700, between .72 and 1.2. */
.rn { --fade: min(12%, 96px); position: relative; container-type: inline-size; width: 100%; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.rn canvas { display: block; width: 100%; height: clamp(132.48px, 26.2857cqw, 220.8px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }
.rn-score { position: absolute; top: 4px; right: var(--fade); display: flex; gap: 16px; font: 500 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--f-mute); opacity: 0; transition: opacity .3s; }
.rn-score b { font-weight: 500; color: var(--f-ink-2); }
.rn-score [data-best] b { color: var(--f-mute); }
.rn.is-played .rn-score { opacity: 1; }
.rn-hint { position: absolute; top: 27%; left: 50%; width: max-content; max-width: 88%; font-size: 14px; line-height: 1.5; color: var(--f-soft); text-wrap: balance; pointer-events: none; translate: -50% 0; transition: opacity .18s, filter .18s; }
.rn-hint.is-gone { opacity: 0; filter: blur(3px); }
.rn-hint.is-in { animation: rnIn .34s var(--f-ease); }
.rn-hint kbd { display: inline-block; min-width: 22px; margin: 0 2px; padding: 3px 6px; border-radius: 6px; font: 500 12px/1 var(--sans); color: var(--f-ink-2); text-align: center; background: #fff; box-shadow: 0 0 0 1px var(--f-line-2); }
@keyframes rnIn { from { opacity: 0; filter: blur(4px); translate: -50% 4px; } }
@media (prefers-reduced-motion: reduce) { .rn-hint.is-in { animation: none; } .rn-hint { transition: none; } }
.page:has(> .pg-404) { padding-bottom: 120px; }

/* ═════════════ The comparisons (pages/compare/) ═════════════ */
/* The two ways side by side on the plate: their steps, and one sentence with its plan, each in a glass rim. */
.vs-plate { display: grid; place-items: center; padding: 64px 48px; border-radius: var(--f-r-plate); }
.vs-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; width: 100%; max-width: 940px; }
.vs-pair > .lp-glass:last-child { margin-top: 40px; }
.vs-win { overflow: hidden; border-radius: 19px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .06); text-align: left; font-size: 13.5px; }
.vs-h { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-bottom: 1px solid var(--f-line); }
.vs-h b { font: 500 14.5px/1 var(--sans); color: var(--f-ink); }
.vs-h .mk { --s: 20px; }
.vs-av { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px; font: 600 12px/1 var(--sans); color: #fff; background: #8A8A93; }
.vs-steps { display: grid; padding: 8px 0; }
.vs-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 50px; padding: 8px 18px; color: var(--f-ink-2); }
.vs-steps li + li { border-top: 1px solid rgba(17, 17, 19, .05); }
.vs-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--f-soft); box-shadow: inset 0 0 0 1px var(--f-line-2); }
.vs-ask { display: flex; align-items: center; gap: 10px; margin: 12px; padding: 10px 7px 10px 14px; border-radius: 12px; line-height: 1.4; color: var(--f-ink); box-shadow: inset 0 0 0 1px var(--f-line-2); }
.vs-ask > span:first-child { flex: 1; }
.vs-go { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; color: #fff; background: var(--f-ink); }
.vs-go .f-li { --s: 14px; --sw: 2; }
.vs-plan { border-top: 1px solid var(--f-line); }
.vs-plan li { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 18px; }
.vs-plan li + li { border-top: 1px solid rgba(17, 17, 19, .05); }
.vs-plan b { font-weight: 500; color: var(--f-ink); }
.vs-ck { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: var(--f-ink); }
.vs-ck .f-li { --s: 11px; --sw: 2.6; }
.vs-live { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-top: 1px solid var(--f-line); font-size: 13px; color: var(--f-ink); background: #FAFAFA; }
.vs-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--f-ok); box-shadow: 0 0 0 4px rgb(18 161 80 / .14); }
/* Coming in: the steps and the plan one after another. */
.f-js .vs-glass :is(.vs-steps li, .vs-plan li) { opacity: 0; translate: 0 6px; transition: opacity .5s var(--f-ease), translate .6s var(--f-ease); }
.f-js .vs-glass.f-in :is(.vs-steps li, .vs-plan li) { opacity: 1; translate: none; }
.f-js .vs-glass.f-in :is(.vs-steps, .vs-plan) li:nth-child(2) { transition-delay: .25s; }
.f-js .vs-glass.f-in :is(.vs-steps, .vs-plan) li:nth-child(3) { transition-delay: .5s; }
.f-js .vs-glass.f-in :is(.vs-steps, .vs-plan) li:nth-child(4) { transition-delay: .75s; }
@media (prefers-reduced-motion: reduce) { .f-js .vs-glass :is(.vs-steps li, .vs-plan li) { opacity: 1; translate: none; transition: none; } }
.vs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The table, on a white sheet in a grey cell: the part, Flinter's side, theirs. */
.vs-sheet { padding: 10px; }
.vs-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .05); text-align: left; font-size: 14.5px; line-height: 1.5; }
.vs-table th, .vs-table td { padding: 16px 20px; vertical-align: top; }
.vs-table thead th { font: 500 14px/1 var(--sans); color: var(--f-ink); background: #FAFAFA; border-bottom: 1px solid var(--f-line); }
.vs-table thead th:first-child { width: 22%; }
.vs-table thead th .mk, .vs-table thead th .vs-av { margin-right: 8px; vertical-align: -5px; }
.vs-table thead th .mk { --s: 18px; vertical-align: -4px; }
.vs-table tbody th { font-weight: 500; color: var(--f-ink); }
.vs-table td { color: var(--f-ink-2); }
.vs-table td[data-who="Flinter"] { background: #FCFCFD; }
.vs-table tbody tr + tr > * { border-top: 1px solid rgba(17, 17, 19, .06); }
.vs-src { padding: 18px 12px 8px; font-size: 13px; line-height: 1.6; color: var(--f-mute); }
.vs-src a { color: var(--f-soft); text-decoration: underline; text-decoration-color: rgba(17, 17, 19, .2); text-underline-offset: 3px; }
.vs-src a:hover { color: var(--f-ink); }

/* When to choose each: two grey cells. */
.vs-choose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vs-col { padding: 32px; }
.vs-col h3 { display: flex; align-items: center; gap: 10px; font: 500 20px/1.25 var(--sans); letter-spacing: -.025em; color: var(--f-ink); }
.vs-col h3 .mk { --s: 22px; }
.vs-col ul { display: grid; gap: 14px; margin-top: 22px !important; }
.vs-col li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; font-size: 15.5px; line-height: 1.5; color: var(--f-ink-2); }
.vs-col li .f-li { --s: 16px; --sw: 2.2; margin-top: 3px; color: var(--f-ink); }
/* The index's cards: the mark, "vs", their initial. */
.vs-ic-pair { width: auto !important; gap: 8px; padding: 0 14px; grid-auto-flow: column; }
.vs-ic-pair .mk { --s: 22px; }
.vs-ic-pair em { font: 500 12px/1 var(--sans); font-style: normal; color: var(--f-mute); }
.vs-index { margin-top: 8px; }

/* ═════════════ The SEO checker (pages/tools/seo-checker.astro) ═════════════ */
.sc-ask { margin-top: 12px; width: min(640px, 100%) !important; }
.sc-plate { display: grid; place-items: center; padding: 64px 48px; border-radius: var(--f-r-plate); scroll-margin-top: 88px; }
.sc-bar .chip[hidden] { display: none; }
.sc-glass { max-width: 1040px; }
.sc-win { overflow: hidden; border-radius: 19px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .06); text-align: left; transition: opacity .3s; }
.sc-win:focus { outline: none; }
.sc-win.sc-is-busy { opacity: .55; }
.sc-win.sc-is-new .sc-row, .sc-win.sc-is-new .sc-preview { animation: f-arrive .6s var(--f-ease) backwards; }
.sc-win.sc-is-new .sc-group:nth-child(2) .sc-row { animation-delay: .08s; }
.sc-win.sc-is-new .sc-group:nth-child(3) .sc-row { animation-delay: .16s; }
.sc-bar { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 20px; border-bottom: 1px solid var(--f-line); }
.sc-bar .mk { --s: 20px; }
.sc-bar h2 { overflow: hidden; font: 500 15px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; color: var(--f-ink); }
.sc-bar small { margin-left: auto; padding: 6px 10px; border-radius: 999px; font: 500 12.5px/1 var(--sans); white-space: nowrap; color: var(--f-ink-2); background: #F4F4F5; }
/* The search result, as it would show. */
.sc-preview { display: grid; gap: 6px; padding: 22px 24px; border-bottom: 1px solid var(--f-line); background: #FCFCFD; }
.sc-url { display: flex; align-items: center; gap: 10px; }
.sc-fav { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; font: 600 12px/1 var(--sans); color: var(--f-ink-2); background: #fff; box-shadow: 0 0 0 1px var(--f-line-2); }
.sc-url > span:last-child { display: grid; gap: 2px; min-width: 0; }
.sc-url b { font: 500 13.5px/1.2 var(--sans); color: var(--f-ink); }
.sc-url small { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; color: var(--f-mute); }
.sc-t { font: 500 20px/1.3 var(--sans); letter-spacing: -.015em; color: #1B3A8C; text-wrap: balance; }
.sc-d { max-width: 640px; font-size: 14px; line-height: 1.5; color: var(--f-soft); text-wrap: pretty; }
/* The checks, a group a column. */
.sc-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-group { padding: 20px 20px 22px; }
.sc-group + .sc-group { box-shadow: inset 1px 0 0 rgba(17, 17, 19, .06); }
.sc-group h3, .sc-bots h3 { margin-bottom: 12px; font: 500 13px/1.3 var(--sans); color: var(--f-mute); }
.sc-group ul { display: grid; gap: 14px; }
.sc-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.sc-row b { display: block; font: 500 14px/1.35 var(--sans); color: var(--f-ink); }
.sc-row small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--f-soft); overflow-wrap: anywhere; }
.sc-st { position: relative; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; }
.sc-st::after { content: ""; position: absolute; inset: 0; margin: auto; }
.sc-row[data-state="pass"] .sc-st { background: var(--f-ok); }
.sc-row[data-state="pass"] .sc-st::after { width: 8px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -1px; }
.sc-row[data-state="warn"] .sc-st { background: #E9A23B; }
.sc-row[data-state="warn"] .sc-st::after { width: 2px; height: 8px; border-radius: 1px; background: #fff; box-shadow: 0 10px 0 -0 transparent; translate: 0 -1px; }
.sc-row[data-state="fail"] .sc-st { background: #D9432B; }
.sc-row[data-state="fail"] .sc-st::after { width: 8px; height: 2px; border-radius: 1px; background: #fff; }
.sc-bots { padding: 18px 20px 20px; border-top: 1px solid var(--f-line); background: #FAFAFA; }
.sc-bots ul { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-bot { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px; border-radius: 999px; font: 500 12.5px/1 var(--sans); color: #0E7A3D; background: #E9F6EE; }
.sc-bot i { width: 6px; height: 6px; border-radius: 50%; background: var(--f-ok); }
.sc-bot.sc-is-no { color: #A3321F; background: #FBEAE6; }
.sc-bot.sc-is-no i { background: #D9432B; }
.sc-what { margin-top: 0; }

/* ═════════════ Tablets and phones ═════════════ */
@media (max-width: 980px) {
  .f-cell.lp-is-half, .f-cell.lp-is-third { grid-column: span 1; }
  .lp-bento .f-cell.f-is-md { grid-column: span 1; }
  .pr-known .f-cell.lp-is-third:last-child { grid-column: span 2; }
  .lp-plate, .i-how, .pr-plate, .rd-plate, .ab-plate { padding: 48px 28px; }
  .lp-sites { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .i-more, .i-more[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i-more[data-n="3"] > li:last-child { grid-column: span 2; }
  .rd-cols { grid-template-columns: minmax(0, 1fr); }
  .xp-grid { grid-template-columns: minmax(0, 1fr); }
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pr-plan:not(.pr-mid) { display: none; }
  .pr-mid { translate: none; }
  .lg-item { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lg-when { grid-auto-flow: column; align-items: center; padding: 0 4px 12px; }
}
@media (max-width: 640px) {
  .is-inner .hd-shell { padding: 0 16px; }
  /* No room for shoulders on a phone: the footer's top goes square under the close card (front.css does it for the home). */
  .is-inner .foot { border-top-left-radius: 0; border-top-right-radius: 0; }
  .i-sec { padding-bottom: 32px; }
  .lp-plate, .i-how, .pr-plate, .rd-plate, .ab-plate, .xp-plate { padding: 24px 12px; }
  .lp-glass { padding: 6px; border-radius: 22px; }
  .lp-tray { min-height: 340px; padding: 40px 12px; border-radius: 17px; }
  .lp-pic .fc-stage { height: 340px; }
  .lp-pic .fs { scale: .8; }
  .f-cell.lp-is-half, .f-cell.lp-is-third, .lp-bento .f-cell.f-is-md, .pr-known .f-cell.lp-is-third:last-child { grid-column: auto; }
  .i-how-steps { grid-template-columns: minmax(0, 1fr) !important; }
  .i-how-plan { width: calc(100% - 20px); }
  .i-how-tx { font-size: 15.5px; line-height: 24px; min-height: 72px; }
  .i-more, .i-more[data-n="2"], .i-more[data-n="4"] { grid-template-columns: minmax(0, 1fr); }
  .i-more[data-n="3"] > li:last-child { grid-column: auto; }
  .page .f-faq { margin-top: 72px; }
  .page .f-faq + .i-sec { padding-top: 72px; }
  .pg-article { padding-top: 56px; }
  .back { margin-bottom: 28px; }
  .art-image, .art-plate { margin-top: 36px; }
  .art-plate { height: 200px; }
  .prose { margin-top: 40px; font-size: 16.5px; }
  .prose h2 { font-size: 23px; }
  .bl-grid { grid-template-columns: minmax(0, 1fr); }
  .pr-plans { padding: 40px 16px 88px; }
  .pr-soon { bottom: 28px; font-size: 13px; }
  .rd-bar small { display: none; }
  .rd-cols { padding: 10px; }
  .ab-story { gap: 48px; padding: 72px 16px 0; }
  .xp-grid { gap: 40px; }
  .xp-info a { margin-left: 0; }
  .lg-card { padding: 24px 22px; }
  .pg-404 { padding: 32px 16px 0; }
  .pg-sub { font-size: 16px; }
}

/* The comparisons and the checker on smaller screens. */
@media (max-width: 980px) {
  .ct { grid-template-columns: minmax(0, 1fr); grid-template-areas: "card" "side"; }
  .vs-plate, .sc-plate { padding: 48px 28px; }
  .sc-groups { grid-template-columns: minmax(0, 1fr); }
  .sc-group + .sc-group { box-shadow: inset 0 1px 0 rgba(17, 17, 19, .06); }
  .vs-choose { grid-template-columns: minmax(0, 1fr); }
  .sc-what .f-cell.lp-is-third:last-child { grid-column: span 2; }
}
@media (max-width: 720px) {
  .vs-pair { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vs-pair > .lp-glass:last-child { margin-top: 0; }
  /* The table becomes one card a part: the part's name, then each side labelled. */
  .vs-table thead { display: none; }
  .vs-table, .vs-table tbody, .vs-table tr, .vs-table th, .vs-table td { display: block; width: auto; }
  .vs-table tbody tr { padding: 14px 16px 16px; }
  .vs-table tbody tr + tr { border-top: 1px solid rgba(17, 17, 19, .06); }
  .vs-table tbody tr + tr > * { border-top: 0; }
  .vs-table tbody th { padding: 0 0 8px; }
  .vs-table td { padding: 6px 0 0; background: none !important; }
  .vs-table td::before { content: attr(data-who) ": "; font-weight: 500; color: var(--f-ink); }
}
@media (max-width: 640px) {
  .ct-card { padding: 24px 18px; }
  .ct-row { grid-template-columns: minmax(0, 1fr); }
  .ct-opt { margin-left: 0; }
  .ct-go { flex: 1 1 100%; }
  .ct-plate { padding: 24px 12px; }
  .ct-aside { padding: 22px 16px 12px; }
  .vs-plate, .sc-plate { padding: 24px 12px; }
  .vs-col { padding: 24px 20px; }
  .sc-what .f-cell.lp-is-third:last-child { grid-column: auto; }
  .sc-bar small { display: none; }
  .sc-preview { padding: 18px 16px; }
  .sc-t { font-size: 18px; }
  .sc-group, .sc-bots { padding: 16px; }
}