/* Cerberos: the incident file. FJORD's charcoal, stone and sage; ember only
   for what the attacker touches. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype");
}

:root {
  color-scheme: dark;
  --sc-canvas: #121212;
  --sc-surface: #191b1b;
  --sc-ink: #dbd9d3;
  --ink-rgb: 219, 217, 211;
  --canvas-rgb: 18, 18, 18;
  --sage-rgb: 149, 167, 163;
  --ember-rgb: 212, 96, 74;
  --source-alpha: 0.3;
  --source-number-alpha: 0.18;
  --source-token-alpha: 0.58;
  --fabric-ink-gain: 1;
  --eye-tone-floor: 0.05;
  --eye-tone-gamma: 1;
  --sc-ink-soft: #a6a49f;
  --ink-lede: #b9b8b2;
  --ink-hover: #ffffff;
  --field-line: #6d7471;
  --placeholder: #80857f;
  --scrollbar: #3b403e;
  --ground-colophon: #0e0e0e;
  --colophon-rule: #262928;
  --link-underline: #4d5250;
  --sc-accent: #95a7a3;
  --sc-accent-ink: #121212;
  --sc-font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sc-font-text: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sc-font-mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --ember: #d4604a;
  --ink-dim: #8d928e;
  --rule: #353938;
  --rule-strong: #444846;
  --ground-attack: #131110;
  --ground-cut: #0a0a0a;
  --ground-fix: #161818;
  --gutter: clamp(20px, 6.2vw, 108px);
  --masthead-height: 108px;
  --mono: var(--sc-font-mono);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --sc-canvas: #dbd9d3;
  --sc-surface: #d2d1cb;
  --sc-ink: #121212;
  --ink-rgb: 18, 18, 18;
  --canvas-rgb: 219, 217, 211;
  --sage-rgb: 78, 98, 92;
  --ember-rgb: 165, 56, 38;
  --source-alpha: 0.64;
  --source-number-alpha: 0.44;
  --source-token-alpha: 0.82;
  --fabric-ink-gain: 1.7;
  --eye-tone-floor: 0.14;
  --eye-tone-gamma: 0.7;
  --sc-ink-soft: #4e504b;
  --ink-lede: #3e403b;
  --ink-dim: #565b55;
  --ink-hover: #000000;
  --sc-accent: #4e625c;
  --sc-accent-ink: #dbd9d3;
  --ember: #a53826;
  --rule: #b3b6af;
  --rule-strong: #969e97;
  --field-line: #6d746d;
  --placeholder: #565b55;
  --scrollbar: #969e97;
  --ground-attack: #dcd8d1;
  --ground-cut: #e3e1db;
  --ground-fix: #d7d9d3;
  --ground-colophon: #dfddd7;
  --colophon-rule: #bfc3ba;
  --link-underline: #888e85;
}

html { background: var(--sc-canvas); scroll-padding-top: calc(var(--masthead-height) + 24px); }
body { font-size: 16px; line-height: 1.6; letter-spacing: -0.005em; -webkit-tap-highlight-color: rgba(var(--sage-rgb), 0.16); }
h1, h2, h3, p, ol, figure { margin: 0; }
ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--sc-font-display); font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
code { font-family: var(--mono); font-size: 0.9em; letter-spacing: -0.01em; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 6px; border-radius: 0; }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
@supports (scrollbar-color: auto) { html { scrollbar-color: var(--scrollbar) var(--sc-canvas); } }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 100; background: var(--sc-accent); color: var(--sc-accent-ink); padding: 10px 14px; font-weight: 500; }
.skip:focus { top: 16px; }
.stop { color: var(--sc-accent); }
.stop--ember { color: var(--ember); }
.ember { color: var(--ember); }

/* ------------------------------------------------------------ masthead -- */
.masthead {
  position: fixed; z-index: 10; top: 0; left: var(--gutter); right: var(--gutter);
  height: 108px; display: flex; align-items: center; gap: 32px;
  border-bottom: 1px solid var(--rule-strong);
}
.masthead::before {
  content: ''; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--gutter));
  background: var(--sc-canvas);
}
.wordmark { font-size: 31px; font-weight: 700; letter-spacing: -1.8px; line-height: 1; }
.wordmark span, .colophon__mark span { color: var(--sc-accent); }
.index { margin-left: auto; display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); font-size: 13px; font-weight: 500; }
.index a { padding: 12px 0; transition: color 160ms var(--ease); }
.index__check {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border-radius: 0; white-space: nowrap;
  background: var(--sc-ink); color: var(--sc-canvas);
  font-size: 13px; font-weight: 500;
  transition: background-color 160ms var(--ease);
}
.arrow { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--sc-accent); stroke-width: 1.25; stroke-linecap: square; transition: transform 160ms var(--ease); }
.index__check .arrow { stroke: currentColor; }
.index__links, .index__preferences { display: flex; align-items: center; gap: 24px; }
.index__links { order: 0; }
.index__preferences { order: 1; }
.language-switch__label { display: none; }
.menu-toggle { display: none; }
.menu-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }
.language-switch { display: inline-flex; align-items: center; flex: none; }
.index .language-switch a[data-language] {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 44px; padding: 10px 4px;
  color: var(--sc-ink-soft); border-bottom: 1px solid transparent;
}
.index .language-switch a[aria-current="page"] { color: var(--sc-ink); border-bottom-color: var(--sc-accent); }
.theme-switch {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--sc-ink); cursor: pointer; font: inherit;
}
.theme-switch[hidden] { display: none; }
.theme-switch__track {
  display: flex; align-items: center; width: 30px; height: 18px; padding: 3px;
  border: 1px solid var(--field-line);
}
.theme-switch__thumb { width: 10px; height: 10px; background: var(--sc-ink); transition: transform 160ms var(--ease); }
.theme-switch[aria-checked="true"] .theme-switch__track { border-color: var(--sc-accent); }
.theme-switch[aria-checked="true"] .theme-switch__thumb { transform: translateX(12px); background: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) {
  .index a:hover, .theme-switch:hover { color: var(--ink-hover); }
  .theme-switch:hover .theme-switch__track { border-color: currentColor; }
  .index__check:hover { background: var(--ink-hover); color: var(--sc-canvas); }
  .index__check:hover .arrow { transform: translate(2px, -2px); }
}

