/* The landing page's one stylesheet. Nothing is asked of any other host: the
   typeface is a file of ours (fonts/, Geist, SIL Open Font Licence).

   The colours, and where each comes from:
     #09090b  the page            the product's own dark (dashboard)
     #0d0d10  the frame           header, menu, Lois's chat (dashboard)
     #121214  a raised surface    (dashboard)
     #1c1c22  what Lois says      her bubble (dashboard)
     #27272a  a line              (dashboard)
     #fafafa  words               (dashboard)
     #a1a1aa  quieter words       (dashboard)
     #e7c9a0  not yet             the beige of Lois's hat: Launching soon, and
                                  nothing else (a dashed line in it means
                                  "decided, not built")
   and two that do one job each: #4f46e5 the one button (dashboard, light),
   #4ade80 "it is working" (dashboard).
   Marked (dashboard) where a value is copied from
   platform/web/src/app/globals.css or components/ui.tsx.

   LAYOUT. Every section runs the whole width of the screen, with the same
   side margin (--pad) and the same room above and below (--sec). What stays
   narrow is a paragraph, never a section.

   The application drawn on this page (.dash, .scr) is sized in em, and its em
   follows the room it is given: it grows and shrinks like a picture and
   stays sharp at any size.

   MOTION is small and all of it sits in one block near the end, inside "the
   reader has not asked for less motion". The script (motion.js) puts "js" on
   <html>; without it, or with less motion asked for, every rule here leaves
   the page whole and still. */

@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin-1b5ebfb3.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --background: #09090b;          /* (dashboard, dark) */
  --surface: #121214;             /* (dashboard, dark) */
  --panel: #0d0d10;               /* (dashboard, dark) the frame: header, menu, Lois's chat */
  --bubble: #1c1c22;              /* (dashboard, dark) what Lois says */
  --border: #27272a;              /* (dashboard, dark) */
  --foreground: #fafafa;          /* (dashboard, dark) */
  --muted: #a1a1aa;               /* (dashboard, dark) */
  --accent: #4f46e5;              /* (dashboard, light) — white on the dark one, #6366f1, is 4.4 to 1 */
  --accent-foreground: #ffffff;
  --accent-hover: #4338ca;
  --graph: #6366f1;               /* (dashboard, dark) the bars of Visitors */
  --ring: #818cf8;
  --ok: #4ade80;                  /* (dashboard, dark) */
  --ok-surface: #0f2417;          /* (dashboard, dark) */
  --warm: #e7c9a0;                /* the beige of Lois's hat: "not yet" — Launching soon, and nothing else */
  --radius: 0.5rem;               /* (dashboard) */
  --pad: clamp(1.25rem, 5vw, 7.5rem);   /* the side margin of every section */
  --sec: clamp(4rem, 10vh, 7.5rem);     /* the room above and below every section */
  --bar: 4.125rem;                      /* the height of the top bar */
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* The light page. Written twice on purpose: once for a reader whose machine
   asks for light (unless they chose dark with the switch), once for a reader
   who chose light with the switch. Keep the two the same. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --background: #ffffff;        /* (dashboard, light) */
    --surface: #fafafa;
    --panel: #f7f7f9;
    --bubble: #ececf1;
    --border: #e4e4e7;
    --foreground: #18181b;
    --muted: #5f5f68;             /* the dashboard's #71717a made one step darker: this page sets it smaller */
    --graph: #4f46e5;
    --ring: #4f46e5;
    --ok: #15803d;
    --ok-surface: #f0fdf4;
    --warm: #7a5a2e;
  }
}
:root[data-theme="light"] {
  --background: #ffffff;        /* (dashboard, light) */
  --surface: #fafafa;
  --panel: #f7f7f9;
  --bubble: #ececf1;
  --border: #e4e4e7;
  --foreground: #18181b;
  --muted: #5f5f68;             /* the dashboard's #71717a made one step darker: this page sets it smaller */
  --graph: #4f46e5;
  --ring: #4f46e5;
  --ok: #15803d;
  --ok-surface: #f0fdf4;
  --warm: #7a5a2e;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 1rem); }
body {
  margin: 0; background: var(--background); color: var(--foreground);
  font-family: var(--sans); font-size: 1rem; line-height: 1.5rem;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; }   /* (dashboard) */

.skip { position: absolute; left: -999rem; top: 0; background: var(--background); padding: 0.75rem 1rem; z-index: 6; }
.skip:focus { left: 0.5rem; top: 0.5rem; }
.band { padding-left: var(--pad); padding-right: var(--pad); }

/* ---- the bar across the top: the same on every page */
.top {
  position: sticky; top: 0; z-index: 5; height: var(--bar);
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0 var(--pad);
  background: var(--background); border-bottom: 1px solid var(--border);
}
.mark { display: inline-flex; padding: 0.375rem 0; }
.mark img { display: block; width: 8.75rem; height: auto; }
/* (dashboard) the Beta mark beside the name: Shell.tsx, data-testid="beta-mark" */
.beta-mark, .scr-beta {
  display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px;
  padding: 0.125rem 0.5rem; font-size: 0.6875rem; line-height: 1rem; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.scr-beta { font-size: 0.9em; padding: 0.1em 0.7em; line-height: 1.5; margin-left: -0.6em; }
.top .beta-mark { margin-right: auto; }
.top-links { display: flex; gap: 2rem; margin-right: 1.25rem; font-size: clamp(0.9375rem, 0.8rem + 0.25vw, 1.125rem); }
.top-links a { color: var(--muted); text-decoration: none; padding: 0.5rem 0; }
.top-links a:hover { color: var(--foreground); }
.quiet {
  font-size: clamp(0.9375rem, 0.8rem + 0.25vw, 1.125rem); line-height: 1.25rem; font-weight: 500; white-space: nowrap; text-decoration: none;
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 0.5rem 0.875rem;
}
.quiet:hover { border-color: var(--muted); }
/* dark or light, chosen by hand. Shown only when the script is there to work it. */
.theme { display: none; width: 2.375rem; height: 2.375rem; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: inherit; cursor: pointer; place-items: center; }
.can-theme .theme { display: inline-grid; }
.theme:hover { border-color: var(--muted); }
.theme i { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--foreground); background: linear-gradient(90deg, var(--foreground) 50%, transparent 50%); }
/* two wordmarks, one shown */
.for-light { display: none !important; }
:root[data-theme="light"] .for-light { display: block !important; }
:root[data-theme="light"] .for-dark { display: none !important; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .for-light { display: block !important; }
  :root:not([data-theme="dark"]) .for-dark { display: none !important; }
}

/* ---- words: one size for each kind, on every section */
h1, h2 { font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 4.9vw, 8rem); line-height: 1; }
h2 { font-size: clamp(2rem, 1rem + 2.8vw, 4.5rem); line-height: 1.04; max-width: 17em; }
h3 { font-weight: 600; letter-spacing: -0.03em; }
.lead { font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.5rem); line-height: 1.45; color: var(--muted); max-width: 38em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.beside { font-size: clamp(0.9375rem, 0.85rem + 0.2vw, 1.125rem); color: var(--muted); }
.button {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-foreground); text-decoration: none;
  font-size: clamp(1.0625rem, 0.9rem + 0.3vw, 1.375rem); line-height: 1.5rem; font-weight: 500;
  padding: 0.75em 1.4em; min-height: 3rem; border-radius: var(--radius);
}
.button:hover { background: var(--accent-hover); }
.soon { display: inline-flex; border: 1px dashed var(--warm); background: none; color: var(--warm); border-radius: 999px; padding: 0.1rem 0.75rem; font-size: 0.8125rem; line-height: 1.5rem; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.rv { position: relative; border-top: 1px solid var(--border); padding-top: var(--sec); padding-bottom: var(--sec); }

/* ---- 1. the hero: one line across the width, one sentence, one button */
/* It is the whole first screen (the top bar and it make 100 of the window's height): the words sit in the
   middle of the room above a thin rule, and the application's window is the NEXT section, never here. */
.hero { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: calc(100svh - var(--bar)); padding-top: clamp(2rem, 5vh, 4rem); padding-bottom: clamp(1rem, 3vh, 2rem); }
.hero-main { align-self: center; }
.hero-row { display: flex; align-items: flex-start; gap: 2rem clamp(2rem, 6vw, 8rem); margin-top: clamp(1.25rem, 3.5vh, 2.5rem); }
.hero .lead { max-width: 40em; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 2rem); }
.hero .actions { margin-top: clamp(1.25rem, 3vh, 2rem); }
/* Lois, cut out, on the page itself, beside the words. She is 288 wide on the sheet she was drawn on
   (brand/make_landing_images.py: the larger file is that one made bigger, not a sharper drawing), so she is
   never drawn wider than 288, on any screen. A wide screen gets more room around her, not a softer Lois.
   She hangs a little lower than the button; that does not count when the words are put in the middle. */
