/*
  Swarm Code marketing site, shared design system
  =================================================

  A dark Liquid Glass marketing site with notch navigation, glass pills,
  reveal motion, feature highlight rail, blog section, FAQ accordion and
  a bold footer. No build step. One stylesheet, one page.

  Fonts (loaded in the page head): Inter (body/UI), Instrument Sans and
  Inter Tight (display). Code inside chips uses the Mac's own SF Mono;
  nothing else is imported.
*/

/* ---------------------------------------------------------------------- */
/* Design tokens                                                          */
/* ---------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Canvas: an editor-dark navy, a shade warmer than pure black so the
     blue glow and the glass wells still have somewhere to go. */
  --bg-top: #0b0e14;
  --bg-bottom: #0b0e14;
  --bg-well: #131823;
  --bg-well-raised: #1a2030;

  /* The notch and every solid "deeper than the page" block. */
  --ink: #05070b;
  --notch-ink: var(--ink);
  --surface-dark: var(--ink);
  --text-on-dark: #e6ebf3;
  --text-on-dark-soft: rgba(230, 235, 243, 0.68);

  /* Glass: thin light films on the dark canvas. */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-strong: rgba(255, 255, 255, 0.08);
  --glass-border: transparent;
  --glass-border-strong: transparent;
  --glass-blur: blur(20px) saturate(180%);
  --glass-blur-soft: blur(14px) saturate(150%);

  /* Accent, sampled from the Swarm Code icon's binary field. */
  --accent: #4f9cff;
  --accent-hover: #74b3ff;
  --accent-active: #2f86f5;
  --accent-soft: rgba(79, 156, 255, 0.16);
  --accent-soft-strong: rgba(79, 156, 255, 0.32);
  --accent-glow: rgba(79, 156, 255, 0.45);
  --accent-text: #8cc4ff;

  /* Text */
  --text-primary: #e8edf5;
  --text-secondary: rgba(232, 237, 245, 0.72);
  --text-tertiary: rgba(232, 237, 245, 0.55);
  --text-quaternary: rgba(232, 237, 245, 0.38);

  /* Status */
  --color-success: #3fd08a;
  --color-error: #ff6b6b;
  --color-warning: #fbbf24;

  /* Kept as tokens, intentionally invisible: flat look, no outlines. */
  --border-subtle: transparent;
  --border-strong: transparent;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;

  /* Disabled: flat look, no shadows, no glow effects. */
  --shadow-card: none;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Instrument Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  --container-width: 1120px;
  --container-pad: 24px;
  /* The one distance between a section's heading block and what follows it. */
  --gap-heading: 48px;
  --nav-safe-top: env(safe-area-inset-top, 0px);
  --nav-dock-bar-height: 8px;
  --nav-dock-closed-height: 56px;
  --site-hero-nav-gap: 104px;
  --site-hero-content-start: calc(
    var(--nav-safe-top) + var(--nav-dock-bar-height) +
    var(--nav-dock-closed-height) + var(--site-hero-nav-gap)
  );

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
}

/* ---------------------------------------------------------------------- */
/* Reset and base                                                         */
/* ---------------------------------------------------------------------- */

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

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-top);
  /* The same whisper of grain as the original design, inverted for the dark
     canvas so it lifts rather than dirties. */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.75 0 0 0 0 0.82 0 0 0 0 0.95 0 0 0 0.035 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; display: block; }

/* Nothing on the page is for taking: no text selection, no dragging a picture or a
   film off the page, no long-press sheet on a phone. The scripts back this up by
   swallowing copy, cut, drag and the context menu. */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
img, video {
  -webkit-user-drag: none;
  pointer-events: none;
}
/* The theme picker's names are buttons and the FAQ questions are buttons: those keep
   their pointer events; only the media itself is inert. */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code, kbd, pre { font-family: var(--font-mono); }

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

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.nav :focus-visible { outline-color: #7ab8ff; }

.skip-link {
  position: fixed;
  top: calc(var(--nav-safe-top) + 12px);
  left: 50%;
  z-index: 101;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--text-primary);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  transform: translate(-50%, -160%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

section {
  position: relative;
  padding-block: clamp(40px, 6vw, 80px);
}
.section-tight { padding-block: clamp(40px, 6vw, 80px); }


.section-heading {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.05;
  font-size: clamp(2.25rem, 5.5vw, 3.25rem);
  color: var(--text-primary);
  text-align: center;
  margin-inline: auto;
  margin-bottom: 18px;
  text-wrap: balance;
}

.section-subtitle {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--text-tertiary);
  line-height: 1.45;
  max-width: 720px;
  text-align: center;
  margin-inline: auto;
  text-wrap: pretty;
}

.text-center { text-align: center; }
.stack-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Glass surfaces                                                         */
/* ---------------------------------------------------------------------- */

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.surface-well {
  background: var(--bg-well);
  border-radius: var(--radius-3xl);
}

/* ---------------------------------------------------------------------- */
/* Reveal-on-load / reveal-on-scroll                                      */
/* ---------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal.is-settled { transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition-duration: 1ms; transform: none; }
}

/* ---------------------------------------------------------------------- */
/* Fixed notch navigation */
/* ---------------------------------------------------------------------- */

.nav {
  --notch-bar: var(--nav-dock-bar-height);
  position: fixed;
  top: var(--nav-safe-top);
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.nav::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--nav-safe-top) - 1px);
  left: 0;
  right: 0;
  height: calc(var(--nav-safe-top) + var(--notch-bar) + 2px);
  background: var(--notch-ink);
}

