/* An editorial extension of the approved cinema direction: photographs,
   generous type, chapter rules and the app's restrained monochrome HUD. */
.editorial-heading { max-width: 1300px; }
.editorial-heading h2 { font-size: clamp(40px, 4.7vw, 72px); letter-spacing: -.045em; }
.editorial-heading h2 em, .use-case h3 em { color: #93aac2; }
.editorial-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; max-width: 1050px; margin: 36px 0 55px; }
.editorial-intro p { color: var(--muted); font-size: 15px; line-height: 1.9; margin: 0; }
.waiting-story { background: #09131d; padding-bottom: 80px; border-top: 1px solid var(--line); }
.waiting-diptych { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.waiting-diptych figure { margin: 0; position: relative; min-height: 510px; overflow: hidden; isolation: isolate; }
.waiting-diptych figure::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #030a12ef, #07101805 65%); }
.waiting-diptych img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
.waiting-diptych figcaption { position: absolute; bottom: 0; padding: 42px clamp(28px, 4vw, 70px); }
.waiting-diptych .eyebrow { color: #aec0d4; margin-bottom: 16px; font-size: 9px; }
.waiting-diptych h3 { font-size: clamp(25px, 2.3vw, 36px); letter-spacing: -.035em; line-height: 1.2; margin-bottom: 15px; }
.waiting-diptych p { color: #b5c2d2; font-size: 13px; line-height: 1.8; margin: 0; }
.waiting-footnote { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 25px; color: #8a9eb6; font-size: 10px; line-height: 1.7; padding-block: 17px; }
.use-case { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; padding-top: 70px; max-width: 1300px; }
.use-case h3 { font-size: clamp(33px, 3.2vw, 49px); line-height: 1.2; letter-spacing: -.04em; margin: 0 0 22px; }
.use-case-heading > p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.8; max-width: 290px; }
.use-case .text-button { margin-top: 15px; }
.use-case-steps { list-style: none; padding: 0; margin: 0; }
.use-case-steps li { display: flex; gap: 24px; padding: 25px 0; border-top: 1px solid var(--line); }
.use-case-steps li > span { font: 11px/1.8 var(--mono); color: #8da8c4; }
.use-case-steps h4 { font-size: 16px; font-weight: 400; margin: 0 0 12px; }
.use-case-steps p { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 0; }
.feature-invitation { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; border-top: 1px solid var(--line); }
.feature-invitation h2 { max-width: 570px; }
.feature-invitation > div > p:not(.eyebrow) { color: var(--muted); font-size: 14px; line-height: 1.9; max-width: 440px; }
.feature-index { display: grid; grid-template-columns: 1fr 1fr; gap: 0 35px; }
.feature-index a { padding: 21px 0; border-bottom: 1px solid var(--line); font-size: 14px; display: flex; justify-content: space-between; gap: 20px; }
.feature-index a:hover { color: var(--hud); }
.feature-index span { color: #90a9c2; }

/* Features is its own long-form product story, not a second homepage. */
.features-hero { position: relative; isolation: isolate; min-height: 670px; display: flex; align-items: center; overflow: hidden; background: #0a1724; }
.features-hero > img { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.features-hero::after { content: ''; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, #071018c9, #07101855 50%, #07101800 80%), linear-gradient(0deg, #071018, transparent 28%); }
.features-hero-copy { padding-top: 140px; padding-bottom: 85px; }
.features-hero h1 { font-size: clamp(46px, 4.6vw, 72px); letter-spacing: -.05em; max-width: 880px; line-height: 1.08; margin-bottom: 28px; text-wrap: balance; }
.features-hero h1 em { color: #a1b6ce; }
.features-hero .feature-lead { max-width: 450px; color: #b0bfd1; font-size: 16px; line-height: 1.85; }
.feature-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: 32px; }
.feature-image-note { display: block; color: #93a9c0; font-size: 10px; margin-top: 38px; }
.feature-chapters { position: sticky; z-index: 15; top: 0; background: #09131df5; backdrop-filter: blur(18px); border-block: 1px solid var(--line); }
.feature-chapters > div { display: flex; justify-content: space-between; gap: 22px; overflow-x: auto; scrollbar-width: thin; }
.feature-chapters a { display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding-block: 22px; font-size: 12px; }
.feature-chapters a:hover { color: var(--hud); }
.feature-chapters a span { font: 9px var(--mono); color: #8ea5bf; }
.feature-chapter { scroll-margin-top: 94px; }
.feature-chapter > .section-heading { align-items: start; }
.feature-chapter > .section-heading > p { padding-top: 40px; }
.feature-kicker { font: 10px var(--mono); letter-spacing: 1.8px; color: #8ea6bf; margin-bottom: 15px; }
.feature-rule { border-top: 1px solid var(--line); }
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.feature-split > *, .session-explorer > * { min-width: 0; }
.feature-copy > p:not(.eyebrow), .feature-copy li { color: var(--muted); font-size: 14px; line-height: 1.9; }
.feature-copy h2 { font-size: clamp(36px, 3.7vw, 56px); }
.feature-copy ul { list-style: none; padding: 0; margin: 28px 0; }
.feature-copy li { position: relative; padding-left: 20px; margin-bottom: 9px; }
.feature-copy li::before { content: '↳'; position: absolute; left: 0; color: #a1b6ce; }
.feature-copy .feature-caveat { font-size: 11px; color: #91a5bc; border-left: 1px solid #536a82; padding-left: 17px; margin-top: 24px; }
.session-explorer { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; padding-top: 15px; }
.session-picker { display: flex; flex-direction: column; }
.session-picker button { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 24px 0; background: transparent; color: var(--ink); text-align: left; }
.session-picker button:first-child { border-top: 1px solid var(--line); }
.session-picker button > span { min-width: 0; }
.session-picker button > span:first-child { color: #7f9ab7; font: 10px var(--mono); }
.session-picker strong { display: block; font-size: 20px; font-weight: 400; letter-spacing: -.5px; }
.session-picker small { display: block; color: #8ba2bd; font-size: 12px; margin-top: 8px; }
.session-state { color: #a4b7cd; font: 10px var(--mono); }
.session-picker button[aria-pressed='true'] { border-bottom-color: #8cffaa70; }
.session-picker button[aria-pressed='true'] .session-state, .session-picker button[aria-pressed='true'] > span:first-child { color: var(--hud); }
.session-picker button:hover strong { color: var(--hud); }
.sample-label { color: #8ba2bd; font-size: 11px; line-height: 1.8; margin: 18px 0 0; }
.optical-stage { min-height: 325px; display: flex; align-items: center; justify-content: center; position: relative; padding: 40px; background: radial-gradient(ellipse at 50% 35%, #1c3340, #0a141e 65%); border-block: 1px solid #314455; }
.optical-stage::before, .optical-stage::after { content: ''; position: absolute; width: 21px; height: 21px; border-color: #5d738866; }
.optical-stage::before { top: 20px; left: 20px; border-top: 1px solid; border-left: 1px solid; }
.optical-stage::after { right: 20px; bottom: 20px; border-bottom: 1px solid; border-right: 1px solid; }
.optical-hud { width: 280px; max-width: 100%; font: 12px/1.75 var(--mono); color: #7ce07c; text-shadow: 0 0 5px #00ff0014; }
.optical-hud > p { margin-bottom: 14px; }
#session-message { white-space: pre-line; }
.optical-hud .hud-heading { color: #00ff00; margin-bottom: 6px; font-size: 14px; }
.optical-hud .hud-choice { border: 1px solid #00ff00; padding: 7px 10px; color: #00ff00; margin: 5px 0; }
.optical-hud .hud-choice.is-selected { background: #00ff0010; }
.optical-hud .hud-hint { color: #7ce07c; margin-top: 15px; margin-bottom: 0; font-size: 10px; }
.session-note { display: flex; gap: 30px; justify-content: space-between; margin-top: 28px; font-size: 11px; line-height: 1.85; color: #91a6bd; }
.session-note p { max-width: 490px; margin: 0; }
.project-manifest { border-block: 1px solid #58718c; }
.project-manifest > div { display: grid; grid-template-columns: 35px 1fr; gap: 18px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.project-manifest > div:last-child { border: 0; }
.project-manifest > div > span { color: #839fbc; font: 11px/2 var(--mono); }
.project-manifest h3 { font-size: 20px; margin: 0 0 9px; }
.project-manifest p { color: var(--muted); font-size: 12px; margin: 0; line-height: 1.9; }
.project-manifest code { font: 11px var(--mono); color: #a9bdd4; }
.profile-section { background: #0d1b29; border-block: 1px solid var(--line); }
.profile-route { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: center; padding-block: 45px; border-block: 1px solid #425a73; }
.profile-route > span { font-size: 25px; color: #b0c3d9; }
.profile-route article { min-width: 0; }
.profile-route h3 { font-size: 25px; margin: 14px 0; }
.profile-route p { font-size: 12px; color: var(--muted); line-height: 1.8; margin: 0; }
.profile-route small { font: 9px var(--mono); letter-spacing: 1px; color: #9bb2cd; }
.voice-sequence { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 50px; }
.voice-sequence > div { border-top: 1px solid #425a73; padding-top: 25px; }
.voice-sequence span { font: 10px var(--mono); color: #8fa9c4; }
.voice-sequence h3 { font-size: 21px; margin: 20px 0 12px; }
.voice-sequence p { color: var(--muted); font-size: 12px; line-height: 1.9; margin: 0; }
.language-section { background: radial-gradient(ellipse at 18% 30%, #1a2e41, #09131d 65%); border-block: 1px solid var(--line); }
.language-picker { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.language-picker button { border: 1px solid #536a83; padding: 12px 18px; background: transparent; color: #c2cfe0; font-size: 13px; min-height: 46px; }
.language-picker button[aria-pressed='true'] { color: #071018; background: #e3ecf5; border-color: #e3ecf5; }
.language-preview .optical-hud { min-height: 230px; }
.capability-list { border-top: 1px solid var(--line); }
.capability-row { display: grid; grid-template-columns: 45px .85fr 1.2fr; gap: 30px; padding: 33px 0; border-bottom: 1px solid var(--line); }
.capability-row > span { color: #8fa8c2; font: 10px/2.3 var(--mono); }
.capability-row h3 { font-size: 24px; margin: 0; line-height: 1.4; }
.capability-row p { color: var(--muted); font-size: 13px; line-height: 1.9; margin: 0; max-width: 550px; }
.feature-interlude { position: relative; isolation: isolate; min-height: 560px; display: flex; align-items: end; overflow: hidden; }
.feature-interlude img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; object-position: center 40%; }
.feature-interlude::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #06101cd9, transparent), linear-gradient(0deg, #06101c, transparent 80%); }
.feature-interlude > div { padding-block: 65px; }
.feature-interlude h2 { font-size: clamp(42px, 4.7vw, 70px); max-width: 740px; letter-spacing: -.045em; }
.feature-interlude p { color: #b2c3d6; max-width: 400px; font-size: 14px; line-height: 1.9; }
.data-path { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; margin: 45px 0; }
.data-path > div { border-top: 1px solid #506983; padding-top: 22px; }
.data-path span { color: #8faac7; font: 10px var(--mono); }
.data-path h3 { font-size: 22px; margin: 20px 0 12px; }
.data-path p { color: var(--muted); font-size: 12px; line-height: 1.9; margin: 0; }
.privacy-note { padding: 24px 0; border-block: 1px solid var(--line); font-size: 12px; line-height: 1.9; color: #a0b2c9; max-width: 900px; }
.features-page #navigation a[aria-current='page'] { color: white; }
.features-page .site-footer .footer-top > div { flex-wrap: wrap; }
@media (max-width: 1100px) {
  #navigation { gap: 22px; }
  .nav-wrap { gap: 24px; }
  .editorial-intro, .use-case, .feature-split, .session-explorer, .feature-invitation { gap: 40px; }
  .waiting-diptych figure { min-height: 440px; }
  .features-hero { min-height: 610px; }
  .profile-route { gap: 15px; }
  .profile-route h3 { font-size: 22px; }
}
@media (max-width: 820px) {
  #navigation { gap: 16px; }
  .features-hero h1 { font-size: 57px; max-width: 540px; }
  .features-hero::after { background: linear-gradient(90deg, #071018df, #07101830), linear-gradient(0deg, #071018, transparent 40%); }
  .waiting-diptych figure { min-height: 410px; }
  .waiting-diptych figcaption { padding: 30px 26px; }
  .feature-chapters a { gap: 8px; }
  .session-explorer { gap: 30px; }
  .session-picker button { grid-template-columns: 22px 1fr; gap: 10px; padding: 20px 0; }
  .session-picker .session-state { grid-column: 2; }
  .session-picker strong { font-size: 18px; }
  .optical-stage { padding: 28px; }
  .voice-sequence { grid-template-columns: 1fr 1fr; gap: 35px; }
  .feature-split { gap: 35px; }
  .feature-copy h2 { font-size: 35px; }
  .profile-route { grid-template-columns: 1fr; padding-block: 26px; gap: 18px; }
  .profile-route > span { transform: rotate(90deg); width: max-content; font-size: 19px; }
  .profile-route h3 { margin: 8px 0; }
  .profile-route p { font-size: 11px; }
  .feature-index { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  #navigation { gap: 0; }
  .editorial-heading h2 { font-size: clamp(33px, 8.6vw, 52px); }
  .editorial-intro { grid-template-columns: 1fr; gap: 19px; margin: 27px 0 35px; }
  .editorial-intro p { font-size: 14px; }
  .waiting-diptych { grid-template-columns: 1fr; }
  .waiting-diptych figure { min-height: 410px; }
  .waiting-diptych figcaption { padding: 28px 24px; }
  .waiting-diptych h3 { font-size: 29px; }
  .waiting-diptych img { object-position: 68% center; }
  .waiting-footnote { font-size: 9px; }
  .use-case { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }
  .use-case h3 { font-size: 36px; }
  .use-case-heading > p:not(.eyebrow) { max-width: none; }
  .feature-invitation, .feature-split, .session-explorer { grid-template-columns: 1fr; gap: 35px; }
  .feature-invitation .feature-index { grid-template-columns: 1fr 1fr; gap: 0 23px; }
  .feature-index a { font-size: 12px; gap: 10px; }
  .features-hero { min-height: 650px; align-items: end; }
  .features-hero > img { height: 440px; object-position: 73% center; }
  .features-hero::after { background: linear-gradient(0deg, #071018 2%, #071018 20%, #07101899 55%, #07101800 90%); }
  .features-hero-copy { padding-top: 270px; padding-bottom: 45px; }
  .features-hero h1 { font-size: clamp(39px, 10vw, 57px); max-width: 560px; }
  .features-hero .eyebrow { font-size: 8px; }
  .features-hero .feature-lead { font-size: 14px; max-width: 430px; }
  .feature-hero-actions { gap: 18px; }
  .feature-hero-actions .button { padding-inline: 22px; }
  .feature-hero-actions .text-button { font-size: 12px; }
  .feature-image-note { font-size: 9px; margin-top: 26px; }
  .feature-chapters > div { padding-inline: 24px; }
  .feature-chapters a { padding-block: 17px; font-size: 11px; }
  .feature-chapter { scroll-margin-top: 75px; }
  .feature-chapter > .section-heading { display: block; margin-bottom: 28px; }
  .feature-chapter > .section-heading > p { padding-top: 22px; max-width: none; font-size: 14px; }
  .session-picker button { grid-template-columns: 24px 1fr auto; }
  .session-picker .session-state { grid-column: auto; font-size: 9px; }
  .session-picker strong { font-size: 19px; }
  .session-picker small { font-size: 11px; }
  .session-note { flex-direction: column; gap: 14px; }
  .feature-copy h2 { font-size: 38px; }
  .profile-route { grid-template-columns: 1fr auto 1fr; gap: 14px; padding-block: 32px; }
  .profile-route > span { transform: none; }
  .profile-route h3 { font-size: 22px; }
  .profile-route p { font-size: 11px; }
  .language-picker { gap: 9px; }
  .language-picker button { padding-inline: 17px; }
  .capability-row { grid-template-columns: 24px 1fr; gap: 12px 16px; padding-block: 26px; }
  .capability-row h3 { font-size: 22px; }
  .capability-row p { grid-column: 2; }
  .feature-interlude { min-height: 520px; }
  .feature-interlude img { object-position: 68% center; }
  .feature-interlude > div { padding-block: 40px; }
  .feature-interlude h2 { font-size: 43px; max-width: 340px; }
  .data-path { grid-template-columns: 1fr; gap: 25px; }
  .data-path h3 { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .features-page { scroll-behavior: auto; }
}