/* ==========================================================================
   Mighty's website.
   The tokens are the app's own (DS.Color in Palette.swift): pure greys, hairlines instead of shadows, one ink
   fill for the main action. The only colour on the page is the characters' mascots, exactly as in the app.
   The motion is the onboarding's: things rise, sharpen and fade in one after another; buttons and tiles
   answer the pointer with a small spring; one Mighty travels the page and looks at your cursor.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  color-scheme: light dark;

  /* DS.Color: the window's ground and its two drifting glows, then the pane, chrome, wells and ink. */
  --ground: #E5E5E5;
  --glow-a: #F3F3F3;
  --glow-b: #D2D2D2;
  --canvas: #F4F4F4;
  --surface: #FFFFFF;
  --raised: #EBEBEB;
  --line: #DEDEDE;
  --ink: #161616;
  --ink-muted: #6A6A6A;
  --ink-faint: #9B9B9B;
  --on-ink: #FFFFFF;
  --pill: #FFFFFF;
  --eye: #1C1C1C;
  --ink-rgb: 22 22 22;

  --hover: rgb(var(--ink-rgb) / .06);
  --pressed: rgb(var(--ink-rgb) / .10);
  --edge-hover: rgb(var(--ink-rgb) / .22);
  --float: 0 10px 28px rgb(0 0 0 / .16), 0 2px 6px rgb(0 0 0 / .06);

  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* DS.Space / DS.Radius. The pane is the app's framed card: radius md + 2. */
  --r-sm: 6px;
  --r-md: 10px;
  --r-pane: 12px;
  --r-lg: 16px;
  --gutter: 12px;
  --col: 1272px;
  --pad: clamp(24px, 5vw, 72px);

  /* Motion. The springs are the app's (response .3 / .5 / .8), sampled into linear(); smooth is `.smooth`. */
  --smooth: cubic-bezier(.22, .8, .26, 1);
  --glide: cubic-bezier(.16, 1, .3, 1);
  --spring-pop: linear(0, 0.033 2.38%, 0.1155 4.76%, 0.2267 7.14%, 0.3503 9.52%, 0.4749 11.9%, 0.5924 14.29%, 0.6977 16.67%, 0.7882 19.05%, 0.863 21.43%, 0.9224 23.81%, 0.9677 26.19%, 1.0006 28.57%, 1.0229 30.95%, 1.0367 33.33%, 1.0439 35.71%, 1.046 38.1%, 1.0446 40.48%, 1.0409 42.86%, 1.0358 45.24%, 1.0301 47.62%, 1.0244 50%, 1.019 52.38%, 1.0141 54.76%, 1.0099 57.14%, 1.0064 59.52%, 1.0037 61.9%, 1.0016 64.29%, 1 66.67%, 0.999 69.05%, 0.9983 71.43%, 0.998 73.81%, 0.9979 76.19%, 0.9979 78.57%, 0.9981 80.95%, 0.9983 83.33%, 0.9986 85.71%, 0.9989 88.1%, 0.9991 90.48%, 0.9993 92.86%, 0.9995 95.24%, 0.9997 97.62%, 1 100%);
  --spring-soft: linear(0, 0.0348 2.38%, 0.1197 4.76%, 0.2313 7.14%, 0.3527 9.52%, 0.4726 11.9%, 0.5837 14.29%, 0.6821 16.67%, 0.7658 19.05%, 0.8347 21.43%, 0.8896 23.81%, 0.9321 26.19%, 0.9637 28.57%, 0.9863 30.95%, 1.0018 33.33%, 1.0116 35.71%, 1.0171 38.1%, 1.0195 40.48%, 1.0198 42.86%, 1.0187 45.24%, 1.0168 47.62%, 1.0145 50%, 1.0121 52.38%, 1.0097 54.76%, 1.0076 57.14%, 1.0057 59.52%, 1.0042 61.9%, 1.0029 64.29%, 1.0019 66.67%, 1.0011 69.05%, 1.0006 71.43%, 1.0002 73.81%, 0.9999 76.19%, 0.9997 78.57%, 0.9996 80.95%, 0.9996 83.33%, 0.9996 85.71%, 0.9996 88.1%, 0.9997 90.48%, 0.9997 92.86%, 0.9998 95.24%, 0.9998 97.62%, 1 100%);
  --spring-fan: linear(0, 0.0303 2.38%, 0.1066 4.76%, 0.2105 7.14%, 0.3275 9.52%, 0.447 11.9%, 0.5614 14.29%, 0.6657 16.67%, 0.7571 19.05%, 0.8343 21.43%, 0.8972 23.81%, 0.9467 26.19%, 0.9841 28.57%, 1.0109 30.95%, 1.0288 33.33%, 1.0396 35.71%, 1.0449 38.1%, 1.0459 40.48%, 1.044 42.86%, 1.0402 45.24%, 1.0353 47.62%, 1.0298 50%, 1.0244 52.38%, 1.0192 54.76%, 1.0145 57.14%, 1.0104 59.52%, 1.007 61.9%, 1.0042 64.29%, 1.0021 66.67%, 1.0005 69.05%, 0.9993 71.43%, 0.9986 73.81%, 0.9981 76.19%, 0.9979 78.57%, 0.9979 80.95%, 0.998 83.33%, 0.9982 85.71%, 0.9984 88.1%, 0.9987 90.48%, 0.9989 92.86%, 0.9992 95.24%, 0.9994 97.62%, 1 100%);
}
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --spring-pop: cubic-bezier(.34, 1.5, .64, 1); --spring-soft: cubic-bezier(.34, 1.3, .64, 1); --spring-fan: cubic-bezier(.34, 1.5, .64, 1); }
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0F0F0F;
    --glow-a: #262626;
    --glow-b: #191919;
    --canvas: #171717;
    --surface: #1F1F1F;
    --raised: #292929;
    --line: #353535;
    --ink: #EDEDED;
    --ink-muted: #9B9B9B;
    --ink-faint: #676767;
    --on-ink: #171717;
    --pill: #3A3A3A;
    --ink-rgb: 237 237 237;
    --float: 0 12px 32px rgb(0 0 0 / .5), 0 2px 8px rgb(0 0 0 / .3);
  }
}

/* ---- Base -------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  position: relative;
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
b, strong { font-weight: 650; }
code { font: .86em var(--font-mono); background: var(--raised); padding: .12em .45em; border-radius: 5px; }
::selection { background: rgb(var(--ink-rgb) / .16); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r-sm); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: 14px; text-decoration: none; transition: top .2s var(--smooth); }
.skip:focus { top: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- The ground: two soft glows drifting, as in the app's window --------- */
.ground { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ground i { position: absolute; width: 120vmax; height: 120vmax; border-radius: 50%; will-change: transform; }
.ground .g1 { left: -38vmax; top: -50vmax; background: radial-gradient(closest-side, var(--glow-a), transparent 72%); animation: drift-a 80s ease-in-out infinite alternate; }
.ground .g2 { right: -46vmax; bottom: -58vmax; background: radial-gradient(closest-side, var(--glow-b), transparent 72%); animation: drift-b 104s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate3d(30vmax, 22vmax, 0); } }
@keyframes drift-b { to { transform: translate3d(-28vmax, -18vmax, 0); } }

/* ---- Page frame -------------------------------------------------------- */
.page { position: relative; width: 100%; max-width: var(--col); margin: 0 auto; padding: 0 var(--gutter); }
main { display: grid; gap: var(--gutter); padding-bottom: var(--gutter); }
.pane { position: relative; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-pane); overflow: clip; }
.pane-in { position: relative; width: 100%; max-width: 1080px; margin: 0 auto; padding: var(--pad); }
.pane-in.wide { max-width: 1200px; }

