/* Omnify site. The aurora motif is lifted straight from the app: the same
   drifting ambient blobs its own screens render behind their content.
   --brand / --brand-2 are the accent pair. They are not fixed: accents.js
   rewrites them when a visitor picks a colour in the header, the same way the
   app lets you repaint itself. Everything tinted below derives from them, so a
   new colour needs no other change here. */

:root {
  --brand: #7ada9d;
  --brand-2: #ffb780;

  --bg: #080b09;
  --bg-2: #0d1210;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.065);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #e9efeb;
  --dim: #97a49d;
  /* The accents are the app's real colours, which are saturated and fairly
     dark. Used as a surface (buttons, blobs, swatches) that is exactly what is
     wanted, but the same value as small text or an icon glyph would sink into
     the background. These are the readable counterparts: lifted toward white on
     the dark theme, pushed toward ink on the light one, hue kept either way. */
  --brand-on: color-mix(in oklab, var(--brand) 62%, white);
  --brand-2-on: color-mix(in oklab, var(--brand-2) 62%, white);
  --accent: var(--brand-on);
  /* Text drawn on top of a full-strength accent. Set per colour in accents.js,
     since a light accent needs dark text and a dark one needs white. */
  --on-brand: #ffffff;
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  --aurora-strength: 0.5;

  /* Scrollbar, same recipe as the GlassKeep site: a thin bar with no arrow buttons, a track faintly
     tinted with the accent and a gradient thumb. Both ends are the accent pair at full strength, so
     a colour picked in the header repaints the scrollbar along with everything else. The track is
     lifted here and lowered in the light blocks below, since it has to hold against a dark page. */
  --scroll-track: color-mix(in srgb, var(--brand) 22%, transparent);
  --scroll-thumb: linear-gradient(180deg, var(--brand), var(--brand-2));
  --scroll-thumb-hover: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand) 80%, #fff),
    color-mix(in srgb, var(--brand-2) 80%, #fff)
  );

  --section-pad: clamp(56px, 8vw, 104px);
  --radius: 18px;
  --radius-lg: 26px;
  --wrap: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6faf7;
    --bg-2: #ffffff;
    --surface: rgba(9, 26, 17, 0.035);
    --surface-2: rgba(9, 26, 17, 0.06);
    --border: rgba(9, 26, 17, 0.1);
    --border-strong: rgba(9, 26, 17, 0.18);
    --text: #0d1512;
    --dim: #55635c;
    --brand-on: color-mix(in oklab, var(--brand) 65%, #04150d);
    --brand-2-on: color-mix(in oklab, var(--brand-2) 65%, #04150d);
    --accent: var(--brand-on);
    --shadow: 0 24px 60px -24px rgba(9, 26, 17, 0.25);
    --aurora-strength: 0.55;
    --scroll-track: color-mix(in srgb, var(--brand) 16%, transparent);
    --scroll-thumb-hover: linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand) 82%, #000),
      color-mix(in srgb, var(--brand-2) 82%, #000)
    );
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #f6faf7;
  --bg-2: #ffffff;
  --surface: rgba(9, 26, 17, 0.035);
  --surface-2: rgba(9, 26, 17, 0.06);
  --border: rgba(9, 26, 17, 0.1);
  --border-strong: rgba(9, 26, 17, 0.18);
  --text: #0d1512;
  --dim: #55635c;
  --brand-on: color-mix(in oklab, var(--brand) 65%, #04150d);
  --brand-2-on: color-mix(in oklab, var(--brand-2) 65%, #04150d);
  --accent: var(--brand-on);
  --shadow: 0 24px 60px -24px rgba(9, 26, 17, 0.25);
  --aurora-strength: 0.55;
  --scroll-track: color-mix(in srgb, var(--brand) 16%, transparent);
  --scroll-thumb-hover: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand) 82%, #000),
    color-mix(in srgb, var(--brand-2) 82%, #000)
  );
  color-scheme: light;
}

* { box-sizing: border-box; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

/* Firefox has no ::-webkit-scrollbar, and scrollbar-color takes solid colours only, so it gets the
   accent itself rather than the gradient. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--brand) var(--scroll-track); }
}

html {
  scroll-behavior: smooth;
  /* The sticky bar is 72px; the rest is the air an anchored heading gets under it. */
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.sprite { display: none; }

/* Parked above the viewport rather than at a large negative left, which counted
   as page width and let the whole page pan sideways on mobile. */
.skip {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-140%);
  background: var(--bg-2);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
  z-index: 200;
}
.skip:focus { transform: none; }

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

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

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s, backdrop-filter 0.3s;
}
.nav.stuck {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  text-decoration: none;
  flex: none;
}
.brand img { width: 34px; height: 34px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}
.nav-links a {
  text-decoration: none;
  color: var(--dim);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 10px;
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--text); background: var(--surface); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn > .ico { grid-area: 1 / 1; }

