/* ==========================================================================
   Voxel, design system and components.

   Order: tokens, reset, primitives, layout, components, page sections,
   responsive, motion preferences, print.
   Everything is plain CSS custom properties. No build step, no framework.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces. Three levels the sections alternate between, the way Azuro
     alternates its navy: base, raised, elevated. Kept neutral rather than
     tinted, so the emerald stays the only colour on the page. */
  --bg:            #0B0C0C;
  --bg-raised:     #121414;
  --bg-sunken:     #070808;
  --bg-elevated:   #181B1A;

  /* The one light surface on the site: the founder portrait panel. The
     photographs are shot on a studio backdrop and Luka wants them read that
     way, so the cutout sits on white rather than on the page. */
  --bg-photo:      #FFFFFF;

  /* Hairlines. Every panel edge is one of these; no shadows anywhere. */
  --line-soft:     rgba(150, 175, 185, 0.08);
  --line:          rgba(150, 175, 185, 0.16);
  --line-strong:   rgba(150, 175, 185, 0.30);

  /* Text.
     Contrast against --bg, measured: fg 16.2:1, fg-mid 7.7:1, fg-dim 4.7:1.
     fg-dim is the floor for anything carrying meaning, because the mono labels
     sit at 12px and need 4.5:1. fg-faint (3.3:1) is decoration only: rules,
     icons, and the resting state of something that turns accent on hover. */
  --fg:            #F4F5F3;
  --fg-mid:        #A2ADAB;
  --fg-dim:        #798583;
  --fg-faint:      #586261;

  /* Accent. One colour, used as a signal and never as decoration. */
  --accent:        #35E0A1;
  --accent-deep:   #10B981;
  --accent-wash:   rgba(53, 224, 161, 0.09);
  --accent-line:   rgba(53, 224, 161, 0.34);
  --on-accent:     #03130C;

  /* Type. Manrope carries the display sizes and the running text; JetBrains
     Mono is kept for the small uppercase labels only. Manrope ships no italic
     file: the slanted accent phrases use the synthesised oblique, which is the
     effect being reproduced, not an accident. */
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type scale. Sentence case at weight 800 needs the room uppercase did
     not: the hero tops out at 132px, the section heads at 72px, both on a
     0.92 line and a -0.05em track. Long German compounds set the lower bound. */
  --t-label: 0.75rem;
  --t-small: 0.9375rem;
  --t-body:  1.0625rem;
  --t-lead:  clamp(1.0625rem, 0.98rem + 0.5vw, 1.3125rem);
  --t-h4:    clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
  --t-h3:    clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
  --t-h2:    clamp(2rem, 1.1rem + 3.9vw, 4.5rem);
  --t-h1:    clamp(2.5rem, 1.05rem + 6.4vw, 8.25rem);

  /* Space scale, 4px base */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Layout. Corners are rounded again: 10px on controls, 16px on panels,
     a full pill on badges. */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 9.5rem);
  --grid-cell: 22px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Motion. Short and mechanical; nothing floats or eases in slowly. */
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.2s;

  --nav-h: 80px;

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

/* The browser's own `[hidden]` rule loses to any author rule that sets a
   display, and the contact form hides a `display: grid` branch with it. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

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

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

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

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

/* --------------------------------------------------------------------------
   3. Typographic primitives
   -------------------------------------------------------------------------- */

/* Display sizes are sentence case, very large, very tight. The hierarchy is
   carried by size and by the accent phrase, not by capitals. */
.h1, .h2 {
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.92;
  text-wrap: balance;
}

.h3, .h4 {
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.2;
  text-wrap: balance;
}

.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); }
.h4 { font-size: var(--t-h4); }

/* The emphasised phrase in a headline: slanted, a notch lighter than the
   words around it, in the accent. Manrope has no italic file, so this is the
   browser's synthesised oblique, which is exactly the effect wanted. */
.h1 em, .h2 em, .h3 em, .h4 em, .ital {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

.h3 em, .h4 em { font-weight: 600; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--fg-mid);
  max-width: 62ch;
  text-wrap: pretty;
}

.body { color: var(--fg-mid); max-width: 68ch; text-wrap: pretty; }

.small { font-size: var(--t-small); color: var(--fg-dim); }

/* Monospace uppercase kicker, introduced by a shell prompt marker. */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-dim);
  line-height: 1.1;
}

.label::before {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--accent);
  align-self: center;
}

.label--plain::before { background: var(--fg-faint); }

.mono {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

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

.section { padding-block: var(--section-y); position: relative; }

/* The page steps between the three surface levels rather than staying flat:
   a section on --bg-raised reads as lifted out of the page without a shadow.
   --sunken keeps its name for the sections that were already using it. */
.section--sunken { background: var(--bg-raised); }
.section--tight { padding-block: clamp(3rem, 6vw, 6rem); }

/* Hairline that separates two sections sitting on the same level. */
.section--ruled { border-top: 1px solid var(--line-soft); }

.sec-head { max-width: 900px; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.sec-head .label { margin-bottom: var(--sp-5); }
.sec-head .h2 + .body,
.sec-head .h2 + .lead { margin-top: var(--sp-5); }

.sec-head--wide { max-width: none; }

.sec-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  max-width: none;
}

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

/* The card grids are separate rounded panels with air between them, each
   drawing its own edge. */
.lattice {
  display: grid;
  gap: var(--sp-5);
}

/* ---- Panel: a block framed as a system window ---------------------------
   Used where a section benefits from reading as a running program (the
   mockups, the log, the case grid, the tier grid). Deliberately not applied
   to every group, or the metaphor stops meaning anything. */

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-raised);
}

