/* The app pages (/apps, /apps/<editor>) — written by site/seo/build.mjs. They
   stand on doc.css for the tokens, nav, buttons and footer, and borrow the rest
   from the landing: the hero, the kicker-and-headline sections, the flow cards,
   the FAQ. Values are copied from index.html the way doc.css copies its tokens;
   if one changes there, change it here. Everything is scoped to body.landing so
   none of it leaks into the document pages that share doc.css.

   New here is the pair of windows: the page the reader has, and the same page
   after ⌥T. Two panes on one grid, their rows tied by subgrid, so a line on the
   left and its translation on the right always sit at the same height — the
   figure's whole claim is that the shape does not move. */

:root {
  --panel-a: #101013;
  --panel-b: #0A0A0C;
}
:root[data-theme="light"] {
  --panel-a: #FFFFFF;
  --panel-b: #F6F5F2;
}

body.landing { line-height: 1.5; }

/* ---------- Type ---------- */
/* Weight capped at 500 site-wide — scale carries hierarchy, not boldness. */
.landing h1 {
  font-size: clamp(38px, 5.8vw, 64px);
  font-weight: 500; letter-spacing: -0.03em; line-height: 1.04;
  max-width: 920px; margin: 0 auto;
  text-wrap: balance;
}
.landing h1 .dim { color: var(--gray-dim); }
.landing h2 {
  font-size: clamp(28px, 3.8vw, 38px);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.12;
  text-wrap: balance;
}
.landing section { padding: 80px 0; }
.landing .section-head { max-width: 560px; margin-bottom: 40px; }
.landing .kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gray);
  margin-bottom: 14px;
}
.landing .section-sub { margin-top: 14px; color: var(--gray); font-size: 16px; }
.landing kbd {
  font-family: inherit; font-size: 12px;
  background: rgba(var(--fg-rgb), 0.07);
  border: 1px solid var(--line);
  border-radius: 5px; padding: 0 5px; white-space: nowrap;
  color: var(--bone);
}
.landing .check { color: var(--orange); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 150px 0 20px;
  text-align: center;
  overflow: hidden;
}
.hero .wrap { position: relative; z-index: 1; }
/* This hero is shorter than the landing's, which carries its demo inside it,
   so the watermark would be cut off by the header's bottom edge in a hard
   line. It fades out before the edge instead. */
.hero-logo-bg {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0.02; color: var(--bone);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
}
.hero-logo-bg svg { display: block; width: 100%; height: auto; }
.glow {
  position: absolute; top: -220px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 620px;
  background: radial-gradient(ellipse at center, rgba(var(--fg-rgb), 0.07), transparent 65%);
  pointer-events: none;
}
/* The landing's beta pill, without the pulse: this one names a place, it is
   not announcing anything. */
