@font-face {
  font-family: DM;
  src: url("/assets/dm-sans.ttf") format("truetype");
  font-weight: 100 1000;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("/assets/manrope.ttf") format("truetype");
  font-weight: 100 1000;
  font-display: swap;
}
@font-face {
  font-family: Plex;
  src: url("/assets/plex-mono.ttf") format("truetype");
  font-display: swap;
}

:root {
  --paper: #faf9f6;
  --ink: #202329;
  --muted: #5d626b;
  --line: #dedfdc;
  --accent: #3457df;
  --wash: #f0f0eb;
  --panel: #ffffff;
  --inverse: #f7f8fc;
  --radius: 12px;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    17px/1.7 DM,
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
[hidden] {
  display: none !important;
}
a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--accent);
}
button,
input,
select {
  font: inherit;
}
button,
summary,
a {
  touch-action: manipulation;
}
button,
summary {
  cursor: pointer;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}
main:focus {
  outline: none;
}
img,
video,
svg {
  max-width: 100%;
}
img {
  height: auto;
}
figure {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: Manrope, DM, Arial, sans-serif;
  font-weight: 550;
  line-height: 1.12;
  letter-spacing: -0.045em;
  overflow-wrap: break-word;
}
h1 {
  font-size: clamp(42px, 5.3vw, 72px);
}
h2 {
  font-size: clamp(32px, 3.7vw, 49px);
}
h3 {
  font-size: clamp(24px, 2.4vw, 30px);
  letter-spacing: -0.035em;
}
p {
  margin: 0;
}
p + p {
  margin-top: 1.2em;
}
ul {
  list-style: none;
  padding-left: 0;
}
ol {
  padding-left: 1.4em;
}
li + li {
  margin-top: 0.65em;
}
::selection {
  background: #dce3ff;
  color: #17225a;
}
.shell,
.wrap {
  width: min(100% - 88px, 1200px);
  margin-inline: auto;
}
.skip {
  position: absolute;
  top: -100px;
  left: 20px;
  z-index: 100;
  background: var(--ink);
  color: white;
  padding: 12px 20px;
}
.skip:focus {
  top: 12px;
  color: white;
}
.eyebrow,
.micro,
.index,
.mono,
.tag {
  font-size: 12px;
  letter-spacing: 0.075em;
  font-weight: 550;
  line-height: 1.6;
}
.eyebrow,
.micro {
  text-transform: uppercase;
  color: var(--muted);
}
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  min-height: 50px;
  padding: 12px 22px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.4;
  transition:
    background 180ms,
    transform 180ms;
}
.button:hover {
  background: #2542b8;
  border-color: #2542b8;
  color: #fff;
  transform: translateY(-1px);
}
.button.secondary,
.button.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.text-link,
.small-link,
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  width: fit-content;
  padding-block: 6px;
  font-size: 15px;
  font-weight: 550;
  border-bottom: 1px solid currentColor;
}
.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 30px;
}
.fine,
.section-note,
figcaption {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.fine a,
figcaption a {
  text-decoration: underline;
}
.site-header {
  --ink: #edf1f7;
  --muted: #aeb6c4;
  --line: #333b47;
  --accent: #b8ceff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: #080a0ff5;
  color: var(--ink);
  backdrop-filter: blur(12px);
  z-index: 20;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.07em;
  line-height: 1;
}
.brand svg {
  width: 35px;
  height: 35px;
  fill: currentColor;
  flex: none;
}
.site-header .brand {
  color: #ecf2ff;
}
.site-header a:not(.button):hover {
  color: #bfd2ff;
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 27px;
  margin-left: auto;
  font-size: 14px;
}
.desktop-nav [aria-current] {
  color: var(--accent);
}
.header-cta {
  min-height: 43px;
  padding: 10px 15px;
  gap: 18px;
  font-size: 13px;
}
.site-header .header-cta {
  background: #3457df;
  border-color: #3457df;
  color: #ffffff;
}
.site-header .header-cta:hover {
  background: #2542b8;
  border-color: #2542b8;
  color: #ffffff;
}
.mobile-menu {
  display: none;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 30px;
  font-size: 13px;
  color: var(--muted);
}
.breadcrumb a {
  color: var(--ink);
}
.site-footer {
  padding: 65px 0 24px;
  border-top: 1px solid var(--line);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 35px;
}
.footer-brand p {
  margin: 25px 0 16px;
  font-size: 14px;
  color: var(--muted);
}
.footer-brand > a:last-child {
  font-size: 13px;
}
.footer-top nav h2 {
  font:
    550 13px DM,
    Arial,
    sans-serif;
  letter-spacing: 0;
  margin-bottom: 20px;
}
.footer-top nav a {
  display: block;
  margin-block: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.footer-top nav a:hover {
  color: var(--accent);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  margin-top: 55px;
  padding-top: 23px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.footer-bottom div {
  display: flex;
  gap: 20px;
}

/* Only the home hero leaves the shared content grid. */
.page-home {
  --home-gutter: 88px;
  --paper: #080a0f;
  --ink: #edf1f7;
  --muted: #aeb6c4;
  --line: #29303b;
  --panel: #11151d;
  --wash: #12161f;
  --accent: #b8ceff;
}
.page-home .button {
  background: #3457df;
  border-color: #3457df;
  color: #ffffff;
}
.page-home .button:hover {
  background: #2542b8;
  border-color: #2542b8;
  color: #ffffff;
}
.page-home .site-footer {
  background: var(--paper);
}
.page-home #main.shell {
  width: 100%;
}
.page-home #main > :not(.home-hero) {
  width: min(100% - var(--home-gutter), 1200px);
  margin-inline: auto;
}
.home-hero {
  --ink: #eff4ff;
  --muted: #bdc8dd;
  position: relative;
  isolation: isolate;
  min-height: 600px;
  background: #07090d;
  color: var(--ink);
  overflow: hidden;
}
.hero-art-extent {
  position: absolute;
  inset: 0 0 auto;
}
.hero-material {
  position: relative;
  width: 100%;
  height: 600px;
  background: #050505;
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  min-height: 600px;
  padding-block: 52px 74px;
}
.hero-copy {
  width: min(100%, 880px);
  text-align: center;
}
.hero-copy h1,
.hero-copy p,
.hero-copy .text-link {
  text-shadow: 0 1px 3px #000000, 0 0 12px rgb(0 0 0 / 90%);
}
.hero-copy .hero-lead {
  color: #e4e9f1;
}
.hero-copy .hero-note {
  color: #f3f5fa;
  font-size: 13px;
  font-weight: 550;
  text-shadow: 0 1px 3px #000000, 0 0 10px rgb(0 0 0 / 95%);
}
.hero-copy .eyebrow {
  margin-bottom: 22px;
  color: #c1c9d6;
}
.hero-copy,
.product-demo,
.demo-conversation {
  min-width: 0;
}
.hero-copy h1 {
  font-size: clamp(40px, calc(5vw + 24px), 88px);
  letter-spacing: -0.055em;
  line-height: 1.03;
}
.hero-copy h1 > span {
  color: #e1e8f2;
}
.hero-lead {
  font-size: 18px;
  max-width: 590px;
  line-height: 1.65;
  margin: 24px auto 0;
  color: var(--muted);
}
.hero-copy .actions {
  gap: 22px;
  justify-content: center;
  margin-top: 26px;
}
.hero-copy .text-link {
  color: #e3ebff;
}
.hero-note {
  font-size: 12px;
  color: var(--muted);
  margin: 18px auto 0;
}
.hero-motion-control {
  position: absolute;
  right: 0;
  bottom: 18px;
  min-height: 44px;
  padding: 10px 16px;
  color: #e2e7f0;
  background: #10141be6;
  border: 1px solid #5b6574;
  border-radius: 6px;
  font-size: 12px;
  z-index: 3;
}
.hero-controls {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 0;
}
.hero-motion-control:disabled {
  color: #b2bfd8;
  cursor: default;
}
.hero-artwork {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-fluid-static {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 78% 74%, #d8d8d8 0%, #424242 13%, transparent 40%),
    radial-gradient(ellipse at 16% 105%, #a4a4a4 0%, #262626 24%, transparent 53%),
    #050505;
}
.hero-fluid-static::before,
.hero-fluid-static::after {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(ellipse at 68% 38%, #ffffffc7, #9c9c9c66 12%, transparent 35%),
    radial-gradient(ellipse at 24% 70%, #c3c3c3a6, transparent 42%);
  animation: hero-fallback-flow 18s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.hero-fluid-static::after {
  background:
    radial-gradient(ellipse at 34% 42%, #050505 9%, transparent 38%),
    radial-gradient(ellipse at 78% 78%, #e0e0e099, transparent 31%);
  animation-duration: 23s;
  animation-direction: alternate-reverse;
}
@keyframes hero-fallback-flow {
  from { transform: translate3d(-6%, -3%, 0) rotate(-7deg); }
  to { transform: translate3d(7%, 5%, 0) rotate(8deg); }
}
.hero-fluid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
[data-fluid-presentation="canvas"] .hero-fluid-canvas[data-fluid-ready="true"] {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  [data-hero-playing="true"] .hero-fluid-static::before,
  [data-hero-playing="true"] .hero-fluid-static::after {
    animation-play-state: running;
  }
  [data-fluid-presentation="canvas"] .hero-fluid-canvas[data-fluid-ready="true"][data-fluid-visible="true"] ~ .hero-fluid-static {
    opacity: 0;
  }
  [data-fluid-presentation="canvas"] .hero-fluid-canvas[data-fluid-ready="true"][data-fluid-visible="true"] ~ .hero-fluid-static::before,
  [data-fluid-presentation="canvas"] .hero-fluid-canvas[data-fluid-ready="true"][data-fluid-visible="true"] ~ .hero-fluid-static::after {
    animation-play-state: paused;
  }
}
.hero-fluid-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse 510px 330px at 50% 34%,
      #07090de6 12%,
      #07090da8 52%,
      #07090d00 92%
    ),
    linear-gradient(180deg, #07090da8, transparent 55%, #07090d33);
}
.product-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
  gap: 60px;
  align-items: center;
  padding-block: 80px;
}
.product-stage-intro .eyebrow {
  margin-bottom: 24px;
}
.product-stage-intro h2 {
  max-width: 310px;
}
.page-home .product-stage {
  position: relative;
  display: block;
  max-width: 1200px;
  padding-block: 64px;
}
.page-home .product-stage-intro {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
.page-home .product-demo {
  width: 100%;
  max-width: none;
  box-shadow: 0 35px 85px -45px #0d162c99;
}
.product-stage .demo-answer p,
.product-stage .demo-question {
  font-size: 15px;
}
.product-demo {
  background: #20242d;
  color: #f1f3f9;
  border: 1px solid #353b48;
  border-radius: 14px;
  box-shadow: 0 24px 80px -44px #18254888;
  overflow: hidden;
}
.demo-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  padding: 20px;
  border-bottom: 1px solid #383e49;
}
.demo-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  font-size: 18px;
}
.demo-brand svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  flex: none;
}
.demo-brand > span {
  font-size: 12px;
}
.demo-example {
  font-size: 11px;
  color: #c0c6d5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.demo-workspace {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  min-height: 360px;
}
.demo-sidebar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  padding: 23px 14px;
  border-right: 1px solid #383e49;
  color: #b4bece;
  font-size: 11px;
}
.demo-sidebar > span:first-child {
  font-size: 11px;
  margin-bottom: 8px;
}
.demo-selected {
  background: #3a4465;
  color: #f7f9ff;
  margin: 0 -5px;
  border-radius: 5px;
  padding: 7px 5px;
  font-weight: 500;
}
.demo-sidebar-bottom {
  margin-top: auto;
  line-height: 2.2;
}
.demo-conversation {
  padding: 26px 23px;
  display: flex;
  flex-direction: column;
}
.demo-question {
  border: 1px solid #4e5972;
  background: #30394d;
  padding: 15px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.8;
}
.demo-answer {
  padding-block: 28px 23px;
}
.demo-answer-label {
  color: #adb9d5;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.demo-answer h3 {
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  margin-block: 14px;
}
.demo-answer p {
  font-size: 13px;
  line-height: 1.8;
  color: #b6c0d0;
}
.demo-source {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  font-size: 12px;
  color: #d5dff6;
}
.demo-source > span:last-child {
  margin-left: auto;
}
.demo-sources {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 12px;
  color: #c6d1eb;
}
.demo-sources > span {
  padding: 5px 8px;
  background: #30394d;
  border: 1px solid #47516b;
  border-radius: 4px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.demo-review {
  border-top: 1px solid #383e49;
  padding-top: 16px;
  color: #c2cde1;
  font-size: 11px;
  margin-top: auto;
}
.product-demo figcaption {
  font-size: 12px;
  padding: 16px 20px;
  color: #b6c0d1;
  border-top: 1px solid #383e49;
}
.product-home-capture {
  display: block;
  width: 100%;
  height: auto;
}
.product-demo .product-home-fullsize {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  padding-block: 4px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fact-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--line);
  padding: 26px 0;
  font-size: 13px;
  color: var(--muted);
}
.fact-strip span + span {
  border-left: 1px solid var(--line);
  padding-left: 25px;
}
.home-section {
  padding-block: 90px;
  border-bottom: 1px solid var(--line);
}
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 60px;
  margin-bottom: 40px;
}
.section-title .eyebrow,
.knowledge-section > div > .eyebrow {
  margin-bottom: 20px;
}
.section-title > p {
  max-width: 390px;
  color: var(--muted);
  font-size: 16px;
}
.pathway-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pathway {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px;
  background: #f0f1ed;
  border-radius: var(--radius);
  border: 1px solid #e1e2dc;
}
.pathway:hover {
  color: inherit;
  border-color: #aab7e9;
}
.pathway-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  font-size: 12px;
  margin-bottom: 50px;
}
.pathway h3 {
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 20px;
}
.pathway p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}
.pathway-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 35px;
  font-size: 13px;
}
.pathway-code {
  background: #1d3439;
  color: #f0f5f0;
  border-color: #1d3439;
}
.pathway-code p {
  color: #c3d5cf;
}
.pathway-code:hover {
  color: #f0f5f0;
  border-color: #6b9f91;
}
.section-note {
  margin-top: 24px;
  max-width: 850px;
}
.knowledge-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}
.section-lead {
  color: var(--muted);
  margin-block: 25px;
  max-width: 500px;
}
.knowledge-stack > div {
  border-top: 1px solid var(--line);
  padding-block: 24px;
}
.knowledge-stack > div > span {
  font-size: 11px;
  color: var(--accent);
}
.knowledge-stack h3 {
  font-size: 24px;
  margin: 12px 0;
}
.knowledge-stack p {
  font-size: 15px;
  color: var(--muted);
}
.record-feature {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 80px;
  padding: 60px;
  margin-top: 85px;
  background: #20242d;
  color: #f2f4fa;
  border-radius: var(--radius);
}
.record-feature .eyebrow {
  color: #b6c4ed;
  margin-bottom: 24px;
}
.record-feature p:not(.eyebrow) {
  margin-block: 25px;
  color: #bfc7d7;
  font-size: 16px;
}
.record-feature a:hover {
  color: #aabdfd;
}
.record-outline {
  align-self: center;
  border: 1px solid #505868;
  padding: 27px;
  border-radius: 8px;
}
.record-outline > span {
  font-size: 11px;
  color: #bcc8e3;
}
.record-outline dl {
  margin: 20px 0 0;
}
.record-outline dl > div {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  padding-block: 15px;
  border-top: 1px solid #444b58;
  font-size: 12px;
}
.record-outline dt {
  color: #b1bee2;
}
.record-outline dd {
  margin: 0;
  color: #e5eaf5;
}
.deployment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.deployment-grid article {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 38px;
}
.deployment-grid h3 {
  margin-block: 30px 18px;
}
.deployment-grid p {
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 25px;
}
.resource-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  padding-block: 80px;
  border-bottom: 1px solid var(--line);
}
.resource-band h2 {
  margin-block: 22px;
  font-size: 32px;
}
.resource-band p:not(.eyebrow) {
  color: var(--muted);
  font-size: 16px;
  margin-bottom: 22px;
}
.pilot-cta {
  text-align: center;
  padding-block: 95px;
}
.pilot-cta h2 {
  margin-block: 25px;
  font-size: clamp(37px, 4.5vw, 58px);
}
.pilot-cta > p:not(.eyebrow) {
  color: var(--muted);
  max-width: 500px;
  margin: 0 auto 30px;
}
.sidekick-entry {
  display: flex;
  gap: 28px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-block: 35px 65px;
}
.sidekick-entry > img {
  flex: none;
}
.sidekick-entry h2 {
  font-size: 26px;
  margin-block: 5px 10px;
}
.sidekick-entry p:not(.eyebrow) {
  color: var(--muted);
  font-size: 14px;
  max-width: 650px;
}
.sidekick-entry > a {
  margin-left: auto;
  flex: none;
}

