/* ============================================================
   ORANO · Homepage
   Loaded after design.css / screens.css / landing.css. Every rule
   is scoped to body.home so the shared files keep serving the other
   pages untouched.

   This file only restyles the top of the page (nav, hero, sources
   strip, manifesto, "understanding" scrub) and frames the demo.
   How it works, Features, Details, FAQ, the final CTA and the
   footer are the original landing.css sections; the block at the
   end only matches their heading type to the top of the page.

   Keep it quiet: one slow ambient element (the hero ring), no
   competing motion, nothing that pulls focus from the copy.
   ============================================================ */

body.home {
  --red: #f04438;
  --cream: #fbf0de;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .17);
  --t2: #a3a3a3;
  --t3: #707070;
  --display: "Jost", "Inter", system-ui, sans-serif;
  --label: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 56px);
  --nav-h: 72px;
  --sec: clamp(96px, 15vh, 180px);
}

/* design.css hides horizontal overflow on <body>, which turns it into a
   scroll container and silently disables position: sticky. clip does the
   same job without that side effect; home.js only pins the scrub section
   when the browser supports it. */
@supports (overflow: clip) {
  body.home { overflow-x: clip; }
}

.home [id] { scroll-margin-top: 88px; }
.home .red { color: var(--red); }
.home .dim { color: var(--t3); }

.home .grain {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Shared type ── */
.home .tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--label);
  font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--red);
}
.home .tag::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.home .display {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(36px, 5.2vw, 72px);
  line-height: 1; letter-spacing: -.038em;
  text-wrap: balance;
}
.home .lede {
  color: var(--t2);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55; letter-spacing: -.01em;
  max-width: 46ch;
  text-wrap: pretty;
}
.home .sec-head { display: grid; gap: 18px; justify-items: start; margin-bottom: clamp(40px, 6vw, 72px); }
.home .sec-head.center { justify-items: center; text-align: center; }
.home .sec-head.center .tag::after { content: ""; width: 18px; height: 1px; background: currentColor; }
.home .sec-head.sm .display { font-size: clamp(30px, 4vw, 50px); }

.home .logo img { animation: home-spin 26s linear infinite; }
@keyframes home-spin { to { transform: rotate(360deg); } }

/* ── Store buttons (hero) ── */
.home .stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.home .stores .btn-store,
.home .stores .btn-store-google {
  width: 204px; height: 60px;
  border-radius: 16px;
  transition: transform var(--d-fast) var(--ease), background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.home .stores .btn-store { padding: 0 22px; }
.home .stores .btn-store-google {
  padding: 0; overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, .32);
}
.home .stores .btn-store-google:hover { border-color: rgba(255, 255, 255, .6); }
.home .stores .google-play-badge { width: 152px; }

/* ═══════════════ NAV ═══════════════ */
.home .mast {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding: 14px var(--pad) 0;
  pointer-events: none;
}
.home .mast-bar {
  position: relative;
  pointer-events: auto;
  max-width: calc(var(--wrap) - var(--pad) * 2 + 40px); margin: 0 auto;
  height: 58px; padding: 0 9px 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid transparent; border-radius: 999px;
  transition: background var(--d) var(--ease), border-color var(--d) var(--ease);
}
.home .mast.is-scrolled .mast-bar,
.home .mast.is-open .mast-bar {
  background: rgba(8, 8, 8, .78);
  border-color: var(--line-2);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.home .mast-brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.home .mast-brand .logo { width: 28px; height: 28px; }
.home .mast-brand .wordmark { height: 15px; width: auto; mix-blend-mode: screen; }
.home .mast-links { display: flex; gap: 4px; }
.home .mast-links a {
  padding: 9px 14px; border-radius: 999px;
  font-size: 13.5px; color: var(--t2);
  transition: color var(--d-fast), background var(--d-fast);
}
.home .mast-links a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.home .mast-cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.home .mast-cta .btn {
  height: 40px; padding: 0 20px;
  border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: -.02em;
}
.home .mast-toggle {
  display: none;
  position: relative; width: 44px; height: 44px;
  border: 1px solid var(--line-2); border-radius: 50%;
}
.home .mast-toggle span {
  position: absolute; left: 14px; right: 14px; height: 1.5px;
  background: #fff;
  transition: transform var(--d-fast) var(--ease), top var(--d-fast) var(--ease);
}
.home .mast-toggle span:first-child { top: 17px; }
.home .mast-toggle span:last-child { top: 24px; }
.home .mast.is-open .mast-toggle span:first-child { top: 21px; transform: rotate(45deg); }
.home .mast.is-open .mast-toggle span:last-child { top: 21px; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .home .mast-toggle { display: block; }
  .home .mast-cta .btn { height: 44px; }
  .home .mast-bar { padding-right: 7px; }
  .home .mast-links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: 10px;
    background: #0a0a0a;
    border: 1px solid var(--line-2); border-radius: 26px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .8);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease), visibility 0s linear var(--d-fast);
  }
  .home .mast.is-open .mast-links { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .home .mast-links a {
    padding: 15px 16px;
    font-family: var(--display); font-size: 24px; font-weight: 500; letter-spacing: -.02em;
    color: #fff;
  }
}
@media (max-width: 380px) {
  .home .mast-bar { padding-left: 14px; }
  .home .mast-brand .wordmark { height: 13px; }
  .home .mast-cta .btn { padding: 0 15px; font-size: 13px; }
}

