/* =========================================================
   VERTICAL WORLD: Apps ("Runtime Interface")
   The whole page is a running OS surface: a cold, device-grade
   dark console where the phone is the hero screen, real UI chrome
   (status bars, notification stacks, install counters, build logs)
   frames every claim, and clips read as live app captures.

   Scoped entirely under [data-vertical="apps"] so overriding the
   design tokens re-skins the shared header/footer/components, then
   bespoke OS sections layer on top.

   mustFix applied:
   - NO violet->cyan gradient mesh anywhere. Depth is built from
     hairlines (#2A2E3A), real frosted glass, cool low drop-shadows,
     and a SINGLE warm amber bloom behind the hero phone.
   - Signal color is warm SIGNAL AMBER (#FF7A45), not cyan, so the
     page reads product-native + idiosyncratic instead of
     generic-premium-dark-SaaS, and separates cleanly from Gaming.
   - Install Green stays semantic: GET / install / success only.
   ========================================================= */
[data-vertical="apps"] {
  --bg:        #0A0B0F;   /* console black, cold blue undertone */
  --bg-alt:    #12141A;   /* raised panel / OS surface */
  --surface:   #1B1E27;   /* cards, bezels, glass panels */
  --ink:       #F4F6FB;   /* signal white, slightly cool */
  --ink-soft:  #B4BCCC;   /* readable secondary (lifted for contrast) */
  --muted:     #8A93A6;   /* interface gray, UI captions */
  --line:      #2A2E3A;   /* 1px hairline borders */
  --accent:    #FF7A45;   /* SIGNAL AMBER: the warm live glow */
  --green:     #22B268;   /* install green, lifted for on-black contrast */

  --amber:     #FF7A45;
  --amber-hi:  #FFA070;
  --install:   #22B268;
  --install-hi:#2FD07E;
  --glass:     rgba(27,30,39,0.62);
  --glass-hi:  rgba(255,255,255,0.10);

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 22px;

  --shadow-panel: 0 20px 50px -28px rgba(0,0,0,0.9), 0 2px 0 rgba(255,255,255,0.02) inset;

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  color-scheme: dark;
  background: var(--bg);
}

/* OLED film grain across the world (one tiny inlined SVG, kills banding) */
[data-vertical="apps"] body,
body[data-vertical="apps"] {
  background-color: var(--bg);
  position: relative;
}
[data-vertical="apps"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.035; mix-blend-mode: soft-light;
}
[data-vertical="apps"] .site-header,
[data-vertical="apps"] main,
[data-vertical="apps"] .site-footer { position: relative; z-index: 1; }

/* Space Grotesk display voice; mechanical, spec-sheet character */
[data-vertical="apps"] h1,
[data-vertical="apps"] h2,
[data-vertical="apps"] h3 {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -0.03em;
}
[data-vertical="apps"] h1 { letter-spacing: -0.045em; }
[data-vertical="apps"] .eyebrow {
  color: var(--amber); background: rgba(255,122,69,0.06);
  border-color: rgba(255,122,69,0.28);
}
[data-vertical="apps"] .lead { color: var(--ink-soft); }

/* Tabular figures on every counter/stat so live tickers never jitter */
[data-vertical="apps"] .num,
[data-vertical="apps"] .spec-val,
[data-vertical="apps"] .os-time { font-variant-numeric: tabular-nums; }

/* Fixed dark world -> retire the light/dark toggle */
[data-vertical="apps"] .theme-toggle { display: none; }

/* Header/footer on console black: hairline seam so the dark world reads intentional */
[data-vertical="apps"] .site-header {
  background: rgba(10,11,15,0.72);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
}
[data-vertical="apps"] .site-header.is-scrolled { border-color: var(--line); }
[data-vertical="apps"] .brand .logo { color: var(--ink); }