/* ---- Top bar: the app's toolbar, floating ------------------------------- */
.nav { position: sticky; top: var(--gutter); z-index: 50; margin: var(--gutter) 0; }
.nav-in { position: relative; display: flex; align-items: center; gap: 18px; height: 52px; padding: 0 8px 0 12px; border: 1px solid var(--line); border-radius: var(--r-pane); background: color-mix(in srgb, var(--canvas) 78%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(20px); backdrop-filter: saturate(1.5) blur(20px); overflow: hidden; transition: background .3s ease; }
.nav.scrolled .nav-in { background: color-mix(in srgb, var(--canvas) 90%, transparent); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 16px; letter-spacing: -.01em; text-decoration: none; }
.brand-mark { position: relative; width: 28px; height: 28px; border-radius: 8px; background: #000; display: grid; place-items: center; flex: none; }
.brand-mark .mascot { --s: 19px; }
.nav-links { position: relative; display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a { position: relative; z-index: 1; padding: 7px 13px; border-radius: 999px; font-size: 14px; color: var(--ink-muted); text-decoration: none; transition: color .18s ease; }
.nav-links a:hover, .nav-links a.on { color: var(--ink); }
.nav-pill { position: absolute; z-index: 0; left: 0; top: 50%; height: 32px; margin-top: -16px; border-radius: 999px; background: var(--pill); border: 1px solid var(--line); opacity: 0; transform: translateX(0); transition: transform .55s var(--spring-soft), width .55s var(--spring-soft), opacity .25s ease; }
.nav-pill.on { opacity: 1; }
.nav-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; opacity: .85; }
.nav .btn { padding: 9px 16px; font-size: 13.5px; }

/* ---- Buttons & chips: the onboarding's capsule that lifts under the pointer ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--ink); font: 600 14px/1 var(--font-ui); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .55s var(--spring-pop), background-color .18s ease, border-color .18s ease, opacity .18s ease; will-change: transform; }
.btn:hover { transform: scale(1.04); }
.btn:active { transform: scale(.96); transition-duration: .22s; }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-line { background: var(--surface); border-color: var(--line); }
.btn-line:hover { border-color: var(--edge-hover); }
.btn-quiet { color: var(--ink-muted); padding-inline: 14px; }
.btn-quiet:hover { color: var(--ink); background: var(--hover); }
.btn .ic { width: 15px; height: 15px; transition: transform .4s var(--spring-pop); }
.btn:hover .ic.go { transform: translateX(3px); }
.btn:hover .ic.down { transform: translateY(2px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--raised); color: var(--ink); font: 500 13px/1 var(--font-ui); }
.chip .ic { width: 14px; height: 14px; }

.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Type -------------------------------------------------------------- */
.display, h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.03; letter-spacing: -.03em; font-weight: 400; text-wrap: balance; }
h2 { font-size: clamp(31px, 4.1vw, 54px); line-height: 1.07; letter-spacing: -.026em; font-weight: 400; text-wrap: balance; }
h3 { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; font-weight: 600; }
.lede { font-size: clamp(17px, 1.55vw, 20px); line-height: 1.55; color: var(--ink-muted); text-wrap: pretty; max-width: 58ch; }
.lede b { color: var(--ink); }
.small { font-size: 13.5px; color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font: 600 11px/1 var(--font-ui); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-muted); }
.eyebrow .pip { width: 6px; height: 6px; border-radius: 99px; background: var(--ink); transition: width 1s var(--spring-soft) .35s; }
.eyebrow.in .pip, html:not(.js) .eyebrow .pip { width: 22px; }
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); transform-origin: 0 50%; transition: transform 1.3s var(--glide) .3s; }
.js .eyebrow:not(.in)::after { transform: scaleX(0); }
.sec-head { display: grid; gap: 18px; max-width: 680px; }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.sec-head.center .eyebrow { width: 100%; max-width: 360px; }
.link { color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--glide); padding-bottom: 1px; }
.link:hover { background-size: 100% 1px; }
.link .ic { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-left: 4px; transition: transform .4s var(--spring-pop); }
.link:hover .ic { transform: translateX(3px); }
.keys { display: inline-flex; gap: 4px; }
kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 7px; background: var(--surface); font: 600 12.5px var(--font-ui); color: var(--ink); }

/* ---- Reveal: each thing rises, sharpens and fades in, `--i` beats after the last ---- */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(7px); transition: opacity .9s var(--smooth), transform .9s var(--smooth), filter .9s var(--smooth); transition-delay: calc(var(--i, 0) * 110ms); }
.js [data-reveal="soft"] { filter: none; transform: translate3d(0, 14px, 0); }
.js [data-reveal="fade"] { filter: none; transform: none; }
.js [data-reveal="pop"] { filter: none; transform: scale(.94); transition-timing-function: var(--smooth); }
.js [data-reveal].in { opacity: 1; transform: none; filter: none; }
.js [data-reveal].done { transition-delay: 0s; will-change: auto; }
.js:not(.js-ready) [data-reveal] { animation: failsafe .01s 3.5s forwards; }
@keyframes failsafe { to { opacity: 1; transform: none; filter: none; } }

/* ---- Mascots: drawn by mighty.js from the app's painter. Until then, the still picture. ---- */
.mascot { display: block; position: relative; width: var(--s, 48px); height: var(--s, 48px); flex: none; }
.mascot > svg { width: 100%; height: 100%; overflow: visible; }
.mascot.press { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.fallback { width: 100%; height: 100%; }

/* ---- Speech bubble: the library's, with its tail pointing at the character ---- */
.bpos { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; will-change: transform; }
.bubble { position: relative; width: max-content; max-width: 236px; padding: 9px 13px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: 500 13px/1.38 var(--font-ui); text-align: left; box-shadow: var(--float); opacity: 0; transform: scale(.9); transform-origin: var(--ox, 0) 18px; transition: opacity .3s ease, transform .5s var(--spring-pop); pointer-events: none; }
.bubble.show { opacity: 1; transform: none; }
.bubble::before { content: ""; position: absolute; top: 14px; width: 10px; height: 10px; background: var(--surface); border: 1px solid var(--line); border-width: 0 0 1px 1px; transform: rotate(45deg); }
.bubble[data-side="right"]::before { left: -6px; }
.bubble[data-side="left"]::before { right: -6px; transform: rotate(225deg); }
.bubble[data-side="above"]::before { top: auto; bottom: -6px; left: calc(50% - 5px); transform: rotate(-45deg); }
.bubble[data-side="below"]::before { top: -6px; left: calc(50% - 5px); transform: rotate(135deg); }
.bubble .w { display: inline-block; opacity: 0; transform: translateY(3px); transition: opacity .35s ease, transform .35s var(--smooth); transition-delay: calc(var(--w, 0) * 28ms + 120ms); }
.bubble.show .w { opacity: 1; transform: none; }

/* ---- The guide: one Mighty that travels the page (see mighty.js) ---------- */
.guide-layer { position: absolute; inset: 0; z-index: 35; pointer-events: none; overflow: hidden; }
.guide { position: absolute; left: 0; top: 0; width: 120px; height: 120px; }
.guide .mascot { --s: 100%; pointer-events: auto; }
.anchor { position: relative; width: var(--as, 96px); height: var(--as, 96px); flex: none; }
.anchor > .fallback { position: absolute; inset: 0; }
.js .anchor > .fallback { display: none; }

/* ---- Tiles: the app's dsTile (hairline lifts toward ink, wash, tiny scale) --------- */
.tile { position: relative; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: transform .55s var(--spring-pop), border-color .18s ease; }
.tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), var(--hover), transparent 70%); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.tile:hover { border-color: var(--edge-hover); }
.tile:hover::before { opacity: 1; }
.tile.lift:hover { transform: scale(1.012); }

