/* SnapMind site polish layer. Loaded after style.css and theme.css on the
   marketing pages. Same brand (ink ground, lime action, Plus Jakarta); this
   layer only adds depth and focus so product imagery reads against the black:
     .stage        lighter charcoal panel for phone captures, one phone raised
     .focus-crop   a large crop of the useful part of a dense screenshot, with
                   a small full view that marks where the crop came from
     .band         a subtly lighter section to break up continuous black
     .fig          the Teams trio / Training lifter as visible brand details
     [data-play]   one purposeful animation per page (js/motion.js); the
                   static final state is the default markup */

:root {
  --stage-bg: #161616;
  --stage-edge: rgba(255,255,255,.07);
  --stage-glow: rgba(196,216,36,.10);
  --band-bg: #111111;
  --band-edge: rgba(255,255,255,.05);
  --capture-filter: brightness(1.14) contrast(1.05);
}
:root[data-theme="light"] {
  --stage-bg: #E9E9E3;
  --stage-edge: rgba(0,0,0,.07);
  --stage-glow: rgba(196,216,36,.22);
  --band-bg: #ECECE7;
  --band-edge: rgba(0,0,0,.05);
  --capture-filter: none;
}

/* ── Stage: a charcoal panel that lifts phone captures off the page ───── */
.stage {
  position: relative; isolation: isolate;
  background: var(--stage-bg);
  border: 1px solid var(--stage-edge);
  border-radius: 28px;
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.2rem, 3vw, 2.4rem) clamp(1.2rem, 2.4vw, 1.8rem);
  overflow: hidden;
}
.stage::before {
  content: ""; position: absolute; inset: -30% -10% auto; height: 80%; z-index: -1;
  background: radial-gradient(ellipse 60% 60% at 50% 40%, var(--stage-glow), transparent 70%);
  pointer-events: none;
}
.stage .frame-phone img, .stage .frame-desktop img, .focus-crop img { filter: var(--capture-filter); }
.stage.stagger > :nth-child(2) { transform: translateY(-2.25rem); }
.stage.stagger { padding-top: calc(clamp(1.4rem, 3vw, 2.4rem) + 2.25rem); }
@media (max-width: 760px) {
  .stage.stagger > :nth-child(2) { transform: translateY(-1.25rem); }
  .stage.stagger { padding-top: calc(1.4rem + 1.25rem); }
}

/* ── Focus crop: the useful part of a dense screen, big enough to read ─── */
.focus-crop { position: relative; margin: 0; }
.focus-crop-zoom {
  position: relative; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--stage-edge);
  background: var(--stage-bg);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.focus-crop-zoom .bar { height: 30px; border-bottom: 1px solid var(--stage-edge); display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.focus-crop-zoom .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong, #333); display: block; }
.focus-crop-view { position: relative; overflow: hidden; aspect-ratio: var(--crop-ar); }
/* --img-w: full image width as a % of the crop width; --off-x/--off-y: crop
   offset as a % of the crop width (margins resolve against width). */
.focus-crop-view img { display: block; width: var(--img-w); max-width: none; height: auto; margin-left: calc(-1 * var(--off-x)); margin-top: calc(-1 * var(--off-y)); }
.focus-crop-mini {
  position: absolute; right: -1rem; bottom: -1.5rem; width: clamp(150px, 26%, 230px);
  border-radius: 10px; overflow: hidden; border: 1px solid var(--stage-edge);
  background: var(--black); box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
.focus-crop-mini img { display: block; width: 100%; height: auto; opacity: .85; }
.focus-crop-mini b {
  position: absolute; left: var(--box-x); top: var(--box-y); width: var(--box-w); height: var(--box-h);
  border: 2px solid var(--c-action, #C4D824); border-radius: 4px; box-shadow: 0 0 0 999px rgba(0,0,0,.35);
}
.focus-crop figcaption { margin-top: 1.1rem; }
@media (max-width: 760px) { .focus-crop-mini { right: .5rem; bottom: -1rem; width: 38%; } }

/* ── Band: a section on slightly lighter charcoal ─────────────────────── */
.band { background: var(--band-bg); border-top: 1px solid var(--band-edge); border-bottom: 1px solid var(--band-edge); }

/* ── Brand figures (Teams trio, Training lifter) ──────────────────────── */
.fig { display: inline-block; background: currentColor; -webkit-mask: var(--fig) center / contain no-repeat; mask: var(--fig) center / contain no-repeat; }
.fig-teams { --fig: url(/images/brand/figure-teams.svg); aspect-ratio: 100 / 78; }
.fig-training { --fig: url(/images/brand/figure-training.svg); aspect-ratio: 100 / 92; }
/* Figures are supporting language: label sized, never the subject of a
   section. Cards carry them at 40px, and no figure anywhere renders taller
   than 48px (the caps scale with each figure's aspect ratio). */
.fig-teams { max-width: calc(48px * 100 / 78); max-height: 48px; }
.fig-training { max-width: calc(48px * 100 / 92); max-height: 48px; }
.card-fig { position: absolute; right: 1.4rem; top: 1.2rem; height: 40px; color: var(--c-action, #C4D824); opacity: .9; pointer-events: none; }
.card-fig.fig-teams { width: calc(40px * 100 / 78); }
.card-fig.fig-training { width: calc(40px * 100 / 92); }

/* ── Motion: play once when it enters view (js/motion.js) ─────────────── */
@media (prefers-reduced-motion: reduce) { [data-play] * { transition: none !important; animation: none !important; } }

/* ── Homepage ─────────────────────────────────────────────────────────── */
.home-hero-apps.stage { max-width: 540px; gap: 1.25rem; }
.home-hero-apps.stage figcaption { margin-top: .9rem; }
.home-console .focus-crop { margin-bottom: 1.5rem; }
.home-training.band { padding-bottom: var(--section-y-tight); }
.home-training.band .home-week { background: var(--black); }
.home-apps { padding-top: var(--section-y-tight); }
.app-card { position: relative; }
.app-card-id { padding-right: 5.5rem; }
.home-console { grid-template-columns: minmax(0,64fr) minmax(0,36fr); max-width: 1240px; }
.home-week-days { position: relative; }
@media (max-width: 860px) { .home-console { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .home-console { display: block; margin-top: 2rem; }
  .home-console-zoom { display: none; }
}
.focus-crop-mini { display: none; }
/* One column for section heads: kicker, heading, lead, link read top to bottom. */
.home-teams-head { display: block; }
.home-teams-head > div + div { margin-top: 1rem; max-width: 46ch; }
.home-teams-head .link-go { display: inline-block; margin-top: .9rem; }
.home-console { align-items: start; margin-top: 2.25rem; }