/* GET button = App-Store install pill (Install Green, semantic only) */
[data-vertical="apps"] .btn--primary {
  background: var(--install); color: #04140B; font-weight: 700;
  letter-spacing: 0.02em; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
[data-vertical="apps"] .btn--primary:hover { background: var(--install-hi); }
[data-vertical="apps"] .btn--ghost { border-color: var(--line); color: var(--ink); }
[data-vertical="apps"] .btn--ghost:hover { background: var(--surface); border-color: rgba(255,122,69,0.4); }

/* Focus rings in signal amber, keyboard-visible everywhere */
[data-vertical="apps"] a:focus-visible,
[data-vertical="apps"] button:focus-visible,
[data-vertical="apps"] summary:focus-visible,
[data-vertical="apps"] .get-pill:focus-visible,
[data-vertical="apps"] .demo-phone:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 8px;
}

/* ---- The GET install pill (used in hero + spec footer) ---- */
[data-vertical="apps"] .get-pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--install); color: #04140B;
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 13px 26px; border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 10px 26px -14px rgba(34,178,104,0.8);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
[data-vertical="apps"] .get-pill:hover { background: var(--install-hi); transform: translateY(-1px); }
[data-vertical="apps"] .get-pill:active {
  transform: scale(0.97);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.35);
}
[data-vertical="apps"] .get-pill svg { width: 15px; height: 15px; }

/* The single persistent LIVE dot: warm amber, always-on pulse */
[data-vertical="apps"] .live-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(255,122,69,0.55);
  animation: liveptulse 2s ease-in-out infinite;
}
@keyframes liveptulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,122,69,0.5); opacity: 1; }
  70%  { box-shadow: 0 0 0 7px rgba(255,122,69,0); opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 rgba(255,122,69,0); opacity: 1; }
}
[data-vertical="apps"] .status-row {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 15px; background: rgba(18,20,26,0.6);
}
[data-vertical="apps"] .status-row strong { color: var(--ink); font-weight: 600; }

/* =============== reusable device primitives =============== */
/* A CSS-only phone: bezel, notch, screen */
[data-vertical="apps"] .device {
  position: relative; border-radius: 30px;
  background: linear-gradient(160deg, #22252F, #14161D);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 30px 70px -34px rgba(0,0,0,0.95);
  padding: 9px;
}
[data-vertical="apps"] .device::after {
  /* notch */
  content: ""; position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 42%; height: 20px; background: #04050A; border-radius: 0 0 12px 12px; z-index: 5;
}
[data-vertical="apps"] .device-screen {
  position: relative; border-radius: 22px; overflow: hidden;
  background: #05060B; aspect-ratio: 9 / 19;
  display: flex; flex-direction: column;
}
/* iOS status bar */
[data-vertical="apps"] .os-statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px 8px; font-size: 0.68rem; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em; z-index: 6;
}
[data-vertical="apps"] .os-statusbar .os-icons { display: inline-flex; gap: 5px; align-items: center; }
[data-vertical="apps"] .os-statusbar .os-icons span {
  display: inline-block; width: 4px; height: 8px; background: var(--ink); border-radius: 1px; opacity: 0.85;
}
[data-vertical="apps"] .os-statusbar .os-batt {
  width: 20px; height: 10px; border: 1px solid rgba(244,246,251,0.7); border-radius: 2px; position: relative;
}
[data-vertical="apps"] .os-statusbar .os-batt::before {
  content: ""; position: absolute; inset: 1px; right: 6px; background: var(--install); border-radius: 1px;
}

/* =========================================================
   HERO: the runtime console
   ========================================================= */