/* ═══════════════ HERO ═══════════════ */
.home .intro {
  position: relative; isolation: isolate;
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + 24px);
  overflow: hidden;
}
.home .intro::after {  /* floor fade into the next section */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 5;
  background: linear-gradient(180deg, transparent, #000);
  pointer-events: none;
}
.home .intro-grid {
  position: relative; z-index: 1;
  max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad);
  min-height: calc(100svh - var(--nav-h) - 24px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: stretch; gap: 24px;
}
.home .intro-copy {
  position: relative; z-index: 6;
  align-self: center;
  display: grid; gap: 22px; justify-items: start;
  padding-bottom: 72px;
}
.home .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-family: var(--label); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #d9d9d9;
}
.home .eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.home .intro-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(50px, min(7.4vw, 14vh), 112px);
  line-height: .9; letter-spacing: -.048em;
}
.home .intro-title .ln { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.home .intro-title .ln > span { display: inline-block; }
html.js-ready .home .intro-title .ln > span {
  transform: translateY(112%);
  animation: home-rise 1.1s var(--ease-out) forwards;
}
html.js-ready .home .intro-title .ln:nth-child(2) > span { animation-delay: .09s; }
html.js-ready .home .intro-title .ln:nth-child(3) > span { animation-delay: .18s; }
@keyframes home-rise { to { transform: none; } }
html.js-ready .home .intro-copy > :not(.intro-title) { opacity: 0; animation: home-fade-up .9s var(--ease-out) forwards .4s; }
@keyframes home-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.home .intro-sub {
  max-width: 34ch;
  font-size: clamp(17px, 1.55vw, 22px); line-height: 1.45; letter-spacing: -.015em;
  color: #c9c9c9;
}
.home .intake { display: flex; flex-wrap: wrap; gap: 8px; }
.home .intake li {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px 0 11px;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-size: 13px; font-weight: 500; color: #e6e6e6;
}
.home .intake svg { width: 16px; height: 16px; color: var(--red); }
.home .intro-note { max-width: 58ch; font-size: 12.5px; line-height: 1.6; letter-spacing: -.005em; color: var(--t3); }
.home .intro-note a { color: #cfcfcf; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.home .intro-note a:hover { color: #fff; text-decoration-color: var(--red); }
.home .intro-demo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: #fff;
  text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 5px;
  transition: gap var(--d) var(--ease);
}
.home .intro-demo:hover { gap: 13px; }

/* The phone is always fully inside its column. The photo itself is cut at
   its right and bottom edges, so those two edges fade out instead. */
.home .intro-stage { display: flex; align-items: flex-end; justify-content: center; min-width: 0; }
.home .intro-hand {
  position: relative; z-index: 3;
  width: auto; height: auto;
  max-width: 100%;
  max-height: min(calc(100svh - var(--nav-h) - 40px), 820px);
}
html.js-ready .home .intro-hand { animation: home-hand 1.4s var(--ease-out) both .15s; }
@keyframes home-hand { from { opacity: 0; transform: translateY(5%); } to { opacity: 1; transform: none; } }

.home .scroll-hint {
  position: absolute; left: max(var(--pad), calc(50% - var(--wrap) / 2 + var(--pad))); bottom: 28px; z-index: 6;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--label); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--t3);
}
.home .scroll-hint svg { width: 14px; height: 14px; }
.home .scroll-hint:hover { color: #fff; }

@media (max-width: 1000px), (max-aspect-ratio: 99/100) {
  /* One column (narrow or tall windows): the copy's children join the grid so the phone can sit
     between the headline and the store buttons. */
  .home .intro-grid {
    grid-template-columns: minmax(0, 1fr); gap: 20px;
    min-height: 0; align-content: start; justify-items: start;
    padding-top: clamp(20px, 4vh, 48px); padding-bottom: 56px;
  }
  .home .intro-copy { display: contents; }
  .home .intro-sub { max-width: 40ch; }
  .home .intake, .home .intro-note { display: none; }
  .home .intro-stage { order: 1; justify-self: stretch; }
  .home .stores, .home .intro-demo { order: 2; position: relative; z-index: 6; }
  .home .stores { margin-top: -56px; }   /* sits on the photo's faded bottom edge */
  .home .intro-hand { max-height: min(84vw, 600px); }
  .home .scroll-hint { display: none; }
}
@media (max-width: 560px) {
  .home .intro { padding-top: calc(var(--nav-h) + 4px); }
  .home .intro-title { font-size: clamp(36px, 11vw, 58px); }
  .home .intro-grid { gap: 12px; padding-top: 0; padding-bottom: 32px; }
  .home .intro-sub { font-size: 15px; line-height: 1.4; }
  .home .intro-demo { justify-self: center; }
  .home .eyebrow { font-size: 9.5px; letter-spacing: .09em; padding: 7px 12px 7px 10px; gap: 8px; }
  .home .stores { width: 100%; }
  .home .stores .btn-store, .home .stores .btn-store-google { width: calc(50% - 6px); min-width: 150px; height: 56px; }
  .home .stores .btn-store { padding: 0 14px; gap: 9px; }
  .home .stores .btn-store .store-name { font-size: 16px; }
  .home .intro { min-height: 0; }
  .home .intro-hand { max-height: clamp(300px, calc(100svh - 365px), 128vw); }
}

/* ═══════════════ SOURCES STRIP ═══════════════ */
.home .ticker {
  position: relative;
  padding: clamp(18px, 2.2vw, 28px) 0;
  border-block: 1px solid var(--line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.home .ticker-track { display: flex; width: max-content; animation: home-ticker 90s linear infinite; }
.home .ticker:hover .ticker-track { animation-play-state: paused; }
.home .ticker-set { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); padding-right: clamp(18px, 2.4vw, 34px); font-size: clamp(22px, 2.9vw, 40px); }
.home .ticker-set span {
  font-family: var(--display); font-weight: 500;
  line-height: 1; letter-spacing: -.03em; white-space: nowrap;
  color: #d6d6d6;
}
.home .ticker-set .ol { color: var(--t3); }
.home .ticker-set i { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--red); }
@keyframes home-ticker { to { transform: translateX(-50%); } }

/* ═══════════════ MANIFESTO ═══════════════ */
.home .manifesto { padding: clamp(110px, 20vh, 220px) var(--pad); }
.home .manifesto-inner {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: clamp(24px, 5vw, 72px);
  align-items: start;
}
.home .manifesto-owl { padding-top: 10px; }
.home .manifesto-owl img { width: 150px; height: auto; }
.home .manifesto-owl figcaption {
  margin-top: 14px;
  font-family: var(--label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--t3);
}
.home .manifesto-text {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(31px, 4.7vw, 68px);
  line-height: 1.07; letter-spacing: -.035em;
  text-wrap: pretty;
}
.home .manifesto-text em { font-style: normal; color: var(--red); }
.home .manifesto-text .w { opacity: .15; transition: opacity .3s linear; }
.home .manifesto-text .w.on { opacity: 1; }
@media (max-width: 760px) {
  .home .manifesto-inner { grid-template-columns: minmax(0, 1fr); }
  .home .manifesto-owl { display: flex; align-items: flex-end; gap: 16px; }
  .home .manifesto-owl img { width: 96px; }
  .home .manifesto-owl figcaption { margin: 0 0 12px; }
}

/* ═══════════════ UNDERSTANDING — exploded video ═══════════════ */
.home .layers {
  position: relative;
  /* Static, readable state; home.js promotes it to a pinned scrub. */
  --tilt: 1; --spread: 1; --result: 0;
  padding: var(--sec) 0;
}
.home .layers.is-live { height: 360vh; padding: 0; }
.home .layers.is-live .layers-pin {
  position: sticky; top: 0;
  height: 100svh; overflow: hidden;
  display: flex; align-items: center;
}
/* Desktop: the visual, and one short column beside it. */
.home .layers-grid {
  width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  grid-template-areas: "stage head" "stage list";
  column-gap: clamp(32px, 5vw, 72px); row-gap: 26px;
}
.home .layers.is-live .layers-grid { padding-top: var(--nav-h); }
.home .layers-head { grid-area: head; align-self: end; display: grid; gap: 16px; justify-items: start; }
.home .layers-head .display { font-size: clamp(28px, 2.9vw, 40px); line-height: 1.05; letter-spacing: -.035em; }
.home .layers-stage {
  grid-area: stage;
  position: relative;
  height: min(82svh, 780px);
  display: grid; place-items: center;
  perspective: 1500px;
}
.home .layers-list { grid-area: list; align-self: start; display: grid; }

.home .stack {
  position: relative;
  width: clamp(220px, min(25vw, 38svh), 350px); aspect-ratio: 9 / 16;
  transform-style: preserve-3d;
  transform:
    translateY(calc(var(--spread) * 13%))
    rotateX(calc(var(--tilt) * 57deg))
    rotateZ(calc(var(--tilt) * -37deg));
}
.home .ply {
  position: absolute; inset: 0;
  container-type: inline-size;
  border-radius: 16px;
  transform: translateZ(calc(var(--z, 0) * var(--spread) * 78px));
}
.home .ply-video {
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, calc(.22 + var(--result) * .2));
  box-shadow: 0 40px 70px rgba(0, 0, 0, .7);
}