.app-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--gray);
  border: 1px solid var(--line);
  background: rgba(var(--fg-rgb), 0.03);
  padding: 5px 13px; border-radius: 99px;
  margin-bottom: 26px;
  animation: rise 0.8s both;
}
.app-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.landing h1 { animation: rise 0.8s 0.06s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero .sub {
  margin: 22px auto 0; max-width: 600px;
  font-size: 18px; color: var(--gray);
  animation: rise 0.8s 0.16s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.landing .cta-row {
  margin-top: 34px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  animation: rise 0.8s 0.24s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.landing .btn.large { padding: 13px 26px; font-size: 15px; }
.landing .cta-note {
  margin-top: 16px; font-size: 13px; color: var(--gray-dim);
  animation: rise 0.8s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/* When the page was last held against the app. A comparison nobody dated is a
   comparison nobody can trust, and a date is cheap. */
.fresh {
  margin-top: 6px; font-size: 12px;
  color: rgba(var(--fg-rgb), 0.38);
  font-variant-numeric: tabular-nums;
  animation: rise 0.8s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The three things this page is about, named under the headline. Links, not
   labels: each one goes to the scene that shows it, so the top of the page is
   also its table of contents. */
.glance {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; max-width: 840px; margin: 44px auto 0;
  text-align: left;
  animation: rise 0.8s 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.glance-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.glance-item:hover {
  background: var(--card-hover);
  border-color: rgba(var(--fg-rgb), 0.16);
  transform: translateY(-1px);
}
.glance-item .icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(var(--fg-rgb), 0.06);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--bone); margin-bottom: 6px;
}
.glance-item .icon svg { width: 15px; height: 15px; }
.glance-word { font-size: 14.5px; font-weight: 500; color: var(--bone); }
.glance-line { font-size: 13px; line-height: 1.45; color: var(--gray); }
@media (max-width: 720px) {
  .glance { grid-template-columns: 1fr; gap: 8px; margin-top: 34px; }
  /* On a phone the three read as a list: the icon, the word, and the line
     beside it rather than under it. */
  .glance-item { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 16px; }
  .glance-item .icon { margin-bottom: 0; }
  .glance-line { color: var(--gray-dim); }
}

/* An anchor landing under the fixed nav is an anchor that looks like it missed. */
#translate, #dictation, #rewrite { scroll-margin-top: 76px; }

/* ---------- The pair ---------- */
.landing section.stage { padding: 56px 0 40px; }
.twin { margin: 0; animation: rise 0.9s 0.36s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.twin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr);
  grid-template-rows: repeat(var(--rows), auto);
}
.pane {
  grid-row: 1 / span var(--rows);
  display: grid; grid-template-rows: subgrid;
  position: relative;
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb), 0.06);
  text-align: left;
}
.pane.a { grid-column: 1; }
.pane.b { grid-column: 3; }
.win-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 14px 12px 16px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.win-bar > span { flex: none; width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--fg-rgb), 0.12); }
.win-bar em {
  flex: 1; min-width: 0; margin-left: 8px;
  font-style: normal; font-size: 12px; color: var(--gray-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win-bar .lang {
  flex: none; font-style: normal;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--gray); border: 1px solid var(--line);
  padding: 2px 8px; border-radius: 99px;
}
.win-bar .lang.on { color: var(--bg); background: var(--bone); border-color: var(--bone); }

/* Rows. Each kind draws its own furniture — box, triangle, bullet, number —
   and both panes draw it from the same markup, so it lands on the same pixel. */
.row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 5px 22px 5px calc(22px + var(--lvl, 0) * 22px);
  font-size: 14.5px; line-height: 1.6; color: var(--bone);
  min-width: 0;
}
.row.first { padding-top: 20px; }
.row.last { padding-bottom: 24px; }
.row .txt { min-width: 0; border-radius: 3px; }
.row.r-h .txt { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.row.r-h { padding-bottom: 8px; }
.is-doc .row.r-h .txt { font-size: 17px; }

/* The selection, as the landing's demo draws one. */
.txt.sel { background: rgba(var(--fg-rgb), 0.16); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.g-box, .g-tri, .g-dot, .g-num, .g-ico { flex: none; align-self: flex-start; }
.g-box {
  width: 15px; height: 15px; margin-top: 4px;
  border: 1.5px solid var(--gray-dim); border-radius: 3.5px;
  position: relative;
}
.row.done .g-box { background: var(--bone); border-color: var(--bone); }
.row.done .g-box::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border-right: 1.8px solid var(--bg); border-bottom: 1.8px solid var(--bg);
  transform: rotate(45deg);
}
.row.done .txt { color: var(--gray); text-decoration: line-through; text-decoration-color: rgba(var(--fg-rgb), 0.35); }
.g-tri {
  width: 0; height: 0; margin: 8px 3px 0 4px;
  border-left: 7px solid var(--gray); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
}
.g-dot { width: 5px; height: 5px; margin: 10px 4px 0 5px; border-radius: 50%; background: var(--gray); }
.g-num { min-width: 16px; color: var(--gray); font-variant-numeric: tabular-nums; }
.callout {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: 10px;
  background: rgba(var(--fg-rgb), 0.05);
  border-radius: 8px; padding: 9px 12px;
  margin: 4px 0;
}
.g-ico {
  width: 16px; height: 16px; margin-top: 3px; border-radius: 5px;
  border: 1.5px solid var(--gray-dim);
  background: radial-gradient(circle at 50% 50%, var(--gray) 0 2px, transparent 2.5px);
}

/* The marks inside the words. Muted on purpose: a mention is a grey chip here,
   not Slack's blue, because the figure is about the mark surviving, not about
   any one editor's colours. */
.row b { font-weight: 600; }
.row u { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.row s { text-decoration-color: rgba(var(--fg-rgb), 0.5); color: var(--gray); }
.row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: rgba(var(--fg-rgb), 0.07); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 4px;
}
.m-at {
  background: rgba(var(--fg-rgb), 0.09); border-radius: 4px;
  padding: 0 4px; font-weight: 500;
}
.m-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(var(--fg-rgb), 0.45); }
/* A highlighter stroke across the lower half, so it never reads as the
   selection, which fills the whole line. */