.panel__bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elevated);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-mid);
}

/* Square pips, not the three coloured circles of a desktop window. */
.panel__dots { display: flex; gap: 4px; flex: none; }
.panel__dots i { width: 6px; height: 6px; background: var(--line-strong); }
.panel__dots i:first-child { background: var(--accent); }

/* fg-faint would sit at 2.8:1 against the raised bar; this readout is text. */
.panel__meta { margin-left: auto; color: var(--fg-dim); letter-spacing: 0.12em; }

.panel > .lattice,
.panel > .tiers,
.panel > .cases {
  border: 0;
  background: var(--line-soft);
}

.lattice-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lattice-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   5. Background texture: fine grid plus grain
   -------------------------------------------------------------------------- */

/* Pixel matrix rather than a drafting grid: one dot per cell, fading out
   downward so it sits behind the hero without becoming wallpaper. */
.gridlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(150, 175, 185, 0.26) 1px, transparent 0);
  background-size: var(--grid-cell) var(--grid-cell);
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 88%);
  z-index: 0;
}

/* Faint CRT scanline over the whole page. 4px pitch avoids moire on the
   common display densities; the alpha is low enough to read as grain. */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(190, 215, 225, 0.017) 0 1px,
    transparent 1px 4px
  );
}

/* --------------------------------------------------------------------------
   6. Buttons and links
   -------------------------------------------------------------------------- */

/* Rounded, set in the display face, with an arrow that steps forward on
   hover. Three shapes only: a filled accent one, an outlined one, and the
   light-filled one the header carries. Sizes are the measured ones:
   14px/24px on 10px radius at 15/700, 13px/22px outlined at 15/500. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

/* The arrow is drawn, not typed, so the content files carry the label alone
   and read the same in the three languages. */
.btn::after {
  content: "→";
  font-size: 1em;
  line-height: 1;
  transition: transform 0.35s var(--ease-out);
}

.btn:hover::after { transform: translateX(4px); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.btn--primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--on-accent);
}

.btn--ghost {
  border-color: var(--line);
  color: var(--fg);
  background: transparent;
  font-weight: 500;
  padding: 0.8125rem 1.375rem;
}

.btn--ghost::after { content: "↗"; }

.btn--ghost:hover {
  border-color: var(--line-strong);
  background: var(--bg-raised);
}

/* The header's own button: light fill, dark label, one notch smaller. */
.btn--light {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.6875rem 1.125rem;
  border-radius: 8px;
}

.btn--light:hover { background: #FFFFFF; border-color: #FFFFFF; }

.btn--sm { padding: 0.5rem 0.9rem; font-size: 0.875rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Inline text link with a rule that draws itself on hover. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  position: relative;
  padding-bottom: 3px;
}

.tlink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.tlink:hover::after { transform: scaleX(1); }
.tlink .arw { transition: transform 0.35s var(--ease-out); }
.tlink:hover .arw { transform: translateX(4px); }

/* Social marks. One row, used twice: the agency's own in the footer, and each
   founder's under his card. Defined once here rather than in either section,
   because the two have to stay the same object at two sizes.

   The target is 40px square while the mark inside is 18px. That gap is
   deliberate: an icon link small enough to look right in a footer is too small
   to hit on a phone, so the box is padded out to the size a thumb needs and the
   drawing stays the size the layout wants. */
.social { display: flex; gap: var(--sp-2); align-items: center; }

.social__link {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  color: var(--fg-mid);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
              background-color 0.25s var(--ease);
}

.social__link:hover {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-wash);
}

.social__link svg { display: block; }

/* A mark whose account has no URL yet. It inherits the finished look on
   purpose: Luka wants to see the row as it will ship while the addresses are
   still being gathered, so nothing here changes the border or the colour. It is
   a span rather than an anchor, so it cannot be clicked or focused whatever it
   looks like, and the only rule needed is the one that stops the pointer from
   promising otherwise. */
.social__link.is-pending { cursor: default; }

/* --------------------------------------------------------------------------
   7. Header and navigation
   -------------------------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
}

.skip:focus { left: 0; }

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
              backdrop-filter 0.4s var(--ease);
}

.header.is-stuck {
  background: rgba(11, 12, 12, 0.78);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  flex: none;
}

.brand__mark { width: 22px; height: 22px; flex: none; }
.brand__mark path { fill: var(--accent); }
.brand:hover .brand__mark { animation: markspin 0.7s var(--ease-out); }

@keyframes markspin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(90deg); }
}

.nav { display: flex; align-items: center; gap: var(--sp-6); margin-left: auto; }

.nav__list { display: flex; align-items: center; gap: var(--sp-5); }

.nav__link {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg-mid);
  position: relative;
  padding-block: 6px;
  transition: color 0.25s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}

.nav__link:hover { color: var(--fg); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__link[aria-current="page"] { color: var(--fg); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Language switcher, a small segmented control. */
.langs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.langs__item {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-pill);
  color: var(--fg-dim);
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.langs__item:hover { color: var(--fg); }

