/* Scoped styles for the "What's Inside" 3D explorer — every rule is namespaced
   under #inside-journey so it can't leak into / collide with the site-wide
   styles in ../style.css (the source this was adapted from used bare tag
   selectors like body/button/p/main, which would otherwise clash). */

/* The cube hero fills exactly one viewport (nav + cube); the "Why Lumo"
   section and the footer sit below it and the page scrolls normally. */
:root { --inside-footer-h: 72px; }
/* The site-wide `section { padding: 100px 0; }` rule (style.css) would add
   200px of extra height to the hero, breaking the viewport math below. */
#inside { padding: 0; }

/* Compact single-row footer for this page only (coming-soon.html already
   uses the same footer-bottom-only pattern). */
body .footer { padding: 16px 0; min-height: var(--inside-footer-h); box-sizing: border-box; display: flex; align-items: center; }
body .footer .footer-bottom { border-top: none; padding-top: 0; width: 100%; }

#inside-journey { margin-top: calc(var(--nav-h) + var(--ann-h, 0px)); height: calc(100vh - var(--nav-h) - var(--ann-h, 0px)); height: calc(100dvh - var(--nav-h) - var(--ann-h, 0px)); min-height: 560px; }
#inside-journey .stage {
  height: 100%; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 60% 42%, #93764a 0%, #4a3a22 38%, #241c12 75%, #1c150e 100%);
}
#inside-journey main { position: absolute; inset: 200px 0 40px; }
#inside-journey .story {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 36%; padding-left: 5vw; z-index: 2; pointer-events: none;
}
#inside-journey h2 {
  font: 500 clamp(34px, 4.4vw, 64px)/1.06 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em; margin: 0 0 20px; color: #f4f4f6;
}
#inside-journey .story p {
  font-size: 16px; line-height: 1.75; color: #a5a5b0; max-width: 310px; min-height: 84px; margin: 0;
}
#inside-journey .story-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 22px; pointer-events: auto; }
#inside-journey .story-cta { pointer-events: auto; }

#inside-journey .scene-wrap { position: absolute; inset: 0; margin: 0; }
/* pan-y: a vertical swipe on the cube scrolls the page; horizontal drags rotate it. */
#inside-journey canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; outline: none; }
#inside-journey canvas:active { cursor: grabbing; }

#inside-journey .zoom-controls {
  position: absolute; left: 20px; bottom: 20px; z-index: 4;
  display: flex; flex-direction: column; gap: 8px; pointer-events: auto;
}
#inside-journey .zoom-controls button {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 10, 13, 0.55);
  color: #f4f4f6; font-size: 18px; line-height: 1; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
#inside-journey .zoom-controls button:hover { border-color: #fff; background: rgba(10, 10, 13, 0.8); }
#inside-journey .zoom-controls button:active { transform: scale(.93); }

/* Specs / Features — plain links to their own pages, styled like the
   Order button, stacked on the right edge. */
#inside-journey .side-links {
  position: absolute; right: 5vw; top: 50%; transform: translateY(-50%);
  z-index: 4; pointer-events: auto; display: flex; flex-direction: column; gap: 12px;
}

#inside-journey .loading {
  position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 14px;
  color: #a5a5b0; font-size: 14px; font-family: 'Inter', sans-serif; text-align: center; padding: 0 24px;
}
#inside-journey .loading span { width: 18px; height: 18px; border: 1px solid #435967; border-top-color: var(--accent, #ffb020); border-radius: 50%; animation: inside-spin 1s linear infinite; flex: none; }
@keyframes inside-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #inside-journey .loading span { animation: none; } }