/* These illustrations and timelines belong only to the public home page. */
.page-home .product-demo {
  background: var(--panel);
  border-color: #3a4352;
  box-shadow: 0 24px 72px -40px #000000;
}
.page-home .demo-bar,
.page-home .demo-sidebar,
.page-home .product-demo figcaption {
  border-color: var(--line);
}
.page-home .fact-strip {
  padding-block: 22px;
}
.page-home .home-section,
.page-home .resource-band {
  padding-block: 96px;
}
.page-home .section-title {
  gap: 32px;
  margin-bottom: 32px;
}
.page-home .pathway-grid {
  gap: 24px;
}
.page-home .pathway {
  padding: 24px;
  border-color: var(--line);
  border-radius: 16px;
  color: var(--ink);
  background: linear-gradient(155deg, #182030, var(--panel) 64%);
}
.page-home .pathway:hover {
  color: var(--ink);
  border-color: #627ca5;
}
.page-home .pathway-top {
  margin-bottom: 18px;
  color: #c3d2e9;
}
.page-home .pathway p {
  color: var(--muted);
}
.page-home .pathway h3 {
  margin-top: 22px;
  font-size: 26px;
}
.page-home .pathway-bottom {
  padding-top: 28px;
}
.page-home .workflow-art,
.page-home .knowledge-art,
.page-home .deployment-art {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #354257;
  border-radius: 12px;
  background: radial-gradient(ellipse at 64% 0%, #2c3b5366, transparent 72%), #0d121b;
}
.page-home .workflow-art svg,
.page-home .knowledge-art svg,
.page-home .deployment-art svg {
  display: block;
  width: 100%;
  height: auto;
}
.page-home .static-art-label {
  display: block;
  padding: 0 16px 12px;
  color: #bbc8dc;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.page-home .scene-panel {
  fill: #182131;
  stroke: #62728c;
  stroke-width: 1.2;
}
.page-home .scene-shadow {
  fill: #020407;
  opacity: 0.8;
}
.page-home .scene-document {
  fill: #233149;
  stroke: #859dbf;
  stroke-width: 1.2;
}
.page-home .scene-message {
  fill: #344c72;
  stroke: #6e8eba;
  stroke-width: 1;
}
.page-home .scene-line,
.page-home .scene-silver,
.page-home .scene-blue,
.page-home .scene-connector {
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.page-home .scene-line { stroke: #6f809c; }
.page-home .scene-silver { stroke: #e1e8f4; }
.page-home .scene-blue { stroke: #93b7ee; }
.page-home .scene-connector { stroke: #687f9f; stroke-dasharray: 3 4; }
.page-home .knowledge-section {
  gap: 64px;
  align-items: center;
}
.page-home .knowledge-art {
  max-width: 400px;
  margin-top: 32px;
}
.page-home .knowledge-stack {
  padding-left: 22px;
}
.page-home .knowledge-stack > div {
  position: relative;
  border: 0;
  border-left: 1px solid #506788;
  padding: 8px 0 30px 28px;
}
.page-home .knowledge-stack > div::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -7px;
  width: 12px;
  height: 12px;
  border: 1px solid #8da9d1;
  border-radius: 50%;
  background: var(--paper);
}
.page-home .knowledge-stack > div:last-child {
  border-color: transparent;
  padding-bottom: 0;
}
.page-home .record-feature {
  gap: 48px;
  padding: 96px 0;
  margin-top: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  align-items: center;
}
.page-home .record-outline {
  padding: 28px;
  border-color: #43516a;
  border-radius: 16px;
  background: linear-gradient(145deg, #182131, var(--panel));
}
.page-home .record-requirements-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 550;
}
.page-home .record-outline dl > div {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 5px 14px;
  min-height: 88px;
  padding: 16px 0;
  border: 0;
}
.page-home .record-outline dl > div::before {
  content: attr(data-step);
  z-index: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #7188aa;
  border-radius: 50%;
  background: #172031;
  color: #d5e3f6;
  font-size: 11px;
}
.page-home .record-outline dl > div:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50px;
  bottom: -16px;
  left: 16px;
  width: 1px;
  background: #536784;
}
.page-home .record-outline dt,
.page-home .record-outline dd {
  grid-column: 2;
  min-width: 0;
}
.page-home .record-outline dt { font-size: 14px; }
.page-home .record-outline dd { font-size: 13px; line-height: 1.65; }
.page-home .deployment-grid {
  gap: 24px;
}
.page-home .deployment-grid article {
  padding: 28px;
  background: var(--panel);
}
.page-home .deployment-art {
  margin-top: 24px;
}
.page-home .resource-band {
  gap: 24px;
}
.page-home .resource-band > div {
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.page-home .resource-band h2 {
  margin-block: 18px;
  font-size: 29px;
}
.page-home .pilot-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-block: 0 96px;
  padding: 56px;
  border: 1px solid #3b4b65;
  border-radius: 20px;
  text-align: left;
  background: linear-gradient(125deg, #19253a, var(--panel) 72%);
}
.page-home .pilot-cta h2 {
  max-width: 760px;
}
.page-home .pilot-cta > p:not(.eyebrow) {
  margin: 0 0 28px;
}
.page-home .pilot-mark {
  position: absolute;
  z-index: -1;
  right: -24px;
  bottom: -55px;
  width: 380px;
  height: 380px;
  opacity: 0.055;
  pointer-events: none;
}
.page-home .pilot-mark svg { width: 100%; height: 100%; fill: #c6d9ff; }
@media (max-width: 800px) {
  .page-home .product-stage { padding-block: 48px; }
  .page-home .home-section,
  .page-home .resource-band,
  .page-home .record-feature { padding-block: 72px; }
  .page-home .section-title { margin-bottom: 28px; }
  .page-home .knowledge-section { gap: 36px; }
  .page-home .record-feature { gap: 32px; }
  .page-home .pilot-cta { margin-bottom: 72px; padding: 36px; }
}
@media (max-width: 480px) {
  .page-home .product-stage { padding-block: 32px; }
  .page-home .home-section,
  .page-home .resource-band,
  .page-home .record-feature { padding-block: 48px; }
  .page-home .section-title { margin-bottom: 24px; }
  .page-home .pathway-grid,
  .page-home .deployment-grid,
  .page-home .resource-band { gap: 20px; }
  .page-home .demo-sidebar { display: none; }
  .page-home .demo-bar { padding: 12px; }
  .page-home .record-outline,
  .page-home .deployment-grid article,
  .page-home .resource-band > div { padding: 22px; }
  .page-home .record-outline dl > div { column-gap: 10px; }
  .page-home .pilot-cta { margin-bottom: 48px; padding: 28px; }
  .page-home .pilot-mark { width: 260px; height: 260px; right: -55px; bottom: -35px; }
}

/* Shared public page families: the content stays authored and explicit. */
.legacy-public-body {
  padding-bottom: 65px;
}
.legacy-public-body .page-intro {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 55px;
  padding-block: 60px 65px;
  border-bottom: 1px solid var(--line);
}
.page-intro .eyebrow {
  margin-bottom: 24px;
}
.page-intro h1 {
  max-width: 900px;
  font-size: clamp(40px, 5vw, 67px);
}
.page-intro .intro {
  font-size: 18px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 28px;
  max-width: 720px;
}
.page-intro-copy {
  min-width: 0;
}
.intro-companion {
  min-width: 0;
}
.page-intro:not(:has(.intro-companion)) {
  display: block;
}
.section,
.feature-block,
.scope-section,
.resource-section,
.workflow-section,
.developer-section {
  padding-block: 65px;
  border-bottom: 1px solid var(--line);
}
.section-heading,
.clear-section-heading,
.corporate-heading,
.workflow-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 55px;
  margin-bottom: 35px;
}
.section-heading p,
.clear-section-heading > p,
.corporate-heading > p {
  max-width: 430px;
  color: var(--muted);
}
.section-heading .eyebrow,
.clear-section-heading .eyebrow {
  margin-bottom: 20px;
}
.scope-grid,
.docs-cards,
.resource-grid,
.download-grid,
.responsibility-grid,
.capability-grid,
.platform-grid,
.foundation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
  margin-block: 35px;
}
.scope-card,
.docs-card,
.download-card,
.resource-card,
.capability-card,
.foundation-card,
.responsibility-grid article {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 30px;
}
.scope-card h3,
.docs-card h2,
.resource-card h3,
.capability-card h3 {
  font-size: 27px;
  margin-block: 20px 15px;
}
.scope-card p,
.docs-card p,
.resource-card p,
.capability-card p,
.responsibility-grid p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
}
.docs-card > span {
  display: block;
  font-size: 14px;
  margin-top: 23px;
  color: var(--accent);
}
.product-list,
.guide-list {
  margin-block: 30px;
}
.product-row {
  display: grid;
  grid-template-columns: 40px 1fr 1.5fr auto 20px;
  gap: 24px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 28px 0;
}
.product-name {
  font-size: 28px;
  letter-spacing: -0.04em;
}
.product-row p {
  color: var(--muted);
  font-size: 16px;
}
.tag {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 5px 10px;
  width: fit-content;
}
.guide-list > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 25px 0;
  border-top: 1px solid var(--line);
}
.guide-list p {
  font-size: 15px;
  color: var(--muted);
  margin-top: 8px;
}
.product-perspective,
.business-checklist,
.split-deployment,
.deployment-decision,
.developer-start,
.capability-overview,
.capability-lead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  align-items: center;
  padding-block: 60px;
}
.product-perspective h2,
.split-deployment h2 {
  margin-bottom: 25px;
}
.product-perspective p,
.split-deployment p {
  color: var(--muted);
}
.product-subnav,
.sidekick-release-line,
.release-summary,
.download-release-bar,
.package-bar,
.information-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
  padding-block: 25px;
  border-block: 1px solid var(--line);
  font-size: 14px;
}
.product-stage {
  margin-right: auto;
}
.product-availability,
.scope-note,
.notice,
.help-strip {
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 30px;
  margin-block: 35px;
}
.product-availability {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
}
.product-availability h2 {
  font-size: 30px;
  margin-block: 15px;
}
.product-availability p,
.notice p,
.scope-note p {
  color: var(--muted);
  font-size: 16px;
}
.related-products,
.help-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
}
.related-products h2,
.help-strip h3 {
  font-size: 28px;
  margin: 15px 0;
}
.business-cta,
.bottom-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding: 55px;
  margin-block: 50px;
  border-radius: var(--radius);
  background: #20242d;
  color: #f4f5fb;
}
.business-cta .micro,
.bottom-cta p {
  color: #c4cad7;
}
.business-cta h2,
.bottom-cta h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  margin-block: 20px;
}
.business-cta p {
  max-width: 600px;
}
.business-cta-actions {
  display: grid;
  gap: 20px;
  flex: none;
}
.business-cta .text-link {
  color: #d8e1ff;
}
.consumer-preview,
.sidekick-feature,
.sidekick-models {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding-block: 65px;
}
.consumer-preview h2,
.sidekick-feature h3,
.sidekick-models h2 {
  margin-block: 24px;
}
.sidekick-feature-copy > p,
.consumer-preview > div > p {
  color: var(--muted);
}
.product-banner {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 28px;
  background: var(--wash);
  margin-block: 35px;
}
.product-banner img {
  width: 65px;
  height: 65px;
}
.feature-block h3 {
  margin-bottom: 20px;
}
.download-card h2 {
  margin-block: 20px;
  font-size: 31px;
}
.download-card {
  display: flex;
  flex-direction: column;
}
.download-release-bar > span:nth-child(2) {
  color: var(--muted);
}
.download-release-bar a {
  margin-left: auto;
  text-decoration: underline;
}
.download-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
}
.download-card-top svg {
  width: 32px;
  height: 34px;
  flex: none;
}
.download-card .small-link {
  margin-top: auto;
  padding-top: 25px;
  align-self: start;
}
.download-card .os-symbol svg {
  width: 50px;
  height: 50px;
}
.download-card .spec {
  color: var(--muted);
  margin-block: 25px;
  font-size: 15px;
}
.download-card .fine {
  margin-top: 20px;
}
.download-card .button {
  width: 100%;
}
.download-edition,
.release-edition {
  background: #20242d;
  color: #f6f7fb;
  padding: 35px;
  display: grid;
  gap: 20px;
  border-radius: var(--radius);
}
.download-edition strong,
.release-edition strong {
  font-size: 40px;
  font-weight: 500;
}
.download-edition > span,
.release-edition > span {
  font-size: 13px;
  color: #b6c0d2;
}
.release {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 55px;
  padding-block: 50px;
  border-bottom: 1px solid var(--line);
}
.doc-grid,
.policy-layout {
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  gap: 70px;
  padding-top: 45px;
}
.doc-grid > *,
.policy-layout > *,
.guide-body {
  min-width: 0;
}
.doc-nav,
.information-nav {
  align-self: start;
  position: sticky;
  top: 120px;
  font-size: 14px;
}
.doc-nav a,
.information-nav a {
  display: block;
  padding-block: 7px;
  color: var(--muted);
  line-height: 1.6;
}
.doc-nav a[aria-current],
.information-nav a[aria-current] {
  color: var(--accent);
  font-weight: 600;
}
.doc-nav > .eyebrow {
  display: block;
  margin-block: 25px 12px;
}
.doc-nav > .eyebrow:first-child {
  margin-top: 0;
}
.doc-nav a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}
.doc-nav a[aria-current] {
  background: #e8ecfc;
  border-radius: 5px;
}
.guide-number {
  color: var(--muted);
  font:
    11px Plex,
    monospace;
}
.business-doc-nav {
  max-height: calc(100svh - 145px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.reading-contents {
  padding: 25px 29px;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 9px;
  margin-block: 30px 40px;
}
.reading-contents > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 28px;
  margin-top: 15px;
}
.reading-contents a {
  display: block;
  padding-block: 10px;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  text-decoration: underline;
}
.guide-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 30px;
  margin-top: 45px;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.guide-next h3 {
  font-size: 24px;
  margin-top: 15px;
}
.guide-next .button {
  flex: none;
}
.information-nav nav + nav {
  border-top: 1px solid var(--line);
  margin-top: 25px;
  padding-top: 25px;
}
.prose,
.policy-page {
  min-width: 0;
  max-width: 820px;
  font-size: 17px;
  line-height: 1.9;
}
.prose h2,
.policy-page h2 {
  font-size: 30px;
  margin-block: 45px 20px;
}
.prose h3,
.policy-page h3 {
  font-size: 23px;
  margin-block: 30px 15px;
}
.prose > h2:first-child,
.policy-page > h2:first-child {
  margin-top: 0;
}
.prose p,
.policy-page p {
  margin-bottom: 20px;
}
.prose a,
.policy-page a {
  text-decoration: underline;
  color: #294bbd;
}
.prose li,
.policy-page li {
  padding-left: 5px;
}
.prose dl,
.policy-page dl {
  margin-block: 25px;
}
.prose dt,
.policy-page dt {
  font-weight: 600;
  margin-top: 20px;
}
.prose dd,
.policy-page dd {
  margin-left: 0;
  color: var(--muted);
}
.step {
  border-top: 1px solid var(--line);
  padding-block: 35px;
}
.step h2 {
  margin-top: 20px;
}
.doc-on-page,
.guide-on-page,
.policy-contents {
  display: grid;
  gap: 8px;
}
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform-origin: left;
  z-index: 50;
}
.policy-contact {
  padding: 25px;
  background: var(--wash);
  margin-top: 45px;
}
.policy-contact a {
  display: block;
  margin-top: 12px;
}
.code-example {
  background: #192d3b;
  color: #dfebf3;
  border-radius: 9px;
  margin-block: 25px;
  min-width: 0;
  overflow: hidden;
}
.code-label {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 24px;
  font:
    12px Plex,
    monospace;
  border-bottom: 1px solid #7994a644;
}
.code-label span {
  color: #b7cad7;
}
pre {
  overflow-x: auto;
  padding: 25px;
  margin: 0;
  font:
    13px/1.9 Plex,
    monospace;
}
code {
  font-family: Plex, monospace;
  font-size: 0.85em;
  overflow-wrap: anywhere;
}
pre code {
  font-size: inherit;
  white-space: pre;
  overflow-wrap: normal;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 15px;
}
th,
td {
  padding: 20px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
thead {
  background: var(--wash);
}
.comparison-scroll,
.table-scroll {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  margin-block: 30px;
}
.comparison-scroll table {
  min-width: 660px;
}
.table-scroll table {
  min-width: 620px;
}
.deployment-comparison,
.deployment-responsibilities {
  padding-block: 55px;
}
.comparison-note {
  max-width: 850px;
  color: var(--muted);
  font-size: 15px;
}
.package-disclosures {
  display: grid;
  gap: 12px;
  margin-block: 35px;
}
.package-disclosures details,
.faq details {
  border-block: 1px solid var(--line);
  padding-block: 22px;
}
.package-disclosures summary,
.faq summary {
  font-weight: 550;
}
.package-disclosures details > div {
  padding-block: 25px;
}
.package-disclosures p {
  color: var(--muted);
}
.contact-desk,
.about-directory,
.about-principles,
.about-facts,
.business-facts,
.resource-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-block: 40px;
}
.contact-email {
  display: block;
  font-size: clamp(24px, 4vw, 46px);
  letter-spacing: -0.04em;
  margin-block: 25px;
  overflow-wrap: anywhere;
}
.contact-route,
.about-facts > div,
.about-directory > a,
.about-principles article {
  border-top: 1px solid var(--line);
  padding-block: 25px;
}
.contact-route h2 {
  font-size: 27px;
  margin-block: 18px;
}
.contact-direct {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--wash);
}
.contact-direct > a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  margin-block: 20px;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}
.contact-direct > p:last-child {
  color: var(--muted);
  font-size: 14px;
}
.contact-routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-block: 45px;
}
.contact-routes article {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.contact-routes h3 {
  margin-block: 25px 20px;
  font-size: 29px;
}
.contact-routes p {
  margin-bottom: 25px;
  font-size: 16px;
  color: var(--muted);
}
.contact-routes .text-link {
  margin-top: auto;
  align-self: start;
  font-size: 14px;
}
.contact-notes {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 50px;
  padding-block: 30px;
  border-top: 1px solid var(--line);
}
.contact-notes p:last-child {
  font-size: 15px;
  color: var(--muted);
}
.manifesto,
.about-manifesto {
  font-size: clamp(28px, 3.2vw, 43px);
  line-height: 1.5;
  letter-spacing: -0.03em;
  margin-block: 45px;
}
.package-scope,
.platform-intro,
.platform-groups,
.platform-foundations,
.capability-section,
.scale-plan {
  padding-block: 50px;
}
.capability-directory {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 20px;
  margin-block: 30px;
}
.capability-directory a {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 25px;
  background: white;
}
.capability-directory svg {
  width: 34px;
  height: 34px;
}
.capability-directory h3 {
  font-size: 23px;
  margin-block: 20px 12px;
}
.capability-directory p {
  color: var(--muted);
  font-size: 15px;
}
.capability-directory .scope-note {
  margin-top: 20px;
  font-size: 13px;
}
.workflow-explorer {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 55px;
  margin-block: 45px;
}
.workflow-tabs {
  display: grid;
  gap: 10px;
}
.workflow-tabs button {
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  padding: 20px;
  color: var(--muted);
}
.workflow-tabs [aria-selected="true"] {
  background: white;
  color: var(--ink);
  border-color: #8095e6;
}
.workflow-tabs strong {
  display: block;
  margin-bottom: 8px;
}
.workflow-panel {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 35px;
}
.workflow-panel h3 {
  margin-bottom: 20px;
}
.workflow-panel p {
  color: var(--muted);
  font-size: 16px;
}
.task-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block: 25px;
}
.task-switcher button {
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 5px;
}
.task-switcher [aria-pressed="true"] {
  background: var(--ink);
  color: white;
}
.not-found {
  padding-block: 100px 140px;
}
.not-found h1 {
  margin-block: 25px;
}
.not-found > p:not(.eyebrow) {
  max-width: 600px;
  color: var(--muted);
}

