@font-face { font-family: 'Manrope Variable'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/site/fonts/manrope.woff2') format('woff2-variations'); }
@font-face { font-family: 'Geist Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/site/fonts/geist.woff2') format('woff2-variations'); }

:root {
  /* — the green: a line and a word take the deep step, a surface the bright one — */
  --accent: #1d8069;
  --accent-fill: #2fd69b;
  --accent-fill-hover: #22c48b;
  --accent-100: #e6faf2;
  --accent-200: #c6f3e1;
  --accent-300: #97e9ca;
  --accent-700: #17705c;

  /* — night blue, the only dark — */
  --navy-800: #081c2e;
  --navy-700: #0f2a42;

  /* — paper and the greys, with a trace of the blue — */
  --n-100: #f7faf9;
  --n-200: #eef2f1;
  --n-300: #d9e0de;
  --n-400: #b7c2bf;
  --n-500: #88959a;
  --n-600: #67757e;
  --n-700: #46545f;
  --n-800: #263441;
  --n-900: #0c1a26;

  /* — roles — */
  --bg: var(--n-100);
  --surface: #ffffff;
  --text: var(--n-900);
  --soft: var(--n-800);
  --muted: var(--n-700);
  --line: var(--n-300);
  --line-strong: var(--n-400);
  /* The names the contrast test reads: green as text, and the one ground
     the footer sits on, which is the same paper as everything else. */
  --on-accent: var(--accent-700);
  --section: var(--n-100);

  --heading: 'Manrope Variable', 'Segoe UI', Arial, sans-serif;
  --body: 'Geist Variable', 'Segoe UI', Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --measure: 1120px;

  color-scheme: light;
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--heading); margin: 0; line-height: 1.15; letter-spacing: -0.02em; text-wrap: pretty }
h1 { font-size: clamp(38px, 5.4vw, 64px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; max-width: 16ch }
h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700 }
h3 { font-size: 17px; font-weight: 700 }
h4 { font-size: 13px; font-weight: 700; color: var(--muted) }
p { margin: 0 }
p + p { margin-top: 1em }
a { color: var(--on-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px }
a:hover { color: var(--navy-800) }
b { font-weight: 600 }
img, video { max-width: 100%; display: block }

.skip { position: absolute; left: -999px; top: 8px; padding: 8px 12px; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong) }
.skip:focus { left: 8px; z-index: 100 }

.wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding-inline: var(--gutter) }

/* ── the mark ─────────────────────────────────────────────────────────── */

.mark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--heading); font-weight: 800; letter-spacing: -0.03em; font-size: 17px; color: var(--navy-800); text-decoration: none }
.mark:hover { color: var(--navy-800) }
.mark svg { width: 26px; height: 26px; flex: none }
.mark svg .mark-a { fill: var(--accent-fill) }
.mark svg .mark-b { fill: var(--navy-800) }

/* ── header: paper, a hairline, and words ────────────────────────────── */

.top { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line) }
.top-in { display: flex; align-items: center; gap: 28px; height: 60px }
.top nav { display: flex; gap: 22px }
.top nav a { font-size: 14px; color: var(--soft); text-decoration: none; padding-block: 6px; border-bottom: 1px solid transparent }
.top nav a:hover { color: var(--text); border-bottom-color: var(--line-strong) }
.top nav a[aria-current='page'] { color: var(--text); border-bottom-color: var(--navy-800) }
.top-acts { display: flex; align-items: center; gap: 18px; margin-left: auto }
.top-link { font-size: 14px; color: var(--soft); text-decoration: none }
.top-link:hover { color: var(--text); text-decoration: underline }
.langs { display: flex; gap: 10px; font-size: 12.5px }
.langs a { color: var(--muted); text-decoration: none; padding: 2px 0 }
.langs a:hover { color: var(--text) }
.langs a[aria-current='true'] { color: var(--text); border-bottom: 1px solid var(--navy-800) }
.menu { display: none; position: relative }
.menu > summary { list-style: none; cursor: pointer; white-space: nowrap; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 13px; color: var(--text) }
.menu > summary::-webkit-details-marker { display: none }
.menu-sheet { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 2px }
.menu-sheet a { font-size: 14px; color: var(--text); text-decoration: none; padding: 8px 10px; border-radius: 4px }
.menu-sheet a:hover { background: var(--n-200) }
.menu-sheet .langs { padding: 8px 10px 4px; border-top: 1px solid var(--line); margin-top: 6px }