.home .ply-video img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  filter: grayscale(calc(1 - var(--result))) brightness(calc(.4 + var(--result) * .6));
}
/* Each box / highlight carries its own crop of the frame, in colour. */
.home .ply .box, .home .ply .hl { background: url("../assets/demos/ai.jpg") no-repeat; }
.home .ply .hl { position: absolute; border: 1px solid var(--red); border-radius: 3px; }

.home .ply-pane {
  --o: .5;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .035);
  opacity: calc(var(--spread) * var(--o) * (1 - var(--result)));
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.home .layers.is-live .ply-pane { --o: 0; transition: opacity .45s var(--ease), border-color .35s var(--ease), background .35s var(--ease); }
.home .layers.is-live .ply-pane.is-shown { --o: .5; }
.home .layers.is-live .ply-pane:not(.is-on) .ply-tag { opacity: 0; }
.home .layers.is-live .ply-pane.is-on { --o: 1; border-color: var(--red); background: rgba(20, 8, 7, .55); }
.home .ply[data-ply="visuals"] { --z: 1; }
.home .ply[data-ply="speech"] { --z: 2; }
.home .ply[data-ply="text"] { --z: 3; }
.home .ply[data-ply="context"] { --z: 4; }
.home .ply-tag {
  position: absolute; left: 2px; bottom: calc(100% + 7px);
  font-family: var(--label); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap; color: #d0d0d0;
}
.home .ply-pane.is-on .ply-tag { color: var(--red); }
.home .ply .box { position: absolute; border: 1px solid var(--cream); border-radius: 4px; }
.home .ply .box em {
  position: absolute; left: -1px; top: -1px;
  padding: 1px 4px;
  background: var(--cream); color: #000;
  font-family: var(--label); font-size: 7px; font-style: normal; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 3px 0 3px 0;
}
.home .ply .ocr {
  position: absolute; left: 0; right: 0; top: 79%;
  text-align: center;
  font-family: var(--label); font-size: 7.5px; letter-spacing: .1em; color: #fff;
}
.home .ply .wave { position: absolute; left: 9%; right: 9%; top: 30%; height: 22%; display: flex; align-items: center; gap: 3px; }
.home .ply .wave i { flex: 1; height: 100%; border-radius: 2px; background: #fff; transform: scaleY(.5); }
.home .ply .wave i:nth-child(3n) { transform: scaleY(.9); }
.home .ply .wave i:nth-child(4n+1) { transform: scaleY(.28); }
.home .ply .wave i:nth-child(5n+2) { transform: scaleY(.7); }
.home .ply .wave i:nth-child(7n) { transform: scaleY(.16); }
.home .ply .lines { position: absolute; left: 9%; right: 9%; top: 62%; display: grid; gap: 7px; }
.home .ply .lines span { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .55); }
.home .ply .lines span:nth-child(2) { width: 82%; }
.home .ply .lines span:nth-child(3) { width: 56%; }
.home .ply .ctx-head { position: absolute; left: 9%; right: 9%; top: 9%; display: flex; align-items: center; gap: 7px; }
.home .ply .ctx-av { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #fff; }
.home .ply .ctx-name { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .6); }
.home .ply .ctx-badge { padding: 2px 6px; border: 1px solid #fff; border-radius: 999px; font-family: var(--label); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.home .ply .ctx-lines { top: 24%; }
.home .ply .ctx-chips { position: absolute; left: 9%; right: 9%; bottom: 9%; display: flex; flex-wrap: wrap; gap: 5px; }
.home .ply .ctx-chips span { padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-family: var(--label); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }

.home .ply-result {
  inset: auto 0 0 0;
  display: grid; gap: 7px; align-content: end;
  padding: 26% 7% 7%;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .92) 46%);
  opacity: var(--result);
  pointer-events: none;
}
.home .res-kicker { display: inline-flex; align-items: center; gap: 6px; font-family: var(--label); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.home .res-kicker::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.home .res-meta { font-size: 11.5px; line-height: 1.4; color: #bdbdbd; letter-spacing: -.005em; }
.home .ply-result strong { font-family: var(--display); font-size: clamp(17px, 1.9vw, 26px); font-weight: 500; line-height: 1.05; letter-spacing: -.025em; }
.home .ply-result p { font-size: 13.5px; line-height: 1.45; color: var(--t2); letter-spacing: -.005em; }
.home .res-label { margin-top: auto; font-family: var(--label); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--t3); }
.home .ply-result ul { display: grid; gap: 6px; }
.home .ply-result li { display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; color: #e4e4e4; }
.home .ply-result li span { flex: none; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); font-family: var(--label); font-size: 8.5px; color: var(--t2); }

.home .layers-list li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}
.home .layers-list li:last-child { border-bottom: 1px solid var(--line); }
.home .layers-list .n { padding-top: 5px; font-family: var(--label); font-size: 11px; font-weight: 500; color: var(--red); }
.home .layers-list h3 { font-family: var(--display); font-size: clamp(19px, 1.7vw, 23px); font-weight: 500; letter-spacing: -.025em; line-height: 1.1; }
.home .layers-list p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--t2); letter-spacing: -.008em; }
.home .layers.is-live .layers-list li { opacity: .3; transition: opacity .4s var(--ease); }
.home .layers.is-live .layers-list li.is-on { opacity: 1; }
.home .layers.is-live .layers-list p { display: grid; grid-template-rows: 0fr; margin-top: 0; opacity: 0; transition: grid-template-rows .45s var(--ease), opacity .35s var(--ease), margin .45s var(--ease); }
.home .layers.is-live .layers-list p > span { overflow: hidden; }
.home .layers.is-live .layers-list li.is-on p { grid-template-rows: 1fr; margin-top: 6px; opacity: 1; }