.langs__item[aria-current="true"] {
  background: var(--accent-wash);
  color: var(--accent);
}

.burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  position: relative;
  flex: none;
}

.burger span {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--fg);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}

.burger span:nth-child(1) { transform: translate(-50%, -4px); }
.burger span:nth-child(2) { transform: translate(-50%, 4px); }

body.menu-open .burger span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { transform: translate(-50%, 0) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}

body.menu-open .drawer { opacity: 1; visibility: visible; transform: none; }
body.menu-open { overflow: hidden; }

.drawer__list { display: flex; flex-direction: column; }

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1.375rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.drawer__link .arw { color: var(--fg-faint); }
.drawer__link[aria-current="page"] { color: var(--accent); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(3.5rem, 9vw, 8rem));
  padding-bottom: clamp(3.5rem, 8vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__inner { position: relative; z-index: 2; }

.hero .label { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.hero__title { max-width: 17ch; }
.hero--page .hero__title { max-width: 20ch; }

.hero__body { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); max-width: 56ch; }
.hero__actions { margin-top: clamp(2rem, 4vw, 2.75rem); }

.hero--page { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }

/* Word-by-word headline reveal. Each word is clipped by its own wrapper.
   The padding widens the clip box so accents and descenders are not shaved
   off; the matching negative margin keeps the layout metrics identical to
   unwrapped text. */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.14em 0.07em 0.12em;
  margin: -0.14em -0.07em -0.12em;
}

/* Long German compounds get a proper hyphenation point rather than running
   past the gutter. The lang attribute on <html> selects the dictionary. */
.w, .w > i { hyphens: auto; overflow-wrap: break-word; }

.w > i {
  display: inline-block;
  font-style: normal;
  transform: translateY(105%);
  opacity: 0;
  animation: wordUp 0.9s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 42ms + 120ms);
}

@keyframes wordUp {
  to { transform: translateY(0); opacity: 1; }
}

/* Scrolling proof ticker under the hero. */
.ticker {
  position: relative;
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding-block: 1rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: tick 44s linear infinite;
}

.ticker__group { display: flex; flex: none; }

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding-inline: 1.6rem;
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
  white-space: nowrap;
}

.ticker__item::after {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--accent);
  opacity: 0.6;
}

@keyframes tick {
  to { transform: translateX(-50%); }
}

.ticker:hover .ticker__track { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   9. Numbered card
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.4vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease);
  overflow: hidden;
}

/* Emerald rule that wipes across the top edge on hover. */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}

.card:hover { background: var(--bg-elevated); border-color: var(--line-strong); }
.card:hover::before { transform: scaleX(1); }

.card__num {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
  transition: color 0.35s var(--ease);
}

.card:hover .card__num { color: var(--accent); }

.card__title { margin-top: var(--sp-2); }
.card__body { color: var(--fg-mid); font-size: var(--t-small); line-height: 1.62; }

.card__list {
  margin-top: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.card__list li {
  font-size: var(--t-small);
  color: var(--fg-mid);
  padding-left: 1.1rem;
  position: relative;
}

.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 5px;
  height: 1px;
  background: var(--accent);
}

/* Card variant used for the "what it is not" trio. */
.card--neg .card__num { color: var(--fg-dim); }
.card--neg:hover::before { background: linear-gradient(to right, var(--fg-dim), transparent); }
.card--neg:hover .card__num { color: var(--fg-mid); }

/* --------------------------------------------------------------------------
   10. Feature checklist
   -------------------------------------------------------------------------- */

.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

.checks li {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--t-small);
  color: var(--fg-mid);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.checks li:hover { color: var(--fg); background: var(--bg-elevated); }

.checks li .tick { flex: none; color: var(--accent); }

/* --------------------------------------------------------------------------
   12. Pricing
   -------------------------------------------------------------------------- */

.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

/* The three tiers are drawn identically, accent edge and lifted surface on all
   of them. Luka asked for that on 2026-08-09: the grid is one offer at three
   depths, so nothing in the styling should rank them. Only the badge does. */
.tier {
  background: var(--bg-elevated);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: relative;
}

.tier__flag {
  position: absolute;
  top: clamp(1.75rem, 3vw, 2.5rem);
  right: clamp(1.75rem, 3vw, 2.5rem);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-pill);
}

.tier__name {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.tier__price { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }

.tier__from {
  font-size: 0.8125rem;
  color: var(--fg-dim);
  text-transform: lowercase;
}

.tier__amount {
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}

.tier__period { font-size: var(--t-small); color: var(--fg-dim); }

.tier__body { font-size: var(--t-small); color: var(--fg-mid); }

.tier__features {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-top: var(--sp-4);
  margin-top: auto;
  border-top: 1px solid var(--line-soft);
}

.tier__features li {
  display: flex;
  gap: 0.7rem;
  font-size: var(--t-small);
  color: var(--fg-mid);
  line-height: 1.5;
}

.tier__features .tick { flex: none; color: var(--accent); margin-top: 0.32em; }

.tier .btn { margin-top: var(--sp-3); }

.pricing__note {
  margin-top: var(--sp-5);
  font-size: var(--t-small);
  color: var(--fg-dim);
  max-width: 70ch;
}

.custom {
  margin-top: var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  gap: var(--sp-6);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.custom__text { max-width: 62ch; }
.custom__name { color: var(--accent); margin-bottom: var(--sp-2); }

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */

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

.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
  cursor: pointer;
  list-style: none;
  font-size: var(--t-h4);
  font-weight: 500;
  letter-spacing: -0.018em;
  transition: color 0.25s var(--ease);
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent); }