.nav__pill {
  --notch-fillet: 24px;
  --notch-fillet-inset: 0px;
  --pill-pad-right: 7px;
  --pill-pad-left: 12px;
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: calc(100% - 2 * var(--notch-fillet) + 2 * var(--notch-fillet-inset));
  height: 56px;
  margin-top: var(--notch-bar);
  padding: 6px calc(var(--pill-pad-right) + var(--notch-fillet-inset)) 6px calc(var(--pill-pad-left) + var(--notch-fillet-inset));
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background: var(--notch-ink);
}

.nav__pill::before,
.nav__pill::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--notch-bar));
  width: var(--notch-fillet);
  height: calc(var(--notch-fillet) + var(--notch-bar));
  pointer-events: none;
}
.nav__pill::before {
  left: calc(-1 * var(--notch-fillet) + 1px);
  background: radial-gradient(circle var(--notch-fillet) at 0 100%, transparent calc(var(--notch-fillet) - 1px), var(--notch-ink) var(--notch-fillet));
}
.nav__pill::after {
  right: calc(-1 * var(--notch-fillet) + 1px);
  background: radial-gradient(circle var(--notch-fillet) at 100% 100%, transparent calc(var(--notch-fillet) - 1px), var(--notch-ink) var(--notch-fillet));
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text-on-dark);
  margin-right: 10px;
}
.nav__logo img { height: 24px; width: auto; display: block; border-radius: 6px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-right: 8px;
}
.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-on-dark-soft);
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.nav__link:hover,
.nav__link.is-active { color: var(--text-on-dark); }

.btn.nav__cta {
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--text-primary);
  color: var(--ink);
}
.btn.nav__cta:hover { background: #fff; }
.btn.nav__cta:active { background: #cdd5e1; }

.nav__menu {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.nav__menu span {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #e8eaed;
  transition: transform 320ms cubic-bezier(0.32, 1.22, 0.36, 1), opacity 180ms ease;
}
.nav__pill.is-open .nav__menu span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__pill.is-open .nav__menu span:nth-child(2) { opacity: 0; }
.nav__pill.is-open .nav__menu span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 720px) {
  :root {
    --nav-dock-closed-height: 54px;
    --site-hero-nav-gap: 58px;
  }
  .nav__pill {
    --pill-pad-right: 10px;
    --pill-pad-left: 14px;
    width: calc(100vw - 2 * var(--notch-fillet) + 2 * var(--notch-fillet-inset) - 8px);
    max-width: calc(100vw - 2 * var(--notch-fillet) + 2 * var(--notch-fillet-inset) - 8px);
    height: auto;
    min-height: var(--nav-dock-closed-height);
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 0;
    padding-right: calc(var(--pill-pad-right) + var(--notch-fillet-inset));
    padding-left: calc(var(--pill-pad-left) + var(--notch-fillet-inset));
  }
  .nav__logo { margin-right: auto; }
  .nav__menu { display: inline-flex; }
  .nav__links {
    order: 5;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-right: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 4px;
    transition:
      max-height 560ms cubic-bezier(0.32, 1.22, 0.36, 1),
      opacity 240ms ease,
      padding 560ms cubic-bezier(0.32, 1.22, 0.36, 1);
  }
  .nav__pill.is-open .nav__links {
    max-height: 360px;
    opacity: 1;
    padding: 10px 4px 8px;
  }
  .nav__link {
    padding: 13px 12px;
    border-radius: 12px;
    font-size: 15px;
  }
  .nav__link:active { background: rgba(255, 255, 255, 0.08); }
}
.nav__links[inert] { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .nav__links, .nav__menu span, .skip-link { transition: none; }
}
@media (max-width: 380px) {
  .nav__pill { --pill-pad-left: 12px; }
  .nav__logo span { display: none; }
}

/* Menu-bar nav dock: on the first page load of a visit the pill springs
   open like the Swarm Code shelf (shelf curve + blur snapping into focus). A
   head-inline gate adds html.nav-intro-done on later loads so it never
   replays when navigating between pages. */
:root {
  --nav-dock-duration: 640ms;
  --nav-dock-curve: cubic-bezier(0.32, 1.22, 0.36, 1);
  --nav-dock-intro-delay: 120ms;
  --nav-dock-collapsed-transform: translateY(-6px) scaleX(0.78);
  --nav-dock-collapsed-blur: blur(8px);
  --nav-dock-fade-duration: calc(var(--nav-dock-duration) * 0.55);
  --nav-dock-exit-curve: cubic-bezier(0.32, 1, 0.36, 1);
}
@keyframes navDockExpand {
  0%   { opacity: 0; transform: var(--nav-dock-collapsed-transform); filter: var(--nav-dock-collapsed-blur); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scaleX(1); filter: blur(0); }
}
.nav__pill {
  transform-origin: 50% 0;
  animation: navDockExpand var(--nav-dock-duration) var(--nav-dock-curve)
             var(--nav-dock-intro-delay) both;
}
html.nav-intro-done .nav__pill { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .nav__pill { animation: none; }
}

@supports (border-shape: shape(from 0 0, line to 100% 100%)) {
  .nav__pill {
    --notch-fillet-inset: var(--notch-fillet);
    border-shape: shape(
      from 0 0,
      arc to var(--notch-fillet) var(--notch-fillet) of var(--notch-fillet) cw,
      vline to calc(100% - var(--radius-xl)),
      arc to calc(var(--notch-fillet) + var(--radius-xl)) 100% of var(--radius-xl) ccw,
      hline to calc(100% - var(--notch-fillet) - var(--radius-xl)),
      arc to calc(100% - var(--notch-fillet)) calc(100% - var(--radius-xl)) of var(--radius-xl) ccw,
      vline to var(--notch-fillet),
      arc to 100% 0 of var(--notch-fillet) cw,
      close
    );
  }
  .nav__pill::before,
  .nav__pill::after { content: none; }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding-inline: 20px;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--sm { height: 38px; padding-inline: 16px; }

/* Hero CTA pills. The light pill is the canonical download button on
   this dark site; the glass
   pill is its secondary twin with identical geometry. */
.btn--applepill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--text-primary);
  color: var(--ink);
  border-radius: 20px;
  padding: 17px 28px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn--applepill:hover { background: #fff; }
.btn--applepill:active { transform: scale(0.98); }
.btn--applepill-logo {
  width: 16px;
  height: 20px;
  flex-shrink: 0;
  margin-top: -2px;
}

.btn--darkpill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--glass-bg-strong);
  color: var(--text-primary);
  border-radius: 20px;
  padding: 16px 27px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn--darkpill:hover { background: rgba(255, 255, 255, 0.12); }
.btn--darkpill:active { transform: scale(0.98); }
.btn--darkpill svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------------- */
/* Morph hover — the one hover every button on the site shares.            */
/* ---------------------------------------------------------------------- */
/* On hover a button's content dissolves and
   reforms through a thick, real gaussian blur: the label blurs out where
   it stands and a fitting glyph blurs in, centred. Two content layers sit
   stacked in the same place inside the button, the REST face and the
   HOVER face, built at runtime by site.js so button markup stays plain.
   NOTHING SLIDES AND NOTHING RESIZES: the silhouette is identical at rest
   and hovered, only the content changes. */

.btn-morph {
  position: relative;
  --morph-dur: 340ms;
  --morph-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --morph-blur: 16px;
  --morph-tap-dur: 620ms;
}

.btn-morph__face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  transition: opacity var(--morph-dur) linear, filter var(--morph-dur) var(--morph-ease);
}

.btn-morph__face--rest {
  opacity: 1;
  filter: blur(0);
}

.btn-morph__face--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(var(--morph-blur));
  pointer-events: none;
}

