/* SINVAUX Web Design System v1 — see SINVAUX_WEB_DESIGN_SYSTEM.md */

:root {
  --ivory: #DED0B2;
  --ivory-deep: #D0C09B;
  --ink: #17140F;
  --ink-soft: #4A443A;
  --line: #BFB08A;
  --line-strong: #A5936A;
  --grenat: #7C2E3A;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Without this, a browser on a dark-OS-theme system renders native form
   controls (inputs, buttons, scrollbars) with its own forced dark
   styling - background/text colors this stylesheet sets can get
   overridden by the UA's dark-mode form-control rendering regardless of
   what's declared below. This site is light-only by design. */
:root { color-scheme: only light; }

/* Belt-and-suspenders against Chromium/Opera GX "Force Dark Pages": that
   heuristic re-evaluates on media-query state, and some builds have been
   observed to re-apply inversion when the OS/browser sits in a dark
   theme even after the base color-scheme declaration above and the
   `<meta name="color-scheme" content="only light">` tag in
   views/partials/sv-head.ejs. Re-asserting `only light` inside the dark
   media query itself removes any ambiguity about which value should win
   when the browser is actively in a dark color scheme - there is no
   scenario in this design system where dark-mode text should render any
   differently than light-mode text, so this is safe to hardcode. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: only light !important; }
}

html { overflow-x: hidden; }
.sv-body {
  margin: 0;
  /* "AFTERMATH" (9 chars) is wider than "SINVAUX" (7) at the same
     wordmark-xl size - the vw-driven clamp that fit the old brand word
     could push the new one past 100vw and force a horizontal scrollbar.
     This is the backstop; wordmark-xl's own clamp was also tightened. */
  overflow-x: hidden;
  /* Solid --ivory stays as the base fill (and what every other surface -
     cards, nav, form fields - still reads against), with the generated
     paper photograph tiled on top so the page itself reads as a physical
     sheet rather than a flat CSS color. */
  background: linear-gradient(rgba(23,20,15,0.16), rgba(23,20,15,0.16)), var(--ivory) url('/assets-aftermath/textures/paper.jpg') repeat;
  background-size: auto, 900px 900px;
  color: #17140F;
  font-family: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  /* Do NOT force -webkit-font-smoothing:antialiased here. On Windows
     Chromium/Opera that forces grayscale AA instead of the platform's
     normal (often subpixel/ClearType-influenced) text rendering path,
     which makes a thin high-contrast serif like Bodoni Moda read as
     washed-out/light-grey even though `color` is correct. Let the
     browser/OS pick its default rendering instead. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}

/* Blunt, literal (not var()-based) default text color on every plain text
   element. Plain TAG selectors only (specificity 0,0,1) - deliberately
   lower than any class-based rule (.sv-btn, .card-sub, etc. are all
   0,1,0+), so intentionally-lighter text on dark surfaces still wins,
   while this still overrides plain *inheritance* of `color: var(--ink)`
   from .sv-body (a direct declaration always beats an inherited one,
   regardless of specificity). Exists because inherited var(--ink) was
   reportedly rendering washed-out/near-white for text sitewide in one
   real browser - hardcoding the literal hex removes any dependency on
   custom-property inheritance resolving correctly for color specifically. */
h1, h2, h3, p, a, span, li, dt, dd {
  color: #17140F;
}

.sv-body, .sv-body * { box-sizing: border-box; }

/* Reset UA defaults on the semantic elements this system leans on, so
   <figure>/<article>/<aside> carry zero unstyled browser opinion. */
.sv-body figure { margin: 0; }
.sv-body article, .sv-body aside { display: block; }

.sv-figcaption {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.9rem;
}

/* Fixed film-grain overlay, above everything (nav, 3D canvases, cards) at
   near-invisible opacity - brief §5/§21's "material, not glow." One layer,
   whole site, never re-declared per element. */
.sv-grain-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('/assets-aftermath/textures/grain.jpg') repeat;
  background-size: 220px 220px;
  opacity: 0.05;
  /* No mix-blend-mode: it sat at z-index:100 (above literally everything,
     including all text on every page) with a blend mode - inconsistent
     Chromium GPU-compositor behavior for blend-mode-over-fixed-content is
     a known cross-browser risk, and was reported washing out all page
     text to near-invisible in one browser while looking fine in another.
     A plain low-opacity layer BEHIND the content gets the same subtle
     grain without touching how any text actually renders. */
}

@media (prefers-reduced-motion: reduce) {
  /* Not a motion effect, but a large fixed background image recomposited
     under a moving/parallaxing scene is a needless GPU cost on the exact
     class of device most likely to have reduced-motion on - drop it there. */
  .sv-grain-overlay { display: none; }
}

/* ---------- typography primitives ---------- */

