/* Zooid — landing page
   Design tokens. Three rules carry the whole look:
   1. weight INVERTS with size (display type is 300-400, small text is 500-590)
   2. tracking tightens monotonically as size grows; line-height falls 1.6 -> 1.0
   3. elevation is 2-5 luminance units apart, and every border is translucent white
*/

:root {
  /* light ground, layered warm-neutral steps */
  --bg-page: #ffffff;
  --bg-0:    #f7faf8;
  --bg-1:    #ffffff;
  --bg-2:    #f2f6f3;
  --bg-3:    #e9efea;

  /* borders are translucent INK on a light ground */
  --line-0: #0b12110d;
  --line-1: #0b121114;
  --line-2: #0b12111f;
  --line-3: #0b12112e;

  --fg:    #0b1211;
  --fg-2:  #47554f;   /*  8.4:1 on white  */
  --fg-3:  #64726c;   /*  5.4:1 on white  */

  /* brand green. #22c55e is only 2.2:1 on white, so it is a FIELD colour and a
     large-shape colour — never body text. Text-on-white uses the 700 step. */
  --accent:       #22c55e;
  --accent-hover: #16a34a;
  --accent-deep:  #15803d;
  --accent-ink:   #04301a;
  --accent-tint:  #ecfdf3;

  --warn:      #b45309;
  --warn-tint: #fff7ed;

  --font: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --font-features: "cv01", "cv03", "ss03";

  --radius-6:  6px;
  --radius-8:  8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --hairline: 1px;

  --speed-quick:   .1s;
  --speed-regular: .22s;
  --ease: cubic-bezier(.25, .46, .45, .94);

  --header-h: 60px;
  --page-max: 1216px;
  --section-y: 112px;
}

@media (min-resolution: 2dppx) { :root { --hairline: .5px } }

*, *::before, *::after { box-sizing: border-box }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;   /* sticky header + breathing room */
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg);
  font-family: var(--font);
  font-feature-settings: var(--font-features);
  font-optical-sizing: auto;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block }
a { color: inherit; text-decoration: none }

::selection { background: var(--accent); color: #fff }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-6);
}

/* ── layout ─────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: 24px;
}

section { padding-block: var(--section-y) }

.rule { border: 0; border-top: var(--hairline) solid var(--line-0); margin: 0 }

/* ── type scale ─────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  /* balance распределяет line lengths evenly, so a heading never strands one
     short word on its own line; browsers without it just wrap normally. */
  text-wrap: balance;
}

p, li, figcaption, summary { text-wrap: pretty }

h1 {
  font-size: clamp(38px, 5.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -.032em;
  font-weight: 380;           /* off-round variable weight, not 400 */
}

h2 {
  font-size: clamp(30px, 3.9vw, 46px);
  line-height: 1.08;
  letter-spacing: -.026em;
  font-weight: 390;
}

h3 {
  font-size: 20px;
  line-height: 1.33;
  letter-spacing: -.018em;
  font-weight: 540;
}

p { margin: 0 }

.lede {
  max-width: 62ch;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55;
  letter-spacing: -.014em;
  color: var(--fg-2);
  font-weight: 380;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
  font-feature-settings: normal;
}

.eyebrow .tick { color: var(--accent-deep) }

.small { font-size: 13px; line-height: 1.5; letter-spacing: -.01em; color: var(--fg-3) }

.mono { font-family: var(--mono); font-feature-settings: normal }

.hi { color: var(--fg) }

/* section headers share one rhythm */
.head { max-width: 720px }
.head .eyebrow { margin-bottom: 20px }
.head h2 + .lede { margin-top: 20px }

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding-inline: 20px;
  border-radius: var(--radius-8);
  font-size: 14px;
  font-weight: 540;
  letter-spacing: -.012em;
  border: var(--hairline) solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--speed-quick) var(--ease),
              border-color var(--speed-quick) var(--ease),
              color var(--speed-quick) var(--ease);
}