/* ---------------------------------------------------------- title page -- */
.title { position: relative; -webkit-user-select: none; user-select: none; }
/* Keep the address editable while fabric gestures cannot select hero copy. */
.title input { -webkit-user-select: text; user-select: text; }
.title__stage {
  position: relative; isolation: isolate; overflow: hidden; min-height: 100svh;
  padding: clamp(128px, 14svh, 168px) var(--gutter) clamp(80px, 9svh, 112px);
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: end;
  background: var(--sc-canvas);
}
.title__fabric { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.title__copy { position: relative; }
h1 { font-size: clamp(48px, 6vw, 104px); line-height: 0.98; letter-spacing: -0.067em; }
.lede { margin-top: 34px; max-width: 34em; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.62; letter-spacing: -0.015em; color: var(--ink-lede); }
/* ----------------------------------------------------- the free check -- */
.check { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 30px; }
.check input:not([type="checkbox"]) {
  width: min(320px, 100%); padding: 8px 0 12px; border: 0; border-bottom: 1px solid var(--field-line); border-radius: 0;
  background: transparent; color: var(--sc-ink); font: 400 16px/1.4 var(--mono); letter-spacing: -0.01em;
  transition: border-color 160ms var(--ease);
}
.check input::placeholder { color: var(--placeholder); }
.check input:focus-visible { outline: none; border-bottom-color: var(--sc-accent); box-shadow: 0 1px 0 var(--sc-accent); }
.check input[aria-invalid="true"] { border-bottom-color: var(--ember); }
.check button {
  display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 8px 0 10px;
  border: 0; background: none; cursor: pointer; color: var(--sc-ink);
  font: 500 16px/1.2 var(--sc-font-text); letter-spacing: -0.01em; white-space: nowrap;
  transition: color 160ms var(--ease);
}
.check button:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .check button:hover { color: var(--ink-hover); }
  .check button:hover .arrow { transform: translate(2px, -2px); }
}
.check__owner { min-height: 44px; flex-basis: 100%; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--sc-ink-soft); cursor: pointer; }
.check__owner input { flex: none; min-width: 16px; min-height: 16px; width: auto; margin: 3px 0 0; accent-color: var(--sc-accent); }
.check__owner.is-error { color: var(--ember); }
.check__progress { flex-basis: 100%; width: 100%; height: 3px; border: 0; background: var(--field-line); accent-color: var(--sc-accent); appearance: none; }
.check__progress::-webkit-progress-bar { background: var(--field-line); }
.check__progress::-webkit-progress-value { background: var(--sc-accent); transition: width 600ms var(--ease); }
.check__progress::-moz-progress-bar { background: var(--sc-accent); }
.check--sentence .check__owner { display: flex; font-size: 14px; line-height: 1.55; }
.check--sentence .check__owner, .check--sentence .check__progress { margin-top: 14px; }
.check__status { flex-basis: 100%; min-height: 1.5em; font-size: 14px; line-height: 1.55; color: var(--sc-ink-soft); }
.check__status:empty { min-height: 0; margin-top: -18px; }
.check__status.is-error { color: var(--ember); }
.check__status a { text-decoration: underline; text-underline-offset: 0.22em; }

