/* One screen per chapter, with native scrolling. Intrinsic sizing intentionally
   lets content grow at high zoom / very short viewports instead of clipping it. */
:root {
  --nav-height: 4.5rem;
  --page-height: calc(100svh - var(--nav-height));
  --page-gutter: clamp(1.25rem, 3.4svh, 3rem);
  --display-size: clamp(2.35rem, min(4.5vw, 7svh), 5rem);
}
/* The opening hero keeps its original layout and its own header clearance. */
main > section[class]:not(:where(.hero)) { min-height: var(--page-height); height: auto; padding-block: var(--page-gutter); }
main > section:not(.hero, .scroll-story, .fingerprint-section, .design-section, .faq-section, .updates) { display: grid; align-content: center; }
main > section[class] h2 { font-size: var(--display-size); line-height: .98; }
.eyebrow { margin-bottom: .8rem; }

.scroll-story { display: grid; align-content: center; }
.story-sticky { position: relative; top: auto; height: auto; min-height: min(70svh, 680px); overflow: visible; }
.story-orbit { left: 72%; width: min(40vw, 580px); box-shadow: none; }
.story-keypad { position: absolute; left: 72%; top: 46%; width: min(21vw, 29svh, 280px); margin: 0; }
.story-chapter, .story-chapter.is-active { position: absolute; top: 50%; bottom: auto; left: max(5vw, 1.5rem); width: 40%; max-width: 540px; margin: 0; opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.story-chapter h2 { font-size: var(--display-size); }
.story-benefits { display: grid; gap: .5rem; margin-top: 1.75rem; }
.story-benefits a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding-block: .5rem; border-top: 1px solid #2a2a30; color: #c4c4ca; font-size: .9rem; text-decoration: none; }
.story-benefits span { color: var(--cyan); }

.fingerprint-section { display: grid; }
.fingerprint-copy { padding-block: 0; padding-left: 54%; }
.fingerprint-visual { position: absolute; inset: 0 48% 0 0; height: auto; }
.fingerprint-visual::after { background: linear-gradient(90deg, transparent 68%, var(--ink)); }
.fingerprint-lede { margin-top: 1.5rem; font-size: clamp(1rem, 1.6vw, 1.25rem); }
.fingerprint-proof { margin-top: 1.5rem; padding-top: 1rem; }
.guest-layout { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
.guest-copy > p:not(.eyebrow) { margin-top: 1.5rem; font-size: 1.1rem; }
.no-permanent-code { margin-top: 1.5rem; padding-top: 1rem; }
.guest-demo { width: min(470px, 100%); padding: clamp(1rem, 2.4svh, 2rem); color: var(--ink); border-radius: 2rem; }
.message { padding: .7rem 1rem; }
.guest-code-ticket { margin-bottom: 0; }
.guest-code-ticket > div { padding: 1.1rem 1.25rem; }
.guest-code-ticket strong { font-size: 2.5rem; }
.privacy-lede { margin-top: 1.5rem; font-size: 1.1rem; }
.privacy-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: clamp(1.5rem, 4svh, 3rem); }
.privacy-list > div { display: block; padding: 1.25rem 0; border-bottom: 0; }
.privacy-list h3 { margin: .65rem 0; font-size: clamp(1.25rem, 2vw, 1.9rem); }

.bind-heading > p:last-child { margin-top: .8rem; font-size: 1rem; }
.bind-heading h2 { max-width: none; }
.bind-flow { gap: clamp(1rem, 3vw, 3rem); margin-top: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bind-step { display: flex; flex-direction: column; gap: 1rem; }
.bind-step[hidden] { display: none; }
.bind-step-copy { min-height: 7rem; margin: 0; padding-top: .7rem; }
.bind-step-copy h3 { margin: .3rem 0 .5rem; font-size: 1.4rem; }
.bind-step-copy p { max-width: 340px; font-size: .95rem; }
.bind-screen { width: min(100%, 310px); min-height: 0; height: clamp(280px, 43svh, 410px); padding: .8rem; margin: 0 auto; border-width: 6px; border-radius: 2rem; }
.screen-brand { padding: .65rem .15rem; }
.screen-title { padding: 1rem .3rem 0; }
.screen-title h4, .screen-empty h4 { font-size: 1.4rem; }
.screen-empty h4 { margin-top: .8rem; }
.search-radar { flex-shrink: 0; width: min(6rem, 10svh); margin: 1.25rem auto; box-shadow: 0 0 0 1rem #e5f6f6, 0 0 0 2rem #f0f8f8; }
.screen-field { margin-top: 1.25rem; padding: .75rem; }
.privacy-inline { padding: .6rem; }
.bind-screen button { min-height: 44px; font-size: .9rem; }
.bind-navigation { display: flex; gap: .5rem; margin-top: 1rem; }
.bind-navigation[hidden] { display: none; }
.bind-navigation button { flex: 1; min-height: 44px; padding: .5rem; border: 1px solid #c9ccd0; border-radius: 999px; background: transparent; font-size: .85rem; cursor: pointer; }
.bind-navigation button[aria-pressed="true"] { background: var(--ink); color: white; border-color: var(--ink); }

.app-layout { min-height: 0; padding-block: 0; grid-template-columns: 1fr 1fr; gap: 3rem; }
.app-copy p:not(.eyebrow) { margin-top: 1.25rem; font-size: 1.1rem; }
.app-copy p.evidence-note { font-size: .9rem; color: #96969d; }
.phone { width: 330px; min-height: 0; padding: 1rem; border-radius: 2.6rem; transform: none; }
.phone-top { padding-bottom: .75rem; }
.phone-header { padding-block: .3rem .75rem; }
.lock-card { padding: .9rem; }
.unlock-preview { width: 8rem; margin-block: 1.2rem; }
.lock-row { padding: .55rem .8rem; }
.phone-caption { margin-top: .7rem; }
.design-section { grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
.design-image img { height: min(64svh, 620px); aspect-ratio: auto; padding: 1.5rem; }
.hardware-models { gap: .45rem; margin: 1rem 0; }
.hardware-models button { padding: .5rem .75rem; font-size: .85rem; }
.hardware-details h3 { margin-bottom: .4rem; font-size: 1.3rem; }
.hardware-details > p { margin-block: .4rem .8rem; line-height: 1.4; }
.hardware-details .spec-list { margin-top: .75rem; }
.spec-list > div { padding: .45rem 0; font-size: .9rem; }
.hardware-source:not([hidden]) { margin-top: .65rem; }

main > section.simulator-section { --scene-height: var(--page-height); padding-block: 0; gap: 0; }
main > section.simulator-section h2.simulator-label { margin: 0 0 1.25rem; color: var(--cyan); font-size: .875rem; font-weight: 800; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; }
.simulator-layout.section-shell { min-height: var(--page-height); margin-top: 0; align-items: stretch; }
.simulator-controls { width: calc(100% - 1.5rem); max-width: 360px; align-self: center; padding: 1.1rem .8rem; border-radius: 1.5rem; }
.simulator-group + .simulator-group { margin-top: .75rem; padding-top: .75rem; }
.simulator-group legend { margin-bottom: .5rem; }
.simulator-models { gap: .45rem; }
.simulator-model { padding: .35rem; border-radius: .85rem; }
.simulator-thumb { aspect-ratio: auto; height: clamp(45px, 7svh, 85px); }
.simulator-model > span:last-child { padding: .35rem .15rem .1rem; }
.simulator-model strong { font-size: .8rem; }
.simulator-model small { display: none; }
.simulator-colors, .simulator-finishes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.simulator-colors button, .simulator-finishes button { padding: .35rem; gap: .35rem; font-size: .75rem; }
.door-swatch, .lock-swatch { width: .85rem; height: .85rem; }
.simulator-selection { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.simulator-selection strong { font-size: .8rem; }
.simulator-stage { display: grid; place-items: center; height: var(--scene-height); border-radius: 0; background: #1c1d1f; }
/* Cover the stage with one coordinate plane: scene, tint and lock always scale
   together. Only the outer hallway is cropped on taller screens. */
.simulator-scene-frame { position: absolute; top: 50%; left: 50%; width: max(100%, calc(var(--scene-height) * 1584 / 993)); max-width: none; height: auto; margin: 0; transform: translate(-50%, -50%); }
.simulator-stage figcaption { right: .5rem; bottom: .5rem; left: .5rem; padding: .5rem .8rem; }

.status-heading { max-width: none; }
.status-heading > p:last-child { margin-top: 1rem; font-size: 1rem; }
.status-grid { margin-top: 1.5rem; }
.status-card { min-height: 0; padding: clamp(1rem, 2.4svh, 2rem); border-radius: 1.5rem; }
.status-card h3 { margin: .9rem 0 .6rem; font-size: 1.5rem; }
.faq-section { align-items: center; }
.faq-list summary { padding-block: 1rem; }
.faq-list details p { padding-bottom: 1rem; }
.updates { display: grid; padding: 1rem; }
.updates-inner { min-height: 0; padding: 2rem 1.5rem; align-content: center; }
.updates-form { margin-top: 2rem; }
.reveal { transform: translateY(14px); }

@media (min-width: 701px) and (max-width: 1050px) {
  .fingerprint-copy { padding-left: 50%; }
  .guest-layout, .app-layout, .design-section { gap: 1.5rem; }
  .phone { width: 300px; }
  .privacy-list { gap: 1.5rem; }
  .bind-step-copy { min-height: 9rem; }
  .found-lock { gap: .4rem; padding: .6rem; }
  .found-lock b { display: none; }
  .simulator-layout.section-shell { grid-template-columns: minmax(240px, 1fr) minmax(0, 3fr); gap: 0; }
  .simulator-controls { display: block; margin: 0; }
  .simulator-group + .simulator-group { border-left: 0; border-top: 1px solid #2a2a30; padding: .75rem 0 0; }
  .simulator-stage { order: 0; }
  .simulator-stage figcaption { position: absolute; inset: auto .5rem .5rem; border-radius: 1rem; }
  .simulator-stage figcaption small { display: none; }
  .simulator-colors, .simulator-finishes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-section { grid-template-columns: .7fr 1.3fr; gap: 1.5rem; }
}

@media (max-width: 700px) {
  :root { --nav-height: 3.5rem; --page-gutter: clamp(1rem, 2.5svh, 1.75rem); --display-size: clamp(2rem, min(8.5vw, 5.7svh), 3.3rem); }
  .nav-shell { height: var(--nav-height); }
  section[id] { scroll-margin-top: var(--nav-height); }
  .section-shell { width: calc(100% - 2rem); }
  .story-sticky { display: grid; min-height: 0; gap: 1.5rem; padding: 0 1rem; }
  .story-keypad { position: relative; top: auto; left: auto; width: min(38vw, 19svh); margin: 0 auto 1.5rem; transform: scale(var(--keypad-scale, 1)); }
  .story-device-status { top: calc(100% + .5rem); font-size: .6rem; padding: .3rem .65rem; }
  .story-orbit { top: 22%; left: 50%; width: 65vw; }
  .story-chapter, .story-chapter.is-active { position: relative; inset: auto; width: 100%; max-width: 500px; margin: auto; transform: none; }
  .story-chapter h2 br { display: none; }
  .story-chapter p { font-size: 1rem; margin-top: .75rem; }
  .story-index { display: none; }
  .story-benefits { margin-top: 1rem; gap: .25rem; }
  .fingerprint-section { display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
  .fingerprint-visual { position: relative; inset: auto; width: 100%; height: 32svh; max-height: 360px; flex-shrink: 0; }
  .fingerprint-visual img { object-position: 58% 34%; }
  .fingerprint-visual::after { background: linear-gradient(180deg, transparent 78%, var(--ink)); }
  .fingerprint-copy { padding: 0; }
  .fingerprint-lede { margin-top: 1rem; font-size: 1rem; }
  .fingerprint-proof { margin-top: 1rem; padding-top: .75rem; font-size: .9rem; }
  .fingerprint-proof strong { font-size: 1.1rem; }
  .guest-layout { grid-template-columns: 1fr; gap: 1.25rem; }
  .guest-copy > p:not(.eyebrow) { margin-top: .9rem; font-size: 1rem; }
  .no-permanent-code { margin-top: .75rem; padding-top: .75rem; gap: .65rem; font-size: .9rem; }
  .no-permanent-code > span { width: 2rem; height: 2rem; }
  .guest-demo { padding: 1rem; border-radius: 1.5rem; }
  .message-time { margin-bottom: .5rem; }
  .message { width: 90%; margin-top: .5rem; padding: .5rem .75rem; font-size: .9rem; }
  .guest-code-ticket { margin-top: .75rem; }
  .guest-code-ticket > div { padding: .75rem 1rem; }
  .guest-code-ticket strong { font-size: 2rem; }
  .guest-code-ticket dl div { padding: .5rem 1rem; }
  .privacy-lede { margin-top: 1rem; font-size: 1rem; }
  .privacy-list { grid-template-columns: 1fr; gap: 0; margin-top: 1.25rem; }
  .privacy-list > div { display: grid; grid-template-columns: 1.5rem 1fr; gap: .4rem .75rem; padding-block: 1rem; border-bottom: 1px solid #29292d; }
  .privacy-list h3 { margin: 0; font-size: 1.25rem; }
  .privacy-list p { grid-column: 2; font-size: .95rem; }
  .privacy-list span { align-self: center; }
  .bind-flow { grid-template-columns: 1fr; margin-top: 1rem; gap: 1rem; }
  .bind-step { gap: 1rem; margin: 0 !important; }
  .bind-step-copy { min-height: 0; padding: 0; border: 0; }
  .bind-step-copy > span { display: none; }
  .bind-step-copy h3 { font-size: 1.25rem; }
  .bind-step-copy p { font-size: .95rem; max-width: none; }
  .bind-screen { width: min(280px, 100%); height: clamp(320px, 41svh, 390px); }
  .screen-title { padding-top: .65rem; }
  .screen-field { margin-top: .8rem; padding: .6rem; }
  .privacy-inline { margin-top: .6rem; }
  .app-layout { grid-template-columns: 1fr; gap: 1rem; }
  .app-copy h2 br { display: none; }
  .app-copy p:not(.eyebrow) { margin-top: .8rem; font-size: 1rem; }
  .app-copy p.evidence-note { font-size: .8rem; }
  .phone { width: 280px; padding: .75rem; border-width: 6px; border-radius: 2.25rem; }
  .phone-top { padding-bottom: .5rem; }
  .phone::before { width: 5rem; height: 1.2rem; }
  .phone-header { padding-bottom: .5rem; }
  .lock-card { padding: .75rem; }
  .lock-card-head h3 { font-size: 1.2rem; }
  .unlock-preview { width: 6.4rem; margin: 1rem auto; box-shadow: 0 0 0 7px #edfafa, 0 0 0 8px #c4f1f2; }
  .unlock-ring { width: 1.25rem; height: 1.5rem; }
  .unlock-preview strong { font-size: .7rem; }
  .app-actions { padding-top: .65rem; }
  .phone .lock-row:nth-last-of-type(1) { display: none; }
  .lock-row { margin-top: .5rem; padding: .4rem .65rem; }
  .phone-caption { font-size: .6rem; }
  .design-section { grid-template-columns: 1fr; gap: 1rem; }
  .design-image { border-radius: 1.25rem; }
  .design-image img { height: 17svh; min-height: 100px; padding: .65rem; }
  .design-copy .eyebrow { display: none; }
  .hardware-models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; margin: .75rem 0; }
  .hardware-models button { min-height: 44px; padding: .4rem .2rem; font-size: .7rem; }
  .hardware-details h3 { font-size: 1rem; }
  .hardware-details > p { font-size: .85rem; }
  .hardware-details .spec-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .hardware-details .spec-list > div { display: block; padding: .45rem 0; font-size: .8rem; }
  .spec-list dd { margin-top: .2rem; text-align: left; }
  .hardware-source:not([hidden]) { font-size: .7rem; }
  main > section.simulator-section { --scene-height: max(180px, calc(var(--page-height) - 19rem)); }
  main > section.simulator-section h2.simulator-label { grid-column: 1 / -1; margin: 0; }
  .simulator-layout.section-shell { grid-template-columns: 1fr; gap: 1rem; align-content: start; }
  .simulator-stage { order: -1; height: var(--scene-height); border-radius: 0; }
  .simulator-scene-frame { width: max(100%, calc(var(--scene-height) * 1584 / 993)); height: auto; }
  .simulator-stage figcaption { position: absolute; inset: auto .5rem .4rem; flex-direction: row; border-radius: 999px; background: #151517cc; }
  .simulator-stage figcaption small { display: none; }
  .simulator-stage figcaption span { font-size: .65rem; }
  .simulator-controls { display: grid; grid-template-columns: 1fr 1.4fr; gap: .75rem; width: calc(100% - 2rem); max-width: none; margin: 0 0 1rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .simulator-group:first-of-type { grid-column: 1 / -1; grid-row: auto; }
  .simulator-group + .simulator-group { margin: 0; padding: 0; border: 0; }
  .simulator-group legend { font-size: .6rem; margin-bottom: .4rem; }
  .simulator-models { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
  .simulator-thumb { height: 45px; }
  .simulator-thumb img { padding: .2rem; }
  .simulator-model strong { font-size: .65rem; }
  .simulator-model > span:last-child { padding: .25rem 0 0; text-align: center; }
  .simulator-colors, .simulator-finishes { gap: .25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .simulator-finishes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .simulator-colors button, .simulator-finishes button { flex-direction: column; justify-content: center; gap: .1rem; min-height: 44px; font-size: .65rem; padding: .25rem; border-radius: .5rem; }
  .simulator-selection { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .status-grid { gap: .65rem; grid-template-columns: 1fr; margin-top: 1rem; }
  .status-card { padding: .85rem 1rem; border-radius: 1rem; }
  .status-state { padding: .15rem .5rem; font-size: .6rem; }
  .status-card h3 { font-size: 1.15rem; margin: .45rem 0; }
  .status-card p { font-size: .85rem; line-height: 1.4; }
  .status-heading > p:last-child { margin-top: .75rem; font-size: .85rem; }
  .faq-section { grid-template-columns: 1fr; align-content: center; gap: 1.5rem; }
  .faq-list summary { padding: .85rem 0; font-size: .95rem; }
  .faq-list details p { padding-right: 1rem; font-size: .9rem; }
  .updates { padding: .75rem; }
  .updates-inner { padding: 2rem 1rem; border-radius: 1.5rem; }
  .updates-form { margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .story-keypad { transform: translate(-50%, -50%) !important; }
  .story-chapter { transform: translateY(-50%) !important; }
  .story-sticky { display: block; padding: 0; }
}
@media (max-width: 700px) and (max-height: 740px) {
  .phone .lock-row { display: none; }
  .phone-caption { margin-bottom: 0; }
  .app-copy p:not(.eyebrow) { font-size: .95rem; }
  .app-copy p.evidence-note { font-size: .75rem; }
  .fingerprint-visual { height: 26svh; }
  .bind-screen { height: 320px; }
  .status-card { padding: .65rem .8rem; }
  .status-card h3 { margin: .35rem 0; }
  .design-image img { height: 14svh; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
  .story-sticky { display: grid; padding-inline: 1rem; }
  .story-keypad, .story-chapter { transform: none !important; }
}

@media (max-width: 360px) and (max-height: 740px) {
  :root { --display-size: 1.85rem; --page-gutter: 1rem; }
  .guest-copy .no-permanent-code { display: none; }
  .bind-heading > p:last-child { display: none; }
  .bind-step { gap: .6rem; }
  .phone-caption { display: none; }
  .app-copy p:not(.eyebrow) { font-size: .9rem; }
  .app-copy p.evidence-note { font-size: .75rem; }
  .design-image img { min-height: 80px; height: 80px; }
  .hardware-details > p { display: none; }
  .status-grid { gap: .4rem; }
  .status-card { padding: .5rem .8rem; }
  .status-card h3 { font-size: 1.075rem; }
}