/* ───────────────────────────── fonts ───────────────────────────── */
/* Self-hosted — served from this origin rather than Google's, so loading
   the site never sends a visitor's IP to a third party just to render
   text. Split latin / latin-ext the same way Google's own CSS does, so a
   Polish "ł" or similar doesn't pull in glyphs nobody else needs. */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ───────────────────────────── tokens ───────────────────────────── */
:root {
  /* A darkroom is neutral, but the subject is an orange dye mask, so the
     ground carries a slight warm bias rather than the usual blue-grey. */
  --ink:        #0a0807;
  --ink-raised: #131010;
  --ink-sunk:   #060505;
  --line:       #241f1c;
  --line-soft:  #171412;

  --text:   #ede9e5;
  --text-2: #9c938c;
  --text-3: #6a615b;

  --mask:   #d2661f;   /* the base mask. Material, not decoration. */
  --mask-d: #8a3f10;

  --max:      1320px;
  --max-wide: 1320px;
  --pad:      24px;

  --ease: cubic-bezier(.22, .61, .36, 1);

  color-scheme: dark;
}

@media (min-width: 700px) { :root { --pad: 40px; } }
@media (min-width: 1100px) { :root { --pad: 56px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

::selection { background: var(--mask); color: #120a04; }

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

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--text); color: var(--ink);
  padding: 10px 16px; border-radius: 6px; font-weight: 600;
  text-decoration: none; transition: top .15s var(--ease);
}
.skip:focus { top: 12px; }

/* ─────────────────────────── layout ─────────────────────────── */
.wrap      { max-width: var(--max);      margin-inline: auto; padding-inline: var(--pad); }
.wrap-wide { max-width: var(--max-wide); margin-inline: auto; padding-inline: var(--pad); }

.section { padding-block: clamp(96px, 15vh, 180px); }

/* ─────────────────────────── type ─────────────────────────── */
.display {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(3.4rem, 12.5vw, 8.6rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.h1 {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(2.4rem, 7.2vw, 5rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.038em;
  text-wrap: balance;
}

.h2 {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.032em;
}

.h3 {
  margin: 0;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.026em;
}

.h4 {
  margin: 0 0 .6em;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.016em;
}

.body {
  margin: 1.1em 0 0;
  color: var(--text-2);
  font-size: 1.0625rem;
  max-width: 46ch;
  text-wrap: pretty;
}
.body.lead {
  font-size: clamp(1.125rem, 2.1vw, 1.375rem);
  color: #b6ada6;
  max-width: 34ch;
  margin-top: 1.6rem;
}

.kicker {
  margin: 0 0 1.6rem;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-3);
}

.fineprint {
  margin: 2.4rem 0 0;
  max-width: 58ch;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--text-3);
}

/* ─────────────────────────── bar ─────────────────────────── */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 14px var(--pad);
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.bar.is-scrolled { border-bottom-color: var(--line-soft); }

.bar-mark {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; margin-right: auto;
}
.bar-wordmark { width: 76px; height: auto; color: var(--text); flex: none; }

.bar-nav { display: none; gap: 28px; margin-right: 8px; }
@media (min-width: 900px) { .bar-nav { display: flex; } }
.bar-nav a {
  text-decoration: none; font-size: .875rem; color: var(--text-2);
  transition: color .2s var(--ease);
}
.bar-nav a:hover { color: var(--text); }

/* ─────────────────────────── buttons ─────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--text); color: var(--ink);
  border: 0; border-radius: 999px;
  font: inherit; font-weight: 650; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.btn:hover { background: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-sm { padding: 8px 16px; font-size: .875rem; }
.btn-lg { padding: 15px 30px; font-size: 1.0625rem; }

.hero-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn-soon {
  gap: 9px;
  background: transparent;
  color: var(--text-3);
  border: 1px solid var(--line);
  cursor: default;
}
.btn-soon:hover { background: transparent; transform: none; }
.soon-tag {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
}

/* ─────────────────────────── hero ─────────────────────────── */
.hero { padding-top: clamp(120px, 18vh, 190px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 2rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px 6px 11px;
}
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mask);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mask) 20%, transparent);
}

.lede {
  margin: 2rem 0 0;
  max-width: 30ch;
  font-size: clamp(1.1875rem, 2.5vw, 1.5rem);
  line-height: 1.42;
  color: #b6ada6;
  text-wrap: pretty;
}

.platform {
  margin: 1.1rem 0 0;
  font-size: .82rem;
  color: var(--text-3);
  max-width: 44ch;
}

.hero-cta { margin-top: 2.6rem; }