.hero-lois { display: block; flex: none; width: clamp(160px, 20vw, 288px); margin-bottom: -5rem; }
.hero-lois img { display: block; width: 100%; height: auto; }
.hero-next { justify-self: center; display: inline-flex; align-items: center; gap: 0.35em; min-height: 2.75rem; padding: 0 1rem; font-size: clamp(0.9375rem, 0.85rem + 0.2vw, 1.125rem); line-height: 1.5rem; color: var(--muted); text-decoration: none; }
.hero-next:hover { color: var(--foreground); }

/* ---- 2. the application's window. Here: in the page, like a picture. (Held in place, on a wide screen: see MOTION.) */
.film { position: relative; border-top: 1px solid var(--border); scroll-margin-top: -1rem; --u: clamp(11px, 0.9vw, 23px); }
.film-intro { padding: var(--sec) var(--pad) clamp(1.5rem, 4vh, 2.5rem); display: grid; justify-items: start; }
/* which of the seven a step is: small, beside its headline, and the only sign of it (no row of labels) */
.count { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; letter-spacing: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.dash {
  margin: 0 var(--pad); font-size: var(--u); line-height: 1.45;
  display: grid; grid-template-columns: 12.6em minmax(0, 1fr) 21em; grid-template-rows: 3.9em auto;
  border: 1px solid var(--border); border-radius: 0.9em; background: var(--background); overflow: hidden;
  box-shadow: 0 2em 4em -2.5em rgba(0, 0, 0, 0.55);
}
.dash b { font-weight: 600; }
.dash .scr-top { grid-column: 1 / -1; padding: 0 1.6em; background: var(--panel); }
.dash-menu { display: flex; flex-direction: column; gap: 0.1em; padding: 1em 0.7em; border-right: 1px solid var(--border); background: var(--panel); font-size: 0.9em; color: var(--muted); }
.dash-menu span { padding: 0.3em 0.9em; border-radius: 0.4em; white-space: nowrap; }
.dash-menu .gap { margin-top: 0.7em; }
.dash-menu .scr-back { margin-bottom: 0.7em; }
.dash-menu span:nth-child(2) { background: var(--surface); color: var(--foreground); font-weight: 600; box-shadow: inset 2px 0 0 var(--foreground); }
.dash-main { padding: 1.8em 2em 2em; display: flex; flex-direction: column; gap: 1em; min-width: 0; }
.dash-main > * { width: 100%; max-width: 58em; margin-left: auto; margin-right: auto; }
/* Lois's chat, beside the content as it is in the product (LoisChat.tsx, docked) */
.dash-lois { border-left: 1px solid var(--border); background: var(--panel); display: flex; flex-direction: column; gap: 1em; padding-bottom: 1em; min-width: 0; }
.dash-lois .face { display: block; height: auto; flex: none; }
.lois-h { display: flex; align-items: center; gap: 0.9em; padding: 0.9em 1.2em; border-bottom: 1px solid var(--border); }
.lois-h .face { width: 4.3em; }
.lois-h > span { display: flex; flex-direction: column; min-width: 0; }
.lois-h b { font-size: 1.15em; letter-spacing: -0.02em; }
.lois-h .scr-soft { font-size: 0.86em; }
.lois-when { text-align: center; font-size: 0.8em; font-weight: 500; color: var(--muted); }
.lois-said { display: flex; align-items: flex-start; gap: 0.7em; padding: 0 1.2em; }
.lois-said .face { width: 2.8em; margin-top: 0.3em; }
.lois-said.small .face { width: 2.2em; margin-left: 0.3em; }
.bubble { min-width: 0; background: var(--bubble); border-radius: 1.2em 1.2em 1.2em 0.45em; padding: 0.75em 1em; display: flex; flex-direction: column; gap: 0.3em; }
.lois-meta { display: flex; justify-content: space-between; gap: 0.6em; font-size: 0.8em; color: var(--muted); }
.lois-got { align-self: flex-end; margin-right: 1.2em; background: var(--accent); color: var(--accent-foreground); border-radius: 1.2em 1.2em 0.45em 1.2em; padding: 0.55em 1.2em; font-weight: 500; }
.lois-ask { margin: auto 1.2em 0; border: 1px dashed var(--border); border-radius: 0.9em; padding: 0.7em 1em; font-size: 0.86em; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.8em; }
.lois-ask .soon { font-size: 1em; line-height: 1.6; padding: 0 0.7em; }

/* ---- the product, drawn. Everything here is in em. */
.scr {
  font-size: clamp(10px, 1.149cqw, 26px); line-height: 1.45;
  border: 1px solid var(--border); border-radius: 0.9em; overflow: hidden; background: var(--background);
}
.scr b { font-weight: 600; }
.scr-top { display: flex; gap: 1.4em; align-items: center; padding: 1.1em 1.6em; border-bottom: 1px solid var(--border); font-size: 0.9em; color: var(--muted); }
.scr-top b { color: var(--foreground); letter-spacing: -0.02em; }
.scr-sp { margin-right: auto; }
.scr-body { display: grid; grid-template-columns: 14em minmax(0, 1fr) 22em; }
.scr-menu { display: flex; flex-direction: column; gap: 0.15em; padding: 1.4em 0.8em 1.6em; border-right: 1px solid var(--border); font-size: 0.9em; color: var(--muted); }
.scr-menu span { padding: 0.42em 0.9em; border-radius: 0.4em; }
.scr-menu .on { background: var(--surface); color: var(--foreground); font-weight: 600; box-shadow: inset 2px 0 0 var(--foreground); }
.scr-menu .gap { margin-top: 0.9em; }
.scr-back { margin-bottom: 0.9em; }
.scr-main { padding: 1.8em 1.7em 2em; display: flex; flex-direction: column; gap: 1em; min-width: 0; }
.scr-head { display: flex; align-items: center; gap: 1em; padding-bottom: 0.6em; }
.scr-head > div { margin-right: auto; display: flex; flex-direction: column; }
.scr-name { font-size: 1.35em; letter-spacing: -0.02em; }
.scr-slug, .scr-soft { color: var(--muted); }
.scr-slug { font-size: 0.9em; }
.scr-link { text-decoration: underline; text-underline-offset: 0.2em; font-size: 0.95em; }
.scr-card { border: 1px solid var(--border); border-radius: 0.55em; background: var(--surface); padding: 1.2em 1.3em; display: flex; flex-direction: column; gap: 0.5em; }
.scr-h { margin-top: 0.6em; }
.scr-field { display: flex; gap: 0.6em; margin-top: 0.4em; }
.scr-field code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 0.86em; border: 1px solid var(--border); border-radius: 0.5em; background: var(--background); padding: 0.75em 0.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scr-btn { display: inline-flex; align-items: center; background: var(--accent); color: var(--accent-foreground); border-radius: 0.5em; padding: 0.6em 1em; font-weight: 500; font-size: 0.95em; white-space: nowrap; }
.scr-btn.ghost { background: var(--surface); color: var(--foreground); border: 1px solid var(--border); }
.scr-ok { display: flex; align-items: center; gap: 0.6em; }
.dot { width: 0.85em; height: 0.85em; border-radius: 50%; background: var(--ok); flex: none; }
.tick { width: 1em; height: 1em; border-radius: 0.2em; background: var(--ok); flex: none; position: relative; }
.tick::after { content: ""; position: absolute; left: 0.3em; top: 0.12em; width: 0.28em; height: 0.52em; border: solid var(--background); border-width: 0 0.13em 0.13em 0; transform: rotate(40deg); }
.scr-facts { display: grid; grid-template-columns: 8em 1fr; gap: 0.25em 0; border-top: 1px solid var(--border); margin-top: 0.6em; padding-top: 0.9em; font-size: 0.86em; color: var(--muted); }
.mono { font-family: var(--mono); color: var(--foreground); display: flex; align-items: center; gap: 0.8em; }
.bar { display: block; width: 8em; height: 0.4em; border-radius: 1em; background: var(--border); overflow: hidden; }
.bar i { display: block; height: 100%; width: 21%; background: var(--muted); border-radius: 1em; transform-origin: left; }
.scr-lois { border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 1.1em; padding-bottom: 1.2em; }
.scr-lois-h { padding: 1.2em 1.3em; border-bottom: 1px solid var(--border); }
.scr-msg { padding: 0 1.3em; display: flex; flex-direction: column; gap: 0.35em; }
.scr-msg .scr-soft { font-size: 0.93em; }
.scr-got { margin: auto 1.3em 0; background: var(--foreground); color: var(--background); border-radius: 0.5em; text-align: center; padding: 0.6em; font-size: 0.93em; font-weight: 500; }
/* (dashboard) StatusBadge */
.pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.1em 0.75em; font-size: 0.82em; font-weight: 500; white-space: nowrap; }
.pill.live { background: var(--ok-surface); color: var(--ok); }
.pill.wait { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
.pill.role { border: 1px solid var(--border); color: var(--muted); }
.swap { display: inline-grid; justify-items: end; align-items: center; }
.swap > * { grid-area: 1 / 1; }
.swap .wait { opacity: 0; }

/* pieces of the product inside the seven sections */
.chip { display: inline-flex; align-items: center; gap: 0.6em; border: 1px solid var(--border); background: var(--background); border-radius: 0.5em; padding: 0.5em 0.9em; font-family: var(--mono); font-size: 0.9em; align-self: center; }
.folder { width: 1.3em; height: 1em; border-radius: 0.15em; background: var(--graph); position: relative; }
.folder::before { content: ""; position: absolute; left: 0; top: -0.22em; width: 0.6em; height: 0.3em; border-radius: 0.12em 0.12em 0 0; background: var(--graph); }
.drop { border: 1px dashed var(--muted); border-radius: 0.55em; padding: 1.6em 1.6em; display: flex; flex-direction: column; align-items: center; gap: 0.6em; text-align: center; }
.drop .scr-soft { font-size: 0.86em; max-width: 34em; }
.scr-two { display: flex; gap: 0.6em; margin-top: 0.3em; flex-wrap: wrap; justify-content: center; }
.said { display: flex; align-items: flex-start; gap: 0.6em; }
.said .tick { margin-top: 0.2em; }
.stages { display: flex; flex-wrap: wrap; gap: 0.45em 1.3em; font-size: 0.93em; }
.stages li { display: flex; align-items: center; gap: 0.55em; }
.stages li::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--ok); flex: none; }

