/* ============================================================
 * BOOK A DEMO — page styling (design system v2)
 *
 * The page is two sections now: the shared .statement--hero pale card (styled in
 * modular.css, not here) whose button links straight out to Microsoft Bookings,
 * and .dm-more — two tiles, one blue. That is the whole page.
 *
 * The old header described a full-photo hero, a register card with a
 * self-updating countdown, and a what-happens steps card. All three are gone;
 * each has a ⚠ note below saying where it went.
 * ============================================================ */

/* ---------- HERO ----------
 * 6 Aug 2026: this page's hero is the SHARED .statement--hero pale card, styled
 * in styles/modular.css alongside About us and the Launch Deal (Rebecca: "lets
 * use the same hero style for the book a demo and the launch deal page").
 *
 * Everything that used to be here — .dm-hero__frame (a navy card at
 * --hero-frame-w), .dm-hero__copy, the ghost calendar .dm-wm, the .dm-live pill,
 * .dm-when, .dm-sub and .dm-next — was written for a dark surface and had no
 * markup left to match once the hero changed, so it is gone rather than left to
 * rot. The equivalents on the pale card are .statement__eyebrow / __when / __sub
 * / __cta / __note, all in modular.css.
 *
 * ⚠ .dm-hero__frame is still listed in the body:has(...) nav rule in home-v2.css.
 * It is inert now — no element carries the class — and the nav correctly falls
 * back to its default width, the same as About us. Left in place because that
 * rule is shared with four other pages and editing it to remove one dead name
 * risks all of them.
 *
 * .dm-hero survives as a hook only: the section keeps it so the register anchor
 * and the data-demo-* attributes stay findable, but it paints nothing. */

/* ---------- the practical detail, below the hero: two EQUAL tiles ----------
 * Equal columns on purpose. The old layout stretched a short pale card to
 * match the tall navy one, which left a 277px gap above "Email us". */
.dm-more { background: #fff; padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); }

/* ⚠ THE BOOKING-EMBED STYLES (.dm-book, .dm-book__frame, __head,
   __frame-embed, __alt) WERE HERE AND ARE GONE — 6 Aug 2026, same day they were
   written. Rebecca: "just take the people to the bookings page when they say
   pick a time." There is no embed to style any more; the hero button links
   straight out to Microsoft Bookings. See the note in book-a-demo.html for why
   the iframe was a poor fit in the first place. */

/* ---- the tiles line up with the hero card, edge for edge ----
 * 6 Aug 2026: "can we give the 2 tiles on the book demo page to share the same
 * margins as the hero."
 *
 * They didn't, and the gap grew with the screen. The tiles sit in a normal
 * .container — capped at 1280 and centred, plus a 32px gutter — so at 1440 they
 * started at 112px while the hero card's edge was at 64px. At 1512 the gap was
 * 84px. The two are different systems: --page-gutter positions TEXT, --band-inset
 * positions CARD EDGES, and the tiles are cards.
 *
 * Uncapping the container and padding it by --band-inset instead makes the tile
 * row exactly the hero card's box at every width — 16px on a phone, 32 at 1280,
 * 64 from 1408 up — because it is now driven by the same token. */
.dm-more > .container {
  max-width: none;
  padding-inline: var(--band-inset, 24px);
}
/* ---------- THE BENTO  (6 Aug 2026) ----------
 * "create me a more interesting bento layout."
 *
 * ⛔ REPLACED .dm-more__grid (two equal text tiles) AND .dm-strip (three equal
 * media frames). Two rows of same-sized boxes is a grid, not a bento. One grid
 * now, four columns, mixed spans:
 *
 *     row 1 │  A  Before you join  │  C shot │        │
 *           ├──────────┬───────────┼─────────┤   D    │
 *     row 2 │ E phone  │  B  Need a different │ photo │
 *
 * The full-height photo on the right is the whole idea — one tall anchor with
 * everything else arranged around it. Text tiles are wide because copy needs
 * width; product frames are small because a screenshot only has to be
 * recognised, not read.
 *
 * ⚠ Rows are minmax(…, auto): a longer paragraph GROWS its row rather than
 * clipping. Never give these rows a fixed height — the two tiles carry real
 * copy and one of them has an extra link.
 * ⚠ The old grid's `align-items: stretch` is inherited behaviour here (grid
 * items stretch by default), which is what keeps A and B level with their
 * neighbours — the thing Rebecca asked for on 3 Aug ("can you make the before
 * you join tile the same size as the reqauest demo tile"). */
.dm-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(clamp(170px, 15vw, 215px), auto));
  gap: clamp(14px, 1.5vw, 22px);
}
/* ⚠ Placement is explicit so the MARKUP can stay in reading order — the two text
   tiles first, then the media. Never reorder the HTML to match the picture. */
