.container.home-container { max-width: none; padding: 0; }

/* The exposure ramp.
   A radiograph is a range of densities: lead-black where nothing got
   through the subject, film-white where everything did. The page is read
   the same way. It steps one stop at a time as it descends and then, in
   one section, goes all the way to the far end of the range -- and that
   is the section that asks the visitor to act.

   Which way it steps depends on the theme, because the two themes are the
   same image read two ways. On paper the page deepens as it descends and
   the access form is driven to full density; on film it lightens and the
   access form is the one fully exposed section. The title card and the
   hero stay film in both, since the X-ray imagery in them is light on
   black and has nowhere to go on paper.

   Paper is the base so the page has a palette before theme.js runs. */
.home-page {
  --film-lead: #05070a;
  --film-1: #0b0f14;
  --signal: #b6e4d3;
  --signal-ink: #14503e;
  --home-mint: var(--signal);

  --step-1: #f4f6f9; --step-2: #eceff4; --step-3: #e5e9f0;
  --rest: #f4f6f9;
  --ink: #121820; --read: #4b5663; --read-dim: #5d6874;
  --mark: #14503e;
  --hair: #0c131c1a; --hair-lit: #0c131c33;
  --panel: #ffffff; --plate: #e8ecf2;
  --art: none;
  --cta: #14503e; --cta-ink: #edf1f7; --cta-lit: #1b6650;
  /* The far end of the range, for the one section that reaches it. */
  --expose: #0b0f14; --expose-ink: #edf1f7; --expose-read: #c2ccd8;
  --expose-panel: #10151b; --expose-hair: #ffffff14; --expose-hair-lit: #ffffff2b;
  --expose-mark: #b6e4d3; --expose-cta: #b6e4d3; --expose-cta-ink: #0c231c; --expose-cta-lit: #cdeee0;

  background: var(--rest);
  color: var(--ink);
}
[data-theme="dark"] .home-page {
  --step-1: #10151b; --step-2: #161c23; --step-3: #1d242d;
  --rest: #05070a;
  --ink: #edf1f7; --read: #c2ccd8; --read-dim: #8e99a8;
  --mark: #b6e4d3;
  --hair: #ffffff14; --hair-lit: #ffffff2b;
  --panel: #10151b; --plate: #05070a;
  /* The pipeline artwork is drawn dark on white; on film it is inverted so
     it sits inside the page instead of punching a white band through it. */
  --art: invert(1) hue-rotate(180deg);
  --cta: #b6e4d3; --cta-ink: #0c231c; --cta-lit: #cdeee0;
  --expose: #edf1f7; --expose-ink: #121820; --expose-read: #4b5663;
  --expose-panel: #ffffff; --expose-hair: #0c131c1a; --expose-hair-lit: #0c131c38;
  --expose-mark: #14503e; --expose-cta: #14503e; --expose-cta-ink: #edf1f7; --expose-cta-lit: #1b6650;
}

/* One family across the whole page, used across its range: headings
   carry the wordmark's weight and negative tracking, text stays quiet. */
.home-page h1, .home-page h2, .home-page h3 { font-family: var(--font-body); font-weight: 700; letter-spacing: -.035em; color: var(--ink); }
.home-page h1 { font-size: clamp(2.6rem, 5.1vw, 4.25rem); line-height: .98; letter-spacing: -.045em; }
.home-page h2 { font-size: clamp(2.05rem, 3.7vw, 3.25rem); line-height: 1.03; margin: 0 0 22px; }
.home-page h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.2; letter-spacing: -.022em; margin: 0 0 12px; }
.home-page p { overflow-wrap: anywhere; }

