/* Autonomyware landing — the factory of autonomy.
   The 3D floor is a fixed stage behind the page; the page scrolls natively over it in reading plates.
   Tokens follow the brand guidelines (Teal #1A7A9A, Teal Bright #2391B5, Clay #DB5C34, Ink #16181C,
   Warm Off-White #E8EAE0, Light #F2F4EC, Charcoal #131314). */
:root {
  --lp-paper: #E8EAE0;
  --lp-raised: #F2F4EC;
  --lp-ink: #16181C;
  --lp-ink-soft: #454A52;
  --lp-muted: #64635F;
  --lp-teal: #1A7A9A;
  --lp-teal-bright: #2391B5;
  --lp-teal-deep: #0E647F;
  --lp-glow: #6FCEE4;
  --lp-clay: #DB5C34;
  --lp-clay-text: #9E3D23;
  --lp-charcoal: #131314;
  --lp-panel-dark: #1A1A1B;
  --lp-line: rgba(22, 24, 28, .12);
  --lp-line-dark: rgba(232, 234, 224, .12);
  --lp-font-display: "Century Gothic", "URW Gothic", "TeX Gyre Adventor", Futura, "Inter", sans-serif;
  --lp-font-text: "Inter", ui-sans-serif, system-ui, sans-serif;
  --lp-font-label: "Space Grotesk", "Inter", sans-serif;
  --lp-font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --lp-ease: cubic-bezier(.16, 1, .3, 1);
  --lp-plate: rgba(242, 244, 236, .94);
  --lp-plate-dark: rgba(19, 19, 20, .9);
  --lp-halo: 242, 244, 236;            /* the fine edge that keeps words legible over a product */
  --lp-halo-shadow: 0 0 1px rgba(242, 244, 236, .9), 0 1px 2px rgba(242, 244, 236, .85), 0 0 14px rgba(242, 244, 236, .55);
  --lp-chip: rgba(242, 244, 236, .9);
  --lp-solid: #fff;
  --lp-cta: #F2F4EC;
  --lp-dotted: rgba(22, 24, 28, .14);
  --lp-tag: var(--lp-charcoal);
  --lp-grid-teal: rgba(26, 122, 154, .12);
  --lp-grid-clay: rgba(219, 92, 52, .14);
}
/* Dark: the brand's night counterparts (Charcoal #131314 ground, White text, Teal Bright #2391B5 on dark, Clay
   unchanged), following the site theme: an explicit choice wins, otherwise the visitor's system decides. The 3D
   hall re-grounds itself in world.mjs. */
:root[data-theme="dark"] {
  --lp-paper: #131314;
  --lp-raised: #1B1B1D;
  --lp-ink: #FFFFFF;
  --lp-ink-soft: #B4B6BA;
  --lp-muted: #8E9095;
  --lp-teal-deep: #2391B5;
  --lp-clay-text: #DB5C34;
  --lp-line: rgba(255, 255, 255, .12);
  --lp-plate: rgba(27, 27, 29, .92);
  --lp-halo: 19, 19, 20;
  --lp-halo-shadow: 0 0 2px rgba(19, 19, 20, .95), 0 1px 3px rgba(19, 19, 20, .9), 0 0 16px rgba(19, 19, 20, .78), 0 0 34px rgba(19, 19, 20, .5);
  --lp-chip: rgba(27, 27, 29, .88);
  --lp-solid: #202022;
  --lp-cta: #1B1B1D;
  --lp-dotted: rgba(255, 255, 255, .14);
  --lp-tag: rgba(127, 211, 230, .12);
  --lp-grid-teal: rgba(35, 145, 181, .16);
  --lp-grid-clay: rgba(219, 92, 52, .12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lp-paper: #131314;
    --lp-raised: #1B1B1D;
    --lp-ink: #FFFFFF;
    --lp-ink-soft: #B4B6BA;
    --lp-muted: #8E9095;
    --lp-teal-deep: #2391B5;
    --lp-clay-text: #DB5C34;
    --lp-line: rgba(255, 255, 255, .12);
    --lp-plate: rgba(27, 27, 29, .92);
    --lp-halo: 19, 19, 20;
    --lp-halo-shadow: 0 0 2px rgba(19, 19, 20, .95), 0 1px 3px rgba(19, 19, 20, .9), 0 0 16px rgba(19, 19, 20, .78), 0 0 34px rgba(19, 19, 20, .5);
    --lp-chip: rgba(27, 27, 29, .88);
    --lp-solid: #202022;
    --lp-cta: #1B1B1D;
    --lp-dotted: rgba(255, 255, 255, .14);
    --lp-tag: rgba(127, 211, 230, .12);
    --lp-grid-teal: rgba(35, 145, 181, .16);
    --lp-grid-clay: rgba(219, 92, 52, .12);
  }
}

