/* ── In-app mode ──────────────────────────────────────────────────────────────
   Paired with /ASSETS/app-mode.js. Strips the website off a page when it is
   opened from inside the installed app, and puts a slim "back to the app" bar
   in place of the marketing nav.

   Only ever applies under html.in-app, so the normal web page is untouched. */

/* Each page marks its own site chrome with data-app-hide. Explicit on purpose:
   a blanket "hide every top-level <header>" also ate the pricing page's hero,
   because <header> means different things on different pages. */
html.in-app [data-app-hide] {
  display: none !important;
}

/* Anything that advertises the app, inside the app. */
html.in-app .nav-openapp,
html.in-app .install-cta,
html.in-app #inst-row,
html.in-app #inst-btn {
  display: none !important;
}

/* The bar that replaces them. */
#app-backbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 10px;
  height: calc(52px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 12px 0;
  background: rgba(6, 8, 13, .92);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-family: 'Montserrat', system-ui, sans-serif;
}
#app-backbtn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 44px;
  padding: 0 10px 0 4px;
  border: 0;
  background: none;
  color: #E6CB92;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
}
#app-backbtn svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#app-backbtn:active { opacity: .6; }
#app-backttl {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #C9A96E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-backsp { width: 64px; flex-shrink: 0; }   /* balances the button so the title centres */

/* Push the page below the bar. Pages that pin their own top chrome set
   --app-bar-offset themselves. */
html.in-app body {
  padding-top: calc(52px + env(safe-area-inset-top)) !important;
}
html.in-app { background: #06080e; }

/* ── Simpler and calmer inside the app ───────────────────────────────────────
   A landing page opens with a full-height hero because it has to sell. In the
   app the person is already here to do something, so the hero shrinks and the
   thing they came for moves up the screen. */
html.in-app #hero,
html.in-app .adv-hero { min-height: 0 !important; padding-top: 0 !important; }
html.in-app .cs-hero { padding-top: 16px !important; }   /* was 100px of runway */
html.in-app .cs-hero-head { margin-bottom: 14px !important; }
html.in-app .cs-h1 { font-size: clamp(30px, 9vw, 44px) !important; }
html.in-app .cs-byline { font-size: 11px !important; }
html.in-app #hero-h1 { font-size: clamp(28px, 8.5vw, 42px) !important; }
html.in-app .section-label { margin-bottom: 6px !important; }

/* Ambient background layers are atmosphere for a marketing page; in the app
   they're just texture behind content, so they go. (Setting a fixed opacity
   here was a mistake — the noise layer sits at .05, so .35 made it SEVEN times
   stronger and the whole page turned grainy.) */
html.in-app #hex-mask,
html.in-app #hex-layer,
html.in-app #hex-glow,
html.in-app #noise-layer,
html.in-app #vignette-layer { display: none !important; }

/* Tighten the vertical rhythm of whatever marketing sections remain. */
html.in-app section { padding-top: 26px !important; padding-bottom: 26px !important; }