/* the Code screen */
.code { display: grid; grid-template-columns: 11em minmax(0, 1fr); border: 1px solid var(--border); border-radius: 0.55em; overflow: hidden; background: var(--background); }
.code-tree { border-right: 1px solid var(--border); padding: 0.9em 0.7em; display: flex; flex-direction: column; gap: 0.15em; font-family: var(--mono); font-size: 0.82em; color: var(--muted); }
.code-tree span { padding: 0.25em 0.6em; border-radius: 0.35em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.code-tree .on { background: var(--surface); color: var(--foreground); }
.code-tree .in { padding-left: 1.6em; }
.code-lines { padding: 0.9em 1.1em; font-family: var(--mono); font-size: 0.82em; line-height: 1.75; display: flex; flex-direction: column; min-width: 0; }
.code-lines span { white-space: pre; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.code-lines .new { color: var(--foreground); background: var(--ok-surface); box-shadow: inset 2px 0 0 var(--ok); margin: 0 -1.1em; padding: 0 1.1em; }
.row { display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap; }
.row .scr-soft { font-size: 0.93em; }

/* the Preview */
.frames { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.frame { border: 1px solid var(--border); border-radius: 0.55em; padding: 1em; display: flex; flex-direction: column; gap: 0.6em; min-height: 9em; }
.frame i { display: block; height: 0.7em; border-radius: 0.3em; background: var(--border); }
.frame i.short { width: 55%; }
.frame i.added { height: 2em; background: var(--graph); width: 40%; margin-top: auto; }
.frame.new { border-color: var(--muted); }
.scr-btn.go { align-self: flex-start; }

/* a table of data, a list of backups, a list of people */
.grid { display: grid; border: 1px solid var(--border); border-radius: 0.55em; overflow: hidden; background: var(--background); font-size: 0.9em; }
.grid.c3 { grid-template-columns: 1.2fr 1.6fr 1fr; }
.grid > span { padding: 0.5em 0.9em; border-top: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid > .h { border-top: 0; color: var(--muted); background: var(--surface); }
.grid > .edit { box-shadow: inset 0 0 0 2px var(--graph); border-radius: 0.2em; }
.list { border: 1px solid var(--border); border-radius: 0.55em; overflow: hidden; background: var(--background); }
.list > li { display: flex; align-items: center; gap: 0.8em; padding: 0.65em 1em; border-top: 1px solid var(--border); }
.list > li:first-child { border-top: 0; }
.list > li > :last-child { margin-left: auto; }
.list .scr-soft { font-size: 0.9em; }
.kinds { display: flex; flex-wrap: wrap; gap: 0.5em; }
.bars { display: flex; align-items: flex-end; gap: 0.35em; height: 6em; }
.bars i { flex: 1; background: var(--graph); border-radius: 0.2em 0.2em 0 0; transform-origin: bottom; }
.bars i:nth-child(1) { height: 30%; } .bars i:nth-child(2) { height: 42%; } .bars i:nth-child(3) { height: 52%; }
.bars i:nth-child(4) { height: 62%; } .bars i:nth-child(5) { height: 74%; } .bars i:nth-child(6) { height: 86%; } .bars i:nth-child(7) { height: 100%; }
.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.nums span { display: flex; flex-direction: column; color: var(--muted); font-size: 0.86em; }
.nums b { font-size: 1.7em; color: var(--foreground); letter-spacing: -0.02em; }
.logline { font-family: var(--mono); font-size: 0.82em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- the seven sections of the window. Here: one under another, words beside the piece of the product. */
.dash { margin-bottom: var(--sec); }
.fam {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 6vw, 8rem);
  align-items: center; padding: var(--sec) var(--pad); border-top: 1px solid var(--border);
}
.fam:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.fam:nth-of-type(even) .fam-words { order: 2; }
.fam h3 { font-size: clamp(1.75rem, 0.9rem + 2.4vw, 3.75rem); line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; max-width: 12em; }
.fam-words > p { font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.5rem); line-height: 1.45; color: var(--muted); max-width: 30em; margin-top: 1.25rem; }
.fam-list { margin-top: 1.75rem; display: grid; max-width: 34rem; font-size: clamp(0.9375rem, 0.875rem + 0.2vw, 1.125rem); line-height: 1.4; }
.fam-list li { padding: 0.625rem 0; border-top: 1px solid var(--border); color: var(--muted); }
.fam-list li b { color: var(--foreground); font-weight: 500; }
.fam-show { container-type: inline-size; }
.fam-show > .scr { font-size: clamp(12px, 2.5cqw, 20px); padding: 1.5em; display: flex; flex-direction: column; gap: 1.1em; background: var(--surface); }
.fam-show .scr-card, .frame, .drop { background: var(--background); }

/* ---- 2. the problem today and Loisium's answer: two columns, row by row; on a phone each row is the two, one under the other */
.eyebrow { display: inline-flex; justify-self: start; margin-bottom: 1.25rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.875rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--muted); }
.problem .lead { margin-top: 1.5rem; max-width: 44em; }
.versus-head, .versus li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 6vw, 8rem); }
.versus-head { margin-top: clamp(2.5rem, 6vh, 4rem); padding-bottom: 1rem; font-size: clamp(1.25rem, 1rem + 0.8vw, 2rem); line-height: 1.2; font-weight: 600; letter-spacing: -0.03em; color: var(--muted); }
.versus-head span + span { color: var(--foreground); }
.versus li { border-top: 1px solid var(--border); padding: clamp(1rem, 2.4vh, 1.5rem) 0; font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.375rem); line-height: 1.45; }
.versus li:last-child { border-bottom: 1px solid var(--border); }
.versus .was { color: var(--muted); max-width: 30em; }
.versus .now { color: var(--foreground); max-width: 30em; }
/* each row's own "Today" and "In Loisium": said to a reader of the screen always, shown where the columns are gone */
.versus b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lead-on { margin-top: clamp(2rem, 5vh, 3rem); font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.5rem); line-height: 1.45; color: var(--foreground); }