/* ⚠ RE-STAGED 6 Aug 2026. Rebecca: "i dont like this either on the book a demo
   page - i think the boxes with text need to be on top of each other".
   The two TEXT tiles ("Before you join." and "Need a different time?") used to sit
   diagonally opposite each other — a on the top-left, b on the bottom-middle —
   with the phone and the screenshot between them, so the reading order zig-zagged
   across the grid. They are stacked in one column now and the imagery sits beside
   them, which means you read the words top-to-bottom and the pictures support
   rather than interrupt:
     [ a  Before you join   ][ c screenshot ][ d ]
     [ b  Need a time?      ][ e phone      ][ photo, both rows ]
   ⚠ Keep a and b in the SAME columns as each other. That is the whole request. */
/* ⚠ TWO CELLS, not five, since 6 Aug 2026. The register screenshot (__c) and the
   OnSite phone (__e) were removed at Rebecca's request; the photo takes the entire
   right half. .dm-bento__c and .dm-bento__e no longer exist in the markup — their
   rules below are kept only so a re-add does not have to rebuild the grid. */
.dm-bento__a { grid-column: 1 / 3; grid-row: 1; }
.dm-bento__b { grid-column: 1 / 3; grid-row: 2; }
.dm-bento__d { grid-column: 3 / 5; grid-row: 1 / 3; }

/* the media frames need the rounding and clipping the old .dm-strip gave them */
.dm-bento__d {
  border-radius: clamp(16px, 1.8vw, 26px);
  overflow: hidden;
  /* ⚠ load-bearing: grid items default to min-height:auto and refuse to shrink
     below an image's intrinsic size, so each frame bursts its cell without it */
  min-height: 0;
  min-width: 0;
  /* ⚠ 6 Aug 2026 — min-height: 0 ALONE WAS NOT ENOUGH here, which is worth knowing.
     It lets the image shrink, but the rows are `auto`, so the image's own intrinsic
     height still SIZES them: a 700x1150 portrait at 645px wide asked for 1060px and
     dragged both text rows up with it, leaving ~300px of empty navy under "Before
     you join." Once the photo took the whole right half that got much worse.
     aspect-ratio gives it a shape shorter than the text column, so the TEXT sizes
     the grid and the photo stretches to match and crops — the right way round.
     object-position keeps her face in frame now the cell is landscape. */
  height: 100%;
  aspect-ratio: 4 / 3;
}
img.dm-bento__d { object-fit: cover; object-position: center 34%; }