.ico-moon, .ico-close, .ico-done { display: none; }
:root[data-theme="light"] .ico-sun { display: none; }
:root[data-theme="light"] .ico-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ico-sun { display: none; }
  :root:not([data-theme="dark"]) .ico-moon { display: block; }
}

.nav-burger { display: none; }

.lang-btn {
  width: auto;
  min-width: 40px;
  padding-inline: 11px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ---------- Language picker ---------- */

.lang-picker { position: relative; }

.lang-list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px;
  min-width: 190px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  border-radius: 15px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-2) 96%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  z-index: 120;
}
.lang-list[hidden] { display: none; }

.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 11px;
  border: none;
  border-radius: 9px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.lang-option:hover { background: var(--surface-2); }
.lang-option .code {
  color: var(--dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.lang-option[aria-pressed="true"] {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand-on);
  font-weight: 600;
}
.lang-option[aria-pressed="true"] .code { color: inherit; }

/* ---------- Accent picker ---------- */

.accent-picker { position: relative; }

.accent-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent),
    0 0 14px -2px var(--brand);
  transition: background 0.3s;
}

.accent-list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: flex;
  gap: 8px;
  padding: 10px;
  border-radius: 15px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-2) 96%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  z-index: 120;
}
.accent-list[hidden] { display: none; }

.accent-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--c);
  cursor: pointer;
  padding: 0;
  outline-offset: 3px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.accent-swatch:hover { transform: scale(1.12); }
.accent-swatch[aria-pressed="true"] {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--bg-2) inset;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 13px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s,
    box-shadow 0.2s, opacity 0.2s;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary {
  background: linear-gradient(
    135deg,
    var(--brand),
    color-mix(in oklab, var(--brand) 80%, white)
  );
  color: var(--on-brand);
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--brand) 55%, transparent);
}
.btn-primary:hover {
  box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--brand) 70%, transparent);
  transform: translateY(-2px);
}

.btn-ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); transform: translateY(-2px); }

.btn-lg { padding: 16px 28px; font-size: 16px; border-radius: 15px; }

/* ---------- Hero ---------- */

/* clip, not hidden: the aurora blobs and the tilted screenshot deliberately
   bleed past the hero's sides, which widened the page and let it scroll
   sideways on a phone. Clipping only the horizontal axis stops that while the
   glow still bleeds vertically, and unlike hidden it creates no scroll box. */
.hero {
  position: relative;
  overflow-x: clip;
  padding: clamp(48px, 9vw, 110px) 0 clamp(56px, 8vw, 96px);
}

.aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  pointer-events: none;
  z-index: 0;
  filter: blur(90px);
  opacity: var(--aurora-strength);
}
.blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.b1 {
  width: 46vw; height: 46vw; min-width: 340px; min-height: 340px;
  background: radial-gradient(circle, var(--brand), transparent 68%);
  top: 2%; left: -6%;
  animation: drift1 22s ease-in-out infinite alternate;
}
.b2 {
  width: 40vw; height: 40vw; min-width: 300px; min-height: 300px;
  background: radial-gradient(circle, var(--brand-2), transparent 68%);
  top: 22%; right: -4%;
  animation: drift2 26s ease-in-out infinite alternate;
}
.b3 {
  width: 34vw; height: 34vw; min-width: 260px; min-height: 260px;
  background: radial-gradient(circle, #6fc9e8, transparent 70%);
  bottom: 4%; left: 34%;
  animation: drift3 30s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate3d(9vw, 5vh, 0) scale(1.14); } }
