/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
/* Hallmark · theme: studied-DNA (source: spellbook.com + Parallax) · genre: modern-minimal · macrostructure: Marquee Hero · tone: calm institutional · anchor hue: institutional green */
/* ============================================
   Parallax — Premium Landing Page Styles
   Inspired by rogo.ai & harvey.ai
   ============================================ */

/* CSS Custom Properties */
:root {
  --color-paper-dark: oklch(13.8% 0.014 275);
  --color-paper-dark-2: oklch(17.2% 0.015 275);
  --color-paper-dark-3: oklch(21% 0.016 275);
  --color-paper-light: oklch(98.5% 0.006 275);
  --color-paper-light-2: oklch(96% 0.006 275);
  --color-paper-light-3: oklch(93.5% 0.006 275);
  --color-ink-dark: oklch(94.5% 0.006 275);
  --color-ink-light: oklch(18% 0.01 275);
  --color-muted-dark: oklch(73% 0.015 275);
  --color-muted-light: oklch(56% 0.015 275);
  --color-subtle-light: oklch(36% 0.013 275);
  --color-rule-dark: oklch(92% 0.006 275 / 0.08);
  --color-rule-dark-strong: oklch(92% 0.006 275 / 0.16);
  --color-rule-light: oklch(18% 0.01 275 / 0.08);
  --color-rule-light-strong: oklch(18% 0.01 275 / 0.16);
  --color-grid-line: oklch(18% 0.01 275 / 0.045);
  --color-grid-line-on-dark: oklch(90% 0.008 275 / 0.065);
  --color-grid-cell-hover: oklch(92.8% 0.004 275 / 0.68);
  --color-hero-category: oklch(88% 0.008 275);
  --color-problem-muted: oklch(76% 0.01 275);
  --color-accent: oklch(66% 0.14 272);
  --color-focus: oklch(76% 0.15 268);
  --color-danger: oklch(58% 0.2 28);
  --color-sage: #8ea58c;
  --color-moss: #738a6e;
  --color-product-surface: oklch(99.2% 0.004 275);
  --color-product-matte: oklch(91.5% 0.008 255);
  --bg-primary: var(--color-paper-dark);
  --bg-elevated: var(--color-paper-dark-2);
  --bg-card: var(--color-paper-dark-3);
  --border: var(--color-rule-dark);
  --border-hover: var(--color-rule-dark-strong);
  --text-primary: var(--color-ink-dark);
  --text-secondary: var(--color-muted-light);
  --text-muted: oklch(42% 0.014 275);
  --accent: var(--color-accent);
  --accent-glow: oklch(66% 0.14 272 / 0.12);
  --font-serif: 'Libre Baskerville', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-sans: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-hero-support: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --serif-display-weight: 400;
  --serif-display-tracking: -0.025em;
  --serif-display-leading: 1.05;
  --page-gutter: var(--site-page-gutter, clamp(1.375rem, 2.475vw, 2.75rem));
  --page-shell: calc(100vw - (2 * var(--page-gutter)));
  --section-heading-size: clamp(1.62rem, 2.38vw, 2.42rem);
  --section-heading-leading: 1.1025;
  --section-body-size: clamp(0.92rem, 0.95vw, 1rem);
  --section-body-width: 64ch;
  --section-rail-gap: clamp(3.75rem, 7vw, 7rem);
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-short: 200ms;
  --dur-medium: 300ms;
  --z-noise: 50;
  --z-nav: 200;
  --z-modal: 400;
}

/* Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: clip;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Noise Overlay */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../assets/images/noise.svg') repeat;
  opacity: 0.4;
  pointer-events: none;
  z-index: var(--z-noise);
  mix-blend-mode: overlay;
}

/* Selection */
::selection {
  background: oklch(94% 0.006 275 / 0.9);
  color: var(--color-ink-light);
}

.theme-light ::selection {
  background: oklch(18% 0.01 275 / 0.88);
  color: var(--color-paper-light);
}

.modal ::selection {
  background: oklch(18% 0.01 275 / 0.88);
  color: var(--color-paper-light);
}

