:root {
  --ink: #102019;
  --muted: #626c66;
  --soft: #f1f3ee;
  --soft-blue: #e5eee8;
  --line: rgba(16, 32, 25, .11);
  --accent: #123d2c;
  --accent-dark: #092a1e;
  --success: #1f684e;
  --warning: #9b6a2c;
  --white: #ffffff;
  --paper: #fafaf7;
  --surface: #f3f5f0;
  --surface-strong: #e8ede7;
  --accent-2: #8ed6ae;
  --accent-2-soft: #e2f2ea;
  /* One display scale. h1 sits above every section h2 at every width. */
  /* One vertical rhythm. Sections step through these, nothing else. */
  --space-section: clamp(72px, 7vw, 112px);
  --space-section-tight: clamp(48px, 4.5vw, 72px);
  --fs-display-1: clamp(46px, 5.4vw, 76px);
  --fs-display-2: clamp(37px, 4.1vw, 58px);
  --fs-display-3: clamp(31px, 3.2vw, 45px);
  --radius-lg: 32px;
  --radius-md: 22px;
  --shadow-soft: 0 24px 70px rgba(15, 45, 33, .10);
  --shadow-ui: 0 18px 45px rgba(13, 39, 29, .17), inset 0 1px 0 rgba(255, 255, 255, .82);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -.015em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img, svg { display: block; }
h1, h2, h3, p { margin: 0; }
/* Tracking and leading are tiered by size: display type can take tight
   negative tracking, label-sized headings cannot. */
h1, h2, h3 { letter-spacing: -.038em; line-height: 1.07; text-wrap: balance; }
.proof-feature h3, .edge-plan h3, .footer-col h3, .plan-name,
.price-card h3, .bento-panel-head, .scene-kicker {
  letter-spacing: -.015em;
  line-height: 1.25;
}
p { text-wrap: pretty; }
::selection { color: var(--white); background: var(--accent); }
section[id] { scroll-margin-top: 104px; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--white);
  background: var(--ink);
  font-size: 13px;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }
:where(a, button):focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }

.page-shell { width: min(1440px, calc(100% - 32px)); margin-inline: auto; }
.content-shell { width: min(1220px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: var(--space-section) 0; }
.section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, .78fr);
  align-items: end;
  gap: clamp(36px, 5vw, 72px);
  margin-bottom: 52px;
}
.section-intro h2 { max-width: 20ch; margin-top: 0; font-size: var(--fs-display-2); }
.section-intro p { max-width: 540px; padding-bottom: 7px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  padding: 0 23px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1), background .28s ease, color .28s ease, box-shadow .28s ease;
}
.button:active { transform: translateY(1px) scale(.985); }
.button-primary { background: var(--accent); color: var(--white); box-shadow: 0 10px 24px rgba(18, 61, 44, .22); }
.button-primary:hover { background: var(--accent-dark); transform: translateY(-2px); }
.button-secondary { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.button-secondary:hover { box-shadow: inset 0 0 0 1px rgba(22, 25, 31, .2), 0 10px 26px rgba(22, 25, 31, .07); transform: translateY(-2px); }
.button-dark { background: var(--ink); color: var(--white); }
.button-dark:hover { background: var(--accent-dark); transform: translateY(-2px); }
.arrow { width: 15px; height: 15px; }

/* Navigation */
.site-header {
  position: sticky;
  top: 12px;
  z-index: 20;
  padding-top: 12px;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.nav-wrap {
  width: min(1180px, calc(100% - 28px));
  min-height: 62px;
  margin: 0 auto;
  padding: 8px 9px 8px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(16, 32, 25, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 12px 38px rgba(16, 32, 25, .08), inset 0 1px 0 rgba(255, 255, 255, .92);
  backdrop-filter: blur(18px) saturate(130%);
  pointer-events: auto;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -.05em; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 24px; }
.nav-links a { padding: 9px 12px; border-radius: 999px; color: #555c68; font-size: 13px; font-weight: 600; transition: background .2s ease, color .2s ease; }
.nav-links a:hover { color: var(--ink); background: var(--soft); }
.nav-links a.is-active { color: var(--accent); background: var(--soft-blue); }
.site-header.is-scrolled .nav-wrap { box-shadow: 0 16px 45px rgba(16, 32, 25, .13), inset 0 1px 0 rgba(255,255,255,.94); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.nav-login { padding: 10px 14px; font-size: 13px; font-weight: 700; color: #545b66; }
.nav-demo { min-height: 44px; padding-inline: 20px; }

/* Mobile menu — below 860px the inline links are hidden, so the
   toggle is the only route to Produkt / Platform / Priser. */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s ease;
}
.nav-toggle:hover { background: var(--surface-strong); }
.nav-toggle-bars { display: grid; gap: 5px; width: 18px; }
.nav-toggle-bars i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-nav {
  display: none;
  width: min(1180px, calc(100% - 28px));
  margin: 8px auto 0;
  padding: 10px;
  border: 1px solid rgba(16, 32, 25, .08);
  border-radius: 24px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 45px rgba(16, 32, 25, .13);
  backdrop-filter: blur(18px) saturate(130%);
  pointer-events: auto;
}
.mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
}
.mobile-nav a:hover, .mobile-nav a:focus-visible { background: var(--soft); }
.mobile-nav a.is-active { color: var(--accent); background: var(--soft-blue); }
.mobile-nav-login { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; color: var(--muted) !important; }

/* Hero */
.hero { padding: 28px 0 0; }
.hero-frame {
  position: relative;
  min-height: 760px;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(540px, 1.12fr);
  align-items: center;
  gap: clamp(40px, 5vw, 88px);
  overflow: hidden;
  padding: clamp(52px, 6vw, 92px);
  border: 1px solid rgba(22, 25, 31, .06);
  border-radius: 38px;
  background: #202c26;
  isolation: isolate;
}
.hero-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../hero.jpg") center center / cover no-repeat;
  transform: scale(1.002);
}
.hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 17, 12, .93) 0%, rgba(7, 17, 12, .81) 31%, rgba(7, 17, 12, .36) 58%, rgba(7, 17, 12, .15) 100%),
    linear-gradient(180deg, rgba(5, 14, 10, .1), rgba(5, 14, 10, .4));
}
.hero-copy { position: relative; z-index: 2; max-width: 570px; padding-left: clamp(0px, 1vw, 14px); color: var(--white); }
.hero-kicker { margin-bottom: 24px; }
.hero h1 { max-width: 15ch; font-size: var(--fs-display-1); }
.hero h1 .accent-line { color: var(--accent-2); }
.hero-lead { max-width: 535px; margin-top: 26px; color: #d6dae1; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; letter-spacing: -.024em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 30px; color: #e4e8ee; font-size: 12.5px; font-weight: 600; }
.proof-item { display: inline-flex; align-items: center; gap: 7px; }
.proof-icon { width: 17px; height: 17px; color: var(--success); }

.hero-media {
  position: relative;
  z-index: 2;
  min-height: 575px;
  align-self: stretch;
  overflow: visible;
}
.hero-media > img { display: none; }
.hero-flow { position: absolute; inset: 12px 0 0; z-index: 4; width: min(100%, 590px); min-height: 555px; margin-left: auto; color: white; }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flow-line-base { fill: none; stroke: rgba(142, 214, 174, .18); stroke-width: 1.2; }
.flow-line-active { fill: none; stroke: #8ed6ae; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(74, 158, 121, .34)); animation: flow-line 13s cubic-bezier(.22, .75, .2, 1) infinite; }
.flow-line-active.flow-line-two { animation-name: flow-line-two; }
.glass-card { position: absolute; border: 1px solid rgba(255, 255, 255, .15); background: linear-gradient(145deg, rgba(19, 25, 36, .79), rgba(12, 17, 25, .63)); box-shadow: 0 22px 55px rgba(4, 9, 16, .28), inset 0 1px 0 rgba(255, 255, 255, .11); backdrop-filter: blur(22px) saturate(118%); -webkit-backdrop-filter: blur(22px) saturate(118%); will-change: transform, opacity; }
.flow-incoming { top: 24px; right: 0; width: min(355px, 72%); padding: 17px 18px 18px; border-radius: 20px; animation: incoming-card 13s cubic-bezier(.16, 1, .3, 1) infinite; }
.flow-person { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; }
.flow-avatar { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(142, 214, 174, .17); color: #cfeadd; font-size: 10px; font-weight: 800; }
.flow-name { font-size: 12px; font-weight: 750; letter-spacing: -.01em; }
.flow-channel, .flow-time { color: rgba(232, 237, 246, .58); font-size: 9.5px; }
.flow-message { margin-top: 13px; color: #f6f8fb; font-size: 13px; line-height: 1.48; letter-spacing: -.015em; }
.flow-processor { top: 241px; right: 134px; width: 205px; min-height: 78px; display: grid; grid-template-columns: 39px 1fr; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 18px; animation: processor-card 13s cubic-bezier(.16, 1, .3, 1) infinite; }
.processor-mark { position: relative; width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.95); box-shadow: 0 7px 18px rgba(0,0,0,.2); }
.processor-mark::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(142, 214, 174, .38); border-radius: 16px; animation: processor-pulse 2.4s ease-in-out infinite; }
.processor-mark img { width: 27px; height: 27px; border-radius: 7px; object-fit: cover; }
.processor-title { font-size: 12px; font-weight: 800; }
.processor-status { position: relative; height: 17px; margin-top: 3px; overflow: hidden; color: rgba(232,237,246,.65); font-size: 9.5px; }
.processor-status span { position: absolute; inset: 0; opacity: 0; transform: translateY(6px); animation: status-cycle 13s ease infinite; }
.processor-status span:nth-child(2) { animation-delay: 1.8s; }
.processor-status span:nth-child(3) { animation-delay: 3.6s; color: #78d8ae; }
.flow-result { right: 7px; bottom: 31px; width: min(375px, 76%); padding: 17px 18px 16px; border-radius: 20px; animation: result-card 13s cubic-bezier(.16, 1, .3, 1) infinite; }
.result-head { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.11); }
.result-head img { width: 29px; height: 29px; object-fit: contain; }
.result-title { font-size: 12px; font-weight: 780; }
.result-sub { margin-top: 2px; color: rgba(232,237,246,.56); font-size: 9.5px; }
.result-body { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding-top: 14px; }
.result-action { font-size: 12px; font-weight: 700; }
.result-detail { margin-top: 4px; color: rgba(232,237,246,.61); font-size: 9.5px; }
.result-check { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: white; background: #248f68; box-shadow: 0 0 0 6px rgba(73, 201, 150, .11); transform: scale(.65); opacity: 0; animation: result-check 13s cubic-bezier(.16, 1, .3, 1) infinite; }
.result-check svg { width: 16px; height: 16px; }
.flow-caption { position: absolute; right: 17px; bottom: 0; color: rgba(238,242,248,.48); font-size: 9px; letter-spacing: .02em; animation: result-card 13s cubic-bezier(.16, 1, .3, 1) infinite; }

/* Integration directory */
.integration-strip { padding: var(--space-section-tight) 0; }
.integration-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr);
  align-items: end;
  gap: clamp(28px, 4vw, 64px);
  margin-bottom: 30px;
}
.integration-head p { max-width: 480px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.integration-head h2 { max-width: 24ch; font-size: clamp(22px, 2vw, 27px); letter-spacing: -.025em; line-height: 1.28; }
.integration-head p { font-size: 15px; }
.integration-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-block: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.integration-track {
  width: max-content;
  display: flex;
  will-change: transform;
}
.integration-track.is-rolling { animation: integration-roll 46s linear infinite; }
/* Pausing on hover is for a real pointer. On touch, :hover sticks after a tap
   and the strip stays frozen until you tap somewhere else. */
@media (hover: hover) and (pointer: fine) {
  .integration-viewport:hover .integration-track { animation-play-state: paused; }
}
.integration-set { display: flex; align-items: center; gap: 54px; padding-right: 54px; }
@keyframes integration-roll {
  to { transform: translate3d(-50%, 0, 0); }
}
.integration-item {
  flex: 0 0 136px;
  min-height: 76px;
  display: grid;
  place-items: center;
  padding: 8px 0;
  opacity: .78;
  transition: opacity .35s cubic-bezier(.16, 1, .3, 1), transform .35s cubic-bezier(.16, 1, .3, 1);
}
.integration-item:hover { opacity: 1; transform: scale(1.035); }
.integration-logo { width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; }
.integration-logo img { display: block; width: 112px; height: 36px; object-fit: contain; object-position: center; }
.integration-logo img.icon { width: 36px; height: 36px; }
.integration-logo img.app-icon { width: 38px; height: 38px; border-radius: 9px; }
.integration-logo img.herodesk { width: 112px; height: 36px; }
.integration-item strong {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.integration-neutral {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #5b6370;
}
.integration-neutral svg { width: 20px; height: 20px; }

/* Product bento */
.bento-section { padding: var(--space-section-tight) 0 var(--space-section); }
.bento-head h2 { max-width: 19ch; }
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 18px;
}
.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 510px;
  overflow: hidden;
  padding: 38px;
  border: 1px solid rgba(22, 25, 31, .08);
  border-radius: 30px;
  background: linear-gradient(145deg, #f8f7f3 0%, #efefe9 100%);
  box-shadow: 0 12px 34px rgba(16, 32, 25, .045), inset 0 1px 0 rgba(255,255,255,.88);
  isolation: isolate;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1), box-shadow .7s cubic-bezier(.16, 1, .3, 1), border-color .7s ease;
}
.bento-card:nth-child(1), .bento-card:nth-child(4) { grid-column: span 7; }
.bento-card:nth-child(2), .bento-card:nth-child(3) { grid-column: span 5; }
.bento-card:hover {
  transform: translateY(-5px);
  border-color: rgba(22, 25, 31, .14);
  box-shadow: 0 24px 60px rgba(16, 32, 25, .11), inset 0 1px 0 rgba(255,255,255,.9);
}
.bento-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(145deg, rgba(255,255,255,.7), transparent 48%);
  pointer-events: none;
}
.bento-copy { position: relative; z-index: 3; max-width: 510px; }
.bento-copy h3 { max-width: 17ch; font-size: clamp(28px, 2.5vw, 39px); }
.bento-copy p { max-width: 520px; margin-top: 13px; color: var(--muted); font-size: 14px; line-height: 1.62; }
.bento-stage { position: relative; flex: 1; min-height: 250px; margin-top: 26px; display: grid; place-items: center; }
.lottie-host { width: 100%; height: 100%; display: grid; place-items: center; }
.lottie-host svg { width: 100% !important; height: 100% !important; overflow: visible; }
.bento-panel {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(22,25,31,.09);
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 46px rgba(29, 40, 62, .13), inset 0 1px 0 #fff;
  backdrop-filter: blur(12px);
}
.bento-panel-head {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(22,25,31,.08);
  color: #737b88;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.bento-live { display: inline-flex; align-items: center; gap: 6px; color: var(--success); }
.bento-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px rgba(23,116,84,.08); }