@keyframes drift2 { to { transform: translate3d(-8vw, 7vh, 0) scale(1.09); } }
@keyframes drift3 { to { transform: translate3d(5vw, -6vh, 0) scale(1.18); } }

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  color: var(--dim);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.pill:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-2) 22%, transparent);
}
.pill .ico-xs { opacity: 0.6; }

.hero h1 {
  margin: 22px 0 0;
  font-size: clamp(2.6rem, 6.2vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
  font-weight: 800;
}
.grad {
  background: linear-gradient(115deg, var(--brand-on) 5%, var(--brand-2-on) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  margin: 22px 0 0;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--dim);
  max-width: 46ch;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  font-size: 14px;
  color: var(--dim);
}
.hero-meta li { display: flex; align-items: center; gap: 8px; }
.hero-meta li::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}

.hero-shots {
  position: relative;
  height: clamp(400px, 46vw, 560px);
}
/* The screenshots already ship their own device frame on a transparent
   background, so they get no frame of our own: no border, no radius, and above
   all no background colour, which would otherwise fill that transparency (white
   in the light theme, which is exactly where it showed). drop-shadow rather than
   box-shadow, since it follows the frame's alpha instead of a square box.
   Sized by height so the three always fit the hero's box whatever aspect ratio
   the screenshots happen to have, instead of being cropped to a fixed one. */
.shot {
  position: absolute;
  width: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35));
}
.s1 { height: 84%; left: 0;    top: 10%; transform: rotate(-7deg); z-index: 1; }
.s2 { height: 96%; left: 30%;  top: 2%;  transform: rotate(2deg);  z-index: 3; }
.s3 { height: 76%; right: -2%; top: 20%; transform: rotate(9deg);  z-index: 2; }

/* ---------- Strip ---------- */

.strip { padding: 10px 0 46px; }
.strip-label {
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 18px;
}
.strip-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.strip-list li {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  color: var(--dim);
}

/* ---------- Sections ---------- */

.section {
  padding: var(--section-pad) 0;
  /* An anchor aligns the top of the section, and a section opens on a full band of padding, so a
     link from the header left that whole band under the bar before any text showed up, dropping the
     heading a third of the way down the screen. Cancelling exactly that padding puts the first line
     of the section where the scroll padding above intends it, at any width. */
  scroll-margin-top: calc(-1 * var(--section-pad));
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow .ico { width: 17px; height: 17px; }

.section h2 {
  margin: 16px 0 0;
  font-size: clamp(1.9rem, 3.9vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 750;
}
.section-head { max-width: 62ch; }
.section-sub { color: var(--dim); margin: 16px 0 0; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}
.split-copy > p { color: var(--dim); margin: 18px 0 0; }
.split-reverse .split-visual { order: -1; }

.ticks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.ticks li {
  position: relative;
  padding-left: 32px;
  color: var(--dim);
  font-size: 15.5px;
}
.ticks li strong { color: var(--text); font-weight: 600; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 18px; height: 18px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
}
.ticks li::after {
  content: "";
  position: absolute;
  /* Centred on the square above, whose middle sits at 9px / 17px. The tick is a right angle pivoted
     45 degrees, so what it draws ends up about 1.4px below the middle of its own box, and the box
     has to sit that much higher for the tick itself to land centred. */
  left: 5px; top: 13.6px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- Fake app cards ---------- */

.split-visual { display: grid; place-items: center; }
.card-stack { position: relative; width: 100%; }

.fake-card {
  position: relative;
  z-index: 2;
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 22px;
  box-shadow: var(--shadow);
}
.fake-card-behind, .fake-card-behind2 {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  box-shadow: none;
}
.fake-card-behind { transform: translateY(14px) scale(0.955); opacity: 0.55; }
.fake-card-behind2 { transform: translateY(28px) scale(0.91); opacity: 0.28; z-index: 0; }

.fake-head { display: flex; align-items: center; gap: 13px; }
.fake-head > div { display: grid; min-width: 0; }
.fake-head strong { font-size: 15.5px; font-weight: 650; }
/* Scoped to the subtitle only. As ".fake-head span" this also caught the icon
   and the chip beside it, and beat their own colour on specificity, so the chip
   label was drawn in the muted text colour: invisible once the accent behind it
   became a saturated one. */
.fake-head > div > span { font-size: 13px; color: var(--dim); }

.fake-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  flex: none;
  color: var(--c-on, var(--c, var(--brand)));
  background: color-mix(in srgb, var(--c, var(--brand)) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--brand)) 32%, transparent);
}