@media (max-width: 980px) {
  .home .layers-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "list"; row-gap: 18px; }
  .home .layers-head { justify-items: center; text-align: center; gap: 12px; }
  .home .layers-head .display { font-size: clamp(26px, 6.4vw, 40px); }
  .home .layers-head .display br { display: none; }
  .home .layers-stage { height: min(50svh, 460px); }
  .home .stack { width: clamp(140px, 23svh, 200px); }
  .home .ply { transform: translateZ(calc(var(--z, 0) * var(--spread) * 46px)); }
  .home .layers-list { max-width: 460px; width: 100%; margin: 0 auto; }
  .home .layers.is-live .layers-list { min-height: 118px; }
  .home .layers.is-live .layers-list li { display: none; border: 0; padding: 0; }
  .home .layers.is-live .layers-list li.is-on { display: grid; }
  .home .layers.is-live .layers-list:not(:has(.is-on)) li:first-child { display: grid; }
  .home .ply-result p { display: none; }
}

/* ═══════════════ DEMO (markup + behaviour owned by landing.css / demo.js) ═══════════════ */
.home .demo-section { padding: var(--sec) var(--pad); }
.home .demo-frame {
  position: relative;
  max-width: 1180px; margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) clamp(14px, 3vw, 48px) clamp(28px, 4vw, 52px);
  border: 1px solid var(--line); border-radius: 36px;
  background: #040404;
}
.home .demo-frame-tag {
  position: absolute; top: 0; left: 50%; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: #000;
  font-family: var(--label); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: #d9d9d9; white-space: nowrap;
}
.home .demo-frame-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
@media (max-width: 720px) {
  .home .demo-frame { border-radius: 26px; }
}

