/* KyberOS — the suite site.
 *
 * The first version of this page was an index with four cards on it. It read
 * as a link farm because that is what it was: every product given equal
 * weight, no argument, no depth, nothing that could only exist here.
 *
 * This version makes one argument — four products are one system — and spends
 * its craft on making that argument visible rather than stated. The system
 * diagram, the sticky product walk and the layered hero all exist to show the
 * thing the copy claims.
 *
 * Principles taken from the sites Joe named:
 *   - Type does the work. One enormous confident line beats three medium ones.
 *   - Motion explains, never decorates. Everything that moves is either
 *     revealing structure or responding to a pointer. Nothing loops forever.
 *   - Restraint in colour. Four product hues, one accent, everything else ink.
 *   - Precision. A 4px misalignment is the whole difference between "designed"
 *     and "assembled".
 *
 * Still no build step. One stylesheet, one page, one small script.
 */

/* ===================================================================== */
/* Tokens                                                                 */
/* ===================================================================== */

:root {
  /* Warm neutrals at a constant hue. Mixing hues across greys is what makes
     a palette look muddy and then invites saturation to fix it. */
  --canvas: oklch(97.2% 0.003 85);
  --paper: oklch(100% 0 0);
  --paper-2: oklch(98% 0.003 85);
  --paper-3: oklch(95.5% 0.004 85);

  --ink: oklch(15% 0.004 85);
  --ink-2: oklch(43% 0.006 85);
  --ink-3: oklch(62% 0.006 85);
  --ink-4: oklch(85% 0.004 85);

  --line: oklch(93.5% 0.003 85);
  --line-2: oklch(89% 0.004 85);

  /* Near-black, not black. Pure #000 on a warm canvas reads as a hole. */
  --slate: oklch(16% 0.008 85);
  --slate-2: oklch(23% 0.008 85);

  --brand: oklch(86% 0.15 128);
  --brand-tint: oklch(97% 0.04 128);
  --brand-ink: oklch(26% 0.06 128);

  /* One hue per product. Low chroma on purpose — these are identifiers, and
     four saturated colours on one screen is a toy. */
  --gate: oklch(56% 0.14 255);
  --access: oklch(58% 0.13 305);
  --watch: oklch(57% 0.14 30);
  --copy: oklch(55% 0.13 155);

  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --r-2xl: 2rem;

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.04), 0 1px 1px oklch(0% 0 0 / 0.03);
  --shadow-md: 0 1px 2px oklch(0% 0 0 / 0.04), 0 8px 24px oklch(0% 0 0 / 0.05);
  --shadow-lg: 0 2px 4px oklch(0% 0 0 / 0.03), 0 16px 48px oklch(0% 0 0 / 0.08);
  --shadow-xl: 0 4px 8px oklch(0% 0 0 / 0.04), 0 32px 80px oklch(0% 0 0 / 0.12);
  --hairline: 0 0 0 1px oklch(89% 0.004 85);

  --font: "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  /* Decelerating curves only. Something linear is still travelling when it
     stops, which is exactly what makes an interface feel mechanical. */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms;
  --t: 300ms;
  --t-slow: 600ms;

  --measure: 34rem;
  --gutter: 1.5rem;
  --max: 71rem;
}

@media (min-width: 60rem) {
  :root {
    --gutter: 2.5rem;
  }
}

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

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

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

::selection {
  background: var(--brand);
  color: var(--brand-ink);
}

/* Honour a stated need for less motion. Near-zero rather than `none`, so a
   0.01ms animation still fires its completion event and anything waiting on
   `transitionend` keeps working. Reveals are forced visible: if the only way
   content appears is by animating in, this setting would hide the page. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--slate);
  color: var(--paper);
  padding: 0.875rem 1.5rem;
  border-radius: 0 0 var(--r-md) 0;
  font-weight: 500;
  text-decoration: none;
}
.skip:focus {
  left: 0;
}

/* ===================================================================== */
/* Type                                                                   */
/* ===================================================================== */

/* A fluid scale rather than breakpoint steps: the headline should be as big
   as the viewport allows at every width, not jump at three of them. Tracking
   tightens as size grows because default spacing opens visible holes between
   letters above about 40px. */

.display {
  font-size: clamp(2.5rem, 7.5vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 620;
  margin: 0;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.875rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 620;
  margin: 0;
  text-wrap: balance;
}

h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.018em;
  font-weight: 600;
  margin: 0;
}

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: var(--measure);
  margin: 1.5rem 0 0;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.eyebrow-chip {
  background: var(--paper);
  box-shadow: var(--hairline);
  padding: 0.5rem 0.9375rem;
  border-radius: 999px;
  color: var(--ink-2);
}

/* The accent underline. Drawn as a background gradient sized to the text so
   it sits behind the baseline rather than on it, which is what separates a
   deliberate highlight from an underline someone forgot to remove. */