.chip {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 650;
}
.chip-ok {
  color: var(--on-brand);
  background: var(--brand);
}

.fake-rows { display: grid; gap: 2px; margin-top: 20px; }
.fake-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--dim);
}
.fake-row:nth-child(odd) { background: var(--surface); }
.fake-row .ico { width: 18px; height: 18px; color: var(--accent); }
.fake-mono { justify-content: space-between; }
.fake-mono code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--text);
}

/* ---------- Feature grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
  margin-top: 46px;
}
.feature {
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform 0.35s var(--ease), border-color 0.35s, background 0.35s;
}
.feature:hover {
  transform: translateY(-5px);
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.feature h3 { margin: 20px 0 0; font-size: 1.18rem; font-weight: 680; letter-spacing: -0.02em; }
.feature p { margin: 11px 0 0; color: var(--dim); font-size: 15px; }

.feature-ico {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  border-radius: 15px;
  color: var(--c-on, var(--c, var(--brand)));
  background: color-mix(in srgb, var(--c, var(--brand)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--brand)) 30%, transparent);
}

/* ---------- Open source ---------- */

.oss-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
  padding: clamp(30px, 4.6vw, 60px);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--border));
  background:
    radial-gradient(
      120% 100% at 0% 0%,
      color-mix(in srgb, var(--brand) 11%, transparent),
      transparent 62%
    ),
    var(--surface);
}
.oss-head > p { color: var(--dim); margin: 18px 0 0; }
.oss-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.oss-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.oss-points li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
}
.oss-points .feature-ico { width: 42px; height: 42px; border-radius: 13px; flex: none; }
.oss-points .feature-ico .ico { width: 20px; height: 20px; }
.oss-points li > div { display: grid; gap: 3px; min-width: 0; }
.oss-points strong { font-size: 15px; font-weight: 650; }
.oss-points span { font-size: 14px; color: var(--dim); }

/* ---------- TV ---------- */

.section-tv { position: relative; }
/* Same reasoning as .shot: the TV screenshot already comes in its own TV frame,
   so it is shown whole and unframed. Cropping it to 16:9 cut that frame off,
   which is what made it stop reading as a television. */
.tv-shot { margin: 46px auto 0; max-width: 1000px; }
.tv-shot img {
  width: 100%;
  /* "auto" so the real file still decides once it is here: this only holds its place until then. */
  aspect-ratio: auto 1955 / 1177;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.32));
}

/* ---------- Gallery ---------- */

.gallery {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 40px 24px 30px;
  scroll-snap-type: x mandatory;
  /* "safe" matters on a scroll container: it centres the row while it fits, then
     falls back to start-aligned once it overflows, instead of centring the
     overflow and pushing the first screenshots out of reach of the scrollbar. */
  justify-content: safe center;
}
/* No shadow here on purpose. Six of them side by side blurred into one another
   and all ended at the same height, which read as a grey slab with a hard edge
   across the section rather than as depth. The screenshots carry their own
   device frame, so they sit straight on the page instead. */