.btn-primary { background: var(--accent-hover); color: #fff }
.btn-ghost { border-color: var(--line-2); color: var(--fg) }
.btn-sm { height: 34px; padding-inline: 14px; font-size: 13px }

@media (any-hover: hover) {
  .btn-primary:hover { background: var(--accent-deep) }
  .btn-ghost:hover { border-color: var(--line-3); background: var(--bg-2) }
}

/* ── header ─────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg-page) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: var(--hairline) solid var(--line-0);
}

.site-header .wrap {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 560; letter-spacing: -.02em }
.brand svg { width: 22px; height: 22px }

.site-nav { display: flex; gap: 26px; margin-left: auto; font-size: 13.5px; font-weight: 500; letter-spacing: -.01em }
.site-nav a { color: var(--fg-3); transition: color var(--speed-quick) var(--ease) }
.site-nav a[aria-current="true"] { color: var(--fg) }
@media (any-hover: hover) { .site-nav a:hover { color: var(--fg) } }

.site-header .btn { margin-left: auto }
.site-nav ~ .btn { margin-left: 0 }

@media (max-width: 900px) { .site-nav { display: none } .site-header .btn { margin-left: auto } }

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero { padding-top: 62px; padding-bottom: 0; position: relative; overflow: hidden }

/* a single soft field, not a gradient wash across the whole page */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 620px;
  background:
    radial-gradient(62% 58% at 50% 0%, #22c55e1f, transparent 70%);
  pointer-events: none;
}

.hero .wrap { position: relative; display: grid; grid-template-columns: 1fr; gap: 56px }

@media (min-width: 1000px) {
  .hero .wrap { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 64px; align-items: center }
}

.hero-copy { max-width: 620px }
.hero h1 { margin-block: 20px 22px }
.hero .lede { max-width: 520px }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px }
.hero-note { margin-top: 22px; display: flex; align-items: flex-start; gap: 10px; max-width: 560px }

/* word-by-word blur-in: three properties, and it reads expensive */
.w { display: inline-block }
.js .reveal .w { opacity: 0; filter: blur(10px); transform: translateY(18%); animation: word-in .62s var(--ease) forwards }
@keyframes word-in { to { opacity: 1; filter: blur(0); transform: none } }

@media (prefers-reduced-motion: reduce) {
  .js .reveal .w { opacity: 1; filter: none; transform: none; animation: none }
  * { scroll-behavior: auto !important }
}

/* ── terminal artefact ──────────────────────────────────────────────────── */

.term {
  background: var(--bg-1);
  border: var(--hairline) solid var(--line-1);
  border-radius: var(--radius-12);
  overflow: hidden;
  box-shadow: 0 1px 0 #ffffff0a inset, 0 24px 60px -24px #000000cc;
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding-inline: 14px;
  border-bottom: var(--hairline) solid var(--line-0);
  background: var(--bg-2);
}

.term-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-3) }
.term-title { margin-left: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); letter-spacing: 0 }

.term pre {
  margin: 0;
  padding: 18px 18px 20px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.72;
  color: var(--fg-2);
  letter-spacing: 0;
  overflow-x: auto;
  tab-size: 2;
}

.term .c-prompt { color: var(--accent-deep) }
.term .c-cmd    { color: var(--fg) }
.term .c-key    { color: var(--fg-3) }
.term .c-val    { color: var(--fg) }
.term .c-ok     { color: var(--accent-deep) }
.term .c-num    { color: var(--fg); font-weight: 500 }
.term .c-dim    { color: #5d666c }
.term .c-bad    { color: #ff7a6b }

/* ── proof strip ────────────────────────────────────────────────────────── */

.proof { border-block: var(--hairline) solid var(--line-0); background: var(--bg-0); padding-block: 44px }

.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px 24px;
}

.stat .n {
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 350;
  font-variant-numeric: tabular-nums;
}
.stat .n em { font-style: normal; color: var(--accent-deep) }
.stat .k { margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: var(--fg-3); letter-spacing: -.005em }

.proof-foot { margin-top: 30px; padding-top: 22px; border-top: var(--hairline) solid var(--line-0) }

/* ── cards ──────────────────────────────────────────────────────────────── */

.cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 56px }

.card {
  background: var(--bg-1);
  border: var(--hairline) solid var(--line-1);
  border-radius: var(--radius-16);
  padding: 26px 24px 28px;
  box-shadow: 0 1px 2px #0b121108, 0 8px 24px -16px #0b121129;
  display: flex;
  flex-direction: column;
}
/* the artefact line sits on the card's floor, so the rules across a row align
   even when the bodies above them are different lengths */