/* ============================================
   Typography
   ============================================ */

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: var(--serif-display-weight);
  letter-spacing: var(--serif-display-tracking);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

button,
a,
input {
  -webkit-tap-highlight-color: transparent;
}

/* Inline SVG icons are vendored locally and inherit size and color here. */
.icon {
  width: auto;
  height: 1em;
  flex-shrink: 0;
  fill: currentColor;
}

.modal-close:focus-visible,
.form-submit:focus-visible,
.form-group input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}



/* ============================================
   Hero Section
   ============================================ */

.hero {
  min-height: clamp(520px, 62svh, 620px);
  display: flex;
  justify-content: center;
  align-items: stretch;
  text-align: left;
  padding: 6.5rem var(--page-gutter) 3rem;
  position: relative;
  overflow: hidden;
}

/* Background Image */
.hero-bg {
  position: absolute;
  top: 0;
  right: -18px;
  bottom: 0;
  left: -18px;
  z-index: 0;
  background: var(--color-paper-dark) url('../assets/images/hero-bg-2600.jpg') center top / cover no-repeat;
  animation: hero-image-settle 1100ms var(--ease-out) both;
}

/* Softens the exterior skyline without blurring the table or office foreground. */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/images/hero-bg-2600.jpg') center top / cover no-repeat;
  filter: blur(3px) saturate(0.9) contrast(0.96);
  opacity: 0.58;
  transform: scale(1.01);
  transform-origin: center top;
  pointer-events: none;
  clip-path: polygon(59% 0, 100% 0, 100% 52%, 67% 52%, 59% 43%);
  mask-image:
    linear-gradient(90deg, transparent 0%, transparent 56%, black 64%, black 100%),
    linear-gradient(180deg, black 0%, black 48%, transparent 60%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, transparent 56%, black 64%, black 100%),
    linear-gradient(180deg, black 0%, black 48%, transparent 60%);
  -webkit-mask-composite: source-in;
}

/* Dark overlay gradient */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(90deg,
      oklch(8.8% 0.017 255 / 0.62) 0%,
      oklch(10.5% 0.016 255 / 0.44) 38%,
      oklch(13.8% 0.014 275 / 0.32) 66%,
      oklch(14% 0.025 240 / 0.46) 100%),
    radial-gradient(circle at 70% 15%,
      oklch(72% 0.055 220 / 0.16) 0%,
      transparent 34%),
    linear-gradient(to bottom, 
      oklch(13.8% 0.014 275 / 0.34) 0%,
      oklch(13.8% 0.014 275 / 0.16) 40%,
      oklch(13.8% 0.014 275 / 0.18) 60%,
      oklch(13.8% 0.014 275 / 0.68) 100%);
}

.hero-headline {
  font-size: clamp(1.63rem, 2.85vw, 2.36rem);
  font-weight: var(--serif-display-weight);
  line-height: 1.03;
  letter-spacing: var(--serif-display-tracking);
  max-width: 760px;
  margin: 0;
  position: relative;
  z-index: 1;
  min-width: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
  text-shadow: 0 18px 48px oklch(0% 0 0 / 0.32);
}

.hero-headline__beat {
  display: block;
}

.hero-headline__beat--primary,
.hero-headline__beat--secondary {
  display: block;
}

.hero-headline__beat--secondary {
  margin-top: 0.26em;
}

.hero-headline__beat > span {
  display: inline-block;
  opacity: 0;
  filter: blur(7px);
  transform: translateY(0.32em);
  animation: hero-word-in 820ms var(--ease-out) forwards;
}

.hero-headline__beat--primary > span:nth-child(1) {
  animation-delay: 120ms;
}

.hero-headline__beat--primary > span:nth-child(2) {
  animation-delay: 150ms;
}

.hero-headline__beat--primary > span:nth-child(3) {
  animation-delay: 180ms;
}

.hero-headline__beat--primary > span:nth-child(4) {
  animation-delay: 210ms;
}

.hero-headline__beat--primary > span:nth-child(5) {
  animation-delay: 240ms;
}

.hero-headline__beat--secondary > span:nth-child(1) {
  animation-delay: 380ms;
}