/* Hover is for pointers only: on iOS Safari a synthesised hover would
   swallow the first tap. Touch gets the same morph from .is-tapmorph. */
@media (hover: hover) and (pointer: fine) {
  .btn-morph--icon:hover .btn-morph__face--rest {
    opacity: 0;
    filter: blur(var(--morph-blur));
  }
  .btn-morph--icon:hover .btn-morph__face--hover {
    opacity: 1;
    filter: blur(0);
  }
  .btn-morph--label:hover .btn-morph__face--rest {
    animation: btn-morph-dissolve var(--morph-dur) var(--morph-ease);
  }
}

.btn-morph--icon.is-tapmorph .btn-morph__face--rest {
  animation: btn-morph-tap-out var(--morph-tap-dur) var(--morph-ease);
}
.btn-morph--icon.is-tapmorph .btn-morph__face--hover {
  animation: btn-morph-tap-in var(--morph-tap-dur) var(--morph-ease);
}
.btn-morph--label.is-tapmorph .btn-morph__face--rest {
  animation: btn-morph-dissolve var(--morph-dur) var(--morph-ease);
}

@keyframes btn-morph-tap-out {
  0% { opacity: 1; filter: blur(0); }
  32% { opacity: 0; filter: blur(var(--morph-blur)); }
  68% { opacity: 0; filter: blur(var(--morph-blur)); }
  100% { opacity: 1; filter: blur(0); }
}
@keyframes btn-morph-tap-in {
  0% { opacity: 0; filter: blur(var(--morph-blur)); }
  32% { opacity: 1; filter: blur(0); }
  68% { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(var(--morph-blur)); }
}
@keyframes btn-morph-dissolve {
  0% { filter: blur(0); opacity: 1; }
  45% { filter: blur(var(--morph-blur)); opacity: 0.3; }
  100% { filter: blur(0); opacity: 1; }
}

.btn-morph > .btn-morph__face--hover > .btn-morph__mark {
  width: var(--morph-mark-size, 20px);
  height: var(--morph-mark-size, 20px);
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  object-fit: contain;
  flex: none;
  align-self: center;
  margin: 0;
  position: static;
  inset: auto;
  opacity: 1;
  transform: none;
  transition: none;
}

.btn--applepill.btn-morph,
.btn--darkpill.btn-morph {
  --morph-mark-size: 26px;
}
.footer__cta.btn-morph,
.btn--sm.btn-morph,
.nav__cta.btn-morph {
  --morph-blur: 11px;
  --morph-mark-size: 17px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-morph,
  .btn-morph__face { transition: none; }
  .btn-morph__face--hover { display: none; }
  .btn-morph--label:hover .btn-morph__face--rest { animation: none; }
  .btn-morph:hover { opacity: 0.85; }
  .btn-morph--icon:hover .btn-morph__face--rest { opacity: 1; filter: none; }
  .btn-morph.is-tapmorph .btn-morph__face--rest,
  .btn-morph.is-tapmorph .btn-morph__face--hover { animation: none; }
}

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

.hero {
  padding-top: var(--site-hero-content-start);
  padding-bottom: clamp(40px, 6vw, 80px);
  overflow: visible;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter Tight", var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-primary);
  margin-bottom: 30px;
}
/* The hover colour eases on the text and the arrow, not on the link itself: a
   transition on the link replaced the reveal's, and the line snapped in while
   the headline under it glided. */
.hero__kicker > span,
.hero__kicker-arrow { transition: color var(--dur-fast) var(--ease-out); }
.hero__eyebrow {
  display: inline-block;
  font-family: "Inter Tight", var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-tertiary);
  margin-bottom: 30px;
}
.hero__kicker:hover { color: var(--accent-text); }
.hero__kicker-mark {
  width: auto;
  height: 22px;
  border-radius: 6px;
}
.hero__kicker-arrow { width: 14px; height: 14px; opacity: 0.55; }

