/* The landing page. One idea per section, one large visual each. Motion is transform and opacity only, and only when
   the page has its script (html.js) and the reader has not asked for reduced motion; without either, everything is
   simply there. */
.home section { padding: clamp(80px, 12vw, 160px) var(--gutter) 0; }
.home .in { max-width: var(--max); margin: 0 auto; }
.home h2 { font-size: clamp(34px, 5.2vw, 56px); letter-spacing: -.035em; line-height: 1.05; max-width: 15ch; }
.home .say { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; color: var(--ink2); max-width: 34ch; margin: 18px 0 0; }
.home .head { margin-bottom: clamp(36px, 5vw, 64px); }
.home .head.center { text-align: center; }
.home .head.center h2, .home .head.center .say { margin-left: auto; margin-right: auto; }
.more { display: inline-block; margin-top: 18px; font-size: 16px; font-weight: 550; }
.more::after { content: " →"; }

/* Hero */
.hero { min-height: calc(100svh - 56px); display: flex; flex-direction: column; justify-content: center; padding-top: clamp(48px, 9vh, 120px) !important; }
.hero h1 { font-size: clamp(44px, 7.4vw, 84px); letter-spacing: -.045em; line-height: 1; font-weight: 700; max-width: 14ch; margin: 0 auto; text-align: center; }
.hero .say { margin: 24px auto 0; text-align: center; max-width: 46ch; }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 22px; font-size: 15px; font-weight: 600; color: var(--ink); border: 1px solid var(--line); }
.btn:hover { text-decoration: none; background: var(--soft); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn.primary:hover { background: var(--ink); opacity: .88; }
.hero-shot { max-width: 1240px; width: 100%; margin: clamp(48px, 7vw, 88px) auto 0; }

/* A flat window around a console screenshot */
/* A web console screenshot, bare: rounded like the Mac shots (the same radius for a 16:10 image), a hairline in the
   page's line colour and nothing else. */
.window { border-radius: 1.53% / 2.45%; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.window img { width: 100%; }
/* The one place the browser matters: a Safari-like toolbar, a band of its own above a hairline, so the console's top
   bar below it still reads as the page. Thin, muted icons; nothing loud. */
.browser { --chrome: #ececee; --divider: rgba(15, 21, 37, .12); --pill: rgba(15, 21, 37, .07); --dot: #cfd2d8; --icon: #8a8f9c;
  border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); background: var(--chrome); }
@media (prefers-color-scheme: dark) { .browser { --chrome: #1d1f25; --divider: rgba(255, 255, 255, .09); --pill: rgba(255, 255, 255, .08); --dot: #3a3e48; --icon: #8e94a2; } }
.browser img { width: 100%; }
.browser .toolbar { position: relative; height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--divider); }
.browser .dots { display: flex; gap: 8px; margin-right: 6px; }
.browser .dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--dot); }
.browser .toolbar svg { width: 18px; height: 18px; flex: none; color: var(--icon); }
.browser .toolbar .right { margin-left: auto; display: flex; gap: 16px; }
.browser .address { position: absolute; left: 50%; top: 9px; transform: translateX(-50%); height: 28px; width: 40%; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; background: var(--pill); font: 400 13px/1 system-ui, -apple-system, BlinkMacSystemFont, sans-serif; color: var(--ink2); }
.browser .address svg { width: 10px; height: 12px; color: var(--icon); }
@media (max-width: 760px) { .browser .toolbar .nav, .browser .toolbar .right { display: none; } .browser .address { width: 56%; } }
@media (max-width: 560px) { .browser .toolbar { height: 32px; padding: 0 10px; } .browser .dots { gap: 5px; } .browser .dots i { width: 8px; height: 8px; } .browser .address { top: 6px; height: 20px; font-size: 11px; } }

/* The pinned tour: the screenshot stays while the steps change */
.tour { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.tour-steps { padding: 0; margin: 0; list-style: none; }
.tour-step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
.tour-step:first-child { min-height: 50vh; justify-content: flex-start; padding-top: 12vh; }
.tour-step:last-child { min-height: 60vh; }
.tour-step h3 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.025em; }
.tour-step p { font-size: 17px; color: var(--ink2); margin: 12px 0 0; max-width: 32ch; }
.tour-step figure { margin: 24px 0 0; }
.tour-media { display: none; position: sticky; top: calc(50vh - min(26vw, 330px) + 28px); }
.tour-media .stack { display: grid; }
.tour-media .stack > * { grid-area: 1 / 1; }