/* ----------------------------------------------------------- II. watch -- */
.watch { background: var(--sc-canvas); }
.watch h2 { font-size: clamp(36px, 3.5vw, 56px); line-height: 1.04; letter-spacing: -0.05em; }
.watch__stage {
  min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center;
  column-gap: clamp(32px, 4.5vw, 88px); padding: 64px var(--gutter) 48px;
}
.watch__copy > p { margin-top: 18px; max-width: 44ch; font-size: 16px; line-height: 1.7; color: var(--sc-ink-soft); }
.watch__services { margin-top: 40px; border-top: 1px solid var(--rule); }
.watch-service { border-bottom: 1px solid var(--rule); }
.watch-service summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 26px 0; cursor: pointer; list-style: none;
  color: var(--sc-accent); font: 400 clamp(22px, 1.9vw, 30px)/1.12 var(--sc-font-display); letter-spacing: -0.04em;
  transition: color 160ms var(--ease);
}
.watch-service summary::-webkit-details-marker { display: none; }
.watch-service summary::marker { content: ''; }
.watch-service summary > span { min-width: 0; text-wrap: balance; }
.watch-service[open] summary { padding-bottom: 22px; color: var(--sc-ink); font-size: clamp(28px, 2.6vw, 42px); }
.watch-service__arrow {
  width: 28px; height: 28px; flex: none; fill: none; stroke: var(--sc-accent); stroke-width: 1.25;
  transition: transform 200ms var(--ease);
}
.watch-service[open] .watch-service__arrow { transform: rotate(45deg); }
.watch-service__body { padding: 0 32px 30px 0; max-width: 43ch; color: var(--sc-ink-soft); font-size: 15px; line-height: 1.65; }
.watch-service__body p + p { margin-top: 12px; }
.watch-service__body p:first-child { color: var(--sc-ink); font-size: 17px; }
@media (hover: hover) and (pointer: fine) {
  .watch-service summary:hover { color: var(--ink-hover); }
}

.watch__figure { position: relative; height: min(78svh, 700px); }
.source {
  position: absolute; inset: 96px 0 0 0; overflow: hidden; counter-reset: ln 37;
  font: 400 clamp(12px, 1.12vw, 17px)/1.8 var(--mono); letter-spacing: -0.01em;
  color: rgba(var(--ink-rgb), var(--source-alpha));
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 98%);
  mask-image: linear-gradient(90deg, #000 62%, transparent 98%);
}
.source li { counter-increment: ln; white-space: pre; min-height: 1.8em; }
.source li::before { content: counter(ln); display: inline-block; width: 2.4em; margin-right: 1.6em; text-align: right; color: rgba(var(--ink-rgb), var(--source-number-alpha)); }
.tok { color: rgba(var(--ink-rgb), var(--source-token-alpha)); transition: color 300ms var(--ease); }
.tok.is-flagged { color: var(--ember); }
.tok.is-fixing, .tok.is-fixed, .readout .is-fixed { color: var(--sc-accent); }
.source .is-typing::after, .tok.is-fixing::after { content: ''; display: inline-block; height: 1em; width: 1px; margin-left: 2px; vertical-align: -0.1em; background: var(--sc-accent); }
.motion-off .source .is-typing::after, .motion-off .tok.is-fixing::after { display: none; }
.eye { pointer-events: none; }
.eye--watch { position: absolute; right: 0; bottom: 3%; width: 60%; aspect-ratio: 1.72; }
.readout { font-family: var(--mono); font-size: 11px; line-height: 1.6; color: rgba(var(--ink-rgb), 0.82); white-space: nowrap; }
.readout span:first-child { display: inline-block; width: 10ch; color: rgba(var(--ink-rgb), 0.64); }
.readout--watch { position: absolute; right: 0; top: 44%; padding: 8px 0 8px 14px; background: var(--sc-canvas); }