/* Retained page compositions use the same spacing and type as the new home. */
.directory-heading,
.guide-card-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 25px;
  margin-block: 35px;
}
.guide-card-top {
  align-items: center;
  margin-top: 0;
}
.docs-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 30px;
  padding-block: 24px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.docs-directory,
.guide-start,
.developer-feature,
.package-overview,
.resource-doorways,
.brief-details,
.about-introduction > div,
.about-status,
.record-story,
.capacity-section,
.capability-record {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 55px;
  padding-block: 60px;
  border-bottom: 1px solid var(--line);
}
.docs-directory h2 {
  font-size: 30px;
  margin-block: 20px 30px;
}
.docs-directory section,
.developer-code {
  min-width: 0;
}
.docs-card {
  display: flex;
  flex-direction: column;
}
.docs-card > span {
  margin-top: auto;
  padding-top: 24px;
}
.guide-start,
.about-status {
  padding: 40px;
  margin-block: 45px;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.guide-start h2,
.package-overview h2,
.about-status h2,
.developer-feature h2,
.brief-details h2,
.resource-doorways h2,
.record-story h2,
.capability-record h2 {
  margin-block: 22px;
}
.guide-start p,
.developer-code > p,
.developer-feature > div > p:not(.eyebrow),
.resource-doorways p:not(.eyebrow),
.brief-details p,
.about-introduction p,
.principle-grid p,
.capability-record p:not(.eyebrow) {
  color: var(--muted);
  font-size: 16px;
}
.guide-start .button,
.resource-doorways .text-link,
.capability-record .text-link {
  margin-top: 25px;
}
.setup-route {
  list-style: none;
  margin: 0;
  padding: 0;
}
.setup-route li {
  display: flex;
  gap: 25px;
  padding-block: 25px;
  border-top: 1px solid var(--line);
}
.setup-route li > span {
  font:
    12px Plex,
    monospace;
  color: var(--accent);
}
.setup-route strong {
  font-weight: 550;
  font-size: 21px;
}
.setup-route p {
  margin-top: 10px;
}
.integration-route,
.deployment-options,
.package-surfaces,
.platform-directory,
.about-introduction {
  padding-block: 60px;
  border-bottom: 1px solid var(--line);
}
.deployment-options {
  display: block;
}
.integration-steps,
.surface-grid,
.capability-groups,
.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
  margin-block: 35px;
}
.integration-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  list-style: none;
}
.integration-steps li {
  display: flex;
  gap: 22px;
  margin: 0;
  padding-block: 25px;
  border-top: 1px solid var(--line);
}
.integration-steps li > span {
  flex: none;
  font:
    12px Plex,
    monospace;
  color: var(--accent);
  padding-top: 8px;
}
.integration-steps h3,
.surface-card h3 {
  font-size: 25px;
  margin-bottom: 18px;
}
.integration-steps p,
.surface-card p,
.platform-scope-note {
  color: var(--muted);
  font-size: 15px;
}
.surface-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.surface-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.surface-card h3 {
  margin-top: 30px;
}
.surface-link {
  margin-top: auto;
  padding-top: 30px;
  font-size: 14px;
  color: var(--accent);
}
.deployment-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}
.topology-art {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: 5px;
  width: 90px;
  height: 65px;
  border-radius: 8px;
  background: #e8ecfc;
}
.topology-art i {
  width: 14px;
  height: 30px;
  border: 1px solid #8a9bcf;
  background: #d1dbf9;
}
.topology-prem i:nth-child(2) {
  height: 42px;
}
.topology-cloud i {
  height: 20px;
  border-radius: 4px;
}
.topology-cloud i:nth-child(2) {
  transform: translateY(-10px);
}
.deployment-package-note,
.platform-foundation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 25px;
  padding: 30px;
  margin-top: 35px;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.deployment-package-note p,
.platform-foundation > div {
  flex: 1 1 300px;
}
.deployment-package-note p,
.platform-foundation p {
  font-size: 15px;
  color: var(--muted);
}
.platform-foundation h3 {
  margin-block: 15px;
  font-size: 26px;
}
.brief-details details {
  padding-block: 22px;
  border-top: 1px solid var(--line);
}
.brief-details details p {
  margin-block: 20px;
}
.platform-scope-note {
  max-width: 790px;
  margin-bottom: 35px;
}
.capability-groups h3 {
  font:
    550 13px/1.7 DM,
    Arial,
    sans-serif;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
  color: var(--muted);
}
.capability-link {
  position: relative;
  display: block;
  padding: 25px 25px 25px 0;
  border-top: 1px solid var(--line);
}
.capability-link strong {
  display: block;
  font-size: 22px;
  font-weight: 550;
  line-height: 1.4;
}
.capability-link > span {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  color: var(--muted);
}
.capability-link b {
  position: absolute;
  top: 25px;
  right: 0;
  font-weight: 400;
}
.capacity-section {
  align-items: center;
}
.capacity-section h2 {
  font-size: clamp(62px, 7vw, 104px);
  margin-block: 25px;
}
.capacity-section h3 {
  margin-bottom: 25px;
}
.capacity-section .capacity-boundary {
  padding-block: 20px;
  color: var(--muted);
}
.about-introduction > div {
  padding-bottom: 0;
  border: 0;
}
.manifesto-margin {
  padding: 30px;
  border-left: 2px solid var(--accent);
}
.manifesto-margin > span {
  font-size: 12px;
  color: var(--muted);
}
.manifesto-margin p {
  font-size: 35px;
  color: var(--accent);
  line-height: 1.4;
  margin-block: 25px;
}
.principle-grid article {
  border-top: 1px solid var(--line);
  padding-block: 28px;
}
.principle-grid h3 {
  font-size: 28px;
  margin-block: 25px;
}
.release-summary strong {
  display: block;
  font-size: 25px;
  margin-top: 15px;
  font-weight: 550;
}