.m-hl { box-shadow: inset 0 -0.5em 0 rgba(var(--fg-rgb), 0.14); }

/* The popup that would appear by the selection, with the language already
   chosen — the same capsule the landing's demo uses. It hangs over the pane's
   bottom edge the way the real one floats over whatever is underneath. */
.tr-popup {
  position: absolute; right: 22px; bottom: -19px; z-index: 2;
  display: inline-flex; align-items: center;
  background: var(--panel-float);
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  border-radius: 99px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(var(--fg-rgb), 0.07);
  padding: 3px;
  font-size: 12px; font-weight: 600;
}
.tr-popup b { padding: 5px 11px; border-radius: 99px; color: var(--gray); font-weight: 600; }
.tr-popup b.hit { background: var(--bone); color: var(--bg); }

/* Between the panes: the two keys, and a line from one to the other. */
.bridge {
  grid-column: 2; grid-row: 1 / span var(--rows);
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.bridge-line {
  position: absolute; left: 0; right: 0; top: 50%; z-index: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--fg-rgb), 0.18) 18%, rgba(var(--fg-rgb), 0.18) 82%, transparent);
}
.bigkey {
  position: relative; z-index: 1;
  min-width: 38px; text-align: center;
  font-size: 15px; font-weight: 500;
  color: var(--bone);
  background: var(--bg);
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb), 0.08), 0 2px 0 rgba(var(--fg-rgb), 0.06);
}

.twin .typed-label {
  margin-top: 30px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12.5px; color: var(--gray-dim);
}

/* Motion: once the pair has risen into place, the keys go down, then the
   answer's lines arrive in order, out of focus and settling — the landing
   headline's blur-in, smaller. The furniture (boxes, bullets, the callout) is
   there from the start; only the words are new, which is the point.
   CSS alone, timed from load: a first version waited for an
   IntersectionObserver to start it, and a browser that never called back left
   the answer window empty. The figure sits in the first screen anyway. */
.twin .pane.b .txt {
  animation: words-in 0.62s cubic-bezier(0.2, 0.65, 0.3, 1) both;
  animation-delay: calc(1.25s + var(--i) * 0.11s);
}
.twin .bigkey { animation: key-press 0.34s 1s ease-out both; }
.twin .bigkey + .bigkey { animation-delay: 1.07s; }
@keyframes words-in {
  0%   { filter: blur(8px); opacity: 0;  transform: translateY(-4px); }
  55%  { filter: blur(3px); opacity: .6; transform: translateY(1px); }
  100% { filter: blur(0);   opacity: 1;  transform: translateY(0); }
}
@keyframes key-press {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(var(--fg-rgb), 0.05), 0 0 0 rgba(var(--fg-rgb), 0); }
}

/* Narrow screens: the panes stack, and the keys sit between them. Subgrid
   has nothing to align across once there is one column, so the panes go back
   to being ordinary blocks. */
@media (max-width: 780px) {
  .twin-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  /* As specific as .pane.b above, or the right pane keeps column 3 and grows
     the grid two implicit columns wider than the phone. */
  .pane.a, .pane.b, .bridge { grid-column: 1; grid-row: auto; }
  .pane { display: block; }
  .bridge { padding: 34px 0 14px; }
  .bridge-line { display: none; }
  .row { padding-left: calc(18px + var(--lvl, 0) * 20px); padding-right: 18px; }
}

/* ---------- One window, with a voice going into it ---------- */
/* Dictation has no "before" worth drawing: the field was empty. So the scene
   is a single window with what was said standing under it — the key held, the
   bars moving, the sentence as it was spoken — and the finished text, with its
   punctuation, where the cursor was. */
