/* Product showcase for for-business.html.

   These are captures of the running application. Not mockups: the screens,
   the labels and the arithmetic are what the software produced. The salon is
   a demo salon with invented clients, because a real day's takings belong to
   the salon that earned them.

   THE THREE RULES, all measured off a reference rather than eyeballed.

   1. ONE GROUND. The reference page runs a single background colour across
      every section, with the card one shade lighter on top. It never bands
      white → dark → white; that banding is what makes a page read as
      stitched together rather than designed. So this whole run of sections
      shares `.dark-run`, and only the cards lift off it.

   2. ONE GUTTER. Every content block — heading, hero media, each card —
      shares the same left edge and the same width. Nothing gets its own
      inset. `.wrap` in styles.css already owns horizontal padding, so
      nothing here sets it again.

   3. NOTHING IS EVER CROPPED. Every shot is a WHOLE BROWSER WINDOW at 1440
      CSS px wide, app chrome included, captured straight from the running
      app at devicePixelRatio 2 — never a rectangle cut out of a page
      afterwards. The first set was cropped to hand-picked regions and it
      showed: three of the four were ragged fragments with no top nav, one
      of them sliced through the Expected-in-drawer tile, the end-of-day
      panel and the amount column, and each carried a different amount of
      dead space. A window is a thing; a region is an offcut.

      Height is chosen per screen so the window ends on a natural edge — the
      whole day for the calendar, the last tender button for the POS, the
      movements table for the drawer, the KPI panel for insights — rather
      than on a fixed number that pads three of them with emptiness. The
      widths match, so the four still read as one product; the heights
      differ, which is why the cards align to the top.

   4. THE STAGE CARRIES NO PHOTOGRAPH. Each window used to sit on a dimmed
      shopfront photo, a different one per card. Four scenes meant four
      colour casts in a run that is meant to read as one surface, and the
      photos could not carry it anyway: phone pictures in portrait and
      panorama, upscaled 1.9-3.4x to cover a wide stage, some with
      identifiable faces, one still wearing the iOS Photos chrome, one
      showing another business's signage. A flat stage is both the honest
      option and the smooth one. Don't reintroduce them.

   Two numbers carry the vertical rhythm: 96px between bands, 24px between
   sibling cards. There is no third value. */

:root {
  --stage:      #131011;
  --stage-2:    #1c1719;
  --stage-line: rgba(255,255,255,.10);
  --stage-text: #f4f1f0;
  --stage-soft: rgba(244,241,240,.60);
}

/* ── The continuous dark ground ─────────────────────────────────────────── */

.dark-run {
  background: var(--stage);
  color: var(--stage-text);
}
.dark-run .t-sec,
.dark-run h2,
.dark-run h3 { color: var(--stage-text); }
.dark-run p  { color: var(--stage-soft); }
.dark-run .eyebrow { color: var(--gold); }

/* Bands within the run. First and last carry the outer breathing room; the
   ones between are flush, because the ground does not change between them. */
/* padding-top/bottom LONGHAND, never the `padding` shorthand: these sections
   are also `.wrap`, and the shorthand silently resets the horizontal gutter
   to zero at equal specificity. styles.css opens with that warning because it
   has been a production bug there before; it was one here too. */
.band     { padding-top: 96px; padding-bottom: 96px; }
.band-top { padding-top: 64px; padding-bottom: 96px; }
.band-mid { padding-bottom: 96px; }

/* ── The showcase card ──────────────────────────────────────────────────── */

.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  gap: 40px;
  /* start, not centre: the four screenshots have different aspect ratios, so
     the cards are different heights (634-800px). Centred, the copy began at a
     different height in every card — 202, 286, 226, 205px down. Aligned to the
     top it begins at the same place in all four, and the difference in card
     height stops being something the eye has to track. */
  align-items: start;
  background: var(--stage-2);
  border: 1px solid var(--stage-line);
  border-radius: var(--r-card);
  padding: 26px;
  margin-bottom: 24px;
}
.showcase:last-child { margin-bottom: 0; }
/* No padding of its own: the card's 26px is the one inset, so the copy, the
   screenshot and the card's own edges all line up on a single number. */
.showcase-copy { padding: 0; }

/* Heading and body are the same size. Hierarchy is carried by colour, the
   way the reference does it — not by a weight or size jump. */
.showcase-copy h3 {
  font-size: 21px; line-height: 1.34; font-weight: 700;
  letter-spacing: -.012em; margin: 0 0 12px; color: var(--stage-text);
}
.showcase-copy p { margin: 0; font-size: 21px; line-height: 1.34; color: var(--stage-soft); }

@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; gap: 22px; padding: 18px; }
  .showcase-copy { padding: 0; }
  .showcase-copy h3, .showcase-copy p { font-size: 18px; }
}

/* ── The screenshot itself ──────────────────────────────────────────────── */

/* No stage. The screenshot sits straight on whatever surface holds it — the
   card inside the run, the ground in the hero — so the only spacing around it
   is that surface's own padding, which is one number on every side.

   It used to sit in a darker inset box with `padding: 5.4% 7.4%`. PERCENTAGE
   PADDING RESOLVES AGAINST WIDTH ON ALL FOUR SIDES, so those two numbers were
   never the same distance: 62px at the sides against 45px top and bottom in a
   card, and 77/58 in the wider hero. Four different gaps around four edges,
   and a different set again in the hero. That is what read as uneven.

   The hairline in the shadow is what separates a light screenshot from a dark
   surface now. The two blurs beneath it are near-invisible on this ground and
   only do anything where the shot runs pale to its edge. */
.frame { display: flex; }

.frame > img.app,
.frame > video.app {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow:
    0 28px 70px rgba(0,0,0,.42),
    0 14px 32px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.10);
}

/* Screen recordings of the same windows, captured the same way: the running
   app at 1440 CSS px, cropped to nothing but the page. They autoplay muted and
   loop, so they are decoration in the accessibility sense — the claim beside
   them is carried by the text, and each one carries a poster frame for
   anywhere autoplay never starts.

   `poster` is the first frame of the clip itself, not a different screenshot:
   a poster that does not match frame one makes the video look like it jumps
   when it starts. site.js pauses these when the visitor asks for reduced
   motion. */
.frame > video.app { background: #f4f2f0; }

.hero-stage { margin-top: 40px; }

/* The LuxAI section sits inside the run. Its shared `.panel-dark` is the same
   #131011 as the ground, so left alone it ended 8px below the run's own edge
   as a hairline white crack between two identical blacks. Inside the run it
   takes the card surface instead, like every other card here. */
.dark-run .panel-dark { background: var(--stage-2); border-color: var(--stage-line); }