@media (max-width: 1100px) {
  .page-home {
    --home-gutter: 56px;
  }
  .shell,
  .wrap {
    width: min(100% - 56px, 1200px);
  }
  .desktop-nav {
    gap: 18px;
  }
  .header-inner {
    gap: 23px;
  }
  .header-cta {
    display: none;
  }
  .demo-workspace {
    grid-template-columns: 95px minmax(0, 1fr);
  }
  .demo-conversation {
    padding: 20px 16px;
  }
  .footer-top {
    grid-template-columns: repeat(4, 1fr);
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .knowledge-section,
  .resource-band,
  .record-feature {
    gap: 45px;
  }
  .record-feature {
    padding: 40px;
  }
  .doc-grid,
  .policy-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 35px;
  }
}
@media (max-width: 800px) {
  .page-home {
    --home-gutter: 40px;
  }
  .shell,
  .wrap {
    width: calc(100% - 40px);
  }
  .header-inner {
    justify-content: space-between;
  }
  .desktop-nav {
    display: none;
  }
  .mobile-menu {
    display: block;
  }
  .mobile-menu summary {
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 14px;
  }
  .mobile-menu nav {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    padding: 25px;
    background: #101827;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 15px 25px #20232915;
    max-height: calc(100vh - 73px);
    max-height: calc(100dvh - 73px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-menu a {
    display: block;
    padding-block: 12px;
  }
  .home-hero {
    min-height: 600px;
  }
  .hero-grid {
    padding-block: 42px 86px;
  }
  .hero-lead {
    max-width: 540px;
  }
  .hero-fluid-veil {
    background: radial-gradient(ellipse at 50% 33%, #07090de6 8%, #07090d99 42%, transparent 78%),
      linear-gradient(180deg, #07090d66, transparent 64%);
  }
  .hero-motion-control {
    right: 0;
    bottom: 18px;
  }
  .product-stage {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 55px;
  }
  .product-stage-intro h2 {
    max-width: none;
  }
  .product-demo {
    max-width: 630px;
    transform: none;
  }
  .demo-workspace {
    grid-template-columns: 125px minmax(0, 1fr);
  }
  .demo-conversation {
    padding: 25px;
  }
  .demo-answer h3 {
    font-size: 25px;
  }
  .fact-strip {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .fact-strip span + span {
    border: 0;
    padding: 0;
  }
  .home-section {
    padding-block: 60px;
  }
  .section-title,
  .section-heading,
  .clear-section-heading,
  .corporate-heading,
  .workflow-heading {
    display: block;
  }
  .section-title > a,
  .section-title > p {
    margin-top: 25px;
  }
  .pathway-grid {
    grid-template-columns: 1fr;
  }
  .pathway {
    min-height: 300px;
  }
  .pathway-top {
    margin-bottom: 30px;
  }
  .knowledge-section,
  .record-feature,
  .deployment-grid,
  .resource-band,
  .product-perspective,
  .business-checklist,
  .split-deployment,
  .developer-start,
  .capability-overview,
  .capability-lead,
  .product-availability,
  .consumer-preview,
  .sidekick-feature,
  .sidekick-models,
  .contact-desk,
  .about-directory,
  .about-principles,
  .about-facts,
  .business-facts,
  .resource-pair,
  .workflow-explorer {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .contact-routes,
  .contact-notes,
  .docs-directory,
  .guide-start,
  .developer-feature,
  .package-overview,
  .resource-doorways,
  .brief-details,
  .about-introduction > div,
  .about-status,
  .record-story,
  .capacity-section,
  .capability-record,
  .integration-steps,
  .surface-grid,
  .capability-groups,
  .principle-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .contact-routes h3 br {
    display: none;
  }
  .guide-start,
  .about-status {
    padding: 25px;
  }
  .directory-heading {
    display: block;
  }
  .directory-heading h2 {
    margin-top: 20px;
  }
  .guide-next {
    flex-direction: column;
    align-items: start;
  }
  .download-release-bar {
    gap: 12px 22px;
  }
  .download-release-bar > .eyebrow {
    width: 100%;
  }
  .download-release-bar a {
    margin-left: 0;
  }
  .record-feature {
    padding: 30px;
    margin-top: 55px;
  }
  .resource-band {
    padding-block: 55px;
  }
  .pilot-cta {
    padding-block: 65px;
  }
  .sidekick-entry {
    flex-wrap: wrap;
    gap: 20px;
  }
  .sidekick-entry > div {
    flex: 1;
    min-width: 180px;
  }
  .sidekick-entry > a {
    margin-left: 0;
  }
  .legacy-public-body .page-intro {
    grid-template-columns: 1fr;
    padding-block: 40px;
    gap: 30px;
  }
  .page-intro h1 {
    font-size: clamp(37px, 7vw, 55px);
  }
  .product-row {
    grid-template-columns: 30px 1fr 20px;
  }
  .product-row p {
    grid-column: 2;
  }
  .product-row .tag {
    grid-column: 2;
  }
  .product-row .row-arrow {
    grid-column: 3;
    grid-row: 1;
  }
  .business-cta,
  .bottom-cta,
  .related-products,
  .help-strip {
    flex-direction: column;
    align-items: start;
    padding: 30px;
    gap: 28px;
  }
  .doc-grid,
  .policy-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .doc-grid {
    padding-top: 24px;
    gap: 24px;
  }
  .doc-nav,
  .information-nav {
    position: static;
    border-bottom: 1px solid var(--line);
    padding-bottom: 25px;
  }
  .information-nav nav {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 6px 4px 14px;
    scrollbar-width: thin;
  }
  .information-nav nav + nav {
    margin-top: 12px;
    padding-top: 12px;
  }
  .information-nav nav > * {
    flex: none;
    margin: 0;
    padding: 10px;
    white-space: nowrap;
  }
  /* Every guide remains reachable without pushing the article below a sidebar. */
  .doc-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 4px 14px;
    scrollbar-width: thin;
  }
  .doc-nav > .eyebrow {
    margin: 0;
    padding-inline: 12px;
    white-space: nowrap;
  }
  .doc-nav a {
    flex: none;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 5px;
    white-space: nowrap;
  }
  .guide-body .page-intro {
    padding-top: 0;
  }
  .reading-contents {
    padding: 24px;
  }
  .reading-contents > div {
    grid-template-columns: 1fr;
  }
  .release {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 35px 25px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  .demo-workspace {
    grid-template-columns: 1fr;
  }
  .demo-sidebar {
    flex-direction: row;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid #383e49;
    gap: 20px;
    padding: 12px 17px;
  }
  .demo-sidebar > span:first-child,
  .demo-sidebar-bottom {
    display: none;
  }
  .demo-selected {
    margin: 0;
  }
  .demo-conversation {
    padding: 20px;
  }
  .demo-bar {
    padding: 17px;
  }
  .hero-copy .actions {
    display: grid;
    justify-items: center;
    gap: 14px;
  }
  .hero-lead {
    font-size: 17px;
    margin-top: 22px;
  }
  .pathway,
  .deployment-grid article {
    padding: 26px;
  }
  .record-feature {
    padding: 25px;
  }
  .record-outline {
    padding: 20px;
  }
  .scope-card,
  .docs-card,
  .download-card {
    padding: 25px;
  }
  .code-label {
    padding: 15px;
  }
  pre {
    padding: 20px 15px;
    font-size: 12px;
  }
  .footer-bottom {
    display: grid;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero-fluid-canvas {
    display: none;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

.two-col,
.information-section,
.pilot-plan,
.business-enquiry,
.privacy-inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  padding-block: 50px;
}
.information-section h2,
.pilot-plan h2,
.privacy-inline h2 {
  margin-block: 20px 25px;
}
.information-section > div > p:not(.eyebrow),
.pilot-plan p,
.privacy-inline .intro {
  color: var(--muted);
}
.information-rows {
  margin: 0;
}
.information-rows > div {
  padding-block: 25px;
  border-top: 1px solid var(--line);
}
.information-rows dt {
  font-size: 19px;
  font-weight: 550;
  margin-bottom: 12px;
}
.information-rows dd {
  margin: 0;
  color: var(--muted);
}
.pilot-plan ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pilot-plan li {
  display: flex;
  gap: 23px;
  border-top: 1px solid var(--line);
  padding-block: 25px;
}
.pilot-plan li > span {
  font-size: 12px;
  color: var(--accent);
  padding-top: 4px;
}
.pilot-plan h3 {
  font-size: 25px;
  margin-bottom: 14px;
}
.workflow-stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 0;
  list-style: none;
}
.workflow-stages li {
  border-top: 1px solid var(--line);
  padding-block: 25px;
}
.workflow-stages h3 {
  font-size: 25px;
  margin-block: 22px;
}
.workflow-stages p {
  font-size: 16px;
  color: var(--muted);
}
.business-film {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #20242d;
}
.business-film > video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.business-film-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #20242d;
  color: white;
  font-size: 11px;
}
.film-control {
  color: inherit;
  font: inherit;
  background: transparent;
  border: 1px solid currentColor;
  padding: 8px 12px;
  border-radius: 5px;
}
.film-chapter {
  position: relative;
  isolation: isolate;
  margin-block: 50px;
  padding: 60px;
  border-radius: 12px;
  overflow: hidden;
  color: #f5f7fc;
  background: #20242d;
}
.chapter-film {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.25;
}
.chapter-film video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-chapter-heading {
  max-width: 700px;
}
.film-chapter h2 {
  margin-block: 25px;
}
.film-chapter p,
.film-chapter .micro {
  color: #d1d7e6;
}
.film-chapter-bottom {
  margin-top: 35px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
}
@media (max-width: 800px) {
  .two-col,
  .information-section,
  .pilot-plan,
  .business-enquiry,
  .privacy-inline,
  .workflow-stages {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .film-chapter {
    padding: 30px;
  }
  .business-film > video {
    aspect-ratio: 4 / 3;
  }
}

/* Retained authored artwork and film controls; these are component rules,
   not the former site-wide theme cascade. Code keeps its existing palette. */
/* Blue, authored workflow illustrations introduce every part of Retvest. */
.studio .nav {
  gap: 21px;
}
.product-previews {
  position: relative;
  isolation: isolate;
  padding: 78px 0;
}
.product-previews::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0 calc(50% - 50vw);
  border-top: 1px solid #c9d9e4;
  border-bottom: 1px solid #c9d9e4;
  background: linear-gradient(
      117deg,
      transparent 0 64%,
      #9bbbd222 64% 78%,
      transparent 78%
    ),
    radial-gradient(ellipse at 0 10%, #bdd4e7 0, transparent 62%),
    linear-gradient(155deg, #e2edf4 0, #edf3f7 48%, #d3e1ec 100%);
}
.preview-introduction {
  max-width: 710px;
  margin: 24px 0 13px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}
.preview-availability {
  max-width: 850px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  margin-bottom: 27px;
}
.preview-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  font-size: 13px;
}
.preview-jump a:hover {
  color: #426e91;
}
.preview-group {
  padding-top: 49px;
  scroll-margin-top: 30px;
}
.preview-group-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 26px;
}
.preview-group-heading h3 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.preview-group-heading > span {
  color: var(--muted);
  font-size: 11px;
}
.product-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px 28px;
}
#integration-previews .product-preview-grid,
#foundation-previews .product-preview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-picture {
  margin: 0;
  min-width: 0;
}
.product-picture picture {
  display: block;
}
.product-picture img {
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  display: block;
}
.preview-motion-art {
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  display: block;
}
.preview-motion-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 20px;
  color: #4e6679;
  font-size: 12px;
}
.preview-motion-toggle {
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid #90a9bb;
  border-radius: 4px;
  background: #f7fafc;
  color: #294f6d;
  font: inherit;
  cursor: pointer;
}
.preview-motion-toggle:hover {
  background: #fff;
  border-color: #294f6d;
}
.preview-motion-toggle:disabled {
  cursor: default;
  opacity: 0.7;
}
.preview-motion-toggle:focus-visible {
  outline: 2px solid #294f6d;
  outline-offset: 4px;
}

/* Nine-second workflow stories leave the finished illustration readable.
   The SVGs stay complete without JS. All animation pauses outside the viewport. */
@media (prefers-reduced-motion: no-preference) {
  .preview-motion-ready .preview-beat {
    animation: preview-beat-one 9s ease-in-out infinite both;
  }
  .preview-motion-ready .preview-phase-2 {
    animation-name: preview-beat-two;
  }
  .preview-motion-ready .preview-phase-3 {
    animation-name: preview-beat-three;
  }
  .preview-motion-ready .preview-ink {
    transform-box: fill-box;
    transform-origin: left center;
    animation: preview-ink 9s ease-in-out infinite both;
  }
  .preview-motion-ready .preview-phase-2 .preview-ink {
    animation-name: preview-ink-two;
  }
  .preview-motion-ready .preview-pointer {
    animation: preview-pointer 9s ease-in-out infinite both;
  }
  .preview-motion-ready .preview-wave {
    transform-box: fill-box;
    transform-origin: center;
    animation: preview-wave 1.2s ease-in-out var(--wave-delay, 0s) infinite
      alternate;
  }
  .preview-motion-ready[data-preview-playing="false"] .preview-motion-art * {
    animation-play-state: paused;
  }
  .compact-previews .product-picture-link .preview-motion-art {
    transition: transform 0.3s ease;
  }
  .compact-previews
    .product-picture-link:is(:hover, :focus-visible)
    .preview-motion-art {
    transform: translateY(-4px);
  }
}
@keyframes preview-beat-one {
  0%,
  4% {
    opacity: 0;
    transform: translateY(6px);
  }
  12%,
  87% {
    opacity: 1;
    transform: translateY(0);
  }
  97%,
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes preview-beat-two {
  0%,
  21% {
    opacity: 0;
    transform: translateY(6px);
  }
  31%,
  87% {
    opacity: 1;
    transform: translateY(0);
  }
  97%,
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes preview-beat-three {
  0%,
  42% {
    opacity: 0;
    transform: translateY(6px);
  }
  52%,
  87% {
    opacity: 1;
    transform: translateY(0);
  }
  97%,
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes preview-ink {
  0%,
  8% {
    transform: scaleX(0);
  }
  23%,
  100% {
    transform: scaleX(1);
  }
}
@keyframes preview-ink-two {
  0%,
  28% {
    transform: scaleX(0);
  }
  44%,
  100% {
    transform: scaleX(1);
  }
}
@keyframes preview-pointer {
  0%,
  12% {
    opacity: 0;
    transform: translate(12px, 16px);
  }
  24%,
  32% {
    opacity: 1;
    transform: translate(0, 0);
  }
  36% {
    opacity: 1;
    transform: translate(-2px, -2px);
  }
  41%,
  82% {
    opacity: 1;
    transform: translate(0, 0);
  }
  94%,
  100% {
    opacity: 0;
    transform: translate(0, 0);
  }
}
@keyframes preview-wave {
  from {
    transform: scaleY(0.45);
  }
  to {
    transform: scaleY(1);
  }
}
.product-picture figcaption {
  color: #4e6679;
  font-size: 11px;
  letter-spacing: 0.025em;
  padding: 11px 0;
}
.product-picture-link {
  display: block;
}
.product-preview-copy {
  padding-top: 14px;
}
.product-preview h4 {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin: 0 0 14px;
}
.product-preview-copy > p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
}
.preview-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px 24px;
  margin-top: 22px;
}
.preview-actions .text-link {
  font-size: 12px;
  gap: 17px;
}
.preview-actions .small-link {
  font-size: 12px;
  color: var(--muted);
}
.detailed-previews .product-preview-grid {
  display: block !important;
}
.detailed-previews .product-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 64px;
  padding: 42px 0 48px;
  border-top: 1px solid var(--line);
}
.detailed-previews .product-preview-copy {
  padding: 0;
}
.detailed-previews .product-preview h4 {
  font-size: 34px;
}
.detailed-previews .product-picture-link {
  position: sticky;
  top: 30px;
}
.detailed-previews .product-preview:nth-child(even) .product-picture-link {
  order: 2;
}
.preview-details {
  margin: 28px 0 0;
}
.preview-details > div {
  padding: 17px 0;
  border-top: 1px solid var(--line);
}
.preview-details dt {
  font-size: 14px;
  font-weight: 550;
}
.preview-details dd {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}
.preview-scope {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 9px;
}
.preview-scope summary {
  cursor: pointer;
  font-size: 12px;
  padding: 17px 0;
}
.preview-scope p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}
.capability-picture {
  width: 100%;
}
.capability-scenario {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 50px;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
}
.capability-scenario p:last-child {
  margin: 0;
  font-size: 18px;
  line-height: 1.75;
  max-width: 750px;
}
.consumer-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 80px 0;
}
.consumer-preview h2 {
  font-size: clamp(40px, 4vw, 60px);
  letter-spacing: -0.045em;
  line-height: 1.1;
  margin: 25px 0;
  font-weight: 500;
}
.consumer-preview p:not(.eyebrow) {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.85;
}
.consumer-preview .fine {
  font-size: 11px !important;
  margin-top: 22px;
}
.consumer-preview .actions {
  margin-top: 23px;
  gap: 26px;
  flex-wrap: wrap;
}
.deployment-clear .deployment-grid p {
  min-height: 0;
  margin-bottom: 17px;
}
.deployment-package-note {
  margin-top: 40px;
  background: #e9f0f6;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 0.7fr 1.3fr auto;
  gap: 28px;
  align-items: center;
}
.deployment-package-note strong {
  font-size: 20px;
  font-weight: 500;
}
.deployment-package-note p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
}
.deployment-package-note .text-link {
  font-size: 12px;
}
.comparison-scroll {
  overflow-x: auto;
  margin-top: 40px;
}
.comparison-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.75;
  text-align: left;
  min-width: 690px;
}
.comparison-scroll th,
.comparison-scroll td {
  padding: 23px 25px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.comparison-scroll thead {
  background: #1b3447;
  color: #fff;
}
.comparison-scroll thead th {
  font-size: 16px;
  font-weight: 500;
}
.comparison-scroll tbody th {
  width: 22%;
  font-weight: 500;
  padding-left: 0;
}
.comparison-scroll td {
  width: 39%;
  color: var(--muted);
}
.comparison-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
  margin-top: 23px;
  max-width: 850px;
}
.split-deployment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
  padding: 80px 0;
  border-top: 1px solid var(--line);
}
.split-deployment h2,
.deployment-responsibilities h2 {
  font-size: clamp(36px, 3.4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.12;
  margin: 23px 0;
}
.split-deployment p:not(.eyebrow) {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.85;
  margin-bottom: 20px;
}
.deployment-responsibilities {
  padding: 72px 0;
  border-top: 1px solid var(--line);
}
.responsibility-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 39px;
}
.responsibility-grid article {
  border-top: 1px solid var(--line);
  padding-top: 25px;
}
.responsibility-grid span {
  font-size: 11px;
  color: var(--muted);
}
.responsibility-grid h3 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 23px 0 16px;
}
.responsibility-grid p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}
@media (max-width: 1100px) {
  .studio .header .wrap {
    flex-wrap: wrap;
  }
  .studio .menu {
    display: block;
    background: transparent;
    border: 1px solid currentColor;
    padding: 9px 14px;
    font-size: 12px;
  }
  .studio .nav {
    display: none;
    flex-basis: 100%;
    flex-wrap: wrap;
    padding: 20px 0;
    gap: 21px;
  }
  .studio .nav.open,
  html:not(.js) .studio .nav {
    display: flex;
  }
  .product-preview-grid {
    gap: 35px 20px;
  }
  .detailed-previews .product-preview {
    gap: 35px;
  }
  .consumer-preview,
  .split-deployment {
    gap: 40px;
  }
  .deployment-package-note {
    grid-template-columns: 1fr 2fr;
  }
  .deployment-package-note .text-link {
    grid-column: 2;
  }
}
@media (max-width: 800px) {
  .product-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-previews,
  .consumer-preview,
  .split-deployment,
  .deployment-responsibilities {
    padding: 48px 0;
  }
  .product-preview h4 {
    font-size: 24px;
  }
  .detailed-previews .product-preview {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .detailed-previews .product-picture-link {
    position: static;
    order: 0 !important;
  }
  .consumer-preview,
  .split-deployment {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .responsibility-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .capability-scenario {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .preview-jump {
    gap: 16px 24px;
  }
  .deployment-package-note {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 25px;
  }
  .deployment-package-note .text-link {
    grid-column: auto;
  }
}
@media (max-width: 560px) {
  .product-preview-grid,
  #integration-previews .product-preview-grid,
  #foundation-previews .product-preview-grid {
    grid-template-columns: 1fr;
  }
  .preview-group-heading {
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }
  .preview-group-heading h3 {
    font-size: 22px;
  }
  .preview-group {
    padding-top: 37px;
  }
  .preview-actions {
    justify-content: space-between;
  }
}

/* A larger, authored story gives the collection a beginning and an outcome. */
.compact-previews::before {
  background: #eef2f4;
}
.workflow-stage {
  margin: 42px 0 16px;
}
.story-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 28px;
}
.story-heading .eyebrow {
  font-size: 10px;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.story-heading h3 {
  font-size: clamp(30px, 3.5vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.045em;
  font-weight: 500;
  margin: 0;
}
.story-selector {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}
.story-selector button {
  padding: 12px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: #566775;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.story-selector button[aria-pressed="true"] {
  color: #162d41;
  border-color: #234a6b;
}
.story-selector button:focus-visible,
.story-caption button:focus-visible {
  outline: 2px solid #3979d7;
  outline-offset: 4px;
}
.story-canvas {
  position: relative;
  height: 470px;
  overflow: hidden;
  isolation: isolate;
  background: #142b3d;
  color: #f9fbff;
  border-radius: 6px;
}
.story-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(#c0d6e508 1px, transparent 1px),
    linear-gradient(90deg, #c0d6e508 1px, transparent 1px),
    radial-gradient(ellipse at 65% 10%, #45668177, transparent 64%);
  background-size:
    38px 38px,
    38px 38px,
    100% 100%;
}
.story-coordinate {
  position: absolute;
  left: 4%;
  top: 26px;
  color: #b1c4d3;
  font: 9px monospace;
  letter-spacing: 0.12em;
}
.story-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.story-track {
  stroke: #7395b16e;
  stroke-width: 1;
}
.story-signal {
  stroke: #bcdcff;
  stroke-width: 2;
  stroke-dasharray: 16 84;
  stroke-dashoffset: -84;
}
.story-source {
  position: absolute;
  transform-origin: center;
}
.story-input {
  left: 6%;
  top: 20%;
  width: 30%;
  background: #29495f;
  padding: 24px;
  border: 1px solid #68859a;
  box-shadow: 0 18px 32px #05152244;
  transform: rotate(-3deg);
}
.story-label {
  font: 9px monospace;
  letter-spacing: 0.12em;
  color: #b4cadc;
}
.story-input > p {
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 450;
  line-height: 1.3;
  margin: 15px 0 22px;
  letter-spacing: -0.02em;
}
.story-input-footer {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #c9d9e5;
}
.story-context {
  left: 11%;
  bottom: 8%;
  width: 26%;
  padding: 18px 20px;
  background: #1c384d;
  border: 1px solid #567186;
  transform: rotate(2deg);
  box-shadow: 0 12px 24px #05152233;
}
.story-context .story-label {
  display: block;
  margin-bottom: 11px;
}
.story-context > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: 12px;
  border-top: 1px solid #56718655;
}
.story-context small {
  margin-left: auto;
  font: 9px monospace;
  color: #a0b9cc;
}
.story-file-icon {
  color: #aacdee;
  font-size: 17px;
}
.story-junction {
  position: absolute;
  top: 53%;
  left: 44.4%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid #92b2c8;
  background: #233e52;
}
.story-junction span {
  transform: rotate(-45deg);
  font-size: 20px;
  font-weight: 550;
}
.story-output {
  position: absolute;
  left: 58%;
  top: 10%;
  width: 35%;
  max-width: 390px;
}
.story-paper {
  position: relative;
  z-index: 1;
  background: #fafcfe;
  color: #20374b;
  padding: 25px 27px 19px;
  box-shadow: 0 25px 60px #020c1666;
  transform: rotate(1deg);
}
.story-paper-edge {
  position: absolute;
  inset: 7px -9px 51px 9px;
  background: #9ebbd0;
  transform: rotate(4deg);
}
.story-paper-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 9px monospace;
  letter-spacing: 0.06em;
}
.story-paper-top > span:last-child {
  font-size: 21px;
}
.story-paper h4 {
  font-size: clamp(23px, 2.6vw, 34px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin: 20px 0 16px;
}
.story-paper > p {
  font-size: 12px;
  color: #4c6171;
  line-height: 1.65;
  margin: 0 0 18px;
}
.story-extract {
  border-left: 2px solid #6d98bb;
  padding: 1px 0 1px 12px;
}
.story-extract > span {
  font-size: 9px;
  color: #5b7488;
}
.story-extract > p {
  font-size: 12px;
  line-height: 1.55;
  margin: 7px 0 0;
}
.story-paper-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #60758a;
  border-top: 1px solid #dbe4eb;
  padding-top: 14px;
  margin-top: 22px;
}
.story-review {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
  margin: 15px -6px 0 20px;
}
.story-review-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #8dacbf;
  border-radius: 50%;
  font-size: 17px;
}
.story-review strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
}
.story-review div > span {
  display: block;
  font-size: 10px;
  color: #b5ccdd;
  margin-top: 5px;
}
.story-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  color: #536a7c;
  font-size: 10px;
}
.story-caption button {
  border: 0;
  background: none;
  color: #274f70;
  font: inherit;
  cursor: pointer;
  padding: 7px 0 7px 14px;
}
.story-caption button[hidden] {
  display: none;
}
.preview-motion-ready .story-input {
  animation: story-input 12s ease-in-out infinite;
}
.preview-motion-ready .story-context {
  animation: story-context 12s ease-in-out infinite;
}
.preview-motion-ready .story-signal {
  animation: story-signal 12s ease-in-out infinite;
}
.preview-motion-ready .story-signal-second {
  animation-delay: 0.6s;
}
.preview-motion-ready .story-output {
  animation: story-output 12s cubic-bezier(0.2, 0.65, 0.3, 1) infinite;
}
.preview-motion-ready .story-extract {
  animation: story-extract 12s ease-in-out infinite;
  transform-origin: left;
}
.preview-motion-ready .story-review {
  animation: story-review 12s ease-in-out infinite;
}
.workflow-stage[data-preview-playing="false"] *,
.workflow-stage[data-preview-playing="false"] *::before {
  animation-play-state: paused !important;
}
@keyframes story-input {
  0%,
  100% {
    opacity: 0.15;
    transform: translate(-26px, 15px) rotate(-6deg);
  }
  12%,
  90% {
    opacity: 1;
    transform: translate(0, 0) rotate(-3deg);
  }
}
@keyframes story-context {
  0%,
  8%,
  100% {
    opacity: 0.1;
    transform: translate(-15px, 28px) rotate(5deg);
  }
  22%,
  90% {
    opacity: 1;
    transform: translate(0, 0) rotate(2deg);
  }
}
@keyframes story-signal {
  0%,
  20% {
    stroke-dashoffset: 16;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  52%,
  88% {
    stroke-dashoffset: -84;
    opacity: 1;
  }
  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: -100;
  }
}
@keyframes story-output {
  0%,
  28%,
  100% {
    opacity: 0.12;
    transform: translate(-20px, 20px) scale(0.94);
  }
  48%,
  90% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}