.wordmark-xl {
  /* "AFTERMATH" runs 9 characters vs the old "SINVAUX" at 7 - same vw
     factor at this length pushed past 100vw on ordinary viewports. Trimmed
     the vw coefficient and ceiling so the word fits at its own natural
     width instead of relying on the overflow-x:hidden backstop to hide it. */
  font-size: clamp(4.5rem, 15vw, 13rem);
  font-weight: 800;
  /* Bodoni Moda is a variable font with an optical-size (opsz) axis - the
     browser auto-selects a HIGH opsz at this element's huge rendered size,
     which pushes the typeface toward its most display-contrasty cut
     (near-invisible hairline thins) independent of font-weight. Locking
     opsz low keeps the strokes uniformly thick instead of alternating
     thick/hairline. */
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 10;
  /* em-based tracking scales WITH font-size - -0.03em was fine at normal
     text sizes but at this element's 16rem max, that's ~30px of negative
     tracking, enough to visibly collide Bodoni Moda's wide swash letterforms
     (caught by actually looking at a rendered screenshot, not just
     computed styles). -0.008em stays subtle at any size in this clamp. */
  letter-spacing: -0.008em;
  line-height: 0.86;
  margin: 0;
  color: var(--ink);
  will-change: transform, opacity;
}

.section-title {
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  font-weight: 800;
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 10;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin: 0;
}

.section-label {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-block;
  margin-bottom: 1.4rem;
}

.sv-body p.lead {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 34rem;
}

.sv-label-muted {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ---------- hairline system ---------- */

.hr-line {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0;
  width: 100%;
}

.hr-line--grow {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 900ms var(--ease);
}
.hr-line--grow.is-visible { transform: scaleX(1); }

.hr-accent {
  border: none;
  border-top: 2px solid var(--grenat);
  width: 70px;
  margin: 1.4rem 0 0;
}

/* ---------- sections / scroll rhythm ---------- */

.sv-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 9rem 8vw;
  position: relative;
  overflow: hidden;
  perspective: 1800px;
}

.sv-section .inner { max-width: 1240px; margin: 0 auto; width: 100%; }

.reveal {
  opacity: 0;
  transform: translateY(56px) scale(0.96) rotateX(4deg);
  transform-origin: bottom center;
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); }

/* Staggers children of a revealed group so cards/dots arrive in sequence
   rather than all at once - reads as a deliberate assembly, not a snap. */
.reveal-stagger.is-visible > * { transition-delay: calc(var(--i, 0) * 55ms); }

/* A real thematic break between rooms - semantic, not decorative. The
   VISIBLE room-opening signature is .sv-divider inside each section;
   this carries zero footprint of its own so the two don't double up. */
.sv-room-break { border: none; margin: 0; height: 0; }

/* ---------- editorial divider / numbering system ---------- */
/* The recurring SINVAUX signature (brief §3, §9): every room opens with
   one of these. Never decorative alone - it's the thing that tells you
   "you have entered a new section" instead of relying on empty space. */

.sv-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
}
.sv-divider-num {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  flex-shrink: 0;
}
/* A real <hr> - the semantic thematic break AND the visual rule are the
   same element, not two things layered to look alike. */
hr.sv-divider-line {
  flex: 1;
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--line);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 900ms var(--ease);
}
hr.sv-divider-line.is-visible { transform: scaleX(1); }
.sv-divider-label {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex-shrink: 0;
}
/* Closing punctuation between rooms - a hairline that ends in the one
   accent color rather than a label, used sparingly (brief §9). */
.sv-divider--dot .sv-divider-line { background: var(--line); }
.sv-divider--dot .sv-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--grenat); flex-shrink: 0;
}

/* Oversized, near-invisible room numeral sitting behind the content - an
   architectural watermark, not something meant to be read (brief §2, §4). */
.sv-room-numeral {
  position: absolute;
  top: 4rem;
  right: 4vw;
  font-size: clamp(9rem, 22vw, 20rem);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  opacity: 0.035;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* ---------- editorial grid ---------- */

.sv-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.6rem;
  position: relative;
  z-index: 1;
}
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

@media (max-width: 900px) {
  .sv-grid [class^="col-"] { grid-column: span 12; }
  .sv-room-numeral { display: none; }
}

/* ---------- statement / spec-sheet primitives ---------- */

.sv-statement {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 800;
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 10;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

.sv-spec { margin: 0; }
.sv-spec dt {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 0.7rem;
  margin-top: 1rem;
}
.sv-spec dt:first-child { margin-top: 0; }
.sv-spec dd {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.92rem;
  color: var(--ink);
  margin: 0.3rem 0 0;
}

/* ---------- room density variants (brief §6) ---------- */

.sv-room {
  position: relative;
  padding: 7rem 8vw;
  overflow: hidden;
}
.sv-room.is-spacious { padding: 11rem 8vw; }
.sv-room.is-immersive { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 6rem 8vw; }
.sv-room .room-inner { max-width: 1320px; margin: 0 auto; width: 100%; position: relative; z-index: 1; }

/* Alternating paper tone per room - a change in "background treatment"
   (brief §1) rather than only a rule, so a room boundary is visible even
   glancing at the page zoomed out. Re-tints the SAME paper photograph
   rather than swapping to a flat color, so the texture itself never
   breaks continuity (brief §7) - only its shade does. */
.sv-room.tone-deep {
  background: linear-gradient(rgba(23,20,15,0.1), rgba(23,20,15,0.1)), var(--ivory) url('/assets-aftermath/textures/paper.jpg') repeat;
  background-size: auto, 900px 900px;
}

/* ---------- machine object layout ---------- */

.machine-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
}

.machine-object {
  position: relative;
  height: 440px;
  width: 100%;
}
.machine-object canvas { width: 100%; height: 100%; display: block; }

@media (max-width: 1024px) {
  .machine-layout { grid-template-columns: 1fr; }
  .machine-object { height: 280px; order: -1; }
}

/* ---------- WebGL layer (sinvaux-scene.js) ---------- */

#sv-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* Every section's content sits above the fixed dust field. Both
   .sv-section (used by some views) and .sv-room (used by home.ejs) are
   targeted explicitly, with a real z-index rather than relying on DOM
   order + z-index:auto stacking to coincidentally win. */
.sv-nav, .sv-section, .sv-room { position: relative; z-index: 1; }

#sv-fleet-wrap { position: relative; }
#sv-fleet-canvas { position: absolute; inset: 0; }

.sv-fleet-label {
  position: absolute;
  transform: translate(-50%, 0);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  background: var(--ivory);
  border: 1px solid var(--line);
  padding: 4px 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms var(--ease);
  z-index: 2;
}

/* ---------- nav ---------- */

.sv-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 8vw;
  z-index: 50;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.8rem;
  /* A real surface, not a transparent overlay - scrolling section titles
     and the wordmark-xl hero type sit directly under this bar on every
     page, and without a backdrop they visually collided with the nav
     text instead of passing cleanly behind it. */
  background: rgba(222, 208, 178, 0.86);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
.sv-nav a {
  color: var(--ink);
  text-decoration: none;
  margin-left: 2rem;
  letter-spacing: 0.04em;
}
.sv-nav a:hover { color: var(--grenat); }
.sv-nav .sv-nav-mark {
  font-weight: 700;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.sv-symbol { width: 26px; height: 26px; flex-shrink: 0; }

/* Nav's growing link count (Platform, Use cases, Pricing, Enterprise, Log
   in, Sign up) has nowhere to go at phone widths - it used to just wrap
   into an overlapping stack. Collapse it behind a toggle instead. */
.sv-nav-toggle { display: none; }

@media (max-width: 760px) {
  .sv-nav-toggle {
    display: block;
    background: none;
    border: 1px solid var(--line-strong);
    width: 38px;
    height: 34px;
    padding: 0;
    cursor: pointer;
    position: relative;
  }
  .sv-nav-toggle span,
  .sv-nav-toggle span::before,
  .sv-nav-toggle span::after {
    content: '';
    position: absolute;
    left: 9px; right: 9px;
    height: 1px;
    background: var(--ink);
    transition: transform 200ms var(--ease), opacity 200ms var(--ease);
  }
  .sv-nav-toggle span { top: 50%; }
  .sv-nav-toggle span::before { top: -7px; }
  .sv-nav-toggle span::after { top: 7px; }
  .sv-nav.is-open .sv-nav-toggle span { background: transparent; }
  .sv-nav.is-open .sv-nav-toggle span::before { top: 0; transform: rotate(45deg); }
  .sv-nav.is-open .sv-nav-toggle span::after { top: 0; transform: rotate(-45deg); }

  .sv-nav-links {
    position: fixed;
    top: 100%;
    left: 0; right: 0;
    background: var(--ivory-deep);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 0.5rem 8vw 1.4rem;
    gap: 0.2rem;
    display: none;
  }
  .sv-nav.is-open .sv-nav-links { display: flex; }
  .sv-nav-links a { margin-left: 0; padding: 0.7rem 0; width: 100%; }
}

/* Aftermath is the product being sold on this site; SINVAUX is named only
   as the maker, quietly, once, in the nav - never as co-equal branding. */
.sv-nav-byline {
  display: block;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--ink-soft);
  margin-top: 0.1rem;
}

/* Larger standalone use of the mark (e.g. loading/empty states, footers). */
.sv-symbol--lg { width: 56px; height: 56px; }

/* ---------- card-3d (brief §4, §7, §12) ---------- */

.card-3d-stage {
  perspective: 1400px;
}

/* .card-3d (home) is a real <button> - genuine interactive control, not a
   decorative div - so reset the UA button chrome to inherit this system's
   own styling. .license-card (dashboard) stays a div: it nests its own
   <button> internally, which a real button element cannot contain. */
button.card-3d {
  appearance: none;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
}

.card-3d {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 340px;
  transform-style: preserve-3d;
  transition: transform 420ms var(--ease);
  cursor: pointer;
  /* Live cursor-tracked tilt (set by sinvaux-3d.js on mousemove) composes
     with the resting/hover state - a real 3D object responding to the
     viewer, not just a flat lift. */
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px));
}

.card-3d.is-flipped { transform: rotateY(180deg); transition-duration: 560ms; }

.card-3d .face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  background: var(--ivory-deep);
  border: 1px solid var(--line);
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 0 var(--line);
  transition: box-shadow 220ms var(--ease), transform 220ms var(--ease);
}

.card-3d .face--back { transform: rotateY(180deg); }

.card-3d-stage:hover .card-3d:not(.is-flipped) .face--front {
  box-shadow: 0 28px 54px -22px rgba(23,20,15,0.34);
}

.card-title { font-size: 1.6rem; font-weight: 600; margin: 0 0 0.6rem; }
.card-sub { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; color: var(--ink-soft); font-size: 0.95rem; }
.card-list { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 0.85rem; letter-spacing: 0.04em; line-height: 2.1; color: var(--ink); list-style: none; padding: 0; margin: 0; }
.card-hint { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- spatial fleet grid (brief §10, §15) ---------- */

.grid-spatial {
  position: relative;
  width: 100%;
  height: 46vh;
  min-height: 320px;
  max-width: 100%;
  perspective: 1200px;
}

.endpoint-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-soft);
  transition: transform 260ms var(--ease), background 260ms var(--ease), opacity 260ms var(--ease);
  position: absolute;
  cursor: pointer;
  /* Left/top/scale/opacity are set per-dot inline (JS-scattered field, see
     home.ejs) so density and depth vary instead of a uniform grid - "a
     dense but organized constellation," not a spreadsheet of dots. */
}
.endpoint-dot:hover { transform: translateZ(14px) scale(2.2); background: var(--grenat); z-index: 5; }

.endpoint-label {
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  background: var(--ivory);
  border: 1px solid var(--line);
  padding: 4px 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease);
}
.endpoint-dot:hover .endpoint-label { opacity: 1; }

/* ---------- spatial timeline (brief §11) ---------- */

.timeline-spatial {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3.5rem;
  padding-top: 3rem;
}
.timeline-spatial::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 3.4rem;
  border-top: 1px solid var(--line);
}
.timeline-node {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
}
.timeline-node .status-marker { background: var(--grenat); }
.timeline-node .event-label {
  position: absolute;
  top: -2.4rem;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.72rem;
  color: var(--ink-soft);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.timeline-node:hover .event-label { opacity: 1; transform: translateX(-50%) translateY(0); }
.timeline-node:hover { background: var(--grenat); }

/* ---------- panels (protection teaser) ---------- */

.panel-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.panel { background: var(--ivory); padding: 2rem; transition: transform 220ms var(--ease); }
.panel:hover { transform: translateY(-3px); }
.panel h3 { font-size: 1rem; font-weight: 700; font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; letter-spacing: 0.04em; margin: 0 0 0.9rem; }
.panel ul { list-style: none; padding: 0; margin: 0; font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 0.85rem; color: var(--ink-soft); line-height: 2; }

/* ---------- buttons ---------- */

.sv-btn {
  display: inline-block;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.8rem 1.6rem;
  background: var(--ink);
  color: var(--ivory);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: transform 220ms var(--ease), background 220ms var(--ease), color 220ms var(--ease);
}
.sv-btn:hover { transform: translateY(-2px); }
.sv-btn.grenat { background: var(--grenat); border-color: var(--grenat); }
.sv-btn.ghost { background: transparent; color: var(--ink); }
.sv-btn.ghost:hover { background: var(--ink); color: var(--ivory); }
.sv-btn:disabled { opacity: 0.4; cursor: default; transform: none; }

/* ---------- pricing: cards on a shallow arc (brief propagation plan) ---------- */

.price-row {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.price-card {
  position: relative;
  flex: 1 1 220px;
  background: var(--ivory-deep);
  border: 1px solid var(--line);
  padding: 1.8rem 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.price-card:hover { transform: translateY(-6px); box-shadow: 0 20px 36px -22px rgba(23,20,15,0.3); }

/* Pro sits forward in Z per the experience map - a translateY lift and a
   grenat underline are its main differentiators, plus the "Most popular"
   badge below. */
.price-card.is-forward { transform: translateY(-14px); }
.price-card.is-forward:hover { transform: translateY(-20px); }

.price-badge {
  position: absolute;
  top: -0.9rem;
  right: 1.5rem;
  background: var(--grenat);
  color: var(--ivory);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.8rem;
}

.price-tier { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.price-tier.accented { border-bottom: 2px solid var(--grenat); padding-bottom: 6px; display: inline-block; }
.price-amount { font-size: 2.1rem; font-weight: 700; margin: 0.6rem 0 1rem; }
.price-amount small { font-size: 0.9rem; color: var(--ink-soft); font-weight: 400; }
.price-was { font-size: 1rem; font-weight: 400; color: var(--ink-soft); text-decoration: line-through; margin-left: 0.5rem; }
.price-discount { display: inline-block; font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 0.72rem; font-weight: 600; color: var(--grenat); margin: -0.6rem 0 0.8rem; }
.price-cta { margin-top: 0.4rem; }

/* Monthly/yearly toggle: both price variants are always in the DOM, only
   .is-active is shown, so no JS re-render or layout shift on switch. */
.price-amount.is-monthly, .price-amount.is-yearly,
.price-discount.is-monthly, .price-discount.is-yearly { display: none; margin-top: 0; }
.price-amount.is-active, .price-discount.is-active { display: block; }
.price-discount.is-active { display: inline-block; }

/* ---------- releases archive ---------- */

.release-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.release-row { background: var(--ivory); padding: 1.4rem 1.6rem; }
.release-row.is-latest { background: var(--ivory-deep); }
.release-row-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.5rem; }
.release-version { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 1rem; font-weight: 700; }
.release-date { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 0.76rem; color: var(--ink-soft); margin-left: auto; }
.release-notes { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.6; margin: 0 0 1rem; max-width: 44rem; }

.billing-toggle {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  margin-bottom: 2rem;
}
.billing-toggle-btn {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.7rem 1.4rem;
}
.billing-toggle-btn.is-active { background: var(--ink); color: var(--ivory); }
.billing-save { color: var(--grenat); font-size: 0.7rem; margin-left: 0.4rem; }
.billing-toggle-btn.is-active .billing-save { color: var(--ivory); opacity: 0.75; }

.price-features {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.price-check {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 0.2rem;
  color: var(--grenat);
}

/* ---------- form card (login/register) ---------- */

.form-card-stage { perspective: 1000px; display: flex; justify-content: center; }
.form-card {
  width: 100%;
  max-width: 400px;
  background: var(--ivory-deep);
  border: 1px solid var(--line);
  padding: 2.6rem;
  box-shadow: 0 1px 0 var(--line);
}
.form-card .section-title { margin-bottom: 0.4rem; }
.sv-input {
  width: 100%;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.9rem;
  padding: 0.85rem 0.9rem;
  background: var(--ivory);
  border: 1px solid var(--line);
  color: var(--ink);
  margin-bottom: 0.9rem;
}
.sv-input:focus { outline: none; border-color: var(--ink-soft); }
.sv-input::placeholder { color: var(--ink-soft); opacity: 1; }
.form-error { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; color: var(--grenat); font-size: 0.85rem; margin: 0 0 1rem; }
.form-switch { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 0.82rem; color: var(--ink-soft); margin-top: 1.2rem; }
.form-switch a { color: var(--ink); }

/* ---------- notice ---------- */

.sv-notice {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--grenat);
  padding: 0.9rem 1.2rem;
  background: var(--ivory-deep);
  margin-bottom: 2.4rem;
  max-width: 640px;
}

/* ---------- license evidence cards (dashboard) ---------- */

.license-fan {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
  perspective: 1400px;
}

.license-card {
  width: 300px;
  height: 190px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 420ms var(--ease);
  cursor: pointer;
  transform: rotate(var(--fan-r, 0deg)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px));
}
/* Fanned-on-a-table offsets - alternating tilt per card, per the
   experience map's "loose stack" concept. */
.license-fan .license-card:nth-child(3n+2) { --fan-r: -1.4deg; }
.license-fan .license-card:nth-child(3n+3) { --fan-r: 1.1deg; }
.license-fan .license-card.is-flipped { transform: rotateY(180deg); transition-duration: 560ms; }

.license-card .face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  background: var(--ivory-deep);
  border: 1px solid var(--line);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 0 var(--line);
  transition: box-shadow 220ms var(--ease);
}
.license-card:hover .face--front { box-shadow: 0 16px 30px -18px rgba(23,20,15,0.28); }
.license-card .face--back { transform: rotateY(180deg); }

.license-tier-name { font-size: 1.4rem; font-weight: 600; }
.license-expiry { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 0.78rem; color: var(--ink-soft); }
.license-key-text {
  font-family: Consolas, monospace;
  font-size: 0.62rem;
  line-height: 1.5;
  color: var(--ink-soft);
  word-break: break-all;
  overflow: hidden;
  max-height: 4.5rem;
}
.license-copy-btn {
  align-self: flex-start;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--line-strong);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  color: var(--ink);
}
.license-copy-btn:hover { border-color: var(--grenat); color: var(--grenat); }

/* ---------- contact card (mirrors the reference image directly) ---------- */

.contact-card { max-width: 480px; }
.contact-card .wordmark-xl { font-size: clamp(3rem, 8vw, 5.5rem); }
.contact-lines { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 1rem; color: var(--ink-soft); line-height: 1.9; margin-top: 1.6rem; }
.contact-lines a { color: var(--ink-soft); text-decoration: none; }
.contact-lines a:hover { color: var(--grenat); }

/* ---------- hero product panel (floating, tilted screenshot) ---------- */

.hero-product-stage {
  perspective: 1800px;
  margin-top: 3.4rem;
}
.hero-product-panel {
  /* Flat at rest - the constant tilt read as broken/misaligned rather than
     deliberate. Tilt is now purely a hover response, not a resting state. */
  transform: none;
  transition: transform 420ms var(--ease);
  transform-origin: center;
}
.hero-product-stage:hover .hero-product-panel {
  transform: rotateX(5deg) rotateY(-4deg) translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
  .hero-product-panel { transform: none !important; }
}

/* ---------- before / after contrast (problem -> transformation) ---------- */

.contrast-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2.4rem;
}
.contrast-col-before, .contrast-col-after {
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
}
.contrast-label {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1.2rem;
}
.contrast-col-before .contrast-label { color: var(--ink-soft); }
.contrast-col-after .contrast-label { color: var(--grenat); }
.contrast-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 2.3;
}
.contrast-col-before .contrast-list { color: var(--ink-soft); }
.contrast-col-after .contrast-list { color: var(--ink); font-weight: 500; }
.contrast-arrow {
  font-size: 1.6rem;
  color: var(--grenat);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .contrast-row { grid-template-columns: 1fr; text-align: left; }
  .contrast-arrow { display: none; }
}

/* ---------- scenario cards (interactive, click to reveal) ---------- */

.scenario-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.2rem;
}
.scenario-tab {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  background: none;
  border: 1px solid var(--line);
  padding: 0.6rem 1.1rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 180ms var(--ease), color 180ms var(--ease), background 180ms var(--ease);
}
.scenario-tab.is-active {
  border-color: var(--grenat);
  color: var(--ink);
  background: var(--ivory-deep);
}
.scenario-panel { display: none; }
.scenario-panel.is-active { display: block; }
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.scenario-block { background: var(--ivory); padding: 1.8rem; }
.scenario-block-label {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 0.9rem;
}
.scenario-block.is-result .scenario-block-label { color: var(--grenat); }
.scenario-block p {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0;
  color: var(--ink);
}

@media (max-width: 900px) {
  .scenario-grid { grid-template-columns: 1fr; }
}

/* ---------- outcome cards (business value, sell outcomes not features) ---------- */

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.outcome-card { background: var(--ivory); padding: 2.2rem 1.8rem; }
.outcome-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.7rem;
  letter-spacing: -0.005em;
}
.outcome-card p {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 900px) {
  .outcome-grid { grid-template-columns: 1fr; }
}

/* ---------- scale funnel (one machine -> hosts -> organization) ---------- */

.funnel-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}
.funnel-step {
  border-top: 2px solid var(--line);
  padding: 1.6rem 1.8rem 0 0;
  position: relative;
}
.funnel-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  top: -0.05rem;
  right: 0.6rem;
  transform: translateX(50%);
  color: var(--grenat);
  font-size: 1.1rem;
  background: var(--ivory);
  padding: 0 0.4rem;
}
.funnel-step.is-current { border-top-color: var(--grenat); }
.funnel-tier {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grenat);
  display: block;
  margin-bottom: 0.7rem;
}
.funnel-step h3 { font-size: 1.3rem; font-weight: 600; margin: 0 0 0.6rem; }
.funnel-step p {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 900px) {
  .funnel-row { grid-template-columns: 1fr; gap: 2.2rem; }
  .funnel-step:not(:last-child)::after { content: '↓'; top: auto; bottom: -1.6rem; right: auto; left: 0; transform: none; }
}

/* ---------- day-in-the-life vertical timeline ---------- */

.day-timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.day-timeline::before {
  content: '';
  position: absolute;
  left: 5.6rem;
  top: 0.4rem;
  bottom: 0.4rem;
  border-left: 1px solid var(--line);
}
.day-entry {
  display: grid;
  grid-template-columns: 5.6rem 2rem 1fr;
  align-items: start;
  margin-bottom: 2.2rem;
}
.day-time {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding-top: 0.15rem;
}
.day-dot-col { display: flex; justify-content: center; }
.day-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink);
  margin-top: 0.3rem;
  position: relative;
  z-index: 1;
}
.day-entry.is-key .day-dot { background: var(--grenat); }
.day-entry h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
}
.day-entry p {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 640px) {
  .day-timeline::before { left: 4.2rem; }
  .day-entry { grid-template-columns: 4.2rem 1.6rem 1fr; }
}

/* ---------- centralization funnel (scattered tools -> one view) ---------- */

.central-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2.4rem;
}
.central-scattered {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.central-scattered li {
  border-top: 1px solid var(--line);
  padding: 0.85rem 0;
}
.central-scattered li:last-child { border-bottom: 1px solid var(--line); }
.central-unified {
  border: 2px solid var(--grenat);
  padding: 2.4rem 1.8rem;
  text-align: center;
}
.central-unified strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.central-unified span {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .central-row { grid-template-columns: 1fr; }
  .contrast-arrow.central-arrow { display: none; }
}

/* ---------- comparison table (why aftermath) ---------- */

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.88rem;
}
.compare-table th {
  text-align: left;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 1.2rem 0.9rem;
  border-bottom: 1px solid var(--line-strong);
}
.compare-table th:last-child { color: var(--grenat); }
.compare-table td {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare-table td:first-child { color: var(--ink-soft); }
.compare-table td:last-child { color: var(--ink); font-weight: 500; }

@media (max-width: 640px) {
  .compare-table { display: block; overflow-x: auto; }
}

/* ---------- trust / capabilities grid ---------- */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.trust-item { background: var(--ivory); padding: 1.4rem 1.3rem; }
.trust-item h4 {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
}
.trust-item p {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.75rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 900px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- hero CTAs ---------- */

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-top: 2.2rem;
}
.hero-ctas .sv-btn { padding: 0.95rem 1.9rem; font-size: 0.85rem; }

/* ---------- how-it-works steps ---------- */

.step-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
}
.step {
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
}
.step-num {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--grenat);
  display: block;
  margin-bottom: 0.9rem;
}
.step h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
}
.step p {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 900px) {
  .step-row { grid-template-columns: 1fr; }
}

/* ---------- app-frame product mockup ---------- */
/* A styled-HTML stand-in for a real product screenshot (brief: no exported
   screenshot asset exists for the WinForms app yet) - built from the same
   design tokens/typography as the rest of the site rather than looking like
   a generic dashboard template, so it reads as "this app" specifically. */

.app-frame {
  background: var(--ivory-deep);
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -40px rgba(23,20,15,0.35);
  overflow: hidden;
}
.app-frame-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--ivory);
}
.app-frame-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.app-frame-dot:nth-child(3) { background: var(--grenat); opacity: 0.6; }
.app-frame-title {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-left: 0.6rem;
}
.app-frame-body {
  display: grid;
  grid-template-columns: 190px 1fr;
  min-height: 380px;
}
.app-frame-nav {
  border-right: 1px solid var(--line);
  padding: 1rem 0;
  background: var(--ivory-deep);
}
.app-frame-nav a {
  display: block;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.78rem;
  color: var(--ink-soft);
  padding: 0.55rem 1.2rem;
  border-left: 2px solid transparent;
}
.app-frame-nav a.is-active {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--grenat);
  background: var(--ivory);
}
.app-frame-main { padding: 1.6rem 1.8rem; }
.app-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 1.6rem;
}
.app-tile {
  background: var(--ivory);
  padding: 1rem 1.1rem;
}
.app-tile-label {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 0.5rem;
}
.app-tile-value { font-size: 1.5rem; font-weight: 700; }
.app-tile-value.accent { color: var(--grenat); }
.app-list-title {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.7rem;
}
.app-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--line);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.8rem;
}
.app-row-name { color: var(--ink); }
.app-row-meta { color: var(--ink-soft); font-size: 0.72rem; }
.app-badge {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  flex-shrink: 0;
}
.app-badge.is-clean { border-color: var(--grenat); color: var(--grenat); }

@media (max-width: 900px) {
  .app-frame-body { grid-template-columns: 1fr; }
  .app-frame-nav { display: none; }
  .app-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  /* .app-row's three children (name/meta/badge) are unshrinkable text with
     no flex-wrap - on a narrow phone-width app-frame their combined
     intrinsic width ran past the row's box instead of wrapping. */
  .app-frame-main { padding: 1.4rem 1.2rem; }
  .app-row { flex-wrap: wrap; row-gap: 0.3rem; }
  .app-row-name { flex: 1 1 100%; }
  .app-row-meta { flex: 1 1 auto; min-width: 0; }
}

/* ---------- pricing teaser strip (home) ---------- */

.price-teaser-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.price-teaser {
  position: relative;
  background: var(--ivory);
  padding: 1.8rem 1.6rem;
}
.price-teaser.is-accent { background: var(--ivory-deep); }
.price-teaser .price-tier { display: block; margin-bottom: 0.5rem; }
.price-teaser .price-amount { font-size: 1.7rem; margin: 0 0 0.7rem; }
.price-teaser .price-blurb { font-size: 0.8rem; margin-bottom: 1.2rem; }
.price-teaser .price-badge { top: -0.7rem; right: 1.2rem; }

@media (max-width: 900px) {
  .price-teaser-row { grid-template-columns: 1fr; }
}

/* ---------- page hero (Platform / How It Works / Features / Use Cases / Sweep / Reporting) ---------- */
/* Every sub-page opens with one of these instead of re-deriving a hero
   layout per page - same weight/spacing as Home's hero, different copy,
   so no page reads as a lesser build. */

.page-hero {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 6rem;
}
.page-hero .page-kicker {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grenat);
  display: block;
  margin-bottom: 1rem;
}
.page-hero h1 {
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  font-weight: 800;
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 10;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 46rem;
}

/* ---------- workflow detail (How It Works — one substantial room per step) ---------- */

.workflow-step-room {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem;
  align-items: center;
}
.workflow-step-room.is-reversed { direction: rtl; }
.workflow-step-room.is-reversed > * { direction: ltr; }
.workflow-detail-list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.88rem;
  line-height: 1.6;
}
.workflow-detail-list li {
  border-top: 1px solid var(--line);
  padding: 0.9rem 0;
}
.workflow-detail-list strong {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}
.workflow-detail-list span { color: var(--ink); }

@media (max-width: 1024px) {
  .workflow-step-room { grid-template-columns: 1fr; }
  .workflow-step-room.is-reversed { direction: ltr; }
}

/* ---------- feature story (Features page — alternating layout) ---------- */

.feature-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.feature-story.is-reversed { direction: rtl; }
.feature-story.is-reversed > * { direction: ltr; }
.feature-story .feature-index {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--grenat);
  display: block;
  margin-bottom: 0.9rem;
}

@media (max-width: 1024px) {
  .feature-story { grid-template-columns: 1fr; }
  .feature-story.is-reversed { direction: ltr; }
}

/* ---------- scenario room (Use Cases — one immersive room per scenario) ---------- */

.scenario-room-head {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin-bottom: 1.8rem;
}
.scenario-room-head .step-num { margin: 0; }

/* ---------- report preview (Reporting page) ---------- */

.report-preview {
  background: var(--ivory);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -34px rgba(23,20,15,0.3);
  max-width: 560px;
  padding: 2.4rem 2.2rem;
}
.report-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 1.2rem;
  margin-bottom: 1.4rem;
}
.report-preview-head h3 { font-size: 1.15rem; font-weight: 700; margin: 0; }
.report-preview-head span {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.68rem;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
}
.report-section-title {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1.3rem 0 0.6rem;
}
.report-section-title:first-of-type { margin-top: 0; }
.report-line {
  display: flex;
  justify-content: space-between;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.85rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--line);
}
.report-line:first-of-type { border-top: none; }

/* ---------- footer ---------- */

.sv-foot {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  background: linear-gradient(rgba(23,20,15,0.05), rgba(23,20,15,0.05)), var(--ivory) url('/assets-aftermath/textures/paper.jpg') repeat;
  background-size: auto, 900px 900px;
  padding: 4.5rem 8vw 2.4rem;
}
.sv-foot-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.4rem;
  max-width: 1240px;
  margin: 0 auto 3rem;
}
.sv-foot-brand .sv-nav-mark { display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-decoration: none; color: var(--ink); }
.sv-foot-brand p {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 22rem;
  margin: 1rem 0 0;
}
.sv-foot-col h4 {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.sv-foot-col a {
  display: block;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--ink);
  text-decoration: none;
  padding: 0.4rem 0;
}
.sv-foot-col a:hover { color: var(--grenat); }
.sv-foot-bottom {
  max-width: 1240px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .sv-foot-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sv-foot-top { grid-template-columns: 1fr; }
}

/* ---------- responsive (brief §18) ---------- */

@media (max-width: 1024px) {
  .card-3d { max-width: 100%; }
  .panel-row { grid-template-columns: 1fr; }
  .price-card.is-forward { transform: none; }
  .price-card.is-forward:hover { transform: translateY(-6px); }
}

@media (max-width: 640px) {
  .sv-section { padding: 4rem 6vw; }
  .card-3d-stage:hover .card-3d:not(.is-flipped) { transform: none; }
  .license-card { width: 100%; }
  .license-fan .license-card:nth-child(3n+2),
  .license-fan .license-card:nth-child(3n+3) { transform: none; }
  .license-fan .license-card.is-flipped { transform: rotateY(180deg); }
}

/* ---------- reduced motion (brief §8, §19) ---------- */

@media (prefers-reduced-motion: reduce) {
  .sv-body * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .card-3d, .card-3d.is-flipped,
  .license-card, .license-card.is-flipped,
  .license-fan .license-card:nth-child(3n+2),
  .license-fan .license-card:nth-child(3n+3) { transform: none !important; }
  .card-3d .face--back, .license-card .face--back { position: static; margin-top: 1rem; }
  .card-3d, .license-card { height: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hr-line--grow { transform: scaleX(1) !important; }
  #wordmark-parallax { transform: none !important; }
}

/* ---------- accent-layer components (grenat), matching SIN's own ---------- */
/* Same shape as SIN's accent layer: a tag, a spec-sheet meta grid, and a
   callout, all reusing Aftermath's own paper/grenat palette rather than
   introducing new colors or breaking the sharp-cornered convention. */

.sv-tag {
  display: inline-block;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--line-strong);
  color: var(--grenat);
  margin: 0 0.4rem 0.4rem 0;
}

.sv-download {
  border: 1px solid var(--line-strong);
  background: linear-gradient(rgba(124, 46, 58, 0.06), transparent 60%);
  padding: 1.6rem 2rem;
  margin-top: 1.8rem;
  display: inline-block;
}

.sv-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.2rem;
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.sv-meta dt {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-soft); margin: 0 0 0.3rem;
}
.sv-meta dd {
  margin: 0; font-family: 'Consolas', 'Courier New', monospace; font-size: 0.85rem; color: var(--ink);
}

.sv-note {
  border-left: 2px solid var(--grenat);
  background: rgba(124, 46, 58, 0.05);
  padding: 1rem 1.4rem;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.85rem; color: var(--ink-soft); line-height: 1.65;
  margin-top: 1.6rem;
}