:root {
  /* Digital Renaissance palette (brand system 2026-07-01): Ink ground, the one
     Luminous blue as the intelligence, Gold Leaf as the single gild. */
  --bg-black: #04070e; /* Nocturne */
  --bg-void: #05080f;
  --bg-navy-950: #0a1024; /* Ink */
  --bg-navy-900: #080d1c;
  --bg-navy-850: #0b1226;
  --bg-navy-800: #12203f; /* Raise */
  --surface-1: #070b15;
  --surface-2: #0b1226;
  --surface-3: #12203f;
  --surface-4: #16294c;
  --border-soft: rgba(126, 137, 171, 0.16);
  --border-medium: rgba(126, 137, 171, 0.18);
  --border-strong: rgba(126, 137, 171, 0.34);
  --divider: rgba(255, 255, 255, 0.06);
  --hairline-blue: rgba(67, 127, 254, 0.24);
  --lum: #437ffe; /* Luminous: the light, the AI. Eyebrows, AI letters, key accents. */
  --blue-700: #12225f;
  --blue-600: #1e387f; /* Lapis */
  --blue-500: #2563ff; /* Azure: buttons, active states */
  --blue-400: #3b6dff;
  --blue-300: #79a6ff; /* Halo: highlights, hovers, italic emphasis word */
  --blue-200: #9cc0ff;
  --violet: #8b5cff;
  --cyan: #45c8ff;
  --green: #1fa46b;
  --green-bright: #24b27c; /* Emerald */
  --amber: #e8a23a;
  --gold: #d4a537; /* Gold Leaf */
  --gold-bright: #e6bd54;
  --gold-soft: rgba(212, 165, 55, 0.5);
  /* Fine fractal grain: gives the near-black a fresco tooth instead of flat
     digital black. Tiled, baked-in low opacity, sits behind all content. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  --text-primary: #f6f7ff;
  --text-secondary: #c5cbda;
  --text-muted: #8a93a8;
  --text-faint: #5e6678;
  --text-inverse: #020617;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --shadow-soft: 0 16px 48px rgba(0, 0, 0, 0.32);
  --shadow-card: 0 24px 80px rgba(0, 0, 0, 0.42);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-move: cubic-bezier(0.77, 0, 0.175, 1);
  --fs-ghost: clamp(64px, 14vw, 320px);
  --fs-hero-m: clamp(34px, 12.5vw, 66px);
  --fs-h2: clamp(38px, 4.6vw, 64px);
  --fs-h3: clamp(22px, 2.4vw, 28px);
  --fs-h4: 20px;
  --fs-lede: clamp(17px, 1.6vw, 21px);
  --fs-body: 16px;
  --fs-stat: clamp(32px, 3.9vw, 64px);
  --fs-stat-m: clamp(24px, 7.2vw, 32px);
  --section-pad: clamp(88px, 10vw, 150px);
  --container: 1180px;
  --hero-inset: clamp(20px, 3.6vw, 52px);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family:
    "Schibsted Grotesk",
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;
  background: var(--bg-black);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Digital Renaissance type: Newsreader serif for every display moment
   (headlines, the da Vinci quote, section heads, hero numerals); Schibsted
   grotesque carries all body, labels, and data. */
.hero-quote,
.screen-title,
h1,
h2,
.demo-copy h2,
.product-copy h2,
.page-cta h2 {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.021em;
}
.hero-quote em,
.screen-title em,
h2 em,
.about-main h1 em {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
}
.pnum,
.stat-num,
.savings-number,
.stat .num {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
}
/* The landing keeps the original Inter display type (Pat prefers it there);
   the Digital Renaissance serif system runs on the inner pages. The ghost
   wordmark and the da Vinci quote stay Inter. */
body.landing {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ghost {
  font-family: "Inter", system-ui, sans-serif;
}
.landing .hero-quote {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.035em;
}
.landing .hero-quote em {
  font-family: inherit;
  font-style: normal;
}
.home-page,
.about-page {
  background:
    var(--grain) repeat,
    radial-gradient(
      80% 40% at 78% 3%,
      rgba(201, 169, 97, 0.06),
      transparent 60%
    ),
    linear-gradient(180deg, #00030f, #050a24 44%, #030722 72%, #010516);
}
a {
  color: inherit;
}
button,
input,
textarea {
  font: inherit;
}
.container {
  width: min(100%, calc(var(--container) + 2 * clamp(20px, 4vw, 40px)));
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}
.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 200;
  background: #fff;
  color: #050914;
  padding: 10px 16px;
  border-radius: 8px;
}
.skip-link:focus {
  top: 12px;
}
:focus-visible {
  outline: 2px solid var(--blue-300);
  outline-offset: 3px;
  border-radius: inherit;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3em;
  text-decoration: none;
  white-space: nowrap;
}
/* Header mark: the official wordmark lockup (David-nebula icon + serif
   REN[AI]SSANCE) rather than a CSS text mark. */
.wordmark img {
  display: block;
  height: 30px;
  width: auto;
}
.ai {
  background: linear-gradient(180deg, var(--blue-200), var(--blue-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}
.wordmark .ai {
  text-shadow: 0 0 22px rgba(104, 160, 255, 0.4);
}
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 76px;
  transition:
    background 300ms var(--ease-out),
    border-color 300ms var(--ease-out);
}
.site-header.scrolled {
  background: rgba(1, 5, 22, 0.78);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--divider);
}
.header-inner {
  max-width: none;
  height: 100%;
  padding-inline: var(--hero-inset);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav-pill {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 999px;
  /* Dark, recessive brushed glass: reads as a whisper of tinted glass the
     Venice plate shows through, not a bright grey slab floating over it.
     (Pat, 2026-08-26: the old light-grey pill was "too loud".) */
  background: linear-gradient(
    180deg,
    rgba(9, 14, 30, 0.5),
    rgba(5, 9, 20, 0.4)
  );
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px) saturate(118%);
}
.nav-pill a {
  padding: 9px 17px;
  border-radius: 999px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  /* Legible over the bright sunset sky the translucent pill sits on, without
     opacifying the pill back into the "loud" slab Pat rejected. */
  text-shadow: 0 1px 2px rgba(0, 3, 15, 0.72);
  transition:
    background 160ms var(--ease-out),
    color 160ms var(--ease-out);
}
.nav-pill a.active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.11);
}
.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}
.signin {
  font-size: 14.5px;
  color: var(--text-secondary);
  text-decoration: none;
}
.header-cta,
.compact-nav {
  padding: 12px 22px;
  border-radius: 999px;
  background: #f6f7ff;
  color: #050914;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.compact-nav {
  display: none;
  background: rgba(246, 247, 255, 0.1);
  border: 1px solid rgba(126, 137, 171, 0.22);
  color: var(--text-primary);
  backdrop-filter: blur(14px);
}
.hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  max-height: 1200px;
  overflow: hidden;
  background: var(--bg-black);
}
.hero-bg,
.hero-bg img,
.hero-video,
.hero-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-bg {
  z-index: 0;
}
.hero-bg img {
  object-fit: cover;
  object-position: 52% 34%;
  transform: scale(1.04);
  will-change: transform;
}
.hero-video {
  display: none;
  z-index: 1;
  object-fit: cover;
  object-position: 50% 0;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
  pointer-events: none;
}
.hero-video.is-playing {
  opacity: 1;
}
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  object-fit: cover;
  object-position: 52% 34%;
  transform: scale(1.04);
  will-change: transform;
  opacity: 0;
  transition: opacity 1400ms var(--ease-out);
  pointer-events: none;
}
.hero-bg-video.is-playing {
  opacity: 1;
}
@media (max-width: 860px) {
  .hero-bg-video {
    display: none;
  }
}
.hero-scrim {
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(4, 9, 26, 0.28) 0%,
      rgba(4, 9, 26, 0.28) 32%,
      rgba(2, 6, 20, 0.7) 64%,
      rgba(1, 4, 14, 0.93) 84%,
      #00030f 100%
    ),
    linear-gradient(
      90deg,
      rgba(2, 6, 20, 0.74) 0%,
      rgba(2, 6, 20, 0.34) 22%,
      rgba(2, 6, 20, 0.02) 48%,
      rgba(2, 6, 20, 0.1) 72%,
      rgba(2, 6, 20, 0.34) 100%
    ),
    radial-gradient(
      120% 90% at 62% 10%,
      rgba(37, 99, 255, 0.16),
      transparent 48%
    ),
    linear-gradient(180deg, rgba(10, 26, 86, 0.1), rgba(6, 14, 40, 0.26));
}
.hero:before,
.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hero:before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.045),
    transparent 22%
  );
}
.hero:after {
  background: radial-gradient(
    120% 120% at 50% 40%,
    transparent 56%,
    rgba(0, 1, 7, 0.62) 100%
  );
}
.ghost {
  position: absolute;
  left: 50%;
  top: 32%;
  z-index: 4;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: var(--fs-ghost);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.035em;
  white-space: nowrap;
  user-select: none;
  background: linear-gradient(
    180deg,
    rgba(238, 244, 255, 0.3),
    rgba(150, 178, 240, 0.11) 92%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ghost .ai {
  background: linear-gradient(
    180deg,
    rgba(156, 192, 255, 0.62),
    rgba(59, 109, 255, 0.34)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-bloom {
  position: absolute;
  z-index: 4;
  right: 12%;
  bottom: 6%;
  width: clamp(320px, 44vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 255, 0.2), transparent 62%);
  filter: blur(20px);
  pointer-events: none;
}
.bust-wrap {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 5;
  transform: translateX(-38%);
  height: min(93svh, 96%);
  pointer-events: none;
}
.hero-fade {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 56%,
    rgba(0, 3, 15, 0.42) 76%,
    rgba(0, 3, 15, 0.85) 92%,
    #00030f 100%
  );
}
.bust-wrap picture {
  display: block;
  height: 100%;
}
.bust {
  height: 100%;
  width: auto;
  /* No drop-shadow: a blurred shadow haloed the hair against the bright
     sunset sky and read as a dirty edge. The statue carries its own baked
     light, and the scrim + bottom fade ground the base, so it blends
     cleanly straight against the plate. */
}
/* No z-index on desktop: this must NOT create a stacking context, so the
   ghost wordmark (z4) stays behind the statue (z5) while stats and CTAs
   (z7) sit above the statue and the bottom fade. On mobile the bust is
   hidden and the hero video carries z-index 1, so the whole block gets
   lifted above it there (see the max-width media block). */
.hero-bottom {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
@media (max-width: 860px) {
  .hero-bottom {
    z-index: 7;
  }
}
.hero-bottom a {
  pointer-events: auto;
}
.hero-stats {
  position: absolute;
  left: var(--hero-inset);
  bottom: clamp(96px, 16svh, 160px);
  z-index: 7;
  display: flex;
  gap: clamp(28px, 3.6vw, 52px);
  max-width: 48%;
}
.stat .num {
  font-size: var(--fs-stat);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55);
}
.stat .num span {
  color: var(--blue-300);
}
.stat .label {
  margin-top: 12px;
  max-width: 200px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow:
    0 1px 3px rgba(0, 3, 15, 0.9),
    0 2px 16px rgba(0, 3, 15, 0.8);
}
.hero-ctas {
  position: absolute;
  left: var(--hero-inset);
  bottom: clamp(32px, 6svh, 60px);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 22px;
}
/* The landing hero CTA is the same nav-grey glass button (.button.blue), just
   sized up for the hero. */
.hero-cta {
  padding: 16px 34px;
  font-size: 15.5px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out);
}
.button.light {
  background: #f6f7ff;
  color: #050914;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}
/* The canonical primary button, one treatment across every page (Pat,
   2026-08-26): the same translucent light-grey glass as the top nav bar. */
.button.blue {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.055)
  );
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 30px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px);
}
.arrow-button {
  width: 56px;
  height: 56px;
  margin-left: -12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--blue-400),
    var(--blue-500) 60%,
    #1238d8
  );
  color: #fff;
  font-size: 22px;
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 14px 40px rgba(37, 99, 255, 0.4);
  transition: transform 180ms var(--ease-out);
}
.hero-lede {
  max-width: 340px;
  margin: 0;
  padding-left: 20px;
  border-left: 1px solid rgba(126, 137, 171, 0.28);
  color: var(--text-secondary);
  font-size: 15.5px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.mobile-label {
  display: none;
}
/* The live product card echoing the approved mock: a small
   product proof floating bottom-right in the hero, over the drape. */
.hero-icard {
  position: absolute;
  right: var(--hero-inset);
  bottom: clamp(32px, 6svh, 60px);
  z-index: 7;
  width: 312px;
  pointer-events: none;
}
.hero-icard .pane-label {
  letter-spacing: 0.08em;
  white-space: nowrap;
}
@media (max-width: 1199px) {
  .hero-icard {
    display: none;
  }
}
.proof-strip {
  background:
    radial-gradient(
      60% 150% at 50% 0%,
      rgba(201, 169, 97, 0.05),
      transparent 62%
    ),
    #00030f;
  padding: 22px 0;
  border-bottom: 1px solid var(--divider);
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.proof-grid span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 18px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(13, 22, 48, 0.6),
    rgba(7, 11, 21, 0.5)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
}
.proof-grid span:before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px rgba(201, 169, 97, 0.7);
}
.section,
.tagline-band {
  position: relative;
  padding-block: var(--section-pad);
  background: transparent;
}
.ethos.intro {
  background: radial-gradient(
    ellipse at 50% 0,
    rgba(37, 99, 255, 0.08),
    transparent 55%
  );
}
/* Dusk atmosphere: the sunset from the hero bleeds into the sections below,
   cooling into cobalt night as the page descends. */
.flagship {
  background:
    radial-gradient(
      48% 62% at 82% -2%,
      rgba(201, 169, 97, 0.11),
      transparent 60%
    ),
    radial-gradient(
      54% 74% at 10% 98%,
      rgba(37, 99, 255, 0.1),
      transparent 64%
    );
}
/* (Removed 2026-08-26: dead .tagline-band background that referenced
   url(venice-dusk.jpg). The .tagline-band section is not used by any current
   page; its Venice reference was a landmine, so the backdrop declaration is
   gone. Remaining .tagline-band rules are inert no-ops on an unused class.) */
/* Bottom gold hairline to bookend the band's top one, so the marquee line
   sits inside a gilded frame. */
.tagline-band:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 169, 97, 0.5) 30%,
    rgba(229, 197, 114, 0.65) 50%,
    rgba(201, 169, 97, 0.5) 70%,
    transparent
  );
  box-shadow: 0 0 14px rgba(201, 169, 97, 0.22);
}
.tagline-band h2 {
  position: relative;
  padding-bottom: 26px;
}
.tagline-band h2:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  box-shadow: 0 0 16px rgba(201, 169, 97, 0.5);
}
.tagline-band h2,
.tagline-band p {
  text-shadow: 0 2px 22px rgba(0, 3, 15, 0.8);
}
/* (Removed 2026-08-26: the dead .product-main/.about-main rules that still
   painted url(venice-bg-1600.webp) as an inner-page band. No page uses those
   classes since the one-screen rebuild; keeping them was the exact landmine
   that let a Venice photo linger on inner pages. Inner-page atmosphere now
   lives entirely in the .screen-bg system below.) */
.contact {
  background:
    radial-gradient(
      50% 60% at 50% 100%,
      rgba(18, 56, 216, 0.09),
      transparent 65%
    ),
    radial-gradient(
      38% 40% at 50% 8%,
      rgba(201, 169, 97, 0.06),
      transparent 62%
    );
}
#contact,
#ethos {
  scroll-margin-top: 96px;
}
/* Gold hairline between sections: crisp 1px, faint halo, no casino glow. */
.wave:before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 169, 97, 0.5) 30%,
    rgba(229, 197, 114, 0.65) 50%,
    rgba(201, 169, 97, 0.5) 70%,
    transparent
  );
  box-shadow: 0 0 14px rgba(201, 169, 97, 0.22);
  opacity: 0.85;
}
.section-head {
  max-width: 850px;
  margin-bottom: 54px;
}
.section-head.centered {
  text-align: center;
  margin-inline: auto;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  color: var(--lum);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.eyebrow:before {
  content: "";
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.04em;
}
/* Gold is the human/craft accent (the emphasized words are always the human
   ones: "feels", "floor", "matters"); cobalt stays the product/tech accent
   (buttons, the live card, the product "work"). The duality is the brand. */
h2 em,
.about-main h1 em {
  color: var(--gold-bright);
  font-style: normal;
  text-shadow: 0 0 34px rgba(201, 169, 97, 0.22);
}
.about-main {
  padding-top: 76px;
}
.about-main .ethos.intro {
  padding-top: clamp(72px, 10vw, 132px);
}
.about-main h1 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.lede {
  max-width: 720px;
  margin: 22px 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-lede);
  font-weight: 500;
  line-height: 1.58;
  letter-spacing: -0.012em;
}
.prose {
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.72;
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 6vw, 80px);
}
.principle {
  padding-left: 20px;
  border-left: 2px solid var(--gold);
}
.split-feature {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(40px, 8vw, 110px);
  align-items: center;
}
blockquote {
  position: relative;
  margin: 0;
  padding: 38px 34px 34px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(
      120% 90% at 88% 4%,
      rgba(201, 169, 97, 0.14),
      transparent 58%
    ),
    linear-gradient(180deg, rgba(13, 22, 48, 0.72), rgba(7, 11, 21, 0.62));
  border: 1px solid rgba(201, 169, 97, 0.28);
  box-shadow:
    var(--shadow-card),
    inset 0 1px 0 rgba(229, 197, 114, 0.14);
  backdrop-filter: blur(24px);
}
/* Illuminated capital: an oversized gilt quotation mark bleeding out of the
   top-left, the way a manuscript opens a passage. */
blockquote:before {
  content: "\201C";
  position: absolute;
  top: 4px;
  left: 22px;
  font-size: 92px;
  line-height: 1;
  color: rgba(201, 169, 97, 0.26);
  font-family: Georgia, "Times New Roman", serif;
  pointer-events: none;
}
blockquote p {
  position: relative;
  margin: 0 0 18px;
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.03em;
}
blockquote cite {
  color: var(--gold);
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.flow {
  list-style: none;
  margin: 50px 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  counter-reset: flow;
}
.flow li {
  position: relative;
  padding: 28px 20px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    180deg,
    rgba(13, 22, 48, 0.72),
    rgba(7, 11, 21, 0.62)
  );
  box-shadow:
    var(--shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  font-weight: 600;
}
.flow li:before {
  counter-increment: flow;
  content: "0" counter(flow);
  display: block;
  margin-bottom: 35px;
  color: var(--blue-300);
  font-size: 12px;
  letter-spacing: 0.18em;
}
.flow li:not(:last-child):after {
  content: "→";
  position: absolute;
  right: -13px;
  top: 50%;
  z-index: 2;
  color: var(--blue-300);
}
/* The approval step is the whole point: a person, not the tool, decides what
   ships. Gild it so the eye lands on the human gate, not four equal tiles. */
.flow li.key {
  border-color: rgba(201, 169, 97, 0.42);
  box-shadow:
    var(--shadow-soft),
    inset 0 1px 0 rgba(229, 197, 114, 0.2);
}
.flow li.key:before {
  color: var(--gold-bright);
}
.savings-home {
  padding-block: clamp(24px, 4vw, 54px);
}
.side-lines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.side-lines p {
  padding: 20px;
  margin: 0;
  color: var(--text-secondary);
  text-align: center;
}
.side-lines p + p {
  border-left: 1px solid var(--divider);
}
.tagline-band {
  text-align: center;
}
.tagline-band h2 {
  max-width: 900px;
  margin: auto;
}
.tagline-band p {
  color: var(--text-secondary);
  font-size: 18px;
}
.feature-card {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  padding: clamp(24px, 4vw, 52px);
  border-radius: 26px;
  background: linear-gradient(
    180deg,
    rgba(13, 22, 48, 0.72),
    rgba(7, 11, 21, 0.62)
  );
  border: 1px solid var(--border-medium);
  box-shadow:
    var(--shadow-card),
    inset 0 1px 0 rgba(229, 197, 114, 0.1);
  backdrop-filter: blur(24px);
}
.button-row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 30px;
}
.text-link {
  color: var(--text-secondary);
  text-underline-offset: 5px;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.person-card,
.dev-card {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.5vw, 34px);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    180deg,
    rgba(13, 22, 48, 0.72),
    rgba(7, 11, 21, 0.62)
  );
  border: 1px solid var(--border-soft);
  box-shadow:
    var(--shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform 220ms var(--ease-out),
    border-color 220ms var(--ease-out);
}
.card-kicker {
  color: var(--blue-300);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.person-card h3,
.dev-card h3 {
  margin: 14px 0 8px;
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.025em;
}
.person-card p:not(.card-kicker),
.dev-card p {
  color: var(--text-muted);
}
.person-card a {
  margin-top: auto;
  color: var(--text-secondary);
  font-size: 14px;
}
.section-alt {
  display: inline-block;
  margin-top: 22px;
}
.contact-card {
  max-width: 560px;
  margin: auto;
  padding: clamp(22px, 4vw, 38px);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    180deg,
    rgba(13, 22, 48, 0.72),
    rgba(7, 11, 21, 0.62)
  );
  border: 1px solid var(--border-medium);
  box-shadow:
    var(--shadow-card),
    inset 0 1px 0 rgba(229, 197, 114, 0.1);
  backdrop-filter: blur(24px);
}
.form-intro {
  margin-top: 0;
  color: var(--text-secondary);
}
.field {
  margin: 18px 0;
}
.field label {
  display: block;
  margin-bottom: 7px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: rgba(5, 9, 24, 0.6);
  color: var(--text-primary);
  transition:
    border-color 150ms var(--ease-out),
    box-shadow 150ms var(--ease-out);
}
.field textarea {
  resize: vertical;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(37, 99, 255, 0.18);
  outline: 0;
}
.field.invalid input,
.field.invalid textarea {
  border-color: var(--amber);
}
.hp {
  position: absolute;
  left: -9999px;
}
.form-note,
.form-error,
.form-success p {
  color: var(--text-muted);
  font-size: 14px;
}
.form-error {
  color: var(--amber);
}
.form-success {
  text-align: center;
}
.form-success h3 {
  font-size: var(--fs-h4);
}
.success-mark {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(63, 181, 133, 0.14);
  color: var(--green-bright);
  font-size: 26px;
}
.site-footer {
  position: relative;
  background: linear-gradient(180deg, #010516, #00030f);
  border-top: 1px solid var(--divider);
  padding: 48px 0 64px;
}
.site-footer:before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22%;
  right: 22%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 169, 97, 0.45),
    transparent
  );
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.footer-inner nav {
  display: flex;
  gap: 22px;
}
.footer-inner nav a {
  display: inline-block;
  padding: 5px 0;
  color: var(--text-secondary);
  font-size: 14px;
}
.footer-inner p {
  grid-column: 1/-1;
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}
.products-page {
  background:
    var(--grain) repeat,
    radial-gradient(
      120% 80% at 70% -10%,
      rgba(37, 99, 255, 0.14),
      transparent 46%
    ),
    radial-gradient(
      50% 34% at 12% 4%,
      rgba(201, 169, 97, 0.07),
      transparent 66%
    ),
    linear-gradient(180deg, #050b1e 0%, #03081a 44%, #01040f 100%);
}
.product-main {
  padding-top: calc(76px + clamp(44px, 7vw, 66px));
}
.product-head {
  max-width: 760px;
}
.product-head h1 {
  margin: 0;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
}
.accent {
  background: linear-gradient(180deg, var(--blue-200), var(--blue-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.product-feature {
  margin-top: 54px;
  padding: clamp(22px, 3vw, 34px);
}
.flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: pulse 2s ease-in-out infinite;
}
.product-copy h2 {
  font-size: 34px;
}
.product-copy > p {
  color: var(--text-secondary);
}
.points {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 11px;
}
.points li {
  display: flex;
  gap: 11px;
  color: var(--text-secondary);
}
.points b {
  color: var(--text-primary);
}
.check {
  color: var(--blue-300);
}
.icard {
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(
    180deg,
    rgba(13, 22, 48, 0.82),
    rgba(7, 11, 21, 0.72)
  );
  border: 1px solid rgba(126, 137, 171, 0.22);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(22px);
}
.icard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.icard-foot {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(126, 137, 171, 0.16);
  color: var(--text-muted);
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.hero-icard .icard-foot {
  margin-top: 13px;
  padding-top: 11px;
  font-size: 11.5px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(63, 181, 133, 0.12);
  border: 1px solid rgba(63, 181, 133, 0.28);
  color: var(--green-bright);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.before-after {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 14px;
}
.pane {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(126, 137, 171, 0.16);
}
.pane.source {
  background: rgba(248, 120, 80, 0.06);
  border-color: rgba(248, 120, 80, 0.22);
}
.pane.output {
  background: rgba(37, 99, 255, 0.08);
  border-color: rgba(37, 99, 255, 0.3);
}
.pane-label {
  margin-bottom: 11px;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.source .pane-label {
  color: #f8a07e;
}
.output .pane-label {
  color: var(--blue-300);
}
.bar {
  height: 6px;
  margin-bottom: 8px;
  border-radius: 3px;
  background: rgba(104, 160, 255, 0.75);
}
.source .bar {
  background: rgba(248, 120, 80, 0.5);
}
.source .bar:nth-child(3) {
  width: 54%;
  margin-left: 14%;
}
.source .bar:nth-child(4) {
  width: 70%;
}
.mid {
  display: flex;
  align-items: center;
  color: var(--blue-300);
}
.math-section {
  padding-top: 90px;
}
.math-section h3,
.development > h2 {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.products-page .product-head .lede {
  max-width: 620px;
}
.math-table {
  margin-top: 34px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(13, 22, 48, 0.55),
    rgba(7, 11, 21, 0.45)
  );
  box-shadow:
    var(--shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.math-row {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
}
.math-row > * {
  padding: 18px;
  border-bottom: 1px solid var(--divider);
}
.math-row > * + * {
  border-left: 1px solid var(--divider);
}
.math-row:last-child > * {
  border-bottom: 0;
}
.math-row.header {
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
}
.math-row span:not(:first-child) {
  font-variant-numeric: tabular-nums;
}
/* The one marquee moment on the page: gold, not blue. */
.savings-band {
  display: grid;
  grid-template-columns: 0.5fr 0.8fr 2fr;
  gap: 24px;
  align-items: center;
  margin-top: 22px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(
      180deg,
      rgba(201, 169, 97, 0.11),
      rgba(201, 169, 97, 0.04)
    ),
    linear-gradient(180deg, rgba(13, 22, 48, 0.72), rgba(7, 11, 21, 0.62));
  border: 1px solid rgba(201, 169, 97, 0.32);
  box-shadow:
    var(--shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.savings-number {
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.savings-label {
  color: var(--gold-bright);
  font-weight: 600;
}
.method {
  color: var(--text-muted);
  font-size: 12px;
}
.development {
  padding-top: 90px;
}
.dev-grid {
  grid-template-columns: 1fr;
  max-width: 420px;
  margin: 0 auto;
}
.dev-card {
  text-decoration: none;
}
.soon {
  align-self: flex-start;
  margin-top: auto;
  padding: 4px 10px;
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html.js [data-reveal],
html.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 650ms var(--ease-emphasis),
    transform 650ms var(--ease-emphasis);
}
html.js [data-reveal].in,
html.js [data-reveal-group].in > * {
  opacity: 1;
  transform: none;
}
html.js [data-reveal-group].in > *:nth-child(2) {
  transition-delay: 60ms;
}
html.js [data-reveal-group].in > *:nth-child(3) {
  transition-delay: 120ms;
}
html.js [data-reveal-group].in > *:nth-child(4) {
  transition-delay: 180ms;
}
@keyframes pulse {
  50% {
    opacity: 0.55;
    transform: scale(0.86);
  }
}
@media (hover: hover) and (pointer: fine) {
  .button:hover,
  .header-cta:hover,
  .compact-nav:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
    filter: brightness(1.06);
  }
  .arrow-button:hover {
    transform: translate(1px, -1px);
  }
  .person-card:hover,
  .dev-card:hover {
    transform: translateY(-3px);
    border-color: var(--hairline-blue);
  }
}
.button:active,
.header-cta:active,
.compact-nav:active,
.arrow-button:active,
.nav-pill a:active,
.text-link:active,
.dev-card:active {
  transform: scale(0.97);
  transition: transform 160ms var(--ease-out);
}
@media (max-width: 400px) {
  .compact-nav {
    padding: 10px 13px;
    font-size: 12px;
  }
}
@media (max-width: 1199px) {
  .hero-lede {
    display: none;
  }
}
/* Keep the full nav pill through tablet widths (it fits comfortably to ~700px);
   only collapse to peer links on smaller screens so no destination is lost. */
@media (max-width: 700px) {
  .header-inner {
    grid-template-columns: 1fr auto;
  }
  .nav-pill {
    display: none;
  }
  .header-cta {
    display: inline-flex;
  }
  .compact-nav {
    display: inline-flex;
    font-size: 13px;
  }
  .proof-grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* On the smallest phones the peer text-links would crowd the CTA, so drop
   them and let the always-present CTA plus the footer nav carry it. */
@media (max-width: 559px) {
  .compact-nav {
    display: none;
  }
}
@media (max-width: 920px) {
  .product-feature,
  .feature-card {
    grid-template-columns: 1fr;
  }
  .card-grid {
    grid-template-columns: 1fr;
  }
  .dev-grid {
    grid-template-columns: 1fr;
  }
  .savings-band {
    grid-template-columns: 1fr;
  }
  .math-row {
    grid-template-columns: 1.2fr repeat(3, 1fr);
  }
}
@media (max-width: 860px) {
  .site-header {
    position: absolute;
  }
  .wordmark {
    font-size: 13px;
  }
  .hero {
    height: auto;
    min-height: 100dvh;
  }
  .hero-bg img {
    object-position: 50% 0;
    transform: none;
  }
  .hero-video {
    display: block;
  }
  .hero-scrim {
    z-index: 2;
    background: linear-gradient(
      180deg,
      rgba(0, 3, 15, 0.14) 0%,
      rgba(0, 3, 15, 0) 24%,
      rgba(0, 3, 15, 0) 42%,
      rgba(0, 3, 15, 0.55) 60%,
      rgba(0, 3, 15, 0.86) 76%,
      #00030f 92%
    );
  }
  .hero:before,
  .hero:after,
  .bust-wrap,
  .hero-bloom {
    display: none;
  }
  .hero-bottom {
    left: 24px;
    right: 24px;
    bottom: calc(26px + env(safe-area-inset-bottom));
    top: auto;
  }
  .mobile-title {
    display: block;
    position: static;
    transform: none;
    margin: 0;
    font-size: var(--fs-hero-m);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.04em;
    white-space: nowrap;
    background: linear-gradient(180deg, #eef4ff, rgba(160, 186, 244, 0.74) 96%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
  }
  .mobile-title .ai {
    background: linear-gradient(180deg, var(--blue-200), var(--blue-500));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .hero-lede {
    display: block;
    position: static;
    order: -1;
    flex-basis: 100%;
    max-width: 33em;
    margin: 16px 0 6px;
    padding-left: 16px;
    font-size: 14.5px;
  }
  .hero-ctas {
    position: static;
    margin-top: 0;
    flex-wrap: wrap;
    gap: 12px;
  }
  .hero-ctas .button {
    padding: 15px 26px;
  }
  .arrow-button {
    width: 52px;
    height: 52px;
    margin-left: -6px;
  }
  .hero-stats {
    position: static;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(126, 137, 171, 0.18);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: none;
  }
  .stat .num {
    font-size: var(--fs-stat-m);
  }
  .stat .label {
    margin-top: 8px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .desktop-label {
    display: none;
  }
  .mobile-label {
    display: inline;
  }
  .two-col,
  .split-feature {
    grid-template-columns: 1fr;
  }
  .flow {
    grid-template-columns: 1fr;
  }
  .flow li:not(:last-child):after {
    content: "↓";
    right: 24px;
    top: auto;
    bottom: -18px;
  }
  .side-lines {
    grid-template-columns: 1fr;
  }
  .side-lines p + p {
    border-left: 0;
    border-top: 1px solid var(--divider);
  }
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .footer-inner nav {
    flex-wrap: wrap;
  }
}
@media (max-width: 640px) {
  .footer-inner {
    text-align: center;
  }
  .footer-inner nav {
    justify-content: center;
  }
  .footer-inner .wordmark {
    margin: auto;
  }
  .math-table {
    overflow-x: auto;
  }
  .math-row {
    min-width: 680px;
  }
  /* Freeze the row-label column so the metric it describes stays on screen
     while the By hand / With the tool / Delta values scroll horizontally. */
  .math-row > *:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #0a1430;
  }
  .before-after {
    gap: 7px;
  }
  .pane {
    padding: 10px;
  }
  .proof-grid {
    grid-template-columns: 1fr;
  }
  .product-main {
    padding-top: 120px;
  }
}
@media (max-width: 480px) {
  .header-actions .signin {
    display: none;
  }
  .wordmark img {
    height: 25px;
  }
  .hero-bottom {
    left: 20px;
    right: 20px;
  }
  .hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }
  .stat .num {
    font-size: clamp(22px, 7vw, 28px);
  }
  .stat .label {
    font-size: 9px;
  }
  .button-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .product-copy h2 {
    font-size: 28px;
  }
}
@media (max-width: 339px) {
  .hero-stats {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .bust,
  .hero-bg img {
    transform: none !important;
    animation: none !important;
  }
  .hero-bg-video {
    display: none !important;
  }
  .dot {
    animation: none;
  }
  html.js [data-reveal],
  html.js [data-reveal-group] > * {
    transform: none;
    transition: opacity 200ms var(--ease-out);
  }
}
/* ======================================================================
   LANDING OVERHAUL (2026-08-25): single-screen hero, da Vinci statement,
   frosted top-right action pill, living head-turn bust.
   ====================================================================== */

/* The landing is one screen with no scroll and no footer. */
.landing,
.landing body {
  overflow: hidden;
}
.landing #main {
  min-height: 100svh;
}

/* Top-right actions harmonized with the center nav pill: a matching frosted
   grey glass group, so Sign in / Get in touch stop reading as a stark white
   button floating over the imagery. */
.action-pill {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(9, 14, 30, 0.5),
    rgba(5, 9, 20, 0.4)
  );
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px) saturate(118%);
}
.action-pill .signin {
  padding: 9px 15px;
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 3, 15, 0.72);
  transition:
    background 160ms var(--ease-out),
    color 160ms var(--ease-out);
}
.action-pill .header-cta {
  white-space: nowrap;
  transition:
    background 160ms var(--ease-out),
    box-shadow 160ms var(--ease-out),
    filter 160ms var(--ease-out);
}
/* A restrained action segment: clearly the button, but a soft translucent
   fill rather than the old stark-white slab that fought the imagery. */
.action-pill .header-cta {
  padding: 9px 18px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.13),
    rgba(255, 255, 255, 0.05)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
@media (hover: hover) and (pointer: fine) {
  .action-pill .signin:hover {
    color: var(--text-primary);
  }
  .action-pill .header-cta:hover {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.1)
    );
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}

/* Living head-turn bust: transparent VP9-alpha video sized like the old still,
   sitting above the ghost wordmark so the silhouette reveals and occludes the
   letters as David turns. Poster (a matted frame) covers no-webm / reduced
   motion, so Safari and reduced-motion users see the resting statue. */
.bust-video {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
  object-position: bottom center;
}
/* The head-turn video is cropped tight to the statue, so it is right-anchored
   (not centered like the old wide still), sitting over the right half of the
   ghost wordmark. Tuned against the live render. */
.landing .bust-wrap {
  left: auto;
  right: clamp(-40px, 0.5vw, 24px);
  transform: none;
  height: min(88svh, 96%);
  max-height: 1080px;
  bottom: 0;
}
.landing .bust-wrap .bust-video {
  object-position: bottom right;
}

/* The da Vinci statement: the human message, lower-left, where the mock's
   stats sat. Pronounced, calm, one primary action. */
.hero-statement {
  position: absolute;
  left: var(--hero-inset);
  bottom: clamp(46px, 10svh, 104px);
  z-index: 7;
  max-width: min(50%, 640px);
}
.hero-quote {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(31px, 4.4vw, 60px);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  text-shadow: 0 2px 34px rgba(0, 3, 15, 0.7);
  text-wrap: balance;
}
.hero-quote em {
  color: var(--gold-bright);
  font-style: normal;
  text-shadow: 0 0 40px rgba(201, 169, 97, 0.3);
}
.hero-attr {
  position: relative;
  margin: 18px 0 0;
  padding-left: 46px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.hero-attr:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.hero-sub {
  margin: 22px 0 32px;
  max-width: 33em;
  color: var(--text-secondary);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.56;
  letter-spacing: -0.005em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.62);
}
.hero-statement .hero-ctas {
  position: static;
  left: auto;
  bottom: auto;
  margin: 0;
}

@media (max-width: 1199px) {
  .hero-statement {
    max-width: min(64%, 560px);
  }
}
@media (max-width: 860px) {
  .landing,
  .landing body {
    overflow: auto;
  }
  .hero-statement {
    left: 24px;
    right: 24px;
    bottom: calc(30px + env(safe-area-inset-bottom));
    max-width: none;
  }
  .hero-quote {
    max-width: 18ch;
    font-size: clamp(30px, 8.6vw, 46px);
  }
  /* The ghost wordmark is designed to sit BEHIND the David and be revealed
     through his alpha-transparent silhouette (see the desktop z-index note
     above .hero-bottom). On mobile the hero is a single baked, opaque video
     with David already painted into it, so there is no transparency for the
     ghost text to show through: it was drawing flat across his face and hair
     instead. No correct occlusion is possible against baked footage, so it
     is hidden here rather than faked. */
  .landing .ghost {
    opacity: 0;
  }
}
/* On tablet the full nav pill and the action pill share the bar, so the
   secondary Sign in link steps aside (still on desktop and in the footer)
   leaving room for the primary Get in touch action. */
@media (max-width: 860px) {
  .action-pill .signin {
    display: none;
  }
  .action-pill {
    padding: 4px;
  }
}

/* ======================================================================
   PRODUCTS OVERHAUL (2026-08-25): stat band, animated product demo,
   trust grid, page CTA.
   ====================================================================== */
.stat-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: clamp(40px, 5vw, 64px);
}
.stat-tile {
  position: relative;
  padding: 26px 28px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    180deg,
    rgba(13, 22, 48, 0.72),
    rgba(7, 11, 21, 0.62)
  );
  border: 1px solid var(--border-medium);
  box-shadow:
    var(--shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.stat-tile:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--blue-400), transparent);
}
.stat-tile:last-child:before {
  background: linear-gradient(180deg, var(--gold-bright), transparent);
}
.stat-num {
  font-size: clamp(36px, 4.6vw, 58px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-num span {
  color: var(--blue-300);
}
.stat-tile:last-child .stat-num span {
  color: var(--gold-bright);
}
.stat-cap {
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.demo-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-top: clamp(64px, 8vw, 110px);
}
.demo-copy h2 {
  margin: 12px 0 18px;
  font-size: clamp(30px, 3.6vw, 46px);
}
.demo-copy > p {
  color: var(--text-secondary);
  max-width: 46ch;
  margin: 0 0 22px;
}
.demo-card {
  padding: 24px;
  border-radius: 22px;
  background: linear-gradient(
    180deg,
    rgba(13, 22, 48, 0.85),
    rgba(7, 11, 21, 0.74)
  );
  border: 1px solid rgba(126, 137, 171, 0.22);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(22px);
}
.demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.demo-title {
  font-weight: 600;
  font-size: 14px;
}
.demo-step {
  position: relative;
  display: inline-grid;
  min-width: 96px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(37, 99, 255, 0.12);
  border: 1px solid rgba(37, 99, 255, 0.3);
  color: var(--blue-300);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}
/* The chip cycles through the three phases in sync with the 6s demo loop. */
.demo-step .ds {
  grid-area: 1 / 1;
  opacity: 0;
  animation: demoStep 6s steps(1, end) infinite;
}
.demo-step .ds2 {
  animation-delay: 2s;
}
.demo-step .ds3 {
  animation-delay: 4s;
  color: var(--green-bright);
}
@keyframes demoStep {
  0%,
  33.3% {
    opacity: 1;
  }
  33.4%,
  100% {
    opacity: 0;
  }
}
/* The source file being read: a named messy workbook, warm/red like every
   "by hand" surface in the brand's comparison language. */
.demo-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(248, 120, 80, 0.22);
  background: rgba(248, 120, 80, 0.06);
}
.demo-file-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #f8a07e;
  letter-spacing: 0.01em;
}
.demo-file-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* The transformation itself: messy field on the left, the normalized
   finished value resolving in on the right. This is what the tool does. */
.demo-maps {
  display: grid;
  gap: 7px;
}
.demo-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.demo-map-head span:first-child {
  color: #f8a07e;
}
.demo-map-head span:last-child {
  color: var(--blue-300);
}
.dm {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(126, 137, 171, 0.12);
  background: rgba(13, 22, 48, 0.42);
}
.dm-src {
  font-size: 12.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.dm-arrow {
  color: var(--blue-300);
  font-size: 13px;
}
.dm-out {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  opacity: 0;
  animation: demoReveal 6s var(--ease-emphasis) infinite;
}
.dm:nth-child(3) .dm-out {
  animation-delay: 0.14s;
}
.dm:nth-child(4) .dm-out {
  animation-delay: 0.28s;
}
.dm:nth-child(5) .dm-out {
  animation-delay: 0.42s;
}
/* The one field the tool cannot resolve alone: it flags it amber and waits for
   the human, which is the whole point of the product. */
.dm.dm-flagged {
  border-color: rgba(248, 184, 78, 0.34);
  background: rgba(248, 184, 78, 0.07);
}
.dm.dm-flagged .dm-arrow,
.dm.dm-flagged .dm-out {
  color: var(--amber);
}
@keyframes demoReveal {
  0%,
  32% {
    opacity: 0;
    transform: translateX(7px);
  }
  48%,
  100% {
    opacity: 1;
    transform: none;
  }
}
.demo-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(126, 137, 171, 0.16);
  color: var(--text-muted);
  font-size: 12.5px;
}
.demo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 10px rgba(63, 181, 133, 0.7);
  animation: demoPulse 6s var(--ease-out) infinite;
}
@keyframes demoFill {
  0%,
  8% {
    width: 0;
    opacity: 0.4;
  }
  46%,
  92% {
    width: 100%;
    opacity: 1;
  }
  100% {
    width: 0;
    opacity: 0.4;
  }
}
@keyframes demoSourcePulse {
  0%,
  40% {
    opacity: 1;
  }
  70%,
  100% {
    opacity: 0.4;
  }
}
@keyframes demoPulse {
  0%,
  40% {
    opacity: 0.4;
    transform: scale(0.85);
  }
  55%,
  92% {
    opacity: 1;
    transform: scale(1);
  }
}

.trust-section {
  padding-top: clamp(64px, 8vw, 100px);
}
.trust-section h3 {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.025em;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 34px;
}
.trust-card {
  padding: 24px 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    180deg,
    rgba(13, 22, 48, 0.6),
    rgba(7, 11, 21, 0.5)
  );
  border: 1px solid var(--border-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.trust-card.key {
  border-color: rgba(201, 169, 97, 0.4);
  box-shadow: inset 0 1px 0 rgba(229, 197, 114, 0.18);
}
.trust-card h4 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.trust-card.key h4 {
  color: var(--gold-bright);
}
.trust-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.page-cta {
  margin-top: clamp(64px, 8vw, 110px);
  text-align: center;
}
.page-cta h2 {
  max-width: 20ch;
  margin: 0 auto;
}
.page-cta .lede {
  margin-inline: auto;
  text-align: center;
}
.page-cta .button-row,
.centered-row {
  justify-content: center;
  margin-top: 30px;
}

@media (max-width: 920px) {
  .stat-band {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .demo-section {
    grid-template-columns: 1fr;
  }
  .trust-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .stat-band {
    grid-template-columns: 1fr;
  }
  .trust-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .demo-dot,
  .demo-step .ds,
  .dm-out {
    animation: none;
  }
  .dm-out {
    opacity: 1;
  }
  .demo-step .ds3 {
    opacity: 1;
  }
}

html {
  scrollbar-color: rgba(126, 137, 171, 0.32) #00030f;
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #00030f;
}
::-webkit-scrollbar-thumb {
  background: rgba(126, 137, 171, 0.28);
  border-radius: 5px;
  border: 2px solid #00030f;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(126, 137, 171, 0.45);
}
::-webkit-scrollbar-corner {
  background: #00030f;
}

/* Mobile menu (hamburger + overlay, injected by site.js) */
.nav-toggle {
  display: none;
}
.mobile-nav {
  display: none;
}
.mobile-nav nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-bottom: 10vh;
}
.mobile-nav a {
  padding: 13px 26px;
  color: var(--text-secondary);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.mobile-nav a.active {
  color: var(--text-primary);
}
.mobile-nav a.m-cta {
  margin-top: 22px;
  background: #f6f7ff;
  color: #050914;
  border-radius: 999px;
  padding: 15px 40px;
  font-size: 18px;
}
/* Menu top bar: wordmark left, close (X) right. */
.mobile-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--hero-inset) 8px;
}
.mobile-nav-brand img {
  display: block;
  height: 26px;
  width: auto;
}
.mobile-nav-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 15, 32, 0.4);
  color: var(--text-primary);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: border-color 180ms ease;
}
.mobile-nav-close:hover,
.mobile-nav-close:focus-visible {
  border-color: rgba(120, 166, 255, 0.55);
}
body.menu-open {
  overflow: hidden;
}
@media (max-width: 700px) {
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 42px;
    padding: 0 12px;
    margin-left: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: linear-gradient(
      180deg,
      rgba(10, 15, 32, 0.42),
      rgba(6, 10, 22, 0.32)
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
  }
  .header-actions .compact-nav {
    display: none !important;
  }
  .mobile-nav:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(24, 36, 74, 0.55), transparent 62%),
      rgba(0, 3, 15, 0.95);
    -webkit-backdrop-filter: blur(26px);
    backdrop-filter: blur(26px);
  }
}

/* ======================================================================
   ONE-SCREEN PAGES (2026-08-25): every inner page fits one viewport, no
   scroll, core content only. Shared scaffold + per-page layouts.
   ====================================================================== */
/* One screen on normal displays (content fits, so no scroll happens); on a
   short laptop it may scroll a little rather than clip. Horizontal is always
   locked. */
.one-screen {
  overflow-x: hidden;
}
.screen {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Bottom padding reserves room for the absolutely-positioned .screen-foot so
     vertically-centered content never centers down into the footer on short
     laptop heights. */
  padding: 84px var(--hero-inset) 78px;
  overflow: hidden;
}
.screen-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Shared "interior dusk": every inner page stands on the same atmosphere so
     they read as one premium world with the landing, not three unrelated
     templates. Warm gold light bleeds from the top-right (the Venice sunset,
     remembered) and cools to a cobalt night at the lower-left. No literal
     Venice photo is repeated (Pat, 2026-08-26). Per-page rules below only
     shift which glow leads. */
  background:
    var(--grain) repeat,
    radial-gradient(
      64% 52% at 84% -8%,
      rgba(201, 169, 97, 0.1),
      transparent 56%
    ),
    radial-gradient(
      58% 46% at 6% 106%,
      rgba(37, 99, 255, 0.12),
      transparent 60%
    ),
    linear-gradient(178deg, #050a1c 0%, #03071a 46%, #010410 100%);
}
/* A faint vignette on every inner page, matching the hero's, so the frame
   reads cinematic rather than flat. */
.screen:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 116% at 50% 42%,
    transparent 58%,
    rgba(0, 1, 7, 0.55) 100%
  );
}
.screen-inner {
  z-index: 1;
}
.screen-inner {
  position: relative;
  z-index: 1;
  width: min(100%, calc(var(--container) + 2 * clamp(20px, 4vw, 40px)));
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}
.screen-credit {
  position: absolute;
  left: var(--hero-inset);
  bottom: 20px;
  z-index: 1;
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}
/* A slim footer pinned to the floor of each one-screen page: a hairline, the
   legal mark, and quiet secondary nav. It gives the composition a resolved
   base instead of a headline floating in an empty lower third, and carries the
   legal mark consistently (Codex review, 2026-08-26). */
.screen-foot {
  position: absolute;
  left: var(--hero-inset);
  right: var(--hero-inset);
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--divider);
}
.foot-legal {
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.foot-nav {
  display: flex;
  gap: 24px;
}
.foot-nav a {
  color: var(--text-muted);
  font-size: 12.5px;
  text-decoration: none;
  transition: color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .foot-nav a:hover {
    color: var(--text-secondary);
  }
}
.screen-title {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(36px, 4.8vw, 66px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.screen-title em {
  color: var(--gold-bright);
  font-style: normal;
  text-shadow: 0 0 40px rgba(201, 169, 97, 0.28);
}
.screen-lede {
  max-width: 58ch;
  margin: 26px 0 0;
  color: var(--text-secondary);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.62;
}

/* Company: the human / heritage room. Warm gold leads (David is marble under
   sunset light), with a soft spotlight where the figure stands, so he reads
   cleanly on the shared atmosphere instead of muddying into a repeated photo. */
.company-screen .screen-bg {
  background:
    var(--grain) repeat,
    radial-gradient(
      58% 60% at 74% 44%,
      rgba(67, 127, 254, 0.08),
      transparent 60%
    ),
    radial-gradient(
      44% 46% at 86% 26%,
      rgba(212, 165, 55, 0.06),
      transparent 62%
    ),
    linear-gradient(180deg, #06090f 0%, #04070e 62%, #04070e 100%);
}
.company-screen .screen-inner {
  display: block;
}
.company-copy {
  position: relative;
  max-width: 588px;
}
.company-screen .screen-title {
  font-size: clamp(30px, 3.3vw, 50px);
}
.company-screen .screen-lede {
  margin-top: 16px;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.54;
}
/* Chiaroscuro hero: the brand's David-into-nebula art bled off the right edge,
   dissolving into the near-black ground on the left where the copy sits. The
   image already lives on a dark starfield, so its edges melt into the page. */
.company-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58%;
  max-width: 860px;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 24%,
    #000 46%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 24%,
    #000 46%
  );
}
.company-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 32% center;
}
/* A second, softer fade at the very bottom so the footer hairline reads over a
   calm ground, not the brightest nebula. */
.company-art:after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, #04070e);
}
.principles {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 560px;
}
/* Editorial, not a settings panel: a fine rule and clean type, no card chrome
   (Codex review, 2026-08-26). The one gold rule marks the human-approval line. */
.principles li {
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--border-strong);
  transition: border-color 200ms var(--ease-out);
}
.principles li:nth-child(2) {
  border-left-color: rgba(201, 169, 97, 0.65);
}
.principles strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.principles li:nth-child(2) strong {
  color: var(--gold-bright);
}
.principles span {
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.5;
}
.signature {
  margin: 30px 0 0;
  color: var(--text-secondary);
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 400;
  letter-spacing: 0;
}
.sig-ai {
  background: linear-gradient(180deg, var(--blue-200), var(--blue-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

/* Products, Company, and Contact share the same chiaroscuro ground (Pat likes
   the Company treatment best, 2026-08-26): near-black, a soft blue glow on the
   right behind the focal element, a whisper of gold up top. */
.product-screen .screen-bg,
.contact-screen .screen-bg {
  background:
    var(--grain) repeat,
    radial-gradient(
      58% 60% at 74% 44%,
      rgba(67, 127, 254, 0.08),
      transparent 60%
    ),
    radial-gradient(
      44% 46% at 86% 26%,
      rgba(212, 165, 55, 0.06),
      transparent 62%
    ),
    linear-gradient(180deg, #06090f 0%, #04070e 62%, #04070e 100%);
}
.product-screen .screen-inner {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.product-screen .screen-title {
  font-size: clamp(34px, 4vw, 56px);
}
.product-screen .screen-lede {
  margin-top: 20px;
  max-width: 46ch;
  font-size: 16px;
}
.pstats {
  display: flex;
  gap: clamp(22px, 3vw, 44px);
  margin: 28px 0 0;
}
.pstat .pnum {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pstat .pnum span {
  color: var(--blue-300);
}
.pstat:last-child .pnum span {
  color: var(--gold-bright);
}
.pstat .pcap {
  margin-top: 9px;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.trust-chips li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: linear-gradient(
    180deg,
    rgba(13, 22, 48, 0.6),
    rgba(7, 11, 21, 0.5)
  );
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
}
.trust-chips li:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 8px rgba(63, 181, 133, 0.6);
}
.product-screen .button-row {
  margin-top: 32px;
}
.product-screen .demo-card {
  margin: 0;
}

/* Contact shares the Company chiaroscuro ground (see the combined
   .product-screen/.contact-screen .screen-bg rule above). */
.contact-screen .screen-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.contact-screen .screen-lede {
  margin-top: 20px;
  max-width: 34ch;
}
.contact-email {
  display: inline-block;
  margin-top: 24px;
  color: var(--text-secondary);
  font-size: 17px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(104, 160, 255, 0.5);
  text-underline-offset: 5px;
  transition: color 160ms var(--ease-out);
}
.contact-screen .contact-card {
  margin: 0;
  max-width: none;
  width: 100%;
  /* Lift the panel off the dark room: a more opaque glass fill, a cool top
     edge and a deep shadow, so it reads as a deliberate surface, not a faint
     outline lost in the navy. */
  background: linear-gradient(
    180deg,
    rgba(16, 26, 54, 0.86),
    rgba(8, 13, 26, 0.78)
  );
  border: 1px solid rgba(126, 137, 171, 0.26);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.contact-screen .contact-card:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(104, 160, 255, 0.4),
    transparent
  );
}
.contact-screen .contact-card {
  position: relative;
  overflow: hidden;
}
.contact-screen .field {
  margin: 14px 0;
}
.contact-screen .field input,
.contact-screen .field textarea {
  background: rgba(3, 6, 18, 0.66);
  border-color: rgba(126, 137, 171, 0.28);
}
.contact-screen .field {
  margin: 12px 0;
}
.form-lead {
  margin: 0 0 6px;
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.5;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-faint);
}
.form-submit {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.form-submit .form-note {
  flex: 1;
  min-width: 160px;
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

/* --- Hover: every interactive element reflects the pointer clearly. --- */
@media (hover: hover) and (pointer: fine) {
  .nav-pill a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
  }
  .action-pill .signin:hover {
    background: rgba(255, 255, 255, 0.16);
    color: var(--text-primary);
  }
  .button.light:hover {
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5);
  }
  .button.blue:hover {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.24),
      rgba(255, 255, 255, 0.1)
    );
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      0 14px 36px rgba(0, 0, 0, 0.38);
    transform: translateY(-1px);
  }
  .text-link:hover,
  .footer-inner nav a:hover,
  .contact-email:hover {
    color: var(--text-primary);
  }
  .trust-chips li:hover,
  .principles li:hover {
    border-color: var(--hairline-blue);
  }
}

@media (max-width: 900px) {
  .product-screen .screen-inner,
  .contact-screen .screen-inner,
  .company-screen .screen-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .principles {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 520px;
  }
  .product-screen .demo-stage {
    order: -1;
  }
  /* The bled nebula hero is a desktop flourish; on narrow screens the copy goes
     full width over the dark ground for legibility. */
  .company-art {
    display: none;
  }
  .company-copy {
    max-width: none;
  }
}
@media (max-width: 860px) {
  /* On phones the one-screen pages relax to natural height so nothing clips. */
  .one-screen {
    overflow: auto;
  }
  .screen {
    min-height: 100dvh;
    padding-top: 108px;
    justify-content: flex-start;
  }
  .screen-credit {
    position: static;
    margin-top: 30px;
  }
  .screen-foot {
    position: static;
    margin-top: 34px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .pstats {
    flex-wrap: wrap;
    gap: 20px;
  }
}