[data-vertical="apps"] .rt-hero {
  position: relative; overflow: hidden;
  padding: clamp(40px, 6vw, 78px) 0 clamp(52px, 7vw, 96px);
  border-top: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.015), transparent 40%),
    var(--bg);
}
[data-vertical="apps"] .rt-hero-grid {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
[data-vertical="apps"] .rt-breadcrumb { font-size: 0.8rem; color: var(--muted); margin-bottom: 16px; }
[data-vertical="apps"] .rt-breadcrumb a { color: var(--muted); }
[data-vertical="apps"] .rt-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 0.98; letter-spacing: -0.045em;
  color: var(--ink); margin-top: 14px; text-align: left;
}
/* the "App Store" OS chip in the headline */
[data-vertical="apps"] .os-chip {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-size: 0.78em; padding: 0.12em 0.42em 0.16em; border-radius: 0.32em;
  border: 1px solid rgba(255,122,69,0.5); color: var(--amber-hi);
  background: rgba(255,122,69,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,122,69,0.08), 0 0 30px -10px rgba(255,122,69,0.5);
  vertical-align: baseline;
}
[data-vertical="apps"] .os-chip svg { width: 0.72em; height: 0.72em; }
[data-vertical="apps"] .rt-lead {
  color: var(--ink-soft); font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6; margin: 22px 0 0; max-width: 46ch;
}
[data-vertical="apps"] .rt-cta-row { display: flex; align-items: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
[data-vertical="apps"] .rt-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
[data-vertical="apps"] .rt-chip {
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; background: rgba(27,30,39,0.5);
}
[data-vertical="apps"] .rt-status-line { margin-top: 26px; }

/* Hero headline mask-reveal (staggered clip-path wipes upward) */
[data-vertical="apps"] .rt-title .rt-line { display: block; }
[data-vertical="apps"] .rt-reveal .rt-line {
  clip-path: inset(0 0 100% 0); transform: translateY(0.4em);
  animation: rtWipe .7s cubic-bezier(0.16,1,0.3,1) both;
}
[data-vertical="apps"] .rt-reveal .rt-line:nth-child(1) { animation-delay: .08s; }
[data-vertical="apps"] .rt-reveal .rt-line:nth-child(2) { animation-delay: .18s; }
@keyframes rtWipe { to { clip-path: inset(0 0 -0.15em 0); transform: translateY(0); } }

/* Hero phone stage: single WARM amber bloom (no violet, no cyan, no mesh) */
[data-vertical="apps"] .rt-stage { position: relative; display: flex; justify-content: center; }
[data-vertical="apps"] .rt-stage::before {
  content: ""; position: absolute; z-index: 0;
  width: 118%; height: 78%; left: -9%; top: 14%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,122,69,0.22), rgba(255,122,69,0.05) 45%, transparent 70%);
  filter: blur(38px);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000, transparent 78%);
  pointer-events: none;
}
[data-vertical="apps"] .rt-phone {
  position: relative; z-index: 2; width: min(310px, 82%);
  transform: rotate(6deg);
  animation: phoneRise 1s cubic-bezier(0.22,1.2,0.36,1) both;
  animation-delay: .15s;
}
@keyframes phoneRise {
  0%   { transform: rotate(6deg) translateY(40px); opacity: 0; }
  70%  { transform: rotate(6deg) translateY(-6px); opacity: 1; }
  100% { transform: rotate(6deg) translateY(0); opacity: 1; }
}