@keyframes story-extract {
  0%,
  44%,
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
  58%,
  90% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes story-review {
  0%,
  56%,
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
  68%,
  90% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The same original companion icon used by the desktop app. */
.sidekick-scene {
  min-width: 0;
  position: relative;
  margin: 0;
  min-height: 460px;
  overflow: hidden;
  background: #e0ebf4;
  isolation: isolate;
  border: 1px solid #d2e0eb;
}
.sidekick-scene-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, #d3e3f0, #eff5f9 65%);
}
.sidekick-scene-grid::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border: 1px solid #b9d0e1;
  border-radius: 50%;
  top: -170px;
  right: -60px;
  box-shadow:
    0 0 0 50px #d8e6f033,
    0 0 0 100px #d8e6f033;
}
.sidekick-scene-note {
  position: absolute;
  left: 8%;
  top: 11%;
  width: 56%;
  transform: rotate(-6deg);
}
.sidekick-scene-note > span {
  font: 8px monospace;
  letter-spacing: 0.08em;
  color: #52748d;
}
.sidekick-scene-page {
  background: #fbfdff;
  padding: 26px;
  margin-top: 12px;
  box-shadow: 0 12px 28px #233d5519;
  border: 1px solid #c8dbe8;
}
.sidekick-scene-page p {
  font-size: clamp(21px, 2vw, 29px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #224660;
  margin: 0 0 24px;
}
.sidekick-scene-page i {
  display: block;
  width: 90%;
  height: 4px;
  background: #dce6ee;
  margin-top: 10px;
}
.sidekick-scene-page i:nth-of-type(2) {
  width: 70%;
}
.sidekick-scene-selection {
  border: 1px solid #789fbe;
  background: #eaf2f9;
  color: #315f83;
  padding: 10px 12px;
  margin-top: 23px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}
.sidekick-scene-icon {
  position: absolute;
  width: 36%;
  height: auto;
  right: 2%;
  top: 8%;
  transform: rotate(9deg);
  filter: drop-shadow(0 18px 16px #25528528);
}
.sidekick-scene-answer {
  position: absolute;
  width: 72%;
  right: 5%;
  bottom: 13%;
  padding: 22px 25px;
  background: #244965;
  color: #fff;
  box-shadow: 0 18px 36px #183e5b24;
  transform: rotate(2deg);
}
.sidekick-scene-answer > span {
  font: 8px monospace;
  letter-spacing: 0.05em;
  color: #c2d8e9;
}
.sidekick-scene-answer > p {
  font-size: clamp(22px, 2vw, 29px);
  margin: 14px 0 19px;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.sidekick-scene-voice {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}
.sidekick-scene-voice i {
  display: block;
  background: #adcde6;
  width: 2px;
  height: 7px;
}
.sidekick-scene-voice i:nth-child(3n) {
  height: 18px;
}
.sidekick-scene-voice i:nth-child(3n + 1) {
  height: 12px;
}
.sidekick-scene-voice span {
  margin-left: 11px;
  font-size: 10px;
  color: #d2e2ef;
}
.sidekick-scene figcaption {
  position: absolute;
  bottom: 20px;
  left: 8%;
  color: #50738d;
  font-size: 10px;
}
@media (max-width: 960px) {
  .story-heading {
    display: block;
  }
  .story-selector {
    margin-top: 16px;
  }
  .story-canvas {
    height: 480px;
  }
  .story-input {
    left: 5%;
    width: 33%;
    padding: 19px;
  }
  .story-context {
    left: 7%;
    width: 31%;
  }
  .story-output {
    left: 54%;
    width: 40%;
  }
  .story-paper {
    padding: 22px;
  }
}
@media (max-width: 620px) {
  .story-canvas {
    height: 730px;
  }
  .story-coordinate {
    left: 7%;
    top: 20px;
    font-size: 8px;
  }
  .story-input {
    left: 7%;
    top: 8%;
    width: 72%;
    padding: 20px;
  }
  .story-input > p {
    font-size: 24px;
    margin: 12px 0 14px;
  }
  .story-context {
    width: 61%;
    left: auto;
    right: 6%;
    top: 30%;
    bottom: auto;
    padding: 14px 18px;
  }
  .story-context > div {
    padding: 6px 0;
  }
  .story-junction {
    top: 49%;
    left: 22%;
    width: 37px;
    height: 37px;
  }
  .story-connections {
    display: none;
  }
  .story-output {
    top: 52%;
    left: 10%;
    width: 79%;
    max-width: none;
  }
  .story-paper {
    padding: 21px;
  }
  .story-paper h4 {
    font-size: 28px;
    margin: 15px 0 11px;
  }
  .story-paper > p {
    margin-bottom: 12px;
  }
  .story-paper-bottom {
    margin-top: 15px;
  }
  .story-review {
    margin-top: 16px;
  }
  .story-selector {
    gap: 20px;
  }
  .story-selector button {
    font-size: 11px;
  }
  .story-caption {
    gap: 10px;
  }
  .sidekick-scene {
    min-height: 415px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .workflow-stage *,
  .workflow-stage *::before {
    animation: none !important;
  }
}

/* Retvest apps: four distinct, large compositions and a quiet supporting index. */
.nav-sidekick-icon {
  width: 25px;
  height: 25px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 7px;
  flex-shrink: 0;
}
.rv-apps {
  padding: 100px 0 75px;
  scroll-margin-top: 30px;
}
.rv-apps-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 60px;
  margin-bottom: 38px;
}
.rv-apps-heading .eyebrow {
  margin-bottom: 22px;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.rv-apps-heading h2 {
  font-size: clamp(44px, 5.4vw, 72px);
  line-height: 0.99;
  letter-spacing: -0.05em;
  font-weight: 500;
  margin: 0;
}
.rv-apps-heading h2 > span {
  color: #456e9c;
}
.rv-apps-intro {
  padding-bottom: 8px;
}
.rv-apps-intro > p {
  font-size: 16px;
  line-height: 1.7;
  color: #5e6c7a;
  margin-bottom: 26px;
}
.rv-apps-intro .text-link {
  font-size: 12px;
}
.rv-apps-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  margin-bottom: 32px;
}
.rv-app-dock {
  display: flex;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
}
.rv-app-dock > a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: #44546a;
}
.rv-dock-icon {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #ffffff55;
}
.rv-dock-icon svg {
  width: 23px;
  height: 23px;
}
.rv-dock-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.rv-dock-chat {
  color: #45617d;
  background: #e3ebf2;
}
.rv-dock-work {
  color: #77634e;
  background: #ece7de;
}
.rv-dock-code {
  color: #b5d6de;
  background: #1d363d;
}
.rv-motion-control {
  background: none;
  border: 0;
  border-bottom: 1px solid #a9b7c3;
  padding: 8px 0;
  font: inherit;
  font-size: 11px;
  color: #516576;
  cursor: pointer;
  white-space: nowrap;
}
.rv-motion-control[hidden] {
  display: none;
}
.rv-app-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}
.rv-app-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  padding: 29px 32px 23px;
  scroll-margin-top: 25px;
}
.rv-app-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.rv-app-sidekick {
  grid-column: span 5;
  background: #e3eaf3;
  color: #264668;
}
.rv-app-sidekick::before {
  background: radial-gradient(ellipse at 15% 70%, #f7faff 0%, transparent 60%),
    linear-gradient(120deg, #d5e3ff00 50%, #cedbec 100%);
}
.rv-app-chat {
  grid-column: span 7;
  background: #e1e8ef;
  color: #2d465e;
}
.rv-app-chat::before {
  background: radial-gradient(ellipse at 65% 75%, #f6f8fa 0%, transparent 63%);
}
.rv-app-work {
  grid-column: span 5;
  background: #ebe7df;
  color: #625443;
}
.rv-app-work::before {
  background: radial-gradient(ellipse at 20% 68%, #faf8f3 0%, transparent 63%);
}
.rv-app-code {
  grid-column: span 7;
  background: #1d3439;
  color: #f0f5f0;
}
.rv-app-code::before {
  background: radial-gradient(
    ellipse at 90% 70%,
    #43685d77 0%,
    transparent 60%
  );
}
.rv-app-identity {
  display: flex;
  align-items: center;
  gap: 11px;
}
.rv-app-symbol {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid currentColor;
  border-radius: 10px;
}
.rv-app-sidekick .rv-app-symbol {
  border: 0;
}
.rv-app-symbol svg {
  width: 28px;
  height: 28px;
}
.rv-app-symbol img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.rv-app-identity h3 {
  font-size: 16px;
  font-weight: 550;
  letter-spacing: -0.02em;
  margin: 0 0 3px;
}
.rv-app-identity > div > span {
  display: block;
  font-size: 10px;
  opacity: 0.72;
}
.rv-app-open {
  margin-left: auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #49698840;
  border-radius: 50%;
  font-size: 22px;
  transition:
    transform 0.25s,
    background 0.25s;
}
.rv-app-code .rv-app-open {
  border-color: #b4d0c855;
}
.rv-app-open:hover {
  transform: translate(2px, -2px);
  background: #ffffff20;
}
.rv-app-copy {
  margin: 30px 0 0;
  position: relative;
  z-index: 3;
  pointer-events: none;
}
.rv-app-copy h4 {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.04em;
  margin: 0 0 15px;
}
.rv-app-copy > p {
  max-width: 390px;
  font-size: 13px;
  line-height: 1.75;
  margin: 0;
  opacity: 0.84;
}
.rv-app-sidekick .rv-app-copy h4 {
  font-size: clamp(30px, 3vw, 42px);
}
.rv-app-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-top: 21px;
  border-top: 1px solid #52668029;
  position: relative;
  z-index: 5;
  margin-top: auto;
}
.rv-app-code .rv-app-foot {
  border-color: #b4d0c830;
}
.rv-app-foot > span {
  font-size: 9px;
  opacity: 0.75;
  text-align: right;
}
.rv-app-link {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}
.rv-app-link > span {
  transition: transform 0.25s;
}
.rv-app-link:hover > span {
  transform: translateX(4px);
}
.rv-collection-scope {
  max-width: 880px;
  font-size: 11px;
  line-height: 1.8;
  color: #627180;
  padding-top: 21px;
  margin: 0;
}
.rv-apps a:focus-visible,
.rv-apps button:focus-visible,
.rv-apps summary:focus-visible {
  outline: 2px solid #3979d7;
  outline-offset: 5px;
}
.rv-app-code a:focus-visible {
  outline-color: #c2ebe3;
}

/* The angular Sidekick linked mark sits in front of a solid miniature workspace. */
.rv-sidekick-art {
  position: relative;
  height: 320px;
  margin: 0 -15px 4px;
  perspective: 900px;
}
.rv-sidekick-hero-icon {
  position: absolute;
  z-index: 4;
  right: 0;
  top: 1px;
  width: 158px;
  height: 158px;
  object-fit: contain;
  transform: rotate(2deg);
  filter: drop-shadow(0 20px 14px #255b982a);
}
.rv-sidekick-window {
  display: flex;
  position: absolute;
  width: 81%;
  max-width: 360px;
  height: 208px;
  left: 7%;
  top: 51px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #b8ccea;
  box-shadow:
    0 25px 44px #446c9c24,
    0 4px 0 #bdd0e7;
  overflow: hidden;
  transform: rotate(-2deg) rotateY(2deg);
}
.rv-mini-sidebar {
  width: 54px;
  background: #eef2f7;
  border-right: 1px solid #e0e7ef;
  flex-shrink: 0;
  padding: 16px 12px;
}
.rv-mini-sidebar > span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  font-size: 12px;
  font-weight: 600;
  background: #d8e6fc;
  color: #3e70bb;
  border-radius: 8px;
  margin-bottom: 22px;
}
.rv-mini-sidebar > span img {
  display: block;
  width: 28px;
  height: 28px;
}
.rv-mini-sidebar > i {
  display: block;
  height: 4px;
  margin: 13px 0;
  background: #c7d3e1;
  border-radius: 3px;
}
.rv-mini-sidebar > i:nth-of-type(2) {
  width: 70%;
}
.rv-mini-main {
  flex: 1;
  min-width: 0;
  padding: 17px;
  display: flex;
  flex-direction: column;
  color: #2a3646;
}
.rv-mini-top {
  font: 7px monospace;
  letter-spacing: 0.09em;
  color: #7a8a9c;
}
.rv-mini-main > p {
  margin: auto 0;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.035em;
}
.rv-mini-compose {
  padding: 10px 11px;
  border: 1px solid #d4e0ed;
  border-radius: 7px;
  font-size: 9px;
  color: #7a8a9c;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rv-mini-compose > span {
  display: grid;
  place-items: center;
  height: 19px;
  width: 19px;
  border-radius: 6px;
  background: #3979d7;
  color: #fff;
  font-size: 14px;
}
.rv-orbit {
  position: absolute;
  width: 240px;
  height: 240px;
  top: 24px;
  right: 8px;
  border: 1px solid #8eafdb33;
  border-radius: 50%;
  transform: rotateX(62deg) rotate(-25deg);
}
.rv-orbit-two {
  width: 320px;
  height: 320px;
  top: -12px;
  right: -27px;
  opacity: 0.5;
}
.rv-voice-slip {
  position: absolute;
  z-index: 6;
  right: 6%;
  bottom: 49px;
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 15px 22px;
  background: #305ea5;
  color: #fff;
  border-radius: 9px;
  box-shadow: 0 15px 30px #29579122;
  transform: rotate(1deg);
}
.rv-voice-slip > span {
  font-size: 11px;
}
.rv-voice-bars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 23px;
}
.rv-voice-bars i {
  display: block;
  width: 2px;
  height: 13px;
  background: #d6e7ff;
  border-radius: 2px;
}
.rv-voice-bars i:nth-child(3n) {
  height: 23px;
}
.rv-voice-bars i:nth-child(3n + 1) {
  height: 7px;
}
.rv-art-caption {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  font: 8px monospace;
  letter-spacing: 0.03em;
  opacity: 0.65;
}
.rv-theme-picker {
  display: flex;
  justify-content: flex-end;
  margin-top: 11px;
  margin-bottom: 0;
  z-index: 7;
  position: relative;
  gap: 12px;
}
.rv-theme-picker button {
  background: none;
  padding: 4px 0;
  font: inherit;
  font-size: 9px;
  color: #47618a;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}
.rv-theme-picker button[aria-pressed="true"] {
  border-bottom-color: #214b80;
  color: #193d6d;
}
.rv-app-sidekick[data-illustration-theme="dark"] .rv-sidekick-window {
  background: #25272c;
  border-color: #626d84;
  box-shadow:
    0 25px 44px #233b6135,
    0 4px 0 #879bb8;
}
.rv-app-sidekick[data-illustration-theme="dark"] .rv-mini-main {
  color: #eef1f7;
}
.rv-app-sidekick[data-illustration-theme="dark"] .rv-mini-sidebar {
  background: #30343c;
  border-color: #434b5a;
}
.rv-app-sidekick[data-illustration-theme="dark"] .rv-mini-sidebar i {
  background: #525c6f;
}
.rv-app-sidekick[data-illustration-theme="dark"] .rv-mini-compose {
  background: #30343c;
  color: #acb7c8;
  border-color: #535e72;
}
.rv-app-sidekick[data-illustration-theme="dark"] .rv-mini-top {
  color: #aab7c9;
}

/* Chat: a large sculptural quotation and a conversation with visible sources. */
.rv-chat-art {
  height: 370px;
  position: relative;
  margin: 0 -16px 4px;
}
.rv-quote {
  position: absolute;
  top: -35px;
  left: -5px;
  font-family: Georgia, serif;
  font-size: 270px;
  color: #91a9bc;
  opacity: 0.22;
  line-height: 1;
  text-shadow: 3px 4px 0 #c2d0dc;
}
.rv-chat-question {
  position: absolute;
  width: 68%;
  left: 5%;
  top: 41px;
  padding: 24px;
  background: #466482;
  color: #fff;
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  border-radius: 10px;
  box-shadow: 0 15px 25px #3b556a25;
  transform: rotate(-2deg);
}
.rv-chat-question > span {
  display: block;
  margin-top: 16px;
  font: 8px monospace;
  letter-spacing: 0.1em;
  color: #d4e1eb;
}
.rv-chat-answer {
  position: absolute;
  width: 75%;
  right: 2%;
  top: 166px;
  padding: 22px 23px;
  background: #fbfcfd;
  color: #344d64;
  border: 1px solid #c2cfdb;
  border-radius: 10px;
  box-shadow: 0 18px 25px #3b556a16;
  transform: rotate(2deg);
}
.rv-chat-answer > span {
  font: 7px monospace;
  letter-spacing: 0.04em;
  color: #657d92;
}
.rv-chat-answer > p {
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.03em;
  margin: 9px 0 15px;
}
.rv-source-stack {
  display: flex;
  gap: 8px;
}
.rv-source-stack > span {
  flex: 1;
  padding: 7px 9px;
  border: 1px solid #d6dfe7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 8px;
  background: #eff3f6;
}
.rv-source-stack b {
  font: 7px monospace;
  color: #70879a;
}
.rv-chat-art .rv-art-caption {
  bottom: 4px;
}
.rv-app-chat .rv-app-foot {
  margin-top: 23px;
}

/* Work: paper, a folded corner and a little movement in a finished deliverable. */
.rv-work-art {
  position: relative;
  height: 344px;
  margin: 13px -16px 4px;
}
.rv-work-note {
  width: 62%;
  position: absolute;
  left: 1%;
  top: 56px;
  padding: 23px;
  background: #d9cdbb;
  color: #675742;
  border: 1px solid #bfb09a;
  transform: rotate(-4deg);
  box-shadow: 0 16px 26px #9b6c4020;
}
.rv-work-note > span {
  font: 7px monospace;
  letter-spacing: 0.06em;
}
.rv-work-note > p {
  font-size: 18px;
  line-height: 1.4;
  margin: 15px 0 20px;
}
.rv-work-note > i {
  display: block;
  height: 3px;
  width: 100%;
  background: #b8a58a;
  margin-top: 10px;
}
.rv-work-note > i:last-child {
  width: 65%;
}
.rv-work-page {
  position: absolute;
  width: 65%;
  top: 21px;
  right: 5%;
  min-height: 260px;
  padding: 23px;
  background: #fffdf8;
  color: #675744;
  border: 1px solid #d0c5b5;
  transform: rotate(2deg);
  box-shadow: 0 22px 32px #8f603227;
}
.rv-work-page::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  border: 14px solid transparent;
  border-top-color: #ebe7df;
  border-right-color: #ebe7df;
  box-shadow: -1px 1px 0 #d8c3aa;
}
.rv-document-label {
  font: 8px monospace;
  letter-spacing: 0.06em;
}
.rv-work-page > p {
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.055em;
  margin: 23px 0 20px;
}
.rv-work-chart {
  display: flex;
  align-items: flex-end;
  height: 59px;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e7dbca;
}
.rv-work-chart i {
  flex: 1;
  background: #b7a287;
  height: 37%;
  border-radius: 2px 2px 0 0;
  transform-origin: bottom;
}
.rv-work-chart i:nth-child(2) {
  height: 56%;
  background: #a28c70;
}
.rv-work-chart i:nth-child(3) {
  height: 50%;
}
.rv-work-chart i:nth-child(4) {
  height: 78%;
  background: #8c785f;
}
.rv-work-chart i:nth-child(5) {
  height: 100%;
  background: #6c5d4a;
}
.rv-work-page-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  font-size: 8px;
}
.rv-work-page-foot > span:last-child {
  font-size: 20px;
}
.rv-file-slip {
  position: absolute;
  right: 11%;
  bottom: 39px;
  padding: 13px 17px;
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 10px;
  background: #72614c;
  color: #fffaf2;
  box-shadow: 0 15px 20px #7a4c3020;
  transform: rotate(-1deg);
}
.rv-file-slip b {
  font-size: 18px;
  font-weight: 400;
}

/* Code: a single meaningful edit, sized to read rather than ornamental lines. */
.rv-code-art {
  position: relative;
  min-height: 370px;
  margin: 13px -15px 4px;
}
.rv-code-bracket {
  position: absolute;
  top: -20px;
  left: -15px;
  font:
    270px Georgia,
    serif;
  color: #679282;
  opacity: 0.23;
}
.rv-code-window {
  position: relative;
  z-index: 2;
  width: 87%;
  margin: 36px 0 0 auto;
  background: #10272c;
  border: 1px solid #52766e;
  border-radius: 11px;
  overflow: hidden;
  transform: rotate(-3deg);
  box-shadow:
    0 23px 45px #091b2466,
    0 5px 0 #35564f;
}
.rv-code-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px 21px;
  border-bottom: 1px solid #39594f;
  font: 11px monospace;
  color: #d2e2dc;
}
.rv-code-file > span:last-child {
  font-size: 7px;
  letter-spacing: 0.03em;
  color: #8baaa1;
}
.rv-code-lines {
  padding: 18px 0 17px;
  font: 11px/1.9 monospace;
  color: #c2d9d1;
}
.rv-code-lines > span {
  display: block;
  padding: 2px 16px;
  white-space: pre;
}
.rv-code-lines em {
  font-style: normal;
  color: #6c8d86;
  display: inline-block;
  width: 26px;
  user-select: none;
}
.rv-code-lines b {
  font-weight: 400;
  color: #b8baee;
}
.rv-code-lines .rv-code-old {
  background: #4c343a;
  color: #d4a9a9;
}
.rv-code-lines .rv-code-new {
  background: #254d42;
  color: #b6e9c9;
}
.rv-code-review {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-top: 1px solid #39594f;
  font-size: 10px;
  line-height: 1.5;
  color: #9db8ad;
}
.rv-code-review strong {
  font-weight: 400;
  color: #d7e7df;
}
.rv-code-arrow {
  font-size: 26px;
  color: #bce0ce;
}
.rv-app-code .rv-art-caption {
  color: #d6e5df;
}