.twin.solo .twin-grid { grid-template-columns: minmax(0, 1fr); }
.twin.solo .pane.b { grid-column: 1; }
.twin.solo { max-width: 680px; margin: 0 auto; }
.said {
  grid-column: 1; grid-row: auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 20px 4px 0;
}
.said-text { font-size: 14px; color: var(--gray); font-style: italic; }
.bigkey.wide { font-size: 13px; letter-spacing: 0.01em; }
/* The bars from the landing's dictation demo, at the same tempo. */
.wave { display: inline-flex; align-items: center; gap: 2.5px; height: 14px; }
.wave i { width: 2.5px; border-radius: 2px; background: var(--orange); animation: wave 1s ease-in-out infinite; }
.wave i:nth-child(1) { height: 6px; animation-delay: 0s; }
.wave i:nth-child(2) { height: 12px; animation-delay: 0.15s; }
.wave i:nth-child(3) { height: 8px; animation-delay: 0.3s; }
.wave i:nth-child(4) { height: 13px; animation-delay: 0.45s; }
.wave i:nth-child(5) { height: 5px; animation-delay: 0.6s; }
@keyframes wave {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
/* Where the words stopped. It blinks after they have all arrived, not during. */
.caret {
  display: inline-block; width: 2px; height: 1.05em;
  background: var(--bone); vertical-align: -0.15em; margin-left: 2px;
  animation: blink 1s step-end infinite;
  animation-delay: 2s;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .wave i, .caret { animation: none; }
}

/* ---------- The editor each pair is drawn in ---------- */
/* Shape only: a rail where the app has a sidebar, a sheet where it has a page,
   a box where it has a composer. No brand colour and no logo — the figure is
   about our own product working inside theirs, and a page that borrows their
   palette both lies about the relationship and turns the site into a swatch
   book. Everything below is the same greys as the rest of the page.
   The scenery is positioned, never placed in the grid: the rows are what the
   two panes are aligned by, and one extra grid item would shift a pane. */
/* One number the rail's width and everything that has to clear it are built
   from: the text column, the avatar hanging to its left, the composer box. */
.skin-notion, .skin-slack { --rail: 40px; --gutter: 64px; }
.rail {
  position: absolute; top: 45px; bottom: 0; left: 0; width: var(--rail);
  border-right: 1px solid var(--line);
  background: rgba(var(--fg-rgb), 0.03);
  display: flex; flex-direction: column; gap: 9px;
  padding: 16px 9px;
  border-radius: 0 0 0 15px;
}
.rail i { display: block; height: 5px; border-radius: 3px; background: rgba(var(--fg-rgb), 0.14); }
.rail i.tall { height: 9px; }
.rail i.short { width: 60%; }
.rail i.round { height: 14px; border-radius: 5px; background: rgba(var(--fg-rgb), 0.1); }
.rail i.on { background: rgba(var(--fg-rgb), 0.32); }
.skin-notion .row, .skin-slack .row { padding-left: calc(var(--gutter) + var(--lvl, 0) * 22px); }

/* Notion: the page, with its icon over the title the way the page carries one,
   and the handle that shows beside a block when the pointer is near it. */
.skin-notion .row { position: relative; }
.skin-notion .row.r-h .txt { font-size: 19px; }
.skin-notion .row.r-h { padding-top: 46px; }
.skin-notion .row.r-h::before {
  content: ""; position: absolute; left: var(--gutter); top: 20px;
  width: 17px; height: 17px; border-radius: 5px;
  background: rgba(var(--fg-rgb), 0.12);
  border: 1px solid var(--line);
}
.skin-notion .row.r-toggle::before {
  content: "⠿"; position: absolute; left: calc(var(--rail) + 6px);
  color: rgba(var(--fg-rgb), 0.22); font-size: 11px; line-height: 1.9;
}

/* Slack: a channel, and the box you type into. The box is drawn on the rows
   themselves — a wrapper around them would be an element in the grid, and the
   two panes would stop lining up. */
.skin-slack .win-bar em { font-weight: 600; color: var(--gray); }
/* The avatar hangs in the margin beside the message, as it does in a channel;
   the row's own text column stays where every other row's is. */
.skin-slack .row.r-msg {
  align-items: flex-start; padding-top: 18px; padding-bottom: 14px;
  padding-left: calc(var(--gutter) + 36px);
}
.g-av {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  background: rgba(var(--fg-rgb), 0.1);
  border: 1px solid var(--line);
  margin-left: -36px;
}
.msg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msg-who { font-size: 13.5px; font-weight: 600; color: var(--bone); }
.msg-who i { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--gray-dim); margin-left: 8px; }
.skin-slack .row.same .txt { color: var(--gray); }
.skin-slack .row.draft {
  margin: 0 22px 0 var(--gutter);
  padding-left: calc(16px + var(--lvl, 0) * 20px); padding-right: 16px;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  background: rgba(var(--fg-rgb), 0.03);
}
.skin-slack .row.draft-top {
  margin-top: 6px; padding-top: 14px;
  border-top: 1px solid var(--line); border-radius: 10px 10px 0 0;
}
.skin-slack .row.draft-end {
  padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line); border-radius: 0 0 10px 10px;
}

/* Google Docs: a sheet of paper on a desk, under a toolbar. */
.toolbar {
  position: absolute; top: 45px; left: 0; right: 0; height: 34px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(var(--fg-rgb), 0.03);
}
.toolbar i { display: block; width: 11px; height: 5px; border-radius: 2px; background: rgba(var(--fg-rgb), 0.16); }
.toolbar i.wide { width: 22px; }
.skin-docs .pane { background: var(--bg-raised); }
.skin-docs .row {
  margin: 0 26px;
  padding-left: calc(26px + var(--lvl, 0) * 22px); padding-right: 26px;
  background: var(--panel-float);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
/* The sheet starts below the toolbar, which stands where the first row would. */
.skin-docs .row.first {
  margin-top: 46px; padding-top: 26px;
  border-top: 1px solid var(--line); border-radius: 4px 4px 0 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.skin-docs .row.last {
  padding-bottom: 34px; margin-bottom: 22px;
  border-bottom: 1px solid var(--line); border-radius: 0 0 4px 4px;
}

@media (max-width: 780px) {
  .skin-notion, .skin-slack { --rail: 32px; --gutter: 48px; }
  .rail { padding: 12px 7px; }
  .skin-docs .row { margin: 0 14px; padding-left: calc(16px + var(--lvl, 0) * 20px); padding-right: 16px; }
  .skin-slack .row.draft { margin-right: 14px; }
}

/* ---------- Kept ---------- */
.landing section.kept { padding-top: 60px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; max-width: 860px; }
.chips li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--bone);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 8px 15px 8px 13px;
}
.chips li .check { font-size: 12px; }
.chips.small { gap: 6px; margin-top: 18px; }
.chips.small li { font-size: 12.5px; padding: 5px 11px 5px 10px; gap: 6px; }

/* ---------- Compare (the landing's flow cards) ---------- */
.why-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .why-compare { grid-template-columns: 1fr; } }
.flow-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 24px 20px;
}
.flow-card.jarq { background: rgba(var(--fg-rgb), 0.055); border-color: rgba(var(--fg-rgb), 0.14); }
.flow-card h3 {
  font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gray);
  margin-bottom: 14px;
}
.flow-card.jarq h3 { color: var(--bone); }
.flow-num {
  font-size: 56px; font-weight: 500; letter-spacing: -0.03em; line-height: 1;
  color: var(--gray);
  margin-bottom: 20px;
}
.flow-num span { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--gray); margin-left: 6px; }
.flow-card.jarq .flow-num { color: var(--orange); }
.steps { display: flex; flex-direction: column; gap: 9px; }
.step { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--gray); }
.step .n {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--gray);
}
.step.lost { font-style: italic; }
.flow-card.jarq .step { color: var(--bone); font-size: 14.5px; }
.flow-card.jarq .step .n { border-color: rgba(var(--fg-rgb), 0.25); color: var(--bone); }
.flow-tally {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--gray);
}

/* ---------- Cards ---------- */
.landing .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.landing .grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .landing .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .landing .grid, .landing .grid.two { grid-template-columns: 1fr; } }
.landing .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 22px;
  transition: background 0.25s, transform 0.25s;
}
.landing .card:hover { background: var(--card-hover); transform: translateY(-2px); }
.landing .icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(var(--fg-rgb), 0.06);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; color: var(--bone);
}
.landing .icon svg { width: 18px; height: 18px; }
.landing .card h3 { font-size: 15px; font-weight: 500; margin-bottom: 7px; letter-spacing: -0.01em; }
.landing .card p { font-size: 13.5px; color: var(--gray); line-height: 1.6; }
.landing .card a, .landing .faq-answer a, .landing .why-note a {
  color: var(--bone); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--fg-rgb), 0.35);
  transition: text-decoration-color 0.2s;
}
.landing .card a:hover, .landing .faq-answer a:hover, .landing .why-note a:hover { text-decoration-color: currentColor; }

/* ---------- FAQ (the landing's accordion) ---------- */
.landing section.qa .section-head { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 2px; font-size: 16px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--bone);
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--fg-hover); }
.faq-item summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.faq-item summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 5px;
  border-right: 1.5px solid var(--gray); border-bottom: 1.5px solid var(--gray);
  transform: rotate(45deg); transition: transform 0.25s;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-answer {
  padding: 0 2px 24px; max-width: 660px;
  color: var(--gray); font-size: 15px; line-height: 1.65;
}

/* ---------- Other editors ---------- */
.landing section.more { padding-top: 40px; }
.app-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .app-links { grid-template-columns: 1fr; } }
.app-link {
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 48px 20px 22px;
  transition: background 0.25s, border-color 0.25s;
}
.app-link:hover { background: var(--card-hover); border-color: rgba(var(--fg-rgb), 0.16); }
.app-name { font-size: 15px; font-weight: 500; color: var(--bone); }
.app-line { font-size: 13.5px; line-height: 1.55; color: var(--gray); }
.app-go {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  color: var(--gray-dim); transition: transform 0.2s, color 0.2s;
}
.app-link:hover .app-go { color: var(--bone); transform: translate(3px, -50%); }
.app-link.all { justify-content: center; background: none; }

/* ---------- Hub ---------- */
.landing section.hub { padding-top: 60px; }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 960px) { .hub-grid { grid-template-columns: 1fr; } }
.hub-card {
  display: flex; flex-direction: column;
  padding: 22px 24px 20px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  transition: transform 0.25s ease-out, box-shadow 0.3s ease, border-color 0.25s;
}
.hub-card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); border-color: rgba(var(--fg-rgb), 0.14); }
.bento-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gray-dim);
  margin-bottom: 14px;
}
.hub-card h3 { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 10px; }
.hub-card h3 .dim { color: var(--gray-dim); }
.hub-card p { font-size: 14px; line-height: 1.6; color: var(--gray); }
.hub-go { margin-top: auto; padding-top: 20px; font-size: 13px; color: var(--gray); }
.hub-card:hover .hub-go { color: var(--bone); }
.why-note {
  margin-top: 14px;
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  font-size: 14.5px; color: var(--gray); line-height: 1.65;
}
.why-note .icon { flex: none; margin-bottom: 0; }

/* ---------- Bottom CTA ---------- */
.landing section.cta-band { text-align: center; padding: 100px 0 110px; position: relative; overflow: hidden; }
.cta-band .glow { top: auto; bottom: -260px; }
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band h2 { margin-bottom: 14px; }
.cta-band p { color: var(--gray); margin: 0 auto 30px; max-width: 520px; }
.cta-band .cta-row, .cta-band .cta-note { animation: none; }
.cta-band .cta-note { margin: 18px auto 0; }

.foot-note { width: 100%; padding-top: 16px; border-top: 1px solid var(--line); }

@media (max-width: 560px) {
  .hero { padding-top: 120px; }
  .landing section { padding: 60px 0; }
  .hero .sub { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .twin .pane.b .txt, .twin .bigkey { animation: none; }
}

/* A link in the sentence under a section's heading reads like the ones in the
   cards below it — the styling was attached to the cards and the FAQ only, and
   a link here came out looking like plain grey text. */
.landing .section-sub a {
  color: var(--bone); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--fg-rgb), 0.35);
  transition: text-decoration-color 0.2s;
}
.landing .section-sub a:hover { text-decoration-color: currentColor; }

/* Which language was spoken and which was typed, beside the sentence. */
.said-pair {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--gray); border: 1px solid var(--line);
  padding: 3px 9px; border-radius: 99px;
}