/* ---- 4. Lois: set into the page at her own size, never in a box */
.lois-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(2rem, 6vw, 8rem); align-items: end; }
.lois-top .lead { margin-top: 1.5rem; color: var(--foreground); }
.lois-top .lead + .lead { color: var(--muted); margin-top: 0.75rem; }
.lois-pose { display: block; width: clamp(160px, 15vw, 221px); }   /* the picture is 442 dots wide: never drawn wider than 221 */
.lois-pose img, .lois-small img { display: block; width: 100%; height: auto; }
.lois-does { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 4rem); margin-top: clamp(3rem, 8vh, 5rem); }
.lois-does h3 { font-size: clamp(1.25rem, 1rem + 0.8vw, 2rem); line-height: 1.15; }
.lois-does > div > p { color: var(--muted); margin-top: 0.75rem; max-width: 28em; font-size: clamp(1rem, 0.925rem + 0.25vw, 1.1875rem); line-height: 1.5; }
.lois-does > div > .lois-says { margin-top: 1.5rem; border-left: 2px solid var(--border); padding: 0.25rem 0 0.25rem 1.25rem; color: var(--foreground); }
.lois-says span { display: block; color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; margin-top: 0.5rem; }
.lois-small { display: block; width: 7.5rem; margin-bottom: 1.5rem; }