@media (max-width: 800px) {
  /* Desktop stacks .story and .scene-wrap as two independently-positioned
     absolute boxes because on a wide screen the story column is narrow and
     short enough that they never collide. On a narrow phone that doesn't
     work: the headline+description+buttons block needs to stack ABOVE the
     cube, but the buttons specifically need to end up BELOW the cube (near
     the bottom, so the cube gets the most room and sits visually centered)
     — a single .story box can't be in both places at once. So on mobile,
     .story's own box is dropped (display:contents) and its children
     (headline, description, buttons) become flex items of `main` directly,
     alongside .scene-wrap and .side-links, each given an explicit `order`.
     That's natural flex-flow stacking, not guessed fixed-pixel offsets, so
     nothing can overlap regardless of how much the text wraps. */
  /* The top nav bar is redundant on mobile — its logo isn't needed and its
     Order button is duplicated right below in the story panel — so it's
     hidden here, and the section's nav-clearance margin goes with it,
     shifting everything up to use the freed space. */
  body .nav { display: none; }
  #inside-journey { margin-top: var(--ann-h, 0px); height: calc(100vh - var(--ann-h, 0px)); height: calc(100dvh - var(--ann-h, 0px)); min-height: 680px; }

  #inside-journey .stage { min-height: 680px; }
  #inside-journey main { inset: 0; display: flex; flex-direction: column; }
  #inside-journey .story { display: contents; }
  #inside-journey h2 { order: 1; padding: 18px 6vw 0; font-size: 30px; letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.08; }
  #inside-journey .story p { order: 2; padding: 0 6vw; font-size: 14px; line-height: 1.5; margin: 0; max-width: 100%; min-height: 0; }
  #inside-journey .scene-wrap { order: 4; position: relative; flex: 1 1 auto; min-height: 0; inset: auto; margin: 0; }
  #inside-journey .story-actions { order: 5; flex: 0 0 auto; width: 100%; box-sizing: border-box; align-items: center; margin-top: 0; padding: 14px 6vw 10px; gap: 10px; }
  #inside-journey .zoom-controls { left: 12px; bottom: 12px; gap: 6px; }
  #inside-journey .zoom-controls button { width: 34px; height: 34px; font-size: 16px; }
  #inside-journey .side-links {
    order: 6; position: static; flex: 0 0 auto; transform: none;
    justify-content: center; flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 0 6vw 14px;
  }
  #inside-journey .side-link { padding: 0 14px; min-height: 36px; font-size: 12px; }
  /* Six social icons don't fit next to the copyright line at phone widths —
     stack them and give the footer the extra height that takes. */
  :root { --inside-footer-h: 132px; }
  body .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  body .social-row { gap: 8px; }
  body .social-row a { width: 32px; height: 32px; }
}
@media (max-height: 650px) and (min-width: 801px) {
  #inside-journey main { inset: 170px 0 24px; }
  #inside-journey h2 { font-size: 40px; }
}