.card .foot { margin-top: auto }
/* four items want four columns, not three and an orphan */
.cards.four { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)) }
.card h3 { margin-bottom: 10px }
.card p { color: var(--fg-2); font-size: 14.5px; line-height: 1.6 }
.card .ico { width: 26px; height: 26px; margin-bottom: 18px; color: var(--accent-deep) }
.card .foot { padding-top: 14px; margin-top: 16px; border-top: var(--hairline) solid var(--line-0) }

/* ── tables ─────────────────────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; margin-top: 48px; border: var(--hairline) solid var(--line-1); border-radius: var(--radius-16); background: var(--bg-1) }

table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 14px }

th, td { text-align: left; padding: 15px 20px; border-bottom: var(--hairline) solid var(--line-0); vertical-align: top }
tbody tr:last-child td { border-bottom: 0 }

thead th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fg-3);
  background: var(--bg-2);
  white-space: nowrap;
  font-feature-settings: normal;
}

td { color: var(--fg-2); letter-spacing: -.008em }
td:first-child { color: var(--fg); font-weight: 500 }
td .sub { display: block; margin-top: 4px; font-size: 12.5px; color: var(--fg-3) }

.yes { color: var(--accent-deep); font-weight: 500 }
.no  { color: #be123c; font-weight: 500 }
.part { color: var(--warn); font-weight: 500 }

/* ── the limits section ─────────────────────────────────────────────────── */

.band { background: var(--bg-0); border-block: var(--hairline) solid var(--line-0) }
.band .table-scroll { background: var(--bg-page) }
.band td:nth-child(2) { white-space: nowrap; width: 1%; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding-inline: 11px;
  border-radius: 9999px;
  background: var(--warn-tint);
  border: var(--hairline) solid #f0b05a3d;
  color: var(--warn);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
  font-feature-settings: normal;
  white-space: nowrap;
  flex: none;
}
.badge.ok { background: var(--accent-tint); border-color: #22c55e4d; color: var(--accent-deep) }

/* ── split sections ─────────────────────────────────────────────────────── */

.split { display: grid; gap: 48px; align-items: center }
@media (min-width: 1000px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 72px } }
@media (min-width: 1000px) { .split.rev > :first-child { order: 2 } }

.pipe { display: grid; gap: 10px }
.pipe-step {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
  padding: 15px 18px;
  background: var(--bg-1);
  border: var(--hairline) solid var(--line-1);
  border-radius: var(--radius-12);
}
.pipe-step .i {
  font-family: var(--mono); font-size: 11px; color: var(--accent-deep);
  border: var(--hairline) solid var(--line-2); border-radius: var(--radius-6);
  height: 22px; display: grid; place-items: center; margin-top: 1px; font-feature-settings: normal;
}
.pipe-step b { display: block; font-weight: 540; font-size: 14.5px; letter-spacing: -.012em }
.pipe-step span { font-size: 13.5px; color: var(--fg-3); line-height: 1.5 }
.pipe-arrow { height: 14px; border-left: var(--hairline) dashed var(--line-2); margin-left: 33px }

/* ── quote ──────────────────────────────────────────────────────────────── */

.quote {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 22px;
  margin-top: 32px;
}
.quote p { font-size: 17px; line-height: 1.5; letter-spacing: -.016em; color: var(--fg); font-weight: 380 }
.quote cite { display: block; margin-top: 12px; font-style: normal; font-size: 12.5px; color: var(--fg-3); font-family: var(--mono); font-feature-settings: normal }

/* ── faq ────────────────────────────────────────────────────────────────── */

.faq { max-width: 820px; margin-top: 52px; border-top: var(--hairline) solid var(--line-1) }
.faq details { border-bottom: var(--hairline) solid var(--line-1) }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 40px 22px 0;
  position: relative;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -.016em;
  transition: color var(--speed-quick) var(--ease);
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after {
  content: "";
  position: absolute; right: 6px; top: 30px;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--fg-3); border-bottom: 1.5px solid var(--fg-3);
  transform: rotate(45deg);
  transition: transform var(--speed-regular) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) }
@media (any-hover: hover) { .faq summary:hover { color: var(--accent-deep) } }
.faq .a { padding: 0 0 24px; max-width: 700px }
.faq .a p { color: var(--fg-2); font-size: 15px; line-height: 1.62 }
.faq .a p + p { margin-top: 12px }

/* ── final cta ──────────────────────────────────────────────────────────── */