/* ── buttons: two, and one of them green ─────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--surface); color: var(--text); font-family: var(--body); font-size: 14.5px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--navy-800); color: var(--text) }
.btn-accent { border-color: var(--accent-fill); background: var(--accent-fill); color: var(--navy-800); font-weight: 600 }
.btn-accent:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); color: var(--navy-800) }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13.5px }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px }
.note { font-size: 13px; color: var(--muted) }

/* ── the opening ──────────────────────────────────────────────────────── */

.hero { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 72px) }
.hero .lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--soft); max-width: 62ch; margin-top: 24px }
.hero.lead-in { padding-bottom: clamp(24px, 3vw, 40px) }
.hero .stage { margin-top: clamp(40px, 5vw, 64px) }

/* ── a section: heading left, matter right ───────────────────────────── */

.row { border-top: 1px solid var(--line) }
.row-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(32px, 5vw, 72px); padding-block: clamp(40px, 5vw, 64px) }
.row-head p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--muted) }
.row-body { font-size: 16px; line-height: 1.65; color: var(--soft); max-width: 68ch }
.row-body > p + p { margin-top: 1em }
.row-body > * + .stage, .row-body > .plain + p { margin-top: 28px }
.row.last { border-bottom: 0 }

/* Lists: a hairline between items and no glyph in front of them. */
.plain { list-style: none; margin: 16px 0 0; padding: 0 }
.plain li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px }
.plain li:first-child { border-top: 0 }
.plain.columns { columns: 2; column-gap: 40px }
.plain.columns li { break-inside: avoid; border-top: 0; border-bottom: 1px solid var(--line) }

/* Entries: a term and its explanation, one under the other. */
.entries { margin: 0 }
.entries > div { padding: 18px 0; border-top: 1px solid var(--line) }
.entries > div:first-child { border-top: 0; padding-top: 0 }
.entries dt { font-family: var(--heading); font-weight: 700; font-size: 16px; color: var(--text) }
.entries dd { margin: 6px 0 0; font-size: 15px; color: var(--soft) }

/* ── the product, photographed ───────────────────────────────────────── */

.stage { margin: 0; display: grid; gap: 12px }
.shot { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface) }
.shot img { width: 100% }
.stage figcaption, .film figcaption { font-size: 13px; color: var(--muted) }

/* The prompt bar, as the application draws it: white, a line, the sparkle,
   and the green Build. In a list the bar keeps the line and drops the
   button: five Build buttons in a column is a pattern, not a product. */
.bar {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 50px; padding: 0 8px 0 14px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface);
}
.bar svg { width: 16px; height: 16px; color: var(--navy-800); flex: none }
.bar-text { font-size: 14.5px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.bar-build { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 6px; background: var(--accent-fill); color: var(--navy-800); font-size: 12.5px; font-weight: 600 }
.bar-build svg { width: 11px; height: 11px; color: var(--navy-800) }
.bar-plain { height: 42px; border-color: var(--line) }
.bar-plain .bar-text { font-size: 13.5px }

/* What has no screen is written out. */
.code { margin: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font: 13px/1.6 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--soft); white-space: pre-wrap; overflow-x: auto }
.code-in { color: var(--text); font-weight: 600 }

/* The film, in the same frame as a photograph. */
.film { margin: 0; display: grid; gap: 12px }
.film video { width: 100%; border: 1px solid var(--line); border-radius: 6px; background: var(--surface) }

/* ── sentences and what comes back ───────────────────────────────────── */

.exchange { width: 100%; border-collapse: collapse }
.exchange td { vertical-align: middle; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--soft) }
.exchange tr:first-child td { border-top: 0; padding-top: 0 }
.exchange td:first-child { width: 58%; padding-right: 24px }

/* ── the ledger ───────────────────────────────────────────────────────── */

.ledger { display: grid; gap: 28px }
.ledger .group h3 { margin-bottom: 4px }

/* ── the apps, as apps ───────────────────────────────────────────────────
   The one place the page has tiles and a coloured ground, because an app
   is a thing with an icon, and a store is how people already read a row of
   them. Still no shadow, no gradient, nothing moving. */

.store .wrap { display: grid; gap: 28px; padding-block: clamp(40px, 5vw, 64px) }
.store-head { max-width: 62ch }
.store-head p { margin-top: 10px; font-size: 16px; color: var(--muted) }