/* Hero phone clip feed */
[data-vertical="apps"] .feed { position: relative; flex: 1; background:
  linear-gradient(175deg, #191C25 0%, #0C0E15 60%); overflow: hidden; }
[data-vertical="apps"] .feed-app {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 18px 16px; gap: 10px;
}
[data-vertical="apps"] .feed-appbar { display: flex; align-items: center; gap: 8px; }
[data-vertical="apps"] .feed-appicon {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: linear-gradient(150deg, var(--amber), #E85A2A);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
[data-vertical="apps"] .feed-appname { font-size: 0.72rem; color: var(--ink); font-weight: 600; }
[data-vertical="apps"] .feed-appname small { display: block; color: var(--muted); font-weight: 400; font-size: 0.62rem; }
[data-vertical="apps"] .feed-canvas {
  flex: 1; border-radius: 12px; margin-top: 4px;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #23273300, #0A0C12);
  border: 1px solid var(--line); position: relative; overflow: hidden;
}
/* faux chart line inside the demo app */
[data-vertical="apps"] .feed-line {
  position: absolute; left: 10%; right: 8%; bottom: 26%; height: 44%;
  border-left: 1px solid rgba(138,147,166,0.25); border-bottom: 1px solid rgba(138,147,166,0.25);
}
[data-vertical="apps"] .feed-line::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(60deg, transparent 46%, var(--amber) 46% 50%, transparent 50%);
  opacity: 0.5;
}
[data-vertical="apps"] .feed-metric {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: 1.3rem; font-variant-numeric: tabular-nums;
}
[data-vertical="apps"] .feed-metric span { display: block; font-size: 0.6rem; color: var(--amber); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }

/* TikTok-style right rail */
[data-vertical="apps"] .feed-rail {
  position: absolute; right: 10px; bottom: 78px; display: grid; gap: 16px; z-index: 4;
}
[data-vertical="apps"] .feed-rail .rail-btn { display: grid; justify-items: center; gap: 3px; color: var(--ink); }
[data-vertical="apps"] .feed-rail .rail-btn svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); }
[data-vertical="apps"] .feed-rail .rail-btn b { font-size: 0.58rem; font-weight: 600; font-variant-numeric: tabular-nums; }
[data-vertical="apps"] .feed-rail .rail-btn.is-live svg { color: var(--amber); }

/* Frosted "now playing" bar at phone bottom */
[data-vertical="apps"] .feed-nowplaying {
  position: absolute; left: 10px; right: 10px; bottom: 12px; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 12px;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
[data-vertical="apps"] .feed-nowplaying .np-title { flex: 1; font-size: 0.66rem; color: var(--ink); font-weight: 600; }
[data-vertical="apps"] .feed-nowplaying .np-title small { display: block; color: var(--muted); font-weight: 400; }
[data-vertical="apps"] .feed-nowplaying .np-play {
  width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--amber); color: #120600;
}
[data-vertical="apps"] .feed-nowplaying .np-play svg { width: 12px; height: 12px; }
/* progress playhead */
[data-vertical="apps"] .np-track { position: absolute; left: 12px; right: 12px; top: -5px; height: 2px; background: rgba(138,147,166,0.25); border-radius: 2px; }
[data-vertical="apps"] .np-track::after {
  content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 40%;
  background: var(--amber); border-radius: 2px;
  animation: playhead 6s linear infinite;
}
@keyframes playhead { from { width: 4%; } to { width: 96%; } }

/* =========================================================
   SECTION: The Cost Curve (instrument panel)
   ========================================================= */
[data-vertical="apps"] .instrument {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 36px); box-shadow: var(--shadow-panel); position: relative; overflow: hidden;
}
[data-vertical="apps"] .instrument-head {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-bottom: 20px;
}
[data-vertical="apps"] .instrument-head h3 { font-size: 1.15rem; color: var(--ink); }
[data-vertical="apps"] .instrument-axis { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
[data-vertical="apps"] .curve-wrap { position: relative; }
[data-vertical="apps"] .curve-svg { width: 100%; height: auto; display: block; }
[data-vertical="apps"] .curve-grid line { stroke: var(--line); stroke-width: 1; }
[data-vertical="apps"] .curve-paid { fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-dasharray: 6 5; }
[data-vertical="apps"] .curve-clips { fill: none; stroke: var(--install); stroke-width: 2.6; filter: drop-shadow(0 0 6px rgba(34,178,104,0.4)); }
[data-vertical="apps"] .curve-dot { fill: var(--bg-alt); stroke-width: 2.4; }
[data-vertical="apps"] .curve-dot.paid { stroke: var(--muted); }
[data-vertical="apps"] .curve-dot.clips { stroke: var(--install); }
[data-vertical="apps"] .curve-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.68rem; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
[data-vertical="apps"] .curve-legend { display: flex; gap: 20px; margin-top: 16px; flex-wrap: wrap; }
[data-vertical="apps"] .curve-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--ink-soft); }
[data-vertical="apps"] .curve-legend .swatch { width: 18px; height: 3px; border-radius: 2px; }
[data-vertical="apps"] .curve-legend .swatch.paid { background: var(--muted); }
[data-vertical="apps"] .curve-legend .swatch.clips { background: var(--install); }


[data-vertical="apps"] .instrument-note { margin-top: 16px; font-size: 0.78rem; color: var(--muted); }

/* =========================================================
   SECTION: Live Install Feed (notification lockscreen)
   ========================================================= */