/* ---- 5. and many more */
.more-in .lead { margin-top: 1.25rem; }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 3rem; background: var(--border); border: 1px solid var(--border); border-radius: 0.875rem; overflow: hidden; }
.bento li { background: var(--background); padding: clamp(1.25rem, 2vw, 2rem); display: flex; flex-direction: column; gap: 0.5rem; min-height: 10.5rem; font-size: clamp(0.9375rem, 0.875rem + 0.2vw, 1.125rem); line-height: 1.45; }
.bento li:hover { background: var(--surface); }
.bento .wide { grid-column: span 2; }
.bento b { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.5rem); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
.bento .tiny { margin-top: auto; padding-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--muted); }
.bento .tiny .scr-btn, .bento .tiny .pill { font-size: 0.8125rem; }
.more { margin-top: 2rem; }

/* ---- 6. what is not built yet: the dashed line in the hat's beige means "decided, not built" */
.road h2 { display: flex; align-items: center; gap: 0.75rem 1.25rem; flex-wrap: wrap; }
.road-note { color: var(--muted); max-width: 38em; margin-top: 1.25rem; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.5rem); line-height: 1.45; }
.road ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 2.5vw, 3rem); margin-top: 3rem; }
.road li { border-top: 1px dashed var(--warm); padding-top: 1rem; font-size: clamp(0.9375rem, 0.875rem + 0.2vw, 1.125rem); line-height: 1.45; color: var(--muted); }
.road li b { display: block; color: var(--foreground); font-weight: 500; margin-bottom: 0.25rem; }

/* ---- 7. who is building it */
.founders { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem clamp(2rem, 6vw, 8rem); align-items: start; }
.founders .lead { margin-top: 1.5rem; }
.founders .lead + .lead { color: var(--foreground); margin-top: 0.75rem; }
.people { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 0.875rem; overflow: hidden; }
.people li { background: var(--background); padding: 1.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; row-gap: 0.25rem; align-items: center; }
.people .face { grid-row: span 2; width: 4rem; height: 4rem; border-radius: 50%; border: 1px dashed var(--warm); }
.people b { font-weight: 600; align-self: end; }
.people .scr-soft { align-self: start; font-size: 0.9375rem; }

/* ---- 8. the beta */
.beta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 6vw, 8rem); align-items: end; background: var(--surface); }
.beta-words { display: grid; gap: 1rem; max-width: 34rem; font-size: clamp(1rem, 0.925rem + 0.25vw, 1.1875rem); line-height: 1.5; color: var(--muted); }
.beta-words .actions { margin-top: 0.5rem; }

/* ---- the foot: the same on every page */
.foot { border-top: 1px solid var(--border); padding-top: 4rem; padding-bottom: 2rem; font-size: 0.9375rem; color: var(--muted); }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.foot-cols div { display: flex; flex-direction: column; align-items: flex-start; }
.foot-cols b { color: var(--foreground); font-weight: 600; margin-bottom: 0.5rem; }
.foot-cols a, .foot-cols span { padding: 0.375rem 0; }
.foot-cols a { text-decoration: none; }
.foot-cols a:hover { color: var(--foreground); text-decoration: underline; }
.foot-last { margin-top: 3.5rem; border-top: 1px solid var(--border); padding-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2rem; }
.foot-name { display: inline-flex; align-items: center; gap: 0.75rem; }
.foot-name img { width: 7rem; height: auto; }
.foot-last > :last-child { margin-left: auto; }

/* ---- the full list, the two legal pages, and the page for a wrong address */
.plain { padding-top: clamp(3rem, 10vh, 6rem); padding-bottom: var(--sec); min-height: calc(100svh - var(--bar) - 20rem); }
.plain h1 { font-size: clamp(2.25rem, 1rem + 3.6vw, 4.5rem); }
.plain h2 { font-size: clamp(1.25rem, 1rem + 0.8vw, 2rem); letter-spacing: -0.03em; margin-top: 3.5rem; }
.plain .lead { margin-top: 1.5rem; }
.rows { margin-top: 1rem; border: 1px solid var(--border); border-radius: 0.875rem; overflow: hidden; max-width: 72rem; }
.rows li { display: grid; grid-template-columns: 16rem minmax(0, 1fr) auto; column-gap: 2rem; padding: 0.875rem 1.25rem; border-top: 1px solid var(--border); }
.rows li:first-child { border-top: 0; }
.rows strong { font-weight: 500; }
.rows .says { color: var(--muted); max-width: 40rem; }
.rows .soon { align-self: start; }
.plain .actions { margin-top: 2.5rem; }