.store-featured { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 24px 40px; padding: clamp(24px, 3vw, 40px); border-radius: 12px; background: var(--navy-800); color: #ffffff; text-decoration: none }
.store-featured:hover { color: #ffffff }
.store-featured-mark { display: grid; place-items: center }
.store-featured-mark svg { width: 160px; height: 160px }
.store-featured-mark .mark-a { fill: var(--accent-fill) }
.store-featured-mark .mark-b { fill: #ffffff }
.store-featured-words { display: grid; gap: 10px; justify-items: start }
.store-featured .app-badge { color: var(--accent-fill) }
.store-featured-title { font-family: var(--heading); font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05 }
.store-featured-body { font-size: 15.5px; line-height: 1.55; color: #d3dde6; max-width: 56ch }
.store-featured .btn { margin-top: 6px }

.store-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.app-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none }
.app-card:hover { border-color: var(--navy-800); color: var(--text) }
.app-head { display: flex; align-items: center; gap: 12px }
.app-icon { display: inline-flex; width: 52px; height: 52px; border-radius: 14px; align-items: center; justify-content: center; flex: none }
.app-icon svg { width: 26px; height: 26px }
.app-title { display: grid; gap: 2px; min-width: 0 }
.app-name { font-family: var(--heading); font-size: 17px; font-weight: 800; letter-spacing: -0.02em }
.app-brings { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.app-what { font-size: 14px; line-height: 1.5; color: var(--soft) }
.app-shot { display: block; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface) }
.app-shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top }
.app-go { font-size: 14px; font-weight: 500; color: var(--on-accent) }
.app-card:hover .app-go { text-decoration: underline; text-underline-offset: 3px }
.app-badge { font-family: var(--body); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-accent) }

/* ── the wizard's steps ──────────────────────────────────────────────── */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step }
.steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--line); counter-increment: step }
.steps li:first-child { border-top: 0; padding-top: 0 }
.steps li::before { content: counter(step); grid-row: 1 / span 2; font-family: var(--heading); font-weight: 800; font-size: 18px; color: var(--navy-800); line-height: 1.3 }
.steps li b { font-family: var(--heading); font-weight: 700; color: var(--text) }
.steps li span { font-size: 14.5px; color: var(--soft) }

/* ── plans: two columns, a hairline between ──────────────────────────── */

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px }
.plan + .plan { border-left: 1px solid var(--line); padding-left: 40px }
.plan .price { margin-top: 8px }
.plan .amount { font-family: var(--heading); font-size: 36px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums }
.plan .per { font-size: 14px; color: var(--muted) }
.plan .btn { margin-top: 20px }
.included-title { margin-top: 36px }
.row-body .note { display: block; margin-top: 20px }

/* ── questions ────────────────────────────────────────────────────────── */

.faq details { border-top: 1px solid var(--line); padding: 12px 0 }
.faq details:first-child { border-top: 0; padding-top: 0 }
.faq summary { cursor: pointer; font-family: var(--heading); font-weight: 700; font-size: 16px; color: var(--text); list-style: none; display: flex; justify-content: space-between; gap: 16px }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: '+'; color: var(--muted); font-weight: 400 }
.faq details[open] summary::after { content: '–' }
.faq details p { margin-top: 10px; font-size: 15px; color: var(--soft); max-width: 62ch }

/* ── footer: the same paper, a hairline, small print ─────────────────── */

.foot { border-top: 1px solid var(--line); padding-block: 40px 32px; margin-top: clamp(40px, 6vw, 80px); font-size: 13.5px; color: var(--soft) }
.foot-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px }
.foot .blurb { margin-top: 12px; max-width: 40ch; color: var(--muted) }
.foot h4 { margin-bottom: 10px }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.foot a { color: var(--soft); text-decoration: none }
.foot a:hover { color: var(--text); text-decoration: underline }
.foot-fine { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted) }

/* ── narrow ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .top nav, .top-acts .langs, .top-acts .top-link { display: none }
  .menu { display: block }
  .top-acts { gap: 10px }
  .row-in { grid-template-columns: minmax(0, 1fr); gap: 16px }
  .row-body { max-width: none }
  .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .store-featured { grid-template-columns: minmax(0, 1fr) }
  .store-featured-mark { display: none }
  .plans { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .plan + .plan { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 32px }
  .plain.columns { columns: 1 }
  .exchange td { display: block; width: auto; padding-right: 0 }
  .exchange td:first-child { border-top: 1px solid var(--line); padding-bottom: 4px }
  .exchange td:last-child { border-top: 0; padding-top: 0; padding-bottom: 14px }
  .foot-cols { grid-template-columns: minmax(0, 1fr); gap: 24px }
}
@media (max-width: 520px) {
  .top-in { height: 56px }
  /* The page's own buttons carry the trial on a phone; the header keeps the menu. */
  .top-acts > .btn { display: none }
  .store-grid { grid-template-columns: minmax(0, 1fr) }
  .btn { width: 100% }
  .acts .btn { width: 100% }
}