:root {
  --bg: #0a0a0a;
  --panel: #0d0d0d;
  --fg: #fff;
  --muted: #8c8c8c;
  --body: #a2a2a2;
  --line: #232323;
  --blue: #0080ff;
  --green: #2ecc71;
  --sans: Inter, -apple-system, system-ui, sans-serif;
  --mono: "Geist Mono", "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); font: 400 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, p { margin: 0; font-weight: 400; }
code, pre, .mono { font-family: var(--mono); font-size: 14px; letter-spacing: -0.02em; }
pre { margin: 0; white-space: pre; overflow-x: auto; line-height: 1.45; }
.wrap { max-width: 1248px; margin: 0 auto; padding: 0 24px; }
section { padding: 80px 0 0; scroll-margin-top: 72px; }
.h3 { font-size: 32px; line-height: 1.2; letter-spacing: -0.01em; max-width: 820px; margin-bottom: 56px; }
.h3 > span { color: var(--muted); display: block; }
.h3 b { font-weight: 400; color: var(--fg); }
.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.head .h3 { margin-bottom: 0; }
.head + .grid, .head + .split { margin-top: 56px; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 4px; font-family: var(--mono); font-size: 14px; letter-spacing: -0.02em; white-space: nowrap; }
.btn.blue { background: var(--blue); color: #fff; }
.btn.ghost { border: 1px solid var(--line); color: var(--fg); }
.btn.sm { height: 34px; padding: 0 14px; font-size: 13px; }
.badge { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px; background: var(--bg); }

/* grids */
.grid { display: grid; border: 1px solid var(--line); background: var(--line); gap: 1px; }
.grid > * { background: var(--bg); min-width: 0; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g5 { grid-template-columns: repeat(5, 1fr); }
.card { padding: 32px; display: flex; flex-direction: column; gap: 8px; }
.card h5 { font-size: 20px; line-height: 1.2; }
.card h5.mono { font-size: 18px; }
.card p { color: var(--body); }
.card .art { margin: 24px -32px -32px; overflow: hidden; }
.card .art img { width: 100%; }
.card.bottom { justify-content: flex-end; }
.card.bottom .art { margin: -32px -32px 24px; }

/* nav */
nav { height: 56px; display: flex; align-items: center; justify-content: space-between; }
nav .brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
nav .brand svg { width: 22px; height: 22px; }
nav .links { display: flex; align-items: center; gap: 18px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; margin-left: 28px; }
nav .links::before, nav .links .sep { content: "/"; color: var(--muted); margin-right: 6px; }
nav .left { display: flex; align-items: center; }
nav .right { display: flex; gap: 8px; }

/* hero */
.hero { padding: 96px 0 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; min-height: 600px;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 28px 28px; background-position: center; }
.hero h1 { font-size: 64px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 500; text-wrap: balance; }
.hero .sub { font-size: 20px; line-height: 1.45; color: var(--body); margin: 24px 0 40px; max-width: 460px; text-wrap: balance; }
.hero .cta { display: flex; gap: 12px; }
.win { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
.win + .win { margin-top: 12px; }
.win .tabs { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); font-size: 13px; overflow-x: auto; white-space: nowrap; }
.win .tabs span { padding: 8px 14px; border-radius: 5px; color: var(--body); }
.win .tabs span.on { background: #1a1a1a; color: var(--fg); }
.win .line { padding: 14px 16px; font-family: var(--mono); font-size: 14px; }
.win pre { padding: 20px 16px; font-size: 13px; }
.win .c { color: var(--muted); }
.win .k { color: #7cc2ff; }
.win .g { color: var(--green); }
.win .y { color: #e5c07b; }

/* logo bar */
.logos { border: 1px solid var(--line); }
.logos .kicker { padding: 16px 20px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 13px; color: var(--body); }
.logos .cells { display: grid; grid-template-columns: repeat(4, 1fr); }
.logos .cell { height: 88px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.logos .cell:nth-child(4n) { border-right: 0; }
.logos .cell:nth-child(n+5) { border-bottom: 0; }
.logos .note { padding: 14px 20px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* keys split */
.split { display: grid; grid-template-columns: 416px 1fr; border: 1px solid var(--line); }
.split .list > div { padding: 28px 24px; border-bottom: 1px solid var(--line); }
.split .list > div:first-child { background: #101010; }
.split .list > div:last-child { border-bottom: 0; }
.split .list h5 { font-family: var(--mono); font-size: 17px; margin-bottom: 8px; }
.split .list h5::before { content: "⌘ "; color: var(--muted); }
.split .list p { color: var(--body); }
.split .code { border-left: 1px solid var(--line); background: var(--panel); position: relative; }
.split .code .dots { display: flex; gap: 6px; padding: 14px 12px; }
.split .code .dots i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.split .code .dots i:nth-child(2) { background: #febc2e; }
.split .code .dots i:nth-child(3) { background: #28c840; }
.split .code pre { padding: 8px 20px 32px; font-size: 13px; }
.split .code .k { color: #7cc2ff; } .split .code .g { color: var(--green); } .split .code .y { color: #e5c07b; } .split .code .c { color: var(--muted); }

/* carousel */
.carousel { display: flex; gap: 1px; overflow-x: auto; scroll-snap-type: x mandatory; border: 1px solid var(--line); background: var(--line); scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel .card { flex: 0 0 416px; scroll-snap-align: start; }
.carousel .card .art { display: flex; align-items: center; justify-content: center; height: 300px; margin-bottom: -32px; }
.carousel .card .art img { width: auto; max-height: 100%; }
.arrows { display: flex; gap: 8px; }
.arrows button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--fg); font-size: 18px; cursor: pointer; }

/* parts 2+2 */
.parts { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; }
.parts .tall { grid-row: 1 / 3; }
.parts .tall .art { margin: -32px -32px 24px; }

/* devices */
.devices .big { padding: 32px; }
.devices .big .art { margin: 0 0 32px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.devices .big .art img { width: 100%; }
.devices .col { display: flex; flex-direction: column; }
.devices .big h5 { font-size: 20px; margin-bottom: 8px; }
.devices .big p { color: var(--body); max-width: 600px; }
.os { display: flex; gap: 20px; padding: 32px; flex: 1; }
.os img { width: 64px; height: 64px; }
.os h5 { font-size: 18px; margin-bottom: 6px; }
.os p { color: var(--body); }
.getstarted { display: flex; justify-content: space-between; padding: 18px 24px; font: 13px/1.5 var(--mono); color: var(--blue); border: 0; border-top: 1px solid var(--line); margin-top: auto; background: none; cursor: pointer; text-align: left; }
/* Install: the badge floats under the card's right edge, no layout shift; the command in it is selectable when the clipboard is refused */
.devices .col { position: relative; }
.copied { position: absolute; top: calc(100% + 8px); right: 0; padding: 6px 10px; border-radius: 4px; background: var(--fg); color: #000; font: 12px var(--mono); white-space: nowrap; }
.copied code { font: inherit; user-select: all; }

/* terminal */
.term { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); margin-top: 24px; }
.term .dots { display: flex; gap: 6px; padding: 12px; }
.term .dots i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.term .dots i:nth-child(2) { background: #febc2e; }
.term .dots i:nth-child(3) { background: #28c840; }
.term pre { padding: 4px 14px 18px; font-size: 12px; color: var(--body); }
.term .g { color: var(--green); }

/* security chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.chips span { border: 1px solid var(--green); color: var(--green); border-radius: 999px; padding: 10px 14px; font-family: var(--mono); font-size: 12px; }

/* pricing */
.pricing { display: grid; grid-template-columns: 416px 1fr; border: 1px solid var(--line); }
.pricing table { width: 100%; border-collapse: collapse; }
.pricing td { padding: 22px 24px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pricing tr:last-child td { border-bottom: 0; }
.pricing td b { display: block; font-weight: 500; margin-bottom: 4px; }
.pricing td span { color: var(--body); }
.pricing td:last-child { text-align: right; color: var(--body); white-space: nowrap; }
.pricing .right { border-left: 1px solid var(--line); padding: 32px; }
.pricing .right h3 { font-size: 32px; line-height: 1.2; margin-bottom: 16px; }
.pricing .right p { color: var(--body); max-width: 560px; }
.pricing .right p b { color: var(--fg); font-weight: 400; }
.pricing .right .art { margin-top: 32px; opacity: .9; }

/* doctrine */
.quotes .card { flex: 0 0 416px; min-height: 300px; justify-content: space-between; }
.quotes .card .q { font-size: 20px; line-height: 1.4; }
.quotes .card .q::before { content: "“"; display: block; color: var(--green); font-size: 40px; line-height: 1; font-family: Georgia, serif; margin-bottom: 8px; }
.quotes .card .who { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; }
.quotes .card .who i { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; }
.quotes .card .who svg { width: 16px; height: 16px; }

/* format 1+2+2 */
.format { grid-template-columns: 448px 1fr 1fr; grid-template-rows: auto auto; }
.format .tall { grid-row: 1 / 3; }
.format .card .art { margin: 0 0 24px; display: flex; align-items: center; justify-content: center; }
.format .card .art img { width: auto; max-width: 100%; max-height: 190px; }
.format .tall .art img { max-height: 430px; }

/* cta */
.cta-block { display: grid; grid-template-columns: 416px 1fr; border: 1px solid var(--line); margin-top: 96px; }
.cta-block .rows a { display: flex; justify-content: space-between; padding: 26px 28px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 14px; }
.cta-block .rows a:last-child { border-bottom: 0; }
.cta-block .main { display: flex; align-items: center; justify-content: center; gap: 48px; font-size: 44px; letter-spacing: -0.02em; border-left: 1px solid var(--line); border-radius: 0 40px 40px 0; background: var(--panel); }

/* faq */
.faq { display: grid; grid-template-columns: 416px 1fr; gap: 24px; }
.faq .intro p { color: var(--body); margin-top: 12px; max-width: 320px; }
details { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; display: flex; gap: 16px; align-items: center; padding: 18px 0; font-family: var(--mono); font-size: 14px; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; width: 18px; height: 18px; border: 1px solid var(--muted); border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); flex: none; }
details[open] summary::before { content: "−"; }
details p { color: var(--body); padding: 0 0 20px 34px; max-width: 640px; }

/* footer */
footer { margin-top: 96px; border-top: 1px solid var(--line); padding: 48px 0 40px; }
footer .cols { display: grid; grid-template-columns: 416px 1fr; gap: 24px; }
footer .brand { display: flex; align-items: center; align-self: start; gap: 10px; font-size: 20px; font-weight: 500; }
footer .brand svg { width: 22px; height: 22px; }
footer .new { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 13px; }
footer .new .badge { color: var(--blue); border-color: var(--blue); margin-right: 12px; }
footer .links { display: grid; grid-template-columns: repeat(3, 1fr); padding: 40px 0; border-bottom: 1px solid var(--line); }
footer .links h6 { margin: 0 0 16px; font: 400 11px var(--mono); color: var(--muted); text-transform: uppercase; }
footer .links a { display: block; padding: 4px 0; font-size: 15px; }
footer .legal { display: flex; gap: 24px; padding-top: 20px; font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 64px; }
  .hero > div, .split > div, .pricing > div, .grid > * { min-width: 0; }
  .hero h1 { font-size: 44px; }
  nav .right .ghost { display: none; }
  .g3, .g4, .g5, .parts, .format { grid-template-columns: 1fr; }
  .parts .tall, .format .tall { grid-row: auto; }
  .split, .pricing, .cta-block, .faq, footer .cols { grid-template-columns: 1fr; }
  .split .code, .pricing .right, .cta-block .main { border-left: 0; border-top: 1px solid var(--line); }
  .cta-block .main { font-size: 28px; padding: 32px; border-radius: 0; }
  .logos .cells { grid-template-columns: 1fr 1fr; }
  .logos .cell:nth-child(4n) { border-right: 1px solid var(--line); }
  .logos .cell:nth-child(2n) { border-right: 0; }
  .logos .cell:nth-child(n+5) { border-bottom: 1px solid var(--line); }
  .logos .cell:nth-child(n+7) { border-bottom: 0; }
  nav .links { display: none; }
  .carousel .card, .quotes .card { flex-basis: 85vw; }
  footer .links { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px) {
  .hero h1 { font-size: 34px; }
  .hero .sub { font-size: 17px; }
  .hero .cta { flex-wrap: wrap; }
  .hero h1 br, .hero .sub br { display: none; }
  .h3 { font-size: 24px; }
  .head { flex-direction: column; }
  .logos .cells { grid-template-columns: 1fr; }
  .logos .cell { height: auto; min-height: 72px; padding: 14px 16px; border-right: 0; text-align: center; }
  .logos .cell:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--line); }
  .logos .cell:last-child { border-bottom: 0; }
  .badge { white-space: normal; text-align: center; line-height: 1.5; }
  .stats > div { border-right: 0; border-bottom: 1px solid var(--line); }
  pre { font-size: 12px; }
}

/* nav */
nav.sticky { position: sticky; top: 0; z-index: 10; background: var(--bg); }
.btn.icon { padding: 0; width: 34px; justify-content: center; }
.btn.icon svg { display: block; }

/* blocks */
/* logo group (global pick) */
body.logo-b { --m1: #fbbc04; --m2: #34a853; --m3: #4285f4; }
body.logo-c { --m1: #ff5e5b; --m2: #ffb400; --m3: #2ec4b6; }
/* device frames */
.devices-live .frames { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: end; padding: 32px; }
.laptop { border: 1px solid #333; border-radius: 12px; background: #111; padding: 12px 12px 0; }
.laptop .screen { aspect-ratio: 16 / 10; background: #000; border-radius: 6px 6px 0 0; overflow: hidden; }
.laptop .base { height: 14px; margin: 0 -12px; background: #1a1a1a; border-radius: 0 0 12px 12px; border-top: 1px solid #333; }
.handset { width: 300px; height: 620px; border: 1px solid #333; border-radius: 40px; background: #111; padding: 14px; position: relative; }
.handset .screen { width: 100%; height: 100%; border-radius: 28px; background: #000; overflow: hidden; }
.handset.ios::before { content: ""; position: absolute; top: 26px; left: 50%; width: 92px; height: 26px; margin-left: -46px; background: #000; border-radius: 13px; z-index: 2; }
.handset.android::before { content: ""; position: absolute; top: 24px; left: 50%; width: 14px; height: 14px; margin-left: -7px; background: #000; border-radius: 50%; z-index: 2; }
.handset.android { border-radius: 24px; }
.handset.android .screen { border-radius: 14px; }
.devices-live iframe { width: 100%; height: 100%; border: 0; background: #000; }
.devices-live .shot { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.platforms { display: flex; gap: 8px; align-items: center; }
.platforms a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; font-family: var(--mono); font-size: 12px; }
.platforms a.on { border-color: var(--fg); }
.platforms a img { width: 18px; height: 18px; }
/* pricing table */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: var(--line); gap: 1px; }
.plans > div { background: var(--bg); padding: 32px; display: flex; flex-direction: column; gap: 8px; }
.plans > div.hi { background: #0f1a12; }
.plans h5 { font-family: var(--mono); font-size: 13px; color: var(--muted); text-transform: uppercase; }
.plans .amount { font-size: 44px; letter-spacing: -0.03em; line-height: 1; margin: 8px 0 4px; }
.plans .amount small { font-size: 14px; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.plans p { color: var(--body); min-height: 42px; }
.plans ul { margin: 16px 0 24px; padding: 0; list-style: none; }
.plans li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.plans li::before { content: "✓  "; color: var(--green); }
.plans li.no { color: var(--muted); } .plans li.no::before { content: "—  "; color: var(--muted); }
.plans .btn { margin-top: auto; justify-content: center; }
@media (max-width: 1000px) { .devices-live .frames, .plans { grid-template-columns: 1fr; } .handset { margin: 0 auto; } }
/* hero: Daytona's dot grid, fading at the edges */
.hero { background-image: none; position: relative; }
.hero::before { content: ""; position: absolute; inset: -40px 0 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.18) 1.2px, transparent 1.5px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 45%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 70% at 50% 45%, #000 30%, transparent 100%); }
.hero > * { position: relative; }
/* device demo: one row of 36 px pills — journey screens · iOS / Android / Web — then the phone, caption beside it (below on phones) */
.journey { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; scroll-margin-top: 80px; }
.journey .pages { display: flex; gap: 6px; flex-wrap: wrap; }
.journey button, .journey .platforms a { height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--body); font: 13px var(--mono); cursor: pointer; }
.journey .platforms a.on { color: var(--fg); }
.journey .platforms svg { width: 16px; height: 16px; }
.journey button.on { background: var(--fg); color: #000; border-color: var(--fg); }
.journey .sep { width: 1px; height: 24px; background: var(--line); margin: 0 10px; }
/* the frames are the design deck's (www/design/design.css): the Simulator bezel around an iPhone 15 Pro, the emulator skin around a Pixel 8,
   and the emulators' own status bars (design/devices/<device>/status-dark.png) — their height is the safe area the app starts under.
   Scaled with a transform, not zoom: WebKit never zooms an iframe's document, so the app laid out in the shrunken box and left the frame's right and bottom bare. The negative margins shrink the layout box to the scaled size. */
.phone-stage { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: center; padding: 48px 32px; }
.phone-stage .frame { --k: .76; position: relative; overflow: hidden; justify-self: center; width: var(--w); height: var(--h); transform: scale(var(--k)); transform-origin: 0 0; margin: 0 calc(var(--w) * (var(--k) - 1)) calc(var(--h) * (var(--k) - 1)) 0; background: #000; color: #f3f1ec; }
.frame iframe, .frame .shot { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; border: 0; background: inherit; }
.frame .status { position: absolute; top: 0; left: 0; right: 0; z-index: 4; background: 0 0 / 100% 100% no-repeat; }
.frame .home { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 139px; height: 5px; border-radius: 4px; z-index: 7; background: currentColor; opacity: .22; pointer-events: none; }
.frame.ios { --w: 393px; --h: 852px; border-radius: 57px; box-shadow: 0 0 0 9.6px #000, 0 0 0 14.6px #2c2c2c, 0 0 0 15.2px #555, 0 0 0 16.1px #7e7e7e, 0 0 0 16.5px #2a2a2a, 0 0 1.5px 17px rgba(0,0,0,.14), 0 20px 50px rgba(0,0,0,.3); }
.frame.ios iframe, .frame.ios .shot { top: 59px; height: calc(100% - 59px); }
.frame.ios .status { height: 59px; background-image: url(/design/deck/devices/iphone_15_pro/status-dark.png); }
.frame.android { --w: 412px; --h: 915px; background: none; box-shadow: 0 20px 50px rgba(0,0,0,.3); border-image: url(/design/deck/devices/pixel_8/back.webp) 55 58 58 49 fill / 21px 22.1px 22.1px 18.7px / 21px 22.1px 22.1px 18.7px; }
.frame.android iframe, .frame.android .shot { background: #000; top: 51.8px; height: calc(100% - 51.8px); mask: url(/design/deck/devices/pixel_8/mask.png) 0 -51.8px / 412px 915px no-repeat; }
.frame.android .status { height: 51.8px; background-image: url(/design/deck/devices/pixel_8/status-dark.png); mask: url(/design/deck/devices/pixel_8/mask.png) 0 0 / 412px 915px no-repeat; }
.frame.android .home { width: 108px; height: 4px; }
.stage-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
/* App step: three stills of the chosen platform side by side, caption under them; the live frame hides */
.phone-stage .trio { display: none; }
.phone-stage.trio { grid-template-columns: 1fr; justify-items: center; padding: 64px 32px; }
.phone-stage.trio > .frame { display: none; }
.phone-stage.trio:not(.android) .trio.ios, .phone-stage.trio.android .trio.android { display: flex; flex-wrap: wrap; justify-content: center; gap: 56px; }
.phone-stage.trio .stage-foot { align-items: center; text-align: center; margin-top: 16px; }
.phone-stage.trio .caption { max-width: 760px; }
.stage-foot .caption { font-size: 18px; color: var(--body); max-width: 520px; margin: 0; white-space: pre-line; }
@media (max-width: 1000px) { .phone-stage { grid-template-columns: 1fr; justify-items: center; padding: 32px 16px; } .stage-foot { align-items: center; text-align: center; } .journey .sep { display: none; } }

/* extra layouts for variants */
.hero.center { grid-template-columns: 1fr; text-align: center; justify-items: center; min-height: 0; padding: 96px 0 64px; }
.hero.center .sub { margin-left: auto; margin-right: auto; max-width: 620px; }
.hero.center .cta { justify-content: center; }
.hero.tight { min-height: 600px; padding: 96px 0 80px; }
.hero h1 em { font-style: normal; color: var(--muted); }
.hero h1 s { text-decoration: line-through; text-decoration-color: var(--green); text-decoration-thickness: 3px; color: var(--muted); }
.hero .kicker { font-family: var(--mono); font-size: 12px; color: var(--green); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 20px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.stats > div { padding: 28px 24px; border-right: 1px solid var(--line); }
.stats > div:last-child { border-right: 0; }
.stats b { display: block; font-size: 40px; font-weight: 400; letter-spacing: -0.02em; line-height: 1; margin-bottom: 8px; }
.stats span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.compare { border: 1px solid var(--line); }
.compare .row { display: grid; grid-template-columns: 200px 1fr 1fr 1fr; border-bottom: 1px solid var(--line); }
.compare .row:last-child { border-bottom: 0; }
.compare .row > div { padding: 18px 20px; border-right: 1px solid var(--line); color: var(--body); }
.compare .row > div:last-child { border-right: 0; }
.compare .row > div:first-child { font-family: var(--mono); font-size: 13px; color: var(--fg); }
.compare .row.hd > div { font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; padding: 12px 20px; }
.compare .row.hd > div.us { color: var(--green); }
.compare .us { color: var(--fg); }
.compare .no::before { content: "✕  "; color: #e05555; }
.compare .ok::before { content: "✓  "; color: var(--green); }
.two { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.two > div { padding: 40px; }
.two > div:first-child { border-right: 1px solid var(--line); }
.two h4 { font-family: var(--mono); font-size: 12px; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.two ul { margin: 0; padding: 0; list-style: none; }
.two li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 16px; }
.two li:first-child { border-top: 0; }
.two .bad li::before { content: "— "; color: #e05555; }
.two .good li::before { content: "— "; color: var(--green); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.steps.s4 { grid-template-columns: repeat(4, 1fr); }
.steps > div { padding: 32px; border-right: 1px solid var(--line); }
.steps > div:last-child { border-right: 0; }
.steps .n { font-family: var(--mono); font-size: 40px; color: var(--green); line-height: 1; margin-bottom: 20px; }
.steps h5 { font-size: 20px; margin-bottom: 8px; }
.steps p { color: var(--body); }
.manifesto { border: 1px solid var(--line); }
.manifesto > div { display: grid; grid-template-columns: 80px 1fr; padding: 28px 32px; border-bottom: 1px solid var(--line); font-size: 22px; line-height: 1.35; letter-spacing: -0.01em; }
.manifesto > div:last-child { border-bottom: 0; }
.manifesto > div span { font-family: var(--mono); font-size: 13px; color: var(--muted); padding-top: 6px; }
.manifesto > div small { display: block; grid-column: 2; font-size: 14px; color: var(--body); margin-top: 8px; }
.price1 { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.price1 .big { padding: 48px 40px; border-right: 1px solid var(--line); }
.price1 .big b { font-size: 88px; font-weight: 400; letter-spacing: -0.04em; line-height: 1; display: block; }
.price1 .big b small { font-size: 24px; color: var(--muted); letter-spacing: 0; margin-left: 8px; }
.price1 .big p { color: var(--body); margin-top: 20px; max-width: 380px; }
.price1 ul { margin: 0; padding: 24px 40px; list-style: none; }
.price1 li { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
.price1 li:last-child { border-bottom: 0; }
.price1 li span { color: var(--body); }
.toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; padding: 3px; font-family: var(--mono); font-size: 13px; margin-bottom: 24px; }
.toggle span { padding: 8px 14px; border-radius: 4px; color: var(--body); }
.toggle span.on { background: #1a1a1a; color: var(--fg); }
.faqgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.faqgrid > div { background: var(--bg); padding: 28px 32px; }
.faqgrid h5 { font-family: var(--mono); font-size: 14px; margin-bottom: 8px; }
.faqgrid p { color: var(--body); }
.cta-wide { border: 1px solid var(--line); padding: 72px 40px; text-align: center; margin-top: 96px; }
.cta-wide h2 { font-size: 48px; letter-spacing: -0.03em; font-weight: 500; margin-bottom: 16px; }
.cta-wide p { color: var(--body); font-size: 18px; margin-bottom: 32px; }
.cta-wide .cta { display: flex; justify-content: center; gap: 12px; }
.fine, .cta-wide .fine { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 20px 0 0; line-height: 1.7; }
.btn .badge { background: transparent; border-color: currentColor; color: inherit; opacity: .8; margin-left: 4px; }
/* price buttons: the badge names the period, inside (.cta) or under (.plans2 .plan) the button */
.plans2 { display: flex; gap: 12px; justify-content: center; align-items: start; }
.plans2 .plan { display: grid; gap: 10px; justify-items: center; }
.plans2 .plan .btn { min-width: 132px; justify-content: center; font-size: 16px; }
.plans.mini, .plans.two-plans { grid-template-columns: 1fr 1fr; }
.plans.mini { max-width: 560px; margin: 0 auto; text-align: left; }
.plans.mini > div { padding: 24px; }
.plans.mini .amount { font-size: 36px; }
.plans h5 .badge { text-transform: none; margin-left: 8px; vertical-align: middle; }
.compare.big .row { grid-template-columns: 180px 1.3fr repeat(5, 1fr); }
.compare.big .row > div { font-size: 13px; padding: 12px 14px; }
.compare.big .row.hd > div { font-size: 11px; }
.stats.market b { font-size: 28px; }
@media (max-width: 1000px) { .plans.mini, .plans.two-plans, .stats.market { grid-template-columns: 1fr !important; } .compare.big .row { grid-template-columns: 1fr 1fr; } .compare.big .row > div:first-child { grid-column: 1 / -1; padding-bottom: 0; } }
.phone { width: 260px; height: 520px; border: 1px solid #333; border-radius: 36px; background: #111; margin: 0 auto; padding: 18px 14px; display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.phone .bar { font-family: var(--mono); font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; }
.phone .mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; align-content: start; }
.phone .mosaic i { aspect-ratio: 1; background: #1e1e1e; }
.phone .mosaic i:nth-child(3n) { background: #262626; }
.phone .mosaic i:nth-child(5n) { background: #2a2f2a; }
.phone .q { font-family: var(--mono); font-size: 11px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; color: var(--fg); margin-bottom: 8px; }
.phone .q b { color: var(--green); font-weight: 400; }
@media (max-width: 1000px) { .stats, .two, .steps, .steps.s4, .price1, .faqgrid { grid-template-columns: 1fr; } }
/* phones: the label on its own line, the three offers side by side under it; the header keeps just the three names */
@media (max-width: 700px) {
  .compare .row { grid-template-columns: repeat(3, 1fr); }
  .compare .row > div { padding: 12px 10px; font-size: 13px; line-height: 1.4; }
  .compare .row > div:first-child { grid-column: 1 / -1; padding-bottom: 0; border-right: 0; font-size: 12px; color: var(--muted); }
  .compare .row.hd > div:first-child { display: none; }
  .compare .row.hd > div { padding: 10px; font-size: 11px; }
}
/* hero sub: underlined section links (OpenRouter's "Better prices, better uptime") */
.hero .sub a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }
.hero .sub a:hover { text-decoration-color: currentColor; }
.hero .sub .amp { color: rgba(255,255,255,.35); } /* joins the sub to the h1, as light as the underlines */
/* section body: a few short sentences, one per line */
.lines { font-size: 20px; line-height: 1.55; color: var(--body); max-width: 760px; }
/* wish: one input, one button; a GET form into GitHub's new-issue page */
.wish { display: flex; gap: 8px; max-width: 620px; }
.wish input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--fg); font: 15px var(--sans); -webkit-appearance: none; appearance: none; }
.wish input::placeholder { color: var(--muted); }
.wish input:focus { outline: 0; border-color: var(--fg); }
button.btn { border: 0; cursor: pointer; }
.devices-live .h3 { margin-bottom: 40px; }
@media (max-width: 600px) { .lines { font-size: 17px; } .wish { flex-direction: column; } .wish input { flex: none; } }