.hero__title {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 6.4vw, 3.9rem);
  letter-spacing: -0.045em;
  line-height: 1.02em;
  color: var(--text-primary);
  margin-bottom: 26px;
  text-wrap: balance;
}
.hero__apple {
  display: inline-block;
  width: 0.72em;
  height: 0.88em;
  vertical-align: -0.06em;
  margin-right: 0.08em;
  fill: currentColor;
}

/* Hold a compositing hint only while the shared reveal runs. */
.hero__title.reveal:not(.is-settled) { will-change: opacity, transform; }
.hero__mac { white-space: nowrap; }

/* The charged word:
   once the headline's reveal settles, a strike drops into the word from
   the top of the viewport (850ms), an arrival bloom pulses once (900ms)
   and a sheen keeps sweeping through the letters (3.2s, linear, forever).
   A stream of ones and zeros sweeps through the letters. */
.hero__charged {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: var(--accent-text);
}
.hero__charged-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: transparent;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='64' viewBox='0 0 240 64'%3E%3Ctext x='0' y='40' font-family='SF Mono,Menlo,monospace' font-size='22' font-weight='600' fill='%23ffffff' fill-opacity='.55' letter-spacing='6'%3E0110100101%3C/text%3E%3C/svg%3E"),
    linear-gradient(105deg, rgb(79 156 255 / 12%) 0%, rgb(140 196 255 / 55%) 35%, rgb(255 255 255 / 85%) 50%, rgb(140 196 255 / 55%) 65%, rgb(79 156 255 / 12%) 100%);
  background-size: 240px 100%;
  background-repeat: repeat-x;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
}
.hero__charge-entry {
  position: absolute;
  left: calc(50% - 90px);
  bottom: 45%;
  width: 180px;
  height: 100vh;
  overflow: visible;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  fill: #cfe3ff;
  opacity: 0;
}
.hero__charge-entry .dim { fill: #8cc4ff; fill-opacity: 0.55; }
.hero__charged::after {
  content: "";
  position: absolute;
  inset: -0.08em -0.12em;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse, rgb(79 156 255 / 28%), transparent 68%);
  opacity: 0;
}
.hero__title:not(.is-settled) .hero__charged-sheen,
.hero__title:not(.is-settled) .hero__charge-entry,
.hero__title:not(.is-settled) .hero__charged::after { display: none; }
.hero__title.is-settled .hero__charged-sheen {
  opacity: 0.74;
  animation: hero-charge-sheen 3.2s linear infinite;
}
.hero__title.is-settled .hero__charge-entry {
  animation: hero-charge-entry 850ms linear 340ms both;
}
.hero__title.is-settled .hero__charged::after {
  animation: hero-charge-arrival 900ms ease-out 420ms both;
}
@keyframes hero-charge-entry {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); }
  5% { opacity: 0.9; }
  12% { opacity: 1; clip-path: inset(0 0 0 0); }
  26% { opacity: 0.65; }
  55% { opacity: 0.18; }
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes hero-charge-arrival {
  0% { opacity: 0; transform: scale(0.65); }
  32% { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1.08); }
}
@keyframes hero-charge-sheen {
  from { background-position: 0 0; }
  to { background-position: 240px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title.reveal:not(.is-settled) { will-change: auto; }
  .hero__title.is-settled .hero__charged-sheen,
  .hero__title.is-settled .hero__charge-entry,
  .hero__title.is-settled .hero__charged::after { display: none; animation: none; opacity: 0; }
}

.hero__subtitle {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--text-primary);
  opacity: 0.62;
  max-width: 760px;
  margin-bottom: 34px;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero__swarmcode-link,
.hero__swarmai-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-tertiary);
  transition: color var(--dur-fast) var(--ease-out);
}
.hero__swarmcode-link img,
.hero__swarmai-link img { width: 18px; height: 18px; border-radius: 5px; }
.hero__swarmcode-link svg,
.hero__swarmai-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero__swarmcode-link:hover,
.hero__swarmai-link:hover { color: var(--text-primary); }


/* The binary field behind the hero. One canvas, fixed to the hero's box,
   masked so it melts into the page before the promo block. */
.hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.hero__field canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Hero laser: WebGL2 blue vertical beam, stacked behind the binary field */
.hero__laser {
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
  opacity: 0.85;
  mix-blend-mode: screen;
}

/* Hero still: the real app, captured from its own capture mode. Every tour still is a
   whole 16:10 frame, so the box is 16:10 too and `cover` below never cuts an edge off. */
.hero__film { aspect-ratio: 16 / 10; }
.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero media block, same container geometry as the Swarm Code promo film. */
.media-block {
  position: relative;
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  background: var(--bg-well);
}
.hero__media {
  position: relative;
  z-index: 1;
  margin-top: clamp(48px, 7vw, 84px);
}

/* ---------------------------------------------------------------------- */
/* Feature cards + Apple-style highlight rail (ported from the home page) */
/* ---------------------------------------------------------------------- */

.fcard {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  background: var(--bg-well);
  overflow: hidden;
}
.fcard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 32px 24px;
  flex: 1 0 auto;
}
.fcard__title {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  color: var(--text-primary);
  margin: 0 0 6px;
}
.fcard__sub {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0;
  max-width: 46ch;
}
/* The stills are whole 16:10 frames from the tour run; a 16:9 or window-shaped box
   with `cover` cropped their edges. */
