picture { display: contents; }
:root {
  --bg: #050505;
  --surface: #0b0b0b;
  --surface-raised: #121212;
  --ink: #f5f5f0;
  --muted: #94948f;
  --faint: #797974;
  --line: rgba(245, 245, 240, 0.14);
  --line-soft: rgba(245, 245, 240, 0.07);
  /* All load-bearing micro text (mono labels, data plates, state stubs).
     7.0:1 on #050505 — --faint stays ornament-only and never carries words. */
  --micro-ink: #9a9a93;
  /* The line between product rows on the home sheet. */
  --row-line: rgba(245, 245, 240, 0.10);
  --accent: #d5ff70;
  --accent-soft: rgba(213, 255, 112, 0.13);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

* { box-sizing: border-box; }

html { overflow-x: clip; scroll-behavior: smooth; }

/* The header stays at the top of the window, so an anchor that scrolls its
   target to y=0 puts the heading underneath it. Every jump stops short by
   the height of the header plus a little air. */
[id] { scroll-margin-top: 6.5rem; }

body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 10%, var(--accent-soft), transparent 27rem),
    radial-gradient(circle at 8% 60%, rgba(255, 255, 255, 0.025), transparent 22rem),
    var(--bg);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  /* Drawn at a fixed strength rather than from --line-soft, which is tuned per
     theme: the same rule was legible on Disk Manager's lighter blue and all but
     invisible on the near-black pages. */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.085) 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

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

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 30;
  padding: 0.65rem 0.9rem;
  color: #050505;
  background: var(--accent);
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.shell {
  width: min(100% - 3rem, 1280px);
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line-soft);
  /* Follows the page, instead of the near-black it was pinned to. */
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(18px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.75rem;
  gap: 2rem;
}

.brand-wordmark {
  display: flex;
  align-items: center;
  /* Wide enough for the tagline at its 12px floor. */
  width: clamp(17rem, 22vw, 19rem);
  gap: 0.72rem;
  color: var(--ink);
}

.brand-symbol {
  position: relative;
  display: block;
  flex: 0 0 clamp(2.9rem, 3.8vw, 3.45rem);
  aspect-ratio: 1;
}

.brand-symbol-shell {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-symbol-sphere {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 15.22%;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 0.42rem rgba(245, 245, 240, 0.24));
  animation: product-sphere-drift 12s ease-in-out infinite;
  will-change: transform;
}

.brand-wordmark-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  justify-items: center;
  gap: 0.26rem;
}

.brand-wordmark-name { display: block; width: 100%; height: auto; }

.brand-wordmark-tagline {
  display: block;
  color: var(--muted);
  font-family: var(--mono);
  /* 12px: the home page allows no text below that, and the header is the one
     header shared by every page, so the floor applies here too. */
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes product-sphere-drift {
  0%, 100% { transform: translate(-50%, -50%) translate3d(0, 0, 0); }
  35% { transform: translate(-50%, -50%) translate3d(0.025rem, -0.035rem, 0); }
  70% { transform: translate(-50%, -50%) translate3d(-0.02rem, 0.025rem, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-symbol-sphere { animation: none; }
}

.inline-sentiora {
  display: inline-block;
  width: 5.35em;
  vertical-align: -0.11em;
}

.inline-sentiora img,
.footer-sentiora {
  display: block;
  width: 100%;
  height: auto;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.header-nav a { transition: color 160ms ease; }
.header-nav a:hover, .header-nav a:focus-visible { color: var(--ink); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(30rem, 1.18fr);
  align-items: center;
  gap: 5rem;
  min-height: calc(100svh - 4.75rem);
  padding: 6rem 0;
}

.eyebrow,
.section-label,
.status-label {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.7rem;
}

.eyebrow::before {
  width: 2.2rem;
  height: 1px;
  content: "";
  background: currentColor;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  margin-bottom: 1.5rem;
  font-size: clamp(3.5rem, 7vw, 7.2rem);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.88;
}

h1 .product-prefix {
  display: block;
  width: clamp(9rem, 13vw, 13rem);
  margin-bottom: 1rem;
}

h1 .product-prefix img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-copy > p:not(.eyebrow) {
  max-width: 34rem;
  margin-bottom: 2rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.7vw, 1.16rem);
  line-height: 1.7;
}

.actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.8rem 1.05rem;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.button:hover, .button:focus-visible {
  color: #050505;
  border-color: var(--accent);
  background: var(--accent);
  transform: translateY(-2px);
}

.button--quiet { color: var(--muted); border-color: var(--line); }
.button--quiet:hover, .button--quiet:focus-visible { color: var(--ink); border-color: var(--ink); background: transparent; }
.button[aria-disabled="true"] { color: var(--faint); border-color: var(--line-soft); pointer-events: none; }

.product-status {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 2.5rem;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.status-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0.75rem var(--accent);
}

.product-mockup {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.product-mockup::before {
  position: absolute;
  inset: 10% 4% -5%;
  z-index: -1;
  content: "";
  background: radial-gradient(circle, var(--accent-soft), transparent 68%);
  filter: blur(24px);
}

.app-window {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(9, 9, 9, 0.96);
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.52);
}

.window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.3rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--line-soft);
  background: #0d0d0d;
}

.window-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.76rem;
  font-weight: 600;
}

.app-glyph {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 0.42rem;
  color: var(--accent);
  background: var(--accent-soft);
  font-family: var(--mono);
  font-size: 0.62rem;
}

.window-actions { display: flex; gap: 0.35rem; }
.window-actions span { width: 0.48rem; height: 0.48rem; border-radius: 50%; background: var(--faint); }

.app-layout {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  min-height: 31rem;
}