/* Devices, drawn flat */
.devices { display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 22vw, 290px); gap: clamp(24px, 4vw, 56px); align-items: end; }
.phone { border: 9px solid #1b1d22; border-radius: 46px; overflow: hidden; background: #1b1d22; aspect-ratio: 1206 / 2622; }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 37px; }
@media (prefers-color-scheme: dark) { .phone { border-color: #2b2e36; background: #2b2e36; } }
.device-notes { display: flex; gap: 40px; margin-top: 28px; color: var(--ink3); font-size: 14px; }

/* Terminal and chat */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.flip .head { order: 2; }
.split .head { margin: 0; }
.term { border-radius: 14px; overflow: hidden; background: #0f1117; color: #d6dae3; border: 1px solid #1f232c; }
.term .bar { height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border-bottom: 1px solid #1f232c; }
.term .bar i { width: 11px; height: 11px; border-radius: 50%; background: #2a2f3a; }
.term .screen { display: grid; }
.term .screen > * { grid-area: 1 / 1; }
.term .screen img { width: 100%; transition: opacity .6s var(--ease); }
.term .prompt { margin: 0; padding: 18px 20px; background: none; border-radius: 0; font-size: 14px; color: inherit; visibility: hidden; transition: opacity .3s var(--ease); }
.term .p { color: #7f8798; }
.term .c { color: #ffffff; }
.term.typing .prompt { visibility: visible; }
.term.typing img { opacity: 0; }
.term.opened .prompt { opacity: 0; }
.term .cur { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: #d6dae3; }

.chat { border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: var(--panel); display: grid; gap: 14px; min-height: 380px; align-content: start; }
.chat .q { justify-self: end; max-width: 80%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--soft); font-size: 15px; }
.chat .tools { display: grid; gap: 4px; font: 12.5px/1.5 var(--mono); color: var(--ink3); }
.chat .tools span::before { content: "↳ "; }
.chat .a { font-size: 15px; line-height: 1.6; color: var(--ink); max-width: 56ch; }
.chat .a p { margin: 0 0 10px; }
.chat .a b { font-weight: 650; }
.chat .note-small { font-size: 12.5px; color: var(--ink3); margin: 0; }

/* Privacy and the engine */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.facts div { padding: 26px 24px 0 0; }
.facts b { display: block; font-size: clamp(40px, 5vw, 64px); font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.facts span { display: block; margin-top: 10px; color: var(--ink2); font-size: 15px; max-width: 22ch; }
.facts.plain b { font-size: 20px; letter-spacing: -.01em; line-height: 1.3; }
.facts.plain span { max-width: 30ch; }
.facts + .say { margin-top: 28px; }
.run { max-width: 820px; margin: 0 auto; }
.run pre { font-size: 14px; padding: 20px 22px; border-radius: 14px; }
.run p { text-align: center; color: var(--ink3); font-size: 14px; margin-top: 4px; }
.repos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.repos a { display: block; padding: 22px 20px 0 0; color: var(--ink); }
.repos a:hover { text-decoration: none; }
.repos a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.repos b { display: block; font-size: 17px; font-weight: 600; }
.repos span { display: block; margin-top: 6px; color: var(--ink3); font-size: 14px; }
.home .last { padding-bottom: clamp(96px, 12vw, 160px); }

/* Motion */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js [data-reveal="right"] { transform: translateX(40px); }
  .js [data-reveal].shown { opacity: 1; transform: none; }
  .js [data-reveal][data-delay="1"] { transition-delay: .08s; }
  .js [data-reveal][data-delay="2"] { transition-delay: .16s; }
  .js .tour-media .stack > * { transform: scale(.985); transition: opacity .5s var(--ease), transform .6s var(--ease); }
  .js .tour-media .stack > .on { transform: none; }
  .js .chat .w { opacity: 0; transition: opacity .4s var(--ease); }
  .js .chat .w.on { opacity: 1; }
  @supports (animation-timeline: view()) {
    .js .hero-shot { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .js .devices .window, .js .devices .mac { animation: slide-l linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .js .devices .phone { animation: slide-r linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@keyframes settle { from { transform: scale(.92) translateY(24px); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes slide-l { from { transform: translateX(-48px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slide-r { from { transform: translateX(48px) translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
.js .tour-media .stack > * { opacity: 0; }
.js .tour-media .stack > .on { opacity: 1; }

/* With the script, wide screens pin the screenshot and drop the copies inside the steps */
@media (min-width: 900px) {
  .js .tour-media { display: block; }
  .js .tour-step figure { display: none; }
  .js .tour-step { opacity: .35; transition: opacity .5s var(--ease); }
  .js .tour-step.on { opacity: 1; }
}
@media (max-width: 899px) {
  .tour { grid-template-columns: minmax(0, 1fr); }
  .tour-step, .tour-step:first-child, .tour-step:last-child { min-height: 0; padding: 0 0 56px; }
  .devices, .split, .split.flip { grid-template-columns: minmax(0, 1fr); }
  .split.flip .head { order: 0; }
  .devices .phone { max-width: 240px; justify-self: center; }
  .facts, .repos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts div, .repos a { padding-bottom: 24px; }
}
@media (max-width: 560px) {
  .facts span { font-size: 14px; }
}

/* Pricing */
.pricing .price-head { padding-top: clamp(64px, 10vw, 128px); }
.pricing h1 { font-size: clamp(44px, 6.4vw, 76px); letter-spacing: -.045em; line-height: 1; font-weight: 700; }
.cta.left { justify-content: flex-start; }
.plans-wrap { padding-top: clamp(56px, 7vw, 96px) !important; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plans-line { margin: 22px 0 0; font-size: 15px; font-weight: 550; color: var(--ink); max-width: 70ch; }
.plans-note { margin: 8px 0 0; font-size: 14px; color: var(--ink3); max-width: 70ch; }
.plan { border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; min-height: 340px; }
.plan h3 { font-size: 18px; letter-spacing: -.01em; }
.plan .price { font-size: 30px; font-weight: 700; letter-spacing: -.03em; margin: 14px 0 6px; }
.plan .what { color: var(--ink2); font-size: 14px; }
.plan ul { list-style: none; padding: 0; margin: 8px 0 0; font-size: 14px; color: var(--ink2); }
.plan li { padding: 7px 0; border-top: 1px solid var(--line2); }
.plan .links { margin: auto 0 0; padding-top: 18px; display: flex; gap: 18px; font-weight: 550; }
.plan.free { border-color: var(--ink); }
.plan .tag { margin: 14px 0 0; font-weight: 600; font-size: 14px; color: var(--accent); }
.plan h3 .sub { font-weight: 500; color: var(--ink3); font-size: 15px; }
.plan .price-cta { margin: 14px 0 10px; }
.plan .price-cta .btn, .plan .links .btn { height: 38px; padding: 0 16px; font-size: 14px; }
html { scroll-padding-top: 80px; }
.ask { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.form .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.form .wide { grid-column: 1 / -1; }
.form label { display: grid; gap: 6px; font-size: 14px; font-weight: 550; color: var(--ink); }
.form .req { font-weight: 400; color: var(--ink3); font-size: 12px; }
.form input[type="text"], .form input[type="email"], .form select, .form textarea { font: inherit; font-weight: 400; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; }
.form textarea { resize: vertical; min-height: 110px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.form small { font-weight: 400; color: var(--ink3); font-size: 12px; }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--ink2); }
.form .check input { margin-top: 4px; accent-color: var(--accent); }
.form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .state.err { color: var(--accent); font-size: 14px; margin: 0; }
.form .state.ok { border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.form .state.ok h3 { font-size: 22px; margin-bottom: 6px; }
.form .state.ok p { margin: 0; color: var(--ink2); }
.form .nojs { margin: 0; color: var(--ink2); font-size: 14px; }
html:not(.js) .form button[type="submit"] { display: none; }
.form button[disabled] { opacity: .6; cursor: wait; }
.form button { cursor: pointer; font: inherit; font-weight: 600; }

/* A page of prose */
.prose { max-width: 720px; }
.prose h1 { font-size: clamp(40px, 5.6vw, 64px); letter-spacing: -.04em; line-height: 1.02; font-weight: 700; }
.prose h2 { font-size: 22px; letter-spacing: -.02em; margin: 44px 0 10px; max-width: none; }
.prose p { color: var(--ink2); font-size: 16px; line-height: 1.65; }
.prose .say { margin-bottom: 8px; }
@media (max-width: 899px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .ask { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .plans, .form .fields { grid-template-columns: minmax(0, 1fr); }
  .plan { min-height: 0; }
}

/* Feature pages */
.feature .f-hero { padding-top: clamp(64px, 10vw, 128px); }
.feature .eyebrow { font-size: 15px; font-weight: 600; color: var(--accent); margin: 0 0 14px; }
.feature .f-hero h1 { font-size: clamp(44px, 6.6vw, 80px); letter-spacing: -.045em; line-height: 1; font-weight: 700; max-width: 14ch; }
.feature .f-hero .say { max-width: 40ch; }
.feature .f-hero .shot-wrap { margin-top: clamp(40px, 6vw, 72px); }
.feature .f-hero .cta { justify-content: flex-start; }
.feature .row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.feature .row.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature .row.flip > :first-child { order: 2; }
.feature .row.stack { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); }
.feature .row h2 { font-size: clamp(30px, 3.8vw, 44px); max-width: 16ch; }
.feature .row .say { max-width: 38ch; }
.feature ul.points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; color: var(--ink2); font-size: 16px; }
.feature ul.points li { padding-left: 22px; position: relative; }
.feature ul.points li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--accent); }
.how { counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.how.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.how > div { counter-increment: step; border-top: 1px solid var(--line); padding-top: 20px; min-width: 0; }
.how h3 { font-size: 17px; letter-spacing: -.01em; margin-bottom: 8px; }
.how h3::before { content: counter(step); display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 700; vertical-align: 2px; }
.how p { color: var(--ink2); font-size: 15px; }
.how pre { font-size: 12.5px; }
.next { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.next a { display: block; padding: 20px 20px 0 0; color: var(--ink); }
.next a:hover { text-decoration: none; }
.next a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.next b { display: block; font-size: 16px; font-weight: 600; }
.next span { display: block; margin-top: 4px; color: var(--ink3); font-size: 14px; }
.docs-link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: clamp(48px, 6vw, 80px); }
.docs-link b { font-size: 20px; letter-spacing: -.02em; font-weight: 650; }
.docs-link a { font-weight: 550; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.code-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); }
.code-card .label { font-size: 12px; font-weight: 600; color: var(--ink3); padding: 10px 14px; border-bottom: 1px solid var(--line2); }
.code-card pre { margin: 0; border-radius: 0; background: var(--raise); font-size: 12.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chips code { font-size: 13px; padding: 4px 9px; }
kbd { display: inline-block; min-width: 26px; padding: 2px 7px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--panel); font: 600 12.5px/1.4 var(--mono); color: var(--ink); text-align: center; }
.copy-row { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--raise); }
.copy-row pre { margin: 0; flex: 1; border-radius: 0; background: none; font-size: 13.5px; }
.copy-row button { border: 0; border-left: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 600 13px var(--sans); padding: 0 16px; cursor: pointer; }
.copy-row button:hover { background: var(--soft); }
html:not(.js) .copy-row button { display: none; }

/* The terminal showcase */
.player { border-radius: 14px; overflow: hidden; background: #0f1117; border: 1px solid #1f232c; container-type: inline-size; }
.player .bar { height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border-bottom: 1px solid #1f232c; }
.player .bar i { width: 11px; height: 11px; border-radius: 50%; background: #2a2f3a; }
.player .bar span { margin: 0 auto; transform: translateX(-24px); color: #7f8798; font: 500 12px var(--sans); }
.player .scr { margin: 0; padding: 2cqw 2.4cqw; background: none; border-radius: 0; color: #d6dae3; font: calc(95cqw / 72.4)/1.13 var(--mono); white-space: pre; overflow: hidden; font-variant-ligatures: none; }
.player .scr .s1, .player .scr .s2 { color: #e0485f; }
.player .scr .s1, .player .scr .s3, .player .scr .s4 { font-weight: 700; }
.player .scr .s3, .player .scr .s5 { color: #fff; background: #c8304a; }
.player .scr .p { color: #7f8798; }
.player .scr .c { color: #fff; }
.player .scr .cur { background: #d6dae3; color: #0f1117; }
.keys { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; color: var(--ink3); font-size: 14px; min-height: 30px; }
.keys .now { color: var(--ink); }
.keys .step { display: inline-flex; align-items: center; gap: 8px; transition: color .3s var(--ease); }
.player-ctl { display: flex; gap: 10px; margin-top: 14px; }
.player-ctl button { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 18px; height: 34px; padding: 0 14px; font: 600 13px var(--sans); cursor: pointer; }
html:not(.js) .player-ctl { display: none; }

@media (max-width: 899px) {
  .feature .row, .feature .row.flip { grid-template-columns: minmax(0, 1fr); }
  .feature .row.flip > :first-child { order: 0; }
  .how, .how.two, .duo { grid-template-columns: minmax(0, 1fr); }
  .next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .next a { padding-bottom: 20px; }
}
.play-wrap { padding-top: clamp(40px, 5vw, 64px) !important; }
.note-under { color: var(--ink3); font-size: 13px; margin: 10px 0 0; }
.term-static { border-radius: 14px; overflow: hidden; background: #0f1117; border: 1px solid #1f232c; min-width: 0; }
.term-static .sheet { margin: 0; padding: 18px 20px; background: none; border-radius: 0; color: #d6dae3; font-size: 12.5px; line-height: 1.7; overflow-x: auto; }
.term-static .p { color: #7f8798; }
.term-static .c { color: #fff; }
.term-shot { background: #0f1117; border-color: #1f232c; }
.keymap p { line-height: 2.2; }
@media (max-width: 560px) { .player-ctl { margin-top: 10px; } .keys { font-size: 13px; gap: 8px 14px; } }
.more + .more { margin-left: 22px; }
.player .scr { height: calc(34 * 1.13em); box-sizing: content-box; }
.feature .row > *, .copy-row pre, .code-card { min-width: 0; }
main.home { overflow-x: clip; }

/* Legal pages */
.legal ul { color: var(--ink2); font-size: 16px; line-height: 1.65; padding-left: 22px; margin: 0 0 14px; }
.legal li { margin: 4px 0; }
.legal .updated { font-size: 14px; color: var(--ink3); }
mark.todo { background: var(--warn); color: var(--bg); padding: 0 4px; border-radius: 4px; font: 600 13px/1.6 var(--mono); }
.start { text-align: left; }
.start .step-label { font-size: 15px; font-weight: 650; color: var(--ink); margin: 0 0 8px; text-align: left; }
.start .step-note { font-size: 14px; color: var(--ink3); margin: 8px 0 26px; text-align: left; }
.run .more-line { text-align: center; }

/* Why the cluster: five short reasons, a comparison, one plain line */
.cluster { margin-top: clamp(48px, 6vw, 72px); }
.cluster .cluster-h { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.03em; max-width: none; margin-bottom: 16px; }
.cluster .why { list-style: none; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 28px; }
.cluster .why li { font-size: 15px; line-height: 1.55; color: var(--ink2); padding-top: 12px; border-top: 1px solid var(--line); }
.cluster .why b { color: var(--ink); font-weight: 650; }
.compare { display: table; width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 0; overflow: visible; }
.compare thead, .compare tbody { display: table-header-group; }
.compare tbody { display: table-row-group; }
.compare th, .compare td { text-align: left; padding: 11px 16px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-size: 15px; font-weight: 650; color: var(--ink); text-transform: none; letter-spacing: 0; }
.compare thead th span { display: block; font-size: 13px; font-weight: 500; color: var(--ink3); }
.compare tbody th { font-size: 14.5px; font-weight: 600; color: var(--ink); width: 22%; letter-spacing: 0; text-transform: none; }
.compare td { color: var(--ink2); width: 39%; }
.cluster .same { margin: 22px 0 6px; font-size: 17px; font-weight: 600; color: var(--ink); }
.cluster .cluster-note { font-size: 14px; color: var(--ink3); margin: 0; }
.pricing .cluster .cluster-note { display: none; }
@media (max-width: 640px) {
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare thead { display: none; }
  .compare tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .compare th, .compare td { border: 0; padding: 3px 0; }
  .compare tbody th { font-size: 15px; margin-bottom: 4px; width: auto; }
  .compare td::before { content: attr(data-label) ": "; color: var(--ink3); font-weight: 500; }
}