/* signup */
.signup {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 2.4rem;
  max-width: 460px;
}
.signup input[type="email"] {
  grid-column: 1;
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font: inherit; font-size: .95rem;
  padding: 13px 20px;
  min-width: 0;
  transition: border-color .2s var(--ease);
}
.signup input[type="email"]::placeholder { color: var(--text-3); }
.signup input[type="email"]:focus { border-color: #3a322d; }
.signup button {
  grid-column: 2;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font: inherit; font-size: .95rem; font-weight: 600;
  padding: 13px 22px;
  cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.signup button:hover { background: var(--ink-raised); border-color: #3a322d; }

.consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 20px 0;
  cursor: pointer;
}
.consent input[type="checkbox"] {
  flex: none;
  width: 15px; height: 15px;
  margin: 2px 0 0;
  accent-color: var(--mask);
  cursor: pointer;
}
.consent span {
  font-size: .8rem;
  line-height: 1.5;
  color: var(--text-3);
}
.consent a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.consent a:hover { color: var(--text); }
.consent.invalid span { color: var(--mask); }

.signup-note {
  grid-column: 1 / -1;
  margin: .55rem 0 0 20px;
  font-size: .78rem;
  color: var(--text-3);
}
.signup.is-done button { background: var(--ink-raised); }
.signup-wide { max-width: 520px; }

@media (max-width: 480px) {
  .signup { grid-template-columns: 1fr; }
  .signup input[type="email"], .signup button { grid-column: 1; }
  .signup-note { margin-left: 20px; }
}

/* ─────────────────────────── wordmark divider ─────────────────────────── */
.wordmark-divider {
  display: flex; align-items: center; justify-content: center;
  min-height: 70vh;
}
.wordmark-divider-logo {
  width: clamp(240px, 28vw, 380px);
  height: auto;
  color: var(--text);
  opacity: 0;
  will-change: transform, opacity;
}
html:not(.js) .wordmark-divider-logo { opacity: .92; }
@media (prefers-reduced-motion: reduce) {
  .wordmark-divider-logo { opacity: .92; }
}

/* ─────────────────── the scroll reveal ─────────────────── */
.reveal { position: relative; }
.reveal-track { height: 320vh; }
.reveal-stage {
  position: sticky; top: 0;
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
.reveal-grid {
  width: 100%;
  padding-block: 80px;
}

.reveal-copy .body { margin-top: 1.6rem; }

.readout {
  margin: 2.4rem 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .55em;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: 1.1rem;
}
.readout-k { color: var(--text); font-weight: 500; }
.readout-v { color: var(--text-3); }

.reveal-figure { margin: 0; position: relative; }
.reveal-images {
  position: relative;
  aspect-ratio: 1921 / 1553;
  background: #050403;
  box-shadow: 0 50px 130px -40px rgba(0,0,0,.95), 0 0 0 1px var(--line-soft);
}

/* the copy sits over the image itself, and only settles into view once the
   wipe has finished converting — it reads as landing on the photograph,
   not fighting it for space while the negative is still mid-convert. */
.reveal-copy {
  position: relative;
  z-index: 2;
  max-width: 460px;
  margin-top: clamp(20px, 4vh, 40px);
  opacity: 1;
  transform: none;
}
@media (min-width: 940px) {
  .reveal-copy {
    position: absolute;
    left: clamp(20px, 4vw, 48px);
    bottom: clamp(20px, 4vw, 48px);
    z-index: 2;
    max-width: 420px;
    margin-top: 0;
    padding: 26px 30px;
    border-radius: 12px;
    background: rgba(5, 4, 3, .62);
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .reveal-copy.is-converted { opacity: 1; transform: translateY(0); }
}
.reveal-images img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.reveal-images .over {
  /* driven by --p, 0 → fully negative, 1 → fully converted */
  clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0);
}
.reveal-edge {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--p, 0) * 100%);
  width: 1px;
  background: linear-gradient(to bottom,
      transparent, color-mix(in srgb, var(--mask) 85%, #fff) 18%,
      color-mix(in srgb, var(--mask) 85%, #fff) 82%, transparent);
  box-shadow: 0 0 22px 2px color-mix(in srgb, var(--mask) 55%, transparent);
  opacity: calc(min(var(--p, 0), 1 - var(--p, 0)) * 3.4);
  pointer-events: none;
}
.reveal-figure figcaption {
  margin-top: 16px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3);
}

/* Reduced motion, or no JS: no pinning, show the converted frame outright. */
@media (prefers-reduced-motion: reduce) {
  .reveal-track { height: auto; }
  .reveal-stage { position: static; min-height: 0; }
  .reveal-images .over { clip-path: none; }
  .reveal-edge { display: none; }
  .reveal-copy { position: static !important; opacity: 1 !important; transform: none !important; background: none; padding: 0; margin-top: clamp(20px, 4vh, 40px); }
}
html:not(.js) .reveal-track { height: auto; }
html:not(.js) .reveal-stage { position: static; min-height: 0; }
html:not(.js) .reveal-images .over { clip-path: none; }
html:not(.js) .reveal-copy { position: static !important; opacity: 1 !important; transform: none !important; background: none; padding: 0; margin-top: clamp(20px, 4vh, 40px); }

/* ─────────────────────── the engine ─────────────────────── */
.compare {
  margin-top: clamp(48px, 8vh, 88px);
  display: grid; gap: clamp(20px, 3vw, 34px);
}
@media (min-width: 820px) { .compare { grid-template-columns: 1fr 1fr; } }

.compare-cell { margin: 0; will-change: transform; }
.compare-cell img {
  width: 100%;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px var(--line-soft);
}
.compare-cell figcaption {
  margin-top: 1.1rem;
  font-size: .875rem; line-height: 1.55;
  color: var(--text-2);
  max-width: 40ch;
}
.tag {
  display: block;
  margin-bottom: .5rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
}
.tag-off { color: var(--text-3); }
.tag-on  { color: var(--mask); }

/* ─────────────────────── the four screens ─────────────────────── */
.screen-list { margin-top: clamp(56px, 9vh, 110px); display: grid; gap: clamp(80px, 13vh, 170px); }

.screen { display: grid; gap: clamp(20px, 3vw, 32px); }
.screen-copy { max-width: 640px; }

.screen-n {
  margin: 0 0 1rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .78rem; letter-spacing: .18em;
  color: var(--mask);
}
.screen-shot { margin: 0; will-change: transform; }
.screen-shot img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 40px 100px -34px rgba(0,0,0,.95), 0 0 0 1px var(--line-soft);
}

/* ─────────────────────── measured, not eyeballed ─────────────────────── */
.stat-grid {
  margin-top: clamp(48px, 8vh, 90px);
  display: grid; gap: clamp(24px, 3vw, 34px);
}
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

.stat-card {
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(22px, 2.6vw, 30px);
}
.stat-num {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  font-weight: 500;
  color: var(--mask);
  letter-spacing: -.02em;
  line-height: 1;
  margin: 0 0 1.1rem;
}
.stat-unit { font-size: .55em; color: var(--mask); opacity: .75; }
.stat-card .h4 { margin-bottom: .55em; }
.stat-card .body { font-size: .95rem; max-width: none; }

/* ─────────────────────── uncommon ─────────────────────── */
.rare-grid {
  margin-top: clamp(48px, 8vh, 90px);
  display: grid; gap: clamp(24px, 3vw, 34px);
}
@media (min-width: 860px) { .rare-grid { grid-template-columns: repeat(3, 1fr); } }

.rare-card {
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(22px, 2.6vw, 30px);
  display: flex; flex-direction: column;
}
.rare-card .body { font-size: .95rem; max-width: none; flex: 1; }
.rare-card figure { margin: 1.8rem 0 0; }
.rare-card img {
  width: 100%; border-radius: 6px;
  border: 1px solid var(--line-soft);
  opacity: .92;
}
.rare-icon {
  width: 30px; height: 30px;
  margin-bottom: 1.1rem;
  color: var(--mask);
  flex: none;
}

/* honeypot field: present in the DOM for bots, invisible and unreachable
   for everyone else. Never display:none — some crawlers skip hidden fields
   on purpose, which defeats the point. */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────── side by side: Negative Lab Pro and Spool ─────────────── */
.versus-head { margin-bottom: clamp(28px, 5vh, 56px); }
.cmp {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--line);
  background: var(--ink-sunk);
  touch-action: pan-y;
  aspect-ratio: 3 / 2;
}
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp .cmp-nlp { clip-path: inset(0 calc(100% - var(--s)) 0 0); }
.cmp-line {
  position: absolute; top: 0; bottom: 0; left: var(--s);
  width: 2px; margin-left: -1px;
  background: var(--mask);
  box-shadow: 0 0 22px 2px color-mix(in srgb, var(--mask) 55%, transparent);
  pointer-events: none;
}
.cmp-grip {
  position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: var(--mask);
  box-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.cmp-grip::before, .cmp-grip::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-block: 6px solid transparent; margin-top: -6px;
}
.cmp-grip::before { left: 10px; border-right: 7px solid var(--ink); }
.cmp-grip::after { right: 10px; border-left: 7px solid var(--ink); }
.cmp-tag {
  position: absolute; top: 14px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(10,8,7,.72);
  padding: 7px 11px; border-radius: 6px; line-height: 1.4;
  pointer-events: none;
}
.cmp-tag small { display: block; font-size: .62rem; color: #c9bfb7; letter-spacing: .1em; }
.cmp-tag-l { left: 14px; }
.cmp-tag-r { right: 14px; text-align: right; }
.cmp-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
}
.cmp-range:focus-visible + * , .cmp:has(.cmp-range:focus-visible) { outline: 2px solid var(--mask); outline-offset: 3px; }
.cmp-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 24px; margin-top: 18px;
}
.cmp-caption {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2);
}
.cmp-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-thumb {
  padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  background: none; cursor: pointer; width: 72px; aspect-ratio: 3 / 2;
  opacity: .55; transition: opacity .2s var(--ease), border-color .2s var(--ease);
}
.cmp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-thumb:hover { opacity: .85; }
.cmp-thumb.is-on { opacity: 1; border-color: var(--mask); }
.cmp-thumb:focus-visible { outline: 2px solid var(--mask); outline-offset: 2px; }
.cmp-note { margin: 14px 0 0; color: var(--text-3); font-size: .8rem; max-width: 70ch; }
@media (max-width: 600px) {
  .cmp-thumbs { gap: 6px; }
  .cmp-thumb { width: calc((100vw - 2 * var(--pad) - 30px) / 6); }
  .cmp-tag { font-size: .58rem; padding: 4px 7px; top: 8px; letter-spacing: .08em; }
  .cmp-tag-l { left: 8px; } .cmp-tag-r { right: 8px; }
  .cmp-tag small { display: none; }
  .cmp-grip { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
}

/* ─────────────────────── footer ─────────────────────── */
.foot {
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(56px, 8vh, 90px);
  background: var(--ink-sunk);
}
.foot-grid { display: grid; gap: 28px; }
@media (min-width: 860px) {
  .foot-grid { grid-template-columns: 1fr 1fr auto; align-items: end; }
}
.foot-word { width: clamp(120px, 16vw, 190px); height: auto; color: #3a322d; }
.foot-line { margin: 0; color: var(--text-3); font-size: .875rem; max-width: 44ch; }
.foot-meta { margin: 0; color: var(--text-3); font-size: .8rem; }
.foot-legal { grid-column: 1 / -1; display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.foot-legal p { margin: 0; color: var(--text-3); font-size: .72rem; line-height: 1.6; max-width: 120ch; }
.foot-meta a { color: var(--text-3); text-decoration: underline; text-underline-offset: 2px; }
.foot-meta a:hover { color: var(--text-2); }

/* ───────────────── entrance, kept very quiet ───────────────── */
[data-rise] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-rise].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-rise] { opacity: 1; transform: none; transition: none; }
}