/* Tethers sit above the traveling eye layer (5), including its canvas backdrop. */
.eye-rig { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 6; }
.eye-rig__tether { stroke: rgba(var(--ink-rgb), 0.72); stroke-width: 1; stroke-dasharray: 4 6; fill: none; animation: tether-march 1s linear infinite; }
.eye-rig__tether.is-sage { stroke: var(--sc-accent); }
.eye-rig__tether.is-ember { stroke: var(--ember); }
.eye-rig__box { fill: none; stroke: rgba(var(--ink-rgb), 0.85); stroke-width: 1; }
.eye-rig__box.is-sage { stroke: var(--sc-accent); }
.eye-rig__box.is-ember { stroke: var(--ember); }
.eye-rig__telemetry { stroke: rgba(var(--ink-rgb), 0.38); stroke-width: 1; }
.eye-rig__anchor { fill: rgba(var(--ink-rgb), 0.9); }
@keyframes tether-march { to { stroke-dashoffset: -20; } }
.motion-off .eye-rig__tether { animation-play-state: paused; }
.eye-rig.is-idle .eye-rig__tether { animation-play-state: paused; }

/* -------------------------------------------------------------- pricing -- */
.pricing {
  padding: clamp(96px, 8vw, 128px) var(--gutter);
  background: var(--sc-canvas);
}
.pricing__heading {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: end; gap: 24px clamp(32px, 5vw, 96px);
}
.pricing h2 { font-size: clamp(48px, 6.4vw, 108px); line-height: 1; letter-spacing: -0.058em; }
.pricing__heading > p { max-width: 36ch; font-size: 17px; line-height: 1.7; color: var(--sc-ink-soft); }
.pricing__note { margin-top: 32px; font: 400 11px/1.6 var(--mono); color: var(--ink-dim); }
.pricing__plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 72px); margin-top: 24px; }
.pricing__controls { display: none; }
.pricing__position { color: var(--ink-dim); font: 400 13px/1.6 var(--mono); font-variant-numeric: tabular-nums; }
.pricing__arrows { display: flex; gap: 8px; }
.pricing__arrow {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--rule); background: transparent; color: var(--sc-accent); cursor: pointer;
}
.pricing__arrow svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.pricing__arrow--previous svg { transform: rotate(180deg); }
.pricing__arrow:disabled { opacity: 0.35; cursor: default; }
.pricing__arrow:active:not(:disabled) { background: rgba(var(--sage-rgb), 0.12); }
@media (hover: hover) and (pointer: fine) {
  .pricing__arrow:hover:not(:disabled) { border-color: var(--sc-accent); color: var(--ink-hover); }
}
.plan { display: flex; flex-direction: column; min-width: 0; padding-top: 26px; border-top: 1px solid var(--rule); }
.plan--accent { border-top-color: var(--sc-accent); }
.plan h3 { font: 500 clamp(28px, 2.6vw, 44px)/1.1 var(--sc-font-display); letter-spacing: -0.04em; }
.plan__description { margin-top: 18px; min-height: 4.8em; max-width: 32ch; font-size: 15px; line-height: 1.6; color: var(--sc-ink-soft); }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-top: 32px; }
.plan__amount { font-size: clamp(52px, 5vw, 80px); font-weight: 500; line-height: 1; letter-spacing: -0.058em; font-variant-numeric: tabular-nums; }
.plan__period { font: 400 12px/1.6 var(--mono); color: var(--ink-dim); }
.plan__features { margin: 30px 0 24px; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; color: var(--sc-ink-soft); }
.plan__features li { padding: 13px 0; border-top: 1px solid var(--rule); }
.plan__features li:last-child { border-bottom: 1px solid var(--rule); }
.plan__action {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 44px; margin-top: auto; padding: 8px 0 10px;
  font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em;
  transition: color 160ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .plan__action:hover { color: var(--ink-hover); }
  .plan__action:hover .arrow { transform: translate(2px, -2px); }
}