/* ── Feature buttons (above the cube) ─────────────────────────────────── */
#inside-journey .feature-bar {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; flex-wrap: nowrap; gap: 8px; max-width: calc(100% - 32px);
  overflow-x: auto; scrollbar-width: none; padding: 4px 2px;
}
#inside-journey .feature-bar::-webkit-scrollbar { display: none; }
.feature-btn {
  flex: none; min-height: 38px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(10, 10, 13, 0.5);
  color: #d9d9df; font-size: 13.5px; font-weight: 600; font-family: 'Inter', sans-serif;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.feature-btn:hover { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.feature-btn:active { transform: scale(.96); }
.feature-btn:focus-visible { outline: 2px solid var(--accent, #ffb020); outline-offset: 2px; }
.feature-btn.active { background: var(--accent, #ffb020); border-color: var(--accent, #ffb020); color: #0a0a0d; }

/* ── 30-day money-back guarantee badge ────────────────────────────────── */
.guarantee-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px;
  border-radius: 999px; border: 1px solid rgba(255, 176, 32, 0.45);
  background: rgba(255, 176, 32, 0.1); color: #f4f4f6; font-size: 13px; line-height: 1.25;
  transition: border-color .18s ease, background-color .18s ease;
}
.guarantee-badge:hover { border-color: var(--accent, #ffb020); background: rgba(255, 176, 32, 0.18); }
.guarantee-badge svg { width: 22px; height: 22px; flex: none; stroke: var(--accent, #ffb020); }
.guarantee-badge strong { display: block; font-weight: 700; }
.guarantee-badge small { display: block; font-size: 11.5px; color: #c9c9d1; text-decoration: underline; text-underline-offset: 2px; }

/* ── Why Lumo ─────────────────────────────────────────────────────────── */
#inside-journey .hero-pitch {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: min(1120px, 92%); text-align: center; pointer-events: none;
}
#inside-journey .hero-pitch h1 {
  font-size: clamp(24px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 10px; color: #f4f4f6;
}
#inside-journey .hero-pitch h1 em { font-style: normal; color: var(--accent, #ffb020); }
#inside-journey .hero-pitch p { font-size: clamp(14px, 1.2vw, 16px); line-height: 1.55; color: #c3c3cc; max-width: 700px; margin: 0 auto; }
/* Keep the story text clear of the feature buttons on shorter screens. */
@media (min-width: 801px) { #inside-journey .story { top: 60%; } }
@media (min-width: 801px) and (max-height: 820px) {
  #inside-journey .hero-pitch { top: 14px; }
  #inside-journey .hero-pitch h1 { font-size: clamp(22px, 2.6vw, 34px); margin-bottom: 6px; }
  #inside-journey .hero-pitch p { font-size: 14px; }
  #inside-journey main { inset: 150px 0 16px; }
  #inside-journey .story { top: 58%; }
  #inside-journey h2 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 12px; }
  #inside-journey .story p { min-height: 0; }
  #inside-journey .story-actions { margin-top: 14px; gap: 10px; }
}
@media (max-width: 800px) {
  #inside-journey { min-height: 860px; }
  #inside-journey .stage { display: flex; flex-direction: column; min-height: 860px; }
  #inside-journey .hero-pitch { position: static; transform: none; width: auto; padding: 18px 6vw 0; }
  #inside-journey .hero-pitch h1 { font-size: 26px; }
  #inside-journey .hero-pitch p { font-size: 13.5px; }
  #inside-journey main { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
  /* Declared after the desktop rule above so it wins the cascade. */
  #inside-journey .feature-bar { order: 3; position: static; transform: none; max-width: none; padding: 12px 6vw 0; }
}

/* App downloads: badges on the hero and a shareable #download dialog. */
.store-badges { display: flex; gap: 8px; flex-wrap: wrap; }
#inside-journey .store-badges { flex-basis: 100%; margin-top: 4px; }
.store-badge { display: inline-flex; align-items: center; gap: 8px; width: 144px; min-height: 48px; padding: 7px 10px; border: 1px solid #777; border-radius: 9px; background: #080808; color: #fff; text-decoration: none; box-sizing: border-box; text-align: left; line-height: 1.1; }
.store-badge svg { width: 25px; height: 28px; flex-shrink: 0; }
.store-badge small { display: block; font-size: 9px; letter-spacing: .04em; }
.store-badge strong { display: block; margin-top: 3px; font-size: 16px; font-weight: 600; white-space: nowrap; }
a.store-badge:hover { border-color: #ffb020; }
a.store-badge:focus-visible, .download-close:focus-visible { outline: 3px solid #ffb020; outline-offset: 4px; }
.store-badge-soon { color: #bbb; border-color: #555; }
.download-dialog { position: fixed; inset: 0; margin: auto; width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 40px 28px 28px; border: 1px solid #555; border-radius: 24px; background: #151515; color: #fff; box-sizing: border-box; overflow-y: auto; }
.download-dialog::backdrop { background: rgba(0,0,0,.75); }
.download-dialog h2 { margin: 0 0 12px; font-size: 28px; line-height: 1.2; }
.download-dialog p { margin: 0 0 24px; color: #bbb; line-height: 1.6; }
.download-dialog .download-note { font-size: 13px; margin: 20px 0 0; }
.download-close { position: absolute; top: 8px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 28px; cursor: pointer; }
@media (max-width: 800px) {
  #inside-journey .store-badges { justify-content: center; }
  #inside-journey .side-links { flex-wrap: wrap; }
  .store-badge { width: 136px; }
  .store-badge strong { font-size: 15px; }
}

/* Purchase controls follow the right-hand navigation links. */
#inside-journey .side-links { align-items: center; }
#inside-journey .purchase-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 240px; max-width: 100%; margin-top: 6px; }
#inside-journey .purchase-actions .guarantee-badge { width: 100%; box-sizing: border-box; font-size: 12px; }
@media (min-width: 801px) {
  #inside-journey .side-links { width: 240px; }
  #inside-journey .side-link { width: 158px; justify-content: center; }
}
@media (max-width: 800px) {
  #inside-journey .purchase-actions { flex-basis: 100%; width: auto; }
  #inside-journey .purchase-actions .guarantee-badge { width: auto; max-width: 260px; }
}

/* Keep navigation, the rotating canvas, and downloads in separate flow rows. */
#inside { padding: var(--ann-h, 0px) 0 0; }
#inside-journey { height: auto; min-height: 0; margin: 0; }
#inside-journey .stage { height: auto; min-height: 0; overflow: visible; display: block; padding: 28px 4vw 40px; }
#inside-journey .hero-pitch { position: static; transform: none; width: min(1120px, 100%); padding: 0; margin: 0 auto 28px; }
#inside-journey .hero-brand { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 20px; font-size: 15px; pointer-events: auto; }
#inside-journey .cube-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(220px, .8fr); grid-template-areas: "features features features" "story cube links" ". downloads ."; column-gap: 24px; row-gap: 28px; align-items: center; max-width: 1600px; margin: auto; }
#inside-journey .feature-bar { grid-area: features; position: static; transform: none; max-width: 100%; width: 100%; justify-self: center; box-sizing: border-box; padding: 4px 0 24px; border-bottom: 1px solid rgba(255,255,255,.14); justify-content: center; }
#inside-journey .story { grid-area: story; display: block; position: static; transform: none; width: auto; padding: 0; }
#inside-journey h2 { font-size: clamp(30px, 3.7vw, 58px); padding: 0; }
#inside-journey .story p { min-height: 0; padding: 0; }
#inside-journey .scene-wrap { grid-area: cube; position: relative; inset: auto; width: 100%; height: clamp(340px, 48vw, 560px); min-height: 0; margin: 0; overflow: hidden; }
#inside-journey .side-links { grid-area: links; position: static; transform: none; width: 100%; padding: 0; flex-direction: column; flex-wrap: nowrap; }
#inside-journey .purchase-actions { flex-basis: auto; width: min(240px, 100%); }
#inside-journey .purchase-actions .guarantee-badge { width: 100%; }
#inside-journey .app-downloads { grid-area: downloads; display: flex; justify-content: center; padding: 8px 0 24px; }
#inside-journey .app-downloads .store-badges { justify-content: center; margin: 0; }
body .footer { height: auto; min-height: var(--inside-footer-h); padding: 28px 0; border-top: 1px solid rgba(255,255,255,.12); }
@media (max-width: 1100px) {
  #inside-journey .feature-bar { justify-content: flex-start; }
}
@media (max-width: 1000px) {
  #inside-journey .cube-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "features" "story" "cube" "downloads" "links"; row-gap: 24px; }
  #inside-journey .story { text-align: center; }
  #inside-journey h2 { margin-bottom: 12px; font-size: 34px; }
  #inside-journey .story p { max-width: 520px; margin: 0 auto; }
  #inside-journey .scene-wrap { width: min(100%, 600px); height: clamp(300px, 80vw, 480px); justify-self: center; }
  #inside-journey .side-links { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; }
  #inside-journey .side-link { width: auto; }
  #inside-journey .purchase-actions { flex-basis: 100%; width: auto; }
  #inside-journey .purchase-actions .guarantee-badge { width: auto; max-width: 260px; }
  #inside-journey .app-downloads { padding-bottom: 20px; }
  #inside-journey .hero-pitch h1 { font-size: clamp(25px, 4vw, 34px); }
}