.mark {
  background: linear-gradient(to top, var(--brand) 0.35em, transparent 0.35em);
  padding-inline: 0.08em;
}

/* ===================================================================== */
/* Buttons                                                                */
/* ===================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 520;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-md);
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease),
    opacity var(--t-fast) var(--ease);
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--slate);
  color: var(--paper);
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.1);
}
.btn-primary:hover {
  background: var(--slate-2);
  box-shadow: 0 4px 12px oklch(0% 0 0 / 0.15);
}

.btn-accent {
  background: var(--brand);
  color: var(--brand-ink);
}
.btn-accent:hover {
  filter: brightness(0.96);
  box-shadow: 0 4px 14px oklch(86% 0.15 128 / 0.4);
}

.btn-quiet {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--hairline);
}
.btn-quiet:hover {
  background: var(--paper-2);
  box-shadow: var(--hairline), 0 2px 8px oklch(0% 0 0 / 0.05);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  padding-inline: 0.5rem;
}
.btn-ghost:hover {
  color: var(--ink);
}

.btn-sm {
  padding: 0.5rem 0.9375rem;
  font-size: 0.875rem;
}

.btn .arrow {
  transition: transform var(--t) var(--ease-out);
}
.btn:hover .arrow {
  transform: translateX(3px);
}

/* ===================================================================== */
/* Nav                                                                    */
/* ===================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition:
    background-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    backdrop-filter var(--t) var(--ease);
}

/* Transparent over the hero, solid once scrolled. A bar that is always solid
   puts a hard line across the top of a page whose whole first impression is
   openness. */
.nav[data-scrolled="true"] {
  background: oklch(97.2% 0.003 85 / 0.8);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 4.25rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 640;
  letter-spacing: -0.025em;
  font-size: 1.0625rem;
  text-decoration: none;
  flex-shrink: 0;
}

/* The suite mark: four quadrants, one per product. A logo that encodes the
   actual structure of the thing beats an abstract swoosh, and it gives the
   four hues a reason to exist before the reader meets the products. */
.logo-mark {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.5px;
  padding: 4.5px;
  background: var(--slate);
  flex-shrink: 0;
}

.logo-mark span {
  border-radius: 1.5px;
  background: currentColor;
  transition: opacity var(--t) var(--ease);
}
.logo-mark span:nth-child(1) { color: var(--gate); }
.logo-mark span:nth-child(2) { color: var(--access); }
.logo-mark span:nth-child(3) { color: var(--watch); }
.logo-mark span:nth-child(4) { color: var(--copy); }