/* ---- A miniature of the app's window: the same tokens, so it is the same picture ---- */
.win { position: relative; border: 1px solid var(--line); border-radius: var(--r-pane); background: var(--ground); overflow: hidden; text-align: left; font-size: 13px; color: var(--ink); -webkit-user-select: none; user-select: none; }
.win-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; }
.win-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.win-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); }
.win-side { display: flex; flex-direction: column; gap: 1px; padding: 2px 10px 12px; }
.side-row { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: var(--r-md); white-space: nowrap; }
.side-row .ic { width: 15px; height: 15px; opacity: .85; stroke-width: 1.6; }
.side-row .kbd { margin-left: auto; font-size: 11px; color: var(--ink-faint); }
.side-row.sel { background: var(--pill); }
.side-row.plain { padding-left: 12px; }
.side-label { margin: 14px 10px 4px; font: 600 10px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.side-sub { margin: 4px 12px 2px; font-size: 11px; color: var(--ink-faint); }
.win-main { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0 8px 8px 0; border: 1px solid var(--line); border-radius: var(--r-pane); background: var(--canvas); overflow: hidden; }
.win.solo .win-body { grid-template-columns: minmax(0, 1fr); }
.win.solo .win-main { margin: 0 8px 8px; }
.win.solo .win-side { display: none; }
.transcript { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 12px; min-height: 0; overflow: hidden; }
.msg { animation: msg-in .6s var(--smooth) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
.msg.user { align-self: flex-end; max-width: 80%; padding: 9px 14px; border-radius: var(--r-lg); background: var(--raised); font-size: 14px; line-height: 1.45; }
.msg.bot { display: flex; align-items: flex-start; gap: 12px; }
.msg.bot .mascot { --s: 30px; margin-top: -3px; }
.msg.bot .txt { min-width: 0; font-size: 14px; line-height: 1.55; }
.msg.bot .txt p + p { margin-top: 8px; }
.msg .quote { margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--line); color: var(--ink-muted); }
.caret::after { content: ""; display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; border-radius: 2px; background: var(--ink); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.composer { display: flex; align-items: center; gap: 10px; min-height: 46px; margin: 0 18px 16px; padding: 6px 7px 6px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink-faint); font-size: 14px; }
.composer .typed { color: var(--ink); }
.composer .send { display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; border-radius: 50%; background: var(--ink); color: var(--on-ink); flex: none; transition: transform .5s var(--spring-pop), opacity .3s ease; }
.composer .send .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.composer.idle .send { opacity: .3; }

/* The generic cloud app's avatar: a plain ring, no character */
.ca { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: 1px; border: 1.5px solid var(--ink-faint); border-radius: 50%; color: var(--ink-faint); }
.ca .ic { width: 12px; height: 12px; stroke-width: 1.8; }
.fakecur { position: absolute; left: 0; top: 0; z-index: 7; opacity: 0; pointer-events: none; transform: translate(0, 0); transition: transform 1.1s var(--smooth), opacity .4s ease; }
.fakecur svg { filter: drop-shadow(0 1px 2px rgb(0 0 0 / .25)); }
.fakecur path { fill: var(--ink); stroke: var(--canvas); stroke-width: 1.4; stroke-linejoin: round; }

/* ---- FAQ: an accordion that opens like everything else ---------------------- */
.faq { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.qa + .qa { border-top: 1px solid var(--line); }
.q { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 19px 22px; border: 0; background: none; text-align: left; font: 600 15.5px/1.35 var(--font-ui); letter-spacing: -.005em; cursor: pointer; border-radius: inherit; }
.q:hover { color: var(--ink); }
.q .plus { position: relative; width: 14px; height: 14px; flex: none; color: var(--ink-muted); transition: transform .5s var(--spring-soft), color .2s; }
.q .plus::before, .q .plus::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .45s var(--smooth); }
.q .plus::after { transform: rotate(90deg); }
.qa.open .q .plus { transform: rotate(180deg); color: var(--ink); }
.qa.open .q .plus::after { transform: rotate(0deg); }
.qa .a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--glide); }
.qa.open .a { grid-template-rows: 1fr; }
.qa .a > div { min-height: 0; overflow: hidden; }
.qa .a p { padding: 0 22px 20px; color: var(--ink-muted); font-size: 15px; max-width: 64ch; opacity: 0; transform: translateY(-4px); transition: opacity .4s ease, transform .5s var(--glide); }
.qa.open .a p { opacity: 1; transform: none; transition-delay: .08s; }
html:not(.js) .qa .a { grid-template-rows: 1fr; }
html:not(.js) .qa .a p { opacity: 1; transform: none; }

/* ---- Download button: ink fill, label drawn by thermal.js (the app's wordmark effect) ---- */
.btn-thermal { position: relative; display: flex; align-items: center; justify-content: center; width: min(100%, 400px); min-height: 72px; border-radius: 999px; background: var(--ink); color: var(--on-ink); text-decoration: none; font-weight: 800; font-size: 26px; letter-spacing: -.03em; overflow: hidden; transition: transform .6s var(--spring-pop); will-change: transform; }
.btn-thermal:hover { transform: scale(1.035); }
.btn-thermal:active { transform: scale(.975); transition-duration: .22s; }
.btn-thermal.thermal-on .label { opacity: 0; }
.thermal-canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.dl { display: grid; justify-items: center; gap: 14px; }
.dl .meta { font-size: 13px; color: var(--ink-muted); text-align: center; }

/* ---- The card that appears once the download starts -------------------------- */
.dl-panel { position: fixed; left: 50%; bottom: 20px; z-index: 80; width: min(540px, calc(100vw - 24px)); padding: 18px 20px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--float); opacity: 0; transform: translate(-50%, 24px) scale(.96); transition: opacity .35s ease, transform .7s var(--spring-pop); pointer-events: none; }
.dl-panel.show { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.dl-head { display: flex; align-items: center; gap: 14px; }
.dl-head .mascot { --s: 44px; }
.dl-head h3 { font-size: 16px; }
.dl-head p { font-size: 13px; color: var(--ink-muted); }
.dl-close { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); cursor: pointer; transition: background .15s, color .15s, transform .4s var(--spring-pop); }
.dl-close:hover { background: var(--hover); color: var(--ink); transform: scale(1.1); }
.dl-steps { display: grid; gap: 8px; margin: 14px 0 0; counter-reset: s; }
.dl-steps li { position: relative; padding-left: 32px; font-size: 14px; line-height: 1.45; counter-increment: s; }
.dl-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--raised); font: 600 12px var(--font-ui); }
.dl-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-muted); }
.ui { font-weight: 600; }

/* ---- Footer ------------------------------------------------------------ */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding: 22px 6px 36px; font-size: 13px; color: var(--ink-muted); }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot a { text-decoration: none; transition: color .15s; }
.foot a:hover { color: var(--ink); }

/* =========================================================================
   HOME
   ========================================================================= */