/* ------------------------------------------------------- III. your file -- */
.close {
  position: relative; background: var(--sc-canvas);
  padding: clamp(112px, 13vw, 208px) var(--gutter) clamp(104px, 11vw, 176px);
  display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  grid-template-areas: "eye body"; column-gap: clamp(40px, 6vw, 120px); align-items: end;
}
.close__body { grid-area: body; }
.close h2 { font-size: clamp(48px, 6vw, 104px); line-height: 0.98; letter-spacing: -0.067em; }
.check--sentence { margin-top: 48px; display: block; }
.check--sentence label { display: block; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.6; letter-spacing: -0.015em; color: var(--ink-lede); }
.check__row { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 30px; }
.check--sentence input:not([type="checkbox"]) { padding-inline: 10px; }
.check--sentence .check__status { margin-top: 14px; }
.check--sentence .check__status:empty { margin-top: 0; }
/* While a check runs, the address field becomes a blueprint of a website that the eye scans area by area. */
.check--sentence.is-scanning > label, .check--sentence.is-scanning .check__row, .check--sentence.is-scanning .check__owner { display: none; }
.blueprint { margin-top: 18px; }
.blueprint__address { text-align: right; font: 400 11px/1.6 var(--mono); color: rgba(var(--ink-rgb), 0.82); }
.blueprint__address span:first-child { color: rgba(var(--ink-rgb), 0.64); }
.blueprint__page {
  position: relative; margin-top: 10px; padding: 14px; display: grid; gap: 10px; overflow: hidden;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background-image: linear-gradient(rgba(var(--ink-rgb), 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px);
  background-size: 16px 16px;
}
.blueprint__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.bp {
  position: relative; min-height: 44px; padding: 20px 10px 8px; border: 1px solid rgba(var(--ink-rgb), 0.24);
  background: repeating-linear-gradient(transparent 0 7px, rgba(var(--ink-rgb), 0.12) 7px 8px) content-box;
  transition: border-color 240ms var(--ease);
}
.bp::before {
  content: "['" attr(data-scan) "']"; position: absolute; left: 8px; right: 6px; top: 3px; white-space: nowrap; overflow: hidden;
  font: 400 11px/1.6 var(--mono); color: rgba(var(--ink-rgb), 0.5); transition: color 240ms var(--ease);
}
.bp--nav { min-height: 30px; padding-top: 14px; background: none; }
.bp--nav::before { top: 5px; }
.bp--hero { min-height: 92px; }
.bp--form { min-height: 56px; width: 62%; }
.bp--foot { min-height: 30px; padding-top: 14px; background: none; }
.bp--foot::before { top: 5px; }
.bp.is-scanning { border-color: var(--sc-accent); }
.bp.is-scanning::before, .bp.is-scanned::before { color: var(--sc-accent); }
.bp.is-scanned { border-color: rgba(var(--sage-rgb), 0.55); }
.blueprint__scanline {
  position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--sc-accent); opacity: 0.7;
  animation: blueprint-scan 2.4s linear infinite;
}
@keyframes blueprint-scan { from { top: 0; } to { top: 100%; } }
.motion-off .blueprint__scanline, .blueprint[hidden] .blueprint__scanline { animation: none; display: none; }
@media (prefers-reduced-motion: reduce) { .blueprint__scanline { animation: none; display: none; } .bp, .bp::before { transition: none; } }
.close__eye { grid-area: eye; position: relative; padding-bottom: 0; }
.eye--close { width: 100%; aspect-ratio: 1.72; }
.readout--close { display: inline-block; margin-top: 14px; }

/* ------------------------------------------------------------ colophon -- */
.colophon { background: var(--ground-colophon); padding: 72px var(--gutter) 44px; border-top: 1px solid var(--colophon-rule); color: var(--sc-ink-soft); font-size: 13px; }
.colophon__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 40px; row-gap: 20px; }
.colophon__mark { font-size: 31px; font-weight: 700; letter-spacing: -1.8px; line-height: 1; color: var(--sc-ink); }
.colophon__nav { grid-column: -2; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.colophon__nav a, .colophon__nav button { padding: 8px 0; transition: color 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .colophon__nav a:hover, .colophon__nav button:hover { color: var(--ink-hover); } }
.colophon__notes { margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--rule); display: grid; gap: 10px; font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--ink-dim); max-width: 110ch; }
.colophon__notes a, .colophon__notes button { color: var(--sc-ink-soft); text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 0.22em; }
.colophon__ref { color: var(--sc-accent); margin-right: 6px; }

