:root {
  --paper: #f2f1ed;
  --paper-bright: #fbfaf7;
  --ink: #101419;
  --ink-soft: #293038;
  --muted: #737a7e;
  --hairline: #d9d9d4;
  --ice: #a4e2ff;
  --ice-strong: #5dc8fb;
  --action: #247bb7;
  --night: #11161b;
  --night-elevated: #1a232b;
  --night-line: #33434f;
  --display: "Newsreader", "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --sans: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  z-index: 30;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.2;
  background-image: radial-gradient(rgba(16, 20, 25, 0.2) 0.42px, transparent 0.62px);
  background-size: 5px 5px;
  mix-blend-mode: multiply;
}

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

a:focus-visible,
button:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; }

.container { width: min(1240px, calc(100% - 72px)); margin-inline: auto; }

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  padding-top: 22px;
  transition: padding 300ms var(--ease-out), transform 420ms var(--ease-out);
}

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 50px;
  align-items: center;
  padding: 0 2px;
  border: 1px solid transparent;
  border-radius: 13px;
  transition: border-color 300ms ease, background 300ms ease, box-shadow 300ms ease, padding 300ms var(--ease-out);
}

.site-header.is-stuck { padding-top: 12px; }
.site-header.is-hidden { transform: translateY(-130%); }

.site-header.is-stuck .nav {
  padding: 0 13px;
  border-color: rgba(16, 20, 25, 0.12);
  background: rgba(245, 244, 239, 0.74);
  box-shadow: 0 9px 28px rgba(16, 20, 25, 0.07);
  backdrop-filter: blur(18px);
}

.brand { display: inline-flex; width: fit-content; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; letter-spacing: -0.08em; }

.brand-ring {
  position: relative;
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.brand-ring::before,
.brand-ring::after {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  content: "";
  background: var(--ink);
}

.brand-ring::before { transform: translateX(-3px); }
.brand-ring::after { transform: translateX(3px); }
.brand-ring i { display: none; }

.nav-center { display: flex; align-items: center; gap: 28px; font-size: 11px; font-weight: 650; letter-spacing: -0.01em; }

.nav-center a { position: relative; padding: 8px 0; }
.nav-center a::after { position: absolute; right: 0; bottom: 3px; left: 0; height: 1px; content: ""; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform 220ms var(--ease-out); }
.nav-center a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-action {
  justify-self: end;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 10px 0 12px;
  border-radius: 7px;
  color: var(--paper);
  background: var(--ink);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: -0.01em;
  transition: color 180ms ease, background 180ms ease;
}

.nav-action:hover { color: var(--ink); background: var(--ice); }
.nav-action span { font-size: 14px; transition: transform 180ms var(--ease-out); }
.nav-action:hover span { transform: translate(2px, -2px); }

/* The scrollytelling container is intentionally tall; the stage itself stays still. */
.product-story { position: relative; height: var(--story-height, 724.63vh); background: var(--paper); }

.story-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(112deg, rgba(174, 220, 241, 0.23), transparent 31%),
    linear-gradient(180deg, #f5f4f0 0%, var(--paper) 100%);
}

.story-sticky::before,
.story-sticky::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.story-sticky::before {
  top: 7%;
  right: -12%;
  width: min(64vw, 920px);
  height: min(64vw, 920px);
  border: 1px solid rgba(65, 139, 180, 0.15);
  border-radius: 50%;
}

.story-sticky::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 32%;
  border-top: 1px solid rgba(16, 20, 25, 0.08);
  background: linear-gradient(180deg, rgba(245, 244, 239, 0), rgba(232, 232, 226, 0.45));
}

.story-topline {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  padding-top: 104px;
  color: #6c7478;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.topline-status { display: inline-flex; align-items: center; gap: 7px; }
.topline-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--ice-strong); box-shadow: 0 0 0 4px rgba(93, 200, 251, 0.12); }