.fcard__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--ink);
}
.fcard__media--window { aspect-ratio: 16 / 10; }
.fcard__media-video,
.fcard__media-img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-highlights {
  --highlight-card-width: min(820px, calc(100vw - 48px));
  --highlight-page-gutter: max(24px, calc((100vw - 1240px) / 2 + 24px));
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0;
  overflow: hidden;
}
.showcase-highlights__head,
.showcase-highlights__controls {
  width: min(100%, 1240px);
  margin-inline: auto;
  padding-inline: 24px;
}
.showcase-highlights__head { text-align: center; }
.showcase-highlights__title {
  margin: 0;
  font-family: "Inter Tight", var(--font-display);
  font-size: clamp(2.3rem, 4.8vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.98;
  color: var(--text-primary);
}
.showcase-highlights__sub {
  max-width: none;
  margin: 18px 0 0;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.5;
  white-space: nowrap;
}
.showcase-highlights__rail {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--highlight-card-width);
  gap: 20px;
  width: 100%;
  margin-top: var(--gap-heading);
  padding: 0 var(--highlight-page-gutter) 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-inline: var(--highlight-page-gutter);
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.showcase-highlights__rail::-webkit-scrollbar { display: none; }
.showcase-highlights__rail.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}
.highlight-card {
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border-radius: 32px;
}
.highlight-card .fcard__head {
  flex: 1 0 auto;
  min-height: 150px;
  padding: 32px 36px 28px;
}
.highlight-card .fcard__title { font-size: clamp(1.65rem, 2.7vw, 2.25rem); }
.highlight-card .fcard__sub {
  max-width: 52ch;
  font-size: clamp(0.98rem, 1.45vw, 1.08rem);
}
.highlight-card .fcard__media { flex: 0 0 auto; aspect-ratio: 16 / 10; }
.showcase-highlights__controls {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
}
.showcase-highlights__arrow {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 180ms var(--ease-out), background 180ms var(--ease-out), opacity 180ms ease;
}
.showcase-highlights__arrow:hover:not(:disabled) {
  transform: scale(1.06);
  background: rgba(255, 255, 255, 0.14);
}
.showcase-highlights__arrow:active:not(:disabled) { transform: scale(0.96); }
.showcase-highlights__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.showcase-highlights__arrow:disabled { opacity: 0.28; cursor: default; }
.showcase-highlights__arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}
@media (max-width: 720px) {
  .fcard__head { padding: 24px 24px 18px; }
  .showcase-highlights__head,
  .showcase-highlights__controls { padding-inline: 18px; }
  .showcase-highlights__sub { white-space: normal; }
  .showcase-highlights__rail { gap: 14px; }
  .highlight-card { border-radius: 26px; }
  .highlight-card .fcard__head { min-height: 0; padding: 24px 24px 20px; }
  .showcase-highlights__arrow { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-highlights__rail { scroll-behavior: auto; }
  .showcase-highlights__arrow { transition: none; }
}

/* ---------------------------------------------------------------------- */
/* Tiles: the one card system                                              */
/* ---------------------------------------------------------------------- */
/* Every card on the page is a tile: a big-radius well with generous
   padding, one bold label, and either a large illustration or a visual
   that is allowed to bleed off the edge. Nothing else lives in a tile: no
   small icon chips, no key caps, no paragraphs under paragraphs. */

.tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(260px, auto);
  gap: 20px;
  margin-top: var(--gap-heading);
}
.tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 40px;
  background: var(--bg-well);
  padding: 48px;
}
.tile--wide { grid-column: span 4; }
.tile--half { grid-column: span 3; }
.tile--tall { grid-column: span 2; grid-row: span 2; }
.tile--full { grid-column: span 6; }

/* A centred illustration with a plain caption under it. */
.tile--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
}
.tile__caption {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 44ch;
  text-wrap: balance;
}

/* Three (or more) items: a large glyph over a bold two-line label. */
.tile--trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 24px;
  text-align: center;
}
.trio__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.trio__item svg {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trio__item svg .fill { fill: var(--text-primary); stroke: none; }
.trio__label {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

/* A visual filling the tile with the label sitting on it, bottom-left. */
.tile--visual { padding: 0; }
.tile__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.tile__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 120px 32px 32px;
  background: linear-gradient(180deg, rgba(19, 24, 35, 0) 0%, rgba(19, 24, 35, 0.92) 55%, #131823 100%);
}
.tile__overlay h3,
.tile__label {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
.tile__overlay p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 30ch;
}

/* A heading with a paragraph, and stacked rows bleeding off the right. */
.tile--split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 24px;
  align-items: center;
  min-height: 300px;
}
.tile__heading {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  font-size: 30px;
  text-wrap: balance;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--text-primary);
}
.tile__text {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-tertiary);
  max-width: 30ch;
  text-wrap: pretty;
}

/* Captures inside tiles: a label, a line, the capture at the tile's full width. */
.tile--film {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 0;
}
.tile--film .tile__caption { margin-bottom: 22px; max-width: 60ch; }
.tile__film {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px 24px 0 0;
  margin-top: auto;
}
.tile--full.tile--film .tile__film { border-radius: 28px 28px 0 0; }