.app-sidebar {
  padding: 1rem;
  border-right: 1px solid var(--line-soft);
  background: #080808;
}

.sidebar-label {
  margin: 0 0 0.75rem;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.side-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.25rem;
  padding: 0 0.65rem;
  border-radius: 0.4rem;
  color: var(--muted);
  font-size: 0.69rem;
}

.side-item::before { width: 0.32rem; height: 0.32rem; border-radius: 50%; content: ""; background: var(--faint); }
.side-item.is-active { color: var(--ink); background: var(--accent-soft); }
.side-item.is-active::before { background: var(--accent); box-shadow: 0 0 0.45rem var(--accent); }

.app-main { min-width: 0; padding: 1.25rem; }

.mock-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.mock-heading h2 { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; letter-spacing: -0.025em; }
.mock-heading p { margin: 0; color: var(--faint); font-size: 0.65rem; }

.mini-button {
  padding: 0.48rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  color: var(--accent);
  background: var(--accent-soft);
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.panel {
  border: 1px solid var(--line-soft);
  border-radius: 0.55rem;
  background: var(--surface);
}

/* SpeechBubbles mockup */
.speech-stream { display: grid; gap: 0.8rem; padding: 1rem; }
.speech-bubble { max-width: 82%; padding: 0.75rem 0.85rem; border-radius: 0.7rem 0.7rem 0.7rem 0.18rem; color: var(--muted); background: var(--surface-raised); font-size: 0.67rem; line-height: 1.5; }
.speech-bubble strong { display: block; margin-bottom: 0.25rem; color: var(--ink); font-size: 0.59rem; }
.speech-bubble.is-user { justify-self: end; border-radius: 0.7rem 0.7rem 0.18rem 0.7rem; color: var(--ink); background: var(--accent-soft); }
.live-strip { display: flex; align-items: center; gap: 0.65rem; margin-top: 1rem; padding: 0.8rem; }
.wave { display: flex; align-items: center; gap: 0.18rem; height: 1rem; }
.wave span { width: 0.14rem; border-radius: 1rem; background: var(--accent); }
.wave span:nth-child(1), .wave span:nth-child(5) { height: 35%; }
.wave span:nth-child(2), .wave span:nth-child(4) { height: 70%; }
.wave span:nth-child(3) { height: 100%; }
.live-strip p { margin: 0; color: var(--muted); font-size: 0.62rem; }

/* OpticalBurn mockup */
.burn-overview { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: center; padding: 1rem; }
.disc-meter { display: grid; place-items: center; width: 7rem; height: 7rem; margin: auto; border-radius: 50%; background: conic-gradient(var(--accent) 0 72%, #202020 72%); }
.disc-meter::before { display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 50%; content: "72%"; color: var(--ink); background: var(--surface); font-family: var(--mono); font-size: 0.72rem; }
.burn-meta { display: grid; gap: 0.7rem; }
.meta-line { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--line-soft); color: var(--faint); font-size: 0.61rem; }
.meta-line strong { color: var(--ink); font-weight: 500; }
.track-list { margin-top: 1rem; overflow: hidden; }
.track { display: grid; grid-template-columns: 1.5rem 1fr auto; gap: 0.65rem; align-items: center; padding: 0.72rem 0.8rem; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 0.62rem; }
.track:last-child { border-bottom: 0; }
.track span:first-child { color: var(--faint); font-family: var(--mono); }
.track strong { color: var(--ink); font-weight: 500; }

/* DocPilot mockup */
.doc-layout { grid-template-columns: 9.5rem minmax(0, 1fr) 10rem; }
.document-page { min-height: 25rem; padding: 1.4rem; background: #f0f0eb; color: #171717; }
.document-page h3 { margin-bottom: 1rem; font-family: var(--serif); font-size: 1.05rem; }
.document-line { height: 0.35rem; margin-bottom: 0.55rem; border-radius: 1rem; background: #c8c8c2; }
.document-line.short { width: 62%; }
.document-highlight { margin: 1.2rem 0; padding: 0.8rem; border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 18%, white); font-size: 0.58rem; line-height: 1.5; }
.ai-panel { padding: 0.9rem; border-left: 1px solid var(--line-soft); background: #080808; }
.ai-card { margin-bottom: 0.7rem; padding: 0.7rem; border: 1px solid var(--line-soft); border-radius: 0.45rem; color: var(--muted); font-size: 0.58rem; line-height: 1.45; }
.ai-card strong { display: block; margin-bottom: 0.3rem; color: var(--accent); font-size: 0.56rem; }

/* DiskManager mockup */
.disk-list { display: grid; gap: 0.8rem; }
.disk-card { padding: 0.9rem; }
.disk-card-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; font-size: 0.64rem; }
.disk-card-head span { color: var(--faint); }
.partition-map { display: flex; gap: 0.2rem; height: 3.6rem; }
.partition { display: flex; align-items: end; min-width: 2.8rem; padding: 0.4rem; border: 1px solid var(--line); color: var(--muted); background: var(--surface-raised); font-family: var(--mono); font-size: 0.5rem; }
.partition.primary { flex: 5; border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); }
.partition.secondary { flex: 2; }
.partition.recovery { flex: 0.8; }
.health-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 1rem; }
.health-item { padding: 0.7rem; }
.health-item span { display: block; margin-bottom: 0.25rem; color: var(--faint); font-size: 0.52rem; }
.health-item strong { color: var(--accent); font-family: var(--mono); font-size: 0.65rem; font-weight: 500; }

/* Disk Manager brand theme */
.diskmanager-theme .site-header { background: rgba(8, 8, 48, 0.84); }
.diskmanager-theme .hero { position: relative; isolation: isolate; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2.5rem, 4vw, 4.5rem); padding: 4.5rem 0 5rem; }
.diskmanager-theme .product-mockup { display: grid; min-width: 0; gap: 2.75rem; justify-items: center; }
.diskmanager-theme .product-mockup::before { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 68%); }
.diskmanager-theme .app-window { border-color: rgba(240, 240, 255, 0.18); background: rgba(9, 9, 54, 0.97); box-shadow: 0 2rem 7rem rgba(1, 2, 30, 0.62); }
.diskmanager-theme .window-bar { background: #0d0d45; }
.diskmanager-theme .app-sidebar { background: #09093a; }
.diskmanager-theme .panel { background: #111151; }
.diskmanager-theme .partition { background: #18185e; }

.hero-brand-emblem {
  width: min(21rem, 54%);
  pointer-events: none;
}

.hero-brand-emblem img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 1.6rem rgba(238, 242, 255, 0.16)); }

/* No bleed past the column. The old screenshot was narrow enough to carry it;
   the current one ran off the right edge of the screen with its window buttons
   on the other side of it. */
.product-shot--dashboard { width: min(48rem, 100%); }

.product-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(240, 240, 255, 0.2);
  border-radius: 1rem;
  background: #080835;
  box-shadow: 0 1.5rem 5rem rgba(1, 2, 30, 0.58);
}

.product-shot img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.dashboard-crop {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  color: inherit;
  border: 0;
  text-decoration: none;
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}

/* No fixed ratio: the screenshot sets its own, so replacing it never crops the
   window title off one edge and the buttons off the other. */
.dashboard-crop img {
  position: static;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  transition: transform 220ms ease, filter 220ms ease;
}

.dashboard-crop:hover img,
.dashboard-crop:focus-visible img { transform: scale(1.012); filter: brightness(0.78); }

.hero-zoom-hint {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  padding: 0.55rem 0.7rem;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  background: rgba(8, 8, 48, 0.82);
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

.dashboard-crop:hover .hero-zoom-hint,
.dashboard-crop:focus-visible .hero-zoom-hint { opacity: 1; transform: translateY(0); }

.product-shot figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  color: var(--muted);
  border-top: 1px solid var(--line-soft);
  font-size: 0.7rem;
  line-height: 1.5;
}

.product-shot figcaption strong { color: var(--ink); font-family: var(--mono); font-size: 0.59rem; letter-spacing: 0.09em; text-transform: uppercase; }

/* Section washes follow the product's own accent. Written as fixed colours they
   drifted: ComicBubble kept a violet band from an earlier palette while its
   application is gold. */
.tour-section,
.comicbubble-tour { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 25rem); }

.gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.gallery-toolbar p { margin: 0; color: var(--faint); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; }
.gallery-toolbar p span { margin-right: 0.4rem; color: var(--accent); font-size: 0.9rem; }

.gallery-controls { display: flex; align-items: center; gap: 0.55rem; }
.gallery-controls output { min-width: 5.2rem; color: var(--muted); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-align: center; }
.gallery-controls button {
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  padding: 0;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 1rem;
  cursor: pointer;
  place-items: center;
}
.gallery-controls button:hover, .gallery-controls button:focus-visible { border-color: rgba(240, 240, 255, 0.48); background: rgba(255, 255, 255, 0.09); }
.gallery-controls button:disabled { opacity: 0.28; cursor: default; }

.product-gallery {
  display: flex;
  gap: 1.25rem;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0.1rem clamp(1rem, 2vw, 2.5rem) 0.8rem;
  overflow-x: auto;
  cursor: grab;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-color: rgba(240, 240, 255, 0.24) transparent;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
  touch-action: pan-y;
}

.product-gallery.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
}

.gallery-card {
  display: flex;
  flex: 0 0 calc((100% - 1.25rem) / 2);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(10, 10, 57, 0.74);
  flex-direction: column;
  scroll-snap-align: start;
}

.gallery-media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  color: inherit;
  border: 0;
  text-decoration: none;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: zoom-in;
  -webkit-user-drag: none;
  user-select: none;
}

.gallery-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  transition: transform 220ms ease, filter 220ms ease;
}

.gallery-media:hover img,
.gallery-media:focus-visible img { transform: scale(1.012); filter: brightness(0.78); }