@media (max-width: 900px) {
  /* two columns: each text tile takes a full row, the three media share the last
     two rows with the photo staying tall on the right */
  .dm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-bento__a { grid-column: 1 / 3; grid-row: 1; }
  .dm-bento__b { grid-column: 1 / 3; grid-row: 2; }
  .dm-bento__c { grid-column: 1 / 2; grid-row: 3; }
  .dm-bento__e { grid-column: 1 / 2; grid-row: 4; }
  .dm-bento__d { grid-column: 2 / 3; grid-row: 3 / 5; }
}
@media (max-width: 560px) {
  /* one column. The photo stops spanning, or it becomes a tall portrait that
     pushes everything else off the screen. */
  .dm-bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .dm-bento > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  /* ⚠ HEIGHT, not min-height. min-height was the first attempt and it is only a
     floor: the portrait photo kept its own 700×1150 ratio and rendered 588px
     tall at 390px wide, with the phone card at 436 — two screens of media before
     a visitor reaches anything else. A definite height lets object-fit crop them
     back to a landscape band, which is all they need to be on a phone. */
  /* ⚠ `img.dm-bento__d`, not `.dm-bento__d`. The photo is an <img> and also
     carries .dm-strip__photo, whose `height: 100%` sits LATER in this file at
     the same specificity — so a bare class here lost the tie and the photo alone
     stayed 588px tall while the two tiles obeyed. The tag selector takes it. */
  .dm-bento__c, .dm-bento__e,
  img.dm-bento__d { height: clamp(180px, 52vw, 240px); }
}
.dm-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--ge-bg-light, #F3F7FA);
  /* stroke -> soft shadow, 4 Aug brand review (one tile treatment sitewide) */
  border-radius: var(--tile-radius);
  padding: clamp(26px, 2.8vw, 38px);
}
.dm-tile__ico {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid #E6ECF4;
  color: var(--ge-blue, #1B367E);
  margin-bottom: 18px;
}
.dm-tile__ico svg { width: 20px; height: 20px; }
/* h2 not h3: the page H1 is the hero above, so h2 is the correct next level.
   Sized small on purpose — .hv2 h2's 32-54px scale would swamp these tiles. */
.dm-tile h2 { margin: 0 0 8px; font-size: clamp(18px, 1.6vw, 21px); color: var(--ge-navy, #0F1438); }
.dm-tile p { margin: 0; font-size: 15px; line-height: 1.6; color: #4A5876; }
.dm-tile__go {
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700;
  color: var(--ge-blue, #1B367E); text-decoration: none;
}
.dm-tile__go:hover { color: var(--ge-navy, #0F1438); }
.dm-tile__go svg { width: 15px; height: 15px; transition: transform 200ms var(--hv2-ease); }
.dm-tile__go:hover svg { transform: translateX(4px); }

/* ---- the blue one ----
 * 6 Aug 2026: "lets add a bit of colour to the book a demo page - make the
 * before you join tile a blue." The page had gone entirely pale once the hero
 * became the .statement--hero card, so this is the one saturated surface on it.
 *
 * ⚠ Only .dm-tile--dark is repainted, never .dm-tile: the second tile has to
 * stay pale or the pair reads as one blue band rather than two tiles. The grid
 * is already align-items: stretch, so both still finish level.
 *
 * ⚠⚠ THIS BLOCK MUST STAY BELOW `.dm-tile h2` AND `.dm-tile p`.
 * `.dm-tile--dark h2` is (0,1,1) and so is `.dm-tile h2` — a tie, decided by
 * order alone. Written above them (as it first was) the heading and body copy
 * stayed dark navy on a blue tile and only the background changed.
 *
 * The icon chip keeps its white background and blue glyph — the same object as
 * on the pale tile, which is why it needs no colour override, only the border
 * dropped (a #E6ECF4 hairline is invisible on blue and just muddies the edge). */
/* ⚠ NAVY, AND RENAMED FROM --blue — Rebecca, 13 Aug 2026: "can we make the 'before
   you join tile on the book demo page a different colour to the hero".
   It was #1B367E, the EXACT colour the hero became on 11 Aug when both conversion
   heroes went blue — so the page had two identical blue blocks and the tile stopped
   reading as its own thing. Navy #0F1438 is the site's other sanctioned dark surface
   (CLAUDE.md), and it is what the footer already uses further down the page.
   ⚠ The class was `dm-tile--blue`. Left as --blue it would have been a navy tile
   called blue, which is exactly the sort of thing that gets "corrected" back later.
   Renamed to --dark in both files; it appears in markup once (book-a-demo.html).
   ⚠ White on #0F1438 is ~17:1, so 0.92 white is comfortable — the 10.4:1 note below
   was measured against the old blue and no longer applies, but 0.92 is kept because
   full white at 15px reads glary on any dark surface. */
.dm-tile--dark { background: var(--ge-navy, #0F1438); }
.dm-tile--dark h2 { color: #fff; }
.dm-tile--dark p { color: rgba(255, 255, 255, 0.92); }
.dm-tile--dark .dm-tile__ico { border-color: transparent; }

/* ---------- the media frames inside the bento ----------
 * ⛔ These were `.dm-strip`, a three-across film strip. The WRAPPER rule is gone
 * — the bento above places them now — but the frames themselves are unchanged
 * and still carry these classes, so this block stays.
 * ⚠ `--strip-h` went with the wrapper. Nothing depends on it any more: the phone
 * is sized by width (see below), which is what fixed it in the first place. */
.dm-strip__photo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the colour cards. Padding on three sides with the screen running off the
   bottom — the tile crops it, so it reads as a screen rising out of the card
   rather than a picture pasted onto one. */
.dm-strip__tile { padding: clamp(10px, 1.2vw, 18px) clamp(10px, 1.2vw, 18px) 0; }
.dm-strip__tile--one    { background: #1B88C8; }                      /* One — deep sky */
.dm-strip__tile--onsite { background: var(--ge-violet-4, #614DBA); }  /* OnSite — violet */
.dm-strip__shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;   /* a UI's nav and headings live top-left */
  display: block;
  border-radius: 8px 8px 0 0;
}

/* ---- the phone, stood in the violet card ----
 * A portrait screenshot in a landscape frame needs the opposite treatment to a
 * desktop one: it stands rather than fills. Top-aligned and taller than its
 * cell, so the tile's overflow crops the BOTTOM and it reads as a phone rising
 * out of the card. Bottom-align it instead and you crop the status bar and the
 * heading, which is the half worth showing.
 * ⚠ The bezel is 3px, not the site's usual clamp(7px,.7vw,10px). At ~120px wide
 * the standard bezel is a third of the screen and the thing stops looking like
 * a phone. */
.dm-strip__tile--onsite { display: grid; justify-items: center; align-items: start; }
.dm-strip__phone {
  /* ⚠ SIZED BY WIDTH, NEVER BY A PERCENTAGE HEIGHT.
     `height: 118%` looked right and rendered 1006px tall: the img was being
     stretched to the tile's 392px width first, aspect-ratio turned that into an
     852px height, and the 118% then compounded off THAT — a percentage height
     resolving against a box whose height the image itself was helping to decide.
     A percentage WIDTH has no such loop: the tile's width comes from the grid
     column and is definite, so aspect-ratio can derive the height from it.

     58% is "most of the card" (Rebecca: "zoom in more do the phone fills most of
     the space") — it was 126px of a 427px frame before, and is ~227 now. The
     height that falls out of it is roughly twice the strip, so the tile crops
     everything below the first row of group tiles. That is the point: cropping
     harder is what makes the UI bigger. */
  width: 58%;
  height: auto;
  justify-self: center;
  aspect-ratio: 430 / 935;
  object-fit: cover;
  object-position: top center;
  display: block;
  border: 3px solid #10131F;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 14px 30px rgba(15, 20, 56, 0.28);
}

/* ⚠ DEAD since 6 Aug 2026 — both the crest strip and the whole
   "What happens in the 30 minutes" steps band were removed from this page at
   Rebecca's request, so neither selector matches anything now. Kept as one
   short block rather than deleted, because they are the exact measurements to
   restore if either ever comes back. Nothing else on the site loads this file. */
.dm-more .crests { margin-top: clamp(48px, 6vw, 80px); }
.dm-steps { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(72px, 9vw, 130px); }
.dm-steps .stepscard { margin-bottom: 0; }

/* ⚠ the old `@media (max-width:900px) { .dm-more__grid { grid-template-columns: 1fr } }`
   was here and is gone with the wrapper. The bento carries its own 900px and
   560px breakpoints, further up. Nothing else on this page needs one. */


/* the photo now fills half the bento instead of a quarter — a 700x1150 portrait
   crop in a landscape-ish cell, so hold the subject rather than the frame centre */
img.dm-bento__d { object-fit: cover; object-position: center 32%; }