/* ------------------------------------------------------------- consent -- */
/* A ruled note pinned over the fabric's side, never over the hero copy. Flat:
   a canvas fill and a hairline frame, no shadow. Every choice is the same
   text action, so declining is never harder than agreeing. */
[data-consent-open] { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
[data-consent-open][hidden] { display: none; }
.consent {
  position: fixed; z-index: 9; right: var(--gutter); bottom: 24px; /* under the masthead and its open menu */
  /* Leaves the hero's address field and button (about 600px) uncovered from 1024px up. */
  width: clamp(min(320px, calc(100vw - 2 * var(--gutter))), calc(100vw - 2 * var(--gutter) - 600px), 440px);
  max-height: calc(100svh - var(--masthead-height) - 48px); overflow-y: auto; overscroll-behavior: contain;
  padding: 26px 28px 14px; background: var(--sc-canvas); border: 1px solid var(--rule-strong);
  color: var(--sc-ink-soft); font-size: 15px; line-height: 1.55;
  animation: consent-in 320ms var(--ease) both;
}
.consent[hidden], .consent [hidden] { display: none; }
@keyframes consent-in { from { opacity: 0; transform: translateY(12px); } }
.consent__title { font: 500 22px/1.15 var(--sc-font-display); letter-spacing: -0.035em; color: var(--sc-ink); text-wrap: balance; }
.consent__title:focus:not(:focus-visible) { outline: none; }
.consent__intro { margin-top: 12px; max-width: 44ch; }
.consent a { color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 0.22em; }
.consent code { font-size: 0.86em; color: var(--sc-ink); }
.consent__choices { margin-top: 20px; border-top: 1px solid var(--rule); }
.consent__category {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px;
  padding: 14px 0 16px; border-bottom: 1px solid var(--rule);
}
.consent__name { font-weight: 500; letter-spacing: -0.01em; color: var(--sc-ink); }
.consent__state { font: 400 11px/1.6 var(--mono); color: var(--ink-dim); }
.consent__about { grid-column: 1 / -1; font-size: 14px; line-height: 1.55; }
.consent__switch { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.consent__switch[aria-checked="true"] .theme-switch__track { border-color: var(--sc-accent); }
.consent__switch[aria-checked="true"] .theme-switch__thumb { transform: translateX(12px); background: var(--sc-accent); }
.consent__actions { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; }
.consent__actions button {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0 10px;
  border: 0; background: none; cursor: pointer; color: var(--sc-ink);
  font: 500 16px/1.2 var(--sc-font-text); letter-spacing: -0.01em; white-space: nowrap;
  transition: color 160ms var(--ease);
}
.consent__actions button:active { transform: translateY(1px); }
.consent__more { margin-left: auto; }
.consent__more .arrow { transform: rotate(45deg); }
.consent__more[aria-expanded="true"] .arrow { transform: rotate(135deg); }
@media (hover: hover) and (pointer: fine) {
  .consent__actions button:hover, .consent__switch:hover { color: var(--ink-hover); }
  .consent__switch:hover .theme-switch__track { border-color: currentColor; }
  .consent a:hover { color: var(--ink-hover); }
}
@media (max-width: 600px) {
  .consent {
    right: 0; bottom: 0; width: auto; left: 0; border-width: 1px 0 0;
    padding: 22px var(--gutter) calc(8px + env(safe-area-inset-bottom));
  }
  .consent__title { font-size: 20px; letter-spacing: -0.03em; }
  .consent__actions { gap: 0 24px; }
  .consent__actions button { min-height: 48px; }
}

/* ----------------------------------------------------------- legal.html -- */
.legal { padding: 168px var(--gutter) 96px; color: var(--sc-ink-soft); }
.legal article { max-width: 70ch; }
.legal article + article { margin-top: 120px; padding-top: 72px; border-top: 1px solid var(--rule); }
.legal h1 { font-size: clamp(44px, 6vw, 88px); color: var(--sc-ink); }
.legal h2 { margin-top: 64px; font-size: 28px; letter-spacing: -0.03em; color: var(--sc-ink); }
.legal h3 { margin-top: 32px; font-size: 17px; color: var(--sc-ink); }
.legal p, .legal dl, .legal__list { margin-top: 14px; }
.legal__meta { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }
.legal dt { margin-top: 14px; color: var(--sc-ink); font-weight: 500; }
.legal dd { margin: 2px 0 0; }
.legal__list { list-style: decimal; padding-left: 1.4em; display: grid; gap: 10px; }
.legal a, .legal__consent { text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 0.22em; }
.legal section { scroll-margin-top: 24px; }
.colophon__notes:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- phone -- */
@media (max-width: 1100px) {
  :root { --masthead-height: 84px; }
  .masthead {
    position: relative; left: auto; right: auto; margin-inline: var(--gutter); height: auto;
    display: grid; grid-template-columns: minmax(0, 1fr) auto 48px; gap: 12px; padding-block: 16px;
  }
  .js .masthead { position: fixed; left: var(--gutter); right: var(--gutter); margin: 0; min-height: 84px; }
  .wordmark { grid-column: 1; grid-row: 1; font-size: 24px; letter-spacing: -1.3px; }
  .index__check { grid-column: 2; grid-row: 1; font-size: 13px; padding-inline: 20px; gap: 8px; }
  .menu-toggle:not([hidden]) {
    display: grid; place-items: center; grid-column: 3; grid-row: 1;
    width: 48px; height: 48px; padding: 0; border: 1px solid var(--rule);
    background: var(--sc-canvas); color: var(--sc-ink); cursor: pointer;
  }
  .index {
    grid-column: 1 / -1; grid-row: 2; margin: 0; width: 100%;
    flex-direction: column; align-items: stretch; gap: 24px; font-size: 16px;
    padding: 24px 0 8px; background: var(--sc-canvas);
  }
  .js .index {
    display: none; position: absolute; top: 100%; left: 0;
    max-height: calc(100dvh - var(--masthead-height) - 16px); overflow-y: auto; overscroll-behavior-y: contain;
    padding: 20px 0 24px; border: 0; border-bottom: 1px solid var(--rule-strong);
  }
  .js .masthead[data-menu-open] .index { display: flex; }
  .index__preferences { order: 0; flex-direction: column; align-items: stretch; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
  .theme-switch { justify-content: space-between; min-height: 52px; font: inherit; }
  .language-switch { display: flex; width: 100%; }
  .language-switch__label { display: inline; margin-right: auto; color: var(--sc-ink-soft); }
  .index .language-switch a[data-language] { min-width: 48px; min-height: 48px; }
  .index__links { order: 1; flex-direction: column; align-items: stretch; gap: 0; }
  .index__links a { display: flex; align-items: center; min-height: 56px; padding: 8px 0; font-size: 28px; line-height: 1.2; letter-spacing: -0.035em; }
}

@media (max-width: 860px) {
  .title__stage { padding: 128px var(--gutter) 72px; align-items: center; }
  h1 { font-size: clamp(46px, 13.4vw, 76px); }
  .lede { margin-top: 24px; font-size: 17px; }
  .check { margin-top: 32px; }
  .check input:not([type="checkbox"]) { width: 100%; min-height: 48px; }
  .check button { width: 100%; justify-content: space-between; min-height: 48px; }


  .watch__stage { min-height: 0; grid-template-columns: 1fr; padding: 64px var(--gutter) 0; }
  .watch h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .watch__copy > p, .watch > .vh { display: none; }
  .watch__services { margin-top: 0; }
  .watch-service summary { padding-block: 24px; font-size: clamp(26px, 5vw, 34px); }
  .watch-service[open] summary { font-size: clamp(36px, 7vw, 48px); }
  .watch-service__body { padding-right: 12px; font-size: 16px; }
  .watch__figure { display: none; }
  .readout { font-size: 11px; }

  .pricing { padding-block: 72px 80px; }
  .pricing__heading { grid-template-columns: 1fr; gap: 20px; }
  .pricing__heading > p { font-size: 15px; line-height: 1.6; }
  .pricing__note { margin-top: 28px; max-width: 40ch; }
  .pricing__controls:not([hidden]) { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
  .pricing__plans {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(88%, 420px); gap: 24px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent;
    padding-block: 8px 16px; margin-top: 16px;
  }
  .plan { padding-top: 24px; scroll-snap-align: start; scroll-snap-stop: always; }
  .plan__action:focus-visible { outline-offset: -2px; }
  .plan h3 { font-size: 32px; }
  .plan__description { min-height: 0; max-width: 40ch; margin-top: 14px; }
  .plan__price { margin-top: 26px; }
  .plan__amount { font-size: 60px; }
  .plan__features { margin-top: 26px; margin-bottom: 18px; }

  .close { display: block; padding: 88px var(--gutter) 72px; }
  .check--sentence { margin-top: 32px; }

  .colophon__top { grid-template-columns: 1fr; }
  .colophon__nav a, .colophon__nav button { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 860px) {
  .close { display: flex; flex-direction: column; align-items: stretch; }
  .close__body { order: 1; }
  .close__eye { order: 3; width: min(80%, 300px); margin: 48px auto 0; }
}

@media (max-width: 600px) {
  .masthead { gap: 8px; }
  .wordmark { font-size: 22px; letter-spacing: -1.2px; }
  .index__check { font-size: 12px; padding-inline: 18px; }
  .title__stage { padding-top: 136px; }
}
@media (max-width: 360px) {
  :root { --masthead-height: 137px; }
  .masthead { grid-template-columns: minmax(0, 1fr) 48px; }
  .menu-toggle:not([hidden]) { grid-column: 2; }
  .index__check { grid-column: 1 / -1; grid-row: 2; }
  .index { grid-row: 3; }
  .title__stage { padding-top: 184px; }
}
/* The longer Hungarian action needs its own row before it crowds the mark. */
@media (max-width: 420px) {
  :root:lang(hu) { --masthead-height: 137px; }
  :root:lang(hu) .masthead { grid-template-columns: minmax(0, 1fr) 48px; }
  :root:lang(hu) .menu-toggle:not([hidden]) { grid-column: 2; }
  :root:lang(hu) .index__check { grid-column: 1 / -1; grid-row: 2; }
  :root:lang(hu) .index { grid-row: 3; }
  :root:lang(hu) .title__stage { padding-top: 184px; }
}

/* --------------------------------------------------------- motion off -- */
@media (prefers-reduced-motion: reduce) {
  .index__check, .index__check .arrow { transition: none; }
  .eye-rig__tether { animation: none; }
  .watch-service summary, .watch-service__arrow { transition: none; }
  .theme-switch__thumb { transition: none; }
  .consent { animation: none; }
  .consent__actions button, .consent__more .arrow { transition: none; }
}

/* One material, one watcher. Anchors keep the document's original composition;
   only the decorative canvas travels between them. */
.eye-journey { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.eye-pointer-rig { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.eye-journey__canopy { position: absolute; inset: 0 0 auto; height: 182px; background: var(--sc-canvas); }
.eye-journey__eye { position: absolute; inset: 0 auto auto 0; transform-origin: 0 0; }
.eye-journey__threads { position: absolute; inset: 0; width: 100%; height: 100%; }
.eye-journey [hidden] { display: none; }
.eye--close { display: block; }
.watch__eye-dock { display: none; }
.pricing__eye-dock { display: none; }
.eye-journey-ready .pricing { padding-top: 24px; }
.eye-journey-ready .pricing__eye-dock {
  display: grid; place-items: start center; position: sticky; top: var(--masthead-height); z-index: 3;
  padding: 24px 0 32px; margin-bottom: clamp(40px, 5vw, 72px);
}
.pricing__eye-anchor { width: clamp(220px, 23vw, 340px); aspect-ratio: 1.72; }

@media (max-width: 860px) {
  .eye-journey-ready .watch__eye-dock,
  .eye-journey-ready .pricing__eye-dock { display: none; }
  .eye-journey-ready .pricing { padding-top: 72px; }
}

/* legal.html has no menu toggle: keep its nav one row, language link only. */
@media (max-width: 1100px) {
  .index.index--plain { grid-column: 2 / -1; grid-row: 1; flex-direction: row; justify-content: flex-end; width: auto; padding: 0; font-size: 13px; }
  .index--plain a:not(.index__lang) { display: none; }
  .legal { padding-top: 64px; }
}