.hero-copy {
  position: relative;
  z-index: 5;
  width: min(1240px, calc(100% - 72px));
  margin-top: clamp(56px, 10vh, 136px);
  opacity: var(--hero-opacity, 1);
  transform: translate3d(0, var(--hero-y, 0px), 0);
  transform-origin: left top;
  pointer-events: var(--hero-events, auto);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #3d7494;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

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

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

.hero-copy h1 {
  max-width: 760px;
  margin: 19px 0 23px;
  font-family: var(--display);
  font-size: clamp(60px, 6.3vw, 98px);
  font-weight: 500;
  letter-spacing: -0.073em;
  line-height: 0.89;
}

.hero-copy h1 em,
.closing h2 em { color: #3e8fbc; font-style: italic; font-weight: 400; }

.hero-subtitle { max-width: 390px; margin: 0; color: #596268; font-size: 14px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.62; }

.hero-action,
.closing-action {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 27px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.hero-action span, .closing-action span { color: var(--action); font-size: 17px; transition: transform 200ms var(--ease-out); }
.hero-action:hover span { transform: translateY(3px); }

.story-explainer {
  position: absolute;
  z-index: 5;
  top: 51%;
  left: 50%;
  width: min(760px, calc(100% - 170px));
  opacity: var(--explainer-opacity, 0);
  transform: translate3d(-50%, var(--explainer-y, 24px), 0);
  pointer-events: none;
  transition: opacity 90ms linear, transform 90ms linear;
}
.story-explainer h2 { max-width: 760px; margin: 16px 0 17px; color: #16242c; font-family: var(--display); font-size: clamp(42px, 5vw, 72px); font-weight: 500; letter-spacing: -.07em; line-height: .91; }
.explainer-lead { max-width: 470px; margin: 0; color: #56656b; font-size: 15px; font-weight: 550; letter-spacing: -.025em; line-height: 1.56; }
.explainer-triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 650px; margin-top: 35px; padding-top: 16px; border-top: 1px solid #cfd9d8; }
.explainer-triad span { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; }.explainer-triad b { grid-row: span 2; color: var(--action); font-family: var(--mono); font-size: 9px; font-weight: 500; }.explainer-triad strong { color: #223d49; font-size: 12px; font-weight: 750; letter-spacing: -.02em; }.explainer-triad small { grid-column: 2; color: #718087; font-size: 9px; line-height: 1.4; }

.phase-announce { position: absolute; z-index: 9; top: var(--announce-top, 17%); left: 50%; width: min(1040px, calc(100% - 210px)); min-height: 150px; opacity: var(--announce-opacity, 0); transform: translateX(-50%) translateY(var(--announce-y, 18px)); pointer-events: none; transition: opacity 150ms linear, transform 150ms var(--ease-out); }
.phase-announce-layer { position: absolute; inset: 0; display: block; color: #17252d; font-family: var(--display); font-size: clamp(40px, 5vw, 76px); font-weight: 500; letter-spacing: -.075em; line-height: .88; text-shadow: -1px -1px 0 rgba(255, 255, 255, .72), 1px 1px 0 rgba(255, 255, 255, .6), 0 0 18px rgba(255, 255, 255, .5), 0 0 36px rgba(255, 255, 255, .25); }
.phase-announce--dark { color: #17252d; clip-path: inset(var(--mask-top, 100%) var(--mask-right, 100%) var(--mask-bottom, 100%) var(--mask-left, 100%) round var(--mask-radius, 18px)); text-shadow: 0 0 14px rgba(255, 255, 255, .6), 0 0 28px rgba(255, 255, 255, .3); }
.phase-announce-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shortcut-keys { position: absolute; z-index: 10; top: 31%; left: 50%; display: flex; align-items: center; gap: 8px; opacity: var(--keys-opacity, 0); transform: translateX(-50%) translateY(var(--keys-y, 18px)); pointer-events: none; transition: opacity 120ms linear, transform 180ms var(--ease-out); }
.keycap { display: grid; width: 47px; height: 43px; place-items: center; border: 1px solid #8bbbd0; border-radius: 9px; color: #3b7593; background: rgba(245, 252, 255, .88); box-shadow: 0 5px 0 #c4d9df, 0 10px 20px rgba(46, 106, 136, .12); font-family: var(--sans); font-size: 20px; font-weight: 700; transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out), color 150ms ease, background 150ms ease; }
.shortcut-keys small { margin-left: 8px; color: #6f7c80; font-family: var(--mono); font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }.shortcut-keys small b { color: #3b7593; }.shortcut-keys[data-key-state="alt"] .key-alt, .shortcut-keys[data-key-state="shift"] .key-alt, .shortcut-keys[data-key-state="shift"] .key-shift, .shortcut-keys[data-key-state="question"] .key-alt, .shortcut-keys[data-key-state="question"] .key-shift, .shortcut-keys[data-key-state="question"] .key-question, .shortcut-keys[data-key-state="done"] .keycap { color: #fff; background: var(--action); box-shadow: 0 2px 0 #1477a8, 0 8px 16px rgba(42, 150, 204, .25); transform: translateY(4px); }

.story-guide {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: max(32px, calc(50% - 620px));
  display: flex;
  gap: 18px;
  align-items: center;
  opacity: var(--guide-opacity, 0);
  transform: translateY(-50%);
  transition: opacity 80ms linear;
  pointer-events: none;
}

.story-guide ol { display: flex; flex-direction: column; gap: 15px; margin: 0; padding: 0; list-style: none; }
.story-guide li { display: flex; align-items: baseline; gap: 9px; color: #9ca2a4; font-family: var(--mono); font-size: 14px; transition: color 180ms ease, transform 180ms var(--ease-out); }
.story-guide li span { min-width: 22px; opacity: 0.6; }
.story-guide li b { font-weight: 550; letter-spacing: 0.02em; }
.story-guide li.is-active { color: var(--ink); transform: translateX(3px); }
.story-guide li.is-active span { color: var(--action); opacity: 1; }

.guide-line { width: 2px; height: 215px; overflow: hidden; background: #d3d6d4; }
.guide-line i { display: block; width: 100%; height: 100%; transform: translateY(calc(-100% + var(--guide-progress, 0) * 100%)); background: var(--action); }

.scene-caption {
  position: absolute;
  z-index: 6;
  bottom: 46px;
  left: max(32px, calc(50% - 620px));
  display: flex;
  gap: 12px;
  align-items: flex-start;
  opacity: var(--caption-opacity, 0);
  transform: translateY(var(--caption-y, 12px));
  transition: opacity 110ms linear, transform 110ms linear;
}

.caption-number { padding-top: 1px; color: var(--action); font-family: var(--mono); font-size: 9px; }
.caption-text { display: flex; flex-direction: column; gap: 2px; }
.caption-text b { color: #263037; font-size: 11px; font-weight: 700; letter-spacing: -0.02em; }
.caption-text small { color: #747e83; font-size: 9px; font-weight: 550; }
.scene-caption.is-changing { opacity: 0.25; transform: translateY(3px); }

.scroll-hint {
  position: absolute;
  z-index: 6;
  bottom: 25px;
  left: 50%;
  right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #71787c;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: calc(var(--hint-opacity, 1) * var(--hint-ready, 0));
  transform: translate(-50%, var(--hint-y, 12px));
  transition: opacity 520ms var(--ease-out), transform 700ms var(--ease-out);
}

.scroll-hint-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: scroll-hint-bob 1.6s ease-in-out infinite; }
.scroll-hint i { width: 14px; height: 14px; border-right: 2px solid var(--action); border-bottom: 2px solid var(--action); transform: rotate(45deg) translateY(-2px); }

@keyframes scroll-hint-bob {
  0%, 100% { top: -2px; }
  50% { top: 4px; }
}

/* One product plane; its CSS variables are driven directly by scroll position. */
.app-scene {
  --scene-left: 77%;
  --scene-top: 57%;
  --scene-scale: 0.76;
  --scene-rx: 11deg;
  --scene-ry: -8deg;
  --scene-rz: -2deg;
  --scene-opacity: 0;
  --selection-opacity: 0;
  --selection-scale: 1;
  --selection-glow: 0;
  --selection-top: 43.5%;
  --selection-left: 24.1%;
  --selection-width: 1%;
  --selection-height: 1%;
  --orbit-opacity: 0;
  --orbit-scale: 0.9;
  --dimmer-opacity: 0;
  --rail-opacity: 0;
  --rail-shift: 18px;
  --rail-scale: 0.91;
  --answer-opacity: 0;
  --answer-shift-x: 34px;
  --answer-shift-y: 19px;
  --cursor-opacity: 0;
  --cursor-x: 74%;
  --cursor-y: 79%;
  --document-y: 0px;
  position: absolute;
  z-index: 4;
  top: var(--scene-top);
  left: var(--scene-left);
  width: min(72vw, 970px);
  aspect-ratio: 1.51 / 1;
  opacity: var(--scene-opacity);
  transform: translate3d(-50%, -50%, 0) perspective(2000px) rotateX(var(--scene-rx)) rotateY(var(--scene-ry)) rotateZ(var(--scene-rz)) scale(var(--scene-scale));
  transform-style: preserve-3d;
  will-change: transform, top, left;
}

.scene-shadow { position: absolute; z-index: -2; top: 13%; right: 6%; bottom: -12%; left: 10%; border-radius: 50%; background: rgba(24, 39, 50, 0.27); filter: blur(36px); transform: translateZ(-100px); opacity: 0.55; }
.desk-plane { position: absolute; z-index: -1; top: 17%; right: 0; bottom: -22%; left: 12%; border: 1px solid rgba(31, 75, 102, 0.22); border-radius: 50%; transform: rotateX(76deg) rotateZ(-4deg); opacity: 0.5; }

.workstation {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid #3f525f;
  border-radius: 18px;
  background: #12202a;
  box-shadow: 0 42px 70px rgba(17, 30, 38, 0.32), inset 0 1px rgba(235, 249, 255, 0.12);
}

.workstation::after { position: absolute; z-index: 12; inset: 0; border: 1px solid rgba(211, 241, 255, 0.18); border-radius: inherit; content: ""; pointer-events: none; }

.workstation-chrome {
  position: relative;
  z-index: 2;
  display: flex;
  height: 7.7%;
  align-items: center;
  padding: 0 2.1%;
  border-bottom: 1px solid #30434f;
  color: #aab9c2;
  background: #172832;
  font-family: var(--mono);
  font-size: clamp(5px, 0.55vw, 8px);
}

.chrome-dots { display: flex; gap: 5px; }
.chrome-dots i { width: clamp(4px, 0.42vw, 6px); height: clamp(4px, 0.42vw, 6px); border-radius: 50%; background: #485a65; }
.chrome-dots i:first-child { background: #d4847a; }
.chrome-dots i:nth-child(2) { background: #dfbf75; }
.chrome-dots i:last-child { background: #78c7a3; }
.window-title { display: flex; width: 36%; height: 47%; align-items: center; justify-content: center; gap: 5px; margin-inline: auto; border: 1px solid #3a4e5a; border-radius: 4px; color: #7e929e; background: #14232d; }
.window-title i { width: 5px; height: 5px; border: 1px solid #78d1ff; border-radius: 50%; }
.window-tool { letter-spacing: 0.2em; }

.workstation-body { display: grid; grid-template-columns: 8.2% 1fr 16%; height: 92.3%; background: #edf4f6; }

.app-sidebar { display: flex; flex-direction: column; align-items: center; gap: 6%; padding-top: 14%; border-right: 1px solid #d5e2e7; background: #e3edf1; }
.side-logo { width: 29%; aspect-ratio: 1; margin-bottom: 7%; border: 1.5px solid #5caee0; border-radius: 50%; }
.app-sidebar > i { width: 29%; height: 2.1%; border-radius: 9px; background: #aebfca; }
.app-sidebar > .side-current { width: 34%; background: #4eaef0; }
.side-divider { width: 36%; height: 1px; margin: 8% 0 4%; background: #c7d6dd; }

.reading-page { position: relative; overflow: hidden; background: #fcfdfb; }
.reading-header { display: flex; height: 13%; align-items: center; justify-content: space-between; padding: 0 6.5%; border-bottom: 1px solid #e2eaed; color: #6a828f; font-family: var(--mono); font-size: clamp(4px, 0.48vw, 7px); }
.reading-header p { margin: 0; }
.reading-header span { padding: 2px 4px; border: 1px solid #e0e8eb; border-radius: 3px; color: #9cadb4; background: #f7fafb; }
.reading-content { padding: 8.2% 9.5%; transform: translateY(var(--document-y)); transition: transform 80ms linear; }
.page-kicker { margin: 0 0 4%; color: #7093a6; font-family: var(--mono); font-size: clamp(4px, 0.45vw, 7px); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.reading-content h2 { margin: 0; color: #263d4c; font-family: var(--display); font-size: clamp(16px, 2.15vw, 31px); font-weight: 500; letter-spacing: -0.054em; line-height: 0.9; }
.rule { width: 11%; height: 2px; margin: 5% 0 6%; border-radius: 2px; background: #66c4f8; }
.copy-line { height: clamp(3px, 0.35vw, 5px); margin: 0 0 3.2%; border-radius: 100px; background: #d9e4e8; }
.w-96 { width: 96%; }.w-92 { width: 92%; }.w-89 { width: 89%; }.w-79 { width: 79%; }.w-72 { width: 72%; }.w-61 { width: 61%; }
.passage { position: relative; z-index: 1; width: calc(100% + 4%); margin: 5.5% -2% 5%; padding: 3.7% 3%; border-radius: 5px; background: rgba(107, 204, 253, 0.15); }
.passage p { height: clamp(3px, 0.36vw, 5px); margin: 0 0 4.4%; overflow: hidden; border-radius: 9px; color: transparent; background: #b4d3e4; }
.passage p:last-child { width: 72%; margin-bottom: 0; }
.reading-footer { position: absolute; bottom: 5.2%; left: 9.5%; display: flex; align-items: center; gap: 5px; color: #8b9da5; font-family: var(--mono); font-size: clamp(4px, 0.4vw, 6px); }
.reading-footer span { width: 5px; height: 5px; border-radius: 50%; background: #71cdf9; }

.reading-marginalia { padding: 21% 13%; border-left: 1px solid #dce6ea; color: #7a909b; background: #f4f8f9; font-family: var(--mono); font-size: clamp(4px, 0.43vw, 6px); }
.reading-marginalia p { margin: 0 0 4%; }.reading-marginalia strong { display: block; margin-bottom: 26%; color: #3d596a; font-family: var(--sans); font-size: clamp(8px, 0.95vw, 13px); letter-spacing: -0.05em; }.reading-marginalia i { display: block; width: 100%; height: 1px; margin-bottom: 20%; background: #d7e3e7; }.reading-marginalia b { display: block; margin-top: 5%; color: #5d7582; font-size: clamp(4px, 0.5vw, 7px); line-height: 1.45; }

.notice-orbit { position: absolute; z-index: 4; top: 53%; left: 51%; display: grid; width: 58%; height: 27%; place-items: start end; border: 1px dashed rgba(105, 205, 253, 0.9); border-radius: 50%; opacity: var(--orbit-opacity); pointer-events: none; transform: translate3d(-50%, -50%, 0) scale(var(--orbit-scale)); transform-origin: center; transition: opacity 70ms linear, transform 70ms linear; }
.notice-orbit::before { position: absolute; top: 12%; left: 6%; width: 7px; height: 7px; border-radius: 50%; content: ""; background: #78d6ff; box-shadow: 0 0 0 5px rgba(120, 214, 255, 0.14); }
.notice-orbit span { margin: -8% 7% 0 0; color: #2d91c3; font-family: var(--display); font-size: clamp(16px, 1.9vw, 28px); font-style: italic; line-height: 1; text-shadow: 0 0 12px rgba(92, 202, 250, 0.72); }
.capture-dimmer { position: absolute; z-index: 3; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; opacity: var(--dimmer-opacity); pointer-events: none; transition: opacity 80ms linear; }
.capture-dimmer > rect { fill: #071520; }

.selection { position: absolute; z-index: 5; top: var(--selection-top); left: var(--selection-left); width: var(--selection-width); height: var(--selection-height); border-radius: 14px; opacity: var(--selection-opacity); transform: scale(var(--selection-scale)); transform-origin: top left; background: transparent; box-shadow: 0 0 calc(9px + var(--selection-glow) * 12px) rgba(85, 200, 255, calc(0.12 + var(--selection-glow) * 0.28)); transition: opacity 70ms linear, transform 70ms linear, width 70ms linear, height 70ms linear; }
.selection-border { position: absolute; inset: -2px; border: 4px solid #43b2ff; border-radius: 14px; box-shadow: 0 0 0 1px rgba(212, 243, 255, 0.78), 0 0 16px rgba(67, 178, 255, 0.34); }
.selection-tag { position: absolute; top: -24px; left: 0; padding: 4px 5px; border-radius: 4px 4px 4px 0; color: #dff6ff; background: #247bb7; font-family: var(--mono); font-size: clamp(4px, 0.42vw, 6px); letter-spacing: 0.05em; text-transform: uppercase; }
.selection-border > i { position: absolute; width: 28px; height: 28px; border: 8px solid #83ceff; filter: drop-shadow(0 0 4px rgba(67, 178, 255, 0.52)); }
.selection-border .tl { top: -8px; left: -8px; border-right: 0; border-bottom: 0; border-radius: 12px 0 0; }.selection-border .tr { top: -8px; right: -8px; border-bottom: 0; border-left: 0; border-radius: 0 12px 0 0; }.selection-border .br { right: -8px; bottom: -8px; border-top: 0; border-left: 0; border-radius: 0 0 12px 0; }.selection-border .bl { bottom: -8px; left: -8px; border-top: 0; border-right: 0; border-radius: 0 0 0 12px; }
.app-scene[data-selection-state="drawing"] .selection-border > i { display: none; }

/* Same rail anatomy as the approved Ask mockups: selection first, rail in its margin. */
.prompt-rail { position: absolute; z-index: 7; right: 3.8%; bottom: 37.5%; width: 22.5%; padding: 1%; border: 1px solid #d7e5ef; border-radius: 15px; color: #14283b; background: #fcfeff; box-shadow: 0 12px 26px rgba(12, 41, 59, 0.22), 0 1px 2px rgba(11, 39, 56, 0.12); opacity: var(--rail-opacity); transform: translate3d(var(--rail-shift), 0, 0) scale(var(--rail-scale)); transform-origin: bottom left; transition: opacity 70ms linear, transform 70ms linear; }
.rail-origin { position: absolute; z-index: -1; top: 15%; bottom: -8%; left: -3%; width: 3px; border-radius: 4px; background: linear-gradient(#69cdfd, rgba(105, 205, 253, 0)); }
.prompt-rail button { display: flex; width: 100%; height: 24%; align-items: center; padding: 0 9%; border: 0; border-radius: 8px; color: #36536a; background: transparent; font-family: var(--sans); font-size: clamp(5px, 0.62vw, 9px); font-weight: 650; text-align: left; }
.prompt-rail > i { display: block; width: 80%; height: 1px; margin-left: 9%; background: linear-gradient(90deg, #cbdfea, rgba(216, 232, 243, 0)); }
.rail-composer { display: flex; height: 23%; align-items: center; justify-content: space-between; gap: 3px; margin-top: 4%; padding: 0 4% 0 8%; overflow: hidden; border: 1px solid #dbe9f2; border-radius: 999px; color: #6c8193; background: #f4f9fd; font-family: var(--sans); font-size: clamp(4px, 0.5vw, 7px); font-weight: 530; white-space: nowrap; }
.rail-composer span { overflow: hidden; text-overflow: clip; white-space: nowrap; }.rail-composer b { display: grid; width: 20%; aspect-ratio: 1; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--action); font-size: clamp(8px, 0.9vw, 12px); font-weight: 400; }

.answer-slip { position: absolute; z-index: 8; top: 27%; right: 4%; width: 29%; padding: 2.1%; border: 1px solid #d7e5ef; border-radius: 13px; color: #14283b; background: rgba(252, 254, 255, 0.98); box-shadow: 0 17px 30px rgba(16, 50, 72, 0.28), 0 1px 2px rgba(25, 58, 82, 0.08); opacity: var(--answer-opacity); transform: translate3d(var(--answer-shift-x), var(--answer-shift-y), 0) rotateZ(1.3deg); transform-origin: top right; transition: opacity 70ms linear, transform 70ms linear; }
.answer-slip header { display: flex; align-items: center; }.answer-slip header > span { display: inline-flex; align-items: center; gap: 4px; color: #47667c; font-family: var(--mono); font-size: clamp(5px, 0.48vw, 7px); font-weight: 500; }.answer-slip header span i { width: 7px; height: 7px; border: 1.5px solid #5fcafd; border-radius: 50%; }.answer-slip header small { margin-left: auto; margin-right: 7%; color: #59a989; font-family: var(--mono); font-size: clamp(4px, 0.4vw, 6px); }.answer-slip header > b { color: #91a5b3; font-family: var(--sans); font-size: clamp(11px, 1.2vw, 17px); font-weight: 300; line-height: 0.5; }.answer-slip p { margin: 10% 0 9%; color: #365268; font-family: var(--sans); font-size: clamp(6px, 0.67vw, 10px); font-weight: 530; letter-spacing: -0.012em; line-height: 1.52; }.answer-slip footer { display: flex; align-items: center; justify-content: space-between; padding-top: 7%; border-top: 1px solid #e0eaef; color: #5b7588; font-family: var(--mono); font-size: clamp(4px, 0.42vw, 6px); font-weight: 500; }.answer-slip footer b { color: var(--action); font-size: clamp(8px, 0.8vw, 11px); }

.virtual-cursor { position: absolute; z-index: 10; top: var(--cursor-y); left: var(--cursor-x); width: clamp(16px, 2.1vw, 28px); opacity: var(--cursor-opacity); transform: translate3d(-14%, -8%, 0) rotate(-9deg); transition: opacity 60ms linear; filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.32)); }.virtual-cursor svg { display: block; width: 100%; fill: #f8fdff; stroke: #0b2537; stroke-width: 2; stroke-linejoin: round; }

.proof-section { position: relative; overflow: hidden; padding: 150px 0 162px; background: var(--paper-bright); }
.proof-section::after { position: absolute; top: -42%; right: -8%; width: min(720px, 62vw); aspect-ratio: 1; border: 1px solid #dfe4e1; border-radius: 50%; content: ""; pointer-events: none; }
.proof-inner, .usecases-inner, .workflow-inner, .trust-inner { position: relative; z-index: 1; }
.section-kicker { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 42px; }
.section-kicker .eyebrow { margin: 0; }
.section-index { color: #7a868b; font-family: var(--mono); font-size: 8px; letter-spacing: .04em; }
.proof-layout, .trust-layout { display: grid; grid-template-columns: 1.18fr .82fr; gap: 12%; align-items: end; }
.proof-layout h2, .section-heading-wide h2, .trust-layout h2 { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(52px, 6.2vw, 92px); font-weight: 500; letter-spacing: -.078em; line-height: .88; }
.proof-layout h2 em, .section-heading-wide h2 em, .trust-layout h2 em { color: #4192bf; font-style: italic; font-weight: 400; }
.proof-copy { max-width: 365px; padding-bottom: 5px; }
.proof-copy > p, .section-heading-wide > p, .trust-intro { margin: 0; color: #4f5e66; font-size: 13px; font-weight: 530; letter-spacing: -.018em; line-height: 1.68; }
.proof-sequence { display: flex; align-items: center; gap: 9px; margin-top: 35px; color: #64767e; font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.proof-sequence span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }.proof-sequence b { color: var(--action); font-weight: 500; }.proof-sequence i { width: 24px; height: 1px; background: #cdd6d6; }

.usecases-section { padding: 148px 0 170px; background: #f4f8f8; }
.section-heading-wide { display: grid; grid-template-columns: 1fr .58fr; gap: 12%; align-items: end; margin-bottom: 58px; }
.usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.usecase-card { position: relative; min-height: 360px; display: flex; flex-direction: column; padding: 25px 25px 22px; overflow: hidden; border: 1px solid #dbe3e2; border-radius: 14px; background: #fbfdfc; box-shadow: 0 16px 34px rgba(46, 79, 85, .06); transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out), border-color 420ms ease; }
.usecase-card:hover { border-color: #a9d8e8; box-shadow: 0 24px 44px rgba(46, 79, 85, .12); transform: translateY(-7px); }
.usecase-number { color: #4b9bc2; font-family: var(--mono); font-size: 9px; }.usecase-glyph { position: relative; width: 100%; height: 90px; margin: 30px 0 24px; border-bottom: 1px solid #d7e4e5; }
.usecase-glyph::before { position: absolute; bottom: 17px; left: 0; width: 76%; height: 1px; content: ""; background: #c9d9dc; }.usecase-glyph::after { position: absolute; right: 6%; bottom: 17px; width: 34px; height: 34px; border: 1px solid #76c8ed; border-radius: 50%; content: ""; box-shadow: 0 0 0 7px rgba(118, 200, 237, .09); }
.usecase-glyph i { position: absolute; z-index: 1; bottom: 30px; width: 8px; height: 8px; border-radius: 50%; background: #78c7e8; }.usecase-glyph i:nth-child(1) { left: 12%; }.usecase-glyph i:nth-child(2) { left: 36%; width: 5px; height: 5px; background: #a4b8bd; }.usecase-glyph i:nth-child(3) { left: 60%; width: 6px; height: 6px; background: #a4b8bd; }
.usecase-code .usecase-glyph::after { border-radius: 8px; }.usecase-translate .usecase-glyph::after { border-style: dashed; }
.usecase-card h3 { margin: 0 0 10px; color: #203d4c; font-family: var(--display); font-size: 30px; font-weight: 500; letter-spacing: -.055em; }.usecase-card p { max-width: 295px; margin: 0; color: #596b72; font-size: 11px; font-weight: 540; line-height: 1.62; }.usecase-card button { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-top: auto; padding: 14px 0 0; border: 0; border-top: 1px solid #dbe4e3; color: #227cac; background: transparent; font-family: var(--mono); font-size: 8px; text-align: left; text-transform: uppercase; }.usecase-card button span { font-size: 13px; transition: transform 220ms var(--ease-out); }.usecase-card:hover button span { transform: translate(2px, -2px); }

.workflow-section { padding: 154px 0 178px; background: var(--paper-bright); }.workflow-grid { display: grid; grid-template-columns: .93fr 1.07fr; gap: 10%; align-items: start; }.workflow-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid #d7dedd; }.workflow-step { display: grid; grid-template-columns: 34px 1fr; gap: 15px; padding: 23px 0 25px; border-bottom: 1px solid #d7dedd; }.workflow-step > span { color: #4d9ac0; font-family: var(--mono); font-size: 9px; }.workflow-step h3 { margin: 0 0 6px; color: #243f4b; font-size: 14px; font-weight: 700; letter-spacing: -.025em; }.workflow-step p { max-width: 355px; margin: 0; color: #67777c; font-size: 11px; line-height: 1.58; }.workflow-step.is-featured { background: linear-gradient(90deg, rgba(110, 204, 249, .08), transparent); }.workflow-card { position: sticky; top: 120px; min-height: 430px; padding: 17px; border: 1px solid #cfdfe2; border-radius: 17px; background: #edf5f5; box-shadow: 0 26px 50px rgba(41, 80, 88, .13); transform: rotate(1.4deg); }.workflow-card-top { display: flex; align-items: center; gap: 7px; color: #6e858d; font-family: var(--mono); font-size: 8px; }.workflow-card-top b { margin-left: auto; padding: 4px 6px; border: 1px solid #cbdddf; border-radius: 4px; color: #5a7885; font-weight: 500; }.mini-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--action); box-shadow: 0 0 0 4px rgba(99, 199, 243, .13); }.workflow-card-body { position: relative; height: 282px; margin-top: 16px; overflow: hidden; border: 1px solid #cddfe3; border-radius: 11px; background: #fbfdfc; }.mini-page { position: absolute; inset: 0; padding: 50px 12% 0; }.mini-page::before { position: absolute; top: 0; right: 0; left: 0; height: 29px; border-bottom: 1px solid #dbe7e9; content: ""; background: #eff6f7; }.mini-page span { display: block; height: 6px; margin: 0 0 12px; border-radius: 100px; background: #d6e2e4; }.mini-page span:nth-child(1) { width: 45%; }.mini-page span:nth-child(2) { width: 81%; margin-top: 22px; }.mini-page .mini-highlight { width: 92%; height: 52px; margin: 13px 0; background: rgba(104, 203, 248, .2); box-shadow: inset 0 0 0 1px rgba(82, 179, 229, .25); }.mini-page span:nth-child(4) { width: 78%; }.mini-page span:nth-child(5) { width: 61%; }.mini-panel { position: absolute; right: 7%; bottom: 8%; width: 48%; padding: 13px 13px 11px; border: 1px solid #c7deea; border-radius: 11px; color: #36586a; background: rgba(255, 255, 255, .96); box-shadow: 0 13px 24px rgba(31, 89, 116, .16); }.mini-panel small { display: block; margin-bottom: 10px; color: #5da3c7; font-family: var(--mono); font-size: 6px; letter-spacing: .08em; }.mini-panel strong { display: block; max-width: 130px; font-size: 10px; font-weight: 650; line-height: 1.3; }.mini-send { position: absolute; right: 10px; bottom: 10px; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: #fff; background: var(--action); font-size: 11px; }.workflow-card-caption { display: flex; flex-direction: column; gap: 5px; margin: 18px 4px 0; }.workflow-card-caption b { color: #2f5261; font-size: 14px; font-weight: 700; letter-spacing: -.025em; }.workflow-card-caption span { color: #698087; font-family: var(--mono); font-size: 8px; }

.trust-section { padding: 148px 0 168px; color: #edf7fb; background: var(--night); }.trust-section .section-index { color: #8aa4b0; }.trust-section .eyebrow { color: #80cbee; }.trust-layout { align-items: start; }.trust-layout h2 { color: #eff8fb; }.trust-intro { max-width: 360px; padding-top: 10px; color: #b7cbd3; }.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 78px; }.principle-grid article { min-height: 184px; padding: 19px 0 0; border-top: 1px solid #3b4d57; }.principle-grid article > span { color: #6dcaf7; font-family: var(--mono); font-size: 8px; }.principle-grid h3 { margin: 22px 0 9px; color: #eff8fb; font-size: 14px; font-weight: 700; letter-spacing: -.025em; }.principle-grid p { max-width: 270px; margin: 0; color: #a9bec7; font-size: 11px; line-height: 1.62; }.data-note { display: grid; grid-template-columns: 25px 1fr; gap: 10px; max-width: 650px; margin-top: 55px; padding: 17px 0 0; border-top: 1px solid #3b4d57; }.data-note-mark { color: #6dcaf7; font-size: 17px; }.data-note p { margin: 0; color: #a9bec7; font-family: var(--mono); font-size: 9px; line-height: 1.65; }.data-note b { color: #e7f7fb; font-weight: 500; }

.closing { position: relative; min-height: 690px; overflow: hidden; color: #f5f8f7; background: #0b1014; }.closing::before { position: absolute; inset: 0; content: ""; opacity: 0.56; background: radial-gradient(circle at 54% 48%, rgba(65, 146, 188, 0.21), transparent 28rem), linear-gradient(118deg, transparent 46%, rgba(109, 205, 247, 0.06) 46.1%, transparent 46.25%); }.closing-inner { position: relative; z-index: 2; padding-top: 112px; text-align: center; }.closing .eyebrow { justify-content: center; color: #8fd5f5; }.closing h2 { margin: 23px 0 20px; font-family: var(--display); font-size: clamp(64px, 8.3vw, 126px); font-weight: 500; letter-spacing: -0.075em; line-height: 0.82; }.closing h2 em { color: #85d6fb; }.closing-copy { max-width: 440px; margin: 0 auto; color: #b8cbd3; font-size: 12px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.6; }.install-actions { display: flex; max-width: 610px; justify-content: center; gap: 8px; margin: 31px auto 11px; }.install-option { display: inline-flex; min-width: 176px; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 14px 13px 16px; border: 1px solid rgba(177, 226, 247, 0.38); border-radius: 9px; color: #eef9fd; background: rgba(15, 32, 43, 0.58); box-shadow: inset 0 1px rgba(223, 249, 255, 0.06); font-family: var(--sans); font-size: 10px; font-weight: 650; letter-spacing: -0.01em; transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms var(--ease-out); }.install-option b { color: #89d8fc; font-size: 14px; font-weight: 400; transition: transform 180ms var(--ease-out); }.install-option:hover { border-color: var(--ice); color: #10202b; background: var(--ice); }.install-option:hover b { color: #10202b; transform: translate(2px, -2px); }.install-note { margin: 0; color: #78929e; font-family: var(--mono); font-size: 8px; letter-spacing: 0.02em; }.closing-mark { position: absolute; top: 50%; left: 50%; width: min(72vw, 940px); height: 275px; border: 1px solid rgba(112, 200, 244, 0.24); border-radius: 50%; transform: translate(-50%, -50%) rotate(-9deg); }.closing-mark i { position: absolute; width: 18px; height: 18px; border: 2px solid #8cd5f8; box-shadow: 0 0 16px rgba(103, 203, 248, 0.45); }.closing-mark .tl { top: -4px; left: 25%; border-right: 0; border-bottom: 0; border-radius: 7px 0 0; }.closing-mark .tr { top: -4px; right: 25%; border-bottom: 0; border-left: 0; border-radius: 0 7px 0 0; }.closing-mark .br { right: 25%; bottom: -4px; border-top: 0; border-left: 0; border-radius: 0 0 7px 0; }.closing-mark .bl { bottom: -4px; left: 25%; border-top: 0; border-right: 0; border-radius: 0 0 0 7px; }

.footer { min-height: 92px; background: #0b1014; }.footer-inner { display: flex; min-height: 92px; align-items: center; justify-content: space-between; color: #717c81; font-family: var(--mono); font-size: 8px; letter-spacing: 0.015em; }.footer .brand { color: #f1f7f8; font-family: var(--sans); font-size: 16px; }.footer .brand-ring { border-color: #f1f7f8; }.footer .brand-ring::before, .footer .brand-ring::after { background: #f1f7f8; }

.reveal-block, .closing-inner { opacity: 0; transform: translateY(24px); transition: opacity 780ms var(--ease-out), transform 780ms var(--ease-out); }
.reveal-block.is-visible, .closing-inner.is-visible { opacity: 1; transform: translateY(0); }
.usecase-card, .workflow-step, .principle-grid article { transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }

/* A helpful cursor that follows a person; it never runs on touch input. */
.cursor { position: fixed; z-index: 100; top: 0; left: 0; display: none; width: 28px; height: 28px; align-items: center; justify-content: center; border: 1px solid rgba(34, 123, 183, 0.88); border-radius: 50%; color: var(--ink); background: rgba(244, 252, 255, 0.25); opacity: 0; pointer-events: none; transform: translate3d(-50%, -50%, 0); mix-blend-mode: multiply; transition: width 160ms var(--ease-out), height 160ms var(--ease-out), border-color 160ms ease, background 160ms ease, color 160ms ease, opacity 120ms ease; }.cursor.is-visible { opacity: 1; }.cursor-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--action); transition: transform 160ms var(--ease-out), background 160ms ease; }.cursor-word { display: none; font-family: var(--mono); font-size: 7px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }.cursor.is-link { width: 48px; height: 48px; border-color: var(--ink); background: rgba(242, 241, 237, 0.9); mix-blend-mode: normal; }.cursor.is-link .cursor-dot { transform: scale(0); }.cursor.is-link .cursor-word { display: block; }.cursor.is-on-dark { border-color: rgba(230, 248, 255, 0.98); color: #effaff; background: rgba(159, 222, 250, 0.08); mix-blend-mode: screen; }.cursor.is-on-dark .cursor-dot { background: #effaff; }.cursor.is-on-dark.is-link { border-color: #effaff; color: var(--ink); background: #effaff; mix-blend-mode: normal; }

/* Legibility pass: the prior typographic scale was too delicate for normal
   laptop and tablet viewing. These are functional, not merely decorative,
   size increases. */
.nav-center { font-size: 12px; font-weight: 700; }
.nav-action { min-height: 38px; padding-inline: 14px 12px; font-size: 11px; font-weight: 700; }
.story-topline { font-size: 11px; font-weight: 650; letter-spacing: .035em; }
.eyebrow { font-size: 11px; font-weight: 650; }
.hero-subtitle { max-width: 445px; font-size: 16px; font-weight: 550; line-height: 1.58; }
.hero-action { margin-top: 30px; font-size: 13px; }
.explainer-lead { max-width: 515px; font-size: 16px; font-weight: 600; }
.explainer-triad b { font-size: 11px; font-weight: 700; }
.explainer-triad strong { font-size: 14px; }
.explainer-triad small { font-size: 11px; font-weight: 560; line-height: 1.46; }
.shortcut-keys small { font-size: 10px; font-weight: 650; }

.story-guide ol { gap: 17px; }
.story-guide li {
  gap: 11px;
  color: #637078;
  font-size: 16px;
  font-weight: 700;
  text-shadow:
    -1px -1px 0 rgba(244, 248, 247, 0.96),
    1px -1px 0 rgba(244, 248, 247, 0.96),
    -1px 1px 0 rgba(244, 248, 247, 0.96),
    1px 1px 0 rgba(244, 248, 247, 0.96),
    0 0 12px rgba(255, 255, 255, 0.6),
    0 0 24px rgba(255, 255, 255, 0.3);
}
.story-guide li span { min-width: 27px; color: #56646c; font-size: 11px; font-weight: 700; opacity: .78; }
.story-guide li b { font-weight: 700; letter-spacing: .025em; }
.story-guide li.is-active { color: #122a37; text-shadow: -1px -1px 0 rgba(255,255,255,.98), 1px 1px 0 rgba(255,255,255,.98), 0 0 14px rgba(255,255,255,.6), 0 0 28px rgba(255,255,255,.3); }
.guide-line { width: 3px; }
.caption-number { font-size: 11px; font-weight: 700; }
.caption-text { gap: 4px; }
.caption-text b { font-size: 13px; }
.caption-text small { font-size: 11px; font-weight: 600; }

/* Make the actual Ask mock-up readable rather than ornamental. */
.workstation-chrome { font-size: clamp(7px, .72vw, 11px); }
.reading-header { font-size: clamp(6px, .65vw, 10px); }
.page-kicker { font-size: clamp(6px, .58vw, 9px); font-weight: 650; }
.reading-content h2 { font-size: clamp(20px, 2.4vw, 35px); }
.reading-footer { font-size: clamp(5px, .5vw, 8px); font-weight: 650; }
.reading-marginalia { font-size: clamp(5px, .54vw, 8px); font-weight: 600; }
.reading-marginalia strong { font-size: clamp(10px, 1.1vw, 15px); }
.reading-marginalia b { font-size: clamp(5px, .6vw, 9px); }
.selection-tag { font-size: clamp(5px, .52vw, 8px); font-weight: 650; }
/* The interactive Ask surface carries the key explanation, so its controls
   and returned answer deliberately read larger than surrounding document UI. */
.prompt-rail button { font-size: clamp(7px, .84vw, 13px); }
.rail-composer { font-size: clamp(6px, .69vw, 10px); font-weight: 650; }
.answer-slip header > span { font-size: clamp(7px, .68vw, 10px); }
.answer-slip header small { font-size: clamp(6px, .57vw, 9px); }
.answer-slip p { font-size: clamp(8px, .92vw, 14px); font-weight: 650; line-height: 1.48; }
.answer-slip footer { font-size: clamp(6px, .61vw, 9px); }

.section-index { font-size: 10px; font-weight: 650; }
.usecases-section { padding: 112px 0 122px; }
.section-heading-wide { margin-bottom: 46px; }
.section-heading-wide > p, .trust-intro { font-size: 16px; font-weight: 590; line-height: 1.62; }
.usecase-card { min-height: 370px; padding: 29px 28px 25px; }
.usecase-number { font-size: 11px; font-weight: 700; }
.usecase-card h3 { margin-bottom: 12px; font-size: 34px; }
.usecase-card p { max-width: 310px; font-size: 14px; font-weight: 590; line-height: 1.62; }
.usecase-detail { margin-top: auto !important; padding-top: 16px; border-top: 1px solid #dbe4e3; color: #38677f !important; font-family: var(--mono); font-size: 11px !important; font-weight: 650 !important; letter-spacing: .015em; line-height: 1.5 !important; }
.usecase-detail b { display: block; margin-bottom: 4px; color: #207da9; font-size: 10px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.trust-section { padding: 118px 0 130px; }
.trust-intro { max-width: 430px; }
.principle-grid { gap: 28px; margin-top: 58px; }
.principle-grid article > span { font-size: 10px; font-weight: 700; }
.principle-grid h3 { font-size: 17px; }
.principle-grid p { max-width: 305px; font-size: 14px; font-weight: 560; line-height: 1.62; }
.data-note { max-width: 760px; margin-top: 48px; }
.data-note p { font-size: 12px; font-weight: 560; line-height: 1.68; }
.closing-copy { max-width: 510px; font-size: 15px; font-weight: 550; }
.install-option { min-width: 192px; font-size: 12px; font-weight: 700; }
.install-note, .footer-inner { font-size: 10px; font-weight: 560; }

@media (hover: hover) and (pointer: fine) {
  body.cursor-enabled, body.cursor-enabled * { cursor: none !important; }
  .cursor { display: flex; }
}

@media (max-width: 1050px) {
  .container, .hero-copy { width: min(100% - 52px, 840px); }
  .app-scene { width: min(83vw, 870px); }
  .story-guide { left: 26px; }
  .scene-caption { left: 26px; }
  .scroll-hint { right: 26px; }
  .proof-layout, .trust-layout { gap: 7%; }.section-heading-wide { gap: 7%; }.workflow-grid { gap: 6%; }.workflow-card { min-height: 390px; }
}

@media (max-width: 760px) {
  .container, .hero-copy { width: min(100% - 34px, 520px); }
  .site-header { padding-top: 12px; }.site-header.is-stuck { padding-top: 8px; }.nav { grid-template-columns: 1fr auto; }.nav-center { display: none; }.nav-action { min-height: 32px; font-size: 9px; }
  .product-story { height: var(--story-height, 724.63vh); }.story-topline { padding-top: 82px; font-size: 7px; }.topline-status { display: none; }
  .hero-copy { margin-top: 62px; }.hero-copy h1 { max-width: 355px; font-size: clamp(49px, 15.2vw, 67px); }.hero-subtitle { max-width: 330px; font-size: 12px; }.hero-action { margin-top: 20px; }
  /* On a phone, the working surface is full-width and flat. It stays hidden
     during the hero, then fades in centrally after the explainer. */
  .story-explainer { top: 45%; width: min(100% - 42px, 520px); }.story-explainer h2 { font-size: clamp(36px, 10.6vw, 53px); }.explainer-lead { max-width: 330px; font-size: 13px; }.explainer-triad { gap: 7px; margin-top: 25px; }.explainer-triad strong { font-size: 10px; }.explainer-triad small { font-size: 8px; }.phase-announce { top: 13%; width: calc(100% - 34px); min-height: 100px; }.phase-announce-layer { font-size: clamp(30px, 9.5vw, 44px); }.shortcut-keys { top: 31%; flex-wrap: wrap; justify-content: center; width: 250px; }.keycap { width: 40px; height: 38px; font-size: 17px; }.shortcut-keys small { flex-basis: 100%; margin: 5px 0 0; text-align: center; }.app-scene { width: calc(100vw - 24px); transform: translate3d(-50%, -50%, 0); }.workstation { border-radius: 13px; }.notice-orbit span { font-size: 15px; }.story-guide { top: auto; bottom: 80px; left: 17px; transform: none; }.story-guide ol { gap: 9px; }.story-guide li { gap: 6px; font-size: 10px; }.story-guide li span { min-width: 17px; }.guide-line { height: 178px; }.scene-caption { bottom: 62px; left: auto; right: 17px; }.caption-number { font-size: 7px; }.caption-text b { font-size: 9px; }.caption-text small { font-size: 7px; }.scroll-hint { bottom: 19px; font-size: 14px; }.scroll-hint i { width: 12px; height: 12px; }
  .prompt-rail { right: 1.5%; width: 32%; }
  .answer-slip { right: 5%; width: 47%; }
  .proof-section { padding: 105px 0 112px; }.proof-section::after { top: -10%; right: -45%; width: 110vw; }.section-kicker { margin-bottom: 30px; }.proof-layout, .trust-layout, .section-heading-wide { grid-template-columns: 1fr; gap: 24px; }.proof-layout h2, .section-heading-wide h2, .trust-layout h2 { font-size: clamp(48px, 14vw, 66px); }.proof-copy { max-width: 350px; }.proof-sequence { gap: 6px; margin-top: 27px; }.proof-sequence i { width: 13px; }.usecases-section { padding: 105px 0 112px; }.section-heading-wide { margin-bottom: 36px; }.section-heading-wide > p { max-width: 330px; }.usecase-grid { grid-template-columns: 1fr; gap: 10px; }.usecase-card { min-height: 320px; padding: 21px; }.usecase-glyph { height: 70px; margin: 20px 0 20px; }.workflow-section { padding: 105px 0 115px; }.workflow-grid { grid-template-columns: 1fr; gap: 42px; }.workflow-card { position: relative; top: auto; min-height: 360px; transform: none; }.workflow-card-body { height: 225px; }.trust-section { padding: 105px 0 115px; }.principle-grid { grid-template-columns: 1fr; gap: 0; margin-top: 49px; }.principle-grid article { min-height: 0; padding: 20px 0 24px; }.principle-grid h3 { margin: 15px 0 8px; }.data-note { margin-top: 32px; }
  .closing { min-height: 610px; }.closing-inner { padding-top: 82px; }.closing h2 { font-size: clamp(61px, 18vw, 80px); }.closing-copy { max-width: 316px; font-size: 11px; }.install-actions { flex-direction: column; max-width: 286px; margin-top: 26px; }.install-option { min-width: 0; padding: 12px 14px; }.closing-mark { width: 610px; height: 190px; }.footer, .footer-inner { min-height: 118px; }.footer-inner { flex-wrap: wrap; align-content: center; gap: 10px 14px; }.footer-inner > span:nth-of-type(1) { order: 3; width: 100%; }
}

/* Preserve the larger type on touch screens; the compact originals were
   especially hard to read on actual phones. */
@media (max-width: 760px) {
  .nav-action { min-height: 36px; font-size: 10px; }
  .story-topline { font-size: 9px; }
  .hero-subtitle { max-width: 350px; font-size: 14px; }
  .hero-action { font-size: 13px; }
  .explainer-lead { max-width: 355px; font-size: 14px; }
  .explainer-triad b { font-size: 10px; }
  .explainer-triad strong { font-size: 12px; }
  .explainer-triad small { font-size: 10px; }
  .phase-announce { top: var(--announce-top, 13%); }
  .shortcut-keys small { font-size: 10px; }
  .story-guide ol { gap: 11px; }
  .story-guide li { gap: 8px; font-size: 13px; }
  .story-guide li span { min-width: 21px; font-size: 9px; }
  .guide-line { height: 194px; }
  .caption-number { font-size: 9px; }
  .caption-text b { font-size: 11px; }
  .caption-text small { font-size: 9px; }
  .usecases-section, .trust-section { padding: 92px 0 100px; }
  .section-heading-wide > p, .trust-intro { max-width: 350px; font-size: 14px; }
  .usecase-card { min-height: 345px; padding: 24px; }
  .usecase-card p { font-size: 14px; }
  .usecase-detail { font-size: 10px !important; }
  .principle-grid { margin-top: 42px; }
  .principle-grid h3 { font-size: 16px; }
  .principle-grid p { font-size: 13px; }
  .data-note p { font-size: 11px; }
  .closing-copy { max-width: 340px; font-size: 14px; }
  .install-option { font-size: 12px; }
  .install-note, .footer-inner { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .reveal-block, .closing-inner { opacity: 1 !important; transform: none !important; }
  .product-story { height: auto; }.story-sticky { position: relative; height: auto; min-height: 100vh; padding: 118px 0 80px; overflow: hidden; }.hero-copy { position: relative; margin-top: 0; opacity: 1 !important; transform: none !important; }.story-guide, .scene-caption, .notice-orbit { display: none; }.scroll-hint { --hint-ready: 1; --hint-opacity: 1; opacity: 1 !important; transform: translate(-50%, 0) !important; }.app-scene { position: relative; top: auto !important; left: 50% !important; width: min(94vw, 800px); margin: 52px 0 0; transform: translateX(-50%) !important; }.capture-dimmer { opacity: 0 !important; }.selection { top: 43.5% !important; left: 24.1% !important; width: 48% !important; height: 19% !important; opacity: 1 !important; transform: none !important; }.prompt-rail { opacity: 1 !important; transform: none !important; }.answer-slip { opacity: 1 !important; transform: none !important; }.virtual-cursor { display: none; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .selection { width: 40% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .story-explainer { position: relative; top: auto; left: auto; width: min(100% - 34px, 760px); margin: 54px auto 0; opacity: 1 !important; transform: none !important; }
  .phase-announce { position: relative; top: auto; left: auto; width: min(100% - 34px, 760px); min-height: 0; margin: 52px auto 0; opacity: 1 !important; transform: none !important; }
  .phase-announce-layer { position: relative; inset: auto; color: #17252d; clip-path: none !important; font-size: clamp(34px, 7vw, 62px); }
  .phase-announce--dark { display: none; }
  .shortcut-keys { position: relative; top: auto; left: auto; width: fit-content; margin: 28px auto 0; opacity: 1 !important; transform: none !important; }
  .shortcut-keys .keycap { transform: none !important; }
  .story-guide { display: flex; opacity: 1 !important; }
  .app-scene { opacity: 1 !important; }
}