.cta-final {
  background: linear-gradient(165deg, #22c55e 0%, #16a34a 100%);
  border-top: 0;
  text-align: center;
}
.cta-final h2, .cta-final .lede { color: #fff }
.cta-final .btn-primary { background: #fff; color: var(--accent-deep) }
.cta-final .btn-ghost { border-color: #ffffff5c; color: #fff }
@media (any-hover: hover) {
  .cta-final .btn-primary:hover { background: var(--accent-tint) }
  .cta-final .btn-ghost:hover { background: #ffffff1f; border-color: #ffffff8a }
}
.cta-final .head { margin-inline: auto }
.cta-final .hero-cta { justify-content: center }

/* ── footer ─────────────────────────────────────────────────────────────── */

.site-footer { border-top: var(--hairline) solid var(--line-0); padding-block: 56px 44px; background: var(--bg-page) }
.foot-grid { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) }
.foot-grid h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; margin-bottom: 14px; font-feature-settings: normal }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px }
.foot-grid a { font-size: 13.5px; color: var(--fg-2); transition: color var(--speed-quick) var(--ease) }
@media (any-hover: hover) { .foot-grid a:hover { color: var(--accent-deep) } }
.foot-bottom { margin-top: 48px; padding-top: 24px; border-top: var(--hairline) solid var(--line-0); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between }

/* ── scroll reveal ──────────────────────────────────────────────────────── */

/* Scroll reveal is opt-IN, gated on the .js class an inline head script sets.
   Hiding by default would mean a main.js that never loads leaves every section
   below the hero invisible — on a page whose entire claim is that it works
   without JavaScript, that is the one bug we cannot ship. */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease) }
  .js .rise.in { opacity: 1; transform: none }
}

@media (max-width: 640px) {
  :root { --section-y: 84px }
  .hero { padding-top: 64px; padding-bottom: 72px }
  .wrap { padding-inline: 20px }
  .quote { padding-left: 18px }
  .faq summary { font-size: 15.5px; padding-right: 32px }
}

@media (max-width: 520px) {
  .nb-sm { display: none }   /* the key id is reference, not headline */
  /* stacked buttons of different widths read as ragged; match them */
  .hero-cta { flex-direction: column; align-items: stretch }
  .hero-cta .btn { justify-content: center }
  .hero-note { flex-direction: column; gap: 12px }
}

/* ── hero: phone trio ───────────────────────────────────────────────────── */

.hero-wide .wrap { display: block; text-align: left }
.hero-copy.center { max-width: 780px; margin-inline: auto; text-align: center }
.hero-copy.center .lede { max-width: 640px; margin-inline: auto }
.hero-copy.center .hero-cta { justify-content: center }

/* A dark device on a dark page has no edge. Premium dark sites solve this by
   seating the product on a lighter, tinted stage — so the phone separates from the
   ground instead of dissolving into it. That is what the competitor's saturated
   colour field is doing, and it is why theirs reads and ours did not. */
.stage {
  position: relative;
  margin-top: 40px;
  padding: 60px clamp(16px, 4vw, 56px) 0;
  border-radius: 36px 36px 0 0;
  /* Saturated, not tinted-dark. A near-black device only reads as a device when the
     ground behind it is genuinely bright — a 6% teal wash leaves both sides of the
     edge in the same luminance band and the phone dissolves again. */
  background:
    radial-gradient(120% 90% at 50% -10%, #4ade80 0%, #22c55e 38%, #16a34a 72%, #15803d 100%);
  overflow: hidden;
}


.phones {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(-22px, -1.4vw, -8px);
}

.phone { margin: 0; flex: none; position: relative }

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
  /* a hairline rim is what actually separates a dark device from a dark ground —
     the shadow alone does nothing when both sides of the edge are near-black */
  outline: 1px solid #04301a2e;
  outline-offset: -1px;
  box-shadow: 0 50px 90px -34px #04301a80, 0 14px 34px -16px #04301a4d;
}

/* Crop all three to a common baseline so they meet the band edge as one skyline.
   Left at natural height they are 2.16:1 and spill past the section unevenly. */
.phone-lead { width: clamp(210px, 21vw, 268px); z-index: 2 }
.phone-side { width: clamp(176px, 17.5vw, 224px); z-index: 1 }
.phone-side:first-child { transform: rotate(-3deg) }
.phone-side:last-child  { transform: rotate(3deg) }
/* the rotation lifts the outer corners, so nudge them back onto the baseline */
.phone-side:first-child, .phone-side:last-child { margin-bottom: 6px }
/* no opacity fade: on a dark ground it reads as "unfinished", not "receding" */