.hero-headline__beat--secondary > span:nth-child(2) {
  animation-delay: 410ms;
}

.hero-headline__beat--secondary > span:nth-child(3) {
  animation-delay: 440ms;
}

.hero-headline__beat--secondary > span:nth-child(4) {
  animation-delay: 470ms;
}

.hero-headline__beat--secondary > span:nth-child(5) {
  animation-delay: 500ms;
}

.hero-headline .char {
  display: inline-block;
}

.hero-category,
.hero-sub {
  font-family: var(--font-sans);
  margin: 0;
}

.hero-category {
  width: fit-content;
  padding-left: 0;
  color: var(--color-hero-category);
  border-left: 0;
  font-size: clamp(0.88rem, 0.924vw, 0.99rem);
  font-weight: 500;
  line-height: 1.35;
  text-transform: none;
  text-wrap: balance;
}

.hero-sub {
  max-width: 58ch;
  color: oklch(90% 0.006 275 / 0.92);
  font-family: var(--font-hero-support);
  font-size: clamp(0.9rem, 1.02vw, 1.02rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-wrap: pretty;
  text-shadow: 0 12px 34px oklch(0% 0 0 / 0.36);
  animation: hero-support-in 720ms var(--ease-out) 620ms backwards;
}

.hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(160px, 1fr);
  gap: clamp(3rem, 6vw, 7rem);
  align-items: stretch;
  width: 100%;
}

.hero-copy {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  align-self: stretch;
  padding-top: clamp(2.25rem, 5svh, 3.5rem);
}

.hero-copy .hero-category {
  --hero-category-resting-y: -55%;
  grid-row: 2;
  align-self: end;
  margin-bottom: clamp(1rem, 1.5vw, 1.35rem);
  transform: translateY(var(--hero-category-resting-y));
  animation: hero-category-in 720ms var(--ease-out) 40ms backwards;
}

.hero-copy .hero-headline {
  grid-row: 3;
  align-self: start;
}

.hero-copy .hero-sub {
  grid-row: 4;
  margin-top: 1.15rem;
}

.hero-action-row {
  display: inline-flex;
  align-items: center;
  align-self: end;
  justify-self: end;
  gap: 1.15rem;
  position: relative;
  z-index: 1;
  animation: hero-cta-in 640ms var(--ease-out) 760ms backwards;
}

.btn-cta--dark {
  background: oklch(27% 0.01 275);
  border-color: oklch(92% 0.006 275 / 0.12);
  color: var(--color-paper-light);
}

.btn-cta--quiet {
  background: oklch(99% 0.004 275 / 0.92);
  border: 1px solid oklch(18% 0.01 275 / 0.12);
  color: var(--color-ink-light);
  box-shadow: none;
}

.btn-cta--quiet:hover {
  background: oklch(97.5% 0.006 275);
  border-color: oklch(18% 0.01 275 / 0.2);
  box-shadow: 0 7px 18px oklch(18% 0.01 275 / 0.06);
}

.btn-cta--dark:hover {
  opacity: 0.92;
  box-shadow: 0 8px 20px oklch(18% 0.01 275 / 0.09);
}

/* ============================================
   Theme: Light (middle sections)
   ============================================ */

.theme-light {
  background: var(--color-paper-light);
  color: var(--color-ink-light);
}

.theme-light .trust {
  background: var(--color-paper-light-2);
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.theme-light h2,
.theme-light h3,
.theme-light h4 {
  color: var(--color-ink-light);
}

.theme-light p {
  color: var(--color-ink-light);
  font-weight: 400;
}

.theme-light .proof-card {
  background: oklch(99% 0.004 275);
  border-color: var(--color-rule-light);
}

.theme-light .proof-card:hover {
  border-color: var(--color-rule-light-strong);
}

.theme-light .proof-card h4 {
  color: var(--color-ink-light);
}

.theme-light .proof-card p {
  color: var(--text-secondary);
}

.theme-light .proof-card p strong {
  color: var(--color-ink-light);
}

.theme-light .trust-principle h3 {
  color: var(--color-ink-light);
}

.theme-light .trust-principle p,
.theme-light .trust-heading p {
  color: var(--text-secondary);
}

.theme-light .btn-cta {
  background: var(--color-ink-light);
  border-color: var(--color-ink-light);
  color: var(--color-paper-light);
}

.theme-light .btn-cta:hover {
  opacity: 0.85;
}

.theme-light .btn-cta--dark {
  background: oklch(27% 0.01 275);
  color: var(--color-paper-light);
}

.theme-light .btn-cta--dark:hover {
  opacity: 0.92;
}

.theme-light .btn-cta--quiet {
  background: oklch(99% 0.004 275 / 0.92);
  border-color: oklch(18% 0.01 275 / 0.12);
  color: var(--color-ink-light);
}

.theme-light .btn-cta--quiet:hover {
  background: oklch(97.5% 0.006 275);
  border-color: oklch(18% 0.01 275 / 0.2);
  opacity: 1;
}

.theme-light .product-proof-section {
  border-top: none;
}

/* ============================================
   Section Base
   ============================================ */

.section {
  width: var(--page-shell);
  max-width: none;
  padding: 10rem 0;
  margin: 0 auto;
}

.section--full {
  width: 100%;
  max-width: none;
}

.section-reveal {
  opacity: 1;
  transform: none;
}

/* ============================================
   Problem Statement
   ============================================ */

.problem {
  position: relative;
  isolation: isolate;
  text-align: left;
  border-top: 0;
  padding-top: clamp(5rem, 6.5vw, 6.5rem);
  padding-bottom: clamp(5rem, 6.5vw, 6.5rem);
}

.problem::before,
.problem::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
}

.problem::before {
  z-index: 0;
  background-color: var(--color-paper-dark);
}

.problem::after {
  content: none;
}

.problem-grid {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  grid-auto-rows: calc(100vw / 16);
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.problem-grid span {
  border-right: 1px solid var(--color-grid-line-on-dark);
  border-bottom: 1px solid var(--color-grid-line-on-dark);
  background: transparent;
  transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}

.problem-grid span:hover {
  background: transparent;
  box-shadow: none;
}

.problem > :not(.problem-grid) {
  position: relative;
  z-index: 2;
}

.problem h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  max-width: 850px;
  margin: 0 auto 2rem;
  line-height: var(--section-heading-leading);
  font-weight: var(--serif-display-weight);
  letter-spacing: var(--serif-display-tracking);
  text-wrap: balance;
}

.problem h2,
.problem-copy {
  width: min(100%, 850px);
  margin-left: auto;
  margin-right: auto;
}

.problem-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(300px, 0.75fr) minmax(520px, 1.25fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "intro reasoning"
    "action reasoning";
  column-gap: clamp(3rem, 5.5vw, 5.5rem);
  row-gap: clamp(1.5rem, 2.5vw, 2.25rem);
  align-items: start;
}

.problem-intro {
  grid-area: intro;
  max-width: 620px;
}

.section-kicker {
  margin: 0 0 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted-light);
}

.problem-intro h2,
.product-proof-intro h2,
.trust h2 {
  font-size: var(--section-heading-size);
  line-height: var(--section-heading-leading);
  font-weight: var(--serif-display-weight);
  letter-spacing: var(--serif-display-tracking);
}

.problem-intro .problem-copy,
.product-proof-intro p,
.product-proof-copy p,
.trust-heading p {
  max-width: var(--section-body-width);
  font-size: var(--section-body-size);
  line-height: 1.68;
}

.problem-intro h2,
.problem-intro .problem-copy {
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

.problem-intro h2 {
  margin-bottom: 1.5rem;
}

.theme-light .problem h2,
.theme-light .problem h3 {
  color: var(--color-ink-dark);
}

.theme-light .problem p,
.theme-light .problem .problem-copy {
  color: var(--color-problem-muted);
}

.problem p {
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  color: var(--text-secondary);
  line-height: 1.75;
  font-weight: 400;
}

.problem-copy {
  text-align: left;
  color: var(--text-secondary);
  max-width: var(--section-body-width);
  font-size: var(--section-body-size);
  line-height: 1.68;
}

.problem-copy span:first-child {
  color: var(--color-muted-light);
}

.problem-copy strong {
  color: var(--color-subtle-light);
  font-weight: 700;
}

.reasoning-loss {
  grid-area: reasoning;
  justify-self: stretch;
  width: 100%;
  border-top: 0;
}

.loss-row {
  position: relative;
  z-index: 0;
  padding: clamp(0.95rem, 1.8vw, 1.35rem) 0;
  border-bottom: 1px solid var(--color-rule-dark);
  transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}

.reasoning-loss:hover .loss-row:not(:hover) {
  border-bottom-color: var(--color-rule-dark);
}

.loss-row:hover {
  border-bottom-color: var(--color-rule-dark-strong);
  transform: translateX(4px);
}

.loss-row h3 {
  margin: 0 0 0.34rem;
  font-family: var(--font-serif);
  font-size: clamp(0.9rem, 1.22vw, 1.15rem);
  font-weight: var(--serif-display-weight);
  line-height: var(--serif-display-leading);
  letter-spacing: var(--serif-display-tracking);
  color: var(--color-ink-dark);
  transition: color var(--dur-short) var(--ease-out);
}

.loss-row:hover h3 {
  color: var(--color-ink-dark);
}

.loss-row p {
  max-width: none;
  margin: 0;
  font-size: clamp(0.86rem, 0.9vw, 0.92rem);
  line-height: 1.58;
  color: var(--color-problem-muted);
  transition: color var(--dur-short) var(--ease-out);
}

.loss-row:hover p {
  color: var(--color-ink-dark);
}

.loss-row--last {
  border-bottom: 0;
}

.problem-action {
  display: flex;
  grid-area: action;
  align-self: end;
  align-items: center;
  justify-content: flex-start;
}

/* ============================================
   Problem Proof Cards
   ============================================ */

.problem .proof-grid {
  margin-top: 4rem;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
}

.proof-card {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: 1.25rem;
  align-content: start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  text-align: left;
  transition: border-color var(--dur-medium) var(--ease-out), transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}

.proof-card:nth-child(1),
.proof-card:nth-child(4) {
  grid-column: span 7;
}

.proof-card:nth-child(2),
.proof-card:nth-child(3) {
  grid-column: span 5;
}

@media (hover: hover) and (pointer: fine) {
  .proof-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
  }

  .trust-principle:hover .trust-icon {
    background: var(--color-paper-light);
    border-color: var(--color-rule-light-strong);
    color: var(--color-ink-light);
    transform: translateY(-2px);
  }
}

.proof-card h4 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: var(--serif-display-weight);
  letter-spacing: var(--serif-display-tracking);
  line-height: var(--serif-display-leading);
  margin-bottom: 1rem;
  color: var(--text-primary);
  text-align: left;
  grid-column: 2;
}

.card-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-size: 1.35rem;
  margin: 0.16rem 0 0;
  display: block;
  opacity: 0.58;
}

.theme-light .card-icon {
  color: var(--color-subtle-light);
  opacity: 0.58;
}

.proof-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  font-weight: 400;
  text-align: left;
  grid-column: 2;
}

/* ============================================
   Product Proof Sequence
   ============================================ */

.product-proof-section {
  overflow: clip;
  padding: clamp(4.75rem, 6vw, 6.5rem) 0 clamp(4.5rem, 5.5vw, 5.5rem);
  background: var(--color-paper-light);
}

.product-proof-shell {
  width: var(--page-shell);
  margin: 0 auto;
}

.product-proof-intro {
  width: min(100%, 920px);
  margin: 0 auto clamp(1rem, 2.5vw, 2rem);
  text-align: center;
}

.product-proof-intro h2 {
  max-width: 28ch;
  min-width: 0;
  margin: 0 auto;
  font-size: clamp(1.75rem, 2.9vw, 2.625rem);
  font-weight: var(--serif-display-weight);
  line-height: 1.22;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.product-proof-intro p,
.product-proof-copy p {
  color: var(--color-subtle-light);
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0;
}

.product-proof-intro p {
  max-width: none;
  margin: 1rem auto 0;
  font-size: clamp(0.92rem, 0.98vw, 1rem);
  line-height: 1.62;
}

.product-proof-list {
  display: grid;
}

.product-proof-row {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(300px, 0.92fr);
  align-items: center;
  gap: clamp(2.5rem, 4vw, 4.5rem);
  min-width: 0;
  padding: clamp(3.5rem, 4.5vw, 5.25rem) 0;
}

.product-proof-row--media-left {
  grid-template-areas: "media copy";
}

.product-proof-row--media-right {
  grid-template-areas: "copy media";
  grid-template-columns: minmax(300px, 0.92fr) minmax(0, 2.4fr);
}

.product-proof-copy {
  grid-area: copy;
  align-self: center;
  min-width: 0;
  max-width: 460px;
}

.product-proof-copy h3 {
  max-width: 20ch;
  min-width: 0;
  margin: 0;
  font-size: clamp(1.5rem, 2vw, 2.15rem);
  font-weight: var(--serif-display-weight);
  line-height: 1.12;
  letter-spacing: var(--serif-display-tracking);
  overflow-wrap: break-word;
}

.product-proof-copy p {
  max-width: 52ch;
  margin-top: var(--space-lg);
  font-size: clamp(0.95rem, 0.96vw, 1.02rem);
  line-height: 1.62;
}

.product-proof-media {
  --product-proof-aspect: 16 / 9;
  --product-proof-matte-block: clamp(var(--space-xl), 4vw, var(--space-2xl));
  --product-proof-matte-inline: clamp(var(--space-lg), 3vw, var(--space-xl));
  position: relative;
  grid-area: media;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  aspect-ratio: var(--product-proof-aspect);
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--color-product-matte);
  background-image: url('../assets/images/noise.svg');
  background-size: 200px 200px;
}

.product-proof-viewport {
  position: absolute;
  inset-block: var(--product-proof-matte-block) 0;
  z-index: 1;
  overflow: hidden;
  background: var(--color-product-surface);
}

.product-proof-row--media-left .product-proof-viewport {
  inset-inline: var(--product-proof-matte-inline) 0;
  border-start-start-radius: var(--radius-sm);
}

.product-proof-row--media-right .product-proof-viewport {
  inset-inline: 0 var(--product-proof-matte-inline);
  border-start-end-radius: var(--radius-sm);
}

.product-proof-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.product-proof-media--browser {
  --product-proof-aspect: 1.844;
}

.product-proof-media--browser img {
  /* The asset is already cropped to the app; keep its top edge visible. */
  height: auto;
  object-fit: initial;
}

.product-proof-media--framework img,
.product-proof-media--memo img {
  width: 104.3%;
  transform: translateX(-4.08%);
}

.trust {
  width: 100%;
  text-align: left;
  border-top: 0;
}

.trust-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.66fr) minmax(560px, 1fr);
  gap: var(--section-rail-gap);
  align-items: start;
  width: var(--page-shell);
  margin: 0 auto;
}

.trust-heading {
  max-width: var(--section-body-width);
  padding-top: clamp(2.4rem, 4.2vw, 4.5rem);
}

.trust h2 {
  margin-bottom: 1.4rem;
}

.trust-heading p {
  margin: 0;
  color: var(--color-muted-light);
  font-weight: 400;
}

.problem-intro .problem-copy,
.trust-heading p {
  color: var(--color-subtle-light);
  font-family: var(--font-sans);
  font-size: var(--section-body-size);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.68;
}

.problem-copy span:first-child {
  color: inherit;
}

.trust-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-self: stretch;
  width: 100%;
  border: 1px solid var(--color-rule-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(135deg, oklch(99% 0.004 275), oklch(96.8% 0.006 275));
}

.trust-principle {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  min-height: 12.75rem;
  padding: clamp(1.45rem, 2.55vw, 2.1rem);
  border: 0;
  align-items: start;
  align-content: start;
  transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}

.trust-principle:nth-child(odd) {
  border-right: 1px solid var(--color-rule-light);
}