[data-vertical="apps"] .notif-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
[data-vertical="apps"] .notif-aside .eyebrow { margin-bottom: 16px; }
[data-vertical="apps"] .notif-pin {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  padding: 10px 16px; border-radius: 999px; background: rgba(18,20,26,0.7);
  border: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
[data-vertical="apps"] .notif-pin strong { color: var(--ink); font-weight: 700; }
[data-vertical="apps"] .notif-stack { display: grid; gap: 14px; }
[data-vertical="apps"] .notif {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 18px 40px -30px rgba(0,0,0,0.9);
}
[data-vertical="apps"] .notif .notif-icon {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  background: linear-gradient(150deg, var(--amber), #E85A2A);
  display: grid; place-items: center; color: #120600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
[data-vertical="apps"] .notif .notif-icon svg { width: 20px; height: 20px; }
[data-vertical="apps"] .notif .notif-body { flex: 1; }
[data-vertical="apps"] .notif .notif-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
[data-vertical="apps"] .notif .notif-sender { font-weight: 700; font-size: 0.85rem; color: var(--ink); }
[data-vertical="apps"] .notif .notif-time { font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
[data-vertical="apps"] .notif .notif-text { font-size: 0.85rem; color: var(--ink-soft); margin-top: 3px; }
/* z-stack depth: reveal state applied by IntersectionObserver hook (.reveal) already; add scale-in */
[data-vertical="apps"] .notif.reveal { opacity: 0; transform: translateY(22px) scale(0.96); filter: blur(4px); transition: opacity .6s ease, transform .6s cubic-bezier(0.16,1,0.3,1), filter .6s ease; }
[data-vertical="apps"] .notif.reveal.is-visible { opacity: 1; transform: none; filter: none; }
[data-vertical="apps"] .notif:nth-child(1).is-visible { transition-delay: 0s; }
[data-vertical="apps"] .notif:nth-child(2).is-visible { transition-delay: .09s; }
[data-vertical="apps"] .notif:nth-child(3).is-visible { transition-delay: .18s; }
[data-vertical="apps"] .notif:nth-child(4).is-visible { transition-delay: .27s; }
[data-vertical="apps"] .notif:nth-child(5).is-visible { transition-delay: .36s; }

/* =========================================================
   SECTION: The Demo Rail (scroll-snap phones)
   ========================================================= */
[data-vertical="apps"] .demo-rail {
  display: flex; gap: clamp(16px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 24px 4px 30px; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter);
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
[data-vertical="apps"] .demo-rail::-webkit-scrollbar { height: 6px; }
[data-vertical="apps"] .demo-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
[data-vertical="apps"] .demo-phone {
  scroll-snap-align: center; flex: 0 0 auto; width: min(240px, 68vw);
  transform: rotate(-4deg); transform-origin: bottom center;
  transition: transform .3s cubic-bezier(0.16,1,0.3,1), filter .3s ease;
  filter: brightness(0.82) saturate(0.85); cursor: pointer;
}
[data-vertical="apps"] .demo-phone:nth-child(even) { transform: rotate(4deg); }
[data-vertical="apps"] .demo-phone:hover,
[data-vertical="apps"] .demo-phone:focus-visible {
  transform: rotate(0deg) translateY(-8px); filter: brightness(1.05) saturate(1);
}
[data-vertical="apps"] .demo-screen { padding: 16px 14px; gap: 8px; display: flex; flex-direction: column; height: 100%; }
[data-vertical="apps"] .demo-appicon { width: 34px; height: 34px; border-radius: 9px; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.28); }
[data-vertical="apps"] .demo-arch.finance .demo-appicon { background: linear-gradient(150deg, #22B268, #0E7C46); }
[data-vertical="apps"] .demo-arch.ai .demo-appicon { background: linear-gradient(150deg, var(--amber), #E85A2A); }
[data-vertical="apps"] .demo-arch.habit .demo-appicon { background: linear-gradient(150deg, #FFC24B, #E89A1F); }
[data-vertical="apps"] .demo-arch.market .demo-appicon { background: linear-gradient(150deg, #6D8BFF, #3A5AE0); }
[data-vertical="apps"] .demo-arch.dev .demo-appicon { background: linear-gradient(150deg, #B4BCCC, #6A7383); }
[data-vertical="apps"] .demo-body { flex: 1; border-radius: 10px; border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255,255,255,0.02), rgba(0,0,0,0.3)); position: relative; overflow: hidden; padding: 10px; }
[data-vertical="apps"] .demo-body .bar { height: 7px; border-radius: 3px; background: rgba(138,147,166,0.22); margin-bottom: 7px; }
[data-vertical="apps"] .demo-body .bar.w1 { width: 80%; } [data-vertical="apps"] .demo-body .bar.w2 { width: 55%; } [data-vertical="apps"] .demo-body .bar.w3 { width: 68%; }
[data-vertical="apps"] .demo-body .bar.accent { background: var(--amber); opacity: 0.75; width: 40%; }
[data-vertical="apps"] .demo-cap {
  display: flex; align-items: center; gap: 8px; font-size: 0.62rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
[data-vertical="apps"] .demo-cap .cap-play { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); flex: none; box-shadow: 0 0 6px var(--amber); }
[data-vertical="apps"] .demo-cap .cap-line { flex: 1; height: 2px; border-radius: 2px; background: rgba(138,147,166,0.25); position: relative; }
[data-vertical="apps"] .demo-cap .cap-line::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: var(--amber); border-radius: 2px; }
[data-vertical="apps"] .demo-label { text-align: center; margin-top: 12px; }
[data-vertical="apps"] .demo-label .dl-arch { font-size: 0.82rem; font-weight: 600; color: var(--ink); font-family: var(--font-display); }
[data-vertical="apps"] .demo-label .dl-line { font-size: 0.74rem; color: var(--muted); margin-top: 3px; min-height: 2.2em; }
[data-vertical="apps"] .demo-phone .dl-conv { display: none; }
[data-vertical="apps"] .demo-phone:hover .dl-line, [data-vertical="apps"] .demo-phone:focus-visible .dl-line { display: none; }
[data-vertical="apps"] .demo-phone:hover .dl-conv, [data-vertical="apps"] .demo-phone:focus-visible .dl-conv { display: block; color: var(--amber-hi); }

/* =========================================================
   SECTION: Ship Timeline (build log)
   ========================================================= */
[data-vertical="apps"] .ship { position: relative; max-width: 720px; margin: 0 auto; padding-left: 8px; }
[data-vertical="apps"] .ship-spine {
  position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 2px;
}
[data-vertical="apps"] .ship-spine::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%;
  height: var(--ship-fill, 0%);
  background: linear-gradient(180deg, var(--amber), var(--install));
  border-radius: 2px; box-shadow: 0 0 10px rgba(255,122,69,0.5);
  transition: height .2s linear;
}
[data-vertical="apps"] .ship-node { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 18px; padding: 0 0 30px; align-items: start; }
[data-vertical="apps"] .ship-node:last-child { padding-bottom: 0; }
[data-vertical="apps"] .ship-dot {
  width: 32px; height: 32px; border-radius: 50%; z-index: 2;
  background: var(--surface); border: 2px solid var(--line);
  display: grid; place-items: center; color: var(--muted);
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
[data-vertical="apps"] .ship-dot svg { width: 15px; height: 15px; }
[data-vertical="apps"] .ship-node.is-live .ship-dot { border-color: var(--install); color: var(--install); background: rgba(34,178,104,0.1); }
[data-vertical="apps"] .ship-log { padding-top: 3px; }
[data-vertical="apps"] .ship-ts { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; text-transform: uppercase; }
[data-vertical="apps"] .ship-node.is-live .ship-ts { color: var(--install); }
[data-vertical="apps"] .ship-log h3 { font-size: 1.05rem; color: var(--ink); margin: 4px 0 4px; }
[data-vertical="apps"] .ship-log p { font-size: 0.9rem; color: var(--ink-soft); }
[data-vertical="apps"] .ship-badge { display: inline-block; margin-left: 8px; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--install); border: 1px solid rgba(34,178,104,0.4); border-radius: 4px; padding: 1px 6px; vertical-align: middle; }

/* =========================================================
   SECTION: Spec Sheet CTA (App Store product footer)
   ========================================================= */
[data-vertical="apps"] .spec {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 56px); align-items: center;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(30px, 4vw, 52px); box-shadow: var(--shadow-panel); position: relative; overflow: hidden;
}
[data-vertical="apps"] .spec-table { display: grid; }
[data-vertical="apps"] .spec-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
[data-vertical="apps"] .spec-row:last-child { border-bottom: 0; }
[data-vertical="apps"] .spec-key { font-size: 0.82rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
[data-vertical="apps"] .spec-val { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--ink); }
[data-vertical="apps"] .spec-val .num { color: var(--amber-hi); }
[data-vertical="apps"] .spec-cta { text-align: left; }
[data-vertical="apps"] .spec-cta .os-appicon {
  width: 62px; height: 62px; border-radius: 15px; margin-bottom: 18px;
  background: linear-gradient(150deg, var(--amber), #E85A2A);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 12px 30px -14px rgba(255,122,69,0.7);
  display: grid; place-items: center; color: #120600;
}
[data-vertical="apps"] .spec-cta .os-appicon svg { width: 30px; height: 30px; }
[data-vertical="apps"] .spec-cta h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); color: var(--ink); }
[data-vertical="apps"] .spec-cta p { color: var(--ink-soft); margin: 12px 0 22px; font-size: 0.98rem; }
[data-vertical="apps"] .spec-cta .get-pill { font-size: 1.02rem; padding: 15px 32px; }
[data-vertical="apps"] .spec-cta .sub { display: block; margin-top: 14px; font-size: 0.76rem; color: var(--muted); }

/* =============== reused shared components, re-skinned =============== */
[data-vertical="apps"] .card { background: var(--surface); border-color: var(--line); }
[data-vertical="apps"] .card:hover { border-color: rgba(255,122,69,0.4); transform: translateY(-2px); }
[data-vertical="apps"] .card h3 { color: var(--ink); }
[data-vertical="apps"] .card-icon { background: rgba(255,122,69,0.1); color: var(--amber); }
[data-vertical="apps"] .card:hover .card-icon { background: var(--amber); color: #120600; }
[data-vertical="apps"] .compare { background: var(--bg-alt); border-color: var(--line); }
[data-vertical="apps"] .compare-row { border-color: var(--line); }
[data-vertical="apps"] .compare-row.head > div { background: var(--surface); color: var(--muted); }
[data-vertical="apps"] .compare-row .ours { background: rgba(255,122,69,0.07); color: var(--ink); }
[data-vertical="apps"] .compare-row:not(.head):hover { background: rgba(255,255,255,0.02); }
[data-vertical="apps"] .compare-row:not(.head):hover .ours { background: rgba(255,122,69,0.12); }
[data-vertical="apps"] .check-mark { background: rgba(34,178,104,0.14); color: var(--install); }
[data-vertical="apps"] .check-mark--no { background: rgba(255,122,69,0.12); color: var(--amber-hi); }
[data-vertical="apps"] .check-card h3 { color: var(--ink); }
[data-vertical="apps"] .faq-item { background: var(--surface); border-color: var(--line); }
[data-vertical="apps"] .faq-item[open] { border-color: rgba(255,122,69,0.5); }
[data-vertical="apps"] .faq-item summary { color: var(--ink); }
[data-vertical="apps"] .faq-item summary::after { color: var(--amber); }
[data-vertical="apps"] .faq-item .answer { color: var(--ink-soft); }
[data-vertical="apps"] .section--alt { background: var(--bg-alt); }
[data-vertical="apps"] .fit-head-good { color: var(--install); }
[data-vertical="apps"] .fit-head-bad { color: var(--muted); }

/* section header helper */
[data-vertical="apps"] .os-sechead { max-width: 680px; }
[data-vertical="apps"] .os-sechead h2 { color: var(--ink); margin-top: 14px; }
[data-vertical="apps"] .os-sechead .lead { margin-top: 14px; }

/* =========================================================
   responsive
   ========================================================= */
@media (max-width: 960px) {
  [data-vertical="apps"] .rt-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  [data-vertical="apps"] .rt-stage { order: -1; }
  [data-vertical="apps"] .rt-phone { width: min(280px, 62%); }
  [data-vertical="apps"] .notif-grid { grid-template-columns: 1fr; gap: 36px; }
  [data-vertical="apps"] .spec { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  [data-vertical="apps"] .rt-title { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  [data-vertical="apps"] .scrub-readout { grid-template-columns: 1fr; }
  [data-vertical="apps"] .curve-legend { gap: 12px; }
}

/* =========================================================
   reduced motion: pulses stop, reveals instant, playhead frozen
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  [data-vertical="apps"] .live-dot { animation: none !important; }
  [data-vertical="apps"] .rt-phone { animation: none !important; transform: rotate(6deg) !important; opacity: 1 !important; }
  [data-vertical="apps"] .rt-reveal .rt-line { animation: none !important; clip-path: none !important; transform: none !important; }
  [data-vertical="apps"] .np-track::after { animation: none !important; width: 40% !important; }
  [data-vertical="apps"] .notif.reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  [data-vertical="apps"] .demo-phone { transition: none !important; }
  [data-vertical="apps"] .ship-spine::after { transition: none !important; }
}


/* =========================================================
   FINAL-SCAN FIXES (shared-shell chrome pinned to this world)
   Counters the homepage blue "cohesion" layer, theme-dependent
   logo/wordmark/curtain, and hover overlays from css/styles.css
   so the page renders identically under any saved data-theme.
   ========================================================= */
[data-vertical="apps"] img.logo { content: url("../assets/logo-dark.svg"); }
[data-vertical="apps"] .footer-mark { color: rgba(255,255,255,0.06); }
[data-vertical="apps"] { scrollbar-color: rgba(255,255,255,0.25) transparent; }
[data-vertical="apps"] .intro-curtain { background: #0A0B0F; }
[data-vertical="apps"] .intro-curtain .ic-mark { color: var(--ink); }
[data-vertical="apps"] .intro-curtain .ic-tag { color: rgba(255,255,255,0.45); }

html[data-vertical="apps"] section:not(.hero) .eyebrow {
  background: rgba(255,122,69,0.08);
  border-color: rgba(255,122,69,0.25);
}
html[data-vertical="apps"] section:not(.hero) .eyebrow:has(+ h1)::before,
html[data-vertical="apps"] section:not(.hero) .eyebrow:has(+ h2)::before {
  box-shadow: 0 0 8px rgba(255,122,69,0.55);
}

[data-vertical="apps"] .card::before { background: linear-gradient(90deg, #FF7A45 0%, #FFA36B 100%) !important; }
[data-vertical="apps"] .card:hover {
  border-color: rgba(255,122,69,0.45) !important;
  box-shadow: 0 18px 40px -20px rgba(255,122,69,0.32) !important;
}
[data-vertical="apps"] .card:hover .card-icon {
  background: linear-gradient(135deg, #FF7A45, #FFA36B) !important;
  color: #04140B !important;
  box-shadow: 0 6px 16px -6px rgba(255,122,69,0.55);
}
[data-vertical="apps"] .card p { color: var(--ink-soft); }
[data-vertical="apps"] .step:hover { border-color: rgba(255,122,69,0.4); box-shadow: 0 14px 32px -18px rgba(255,122,69,0.35); }
[data-vertical="apps"] .faq-item[open] { border-color: rgba(255,122,69,0.4) !important; background: rgba(255,122,69,0.04); }
[data-vertical="apps"] .section--alt::before { background-image: radial-gradient(rgba(255,122,69,0.10) 1px, transparent 1px); }
[data-vertical="apps"] .footer-social a:hover { background: rgba(255,122,69,0.1); border-color: rgba(255,122,69,0.45); }
[data-vertical="apps"] .glow-card::after {
  background: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,122,69,0.5), rgba(255,122,69,0.1) 45%, transparent 70%);
}
[data-vertical="apps"] .compare-row:not(.head):hover { background: rgba(255,255,255,0.03); }
[data-vertical="apps"] .compare-row:not(.head):hover .ours { background: rgba(255,122,69,0.14); }
[data-vertical="apps"] .btn--ghost::before { background: transparent; }
[data-vertical="apps"] .btn--ghost:hover { color: var(--ink); }
[data-vertical="apps"] .btn--primary::before { content: none; }
[data-vertical="apps"] .btn--primary:hover { color: #04140B; }
[data-vertical="apps"] .check-mark--no { color: #e57373; }
body.has-curtain .rt-reveal .rt-line, body.has-curtain .device-tilt { animation-play-state: paused; }

/* demo-rail captions: hover-only reveal excludes touch + SR users */
@media (max-width: 900px), (hover: none) {
  [data-vertical="apps"] .demo-phone .dl-conv { display: block; color: var(--amber-hi); }
}