@media (max-width: 720px) {
  /* two phones read as a pair; three become thumbnails */
  .phones { gap: -16px }
  .phone-side:last-child { display: none }
  .phone-lead { width: 56% }
  .phone-side { width: 44% }
}

/* ── numbered problem cards ─────────────────────────────────────────────── */

.cards.three { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) }

.num-mark { color: var(--accent-deep);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--accent-deep);
  margin-bottom: 16px;
  font-feature-settings: normal;
}

/* ── alternating feature rows ───────────────────────────────────────────── */

.split-rows { display: grid; gap: 96px; margin-top: 72px }

.row-feature { display: grid; gap: 40px; align-items: center }
@media (min-width: 900px) {
  .row-feature { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 80px }
  .row-feature.rev > :first-child { order: 2 }
}

.row-feature h3 {
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.16;
  letter-spacing: -.024em;
  font-weight: 400;
  margin-block: 18px 18px;
}
.row-feature p { color: var(--fg-2); font-size: 15.5px; line-height: 1.62 }
.row-feature p + p { margin-top: 14px }

.row-kicker {
  margin-top: 20px !important;
  padding-top: 16px;
  border-top: var(--hairline) solid var(--line-1);
  color: var(--fg) !important;
  font-weight: 500;
  letter-spacing: -.014em;
}
.row-kicker a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px }

.row-art {
  background: var(--bg-0);
  border: var(--hairline) solid var(--line-1);
  border-radius: var(--radius-16);
  padding: 26px 24px 20px;
}
.row-art figcaption { margin-top: 14px; text-align: center }

/* ── inline diagrams ────────────────────────────────────────────────────── */

.dia { width: 100%; height: auto }
.dia-node circle { fill: #fff; stroke: var(--accent-hover); stroke-width: 1.6 }
.dia-node.dia-sm circle { stroke-width: 1.2 }
.dia-node.dia-dead circle { stroke: #e11d48; fill: #fff1f2 }
.dia-x { stroke: #e11d48; stroke-width: 1.8; stroke-linecap: round }
.dia-link path { stroke: var(--line-3); stroke-width: 1.4 }
.dia-flow path { stroke: var(--accent-hover); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round }
.dia-path { stroke: var(--accent-hover); stroke-width: 2.2; fill: none; stroke-linecap: round }
.dia-key path { stroke: var(--accent-hover); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round }
.dia-t {
  fill: var(--fg-3); font-family: var(--mono); font-size: 10px;
  text-anchor: middle; letter-spacing: .06em;
}

/* ── app section ────────────────────────────────────────────────────────── */

.app-grid { display: grid; gap: 48px; margin-top: 64px; align-items: center }
@media (min-width: 900px) { .app-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px } }

.phone-flat { width: 100%; max-width: 300px; margin-inline: auto }
.phone-flat figcaption { margin-top: 18px; text-align: center }

.app-points { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) }
.app-point h3 { font-size: 17px; letter-spacing: -.018em; margin-bottom: 8px }
.app-point p { color: var(--fg-2); font-size: 14.5px; line-height: 1.6 }

/* ── limits, plain-language version ─────────────────────────────────────── */

.limit-list { margin-top: 56px; display: grid; gap: 0; border-top: var(--hairline) solid var(--line-1) }
.limit {
  display: grid;
  gap: 8px 48px;
  padding-block: 28px;
  border-bottom: var(--hairline) solid var(--line-1);
}
@media (min-width: 860px) { .limit { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); align-items: start } }
.limit h3 { font-size: 18px; letter-spacing: -.02em; font-weight: 500 }
.limit p { color: var(--fg-2); font-size: 15px; line-height: 1.62 }

/* the quote in a plain section needs its own top margin */
.limit-list + .quote { margin-top: 40px }

/* ── green hero band ────────────────────────────────────────────────────── */

.hero-green {
  background: linear-gradient(168deg, #4ade80 0%, #22c55e 34%, #16a34a 78%, #15803d 100%);
  /* Pull the band up under the sticky header. Without this the header floats over
     the white body background above the green, and its white brand and nav are
     invisible against it. */
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + 52px);
  padding-bottom: 96px;
  overflow: hidden;
  text-align: center;
}
.hero-green .wrap { position: relative }