.faq__sign {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--fg-dim);
  transition: color 0.25s var(--ease);
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition: transform 0.4s var(--ease);
}

.faq__sign::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.faq__sign::after  { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }

.faq__item[open] .faq__sign { color: var(--accent); }
.faq__item[open] .faq__sign::after { transform: translate(-50%, -50%) scaleY(0); }

.faq__a {
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-right: clamp(1.5rem, 6vw, 5rem);
  color: var(--fg-mid);
  font-size: var(--t-small);
  max-width: 78ch;
  animation: faqIn 0.4s var(--ease-out);
}

@keyframes faqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   14. Split feature block (proof, other-business)
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* Used where the right column is much taller than the left (the contact
   form). The heading tracks the form instead of leaving a dead half-screen. */
.split--sticky { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }

@media (min-width: 901px) {
  .split--sticky > :first-child {
    position: sticky;
    top: calc(var(--nav-h) + 3rem);
  }
}

.quote {
  border-left: 2px solid var(--accent);
  padding: 0.35rem 0 0.35rem 1.5rem;
  font-size: var(--t-lead);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--fg);
  text-wrap: pretty;
}

.aud { display: flex; flex-direction: column; gap: var(--sp-3); }
.aud__item {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.aud__item h3 { margin-bottom: var(--sp-2); }

/* --------------------------------------------------------------------------
   15. Callout band
   -------------------------------------------------------------------------- */

.band {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 5rem);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(90% 140% at 50% 0%, rgba(53, 224, 161, 0.10), transparent 62%),
    var(--bg-raised);
}

.band__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--sp-5); }

/* justify-items:center sizes each child to max-content, which can overrun the
   padding box when a label is long (German CTAs are the usual trigger). */
.band__inner > *, .empty > * { max-width: 100%; }
.band .h2 { max-width: 20ch; }
.band .body { max-width: 56ch; }

/* --------------------------------------------------------------------------
   16. Team
   -------------------------------------------------------------------------- */

.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

.person {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.person:hover { background: var(--bg-elevated); border-color: var(--line-strong); }

/* The portrait panel. A founder with a photograph gets the whole picture on
   white. The cutout is what makes that white uniform: the studio backdrop is
   never quite even, and the margin padded on to reach 4:5 has no backdrop at
   all, so both are replaced by the one flat colour. One without a photograph
   gets their initials at the same 4:5, so a card with no picture holds the
   grid instead of collapsing next to one that has it. */
.person__frame {
  aspect-ratio: 4 / 5;
  width: 100%;
  /* Below 901px the grid drops to one column and the card doubles in width. A
     4:5 panel following it to 800px would be a full screen of photograph, so
     the portrait stops growing at roughly the width it has on a desktop card. */
  max-width: 480px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--bg-photo);
  transition: border-color 0.4s var(--ease);
}

.person:hover .person__frame { border-color: var(--accent-line); }

/* The file is already 4:5 and already framed, so cover is a no-op that only
   guards against a replacement image of another shape. */
.person__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Initials for a founder with no photograph yet. On the white panel the accent
   green drops to 2.6:1, so this uses the ink the design system already keeps
   for a light surface. */
.person__mono {
  font-family: var(--mono);
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--on-accent);
}

/* One line per skill, named then explained. Same tick as the pricing tiers, so
   the two lists read as the same object in two places. */
.person__skills {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
}

.person__skills li { display: flex; gap: 0.7rem; }

/* align-self, not just a margin: the reset gives svg height:auto, so a stretched
   flex item would grow the tick to the height of the whole skill. */
.person__skills .tick {
  flex: none;
  align-self: flex-start;
  color: var(--accent);
  margin-top: 0.28em;
}

.skill { display: flex; flex-direction: column; gap: 0.2rem; }

.skill__name {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.005em;
}

.skill__body {
  font-size: var(--t-small);
  color: var(--fg-mid);
  line-height: 1.55;
}

/* The founder's own profiles, sitting directly under his portrait. The card is
   a flex column with its own gap, so this only trims that gap a little: the row
   belongs to the photograph above it, not to the name below. */
.person__social { margin-top: calc(var(--sp-2) - var(--sp-4)); }

.person__role {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
}

.person__focus { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: var(--sp-4); }

.chip {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.7rem;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.person:hover .chip { border-color: var(--line-strong); color: var(--fg-mid); }

/* --------------------------------------------------------------------------
   17. Blog
   -------------------------------------------------------------------------- */

.empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(53, 224, 161, 0.05), transparent 60%),
    var(--bg);
}

.empty__glyph {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}