.gallery img {
  flex: none;
  width: min(258px, 62vw);
  /* Holds each shot's height before its file is here. Without it the row was flat until all six
     arrived and everything under it dropped as they did, which is what left a link from another
     page short of the section it named. Same "auto" as above: a screenshot with other proportions
     would still be drawn on its own. */
  aspect-ratio: auto 760 / 1606;
  scroll-snap-align: center;
}

/* ---------- Languages ---------- */

.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 38px 0 0;
}
.langs li {
  padding: 10px 18px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 15px;
  font-weight: 500;
}

/* ---------- Beta ---------- */

.beta-card {
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--brand-2) 28%, var(--border));
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--brand-2) 9%, transparent),
    var(--surface)
  );
  padding: clamp(28px, 4.5vw, 52px);
  max-width: 74ch;
}
.beta-card h2 { margin-top: 22px; }
.beta-card p { color: var(--dim); margin: 18px 0 0; }
.beta-card .btn { margin-top: 28px; }

/* ---------- Download ---------- */

.dl-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.verify {
  margin-top: 46px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: clamp(24px, 3.4vw, 36px);
}
.verify-head h3 { margin: 0; font-size: 1.2rem; font-weight: 680; letter-spacing: -0.02em; }
.verify-head p { margin: 12px 0 0; color: var(--dim); font-size: 15px; max-width: 68ch; }
.verify code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.verify-head code {
  font-size: 13.5px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.fingerprint {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 16px 16px 16px 20px;
  border-radius: 15px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.fingerprint code {
  font-size: 12.5px;
  line-height: 1.75;
  word-break: break-all;
  color: var(--accent);
  flex: 1;
}
.fingerprint .icon-btn { flex: none; }
.icon-btn.done .ico-copy { display: none; }
.icon-btn.done .ico-done { display: block; color: var(--brand); }

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--border);
  padding: clamp(48px, 6vw, 72px) 0 34px;
  background: var(--bg-2);
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 44px;
}
.footer-brand p {
  margin: 18px 0 0;
  color: var(--dim);
  font-size: 14.5px;
  max-width: 52ch;
}
.footer-brand a { color: var(--accent); text-decoration: none; }
.footer-brand a:hover { text-decoration: underline; }

.footer-links { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-links h4 {
  margin: 0 0 14px;
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 650;
}
.footer-links a {
  display: block;
  text-decoration: none;
  font-size: 15px;
  color: var(--text);
  padding: 5px 0;
  opacity: 0.82;
  transition: opacity 0.2s, transform 0.2s;
}
.footer-links a:hover { opacity: 1; transform: translateX(3px); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--dim);
}
.footer-legal p { margin: 0; display: flex; align-items: center; gap: 8px; }
.footer-legal a { color: var(--accent); text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }

/* ---------- Reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- Build page ---------- */

/* Same aurora and gradient headline as the home page, on one column: this page opens on a title and
   a paragraph rather than a screenshot, so nothing shares the row. */
.doc-hero {
  position: relative;
  overflow-x: clip;
  padding: clamp(48px, 8vw, 92px) 0 clamp(26px, 4vw, 44px);
}
.doc-hero-inner { position: relative; z-index: 1; max-width: 64ch; }
.doc-hero h1 {
  margin: 20px 0 0;
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
  font-weight: 800;
}
.doc-hero .lede { max-width: 56ch; }

.doc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
}
.doc-facts li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px;
  color: var(--dim);
}
.doc-facts .ico-xs { color: var(--accent); }

.steps {
  list-style: none;
  padding: 0;
  margin: 46px 0 0;
  display: grid;
  gap: 18px;
}
.steps li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  /* A grid item sizes to its content by default, which a command too long for the screen would then
     push wider than the page instead of scrolling inside its own box. */
  min-width: 0;
}
.step-n {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
  color: var(--on-brand);
  background: var(--brand);
}
.step-body { flex: 1; min-width: 0; }
.step-body h3 { margin: 0; font-size: 1.14rem; font-weight: 680; letter-spacing: -0.02em; }
.step-body > p { margin: 11px 0 0; color: var(--dim); font-size: 15px; max-width: 68ch; }