/* A self-contained, always-dark opening stage above the product hero. */
.title-card { position: relative; isolation: isolate; overflow: hidden; min-height: max(620px, calc(100svh - var(--title-header-height, 88px))); background: #05070a; color: #edf1f7; }
.title-card-topline { position: absolute; z-index: 4; inset: 44px 4.5% auto; display: flex; justify-content: space-between; gap: 24px; color: #8e99a8; font: 10px/1.5 "JetBrains Mono", monospace; letter-spacing: .15em; text-transform: uppercase; }
.title-card-topline > span:first-child { display: flex; align-items: center; gap: 10px; color: #bdcbd4; }
.title-card-topline i { width: 5px; height: 5px; border-radius: 50%; background: #b6e4d3; box-shadow: 0 0 15px #b6e4d380; }
.title-card-atmosphere { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 46%, #26364655, transparent 55%); }
.title-card-halo { position: absolute; width: 55%; aspect-ratio: 1; left: 22.5%; top: 50%; border-radius: 50%; background: radial-gradient(ellipse, #a5cfeb15, transparent 68%); transform: translateY(-50%); animation: title-breathe 9s ease-in-out infinite alternate; }
.title-card-orbit { position: absolute; width: min(64vw, 850px); aspect-ratio: 1; left: 50%; top: 48%; border: 1px solid #b6cde414; border-radius: 50%; transform: translate(-50%, -50%) rotate(-30deg) scaleY(.5); animation: title-orbit 28s linear infinite; }
.title-card-orbit::after { content: ''; position: absolute; inset: 12%; border: 1px solid #b6cde40b; border-radius: 50%; }
.title-card-wordmark { position: absolute; z-index: 1; inset: 0 7%; display: flex; align-items: center; justify-content: space-between; padding-bottom: 3%; pointer-events: none; }
.title-card-wordmark span { display: block; font-family: "Hanken Grotesk", sans-serif; font-size: clamp(130px, 22vw, 360px); font-weight: 700; line-height: .85; letter-spacing: -.085em; padding-right: .085em; color: #d3dce6; background: linear-gradient(165deg, #fff 6%, #d8e2ec 35%, #8090a3 63%, #e6eef6 83%, #9caabc); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 1px #ffffff15); }
.title-card-hand { position: absolute; z-index: 2; left: 50%; top: 47%; width: min(68vh, 660px, 62vw); aspect-ratio: 1; transform: translate(-50%, -50%); mix-blend-mode: screen; pointer-events: none; mask-image: linear-gradient(transparent, #000 12%, #000 78%, transparent); }
.title-card-hand video { display: block; width: 100%; height: 100%; object-fit: contain; opacity: .9; }
.title-card-scan { position: absolute; left: 20%; right: 20%; top: 8%; height: 1px; background: linear-gradient(90deg, transparent, #c9e8ff65, transparent); box-shadow: 0 0 22px 3px #8cbce520; animation: title-scan 8s ease-in-out infinite; }
.title-card-bottomline { position: absolute; z-index: 4; inset: auto 4.5% 34px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 24px; }
.title-card-bottomline p { font-size: clamp(15px, 1.4vw, 20px); line-height: 1.35; letter-spacing: -.02em; margin: 0; color: #aeb9c8; }
.title-card-bottomline p span { color: #eff5fa; }
.title-card-scroll { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 17px; padding: 12px 18px; color: #c1cbd8; text-decoration: none; font: 10px/1.4 "JetBrains Mono", monospace; letter-spacing: .13em; text-transform: uppercase; transition: color .2s; }
.title-card-scroll:hover { color: #fff; }
.title-card-scroll svg { width: 20px; height: 29px; stroke: currentColor; stroke-width: 1.2; animation: title-arrow 2.8s ease-in-out infinite; }
.title-card-motion { justify-self: end; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 0 8px 10px; border: 0; background: transparent; color: #aab6c6; font: 10px/1.4 "JetBrains Mono", monospace; cursor: pointer; }
.title-card-motion[hidden] { display: none; }
.title-card-motion:hover { color: #fff; }
.title-card-motion svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.3; }
.title-card-motion[aria-pressed="true"] svg { display: none; }
.title-card.is-still *, .title-card.is-still *::after { animation-play-state: paused; }
.title-card.is-still .title-card-scan { opacity: 0; }
.home-page .title-card a:focus-visible, .title-card button:focus-visible { outline: 2px solid #b6e4d3; outline-offset: 5px; }

@keyframes title-breathe { to { opacity: .4; transform: translateY(-50%) scale(1.12); } }
@keyframes title-orbit { to { transform: translate(-50%, -50%) rotate(330deg) scaleY(.5); } }
@keyframes title-scan { 0%, 100% { top: 8%; opacity: 0; } 15%, 70% { opacity: .65; } 85% { top: 89%; opacity: 0; } }
@keyframes title-arrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (min-width: 1800px) { .title-card-wordmark { inset-inline: calc((100% - 1550px) / 2); } }
@media (max-width: 700px) {
  .title-card { min-height: max(550px, calc(100svh - var(--title-header-height, 61px))); }
  .title-card-topline { inset: 30px 24px auto; font-size: 9px; letter-spacing: .08em; }
  .title-card-topline > span:last-child { display: none; }
  .title-card-wordmark { inset-inline: 6%; padding-bottom: 8%; }
  .title-card-wordmark span { font-size: 24vw; }
  .title-card-hand { top: 45%; width: min(88vw, 56vh); }
  .title-card-orbit { width: 100vw; }
  .title-card-bottomline { inset: auto 24px 24px; grid-template-columns: 1fr 1fr; gap: 14px; }
  .title-card-bottomline p { align-self: center; font-size: 14px; }
  .title-card-scroll { grid-column: 1 / -1; grid-row: 1; margin-bottom: 22px; font-size: 9px; }
  .title-card-motion { grid-column: 2; font-size: 9px; }
  .home-pipeline { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .title-card *, .title-card *::after { animation: none !important; transition: none !important; }
  .title-card-scan, .title-card-motion { display: none; }
}


/* The hero is film in either theme: the rig artwork is light on black. */
.home-page .home-hero {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; overflow: hidden;
  padding: 96px max(24px, calc((100% - 1200px) / 2)); min-height: 590px;
  background: var(--film-1); color: #edf1f7;
  --ink: #edf1f7; --read: #c2ccd8; --read-dim: #8e99a8; --mark: #b6e4d3;
  --cta: #b6e4d3; --cta-ink: #0c231c; --cta-lit: #cdeee0;
}
.home-hero h1 { max-width: 13em; margin: 0 0 26px; }
.home-intro { max-width: 46ch; color: var(--read); font-size: 1.125rem; line-height: 1.62; margin: 0 0 30px; }
.home-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.home-caption { font-size: .875rem; color: var(--read-dim); margin: 22px 0 0; }
.home-hero-preview { margin: 0; min-width: 0; }
.home-hero-preview img { display: block; width: 100%; height: auto; }
/* The hero rig: the tube, its beam and the detector in one image over the
   hand in another, so home.js can turn the rig around a hand that stays
   upright. Both images share the pivot, so they only have to be stacked.
   200deg is the resting angle and must match data-orbit-from in home.html.erb. */
.hero-orbit { position: relative; aspect-ratio: 1; }
.hero-orbit img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-orbit-rig { transform: rotate(var(--orbit, 200deg)); will-change: transform; }
.home-preview-note { font-size: .8125rem; color: var(--read-dim); margin: 16px 0 0; }

.home-page .btn { min-height: 50px; font-size: .9375rem; font-weight: 600; letter-spacing: 0; padding-inline: 26px; }
.home-page .btn-primary { background: var(--cta); color: var(--cta-ink); border-color: transparent; }
.home-page .btn-primary:hover { background: var(--cta-lit); filter: none; }
.home-page .home-secondary { background: transparent; border-color: var(--hair-lit); color: var(--ink); }

#discover { scroll-margin-top: var(--title-header-height, 88px); }
#discover:focus { outline: none; }
.home-pipeline { display: flex; justify-content: center; align-items: center; padding: 34px max(24px, calc((100% - 1200px) / 2)); background: var(--step-1); border-block: 1px solid var(--hair); }
.home-pipeline-art { display: block; width: 100%; max-width: 1200px; height: auto; }
.home-pipeline-art image { filter: var(--art); }

.home-section { padding: 104px max(24px, calc((100% - 1200px) / 2)); scroll-margin-top: 100px; }
.home-section-head { display: flex; justify-content: space-between; align-items: end; gap: 56px; margin-bottom: 44px; }
.home-section-head h2 { margin-bottom: 0; max-width: 11em; }
.home-section-head > p { max-width: 40ch; color: var(--read); font-size: 1.0625rem; line-height: 1.6; margin: 0; }

.home-demos { background: var(--step-2); }
.home-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.home-demo-card { overflow: hidden; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--hair); border-radius: 4px; }
/* The screenshots sit on the far end of the page's own range, the way a
   radiograph is read against a viewing box rather than against the room. */
.home-demo-image { padding: 18px; background: var(--plate); border-bottom: 1px solid var(--hair); }
.home-demo-image img { display: block; width: 100%; height: auto; aspect-ratio: 1.7; object-fit: contain; }
.home-demo-body { padding: 30px; display: flex; align-items: start; flex-direction: column; flex: 1; }
.home-demo-body > p { color: var(--read); max-width: 46ch; margin: 0 0 26px; }
.home-demo-body .btn { margin-top: auto; }

.home-learning { background: var(--step-3); }
.home-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; margin-top: 8px; }
.home-features article { min-width: 0; border-top: 1px solid var(--hair-lit); padding-top: 24px; }
.home-features p { color: var(--read); max-width: 36ch; margin: 0; }

/* The section that reaches the far end of the range. Everything above has
   been describing; this is where the page asks. */
.home-access-section {
  display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: start;
  background: var(--expose); color: var(--expose-ink);
  --ink: var(--expose-ink); --read: var(--expose-read); --read-dim: var(--expose-read);
  --mark: var(--expose-mark); --hair: var(--expose-hair); --hair-lit: var(--expose-hair-lit);
  --cta: var(--expose-cta); --cta-ink: var(--expose-cta-ink); --cta-lit: var(--expose-cta-lit);
  --text-primary: var(--expose-ink); --text-secondary: var(--expose-read); --text-muted: var(--expose-read);
  --border: var(--expose-hair); --border-strong: var(--expose-hair-lit); --accent: var(--expose-mark);
}
.home-access-section strong { color: var(--expose-ink); }
.home-access-copy > p { max-width: 46ch; color: var(--expose-read); font-size: 1.0625rem; line-height: 1.6; }
.home-access-section .access-steps li::before { background: var(--expose-panel); border-color: var(--expose-hair-lit); color: var(--expose-mark); }
.home-access-section .access-steps span { color: var(--expose-read); }
.home-access-section .card { margin: 0; padding: 36px; scroll-margin-top: 100px; background: var(--expose-panel); border: 1px solid var(--expose-hair); border-radius: 4px; box-shadow: var(--shadow-2); }
.home-access-section .card h2 { font-size: 1.875rem; }
.home-access-section .hint, .home-access-section .aside, .home-access-section label { color: var(--expose-read); }
.home-access-section .hint, .home-access-section .aside { font-size: .9375rem; }
.home-access-section input[type="text"], .home-access-section input[type="email"] { background: var(--expose-panel); color: var(--expose-ink); border: 1px solid var(--expose-hair-lit); border-radius: 4px; }
.home-access-section input::placeholder { color: var(--expose-read); opacity: .75; }
.home-access-section a { color: var(--expose-mark); }
.home-access-section .btn-primary, .home-access-section input[type="submit"].btn-primary { background: var(--expose-cta); color: var(--expose-cta-ink); }
.home-access-section .btn-primary:hover, .home-access-section input[type="submit"].btn-primary:hover { background: var(--expose-cta-lit); }
.home-returning { align-self: center; }

.home-faq { background: var(--rest); color: var(--ink); }
.home-faq h2 { margin-bottom: 28px; }
.home-faq details { max-width: 880px; border-bottom: 1px solid var(--hair-lit); }
/* The same plus/minus the site menu uses, rather than a second idea. */
.home-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 2px; font-size: 1.125rem; font-weight: 500; list-style: none; cursor: pointer; }
.home-faq summary::-webkit-details-marker { display: none; }
.home-faq summary::after { content: '\002b'; color: var(--read-dim); font-weight: 400; }
.home-faq details[open] summary::after { content: '\2212'; }
.home-faq summary:hover { color: var(--mark); }
.home-faq details p { max-width: 68ch; color: var(--read); line-height: 1.65; padding: 0 2px 20px; margin: 0; }
.home-faq a { color: var(--mark); }

.home-page a:focus-visible, .home-page summary:focus-visible, .home-page .btn:focus-visible, .home-page input:focus-visible { outline: 3px solid var(--mark); outline-offset: 3px; }

@media (max-width: 1000px) {
  .home-page .home-hero { grid-template-columns: 1fr; gap: 40px; padding-block: 64px; min-height: 0; }
  .home-section { padding-block: 76px; }
  .home-access-section { gap: 48px; }
}
@media (max-width: 700px) {
  .home-page .home-hero { padding: 48px 20px; gap: 34px; }
  .home-hero h1 { font-size: clamp(2.15rem, 8.6vw, 2.9rem); max-width: 14em; }
  .home-intro { font-size: 1.0625rem; }
  .home-hero-preview { max-width: 500px; }
  .home-section { padding: 60px 20px; }
  .home-section-head { display: block; margin-bottom: 32px; }
  .home-section-head h2 { max-width: none; }
  .home-section-head > p { margin-top: 18px; }
  .home-demo-grid, .home-features, .home-access-section { grid-template-columns: 1fr; gap: 28px; }
  .home-demo-body { padding: 26px; }
  .home-features { gap: 32px; }
  .home-access-section { gap: 40px; }
  .home-access-section .card { padding: 26px; }
  .home-access-section .card h2 { font-size: 1.6rem; }
  .home-faq summary { font-size: 1.0625rem; }
  .home-pipeline { padding: 20px 16px; }
}
@media (max-width: 370px) { .home-actions { flex-direction: column; align-items: stretch; } }