/* ═══════════════ BELOW THE DEMO ═══════════════
   How it works, Features, Details, FAQ, final CTA and footer are the
   original landing.css sections. Only the heading face is matched to
   the top of the page, and the story rail is nudged clear of the new
   section head. */
.home .stage-text h3,
.home .feature h3,
.home .proof-card strong,
.home .faq-item summary,
.home .cta h2,
.home .footer-tag {
  font-family: var(--display);
  font-weight: 500;
}
.home .story-rail { top: 300px; }
@media (min-width: 980px) {
  .home .story-rail { top: 360px; }
}

/* ═══════════════ PHONE SPACING ═══════════════
   Sections sit closer together on a small screen. */
@media (max-width: 560px) {
  .home .manifesto { padding-block: 72px; }
  .home .section, .home .demo-section { padding-block: 72px; }
  .home .cta { padding-block: 96px; }
  .home .sec-head { gap: 14px; margin-bottom: 32px; }
}

/* ═══════════════ REDUCED MOTION ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  .home .ticker-track { animation: none; }
  html.js-ready .home .intro-title .ln > span { transform: none; }
  html.js-ready .home .intro-copy > :not(.intro-title) { opacity: 1; transform: none; }
  .home .manifesto-text .w { opacity: 1; }
}

/* hero photo fills the right side, bleeding off the right and bottom edges (wide windows) */
@media (min-width: 1001px) {
  .home .intro::after { display: none; }
  .home .intro-grid { position: static; }
  .home .intro-stage { position: static; }
  .home .intro-hand {
    position: absolute; z-index: 3;
    right: -4vw; bottom: -3svh;
    width: min(56vw, calc((100svh - var(--nav-h) - 56px) * 1.065));
    height: auto; max-width: none; max-height: none;
  }
}

/* tablets and tall windows: copy on top, buttons, then the photo bleeding off the bottom-right */
@media (min-width: 561px) and (max-width: 1000px), (min-width: 1001px) and (max-aspect-ratio: 99/100) {
  .home .intro::after { display: none; }
  .home .intro-grid {
    display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
    min-height: calc(100svh - var(--nav-h) - 24px); padding-bottom: 0;
  }
  .home .stores, .home .intro-demo { order: 2; margin-top: 0; }
  .home .intro-stage {
    order: 3; position: static; align-self: stretch; margin-top: auto;
    display: flex; justify-content: flex-end; align-items: flex-end;
  }
  .home .intro-hand {
    position: relative; right: auto; bottom: auto;
    width: clamp(60vw, calc((100svh - 520px) * 1.065), 880px);
    height: auto; max-width: none; max-height: none;
    margin: 0 calc(-1 * var(--pad) - 6vw) -3vw 0;
  }
}

/* "03 / Use" phone: the screenshot already includes its own frame and status bar */
.home .device.device-photo {
  aspect-ratio: 600 / 1319; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.home .device.device-photo::before { display: none; }
.home .device.device-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }