/* scrimpl landing v4 (2026-10-07). Notion's warm paper: canvas #F6F5F4, white hairline cards, flat muted panels, one
   dark band, generous space. Geist everywhere. Calls to action in the logo's pink (a deeper fill for white text, 4.6:1),
   blue #436EFF only inside the demos, where it is scrimpl's selection. The demos themselves are styled in demos.css.
   The legal pages share this file (nav, buttons, type, footer). */

:root {
  /* surfaces */
  --canvas: #F6F5F4;
  --card: #FFFFFF;
  --slot: #EFEDEA;
  --line: rgba(0, 0, 0, .08);
  --line-2: rgba(0, 0, 0, .14);
  /* text */
  --ink: rgba(0, 0, 0, .95);
  --ink-2: rgba(0, 0, 0, .86);
  --muted: rgba(0, 0, 0, .56);
  --body: #615D59;
  /* the action colour: the logo's pink (owner, 2026-10-07). #EC3D8E is 3.7:1 with white, so the fill is one step deeper. */
  --pink: #EC3D8E;
  --cta: #D92A78;
  --cta-hover: #C81E66;
  --cta-press: #B8195C;
  --cta-tint: #FCE6F0;
  --cta-tint-2: #F9D6E6;
  --cta-tint-ink: #A3154F;
  /* scrimpl's selection blue (demos only) */
  --select: #436EFF;
  /* the one dark band */
  --band: #141413;
  --on-band: rgba(255, 255, 255, .95);
  --on-band-2: rgba(255, 255, 255, .7);
  --band-line: rgba(255, 255, 255, .12);
  /* muted panels, flat (Notion's accent hues, quieted) */
  --tone-butter: #F3E9C6;
  --tone-mint: #D9E9DB;
  --tone-peach: #F5DED0;
  --tone-sky: #DCE6EF;
  --tone-stone: #E6E2DB;
  --tone-pink: #F6DCE7;
  /* depth */
  --shadow-media: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .07);
  --shadow-nav: 0 0.7px 1.46px rgba(0, 0, 0, .015), 0 3px 9px rgba(0, 0, 0, .03);

  --font: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --gutter: clamp(16px, 5.5vw, 80px);
  --nav-h: 64px;
  --ease: 200ms ease;
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  color-scheme: light;
}

/* ── Base ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 8px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font: 400 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 600; color: var(--ink-2); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; border-radius: 4px; }
::selection { background: #FBD3E5; color: var(--ink); }

.wrap {
  width: 100%;
  max-width: calc(1280px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.nw { white-space: nowrap; }

.skip {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--cta);
  color: #fff;
  font-weight: 500;
  transform: translateY(-200%);
}
.skip:focus, .skip:focus-visible { transform: none; }

/* ── Type ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.h1 {
  font-size: clamp(42px, 6.25vw, 90px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.h2 {
  font-size: clamp(34px, 3.75vw, 54px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}
.h2s {
  font-size: clamp(26px, 2.223vw, 32px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.h3 {
  font-size: clamp(24px, 2.08vw, 30px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.h3c {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.lede {
  font-size: clamp(18px, 1.46vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--body);
  max-width: 660px;
  text-wrap: balance;
}
.caption {
  font-size: 13.5px;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--muted);
}

/* ── Buttons: pink, with a press that gives a little ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background-color var(--ease), color var(--ease), transform 160ms var(--spring), box-shadow var(--ease);
}
.btn:active { transform: scale(0.97); transition-duration: 80ms; }
.btn-primary {
  background: var(--cta);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(150, 20, 80, .18);
}
.btn-primary:hover { background: var(--cta-hover); }
.btn-primary:active { background: var(--cta-press); }
.btn-tint { background: var(--cta-tint); color: var(--cta-tint-ink); }
.btn-tint:hover { background: var(--cta-tint-2); }
.btn-tint:active { background: #F4C7DB; }
.btn-ghost { background: rgba(0, 0, 0, .05); color: var(--ink); }
.btn-ghost:hover { background: rgba(0, 0, 0, .08); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 15px; border-radius: 9px; gap: 6px; }
.btn-lg { height: 52px; padding: 0 24px; font-size: 17px; border-radius: 12px; }
.btn-ic { width: 1.05em; height: 1.05em; flex: 0 0 auto; filter: invert(1); margin-top: -0.12em; }
.btn-tint .btn-ic { filter: none; }
/* [r6 landing-inline] the real Apple logo (Simple Icons, CC0), drawn in the button's own text colour */
.btn-apple { width: 0.95em; height: 0.95em; flex: 0 0 auto; fill: currentColor; margin-top: -0.2em; }

/* ── Nav ──────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; }
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(246, 245, 244, .9);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  transition: box-shadow var(--ease);
}
.nav.scrolled { box-shadow: var(--shadow-nav); }
.nav-in { height: 100%; display: flex; align-items: center; gap: 28px; }
.nav-logo { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--muted);
  transition: color var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.logo { display: inline-block; line-height: 0; }

/* ── Hero ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.hero { padding: calc(var(--nav-h) + 72px) 0 0; text-align: center; }
.hero-title { max-width: 1180px; margin-inline: auto; }
.hero-line { margin: 26px auto 0; max-width: 780px; }
.ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-note { margin-top: 16px; }

/* The headline. [r6 landing-inline] Owner, 2026-10-07: no pink corners ("not aligned and looks weird"); small pictures
   between the words instead, like his reference (an emoji-sized picture inside the sentence). Two lines, each kept
   whole: "Busy screenshots [busy screen] in," / "[rotating word] [calm tile] out.". The tile after the word morphs into
   each word's picture (site.js). The pictures sit on the baseline and are about cap height; one style: a white tile
   with a hairline edge and a soft shadow, warm greys, the logo's pink as the accent. */