.hero-green .eyebrow { color: #ffffffc2; letter-spacing: .1em }
.hero-green h1 {
  color: #fff;
  margin-block: 18px 16px;
  font-size: clamp(42px, 7.4vw, 92px);
  line-height: .96;
  letter-spacing: -.036em;
  font-weight: 340;
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}
.hero-green .lede { color: #ffffffe0; max-width: 56ch; margin-inline: auto; font-size: clamp(16px, 1.8vw, 20px) }
.hero-green .hero-cta { justify-content: center; margin-top: 28px }

.btn-hero { background: #fff; color: var(--accent-deep) }
.btn-ghost-light { border-color: #ffffff5c; color: #fff }
@media (any-hover: hover) {
  .btn-hero:hover { background: var(--accent-tint) }
  .btn-ghost-light:hover { background: #ffffff1f; border-color: #ffffff8f }
}

/* header sits on the green band until you scroll past it */
.site-header.on-green {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: #ffffff29;
}
/* If the script never runs, the bar must still be readable once the green band
   is behind it. A sticky header over a white page with white text is invisible,
   so the no-JS default is the solid treatment and .js opts into transparency. */
html:not(.js) .site-header.on-green {
  background: color-mix(in srgb, var(--bg-page) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line-1);
}
html:not(.js) .site-header.on-green .brand { color: var(--fg) }
html:not(.js) .site-header.on-green .site-nav a { color: var(--fg-3) }
html:not(.js) .site-header.on-green .btn-hero { background: var(--accent-hover); color: #fff }
.site-header.on-green .brand,
.site-header.on-green .site-nav a[aria-current="true"] { color: #fff }
.site-header.on-green .site-nav a { color: #ffffffbf }
@media (any-hover: hover) { .site-header.on-green .site-nav a:hover { color: #fff } }
.site-header.on-green.stuck {
  background: color-mix(in srgb, var(--bg-page) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line-1);
}
.site-header.on-green.stuck .brand { color: var(--fg) }
.site-header.on-green.stuck .site-nav a { color: var(--fg-3) }
.site-header.on-green.stuck .site-nav a[aria-current="true"] { color: var(--fg) }
.site-header.on-green.stuck .btn-hero { background: var(--accent-hover); color: #fff }

.hero-green .phones { margin-top: 56px }
@media (max-width: 720px) { .hero-green .phones { margin-top: 40px } }

/* ── green stat band ────────────────────────────────────────────────────── */

.band-green {
  background: var(--accent-deep);
  padding-block: 64px;
  border: 0;
}
.band-green .stat .n { color: #fff; font-weight: 300 }
.band-green .stat .k { color: #ffffffb8 }

/* ── section variants ───────────────────────────────────────────────────── */

.band { background: var(--bg-0); border-block: var(--hairline) solid var(--line-0) }
.tight { padding-block: 104px }
@media (max-width: 640px) { .tight { padding-block: 72px } }

.tight .head { margin-inline: auto; text-align: center; max-width: 640px }
.tight .head .lede { margin-inline: auto }
.tight .head .hero-cta { justify-content: center }
.tight .split-rows .row-feature .pill + h3 { text-align: left }

.pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 9999px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 560;
  letter-spacing: -.005em;
  margin-bottom: 14px;
}

.split-rows { gap: 88px }
.row-feature h3 { font-size: clamp(26px, 3.1vw, 38px); font-weight: 360; letter-spacing: -.028em; margin-block: 0 16px }
.row-feature p { font-size: 16px }

/* footer is a single line now */
.site-footer { padding-block: 36px }
.foot-bottom { margin-top: 0; padding-top: 0; border-top: 0 }

/* particles carrying a record from a dead node to a live one */
.dia-dust circle { fill: var(--accent-hover); opacity: .55 }

/* generated illustrations sit on white, so the card frame would only box them in */
.row-art { background: none; border: 0; padding: 0 }
.row-art .art {
  width: 100%;
  height: auto;
  border-radius: var(--radius-24);
  mix-blend-mode: multiply;   /* melts the white ground into the page */
}

/* ── moat: what already went wrong elsewhere ────────────────────────────── */

.moat-list { margin-top: 56px; display: grid; gap: 0; border-top: var(--hairline) solid var(--line-1) }

.moat {
  display: grid;
  gap: 14px 56px;
  padding-block: 34px;
  border-bottom: var(--hairline) solid var(--line-1);
  align-items: start;
}
@media (min-width: 900px) { .moat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } }

.moat h3 { font-size: clamp(19px, 2vw, 23px); letter-spacing: -.022em; font-weight: 500; margin-bottom: 10px }

.moat-them {
  color: var(--fg-3);
  font-size: 14.5px;
  line-height: 1.6;
  padding-left: 14px;
  border-left: 2px solid #0b121114;
}

.moat-us {
  color: var(--fg);
  font-size: 15.5px;
  line-height: 1.62;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
  font-weight: 420;
}

/* the diagram explains; the illustration only sets the mood behind it */
.row-art { position: relative; display: grid; place-items: center; min-height: 240px }
.row-art .art-wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .16;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.row-art .dia { position: relative; width: 100%; max-width: 380px }

/* the one real incident each pillar prevents */
.elsewhere {
  margin-top: 16px !important;
  padding-left: 14px;
  border-left: 2px solid var(--line-2);
  color: var(--fg-3) !important;
  font-size: 14px !important;
  line-height: 1.55;
}

/* the page now ends on a section rather than a coloured band */
.site-footer { border-top: var(--hairline) solid var(--line-1) }

/* the interop network drawing */
.net-art { margin: 52px auto 8px; max-width: 720px }
.net-art .dia { width: 100% }
.dia-t-lead { fill: var(--accent-deep); font-weight: 500; letter-spacing: .1em }

/* comparison — our column is the only one that carries weight */
#compare table { min-width: 760px }
#compare th, #compare td { text-align: center; padding: 14px 16px }
#compare th:first-child, #compare td:first-child { text-align: left; white-space: nowrap }
#compare th.us, #compare td.us { background: var(--accent-tint) }
#compare th.us { color: var(--accent-deep); font-weight: 600 }
#compare tbody td { color: var(--fg-3); font-size: 13.5px }
#compare tbody td:first-child { color: var(--fg); font-weight: 500; font-size: 14.5px }
#compare .yes { color: var(--accent-deep) }
#compare .no, #compare .part { font-weight: 400 }

/* ── language switcher ──────────────────────────────────────────────────── */

.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 20px;
  padding: 3px;
  border-radius: 9999px;
  border: var(--hairline) solid #ffffff3d;
}
.lang a {
  padding: 4px 11px;
  border-radius: 9999px;
  font-size: 12.5px;
  font-weight: 540;
  letter-spacing: 0;
  color: #ffffffbf;
  transition: background var(--speed-quick) var(--ease), color var(--speed-quick) var(--ease);
}
.lang a[aria-current="true"] { background: #ffffff2e; color: #fff }
@media (any-hover: hover) { .lang a:hover { color: #fff } }

.site-header.on-green.stuck .lang { border-color: var(--line-2) }
.site-header.on-green.stuck .lang a { color: var(--fg-3) }
.site-header.on-green.stuck .lang a[aria-current="true"] { background: var(--bg-3); color: var(--fg) }
html:not(.js) .site-header.on-green .lang { border-color: var(--line-2) }
html:not(.js) .site-header.on-green .lang a { color: var(--fg-3) }

@media (max-width: 900px) { .lang { margin-left: auto } }

/* ── CJK typography ─────────────────────────────────────────────────────── */
/* Negative tracking is a Latin device; on CJK it jams the glyphs together.
   CJK also wants a looser line and no font-feature substitutions. */
:lang(zh-Hans) {
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-features: normal;
}
:lang(zh-Hans) body,
:lang(zh-Hans) h1, :lang(zh-Hans) h2, :lang(zh-Hans) h3, :lang(zh-Hans) h4,
:lang(zh-Hans) .lede, :lang(zh-Hans) .eyebrow, :lang(zh-Hans) .pill { letter-spacing: 0 }
:lang(zh-Hans) body { line-height: 1.75 }
:lang(zh-Hans) h1 { line-height: 1.15; font-weight: 500 }
:lang(zh-Hans) h2 { line-height: 1.25; font-weight: 500 }
:lang(zh-Hans) h3 { font-weight: 500 }
:lang(zh-Hans) .row-feature h3 { line-height: 1.3 }
:lang(zh-Hans) p { line-height: 1.8 }
/* CJK has no spaces, so the browser can break anywhere — balance is unnecessary
   and `pretty` can produce very short last lines */
:lang(zh-Hans) h1, :lang(zh-Hans) h2, :lang(zh-Hans) h3, :lang(zh-Hans) p { text-wrap: normal }