/* ================================ motion ================================ */
@media (prefers-reduced-motion: no-preference) {
  /* the page glides only once it has loaded: an address with #somewhere lands at once */
  html.smooth { scroll-behavior: smooth; }
  html.smooth .fams { scroll-behavior: smooth; }
  @keyframes rise { from { transform: translateY(0.75rem); } }
  .hero h1, .hero .lead, .hero .actions, .hero-lois { animation: rise 0.6s var(--ease) both; }
  .hero .lead { animation-delay: 0.08s; }
  .hero .actions { animation-delay: 0.16s; }
  .hero-lois { animation-delay: 0.24s; }
  @keyframes bob { 50% { transform: translateY(-0.375rem); } }
  .hero-lois img { animation: bob 6s ease-in-out 1s infinite; }
  .button, .quiet, .theme, .top-links a, .bento li { transition: background-color 0.15s, border-color 0.15s, color 0.15s; }

  /* A section's pieces arrive once, when it is reached (motion.js puts "in" on it). Arriving never hides
     anything: a piece slides the last little way and is readable the whole time, so a window that is not
     being drawn (a tab in the background, a preview pane) shows the whole page and never an empty one. */
  .js :is(.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8) { transition: transform 0.6s var(--ease); }
  .js .r2 { transition-delay: 0.08s; } .js .r3 { transition-delay: 0.16s; } .js .r4 { transition-delay: 0.26s; }
  .js .r5 { transition-delay: 0.36s; } .js .r6 { transition-delay: 0.46s; } .js .r7 { transition-delay: 0.6s; } .js .r8 { transition-delay: 0.7s; }
  .js .rv:not(.in) :is(.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8),
  .js .fam:not(.on) :is(.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8) { transform: translateY(0.75rem); transition-delay: 0s; transition-duration: 0.15s; }
  /* inside a piece of the product: Building, then Live; the folder is dropped into the box; the bars grow */
  .js .fam .swap .wait { transition: opacity 0.4s 0.75s; }
  .js .fam .swap .live { transition: opacity 0.4s 0.8s; }
  .js .fam:not(.on) .swap .wait { opacity: 1; transition-delay: 0s; }
  .js .fam:not(.on) .swap .live { opacity: 0; transition-delay: 0s; }
  .js .fam:not(.on) .chip { transform: translateY(-2.2em) rotate(-5deg); }
  .js .bars i { transition: transform 0.7s var(--ease) 0.3s; }
  .js .fam:not(.on) .bars i { transform: scaleY(0.08); transition-delay: 0s; }

  /* A wide screen, with the script: the window is HELD under the top bar and scrolling walks through it.
     The section keeps its own room above it (--sec), so the first screen is the hero and nothing else.
     --cap is the room above the window for the section's own heading, then each step's headline and
     sentence. Where the walk is, is said by the window's own menu and a small "3 / 7". --u is the
     window's unit: as large as the width allows, and never so large that its menu would not fit the height. */
  @media (min-width: 62rem) and (min-height: 43rem) {
    .js .film {
      --h3: clamp(1.5rem, 0.6rem + 1.9vw, 3.25rem); --says: calc(var(--h3) * 2.1 + 1.75rem); --cap: calc(var(--says) + 2.25rem);
      --avail: calc(100vh - var(--bar) - var(--cap) - 1.5rem); --u: min(0.9vw, calc(var(--avail) / 41));
      height: calc(100vh - var(--bar) + 35vh + 560vh + var(--sec)); padding-top: var(--sec); scroll-margin-top: calc(-1rem - var(--sec));
    }
    .js .fams { display: contents; }
    .js .film-intro { position: absolute; left: var(--pad); right: var(--pad); top: 1.25rem; height: var(--says); padding: 0; align-content: center; transition: opacity 0.3s; }
    .js .film-intro .eyebrow { margin-bottom: 0.5rem; padding: 0.125rem 0.75rem; font-size: 0.8125rem; }
    .js .film-intro h2 { font-size: var(--h3); line-height: 1.05; max-width: none; }
    .js .film[data-step]:not([data-step="0"]) .film-intro { opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; }
    .js .film-pin { position: sticky; top: var(--bar); height: calc(100vh - var(--bar)); overflow: clip; }
    .js .dash { position: absolute; left: var(--pad); right: var(--pad); top: var(--cap); height: var(--avail); margin: 0; grid-template-rows: 3.9em minmax(0, 1fr); }
    .js .dash-main { justify-content: center; transition: opacity 0.3s; }
    .js .film[data-step]:not([data-step="0"]) .dash-main { opacity: 0; }

    .js .film .fam { position: absolute; inset: 0; display: block; padding: 0; border: 0; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; }
    .js .film .fam.on { opacity: 1; visibility: visible; transition: opacity 0.3s 0.1s, visibility 0s; }
    .js .film .fam-words { position: absolute; left: var(--pad); right: var(--pad); top: 1.25rem; height: var(--says); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 6rem); align-items: center; order: 0; }
    .js .film .fam h3 { font-size: var(--h3); line-height: 1.05; max-width: none; }
    .js .film .fam-words > p { font-size: clamp(0.9375rem, 0.8rem + 0.35vw, 1.25rem); line-height: 1.45; margin: 0; max-width: 38em; }
    .js .film .fam-list { display: none; }
    .js .film .fam-show { position: absolute; left: calc(var(--pad) + var(--u) * 12.6 + 1px); right: calc(var(--pad) + var(--u) * 21 + 1px); top: calc(var(--cap) + var(--u) * 3.9 + 1px); bottom: calc(1.5rem + 1px); container-type: normal; }
    .js .film .fam-show > .scr { height: 100%; max-width: 60em; margin: 0 auto; border: 0; border-radius: 0; background: none; font-size: calc(var(--u) * 1.04); padding: 0.8em 2em; justify-content: center; gap: 0.8em; }
    .js .film .fam-show .scr-card, .js .film .frame, .js .film .drop { background: var(--surface); }

    /* the menu's mark goes where the story is */
    .js .dash-menu span { transition: background-color 0.3s, color 0.3s; }
    .js .film[data-step]:not([data-step="0"]) .dash-menu span:nth-child(2) { background: none; color: var(--muted); font-weight: 400; box-shadow: none; }
    .js .film[data-step="1"] .dash-menu span:nth-child(8), .js .film[data-step="2"] .dash-menu span:nth-child(9),
    .js .film[data-step="3"] .dash-menu span:nth-child(7), .js .film[data-step="4"] .dash-menu span:nth-child(13),
    .js .film[data-step="4"] .dash-menu span:nth-child(14), .js .film[data-step="5"] .dash-menu span:nth-child(15),
    .js .film[data-step="6"] .dash-menu span:nth-child(3), .js .film[data-step="6"] .dash-menu span:nth-child(5),
    .js .film[data-step="7"] .dash-menu span:nth-child(11), .js .film[data-step="7"] .dash-menu span:nth-child(16) {
      background: var(--surface); color: var(--foreground); font-weight: 600; box-shadow: inset 2px 0 0 var(--foreground);
    }
  }
}