/* Captures inside tiles. */
.tile__shot {
  display: block;
  width: min(520px, 100%);
  height: auto;
  border-radius: 20px;
}
.tile__art-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.tile--plain {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.tile--plain .tile__caption { max-width: 34ch; text-wrap: pretty; }

/* Picture tiles: the copy sits at the top, and the capture stands under it, running off
   the bottom and one side of the tile and fading out before the edge. Never under the
   words: the copy keeps its own band, the picture takes what is left. */
.tile--fade {
  min-height: 460px;
  padding: 44px 44px 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.tile__copy { position: relative; z-index: 1; max-width: 34ch; }
.tile__fade { position: relative; flex: 1; min-height: 240px; pointer-events: none; }
.tile__fade-img {
  position: absolute;
  top: 0;
  width: 96%;
  height: auto;
  border-radius: 18px 18px 0 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.tile--fade-right .tile__fade-img { right: -14%; }
.tile--fade-left .tile__fade-img { left: -14%; }
@media (max-width: 720px) {
  .tile--fade { min-height: 0; padding-bottom: 0; }
  .tile__fade { min-height: 200px; }
  .tile__fade-img { width: 108%; }
}

/* Agents: ten marks in one tile. */
.tile--agents {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px 20px;
  margin-top: var(--gap-heading);
  padding: 56px 48px;
}
.agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.agent__mark { display: grid; place-items: center; width: 56px; height: 56px; color: var(--text-primary); }
.agent__mark svg { width: 48px; height: 48px; }
.agent__name {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
.agents__note {
  margin-top: 26px;
  text-align: center;
  font-size: 15px;
  color: var(--text-tertiary);
}
.agents__note code {
  font-size: 13px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.07);
  padding: 2px 7px;
  border-radius: 6px;
}

/* Usage limits: the copy on the left, the popover capture on the right. */
.tile--usage {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
  margin-top: var(--gap-heading);
}
.usage__copy { min-width: 0; }
.usage__list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.usage__list li {
  display: grid;
  gap: 4px;
}
.usage__list strong {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.usage__list span {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-tertiary);
  max-width: 44ch;
  text-wrap: pretty;
}
.usage__shot {
  display: block;
  width: min(420px, 100%);
  height: auto;
  border-radius: 28px;
  justify-self: center;
}

@media (max-width: 960px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 16px; }
  .tile { padding: 36px; border-radius: 32px; }
  .tile--wide, .tile--half, .tile--full { grid-column: span 2; }
  .tile--tall { grid-column: span 2; grid-row: auto; min-height: 460px; }
  .tile--agents { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 12px; }
  .tile--usage { gap: 32px; }
}
@media (max-width: 620px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile { padding: 28px; border-radius: 28px; }
  .tile--wide, .tile--half, .tile--full, .tile--tall { grid-column: auto; }
  .tile--trio { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tile--split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .tile__rows { margin: 8px -28px 0 0; }
  .tile--agents { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 36px 24px; }
  .tile--usage { grid-template-columns: minmax(0, 1fr); }
  .usage__shot { justify-self: start; width: min(360px, 100%); }
  .agent__name { font-size: 18px; }
}

/* ---------------------------------------------------------------------- */
/* Built for the Mac: stat strip + "left out" list                        */
/* ---------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: var(--gap-heading);
}
.stat {
  min-width: 0;
  padding: 22px 12px 20px;
  text-align: center;
}
.stat__value {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -0.04em;
  color: var(--text-primary);
  line-height: 1;
}
.stat__label {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-tertiary);
}
@media (max-width: 900px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:last-child:nth-child(odd) { grid-column: span 2; }
}

.leftout {
  /* A second heading block inside the section: the same distance as between sections. */
  margin-top: clamp(40px, 6vw, 80px);
}
.leftout .section-heading { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.leftout__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin-top: var(--gap-heading);
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--text-quaternary);
}

/* ---------------------------------------------------------------------- */
/* Free & open source (takes the pricing slot)                             */
/* ---------------------------------------------------------------------- */

.free {
  max-width: 560px;
  margin: var(--gap-heading) auto 0;
  padding: 48px;
  border-radius: 40px;
  background: var(--bg-well);
  position: relative;
  overflow: hidden;
  /* Centred pricing card */
  text-align: center;
}
.free__app {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 22px;
}
.free__app img { width: 34px; height: 34px; border-radius: 9px; }
.free__app small {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: var(--text-tertiary);
}
.free__app span { text-align: left; }
.free__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 7vw, 4.25rem);
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--text-primary);
}
.free__price small {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text-tertiary);
}
.free__lines {
  margin: 24px auto 26px;
  display: inline-grid;
  gap: 10px;
  text-align: left;
}
.free__lines li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--text-secondary);
}
.free__lines svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  fill: none;
  stroke: var(--color-success);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.free .btn--applepill { width: 100%; justify-content: center; }
.free__source { width: 100%; justify-content: center; margin-top: 10px; }
.free__foot {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--text-quaternary);
}
.free__foot a { color: var(--text-tertiary); text-decoration: underline; text-underline-offset: 3px; }
.free__foot a:hover { color: var(--text-primary); }

/* Platform segmented control for download section */
.platform-tabs-wrap {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--gap-heading) - 6px);
  margin-bottom: 2px;
  position: relative;
  z-index: 2;
}

.platform-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  background: var(--bg-well);
  border: 1px solid var(--glass-border);
  border-radius: 9999px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
}

.platform-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.platform-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.platform-tab.is-active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.12);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.platform-tab svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex-shrink: 0;
}

.platform-tab__ver {
  font-size: 11px;
  opacity: 0.65;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 7px;
  border-radius: 6px;
  margin-left: 2px;
}

.platform-tab.is-active .platform-tab__ver {
  background: rgba(255, 255, 255, 0.15);
  opacity: 0.9;
}

.platform-pane {
  animation: platform-fade-in var(--dur-fast) var(--ease-out);
}

@keyframes platform-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.linux-downloads {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.linux-downloads .btn--applepill,
.linux-downloads .btn--darkpill {
  width: 100%;
  justify-content: center;
}

/* Hero platform chip links */
.hero__platforms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-quaternary);
}

.hero__platforms-label {
  color: var(--text-tertiary);
}

.hero__platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: all var(--dur-fast) var(--ease-out);
}

.hero__platform-chip:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
}