.empty .body { max-width: 54ch; margin-inline: auto; }

.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

.post {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.post:hover { background: var(--bg-elevated); border-color: var(--line-strong); }
.post__meta { display: flex; gap: 0.75rem; align-items: center; color: var(--fg-dim); }
.post__excerpt { font-size: var(--t-small); color: var(--fg-mid); }
.post .tlink { margin-top: auto; padding-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   17b. Product page: chip, mockups, terminal, cases, trial banner
   -------------------------------------------------------------------------- */

/* Small honest badge sitting next to the hero eyebrow. */
.chip-accent {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-pill);
  padding: 0.34rem 0.7rem;
  white-space: nowrap;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.hero__eyebrow .label { margin-bottom: 0; }

/* Interface showcase: the desktop window takes the full content width, the
   check row sits under it, then the two phones share a row. */
.showcase {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3.25rem);
}

.showcase__phones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
  justify-items: center;
  align-items: start;
}

/* The cell is the size container the two devices measure themselves against,
   which is what lets one CSS phone and one photograph share a geometry. */
.showcase__cell {
  width: min(100%, 19rem);
  container-type: inline-size;
}

/* The four checks read as one proof row under the window. The compound
   selector outweighs the base .tickets rule declared further down. */
.tickets.tickets--row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.85rem 2rem;
}

.showcase__label {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
  margin-bottom: var(--sp-4);
}

/* --- Product window mockup --- */

/* Light panes inside the dark frame: the block reads as a screenshot of the
   product rather than one more dark card. The --w-* tokens exist only here
   and on the phone; every text token clears WCAG AA on its surface. */
.mock, .phone {
  --w-bg: #FFFFFF;
  --w-bg2: #F4F5F3;
  --w-line: #DDE1DB;
  --w-fg: #141C17;
  --w-mid: #3D4742;
  --w-dim: #59645D;
  --w-accent: #087255;
  --w-wash: #E8F5EE;
}

.mock {
  border: 1px solid var(--line);
  /* This mockup depicts the product running on a Mac, so macOS realism wins
     INSIDE the frame: rounded window, round traffic lights. The exception is
     deliberate and stops at .mock; the terminal card keeps the square pips. */
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-raised);
  width: 100%;
}

.mock .mock__dots { gap: 7px; }

.mock .mock__dots i,
.mock .mock__dots i:first-child {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #FF5F57;
}

.mock .mock__dots i:nth-child(2) { background: #FEBC2E; }
.mock .mock__dots i:nth-child(3) { background: #28C840; }

.mock__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elevated);
}

.mock__dots { display: flex; gap: 6px; flex: none; }

.mock__dots i {
  width: 7px;
  height: 7px;
  background: var(--line-strong);
}

/* One live pip, two idle. Traffic lights would read as a desktop app. */
.mock__dots i:first-child { background: var(--accent); }

.mock__title {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  /* Sits on --bg-elevated, a lighter surface than --bg, where --fg-dim would
     fall to 4.4:1 and miss AA. */
  color: var(--fg-mid);
}

.mock__url {
  margin-inline: auto;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fg-mid);
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 0.25rem 0.9rem;
}

/* Counterweight to the dots, so the URL chip sits truly centered. */
.mock__bar::after { content: ""; width: 47px; flex: none; }

.mock__body {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.92fr);
  background: var(--w-bg);
}

/* -- Left pane: the conversation -- */

.mock__chat {
  padding: clamp(1.1rem, 2vw, 1.8rem) clamp(1.15rem, 2.5vw, 2.2rem)
           clamp(1rem, 2vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  min-width: 0;
}

/* At full content width the panes are wide; cap the measure so the reply
   stays a readable document rather than a wall-to-wall line. */
.doc__p, .doc__title { max-width: 62ch; }
.msg--you { max-width: min(88%, 34rem); }

.mock__chathead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--w-line);
}

.mock__app {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--w-fg);
}

.mock__status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--w-accent);
}

.mock__status i { width: 6px; height: 6px; background: var(--w-accent); }

.msg { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }

.msg__meta {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--w-dim);
}

.msg--you { align-self: flex-end; align-items: flex-end; }

.msg__text {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--w-fg);
  border: 1px solid var(--w-line);
  border-radius: 0;
  background: var(--w-bg2);
  padding: 0.7rem 0.85rem;
}

.msg--ai .msg__meta, .msg__meta--ai { color: var(--w-accent); }

.msg--ai .msg__text {
  border-color: var(--w-accent);
  background: var(--w-wash);
}

/* The assistant's reply, laid out like the document it produces. */
.doc { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }

.doc__title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--w-fg);
}

.doc__p { font-size: 0.75rem; line-height: 1.6; color: var(--w-mid); }

.doc__h {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--w-fg);
  margin-top: 0.2rem;
}

.doc__offers { display: flex; flex-direction: column; }

.doc__offers li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--w-line);
  font-size: 0.75rem;
  line-height: 1.5;
}

.doc__offers li:last-child { border-bottom: 1px solid var(--w-line); }
.doc__offers strong { color: var(--w-fg); font-weight: 700; }
.doc__offers span { color: var(--w-mid); }

.mock__inputrow {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--w-line);
  background: var(--w-bg);
  padding: 0.55rem 0.7rem;
}