.trust-principle:nth-child(-n + 2) {
  border-bottom: 1px solid var(--color-rule-light);
}

.trust-principle:hover {
  background: oklch(99.3% 0.004 275);
  box-shadow: inset 0 0 0 1px var(--color-rule-light-strong);
}

.trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: var(--radius-sm);
  background: var(--color-paper-light-3);
  border: 1px solid var(--color-rule-light);
  color: var(--color-subtle-light);
  font-size: 0.94rem;
  transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

.trust-principle h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.02rem, 1.4vw, 1.34rem);
  font-weight: var(--serif-display-weight);
  letter-spacing: var(--serif-display-tracking);
  margin-bottom: 0.65rem;
  color: var(--text-primary);
  line-height: var(--serif-display-leading);
}

.trust-principle p {
  max-width: 680px;
  font-size: clamp(0.8rem, 0.9vw, 0.88rem);
  color: var(--text-secondary);
  line-height: 1.56;
  font-weight: 400;
}

@keyframes hero-image-settle {
  from {
    opacity: 0.88;
    transform: scale(1.012);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes hero-word-in {
  from {
    opacity: 0;
    filter: blur(7px);
    transform: translateY(0.32em);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes hero-category-in {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(calc(var(--hero-category-resting-y) + 0.32em));
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(var(--hero-category-resting-y));
  }
}

@keyframes hero-support-in {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes hero-cta-in {
  from {
    opacity: 0;
    filter: blur(4px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1680px) {
  .hero-bg,
  .hero-bg::before {
    background-size: auto 155%;
    background-position: center top;
  }
}

@media (max-width: 980px) {
  .problem-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "intro"
      "reasoning"
      "action";
  }

  .problem-intro {
    max-width: 680px;
  }

  .trust-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .trust-heading {
    max-width: 640px;
    padding-top: 0;
  }

  .trust-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 900px) {
  .product-proof-shell {
    width: var(--page-shell);
  }

  .product-proof-row,
  .product-proof-row--media-right {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "media";
    gap: 2rem;
    padding: clamp(3.25rem, 7vw, 4.5rem) 0;
  }

  .product-proof-copy {
    max-width: 620px;
  }
}

@media (max-width: 700px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    align-content: end;
  }

  .hero-copy {
    padding-top: 1rem;
  }

  .hero-action-row {
    align-self: start;
    justify-self: start;
  }

  .hero-bg,
  .hero-bg::before {
    background-position: 58% top;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 6rem 0;
  }

  .problem {
    padding-top: 4.75rem;
    padding-bottom: 3.25rem;
  }

  .proof-grid {
    grid-template-columns: 1fr;
  }

  .proof-card,
  .proof-card:nth-child(1),
  .proof-card:nth-child(2),
  .proof-card:nth-child(3),
  .proof-card:nth-child(4) {
    grid-column: 1 / -1;
  }

  .trust-principle {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }

  .trust-icon {
    width: 3rem;
    height: 3rem;
  }

  .theme-light .trust {
    padding-left: 0;
    padding-right: 0;
  }

  .problem-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: calc(100vw / 6);
  }

  .hero {
    min-height: clamp(560px, 74svh, 640px);
    padding: 3rem var(--page-gutter) 4rem;
  }

  .hero-bg {
    right: 0;
    left: 0;
  }

  .hero-action-row {
    align-items: center;
    flex-direction: row;
  }

  .hero-headline {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  :root {
    --page-gutter: 1.1rem;
    --page-shell: calc(100vw - (2 * var(--page-gutter)));
    --section-body-size: 1rem;
    --section-body-width: 42ch;
  }

  .hero {
    min-height: clamp(520px, 69svh, 590px);
    padding-right: var(--page-gutter);
    padding-left: var(--page-gutter);
  }

  .hero-headline {
    max-width: 100%;
    font-size: clamp(1.3rem, 6.15vw, 1.52rem);
    line-height: 1.17;
  }

  .hero-headline__beat--secondary {
    margin-top: 0.16em;
  }

  .hero-sub {
    max-width: 100%;
    color: oklch(93% 0.006 275 / 0.96);
    font-size: 1rem;
    line-height: 1.5;
  }

  .hero-copy .hero-sub {
    margin-top: 1rem;
  }

  .hero-action-row {
    width: 100%;
    max-width: none;
  }

  .hero-action-row .btn-cta {
    width: 100%;
    min-height: 3.5rem;
  }

  .problem-intro h2,
  .trust h2,
  .product-proof-intro h2 {
    max-width: 100%;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  .problem-intro h2,
  .trust h2 {
    margin-bottom: 1.125rem;
  }

  .reasoning-loss {
    max-width: min(100%, var(--section-body-width));
  }

  .problem-intro,
  .trust-heading {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .problem-intro .problem-copy,
  .trust-heading p {
    max-width: min(100%, var(--section-body-width));
    overflow-wrap: break-word;
  }

  .product-proof-section {
    padding: 4rem 0 5.75rem;
  }

  .product-proof-shell {
    width: var(--page-shell);
  }

  .product-proof-intro {
    width: 100%;
    margin-bottom: 1rem;
  }

  .product-proof-intro h2 {
    text-wrap: balance;
  }

  .product-proof-intro p,
  .product-proof-copy p {
    max-width: min(100%, var(--section-body-width));
  }

  .product-proof-intro p {
    margin-top: 0.875rem;
  }

  .problem-intro .problem-copy,
  .trust-heading p,
  .product-proof-intro p,
  .product-proof-copy p {
    font-size: 1rem;
    line-height: 1.52;
  }

  .product-proof-row,
  .product-proof-row--media-right {
    gap: 1.75rem;
    padding: 2.6rem 0;
  }

  .product-proof-copy h3 {
    max-width: 18ch;
    font-size: clamp(1.42rem, 6.6vw, 1.85rem);
    line-height: 1.16;
  }

  .product-proof-media {
    --product-proof-aspect: 4 / 3;
    --product-proof-matte-block: var(--space-lg);
    --product-proof-matte-inline: var(--space-md);
    border-radius: var(--radius-sm);
  }

  .product-proof-media--browser {
    --product-proof-aspect: 4 / 3;
  }

  .product-proof-media--browser img {
    height: auto;
  }

  .product-proof-media--framework img {
    width: 138%;
    transform: translateX(-4.08%);
  }

  .product-proof-media--agent img {
    width: 142%;
    height: auto;
    transform: translateX(-28%);
  }

  .product-proof-media--citation img {
    width: 136%;
    height: auto;
    transform: translateX(-17%);
  }

  .product-proof-media--memo img {
    width: 132%;
    transform: translateX(-13%);
  }

}

@media (max-width: 480px) {
  :root {
    --section-heading-size: 1.62rem;
  }

  .hero-headline {
    max-width: 100%;
    font-size: clamp(1.3rem, 6.15vw, 1.52rem);
  }

  .hero-headline__beat {
    display: block;
  }

  .problem-intro h2,
  .trust h2 {
    max-width: 100%;
    text-wrap: pretty;
  }

  .reasoning-loss {
    max-width: min(100%, var(--section-body-width));
  }

  .problem-intro,
  .trust-heading {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .problem-intro .problem-copy,
  .trust-heading p {
    max-width: min(100%, var(--section-body-width));
    overflow-wrap: break-word;
  }

  .hero-action-row .btn-cta {
    max-width: 100%;
  }

  .hero-action-row .cta-label {
    min-width: 0;
    white-space: nowrap;
  }

  .hero-sub {
    max-width: 100%;
  }

  .proof-card {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    column-gap: 0.9rem;
    padding: 1.5rem;
  }

  .trust-principle {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    min-height: auto;
    padding: 1.6rem;
  }

  .trust-list {
    grid-template-columns: 1fr;
  }

  .trust-principle:nth-child(odd),
  .trust-principle:nth-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--color-rule-light);
  }

  .trust-principle:last-child {
    border-bottom: 0;
  }

  .trust-icon {
    width: 2.55rem;
    height: 2.55rem;
    font-size: 0.95rem;
  }

  .card-icon {
    font-size: 1.05rem;
  }

}