/* ================================ narrower screens ================================ */
@media (max-width: 80rem) {
  .lois-does { grid-template-columns: minmax(0, 1fr); }
  .road ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ---- a tablet and a phone (under 992 px): a layout of its own, with the same sense as the wide one ----
   The walk-through is still ONE window that is walked through: it is swiped sideways (the browser's own
   scroll, held to each step), and each step carries its "3 / 7". Nothing here needs a script. */
@media (max-width: 62rem) {
  /* The top bar is two rows and scrolls away with the page: the name, the switch and the button, then the
     links on a row of their own. Nothing wraps, and nothing needs a script. --bar is its height. */
  :root { --bar: 6.3125rem; }
  html { scroll-padding-top: 1rem; }
  .top { position: static; height: auto; flex-wrap: wrap; gap: 0 0.5rem; padding-top: 0.375rem; }
  .mark { align-items: center; min-height: 2.75rem; padding: 0; }
  .top-links { order: 5; flex: 0 0 calc(100% + var(--pad) * 2); justify-content: space-between; gap: 0.75rem; margin: 0.375rem calc(var(--pad) * -1) 0; padding: 0 var(--pad); border-top: 1px solid var(--border); font-size: 0.875rem; }
  .top-links a { display: inline-flex; white-space: nowrap; align-items: center; min-height: 2.75rem; padding: 0; }
  .theme { width: 2.75rem; height: 2.75rem; }
  .top .quiet { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.875rem; }

  /* the hero: Lois above the headline, then the words, a button as wide as the screen, the way down */
  .hero { padding-top: 1.25rem; padding-bottom: 0.5rem; }
  .hero-main { display: flex; flex-direction: column; }
  .hero-row { display: contents; }
  .hero-lois { order: -1; width: 104px; margin: 0 0 0.75rem; }
  .hero-words { margin-top: 1rem; }
  .hero .lead { font-size: 1.0625rem; }
  .hero .actions { flex-direction: column; align-items: stretch; gap: 0.625rem; margin-top: 1.25rem; }

  /* the walk-through: ONE window, swiped from step to step; each step says which of the seven it is */
  .film-intro { padding-bottom: 1rem; }
  .fams, .swipe { scrollbar-width: none; }
  .fams::-webkit-scrollbar, .swipe::-webkit-scrollbar { display: none; }
  .fams { display: flex; align-items: flex-start; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 0 var(--pad) var(--sec); scroll-padding-inline: var(--pad); }
  .fams::after { content: ""; flex: 0 0 1.5rem; }      /* room after the last step, so it too comes to the gutter */
  .fams > * { flex: 0 0 calc(100% - 2.25rem); scroll-snap-align: start; scroll-snap-stop: always; min-width: 0; }
  .fams > .fam, .fams > .fam:nth-of-type(even) { display: block; padding: 0; border: 0; }
  .fam h3 { font-size: 1.5rem; line-height: 1.15; max-width: none; }
  .fam-words > p { font-size: 1rem; line-height: 1.5; margin-top: 0.5rem; max-width: none; }
  .fam-list { display: none; }
  .fam-show { margin-top: 1rem; }
  .fam-show > .scr { font-size: 14px; padding: 1em; gap: 0.9em; border-radius: 0.875rem; }
  /* each step's screen is the application on a narrow screen: its menu folded into one row that names the place */
  .fam-show > .scr::before { margin: -1em -1em 0; padding: 0.7em 1em; border-bottom: 1px solid var(--border); background: var(--panel); font-size: 0.93em; color: var(--muted); }
  .fam:nth-of-type(1) .scr::before { content: "Menu \00b7  Deploys and versions"; }
  .fam:nth-of-type(2) .scr::before { content: "Menu \00b7  Code"; }
  .fam:nth-of-type(3) .scr::before { content: "Menu \00b7  Preview"; }
  .fam:nth-of-type(4) .scr::before { content: "Menu \00b7  Database, Backups"; }
  .fam:nth-of-type(5) .scr::before { content: "Menu \00b7  People and access"; }
  .fam:nth-of-type(6) .scr::before { content: "Menu \00b7  Visitors, Logs"; }
  .fam:nth-of-type(7) .scr::before { content: "Menu \00b7  Packages, Settings"; }
  /* the first of the window's states: the Overview, with Lois's word under it */
  .dash { margin: 0; box-shadow: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; border-radius: 0.875rem; --u: 14px; }
  .dash .scr-top { padding: 0.8em 1.1em; }
  .dash-menu { flex-direction: row; align-items: center; gap: 0.4em; padding: 0.7em 1.1em; border-right: 0; border-bottom: 1px solid var(--border); }
  .dash-menu span { display: none; }
  .dash-menu span:nth-child(2) { display: inline; padding: 0; background: none; box-shadow: none; }
  .dash-menu::before { content: "Menu \00b7"; }
  .dash-menu::after { content: "\25be"; margin-left: auto; }
  .dash-main { padding: 1.1em; }
  .dash-lois { border-left: 0; border-top: 1px solid var(--border); gap: 0.75em; }
  .lois-h, .lois-said { padding-left: 1.1em; padding-right: 1.1em; }
  .lois-when, .lois-said.small, .lois-got, .lois-ask { display: none; }
  .scr-facts { display: none; }
  /* nothing in a piece of the product is cut short here: a long line goes onto the next one */
  .logline, .grid > span, .scr-field code { white-space: normal; overflow-wrap: anywhere; }
  .code-lines span { white-space: pre-wrap; overflow-wrap: anywhere; }
  .code { grid-template-columns: minmax(0, 1fr); }
  .code-tree { display: none; }
  .scr-field { flex-wrap: wrap; }
  .scr-field code { flex-basis: 100%; }
  .grid.c3 { grid-template-columns: 0.8fr 2.1fr 0.7fr; }
  .grid > span { padding: 0.5em 0.6em; }
  .list > li { flex-wrap: wrap; }
  .list > li:has(.logline) { flex-direction: column; align-items: flex-start; gap: 0.25em; }
  .list > li:has(.logline) > :last-child { margin-left: 0; }

  /* the problem and the answer: each row is ONE card of two halves, the old way dim with a cross, Loisium's lit with its mark */
  .versus-head { display: none; }
  .versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.75rem; }
  .versus li, .versus li:last-child { display: block; padding: 0; border: 1px solid var(--border); border-radius: 0.875rem; overflow: hidden; font-size: 1rem; line-height: 1.45; }
  .versus .was, .versus .now { max-width: none; padding: 0.875rem 1rem; }
  .versus .was { background: var(--surface); }
  .versus .now { border-top: 1px solid var(--border); }
  .versus b { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--muted); }
  .versus .now b { color: var(--foreground); }
  .versus b::before { content: ""; flex: none; width: 0.75rem; height: 0.75rem; }
  .versus .was b::before { background: linear-gradient(45deg, transparent 44%, currentColor 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, currentColor 44% 56%, transparent 56%); }
  .versus .now b::before { border-radius: 50%; background: var(--graph); }
  .cloud .was b::before { background: none; border: 1px solid currentColor; border-radius: 50%; }     /* not a cross: the big clouds are not wrong, they are for somebody else */

  .founders, .beta, .lois-top { grid-template-columns: minmax(0, 1fr); }
  .beta, .lois-top { align-items: start; }
  .lois-pose { margin-top: 1.5rem; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento .wide { grid-column: auto; }
  .bento li { min-height: 0; }
  .road ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .more a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-cols a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; }
  .foot-cols span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; }
  .rows li { grid-template-columns: minmax(0, 1fr); row-gap: 0.25rem; }
  .rows .soon { justify-self: start; margin-top: 0.25rem; }
  .plain .actions a:not(.button) { display: inline-flex; align-items: center; min-height: 2.75rem; }
}
@media (min-width: 62rem) {
  .hero h1 { white-space: nowrap; }
}
/* ---- a phone (under 640 px): one gutter of 16, sections 60 apart, headings near 32, words at 16; and what is
   a row of cards on a wide screen is a row to swipe here, with a part of the next card always showing ---- */