.mock__inputtext {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--w-dim);
}

.mock__inputbtn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--w-dim);
  border: 1px solid var(--w-line);
}

.mock__inputbtn--send {
  color: #FFFFFF;
  background: var(--w-accent);
  border-color: var(--w-accent);
}

/* -- Right pane: the file workspace -- */

.mock__side {
  border-left: 1px solid var(--w-line);
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1rem, 2vw, 1.6rem);
  background: var(--w-bg2);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.mock__crumb {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--w-fg);
  min-width: 0;
}

.mock__crumb span {
  color: var(--w-dim);
  text-transform: none;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.mock__act {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--w-fg);
  border: 1px solid var(--w-line);
  background: var(--w-bg);
  padding: 0.32rem 0.5rem;
}

.mock__act--solid {
  color: #FFFFFF;
  background: var(--w-accent);
  border-color: var(--w-accent);
}

.mock__search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.6875rem;
  color: var(--w-dim);
  border: 1px solid var(--w-line);
  background: var(--w-bg);
  padding: 0.42rem 0.55rem;
}

.mock__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
}

.mock__table th {
  font-size: 0.5625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--w-dim);
  text-align: left;
  padding: 0 0.3rem 0.4rem 0;
  border-bottom: 1px solid var(--w-line);
}

.mock__table td {
  font-size: 0.65625rem;
  color: var(--w-dim);
  padding: 0.42rem 0.3rem 0.42rem 0;
  border-bottom: 1px solid var(--w-line);
  white-space: nowrap;
}

.mock__table tr td:first-child {
  color: var(--w-fg);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.mock__table td:first-child span { overflow: hidden; text-overflow: ellipsis; }
.mock__table td svg { flex: none; color: var(--w-dim); }
.mock__table tr:last-child td { border-bottom: 0; }

.mock__table th:last-child,
.mock__table td:last-child { text-align: right; padding-right: 0; }

/* --- Phone mockups --- */

/* One device, shown twice. The right-hand phone is the photograph of the AIOS
   pinned to a real home screen; the left one is drawn in CSS around the same
   conversation as the desktop window. So the pair reads as one object, the
   drawn phone takes its geometry from the photograph, measured by
   tools/cutout_phone.py: body 707 x 1509, corner radius 114, bezel 27, dynamic
   island 210 x 58. Everything below is those numbers as a share of the body
   width, so the two devices render at exactly the same size at any viewport.

   --device-w is the width of the phone BODY, side buttons excluded. It is a
   container unit rather than a percentage on purpose: a percentage resolves
   against the height in `height`, and against the element's own box in
   `border-radius`, which turned the island into a hairline and the corners
   into ellipses. 100cqi means the cell's width everywhere. */
.showcase__phones { --device-w: 100cqi; }

.phone {
  width: var(--device-w);
  aspect-ratio: 707 / 1509;
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--device-w) * 0.1612);
  padding: calc(var(--device-w) * 0.0382);
  background: #05070A;
}

.phone__screen {
  position: relative;
  height: 100%;
  border: 1px solid var(--w-line);
  border-radius: calc(var(--device-w) * 0.123);
  background: var(--w-bg);
  overflow: hidden;
}

.phone__island {
  width: calc(var(--device-w) * 0.297);
  aspect-ratio: 210 / 58;
  border-radius: 99px;
  background: #05070A;
  flex: none;
}

/* -- Phone A: the iOS conversation -- */

.phone__screen--chat { display: flex; flex-direction: column; }

.ios__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.65rem 1rem 0.45rem;
  color: var(--w-fg);
}

.ios__time {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  min-width: 44px;
}

.ios__glyphs {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 44px;
  justify-content: flex-end;
}

.ios__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem 0.6rem;
  background: var(--w-bg2);
  border-bottom: 1px solid var(--w-line);
}

.ios__app {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--w-fg);
}

.ios__hbtn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--w-bg);
  border: 1px solid var(--w-line);
  color: var(--w-mid);
  flex: none;
}

/* The screen is now as tall as the photographed one, so the conversation has
   slack. It settles on the input row the way a real thread does, leaving the
   empty space above rather than below. */
.ios__chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.8rem 0.8rem 0.5rem;
  gap: 0.3rem;
}

.ios__who {
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--w-dim);
  margin-bottom: 0.15rem;
}

.ios__who--you { align-self: flex-end; }

.ios__bubble {
  align-self: flex-end;
  max-width: 92%;
  font-size: 0.71875rem;
  line-height: 1.5;
  color: var(--w-fg);
  background: #E9F1EC;
  border-radius: 14px 14px 4px 14px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.55rem;
}

.ios__card {
  position: relative;
  border: 1px solid var(--w-line);
  border-radius: 14px;
  background: var(--w-bg);
  padding: 0.75rem 0.8rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.ios__title {
  font-size: 0.71875rem;
  font-weight: 700;
  color: var(--w-fg);
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--w-line);
}

.ios__p { font-size: 0.6875rem; line-height: 1.55; color: var(--w-mid); }

.ios__h { font-size: 0.6875rem; font-weight: 700; color: var(--w-fg); }