/* A command to run, with the copy button the fingerprint block already uses. */
.cmd {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 13px 13px 13px 18px;
  border-radius: 15px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.cmd pre { flex: 1; min-width: 0; margin: 0; overflow-x: auto; }
.cmd code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--accent);
  white-space: pre;
}
.cmd .icon-btn { flex: none; }
.cmd-note { margin: 14px 0 0; color: var(--dim); font-size: 14px; max-width: 68ch; }

/* Code named inside a sentence, as opposed to a command standing on its own above. */
.section-sub code,
.step-body > p code,
.cmd-note code,
.faq span code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.87em;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}

.callout {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 26px;
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--border));
  background:
    radial-gradient(
      120% 100% at 0% 0%,
      color-mix(in srgb, var(--brand) 10%, transparent),
      transparent 62%
    ),
    var(--surface);
}
.callout .feature-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; }
.callout .feature-ico .ico { width: 21px; height: 21px; }
.callout h3 { margin: 0; font-size: 1.12rem; font-weight: 680; letter-spacing: -0.02em; }
.callout p { margin: 11px 0 0; color: var(--dim); font-size: 15px; max-width: 68ch; }
.callout strong { color: var(--text); font-weight: 640; }
.callout-warn {
  border-color: color-mix(in srgb, var(--brand-2) 32%, var(--border));
  background:
    radial-gradient(
      120% 100% at 0% 0%,
      color-mix(in srgb, var(--brand-2) 11%, transparent),
      transparent 62%
    ),
    var(--surface);
}

.variants { list-style: none; padding: 0; margin: 46px 0 0; display: grid; gap: 12px; }
.variants li {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  min-width: 0;
}
.variants > li > code {
  flex: none;
  width: 17ch;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--accent);
}
.variants li > div { display: grid; gap: 3px; min-width: 0; }
.variants strong { font-size: 15px; font-weight: 650; }
.variants span { font-size: 14px; color: var(--dim); }

.faq { margin-top: 46px; }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .oss-panel { grid-template-columns: 1fr; }
  .hero-inner { grid-template-columns: 1fr; }
  /* width is explicit because margin-inline:auto makes a grid item shrink to fit
     its content, and every screenshot in here is absolutely positioned, so that
     content measures zero: the box collapsed to 0 wide and left a tall gap. */
  .hero-shots { width: 100%; height: min(78vw, 440px); max-width: 560px; margin-inline: auto; }
  .split, .footer-inner { grid-template-columns: 1fr; }
  .split-reverse .split-visual { order: 0; }
  .split-visual { max-width: 520px; margin-inline: auto; width: 100%; }
}

@media (max-width: 820px) {
  .nav-burger { display: inline-grid; }
  .nav-gh span { display: none; }
  .nav-gh { padding-inline: 13px; }
  .nav-links {
    position: absolute;
    inset: 72px 16px auto 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-2) 96%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 14px; font-size: 16px; }
  .nav.stuck, .nav:has(.nav-links.open) {
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
  }
  .nav-burger[aria-expanded="true"] .ico-open { display: none; }
  .nav-burger[aria-expanded="true"] .ico-close { display: block; }
}

@media (max-width: 520px) {
  /* The accent picker earns its place in the header more than a second GitHub
     button does: the same link is in the download section and the footer. */
  .nav-gh { display: none; }
  .nav-inner { gap: 12px; }
  .nav-actions { gap: 6px; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 18px; }
  .gallery { padding-inline: 18px; }
  .footer-links { gap: 34px; }
  .hero-cta .btn { flex: 1 1 100%; }
  /* The command name is as wide as the description it labels at this size, so it reads as a heading
     above it rather than a column beside it. */
  .variants li { flex-direction: column; gap: 12px; }
  .variants > li > code { width: auto; }
  .steps li, .callout { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}