html.lp { scroll-behavior: smooth; scroll-padding-top: 84px; scrollbar-gutter: stable; }
.lp body { margin: 0; background: var(--lp-paper); color: var(--lp-ink); font-family: var(--lp-font-text); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.lp h1, .lp h2, .lp h3, .lp p { margin: 0; }
.lp a { color: inherit; text-decoration: none; }
/* buttons keep their own colours (the inherit above would turn the primary's label to ink on teal), and the text
   halo of the words around them never reaches a button label */
.lp a.btn-primary, .lp a.btn-primary:hover { color: #fff; }
.lp .lp-read .btn { text-shadow: none; }
.lp .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lp :focus-visible { outline: 2px solid var(--lp-teal-deep); outline-offset: 3px; }
.lp .every :focus-visible, .lp .research :focus-visible, .lp .demo-sec :focus-visible, html.world-vision .lp-read :focus-visible { outline-color: #E8EAE0; }
.lp .shell { width: min(1280px, calc(100% - 48px)); margin-inline: auto; }

/* ------------------------------------------------------------ the stage */
.world { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.world canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: auto; touch-action: pan-y pinch-zoom; transition: opacity .5s var(--lp-ease); }
/* without WebGL (or before the first frame) the floor is drawn as the brand grid, so nothing depends on 3D */
.world::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(var(--lp-grid-teal) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--lp-grid-teal) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(var(--lp-grid-clay) 1px, transparent 1px) 0 0 / 200px 200px,
    linear-gradient(90deg, var(--lp-grid-clay) 1px, transparent 1px) 0 0 / 200px 200px,
    var(--lp-paper);
  -webkit-mask-image: radial-gradient(130% 90% at 50% 60%, #000 40%, transparent 100%);
  mask-image: radial-gradient(130% 90% at 50% 60%, #000 40%, transparent 100%);
}
html.world-off .world canvas { opacity: 0; }
/* no blank screen (2026-10-18, MR !231 review: "please no blank screens, show it as fast as possible"): the page,
   its copy and the brand grid paint at once; only the 3D canvas waits for the opening shot and fades in with the
   fly-in already moving (world.mjs drops world-boot as the fly-in starts, 1.5 s at the latest) */
html.world-boot .world canvas { opacity: 0; }
/* while the live OS is on screen the floor holds its last frame (already in its dark Forge definition) */

.world-overlay { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
#world-leaders { display: none; }
/* the Forge kicker: the label at a Forge window's top-left corner, as the app's "FORGING NATIVE 3D" line */
.w-kick {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  height: 18px; padding: 0 8px; border-radius: 4px; background: rgba(20, 22, 24, .78); box-shadow: inset 0 0 0 1px rgba(127, 211, 230, .22);   /* a chip: it reads on either floor */
  font: 600 10px/1 var(--lp-font-mono); letter-spacing: .14em; text-transform: uppercase; color: #7FD3E6;
  opacity: 0; transition: opacity .3s linear; will-change: transform, opacity;
}
.w-kick::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2391B5; box-shadow: 0 0 0 3px rgba(35, 145, 181, .22); }
.w-kick.on { opacity: 1; }
/* data tags inside the reveal (the reference's object tags, in the Forge style) */
.w-tag {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  height: 20px; padding: 0 8px; border-radius: 4px; background: rgba(20, 22, 24, .78); box-shadow: inset 0 0 0 1px rgba(127, 211, 230, .22);
  font: 500 10.5px/20px var(--lp-font-mono); color: #E8EAE0; opacity: 0; transition: opacity .35s linear; will-change: transform, opacity;
}
.w-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #7FD3E6; }
.w-tag.on { opacity: 1; }

/* the data card (beside a Forge window) and the inspect panel share one anatomy: the app's Forge panel */
.w-card {
  width: 284px; border-radius: 10px; overflow: hidden; color: #E8EAE0;
  background: rgba(27, 29, 31, .94); border: 1px solid rgba(127, 211, 230, .26);
  box-shadow: 0 22px 54px rgba(8, 10, 12, .34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.world-overlay .w-card { position: absolute; left: 0; top: 0; will-change: transform; }
.w-card[hidden] { display: none; }
.w-card.in { animation: wCardIn .42s var(--lp-ease) both; }
@keyframes wCardIn { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.w-card-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 0; font: 600 9.5px/1.2 var(--lp-font-mono); letter-spacing: .12em; text-transform: uppercase; color: #7FD3E6; }
.w-card-head [data-card-idx] { color: #8C9499; letter-spacing: .04em; }
.w-card-head [data-card-status] { flex: 1; }
.w-card-head .w-mark { width: 7px; height: 7px; border-radius: 50%; background: #2391B5; }
.w-card[data-kind="sculpt"] .w-mark { background: var(--lp-clay); }
.w-card[data-kind="faceted"] .w-mark, .w-card[data-kind="poly"] .w-mark, .w-card[data-kind="none"] .w-mark { background: transparent; box-shadow: inset 0 0 0 1.4px #A6A7A9; }
.w-card-title { padding: 8px 14px 10px; font: 600 16.5px/1.22 var(--lp-font-text); letter-spacing: -.01em; color: #F2F4EC; }
.w-card dl { margin: 0; padding: 0 14px 8px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; }
.w-card dt { font: 500 9.5px/23px var(--lp-font-label); letter-spacing: .1em; text-transform: uppercase; color: #8C9499; border-top: 1px solid rgba(232, 234, 224, .07); }
.w-card dd { margin: 0; font: 400 12px/16px var(--lp-font-mono); padding: 3.5px 0; font-variant-numeric: tabular-nums; text-align: right; color: #E8EAE0; border-top: 1px solid rgba(232, 234, 224, .07); overflow-wrap: anywhere;   /* a long value wraps, never cut */ }
.w-card dd .w-seg { display: inline-block; }   /* a value wraps between its parts, never inside a term */
.w-card-foot { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px 11px; border-top: 1px solid rgba(127, 211, 230, .16); font: 500 10.5px/1.3 var(--lp-font-mono); color: #7FD3E6; }
.w-card-foot span:last-child { color: #8C9499; }

/* inspect panel: docks on the right while a product is inspected */
.inspect-panel { position: fixed; right: 24px; top: 96px; z-index: 6; width: 304px; max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; border-radius: 10px; }
.inspect-panel .w-card { width: 100%; }
.inspect-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px 14px 14px; }
.inspect-actions button, .inspect-actions a { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: 9px 10px; border-radius: 6px; font: 600 10.5px/1.2 var(--lp-font-label); letter-spacing: .08em; text-transform: uppercase; border: 1px solid rgba(127, 211, 230, .28); color: #E8EAE0; background: rgba(255, 255, 255, .03); transition: background .2s, border-color .2s; }
.inspect-actions button:hover, .inspect-actions a:hover { border-color: #7FD3E6; background: rgba(127, 211, 230, .08); }
.inspect-actions button[aria-pressed="true"] { background: rgba(35, 145, 181, .22); color: #BFF0FA; border-color: #2391B5; }
.inspect-actions [data-inspect-close] { grid-column: 1 / -1; background: #2391B5; color: #fff; border-color: #2391B5; }
.inspect-actions [data-inspect-close]:hover { background: #1A7A9A; border-color: #1A7A9A; }
.inspect-actions a[hidden] { display: none; }
.inspect-actions button:focus-visible, .inspect-actions a:focus-visible { outline: 2px solid #7FD3E6; outline-offset: 2px; }
.inspect-hint { padding: 0 14px 10px; font: 400 10.5px/1.45 var(--lp-font-mono); color: #8C9499; }
html.is-inspecting, html.is-inspecting body { overflow: hidden; }
/* while a product is inspected the page's words and the floor's chrome step aside completely */
.lp-read, .hero-floor, .hero-scroll-cue { transition: opacity .35s var(--lp-ease); }
html.is-inspecting .lp-read, html.is-inspecting .hero-floor, html.is-inspecting .hero-scroll-cue, html.is-inspecting .hud-status { opacity: 0; pointer-events: none; }
html.world-focus .route, html.world-focus .world-hints { opacity: 0; visibility: hidden; pointer-events: none; }

/* ------------------------------------------------------------ status, hints */
.hud-status { position: fixed; right: 24px; bottom: 22px; z-index: 3; display: flex; align-items: center; gap: 12px; }
.stage-loader { font: 500 10.5px/1 var(--lp-font-mono); color: var(--lp-muted); letter-spacing: .02em; transition: opacity .6s; }
.stage-loader.done { opacity: 0; }
.motion-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 2px; border: 1px solid var(--lp-line); background: var(--lp-chip); font: 600 10px/1 var(--lp-font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--lp-ink); }
.motion-toggle::before { content: ""; width: 7px; height: 8px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; box-sizing: border-box; }
.motion-toggle[aria-pressed="true"]::before { border: 0; width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.motion-toggle:focus-visible { outline: 2px solid var(--lp-teal-deep); outline-offset: 2px; }
html.world-off .motion-toggle, html.world-off .world-hints, html.world-off .hero-floor, html.world-off .step-proof { display: none; }
/* from the Platform on, none of the floor's chrome (hints, route, motion control) shows */
html.world-yield .route, html.world-yield .world-hints, html.world-yield .hud-status,
html.world-vision .route, html.world-vision .world-hints { opacity: 0; visibility: hidden; pointer-events: none; }
/* after the Platform the floor keeps moving: its pause control stays, quiet, in the dark style (WCAG 2.2.2) */
html.world-vision:not(.world-yield) .motion-toggle { background: rgba(22, 24, 26, .8); border-color: rgba(127, 211, 230, .22); color: #E8EAE0; }
html.world-vision .stage-loader { opacity: 0; }
.route, .world-hints, .hud-status { transition: opacity .5s var(--lp-ease), visibility 0s linear .5s; }
html:not(.world-vision):not(.world-yield):not(.world-intro):not(.world-focus):not(.is-inspecting) .route,
html:not(.world-vision):not(.world-yield):not(.world-intro):not(.world-focus):not(.is-inspecting) .world-hints { transition-delay: 0s; }
html:has(.hero-floor[open]) .route { opacity: 0; visibility: hidden; pointer-events: none; }
html.at-footer .hud-status { opacity: 0; visibility: hidden; pointer-events: none; }
html.motion-paused .sc-talk .caret { animation-play-state: paused; }
html.motion-paused .hero-scroll-cue-arrow { animation: none; }
.hud-status { transition: opacity .4s var(--lp-ease); }
html.world-intro .world-hints, html.world-intro .route { opacity: 0; visibility: hidden; pointer-events: none; }
.world-hints { position: fixed; left: max(24px, calc((100% - 1280px) / 2)); bottom: 22px; z-index: 3; display: flex; gap: 16px; white-space: nowrap; font: 400 11px/1 var(--lp-font-mono); color: var(--lp-muted); pointer-events: none; transition: opacity .4s; }
.world-hints b { font-weight: 500; color: var(--lp-ink); margin-right: 4px; }
html.world-vision .world-hints, html.world-vision .stage-loader { color: #A6A7A9; }
html.world-vision .world-hints b { color: #E8EAE0; }

/* the route: one marker per section, real anchors (no scroll hijack) */
.route { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 3; display: grid; gap: 1px; }
.route a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 5px 0; font: 500 9.5px/1 var(--lp-font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--lp-muted); transition: color .2s; }
.route a span { font-family: var(--lp-font-mono); letter-spacing: 0; }
.route a::after { content: ""; width: 12px; height: 1px; background: currentColor; transition: width .35s var(--lp-ease); }
.route a.on { opacity: 1; color: var(--lp-ink); }
.route a.on::after { width: 30px; height: 2px; background: var(--lp-teal-bright); }
.route a:hover { opacity: 1; }
html.world-vision .route a { color: #A6A7A9; }
html.world-vision .route a.on { color: #E8EAE0; }
html.is-inspecting .route, html.is-inspecting .world-hints { opacity: 0; visibility: hidden; pointer-events: none; }
.route, .world-hints { transition: opacity .6s var(--lp-ease); }

/* ------------------------------------------------------------ content over the floor */
.lp main { position: relative; z-index: 2; overflow-x: clip; }
/* the page lets the pointer through to the floor (hover, click, drag on the products); only real content takes it */
.lp main, .lp main section, .lp main header.hero { pointer-events: none; }
.lp main a, .lp main button, .lp main input, .lp main label, .lp main form, .lp main iframe, .lp main select, .lp main textarea, .lp main details, .lp-read, .lp-plate, .lp main .demo-sec .shell { pointer-events: auto; }
.lp-plate { background: var(--lp-plate); border: 1px solid var(--lp-line); border-radius: 2px; }
/* the words over the floor let the pointer through to the products behind them (hover and click pick by the
   product under the pointer); their links and buttons stay live */
.hero-copy .lp-read, .journey-intro .lp-read, .step .lp-read { pointer-events: none; }
.hero-copy .lp-read, .journey-intro .lp-read, .step .lp-read { background: none; border: 0; position: relative; isolation: isolate; }
/* the words sit flat in the hall: no plate, no highlight; a fine paper edge keeps them legible over a product */
.hero-copy .lp-read, .journey-intro .lp-read, .step .lp-read { text-shadow: var(--lp-halo-shadow); }
/* when the floor turns into its wireframe (the approach to the Platform) the words go flat and light, as on
   the dark sections: no paper haze, no glow */
.step h3, .step p, .step-num, .step-proof, .step-proof button, .journey-intro h2, .journey-intro p { transition: color .5s var(--lp-ease), border-color .5s var(--lp-ease), text-shadow .5s var(--lp-ease); }
html.world-vision .hero-copy .lp-read, html.world-vision .journey-intro .lp-read, html.world-vision .step .lp-read { text-shadow: none; }
html.world-vision .step h3, html.world-vision .journey-intro h2 { color: #F2F4EC; text-shadow: none; }
html.world-vision .step p, html.world-vision .journey-intro p { color: #B4B9BD; }
html.world-vision .step-num { color: #7FD3E6; border-color: rgba(127, 211, 230, .7); }
html.world-vision .step-proof { color: #8C9499; border-top-color: rgba(232, 234, 224, .14); }
html.world-vision .step-proof button { color: #7FD3E6; }
html.world-vision .step-tags span { background: rgba(127, 211, 230, .12); }

/* hero */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; padding: 116px 0 40px; }
.hero-copy { width: min(1280px, calc(100% - 48px)); margin-inline: auto; }
.hero-copy .lp-read { display: inline-block; max-width: 560px; padding: 22px 24px 24px; }
.hero-kicker { display: block; margin-bottom: 14px; font: 500 10.5px/1 var(--lp-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lp-teal-deep); }
.hero h1 { font: 700 clamp(34px, 4.6vw, 68px)/1 var(--lp-font-display); letter-spacing: -.02em; color: var(--lp-ink); }
.hero .sub { margin-top: 14px; max-width: 470px; font-size: 16.5px; line-height: 1.5; color: var(--lp-ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; justify-content: flex-start; }
.hero-floor { position: absolute; right: max(24px, calc((100% - 1280px) / 2)); bottom: 118px; width: 272px; pointer-events: auto; }
.hero-floor summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; float: right; padding: 8px 12px; border-radius: 999px; background: var(--lp-chip); border: 1px solid var(--lp-line); font: 600 10px/1 var(--lp-font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--lp-ink-soft); }
.hero-floor summary::-webkit-details-marker { display: none; }
.hero-floor summary b { font: 500 10.5px/1 var(--lp-font-mono); letter-spacing: 0; text-transform: none; color: var(--lp-teal-deep); }
.hero-floor summary:focus-visible { outline: 2px solid var(--lp-teal-deep); outline-offset: 2px; }
.hero-floor-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lp-teal-bright); box-shadow: 0 0 0 3px rgba(35, 145, 181, .2); }
.hero-floor[open] summary { border-color: var(--lp-teal); }
/* the floor index stays out of sight (owner 2026-10-19) but keeps the keyboard / screen-reader route into the floor: it shows while focused or open */
.hero-floor:not([open]):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px; margin: -1px !important; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-floor-body { clear: both; position: relative; top: 8px; padding: 12px 14px 10px; border-radius: 10px; background: var(--lp-plate); border: 1px solid var(--lp-line); }
.hero-floor ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.hero-floor li button { all: unset; cursor: pointer; display: block; width: 100%; padding: 4px 0; font: 500 11.5px/1.25 var(--lp-font-text); color: var(--lp-ink-soft); border-top: 1px dotted var(--lp-dotted); }
.hero-floor li button:hover, .hero-floor li button:focus-visible { color: var(--lp-teal-deep); }
.hero-floor li button:focus-visible { outline: 2px solid var(--lp-teal-deep); outline-offset: 1px; }
.hero-floor-nav { display: flex; gap: 6px; justify-content: flex-end; }
.hero-ring-nav { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--lp-line); color: var(--lp-ink); background: var(--lp-solid); }
.hero-ring-nav svg { width: 13px; height: 13px; }
.hero-ring-nav:focus-visible { outline: 2px solid var(--lp-teal-deep); outline-offset: 2px; }
/* pinned to the screen, not the hero (taller than a laptop screen, it pushed the cue below the fold), above the hints */
.hero-scroll-cue { position: fixed; left: 50%; bottom: 56px; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 6px; font: 600 10px/1 var(--lp-font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--lp-ink-soft); }
/* still by default; .is-nudging plays three small bounces (index.html adds it only while the visitor has not scrolled) */
.hero-scroll-cue.is-nudging .hero-scroll-cue-arrow { animation: lpNudge 1.8s var(--lp-ease) 1; }
@keyframes lpNudge { 0%, 33%, 66%, 100% { transform: translateY(0); } 16%, 49%, 82% { transform: translateY(7px); } }
.hero-scroll-cue.is-gone { opacity: 0; pointer-events: none; }

/* the journey: one station per step; the plate holds the words, the floor holds the proof */
.journey-intro { min-height: 70vh; display: flex; align-items: center; }
.journey-intro .lp-read { max-width: 620px; padding: 26px 28px; }
.lp h2.display, .lp .display { font: 700 clamp(28px, 3.4vw, 50px)/1.04 var(--lp-font-display); letter-spacing: -.015em; }
.journey-intro p { margin-top: 14px; color: var(--lp-ink-soft); max-width: 560px; }
.step { min-height: 112vh; display: flex; align-items: center; }
.step .lp-read { width: min(440px, 100%); padding: 22px 24px 24px; }
.step-num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--lp-teal); color: var(--lp-teal-deep); font: 600 11px/1 var(--lp-font-mono); margin-bottom: 14px; }
.step h3 { font: 700 clamp(24px, 2.4vw, 34px)/1.08 var(--lp-font-display); letter-spacing: -.01em; }
.step p { margin-top: 12px; color: var(--lp-ink-soft); }
.step-tags { display: flex; gap: 6px; margin-top: 14px; }
.step-tags span { padding: 3px 8px; border-radius: 2px; font: 600 10px/1.4 var(--lp-font-label); letter-spacing: .12em; text-transform: uppercase; background: var(--lp-tag); color: var(--lp-glow); }
.step-proof { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--lp-line); font: 400 11px/1.5 var(--lp-font-mono); color: var(--lp-muted); }
.step-proof button { all: unset; cursor: pointer; color: var(--lp-teal-deep); text-decoration: underline; text-underline-offset: 2px; }
/* the product the floor shows in engineering view on its own (the line's gate, the deck's showcase): its name in the
   proof line is marked while its window is open (paint only: the line never reflows) */
.step-proof button { border-radius: 2px; transition: color .4s var(--lp-ease), background-color .4s var(--lp-ease), box-shadow .4s var(--lp-ease); }
.step-proof button.is-shown { color: var(--lp-ink); background-color: rgba(35, 145, 181, .16); box-shadow: 0 0 0 3px rgba(35, 145, 181, .16); text-decoration-color: var(--lp-teal-bright); }
html.world-vision .step-proof button.is-shown { color: #E8EAE0; }
.step--right { justify-content: flex-end; }
@media (min-width: 1101px) { .step--right .lp-read { margin-right: 112px; } }   /* clear of the route markers */

/* the dock: the floor turns into its engineering definition, then the live Platform takes the screen */
.dock-runway { min-height: 36vh; }
.demo-sec { padding: 0 0 72px; }
.lp .demo-sec .appwin { margin-top: 0; scroll-margin-top: 84px; }
.lp .demo-sec .appframe { height: clamp(540px, calc(100svh - 84px - 172px), 1400px); }
/* the Platform's title and words as they always were (heading over its line), sharing one screen with the OS */
.demo-sec .sec-head { display: block; box-sizing: border-box; height: 168px; max-width: 900px; padding: 22px 2px 0; background: none; border: 0; color: #E8EAE0; }
.demo-sec .sec-head h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.02; }
.demo-sec .sec-head { position: relative; isolation: isolate; }
.demo-sec .sec-head::before { content: ""; position: absolute; inset: -30px -160px -20px -120px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(20, 22, 24, .9) 0%, rgba(20, 22, 24, .7) 55%, rgba(20, 22, 24, 0) 100%); }
.demo-sec .sec-head h2 { color: #E8EAE0; }
.demo-sec .sec-head p { margin-top: 12px; max-width: 860px; font-size: 17px; line-height: 1.5; color: #B4B9BD; }
.demo-live { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font: 500 10.5px/1 var(--lp-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lp-glow); }
.demo-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lp-glow); box-shadow: 0 0 0 3px rgba(111, 206, 228, .2); }
.demo-sec .appwin { position: relative; overflow: visible; border-radius: 2px; border: 1px solid rgba(232, 234, 224, .18); box-shadow: 0 30px 80px rgba(8, 12, 16, .45); }
.demo-sec .appwin::before, .demo-sec .appwin::after { content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none; border: 2px solid var(--lp-teal-bright); }
.demo-sec .appwin::before { left: -10px; top: -10px; border-right: 0; border-bottom: 0; }
.demo-sec .appwin::after { right: -10px; bottom: -10px; border-left: 0; border-top: 0; }

/* ------------------------------------------------------------ after the Platform
   Each section is its own page: one screen, its content centred, the wireframe hall around it. The page
   locks from one to the next (index.html), so two sections never share the screen half way. The panels
   are the app's dark glass over the Forge floor. */
.lp .every, .lp .research { min-height: 100svh; box-sizing: border-box; display: flex; align-items: center; padding: 104px 0 56px; }
/* the last screen holds the closing panel and the footer together (the footer's height is measured live) */
.lp #early { min-height: calc(100svh - var(--lp-footer-h, 340px)); box-sizing: border-box; display: flex; align-items: center; padding: 80px 0 18px; }
.lp .every > .shell, .lp .research > .shell, .lp #early > .shell { flex: 0 1 auto; }
.every .sec-head, .research .sec-head { display: inline-block; max-width: 760px; padding: 24px 26px; margin-bottom: 18px; }
.every .sec-head p, .research .sec-head p { margin-top: 12px; }
.every-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.every-card { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.every-card h3 { font: 700 22px/1.15 var(--lp-font-display); }
.every-card p { font-size: 15.5px; }
.every-scene { height: 96px; position: relative; overflow: hidden; display: grid; place-items: center; padding: 12px; color: #E8EAE0; }
.every-scene::before { content: ""; position: absolute; inset: 0; opacity: .5; background: linear-gradient(rgba(35,145,181,.16) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(35,145,181,.16) 1px, transparent 1px) 0 0 / 16px 16px; }
.every-scene > * { position: relative; }
.sc-talk { display: flex; align-items: center; gap: 10px; }
.sc-talk .bubble { padding: 7px 12px; border-radius: 2px; background: rgba(242,244,236,.96); color: #16181C; font: 500 13px/1.2 var(--lp-font-mono); min-width: 132px; }
.sc-talk .caret { display: inline-block; width: 7px; height: 13px; margin-left: 2px; vertical-align: -2px; background: var(--lp-clay); animation: lpBlink 1s steps(1, end) infinite; }
@keyframes lpBlink { 50% { opacity: 0; } }
.sc-talk .out { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 2px; border: 1px solid var(--lp-teal-bright); color: var(--lp-glow); font: 500 11px/1 var(--lp-font-mono); opacity: .35; transition: opacity .3s; }
.sc-talk .out.show { opacity: 1; }
.sc-talk .out svg { width: 13px; height: 13px; }
.sc-check { display: grid; gap: 4px; font: 500 12px/1.3 var(--lp-font-mono); }
.sc-check .ck { display: flex; align-items: center; gap: 8px; }
.sc-check .box { width: 12px; height: 12px; border: 1.4px solid var(--lp-teal-bright); display: inline-grid; place-items: center; }
.sc-check .box svg { width: 10px; height: 10px; fill: none; stroke: var(--lp-glow); stroke-width: 2.2; }
.sc-build { display: flex; align-items: center; gap: 8px; }
.sc-build .cube-wrap { display: none; }
.fmt { display: flex; gap: 6px; }
.fmt .chip { padding: 5px 9px; border-radius: 2px; border: 1px solid rgba(232,234,224,.3); font: 600 11px/1 var(--lp-font-mono); letter-spacing: .08em; color: #E8EAE0; }
.fmt .chip:nth-child(1) { border-color: var(--lp-teal-bright); color: var(--lp-glow); }

.research-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.research-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; transition: border-color .2s, transform .25s var(--lp-ease); }
.research-card:hover { transform: translateY(-3px); }
.research-card h3 { font: 700 19px/1.18 var(--lp-font-display); }
.research-card p { font-size: 14.5px; flex: 1; }
.r-link { font: 600 12px/1 var(--lp-font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--lp-teal-deep); }
.hub-link { display: inline-flex; margin-top: 18px; padding: 10px 14px; font: 600 12px/1 var(--lp-font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--lp-teal-deep); }
/* the dark glass over the Forge floor */
.lp .every .lp-plate, .lp .research .lp-plate { background: rgba(22, 24, 26, .86); border: 1px solid rgba(127, 211, 230, .16); border-radius: 10px; color: #E8EAE0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lp .every h2, .lp .research h2, .lp .every-card h3, .lp .research-card h3 { color: #F2F4EC; }
.lp .every .sec-head p, .lp .research .sec-head p, .lp .every-card p, .lp .research-card p { color: #B4B9BD; }
.lp .every-scene { background: #101213; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(127, 211, 230, .14); }
.lp .research-card:hover { border-color: rgba(127, 211, 230, .55); }
.lp .research .r-link, .lp .research .hub-link { color: #7FD3E6; }
/* the closing panel */
.cta-panel { text-align: center; padding: 34px 32px 30px; position: relative; }
.lp .cta-panel.lp-plate { background: var(--lp-cta); }   /* solid: the wireframe never shows through the words */
.cta-panel::before, .cta-panel::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--lp-teal); pointer-events: none; }
.cta-panel::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.cta-panel::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.cta-panel h2 { font: 700 clamp(28px, 3.2vw, 46px)/1.06 var(--lp-font-display); letter-spacing: -.02em; max-width: 980px; margin: 0 auto 10px; }
.cta-panel h2 .accent { color: var(--lp-clay); }
.cta-panel > p { max-width: 560px; margin: 0 auto 20px; color: var(--lp-muted); }
/* touch keeps native scrolling, with soft snap points on the same scenes the desktop steps through */
@media (hover: none) and (pointer: coarse) {
  html.lp { scroll-snap-type: y proximity; }
  .lp .hero, .lp .journey-intro, .lp .step, .lp .every, .lp .research { scroll-snap-align: center; }
  .lp .demo-sec { scroll-snap-align: start; }
}
.signup { display: flex; max-width: 520px; margin: 0 auto; padding: 5px; border-radius: 2px; background: var(--lp-solid); border: 1px solid var(--lp-line); }
.signup input { flex: 1; min-width: 0; padding: 0 14px; border: 0; outline: 0; background: transparent; color: var(--lp-ink); font: inherit; }
.signup input::placeholder { color: var(--lp-muted); }
/* The input fills the field up to the button, so its own ring (.lp :focus-visible, 3px outside)
   would cut across the button. Ring the whole field instead. --lp-teal-deep follows the theme,
   so the ring shows on the light and the dark panel alike. Browsers without :has() keep the
   input's own ring: overlapping the button beats having no focus indicator at all. */
@supports selector(:has(*)) {
  .lp .signup input:focus-visible { outline: none; }
  .lp .signup:has(input:focus-visible) { outline: 2px solid var(--lp-teal-deep); outline-offset: 3px; }
}
.signup .btn { min-height: 44px; border-radius: 2px; }
.signup-consent { display: flex; align-items: flex-start; gap: 9px; max-width: 520px; margin: 14px auto 0; text-align: left; font-size: 13px; line-height: 1.5; color: var(--lp-muted); cursor: pointer; }
.signup-consent input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--lp-clay); cursor: pointer; }
.signup-consent a { color: inherit; text-decoration: underline; }
.signup-turnstile { display: flex; justify-content: center; margin-top: 14px; }
.signup-turnstile:empty { display: none; }
.signup-status { max-width: 520px; margin: 14px auto 0; font-size: 14px; min-height: 1.2em; }
.signup-status.is-error { color: var(--lp-clay-text); }
.signup-status.is-ok { color: var(--lp-ink); font-weight: 600; }

/* the footer and the nav sit on solid paper over the floor */
.lp .site-footer { position: relative; z-index: 2; background: var(--lp-paper); margin-top: 0; }

/* reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--lp-ease), transform .7s var(--lp-ease); }
.reveal.vis { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .route { display: none; }
  .every-grid, .research-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero-copy .lp-read, .journey-intro .lp-read, .step .lp-read { padding-left: 0; padding-right: 0; }
  .demo-sec .sec-head { height: auto; padding-bottom: 18px; }
  .lp .demo-sec .appframe { height: clamp(560px, calc(100svh - 92px), 1400px); }
  .hero { padding-top: 96px; }
  .hero-floor { position: static; width: auto; margin: 18px 16px 0; }
  .hero-scroll-cue { bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }   /* clears the Pause motion button */
  .world-hints { display: none; }
  .hud-status { right: 12px; bottom: 12px; }
  .stage-loader { display: none; }
  .inspect-panel { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-height: 42vh; }
  .step { min-height: 92vh; align-items: flex-end; padding-bottom: 8vh; }
  .step--right { justify-content: flex-start; }
  .lp .shell { width: calc(100% - 28px); }
}
@media (prefers-reduced-motion: reduce) {
  html.lp { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-scroll-cue-arrow, .sc-talk .caret { animation: none; }
}