.hl { white-space: nowrap; }
/* [r11] the pictures' size is one unit (--hi-u: em per viewBox unit, 40 units tall), so phones can draw them bigger */
.hero-title { --hi-u: 0.02em; }
.hi {
  display: inline-block;
  width: calc(48 * var(--hi-u, 0.02em));
  height: calc(40 * var(--hi-u, 0.02em));
  vertical-align: -0.035em;
  overflow: visible;
  filter: drop-shadow(0 0.012em 0.02em rgba(20, 20, 19, .10)) drop-shadow(0 0.04em 0.07em rgba(20, 20, 19, .07));
}
.hi-busy { width: calc(46 * var(--hi-u, 0.02em)); } /* its tile (x 3–45 of 48) plus a unit for the edge; the badge may poke out */
.hi-tile { fill: #fff; stroke: rgba(20, 20, 19, .15); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.hi-edge { fill: none; stroke: rgba(20, 20, 19, .15); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.hi-pop { fill: #fff; stroke: rgba(20, 20, 19, .2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.hi-badge { fill: var(--pink); stroke: var(--canvas); stroke-width: 1.6; }
.hi-g { transform-box: fill-box; transform-origin: 50% 50%; }
/* [r8] the busy picture's parts pop one after another (site.js pop): the floating card, then the pink dot */
.hi-card, .hi-badge { transform-box: fill-box; transform-origin: 50% 50%; will-change: transform; }
.hi-out .hi-g:not(:first-of-type) { opacity: 0; } /* before site.js (and under reduced motion): calm UI */

/* The rotating word (site.js measures each word and glides the track's width; the letters rise from below). */
.word-pill {
  position: relative;
  display: inline-block;
  line-height: 1;
  vertical-align: baseline;
  white-space: nowrap;
}
.wp-track {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  height: 1.08em;
  overflow: hidden;
  clip-path: inset(0.06em 0 0); /* [v5] the track pokes 0.06em above the line: leaving letters vanish at its edge */
  transition: width 760ms cubic-bezier(0.19, 1, 0.22, 1); /* [v5] expo out, no overshoot (was a spring: the bounce) */
}
.wp-word {
  display: block;
  line-height: 1.08em;
  white-space: nowrap;
  font-weight: inherit; /* [r9] owner: "the text that changes is not bold, and the rest of the text is bold" */
  color: var(--pink); /* [r12] owner, 2026-10-08: "make the changing text in our accent color" (the two headline icons are gone) */
  letter-spacing: inherit;
}
/* [v5] With JS every word sits at the CENTRE of the track: the line is centred, so the track's centre stays put while
   its width changes and a centred word never moves sideways. Each letter is its own box, masked by the track. */
.js .wp-word { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.wp-ch { display: inline-block; }

/* ── Demo frames (the moving pictures themselves: demos.css) ─────────────────────────────────────────────────────── */
.demo-hero { margin: 56px auto 0; max-width: 1280px; }
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 760px;
  margin: 20px auto 0;
  text-align: left;
}
.step { display: grid; gap: 8px; font-size: 13.5px; line-height: 1.3; color: var(--muted); transition: color 300ms ease; }
.step i { display: block; height: 2px; border-radius: 2px; background: rgba(0, 0, 0, .1); overflow: hidden; position: relative; }
.step i::after { content: ''; position: absolute; inset: 0; background: var(--ink-2); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.step b { font-weight: 500; color: inherit; }
.step.on { color: var(--ink); }

/* ── Section heads ────────────────────────────────────────────────────────────────────────────────────────────────── */
.sec-head { max-width: 760px; }
.sec-head .lede { margin-top: 18px; }

/* ── Features: one idea a row, sides alternate, the demo big ─────────────────────────────────────────────────────── */
.features { padding: 136px 0 120px; }
.features .sec-head { margin-bottom: 72px; }
.feature {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.feature + .feature { margin-top: 104px; }
.feature.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
.feature.flip .f-text { order: 2; }
.f-text p:not(.eyebrow) { margin-top: 14px; max-width: 44ch; font-size: 17px; line-height: 1.55; }
.f-text .h3 { margin-top: 14px; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--muted);
}
.kbd {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--card);
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.kbd:last-of-type { margin-right: 6px; }

/* ── The dark band: video ─────────────────────────────────────────────────────────────────────────────────────────── */
.band { background: var(--band); color: var(--on-band-2); padding: 120px 0 128px; }
.band-head { text-align: center; margin: 0 auto 64px; }
.band .h2 { color: var(--on-band); }
.band .lede { color: var(--on-band-2); margin-inline: auto; }
.band :focus-visible { outline-color: var(--on-band); }
.demo-video { max-width: 1200px; margin-inline: auto; }

/* ── Outputs: the layout switch ───────────────────────────────────────────────────────────────────────────────────── */
.outputs { padding: 128px 0 120px; }
.outputs .sec-head { margin-bottom: 56px; }
.switch {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.switch-tabs { display: grid; gap: 4px; position: sticky; top: calc(var(--nav-h) + 24px); }
.switch-tabs button {
  position: relative;
  display: grid;
  gap: 3px;
  text-align: left;
  padding: 16px 18px 16px 20px;
  border-radius: 12px;
  color: var(--muted);
  transition: background-color var(--ease), color var(--ease);
}
.switch-tabs button b { font-size: 18px; line-height: 1.25; font-weight: 600; letter-spacing: -0.012em; color: inherit; }
.switch-tabs button span { font-size: 14px; line-height: 1.35; color: var(--muted); }
.switch-tabs button:hover { background: rgba(0, 0, 0, .035); color: var(--ink-2); }
.switch-tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .04); }
.switch-tabs button i { position: absolute; left: 8px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: rgba(0, 0, 0, .06); overflow: hidden; }
.switch-tabs button i::after { content: ''; position: absolute; inset: 0; background: var(--cta); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
.switch-tabs button[aria-selected="false"] i { opacity: 0; }
.switch-view { position: relative; border-radius: 16px; background: var(--tone-stone); aspect-ratio: 16 / 11; overflow: hidden; }
div.out { position: absolute; inset: 0; } /* [r8] div.out: never an svg's own "out" class */
div.out[hidden] { display: block; visibility: hidden; pointer-events: none; }

/* ── Privacy ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
.privacy { padding: 120px 0; }
.privacy-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px 64px; }
.privacy-head .lede { margin-top: 16px; }
/* [r10] brief: the heading and its links on one row, four facts under it */
.privacy-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 48px; margin-bottom: 40px; }
.privacy-head .sec-links { margin-top: 0; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 40px; }
.facts li { padding-top: 22px; border-top: 1px solid var(--line); }
.fact-ic { width: 26px; height: 26px; margin-bottom: 14px; opacity: .82; }
.facts p { margin-top: 8px; font-size: 15.5px; line-height: 1.5; }

/* ── Pricing (content unchanged from v3) ──────────────────────────────────────────────────────────────────────────── */
.pricing { padding: 0 0 120px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  gap: 0 16px;
  margin-top: 48px;
}
.plan {
  grid-row: span 5;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 32px;
}
.plan-pro { border-color: rgba(217, 42, 120, .35); box-shadow: 0 0 0 3px rgba(236, 61, 142, .08); }
.plan-name { font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.price { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; }
.amount { font-size: 48px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: var(--ink); }
.per { font-size: 16px; color: var(--muted); }
.plan-for { margin-top: 12px; }
.plan-cta { width: 100%; margin-top: 24px; }
.plan-body { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.plan-list { display: grid; gap: 10px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.plan-list li { position: relative; padding-left: 24px; }
.plan-list li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.32em;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(-45deg);
}
.plan-sub { margin: 22px 0 10px; font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.plans-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: 24px;
}
.plans-own { font-size: 17px; line-height: 1.4; color: var(--ink-2); font-weight: 500; }
/* [r6 landing-inline] Monthly / yearly (2 months free): a small segmented switch; site.js swaps the amounts. */
.bill { display: inline-flex; gap: 2px; margin-top: 26px; padding: 3px; border-radius: 11px; background: rgba(0, 0, 0, .055); }
.bill button {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 8px;
  font: 500 15px/1 var(--font); letter-spacing: -0.005em; color: var(--muted);
  transition: background-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.bill button:hover { color: var(--ink-2); }
.bill button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .05); }
.bill button span { padding: 4px 7px; border-radius: 6px; background: var(--cta-tint); color: var(--cta-tint-ink); font-size: 12.5px; font-weight: 600; }
.save { display: none; align-self: center; padding: 4px 8px; border-radius: 6px; background: var(--cta-tint); color: var(--cta-tint-ink); font-size: 13px; line-height: 1; font-weight: 600; }
.plans.is-year .save { display: inline-block; }
.vat { font-weight: 600; color: var(--ink-2); }

/* ── FAQ ──────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.faq { padding: 0 0 120px; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 64px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
  position: relative;
  display: block;
  padding: 20px 40px 20px 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before, .faq-list summary::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--ink-2);
  transition: transform 260ms var(--spring);
}
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::after { transform: rotate(0deg); }
.faq-list details p { max-width: 620px; padding: 0 0 22px; }

/* ── Closing and footer ───────────────────────────────────────────────────────────────────────────────────────────── */
.closing { padding: 128px 0 136px; text-align: center; border-top: 1px solid var(--line); }
.closing .wrap { display: flex; flex-direction: column; align-items: center; }
.closing .logo { margin-bottom: 40px; }
.closing .h2 { max-width: 820px; font-size: clamp(36px, 4.4vw, 64px); }
.closing .ctas { margin-top: 40px; }
.closing .caption { margin-top: 16px; }

.foot { border-top: 1px solid var(--line); padding: 56px 0 44px; }
.foot-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.foot-brand p { margin-top: 12px; font-size: 14px; color: var(--muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot-links a { font-size: 14px; color: var(--muted); transition: color var(--ease); }
.foot-links a:hover { color: var(--ink); }
.foot-copy { margin-top: 40px; font-size: 13px; color: var(--muted); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 28px; }
.foot-legal a { font-size: 13px; color: var(--muted); transition: color var(--ease); }
.foot-legal a:hover, .foot-legal a[aria-current='page'] { color: var(--ink); }
.foot-legal + .foot-copy { margin-top: 16px; }
.foot-tm { margin-top: 10px; max-width: 820px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* Inline links in running text (pricing note, privacy links): underlined, quiet */
.inline-links a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: text-decoration-color var(--ease); }
.inline-links a:hover { text-decoration-color: var(--ink); }
.sec-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 20px; font-size: 15px; line-height: 1.4; }

/* ── Laptop ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1279.98px) {
  .feature { gap: 48px; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .feature.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
  .switch { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 28px; }
}

/* ── Tablet: rows stack, text first ───────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023.98px) {
  .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .feature.flip .f-text { order: 0; }
  .feature + .feature { margin-top: 96px; }
  .f-text p:not(.eyebrow) { max-width: 60ch; }
  .switch { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .switch-tabs { position: static; display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); scroll-padding-inline: var(--gutter); }
  .switch-tabs::-webkit-scrollbar { display: none; }
  .switch-tabs button { flex: 0 0 auto; padding: 12px 16px; border-radius: 10px; }
  .switch-tabs button span { display: none; }
  .switch-tabs button b { font-size: 16px; }
  .switch-tabs button i { left: 16px; right: 16px; top: auto; bottom: 6px; width: auto; height: 2px; }
  .switch-tabs button i::after { transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
  .privacy-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px; }
  .plan { grid-row: auto; grid-template-rows: auto auto auto 1fr; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; }
  .plan-cta { align-self: start; }
  .plan > :not(.plan-body) { grid-column: 1; }
  .plan-body { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; padding-top: 4px; border-top: 0; }
}
@media (max-width: 1023.98px) {
  .nav-in, .nav-links { gap: 22px; }
}

/* ── Phone ────────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 699.98px) {
  :root { --nav-h: 56px; }
  .nav .btn-sm { height: 40px; padding: 0 14px; }
  .hero { padding-top: calc(var(--nav-h) + 44px); }
  .hero-title { font-size: clamp(26px, 8.5vw, 40px); letter-spacing: -0.04em; } /* [r6 landing-inline] "Busy screenshots [picture] in," is 10.2em: 8.5vw keeps it whole inside the gutters down to 300 px */
  .hero-line { margin-top: 18px; font-size: 17.5px; }
  .ctas { margin-top: 28px; }
  .hero .ctas .btn, .closing .ctas .btn { flex: 1 1 100%; }
  .hero-ctas { gap: 4px 20px; }
  .demo-hero { margin-top: 40px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 16px; }

  .features { padding: 104px 0 88px; }
  .features .sec-head { margin-bottom: 56px; }
  .feature + .feature { margin-top: 80px; }
  .f-text p:not(.eyebrow) { font-size: 16px; }

  .band { padding: 88px 0; }
  .band-head { text-align: left; margin-bottom: 36px; }
  .band .lede { margin-left: 0; }

  .outputs { padding: 104px 0 88px; }
  .outputs .sec-head { margin-bottom: 32px; }
  .switch-view { border-radius: 14px; }

  .pricing, .faq { padding-bottom: 88px; }
  .privacy { padding: 96px 0 88px; }
  .privacy-head { margin-bottom: 28px; }
  .plans { margin-top: 32px; }
  .plan { display: block; padding: 24px 20px; }
  .plan-body { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .faq-list summary { font-size: 17px; padding: 18px 36px 18px 0; min-height: 44px; }

  .closing { padding: 96px 0 104px; }
  .closing .logo { margin-bottom: 28px; }
  .foot-row { flex-direction: column; }
  .foot-links a, .foot-legal a, .sec-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-links a { min-width: 44px; }
  .foot-legal { gap: 0 20px; margin-top: 20px; }
}

/* Reduced motion: nothing animates, anchors jump. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── [v5] For small teams: social posts and slides (owner, 2026-10-07: "focus a lot more on how this can help small
   companies showcase their product on social media or use it in presentations"). A warm panel holding five real
   places a post goes; the pictures inside are drawn by demos/social.js, the chrome around them is plain markup. ── */
.sw-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* a post: the platform's own chrome, quiet, in the system face; the picture is the loud part */
.sp {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(60, 40, 20, .06), 0 12px 32px rgba(60, 40, 20, .09);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #0F1419;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
/* the platform icons only (the pictures hold svgs and a cursor of their own) */
.sp-acts svg, .sp-sfoot svg, .sp-xacts svg, .sp-liacts svg, .sp .sp-sound { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.sp-media { position: relative; overflow: hidden; background: #ECE8E2; contain: layout paint; }
.sp-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sp-world .ss { display: block; max-width: none; overflow: visible; }
.sp-world .ss text { font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.sp-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.sp-av { position: relative; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.sp-av i { position: absolute; background: left center / contain no-repeat; }
.sp-who { display: grid; gap: 2px; min-width: 0; line-height: 1.2; }
.sp-who b { font-size: 14px; font-weight: 600; color: #0F1419; }
.sp-who small { font-size: 12px; color: rgba(0, 0, 0, .55); }
.sp-more { display: flex; gap: 3px; margin-left: auto; padding-right: 2px; }
.sp-more i { width: 3.5px; height: 3.5px; border-radius: 50%; background: #0F1419; }
.sp-text { font-size: 15px; line-height: 1.38; color: #0F1419; }

/* Instagram */
.sp-ig .sp-media { aspect-ratio: 4 / 5; }
.sp-count { position: absolute; z-index: 2; right: 12px; top: 12px; padding: 5px 8px; border-radius: 12px; background: rgba(20, 20, 19, .62); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; }
.sp-acts { position: relative; display: flex; align-items: center; gap: 14px; padding: 11px 14px 6px; }
.sp-acts .end { margin-left: auto; }
.sp-pager { position: absolute; left: 50%; top: 50%; display: flex; gap: 4px; transform: translate(-50%, -30%); }
.sp-pager i { width: 6px; height: 6px; border-radius: 50%; background: #C8C8C8; transition: background-color 240ms ease; }
.sp-pager i.on { background: #0095F6; }
.sp-cap { padding: 2px 14px 14px; font-size: 13.5px; line-height: 1.4; }
.sp-cap b { font-weight: 600; margin-right: 4px; color: inherit; }

/* Story */
.sp-story { border-radius: 16px; background: #111; }
.sp-story .sp-media { aspect-ratio: 9 / 16; background: #111; }
.sp-story::before, .sp-story::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; height: 18%; pointer-events: none; }
.sp-story::before { top: 0; background: linear-gradient(rgba(0, 0, 0, .32), transparent); }
.sp-story::after { bottom: 0; background: linear-gradient(transparent, rgba(0, 0, 0, .3)); }
.sp-sbars { position: absolute; z-index: 2; left: 10px; right: 10px; top: 10px; display: flex; gap: 4px; }
.sp-sbars i { position: relative; flex: 1; height: 2.5px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .42); }
.sp-sbars b { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.sp-sbars i:first-child b { --p: 1; }
.sp-shead { position: absolute; z-index: 2; left: 12px; top: 22px; display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; font-weight: 600; }
.sp-shead .sp-av { width: 28px; height: 28px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); }
.sp-shead b { color: #fff; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .25); } /* [r6 social] owner: "the booking.com text at the top should be white" (b, strong are ink site-wide) */
.sp-shead small { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .75); }
.sp-sfoot { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 12px; color: #fff; }
.sp-sfoot span { flex: 1; display: flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 19px; border: 1px solid rgba(255, 255, 255, .7); font-size: 13px; font-weight: 500; }

/* X ([v5b social] the name sits beside the avatar, so the video takes the post's full width) */
.sp-x { padding: 14px 16px 8px; }
.sp-xhead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sp-x .sp-av { width: 40px; height: 40px; }
.sp-xname { display: flex; gap: 5px; font-size: 15px; line-height: 1.25; color: #536471; }
.sp-xname b { font-weight: 700; color: #0F1419; }
.sp-x .sp-text { margin-top: 0; }
.sp-x .sp-media { margin-top: 12px; aspect-ratio: 16 / 9; border-radius: 16px; box-shadow: 0 0 0 1px #CFD9DE; }
.sp-xacts { display: flex; justify-content: space-between; padding: 11px 6px 4px 0; color: #536471; }
.sp-xacts svg { width: 19px; height: 19px; }
.sp-time { position: absolute; z-index: 2; left: 10px; bottom: 10px; padding: 3px 6px; border-radius: 4px; background: rgba(0, 0, 0, .66); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.sp .sp-sound { position: absolute; z-index: 2; right: 10px; bottom: 10px; width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: rgba(0, 0, 0, .66); stroke: #fff; stroke-width: 2; }

/* LinkedIn */
.sp-li .sp-head { padding: 12px 16px 10px; }
.sp-li .sp-av { width: 44px; height: 44px; border-radius: 6px; }
.sp-li .sp-text { padding: 0 16px 12px; font-size: 14px; color: rgba(0, 0, 0, .9); }
.sp-li .sp-media { aspect-ratio: 16 / 9; }
.sp-liacts { display: flex; justify-content: space-between; margin: 4px 12px 0; padding: 2px 0; border-top: 1px solid rgba(0, 0, 0, .08); }
.sp-liacts span { display: flex; align-items: center; gap: 6px; padding: 10px 6px; font-size: 13.5px; font-weight: 600; color: rgba(0, 0, 0, .6); white-space: nowrap; }
.sp-liacts svg { width: 19px; height: 19px; }

/* [r6 social] the slide: a full-bleed 16:9 pitch slide, no Keynote window (world units 1600 × 900, demos/social.js deck):
   a kicker, the title, the slide number, scrimpl's picture of the page running off the bottom edge, big numbered pink
   marks and one caption bar for the step being shown (bigger on narrow cards, where the camera walks to each step) */
.sp-deck { border-radius: 14px; background: #fff; }
.sp-deck .sp-media { aspect-ratio: 16 / 9; background: #fff; }
.dk-slide { background: #fff; font-family: var(--font); }
.dk-kicker { position: absolute; left: 96px; top: 70px; font-size: 24px; line-height: 1; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8A8780; }
.dk-title { position: absolute; left: 92px; top: 108px; font-size: 76px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: #141413; white-space: nowrap; }
.dk-num { position: absolute; right: 96px; top: 70px; font-size: 24px; line-height: 1; font-weight: 600; color: #B5B1AA; font-variant-numeric: tabular-nums; }
.dk-pic { position: absolute; overflow: hidden; border-radius: 26px 26px 0 0; }
.dk-ring { position: absolute; border-radius: 16px; box-shadow: 0 0 0 4px #EC3D8E, 0 0 0 11px rgba(236, 61, 142, .16); opacity: 0; }
.dk-mark { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: #EC3D8E; color: #fff; font: 700 30px/60px var(--font); text-align: center; box-shadow: 0 0 0 5px #fff, 0 10px 24px rgba(236, 61, 142, .35); opacity: 0; }
.dk-caps { position: absolute; right: 96px; top: 112px; display: grid; justify-items: end; pointer-events: none; }
.dk-cap { grid-area: 1 / 1; display: flex; align-items: center; gap: 18px; height: 76px; padding: 0 34px 0 13px; border-radius: 999px; background: rgba(20, 20, 19, .93); color: #fff; font: 600 34px/1 var(--font); letter-spacing: -0.02em; white-space: nowrap; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5); opacity: 0; }
.dk-cap i { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #EC3D8E; font-style: normal; font-size: 26px; font-weight: 700; }
.dk-caps.narrow { left: 0; right: 0; top: auto; bottom: 36px; justify-items: center; }
.dk-caps.narrow .dk-cap { height: 116px; gap: 22px; padding: 0 50px 0 19px; font-size: 60px; }
.dk-caps.narrow .dk-cap i { width: 78px; height: 78px; font-size: 40px; }
/* [r6 landing-inline] phones: the slide's text drawn bigger, so it reads at a phone's width (social.js deck: .kn-phone) */
.kn-phone .kn-title { left: 56px; top: 50px; font-size: 84px; }
.kn-phone .kn-list { left: 56px; top: 188px; width: 480px; gap: 26px; }
.kn-phone .kn-list li { gap: 20px; font-size: 40px; line-height: 1.22; font-weight: 600; }
.kn-phone .kn-list span { width: 54px; height: 54px; margin-top: -3px; font-size: 28px; }
.kn-phone .kn-pic { right: 40px; }
.kn-phone .kn-step { width: 40px; height: 40px; font-size: 22px; line-height: 40px; }
.kn-phone .kn-ring { box-shadow: 0 0 0 3.5px #D92A78; }

/* the pictures: scrimpl's compositions (a gradient, the window, the logo lockup) */
.sp-bg { position: absolute; inset: 0; background: center / cover no-repeat; }
.sp-win { position: absolute; overflow: hidden; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .26), 0 0 0 1px rgba(0, 0, 0, .06); }
.sp-win.dark { background: #0D1117; box-shadow: 0 30px 80px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 255, 255, .08); }
.sp-bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; background: #F2F2F4; border-bottom: 1px solid #E3E3E7; }
.sp-bar i { border-radius: 50%; background: #FF5F57; }
.sp-bar i:nth-child(2) { background: #FEBC2E; }
.sp-bar i:nth-child(3) { background: #28C840; }
.sp-win.dark .sp-bar { background: #1E1F24; border-color: #2C2D33; }
.sp-view { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; }
.sp-layer { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; }
.sp-chip { position: absolute; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.sp-fc-cap { position: absolute; left: 90px; right: 90px; top: 128px; /* [v5b social] clear of the n/3 pill */ text-align: center; font: 600 72px/1.05 var(--font); letter-spacing: -0.035em; color: #fff; text-wrap: balance; text-shadow: 0 2px 24px rgba(120, 20, 0, .16); }
.sp-fc-part { position: absolute; overflow: hidden; border-radius: 34px; background: #fff; box-shadow: 0 30px 80px rgba(120, 30, 20, .26); }

.sp-chip.dark { background: rgba(20, 20, 19, .92); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
/* [v5b social] a finger's tap in the story (world units: 1080 × 1920), as a screen recording shows touches */
/* [r6 social] the story's caption sticker (world units), and a shade behind the carousel's white captions */
.sp-sticker { position: absolute; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
.sp-sticker span { display: block; padding: 24px 42px; border-radius: 30px; background: #fff; color: #141413; font: 700 60px/1 var(--font); letter-spacing: -0.035em; box-shadow: 0 24px 60px -20px rgba(60, 10, 0, .5); opacity: 0; }
.sp-scrim { position: absolute; left: 0; right: 0; top: 0; height: 440px; background: linear-gradient(rgba(36, 12, 70, .3), rgba(36, 12, 70, 0)); }
.sp-tap { position: absolute; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; background: rgba(20, 20, 19, .2); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .9), 0 6px 24px rgba(0, 0, 0, .18); opacity: 0; pointer-events: none; }

/* ── [v5b outputs] "One screen. Every place it goes." (demos/outputs.js): one busy Spotify screen, simplified, then
   landing in five places. World units: 1100 × 756 (desktop, tablet) or 720 × 900 (phones), scaled by --k. ─────────── */
.o5-switch .switch-view { aspect-ratio: 1100 / 756; background: #E6E2DB; }
.o5-panel { position: absolute; inset: 0; }
.o5-stage { border-radius: inherit; }
.o5-layer, .o5-bg { position: absolute; inset: 0; }
.o5-layer { z-index: 0; } /* each layer is its own stacking context: the backgrounds stay under everything */
.o5-grain { position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.o5-v { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 50% 50%; background: #000; }
.o5-screen { box-shadow: 0 30px 70px -26px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .1); }
.o5-part { box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .4); }
.o5-t { position: absolute; white-space: nowrap; font-family: var(--font); }
.o5-crumb { color: #6B6A66; font-weight: 500; }
.o5-h1 { color: #141413; font-weight: 600; letter-spacing: -0.032em; line-height: 1.05; }
.o5-ring { position: absolute; box-shadow: 0 0 0 3px #EC3D8E, 0 0 0 7px rgba(236, 61, 142, .18); }
.o5-badge { display: grid; place-items: center; border-radius: 50%; background: #EC3D8E; color: #fff; font-weight: 700; line-height: 1; box-shadow: 0 6px 16px rgba(236, 61, 142, .35), 0 0 0 4px #fff; }
.o5-note { padding: .55em .8em; border-radius: .6em; background: #141413; color: #fff; font-weight: 600; line-height: 1.2; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.o5-logo { position: absolute; display: grid; place-items: center; border-radius: 50%; background: #000; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .45); }
.o5-logo img { display: block; object-fit: contain; }
.o5-head { position: absolute; left: 0; text-align: center; font-family: var(--font); font-weight: 700; letter-spacing: -0.042em; line-height: 1.05; color: #0B0B0B; white-space: nowrap; }
.o5-head span { display: inline-block; }
.o5-set { color: #77746D; font-weight: 600; letter-spacing: .01em; }
.o5-card { position: absolute; overflow: hidden; transform-origin: 50% 50%; box-shadow: 0 22px 50px -22px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .04); }
.o5-cap { font-weight: 650; letter-spacing: -0.028em; line-height: 1.08; white-space: normal; }
.o5-slide { position: absolute; background: #fff; border-radius: 10px; box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .4), 0 0 0 1px rgba(0, 0, 0, .05); }
.o5-eyebrow { color: #EC3D8E; font-weight: 700; letter-spacing: .12em; }
.o5-stitle { color: #141413; font-weight: 650; letter-spacing: -0.038em; line-height: 1.05; }
.o5-pnum { color: #9A978F; font-weight: 600; font-variant-numeric: tabular-nums; }
.o5-thumb { position: absolute; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.o5-thumb b { display: block; flex: 0 0 auto; height: 13%; background: #2A2A28; border-radius: 2px; }
.o5-thumb u { display: block; flex: 0 0 auto; height: 8%; width: 70%; background: #D9D6D0; border-radius: 2px; text-decoration: none; }
.o5-thumb .sc { position: absolute; left: 9%; right: 9%; bottom: 0; height: 42%; background: #121212; border-radius: 3px 3px 0 0; }
.o5-thumb.on { box-shadow: 0 0 0 3px #EC3D8E; }
.o5-notes { position: absolute; box-sizing: border-box; padding: 22px 26px; border-radius: 16px; background: rgba(255, 255, 255, .6); font-family: var(--font); color: #3A3936; }
.o5-notes span { display: block; margin-bottom: 10px; font-size: 17px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A877F; }
.o5-notes p { margin: 0; font-size: 26px; line-height: 1.35; }
.o5-figma { position: absolute; overflow: hidden; background: #2C2C2C; color: #E6E6E6; font-family: 'Inter', var(--font); }
.o5-fh { display: flex; align-items: center; gap: 1.1em; padding: 0 1.05em; border-bottom: 1px solid #3D3D3D; }
.o5-fh b { color: #fff; font-weight: 600; }
.o5-fh span { color: #8C8C8C; }
.o5-fl { position: absolute; left: 0; right: 0; }
.o5-fsel { position: absolute; left: 0; right: 0; background: #0C8CE9; }
.o5-fr { position: relative; display: flex; align-items: center; gap: .6em; color: #D9D9D9; white-space: nowrap; }
.o5-fr.on { color: #fff; }
.o5-fr svg { flex: 0 0 auto; width: .95em; height: .95em; opacity: .7; }
.o5-fname { color: rgba(0, 0, 0, .55); font-family: 'Inter', var(--font); font-weight: 500; }
.o5-sel { position: absolute; border: 2px solid #0C8CE9; }
.o5-seln { left: -2px; bottom: 100%; margin-bottom: 4px; padding: .3em .5em; border-radius: 3px; background: #0C8CE9; color: #fff; font-family: 'Inter', var(--font); font-weight: 500; line-height: 1; }
@media (max-width: 699.98px) {
  .o5-switch .switch-view { aspect-ratio: 4 / 5; }
  .o5-switch .switch-tabs button { padding: 10px 14px; }
  .o5-switch .switch-tabs button b { font-size: 15px; }
  .o5-switch .switch-tabs button i { left: 14px; right: 14px; }
}
/* [/v5b outputs] */

/* ── [v5b video] The video band (demos/video.js): the app's "Make the video" card beside a 4:5 product video on the
   brand's own colour field. Owner 2026-10-07: "The video example is not great … we need to change it." ─────────── */
.vb-frame { position: absolute; z-index: 21; overflow: hidden; isolation: isolate; background: #fff; box-shadow: 0 40px 90px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06); }
.vb-field { position: absolute; inset: 0; background: radial-gradient(120% 85% at 18% 0%, #3B4C61 0%, #232F3E 48%, #131921 100%); }
.vb-field::after { content: ''; position: absolute; inset: 0; opacity: .2; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.vb-cap { position: absolute; color: #fff; font: 600 58px/1.02 'Geist', system-ui, sans-serif; letter-spacing: -0.04em; white-space: nowrap; }
.vb-cap .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.vb-cap .ln > span { display: inline-block; }
.vb-cap em { font-style: normal; color: #FF9900; }
.vb-logo { position: absolute; display: block; width: auto; max-width: none; }
.vb-winsh { position: absolute; box-shadow: 0 34px 70px rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .25); background: #fff; }
.vb-clip { position: absolute; overflow: hidden; background: #fff; isolation: isolate; }
.vb-panel { position: absolute; z-index: 20; display: flex; flex-direction: column; border-radius: 22px; background: #FBFAF8; color: #141413; font-family: 'Geist', system-ui, sans-serif; box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06); overflow: hidden; }
.vb-panel b { color: inherit; }
.vb-h { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; height: 66px; padding: 0 24px; border-bottom: 1px solid rgba(0, 0, 0, .07); font-size: 21px; letter-spacing: -0.015em; }
.vb-h b { font-weight: 600; }
.vb-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #141413; color: #fff; }
.vb-mark svg { width: 18px; height: 18px; }
.vb-step { padding: 18px 24px 0; }
.vb-step h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: #141413; }
.vb-step h4 i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .07); color: rgba(0, 0, 0, .5); font-size: 13px; font-weight: 600; font-style: normal; }
.vb-step.on h4 i { background: #D92A78; color: #fff; }
.vb-shots { display: flex; gap: 10px; }
.vb-tile { position: relative; width: 128px; height: 80px; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px #D92A78, 0 4px 12px rgba(0, 0, 0, .08); }
.vb-tile svg { display: block; }
.vb-add { width: 80px; display: grid; place-items: center; background: none; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .14); color: rgba(0, 0, 0, .35); font-size: 26px; font-weight: 400; }
.vb-box { min-height: 112px; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .1); font-size: 17px; line-height: 1.45; color: #141413; }
.vb-ph { color: rgba(0, 0, 0, .35); }
.vb-target { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 4px 0; padding: 3px 6px 3px 10px; border-radius: 8px; background: #E8EEFF; color: #2547C9; font-size: 15px; font-weight: 600; vertical-align: 1px; }
.vb-target i { font-style: normal; font-weight: 500; opacity: .55; }
.vb-caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; vertical-align: -0.22em; background: #D92A78; }
.vb-row { display: flex; gap: 10px; margin-top: 12px; }
.vb-make, .vb-auto, .vb-go, .vb-ghost { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 12px; font-size: 17px; white-space: nowrap; }
.vb-make { background: #D92A78; color: #fff; transform-origin: 50% 50%; }
.vb-make b, .vb-go b { font-weight: 600; }
.vb-make small { font-size: 14px; color: rgba(255, 255, 255, .72); }
.vb-make svg { width: 17px; height: 17px; }
.vb-make svg, .vb-go svg { flex: 0 0 auto; }
.vb-make.busy { background: #E77BAA; }
.vb-make.busy small { display: none; }
.vb-auto, .vb-ghost { background: rgba(0, 0, 0, .06); font-weight: 600; color: rgba(0, 0, 0, .7); }
.vb-sb { display: flex; justify-content: space-between; margin: 20px 0 8px; font-size: 14px; font-weight: 600; color: rgba(0, 0, 0, .5); }
.vb-time { font-variant-numeric: tabular-nums; color: #141413; }
.vb-time em { font-style: normal; color: rgba(0, 0, 0, .4); }
.vb-lane { position: relative; height: 50px; border-radius: 12px; background: rgba(0, 0, 0, .045); }
.vb-lane b { position: absolute; top: 8px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .05); font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; color: rgba(0, 0, 0, .7); white-space: nowrap; overflow: hidden; opacity: 0; margin-left: 2px; }
.vb-lane b.on { background: #FCE6F0; color: #A3154F; box-shadow: 0 0 0 1.5px rgba(217, 42, 120, .45); }
.vb-head { position: absolute; top: 3px; bottom: 3px; left: 2px; width: 2px; margin-left: -1px; border-radius: 1px; background: #D92A78; opacity: 0; }
.vb-out { margin-top: auto; padding-bottom: 22px; }
.vb-shape { display: flex; gap: 3px; padding: 3px; border-radius: 11px; background: rgba(0, 0, 0, .06); }
.vb-shape span { flex: 1; display: grid; place-items: center; height: 36px; border-radius: 8px; font-size: 15px; font-weight: 600; color: rgba(0, 0, 0, .5); }
.vb-shape .on { background: #fff; color: #141413; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.vb-ex { display: flex; gap: 8px; margin-top: 12px; }
.vb-go { position: relative; flex: 1; height: 56px; overflow: hidden; isolation: isolate; background: #141413; color: #fff; transform-origin: 50% 50%; }
.vb-go .vb-fill { position: absolute; inset: 0; z-index: -1; background: #D92A78; transform-origin: 0 50%; transform: scaleX(0); }
.vb-go.done { background: #1F8A4C; }
.vb-go.done .vb-fill { display: none; }
.vb-go svg { width: 19px; height: 19px; }
.vb-go small { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.vb-ghost { height: 56px; padding: 0 16px; }
.vb-note { display: flex; align-items: center; gap: 8px; height: 22px; margin-top: 10px; font-size: 14px; font-weight: 500; color: rgba(0, 0, 0, .6); font-variant-numeric: tabular-nums; }
.vb-note i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #1F8A4C; color: #fff; }
.vb-note svg { width: 12px; height: 12px; }
/* phones: one row under the video (the ask, then Make it | Export MP4), bigger type for the smaller scale */
.vb-compact { padding: 20px 22px; }
.vb-compact .vb-q { margin: 0 0 12px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: rgba(0, 0, 0, .55); }
.vb-compact .vb-box { min-height: 96px; padding: 14px 18px; font-size: 25px; line-height: 1.32; }
.vb-compact .vb-target { font-size: 22px; padding: 3px 8px 3px 12px; }
.vb-compact .vb-row { margin-top: 14px; gap: 12px; }
.vb-compact .vb-make, .vb-compact .vb-go { height: 64px; font-size: 25px; border-radius: 14px; }
.vb-compact .vb-make small, .vb-compact .vb-go small { font-size: 20px; }
.vb-compact .vb-make svg, .vb-compact .vb-go svg { width: 24px; height: 24px; }
/* [/v5b video] */

/* ── [r7] The GitHub Clean · Skeleton · Reveal row, right under the hero (owner, 2026-10-07: "the one we need to move
   up is the GitHub one with real words") ── */
.features-lead { padding: 128px 0 0; }

/* ── [r7] Message stories (demos/stories.js): a teammate's message, the busy screen, Simplify, what was asked for.
   Each story: its words in one row above, the demo at the column's full width so the bubbles read like a phone's. ── */
.stories { padding: 136px 0 0; }
.stories .sec-head { margin-bottom: 64px; }
.stories .sec-head .h2 { margin-top: 14px; }
.story + .story { margin-top: 96px; }
.st-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 64px; align-items: end; margin-bottom: 28px; }
.st-text .eyebrow { grid-column: 1; }
.st-text .h3 { grid-column: 1; margin-top: 6px; }
.st-text p:not(.eyebrow) { grid-column: 2; grid-row: 1 / span 2; max-width: 50ch; font-size: 17px; line-height: 1.55; }
.demo-story .stage { border-radius: 20px; background: #EEE9E2; }
@media (max-width: 1023.98px) {
  .st-text { grid-template-columns: minmax(0, 1fr); }
  .st-text p:not(.eyebrow) { grid-column: 1; grid-row: auto; margin-top: 10px; max-width: 60ch; }
}
@media (max-width: 699.98px) {
  .features-lead { padding-top: 96px; }
  .stories { padding-top: 104px; }
  .stories .sec-head { margin-bottom: 44px; }
  .story + .story { margin-top: 72px; }
  .st-text { margin-bottom: 20px; }
  .st-text p:not(.eyebrow) { font-size: 16px; }
  .demo-story .stage { border-radius: 16px; }
}

/* ══ [r9] 2026-10-07 owner round ══════════════════════════════════════════════════════════════════════════════════ */

/* ── Scroll-in: headings, words and demo frames rise in gently as they enter the view (site.js reveal: expo out, 14 px,
   no bounce). Without JS, and under reduced motion, everything is simply there. ── */
.js .rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--d, 0) * 70ms);
}
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; }
}

/* ── The phone menu (nav.js): the links open as a sheet under the bar; the Download button stays in the bar ── */
.nav-burger { display: none; }
.nav-scrim { display: none; }
@media (max-width: 760px) {
  .nav-in { gap: 6px; }
  .nav-burger {
    position: relative; display: block; flex: 0 0 auto; width: 44px; height: 44px; margin-right: -8px; border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-burger span {
    position: absolute; left: 13px; right: 13px; height: 1.75px; border-radius: 2px; background: var(--ink);
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-burger span:first-child { top: 18px; }
  .nav-burger span:last-child { top: 25px; }
  .nav.open .nav-burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav.open .nav-burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .nav.open { background: var(--canvas); box-shadow: none; }
  .nav-links {
    position: fixed; left: 0; right: 0; top: var(--nav-h); z-index: 2;
    display: flex; flex-direction: column; gap: 0;
    padding: 6px var(--gutter) 18px;
    background: var(--canvas);
    border-top: 1px solid var(--line);
    box-shadow: 0 28px 40px -28px rgba(20, 20, 19, .28);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 220ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 360ms;
  }
  .nav.open .nav-links {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 240ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
  }
  .nav-links a {
    display: flex; align-items: center; min-height: 54px; border-bottom: 1px solid var(--line);
    font-size: 20px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink);
    opacity: 0; transform: translateY(-6px);
    transition: opacity 200ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-links a:last-child { border-bottom: 0; }
  .nav.open .nav-links a {
    opacity: 1; transform: none;
    transition: opacity 320ms ease, transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(60ms + var(--i, 0) * 35ms);
  }
  .nav-scrim {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; top: var(--nav-h); z-index: 49;
    background: rgba(20, 20, 19, .22); opacity: 0; visibility: hidden;
    transition: opacity 300ms ease, visibility 0s linear 300ms;
  }
  .nav-open .nav-scrim { opacity: 1; visibility: visible; transition: opacity 300ms ease, visibility 0s; }
}

/* ── Who it's for: one quiet strip under the hero ── */
.who { padding: 80px 0 0; }
.who-in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 20px 48px; align-items: start; }
.who-h { padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--muted); }
.who-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
.who-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 3px 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.who-ic { grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.who-list b { font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.who-list span { font-size: 15px; line-height: 1.45; color: var(--body); }

/* ── Post your product: one post at a time on a calm panel, its format beside it (demos/social.js) ── */
.social { padding: 128px 0 0; }
.social-head { margin-bottom: 48px; }
.social-head .h2 { margin-top: 14px; }
.sw { position: relative; }
.sw-stage {
  --slot-h: 640px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "side slot";
  align-items: center;
  gap: 0 48px;
  padding: 56px 64px;
  border-radius: 24px;
  background: #EEE9E2;
}
.sw-side { grid-area: side; }
/* [r12 site] the controls' row (anim.js dock: the panel itself) at the panel's foot, in its padding under the posts */
.sw-stage > .dctl-row { right: 24px; bottom: 9px; }
.sw-info { position: relative; height: 210px; }
.sw-fmt { position: absolute; left: 0; right: 0; top: 50%; opacity: 0; transform: translateY(-50%); }
.sw-fmt:first-child { opacity: 1; }
.js .sw.is-ready .sw-fmt { opacity: 0; }
.sw-kind { font-size: 15px; line-height: 1.3; font-weight: 500; color: var(--muted); }
.sw-title { margin-top: 12px; max-width: 15ch; font-size: clamp(30px, 2.7vw, 40px); line-height: 1.08; font-weight: 600; letter-spacing: -0.032em; color: var(--ink); text-wrap: balance; }
.sw-meta { margin-top: 16px; font-size: 16px; line-height: 1.4; color: var(--body); font-variant-numeric: tabular-nums; }
.sw-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.sw-tabs button {
  position: relative; display: inline-flex; align-items: center; height: 42px; padding: 0 16px; overflow: hidden;
  border-radius: 10px; background: rgba(255, 255, 255, .45); color: var(--muted);
  font: 500 15px/1 var(--font); letter-spacing: -0.005em;
  transition: background-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.sw-tabs button:hover { color: var(--ink-2); background: rgba(255, 255, 255, .7); }
.sw-tabs button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .04); }
.sw-tabs button i { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(0, 0, 0, .06); opacity: 0; }
.sw-tabs button[aria-pressed="true"] i { opacity: 1; }
.sw-tabs button i::after { content: ''; position: absolute; inset: 0; background: var(--cta); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.sw-slot { grid-area: slot; position: relative; height: var(--slot-h); }
.sw-item { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.js .sw-item { opacity: 0; visibility: hidden; }
.js .sw-item:first-child { opacity: 1; visibility: visible; }
.sw-ig { width: 372px; }
.sw-story { width: calc(var(--slot-h) * 0.5625); }
.sw-x { width: 100%; max-width: 620px; }
.sw-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 48px; margin-top: 40px; }
.sw-points li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 14px; }
.sw-points .fact-ic { grid-row: span 2; width: 24px; height: 24px; margin: 1px 0 0; fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.sw-points .h3c { font-size: 17px; }
.sw-points p { font-size: 15px; line-height: 1.5; }
@media (max-width: 1279.98px) {
  .sw-stage { --slot-h: 600px; padding: 44px 44px; gap: 0 36px; }
  .sw-ig { width: 344px; }
}
@media (max-width: 1023.98px) {
  .sw-stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "slot"; gap: 28px; padding: 40px 32px 32px; }
  .sw-info { height: 150px; text-align: center; }
  .sw-tabs { margin-top: 12px; }
  .sw-title { max-width: none; }
  .sw-tabs { justify-content: center; }
  .sw-points { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 620px; }
}
@media (max-width: 699.98px) {
  .social { padding-top: 104px; }
  .social-head { margin-bottom: 32px; }
  .sw-stage { --slot-h: 548px; padding: 28px 16px 20px; gap: 20px; border-radius: 20px; }
  .sw-info { height: 112px; }
  .sw-kind { font-size: 14px; }
  .sw-title { margin-top: 8px; font-size: 26px; }
  .sw-meta { margin-top: 8px; font-size: 14.5px; }
  .sw-ig { width: min(100%, 318px); }
  .sw-story { width: min(100%, calc(var(--slot-h) * 0.5625)); }
  .sw-tabs button { height: 40px; padding: 0 14px; font-size: 14.5px; }
  .sw-points { margin-top: 32px; }
}

/* ── The features: a link to the full list; the Mac app's row further down ── */
.more-link { margin-top: 88px; text-align: center; }
.more-link a {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 12px;
  background: var(--cta-tint); color: var(--cta-tint-ink); font-size: 16.5px; font-weight: 600; letter-spacing: -0.005em;
  transition: background-color var(--ease);
}
.more-link a:hover { background: var(--cta-tint-2); }
.more-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); }
.more-link a:hover svg { transform: translateX(3px); }
.features-mac { padding: 128px 0 120px; }
.band-eyebrow { justify-content: center; margin-bottom: 14px; color: var(--on-band-2); }

/* ── AI edits: what you can say, as the command bar shows it ── */
.ai { padding: 128px 0 0; }
.ai-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px 72px; align-items: center; }
.ai-text .h2 { margin-top: 14px; }
.ai-text .lede { margin-top: 18px; }
.ai-cmds { display: grid; gap: 14px; justify-items: start; }
.ai-cmds li {
  display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 12px 24px 12px 18px; border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 17px; line-height: 1.3; font-weight: 500; letter-spacing: -0.008em;
  box-shadow: 0 1px 2px rgba(20, 20, 19, .05), 0 14px 32px -18px rgba(20, 20, 19, .3), 0 0 0 1px rgba(20, 20, 19, .06);
}
.ai-cmds li:nth-child(2) { margin-left: 56px; }
.ai-cmds li:nth-child(3) { margin-left: 18px; }
.ai-cmds li:nth-child(4) { margin-left: 84px; }
.ai-cmds li:nth-child(5) { margin-left: 34px; }
.ai-spark {
  flex: 0 0 auto; width: 18px; height: 18px; background: var(--pink);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3l1.9 5.6L19.5 10.5l-5.6 1.9L12 18l-1.9-5.6L4.5 10.5l5.6-1.9z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3l1.9 5.6L19.5 10.5l-5.6 1.9L12 18l-1.9-5.6L4.5 10.5l5.6-1.9z"/></svg>') center / contain no-repeat;
}

@media (max-width: 1023.98px) {
  .who-in { grid-template-columns: minmax(0, 1fr); }
  .who-h { padding-top: 0; border-top: 0; }
  .who-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699.98px) {
  .who { padding-top: 64px; }
  .who-list { gap: 20px 16px; }
  .who-list li { grid-template-columns: minmax(0, 1fr); padding-top: 16px; }
  .who-ic { grid-row: auto; margin-bottom: 6px; }
  .ai { padding-top: 104px; }
  .ai-cmds li { font-size: 16px; min-height: 48px; padding: 11px 18px 11px 15px; border-radius: 22px; }
  .ai-cmds li:nth-child(n) { margin-left: 0; }
  .ai-cmds li:nth-child(even) { margin-left: 22px; }
  .more-link { margin-top: 72px; }
  .features-mac { padding: 104px 0 88px; }
}

/* [r9] the video band's film: a thin progress bar along its foot while it plays (demos/video.js) */
.vb-prog { position: absolute; z-index: 24; left: 30px; right: 30px; bottom: 20px; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(20, 20, 19, .42); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); pointer-events: none; }
.vb-prog i { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }

/* ── [r9] The features page (/site/features/): a hero, a jump row, then one group per area: its demo row (the
   landing's .feature) and a grid of small cards, each with what it costs. ── */
.fx-hero { padding: calc(var(--nav-h) + 88px) 0 24px; }
.fx-title { margin-top: 18px; max-width: 14ch; }
.fx-lede { margin-top: 24px; max-width: 700px; }
.fx-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.fx-jump a {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--card); box-shadow: 0 0 0 1px var(--line); color: var(--ink-2); font-size: 15px; font-weight: 500;
  transition: box-shadow var(--ease), color var(--ease);
}
.fx-jump a:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--line-2), 0 2px 8px rgba(0, 0, 0, .05); }
.fx-group { padding: 128px 0 0; }
.fx-head { max-width: 760px; margin-bottom: 64px; }
.fx-head .h2 { margin-top: 14px; }
.fx-head .lede { margin-top: 18px; }
.fx-group .feature + .feature { margin-top: 88px; }
.fx-cost { display: flex; align-items: center; gap: 10px; margin-top: 18px !important; font-size: 15px !important; line-height: 1.35 !important; color: var(--muted); }
.fx-cost + .fx-cost { margin-top: 8px !important; }
.fx-cost span, .fx-tag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px;
  background: var(--cta-tint); color: var(--cta-tint-ink); font-size: 13px; font-weight: 600; letter-spacing: .005em; white-space: nowrap;
}
.fx-tag.free, .fx-cost span.free { background: #E3F1E8; color: #1F6B3A; }
.fx-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 72px; }
.fx-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
/* [r12 site] wide screens: the demo above now ends with its controls' row; a little air before the cards */
@media (min-width: 1024px) { .feature + .fx-cards-3 { margin-top: 18px; } }
.fx-card { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 22px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.fx-card p { flex: 1; font-size: 15.5px; line-height: 1.5; }
.fx-card .fx-tag { align-self: flex-start; margin-top: 6px; }
.fx-card-wide { grid-column: span 3; }
.fx-cards:not(.fx-cards-3) .fx-card-wide { grid-column: 1 / -1; }
.fx-inline { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.fx-inline:hover { text-decoration-color: var(--ink); }
.fx-wide.feature { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.fx-wide .demo-video { width: 100%; max-width: none; margin-inline: 0; }
.fx-dark .stage { box-shadow: var(--shadow-media); }
.fx-page .closing { margin-top: 136px; }
.nav-links a[aria-current="page"] { color: var(--ink); }
@media (max-width: 1279.98px) {
  .fx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fx-card-wide, .fx-cards:not(.fx-cards-3) .fx-card-wide { grid-column: 1 / -1; }
}
@media (max-width: 1023.98px) {
  .fx-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-wide.feature { grid-template-columns: minmax(0, 1fr); }
  .fx-cards { margin-top: 56px; }
}
@media (max-width: 699.98px) {
  .fx-hero { padding-top: calc(var(--nav-h) + 48px); }
  .fx-title { font-size: clamp(40px, 11vw, 52px); }
  .fx-jump { margin-top: 28px; }
  .fx-jump a { height: 38px; padding: 0 14px; font-size: 14.5px; }
  .fx-group { padding-top: 104px; }
  .fx-head { margin-bottom: 44px; }
  .fx-cards, .fx-cards-3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fx-cards { margin-top: 48px; }
  .fx-card { padding: 22px 20px 18px; }
  .fx-page .closing { margin-top: 104px; }
}

/* ══ [r10] 2026-10-08: shorter, the strongest things first (owner + an outside review) ═════════════════════════════ */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* A quiet text link with an arrow (the hero's "See how it works", the FAQ's email, the features page's pricing) */
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 17px; line-height: 1.2; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); }
.text-link .arr { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); }
.text-link:hover .arr { transform: translateX(3px); }
.more-link .arr { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); }
.more-link a:hover .arr { transform: translateX(3px); }

/* Hero: one button, a text link; under the demo its steps, then "sped up" and the controls */
.hero-ctas { align-items: center; gap: 12px 30px; }
.hero-note { margin-top: 14px; }
.demo-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; margin-top: 18px; }
.demo-meta .steps { flex: 1 1 520px; max-width: 720px; margin: 0; }
.demo-side { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; margin-left: auto; }
.speed { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.3; color: var(--muted); }
.speed svg { width: 13px; height: 13px; fill: currentColor; opacity: .8; }

/* 2. Edit the screen: the head centred over the editor, the things you can say under it */
.edit { padding: 120px 0 0; }
.edit-head { margin: 0 auto 48px; text-align: center; }
.edit-head .eyebrow { justify-content: center; }
.edit-head .h2 { margin-top: 14px; }
.edit-head .lede { margin-inline: auto; max-width: 720px; }
.demo-edit { max-width: 1120px; margin: 0 auto; }
.demo-edit .stage { border-radius: 18px; background: #F3F2F0; box-shadow: var(--shadow-media), 0 0 0 1px rgba(0, 0, 0, .07); }
.say { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; max-width: 1120px; margin: 28px auto 0; }
.say-h { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.3; font-weight: 500; color: var(--ink-2); }
.say-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.say-cmds { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.say-cmds li {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 15px 7px 12px; border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 14.5px; line-height: 1.3; font-weight: 500; letter-spacing: -0.005em;
  box-shadow: 0 0 0 1px rgba(20, 20, 19, .07), 0 8px 18px -12px rgba(20, 20, 19, .35);
}
.say-cmds .ai-spark { width: 15px; height: 15px; }
.say-note { flex-basis: 100%; text-align: center; font-size: 13.5px; line-height: 1.4; color: var(--muted); }

/* 3. Two-up: Translate and Make it safe to share, side by side, playing together */
.duo { padding: 120px 0 0; }
.duo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.duo-card { display: flex; flex-direction: column; gap: 24px; }
.duo-text .h3 { margin-top: 12px; }
.duo-text p:not(.eyebrow) { margin-top: 10px; max-width: 46ch; font-size: 16.5px; line-height: 1.5; }
.duo-card .demo { margin-top: auto; }
.duo .more-link { margin-top: 56px; }

/* 4. Outputs: posts (images), the switch (Figma, slides, docs), video, who it is for */
.outputs { padding: 120px 0 0; }
.outputs .sec-head { margin-bottom: 48px; }
.outputs .sec-head .h2 { margin-top: 14px; }
.sw-side .sw-h { margin-top: 12px; max-width: 13ch; font-size: clamp(30px, 2.7vw, 40px); line-height: 1.08; font-weight: 600; letter-spacing: -0.032em; color: var(--ink); text-wrap: balance; }
.sw-lede { margin-top: 16px; max-width: 38ch; font-size: 17px; line-height: 1.5; }
.sw-side .sw-tabs { margin-top: 28px; }
.sw-side .sw-info { position: relative; height: 22px; margin-top: 14px; text-align: left; }
.sw-side .sw-fmt { position: absolute; left: 0; right: auto; top: 50%; font-size: 14px; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sw-sized { margin-top: 22px; padding-top: 18px; max-width: 38ch; border-top: 1px solid rgba(0, 0, 0, .08); font-size: 14.5px; line-height: 1.5; color: var(--body); }
.outputs .o5-switch { margin-top: 32px; }
.vid { margin-top: 32px; padding: 56px 56px 48px; border-radius: 24px; background: var(--band); color: var(--on-band-2); }
.vid-text { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 8px 56px; align-items: end; max-width: 1040px; margin: 0 auto 36px; }
.vid-text .eyebrow { grid-column: 1; color: var(--on-band-2); }
.vid-text .h3 { grid-column: 1; margin-top: 6px; color: var(--on-band); font-size: clamp(28px, 2.5vw, 36px); line-height: 1.1; letter-spacing: -0.03em; }
.vid-text p:not(.eyebrow) { grid-column: 2; grid-row: 1 / span 2; font-size: 16.5px; line-height: 1.5; color: var(--on-band-2); }
.vid .demo-video { max-width: 1040px; margin: 0 auto; }
.vid :focus-visible { outline-color: var(--on-band); }
.outputs .who { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 20px 48px; align-items: start; margin-top: 72px; padding: 0; }

/* 5. The one story */
.stories { padding: 120px 0 0; }
.st-text .h2 { grid-column: 1; margin-top: 10px; }
.stories-fx { padding-top: 128px; }
.stories-fx .story + .story { margin-top: 88px; }

/* 7. Pricing: what Studio adds, said plainly */
.plan-note { margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* 8. FAQ: contact as a small link after the questions */
.faq-more { padding-top: 22px; font-size: 15px; line-height: 1.4; color: var(--body); }
.faq-more .text-link { min-height: 0; font-size: 15px; gap: 0; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.faq-more .text-link:hover { text-decoration-color: var(--ink); }

/* The features page: the command chips under the AI group's head; cards after the outputs switch */
.fx-say { justify-content: flex-start; margin-top: 24px; }
.fx-after { margin-top: 32px; }

/* ── Early access: until the signed Mac build exists, Download and the plan buttons open this form (site.js). ── */
.btn[hidden], .ea[hidden], .ea [hidden] { display: none !important; }
.ea { width: 100%; max-width: 480px; text-align: left; }
.ea-row { display: flex; gap: 8px; }
.ea-in {
  flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2);
  background: #fff; font: 500 16px/1.2 var(--font); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.ea-in::placeholder { color: rgba(0, 0, 0, .38); }
.ea-in:focus { outline: none; border-color: var(--cta); box-shadow: 0 0 0 3px rgba(217, 42, 120, .16); }
.ea-in[aria-invalid="true"] { border-color: #C0362C; }
.ea .btn { flex: 0 0 auto; height: 52px; }
.ea .btn[disabled] { opacity: .7; cursor: progress; }
.ea-note { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.ea-msg { margin-top: 10px; font-size: 14.5px; line-height: 1.45; font-weight: 500; }
.ea-msg:empty { display: none; }
.ea-msg.err { color: #B42318; }
.ea-done { display: flex; align-items: center; gap: 10px; min-height: 52px; font-size: 16px; line-height: 1.4; font-weight: 500; color: var(--ink); }
.ea-done i { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #1F8A4C; color: #fff; }
.ea-done svg { width: 14px; height: 14px; }
.ea-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ea.is-in { animation: ea-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.ea-pop.is-in { animation: ea-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes ea-in { from { opacity: 0; transform: translateY(6px); } }
.ctas .ea { flex: 0 1 480px; }
.hero-ctas:has(.ea) { align-items: flex-start; }
.hero-ctas:has(.ea) .text-link { min-height: 52px; }
.plan .ea { max-width: none; margin-top: 24px; }
.plan .ea-row { flex-direction: column; }
.plan .ea .btn { width: 100%; height: 48px; }
.plan .ea-in { height: 48px; }
/* the nav's Download: a small card under the bar */
.ea-pop {
  position: fixed; z-index: 60; top: calc(var(--nav-h) + 8px); right: max(var(--gutter), calc((100vw - 1280px) / 2));
  width: min(420px, calc(100vw - 2 * var(--gutter))); padding: 20px; border-radius: 16px; background: var(--card);
  box-shadow: 0 24px 60px -20px rgba(20, 20, 19, .35), 0 0 0 1px var(--line);
}
.ea-pop[hidden] { display: none; }
.ea-pop-h { margin-bottom: 12px; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.ea-pop .ea { max-width: none; }
.ea-pop .ea-row { flex-direction: column; }
.ea-pop .ea .btn { width: 100%; height: 48px; }
.ea-pop .ea-in { height: 48px; }
.ea-pop-x { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--muted); }
.ea-pop-x:hover { background: rgba(0, 0, 0, .05); color: var(--ink); }
.ea-pop-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

@media (max-width: 1279.98px) {
  .vid { padding: 48px 40px 40px; }
}
@media (max-width: 1023.98px) {
  .duo-grid { grid-template-columns: minmax(0, 1fr); gap: 72px; }
  .vid-text { grid-template-columns: minmax(0, 1fr); }
  .vid-text p:not(.eyebrow) { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .outputs .who { grid-template-columns: minmax(0, 1fr); }
  .sw-side .sw-h { max-width: none; margin-inline: auto; }
  .sw-lede, .sw-sized { margin-inline: auto; }
  .sw-side { text-align: center; }
  .sw-side .eyebrow { justify-content: center; }
  .sw-side .sw-info { width: max-content; max-width: 100%; margin-inline: auto; }
  .sw-side .sw-fmt { left: 50%; translate: -50% 0; }
  .sw-side .sw-sized { display: none; }
}
@media (max-width: 699.98px) {
  .hero-ctas .text-link { font-size: 16px; }
  .demo-meta { margin-top: 14px; }
  .demo-side { width: 100%; justify-content: space-between; margin-left: 0; }
  .speed-x { display: none; }
  .edit { padding-top: 96px; }
  .edit-head { margin-bottom: 28px; text-align: left; }
  .edit-head .eyebrow { justify-content: flex-start; }
  .edit-head .lede { margin-inline: 0; }
  .say { justify-content: flex-start; margin-top: 20px; }
  .say-cmds { justify-content: flex-start; }
  .say-note { text-align: left; }
  .duo { padding-top: 96px; }
  .duo-grid { gap: 64px; }
  .duo-card { gap: 18px; }
  .outputs { padding-top: 96px; }
  .outputs .sec-head { margin-bottom: 32px; }
  .vid { margin-top: 24px; margin-inline: calc(-1 * var(--gutter) + 8px); padding: 32px 16px 20px; border-radius: 20px; }
  .vid-text { margin-bottom: 24px; padding: 0 4px; }
  .outputs .who { margin-top: 56px; }
  .stories { padding-top: 96px; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ea-row { flex-direction: column; }
  .ea .btn, .hero .ctas .ea .btn, .closing .ctas .ea .btn { flex: 0 0 auto; width: 100%; }
  .ea-pop { left: var(--gutter); right: var(--gutter); width: auto; }
}
/* the home page's switch: a heading over its three tabs (the features page's has seven and no heading) */
.switch-side { display: grid; gap: 0; align-content: start; }
.switch-h { font-size: clamp(22px, 1.8vw, 26px); line-height: 1.15; font-weight: 600; letter-spacing: -0.022em; color: var(--ink); text-wrap: balance; }
.switch-p { margin: 10px 0 22px; font-size: 15.5px; line-height: 1.5; color: var(--body); }
.switch-side .switch-tabs { position: static; }
@media (max-width: 1023.98px) {
  .switch-side { display: block; }
  .switch-p { margin-bottom: 14px; }
}
/* the two-up row stacked (tablets): the demos keep a readable width without filling a tall screen */
@media (min-width: 700px) and (max-width: 1023.98px) {
  .duo-card .demo { width: 100%; max-width: 600px; }
}
/* phones: the privacy facts with their icon beside the words (a shorter list) */
@media (max-width: 699.98px) {
  .privacy .facts li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 14px; padding-top: 18px; }
  .privacy .facts .fact-ic { grid-row: span 2; margin: 1px 0 0; }
  .privacy .facts p { margin-top: 4px; }
}

/* ══ [r11] 2026-10-08: phones (owner, on his phone: "a lot of issues with alignment and others … please make sure mobile
   is perfect"). One system on phones: every line of text and every frame sits on ONE 20 px gutter and reads from the
   left; only the two bookends (the hero and the closing call) are centred. Tinted bands that hold text and a demo run
   edge to edge, so their words sit on the same line. One rhythm: 88 px between sections, 28 px from a head to what it
   introduces, 56 px between the blocks of a section. Buttons fill the width. Every target is at least 44 px. ════════ */

/* Safe areas (viewport-fit=cover): a landscape iPhone's notch side and the home bar never cover text */
html { scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 8px); }
.wrap { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.nav { height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
.foot { padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
.ea-pop { top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 8px); }

@media (max-width: 760px) {
  .nav-links { top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); max-height: calc(100dvh - var(--nav-h) - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .nav-scrim { top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }
  /* the menu button's lines end on the gutter line, like the text under them */
  .nav-burger { margin-right: -13px; }
  /* the small Download (and the legal pages' Try scrimpl): 40 px drawn, 44 px to tap */
  .nav .btn-sm { position: relative; height: 40px; }
  .nav .btn-sm::after { content: ''; position: absolute; inset: -2px; }
}

@media (max-width: 699.98px) {
  :root { --gutter: 20px; }
  p, li, figcaption, .lede { text-wrap: pretty; }
  .hero-line, .closing .h2, .h2, .h3, .faq-list summary { text-wrap: balance; }

  /* ── Hero (centred: the page's opening) ── */
  .hero { padding-top: calc(var(--nav-h) + 40px); }
  .hero-title { font-size: clamp(26px, 8.3vw, 40px); --hi-u: 0.0235em; }
  .hi { vertical-align: -0.075em; }
  .hero-line { margin-top: 16px; font-size: 17px; line-height: 1.5; max-width: 34ch; }
  .hero-ctas { margin-top: 28px; gap: 6px 20px; }
  .hero-note { margin-top: 6px; }
  .demo-hero { margin-top: 36px; }
  /* the demo's four steps: one progress bar each, in a row; the step being shown is named under them, the controls on
     its right ("a broken table" before: a 2 × 2 grid of lines and words) */
  .demo-meta { position: relative; display: block; margin-top: 14px; }
  .demo-meta .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: none; margin: 0; }
  .demo-meta .step { display: block; }
  .demo-meta .step i { height: 3px; border-radius: 2px; }
  .demo-meta .step b { position: absolute; left: 0; top: 17px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); opacity: 0; transition: none; white-space: nowrap; }
  .demo-meta .step.on b { opacity: 1; transition: opacity 280ms ease 60ms; } /* the old name goes at once, the new one fades in */
  .demo-side { display: flex; align-items: flex-end; justify-content: space-between; width: auto; height: 44px; margin: 14px 0 0; }
  .demo-side .speed { padding-bottom: 1px; font-size: 13px; }

  /* ── Sections: one rhythm ── */
  .edit, .duo, .outputs, .stories, .privacy { padding-top: 88px; }
  .privacy, .pricing, .faq { padding-bottom: 88px; }
  .sec-head .lede, .edit-head .lede { margin-top: 14px; }
  .edit-head, .outputs .sec-head { margin-bottom: 28px; }
  .outputs .sec-head .h2, .edit-head .h2 { margin-top: 12px; }
  .say { gap: 10px; margin-top: 4px; }
  .say-h { min-height: 24px; }
  .duo-grid { gap: 56px; }
  .duo-card { gap: 20px; }
  .duo-text .h3 { margin-top: 10px; }
  .duo-text p:not(.eyebrow) { font-size: 16px; }
  /* "See every feature": a full-width button, like every call on a phone */
  .more-link, .duo .more-link { margin-top: 48px; text-align: left; }
  .more-link a { display: flex; justify-content: center; width: 100%; height: 52px; }

  /* Post your product: an edge-to-edge band, its words on the gutter line */
  .sw-stage { margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))); padding: 40px max(var(--gutter), env(safe-area-inset-left, 0px)) 92px; border-radius: 0; gap: 24px; }
  .sw-side { text-align: left; }
  .sw-side .eyebrow { justify-content: flex-start; }
  .sw-side .sw-h { margin-inline: 0; font-size: 30px; }
  .sw-lede { margin-inline: 0; font-size: 16px; }
  .sw-side .sw-tabs { justify-content: flex-start; margin-top: 22px; }
  .sw-tabs button { height: 44px; padding: 0 16px; font-size: 15px; }
  .sw-side .sw-info { width: auto; margin: 12px 0 0; }
  .sw-side .sw-fmt { left: 0; translate: none; font-size: 13.5px; }
  .sw-stage > .dctl-row { right: max(var(--gutter), env(safe-area-inset-right, 0px)); bottom: 32px; }
  /* the posts run gutter to gutter, like the words above them (the slot is as tall as the tallest post) */
  .sw-stage { --slot-h: calc((100vw - 2 * var(--gutter)) * 1.25 + 150px); }
  .sw-ig { width: 100%; }

  /* Slides, Figma and help docs */
  .outputs .o5-switch { margin-top: 56px; }
  .switch-h { font-size: 24px; }
  .switch-p { margin: 10px 0 16px; font-size: 16px; }
  .o5-switch .switch-tabs button { min-height: 44px; padding: 11px 16px; }

  /* Video: an edge-to-edge dark band, its words on the gutter line */
  .vid { margin: 56px calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))) 0; padding: 48px max(var(--gutter), env(safe-area-inset-left, 0px)) 40px; border-radius: 0; }
  .vid-text { margin-bottom: 28px; padding: 0; }
  .vid-text .h3 { font-size: 28px; }
  .vid-text p:not(.eyebrow) { font-size: 16px; margin-top: 12px; }

  /* Who it's for */
  .outputs .who { margin-top: 64px; gap: 16px; }
  .who-list { gap: 24px 16px; }
  .who-list li { padding-top: 16px; }

  /* The story */
  .st-text { margin-bottom: 28px; }
  .st-text .h2 { margin-top: 12px; }
  .st-text p:not(.eyebrow) { margin-top: 14px; }

  /* Privacy: the heading, the four facts, then the documents as a list of links */
  .privacy .wrap { display: flex; flex-direction: column; }
  .privacy-head { display: contents; }
  .privacy-head .h2 { margin-bottom: 28px; }
  .privacy .facts { gap: 0; }
  .privacy .facts li { padding: 18px 0 20px; }
  .privacy-head .sec-links { order: 2; display: grid; gap: 0; margin-top: 12px; border-top: 1px solid var(--line); font-size: 16px; }
  .privacy-head .sec-links a {
    display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid var(--line);
    color: var(--ink-2); text-decoration: none;
  }
  .privacy-head .sec-links a::after {
    content: ''; width: 16px; height: 16px; flex: 0 0 auto; background: currentColor; opacity: .55;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 8h9.5M8.5 4l4 4-4 4" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 8h9.5M8.5 4l4 4-4 4" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
  }

  /* Pricing */
  .pricing .sec-head .lede { margin-top: 12px; }
  .bill { margin-top: 22px; }
  .bill button { height: 44px; padding: 0 16px; }
  .bill button span { font-size: 13px; }
  .plans { margin-top: 28px; gap: 16px; }
  .plan { padding: 26px 22px 24px; }
  .plan-cta { margin-top: 22px; height: 48px; }
  .plan .ea { margin-top: 22px; }
  .price { flex-wrap: wrap; row-gap: 8px; margin-top: 14px; }
  .plans-foot { display: block; margin-top: 28px; }
  .plans-foot .caption { margin-top: 12px; font-size: 14px; line-height: 1.5; }

  /* FAQ */
  .faq-grid { gap: 20px; }
  .faq-list details p { padding-bottom: 20px; }
  .faq-more { padding-top: 20px; }
  .faq-more .text-link { display: inline; }

  /* Closing (centred: the page's last word) */
  .closing { padding: 88px 0 96px; }
  .closing .logo { margin-bottom: 28px; }
  .closing .h2 { font-size: 36px; }
  .closing .ctas { align-self: stretch; margin-top: 32px; gap: 6px 20px; }
  .closing .ctas .text-link { flex: 1 1 100%; justify-content: center; }
  .closing .caption { margin-top: 12px; }

  /* Footer: the links in two columns, every one a full target */
  .foot { padding-top: 48px; }
  .foot-row { gap: 24px; }
  .foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; width: 100%; }
  .foot-links a { font-size: 15px; }
  .foot-legal { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 28px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
  .foot-legal a { min-width: 44px; font-size: 14px; }
  .foot-copy, .foot-legal + .foot-copy { margin-top: 16px; font-size: 13px; }
  .foot-tm { font-size: 13px; }

  /* Early access: the nav's card */
  .ea-pop-x { width: 44px; height: 44px; right: 6px; top: 6px; }
  .ea-pop-h { padding-right: 40px; }

  /* The features page */
  .fx-hero { padding-top: calc(var(--nav-h) + 40px); }
  .fx-title { font-size: clamp(38px, 11vw, 48px); }
  .fx-lede { margin-top: 16px; }
  .fx-jump { gap: 8px; margin-top: 28px; }
  .fx-jump a { height: 44px; padding: 0 16px; font-size: 15px; }
  .fx-group { padding-top: 88px; }
  .fx-head { margin-bottom: 28px; }
  .fx-head .h2 { margin-top: 12px; }
  .fx-head .lede { margin-top: 14px; }
  .fx-group .feature + .feature { margin-top: 64px; }
  .feature, .feature.flip { gap: 24px; }
  .f-text .h3 { margin-top: 10px; }
  .f-text p:not(.eyebrow) { margin-top: 12px; }
  .fx-cards { margin-top: 56px; }
  .fx-after { margin-top: 32px; }
  .fx-say { margin-top: 20px; }
  .fx-page .closing { margin-top: 88px; }
  .stories-fx .story + .story { margin-top: 64px; }
}

/* [r11] Touch screens wider than a phone (a phone held sideways, a tablet): the same 44 px targets as on a phone, on the
   wider layout (a mouse keeps the desktop's compact one) */
@media (pointer: coarse) and (min-width: 700px) {
  .nav .btn-sm { position: relative; height: 40px; }
  .nav .btn-sm::after { content: ''; position: absolute; inset: -2px; }
  .sw-tabs button, .bill button, .fx-jump a { height: 44px; }
  .switch-tabs button { min-height: 44px; }
  .bill button span { font-size: 13px; }
  .sec-links { gap: 0 22px; }
  .sec-links a, .foot-links a, .foot-legal a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .foot-links { row-gap: 0; }
  .foot-legal { row-gap: 0; margin-top: 16px; }
  .foot-tm { font-size: 13px; }
  .faq-more .text-link { display: inline; }
}
@media (pointer: coarse) and (min-width: 761px) {
  .nav-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
}

/* [r12 site] Tablets: the posts panel keeps a row of its own for the demo controls under the posts, inside the panel
   (r11 put them on the panel's very corner, where its rounding cut the pill). Phones have their own rule above. */
@media (min-width: 700px) and (max-width: 1023.98px) {
  .sw-stage { padding-bottom: 84px; }
  .sw-stage > .dctl-row { right: 32px; bottom: 22px; }
}

/* ══ [r13] (owner, 2026-10-08) ══════════════════════════════════════════════════════════════════════════════════════
   The announcement bar (announce.js: its message lives there): dark, in the logo's ink, above the nav. The page keeps
   its height (--ann-h); it scrolls away with the page and the fixed nav rides under it (--ann-vis: the part of it
   still on screen), so whatever hangs under the nav (the phone menu, the Download pop-up) follows too. ── */
.ann {
  position: fixed; inset: 0 0 auto; z-index: 55; background: var(--band); color: rgba(255, 255, 255, .84);
  font-size: 13.5px; line-height: 1.35; letter-spacing: 0;
}
.ann-in { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 56px; }
.ann-msg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; text-align: center; }
.ann-tag {
  display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 6px;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .005em;
}
.ann-short, .ann-ls { display: none; }
.ann-link {
  display: inline-flex; align-items: center; gap: 4px; color: #fff; font-weight: 500;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .34); text-underline-offset: 3px; transition: text-decoration-color var(--ease);
}
.ann-link:hover { text-decoration-color: #fff; }
.ann-link { position: relative; }
.ann-link::after { content: ''; position: absolute; inset: -14px -8px; } /* a 44 px target in the 40 px bar */
.ann-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--spring); }
.ann-link:hover svg { transform: translateX(2px); }
.ann-x {
  position: absolute; top: 50%; right: max(6px, calc(var(--gutter) - 10px)); translate: 0 -50%;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: rgba(255, 255, 255, .66);
  transition: color var(--ease), background-color var(--ease);
}
.ann-x::after { content: ''; position: absolute; inset: -5px; } /* a 44 px target */
.ann-x:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.ann-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.ann :focus-visible { outline-color: #fff; }
.ann.is-closing { pointer-events: none; }
.has-ann body { padding-top: var(--ann-h, 40px); }
.has-ann .nav { top: var(--ann-vis, 40px); }
.has-ann .ea-pop { top: calc(var(--nav-h) + 8px + var(--ann-vis, 0px)); }
@media (max-width: 760px) {
  .has-ann .nav-links, .has-ann .nav-scrim { top: calc(var(--nav-h) + var(--ann-vis, 0px)); }
}
@media (max-width: 699.98px) {
  .ann { font-size: 13px; }
  .ann-in { justify-content: flex-start; padding: 7px 50px 7px max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .ann-msg { justify-content: flex-start; text-align: left; gap: 4px 8px; }
  .ann-text.has-short, .ann-l.has-short { display: none; }
  .ann-short, .ann-ls { display: inline; }
}

/* The Mac download (hero, closing, nav: .btn-mac): the accent pink, alive. A slow, cool drift through the pinks and a
   magenta (every stop keeps white type at 4.5:1 or better), a light sweep on hover; under reduced motion a still
   gradient. */
.btn.btn-mac {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--cta);
  background-image: linear-gradient(115deg, #D92A78 0%, #CC2A86 18%, #B5258E 36%, #C21F7A 54%, #D92A78 72%, #D02B7C 86%, #D92A78 100%);
  background-size: 320% 100%;
  background-position: 0% 50%;
  animation: mac-drift 16s ease-in-out infinite alternate;
}
.btn.btn-mac:hover, .btn.btn-mac:active { background-image: linear-gradient(115deg, #D92A78 0%, #CC2A86 18%, #B5258E 36%, #C21F7A 54%, #D92A78 72%, #D02B7C 86%, #D92A78 100%); }
.btn.btn-mac::after {
  content: ''; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .26) 47%, rgba(255, 255, 255, .1) 53%, rgba(255, 255, 255, 0) 66%);
  transform: translateX(-110%);
}
.btn.btn-mac:hover::after { animation: mac-sweep 1100ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes mac-drift { to { background-position: 100% 50%; } }
@keyframes mac-sweep { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) {
  .btn.btn-mac { animation: none; background-position: 40% 50%; }
  .btn.btn-mac:hover::after { animation: none; }
}

/* Who it's for (index.html #who): five profile cards in a row that scrolls sideways. The row runs edge to edge (its
   first card on the content's left edge, the next ones peeking past the right), snaps card by card; arrows on wide
   screens, a swipe on phones, Tab + the arrow keys anywhere. */
.who2 { padding: 120px 0 0; }
.who2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.who2-head .h2 { margin-top: 14px; }
.who2-nav { display: flex; gap: 10px; }
.who2-nav button {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--card); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line-2), 0 1px 2px rgba(0, 0, 0, .04); transition: background-color var(--ease), box-shadow var(--ease), opacity var(--ease), transform 160ms var(--spring);
}
.who2-nav button:hover { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .06); }
.who2-nav button:active { transform: scale(.94); }
.who2-nav button[aria-disabled="true"] { opacity: .38; cursor: default; box-shadow: 0 0 0 1px var(--line); }
.who2-nav button[aria-disabled="true"]:active { transform: none; }
.who2-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.who2-rail {
  --edge: max(var(--gutter), calc((100vw - 1280px) / 2));
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  scrollbar-width: none; -webkit-overflow-scrolling: touch; outline-offset: -2px;
}
.who2-rail::-webkit-scrollbar { display: none; }
.who2-rail:focus-visible { outline: 2px solid var(--cta); border-radius: 18px; }
.who2-list { display: grid; grid-auto-flow: column; grid-auto-columns: 304px; gap: 16px; width: max-content; padding: 4px var(--edge) 8px; }
.who2-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--line); scroll-snap-align: start; }
.who2-vis { aspect-ratio: 280 / 168; }
.who2-vis svg { width: 100%; height: 100%; }
.who2-vis.tone-pink { background: var(--tone-pink); }
.who2-vis.tone-sky { background: var(--tone-sky); }
.who2-vis.tone-mint { background: var(--tone-mint); }
.who2-vis.tone-butter { background: var(--tone-butter); }
.who2-vis.tone-stone { background: var(--tone-stone); }
.who2-body { display: grid; align-content: start; gap: 6px; padding: 20px 22px 24px; }
.who2-role { font-size: 16px; line-height: 1.4; font-weight: 500; color: var(--ink-2); text-wrap: balance; }
.who2-body p:last-child { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--body); }
.who2-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (max-width: 1023.98px) {
  .who2 { padding-top: 104px; }
  .who2-list { grid-auto-columns: 288px; }
}
@media (max-width: 699.98px) {
  .who2 { padding-top: 88px; }
  .who2-head { margin-bottom: 24px; }
  .who2-nav { display: none; }
  .who2-list { grid-auto-columns: min(78vw, 300px); gap: 12px; }
  .who2-body { padding: 18px 18px 20px; }
}

/* The brand showcase (index.html #brand) and the field that tries the visitor's own name in it */
.brandsec { padding: 120px 0 0; }
.brandsec .sec-head { margin-bottom: 40px; }
.brandsec .sec-head .h2 { margin-top: 14px; }
.bk-try { display: grid; grid-template-columns: auto minmax(0, 260px); justify-content: start; align-items: center; gap: 8px 14px; margin-top: 4px; }
.bk-try label { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.bk-try input {
  height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--card); color: var(--ink);
  font: 400 16px/1 var(--font); box-shadow: 0 0 0 1px var(--line-2); transition: box-shadow var(--ease);
}
.bk-try input::placeholder { color: rgba(0, 0, 0, .38); }
.bk-try input:focus { outline: none; box-shadow: 0 0 0 2px var(--cta), 0 0 0 6px rgba(217, 42, 120, .14); }
.bk-try .caption { grid-column: 1 / -1; }
@media (max-width: 1023.98px) { .brandsec { padding-top: 104px; } }
@media (max-width: 699.98px) {
  .brandsec { padding-top: 88px; }
  .brandsec .sec-head { margin-bottom: 28px; }
  .bk-try { grid-template-columns: minmax(0, 1fr); }
  .bk-try input { width: 100%; }
}