.hero__platform-icon {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.hero__platform-sep {
  color: var(--text-quaternary);
  opacity: 0.5;
}

@media (max-width: 560px) {
  .platform-tabs {
    gap: 2px;
    padding: 3px;
  }
  .platform-tab {
    padding: 0 10px;
    font-size: 13px;
    height: 34px;
  }
  .platform-tab__ver {
    display: none;
  }
}


/* ---------------------------------------------------------------------- */
/* Blog                                                                   */
/* ---------------------------------------------------------------------- */

.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: var(--gap-heading);
}
.blog__card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  background: var(--bg-well);
  padding: 36px 32px;
  transition: background var(--dur-fast) var(--ease-out);
  text-align: left;
}
.blog__card:hover { background: var(--bg-well-raised); }
.blog__card-date {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-quaternary);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.blog__card-title {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.blog__card-excerpt {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 20px;
}
.blog__card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.blog__card:hover .blog__card-arrow { background: var(--accent-soft); transform: translate(2px, -2px); }
.blog__card-arrow svg { width: 14px; height: 14px; }
.blog__more { margin-top: 28px; text-align: center; }
.blog__more-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-tertiary);
  transition: color var(--dur-fast) var(--ease-out);
}
.blog__more-link:hover { color: var(--text-primary); }
@media (max-width: 760px) {
  .blog__grid { grid-template-columns: 1fr; }
  .blog__card { padding: 28px 24px; }
}

/* ---------------------------------------------------------------------- */
/* FAQ accordion                                                          */
/* ---------------------------------------------------------------------- */

.faq__title {
  text-align: center;
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.05;
  font-size: clamp(2.25rem, 5.5vw, 3.25rem);
  color: var(--text-primary);
  margin: 0 auto;
}
.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: var(--gap-heading);
}
.faq__item {
  position: relative;
  min-width: 0;
  border-radius: 0;
  background: none;
  display: flex;
  flex-direction: column;
}
.faq__question {
  position: relative;
  /* Content-sized, so a left-hand question is a pill and never a banner.
     Only the phones rule below takes the full width back. */
  width: fit-content;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  margin: 0;
  padding: 12px 0 12px 32px;
  background: none;
  border: none;
  text-align: left;
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  cursor: pointer;
}
/* The pill is drawn by a pseudo-element so the round button can sit
   outside it on the page canvas, and so the row still works when a
   page ships the question as a bare text node. Negative z-index keeps
   it behind the question text. */
.faq__question::before {
  content: '';
  position: absolute;
  inset: 0 64px 0 0;
  border-radius: var(--radius-full);
  background: var(--bg-well-raised);
  z-index: -1;
}
/* The list reads as a back-and-forth: only every second pill is pushed
   to the right, and every question keeps its own content-sized width. */
.faq__item:nth-child(even) .faq__question {
  margin-left: auto;
}
.faq__question-icon {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--text-quaternary);
  color: var(--text-tertiary);
  transition: background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.faq__question-icon > svg {
  display: block;
  width: 17px;
  height: 17px;
}
/* The minus bar of the open state. */
.faq__question-icon::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-on-dark);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.faq__item.is-open .faq__question-icon {
  background: var(--accent);
  border-color: var(--accent);
}
.faq__item.is-open .faq__question-icon > svg { visibility: hidden; }
.faq__item.is-open .faq__question-icon::after { opacity: 1; }
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.faq__item.is-open .faq__answer { grid-template-rows: 1fr; }
.faq__answer-inner { overflow: hidden; }
.faq__answer-content {
  position: relative;
  margin: 16px 18% 0 72px;
  padding: 24px 28px;
  border-radius: 24px;
  background: var(--bg-well-raised);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.65;
}
/* The dot that marks an open answer, sitting in the side margin. */
.faq__answer-content::before {
  content: '';
  position: absolute;
  left: -48px;
  top: 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.faq__item.is-open .faq__answer-content::before { opacity: 1; }
/* Mirrored: a right-hand question gets a left-hand answer card. */
.faq__item:nth-child(even) .faq__answer-content {
  margin: 16px 72px 0 18%;
}
.faq__item:nth-child(even) .faq__answer-content::before {
  left: auto;
  right: -48px;
}
@media (max-width: 760px) {
  .faq__item:nth-child(even) .faq__question {
    width: 100%;
    margin-left: 0;
  }
  .faq__question {
    /* Phones get the full-width pill back for both sides. */
    width: 100%;
    gap: 46px;
    padding: 14px 0 14px 22px;
  }
  .faq__question::before { inset: 0 46px 0 0; }
  .faq__question-icon { width: 34px; height: 34px; }
  .faq__answer-content,
  .faq__item:nth-child(even) .faq__answer-content { margin: 14px 0 0 0; }
  .faq__answer-content::before,
  .faq__item:nth-child(even) .faq__answer-content::before { display: none; }
}
.faq__answer-content a { color: var(--accent-text); }
.faq__answer-content code {
  font-size: 12.5px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 5px;
}

/* ---------------------------------------------------------------------- */
/* Outro                                                                   */
/* ---------------------------------------------------------------------- */

.outro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(72px, 10vw, 140px) clamp(64px, 10vw, 120px);
  overflow: hidden;
}
.outro__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000 20%, transparent 100%);
  mask-image: radial-gradient(60% 70% at 50% 50%, #000 20%, transparent 100%);
}
.outro__field canvas { width: 100%; height: 100%; display: block; }
.outro__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.outro__icon-wrap { position: relative; margin-bottom: 32px; }
.outro__icon {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  border-radius: 24px;
  display: block;
}
.outro__icon-wrap::before { content: none; }
.outro__title {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.05;
  font-size: clamp(2.1rem, 5vw, 3rem);
  color: var(--text-primary);
  margin-bottom: 18px;
  text-wrap: balance;
}
.outro__subtitle {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--text-primary);
  opacity: 0.6;
  max-width: 640px;
  margin-bottom: 34px;
  text-wrap: pretty;
}

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

