/* m-demo.css — phone/tablet parity with the desktop design (book-a-demo.html).
   Loaded after styles.css/pages.css. Desktop (>=1301px) must stay unchanged:
   every rule below sits inside a max-width query or the 1240-1300 laptop band. */

/* ── laptop band (1240-1300): the 1440 composition in a narrower column ── */
/* The column is min(1240px, 100% - 48px), so d = 1240px - column (0-48px, more with a
   classic scrollbar). Every formula below returns the 1440 value at d = 0. Text widths
   stay put, so the whitespace gives way first and every line breaks as at 1440. */
@media (min-width:1240px) and (max-width:1300px){
  /* intro + form: the intro keeps its 1440 wraps (longest line 441px), the form takes most
     of the loss, the middle gap keeps its 76px minus a quarter of d. */
  .demo-intro{width:calc(449px - (1240px - 100%) * .1)}
  .demo-form-wrap{width:calc(715px - (1240px - 100%) * .65)}
  /* steps: heading (text 379px) and gap shrink so the list keeps a 640px+ text measure. */
  .demo-steps{gap:calc(93px - (1240px - 100%) * .4)}
  .ds-head{width:calc(400px - (1240px - 100%) * .25)}
  /* who should attend / what to bring: the 494/560 columns keep their width (no new wraps);
     the side padding and the gap to the navy divider share the loss as at 1440 (60 : 82 : 71px).
     Padding % is of the parent, so d = 1288px - 100% here; space-between takes the middle. */
  .gb-demo{gap:0;padding-left:calc(60px - max(0px, 1288px - 100%) * .281);padding-right:calc(60px - max(0px, 1288px - 100%) * .335)}
  .gb-demo .ga-l,.gb-demo .ga-r{flex-shrink:0}
}

/* ── tablet + phone (stacked layouts from pages.css @1239) ── */
@media (max-width:1239px){
  /* "Who should attend / What to bring": the columns have to stack, so the
     desktop's vertical navy divider (border-left on .ga-r) comes back as a
     horizontal rule between the two groups. 32px = the stack gap, so the line
     sits centred between them. */
  .gb-demo .ga-r{border-top:1px solid var(--navy);padding-top:32px}
  /* both stacked groups share one width (<=640px), so their headings, check
     icons and the divider start on the same left edge (align-items:center
     would otherwise centre each group at its own width). */
  .gb-demo .ga-l,.gb-demo .ga-r{width:100%}

  /* steps, stacked under the heading: no side padding on the rows so the
     01-05 badges line up with the eyebrow/heading edge. */
  .ds-row{padding:10px 0 16px}
}

/* ── phone ── */
@media (max-width:760px){
  /* intro + form head: restore the desktop ~2:1 heading-to-lead ratio
     (45/22 and 36/20). The headings already drop to 28/24px. */
  .demo-intro .lead{font-size:18px;line-height:26px}
  .df-head p{font-size:16px;line-height:24px;margin-top:12px}

  /* paired rows stay side by side as on desktop (First/Last name,
     Company size/Sector). */
  .df-row{flex-direction:row;gap:12px}
  /* the invisible spacer in the Preferred Time row would otherwise stack
     under the select and leave a blank hole; drop it so Preferred Time spans
     the row (a half-width select would clip every time option). */
  .df-row>.field[aria-hidden]{display:none}
  /* slimmer side padding so the half-width controls show more text; inputs
     stay at 16px so iOS does not zoom. */
  .demo-form .field input,.demo-form .field textarea{padding-left:12px;padding-right:12px}
  .demo-form .field select{padding-left:12px;padding-right:30px;background-position:right 10px center;text-overflow:ellipsis}

  /* "Systems in scope": two checkbox columns (3 + 2) as on desktop. On
     desktop column 2 starts 16px (2.24% of the 715px form) right of the
     Sector field; gap = row gap 12px + 2 x 2.24% keeps that offset (~8px). */
  .df-scope .cols{flex-direction:row;gap:calc(12px + 4.48%)}
  /* 40px tap target per checkbox without changing the 24px rows / 16px gaps */
  .df-cb{padding:8px 0;margin:-8px 0}

  /* steps: number badge stays to the LEFT of the title + text as on desktop
     (pages.css stacks it above the title at this width). */
  .ds-row{flex-direction:row;gap:14px}
  /* two even lines like desktop's "See Vaultdef at / work, step by step."
     instead of a lone "step." orphan */
  .ds-head .h2-48{text-wrap:balance}

  /* gradbox headings: the phone .h45 size in pages.css loses to
     .gradbox .h45{45px}; same formula as the intro .h2-45 so they stay equal, as on desktop. */
  .gb-demo .h45{font-size:clamp(28px,4.5vw,45px)}
}

/* narrow phones: column 2 of the checkboxes needs the room for
   "Data warehouse"; align it with the Sector field instead. */
@media (max-width:374px){
  .df-scope .cols{gap:12px}
}