/* ---- Hero ---- */
.hero { text-align: center; background: radial-gradient(70% 46% at 50% 14%, var(--surface), transparent 72%), var(--canvas); }
.hero .pane-in { display: grid; justify-items: center; padding-top: clamp(28px, 3.6vw, 52px); padding-bottom: 0; }
.hero-anchor { --as: clamp(120px, 14vw, 168px); margin-bottom: 10px; }
.hero h1 { max-width: 20ch; font-size: clamp(38px, 5.5vw, 70px); }
.hero h1 b { font-weight: 650; }
.hero .lede { margin-top: 20px; max-width: 54ch; }
.hero .chips { justify-content: center; margin-top: 22px; }
.hero .dl { margin-top: 26px; }
.dl-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 20px; }
.meta-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-muted); text-decoration: none; transition: color .15s; }
.meta-link:hover { color: var(--ink); }
.meta-link .ic { width: 13px; height: 13px; transition: transform .45s var(--spring-pop); }
.meta-link:hover .ic { transform: translateX(3px); }
.hero-window { position: relative; width: min(940px, 100%); height: 420px; margin-top: 38px; }
.hero-window .win { position: absolute; inset: 0; display: flex; flex-direction: column; border-bottom: 0; border-radius: var(--r-pane) var(--r-pane) 0 0; }
.hero-window .win-body { flex: 1; min-height: 0; }
.hero-window .win-main { margin-bottom: 0; border-bottom: 0; border-radius: var(--r-pane) var(--r-pane) 0 0; }
.hero-window .transcript { padding-top: 26px; }
.hero-window .composer { margin-top: auto; }
.noscript-shot { margin-top: 40px; border: 1px solid var(--line); border-radius: var(--r-pane) var(--r-pane) 0 0; border-bottom: 0; }