/* The tiers, name and price only: on a phone the one-line pitch each tier
   carries on the desktop would wrap to three lines and drown the card. */
.ios__offers {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-right: 1.9rem;
}

.ios__offers li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.6875rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--w-line);
  border-radius: 9px;
  background: var(--w-bg2);
}

.ios__offers strong { font-weight: 700; color: var(--w-fg); }
.ios__offers span { font-family: var(--mono); font-size: 0.625rem; color: var(--w-accent); }

/* The scroll affordance: there is more reply below the fold. */
.ios__more {
  position: absolute;
  right: 0.55rem;
  bottom: 0.5rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--w-bg);
  border: 1px solid var(--w-line);
  color: var(--w-mid);
  box-shadow: 0 1px 4px rgba(10, 14, 12, 0.12);
}

.ios__inputrow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.7rem 0.85rem;
  margin-top: auto;
}

.ios__field {
  flex: 1;
  min-width: 0;
  font-size: 0.71875rem;
  color: var(--w-dim);
  background: var(--w-bg2);
  border: 1px solid var(--w-line);
  border-radius: 99px;
  padding: 0.55rem 0.85rem;
}

.ios__round {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--w-bg2);
  border: 1px solid var(--w-line);
  color: var(--w-mid);
  flex: none;
}

.ios__round--send {
  color: #FFFFFF;
  background: var(--w-accent);
  border-color: var(--w-accent);
}

/* -- Phone B: the photograph -- */

/* The cutout keeps the side buttons, so its intrinsic box is 716 wide against
   a 707 body. Widening it by that ratio and pulling the overhang back with a
   negative margin makes the photographed body exactly as wide, and exactly as
   tall, as the drawn phone beside it. */
.phone-shot {
  display: block;
  width: calc(var(--device-w) * 716 / 707);
  /* The reset caps every image at its container; here the buttons are meant to
     hang over that edge by design. */
  max-width: none;
  height: auto;
  margin-inline: calc(var(--device-w) * -4.5 / 707);
}

/* --- Checklist beside the mockups --- */

.tickets { display: flex; flex-direction: column; gap: 0.85rem; }

.tickets li {
  display: flex;
  gap: 0.7rem;
  font-size: var(--t-small);
  color: var(--fg-mid);
  line-height: 1.5;
}

.tickets .tick { flex: none; color: var(--accent); margin-top: 0.3em; }

/* --- Terminal log card --- */

.term {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-sunken);
}

.term__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elevated);
}

.term__body { padding: clamp(1.1rem, 2.4vw, 1.6rem); font-family: var(--mono); }

.term__who {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: block;
  margin-bottom: 0.5rem;
}

.term__who--ai { color: var(--accent); margin-top: 1.35rem; }

.term__prompt {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--fg);
  padding-left: 1rem;
  border-left: 2px solid var(--line-strong);
}

.term__lines { display: flex; flex-direction: column; gap: 0.6rem; }

.term__lines li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--fg-mid);
}

.term__lines .tick { flex: none; color: var(--accent); margin-top: 0.22em; }

/* Closing remark on the log, set as a source comment rather than an aside. */
.term__note {
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--fg-mid);
  padding-left: 1.5rem;
  position: relative;
}

.term__note::before {
  content: "//";
  position: absolute;
  left: 0;
  color: var(--fg-faint);
}

.live__tagline {
  margin-top: var(--sp-6);
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
}

/* --- Use case cards --- */

.cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

.case {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease);
}

.case:hover { background: var(--bg-elevated); border-color: var(--line-strong); }

.case__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.case__badge {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.32rem 0.65rem;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.case:hover .case__badge { color: var(--accent); border-color: var(--accent-line); }

.case__figure {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--fg);
  white-space: nowrap;
}

.case__body { font-size: var(--t-small); color: var(--fg-mid); }

.case__cmd {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.case__cmd-label {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
}

.case__cmd code {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: 0;
  padding: 0.6rem 0.75rem;
  display: block;
}

/* --- Free trial banner --- */

.trial {
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: var(--sp-5);
  display: flex;
  gap: var(--sp-6);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background:
    radial-gradient(90% 160% at 0% 0%, rgba(53, 224, 161, 0.10), transparent 62%),
    var(--bg-raised);
}

.trial__text { max-width: 62ch; display: grid; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   18. Forms
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--sp-5); }

.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }

.field { display: grid; gap: 0.55rem; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
}

.field label .opt { color: var(--fg-dim); text-transform: none; letter-spacing: 0.04em; }

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  font-size: var(--t-small);
  color: var(--fg);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}

.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }

.field input::placeholder,
.field textarea::placeholder { color: var(--fg-dim); }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--line-strong); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.field select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236C736E' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  padding-right: 2.6rem;
}

.field select option { background: var(--bg-raised); color: var(--fg); }

/* The form opens on the one question that routes everything after it: the
   ready-made AIOS, or a custom build. Two pills rather than two cards, because
   the answer does not describe an offer, it swaps the fields underneath. The
   input stays in the page, focusable and announced, and only its box is drawn.
   Weight and padding are identical in both states: a checked pill must not
   change width, or the row reflows under the cursor. */