/* The remaining products retain their detail pages, with less repetition here. */
.rv-directory {
  margin-top: 73px;
}
.rv-directory-group {
  display: grid;
  grid-template-columns: 0.9fr 1.5fr;
  column-gap: 90px;
  padding: 43px 0;
  border-top: 1px solid #ccd6df;
  scroll-margin-top: 25px;
}
.rv-directory-group > div > h3 {
  font-size: 29px;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.04em;
  margin: 0 0 17px;
  max-width: 290px;
}
.rv-directory-group > div > p {
  font-size: 13px;
  line-height: 1.8;
  color: #697989;
  max-width: 295px;
  margin: 0;
}
.rv-directory-item + .rv-directory-item {
  border-top: 1px solid #dce3e9;
}
.rv-directory-item > a {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 20px 0;
}
.rv-directory-item:first-child > a {
  padding-top: 0;
}
.rv-directory-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: #e8eef5;
  border: 1px solid #d4dfe8;
  border-radius: 12px;
  flex-shrink: 0;
  color: #4b6f91;
}
.rv-directory-icon svg {
  width: 27px;
  height: 27px;
}
.rv-directory-item strong {
  display: block;
  font-size: 15px;
  font-weight: 550;
  color: #2e4357;
}
.rv-directory-item small {
  display: block;
  font-size: 11px;
  line-height: 1.75;
  color: #6c7a89;
  margin-top: 5px;
}
.rv-directory-arrow {
  margin-left: auto;
  font-size: 24px;
  color: #7b95aa;
  transition: transform 0.25s;
}
.rv-directory-item a:hover .rv-directory-arrow {
  transform: translate(3px, -3px);
}
.rv-directory-details {
  padding-bottom: 20px;
  margin-left: 61px;
  font-size: 12px;
  line-height: 1.8;
  color: #62758a;
}
.rv-directory-details summary {
  cursor: pointer;
  padding: 5px 0;
  color: #456a8b;
}
.rv-directory-details dl {
  display: grid;
  gap: 18px;
  margin: 20px 0;
}
.rv-directory-details dt {
  color: #2f455b;
  font-weight: 550;
}
.rv-directory-details dd {
  margin: 5px 0 0;
}
.rv-directory-details .text-link {
  font-size: 11px;
  margin-top: 17px;
}
.rv-core-scope {
  border-bottom: 1px solid #d3dce5;
  padding: 17px 0;
  font-size: 12px;
  line-height: 1.8;
  color: #66798b;
}
.rv-core-scope summary {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  color: #3c5d79;
}
.rv-core-scope .text-link {
  font-size: 11px;
  margin-top: 12px;
}
.rv-sidekick-feature {
  margin: 0;
  min-width: 0;
  background: #e3eaf3;
  border-radius: 16px;
  padding: 24px 25px 21px;
  overflow: hidden;
  color: #244f84;
}
.rv-sidekick-feature .rv-sidekick-art {
  height: 400px;
  margin: 0;
}
.rv-sidekick-feature .rv-sidekick-hero-icon {
  width: 205px;
  height: 205px;
  top: 22px;
  right: -14px;
}
.rv-sidekick-feature .rv-sidekick-window {
  top: 104px;
  width: 86%;
  left: 0;
  height: 225px;
}
.rv-sidekick-feature .rv-voice-slip {
  bottom: 34px;
}
.rv-sidekick-feature .rv-art-caption {
  display: none;
}
.rv-sidekick-feature figcaption {
  font: 9px monospace;
  letter-spacing: 0.04em;
  color: #5b79a0;
}