.footer {
  padding-block: clamp(56px, 7vw, 88px) 0;
  position: relative;
}
.footer > * { position: relative; z-index: 1; }
.footer__wordmark {
  overflow: hidden;
  height: clamp(90px, 13vw, 190px);
  margin-top: clamp(40px, 6vw, 72px);
}
.footer__wordmark span {
  display: block;
  text-align: center;
  font-family: "Inter Tight", var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 15.5vw, 16rem);
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: rgba(232, 237, 245, 0.05);
  user-select: none;
  white-space: nowrap;
  will-change: transform;
  transform: translateY(0.06em);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: 40px;
  justify-items: center;
  text-align: center;
}
.footer__brand { display: flex; flex-direction: column; align-items: center; }
.footer__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--text-primary);
  margin-bottom: 20px;
}
.footer__logo img { width: auto; height: 48px; border-radius: 12px; }
.footer__tagline {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: var(--text-2xl);
  color: var(--text-primary);
  margin: 0 0 14px;
}
.footer__desc {
  color: var(--text-tertiary);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 auto 24px;
}
.footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--text-primary);
  color: var(--ink);
  border-radius: 20px;
  padding: 13px 22px;
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out);
}
.footer__cta:hover { background: #fff; }
.footer__cta svg { width: 14px; height: 17px; flex-shrink: 0; margin-top: -2px; }
.footer__copyright { margin: 28px 0 16px; color: var(--text-quaternary); font-size: var(--text-sm); }
.footer__byline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  margin: 0;
}
.footer__face { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.footer__madeby {
  margin: 12px 0 0;
  font-size: var(--text-sm);
  color: var(--text-quaternary);
}
.footer__madeby a {
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__madeby a:hover { color: var(--text-primary); }
.footer__head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--text-primary);
  margin: 0 0 6px;
}
.footer__col { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.footer__col a {
  color: var(--text-tertiary);
  font-size: var(--text-base);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__col a:hover { color: var(--text-primary); }
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__wordmark span { font-size: 17vw; }
}
@media (max-width: 480px) {
  :root { --container-pad: 18px; }
  .nav__pill { min-height: var(--nav-dock-closed-height); }
  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions > * { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------- */
/* Code elements                                                           */
/* ---------------------------------------------------------------------- */

/* The demo stills are whole 16:10 frames, shown whole: the box matches, so no bars and no crop. */
.wordscroll__demo-video { aspect-ratio: 16 / 10; object-fit: contain; }

/* Theme picker: one big window in the chosen theme, and the names to pick from. Lives
   inside the second wordscroll's demo slot. */
.themes {
  position: relative;
  /* The window, its 26 names and the caption all fit the pinned stage together. */
  width: min(1040px, 86vw, calc(60vh * 2080 / 1426));
  background: transparent;
  overflow: visible;
}
.themes__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2080 / 1426;
  border-radius: clamp(14px, 1.8vw, 24px);
  overflow: hidden;
  background: var(--ink);
}
.themes__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 420ms var(--ease-out-soft);
}
.themes__stage img.is-current { opacity: 1; }
.themes__names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  margin-top: 18px;
}
.themes__name {
  appearance: none;
  border: 0;
  padding: 7px 13px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.themes__name:hover { color: var(--text-primary); }
.themes__name.is-current { background: var(--text-primary); color: var(--ink); }
.themes__caption {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-quaternary);
}
@media (max-width: 720px) {
  .themes { width: 92vw; }
  .themes__name { padding: 6px 10px; font-size: 12px; }
}

/* Binary twinkles for the wordscroll stages (replaces Swarm Code's sparks). */
.wordscroll__bits {
  position: absolute;
  inset: 0 0 45% 0;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-text);
}
.wordscroll__bits span {
  position: absolute;
  opacity: 0;
  animation: bit-twinkle 4.5s ease-in-out infinite;
}
.wordscroll__bits span:nth-child(1) { top: 12%; left: 20%; animation-delay: 0.1s; }
.wordscroll__bits span:nth-child(2) { top: 30%; left: 70%; animation-delay: 0.7s; font-size: 16px; }
.wordscroll__bits span:nth-child(3) { top: 8%; left: 50%; animation-delay: 1.3s; }
.wordscroll__bits span:nth-child(4) { top: 36%; left: 38%; animation-delay: 1.9s; }
.wordscroll__bits span:nth-child(5) { top: 18%; left: 80%; animation-delay: 2.4s; font-size: 16px; }
.wordscroll__bits span:nth-child(6) { top: 42%; left: 14%; animation-delay: 3s; }
.wordscroll__bits span:nth-child(7) { top: 6%; left: 32%; animation-delay: 3.5s; }
.wordscroll__bits span:nth-child(8) { top: 24%; left: 90%; animation-delay: 4.1s; }
.wordscroll__bits span:nth-child(9) { top: 46%; left: 60%; animation-delay: 4.6s; font-size: 16px; }
.wordscroll__bits span:nth-child(10) { top: 15%; left: 6%; animation-delay: 1s; }
.wordscroll__bits span:nth-child(11) { top: 52%; left: 84%; animation-delay: 2.8s; }
.wordscroll__bits span:nth-child(12) { top: 58%; left: 26%; animation-delay: 3.9s; font-size: 16px; }
@keyframes bit-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 0.5; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .wordscroll__bits span { animation: none; opacity: 0.25; } }