.image-zoom-hint {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  padding: 0.55rem 0.7rem;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  background: rgba(8, 8, 48, 0.82);
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

.gallery-media:hover .image-zoom-hint,
.gallery-media:focus-visible .image-zoom-hint { opacity: 1; transform: translateY(0); }

.gallery-copy { display: flex; flex: 1; flex-direction: column; padding: 1.35rem; }

.screenshot-lightbox { width: min(97vw, 112rem); max-width: none; max-height: 97vh; margin: auto; padding: 0; overflow: hidden; color: var(--ink); border: 1px solid rgba(240, 240, 255, 0.28); border-radius: 1rem; background: #070725; box-shadow: 0 2rem 8rem rgba(0, 0, 15, 0.82); }
.screenshot-lightbox::backdrop { background: rgba(0, 0, 18, 0.9); backdrop-filter: blur(8px); }
.screenshot-lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0.9rem 0.8rem 1.1rem; border-bottom: 1px solid var(--line-soft); }
.screenshot-lightbox-bar p { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.screenshot-lightbox-close { padding: 0.55rem 0.7rem; color: var(--ink); border: 1px solid var(--line); border-radius: 0.5rem; background: rgba(255, 255, 255, 0.04); font-family: var(--mono); font-size: 0.62rem; cursor: pointer; }
.screenshot-lightbox-close:hover, .screenshot-lightbox-close:focus-visible { background: rgba(255, 255, 255, 0.1); }
.screenshot-lightbox-stage { display: grid; max-height: calc(97vh - 4rem); padding: clamp(0.5rem, 1vw, 1rem); overflow: auto; place-items: center; }
.screenshot-lightbox-stage img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(97vh - 6rem); object-fit: contain; }

/* ComicBubble */
.comicbubble-theme .site-header { background: rgba(19, 20, 27, 0.84); }
.comicbubble-theme .hero { grid-template-columns: minmax(0, 0.74fr) minmax(32rem, 1.26fr); gap: clamp(2.5rem, 5vw, 5.5rem); }
.comicbubble-theme .product-mockup::before { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%); }
.product-shot--comicbubble { width: min(48rem, calc(100% + 3rem)); border-color: rgba(255, 250, 240, 0.2); background: #171820; box-shadow: 0 1.5rem 5rem rgba(13, 6, 30, 0.52); }
.comicbubble-app-shot { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; color: inherit; border: 0; background: #171820; font: inherit; text-align: left; cursor: zoom-in; }
.comicbubble-app-shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 220ms ease, filter 220ms ease; }
.comicbubble-app-shot:hover img, .comicbubble-app-shot:focus-visible img { transform: scale(1.012); filter: brightness(0.78); }
.comicbubble-app-shot:hover .hero-zoom-hint, .comicbubble-app-shot:focus-visible .hero-zoom-hint { opacity: 1; transform: translateY(0); }
.comicbubble-theme .gallery-card { background: rgba(27, 29, 39, 0.76); }
.comicbubble-theme .gallery-media { background: #171820; }
.comicbubble-theme .image-zoom-hint, .comicbubble-theme .hero-zoom-hint { background: rgba(23, 24, 32, 0.86); }
.gallery-index { margin-bottom: 2.5rem; color: var(--accent); font-family: var(--mono); font-size: 0.59rem; letter-spacing: 0.11em; text-transform: uppercase; }
.gallery-copy h3 { margin-bottom: 0.65rem; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.035em; }
.gallery-copy p { margin-bottom: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.65; }

.section {
  padding: 6rem 0;
  border-top: 1px solid var(--line-soft);
}

.section-head {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 2rem;
  margin-bottom: 3.5rem;
}

.section-head h2 {
  max-width: 17ch;
  margin-bottom: 0.8rem;
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.94;
}

.section-head p { max-width: 35rem; margin-bottom: 0; color: var(--muted); line-height: 1.7; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.feature {
  min-height: 18rem;
  padding: 1.4rem;
  background: var(--bg);
}

.feature-number { color: var(--accent); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; }
.feature h3 { margin: 5.5rem 0 0.75rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.035em; }
/* A card built from a list has no need of the gap that used to push a lone
   heading down the empty half of the card. */
.feature:has(.feature-list) h3 { margin-top: 1.25rem; }
.feature p { margin-bottom: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.65; }

.access-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.72fr);
  align-items: start;
  gap: 5rem;
}

.access-copy h2 { max-width: 11ch; margin-bottom: 1rem; font-size: clamp(2.7rem, 5.4vw, 5.4rem); font-weight: 500; letter-spacing: -0.075em; line-height: 0.9; }
.access-copy h2 em { color: var(--muted); font-family: var(--serif); font-weight: 400; }
.access-copy p { max-width: 34rem; color: var(--muted); line-height: 1.7; }

.release-card { border-top: 1px solid var(--ink); }
.release-row { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line-soft); font-family: var(--mono); font-size: 0.64rem; }
.release-row span { color: var(--faint); text-transform: uppercase; letter-spacing: 0.09em; }
.release-actions { display: grid; gap: 0.7rem; margin-top: 1.25rem; }

.product-links {
  padding: 1.4rem 0;
  border-top: 1px solid var(--line-soft);
}

.product-links-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; color: var(--faint); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.09em; text-transform: uppercase; }
.product-links-inner > span { display: inline-flex; align-items: center; gap: 0.45rem; }
.footer-sentiora { width: 4.35rem; }
.product-links nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.3rem; }
.product-links a:hover, .product-links a:focus-visible { color: var(--ink); }

/* The footer links sat 14px tall, which is a hard target to hit with a thumb.
   The padding lifts them toward the 44px touch guidance without moving the
   layout, because the row is already taller than the text. */
.product-links a,
.header-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Some people get motion sickness from movement on a page, and say so in their
   system settings. Honour it: keep every state change, drop the travel. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

  .button:hover, .button:focus-visible { transform: none; }
}

/* Capability cards as scannable lists rather than paragraphs, with a tag saying
   plainly whether the group only looks at the disk, changes it, or erases it —
   the distinction the product is built around, so it should be visible before
   the sentence is read. */
.feature-list {
  margin: 0.85rem 0 1.1rem;
  padding: 0;
  list-style: none;
}

.feature-list li {
  position: relative;
  margin-bottom: 0.55rem;
  padding-left: 1.15rem;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.feature-list li::before {
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 0.3rem;
  height: 1px;
  content: "";
  background: var(--accent);
  opacity: 0.75;
}

.feature-list strong { color: var(--ink); font-weight: 600; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding: 0.3rem 0.6rem;
  border: 1px solid currentColor;
  border-radius: 2rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  align-self: flex-start;
}

.tag::before {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  content: "";
  background: currentColor;
}

.tag--read { color: #6fd6a4; }
.tag--write { color: #e8b45c; }
.tag--erase { color: #f08a8c; }
.tag--free { color: #6fd6a4; }
.tag--paid { color: var(--accent); }

/* A per-item marker, for lists where the free/paid split runs through the
   middle of a category rather than along its edge. */
.free-mark {
  margin-left: 0.35rem;
  padding: 0.05em 0.4em;
  border: 1px solid color-mix(in srgb, #6fd6a4 45%, transparent);
  border-radius: 2rem;
  color: #6fd6a4;
  font-family: var(--mono);
  font-size: 0.62em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

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

/* Keys named in the copy (Shift, 0) should read as keys, not as body text. */
kbd {
  padding: 0.12em 0.42em;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  background: var(--surface-raised);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.82em;
  white-space: nowrap;
}

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

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 4rem; padding: 5rem 0; }
  .diskmanager-theme .hero { grid-template-columns: 1fr; gap: 3rem; padding: 4rem 0; }
  .comicbubble-theme .hero { grid-template-columns: 1fr; gap: 3.5rem; padding: 4.5rem 0; }
  .hero-copy { max-width: 43rem; }
  .product-mockup { width: min(100%, 50rem); }
  .access-layout { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 2rem, 42rem); }
  /* Keep the action link (Download / Access) next to Home. Hiding everything but
     the last link took the page's main call to action off every phone. */
  .header-nav a:not(:last-child):not(:nth-last-child(2)) { display: none; }
  .app-layout { grid-template-columns: 7.5rem minmax(0, 1fr); min-height: 26rem; }
  .doc-layout { grid-template-columns: 7rem minmax(0, 1fr); }
  .doc-layout .ai-panel { display: none; }
  .burn-overview { grid-template-columns: 1fr; }
  .section-head { grid-template-columns: 1fr; gap: 1.2rem; }
  .feature-grid { grid-template-columns: 1fr; }
  .comicbubble-screen-grid { grid-template-columns: 1fr; }
  .gallery-card { flex-basis: min(88%, 32rem); }
  .feature { min-height: auto; }
  .feature h3 { margin-top: 3.5rem; }
  .feature:has(.feature-list) h3 { margin-top: 1.1rem; }
}

@media (max-width: 520px) {
  .shell { width: min(100% - 1.3rem, 38rem); }
  .brand-wordmark { width: min(14rem, 62vw); gap: 0.48rem; }
  .brand-symbol { flex-basis: 2.55rem; }
  .header-nav { gap: 0.75rem; }
  .hero { padding: 4rem 0; }
  .diskmanager-theme .product-mockup { gap: 2rem; }
  .hero-brand-emblem { width: min(15rem, 68%); }
  .gallery-toolbar { align-items: flex-end; }
  .gallery-toolbar p { max-width: 11rem; line-height: 1.5; }
  .product-shot figcaption { align-items: flex-start; flex-direction: column; }
  h1 { font-size: clamp(3rem, 15vw, 5rem); }
  .app-layout { display: block; }
  .app-sidebar { display: none; }
  .app-main { padding: 0.85rem; }
  .document-page { min-height: 20rem; }
  .health-grid { grid-template-columns: 1fr; }
  .section { padding: 4.5rem 0; }
  .product-links-inner { flex-direction: column; }
}

/* ==========================================================================
   The shared header extras: the Catalogue drawer and the sheet indicator.
   Written once here because the header itself is written once, in antet().
   ========================================================================== */

.header-tools { display: flex; align-items: center; gap: 1.7rem; }

/* The Catalogue drawer runs on <details>: it opens with JavaScript switched
   off, closes from the keyboard, and needs no code to be correct. */
.catalogue { position: relative; }

.catalogue summary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.catalogue summary::-webkit-details-marker { display: none; }

/* Three drawn bars instead of a downloaded icon. The middle one comes from a
   repeating gradient because a span has only two pseudo-elements. */
.catalogue-bars {
  width: 1.05rem;
  height: 11px;
  color: var(--micro-ink);
  background: repeating-linear-gradient(180deg, currentColor 0 1px, transparent 1px 5px);
  transition: transform 120ms ease, color 120ms ease;
}

.catalogue summary:hover .catalogue-bars,
.catalogue summary:focus-visible .catalogue-bars { color: var(--accent); }
.catalogue[open] .catalogue-bars { transform: rotate(90deg); }

.catalogue-panel {
  position: absolute;
  top: calc(100% + 0.85rem);
  right: 0;
  z-index: 40;
  width: min(92vw, 47rem);
  padding: 1.3rem 1.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
}

.catalogue-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 2.2rem;
}

.catalogue-head {
  display: grid;
  grid-template-columns: minmax(11.5rem, auto) 1fr;
  gap: 0 1.25rem;
  margin: 0 0 0.2rem;
  color: var(--micro-ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.catalogue-pages .catalogue-head { grid-template-columns: 1fr; }

.catalogue-entry {
  display: grid;
  grid-template-columns: minmax(11.5rem, auto) 1fr;
  gap: 0 1.25rem;
  align-items: center;
  border-top: 1px solid var(--line-soft);
}

.catalogue-product {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  color: var(--ink);
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
}

.catalogue-product span {
  color: var(--micro-ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.catalogue-sections { display: flex; flex-wrap: wrap; gap: 0 1.15rem; }

.catalogue-sections a,
.catalogue-pages > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: none;
}

.catalogue-pages { display: grid; align-content: start; justify-items: start; }
.catalogue-pages > a { min-height: 2.35rem; font-size: 0.8125rem; }

.catalogue-panel a:hover,
.catalogue-panel a:focus-visible { color: var(--ink); }

.catalogue-count {
  margin: 0.8rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line-soft);
  color: var(--micro-ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

/* The sheet indicator, home page only. The active fillet is one of the four
   places the accent is allowed to rest. */
.sheet-dial { display: flex; gap: 0.9rem; }

.sheet-dial a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  color: var(--micro-ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.sheet-dial a::after {
  width: 12px;
  height: 2px;
  content: "";
  background: rgba(245, 245, 240, 0.12);
  transition: width 140ms ease, background 140ms ease;
}

.sheet-dial a.is-active { color: var(--ink); }
.sheet-dial a.is-active::after { width: 18px; background: var(--accent); }

@media (max-width: 760px) {
  /* The header below 760px: mark + bars + Catalogue. */
  .brand-wordmark-tagline { display: none; }
  .catalogue { position: static; }
  .catalogue-panel {
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
  }
  .catalogue-grid, .catalogue-entry, .catalogue-head { grid-template-columns: 1fr; }
  .catalogue-head span + span { display: none; }
  .catalogue-sections a, .catalogue-pages > a { min-height: 2.75rem; }
}

@media (max-width: 560px) {
  .sheet-dial { display: none; }
}

/* ==========================================================================
   The home page: three sheets. Everything below is keyed to classes that
   exist only on index.html, so the product pages never feel it.
   ========================================================================== */

/* A plain ground: the single gradient the home page allows itself is the
   veil over the identity mark (declared below, with its reason). The 5rem
   grid is replaced by column guides on sheets 01 and 02. */
body.sheets-body { background: var(--bg); }
body.sheets-body::before { content: none; }

/* The header lays over sheet 01 instead of pushing it down, so one sheet is
   exactly one screen. */
.sheets-body .site-header { position: fixed; top: 0; left: 0; width: 100%; }

.filter-store { position: absolute; width: 0; height: 0; overflow: hidden; }

.sheet { position: relative; overflow: hidden; }

/* The sheet frame: 1px, set back 24px from the window edge (14px on phones).
   Drawn around the section however tall it is — sheet 03 is taller than a
   screen because cutting real text to fit a metaphor is the wrong trade. */
.sheet::after {
  position: absolute;
  inset: 24px;
  z-index: 5;
  content: "";
  border: 1px solid var(--line);
  pointer-events: none;
}

.sheet-01, .sheet-02 { min-height: 100vh; min-height: 100dvh; }

/* Column guides instead of the grid: 12 vertical lines on the shell columns,
   no horizontal lines, no mask, no numbering. Sheets 01 and 02 only. */
.sheet-guides {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: min(100% - 3rem, 1280px);
  content: "";
  transform: translateX(-50%);
  pointer-events: none;
  background: repeating-linear-gradient(90deg,
    rgba(245, 245, 240, 0.038) 0 1px, transparent 1px calc(100% / 12));
}

/* The data plate in the corner: mono 12px, micro ink, three true lines. */
.cartus {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 6;
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.28rem 0.9rem;
  color: var(--micro-ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cartus span:nth-child(odd) { letter-spacing: 0.14em; }
.cartus span:nth-child(even) { font-variant-numeric: tabular-nums; }

.eyebrow-mono {
  margin: 0 0 1.5rem;
  color: var(--micro-ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- sheet 01 */

.sheet-01 { display: flex; align-items: center; }

.sheet-01 .shell { position: relative; z-index: 2; }

/* The copy never leaves the opaque zone of the veil (0–56%), which is what
   makes type over the mark safe without measuring every word. */
.sheet-01-copy { max-width: 58vw; padding: 8rem 0 7rem; }

/* The S alone, not the full lockup. The lockup carries the word, and a word
   sliced by the window edge reads as a broken page rather than a bold crop --
   which is exactly what it looked like. The S is abstract: it can run off the
   edge and gain from it. The word stays whole, in the header, where it is
   read rather than admired. */
/* The whole S, on the page, at the size of a companion to the headline.
   Bleeding it off the edge was tried and looked like two white arcs thrown at
   the page: an S you cannot see the shape of is not a mark, it is a smear.
   Nearly square now that the word is gone, so it needs far less width than the
   wide lockup did to occupy the same weight. */
.sheet-mark {
  position: absolute;
  top: 50%;
  right: 5vw;
  z-index: 0;
  width: min(30vw, 470px);
  aspect-ratio: 908 / 953;
  transform: translateY(-50%);
}

.mark-image { display: block; width: 100%; height: auto; }

/* The sphere sits back exactly where it was baked into the mark; the
   ferrofluid filter is the page's one continuous motion, and it is the mark
   itself, not a downloaded animation. */
.mark-sphere {
  position: absolute;
  top: 50.367%;
  left: 49.339%;
  width: 18.282%;
  height: auto;
  transform: translate(-50%, -50%);
  /* A rendered rotation, not a flat picture spun in CSS. The filter is gone
     with it: kneading the outline of something that genuinely turns only
     spoils it. */
  filter: drop-shadow(0 0 1.6rem rgba(245, 245, 240, 0.26));
}

/* The veil: the single gradient on the page. Not decoration — it is the one
   thing that guarantees contrast where the mark slides behind the type, and
   that is why the "zero gradients" rule has exactly one exception. */
.sheet-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 56%, rgba(5, 5, 5, 0) 84%);
}

.mark-legend {
  position: absolute;
  right: 40px;
  bottom: 108px;
  z-index: 2;
  margin: 0;
  color: var(--micro-ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.sheet-01 h1 {
  max-width: 10ch;
  margin: 0 0 1.7rem;
  font-size: clamp(3.4rem, 8.2vw, 7.6rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.88;
}

.sheet-01 h1 span { display: block; }

/* One of serif's two appearances on the whole page. #c9c9c2 keeps the
   measured contrast of the full h1 above 7:1. */
.sheet-01 h1 em {
  color: #c9c9c2;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.sheet-lede {
  max-width: 40ch;
  margin: 0 0 2.3rem;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.sheet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }

.sheet-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.75rem;
  padding: 0 1.15rem;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.9375rem;
  transition: border-color 140ms ease, background 140ms ease;
}

.sheet-cta:hover,
.sheet-cta:focus-visible { border-color: var(--accent); background: rgba(213, 255, 112, 0.06); }

.sheet-alt {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  border-bottom: 1px solid transparent;
  color: var(--muted);
  font-size: 0.9375rem;
  transition: color 140ms ease, border-color 140ms ease;
}

.sheet-alt:hover,
.sheet-alt:focus-visible { color: var(--ink); border-bottom-color: var(--accent); }

/* The verifiable state row that replaced the invented telemetry. The 6px
   dot is static: nothing on this page pulses. */
.state-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 2.8rem 0 0;
  color: var(--micro-ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.state-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ------------------------------------------------------------- sheet 02 */

.sheet-02 { display: flex; align-items: center; padding: 7rem 0 7.5rem; }
.sheet-02 .shell { position: relative; z-index: 2; }

.sheet-02 h2 {
  max-width: 22ch;
  margin: 0 0 0.9rem;
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.96;
}

.heading-sentiora { display: inline-block; width: 5.25em; vertical-align: -0.12em; }
.heading-sentiora img { display: block; width: 100%; height: auto; }

.catalogue-heading p {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.table-head,
.row {
  display: grid;
  grid-template-columns: 64px minmax(0, 38fr) minmax(0, 34fr) 200px 44px;
  gap: 0 1.4rem;
  align-items: center;
}

.table-head {
  margin: 2.8rem 0 0;
  padding-bottom: 0.5rem;
  color: var(--micro-ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.family-band {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  margin: 0;
  color: var(--micro-ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.band-line { flex: 1; height: 1px; background: var(--line-soft); }

.rows { margin: 0; padding: 0; list-style: none; }

.row {
  position: relative;
  min-height: 5.5rem;
  padding: 0.9rem 0;
  overflow: hidden;
  border-top: 1px solid var(--row-line);
}

/* The colour fillet: grows on hover on desktop, stands permanently on
   phones, where six coloured lines give the ecosystem in one glance. */
.row::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 0;
  content: "";
  background: var(--product-color);
  transform: translateY(-50%);
  transition: height 140ms ease;
}

.row-code {
  color: var(--product-color);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.row-name {
  margin: 0;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}

.row-name a { color: var(--ink); }

/* The whole row is pressable through the name's stretched link — one tab
   stop — while the row itself stays a <li>, so a future download link can
   sit on top of it and the file stays valid HTML. */
.row-name a::after { position: absolute; inset: 0; z-index: 1; content: ""; }

.row-copy {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.row-state {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.3rem;
  justify-items: end;
  color: var(--micro-ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.row-state a { pointer-events: auto; }

.row-download { color: var(--ink); border-bottom: 1px solid transparent; }
.row-download:hover,
.row-download:focus-visible { border-bottom-color: var(--accent); }
.row-hash { color: var(--micro-ink); }

.row-arrow {
  justify-self: end;
  color: var(--ink);
  opacity: 0.45;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 140ms ease;
}

/* The product's own mark steps into the typography on hover — anchored to
   the right edge, cut by the row, never scaled and never lifted. */
.row-marca {
  position: absolute;
  top: 50%;
  right: -40px;
  z-index: 0;
  width: auto;
  height: 320px;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 200ms ease;
  pointer-events: none;
}

@media (hover: hover) {
  .row:hover, .row:focus-within { background: rgba(255, 255, 255, 0.022); }
  .row:hover::before, .row:focus-within::before { height: 100%; }
  .row:hover .row-arrow, .row:focus-within .row-arrow { transform: translateX(6px); }
  .row:hover .row-marca, .row:focus-within .row-marca { opacity: 0.22; }
}

/* ------------------------------------------------------------- sheet 03 */

.sheet-03 { padding: 7.5rem 0 0; }
.sheet-03 .shell { position: relative; z-index: 2; }

.sheet-03 h2 {
  max-width: 20ch;
  margin: 0 0 1.2rem;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.96;
}

.sheet-intro {
  max-width: 44rem;
  margin: 0;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.collab {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  gap: 3rem;
  align-items: start;
  margin: 4.5rem 0 0;
}

.collab-statement {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

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

.collab-point {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.75rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.collab-point > span { color: var(--micro-ink); font-family: var(--mono); font-size: 0.75rem; }
.collab-point strong { display: block; margin-bottom: 0.3rem; font-size: 0.9375rem; font-weight: 500; }
.collab-point p { margin: 0; max-width: 38ch; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }

.pov, .living { max-width: 46rem; margin: 4.5rem 0 0; }

.sheet-03 h3:not(.family-band) {
  margin: 0 0 0.8rem;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* The serif declaration — the second and last serif moment on the page. */
.grand-statement {
  margin: 5rem 0 0;
  max-width: 18ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 4.6vw, 4.2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.company-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(21rem, 0.8fr);
  gap: 3.5rem;
  align-items: start;
  margin: 4.5rem 0 0;
}

.principles { display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); }

.principle { padding: 1.4rem; background: var(--bg); }

.principle-number {
  margin: 0 0 0.9rem;
  color: var(--micro-ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.principle h4 { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; }
.principle p { margin: 0; max-width: 38ch; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }

/* The company sheet: mono label on 132px, mono value, a thin line between
   rows. Every line is a claim privacy.html already supports. */
.fisa {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid var(--line);
}

.fisa dt {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--micro-ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.fisa dd {
  margin: 0;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.fisa dd a {
  margin-left: 0.4rem;
  border-bottom: 1px solid transparent;
  color: var(--muted);
  white-space: nowrap;
}

.fisa dd a:hover,
.fisa dd a:focus-visible { color: var(--ink); border-bottom-color: var(--accent); }

.contact-block { margin: 5.5rem 0 0; padding-bottom: 6.5rem; }

.contact-mail {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin: 0.3rem 0 0.9rem;
  border-bottom: 1px solid transparent;
  color: var(--ink);
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  transition: border-color 140ms ease;
}

/* The address underline lighting up is one of the accent's four places. */
.contact-mail:hover,
.contact-mail:focus-visible { border-bottom-color: var(--accent); }

.contact-note { margin: 0; max-width: 36rem; color: var(--muted); font-size: 0.9375rem; }

.sheet-foot { border-top: 1px solid var(--line-soft); }

.sheet-foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1.5rem;
  min-height: 3.6rem;
  padding: 0.3rem 0;
  color: var(--micro-ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sheet-foot-inner a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--micro-ink);
}

.sheet-foot-inner a:hover,
.sheet-foot-inner a:focus-visible { color: var(--ink); }

/* Sheet 03's plate sits above the footer band, not on top of it. */
.sheet-03 .cartus { bottom: 5.6rem; }

/* Sheets pull gently to their tops on big screens; never mandatory, and off
   entirely on phones, where three one-screen sheets plus a short flick would
   mean a page that drags you back. */
/* No snapping. The three sheets are 914, 1382 and 2467 pixels tall against a
   914-pixel window, so two of them are taller than the thing meant to snap to
   them -- and scrolling inside those gets tugged backwards. A page that
   argues with the wheel feels broken however gently it argues. */

/* --------------------------------------------------- the sheets on phones */

@media (max-width: 760px) {
  .sheet::after { inset: 14px; }
  .sheet-guides { width: calc(100% - 2rem); }

  /* The first product row shows above the fold: sheet 01 gives up 56px so
     the page never looks like a one-screen dead end. */
  .sheet-01 { min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px); }

  /* The mark now takes real space at the top of the sheet, so the air that
     used to sit above the label is spent on it instead of on nothing. */
  .sheet-01 { flex-direction: column; align-items: stretch; justify-content: center; }
  /* The bottom padding is the cartouche's clearance, not decoration: that
     block is pinned to the bottom corner, and the status line lands on top
     of it the moment the sheet's contents grow. */
  .sheet-01-copy { max-width: none; padding: 0 0 8rem; }
  .sheet-01 h1 { font-size: clamp(2.6rem, 12vw, 4rem); }

  /* The mark keeps its own space instead of hiding behind the letters.
     It used to be spread to 92vw at 14% opacity -- terrain rather than figure
     -- and on a phone that reads as nothing at all: a smudge you cannot make
     out the shape of, with the sphere turning invisibly inside it. There is a
     screenful of empty room above the headline; the mark goes there, small and
     at full strength, and the veil is no longer needed because nothing is
     sitting behind the type any more. */
  .sheet-mark {
    /* relative, not static: the sphere is absolutely placed against this box,
       and taking the box out of the positioned flow sends it off to land on
       top of the headline instead. The top margin is the header's clearance,
       which the copy used to carry before the mark took its place. */
    position: relative;
    width: min(40vw, 158px);
    margin: 4.5rem auto 1.25rem;
    aspect-ratio: 908 / 953;
    opacity: 1;
    transform: none;
  }
  .sheet-veil { display: none; }
  .mark-legend { display: none; }

  .cartus { right: 22px; bottom: 22px; }
  .sheet-03 .cartus { position: static; margin: 3.5rem 0 1.5rem; justify-self: start; }
  .sheet-03 { display: grid; }

  .sheet-02 { padding: 5.5rem 0 6.5rem; }
  .table-head { display: none; }

  /* Rows stay rows: three lines, no card, no shadow, no rounded corner. */
  .row {
    grid-template-columns: 2.2rem minmax(0, 1fr) 2rem;
    grid-template-rows: auto auto auto;
    gap: 0.35rem 0.6rem;
    align-items: baseline;
    min-height: 6.5rem;
    padding: 1rem 0;
  }

  .row-code { grid-row: 1; grid-column: 1; }
  .row-name { grid-row: 1; grid-column: 2; }
  .row-arrow { grid-row: 1; grid-column: 3; align-self: center; }
  .row-copy { grid-row: 2; grid-column: 2 / 4; }

  .row-state {
    grid-row: 3;
    grid-column: 2 / 4;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.55rem;
    justify-content: flex-start;
    text-align: left;
  }

  .row-state span + span::before { content: "· "; }

  /* No hover exists on touch, so the phone keeps both signals permanently:
     the colour fillet on all six rows, and the mark at 14% — at 10% it is
     drawing work thrown away. One tap = the product page; the row never
     unfolds. */
  .row::before { height: 100%; }
  .row-marca { opacity: 0.14; }

  .collab, .company-columns { grid-template-columns: 1fr; gap: 2.5rem; }

  /* On a phone the rows people touch — contact, licence, privacy — are what
     they came for; the principles are for reading. The sheet is one column
     and the company sheet climbs above the principles. */
  .company-columns .principles { order: 2; }

  .fisa { grid-template-columns: 106px minmax(0, 1fr); }

  .sheet-03 { padding-top: 5.5rem; }
  .contact-block { margin-top: 4rem; padding-bottom: 5rem; }
  .sheet-foot-inner { justify-content: flex-start; gap: 0 1.4rem; }
}

@media (max-width: 560px) {
  .sheet-guides { display: none; }
}

/* With motion switched off nothing is lost: the hover reveals become the
   permanent phone treatment, the indicator stops being moved by script, and
   the sphere stands still. */
@media (prefers-reduced-motion: reduce) {
  .row-marca { opacity: 0.14; }
  .row::before { height: 100%; }
  .mark-sphere { filter: drop-shadow(0 0 1.4rem rgba(245, 245, 240, 0.22)); }
}