@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #f8f8f6;
  --card: #ffffff;
  --line: #ecebe7;
  --line-soft: #f0efeb;
  --navy: #1d2a37;
  --ink: #111c29;
  --text: #3f4652;
  --muted: #6b727d;
  --faint: #9aa0a8;
  --accent: #8a6a55;
  --accent-soft: #f2eeea;
  --cream: #f4efe8;
  --ok: #2f9e5f;
  --warn: #eba33b;
  --bad: #e5484d;
  --shadow-sm: 0 1px 2px rgba(17, 28, 41, .04), 0 4px 12px rgba(17, 28, 41, .045);
  --shadow: 0 1px 2px rgba(17, 28, 41, .04), 0 8px 24px rgba(17, 28, 41, .05);
  --shadow-lg: 0 2px 4px rgba(17, 28, 41, .04), 0 24px 60px rgba(17, 28, 41, .10);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden makes body a scroll container, which would stop
     the sticky header from sticking. */
  overflow-x: clip;
}
/* Section links land below the sticky header rather than under it. */
html { scroll-padding-top: 96px; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
svg { display: block; }
.sprite { position: absolute; }

.wrap { max-width: 1328px; margin: 0 auto; padding: 0 24px; }

/* ---------- shared type ---------- */
.eyebrow {
  color: var(--accent);
  font-size: 14px;
  line-height: 19.5px;
  font-weight: 600;
  letter-spacing: .085em;
  text-transform: uppercase;
}
h1, h2, h3 { color: var(--ink); font-weight: 600; letter-spacing: -.035em; }
.h2-xl { font-size: 46.5px; line-height: 58.5px; }
.h2-lg { font-size: 47px; line-height: 58px; }
.h2-md { font-size: 38px; line-height: 47px; }
.h2-sm { font-size: 32.5px; line-height: 43.5px; }
.h2-sm2 { font-size: 33px; line-height: 48px; }
.h2-cta { font-size: 40.5px; line-height: 51.5px; color: #fff; }
.body-md { font-size: 18px; line-height: 29px; color: var(--text); }
.body-sm { font-size: 17px; line-height: 27px; color: var(--muted); }

.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 10px;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: background-color .15s, box-shadow .15s;
}
.btn-dark { background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(17, 28, 41, .2), 0 6px 16px rgba(17, 28, 41, .14); }
.btn-dark:hover { background: #0f1a26; }
.btn-light { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); }
.btn-light:hover { border-color: #dcdad4; }
.btn-cream { background: var(--cream); color: var(--ink); }
.btn-cream:hover { background: #fff; }
.btn-outline { color: #fff; border: 1.5px solid rgba(255, 255, 255, .75); }
.btn-outline:hover { background: rgba(255, 255, 255, .08); }
.btn-sm { height: 44px; padding: 0 20px; font-size: 16px; border-radius: 8px; gap: 10px; }
.btn-lg { height: 64px; padding: 0 36px; font-size: 19px; }
.btn-md { height: 59px; padding: 0 34px; font-size: 18px; }
.btn .ico { width: 17px; height: 17px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(248, 248, 246, .92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}
.header-inner { position: relative; height: 84px; display: flex; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 16px; }
.header-inner > .brand { margin-left: -4px; }
.brand-mark {
  display: block; width: 48px; height: 48px; border-radius: 5px;
  box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(17, 28, 41, .12);
}
.brand-mark.big { width: 54px; height: 54px; border-radius: 5.5px; }
.brand-word { color: var(--accent); font-size: 17px; font-weight: 700; letter-spacing: .12em; }
.main-nav { position: absolute; left: 339px; display: flex; gap: 44px; }
.main-nav a { font-size: 15.5px; color: #3d4450; }
.main-nav a:hover, .signin:hover { color: var(--ink); }
.header-actions { margin-left: auto; margin-right: -5px; display: flex; align-items: center; gap: 30px; }
.signin { font-size: 15.5px; color: #3d4450; }
.header-actions .btn-sm { width: 159px; }

/* ---------- hero ---------- */
.hero { padding: 41px 0 50px; }
.hero-grid { display: grid; grid-template-columns: 1fr 698px; gap: 40px; align-items: start; }
.hero-copy { padding-top: 0; margin-left: -3px; }
.hero .eyebrow { margin-top: 5px; font-size: 15px; letter-spacing: .1em; }
.hero h1 {
  margin-top: 14px;
  font-size: 68px;
  line-height: 76px;
  letter-spacing: -.038em;
}
.lead { margin-top: 19.5px; max-width: 540px; font-size: 21px; line-height: 33px; color: var(--text); }
.hero-cta { display: flex; gap: 30px; margin-top: 30px; }
.hero-cta .btn-dark { width: 258px; }
.hero-cta .btn-light { width: 202px; }
.trust-points { display: flex; gap: 31px; margin-top: 38px; font-size: 13px; line-height: 20px; color: var(--muted); white-space: nowrap; }
.trust-points li { display: flex; align-items: center; gap: 10px; }
.trust-points .ico { width: 19px; height: 19px; stroke-width: 1.6; color: var(--accent); }

/* app screenshot */
.app-shot {
  display: grid; grid-template-columns: 127px 1fr;
  width: 700px; height: 628px;
  margin: -7px -7px 0 auto;
  padding: 8px 0 6px 10px;
  background: var(--card);
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.app-side { background: var(--navy); padding: 14px 11px; border-radius: 12px 0 0 12px; }
.app-logo { display: block; width: 44px; height: 44px; margin: 0 0 17px 20px; }
.app-side li {
  display: flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 9px; margin-bottom: 4.3px;
  border-radius: 7px;
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
}
.app-side li.on { background: rgba(255, 255, 255, .1); color: #fff; }
.app-side li svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.app-main { padding: 18.5px 14px 0 26px; }
.app-top { display: flex; align-items: center; gap: 10px; height: 31px; padding-left: 6px; }
.app-project { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--ink); }
.app-project svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.app-project .chev { width: 13px; height: 13px; color: var(--muted); margin-left: -2px; }
.app-last { margin-left: auto; font-size: 11.5px; color: var(--faint); }
.app-run { display: inline-flex; align-items: center; justify-content: center; width: 87px; height: 33px; background: var(--navy); color: #fff; font-size: 11.5px; border-radius: 7px; margin-left: 16px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 19px; margin-top: 20.5px; }
.stat { height: 77px; background: #fff; border-radius: 10px; padding: 7px 18px 0; box-shadow: var(--shadow-sm); }
.stat b { display: block; color: var(--ink); font-size: 26px; font-weight: 500; letter-spacing: -.02em; line-height: 30px; }
.stat span { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--muted); }
.si { width: 11px; height: 11px; flex: none; }
.si-run { width: 14px; height: 14px; flex: none; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.big { width: 12px; height: 12px; }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.bad { background: var(--bad); }

.runs { height: 198px; margin-top: 20px; background: #fff; border-radius: 10px; padding: 6px 17px 0 0; box-shadow: var(--shadow-sm); overflow: hidden; }
.runs-head { display: flex; justify-content: space-between; align-items: center; height: 26px; margin-bottom: 6px; padding-left: 17px; }
.runs-head b { font-size: 15px; font-weight: 500; color: var(--ink); }
.runs-head span { font-size: 11.5px; color: var(--muted); }
.run {
  display: grid; grid-template-columns: 44px 255px 20px 1fr 34px; align-items: center;
  height: 31.5px; font-size: 13px; color: var(--text);
}
.run:nth-of-type(even) { background: #fafaf9; }
.run > :first-child { justify-self: start; margin-left: 16px; }
.ring { width: 14px; height: 14px; border-radius: 50%; border: 2.4px solid var(--ok); }
.ring.idle { border-color: #3f4652; }
.run-st { display: contents; color: var(--faint); }
.run-st > * { justify-self: start; }
.run-st.bad { color: var(--bad); }
.run-t { text-align: right; color: var(--faint); font-size: 11.5px; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2.4px dotted #3f4652; }

.devices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 19px; margin-top: 18px; }
.device { height: 150px; background: #fff; border-radius: 10px; padding: 10px 0 0; box-shadow: var(--shadow-sm); }
.device-ic { display: flex; align-items: center; gap: 8px; height: 17px; margin: 1px 0 12px 12px; font-size: 11px; color: var(--faint); white-space: nowrap; }
.device-ic svg { width: 17px; height: 17px; flex: none; }
.device-ic svg[viewBox="0 0 24 24"] { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.thumb {
  display: block; height: 61px; margin: 0;
  background: #fff; border: 3px solid var(--navy); border-top-width: 6px; border-radius: 3px;
  padding: 4px 6px 0 18px; position: relative;
  overflow: hidden;
}
.thumb::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: #eef0f2; }
.thumb i { display: block; height: 3px; background: #d5d8dc; border-radius: 1px; margin-bottom: 5px; }
.thumb i:nth-child(1) { width: 60%; background: #9aa0a8; }
.thumb i:nth-child(2) { width: 88%; box-shadow: 0 8px 0 #e3e5e8, 0 16px 0 #e3e5e8; }
.thumb i:nth-child(3) { display: none; }
.thumb.phone { display: grid; place-items: center; padding: 0; background: var(--navy); border: 0; }
.thumb.phone::before { display: none; }
.thumb.phone em { width: 38px; height: 54px; margin-top: 12px; background: #f4f5f6; border-radius: 7px; }
.device b { display: block; margin: 5px 0 0 12px; font-size: 12px; line-height: 17px; font-weight: 500; color: var(--ink); }
.device small { display: block; margin: 1px 0 0 12px; font-size: 10.5px; line-height: 15px; color: var(--faint); }

.app-foot { display: grid; grid-template-columns: 298px 1fr; gap: 11px; height: 49px; margin-top: 17px; }
.exploring { display: flex; align-items: center; gap: 12px; padding: 0 18px; background: #f3f3f1; border-radius: 10px; font-size: 12.5px; color: var(--text); }
.exploring svg { width: 16px; height: 16px; fill: var(--ink); }
.discovering { display: block; background: #fff; border-radius: 10px; padding: 7px 14px 0; box-shadow: var(--shadow-sm); }
.discovering small { display: block; font-size: 11.5px; color: var(--text); }
.discovering i { display: block; height: 5px; margin-top: 9px; background: #eceae6; border-radius: 3px; overflow: hidden; }
.discovering em { display: block; width: 56%; height: 100%; background: var(--navy); border-radius: 3px; }

/* ---------- logos ---------- */
.logos { padding: 0 0 31px; border-bottom: 1px solid var(--line-soft); }
.label { font-size: 13px; line-height: 19px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #4a525e; margin-left: -2px; }
.logo-row { display: flex; justify-content: space-between; align-items: center; height: 48px; margin-top: 20px; padding: 0 20px 0 22px; color: #5d646e; }
.lg { display: flex; align-items: center; gap: 8px; font-size: 27px; font-weight: 600; letter-spacing: -.03em; }
.lg svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; }
.lg-1 { font-weight: 700; letter-spacing: -.01em; }
.lg-2 { font-weight: 800; letter-spacing: .02em; font-size: 26px; }
.lg-3 { font-weight: 700; font-size: 30px; letter-spacing: -.05em; }
.lg-4 { font-weight: 450; font-size: 25px; }
.lg-4 svg { fill: currentColor; stroke: #f8f8f6; stroke-width: 1.5; }
.lg-5 { flex-direction: column; gap: 2px; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.lg-5 svg { width: 44px; height: 22px; fill: currentColor; stroke: none; }
.lg-6 { font-weight: 800; font-style: italic; letter-spacing: .04em; }
.lg-7 { font-weight: 700; font-size: 32px; }

/* ---------- challenge ---------- */
.challenge { padding: 32px 0 35px; }
.challenge-grid { display: grid; grid-template-columns: 1fr 1px 519px; gap: 0 49px; align-items: start; }
.challenge-grid::before { content: ""; grid-column: 2; grid-row: 1; width: 1px; height: 311px; margin-top: 3px; background: var(--line); }
.challenge-copy { grid-column: 1; grid-row: 1; padding-top: 10px; }
.challenge-copy .h2-xl { margin-top: 14px; }
.challenge-copy .body-lg { margin-top: 18px; font-size: 22px; line-height: 33px; color: var(--text); }
.pains { grid-column: 3; grid-row: 1; display: grid; gap: 21px; margin-right: -6px; }
.pain {
  display: flex; align-items: center; gap: 30px;
  height: 91px; padding: 0 18px;
  background: var(--card); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(17, 28, 41, .03), 0 6px 18px rgba(17, 28, 41, .035);
}
.pain-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; flex: none; }
.pain-ic svg { width: 33px; height: 33px; fill: none; stroke: #3b2f27; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pain b { display: block; font-size: 19.5px; line-height: 24px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.pain > div > span { display: block; margin-top: 8px; font-size: 16.5px; line-height: 20px; color: var(--muted); }

/* ---------- how it works ---------- */
.how { padding: 20px 0 40.6px; }
.center-head { text-align: center; }
.how .h2-lg { margin-top: 11px; }
.sub { margin-top: 7px; font-size: 20.7px; line-height: 30px; color: var(--text); }
.steps { display: grid; grid-template-columns: 342px 345px 339px 1fr; margin: 32px -30px 0 -3px; }
.step { position: relative; min-height: 192px; padding: 0 20px 0 43px; }
.step::before { content: ""; position: absolute; left: 0; top: 74px; width: 1px; height: 110px; background: var(--line); }
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 26px; left: 191px; width: 147px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='147' height='12' viewBox='0 0 147 12'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23d9d2ca' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23cfc6bd'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 6H144' stroke='url(%23g)' stroke-width='1.2'/%3E%3Cpath d='M139 2l5 4-5 4' fill='none' stroke='%23cfc6bd' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
}
.num { position: absolute; left: -11px; top: 50px; font-size: 14px; line-height: 21px; color: var(--muted); }
.step-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); }
.step-ic svg { width: 34px; height: 34px; fill: none; stroke: #6f5343; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.step h3 { margin-top: 14px; font-size: 21px; line-height: 26.4px; font-weight: 500; letter-spacing: -.02em; }
.step p { margin-top: 12px; font-size: 15.5px; line-height: 26.2px; color: var(--muted); white-space: nowrap; }

/* ---------- feature panels ---------- */
.feature { padding: 0 0 22px; }
#discovery { padding-bottom: 26px; }
.panel {
  background: #f9f9f8;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(17, 28, 41, .025), 0 10px 30px rgba(17, 28, 41, .03);
}
.feature-copy .btn { margin-top: 25px; }

.discovery {
  display: grid; grid-template-columns: 1fr 670px; align-items: start;
  margin: 0 -32px; padding: 28px 0 0 34px; height: 357px;
  background: #fcfcfc;
}
.discovery .feature-copy { padding-top: 10px; }
.discovery .h2-md { margin-top: 14px; font-size: 36px; line-height: 43.3px; }
.discovery .body-md { margin-top: 10px; font-size: 17.4px; line-height: 32px; }
.discovery .btn { margin-top: 22px; }
.explore {
  position: relative; height: 329px;
  background: #fff; border-radius: 16px 16px 16px 16px;
  box-shadow: 0 1px 2px rgba(17, 28, 41, .04), 0 10px 30px rgba(17, 28, 41, .06);
}
.urlbar { position: absolute; top: 12px; left: 36px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 19px; color: var(--faint); }
.urlbar svg { width: 15px; height: 15px; fill: none; stroke: #4a525e; stroke-width: 1.8; }
.spark { position: absolute; top: 2px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; }
.spark svg { width: 17px; height: 17px; fill: var(--accent); }
.pages {
  position: absolute; top: 56px; left: 27px; width: 190px; height: 243px;
  background: #fff; border-radius: 12px; padding: 14px 0 0 22px;
  box-shadow: 0 1px 2px rgba(17, 28, 41, .04), 0 6px 18px rgba(17, 28, 41, .05);
}
.pages li { display: flex; align-items: center; gap: 18px; height: 47.8px; font-size: 14.5px; color: var(--ink); white-space: nowrap; }
.pages svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pages svg.fill { fill: var(--ink); stroke: none; }
.wires { position: absolute; top: 68px; left: 196px; width: 160px; height: 250px; fill: none; stroke: #e2e0db; stroke-width: 1.2; }
.log {
  position: absolute; top: 56px; right: 26px; width: 332px; height: 243px;
  background: #fff; border-radius: 12px; padding: 16px 22px;
  box-shadow: 0 1px 2px rgba(17, 28, 41, .04), 0 6px 18px rgba(17, 28, 41, .05);
}
.log b { font-size: 14px; line-height: 21px; font-weight: 500; color: var(--ink); }
.log ul { margin-top: 10px; }
.log li { display: flex; align-items: center; gap: 18px; height: 38.3px; font-size: 13.5px; color: var(--muted); }
.log svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.log li.pending svg { stroke: #6b727d; stroke-width: 1.8; }

.split { display: grid; grid-template-columns: 665px 1fr; gap: 54px; align-items: start; }
.split > *, .hero-grid > *, .discovery > *, .challenge-grid > *, .integ-grid > * { min-width: 0; }
.split .feature-copy { padding-top: 20px; }

/* code panel */
.code-panel { height: 352px; margin-left: -30px; padding: 23px 28px 0 29px; }
.tabs { display: flex; gap: 7px; }
.tabs label {
  height: 36px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; font-size: 15px; color: var(--ink); cursor: pointer; user-select: none;
  background: #fff; box-shadow: 0 1px 2px rgba(17, 28, 41, .06), 0 2px 8px rgba(17, 28, 41, .04);
  transition: background-color .15s ease, color .15s ease;
}
.tabs label:hover { background: #f3f4f6; }
.code-panel .tabs label:nth-child(1) { width: 126px; }
.code-panel .tabs label:nth-child(2) { width: 118px; }
.code-panel .tabs label:nth-child(3) { width: 122px; }

/* CSS-only tabs (the page runs with script-src 'none'): a hidden radio per tab,
   its label as the tab, and the matching .pane shown while it is checked. */
.tab-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tabset .pane { display: none; }
.tab-radio:nth-of-type(1):checked ~ .tabs label:nth-child(1),
.tab-radio:nth-of-type(2):checked ~ .tabs label:nth-child(2),
.tab-radio:nth-of-type(3):checked ~ .tabs label:nth-child(3) { background: var(--navy); color: #fff; box-shadow: none; }
.tab-radio:nth-of-type(1):focus-visible ~ .tabs label:nth-child(1),
.tab-radio:nth-of-type(2):focus-visible ~ .tabs label:nth-child(2),
.tab-radio:nth-of-type(3):focus-visible ~ .tabs label:nth-child(3) { outline: 2px solid var(--navy); outline-offset: 2px; }
.tab-radio:nth-of-type(1):checked ~ .pane-1, .tab-radio:nth-of-type(1):checked ~ * .pane-1,
.tab-radio:nth-of-type(2):checked ~ .pane-2, .tab-radio:nth-of-type(2):checked ~ * .pane-2,
.tab-radio:nth-of-type(3):checked ~ .pane-3, .tab-radio:nth-of-type(3):checked ~ * .pane-3 { display: block; }
.tab-radio:nth-of-type(1):checked ~ .browsers.pane-1,
.tab-radio:nth-of-type(2):checked ~ .browsers.pane-2,
.tab-radio:nth-of-type(3):checked ~ .browsers.pane-3 { display: grid; }
.env-ic { width: 34px; height: 34px; fill: none; stroke: var(--navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.code {
  position: relative; height: 252px; margin-top: 14px; padding: 18px 20px 0 31px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(17, 28, 41, .04), 0 8px 22px rgba(17, 28, 41, .06);
}
.code pre { margin: 0; font-family: var(--mono); font-size: 14.6px; line-height: 23.4px; color: #3a414c; white-space: pre; overflow: hidden; }
.ln { display: inline-block; width: 20px; color: #c3c6cb; }
.kw { color: #6d4ad8; }
.fn { color: #2b5bb8; }
.str { color: #a34a6a; }
.prop { color: #6d4ad8; }
.gen-pill {
  position: absolute; right: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 10px;
  height: 33px; padding: 0 16px; border-radius: 8px;
  background: #9b836e; color: #fff; font-size: 12px;
}
.gen-pill svg { width: 14px; height: 14px; fill: #fff; }
.code-panel + .feature-copy .h2-md { margin-top: 12px; }
.code-panel + .feature-copy .body-md { margin-top: 9px; font-size: 19.4px; }

/* browsers panel */
.split-run { grid-template-columns: 1fr 606px; }
.split-run .feature-copy { padding-top: 22px; }
.split-run .h2-md { margin-top: 11px; font-size: 36.6px; }
.split-run .body-md { margin-top: 5px; line-height: 28px; font-size: 19.5px; }
.split-run .btn { margin-top: 22px; }
.browsers-panel { height: 283px; margin-right: -30px; padding: 25px 33px 0 31px; }
.browsers-panel .tabs { margin-left: 12px; }
.browsers-panel .tabs label:nth-child(1) { width: 121px; }
.browsers-panel .tabs label:nth-child(2) { width: 114px; }
.browsers-panel .tabs label:nth-child(3) { width: 150px; }
.browsers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 30px; }
.browser {
  display: flex; flex-direction: column; align-items: center;
  height: 162px; padding-top: 22px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(17, 28, 41, .04), 0 6px 18px rgba(17, 28, 41, .05);
}
.b-ic { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: -4px; }
.b-ic svg { width: 38px; height: 38px; }
.browser b { margin-top: 15px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); }
.browser small { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12px; line-height: 18px; color: var(--faint); }
.browser small + small { margin-top: 4.5px; }

/* debug panel */
.split-debug { grid-template-columns: 748px 1fr; gap: 54px; }
.split-debug .feature-copy { padding-top: 20px; }
.split-debug .h2-md { margin-top: 11px; font-size: 36px; }
.split-debug .body-md { margin-top: 12.5px; line-height: 32.3px; font-size: 18.7px; }
.split-debug .btn { margin-top: 24.5px; }
.debug-panel { height: 421px; margin-left: -30px; padding: 21px 30px 0 30px; }
.debug-head { display: flex; align-items: center; gap: 22px; height: 36px; padding-left: 16px; padding-right: 16px; }
.failed { display: flex; align-items: center; gap: 10px; color: var(--bad); font-size: 15px; }
.debug-head b { font-size: 16.5px; font-weight: 500; color: var(--ink); }
.debug-head small { margin-left: auto; font-size: 14.5px; color: var(--faint); }
.debug-tabs { display: flex; margin-top: 4px; }
.debug-tabs label { flex: none; white-space: nowrap; padding: 10px 22px 7px; font-size: 15.5px; line-height: 23px; color: var(--faint); border-bottom: 2px solid transparent; cursor: pointer; user-select: none; }
.debug-tabs label:first-child { padding-left: 16px; }
.debug-tabs label:hover { color: var(--ink); }
.tab-radio:nth-of-type(1):checked ~ .debug-tabs label:nth-child(1),
.tab-radio:nth-of-type(2):checked ~ .debug-tabs label:nth-child(2),
.tab-radio:nth-of-type(3):checked ~ .debug-tabs label:nth-child(3),
.tab-radio:nth-of-type(4):checked ~ .debug-tabs label:nth-child(4),
.tab-radio:nth-of-type(5):checked ~ .debug-tabs label:nth-child(5) { color: var(--ink); border-bottom-color: var(--ink); }
.tab-radio:nth-of-type(1):focus-visible ~ .debug-tabs label:nth-child(1),
.tab-radio:nth-of-type(2):focus-visible ~ .debug-tabs label:nth-child(2),
.tab-radio:nth-of-type(3):focus-visible ~ .debug-tabs label:nth-child(3),
.tab-radio:nth-of-type(4):focus-visible ~ .debug-tabs label:nth-child(4),
.tab-radio:nth-of-type(5):focus-visible ~ .debug-tabs label:nth-child(5) { outline: 2px solid var(--navy); outline-offset: -2px; }
.debug-panel .debug-pane, .debug-panel .debug-body { display: none; }
.tab-radio:nth-of-type(3):checked ~ .debug-body.pane-3 { display: grid; }
.tab-radio:nth-of-type(4):checked ~ .pane-4,
.tab-radio:nth-of-type(5):checked ~ .pane-5 { display: block; }
.debug-body { display: grid; grid-template-columns: 392px 1fr; gap: 20px; height: 273px; margin-top: 10px; }
.debug-pane {
  height: 273px; margin-top: 10px; padding: 18px 22px; overflow: hidden;
  background: #fff; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(17, 28, 41, .04), 0 8px 22px rgba(17, 28, 41, .05);
}
.bad-text { color: var(--bad); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin: 0; }
.facts dt { font-size: 12px; line-height: 18px; color: var(--faint); }
.facts dd { margin: 2px 0 0; font-size: 15px; line-height: 22px; color: var(--ink); }
.err-box { display: grid; gap: 4px; margin-top: 22px; padding: 12px 14px; border: 1px solid #f3c3c5; border-radius: 8px; background: #fdf5f5; }
.err-box b { font-size: 14px; font-weight: 500; color: var(--ink); }
.err-box span { font-size: 13px; color: var(--bad); }
.debug-logs pre { margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 30px; color: #3a414c; white-space: pre; overflow: hidden; }
.debug-logs .t { display: inline-block; width: 86px; color: #b3b7bd; }
.debug-logs .warn { color: #b7791f; }
.trace { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.trace li { display: grid; grid-template-columns: 170px 1fr 64px; align-items: center; gap: 14px; font-size: 13.5px; color: var(--ink); }
.trace small { text-align: right; font-size: 12px; color: var(--faint); }
.trace .fail span, .trace .fail small { color: var(--bad); }
.trace .skip span { color: var(--faint); }
.trace .bar { display: block; height: 10px; border-radius: 5px; background: #eceae6; }
.trace .bar.ok { background: #9bd3b3; }
.trace .bar.bad { background: #f08a8e; }
.trace .w1 { width: 8%; } .trace .w2 { width: 12%; margin-left: 8%; } .trace .w3 { width: 8%; margin-left: 20%; }
.trace .w4 { width: 72%; margin-left: 28%; } .trace .w5 { width: 100%; opacity: .5; }
.debug-ai b { display: block; font-size: 15.5px; line-height: 23px; font-weight: 600; color: var(--ink); }
.debug-ai p { margin-top: 4px; font-size: 13px; line-height: 21px; color: var(--muted); }
.debug-ai .fix-label { margin: 12px -12px 6px; }
.diff { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 20px; white-space: pre; overflow: hidden; }
.diff .del { color: var(--bad); }
.diff .add { color: #2f7d4f; }
.debug-ai .apply { margin-top: 14px; }
.shot {
  position: relative; overflow: hidden;
  background: #fff; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(17, 28, 41, .04), 0 8px 22px rgba(17, 28, 41, .07);
}
.shot::after { content: ""; position: absolute; inset: auto 0 0; height: 60px; background: linear-gradient(transparent, rgba(255, 255, 255, .9)); }
.shot > * { position: absolute; left: 19px; right: 17px; display: block; }
.shot b { top: 17px; font-size: 12.5px; line-height: 19px; font-weight: 500; color: var(--ink); }
.shot small { top: 57px; font-size: 10px; line-height: 14px; color: var(--ink); }
.shot .field { height: 23px; border: 1px solid #ecebe7; border-radius: 4px; }
.shot .f1 { top: 86px; }
.shot .field.err { top: 119px; height: 31px; border-color: #f08a8e; border-width: 1.5px; }
.shot .err-msg { top: 154px; right: auto; padding: 0 6px; height: 12px; line-height: 10px; border: 1px solid #f3a3a6; border-radius: 4px; font-size: 8px; font-style: normal; color: var(--bad); }
.shot .f3 { top: 181px; }
.shot .field.dim { top: 219px; height: 20px; background: #f3f3f1; border-color: #f3f3f1; }
.ai {
  padding: 13px 20px 0; background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(17, 28, 41, .04), 0 8px 22px rgba(17, 28, 41, .05);
}
.ai b { display: block; font-size: 15.5px; line-height: 23px; font-weight: 600; color: var(--ink); }
.ai p { margin-top: 4px; font-size: 13px; line-height: 21px; color: var(--muted); }
.fix-label { display: flex; align-items: center; height: 32px; margin: 14px -12px 0; padding: 0 12px; background: #f3f3f1; border-radius: 4px; font-size: 14px; color: var(--ink); }
.ai .fix-label + p { margin-top: 0; }
.apply { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; height: 40px; padding: 0 17px; background: var(--navy); color: #fff; border-radius: 7px; font-size: 13.5px; }
.apply .ico { width: 14px; height: 14px; }

/* ---------- integrations ---------- */
.integrations { padding: 37px 0 30px; }
.integ-grid { display: grid; grid-template-columns: 1fr 784px; align-items: start; }
.integrations .h2-sm { margin-top: 12px; }
.integrations .body-sm { margin-top: 5px; }
.tools { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px 12px; max-width: 784px; margin-top: 10px; }
.tools li, .tools a { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; font-size: 13px; line-height: 19.5px; color: var(--muted); white-space: nowrap; }
.tools a { text-decoration: none; transition: color .15s ease; }
.tools a:hover, .tools a:focus-visible { color: var(--ink); }
.tools a:hover .tool, .tools a:focus-visible .tool { box-shadow: 0 1px 2px rgba(17, 28, 41, .06), 0 8px 20px rgba(17, 28, 41, .1); }
.tool {
  width: 74px; height: 70px; border-radius: 12px; background: #fff; display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(17, 28, 41, .04), 0 6px 16px rgba(17, 28, 41, .05);
  transition: box-shadow .15s ease;
}
.tool svg { width: 34px; height: 34px; }

/* ---------- testimonials ---------- */
.testimonials { padding: 41px 0 29px; }
.testimonials .h2-sm2 { margin-top: 9px; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 33px; margin: 15px -20px 0; }
.quote {
  height: 216px; padding: 20px 30px 27px;
  background: var(--card); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(17, 28, 41, .03), 0 8px 24px rgba(17, 28, 41, .045);
  display: flex; flex-direction: column;
}
.quote blockquote { font-size: 17px; line-height: 28.4px; color: #2d3440; max-width: 360px; }
.quote figcaption { display: flex; align-items: center; gap: 18px; margin-top: auto; }
.avatar { width: 50px; height: 50px; border-radius: 50%; background: #6b727d; color: #fff; display: grid; place-items: center; font-size: 18px; font-weight: 500; flex: none; }
.quote b { display: block; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); }
.quote small { display: block; margin-top: 3px; font-size: 15px; line-height: 22.5px; color: var(--faint); }

/* ---------- CTA ---------- */
.cta { padding: 13px 0 18px; }
.cta-box {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 -30px; padding: 38px 44px 41px 43px;
  background: var(--navy); border-radius: 16px;
}
.cta-box::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 560px; height: 120px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='120' viewBox='0 0 560 120'%3E%3Cpath d='M0 120L70 78l38 18 64-52 40 30 52-40 70 54 36-20 60 44 44-26 86 34z' fill='%23ffffff' fill-opacity='.045'/%3E%3Cpath d='M120 120l84-46 40 22 58-36 72 60z' fill='%23ffffff' fill-opacity='.04'/%3E%3C/svg%3E") no-repeat right bottom;
  pointer-events: none;
}
.cta .eyebrow { color: #c8b29e; font-size: 12px; }
.h2-cta { margin-top: 10px; }
.cta-sub { margin-top: 7px; font-size: 19.6px; line-height: 28.5px; color: rgba(255, 255, 255, .88); }
.cta-actions { display: flex; gap: 24px; position: relative; z-index: 1; }
.cta-actions .btn { font-size: 16.5px; border-radius: 8px; }
.cta-actions .btn-outline { border-width: 2px; }
.cta-actions .btn-cream { width: 224px; }
.cta-actions .btn-outline { width: 177px; }

/* ---------- footer ---------- */
.site-footer { padding-top: 24.5px; }
.footer-grid { display: grid; grid-template-columns: 385px 205px 205px 260px 1fr; padding-left: 10px; padding-bottom: 45.8px; }
.footer-brand .brand { gap: 18px; }
.footer-brand .brand-word { font-size: 19px; }
.footer-brand p { margin-top: 11px; font-size: 14px; line-height: 21px; color: var(--muted); }
.fcol { display: flex; flex-direction: column; gap: 8.4px; padding-top: 6.5px; }
.fcol b { font-size: 16.5px; line-height: 24.75px; font-weight: 500; color: var(--ink); margin-bottom: .6px; }
.fcol a { font-size: 16px; line-height: 24px; color: var(--muted); }
.fcol a:hover, .footer-bottom a:hover { color: var(--ink); }
.footer-tag { padding-top: 3.2px; }
.footer-tag p { font-size: 17px; line-height: 31.5px; color: var(--muted); }
.socials { display: flex; gap: 27px; margin-top: 24.6px; }
.socials a { color: #3d4450; }
.socials svg { width: 24px; height: 24px; fill: currentColor; }
.socials a:hover { color: var(--ink); }
.footer-bottom { border-top: 1px solid var(--line-soft); }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; height: 74px; font-size: 14.5px; color: var(--muted); }
.footer-bottom-inner > span { margin-left: -10px; }
.footer-bottom nav { display: flex; gap: 39px; margin-right: -8px; }

/* ---------- responsive ---------- */
@media (max-width: 1360px) {
  .main-nav { position: static; margin-left: 56px; gap: 32px; }
  .hero-grid { grid-template-columns: 1fr 600px; }
  .app-shot { width: auto; height: auto; min-height: 560px; margin: 0; padding-right: 8px; }
  .run { grid-template-columns: 44px 1fr 20px 90px 34px; }
  .discovery, .code-panel, .browsers-panel, .debug-panel, .cta-box, .quotes, .steps { margin-left: 0; margin-right: 0; }
  .footer-grid { padding-left: 24px; }
  .split, .split-run { grid-template-columns: 1fr 1fr; }
  .split-debug { grid-template-columns: 1.2fr 1fr; }
  .discovery { grid-template-columns: 1fr 1fr; gap: 32px; height: auto; padding: 28px; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .step { min-width: 0; }
  .step p { white-space: normal; }
  .step p br { display: none; }
  .step::after { display: none; }
  .integ-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr; }
  .challenge-grid { grid-template-columns: 1fr 1px 460px; }
}

@media (max-width: 1080px) {
  .main-nav { display: none; }
  .hero-grid, .challenge-grid, .discovery, .split, .split-run, .split-debug { grid-template-columns: 1fr; }
  .challenge-grid::before { display: none; }
  .pains { grid-column: 1; grid-row: auto; margin: 36px 0 0; }
  .split > .panel { order: 2; }
  .split { gap: 32px; }
  .code-panel, .browsers-panel, .debug-panel { height: auto; padding-bottom: 28px; }
  .debug-body { height: auto; }
  .ai { padding-bottom: 20px; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .logo-row { flex-wrap: wrap; height: auto; gap: 28px 44px; justify-content: flex-start; }
  .quotes { grid-template-columns: 1fr; }
  .body-lg br, .body-md br, .step p br { display: none; }
  .step p { white-space: normal; }
  .quote { height: auto; min-height: 200px; }
  .cta-box { flex-direction: column; align-items: flex-start; gap: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; row-gap: 36px; }
  .footer-brand, .footer-tag { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .tools { grid-template-columns: repeat(3, 1fr); }
  .header-actions .signin { display: none; }
  .footer-brand .brand-word { display: inline; }
  .header-inner .brand-word { display: none; }
  .hero h1 { font-size: 44px; line-height: 50px; }
  .lead { font-size: 18px; line-height: 29px; }
  .hero-cta { flex-direction: column; gap: 14px; }
  .hero-cta .btn { width: 100%; }
  .trust-points { flex-wrap: wrap; gap: 14px 24px; white-space: normal; }
  .app-shot { grid-template-columns: 1fr; width: auto; height: auto; margin: 0; padding: 8px; }
  .app-main { padding: 16px 8px 8px; }
  .app-side { display: none; }
  .app-last { display: none; }
  .stats, .devices { grid-template-columns: repeat(2, 1fr); }
  .runs { height: auto; padding-bottom: 6px; }
  .run { grid-template-columns: 30px 1fr 18px 70px 24px; }
  .app-foot { grid-template-columns: 1fr; height: auto; }
  .exploring { height: 46px; }
  .discovering { height: 46px; }
  .h2-xl, .h2-lg { font-size: 36px; line-height: 42px; }
  .h2-md, .h2-sm, .h2-sm2, .h2-cta, .discovery .h2-md { font-size: 30px; line-height: 36px; }
  .h2-md br { display: none; }
  .steps { grid-template-columns: 1fr; }
  .step { padding-left: 0; min-height: 0; }
  .step::before, .num { display: none; }
  .explore { height: auto; padding: 60px 16px 16px; display: grid; gap: 16px; }
  .pages, .log { position: static; width: auto; height: auto; }
  .wires { display: none; }
  .browsers { grid-template-columns: repeat(2, 1fr); }
  .debug-body { grid-template-columns: 1fr; }
  .shot { height: 260px; }
  .debug-tabs { overflow-x: auto; }
  .debug-pane { height: auto; min-height: 220px; }
  .debug-logs pre, .diff { overflow-x: auto; }
  .facts { grid-template-columns: 1fr; }
  .trace li { grid-template-columns: 1fr 64px; }
  .trace .bar { display: none; }
  .tabs { flex-wrap: wrap; }
  .code-panel .tabs label, .browsers-panel .tabs label { width: auto; padding: 0 14px; }
  .browsers-panel .tabs { margin-left: 0; }
  .debug-head { flex-wrap: wrap; gap: 8px 16px; height: auto; }
  .debug-head small { margin-left: 0; }
  .code-panel, .browsers-panel, .debug-panel { padding-left: 16px; padding-right: 16px; }
  .code pre { font-size: 12px; overflow-x: auto; }
  .code { height: auto; padding-bottom: 64px; }
  .cta-actions { flex-direction: column; width: 100%; }
  .cta-actions .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom-inner { flex-direction: column; justify-content: center; gap: 10px; height: auto; padding: 20px 24px; }
  .footer-bottom-inner > span { margin-left: 0; }
}


/* ---------- demo video dialog ---------- */
.video-dialog {
  width: min(960px, calc(100vw - 32px)); max-width: none; padding: 0;
  border: 0; border-radius: 16px; background: #000; overflow: visible;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.video-dialog::backdrop { background: rgba(11, 18, 28, .78); }
.video-frame { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; }
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-close {
  position: absolute; top: -44px; right: 0;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; font: 24px/1 var(--sans, inherit); cursor: pointer;
}
.video-close:hover { background: rgba(255, 255, 255, .26); }
.video-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- pricing page ---------- */
.main-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pricing section { scroll-margin-top: 96px; }
.pricing-hero { padding: 72px 0 40px; }
.pricing-hero h1 { margin-top: 14px; font-size: 56px; line-height: 64px; }
.pricing-hero .lead { max-width: 640px; }

.plans-section { padding-bottom: 28px; }
.plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.plan-card {
  display: flex; flex-direction: column; gap: 18px;
  padding: 28px 26px 30px; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm);
}
.plan-card.featured { border: 1.5px solid var(--navy); box-shadow: var(--shadow-lg); }
.plan-head { display: grid; gap: 4px; min-height: 76px; align-content: start; }
.plan-head h2 { font-size: 24px; line-height: 30px; }
.plan-for { font-size: 15px; line-height: 22px; color: var(--muted); }
.plan-badge {
  justify-self: start; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px;
  background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.plan-price { display: flex; align-items: baseline; gap: 8px; }
.plan-price b { font-size: 44px; line-height: 48px; font-weight: 600; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-price span { font-size: 15px; color: var(--muted); }
.plan-yearly { margin-top: -12px; font-size: 13.5px; color: var(--muted); }
.btn-plan { height: 48px; justify-content: center; font-size: 16px; border-radius: 8px; gap: 10px; }
.plan-lead { font-size: 15px; line-height: 23px; color: var(--ink); font-weight: 500; }
.plan-list { display: grid; gap: 10px; }
.plan-list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 22px; }
.plan-list li::before {
  content: ""; position: absolute; left: 1px; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-5' fill='none' stroke='%238a6a55' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.plan-usage { display: grid; gap: 8px; margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--bg); }
.plan-usage div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.plan-usage dt { color: var(--muted); }
.plan-usage dd { margin: 0; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.plan-usage.strong { background: var(--accent-soft); }
.plan-usage.strong dd { font-weight: 600; }
.plan-credit-hint { margin-top: -10px; font-size: 13px; line-height: 19px; color: var(--muted); }
.plan-foot { padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 13.5px; color: var(--muted); }
.plan-subdued { padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 13.5px; line-height: 20px; color: var(--muted); }

.free-infra { padding: 20px 0 28px; }
.free-infra-box {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 30px 34px; border-radius: 16px; background: var(--cream); border: 1px solid #ebe3d8;
}
.free-infra-box h2 { font-size: 26px; line-height: 34px; }
.free-infra-box p { margin-top: 6px; max-width: 760px; font-size: 16.5px; line-height: 26px; }
.free-infra-box .btn { flex: none; }

.usage { padding: 64px 0 24px; }
.usage-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.usage-intro { display: grid; gap: 12px; }
.usage-intro h2 { font-size: 34px; line-height: 43px; }
.usage-intro p:last-child { font-size: 17px; line-height: 27px; color: var(--muted); }
.usage-details, .faq-list { display: grid; gap: 12px; }
.pricing details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0 22px; }
.pricing summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; color: var(--ink);
}
.pricing summary::-webkit-details-marker { display: none; }
.pricing summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--muted); line-height: 1; }
.pricing details[open] summary::after { content: "−"; }
.pricing summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.pricing details > p { padding-bottom: 18px; font-size: 15.5px; line-height: 25px; }
.usage-table { width: 100%; margin-bottom: 20px; border-collapse: collapse; font-size: 15px; }
.usage-table th, .usage-table td { padding: 10px 0; border-top: 1px solid var(--line-soft); text-align: left; }
.usage-table thead th { border-top: 0; font-size: 13px; font-weight: 500; color: var(--muted); }
.usage-table tbody th { font-weight: 400; color: var(--text); }
.usage-table td { text-align: right; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.usage-table thead th:not(:first-child) { text-align: right; }

.compare { padding: 56px 0 24px; }
.compare h2 { font-size: 34px; line-height: 43px; }
.compare-scroll { margin-top: 24px; overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.compare-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; }
.compare-table th, .compare-table td { padding: 14px 20px; border-top: 1px solid var(--line-soft); text-align: left; }
.compare-table thead th { border-top: 0; padding-top: 20px; font-size: 16px; font-weight: 600; color: var(--ink); }
.compare-table tbody th { font-weight: 500; color: var(--ink); }
.compare-table td { color: var(--text); font-variant-numeric: tabular-nums; }
.compare-table .featured-col { background: var(--accent-soft); }

.faq { padding: 56px 0 64px; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.faq h2 { font-size: 34px; line-height: 43px; }

@media (max-width: 1180px) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-head { min-height: 0; }
}
@media (max-width: 900px) {
  .usage-grid, .faq-grid { grid-template-columns: 1fr; gap: 28px; }
  .free-infra-box { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .pricing-hero { padding: 44px 0 28px; }
  .pricing-hero h1 { font-size: 38px; line-height: 45px; }
  .pricing-hero h1 br { display: none; }
  .plan-grid { grid-template-columns: 1fr; }
  .free-infra-box { padding: 24px 22px; }
  .usage-intro h2, .compare h2, .faq h2 { font-size: 28px; line-height: 36px; }
}

/* Cookie consent. The banner is built by /analytics.js; analytics load only after Accept. */
.cookie-banner{position:fixed;inset:auto 16px 16px;z-index:60;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;max-width:760px;margin:0 auto;padding:16px 20px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#101a2e;box-shadow:0 18px 40px rgba(2,6,23,.35)}
.cookie-banner-text{margin:0;font-size:14px;line-height:1.5;color:#e6edf7;max-width:52ch}
.cookie-banner-actions{display:flex;gap:10px;margin-left:auto}
.cookie-banner-btn{padding:9px 18px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:transparent;color:#e6edf7;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.cookie-banner-btn:hover{border-color:#80aaff}
.cookie-banner-btn-accept{background:#80aaff;border-color:#80aaff;color:#0b1020}
.cookie-banner-btn:focus-visible{outline:2px solid #80aaff;outline-offset:2px}
@media (max-width:560px){.cookie-banner{inset:auto 12px 12px}.cookie-banner-actions{margin-left:0;width:100%}.cookie-banner-btn{flex:1}}