/* ─────────────────────── the library ─────────────────────── */
.lib-grid {
  margin-top: clamp(48px, 8vh, 90px);
  display: grid;
  gap: clamp(24px, 3vw, 40px);
}
@media (min-width: 860px) {
  .lib-grid { grid-template-columns: 1fr 1fr; }
  .lib-wide { grid-column: 1 / -1; }
}
.lib-grid figure { margin: 0; will-change: transform; }
.lib-grid img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 30px 80px -34px rgba(0,0,0,.95), 0 0 0 1px var(--line-soft);
}
.lib-grid figcaption {
  margin-top: 1.6rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 48ch;
}

/* the uncommon grid, now a masonry-ish set of cards */
@media (min-width: 640px) and (max-width: 1023px) {
  .rare-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .rare-grid { grid-template-columns: repeat(3, 1fr); }
  .rare-card-lead { grid-column: span 2; }
}
.rare-card-lead .body { font-size: 1.0625rem; max-width: 52ch; }


/* ─────────────────────── beta ─────────────────────── */
/* On the bar, so the state travels with the name rather than living only
   in the hero, which a reader scrolls past once. */
.chip {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mask);
  border: 1px solid color-mix(in srgb, var(--mask) 38%, transparent);
  border-radius: 999px;
  padding: 3px 7px 2px;
  line-height: 1;
  align-self: center;
}

/* ═══════════════════════════════════════════════════════════════════
   Polish pass — texture, iconography, micro-detail.
   Everything here leans on the motifs the subject already owns:
   film grain, sprocket holes, crop marks, registration ticks. No
   decoration that could just as easily belong to a SaaS dashboard.
   ═══════════════════════════════════════════════════════════════════ */

/* ── grain ──────────────────────────────────────────────────────
   A single fixed layer of real noise over the whole page. The site
   is about film; a screen that is perfectly smooth reads as the one
   thing the subject never is. Kept under 5% so it is felt, not seen. */
.grain {
  position: fixed; inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: .042;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}
@media (prefers-reduced-motion: reduce) { .grain { opacity: .03; } }

/* ── scroll progress ────────────────────────────────────────────
   The page is long and scroll-driven; a reader deep in a pinned
   section has no other cue for how much is left. */
.bar-progress {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--mask-d), var(--mask));
  box-shadow: 0 0 14px color-mix(in srgb, var(--mask) 55%, transparent);
  will-change: transform;
}

/* ── kicker, with a tick ────────────────────────────────────────
   A section label reads as a label rather than a stray line of
   small caps once something anchors it to the left margin. */
.kicker { display: flex; align-items: center; gap: .85em; }
.kicker::before {
  content: ""; flex: none;
  width: 20px; height: 1px;
  background: color-mix(in srgb, var(--mask) 72%, transparent);
}

/* ── hero ───────────────────────────────────────────────────────
   A slow bloom in the mask colour behind the headline — the orange
   a negative is actually printed through — plus crop marks at the
   corners of the copy, the way a frame gets trimmed. */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; z-index: -1;
  left: -12%; top: -18%;
  width: min(86vw, 1150px); aspect-ratio: 1.45;
  background: radial-gradient(ellipse at 32% 42%,
      color-mix(in srgb, var(--mask) 14%, transparent), transparent 63%);
  filter: blur(28px);
  pointer-events: none;
}
.hero-wrap { position: relative; }
.hero-wrap::before,
.hero-wrap::after {
  content: ""; position: absolute;
  width: 15px; height: 15px;
  border: 0 solid color-mix(in srgb, var(--mask) 48%, transparent);
  opacity: .6; pointer-events: none;
}
.hero-wrap::before {
  left: calc(var(--pad) - 13px); top: -14px;
  border-left-width: 1px; border-top-width: 1px;
}
.hero-wrap::after {
  right: calc(var(--pad) - 13px); bottom: -16px;
  border-right-width: 1px; border-bottom-width: 1px;
}

@media (prefers-reduced-motion: no-preference) {
  .dot { animation: dot-pulse 3s var(--ease) infinite; }
  @keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mask) 22%, transparent); }
    50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--mask) 5%, transparent); }
  }
}

/* ── buttons ────────────────────────────────────────────────────── */
.btn:hover { box-shadow: 0 12px 34px -16px rgba(255, 255, 255, .55); }
.btn-soon:hover { box-shadow: none; }

/* ── cards ──────────────────────────────────────────────────────
   One hover behaviour shared by both card grids: a small lift and a
   light along the top edge, like a sheet catching the safelight. */
.stat-card, .rare-card {
  position: relative;
  transition: transform .35s var(--ease), border-color .35s var(--ease),
              background .35s var(--ease);
}
.stat-card::after, .rare-card::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent,
      color-mix(in srgb, var(--mask) 55%, transparent), transparent);
  opacity: 0; transition: opacity .35s var(--ease);
  pointer-events: none;
}
.stat-card:hover, .rare-card:hover {
  transform: translateY(-3px);
  border-color: #3a312b;
  background: #181413;
}
.stat-card:hover::after, .rare-card:hover::after { opacity: 1; }

/* the small schematic in the corner of each measured card */
.stat-fig {
  position: absolute;
  top: clamp(20px, 2.4vw, 28px);
  right: clamp(20px, 2.4vw, 28px);
  width: 46px; height: 30px;
  color: var(--mask);
  opacity: .38;
  pointer-events: none;
}
.stat-num { position: relative; padding-right: 58px; }
/* a word in the number slot is a label, not a figure — size it like one */
.stat-num.is-word { font-size: clamp(1.3rem, 2.2vw, 1.65rem); letter-spacing: .01em; }

/* ── icons ──────────────────────────────────────────────────────
   One 24-unit grid, one stroke weight, one set of caps, so seven
   cards read as one family rather than seven drawings. */
.rare-icon {
  width: 28px; height: 28px;
  margin-bottom: 1.2rem;
  color: var(--mask);
  opacity: .9;
  flex: none;
}

/* ── crop marks on the application screenshots ──────────────────── */
.screen-shot { position: relative; }
.screen-shot::before,
.screen-shot::after {
  content: ""; position: absolute;
  width: 20px; height: 20px;
  border: 0 solid color-mix(in srgb, var(--mask) 42%, transparent);
  opacity: .55; pointer-events: none;
}
.screen-shot::before {
  left: -11px; top: -11px;
  border-left-width: 1px; border-top-width: 1px;
}
.screen-shot::after {
  right: -11px; bottom: -11px;
  border-right-width: 1px; border-bottom-width: 1px;
}

/* ── the numerals on the four rooms ─────────────────────────────── */
.screen-n {
  font-size: clamp(2.1rem, 4.2vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  margin-bottom: .75rem;
  color: color-mix(in srgb, var(--mask) 58%, transparent);
}
@supports (-webkit-text-stroke: 1px currentColor) {
  .screen-n {
    color: transparent;
    -webkit-text-stroke: 1.2px color-mix(in srgb, var(--mask) 62%, transparent);
  }
}

/* ── a strip of film edge, where a section ends ─────────────────── */
.filmedge {
  height: 22px;
  background-color: #120f0d;
  background-image: radial-gradient(circle at 15px 11px,
      var(--ink) 0 3.4px, transparent 3.8px);
  background-size: 30px 22px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

/* ── footer ─────────────────────────────────────────────────────── */
.foot-word { transition: color .45s var(--ease); }
.foot:hover .foot-word { color: #4c423b; }

/* The illustration belongs with the sentence it illustrates. Bottom-
   aligning it left a hole in the middle of every shorter card. */
.rare-card .body { flex: none; }
.rare-card figure { margin-top: 1.5rem; }

/* ── footer, given some structure ───────────────────────────────── */
.foot-grid {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}
@media (min-width: 860px) {
  .foot-grid { grid-template-columns: 1.4fr auto auto; }
}
.foot-brand { display: grid; gap: 18px; justify-items: start; }
.foot-col { display: grid; gap: 12px; align-content: start; }
.foot-col h2 {
  margin: 0 0 2px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 400;
  color: var(--text-3);
}
.foot-col a {
  font-size: .9rem;
  color: var(--text-2);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.foot-col a:hover { color: var(--text); }
.foot-bottom {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  align-items: baseline; justify-content: space-between;
  margin-top: clamp(28px, 4vh, 44px);
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}

/* A pinned frame has to fit the screen it is pinned to, caption and all.
   Sized from the viewport height and the frame's own ratio, so nothing is
   cropped by the stage's overflow on a laptop screen. */
.reveal-grid { padding-block: clamp(28px, 5vh, 64px); }
.reveal-figure {
  width: 100%;
  margin-inline: auto;
  max-width: min(100%, calc((100svh - 215px) * var(--ar, 1.5)));
}

/* Cards sit at their own height rather than stretching to the tallest in
   the row — less dead space under the short ones. */
.stat-grid, .rare-grid { align-items: start; }

/* The overlay sits on whatever the photograph happens to be doing behind
   it, which at this point is a bright window. A touch more scrim and a
   soft shadow keep the words readable over the worst case. */
@media (min-width: 940px) {
  .reveal-copy { background: rgba(5, 4, 3, .7); }
  .reveal-copy .h2 { text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
  .reveal-copy .body { color: #c3bab3; }
}

/* the same registration marks on the library's screenshots */
.lib-grid figure { position: relative; }
.lib-grid figure::before,
.lib-grid figure::after {
  content: ""; position: absolute;
  width: 20px; height: 20px;
  border: 0 solid color-mix(in srgb, var(--mask) 42%, transparent);
  opacity: .55; pointer-events: none;
}
.lib-grid figure::before {
  left: -11px; top: -11px;
  border-left-width: 1px; border-top-width: 1px;
}
.lib-grid figure::after {
  right: -11px; top: -11px;
  border-right-width: 1px; border-top-width: 1px;
}

/* ── schematics inside the cards ────────────────────────────────
   Drawn rather than cropped from the app: these explain a shape of
   behaviour, which a 700x50 strip of a real toolbar never did. */
.rare-card .card-fig {
  display: block;
  width: 100%; height: auto;
  margin-top: 1.6rem;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #0d0b0a;
  color: var(--text-2);
}

/* the closing card runs the full width of the grid */
.rare-card-wide { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .rare-card-wide { flex-direction: row; align-items: center; gap: clamp(20px, 3vw, 34px); }
  .rare-card-wide .rare-icon { margin-bottom: 0; }
  .rare-card-wide .h4 { margin: 0; flex: none; max-width: 22ch; }
  /* The card body opts out of flexing elsewhere in the grid, which would
     leave a long line here running off the edge instead of wrapping. */
  .rare-card-wide .body { margin: 0; flex: 1 1 auto; min-width: 0; }
}

/* ── language switch ───────────────────────────────────────────── */
.lang {
  display: flex; align-items: center; gap: 2px;
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem; letter-spacing: .12em;
}
.lang a, .lang span {
  padding: 5px 7px;
  border-radius: 6px;
  text-decoration: none;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.lang a { color: var(--text-3); }
.lang a:hover { color: var(--text); background: var(--ink-raised); }
.lang .lang-on { color: var(--mask); }

/* Real 35 mm perforations are rounded rectangles, not round holes —
   a circle reads as punched paper, not as film. */
.filmedge {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22'%3E%3Crect width='30' height='22' fill='%23120f0d'/%3E%3Crect x='8.5' y='6.4' width='13' height='9.2' rx='2.6' fill='%230a0807'/%3E%3C/svg%3E");
  background-size: 30px 22px;
  background-repeat: repeat-x;
}

/* ── bands ──────────────────────────────────────────────────────────
   One idea per tile, dropped into the gaps between the big sections so
   the page reads as a run of separate small claims rather than one more
   wall of cards. The figure and the words swap sides down the page; on a
   phone the figure goes on top and the whole thing stacks. */
.band {
  display: block;
  padding: clamp(26px, 4vh, 44px) 0;
}
.band-inner {
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(22px, 3vw, 38px);
  display: flex; flex-direction: column;
  gap: clamp(20px, 3vw, 40px);
  position: relative;
  overflow: hidden;
}
/* the same hairline of light the cards carry along their top edge */
.band-inner::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09) 30%, rgba(255, 255, 255, .09) 70%, transparent);
}
.band-fig {
  flex: none;
  color: var(--mask);
  width: 100%;
}
.band-fig svg { display: block; width: 100%; height: auto; }
/* a piece of the real app: its own black ground, the cards as they are */
.band-ui {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 14px; border-radius: 12px;
  background: #0b0a0a; border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.band-ui img { display: block; height: auto; max-width: 100%; }
.band-copy { min-width: 0; }
.band-kicker {
  margin: 0 0 .6rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mask);
}
.band-copy .h4 { margin: 0 0 .7rem; }
.band-copy .body { margin: 0; font-size: .95rem; max-width: 58ch; }

@media (min-width: 820px) {
  .band-inner { flex-direction: row; align-items: center; }
  .band-fig { width: clamp(240px, 34%, 400px); }
  .band:nth-of-type(even) .band-inner { flex-direction: row-reverse; }
}

/* Two tiles sharing one gap sit closer together than two gaps would put
   them, so the pair still reads as one pause in the page. */
.band-pair { display: grid; gap: clamp(18px, 2.4vw, 26px); }
.band-pair .band { padding: 0; }
.band-pair-wrap { padding: clamp(26px, 4vh, 44px) 0; }

/* ── beta notice ──────────────────────────────────────────────────
   The one block on the page meant to stop the eye: a mask-coloured edge
   and a faint warm wash, so it reads as a notice rather than one more card. */
.betanote { padding: clamp(40px, 7vh, 80px) 0 clamp(56px, 9vh, 100px); }
.betanote-inner {
  position: relative;
  border: 1px solid rgba(210, 102, 31, .45);
  border-left: 4px solid var(--mask);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(210, 102, 31, .13), transparent 60%),
    var(--ink-raised);
  padding: clamp(26px, 4vw, 48px);
}
.betanote-tag {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 1.1rem;
  padding: 5px 11px;
  border: 1px solid rgba(210, 102, 31, .55);
  border-radius: 999px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mask);
}
.betanote-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--mask);
}
.betanote .body { max-width: 64ch; }
.betanote-ways {
  margin: 1.8rem 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
}
.btn-quiet {
  background: transparent; color: var(--text); padding: 12px 22px;
  border: 1px solid var(--line);
}
.btn-quiet:hover { background: var(--mask); border-color: var(--mask); color: #120a04; box-shadow: none; }
.betanote-or { color: var(--text-2); font-size: .95rem; }

/* Dust closes the grid as a full-width card: words on the left, its
   schematic taking the room on the right. */
@media (min-width: 700px) {
  .rare-card-wide .card-fig { flex: 0 0 34%; margin: 0; }
}
.band-fig { width: 100%; }
@media (min-width: 820px) { .band-fig { width: clamp(280px, 40%, 470px); } }

.platform-soon { margin-top: .35rem; color: var(--text-3); }

/* ── subpages: changelog and about ──────────────────────────────────── */
.subpage-head { padding-bottom: clamp(40px, 7vh, 72px); }
.subpage .bar { background: rgba(10, 8, 7, .82); backdrop-filter: blur(14px); }

.log { padding-bottom: clamp(80px, 12vh, 140px); }
.log-wrap { display: grid; }
.log-entry {
  display: grid; gap: 14px;
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 820px) {
  .log-entry { grid-template-columns: 240px 1fr; gap: 48px; }
}
.log-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; align-content: start; }
@media (min-width: 820px) { .log-meta { flex-direction: column; gap: 6px; position: sticky; top: 96px; align-self: start; } }
.log-version {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.05rem; color: var(--mask);
}
.log-date { margin: 0; color: var(--text-3); font-size: .875rem; }
.log-latest {
  margin: 4px 0 0; padding: 3px 9px;
  border: 1px solid rgba(210, 102, 31, .55); border-radius: 999px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mask);
}
.log-body .h4 { margin: 0 0 1rem; font-size: 1.4rem; }
.log-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.log-list li {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: baseline;
  color: var(--text-2); font-size: .98rem; line-height: 1.55;
}
.log-tag {
  justify-self: start;
  padding: 2px 8px; border-radius: 6px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--text-3);
}
.log-new { color: var(--mask); border-color: rgba(210, 102, 31, .45); }
.log-improved { color: var(--text); border-color: #3a322d; }
.log-fixed { color: var(--text-2); }
@media (max-width: 520px) { .log-list li { grid-template-columns: 1fr; gap: 6px; } }

.about-wrap { max-width: 900px; }
.about-text { margin-top: clamp(32px, 5vh, 56px); display: grid; gap: 1.2rem; }
.about-text .body { margin: 0; max-width: 62ch; font-size: 1.125rem; line-height: 1.7; }
.about-text .about-turn {
  color: var(--text); font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.25;
  padding-left: 18px; border-left: 3px solid var(--mask);
}
.about-contact { padding-top: 0; }
.about-contact .wrap-wide { padding-inline: var(--pad); }
.about-contact .h3 { margin-bottom: .2rem; }
a.betanote-or { text-decoration: none; }
a.betanote-or:hover { color: var(--text); }
.about-contact .betanote-inner { max-width: calc(900px - 2 * var(--pad)); margin-inline: auto; }

/* ── hero: headline on the left, the pitch and the buttons on the right ── */
@media (min-width: 1024px) {
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 96px);
    align-items: end;
  }
  .hero-grid .display { font-size: clamp(4.2rem, 6.6vw, 7.4rem); max-width: none; }
  .hero-grid .lede { max-width: 40ch; }
  .hero-grid .hero-cta { margin-top: 0; }
  /* the right column fills out to the same edge the headline starts from */
  /* Both buttons the full width of the column, one above the other: side by
     side the licence button got half the width and wrapped its label. */
  .hero-grid .hero-buttons { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .hero-grid .hero-buttons .btn { width: 100%; }
}

/* ── the app, first thing under the hero, as a laptop ─────────────────
   A wide look at the whole window before anything is explained, so the
   interface is what a visitor remembers. It opens as it arrives and folds
   shut as the page moves on (main.js writes --lid in degrees). */
.laptop {
  position: relative;
  width: min(92vw, 1600px);
  margin: clamp(64px, 10vh, 120px) auto 0;
  perspective: 2600px;
  perspective-origin: 50% 100%;
  --lid: 0deg;
}
.laptop::before {
  content: ""; position: absolute; z-index: -1;
  inset: 10% 8% -6%;
  background: radial-gradient(ellipse at 50% 45%,
      color-mix(in srgb, var(--mask) 22%, transparent), transparent 70%);
  filter: blur(60px);
}
.laptop-lid {
  transform-origin: 50% 100%;
  transform: rotateX(var(--lid));
  will-change: transform;
  padding: clamp(8px, 1.1vw, 18px);
  border-radius: clamp(12px, 1.4vw, 22px) clamp(12px, 1.4vw, 22px) 4px 4px;
  background: linear-gradient(180deg, #1b1715, #120f0e);
  border: 1px solid #2c2622;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .95);
}
.laptop-screen {
  overflow: hidden;
  border-radius: 6px;
  background: #000;
}
.laptop-screen img { display: block; width: 100%; height: auto; }
.laptop-base {
  position: relative;
  width: 108%;
  margin-left: -4%;
  height: clamp(12px, 1.3vw, 22px);
  border-radius: 0 0 clamp(14px, 1.6vw, 26px) clamp(14px, 1.6vw, 26px);
  background: linear-gradient(180deg, #2a2420 0%, #16120f 55%, #0d0a09 100%);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9);
}
/* the thumb notch at the front edge */
.laptop-base span {
  position: absolute; left: 50%; top: 0;
  width: 14%; height: 40%;
  transform: translateX(-50%);
  border-radius: 0 0 10px 10px;
  background: #0d0a09;
}
@media (max-width: 700px) {
  .laptop { width: calc(100vw - 2 * var(--pad)); }
}

/* the second platform, alongside the primary download */
.btn-alt {
  background: transparent;
  color: var(--text);
  border: 1px solid #3a322d;
}
.btn-alt:hover { background: var(--ink-raised); border-color: #4a403a; color: #fff; box-shadow: none; }

/* ───────────────────────── 0.7 relaunch ─────────────────────────
   What's new, try-it-free, pricing, release news and FAQ. Same tokens as
   the rest of the page: warm ink, one mask orange, hairline borders. */

.text-link { color: var(--mask); text-decoration: none; white-space: nowrap; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* what's new — a bento of six cards, the first one wide */
.news-head {
  display: grid; gap: 24px; align-items: end;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  margin-bottom: clamp(32px, 5vw, 56px);
}
@media (max-width: 800px) { .news-head { grid-template-columns: 1fr; } }
.news-pill {
  display: inline-flex; align-items: center; margin-right: .6em;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--mask) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--mask) 45%, transparent);
  color: var(--mask); font-variant-numeric: tabular-nums;
}
.news-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .news-grid { grid-template-columns: 1fr; } }
.news-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(22px, 2.4vw, 28px);
  background: linear-gradient(180deg, var(--ink-raised), var(--ink-sunk));
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.news-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 0%), color-mix(in srgb, var(--mask) 14%, transparent), transparent 60%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.news-card:hover { border-color: color-mix(in srgb, var(--mask) 38%, var(--line)); transform: translateY(-3px); }
.news-card:hover::before { opacity: 1; }
.news-card-wide { grid-column: span 2; }
@media (max-width: 1000px) { .news-card-wide { grid-column: auto; } }
.news-card .body { font-size: .95rem; max-width: 52ch; }
.news-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: color-mix(in srgb, var(--mask) 13%, transparent);
  color: var(--mask);
}
.news-icon svg { width: 19px; height: 19px; }
.news-shot { margin: 8px 0 0; }
.news-shot img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line-soft); display: block; }

/* try it free */
.try {
  display: grid; gap: clamp(32px, 5vw, 72px); align-items: center;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  padding: clamp(28px, 4.5vw, 56px);
  border: 1px solid var(--line); border-radius: 22px;
  background:
    radial-gradient(900px 420px at 0% 0%, color-mix(in srgb, var(--mask) 13%, transparent), transparent 60%),
    var(--ink-raised);
}
@media (max-width: 900px) { .try { grid-template-columns: 1fr; } }
.try-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.try-actions .platform { margin: 0; }
.try-soon { margin-top: 18px; color: var(--text-3); font-size: .9rem; }
.try-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.try-steps li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 2px; align-items: center;
  padding: 18px 20px; border-radius: 14px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 60%, transparent);
}
.try-steps strong { font-weight: 600; color: var(--text); }
.try-steps li > span:last-child { grid-column: 2; color: var(--text-2); font-size: .92rem; }
.step-n {
  grid-row: span 2; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--mask) 55%, transparent);
  color: var(--mask); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .85rem;
}

/* pricing */
.price-card {
  display: grid; gap: clamp(28px, 4vw, 56px); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: clamp(32px, 4vw, 52px);
  padding: clamp(28px, 4vw, 52px);
  border-radius: 22px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #1a1411, var(--ink-raised) 55%);
  border: 1px solid color-mix(in srgb, var(--mask) 35%, var(--line));
  box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--mask) 45%, transparent);
}
@media (max-width: 760px) { .price-card { grid-template-columns: 1fr; } }
.price-pill {
  display: inline-block; margin: 0 0 14px; padding: 3px 10px; border-radius: 999px;
  background: var(--mask); color: #120a04; font-size: .78rem; font-weight: 600; letter-spacing: .02em;
}
.price { display: flex; align-items: baseline; gap: 14px; margin: 0 0 26px; flex-wrap: wrap; }
.price s { color: var(--text-3); font-size: 1.6rem; text-decoration-thickness: 2px; }
.price-now { font-size: clamp(3.4rem, 7vw, 5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--text); }
.price-unit { color: var(--text-2); font-size: .95rem; }
.price-note { margin: 16px 0 0; color: var(--text-3); font-size: .88rem; }
.buy-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.buy-actions .btn { flex: 1 1 auto; justify-content: center; }
.price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.price-list li { display: flex; align-items: center; gap: 12px; color: var(--text); font-size: 1.02rem; }
.price-list svg { width: 20px; height: 20px; flex: none; color: var(--mask); }
.pricing .fineprint { margin-top: 18px; }
.news-card .h4, .news-card .body { margin: 0; }

/* release news */
.signup-block {
  display: grid; gap: clamp(24px, 4vw, 64px); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--line); border-radius: 20px; background: var(--ink-raised);
}
@media (max-width: 860px) { .signup-block { grid-template-columns: minmax(0, 1fr); } }
.signup-block > * { min-width: 0; }
@media (max-width: 420px) { .signup-row { flex-wrap: wrap; } .signup-row button { flex: 1 1 100%; } }
.signup-row { display: flex; gap: 8px; }
.signup-row input[type="email"] { flex: 1; min-width: 0; }
.signup .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup-note { color: var(--text-3); font-size: .85rem; margin: 10px 0 0; }

/* FAQ */
.faq-wrap { display: grid; gap: clamp(28px, 5vw, 80px); grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: 1fr; } }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 22px 44px 22px 0; font-size: 1.08rem; font-weight: 600; color: var(--text);
  transition: color .3s var(--ease);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 1.6px solid var(--text-2); border-bottom: 1.6px solid var(--text-2);
  transform: rotate(45deg); transition: transform .35s var(--ease), border-color .3s;
}
.faq-list details[open] summary::after { transform: rotate(225deg); margin-top: -2px; border-color: var(--mask); }
.faq-list summary:hover { color: var(--mask); }
.faq-list details .body { margin: 0 0 22px; max-width: 62ch; }
.faq-list details .body a { color: var(--mask); }
@media (prefers-reduced-motion: no-preference) {
  .faq-list details[open] .body { animation: faq-open .45s var(--ease); }
  @keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

.btn-price { margin-left: .7em; padding-left: .7em; border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 30%, transparent); }
.btn-price s { opacity: .55; margin-right: .15em; }
@media (max-width: 520px) { .bar > .btn-sm { display: none; } }

/* the platforms still to come, under the download buttons */
.btn-alt { white-space: nowrap; }
.os-soon { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: 6px; font-size: .84rem; color: var(--text-3); }
.os-soon li { display: flex; align-items: center; gap: 9px; }
.os-soon b { color: var(--text-2); font-weight: 600; }
.os-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--text-3) 70%, transparent); }
.os-dot-soon { background: var(--mask); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mask) 22%, transparent); }
.try-actions + .os-soon, .try .os-soon { margin-top: 18px; }
.os-dot-live { background: #4fb477; box-shadow: 0 0 0 3px rgba(79, 180, 119, .2); }
.try-actions { flex-wrap: wrap; }

/* ── inside Spool: a grid of real screenshots ─────────────────────────
   Bento-style tiles, each a crop of the app itself on its own black ground.
   Three columns; "w" spans two, "w3" the whole row, "t" two rows. */
.feat-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  margin-top: clamp(28px, 5vh, 56px);
}
.feat {
  position: relative; display: flex; flex-direction: column;
  min-width: 0; overflow: hidden;
  background: var(--ink-raised);
  border: 1px solid var(--line); border-radius: 18px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.feat::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1) 30%, rgba(255,255,255,.1) 70%, transparent);
}
.feat:hover { border-color: color-mix(in srgb, var(--mask) 40%, var(--line)); transform: translateY(-3px); }
.feat-w { grid-column: span 2; }
.feat-w3 { grid-column: 1 / -1; }
.feat-t { grid-row: span 2; }
.feat-shot {
  margin: 0; position: relative; overflow: hidden;
  background: #0b0a0a; border-bottom: 1px solid var(--line-soft);
  aspect-ratio: 16 / 10;
}
.feat-w .feat-shot { aspect-ratio: 16 / 7.4; }
.feat-w3 .feat-shot { aspect-ratio: 16 / 5.4; }
.feat-t .feat-shot { aspect-ratio: auto; flex: 1 1 auto; min-height: 360px; }
.feat-shot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; display: block;
  transition: transform .8s var(--ease);
}
.feat:hover .feat-shot img { transform: scale(1.025); }
.feat-copy { padding: 20px 22px 24px; }
.feat-kicker {
  margin: 0 0 .5rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mask);
}
.feat-copy .h4 { margin: 0 0 .5rem; }
.feat-copy .body { margin: 0; font-size: .93rem; max-width: 60ch; color: var(--text-2); }
.feat-text { justify-content: flex-end; background:
  radial-gradient(120% 90% at 100% 0%, rgba(210,102,31,.14), transparent 60%), var(--ink-raised); }
@media (max-width: 1000px) {
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-w3 { grid-column: 1 / -1; }
  .feat-t { grid-row: auto; }
  .feat-t .feat-shot { aspect-ratio: 4 / 5; flex: none; min-height: 0; }
}
@media (max-width: 640px) {
  .feat-grid { grid-template-columns: 1fr; }
  .feat-w, .feat-w3 { grid-column: auto; }
  .feat-w .feat-shot, .feat-w3 .feat-shot { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .feat, .feat-shot img { transition: none; }
  .feat:hover, .feat:hover .feat-shot img { transform: none; }
}

/* ── free and licence ─────────────────────────────────────────────── */
.plans .anchor { position: relative; top: -90px; display: block; height: 0; }
.plan-cards { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-top: clamp(28px, 5vh, 56px); }
@media (max-width: 820px) { .plan-cards { grid-template-columns: 1fr; } }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: clamp(24px, 3vw, 38px);
  background: var(--ink-raised); border: 1px solid var(--line); border-radius: 18px;
}
.plan-main {
  border-color: rgba(210, 102, 31, .5);
  background: radial-gradient(120% 120% at 100% 0%, rgba(210,102,31,.16), transparent 60%), var(--ink-raised);
}
.plan-name {
  margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2);
}
.plan-price { margin: 0; font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.plan-price s { color: var(--text-3); font-weight: 600; font-size: .55em; margin-right: .2em; }
.plan-price .price-unit { font-size: .9rem; font-weight: 400; color: var(--text-2); letter-spacing: 0; margin-left: .3em; }
.plan-line { margin: 0; color: var(--text-2); max-width: 52ch; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
.plan .platform { margin: 0; color: var(--text-3); font-size: .8rem; }
.plan-table-wrap { margin-top: 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--ink-raised); }
.plan-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
.plan-table th, .plan-table td { padding: 14px 20px; text-align: left; vertical-align: middle; border-top: 1px solid var(--line-soft); }
.plan-table thead th {
  border-top: 0; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-weight: 500;
}
.plan-table thead th:last-child { color: var(--mask); }
.plan-table tbody th { font-weight: 500; color: var(--text); width: 46%; }
.plan-table td { color: var(--text-2); width: 27%; }
.plan-table td:last-child { color: var(--text); background: rgba(210, 102, 31, .05); }
.cmp-yes { display: inline-flex; width: 20px; height: 20px; color: var(--mask); }
.cmp-yes svg { width: 100%; height: 100%; }
.cmp-no { color: var(--text-3); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.plans .fineprint { margin-top: 18px; }
@media (max-width: 640px) {
  .plan-table { min-width: 0; font-size: .8rem; }
  .plan-table th, .plan-table td { padding: 10px 10px; }
  .plan-table tbody th { width: 40%; }
  .plan-table td { width: 30%; }
  .plan-table thead th { font-size: .62rem; letter-spacing: .1em; }
}
/* A crop of one part of the app is shown whole, fitted on the app's own
   black ground; only full-window views fill the tile edge to edge. */
.feat-shot img { object-fit: contain; object-position: center; padding: clamp(12px, 1.6vw, 22px); }
.feat-shot.feat-cover img { object-fit: cover; padding: 0; }

/* ── Spool Legacy: the link in the hero and the /mac/ page ── */
.legacy-link { display: inline-block; margin-top: .9rem; font-size: .9rem; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.28); }
.legacy-link:hover { color: var(--text); }
.mac-wrap { max-width: 1040px; }
.mac-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 2rem 0 2.5rem; }
.mac-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.4rem 1.4rem 1.5rem; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; }
.mac-card.is-current { border-color: rgba(255,255,255,.34); }
.mac-badge { align-self: flex-start; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; border: 1px solid currentColor; color: var(--text-2); }
.is-current .mac-badge { color: var(--text); }
.mac-card h2 { margin: 0; font-size: 1.35rem; }
.mac-card p { margin: 0; color: var(--text-2); }
.mac-card ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; color: var(--text-2); font-size: .95rem; }
.mac-card .btn { margin-top: auto; align-self: stretch; width: 100%; min-height: 56px; padding: 0 28px; font-size: 1rem; line-height: 1.2; text-align: center; }
.mac-table-wrap { overflow-x: auto; }
.mac-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
.mac-table th, .mac-table td { text-align: left; padding: .7rem .8rem; border-top: 1px solid rgba(255,255,255,.12); vertical-align: top; }
.mac-table thead th { border-top: 0; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.mac-table tbody th { font-weight: 500; color: var(--text-2); width: 22%; }
.mac-note { margin-top: 2rem; max-width: 64ch; color: var(--text-2); }
.mac-note h2 { font-size: 1.05rem; margin: 0 0 .4rem; color: var(--text); }
@media (max-width: 760px) { .mac-cards { grid-template-columns: 1fr; } }

/* Shown on /mac/?unavailable=1 when the download could not be handed out. */
.mac-unavailable { margin: 0 0 24px; padding: 14px 18px; border: 1px solid var(--mask); border-radius: 12px; background: rgba(210,102,31,.1); color: var(--text); line-height: 1.5; }
.mac-unavailable a { color: var(--mask); }

/* ── releases row (home) ── */
.rel-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 340px); gap: 14px;
  overflow-x: auto; padding: 4px 2px 18px; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.rel-card {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px;
  padding: 22px 22px 24px; border-radius: 16px; border: 1px solid #2a2420; background: #141110;
}
.rel-card.is-soon { border-color: rgba(210, 102, 31, .55); background: linear-gradient(160deg, rgba(210, 102, 31, .14), #141110 55%); }
.rel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rel-v { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.rel-when { font-size: .8rem; color: var(--text-3); white-space: nowrap; }
.rel-card.is-soon .rel-when { color: var(--mask); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.rel-card .h4 { margin: 0; font-size: 1.15rem; line-height: 1.3; text-wrap: balance; }
.rel-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.rel-list li { display: grid; grid-template-columns: 1fr; gap: 6px; justify-items: start; font-size: .9rem; line-height: 1.45; color: var(--text-2); }
.log-soon { color: var(--mask); }

/* ── payment methods under the buy buttons ── */
.pay-methods { margin: 14px 0 0; display: grid; gap: 8px; }
.pay-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pay-label { font-size: .8rem; color: var(--text-3); }
.pay-row { display: inline-flex; gap: 6px; align-items: center; }
.pay-chip {
  display: inline-flex; align-items: center; justify-content: center; height: 22px; min-width: 38px; padding: 0 7px;
  border-radius: 4px; background: #fff; color: #1a1f71; font: 800 11px/1 system-ui, sans-serif; letter-spacing: .02em;
}
.pay-visa { font-style: italic; font-size: 12px; }
.pay-discover { color: #231f20; font-size: 8.5px; letter-spacing: .04em; }
.pay-discover i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #f48120; margin: 0 .5px; }
.pay-gpay { color: #3c4043; font-weight: 600; font-size: 11px; }
.pay-gpay b { background: conic-gradient(#ea4335 0 25%, #fbbc04 0 50%, #34a853 0 75%, #4285f4 0); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.pay-apay { color: #000; font-weight: 600; font-size: 11.5px; gap: 1px; }
.pay-brand { font: 800 15px/1 system-ui, sans-serif; letter-spacing: -.02em; }
.pay-stripe { color: #8f89ff; }
.pay-payhip { color: var(--text-2); font-weight: 700; letter-spacing: -.01em; }

/* ── 2026-10-23 audit: removal-first ───────────────────────────
   No glow behind the hero, the app shown as a plain screenshot rather than
   an animated laptop, the systems on one line, nothing parked off-screen. */
.hero::before { content: none; }
.hero-plain { margin: clamp(48px, 7vw, 88px) auto 0; width: min(calc(100vw - 2 * var(--pad)), 1600px); }
.hero-plain img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 10px;
}
.os-line { margin: .9rem 0 0; font-size: .84rem; line-height: 1.5; color: var(--text-3); max-width: 46ch; }
.hero-buy { margin: .6rem 0 0; font-size: .92rem; }
.screen-shot { will-change: auto; }
.hero-buy .text-link { white-space: normal; }