/* ---- Limits demo ---- */
.compare { display: grid; grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr); align-items: start; gap: 0; margin-top: 56px; }
.cmp { display: flex; flex-direction: column; min-height: 392px; }
.cmp .win { flex: 1; display: flex; flex-direction: column; min-height: 340px; }
.cmp .win-body { flex: 1; min-height: 0; }
.cmp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 4px 12px; font-size: 13px; }
.cmp-head h3 { font-size: 14px; }
.cmp-head .tag { font-size: 12px; color: var(--ink-muted); }
.cmp-mid { display: grid; justify-items: center; align-content: center; gap: 10px; align-self: stretch; padding-top: 40px; }
.cmp-mid .anchor { --as: 84px; }
.cmp-mid .vs { font: 600 11px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.meter { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-muted); }
.pips { display: inline-flex; gap: 4px; }
.pips i { width: 16px; height: 6px; border-radius: 99px; background: var(--ink); transition: background-color .5s ease, transform .5s var(--spring-pop); }
.pips i.gone { background: var(--line); transform: scaleX(.8); }
.meter .num { min-width: 12px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.meter .inf { font-size: 17px; line-height: 1; color: var(--ink); font-weight: 600; transform: translateY(-1px); }
.cmp .win-main { margin: 0 8px 8px; flex: 1; }
.cmp .transcript { gap: 11px; padding: 16px 16px 8px; }
.cmp .msg.user { font-size: 13px; padding: 7px 12px; }
.cmp .msg.bot .txt { font-size: 13px; line-height: 1.5; }
.cmp .msg.bot .mascot { --s: 24px; }
.cmp .msg.bot.flat .txt { display: grid; gap: 6px; padding-top: 4px; }
.cmp .bar { height: 7px; border-radius: 99px; background: var(--raised); }
.cmp .bar:nth-child(2) { width: 72%; }
.cmp .bar:nth-child(3) { width: 46%; }
.cmp .composer { min-height: 40px; margin: 0 12px 12px; font-size: 13px; }
.cmp .composer.locked { background: var(--raised); }
.limit-card { display: grid; gap: 4px; margin: 4px 0 2px; padding: 14px 14px 13px; border: 1px solid var(--edge-hover); border-radius: var(--r-md); background: var(--surface); font-size: 13px; animation: msg-in .7s var(--smooth) both; }
.limit-card strong { font-size: 13.5px; font-weight: 650; }
.limit-card span { color: var(--ink-muted); }
.limit-card .btn { margin-top: 8px; width: max-content; padding: 8px 14px; font-size: 12.5px; }
.cmp-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; font-size: 12.5px; color: var(--ink-faint); }
.replay { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-muted); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: transform .5s var(--spring-pop), color .15s, border-color .15s; }
.replay:hover { transform: scale(1.05); color: var(--ink); border-color: var(--edge-hover); }
.replay .ic { width: 13px; height: 13px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.fact { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; font-size: 14px; }
.fact .ic { width: 20px; height: 20px; margin-top: 1px; }
.fact b { display: block; margin-bottom: 2px; font-weight: 600; }
.fact span { color: var(--ink-muted); }

/* ---- Privacy: a desktop with a menu bar ---- */
.split { display: grid; grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr); align-items: center; gap: clamp(32px, 4.5vw, 64px); }
.split h2 { font-size: clamp(30px, 3.6vw, 46px); }
.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.checks { display: grid; gap: 14px; margin-top: 28px; }
.checks li { position: relative; padding-left: 32px; font-size: 15.5px; color: var(--ink-muted); line-height: 1.5; }
.checks li b { color: var(--ink); font-weight: 600; }
.checks li .tick { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--raised); display: grid; place-items: center; }
.checks li .tick svg { width: 11px; height: 11px; stroke-width: 2.6; }
.desk { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(90% 70% at 20% 0%, var(--glow-a), transparent 70%), radial-gradient(80% 80% at 90% 100%, var(--glow-b), transparent 70%), var(--ground); aspect-ratio: 16 / 11.5; }
.menubar { position: absolute; inset: 0 0 auto 0; z-index: 4; display: flex; align-items: center; gap: 14px; height: 28px; padding: 0 12px; font-size: 12px; color: var(--ink); background: color-mix(in srgb, var(--canvas) 70%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.menubar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.menubar b { font-weight: 650; }
.menubar .sp { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.sent { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.wifi { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 22px; padding: 0 8px 0 7px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; font-size: 12px; transition: background .15s, transform .5s var(--spring-pop); }
.wifi:hover { background: var(--hover); transform: scale(1.06); }
.wifi .ic { width: 16px; height: 16px; stroke-width: 1.8; }
.wifi .slash { position: absolute; left: 6px; right: auto; top: 3px; width: 18px; height: 1.8px; background: var(--ink); border-radius: 2px; transform-origin: 0 50%; transform: rotate(45deg) scaleX(0); transition: transform .35s var(--smooth); }
.wifi.off .slash { transform: rotate(45deg) scaleX(1); }
.wifi.off .ic { opacity: .55; }
.wifi .nudge { position: absolute; inset: -4px; border-radius: 9px; border: 1.5px solid var(--ink); opacity: 0; animation: nudge 2.4s ease-out infinite; pointer-events: none; }
.wifi.touched .nudge { display: none; }
@keyframes nudge { 0% { opacity: .55; transform: scale(.9); } 70%, 100% { opacity: 0; transform: scale(1.25); } }
.desk .win { position: absolute; left: 5.5%; right: 5.5%; top: 44px; bottom: -1px; border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--ground); display: flex; flex-direction: column; box-shadow: var(--float); }
.desk .win-body { flex: 1; min-height: 0; }
.desk .win-main { margin-bottom: 0; border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; }
.desk .transcript { padding: 16px 18px 6px; gap: 12px; }
.desk .msg.user { font-size: 13px; padding: 7px 12px; }
.desk .msg.bot .txt { font-size: 13px; }
.desk .msg.bot .mascot { --s: 26px; }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.suggest button { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: 500 12px/1 var(--font-ui); color: var(--ink); cursor: pointer; transition: transform .5s var(--spring-pop), border-color .15s, background-color .15s, opacity .2s; }
.suggest button:hover { transform: scale(1.05); border-color: var(--edge-hover); }
.suggest button:disabled { opacity: .4; pointer-events: none; }
.desk .composer { margin: 0 14px 0; min-height: 40px; font-size: 13px; }
.desk-note { margin-top: 14px; font-size: 13px; color: var(--ink-muted); min-height: 20px; transition: color .3s; }
.desk-note b { color: var(--ink); }
.toast { position: absolute; right: 12px; top: 38px; z-index: 5; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--float); font-size: 12px; font-weight: 500; opacity: 0; transform: translateY(-8px) scale(.96); transition: opacity .25s ease, transform .5s var(--spring-pop); pointer-events: none; }
.toast.show { opacity: 1; transform: none; }

/* ---- How: three steps ---- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 56px; }
.step { display: grid; gap: 6px; padding: 22px 22px 24px; align-content: start; }
.step .art { position: relative; height: 120px; margin: -2px -2px 16px; border-radius: 8px; background: var(--canvas); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.step .n { font: 600 11px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.step h3 { font-size: 19px; }
.step p { font-size: 14.5px; color: var(--ink-muted); }
.art-dl { display: grid; gap: 12px; justify-items: center; width: 62%; }
.art-dl .file { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.art-dl .file .ic { width: 18px; height: 18px; }
.art-dl .track { position: relative; width: 100%; height: 6px; border-radius: 99px; background: var(--raised); overflow: hidden; }
.art-dl .track::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; animation: fill 3.6s var(--smooth) infinite; }
@keyframes fill { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
.art-open { display: grid; place-items: center; }
.art-open img { width: 56px; height: 56px; border-radius: 13px; animation: dock 3.2s var(--smooth) infinite; transform-origin: 50% 100%; }
@keyframes dock { 0%, 55%, 100% { transform: translateY(0); } 62% { transform: translateY(-22px); } 72% { transform: translateY(0); } 80% { transform: translateY(-9px); } 88% { transform: translateY(0); } }
.art-hi { width: 78%; }
.art-hi .composer { margin: 0; min-height: 40px; font-size: 13px; color: var(--ink); }
.first-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding: 0 4px; font-size: 14px; color: var(--ink-muted); }
.first-note .ic { width: 17px; height: 17px; margin-top: 2px; flex: none; color: var(--ink); }
main > .pane { scroll-margin-top: 76px; }
.confirm { margin-top: 14px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 16px 20px; font-size: 14px; color: var(--ink-muted); }
.confirm .ic { width: 20px; height: 20px; color: var(--ink); margin-top: 2px; }
.confirm b { color: var(--ink); font-weight: 600; }
.confirm ol { margin-top: 8px; display: grid; gap: 4px; counter-reset: c; }
.confirm ol li { counter-increment: c; }
.confirm ol li::before { content: counter(c) "."; margin-right: 8px; font-weight: 600; color: var(--ink); }

/* ---- Characters ---- */
.fan { position: relative; height: clamp(236px, 38vw, 420px); margin: 22px auto 0; width: 100%; max-width: 940px; }
.fan.over { cursor: pointer; }
.fan-m { --xx: var(--x); --yy: var(--y); position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: 0; padding: 0; border: 0; border-radius: 30%; background: none; color: inherit; pointer-events: none; z-index: var(--z, 1); transform: translate3d(calc(var(--xx) - var(--s) / 2), calc(var(--yy) - var(--s) / 2), 0) scale(var(--sc, 1)); transition: transform 1.4s var(--spring-fan), opacity .6s ease; transition-delay: var(--d, 0s); }
.fan:not(.unfolded) .fan-m:not(.front) { --xx: var(--cx); --yy: calc(var(--cy) + var(--s) * .25); --sc: .3; opacity: 0; }
.fan-m.hov { z-index: 30; }
.fan-m .lift { display: block; width: 100%; height: 100%; transition: transform .55s var(--spring-pop); }
.fan-m.hov .lift { transform: translateY(-4%) scale(1.14); }
.fan-m .name { position: absolute; left: 50%; top: 98%; transform: translate(-50%, 6px); font-size: 15px; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity .25s ease, transform .5s var(--spring-pop); pointer-events: none; }
.fan-m.hov .name, .fan-m.on .name, .fan-m:focus-visible .name { opacity: 1; transform: translate(-50%, 0); }
.fan-m:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.fan .bpos { z-index: 40; }
.fan .bubble { max-width: 210px; }
.tries { margin: 18px auto 0; max-width: 700px; }
.try-q { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; font-size: 14px; color: var(--ink-muted); }
.try-q q { quotes: "\201C" "\201D"; color: var(--ink); font-weight: 600; }
.try-card { padding: 20px 22px; min-height: 168px; }
.try-card .msg.bot { align-items: flex-start; }
.try-card .msg.bot .mascot { --s: 36px; }
.try-card .txt { font-size: 15px; line-height: 1.6; text-align: left; }
.try-card .txt p + p, .try-card .txt ul { margin-top: 8px; }
.try-card .txt ul { display: grid; gap: 3px; padding-left: 18px; list-style: disc; }
.try-card .txt li::marker { color: var(--ink-faint); }
.try-card .who { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-weight: 650; font-size: 14px; }
.try-card .who span { font-weight: 400; color: var(--ink-muted); font-size: 13px; }
.tiles3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 44px; text-align: left; }
.tiles3 .tile { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; padding: 18px 20px; }
.tiles3 .tile .mascot { --s: 52px; grid-row: span 2; }
.tiles3 .tile h3 { font-size: 15.5px; align-self: end; }
.tiles3 .tile p { font-size: 13.5px; color: var(--ink-muted); line-height: 1.45; align-self: start; }
.auto-m { position: relative; width: 52px; height: 52px; grid-row: span 2; }
.auto-m .mascot { position: absolute; inset: 0; --s: 52px; transition: opacity .4s ease, transform .5s var(--spring-pop); }
.auto-m .mascot.out { opacity: 0; transform: scale(.92); }

/* ---- More: a bento ---- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.bento .tile { padding: 22px; display: flex; flex-direction: column; gap: 6px; min-height: 252px; overflow: hidden; }
.bento .tile h3 { font-size: 18px; margin-top: auto; }
.bento .tile p { font-size: 14.5px; color: var(--ink-muted); max-width: 44ch; }
.bento .art { position: relative; flex: 1; display: grid; place-items: center; min-height: 120px; margin-bottom: 12px; }
.b-quick { grid-column: span 4; }
.b-files { grid-column: span 2; }
.b-group { grid-column: span 2; }
.b-money { grid-column: span 4; }
.b-keys { grid-column: span 3; }
.b-update { grid-column: span 3; }
.b-quick { padding: 0 !important; min-height: 420px !important; }
.b-quick .copy { display: grid; gap: 4px; padding: 18px 24px 24px; }
.b-quick .copy h3 { margin-top: 0; }
.b-quick .copy p { max-width: 62ch; }

/* Quick chat: the black tab on the screen's edge */
.qdesk { position: relative; flex: 1; min-height: 270px; overflow: hidden; background: radial-gradient(90% 80% at 15% 0%, var(--glow-a), transparent 70%), radial-gradient(80% 80% at 95% 100%, var(--glow-b), transparent 72%), var(--ground); border-bottom: 1px solid var(--line); }
.qdesk .menubar { position: absolute; }
.qdesk .backwin { position: absolute; left: 22%; right: 6%; top: 56px; bottom: 0; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--canvas); padding: 18px 20px; display: grid; align-content: start; gap: 12px; opacity: .85; }
.backwin i { display: block; height: 8px; border-radius: 99px; background: var(--raised); }
.backwin i:nth-child(1) { width: 38%; height: 12px; background: var(--line); }
.backwin i:nth-child(2) { width: 92%; }
.backwin i:nth-child(3) { width: 84%; }
.backwin i:nth-child(4) { width: 90%; }
.backwin i:nth-child(5) { width: 52%; }
.blob { position: absolute; left: 0; top: 74px; z-index: 5; display: flex; background: #000; color: #fff; border-radius: 0 16px 16px 0; overflow: hidden; width: 46px; height: 46px; transition: width .7s var(--spring-soft), height .7s var(--spring-soft); cursor: default; box-shadow: none; }
.blob .rail { flex: none; display: grid; align-content: start; justify-items: center; gap: 6px; width: 46px; padding: 7px 0; }
.blob .rail .mascot { --s: 32px; }
.blob .rail hr { width: 24px; margin: 3px 0; border: 0; border-top: 1px solid #353535; }
.blob .rail .mascot.sm { --s: 26px; opacity: 0; transition: opacity .4s ease; }
.blob .card { flex: none; display: grid; align-content: start; gap: 8px; width: 262px; padding: 12px 14px 12px 6px; border-left: 1px solid #353535; opacity: 0; transition: opacity .35s ease; }
.blob .card .q { display: block; padding: 0; width: auto; font: 500 12.5px/1.3 var(--font-ui); color: #EDEDED; cursor: default; }
.blob .card .a { display: block; font-size: 12px; color: #9B9B9B; line-height: 1.45; min-height: 52px; }
.blob .card .a b { color: #EDEDED; }
.blob .comp { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 5px 4px 12px; border: 1px solid #353535; border-radius: 12px; background: #1F1F1F; color: #676767; font-size: 12.5px; }
.blob .comp .typed { color: #EDEDED; }
.blob .comp .send { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; background: #EDEDED; color: #171717; display: grid; place-items: center; }
.blob .comp .send .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.blob.open { width: 308px; height: 168px; }
.blob.open .card { opacity: 1; }
.blob.open .rail .mascot.sm { opacity: 1; }
.blob.news { height: 86px; }
.blob.news .rail .mascot.sm { opacity: 1; }
.blob .dotnew { position: absolute; left: 6px; bottom: 8px; width: 8px; height: 8px; border-radius: 50%; background: #EDEDED; opacity: 0; transition: opacity .3s; }
.blob.ready .dotnew { opacity: 1; }
.qdesk .hint { position: absolute; left: 62px; top: 82px; z-index: 4; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-muted); transition: opacity .3s; }
.qdesk .hint .ic { width: 14px; height: 14px; }

.files-art { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.drop { position: relative; display: grid; place-items: center; width: 150px; height: 92px; border: 1.5px dashed var(--edge-hover); border-radius: 14px; color: var(--ink-muted); font-size: 12px; }
.drop .file { position: absolute; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-weight: 600; font-size: 12px; box-shadow: var(--float); animation: dropin 5s var(--smooth) infinite; }
.drop .file .ic { width: 15px; height: 15px; }
@keyframes dropin { 0% { transform: translate(34px, -58px) rotate(8deg); opacity: 0; } 14% { opacity: 1; } 34%, 70% { transform: translate(0, 0) rotate(0); opacity: 1; } 84%, 100% { transform: translate(0, 6px) scale(.96); opacity: 0; } }

.group-art { display: grid; gap: 10px; width: 100%; max-width: 260px; }
.gline { display: flex; align-items: center; gap: 9px; }
.gline .mascot { --s: 28px; }
.gline .gb { padding: 7px 11px; border-radius: 12px; background: var(--raised); font-size: 12.5px; }
.gline.r { flex-direction: row-reverse; }
.gline .dots { display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--raised); }
.gline .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-muted); animation: typing 1.2s ease-in-out infinite; }
.gline .dots i:nth-child(2) { animation-delay: .15s; }
.gline .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.money-art { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; width: 100%; }
.money-n { font-size: clamp(34px, 4.4vw, 52px); font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.money-l { margin-top: 8px; font-size: 12.5px; color: var(--ink-muted); max-width: 20ch; line-height: 1.4; }
.heat { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 4px; justify-content: end; }
.heat i { width: 100%; aspect-ratio: 1; border-radius: 3px; background: var(--raised); opacity: 0; transform: scale(.5); transition: opacity .5s ease, transform .6s var(--spring-pop), background-color .3s; transition-delay: calc(var(--k, 0) * 9ms); }
.heat.in i { opacity: 1; transform: none; }
.heat i[data-l="1"] { background: rgb(var(--ink-rgb) / .22); }
.heat i[data-l="2"] { background: rgb(var(--ink-rgb) / .42); }
.heat i[data-l="3"] { background: rgb(var(--ink-rgb) / .68); }
.heat i[data-l="4"] { background: var(--ink); }
.heat { --cell: 13px; grid-template-columns: repeat(19, var(--cell)); grid-template-rows: repeat(7, var(--cell)); }
.heat i { width: var(--cell); height: var(--cell); aspect-ratio: auto; }

.keys-art { display: flex; flex-wrap: wrap; gap: 14px 22px; justify-content: center; }
.keys-art .combo { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-muted); }
.keys-art kbd { transition: transform .12s ease, background-color .12s; }
.keys-art kbd.hit { transform: translateY(2px); border-bottom-width: 1px; background: var(--raised); }
.update-art { display: grid; justify-items: center; gap: 12px; }
.upd { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--canvas); font-size: 13px; font-weight: 500; }
.upd .btn { padding: 7px 14px; font-size: 12.5px; }
.upd .bar { display: none; position: relative; width: 110px; height: 6px; border-radius: 99px; background: var(--raised); overflow: hidden; }
.upd .bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; animation: fill 3.4s var(--smooth) forwards; }
.upd.busy .bar { display: block; }
.upd.busy .btn { display: none; }
.updtext { white-space: nowrap; }

/* ---- Honest ---- */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
.pair .tile { padding: 22px 24px; }
.pair h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 16px; }
.pair h3 .ic { width: 18px; height: 18px; }
.pair li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-muted); }
.pair li:first-of-type { border-top: 0; }
.pair li b { color: var(--ink); font-weight: 600; }
.pair li .ic { width: 15px; height: 15px; margin-top: 3px; color: var(--ink); stroke-width: 2.2; }
.pair .tile.dim li .ic { color: var(--ink-faint); }

/* ---- FAQ + final ---- */
.faq-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-split .sec-head { position: sticky; top: 96px; }
.final { text-align: center; }
.final .pane-in { display: grid; justify-items: center; padding-block: clamp(56px, 8vw, 112px); }
.final .anchor { --as: clamp(110px, 14vw, 150px); margin-bottom: 18px; }
.final h2 { font-size: clamp(40px, 6vw, 76px); }
.final .lede { margin-top: 18px; }
.final .dl { margin-top: 36px; }
.alt { width: min(640px, 100%); margin-top: 26px; text-align: left; }
.alt summary { display: flex; align-items: center; justify-content: center; gap: 8px; list-style: none; cursor: pointer; font-size: 13.5px; color: var(--ink-muted); transition: color .15s; }
.alt summary::-webkit-details-marker { display: none; }
.alt summary:hover { color: var(--ink); }
.alt summary .ic { width: 14px; height: 14px; transition: transform .4s var(--spring-soft); }
.alt[open] summary .ic { transform: rotate(90deg); }
.alt .box { display: grid; gap: 10px; margin-top: 14px; }
.cmd { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.cmd code { flex: 1; min-width: 0; padding: 13px 15px; border-radius: 0; background: transparent; font: 12.5px/1.5 var(--font-mono); word-break: break-all; -webkit-user-select: all; user-select: all; }
.cmd button { min-width: 78px; padding: 0 16px; border: 0; border-left: 1px solid var(--line); background: var(--raised); font: 600 13px var(--font-ui); cursor: pointer; transition: background-color .15s; }
.cmd button:hover { background: var(--pressed); }


[data-pending] { display: none !important; }

/* ---- The real app: screenshots in the app's segmented control ---- */
.viewer { display: grid; justify-items: center; margin-top: 34px; }
.seg { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--raised); }
.seg button { position: relative; z-index: 1; padding: 8px 18px; border: 0; border-radius: 999px; background: none; color: var(--ink-muted); font: 500 13.5px/1 var(--font-ui); cursor: pointer; transition: color .2s ease; }
.seg button:hover { color: var(--ink); }
.seg button[aria-selected="true"] { color: var(--ink); }
.seg .thumb { position: absolute; left: 0; top: 3px; bottom: 3px; z-index: 0; width: 0; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgb(0 0 0 / .1); transition: transform .6s var(--spring-soft), width .6s var(--spring-soft); }
.stage { position: relative; width: min(880px, 100%); margin-top: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: height .7s var(--glide); }
.frame { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transform: scale(.985); filter: blur(6px); transition: opacity .5s ease, transform .8s var(--glide), filter .5s ease; pointer-events: none; }
.frame.on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.frame img { width: 100%; height: auto; }
html:not(.js) .stage { height: auto !important; }
html:not(.js) .frame { position: static; opacity: 1; transform: none; filter: none; }
.viewer .cap { margin-top: 14px; min-height: 20px; }

/* ---- Chapter dots: where you are on the page (the onboarding's ProgressDots) ---- */
.chapters { position: fixed; right: 20px; top: 50%; z-index: 45; display: none; transform: translateY(-50%); flex-direction: column; gap: 9px; }
.chapters a { position: relative; display: block; width: 6px; height: 6px; border-radius: 99px; background: rgb(var(--ink-rgb) / .18); transition: height .6s var(--spring-soft), background-color .3s; }
.chapters a.past { background: rgb(var(--ink-rgb) / .4); }
.chapters a.on { height: 22px; background: var(--ink); }
.chapters a::after { content: attr(data-label); position: absolute; right: 18px; top: 50%; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: 500 12px/1 var(--font-ui); white-space: nowrap; color: var(--ink); opacity: 0; transform: translate(6px, -50%); transition: opacity .2s, transform .4s var(--spring-pop); pointer-events: none; }
.chapters a:hover::after { opacity: 1; transform: translate(0, -50%); }
.chapters a::before { content: ""; position: absolute; inset: -6px -10px; }
@media (min-width: 1380px) { .chapters { display: flex; } }

/* =========================================================================
   Small screens
   ========================================================================= */
@media (max-width: 980px) {
  .split, .split.flip, .faq-split { grid-template-columns: minmax(0, 1fr); }
  .faq-split .sec-head { position: static; }
  .compare { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cmp-mid { padding: 18px 0; grid-auto-flow: column; justify-content: center; }
  .cmp-mid .vs { display: none; }
  .cmp { min-height: 0; }
  .steps, .tiles3, .facts { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-quick, .b-money { grid-column: span 2; }
  .b-files, .b-group, .b-keys, .b-update { grid-column: span 1; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .win-body { grid-template-columns: 150px minmax(0, 1fr); }
}
@media (max-width: 720px) {
  :root { --gutter: 8px; }
  .nav-links a:not(.keep) { display: none; }
  .nav-links { margin-left: auto; }
  .nav .brand > span:last-child { display: none; }
  .hero-window { height: 360px; margin-top: 40px; }
  .win-body { grid-template-columns: minmax(0, 1fr); }
  .win-side { display: none; }
  .win-main, .win.solo .win-main { margin: 0 6px 6px; }
  .hero-window .win-main { margin-bottom: 0; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .b-quick, .b-money, .b-files, .b-group, .b-keys, .b-update { grid-column: span 1; }
  .money-art { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .heat { --cell: 11px; }
  .transcript { padding: 16px 16px 8px; }
  .desk { aspect-ratio: 4 / 5; }
  .desk .win { left: 4%; right: 4%; }
  .suggest { padding: 0 12px 8px; }
  .menubar .menus { display: none; }
  .blob.open { width: 280px; }
  .blob .card { width: 236px; }
  .dl-panel { bottom: 12px; }
}

/* ---- Reduced motion: everything is simply there ------------------------------ */
/* =========================================================================
   LEARN: the plain-English guide
   ========================================================================= */
.menubar .menus { display: inline-flex; gap: 14px; }
.lead .pane-in { padding-bottom: clamp(44px, 5vw, 68px); }
.lead h1 { max-width: 14ch; }
.center-eyebrow { width: auto; justify-content: center; margin-bottom: 16px; }
.center-eyebrow::after { display: none; }
.toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 660px; margin-top: 30px; }
.toc .chip { text-decoration: none; transition: transform .55s var(--spring-pop), background-color .15s ease; }
.toc .chip:hover { transform: scale(1.05); background: var(--pressed); }
.prose { display: grid; gap: 14px; margin-top: 22px; max-width: 56ch; }
.prose p { font-size: 17px; line-height: 1.6; color: var(--ink-muted); text-wrap: pretty; }
.prose p b { color: var(--ink); font-weight: 600; }
.prose .small { font-size: 14px; }
.prose .analogy { padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: 15.5px; }
.sec-head .prose { margin-top: 4px; }

/* Cloud or local: where a message goes */
.route { display: grid; gap: 12px; }
.lane { padding: 18px 20px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.lane-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; font-size: 13px; color: var(--ink-muted); }
.lane-h .tag { padding: 4px 11px; border-radius: 999px; background: var(--raised); color: var(--ink); font-weight: 600; font-size: 12px; }
.track { display: flex; align-items: center; }
.node { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); font-size: 13px; font-weight: 600; white-space: nowrap; }
.node .ic { width: 16px; height: 16px; }
.node .mascot { --s: 20px; }
.wire { position: relative; flex: 1; height: 2px; min-width: 40px; margin: 0 8px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); }
.wire .pkt { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: 0; animation: fly 3.4s linear infinite; }
.wire .pkt:nth-of-type(2) { animation-delay: 1.13s; }
.wire .pkt:nth-of-type(3) { animation-delay: 2.27s; }
.wire.short { flex: 0 0 76px; }
.wire.short .pkt { animation-duration: 1.3s; }
.wire.short .pkt:nth-of-type(2) { animation-delay: .65s; }
@keyframes fly { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
.net { position: absolute; left: 50%; top: -26px; display: inline-flex; align-items: center; gap: 5px; transform: translateX(-50%); font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.net .ic { width: 14px; height: 14px; }
.mac { position: relative; display: flex; align-items: center; justify-content: center; padding: 18px 16px 16px; border: 1.5px solid var(--ink-faint); border-radius: 16px; }
.mac-label { position: absolute; top: -8px; left: 14px; padding: 0 8px; background: var(--surface); font: 600 10.5px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.lane .cap { margin-top: 14px; font-size: 13.5px; color: var(--ink-muted); }

/* Why: four tiles */
.why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.why .tile { display: grid; gap: 8px; align-content: start; padding: 26px 28px 30px; }
.why .tile .ic { width: 26px; height: 26px; margin-bottom: 8px; transition: transform .6s var(--spring-pop); }
.why .tile:hover .ic { transform: scale(1.14) rotate(-5deg); }
.why h3 { font-size: 20px; }
.why p { max-width: 44ch; font-size: 15.5px; color: var(--ink-muted); }

/* The catch: five cards, then the comparison */
.catches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.catches .tile { padding: 22px 24px 24px; grid-column: span 2; }
.catches .tile:nth-child(-n+2) { grid-column: span 3; }
.catches h3 { margin-bottom: 8px; font-size: 17px; }
.catches p { font-size: 14.5px; color: var(--ink-muted); }
.table-wrap { margin-top: 28px; overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; font-size: 14.5px; }
.cmp-table th, .cmp-table td { padding: 14px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.cmp-table thead th { border-top: 0; font: 600 11.5px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.cmp-table tbody th { font-weight: 600; color: var(--ink); width: 30%; }
.cmp-table td { color: var(--ink-muted); }
.cmp-table td:last-child, .cmp-table th:last-child { background: rgb(var(--ink-rgb) / .04); color: var(--ink); }
.cmp-table tbody tr { transition: background-color .15s; }
.cmp-table tbody tr:hover { background: var(--hover); }

/* How an AI writes */
.nw { padding: 22px 24px 20px; }
.nw-label { font: 600 11px/1 var(--font-ui); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-muted); }
.nw-line { min-height: 88px; margin-top: 14px; font-size: clamp(20px, 2.3vw, 26px); line-height: 1.35; letter-spacing: -.012em; }
.nw-line .pc { display: inline; animation: pick .6s var(--smooth) both; }
.nw-line .pc:first-of-type { font-weight: 650; }
@keyframes pick { from { opacity: 0; filter: blur(5px); } }
.nw-line .caret::after { height: 1em; vertical-align: -.12em; }
.nw-opts { display: grid; gap: 8px; margin-top: 14px; min-height: 236px; align-content: start; }
.nw-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); color: var(--ink); text-align: left; font: 500 15px/1.2 var(--font-ui); cursor: pointer; overflow: hidden; transition: transform .55s var(--spring-pop), border-color .15s ease; }
.nw-opt:hover:not(:disabled) { transform: scale(1.012); border-color: var(--edge-hover); }
.nw-opt:disabled { cursor: default; }
.nw-opt .fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 1%); background: rgb(var(--ink-rgb) / .08); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--glide); transition-delay: calc(var(--k) * 70ms); }
.nw-opt.in .fill { transform: scaleX(1); }
.nw-opt .lbl, .nw-opt .pct { position: relative; }
.nw-opt .pct { font: 600 13px var(--font-mono); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.nw-opt.chosen { border-color: var(--ink); background: var(--surface); }
.nw-opt.chosen .fill { background: rgb(var(--ink-rgb) / .14); }
.nw-opt:disabled:not(.chosen) { opacity: .55; }
.nw-done { padding: 16px 4px; font-size: 14.5px; color: var(--ink-muted); max-width: 46ch; }
.nw-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.nw-actions { display: inline-flex; gap: 8px; }
.replay:disabled { opacity: .4; pointer-events: none; }

/* Will it run on my Mac */
.ram { padding: clamp(20px, 3vw, 30px); }
.ram-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.ram-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 52px); margin-top: 30px; align-items: start; }
.ram-copy h3 { margin-bottom: 8px; font-size: 22px; letter-spacing: -.02em; }
.ram-copy p { max-width: 46ch; font-size: 15.5px; color: var(--ink-muted); }
.mdls { display: grid; gap: 8px; margin-top: 20px; }
.mdl { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); color: var(--ink); text-align: left; cursor: pointer; transition: transform .55s var(--spring-pop), border-color .15s ease, background-color .15s ease; }
.mdl:hover { transform: scale(1.012); border-color: var(--edge-hover); }
.mdl[aria-pressed="true"] { border-color: var(--ink); background: var(--surface); }
.mdl .nm { display: block; font-weight: 600; font-size: 14.5px; }
.mdl .ds { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-muted); }
.mdl .sz { font: 600 13px var(--font-mono); white-space: nowrap; }
.ram-bar { display: flex; height: 60px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.ram-bar i { display: block; height: 100%; transition: width 1s var(--spring-soft); }
.ram-bar .m { width: var(--w1, 30%); background: var(--ink); }
.ram-bar .t { width: var(--w2, 30%); background: var(--raised); }
.ram-bar .r { width: var(--w3, 30%); border-left: 1.5px solid var(--ink-faint); background: repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 7px); }
.legend { display: grid; gap: 9px; margin-top: 18px; font-size: 13.5px; color: var(--ink-muted); }
.legend li { display: flex; align-items: center; gap: 10px; }
.sw { flex: none; width: 15px; height: 15px; border: 1px solid var(--line); border-radius: 4px; }
.sw.m { background: var(--ink); border-color: var(--ink); }
.sw.t { background: var(--raised); }
.sw.r { background: repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 5px); }
.ram-viz .small { margin-top: 16px; }