.pillset {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.7rem;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.pillset legend {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  padding: 0;
}

.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.pill { display: block; }

.pill input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pill__box {
  display: block;
  padding: 0.6rem 1.15rem;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.25;
  color: var(--fg-mid);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
              background-color 0.25s var(--ease);
}

.pill:hover .pill__box { color: var(--fg); border-color: var(--line-strong); }

/* The state survives without colour: the pill fills in. */
.pill input:checked + .pill__box {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.pill input:focus-visible + .pill__box {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Honeypot, hidden from humans and from assistive tech. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); justify-content: space-between; }
.form__privacy { font-size: 0.8125rem; color: var(--fg-dim); max-width: 46ch; }

.form__status { display: none; border-radius: var(--radius); padding: 1.1rem 1.35rem; font-size: var(--t-small); }
.form__status.is-on { display: block; }
.form__status--ok { border: 1px solid var(--accent-line); background: var(--accent-wash); }
.form__status--err { border: 1px solid rgba(255, 138, 128, 0.35); background: rgba(255, 138, 128, 0.08); }
.form__status strong { display: block; margin-bottom: 0.2rem; color: var(--fg); }
.form__status span { color: var(--fg-mid); }

/* Contact channels */
.channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }

.channel {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.channel:hover { background: var(--bg-elevated); border-color: var(--line-strong); }
.channel__value { font-size: var(--t-h4); font-weight: 500; letter-spacing: -0.02em; }
a.channel__value:hover { color: var(--accent); }
.channel__body { font-size: var(--t-small); color: var(--fg-mid); }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

.footer { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 5rem) var(--sp-6); background: var(--bg-raised); position: relative; z-index: 2; }

.footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }

.footer__brand { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.footer__tagline { font-size: var(--t-small); color: var(--fg-mid); max-width: 30ch; }

.footer__col h2 {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
  margin-bottom: var(--sp-4);
}

.footer__col ul { display: flex; flex-direction: column; gap: 0.7rem; }

.footer__col a { font-size: var(--t-small); color: var(--fg-mid); transition: color 0.25s var(--ease); }
.footer__col a:hover { color: var(--accent); }

/* The agency's profiles, under the last link of the Contact column. The gap is
   wider than the 0.7rem between two links because this is a different kind of
   thing, not a third entry in the list. */
.footer__col .social { margin-top: var(--sp-4); }

.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--fg-dim);
}

.footer__bottom p { margin: 0; }

/* --------------------------------------------------------------------------
   20. 404
   -------------------------------------------------------------------------- */

.nf { min-height: 78vh; display: grid; align-content: center; justify-items: start; gap: var(--sp-5); padding-top: var(--nav-h); }

/* --------------------------------------------------------------------------
   21. Scroll reveal
   -------------------------------------------------------------------------- */

/* Step-in rather than float-up: four discrete frames over 160ms, so content
   snaps into place the way a terminal repaints instead of drifting in. */
[data-reveal] {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.16s steps(4), transform 0.16s steps(4);
  transition-delay: var(--d, 0ms);
}

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

/* If JS never runs, content must not stay invisible. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   22. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Three-item grids go straight from 3 columns to 1. Dropping to 2 would leave
   a single orphaned card on its own row, which reads as a layout bug.
   Grids with an even item count (.is-six) get the intermediate 2-column step. */
@media (max-width: 940px) {
  .lattice-3, .tiers, .channels { grid-template-columns: 1fr; }
  .lattice-3.is-six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier__flag { position: static; align-self: flex-start; }

  /* Product page: the case grid goes single column. */
  .cases { grid-template-columns: 1fr; }
  .trial { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 900px) {
  :root { --grid-cell: 56px; --nav-h: 64px; }
  /* Scoped to the header: the drawer and the footer keep their own language
     switcher, which is the only way to change language on a phone. */
  .header .nav__list, .header .langs { display: none; }
  .nav > .btn { display: none; }
  .burger { display: block; }
  .nav { gap: var(--sp-3); }
  .sec-head--split { grid-template-columns: 1fr; align-items: start; }
  .split { grid-template-columns: 1fr; }
  .people { grid-template-columns: 1fr; }
  .form__grid { grid-template-columns: 1fr; }
  .custom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 680px) {
  .lattice-2, .posts, .lattice-3.is-six { grid-template-columns: 1fr; }

  /* The window mockup stacks: file list above the conversation. The list
     stays one column, because two columns ellipsised four of the six paths. */
  .mock__body { grid-template-columns: 1fr; }
  .mock__side { border-left: 0; border-top: 1px solid var(--w-line); }
  /* The two phones stack, each centered with its kicker. */
  .showcase__phones { grid-template-columns: 1fr; }
  .case__head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .checks { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .hero__title { max-width: none; }
  .btn-row { max-width: 100%; }
  /* Long labels must wrap rather than push the page wider than the screen. */
  .btn-row .btn { width: 100%; white-space: normal; }
  .band { padding-inline: 1.5rem; }
}

/* --------------------------------------------------------------------------
   23. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .w > i { transform: none; opacity: 1; animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
  .grain { display: none; }
}

/* --------------------------------------------------------------------------
   24. Print
   -------------------------------------------------------------------------- */

@media print {
  .header, .drawer, .grain, .gridlines, .ticker { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .tier, .person { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}