.logo:hover .logo-mark span {
  opacity: 0.75;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

@media (min-width: 56rem) {
  .nav-links {
    display: flex;
  }
}

.nav-links a {
  text-decoration: none;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.875rem;
  border-radius: var(--r-sm);
  transition:
    color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}

.nav-links a:hover {
  color: var(--ink);
  background: oklch(0% 0 0 / 0.04);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

@media (min-width: 56rem) {
  .nav-actions {
    margin-left: 0;
  }
}

/* ===================================================================== */
/* Hero                                                                   */
/* ===================================================================== */

.hero {
  position: relative;
  padding: 9rem 0 5rem;
  overflow: hidden;
}

@media (min-width: 60rem) {
  .hero {
    padding: 11rem 0 6rem;
  }
}

/* Backdrop: two soft colour fields and a fine grid. Static. An animated
   gradient behind a headline is the single most common tell of a template,
   and it competes with the only thing on the screen worth reading. */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-bg::before,
.hero-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.4;
}

.hero-bg::before {
  width: 38rem;
  height: 38rem;
  top: -14rem;
  right: -10rem;
  background: radial-gradient(circle, oklch(86% 0.15 128 / 0.55), transparent 68%);
}

.hero-bg::after {
  width: 30rem;
  height: 30rem;
  top: 4rem;
  left: -14rem;
  background: radial-gradient(circle, oklch(56% 0.14 255 / 0.3), transparent 68%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, oklch(15% 0.004 85 / 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(15% 0.004 85 / 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Faded at every edge so the grid never shows a cut line. */
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent);
}

.hero-inner {
  position: relative;
  z-index: 1;
}

.hero .display {
  margin-top: 2rem;
  max-width: 16ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

/* Product names under the hero, each a link, each in its own hue. Says
   "there are four of these" before the reader has scrolled, without spending
   a whole section on it. */
.hero-products {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 4rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.hero-product {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.hero-product:hover {
  color: var(--ink);
}

.hero-product i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
  transition: transform var(--t) var(--ease-out);
}

.hero-product:hover i {
  transform: scale(1.4);
}

/* ===================================================================== */
/* Reveal                                                                 */
/* ===================================================================== */

/* Content lifts in as it enters the viewport. Short, small distance, once
   only. Anything longer than about half a second reads as the page being
   slow rather than the page being considered. */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
}

[data-reveal].in {
  opacity: 1;
  transform: none;
}

/* ===================================================================== */
/* Sections                                                               */
/* ===================================================================== */

section {
  position: relative;
  scroll-margin-top: 5rem;
}

.band {
  padding: 5rem 0;
}

@media (min-width: 60rem) {
  .band {
    padding: 7.5rem 0;
  }
}

.section-head {
  max-width: 44rem;
  margin-bottom: 3.5rem;
}

.section-head .eyebrow {
  margin-bottom: 1.25rem;
}

.section-head p {
  margin: 1.25rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: var(--measure);
  text-wrap: pretty;
}

/* ===================================================================== */
/* System diagram                                                         */
/* ===================================================================== */

/* The one thing on this page that could not be a list. Four products drawn
   as a system with a shared core, which is the entire claim — stated in copy
   it is a boast, drawn it is a diagram the reader checks against. */

.system {
  background: var(--slate);
  color: var(--paper);
  border-radius: var(--r-2xl);
  padding: 3rem 2rem;
  overflow: hidden;
  position: relative;
}

@media (min-width: 60rem) {
  .system {
    padding: 4.5rem 4rem;
  }
}

.system h2 {
  color: var(--paper);
}

.system .section-head p {
  color: oklch(100% 0 0 / 0.6);
}

.system-stage {
  position: relative;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 52rem) {
  .system-stage {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}

.node {
  position: relative;
  background: oklch(100% 0 0 / 0.05);
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.1);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.25rem;
  transition:
    background-color var(--t) var(--ease),
    transform var(--t) var(--ease-out);
}

.node:hover {
  background: oklch(100% 0 0 / 0.08);
  transform: translateY(-3px);
}

.node-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 999px;
  background: var(--accent);
  margin-bottom: 1rem;
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent);
}

.node strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.node span {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: oklch(100% 0 0 / 0.55);
}

/* The shared layer. Visually underneath the four nodes because that is what
   it is, and labelled in the reader's terms rather than ours. */
.system-base {
  margin-top: 1.25rem;
  background: oklch(100% 0 0 / 0.04);
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.08);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
}

.system-base-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: oklch(100% 0 0 / 0.4);
}

.system-base ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.system-base li {
  font-size: 0.875rem;
  color: oklch(100% 0 0 / 0.75);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.system-base li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--brand);
  flex-shrink: 0;
}

/* ===================================================================== */
/* Product showcase                                                       */
/* ===================================================================== */

.showcase {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .showcase {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* The whole card is the link. A card with a small "learn more" makes a reader
   aim at six words when the entire tile was already a target. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--t) var(--ease-out),
    box-shadow var(--t) var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* The product hue, wiped in from the top on hover. Carries the identity
   without tinting the card at rest, which would make four cards shout. */
.card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
  z-index: 2;
}

.card:hover::after {
  transform: scaleX(1);
}

.card-visual {
  position: relative;
  height: 11rem;
  background:
    radial-gradient(
      circle at 25% 15%,
      color-mix(in oklch, var(--accent) 14%, transparent),
      transparent 62%
    ),
    var(--paper-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 1.5rem;
}

.card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.card-mark {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--accent);
  color: var(--paper);
  flex-shrink: 0;
  box-shadow: 0 2px 8px color-mix(in oklch, var(--accent) 35%, transparent);
}

.card-mark svg {
  width: 1.125rem;
  height: 1.125rem;
}

.card-name {
  font-size: 1.0625rem;
  font-weight: 640;
  letter-spacing: -0.02em;
  display: block;
  line-height: 1.25;
}

.card-role {
  font-size: 0.75rem;
  color: var(--ink-3);
  font-weight: 500;
}

.card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.62;
  flex: 1;
}

.card-points {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.card-points li {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 0.3125rem 0.625rem;
  border-radius: var(--r-sm);
}

.card-foot {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1.5rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  font-weight: 550;
  font-family: var(--mono);
  letter-spacing: -0.02em;
}

.card-foot svg {
  width: 0.8125rem;
  height: 0.8125rem;
  transition: transform var(--t) var(--ease-out);
}

.card:hover .card-foot svg {
  transform: translate(2px, -2px);
}

/* --- Miniature product interfaces ------------------------------------ */
/* Abstract, not screenshots. A real screenshot at this size is unreadable
   and goes stale the moment the product ships; a diagram of the product's
   shape stays true and reads instantly. */

.mini {
  position: absolute;
  inset: 1.5rem 1.5rem auto;
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 0.875rem;
  transition: transform var(--t-slow) var(--ease-out);
}

.card:hover .mini {
  transform: translateY(-4px);
}

.mini-bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding-bottom: 0.625rem;
  margin-bottom: 0.625rem;
  border-bottom: 1px solid var(--line);
}