@media (max-width: 40rem) {
  :root { --pad: 1rem; --sec: 3.75rem; }
  h1 { font-size: 2.375rem; }
  h2 { font-size: 1.875rem; line-height: 1.1; }
  .lead, .road-note, .beta-words, .lois-does > div > p, .lead-on { font-size: 1rem; line-height: 1.5; }
  .eyebrow { margin-bottom: 0.875rem; }
  .mark img { width: 6.25rem; }
  .top .quiet { padding: 0 0.625rem; }
  .button { width: 100%; }
  .versus { grid-template-columns: minmax(0, 1fr); }
  .versus { gap: 0.5rem; }
  .versus li, .versus li:last-child { font-size: 0.9375rem; }
  .versus .was, .versus .now { padding: 0.625rem 0.875rem; }
  .cloud .versus { margin-top: 1.5rem; }
  .problem .lead { margin-top: 1rem; }
  .lead-on { margin-top: 1.5rem; }

  .swipe { display: flex; align-items: stretch; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); padding: 0 var(--pad) 0.25rem; scroll-padding-inline: var(--pad); }
  .swipe::after { content: ""; flex: 0 0 0.25rem; }
  .swipe > * { flex: 0 0 78%; scroll-snap-align: start; min-width: 0; }
  .lois-top .lead { margin-top: 1rem; }
  .lois-pose { width: 140px; margin-top: 1rem; }
  .lois-does { margin-top: 1.5rem; }
  .lois-does > div { border: 1px solid var(--border); border-radius: 0.875rem; background: var(--surface); padding: 1rem; }
  .lois-does h3 { font-size: 1.1875rem; }
  .lois-does > div > p { margin-top: 0.5rem; font-size: 0.9375rem; }
  .lois-does > div > .lois-says { margin-top: 0.875rem; padding-left: 0.875rem; font-size: 0.9375rem; }
  .bento { margin-top: 1.5rem; border: 0; border-radius: 0; background: none; overflow-y: visible; }
  .bento li { border: 1px solid var(--border); border-radius: 0.875rem; padding: 1rem; font-size: 0.9375rem; }
  .bento b { font-size: 1.0625rem; }
  .more { margin-top: 0.75rem; }
  .road-note { margin-top: 0.875rem; }
  .road ol { display: flex; margin-top: 1.5rem; gap: 0.75rem; }
  .road ol > li { flex-basis: 66%; border: 1px dashed var(--warm); border-radius: 0.875rem; padding: 0.875rem 1rem; font-size: 0.9375rem; }
  .founders { gap: 1.5rem; }
  .founders .lead { margin-top: 1rem; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people li { grid-template-columns: minmax(0, 1fr); padding: 1rem; row-gap: 0.375rem; }
  .people .face { grid-row: auto; width: 3rem; height: 3rem; margin-bottom: 0.375rem; }
  .people .scr-soft { font-size: 0.875rem; }
  .beta { gap: 1rem; }
  .lois-small { width: 5.5rem; margin-bottom: 1rem; }
  .foot { padding-top: 2.5rem; }
  .foot-cols { gap: 1.5rem 1rem; }
  .foot-last { margin-top: 2rem; }
  .foot-last > :last-child { margin-left: 0; }
}
/* ---- a small phone (360 and under): the foot's columns one under another ---- */
@media (max-width: 22.5rem) {
  .mark img { width: 5.5rem; }
  .foot-cols { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}
/* ---- a phone on its side: the hero does not try to be one screen high ---- */
@media (max-width: 62rem) and (max-height: 30rem) {
  .hero { min-height: 0; }
}