@media (prefers-reduced-motion: no-preference) {
  .rv-app-card.preview-motion-ready .rv-sidekick-hero-icon {
    animation: rv-companion-float 7s ease-in-out infinite;
  }
  .rv-app-card.preview-motion-ready .rv-sidekick-window {
    animation: rv-window-float 7s ease-in-out infinite;
  }
  .rv-app-card.preview-motion-ready .rv-voice-bars i {
    animation: rv-voice 0.95s ease-in-out infinite alternate;
    transform-origin: center;
  }
  .rv-app-card.preview-motion-ready .rv-voice-bars i:nth-child(2n) {
    animation-delay: -0.5s;
  }
  .rv-app-card.preview-motion-ready .rv-voice-bars i:nth-child(3n) {
    animation-delay: -0.8s;
  }
  .rv-app-card.preview-motion-ready .rv-chat-answer {
    animation: rv-chat-arrive 9s ease-in-out infinite;
  }
  .rv-app-card.preview-motion-ready .rv-chat-question {
    animation: rv-question-float 9s ease-in-out infinite;
  }
  .rv-app-card.preview-motion-ready .rv-work-page {
    animation: rv-page-float 9s ease-in-out infinite;
  }
  .rv-app-card.preview-motion-ready .rv-work-chart i {
    animation: rv-chart-grow 9s ease-in-out infinite;
  }
  .rv-app-card.preview-motion-ready .rv-work-chart i:nth-child(2n) {
    animation-delay: 0.2s;
  }
  .rv-app-card.preview-motion-ready .rv-code-new {
    animation: rv-code-highlight 8s ease-in-out infinite;
  }
  .rv-app-card.preview-motion-ready .rv-code-arrow {
    animation: rv-code-arrow 8s ease-in-out infinite;
  }
  .rv-app-card[data-preview-playing="false"] * {
    animation-play-state: paused !important;
  }
}
@keyframes rv-companion-float {
  0%,
  100% {
    transform: translateY(0) rotate(2deg);
  }
  50% {
    transform: translateY(-4px) rotate(1deg);
  }
}
@keyframes rv-window-float {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg) rotateY(2deg);
  }
  50% {
    transform: translateY(3px) rotate(-1deg) rotateY(0);
  }
}
@keyframes rv-voice {
  from {
    transform: scaleY(0.35);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes rv-chat-arrive {
  0%,
  100% {
    transform: translateY(2px) rotate(2deg);
  }
  35%,
  75% {
    transform: translateY(-2px) rotate(1deg);
  }
}
@keyframes rv-question-float {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-3px) rotate(-1deg);
  }
}
@keyframes rv-page-float {
  0%,
  100% {
    transform: translateY(0) rotate(2deg);
  }
  50% {
    transform: translateY(-3px) rotate(1deg);
  }
}
@keyframes rv-chart-grow {
  0%,
  100% {
    transform: scaleY(0.45);
  }
  35%,
  80% {
    transform: scaleY(1);
  }
}
@keyframes rv-code-highlight {
  0%,
  100% {
    background: #254d42;
  }
  45%,
  75% {
    background: #396c54;
  }
}
@keyframes rv-code-arrow {
  0%,
  100% {
    transform: translate(0, 0);
  }
  45%,
  75% {
    transform: translate(4px, -4px);
  }
}
@media (max-width: 1000px) {
  .rv-app-card {
    padding-left: 24px;
    padding-right: 24px;
  }
  .rv-app-copy h4,
  .rv-app-sidekick .rv-app-copy h4 {
    font-size: 35px;
  }
  .rv-sidekick-hero-icon {
    width: 155px;
    height: 155px;
    right: -7px;
    top: 15px;
  }
  .rv-mini-main > p {
    font-size: 18px;
  }
  .rv-sidekick-window {
    left: 3%;
    width: 88%;
  }
  .rv-chat-question {
    padding: 20px;
    font-size: 21px;
  }
  .rv-chat-answer {
    padding: 19px;
    width: 88%;
  }
  .rv-work-page {
    padding: 19px;
    width: 69%;
    right: 0;
  }
  .rv-work-note {
    padding: 17px;
  }
  .rv-work-page > p {
    font-size: 26px;
  }
  .rv-file-slip {
    right: 2%;
    font-size: 9px;
    gap: 10px;
  }
  .rv-code-window {
    width: 95%;
  }
  .rv-code-lines {
    font-size: 10px;
  }
  .rv-directory-group {
    gap: 45px;
  }
}
@media (max-width: 760px) {
  .rv-apps {
    padding: 65px 0 45px;
  }
  .rv-apps-heading {
    display: block;
    margin-bottom: 26px;
  }
  .rv-apps-heading h2 {
    font-size: 48px;
  }
  .rv-apps-intro {
    margin-top: 23px;
    padding: 0;
  }
  .rv-apps-intro > p {
    margin-bottom: 15px;
    font-size: 14px;
  }
  .rv-apps-toolbar {
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 23px;
  }
  .rv-app-dock {
    gap: 20px;
  }
  .rv-app-dock > a {
    font-size: 11px;
    gap: 6px;
  }
  .rv-app-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .rv-app-card {
    grid-column: 1;
    padding: 25px;
  }
  .rv-app-copy h4,
  .rv-app-sidekick .rv-app-copy h4 {
    font-size: 38px;
  }
  .rv-app-copy > p {
    font-size: 13px;
  }
  .rv-app-sidekick .rv-app-copy h4 br {
    display: initial;
  }
  .rv-sidekick-art,
  .rv-chat-art,
  .rv-work-art,
  .rv-code-art {
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .rv-sidekick-hero-icon {
    width: 158px;
    height: 158px;
    right: -7px;
  }
  .rv-sidekick-window {
    width: 88%;
    left: 0;
  }
  .rv-chat-question {
    width: 72%;
    font-size: 25px;
  }
  .rv-chat-answer {
    width: 80%;
    right: 0;
  }
  .rv-code-window {
    width: 95%;
  }
  .rv-code-lines {
    font-size: 10px;
  }
  .rv-directory {
    margin-top: 48px;
  }
  .rv-directory-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
    padding: 32px 0;
  }
  .rv-directory-group > div > h3 {
    font-size: 27px;
    max-width: none;
  }
  .rv-directory-group > div > p {
    max-width: none;
  }
  .rv-sidekick-feature .rv-sidekick-hero-icon {
    width: 195px;
    height: 195px;
  }
  .rv-sidekick-feature .rv-sidekick-window {
    width: 94%;
  }
}
@media (max-width: 420px) {
  .rv-apps-heading h2 {
    font-size: 41px;
  }
  .rv-app-dock {
    gap: 14px;
  }
  .rv-app-dock > a {
    flex-direction: column;
    gap: 5px;
  }
  .rv-app-card {
    padding: 22px 19px;
  }
  .rv-app-copy h4,
  .rv-app-sidekick .rv-app-copy h4 {
    font-size: 32px;
  }
  .rv-sidekick-hero-icon {
    width: 145px;
    height: 145px;
  }
  .rv-mini-main {
    padding: 13px;
  }
  .rv-mini-main > p {
    font-size: 18px;
  }
  .rv-mini-sidebar {
    width: 43px;
    padding: 16px 9px;
  }
  .rv-mini-compose {
    font-size: 8px;
    padding: 9px 7px;
  }
  .rv-voice-slip {
    right: 0;
    padding: 12px 16px;
  }
  .rv-chat-question {
    font-size: 23px;
  }
  .rv-chat-answer > p {
    font-size: 19px;
  }
  .rv-work-page {
    width: 71%;
    padding: 17px;
  }
  .rv-work-note {
    width: 66%;
    font-size: 15px;
  }
  .rv-code-lines {
    font-size: 8px;
  }
  .rv-code-lines > span {
    padding-left: 11px;
    padding-right: 8px;
  }
  .rv-code-lines em {
    width: 20px;
  }
  .rv-code-file {
    padding: 14px;
  }
  .rv-code-file > span:last-child {
    font-size: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rv-apps *,
  .rv-sidekick-feature * {
    animation: none !important;
    transition: none !important;
  }
}

/* Deploy explains the environment; RIL explains one connected work record. */
.rv-system {
  margin: 0;
  min-width: 0;
  width: 100%;
  border-radius: 16px;
  padding: 28px;
  isolation: isolate;
}
.rv-system > figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 9px;
  letter-spacing: 0.05em;
  line-height: 1.6;
  margin-bottom: 22px;
}
.rv-system > figcaption > span:last-child {
  letter-spacing: 0;
  text-align: right;
}
.rv-system svg {
  display: block;
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}
.rv-system-note {
  font-size: 10px;
  line-height: 1.7;
  margin: 20px 0 0;
}
.rv-deploy-map {
  background: radial-gradient(ellipse at 90% 8%, #355366 0, transparent 65%),
    #172c3b;
  color: #f0f5f8;
  box-shadow: 0 18px 45px #19374912;
}
.rv-deploy-map > figcaption {
  color: #b3c4cf;
}
.rv-deploy-map .rv-system-note {
  color: #b6c7d2;
}
.rv-company-edge {
  border: 1px solid #728b9e70;
  border-radius: 11px;
  padding: 21px 20px 0;
  background: #10263435;
}
.rv-company-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 23px;
}
.rv-company-label > span {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.rv-company-label > small {
  color: #a4bdcd;
  font-size: 10px;
}
.rv-system-stage {
  position: relative;
  z-index: 2;
}
.rv-system-row-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}
.rv-system-row-label > span {
  font:
    9px Plex,
    monospace;
  color: #8ca9bc;
}
.rv-system-row-label > strong {
  font-size: 11px;
  font-weight: 450;
  color: #d0dfe8;
}
.rv-system-apps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.rv-system-app {
  padding: 16px 10px 13px;
  border: 1px solid #708999;
  border-radius: 8px;
  background: linear-gradient(150deg, #365268, #263f50);
  box-shadow:
    0 5px 0 #112532,
    0 12px 18px #0e202e22;
  text-align: center;
}
.rv-system-app > svg {
  margin: 0 auto 10px;
  color: #d7e5ee;
}
.rv-system-app > strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
}
.rv-system-channels {
  color: #a6becd;
  font-size: 10px;
  text-align: center;
  margin: 13px 0 0;
}
.rv-system-connector {
  display: flex;
  justify-content: space-around;
  height: 26px;
  padding: 0 9%;
}
.rv-system-connector > i {
  display: block;
  width: 1px;
  height: 100%;
  background: linear-gradient(#819faeaa, #b1cddf33);
  transform-origin: top;
}
.rv-system-connector-one {
  height: 20px;
}
.rv-system-resources {
  border: 1px solid #567183;
  border-radius: 8px;
  background: #203949;
  padding: 14px 16px 0;
  box-shadow: 0 5px 0 #132a37;
}
.rv-system-resource-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  padding: 2px 0 15px;
}
.rv-system-resource-grid > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rv-system-resource-grid svg {
  width: 23px;
  height: 23px;
  color: #abc8da;
}
.rv-system-resource-grid span {
  font-size: 11px;
  line-height: 1.6;
}
.rv-system-controls {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #5e788959;
  padding: 10px 0;
  color: #bbced9;
  font-size: 9px;
}
.rv-system-controls > span + span {
  border-left: 1px solid #8299a655;
  padding-left: 14px;
}
.rv-system-foundation {
  border: 1px solid #e1edf5;
  border-radius: 8px;
  background: linear-gradient(140deg, #edf4f8, #cfdfeb);
  color: #23435a;
  padding: 18px;
  box-shadow:
    0 5px 0 #7996ab,
    0 15px 24px #0c213344;
}
.rv-system-foundation-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rv-system-record-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 45px;
  border: 1px solid #afc6d6;
  border-radius: 6px;
  background: #f4f8fc;
}
.rv-system-foundation-top strong {
  display: block;
  font-size: 24px;
  line-height: 1;
  font-weight: 550;
  letter-spacing: -0.04em;
}
.rv-system-foundation-top div > span {
  display: block;
  font-size: 10px;
  margin-top: 6px;
}
.rv-system-foundation-top > small {
  margin-left: auto;
  align-self: flex-start;
  font-size: 9px;
  border: 1px solid #a5bfce;
  border-radius: 4px;
  padding: 4px 6px;
}
.rv-system-foundation > p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding-top: 12px;
  margin: 12px 0 0;
  border-top: 1px solid #b3c8d7;
  font-size: 9px;
}
.rv-system-foundation > p > span {
  color: #7292a8;
}
.rv-system-operations {
  display: flex;
  justify-content: space-around;
  padding: 19px 0 14px;
  color: #a5bdcc;
  font-size: 9px;
}
.rv-record-example {
  background: radial-gradient(ellipse at 90% 5%, #fafcfd, transparent 65%),
    #e5ecf2;
  border: 1px solid #d5e0e8;
  color: #2e4b60;
}
.rv-record-example > figcaption {
  color: #5d778a;
}
.rv-record-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 26px 0 25px;
}
.rv-record-emblem {
  display: grid;
  place-items: center;
  width: 57px;
  height: 66px;
  flex-shrink: 0;
  border-radius: 9px;
  border: 1px solid #9bb3c5;
  background: linear-gradient(145deg, #f9fcff, #d2e1ed);
  box-shadow: 3px 4px 0 #bbcfdd;
  transform: rotate(-3deg);
}
.rv-record-emblem svg {
  width: 30px;
  height: 30px;
}
.rv-record-title strong {
  display: block;
  font-size: 31px;
  line-height: 1.1;
  letter-spacing: -0.045em;
  font-weight: 500;
}
.rv-record-title p {
  font-size: 10px;
  line-height: 1.6;
  margin: 10px 0 0;
  color: #677f90;
}
.rv-record-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #b6c8d6;
}
.rv-record-tabs[hidden] {
  display: none;
}
.rv-record-tabs > button {
  cursor: pointer;
  position: relative;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  padding: 11px 3px 13px;
  margin-bottom: -1px;
  color: #627d90;
  text-align: left;
  font: inherit;
  font-size: 11px;
  line-height: 1.4;
}
.rv-record-tabs > button > span {
  display: block;
  font:
    9px Plex,
    monospace;
  color: #7992a4;
  margin-bottom: 6px;
}
.rv-record-tabs > button[aria-selected="true"] {
  border-bottom-color: #355c7b;
  color: #223e55;
  font-weight: 550;
}
.rv-record-tabs > button:hover {
  color: #244f73;
  background: #ffffff33;
}
.rv-record-paper {
  position: relative;
  z-index: 1;
  border: 1px solid #c4d3de;
  background: #fcfdfe;
  border-radius: 9px;
  box-shadow:
    0 5px 0 #d2dfe8,
    0 10px 0 -1px #eaf0f5,
    0 18px 30px #2f516516;
}
.rv-record-panel {
  padding: 24px;
}
.rv-record-panel + .rv-record-panel {
  border-top: 1px solid #d4dfe8;
}
.rv-record-ready .rv-record-panel {
  min-height: 319px;
  border-top: 0;
}
.rv-record-panel[hidden] {
  display: none;
}
.rv-record-panel-label {
  display: block;
  font-size: 9px;
  color: #6f8799;
  letter-spacing: 0.06em;
}
.rv-record-panel h3 {
  font-size: 23px;
  letter-spacing: -0.035em;
  line-height: 1.2;
  font-weight: 500;
  margin: 12px 0;
  color: #27445b;
}
.rv-record-panel > p {
  font-size: 12px;
  line-height: 1.75;
  color: #61788b;
  margin: 0 0 19px;
}
.rv-record-panel dl {
  margin: 0;
}
.rv-record-panel dl > div {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 15px;
  padding: 10px 0;
  border-top: 1px solid #e0e7ed;
  font-size: 10px;
  line-height: 1.65;
}
.rv-record-panel dt {
  color: #748b9d;
}
.rv-record-panel dd {
  margin: 0;
  color: #344f64;
}
.rv-record-example .rv-system-note {
  color: #637d90;
}
.rv-record-tabs > button:focus-visible,
.rv-record-panel:focus-visible {
  outline: 2px solid #466e90;
  outline-offset: 4px;
}
.record-story > div > .rv-record-boundary {
  font-size: 11px !important;
  line-height: 1.8 !important;
  padding-left: 15px;
  border-left: 2px solid #c4d4df;
  color: #6a8091 !important;
}
@media (prefers-reduced-motion: no-preference) {
  .rv-system-visible .rv-system-connector > i {
    animation: rv-system-connect 1.8s ease-out both;
  }
  .rv-system-visible .rv-system-connector-one > i {
    animation-delay: 0.4s;
  }
}
@keyframes rv-system-connect {
  from {
    transform: scaleY(0);
    opacity: 0.3;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}
@media (max-width: 1100px) {
  .rv-system {
    padding: 23px;
  }
  .rv-company-edge {
    padding: 18px 15px 0;
  }
  .rv-system-resource-grid {
    gap: 9px;
  }
  .rv-system-resource-grid > div {
    gap: 7px;
  }
  .rv-record-panel {
    padding: 21px;
  }
  .rv-record-title strong {
    font-size: 29px;
  }
}
@media (max-width: 800px) {
  .rv-system {
    max-width: 620px;
    justify-self: center;
  }
  .rv-record-ready .rv-record-panel {
    min-height: 310px;
  }
}
@media (max-width: 420px) {
  .rv-system {
    padding: 19px 16px;
  }
  .rv-system > figcaption {
    font-size: 8px;
    gap: 10px;
  }
  .rv-company-edge {
    padding: 17px 12px 0;
  }
  .rv-company-label > span {
    font-size: 14px;
  }
  .rv-system-apps {
    gap: 7px;
  }
  .rv-system-app {
    padding: 13px 7px;
  }
  .rv-system-resources {
    padding: 13px 10px 0;
  }
  .rv-system-resource-grid span {
    font-size: 10px;
  }
  .rv-system-foundation {
    padding: 14px 11px;
  }
  .rv-system-foundation-top {
    gap: 9px;
  }
  .rv-system-foundation-top div > span {
    font-size: 9px;
  }
  .rv-system-foundation-top > small {
    font-size: 8px;
    padding: 3px 4px;
  }
  .rv-system-foundation > p {
    font-size: 8px;
    gap: 3px;
  }
  .rv-record-title {
    gap: 14px;
  }
  .rv-record-title strong {
    font-size: 27px;
  }
  .rv-record-title p {
    font-size: 9px;
  }
  .rv-record-tabs > button {
    font-size: 10px;
  }
  .rv-record-panel {
    padding: 19px 17px;
  }
  .rv-record-panel h3 {
    font-size: 21px;
  }
  .rv-record-panel dl > div {
    grid-template-columns: 55px minmax(0, 1fr);
    gap: 10px;
  }
  .rv-record-ready .rv-record-panel {
    min-height: 340px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rv-system *,
  .rv-system *::before {
    animation: none !important;
    transition: none !important;
  }
}

/* Deploy film follows the dark navy and blue palette of the city-film sections. */
.rv-deploy-explainer {
  --ink: #edf5fa;
  --muted: #b6c9d6;
  --accent: #bdd8ea;
  --line: #365065;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 86px clamp(20px, 2.3vw, 52px) 85px;
  overflow: hidden;
  background: #101e28;
  color: var(--ink);
  scroll-margin-top: 0;
}
.rv-deploy-atmosphere {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 80% 5%, #345c7830, transparent 60%),
    linear-gradient(125deg, #101e28, #152d3e);
}
.rv-deploy-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #101e2899, transparent 70%),
    linear-gradient(0deg, #101e28cc, transparent 45%);
}
.rv-deploy-plane {
  position: absolute;
  width: 33%;
  height: 180%;
  top: -40%;
  transform: rotate(-24deg);
  background: linear-gradient(90deg, transparent, #a8c8dd09);
  border-right: 1px solid #a8c8dd1a;
  animation: rv-deploy-plane-drift 36s ease-in-out infinite alternate paused;
}
.rv-deploy-plane-one {
  right: 9%;
}
.rv-deploy-plane-two {
  right: 61%;
  opacity: 0.55;
  animation-duration: 44s;
  animation-direction: alternate-reverse;
}
.rv-deploy-light {
  position: absolute;
  width: 75%;
  height: 70%;
  right: -15%;
  top: -15%;
  background: radial-gradient(ellipse, #71a8d01d, transparent 65%);
  animation: rv-deploy-light 30s ease-in-out infinite alternate paused;
}
.rv-deploy-explainer[data-ambient-motion="on"] .rv-deploy-plane,
.rv-deploy-explainer[data-ambient-motion="on"] .rv-deploy-light {
  animation-play-state: running;
}
.rv-deploy-topline {
  max-width: 1264px;
  margin: 0 auto 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.rv-deploy-topline .eyebrow {
  color: var(--muted);
  margin: 0;
}
.rv-deploy-explainer-heading {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 90px;
  align-items: end;
  max-width: 1264px;
  margin: 0 auto 48px;
}
.rv-deploy-explainer-heading h2 {
  font-size: clamp(38px, 4.3vw, 62px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.045em;
  margin: 0;
  color: var(--ink);
}
.rv-deploy-explainer-heading > div > p:not(.eyebrow) {
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 460px;
  margin: 0 0 24px;
}
.rv-deploy-explainer-heading .text-link {
  font-size: 12px;
  color: var(--accent);
  border-color: #8eaebf99;
}
.rv-deploy-explainer > .rv-deploy-film {
  max-width: 1920px;
  margin: 0 auto;
  color: var(--muted);
}
@keyframes rv-deploy-plane-drift {
  from {
    transform: translate3d(-65px, 0, 0) rotate(-24deg);
  }
  to {
    transform: translate3d(65px, 50px, 0) rotate(-21deg);
  }
}
@keyframes rv-deploy-light {
  to {
    transform: translate3d(-22%, 20%, 0) scale(1.2);
    opacity: 0.5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rv-deploy-plane,
  .rv-deploy-light {
    animation: none !important;
    will-change: auto;
  }
}
.rv-deploy-film {
  position: relative;
  container-type: inline-size;
  min-width: 0;
  width: 100%;
  margin: 0;
  color: #48677e;
  scroll-margin-top: 20px;
}
.rv-deploy-film-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.rv-deploy-screen {
  position: relative;
  background: #101e28;
  border: 1px solid #365065;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 65px -30px #030c1660;
}
.rv-deploy-explainer .rv-deploy-screen {
  box-shadow: 0 18px 65px -30px #030c1660;
}
.rv-deploy-screen video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
.rv-deploy-type {
  position: absolute;
  inset: 0 0 auto;
  pointer-events: none;
  color: #f1f6fa;
}
.rv-deploy-cue {
  padding: clamp(16px, 4cqw, 64px);
  padding-bottom: clamp(35px, 7cqw, 110px);
  background: linear-gradient(180deg, #07121df2 0%, #07121d99 55%, transparent);
}
.rv-deploy-cue[hidden] {
  display: none;
}
.rv-deploy-cue .rv-deploy-cue-title {
  margin: 0;
  max-width: 28ch;
  font-size: clamp(20px, 3cqw, 46px);
  line-height: 1.15;
  font-weight: 550;
  letter-spacing: -0.025em;
  color: #f1f6fa;
}
.rv-deploy-cue .rv-deploy-cue-description {
  margin: clamp(7px, 1cqw, 16px) 0 0;
  max-width: 67ch;
  font-size: clamp(12px, 1.45cqw, 21px);
  line-height: 1.5;
  font-weight: 450;
  color: #d8e5ef;
}
.rv-deploy-transcript {
  min-width: 0;
  margin: 0;
  color: inherit;
}
.rv-deploy-transcript summary {
  width: fit-content;
  cursor: pointer;
  font-size: 12px;
  padding: 12px 0;
}
.rv-deploy-transcript ol {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 25px 0;
  padding: 0;
}
.rv-deploy-transcript li strong {
  font-size: 14px;
  font-weight: 500;
  color: #24475e;
}
.rv-deploy-explainer .rv-deploy-transcript li strong {
  color: var(--ink);
}
.rv-deploy-transcript li p,
.rv-deploy-transcript > p {
  font-size: 12px;
  line-height: 1.75;
  margin: 8px 0 0;
}
.rv-deploy-film summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
@container (max-width: 600px) {
  .rv-deploy-transcript ol {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .rv-deploy-explainer {
    padding: 50px 16px 40px;
  }
  .rv-deploy-topline {
    margin-bottom: 24px;
  }
  .rv-deploy-explainer-heading {
    grid-template-columns: 1fr;
    gap: 23px;
    margin-bottom: 28px;
  }
  .rv-deploy-explainer-heading h2 {
    font-size: 39px;
  }
  .rv-deploy-explainer-heading > div > p:not(.eyebrow) {
    font-size: 14px;
  }
  .rv-deploy-screen {
    border-radius: 8px;
  }
}

/* A compact player: manual playback with one timeline and one sound control. */
.rv-deploy-player {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid #365065;
  border-radius: 8px;
  background: #142936;
  color: #edf5fa;
}
.rv-deploy-player button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.rv-deploy-player button:hover {
  background: #24465c;
}
.rv-deploy-player button:focus-visible,
.rv-deploy-seek:focus-visible {
  outline: 2px solid #b6d8ef;
  outline-offset: 3px;
}
.rv-deploy-player button:disabled {
  opacity: 0.4;
  cursor: default;
}
.rv-deploy-player button svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.rv-deploy-player [data-deploy-play] {
  min-width: 93px;
  background: #294c64;
}
.rv-deploy-player [data-deploy-play]:hover {
  background: #365f79;
}
.rv-deploy-player [data-deploy-sound] {
  min-width: 96px;
}
.rv-deploy-time {
  flex: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: #c5d8e5;
  white-space: nowrap;
}
.rv-deploy-seek {
  --film-progress: 0%;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 70px;
  flex: 1;
  height: 24px;
  margin: 0 7px;
  cursor: pointer;
  background: transparent;
}
.rv-deploy-seek::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    #acd2eb var(--film-progress),
    #446279 var(--film-progress)
  );
}
.rv-deploy-seek::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: #446279;
}
.rv-deploy-seek::-moz-range-progress {
  height: 3px;
  background: #acd2eb;
}
.rv-deploy-seek::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: #edf5fa;
  border: 0;
}
.rv-deploy-seek::-moz-range-thumb {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: #edf5fa;
  border: 0;
}
.rv-deploy-player[hidden],
.rv-deploy-sound-status[hidden],
[data-deploy-play][data-playing="false"] .rv-icon-pause,
[data-deploy-play][data-playing="true"] .rv-icon-play,
[data-deploy-sound][data-muted="true"] .rv-sound-waves,
[data-deploy-sound][data-muted="false"] .rv-sound-off {
  display: none;
}
.rv-deploy-sound-status {
  color: inherit;
  font-size: 12px;
}
.rv-deploy-transcript {
  margin-top: 10px;
}
@container (max-width: 600px) {
  .rv-deploy-player {
    gap: 4px;
    padding: 9px;
    flex-wrap: wrap;
  }
  .rv-deploy-player button {
    padding: 9px 7px;
    font-size: 12px;
  }
  .rv-deploy-player [data-deploy-play] {
    min-width: 78px;
  }
  .rv-deploy-player [data-deploy-sound] {
    min-width: 78px;
    margin-left: auto;
  }
  .rv-deploy-time {
    margin-left: 9px;
    font-size: 11px;
  }
  .rv-deploy-seek {
    order: 2;
    flex: 1 0 calc(100% - 14px);
    margin-top: 2px;
  }
}

.newsroom {
  padding-block: 44px 88px;
  overflow-wrap: anywhere;
}
.newsroom-header {
  max-width: 840px;
  margin-bottom: 48px;
}
.newsroom-header h1 {
  margin-block: 16px 24px;
  font-size: clamp(34px, 4.8vw, 62px);
}
.newsroom-intro {
  max-width: 68ch;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.65;
}
.newsroom-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 24px;
  color: var(--muted);
  font-size: 14px;
}
.newsroom-section {
  max-width: 78ch;
  margin-top: 36px;
}
.newsroom-section h2 {
  margin-bottom: 20px;
  font-size: clamp(26px, 3vw, 36px);
}
.newsroom-section p {
  max-width: 72ch;
}
.newsroom-stories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-block: 28px 0;
}
.newsroom-stories > li {
  min-width: 0;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.newsroom-stories h3 {
  margin-block: 16px;
  font-size: clamp(22px, 2.3vw, 28px);
}
.newsroom-stories time {
  display: block;
  margin-top: 20px;
  color: var(--muted);
  font-size: 14px;
}
.newsroom-links {
  margin-block: 12px 0;
}
.newsroom-links li + li {
  margin: 0;
}
.newsroom a {
  display: inline-block;
  min-height: 44px;
  padding-block: 8px;
  text-decoration: underline;
}
.newsroom-return {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
@media (max-width: 760px) {
  .newsroom {
    padding-block: 28px 56px;
  }
  .newsroom-stories {
    grid-template-columns: minmax(0, 1fr);
  }
}