/* Autopilot loop */
.autopilot-board { left: 0; top: 8px; width: min(360px, 59%); }
.auto-row { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 14px; border-bottom: 1px solid rgba(22,25,31,.07); font-size: 11px; font-weight: 700; }
.auto-row:last-child { border-bottom: 0; }
.bento-state-cycle { position: relative; width: 78px; height: 24px; flex: 0 0 78px; }
.bento-state-cycle > span, .action-status > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(5px) scale(.96);
  animation: bento-state 10.5s cubic-bezier(.16,1,.3,1) infinite;
}
.bento-state-cycle > span:nth-child(1) { color: #7d838c; background: #eef0f3; }
.bento-state-cycle > span:nth-child(2) { color: #8a5a11; background: #f8efdf; animation-delay: 3.5s; }
.bento-state-cycle > span:nth-child(3) { color: #177454; background: #e5f3ed; animation-delay: 7s; }
.bento-state-cycle.stagger > span { animation-delay: .75s; }
.bento-state-cycle.stagger > span:nth-child(2) { animation-delay: 4.25s; }
.bento-state-cycle.stagger > span:nth-child(3) { animation-delay: 7.75s; }
.bento-state-static { min-width: 78px; padding: 5px 9px; border-radius: 999px; color: #8a5a11; background: #f8efdf; text-align: center; font-size: 9.5px; font-weight: 800; }
.review-receipt { right: 0; bottom: 2px; width: min(315px, 51%); padding-bottom: 13px; animation: receipt-lift 10.5s cubic-bezier(.16,1,.3,1) infinite; }
.review-body { padding: 14px; }
.review-title { font-size: 11px; font-weight: 800; }
.review-note { margin-top: 5px; color: var(--success); font-size: 10px; }
.review-meter { height: 6px; margin-top: 13px; overflow: hidden; border-radius: 999px; background: #e9edf0; }
.review-meter i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--success); transform-origin: left; animation: review-fill 10.5s cubic-bezier(.16,1,.3,1) infinite; }
.review-foot { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: #737a84; font-size: 9px; }
.review-foot::before { content: ""; width: 7px; height: 7px; border: 1.5px solid var(--success); border-top-color: transparent; border-radius: 50%; animation: spin 1.2s linear infinite; }

/* Context loop */
.context-message { top: 0; left: 0; width: min(285px, 72%); padding: 14px; animation: context-message 9s cubic-bezier(.16,1,.3,1) infinite; }
.context-person { display: flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 800; }
.context-person span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #1f5e46; background: #dcefe5; font-size: 8px; }
.context-message p { margin-top: 10px; color: #4f5661; font-size: 10.5px; line-height: 1.5; }
.customer-context { right: 0; bottom: 0; width: min(330px, 82%); }
.context-row { position: relative; min-height: 37px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border-bottom: 1px solid rgba(22,25,31,.07); color: #777e89; font-size: 9.5px; }
.context-row:last-child { border-bottom: 0; }
.context-row strong { color: var(--ink); font-size: 10px; }
.context-row::after { content: ""; position: absolute; inset: 4px 7px; z-index: 0; border-radius: 8px; background: #e6eee8; opacity: 0; animation: context-row 8s ease infinite; pointer-events: none; }
.context-row > * { position: relative; z-index: 1; }
.context-row:nth-child(2)::after { animation-delay: 1.6s; }
.context-row:nth-child(3)::after { animation-delay: 3.2s; }
.context-row:nth-child(4)::after { animation-delay: 4.8s; }
.context-row:nth-child(5)::after { animation-delay: 6.4s; }
.context-source { display: inline-flex; align-items: center; gap: 6px; }
.context-source img { width: 14px; height: 14px; object-fit: contain; }
.context-scan { position: absolute; z-index: 4; left: 8px; right: 8px; top: 42px; height: 1px; background: linear-gradient(90deg, transparent, var(--card-accent), transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--card-accent) 45%, transparent); animation: context-scan 8s ease-in-out infinite; }

/* Skill loop */
.skill-builder { left: 0; top: 0; width: min(340px, 82%); }
.skill-name { color: var(--ink); letter-spacing: 0; text-transform: none; font-size: 10px; }
.skill-status { padding: 4px 7px; border-radius: 999px; color: var(--success); background: #e6f3ed; }
.skill-step { position: relative; min-height: 45px; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid rgba(22,25,31,.07); color: #535a65; font-size: 10px; }
.skill-step:last-child { border-bottom: 0; }
.skill-step::after { content: ""; position: absolute; inset: 5px 7px; z-index: 0; border-radius: 9px; background: #e6eee8; opacity: 0; transform: scaleX(.93); animation: skill-step 9.6s ease infinite; pointer-events: none; }
.skill-step > * { position: relative; z-index: 1; }
.skill-step:nth-child(2)::after { animation-delay: 1.8s; }
.skill-step:nth-child(3)::after { animation-delay: 3.6s; }
.skill-step:nth-child(4)::after { animation-delay: 5.4s; }
.skill-token { width: fit-content; padding: 4px 6px; border-radius: 5px; color: #123d2c; background: #e3ece6; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.skill-result { right: 0; bottom: 0; width: min(292px, 70%); padding: 14px; animation: skill-result 9.6s cubic-bezier(.16,1,.3,1) infinite; }
.skill-result strong { display: block; font-size: 10.5px; }
.skill-result span { display: block; margin-top: 5px; color: var(--success); font-size: 9px; }

/* Approved action loop */
.action-request { left: 0; top: 0; width: min(285px, 48%); padding: 14px; }
.action-request strong { display: block; font-size: 10px; }
.action-request p { margin-top: 7px; color: #505762; font-size: 10.5px; line-height: 1.5; }
.action-flow-card { right: 0; bottom: 0; width: min(430px, 68%); }
.action-order { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border-bottom: 1px solid rgba(22,25,31,.08); font-size: 10px; font-weight: 800; }
.action-order span { color: var(--success); }
.action-line { min-height: 39px; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid rgba(22,25,31,.07); color: #575e69; font-size: 9.5px; }
.action-line:last-of-type { border-bottom: 0; }
.action-icon { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: var(--success); background: #e5f3ed; font-size: 8px; font-weight: 900; }
.action-line small { color: #8a919b; font-size: 8.5px; }
.action-approval { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #f6f7f9; }
.action-status { position: relative; flex: 1; height: 24px; }
.action-status > span { justify-content: start; color: #69717c; font-size: 9px; animation: action-state 10s cubic-bezier(.16,1,.3,1) infinite; }
.action-status > span:nth-child(2) { color: #8a5a11; animation-delay: 3.3s; }
.action-status > span:nth-child(3) { color: var(--success); animation-delay: 6.6s; }
.action-button { min-width: 92px; padding: 7px 10px; border-radius: 999px; color: white; background: var(--ink); text-align: center; font-size: 9px; font-weight: 800; animation: action-button 10s ease infinite; }

@keyframes bento-state { 0%, 7%, 100% { opacity: 0; transform: translateY(5px) scale(.96); } 12%, 29% { opacity: 1; transform: none; } 33% { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes receipt-lift { 0%, 57%, 100% { opacity: .38; transform: translateY(14px); } 65%, 90% { opacity: 1; transform: none; } }
@keyframes review-fill { 0%, 58% { transform: scaleX(.18); } 78%, 92% { transform: scaleX(1); } 100% { transform: scaleX(.18); } }
@keyframes context-message { 0%,100% { transform: translateY(0); } 46%,56% { transform: translateY(-7px); } }
@keyframes context-row { 0%, 12%, 100% { opacity: 0; } 18%, 34% { opacity: 1; } 40% { opacity: 0; } }
@keyframes context-scan { 0%, 8% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 80% { transform: translateY(145px); opacity: 1; } 90%,100% { transform: translateY(145px); opacity: 0; } }
@keyframes skill-step { 0%, 12%, 100% { opacity: 0; transform: scaleX(.93); } 18%, 34% { opacity: 1; transform: none; } 41% { opacity: 0; } }
@keyframes skill-result { 0%, 62%, 100% { opacity: .25; transform: translateY(15px); } 72%, 92% { opacity: 1; transform: none; } }
@keyframes action-state { 0%, 8%, 100% { opacity: 0; transform: translateY(5px); } 13%, 29% { opacity: 1; transform: none; } 34% { opacity: 0; transform: translateY(-4px); } }
@keyframes action-button { 0%,34%,100% { background: var(--ink); transform: scale(1); } 39%,58% { background: #a76a14; transform: scale(.98); } 66%,91% { background: var(--success); transform: scale(1); } }

/* Hand-built product motion — shared language across all feature scenes */
.motion-scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 270px;
  overflow: hidden;
  border-radius: 28px;
  color: #eef4ef;
  background: #071f16;
  box-shadow: 0 22px 48px rgba(9,42,30,.16), inset 0 0 0 1px rgba(243,231,212,.1);
  isolation: isolate;
  font-variant-numeric: tabular-nums;
}
.motion-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 86% 12%, rgba(142, 214, 174, .105), transparent 34%);
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}
.motion-scene.is-light {
  color: var(--ink);
  background: #f9faf7;
  box-shadow: 0 20px 46px rgba(16,32,25,.11), inset 0 0 0 1px rgba(16,32,25,.08);
}
.motion-scene.is-light::before {
  background: radial-gradient(circle at 86% 12%, rgba(142, 214, 174, .17), transparent 36%);
}
.scene-bar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 8;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid rgba(243,231,212,.1);
  background: rgba(7,31,22,.78);
  backdrop-filter: blur(12px);
}
.is-light .scene-bar { border-color: rgba(16,32,25,.08); background: rgba(249,250,247,.82); }
.scene-name { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; letter-spacing: -.015em; }
.scene-name img { width: 24px; height: 24px; border-radius: 7px; background: #fff; object-fit: contain; }
.scene-meta { color: #9db0a6; font: 700 10px/1 "Courier New", monospace; letter-spacing: .045em; text-transform: uppercase; }
.is-light .scene-meta { color: #66746d; }
.scene-live { display: inline-flex; align-items: center; gap: 6px; color: #9bd0b8; }
.scene-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px rgba(155,208,184,.08); }
.scene-panel {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(243,231,212,.12);
  border-radius: 20px;
  background: rgba(15,48,36,.92);
  box-shadow: 0 18px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.045);
}
.is-light .scene-panel { border-color: rgba(16,32,25,.1); background: rgba(255,255,255,.96); box-shadow: 0 18px 38px rgba(16,32,25,.1), inset 0 1px 0 #fff; }
.scene-kicker { color: var(--accent-2); font: 800 10px/1.2 "Courier New", monospace; letter-spacing: .055em; text-transform: uppercase; }
.is-light .scene-kicker { color: #8a632f; }
.scene-title { font-size: 15px; font-weight: 800; letter-spacing: -.025em; }
.scene-copy { color: #a8b8af; font-size: 12px; line-height: 1.45; }
.is-light .scene-copy { color: #65716b; }
.scene-logo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16,32,25,.08); }
.scene-logo img { max-width: 24px; max-height: 24px; object-fit: contain; }
.scene-check { width: 18px; height: 18px; color: #9bd0b8; }
.scene-check path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scene-connector { fill: none; stroke: rgba(142, 214, 174, .82); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scene-connector.success { stroke: #6eb493; }

/* Autopilot maturity */
.ap-table { left: 5%; right: 5%; top: 62px; bottom: 15px; display: grid; align-content: start; gap: 6px; padding: 10px 14px 60px; }
.ap-head, .ap-row { display: grid; grid-template-columns: 1.5fr .46fr 1fr; align-items: center; gap: 12px; }
.ap-head { display: none; }
.ap-row { position: relative; min-height: 39px; padding: 7px 10px 7px 12px; border-radius: 13px; background: rgba(255,255,255,.055); }
.ap-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 3px; background: var(--accent-2); opacity: .35; }
.ap-case { font-size: 12px; font-weight: 750; }
.ap-score { color: #b6c5bd; font: 700 10px/1 "Courier New", monospace; }
.ap-mode { position: relative; height: 27px; padding: 3px; border-radius: 9px; background: rgba(255,255,255,.07); display: grid; grid-template-columns: repeat(3,1fr); }
.ap-mode span { position: relative; z-index: 2; display: grid; place-items: center; color: #82958b; font: 700 9px/1 "Courier New",monospace; text-transform: uppercase; }
.ap-thumb { position: absolute; z-index: 1; left: 3px; top: 3px; width: calc((100% - 6px)/3); height: 21px; border-radius: 7px; background: #e9f1ec; box-shadow: 0 5px 14px rgba(0,0,0,.18); }
.ap-receipt { left: 8%; right: 8%; bottom: 22px; width: auto; min-height: 46px; padding: 8px 12px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px; color: var(--ink); background: #f7f8f4; }
.ap-receipt strong { display: block; font-size: 11px; }
.ap-receipt small { display: block; margin-top: 2px; color: #65716b; font: 8.5px/1.3 "Courier New",monospace; }
.ap-receipt .receipt-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #fff; background: var(--success); }

/* Context graph */
.context-scene .context-lines, .skill-scene .skill-lines, .action-scene .action-lines, .journey-data .data-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.context-ticket { left: 5%; top: 72px; width: 42%; padding: 13px; }
.context-personline { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; }
.context-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #1f5e46; background: #dcefe5; font-size: 7px; }
.context-question { margin-top: 10px; font-size: 12px; line-height: 1.45; font-weight: 700; }
.context-hub { left: 44%; top: 113px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: #f8faf7; }
.context-hub img { width: 35px; height: 35px; border-radius: 10px; }
.context-source-stack { position: absolute; right: 5%; top: 66px; width: 35%; display: grid; gap: 7px; }
.context-source-row { min-height: 42px; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 14px; color: var(--ink); background: rgba(255,255,255,.97); box-shadow: 0 10px 25px rgba(0,0,0,.16); }
.context-source-row strong { display: block; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.context-source-row small { display: block; color: #718078; font: 8.5px/1.2 "Courier New",monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.context-source-row em { color: var(--success); font: 700 8.5px/1 "Courier New",monospace; font-style: normal; }
.context-summary { left: 23%; right: 6%; bottom: 16px; min-height: 61px; padding: 11px 13px; }
.summary-line { height: 5px; margin-top: 7px; border-radius: 5px; background: rgba(243,231,212,.16); transform-origin: left; }
.summary-line:nth-child(2) { width: 88%; }
.summary-line:nth-child(3) { width: 64%; }

/* Skill flow */
.skill-scene .scene-bar { background: rgba(7,31,22,.9); }
.skill-node { position: absolute; min-height: 62px; padding: 11px 12px; }
.skill-node.when { left: 6%; top: 83px; width: 31%; }
.skill-node.fetch { left: 37%; top: 163px; width: 29%; }
.skill-node.do { right: 6%; top: 75px; width: 28%; }
.skill-node.hold { right: 6%; bottom: 19px; width: 28%; }
.skill-node strong { display: block; margin-top: 7px; font-size: 11.5px; line-height: 1.25; }
.skill-port { position: absolute; width: 9px; height: 9px; border: 2px solid #071f16; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 3px rgba(142, 214, 174, .14); }
.skill-node .skill-port { right: -5px; top: 50%; margin-top: -4px; }
.skill-node.do .skill-port, .skill-node.hold .skill-port { left: -5px; right: auto; }
.skill-token-dot { position: absolute; left: 31%; top: 127px; z-index: 6; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 6px rgba(142, 214, 174, .12); }

/* Approved action */
.action-scene { color: var(--ink); }
.action-order-card { left: 5%; top: 72px; width: 52%; padding: 13px; }
.action-order-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(16,32,25,.09); }
.action-order-head strong { font-size: 12px; }
.action-order-head span { color: #8a632f; font: 700 9px/1 "Courier New",monospace; text-transform: uppercase; }
.action-product { display: grid; grid-template-columns: 34px 1fr; gap: 9px; align-items: center; margin-top: 11px; }
.action-thumb { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg,#ead7b4,#f7eddc); }
.action-product strong { display: block; font-size: 11px; }
.action-product small { color: #748079; font: 9px/1.2 "Courier New",monospace; }
.action-system-stack { position: absolute; right: 5%; top: 72px; width: 34%; display: grid; gap: 8px; }
.action-system { min-height: 45px; display: grid; grid-template-columns: 28px 1fr 18px; align-items: center; gap: 8px; padding: 7px 9px; color: #eef4ef; border-radius: 13px; background: #102f24; box-shadow: 0 12px 26px rgba(7,31,22,.18); }
.action-system strong { font-size: 10.5px; }
.action-system small { display: block; color: #a4b7ad; font: 8.5px/1.2 "Courier New",monospace; }
.action-approval-card { left: 17%; right: 5%; bottom: 16px; min-height: 67px; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.action-approval-card strong { display: block; font-size: 11.5px; }
.action-approval-card small { color: #6e7b74; font: 9px/1.3 "Courier New",monospace; }
.motion-approve { position: relative; min-width: 128px; min-height: 38px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--ink); font-size: 10.5px; font-weight: 800; }
.motion-cursor { position: absolute; z-index: 12; width: 21px; height: 27px; opacity: 0; filter: drop-shadow(0 4px 5px rgba(0,0,0,.25)); pointer-events: none; }
.motion-ripple { position: absolute; z-index: 11; width: 34px; height: 34px; margin: -17px; border: 1.5px solid var(--accent-2); border-radius: 50%; opacity: 0; pointer-events: none; }
.action-scene .motion-cursor { left: 85%; top: 87%; }
.action-scene .motion-ripple { left: 80%; top: 79%; }

/* Larger journey scenes */
.journey-motion { width: min(93%, 720px); height: min(87%, 410px); min-height: 350px; }
.journey-understand .understand-message { left: 4%; top: 76px; width: 51%; padding: 17px; }
.understand-message-head { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; }
.understand-message-head span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #1f5e46; background: #dcefe5; font-size: 9px; }
.understand-message-head time { margin-left: auto; color: #75817b; font-size: 9px; line-height: 1; }
.understand-message p { margin-top: 15px; font-size: 14px; line-height: 1.5; }
.intent-word { position: relative; z-index: 1; white-space: nowrap; background: linear-gradient(rgba(142, 214, 174, .58),rgba(142, 214, 174, .58)) left bottom / 100% 7px no-repeat; }
.understand-panel { right: 4%; top: 72px; width: 38%; padding-bottom: 10px; }
.understand-panel h4 { padding: 15px 15px 12px; font-size: 13px; font-weight: 600; }
.understand-row { min-height: 43px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 0 15px; border-top: 1px solid rgba(16,32,25,.07); color: #6c7871; font-size: 10.5px; }
.understand-row strong { color: var(--ink); font-size: 11px; font-weight: 600; }
.understand-focus { position: absolute; left: 6%; right: 6%; bottom: 16px; min-height: 62px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 17px; color: #dce9e1; background: #123d2c; }
.understand-focus img { width: 27px; height: 27px; border-radius: 8px; }
.understand-focus strong { display: block; font-size: 11.5px; font-weight: 600; }
.understand-focus small { color: #a9beb4; font-size: 9px; line-height: 1.35; }

.journey-data .data-source-stack { position: absolute; left: 4%; top: 76px; width: 32%; display: grid; gap: 9px; }
.data-source { min-height: 56px; display: grid; grid-template-columns: 34px minmax(0,1fr) 12px; align-items: center; gap: 9px; padding: 8px 10px; color: var(--ink); border-radius: 17px; background: #fff; box-shadow: 0 12px 26px rgba(7,31,22,.12); }
.data-source strong { font-size: 10.5px; font-weight: 600; }
.data-source small { display: block; overflow: hidden; color: #718078; font-size: 8.5px; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.data-source i { width: 7px; height: 7px; border-radius: 50%; background: #cad4ce; }
.answer-draft { right: 4%; top: 72px; width: 55%; bottom: 18px; padding: 18px; }
.answer-draft h4 { font-size: 14px; font-weight: 600; }
.answer-question { margin-top: 12px; padding: 11px 12px; border-radius: 12px; color: #56635c; background: #f0f3ef; font-size: 10.5px; line-height: 1.45; }
.answer-text { margin-top: 13px; color: #435149; font-size: 11.5px; line-height: 1.55; }
.answer-text mark { padding: 1px 3px; border-radius: 3px; color: var(--success); background: #e6f2eb; }
.answer-sources { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.answer-sources span { padding: 5px 7px; border-radius: 7px; color: #65736b; background: #eef1ed; font-size: 8.5px; line-height: 1; }

.journey-control .control-ledger { left: 4%; top: 74px; width: 49%; bottom: 18px; padding: 15px; }
.control-ledger-head { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(16,32,25,.08); }
.control-ledger-head strong { font-size: 11.5px; font-weight: 600; }
.control-ledger-head span { color: var(--success); font-size: 8.5px; line-height: 1; }
.control-case { min-height: 49px; display: grid; grid-template-columns: minmax(0,1fr) 47px 78px; align-items: center; gap: 9px; border-bottom: 1px solid rgba(16,32,25,.07); font-size: 10px; }
.control-case strong { overflow: hidden; font-size: 10px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.control-case em { color: #6b7871; font-size: 8.5px; line-height: 1; font-style: normal; }
.control-mode { height: 27px; display: grid; place-items: center; border-radius: 9px; color: #6b7771; background: #eef1ed; font-size: 8.5px; line-height: 1; font-weight: 600; }
.control-mode.is-approved { color: #7f5a24; background: #f4ead9; }
.control-mode.is-auto { color: var(--success); background: #e5f2eb; }
.control-decision { right: 4%; top: 92px; width: 38%; padding: 17px; }
.control-decision h4 { margin-top: 8px; font-size: 14px; font-weight: 600; }
.confidence-track { height: 7px; margin-top: 13px; overflow: hidden; border-radius: 7px; background: #e9eeea; }
.confidence-track i { display: block; width: 86%; height: 100%; border-radius: inherit; background: var(--success); transform-origin: left; }
.control-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-top: 13px; padding: 4px; border-radius: 10px; background: #eef1ed; }
.control-tabs span { min-height: 29px; display: grid; place-items: center; border-radius: 8px; color: #708078; font-size: 8.5px; line-height: 1; font-weight: 600; }
.control-tabs span.is-active { color: #fff; background: var(--ink); }
.handover-note { right: 4%; bottom: 18px; width: 38%; min-height: 68px; padding: 12px 13px; display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 10px; }
.handover-note .owner { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #173f2f; background: #dfe9e2; font-size: 9px; font-weight: 600; }
.handover-note strong { display: block; font-size: 10.5px; font-weight: 600; }
.handover-note small { color: #6b7871; font-size: 8.5px; line-height: 1.35; }

@media (max-width: 620px) {
  .motion-scene { min-height: 320px; border-radius: 24px; }
  .scene-bar { height: 43px; padding-inline: 13px; }
  .ap-table { top: 56px; left: 3%; right: 3%; gap: 6px; padding: 10px 11px 60px; }
  .ap-head { display: none; }
  .ap-row { grid-template-columns: 1fr .38fr 1.1fr; gap: 7px; }
  .ap-receipt { left: 7%; right: 7%; width: auto; }
  .context-ticket { left: 4%; width: 54%; }
  .context-hub { left: 46%; top: 146px; }
  .context-source-stack { right: 4%; width: 39%; }
  .context-summary { left: 8%; right: 4%; }
  .skill-node.when { left: 4%; width: 36%; }
  .skill-node.fetch { left: 30%; width: 36%; }
  .skill-node.do, .skill-node.hold { right: 4%; width: 31%; }
  .action-order-card { left: 4%; width: 57%; }
  .action-system-stack { right: 4%; width: 36%; }
  .action-approval-card { left: 7%; right: 4%; }
  .journey-motion { width: 94%; min-height: 350px; }
  .journey-understand .understand-message { left: 4%; width: 51%; }
  .understand-panel { right: 4%; width: 38%; }
  .understand-focus { left: 4%; right: auto; width: 51%; }
  .journey-data .data-source-stack { left: 4%; width: 32%; }
  .answer-draft { right: 4%; width: 56%; }
  .journey-control .control-ledger { left: 4%; width: 49%; }
  .control-decision, .handover-note { right: 4%; width: 38%; }
}

/* Journey */
.journey-head { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 60px; margin-bottom: 56px; }
.journey-head h2 { margin-top: 0; max-width: 15ch; font-size: clamp(42px, 4.7vw, 66px); }
.journey-head p { max-width: 500px; padding-bottom: 8px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.journey-stack { display: grid; gap: 22px; }
.journey-intro { margin-bottom: 54px; }
.journey-card {
  position: relative;
  min-height: 510px;
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(480px, 1.18fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(22, 25, 31, .07);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #f4f6f1, #edf1ec);
  box-shadow: 0 18px 48px rgba(16, 32, 25, .045);
}
.journey-card:nth-child(even) { grid-template-columns: minmax(480px, 1.18fr) minmax(320px, .82fr); }
.journey-card:nth-child(even) .journey-copy { order: 2; }
.journey-card:nth-child(even) .journey-visual { order: 1; }
.journey-copy { padding: clamp(42px, 5vw, 72px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.journey-copy h3 { max-width: 12ch; margin-top: 0; font-size: clamp(32px, 3.15vw, 47px); }
.journey-copy > p { max-width: 440px; margin-top: 20px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.value-list { display: grid; gap: 10px; width: 100%; margin-top: 27px; }
.value-item { display: grid; grid-template-columns: 23px 1fr; align-items: start; gap: 10px; color: #444b56; font-size: 13px; font-weight: 600; }
.value-item svg { display: none; }
.value-item::before { content: ""; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--accent-2); }
.value-item { grid-template-columns: 6px 1fr; gap: 13px; font-weight: 500; }
.value-outcome { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; padding: 9px 12px; border-radius: 999px; background: var(--soft-blue); color: var(--accent); font-size: 11px; font-weight: 800; }
.value-outcome::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.journey-visual { position: relative; min-height: 430px; display: grid; place-items: center; padding: clamp(28px, 3.6vw, 58px); overflow: hidden; background: linear-gradient(145deg, #f8f7f3, #efefe9); }
.journey-visual::before { content: ""; position: absolute; inset: 10% 12%; border-radius: 50%; background: rgba(142, 214, 174, .14); filter: blur(54px); }
.journey-visual .lottie-host { position: relative; z-index: 1; width: min(94%, 680px); height: min(86%, 410px); }
.ui-card { position: absolute; background: rgba(255,255,255,.95); border: 1px solid rgba(22,25,31,.08); border-radius: 18px; box-shadow: var(--shadow-ui); }
.mail-card { top: 18%; left: 9%; width: 54%; padding: 16px; animation: float-a 7s ease-in-out infinite; }
.mail-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #eadfce; color: #7c5621; font-size: 9px; font-weight: 800; }
.mail-meta strong { font-size: 11px; }
.mail-meta span { margin-left: auto; color: #8c929b; font-size: 9px; }
.mail-card p { color: #4f5661; font-size: 12px; line-height: 1.55; }
.classification-card { right: 8%; bottom: 15%; width: 48%; overflow: hidden; animation: float-b 8s ease-in-out infinite; }
.classification-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 800; }
.speed { color: var(--success); }
.classification-body { display: grid; gap: 8px; padding: 13px 14px 15px; }
.classification-row { display: flex; justify-content: space-between; gap: 12px; color: #777e88; font-size: 10.5px; }
.classification-row strong { color: var(--ink); }
.priority-bar { height: 6px; overflow: hidden; border-radius: 999px; background: #e9ebef; }
.priority-bar span { display: block; height: 100%; width: 74%; border-radius: inherit; background: var(--accent); animation: meter 7s cubic-bezier(.16,1,.3,1) infinite; }

.order-card { top: 12%; right: 8%; width: 44%; padding: 15px; animation: float-a 8s ease-in-out infinite; }
.order-head { display: flex; align-items: center; gap: 10px; }
.product-thumb { width: 40px; height: 40px; border-radius: 9px; background: repeating-linear-gradient(135deg,#e8e4dc 0 6px,#f6f3ee 6px 12px); }
.order-head strong { display: block; font-size: 11px; }
.order-head small { color: #848a94; font-size: 9px; }
.order-grid { display: grid; gap: 7px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }
.order-row { display: flex; justify-content: space-between; color: #7a818c; font-size: 10px; }
.order-row strong { color: var(--ink); }
.answer-card { left: 7%; bottom: 10%; width: 59%; overflow: hidden; animation: float-b 9s ease-in-out infinite; }
.answer-head { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 800; }
.answer-body { display: grid; gap: 6px; padding: 14px; color: #515862; font-size: 11px; line-height: 1.55; }
.answer-source { display: inline; padding: 1px 4px; border-radius: 4px; color: var(--success); background: #e7f3ed; }
.source-strip { display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line); }
.source-chip { padding: 4px 7px; border-radius: 5px; background: #f1f3f6; color: #6a717c; font-size: 8.5px; font-weight: 800; }

.policy-card { top: 13%; left: 7%; width: 54%; padding: 16px; animation: float-a 8s ease-in-out infinite; }
.policy-title { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; font-weight: 800; }
.policy-title span { color: var(--success); }
.confidence { margin-top: 14px; }
.confidence-meta { display: flex; justify-content: space-between; margin-bottom: 7px; color: #7a808a; font-size: 10px; }
.confidence-meta strong { color: var(--success); }
.confidence-bar { height: 8px; overflow: hidden; border-radius: 999px; background: #e7eaee; }
.confidence-bar span { display: block; height: 100%; width: 86%; border-radius: inherit; background: var(--success); animation: meter-wide 8s cubic-bezier(.16,1,.3,1) infinite; }
.policy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 14px; }
.mini-action { padding: 8px 6px; border-radius: 8px; text-align: center; background: #f1f3f5; color: #565d68; font-size: 9px; font-weight: 800; }
.mini-action.active { color: white; background: var(--ink); }
.handover-card { right: 7%; bottom: 12%; width: 50%; padding: 15px; animation: float-b 8.5s ease-in-out infinite; }
.handover-status { display: inline-flex; align-items: center; gap: 6px; color: var(--warning); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.handover-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.handover-card h4 { margin: 9px 0 5px; font-size: 12px; }
.handover-card p { color: #69707a; font-size: 10px; line-height: 1.5; }
.handover-owner { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 9px; font-weight: 700; }
.owner-dot { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #dfe9e2; color: #173f2f; font-size: 8px; }

/* Product proof */
.proof-section { padding-top: 0; }
.proof-panel { overflow: hidden; border-radius: var(--radius-lg); background: linear-gradient(145deg, #102019, #0b1812); color: white; box-shadow: 0 36px 90px rgba(12, 31, 22, .16); }
.proof-top { display: grid; grid-template-columns: 1.22fr .78fr; gap: clamp(36px, 5vw, 72px); padding: 76px; border-bottom: 1px solid rgba(255,255,255,.1); }
.proof-top h2 { max-width: 18ch; font-size: var(--fs-display-2); }
.proof-top p { align-self: end; max-width: 480px; color: #adb3bf; font-size: 16px; line-height: 1.7; }
.proof-grid { display: grid; grid-template-columns: 1.25fr .75fr 1fr; }
.proof-feature { min-height: 220px; padding: 34px; border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.proof-feature:nth-child(3n) { border-right: 0; }
.proof-feature h3 { min-height: 50px; margin-top: 44px; font-size: 20px; letter-spacing: -.015em; line-height: 1.25; }
.proof-feature p { max-width: 35ch; margin-top: 10px; color: #aeb4bf; font-size: 13px; line-height: 1.6; }
.feature-icon { width: 32px; height: 32px; color: #8ed6ae; }

/* Pricing */
.pricing { background: #eef1ed; }
.pricing-head { display: grid; grid-template-columns: 1.22fr .78fr; gap: clamp(36px, 5vw, 72px); align-items: end; margin-bottom: 48px; }
.pricing-head h2 { max-width: 18ch; margin-top: 0; font-size: var(--fs-display-2); }
.pricing-head h2 span { color: var(--accent); }
.pricing-head p { max-width: 500px; padding-bottom: 8px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.pricing-core { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.price-card {
  position: relative;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid rgba(22,25,31,.09);
  border-radius: 24px;
  background: white;
  box-shadow: 0 18px 46px rgba(31, 39, 57, .055);
  transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease;
}
.price-card:hover { transform: translateY(-5px); box-shadow: 0 25px 55px rgba(31,39,57,.1); }
.price-card.featured { color: white; background: linear-gradient(155deg, #102019, #0b1812); margin-block: -14px; padding-block: 42px; box-shadow: 0 28px 64px rgba(16,32,25,.22); }
.price-card.featured:hover { transform: translateY(-5px); box-shadow: 0 34px 74px rgba(16,32,25,.28); }
.popular { position: absolute; top: 31px; right: 17px; padding: 6px 9px; border-radius: 999px; color: var(--ink); background: var(--accent-2); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.plan-name { font-size: 13px; font-weight: 800; }
.plan-volume { margin-top: 7px; color: #7a808a; font-size: 11px; }
.featured .plan-volume { color: #aeb5c1; }
.plan-price { display: flex; align-items: baseline; gap: 5px; margin-top: 28px; }
.plan-price strong { font-size: clamp(30px, 2.5vw, 39px); letter-spacing: -.055em; }
.plan-price span { color: #7a808a; font-size: 11px; }
.featured .plan-price span { color: #aeb5c1; }
.plan-note { min-height: 38px; margin-top: 10px; color: #707782; font-size: 11px; line-height: 1.55; }
.featured .plan-note { color: #abb2be; }
.plan-features { display: grid; gap: 11px; margin: 25px 0 27px; padding-top: 20px; border-top: 1px solid var(--line); }
.featured .plan-features { border-color: rgba(255,255,255,.14); }
.plan-feature { display: grid; grid-template-columns: 17px 1fr; gap: 8px; font-size: 11px; }
.plan-feature svg { width: 15px; height: 15px; color: var(--success); }
.featured .plan-feature svg { color: #6ed4a7; }
.price-card .button { width: 100%; margin-top: auto; min-height: 46px; }
.featured .button { background: white; color: var(--ink); }
.price-edges { display: grid; grid-template-columns: .82fr 1.18fr; gap: 14px; margin-top: 14px; }
.edge-plan { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 26px 28px; border: 1px solid rgba(22,25,31,.09); border-radius: 20px; background: rgba(255,255,255,.75); }
.edge-plan h3 { font-size: 18px; letter-spacing: -.015em; line-height: 1.25; }
.edge-plan p { margin-top: 6px; color: #737985; font-size: 11px; }
.edge-price { text-align: right; }
.edge-price strong { display: block; font-size: 20px; letter-spacing: -.04em; }
.edge-price span { color: #777e88; font-size: 10px; }

/* CTA and footer */
.cta-section { padding: 28px 0 34px; }
.cta-panel {
  position: relative;
  min-height: 430px;
  display: grid;
  grid-template-columns: 1fr .78fr;
  align-items: center;
  gap: 40px;
  padding: clamp(52px, 6vw, 88px);
  overflow: hidden;
  border-radius: 36px;
  color: white;
  background: linear-gradient(135deg, #123d2c 0%, #0b2f22 100%);
  isolation: isolate;
}
.cta-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .28; background: radial-gradient(circle at 78% 30%, rgba(142, 214, 174, .34), transparent 26%), linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: auto, 42px 42px, 42px 42px; }
.cta-panel h2 { max-width: 16ch; font-size: var(--fs-display-2); }
.cta-copy p { max-width: 510px; margin-top: 20px; color: #d9e7de; font-size: 16px; line-height: 1.65; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.cta-visual { position: relative; min-height: 250px; }
.cta-ticket { position: absolute; width: min(335px, 86%); padding: 18px; border: 1px solid rgba(255,255,255,.28); border-radius: 18px; color: var(--ink); background: rgba(255,255,255,.93); box-shadow: 0 28px 60px rgba(11,48,34,.24), inset 0 1px 0 rgba(255,255,255,.95); }
.cta-ticket:first-child { top: 0; left: 0; transform: rotate(-3deg); }
.cta-ticket:last-child { right: 0; bottom: 0; transform: rotate(2deg); }
.ticket-meta { display: flex; justify-content: space-between; gap: 10px; color: #838995; font-size: 9px; }
.ticket-title { margin-top: 9px; font-size: 13px; font-weight: 800; }
.ticket-status { display: inline-flex; margin-top: 12px; padding: 5px 8px; border-radius: 999px; color: var(--success); background: #e6f2ec; font-size: 9px; font-weight: 800; }
.site-footer { padding: 28px 0 48px; }
.footer-inner { display: grid; grid-template-columns: 1.3fr repeat(3, .7fr); gap: 50px; padding: 42px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.footer-brand p { max-width: 300px; margin-top: 14px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.footer-col h3 { font-size: 11px; letter-spacing: .02em; line-height: 1.3; }
.footer-col nav { display: grid; gap: 10px; margin-top: 15px; }
.footer-col a { color: #69707b; font-size: 12px; }
.footer-col a:hover { color: var(--accent); }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 18px; color: #858b95; font-size: 10.5px; }

/* Reveal and motion */
/* Sections settle in as they come into view. The starting state is scoped to
   .js-motion, which only exists once the observer is running and only when the
   visitor has not asked for reduced motion -- so nothing can be left invisible
   by a script that failed to load. */
.reveal { opacity: 1; transform: none; }
.js-motion .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .55s cubic-bezier(.16, 1, .3, 1); }
.js-motion .reveal.is-in { opacity: 1; transform: none; }
@keyframes incoming-card { 0%, 4%, 96%, 100% { opacity: 0; transform: translate3d(12px, 8px, 0) scale(.98); } 10%, 90% { opacity: 1; transform: none; } }
@keyframes processor-card { 0%, 18%, 96%, 100% { opacity: 0; transform: translate3d(0, 9px, 0) scale(.96); } 25%, 90% { opacity: 1; transform: none; } }
@keyframes result-card { 0%, 48%, 96%, 100% { opacity: 0; transform: translate3d(10px, 10px, 0) scale(.98); } 57%, 90% { opacity: 1; transform: none; } }
@keyframes flow-line { 0%, 14% { stroke-dashoffset: 1; opacity: 0; } 20% { opacity: 1; } 34%, 90% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes flow-line-two { 0%, 39% { stroke-dashoffset: 1; opacity: 0; } 45% { opacity: 1; } 57%, 90% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes status-cycle { 0%, 18%, 100% { opacity: 0; transform: translateY(6px); } 23%, 31% { opacity: 1; transform: none; } 36% { opacity: 0; transform: translateY(-5px); } }
@keyframes result-check { 0%, 57% { opacity: 0; transform: scale(.65); } 62%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes processor-pulse { 0%, 100% { opacity: .35; transform: scale(.92); } 50% { opacity: .75; transform: scale(1.04); } }
@keyframes breathe { 0%,100% { transform: scale(.9); opacity: .75; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0%,100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes float-a { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-7px,0); } }
@keyframes float-b { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,8px,0); } }
@keyframes meter { 0%,8% { transform: scaleX(.05); } 38%,86% { transform: scaleX(1); } 100% { transform: scaleX(.05); } }
@keyframes meter-wide { 0%,8% { transform: scaleX(.05); } 40%,88% { transform: scaleX(1); } 100% { transform: scaleX(.05); } }
.priority-bar span, .confidence-bar span { transform-origin: left; }

@media (max-width: 1100px) {
  .hero-frame { grid-template-columns: .9fr 1.1fr; gap: 34px; padding: 52px 46px; }
  .hero h1 { font-size: clamp(45px, 5.4vw, 62px); }
  .hero-media { min-height: 540px; }
  .bento-card { min-height: 505px; padding: 32px; }
  .bento-copy h3 { font-size: 31px; }
  .journey-card, .journey-card:nth-child(even) { grid-template-columns: .9fr 1.1fr; }
  .pricing-core { grid-template-columns: repeat(2, 1fr); }
  .price-card.featured { margin-block: 0; padding-block: 28px; }
  .price-card.featured:hover { transform: translateY(-5px); }
  .popular { top: 17px; }
  .proof-top { padding: 58px; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .proof-feature:nth-child(3n) { border-right: 1px solid rgba(255,255,255,.1); }
  .proof-feature:nth-child(2n) { border-right: 0; }
}
@media (max-width: 860px) {
  .section { padding: var(--space-section) 0; }
  .section-intro { grid-template-columns: 1fr; gap: 22px; margin-bottom: 38px; }
  .section-intro h2 { max-width: 17ch; }
  .nav-links { display: none; }
  .nav-login { display: none; }
  .nav-toggle { display: grid; }
  .mobile-nav:not([hidden]) { display: grid; }
  /* The sheet eases open from the toggle rather than snapping in. `hidden`
     still gates it, so with JS off it simply never appears. */
  .mobile-nav {
    opacity: 0;
    transform: translateY(-8px) scale(.985);
    transform-origin: top center;
    transition: opacity .22s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
  }
  .mobile-nav.is-open { opacity: 1; transform: none; }
  .mobile-nav > * {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .24s ease, transform .28s cubic-bezier(.16, 1, .3, 1);
  }
  .mobile-nav.is-open > * { opacity: 1; transform: none; }
  .mobile-nav.is-open > *:nth-child(1) { transition-delay: .04s; }
  .mobile-nav.is-open > *:nth-child(2) { transition-delay: .07s; }
  .mobile-nav.is-open > *:nth-child(3) { transition-delay: .10s; }
  .mobile-nav.is-open > *:nth-child(4) { transition-delay: .13s; }
  .mobile-nav.is-open > *:nth-child(5) { transition-delay: .16s; }
  .mobile-nav.is-open > *:nth-child(n+6) { transition-delay: .19s; }
  .hero-frame { min-height: auto; grid-template-columns: 1fr; gap: 45px; padding: 54px 28px 28px; }
  .hero-frame { min-height: 980px; align-content: space-between; }
  .hero-frame::after { background: linear-gradient(180deg, rgba(9,14,20,.93) 0%, rgba(9,14,20,.87) 30%, rgba(9,14,20,.79) 55%, rgba(9,14,20,.44) 76%, rgba(9,14,20,.58) 100%); }
  .hero-copy { max-width: 620px; }
  .hero h1 { max-width: 15ch; font-size: clamp(44px, 9vw, 62px); }
  .hero-media { min-height: 520px; }
  .integration-head { grid-template-columns: 1fr; gap: 22px; }
  .integration-head h2 { max-width: 26ch; }
  .integration-track { animation-duration: 40s; }
  .bento-card:nth-child(n) { grid-column: 1 / -1; }
  .bento-card { min-height: 510px; }
  .bento-card { min-height: 0; }
  .bento-stage { min-height: 330px; }
  .bento-copy { max-width: 620px; }
  .journey-head, .pricing-head, .proof-top, .cta-panel { grid-template-columns: 1fr; gap: 25px; }
  .journey-card, .journey-card:nth-child(even) { grid-template-columns: 1fr; }
  .journey-card:nth-child(even) .journey-copy, .journey-card:nth-child(even) .journey-visual { order: initial; }
  .journey-visual { min-height: 470px; }
  .journey-copy h3 { max-width: 16ch; }
  .pricing-head h2 { max-width: 15ch; }
  .price-edges { grid-template-columns: 1fr; }
  .proof-top { padding: 48px 34px; }
  .proof-panel { border-radius: 28px; }
  .cta-panel { padding: 54px 34px; }
  .cta-visual { min-height: 310px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .page-shell { width: min(100% - 18px, 1440px); }
  .content-shell { width: min(100% - 28px, 1220px); }
  .site-header { top: 6px; padding-top: 6px; }
  .nav-wrap { width: calc(100% - 14px); min-height: 58px; padding-left: 14px; }
  .brand span { font-size: 16px; }
  .nav-login { display: none; }
  .nav-demo { min-height: 44px; padding-inline: 16px; }
  .hero { padding-top: 14px; }
  .hero-frame { min-height: 1040px; border-radius: 25px; padding: 46px 20px 20px; }
  .hero h1 { font-size: clamp(41px, 13.2vw, 58px); }
  .hero-lead { font-size: 16px; }
  .hero-actions .button { width: 100%; }
  .hero-proof { gap: 10px; }
  .hero-frame::before { background-position: 56% center; }
  .hero-media { min-height: 510px; }
  .hero-flow { inset: 10px 0 0; min-height: 500px; }
  .flow-incoming { right: 0; width: min(340px, 82%); }
  .flow-processor { top: 216px; right: 18%; }
  .flow-result { right: 0; bottom: 26px; width: min(360px, 86%); }
  .integration-strip { padding-top: var(--space-section-tight); }
  .integration-head { margin-bottom: 28px; }
  .integration-head h2 { font-size: 21px; }
  .integration-head p { font-size: 15px; }
  .integration-viewport { width: calc(100% + 28px); margin-left: -14px; }
  .integration-track { animation-duration: 34s; }
  .integration-set { gap: 38px; padding-right: 38px; }
  .integration-item { flex-basis: 116px; min-height: 68px; padding: 6px 0; }
  .integration-logo img { width: 104px; height: 34px; }
  .integration-logo img.icon { width: 34px; height: 34px; }
  .integration-logo img.app-icon { width: 36px; height: 36px; }
  .bento-section { padding: var(--space-section-tight) 0 var(--space-section); }
  .bento-grid { gap: 14px; }
  .bento-card { padding: 27px 23px; border-radius: 24px; }
  .bento-copy h3 { font-size: 30px; }
  .bento-copy p { font-size: 13px; }
  .bento-stage { min-height: 320px; margin-top: 24px; }
  .journey-head h2, .pricing-head h2 { font-size: clamp(34px, 10.5vw, 48px); }
  .journey-card { min-height: 0; border-radius: 24px; }
  .journey-copy { padding: 36px 25px; }
  .journey-copy h3 { font-size: 34px; }
  .journey-visual { min-height: 0; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-feature, .proof-feature:nth-child(3n), .proof-feature:nth-child(2n) { min-height: 190px; border-right: 0; }
  .proof-feature h3 { margin-top: 30px; }
  .pricing-core { grid-template-columns: 1fr; }
  .price-card { min-height: 420px; }
  .edge-plan { grid-template-columns: 1fr; }
  .edge-price { text-align: left; }
  .cta-panel { border-radius: 25px; padding: 46px 24px; }
  .cta-panel h2 { font-size: clamp(34px, 10.5vw, 48px); }
  .cta-actions .button { width: 100%; }
  .cta-visual { min-height: 335px; }
  .cta-ticket { width: 90%; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .footer-base { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-motion .reveal, .mobile-nav, .mobile-nav > * { opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .flow-incoming, .flow-processor, .flow-result, .flow-caption, .result-check { opacity: 1; transform: none; }
  .flow-line-active { stroke-dashoffset: 0; opacity: 1; }
  .processor-status span { opacity: 0; }
  .processor-status span:last-child { opacity: 1; transform: none; }
  .integration-viewport { overflow-x: auto; mask-image: none; -webkit-mask-image: none; scrollbar-width: none; }
  .integration-viewport::-webkit-scrollbar { display: none; }
  .integration-track { animation: none !important; }
  .integration-set[aria-hidden="true"] { display: none; }
}

/* Open motion compositions — no framed app windows */
.motion-scene, .motion-scene.is-light {
  overflow: visible;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}
.motion-scene::before, .motion-scene.is-light::before { display: none; }
.scene-bar { display: none; }
.scene-panel, .is-light .scene-panel {
  color: var(--ink);
  border-color: rgba(16,32,25,.09);
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 16px 34px rgba(16,32,25,.09), inset 0 1px 0 #fff;
}
.scene-copy, .is-light .scene-copy { color: #65716b; }
.scene-kicker, .is-light .scene-kicker { color: #8a632f; }
.scene-check { color: var(--success); }
.scene-connector { stroke: rgba(31,104,78,.58); }
.scene-connector.success { stroke: #1f684e; }

.motion-scene .ap-table {
  top: 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ap-row {
  border: 1px solid rgba(16,32,25,.08);
  border-radius: 16px;
  color: var(--ink);
  background: rgba(255,255,255,.93);
  box-shadow: 0 10px 24px rgba(16,32,25,.07);
}
.ap-score, .ap-mode span { color: #69766f; }
.ap-mode { background: #edf1ed; }
.ap-thumb { background: #fff; box-shadow: 0 4px 10px rgba(16,32,25,.12); }

.context-ticket { top: 18px; }
.context-hub { top: 62px; }
.context-source-stack { top: 14px; }
.context-summary .summary-line { background: #dce4df; }

.skill-scene .scene-bar { display: none; }
.skill-node.when, .skill-node.do { top: 20px; }
.skill-node.fetch { top: 130px; }
.skill-port { border-color: #fff; background: var(--success); box-shadow: 0 0 0 4px rgba(31,104,78,.12); }
.skill-token-dot { background: var(--success); box-shadow: 0 0 0 6px rgba(31,104,78,.11); }

.action-order-card, .action-system-stack { top: 18px; }
.action-system {
  min-width: 0;
  grid-template-columns: 28px minmax(0,1fr) 18px;
  color: var(--ink);
  border: 1px solid rgba(16,32,25,.09);
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 25px rgba(16,32,25,.08);
}
.action-system strong, .action-system small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.action-system small { color: #718078; }

.journey-understand .understand-message, .understand-panel,
.journey-data .data-source-stack, .answer-draft,
.journey-control .control-ledger { top: 18px; }
.control-decision { top: 34px; }

@media (max-width: 620px) {
  .context-ticket { width: 52%; }
  .context-hub { display: none; }
  .skill-node.when, .skill-node.do { top: 18px; width: 40%; }
  .skill-node.when { left: 4%; }
  .skill-node.do { right: 4%; }
  .skill-node.fetch, .skill-node.hold { top: 150px; bottom: auto; width: 40%; }
  .skill-node.fetch { left: 4%; }
  .skill-node.hold { right: 4%; }
  .skill-scene .skill-lines { opacity: .38; }
  .action-order-card { width: 53%; }
  .action-system-stack { width: 38%; }
  .journey-control { min-height: 590px; }
  .journey-card:has(.journey-control) .journey-visual { min-height: 640px; }
  .journey-control .control-ledger {
    left: 4%; right: 4%; top: 18px; bottom: auto; width: auto;
  }
  .journey-control .control-decision {
    left: 4%; right: 4%; top: 310px; width: auto;
  }
  .journey-control .handover-note {
    left: 4%; right: 4%; bottom: 18px; width: auto;
  }
}

/* Stable, fully composed motion scenes */
.context-lines, .action-lines, .journey-data .data-lines { display: none; }
.context-ticket {
  left: 5%; right: 5%; top: 8px; width: auto; padding: 14px 16px;
}
.context-hub { display: none; }
.context-source-stack {
  left: 5%; right: 5%; top: 106px; width: auto;
  grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px;
}
.context-source-row {
  position: relative; min-height: 66px;
  grid-template-columns: 28px minmax(0,1fr); gap: 7px;
  padding: 10px; border-radius: 18px;
}
.context-source-row .scene-logo { width: 28px; height: 28px; border-radius: 9px; }
.context-source-row .scene-logo img { max-width: 21px; max-height: 21px; }
.context-source-row em { position: absolute; top: 9px; right: 9px; font-size: 7.5px; }
.context-summary { left: 5%; right: 5%; bottom: 8px; min-height: 60px; }

.skill-node { width: 22%; min-height: 78px; }
.skill-node.when, .skill-node.fetch, .skill-node.do, .skill-node.hold { top: 92px; bottom: auto; }
.skill-node.when { left: 3%; }
.skill-node.fetch { left: 27%; }
.skill-node.do { left: 51%; right: auto; }
.skill-node.hold { right: 3%; }
.skill-node.do .skill-port { left: auto; right: -5px; }
.skill-node.hold .skill-port { left: -5px; right: auto; }
.skill-token-dot { display: none; }

.action-lines { display: none; }
.action-order-card { left: 5%; top: 24px; width: 56%; }
.action-system-stack { right: 5%; top: 24px; width: 32%; }
.action-approval-card { left: 12%; right: 5%; bottom: 22px; }

.journey-motion.journey-understand,
.journey-motion.journey-data { height: min(78%, 350px); min-height: 320px; }
.journey-motion.journey-understand { height: min(90%, 400px); min-height: 385px; }
.understand-focus {
  bottom: 28px; color: var(--ink);
  border: 1px solid rgba(16,32,25,.09);
  background: rgba(255,255,255,.96);
  box-shadow: 0 16px 34px rgba(16,32,25,.09), inset 0 1px 0 #fff;
}
.understand-focus small { color: #65716b; letter-spacing: 0; }
.understand-focus::after {
  content: "✓"; margin-left: auto; flex: 0 0 auto;
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 10px; color: #fff; background: var(--success);
  font-size: 14px; font-weight: 500;
}

.journey-data .data-source-stack { top: 52px; }
.answer-draft {
  top: 32px; bottom: auto; min-height: 238px;
}
.answer-draft h4 { margin: 13px 0 0; }

@media (max-width: 620px) {
  .context-ticket { left: 4%; right: 4%; width: auto; }
  .context-source-stack { left: 4%; right: 4%; width: auto; gap: 6px; }
  .context-source-row { min-height: 62px; padding: 8px; grid-template-columns: minmax(0,1fr); gap: 5px; align-content: center; justify-items: start; }
  .context-source-row .scene-logo { width: 25px; height: 25px; }
  .context-source-row strong { font-size: 9px; white-space: normal; overflow: visible; line-height: 1.25; }
  .context-source-row small, .context-source-row em { display: none; }
  .context-summary { left: 4%; right: 4%; }
  .skill-lines { display: none; }
  .skill-node.when, .skill-node.do { top: 18px; width: 40%; }
  .skill-node.fetch, .skill-node.hold { top: 150px; width: 40%; }
  .skill-node.when, .skill-node.fetch { left: 4%; }
  .skill-node.do, .skill-node.hold { left: auto; right: 4%; }
  .action-order-card { left: 4%; width: 53%; }
  .action-system-stack { right: 4%; width: 38%; }
  .action-approval-card { left: 7%; right: 4%; }
  .journey-motion.journey-understand { min-height: 350px; }
  .journey-motion.journey-data { min-height: 410px; }
  .journey-motion.journey-understand { height: min(87%, 370px); }
  .understand-focus { left: 4%; right: auto; width: 51%; bottom: 18px; }
  .journey-data .data-source-stack { top: 55px; }
  .data-source { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 8px 9px; min-height: 50px; }
  .data-source i { display: none; }
  .answer-draft { top: 34px; min-height: 250px; }
}

.case-loop-section { padding: var(--space-section-tight) 0 var(--space-section); }
.case-loop-head {
  display: grid; grid-template-columns: minmax(0,1.22fr) minmax(300px,.78fr);
  align-items: end; gap: clamp(32px,5vw,72px); margin-bottom: 42px;
}
.case-loop-head h2 { max-width: 19ch; font-size: var(--fs-display-2); }
.case-loop-head p { max-width: 520px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.case-loop-viewport { width: min(100%,920px); margin-inline: auto; border-radius: 30px; background: transparent; }
@media (max-width: 760px) {
  .case-loop-section { padding: var(--space-section-tight) 0 var(--space-section); }
  .case-loop-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; }
  .case-loop-head h2 { font-size: clamp(34px,10.5vw,48px); }
  .case-loop-head p { font-size: 15px; }
  .case-loop-viewport { border-radius: 22px; }
}

/* One coherent workflow, rather than a cluster of floating cards */
.skill-workflow {
  position: absolute;
  inset: 22px 5% 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) 68px;
  color: var(--ink);
}
.workflow-rail {
  position: absolute;
  z-index: 1;
  top: 66px;
  left: 16.666%;
  right: 16.666%;
  height: 1px;
  background: rgba(31, 104, 78, .25);
}
.workflow-token {
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  border: 2px solid #f7f7f2;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 5px rgba(31, 104, 78, .12);
  transform: translate(-50%, -50%);
}
.workflow-step {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 0 16px 12px;
  border-left: 1px solid rgba(16, 32, 25, .09);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0);
}
.workflow-step:first-of-type { border-left: 0; }
.workflow-step::before {
  content: "";
  position: absolute;
  top: 60px;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 2px solid #f7f7f2;
  border-radius: 50%;
  background: #9bbcaf;
  box-shadow: 0 0 0 1px rgba(31, 104, 78, .22);
  transform: translate(-50%, -50%);
}
.workflow-meta {
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #68746e;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.workflow-meta span {
  color: rgba(16, 32, 25, .38);
  font-size: 8.5px;
  font-variant-numeric: tabular-nums;
}
.workflow-meta em {
  color: #8a632f;
  font-style: normal;
  font-weight: 500;
}
.workflow-step h4 {
  margin: 54px 0 0;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.workflow-step p {
  margin: 5px 0 0;
  color: #748079;
  font-size: 10.5px;
  line-height: 1.35;
}
.workflow-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}
.workflow-sources span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #59655f;
  font-size: 9px;
  line-height: 1;
}
.workflow-sources img {
  width: 17px;
  height: 17px;
  object-fit: contain;
}
.workflow-result {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  padding: 5px 7px;
  border-radius: 9px;
  color: var(--success);
  background: rgba(31, 104, 78, .08);
  font-size: 9px;
  line-height: 1;
}
.workflow-result::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.workflow-exception {
  grid-column: 1 / -1;
  align-self: end;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 4px;
  margin: 0 16px;
  padding: 13px 0 0;
  border-top: 1px solid rgba(16, 32, 25, .11);
  color: #6a756f;
  font-size: 9px;
  line-height: 1.2;
}
.workflow-exception strong {
  color: var(--ink);
  font-size: 11px;
  line-height: 1.25;
}
.workflow-exception i {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  color: #8a632f;
  font-size: 8px;
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .skill-workflow {
    inset: 9px 5% 7px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(61px, 1fr)) 58px;
  }
  .workflow-rail {
    top: 27px;
    bottom: 82px;
    left: 17px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .workflow-step {
    min-height: 0;
    padding: 8px 0 7px 46px;
    border: 0;
    border-top: 1px solid rgba(16, 32, 25, .075);
    border-radius: 13px;
  }
  .workflow-step:first-of-type { border-top: 0; }
  .workflow-step::before {
    top: 26px;
    left: 17px;
  }
  .workflow-meta { min-height: 10px; font-size: 8px; }
  .workflow-step h4 { margin-top: 6px; font-size: 12.5px; }
  .workflow-step p { margin-top: 3px; font-size: 8.5px; }
  .workflow-data-step, .workflow-step:last-of-type { padding-right: 84px; }
  .workflow-sources {
    position: absolute;
    top: 15px;
    right: 0;
    margin: 0;
    gap: 4px;
  }
  .workflow-sources span {
    width: 27px;
    height: 27px;
    justify-content: center;
    overflow: hidden;
    color: transparent;
    font-size: 0;
  }
  .workflow-sources img { width: 20px; height: 20px; }
  .workflow-result { position: absolute; top: 13px; right: 0; margin: 0; }
  .workflow-exception {
    grid-column: 1;
    margin: 0 0 0 46px;
    padding-top: 10px;
    column-gap: 10px;
  }
  .workflow-exception strong { font-size: 10px; }
  .workflow-exception i { font-size: 7px; }
}

/* Minimal premium workflow: the surrounding copy carries the explanation */
.skill-workflow {
  inset: 30px 8% 18px;
  grid-template-rows: minmax(0, 1fr) 32px;
}
.workflow-rail { top: 64px; left: 16.666%; right: 16.666%; }
.workflow-step {
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  text-align: center;
}
.workflow-step::before { top: 64px; }
.workflow-meta {
  min-height: 12px;
  justify-content: center;
  font-size: 9px;
  letter-spacing: .08em;
}
.workflow-core {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 58px;
  color: var(--ink);
}
.workflow-core strong { font-size: 17px; line-height: 1; letter-spacing: -.035em; }
.workflow-core > span:not(:only-child) { color: #748079; font-size: 9px; line-height: 1; }
.workflow-brand-pair { gap: 9px; }
.workflow-brand-pair img { width: 27px; height: 27px; object-fit: contain; }
.workflow-brand-pair img:last-child { width: 43px; height: 20px; }
.workflow-brand-pair i { width: 12px; height: 1px; background: rgba(31,104,78,.25); }
.workflow-status span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--success);
}
.workflow-status span::before { content: "✓"; font-size: 9px; line-height: 1; }
.workflow-exception {
  grid-column: 3;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  color: #7a857f;
  font-size: 8.5px;
  line-height: 1;
}
.workflow-exception strong { font-size: 9px; line-height: 1; }
.workflow-exception i {
  grid-column: auto;
  grid-row: auto;
  color: #9d7950;
  font-size: 9px;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 620px) {
  .skill-workflow {
    inset: 10px 8% 8px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr)) 30px;
  }
  .workflow-rail {
    top: 47px;
    bottom: 77px;
    left: 18px;
    right: auto;
  }
  .workflow-step {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    padding: 0 0 0 44px;
    text-align: left;
  }
  .workflow-step::before { top: 50%; left: 18px; }
  .workflow-meta { justify-content: flex-start; }
  .workflow-core {
    min-height: 0;
    justify-content: flex-start;
    margin: 0;
  }
  .workflow-core strong { font-size: 15px; }
  .workflow-brand-pair { padding: 0; }
  .workflow-brand-pair img { width: 25px; height: 25px; }
  .workflow-brand-pair img:last-child { width: 41px; height: 18px; }
  .workflow-exception {
    grid-column: 1;
    justify-content: flex-start;
    margin-left: 98px;
  }
}

/* Skill logic map */
.skill-map { position: absolute; inset: 16px 5% 12px; color: var(--ink); }
.skill-routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.skill-routes-mobile { display: none; }
.skill-route-base, .skill-route-progress {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.skill-route-base { stroke: rgba(31,104,78,.16); stroke-width: 1.25; }
.skill-route-progress { stroke: var(--success); stroke-width: 1.75; }
.skill-map-node {
  position: absolute;
  z-index: 2;
  width: 112px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  grid-template-rows: 18px 24px;
  align-items: center;
  column-gap: 9px;
  transform: translate(-50%, -50%);
}
.skill-map-rule { left: 10%; top: 35%; }
.skill-map-read { left: 50%; top: 35%; }
.skill-map-do { left: 90%; top: 35%; }
.skill-map-human { left: 70%; top: 77%; }
.skill-map-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(16,32,25,.09);
  border-radius: 14px;
  color: var(--success);
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 24px rgba(16,32,25,.065), inset 0 1px 0 #fff;
}
.skill-map-icon svg { width: 20px; height: 20px; }
.skill-map-icon svg * { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.skill-map-node em {
  align-self: end;
  color: #4a7d66;
  font-size: 8px;
  font-style: normal;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.skill-map-node strong {
  align-self: start;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.skill-map-avatar { color: #fff; background: var(--success); font-size: 13px; }

@media (min-width: 621px) {
  .skill-map-node {
    width: 126px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
    transform: translate(-50%, -21px);
  }
  .skill-map-node em { align-self: center; margin-top: 9px; }
  .skill-map-node strong { align-self: center; margin-top: 3px; }
}

@media (max-width: 620px) {
  .skill-map { inset: 8px 3% 6px; }
  .skill-routes-desktop { display: none; }
  .skill-routes-mobile { display: block; }
  .skill-map-node {
    width: 112px;
    grid-template-columns: 38px minmax(0,1fr);
    column-gap: 9px;
    transform: translate(-19px, -21px);
  }
  .skill-map-rule { left: 17.5%; top: 16.25%; }
  .skill-map-read { left: 17.5%; top: 50%; }
  .skill-map-do { left: 17.5%; top: 83.1%; }
  .skill-map-human { left: 65%; top: 66.25%; }
  .skill-map-icon { width: 38px; height: 38px; border-radius: 13px; }
  .skill-map-icon svg { width: 18px; height: 18px; }
  .skill-map-node strong { font-size: 11.5px; }
}

/* Archivo typography pass */
body, body *, body *::before, body *::after {
  font-family: "Archivo", system-ui, sans-serif !important;
}
/* Display type carries its weight through size, so it stays at 500.
   Small headings, inline emphasis and CTAs need real weight to read. */
h1, h2, h3, h4, h5, h6 { font-weight: 500 !important; }
.proof-feature h3, .edge-plan h3, .footer-col h3, .price-card .plan-name {
  font-weight: 620 !important;
}
strong, b { font-weight: 640 !important; }
.button { font-weight: 640 !important; }
.brand { font-weight: 600 !important; letter-spacing: -.035em; }
.skip-link, .nav-login, .flow-avatar, .flow-name, .processor-title, .result-title,
.result-action, .auto-row, .bento-state-static, .review-title, .context-person,
.skill-token, .action-order, .action-icon, .action-button, .scene-name, .scene-title,
.scene-kicker, .ap-case, .ap-score, .ap-mode span, .context-personline,
.context-question, .context-source-row em, .motion-approve, .value-outcome, .avatar,
.classification-head, .answer-head, .source-chip, .policy-title, .mini-action,
.handover-status, .popular, .plan-name, .ticket-title, .ticket-status {
  font-weight: 500 !important;
}
.nav-links a, .hero-proof, .value-item, .handover-owner, .scene-meta,
.flow-channel, .flow-time, .result-sub, .scene-copy {
  font-weight: 400 !important;
}

/* ==========================================================================
   Subpage shell — shared by autopilot.html and integrationer.html
   ========================================================================== */

.pg-hero { padding: 28px 0 0; }
.pg-hero-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 6vw, 96px) clamp(28px, 5vw, 84px) clamp(52px, 5vw, 84px);
  border-radius: 38px;
  color: var(--white);
  background: linear-gradient(150deg, #123d2c 0%, #0b2419 58%, #081c14 100%);
  isolation: isolate;
}
.pg-hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .3;
  background:
    radial-gradient(circle at 82% 22%, rgba(142, 214, 174, .34), transparent 30%),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
}
.pg-hero-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); align-items: end; gap: clamp(36px, 5vw, 80px); }
.pg-hero h1 { max-width: 20ch; font-size: clamp(38px, 4.2vw, 58px); }
.pg-hero h1 em { font-style: normal; color: var(--accent-2); }
.pg-hero-lead { max-width: 520px; padding-bottom: 6px; color: #cfdcd4; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65; }
.pg-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.pg-hero-actions .button-secondary { background: rgba(255, 255, 255, .1); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.pg-hero-actions .button-secondary:hover { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }

.pg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(142, 214, 174, .16);
  box-shadow: inset 0 0 0 1px rgba(142, 214, 174, .3);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 640;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pg-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pg-eyebrow.on-paper { background: var(--soft-blue); box-shadow: inset 0 0 0 1px rgba(18, 61, 44, .14); color: var(--accent); }

.pg-hero-stats { display: flex; flex-wrap: wrap; gap: 12px 46px; margin-top: clamp(44px, 4vw, 64px); padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .13); }
.pg-hero-stat strong { display: block; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.038em; }
.pg-hero-stat span { display: block; margin-top: 5px; max-width: 26ch; color: #a9bcb1; font-size: 12.5px; line-height: 1.5; }

/* Numbered step rail */
.pg-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; }
.pg-steps.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-step { padding: 32px 28px 36px; background: var(--paper); }
.pg-step-no { display: block; margin-bottom: 26px; color: var(--accent-2); font-size: 12px; font-weight: 640; letter-spacing: .06em; }
.pg-step h3 { font-size: 19px; letter-spacing: -.015em; line-height: 1.3; }
.pg-step p { margin-top: 11px; color: var(--muted); font-size: 13.5px; line-height: 1.62; }

/* Question / objection band */
.pg-question { border-radius: var(--radius-lg); background: var(--surface); padding: clamp(40px, 4vw, 68px); }
.pg-question-head { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(280px, .78fr); align-items: end; gap: clamp(32px, 5vw, 72px); }
.pg-question-head h2 { max-width: 18ch; font-size: var(--fs-display-3); }
.pg-question-head p { max-width: 480px; padding-bottom: 5px; color: var(--muted); font-size: 15.5px; line-height: 1.68; }
.pg-answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.pg-answer { padding: 26px; border-radius: 20px; background: var(--white); box-shadow: 0 12px 34px rgba(16, 32, 25, .045); }
.pg-answer-q { color: var(--ink); font-size: 14px; line-height: 1.45; }
.pg-answer-a { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.62; }

/* Guardrail list */
.pg-rails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; }
.pg-rail { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 26px 28px; background: var(--paper); }
.pg-rail svg { width: 20px; height: 20px; margin-top: 1px; color: var(--accent); }
.pg-rail strong { display: block; font-size: 15px; letter-spacing: -.015em; }
.pg-rail p { margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.6; }

@media (max-width: 1000px) {
  .pg-steps, .pg-steps.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-answers { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .pg-hero-inner { grid-template-columns: 1fr; gap: 26px; }
  .pg-hero h1 { max-width: 18ch; }
}
@media (max-width: 620px) {
  .pg-hero { padding-top: 14px; }
  .pg-hero-panel { border-radius: 25px; padding: 44px 22px 40px; }
  .pg-hero h1 { font-size: clamp(32px, 9.5vw, 44px); }
  .pg-steps, .pg-steps.is-three, .pg-rails { grid-template-columns: 1fr; }
  .pg-hero-stats { gap: 20px; }
  .pg-question { padding: 32px 22px; }
  .pg-question-head { grid-template-columns: 1fr; gap: 18px; }
}

/* Inline cross-links into the subpages */
.pg-inline-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--accent);
  font-weight: 640;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 rgba(18, 61, 44, .3);
  transition: box-shadow .22s ease, gap .22s cubic-bezier(.16, 1, .3, 1);
}
.pg-inline-link:hover { gap: 9px; box-shadow: inset 0 -1px 0 var(--accent); }
.pg-inline-arrow { width: 14px; height: 14px; }

@media (max-width: 860px) {
  .brand { min-height: 44px; }
  .pg-inline-link { min-height: 44px; align-items: center; padding-block: 10px; }
}

/* ==========================================================================
   Fixed-width compositions, scaled to fit their column
   ========================================================================== */

[data-scale-stage] {
  position: relative;
  width: 100%;
  overflow: hidden;
}
[data-scale-inner] {
  width: var(--base-w);
  height: var(--base-h);
  transform-origin: top left;
  transform: scale(var(--scale, 1));
}
[data-scale-inner] iframe {
  display: block;
  width: var(--base-w);
  height: var(--base-h);
  border: 0;
}

.dash-stage {
  --base-w: 1312px;
  --base-h: 772px;
  border-radius: var(--radius-lg);
  background: #0b1a13;
  box-shadow: 0 36px 90px rgba(12, 31, 22, .18);
}
.dash-stage [data-scale-inner] iframe { background: #0b1a13; }

.case-loop-viewport {
  --base-w: 920px;
  --base-h: 560px;
}
.case-loop-viewport [data-scale-inner] iframe { background: transparent; }

/* ==========================================================================
   Narrow-card mockups — bento cards get tight between 620 and 1100px, where
   the two-column grid still applies but each card is only ~480px wide.
   ========================================================================== */

@media (min-width: 621px) and (max-width: 1100px) {
  /* Three chips share the scene width; a side-by-side logo leaves 47px for a
     label needing 67px. Stack the logo above the label instead. */
  .context-source-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    align-content: center;
    justify-items: start;
  }
  .context-source-row strong,
  .context-source-row small { white-space: normal; overflow: visible; line-height: 1.25; }
  .context-source-row em { display: none; }

  /* Status columns crowded the case name out of its own row. */
  .control-case { grid-template-columns: minmax(0, 1fr) 42px 68px; gap: 7px; }
}

@media (max-width: 620px) {
  /* 28px logo + 18px status dot + gaps left 26px for text needing 37px. */
  .action-system { grid-template-columns: 24px minmax(0, 1fr); gap: 7px; padding: 7px 8px; }
  .action-system > :last-child { display: none; }
}

/* Below its breakpoint the case loop lays itself out as a portrait chain, so
   the outer scaler releases it and the iframe just takes the column width. */
[data-scale-stage].is-unscaled { height: auto; overflow: visible; }
[data-scale-stage].is-unscaled [data-scale-inner] { width: 100%; height: auto; transform: none; }
.case-loop-viewport.is-unscaled [data-scale-inner] iframe { width: 100%; height: auto; aspect-ratio: 380 / 940; }

/* ==========================================================================
   Mobile product demo — the desktop app UI scales below readability on a
   phone, so below 860px it is replaced by a portrait telling of the same case.
   ========================================================================== */

.md-demo { display: none; }

@media (max-width: 860px) {
  .dash-stage { display: none; }
  .md-demo { display: grid; gap: 10px; }
}

.md-card {
  position: relative;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(16, 32, 25, .06);
  opacity: 0;
  transform: translateY(10px);
  animation: md-in 15s cubic-bezier(.16, 1, .3, 1) infinite;
}
.md-card:nth-child(2) { animation-delay: .6s; }
.md-card:nth-child(3) { animation-delay: 3.9s; }
.md-card:nth-child(4) { animation-delay: 5.4s; }

.md-head { display: flex; align-items: center; gap: 10px; }
.md-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--accent-2-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 640;
}
.md-who { font-size: 14px; letter-spacing: -.02em; }
.md-meta { margin-top: 2px; color: var(--muted); font-size: 11px; }
.md-time { margin-left: auto; color: #949aa2; font-size: 11px; font-variant-numeric: tabular-nums; }
.md-body { margin-top: 12px; color: #4a5560; font-size: 13px; line-height: 1.55; }
.md-body b { color: var(--ink); font-weight: 640; }

.md-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 640;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.md-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Steps tick over one at a time */
.md-steps { display: grid; gap: 6px; margin-top: 13px; }
.md-step {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 11px;
  border-radius: 11px;
  background: var(--soft);
  color: #59626b;
  font-size: 12px;
  animation: 15s ease infinite;
}
.md-step i { color: #9aa2ab; font-size: 10px; font-style: normal; font-variant-numeric: tabular-nums; }
.md-step svg { width: 15px; height: 15px; color: var(--success); opacity: 0; animation: 15s ease infinite; }
.md-step:nth-child(1) { animation-name: md-step1; }
.md-step:nth-child(2) { animation-name: md-step2; }
.md-step:nth-child(3) { animation-name: md-step3; }
.md-step:nth-child(1) svg { animation-name: md-tick1; }
.md-step:nth-child(2) svg { animation-name: md-tick2; }
.md-step:nth-child(3) svg { animation-name: md-tick3; }

.md-order { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.md-swatch { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(150deg, #e8ded0, #d9cbb8); }
.md-order strong { display: block; font-size: 13px; letter-spacing: -.02em; }
.md-order span { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; }
.md-order-price { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.md-change {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.md-change b { color: var(--ink); font-weight: 640; }
.md-change em { font-style: normal; color: var(--muted); }
.md-pill {
  margin-left: auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--accent-2-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 640;
}

.md-score { display: flex; align-items: center; gap: 9px; margin-top: 13px; color: var(--success); font-size: 11.5px; font-weight: 640; }
.md-score-bar { flex: 1; height: 5px; overflow: hidden; border-radius: 999px; background: #e7eae6; }
.md-score-bar i { display: block; width: 88%; height: 100%; border-radius: inherit; background: var(--success); transform-origin: left; transform: scaleX(0); animation: md-fill 15s cubic-bezier(.16, 1, .3, 1) infinite; animation-delay: 5.8s; }

.md-approve {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  font-size: 13px;
  font-weight: 640;
  animation: md-approve 15s ease infinite;
}
.md-approve svg { width: 15px; height: 15px; }

.md-toast {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--accent);
  color: #dceee4;
  font-size: 12px;
  opacity: 0;
  transform: translateY(6px);
  animation: md-toast 15s ease infinite;
}
.md-toast::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); }

@keyframes md-in   { 0%, 2% { opacity: 0; transform: translateY(10px); } 5%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px); } }
@keyframes md-step1 { 0%, 10% { background: var(--soft); color: #59626b; } 14%, 96% { background: var(--accent-2-soft); color: var(--ink); } 100% { background: var(--soft); color: #59626b; } }
@keyframes md-step2 { 0%, 17% { background: var(--soft); color: #59626b; } 21%, 96% { background: var(--accent-2-soft); color: var(--ink); } 100% { background: var(--soft); color: #59626b; } }
@keyframes md-step3 { 0%, 24% { background: var(--soft); color: #59626b; } 28%, 96% { background: var(--accent-2-soft); color: var(--ink); } 100% { background: var(--soft); color: #59626b; } }
@keyframes md-tick1 { 0%, 11% { opacity: 0; } 15%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes md-tick2 { 0%, 18% { opacity: 0; } 22%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes md-tick3 { 0%, 25% { opacity: 0; } 29%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes md-fill { 0%, 6% { transform: scaleX(0); } 22%, 96% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes md-approve { 0%, 62% { background: var(--accent); transform: scale(1); } 66% { transform: scale(.98); } 70%, 96% { background: var(--success); transform: scale(1); } 100% { background: var(--accent); } }
@keyframes md-toast { 0%, 68% { opacity: 0; transform: translateY(6px); } 74%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }

/* ==========================================================================
   Scene rendering — the content is the original product story; only the
   presentation changes. No app chrome, no floating cards, no drop shadows,
   no tick marks. Flat surfaces, hairlines, and type do the work.
   ========================================================================== */

/* The fake app title bar was the strongest "this is a screenshot" signal. */
.motion-scene .scene-bar { display: none; }

/* Panels stop being cards and become plain regions of the scene. */
.motion-scene .scene-panel,
.motion-scene .bento-panel {
  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(16, 32, 25, .045) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.motion-scene .scene-panel-head,
.motion-scene .bento-panel-head { border-bottom: 1px solid rgba(16, 32, 25, .08); }

/* Status marks read as words, not as coloured capsules. */
.motion-scene .scene-tag,
.motion-scene .context-source-row em,
.motion-scene .ap-mode span,
.motion-scene .skill-status,
.motion-scene .bento-state-static {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Tick marks carried no information the label didn't already carry. */
.motion-scene .scene-check,
.motion-scene .receipt-icon svg { display: none; }

/* Logos keep their identity but lose the floating tile. */
.motion-scene .scene-logo {
  border: 0 !important;
  border-radius: 8px !important;
  background: rgba(16, 32, 25, .05) !important;
  box-shadow: none !important;
}

/* Connectors: invisible until the animation lights them. */
.motion-scene .scene-connector,
.motion-scene .context-lines path,
.motion-scene .skill-lines path { opacity: 0; transition: opacity .4s ease; }
.motion-scene .scene-connector.is-live,
.motion-scene .context-lines path.is-live,
.motion-scene .skill-lines path.is-live { opacity: 1; }

/* The remaining lifted pieces inside the scenes — same treatment as the panels:
   keep the shape and the content, drop the float. */
.motion-scene .ap-row,
.motion-scene .ap-thumb,
.motion-scene .context-source-row,
.motion-scene .skill-map-icon,
.motion-scene .action-system,
.motion-scene .understand-focus,
.motion-scene .data-source {
  box-shadow: none !important;
  border-color: rgba(16, 32, 25, .09) !important;
}
.motion-scene .data-source,
.motion-scene .understand-focus,
.motion-scene .context-source-row,
.motion-scene .action-system {
  background: rgba(16, 32, 25, .045) !important;
}
.motion-scene .skill-map-icon { background: rgba(16, 32, 25, .06) !important; }

/* ==========================================================================
   Scene primitives — the approved autopilot treatment, shared by all seven
   scenes. Thick bars, big figures, flat tinted rows, one dark outcome row.
   ========================================================================== */

.sc { position: relative; display: grid; align-content: center; gap: 20px; width: 100%; height: 100%; }
.sc-cap { color: var(--muted); font-size: 11px; font-weight: 640; letter-spacing: .07em; text-transform: uppercase; }
.sc-foot { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.sc-foot b { color: var(--ink); font-weight: 500; }

.sc-quote { max-width: 26ch; color: var(--ink); font-size: clamp(18px, 1.9vw, 23px); letter-spacing: -.028em; line-height: 1.35; }
.sc-quote b { font-weight: 500; box-shadow: inset 0 -8px 0 var(--accent-2-soft); }
.sc-quote-sm { max-width: 34ch; color: var(--muted); font-size: clamp(15px, 1.5vw, 17px); }
.sc-draft { max-width: 40ch; color: var(--ink); font-size: clamp(16px, 1.6vw, 19px); letter-spacing: -.025em; line-height: 1.5; }
.sc-draft em { font-style: normal; box-shadow: inset 0 -9px 0 var(--accent-2-soft); }

/* Measured rows behind a threshold rule */
.sc-field { position: relative; display: grid; gap: 18px; }
.sc-field .sc-mark { position: absolute; top: 2px; bottom: 2px; left: 80%; width: 2px; background: var(--ink); z-index: 1; }
.sc-mark b { position: absolute; top: -19px; left: 50%; translate: -50% 0; color: var(--ink); font-size: 11px; font-weight: 640; white-space: nowrap; }

.sc-row { display: grid; gap: 9px; }
.sc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.sc-label { color: var(--muted); font-size: 13.5px; }
.sc-num { display: flex; align-items: baseline; gap: 9px; color: var(--muted); font-size: clamp(24px, 2.4vw, 31px); letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.sc-num em { color: var(--muted); font-size: 10.5px; font-style: normal; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; }
.sc-row.on .sc-num { color: var(--ink); }
.sc-row.on .sc-num em { color: var(--accent); }
.sc-bar { height: 16px; overflow: hidden; border-radius: 999px; background: rgba(16, 32, 25, .07); }
.sc-bar i {
  display: block;
  height: 100%;
  width: calc(var(--v) * 1%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2), #4f9d78);
  transform: scaleX(0);
  transform-origin: left;
  animation: sc-grow 8s cubic-bezier(.16, 1, .3, 1) infinite;
}
.sc-row.on .sc-bar i { background: linear-gradient(90deg, #2f7f5e, var(--accent)); }
.sc-row:nth-of-type(2) .sc-bar i { animation-delay: .3s; }
.sc-row:nth-of-type(3) .sc-bar i { animation-delay: .6s; }
.sc-row:nth-of-type(4) .sc-bar i { animation-delay: .9s; }

/* Flat tinted rows converging on one dark outcome */
.sc-stack { display: grid; gap: 10px; }
.sc-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 14px;
  background: rgba(16, 32, 25, .06);
  opacity: 0;
  animation: sc-in 8s cubic-bezier(.16, 1, .3, 1) infinite;
}
.sc-block:nth-child(2) { animation-delay: .35s; }
.sc-block:nth-child(3) { animation-delay: .7s; }
.sc-block:nth-child(4) { animation-delay: 1.15s; }
.sc-block span { color: var(--muted); font-size: 13px; }
.sc-block b { display: flex; align-items: baseline; gap: 9px; color: var(--ink); font-size: 14.5px; font-weight: 500; letter-spacing: -.022em; text-align: right; }
.sc-block b em { color: var(--success); font-size: 10px; font-style: normal; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; }
.sc-block.is-out { min-height: 60px; background: var(--accent); }
.sc-block.is-out span { color: #9dc4b2; }
.sc-block.is-out b { color: var(--white); font-size: 15px; }

@keyframes sc-grow { 0%, 5% { transform: scaleX(0); } 30%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes sc-in { 0%, 4% { opacity: 0; transform: translateY(8px); } 16%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(8px); } }

/* The global reduced-motion rule freezes animations at their final frame,
   which for these loops is the hidden state — pin the visible state instead. */
@media (prefers-reduced-motion: reduce) {
  .sc-bar i { animation: none !important; transform: scaleX(1) !important; }
  .sc-block { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* The live product demo cannot read at phone scale, and its mobile stand-in
   is retired — the whole section goes below 860px. */
@media (max-width: 860px) {
  .dash-section { display: none; }
}

/* ==========================================================================
   Legal pages — quiet long-form reading. (Restored: this block was lost when
   the scene-v2 CSS was cut from header to EOF.)
   ========================================================================== */

.legal-hero { padding: clamp(48px, 6vw, 88px) 0 clamp(28px, 3vw, 44px); }
.legal-hero h1 { max-width: 16ch; font-size: clamp(34px, 3.8vw, 52px); }
.legal-hero .lead { max-width: 62ch; margin-top: 18px; color: var(--muted); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.7; }

.legal-grid {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px);
  padding-top: clamp(32px, 3vw, 52px);
  padding-bottom: var(--space-section);
  border-top: 1px solid var(--line);
}
.legal-toc { position: sticky; top: 96px; align-self: start; display: grid; gap: 2px; }
.toc-label { margin-bottom: 10px; color: #949aa2; font-size: 10px; font-weight: 640; letter-spacing: .07em; text-transform: uppercase; }
.legal-toc a { padding: 7px 10px; border-radius: 8px; color: var(--muted); font-size: 13px; line-height: 1.4; transition: background .2s ease, color .2s ease; }
.legal-toc a:hover { color: var(--ink); background: var(--soft); }

.legal-doc { max-width: 68ch; }
.legal-doc section { padding-bottom: 38px; }
.legal-doc section + section { padding-top: 34px; border-top: 1px solid var(--line); }
.legal-doc section[id] { scroll-margin-top: 104px; }
.legal-doc h2 {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: baseline;
  gap: 4px;
  font-size: clamp(21px, 2vw, 26px);
  letter-spacing: -.028em;
  line-height: 1.25;
}
.legal-doc h2 .n { color: var(--accent-2); font-size: 13px; font-weight: 640; letter-spacing: 0; }
.legal-doc h3 { margin-top: 26px; font-size: 16px; letter-spacing: -.02em; }
.legal-doc p { margin-top: 15px; color: #414c55; font-size: 15.5px; line-height: 1.75; }
.legal-doc h2 + p { margin-top: 18px; }
.legal-doc strong { color: var(--ink); }
.legal-doc a:not(.button) { color: var(--accent); box-shadow: inset 0 -1px 0 rgba(18, 61, 44, .3); }
.legal-doc a:not(.button):hover { box-shadow: inset 0 -1px 0 var(--accent); }
.legal-doc ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.legal-doc li { position: relative; padding-left: 26px; color: #414c55; font-size: 15px; line-height: 1.65; }
.legal-doc li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-2); }

.legal-table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 14px; }
.legal-table th { padding: 10px 12px; border-bottom: 1px solid var(--line); color: #7d848c; font-size: 10px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
.legal-table td { padding: 13px 12px; border-bottom: 1px solid rgba(16, 32, 25, .07); color: #414c55; line-height: 1.6; vertical-align: top; }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table td:first-child { color: var(--ink); }

.legal-note { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; margin-top: 26px; padding: 18px 20px; border-radius: 16px; background: var(--surface); color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.legal-note svg { width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.legal-note strong { display: block; margin-bottom: 3px; color: var(--ink); }

@media (max-width: 900px) {
  .legal-grid { grid-template-columns: 1fr; gap: 26px; }
  .legal-toc { position: static; display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
  .legal-toc a { display: flex; align-items: center; min-height: 44px; border: 1px solid var(--line); background: var(--white); }
  .toc-label { width: 100%; margin-bottom: 4px; }
  .legal-doc h2 { grid-template-columns: 34px minmax(0, 1fr); }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table thead { display: none; }
  .legal-table tr { padding: 14px 0; border-bottom: 1px solid rgba(16, 32, 25, .07); }
  .legal-table td { padding: 3px 0; border: 0; }
  .legal-table td:first-child { font-weight: 500; }
}

/* ==========================================================================
   Cookie notice — necessary-only, so it informs rather than gates.
   ========================================================================== */

.cookie-box {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 60;
  max-width: 360px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 14px 40px rgba(16, 32, 25, .12);
}
.cookie-box p { color: #414c55; font-size: 13px; line-height: 1.6; }
.cookie-box p b { color: var(--ink); font-weight: 500; }
.cookie-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.cookie-actions a { color: var(--muted); font-size: 12.5px; box-shadow: inset 0 -1px 0 rgba(16, 32, 25, .2); }
.cookie-actions a:hover { color: var(--accent); box-shadow: inset 0 -1px 0 var(--accent); }
.cookie-actions button {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  font: inherit;
  font-size: 13px;
  font-weight: 640;
  cursor: pointer;
}
.cookie-actions button:hover { background: var(--accent-dark); }
@media (max-width: 620px) {
  .cookie-box { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* Restored (lost in the same header-to-EOF cut as the legal CSS): the source
   chips' fixed chrome ate the label width on phones. */
@media (max-width: 620px) {
  .data-source { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 8px 9px; min-height: 50px; }
  .data-source i { display: none; }
}

/* On a ~272px canvas the side-by-side sources+draft are stamps. Stack the two
   original parts in flow on phones; composition unchanged above 620px. */
@media (max-width: 620px) {
  .journey-motion.journey-data { height: auto; min-height: 0; }
  .journey-data .data-source-stack { position: static; width: auto; margin-bottom: 12px; }
  .journey-data .answer-draft { position: static; width: auto; min-height: 0; }
}

/* Skill map: opaque icon tiles so route lines terminate cleanly at the nodes,
   and the avatar keeps its contrast (the flat layer had washed it out). */
.motion-scene .skill-map-icon { background: #e9ebe5 !important; }
.motion-scene .skill-map-avatar { background: var(--accent) !important; color: #fff !important; }

/* ==========================================================================
   Phone: the scene canvases are ~272-300px, far too narrow for the desktop
   two-column compositions. Stack the original parts in flow — same content
   and same order, just one column. Compositions unchanged above 620px.
   ========================================================================== */

@media (max-width: 620px) {
  /* "Hele samtalen bliver læst først" — message | panel | focus */
  .journey-motion.journey-understand { height: auto; min-height: 0; display: grid; gap: 12px; }
  .journey-understand .understand-message,
  .journey-understand .understand-panel,
  .journey-understand .understand-focus {
    position: static;
    inset: auto;
    width: auto;
    max-width: none;
  }
  .understand-panel .classification-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .understand-panel .classification-row strong { text-align: right; white-space: normal; }

  /* "Svar og handlinger godkendt samlet" — order | systems | approval */
  .action-scene { height: auto; min-height: 0; display: grid; gap: 12px; }
  .action-scene .action-order-card,
  .action-scene .action-system-stack,
  .action-scene .action-approval-card {
    position: static;
    inset: auto;
    width: auto;
    max-width: none;
  }
  .action-system-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .action-scene .motion-ripple { display: none; }
}

/* ==========================================================================
   Language and currency switches
   ========================================================================== */

.lang-switch { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--soft); }
.lang-opt { display: grid; place-items: center; min-width: 34px; min-height: 30px; padding: 0 9px; border-radius: 999px; color: #6f767e; font-size: 11.5px; font-weight: 640; letter-spacing: .03em; transition: background .2s ease, color .2s ease; }
.lang-opt:hover { color: var(--ink); }
.lang-opt.is-active { color: var(--white); background: var(--accent); }

.cur-switch { display: inline-flex; gap: 3px; margin-bottom: 22px; padding: 3px; border-radius: 999px; background: var(--soft); }
.cur-switch button { min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #6f767e; font: inherit; font-size: 12.5px; font-weight: 640; cursor: pointer; transition: background .2s ease, color .2s ease; }
.cur-switch button[aria-pressed="true"] { color: var(--white); background: var(--accent); }

/* The switch hides itself where the other language has no page, so `hidden`
   has to beat the display above. */
.lang-switch[hidden] { display: none !important; }
.mobile-nav-lang { display: none; }

@media (max-width: 860px) {
  /* On a phone the header only has room for the brand, the demo button and the
     toggle, so the switch moves into the sheet. */
  .nav-actions .lang-switch { display: none; }
  .mobile-nav-lang:not([hidden]) { display: inline-flex; justify-self: start; margin: 10px 2px 2px; }
  .lang-opt { min-height: 40px; }
  .cur-switch button { min-height: 44px; }
}