.mini-bar i {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--ink-4);
}

.mini-bar span {
  margin-left: auto;
  font-size: 0.5625rem;
  font-family: var(--mono);
  color: var(--ink-3);
  letter-spacing: -0.01em;
}

.mini-rows {
  display: grid;
  gap: 0.4375rem;
}

.mini-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mini-row i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--accent);
}

.mini-row i.dim {
  background: var(--ink-4);
}

.mini-row b {
  height: 0.375rem;
  border-radius: 999px;
  background: var(--paper-3);
  flex: 1;
}

.mini-row b.short {
  flex: 0 0 38%;
}

.mini-row b.mid {
  flex: 0 0 62%;
}

.mini-row em {
  font-size: 0.5625rem;
  font-family: var(--mono);
  font-style: normal;
  color: var(--ink-3);
  margin-left: auto;
}

/* Strip of marks, for the KyberCopy tile. */
.mini-strip {
  display: flex;
  gap: 2px;
  margin-top: 0.625rem;
}

.mini-strip i {
  width: 2px;
  height: 0.875rem;
  border-radius: 1px;
  background: var(--accent);
}

.mini-strip i.dim {
  background: var(--ink-4);
}

/* ===================================================================== */
/* Numbers                                                                */
/* ===================================================================== */

.figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 2rem;
}

@media (min-width: 52rem) {
  .figures {
    grid-template-columns: repeat(4, 1fr);
  }
}

.figure dt {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

.figure dd {
  margin: 0.625rem 0 0;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

.figure p {
  margin: 0.625rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ===================================================================== */
/* Reasons                                                                */
/* ===================================================================== */

.reasons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 52rem) {
  .reasons {
    grid-template-columns: repeat(3, 1fr);
  }
}

.reason {
  background: var(--paper);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm), var(--hairline);
  padding: 2rem 1.75rem;
  transition:
    transform var(--t) var(--ease-out),
    box-shadow var(--t) var(--ease-out);
}

.reason:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.reason-mark {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-md);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  margin-bottom: 1.25rem;
}

.reason-mark svg {
  width: 1.125rem;
  height: 1.125rem;
}

.reason h3 {
  margin-bottom: 0.75rem;
}

.reason p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* ===================================================================== */
/* Commitments                                                            */
/* ===================================================================== */

.rows {
  border-top: 1px solid var(--line);
}

.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t) var(--ease);
}

@media (min-width: 52rem) {
  .row {
    grid-template-columns: 3rem 15rem 1fr;
    gap: 2rem;
    align-items: baseline;
  }
}

.row-n {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.row dt {
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.015em;
}

.row dd {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.65;
  max-width: var(--measure);
}

/* ===================================================================== */
/* CTA                                                                    */
/* ===================================================================== */

.cta {
  position: relative;
  background: var(--slate);
  color: var(--paper);
  border-radius: var(--r-2xl);
  padding: 3.5rem 2rem;
  overflow: hidden;
  text-align: center;
}

@media (min-width: 60rem) {
  .cta {
    padding: 5.5rem 4rem;
  }
}

.cta::before {
  content: "";
  position: absolute;
  width: 34rem;
  height: 34rem;
  top: -18rem;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, oklch(86% 0.15 128 / 0.22), transparent 68%);
  filter: blur(60px);
  pointer-events: none;
}

.cta-inner {
  position: relative;
  max-width: 40rem;
  margin-inline: auto;
}

.cta h2 {
  color: var(--paper);
}

.cta p {
  color: oklch(100% 0 0 / 0.62);
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 1.25rem auto 0;
  max-width: 32rem;
  text-wrap: pretty;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2.25rem;
}

.cta .btn-quiet {
  background: oklch(100% 0 0 / 0.08);
  color: var(--paper);
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.16);
}
.cta .btn-quiet:hover {
  background: oklch(100% 0 0 / 0.14);
}

/* ===================================================================== */
/* Footer                                                                 */
/* ===================================================================== */

.footer {
  border-top: 1px solid var(--line);
  padding: 4rem 0 2.5rem;
  margin-top: 5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 52rem) {
  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 3rem;
  }
}

.footer h4 {
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin: 0 0 1.125rem;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.footer a {
  text-decoration: none;
  color: var(--ink-2);
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color var(--t-fast) var(--ease);
}

.footer a:hover {
  color: var(--ink);
}

.footer-swatch {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

.footer-note {
  margin: 1.25rem 0 0;
  color: var(--ink-3);
  font-size: 0.875rem;
  line-height: 1.65;
  max-width: 22rem;
}

.footer-base {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-3);
  font-size: 0.8125rem;
}