.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
.three .tile { display: grid; gap: 6px; align-content: start; padding: 22px 24px 26px; }
.three .tile .ic { width: 24px; height: 24px; margin-bottom: 8px; transition: transform .6s var(--spring-pop); }
.three .tile:hover .ic { transform: scale(1.14) rotate(-5deg); }
.three p { font-size: 14.5px; color: var(--ink-muted); }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

@media (max-width: 980px) {
  .why, .three { grid-template-columns: minmax(0, 1fr); }
  .catches { grid-template-columns: minmax(0, 1fr); }
  .catches .tile, .catches .tile:nth-child(-n+2) { grid-column: auto; }
  .ram-body { grid-template-columns: minmax(0, 1fr); }
  .lane-h { margin-bottom: 24px; }
}
@media (max-width: 720px) {
  .cmp-table th, .cmp-table td { padding: 12px 12px; font-size: 13.5px; }
  .node { padding: 8px 10px; font-size: 12px; }
  .wire { min-width: 24px; }
  .ram-top .small { width: 100%; }
}

html:not(.js) :is(.hero-window, .compare, .cmp-foot, .desk, .desk-note, .fan, .tries, .b-quick, .heat) { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ground i, .nudge, .caret::after, .wire .pkt, .art-dl .track::after, .art-open img, .drop .file, .gline .dots i, .upd .bar::after { animation: none !important; }
  .js [data-reveal], .js [data-reveal].in { opacity: 1; transform: none; filter: none; transition: none; }
  .btn, .btn-thermal, .tile, .shot, .fan-m, .fan-m .lift { transition-duration: .01s; }
  .btn:hover, .tile.lift:hover, .shot:hover { transform: none; }
  .msg, .limit-card, .nw-line .pc { animation: none; }
  .nw-opt .fill { transition: none; }
}
@media print {
  .ground, .nav, .guide-layer, .dots, .dl-panel { display: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ---- Terms of service: long plain text inside a pane ---------------------------------------------- */
.legal { display: grid; gap: 4px; max-width: 70ch; margin-top: 28px; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: var(--ink-muted); text-wrap: pretty; }
.legal .analogy { padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: 15.5px; margin-bottom: 6px; }
.legal h2 { margin: 30px 0 6px; font-size: 20px; letter-spacing: -.01em; color: var(--ink); }
.legal ul { list-style: disc; margin: 6px 0; padding-left: 22px; display: grid; gap: 4px; }
.legal a { color: var(--ink); text-underline-offset: 2px; }