/* SigBridge staging: the booking page for the free on-site assessment (2026-09-28). Every "Book a free on-site
   assessment" button on the v11 home page (/opus-v11/) lands here. The message page (/message/, 2026-10-02) shares
   this stylesheet: its form, card, other-ways column and footer are the booking page's.
   This stylesheet is the page's own, so the page renders by itself: the brand tokens, the header and the footer are
   copied from /assets/css/site.css, and the fonts are v11's (/assets/fonts/); the logo files come from the brand
   kit's fixed addresses.
   Order: the header; the headline and its line with "What you'll get" and "Your part" side by side; the booker (date,
   then time, then details, one step at a time) with the call and message options beside it, quieter; the footer.
   Colour: only the brand book's eight (tokens.json palette): Web Blue #000547, SigBridge Blue #2B60FF, Electric Blue
   #30C5FF, Gigabyte #F4F4F4 and its tint #E5E5E5, Pure White #FFFFFF, SigBridge Blue Tint #3568FF (hover) and Web Blue
   Tint #1A1E59; translucent values are navy, blue or white overlays at low alpha, the book's own tint method. The
   book has no red, so a message that needs attention is navy text on a light blue panel with a SigBridge Blue bar.
   Type: PP Mori Medium for headlines only (the header nav and footer headings stay as v8 sets them); Manrope for all
   other text. PP Mori draws its hyphen almost as wide as its en dash, so a hyphen inside a PP Mori headline is drawn
   from Manrope (.hy). Motion: small state changes only, and none under prefers-reduced-motion. */

@font-face { font-family: "PP Mori"; src: url("/assets/fonts/ppmori-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --navy: #000547;
  --navy-tint: #1A1E59;
  --blue: #2B60FF;
  --blue-tint: #3568FF;
  --electric: #30C5FF;
  --light: #F4F4F4;
  --light-tint: #E5E5E5;
  --white: #FFFFFF;
  --rule-dark: rgba(255, 255, 255, 0.16);
  --edge: rgba(0, 5, 71, 0.45);

  --display: "PP Mori", "Manrope", system-ui, sans-serif;
  --text: "Manrope", system-ui, sans-serif;
  --measure: 1296px;
  --gutter: 24px;
  --ease: cubic-bezier(0.65, 0, 0.25, 1);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--text);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul, address { margin: 0; }
ol, ul { padding: 0; list-style: none; }
address { font-style: normal; }
p, li, label { text-wrap: pretty; }
h1, h2, h3 { font-family: var(--display); color: var(--navy); font-weight: 500; text-wrap: balance; }
a { color: var(--blue); }
strong { font-weight: 600; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.site-footer :focus-visible { outline-color: var(--white); }
.hyw, .when-date, .when-time { white-space: nowrap; }
.hy { font-family: var(--text); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg use { fill: none; }
.ico { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.wrap { max-width: calc(var(--measure) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 20; padding: 8px 16px; background: var(--white); color: var(--navy); font-weight: 600; }
.skip:focus { left: 8px; }
[id] { scroll-margin-top: 16px; }

/* Buttons (v8's, with the resets a <button> needs) */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 8px;
  background: var(--blue); color: var(--white);
  font-family: var(--text); font-size: 16px; line-height: 24px; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn:hover { background: var(--blue-tint); }
.btn-small { min-height: 40px; padding: 0 16px; font-size: 14px; line-height: 20px; }
.label-short, .label-tiny { display: none; }

/* The brand book's rings (SigBridge Circles), drawn once as a symbol in currentColor */
.rings { position: absolute; pointer-events: none; overflow: visible; color: var(--blue); stroke-width: 1.5px; }

/* ---------- Header (v8) ---------- */
.site-header { position: relative; z-index: 7; background: var(--white); border-bottom: 1px solid var(--light-tint); }
.header-row { display: flex; align-items: center; height: 80px; }
.lockup { display: block; flex: none; }
.lockup img { width: 200px; height: 52px; }
.header-nav { margin-left: 64px; }
.header-nav ul { display: flex; gap: 28px; }
.header-nav a { color: var(--navy); font-family: var(--display); font-size: 15px; line-height: 24px; text-decoration: none; white-space: nowrap; }
.header-nav a:hover { color: var(--blue); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 24px; padding-left: 24px; }
.header-phone { color: var(--navy); font-weight: 600; text-decoration: none; white-space: nowrap; }

/* ---------- 1. The headline, its line, what you'll get and your part ---------- */
.intro { position: relative; overflow: hidden; background: var(--white); }
.rings-intro { width: 1040px; height: 1040px; right: -560px; top: -600px; opacity: 0.26; }
.intro-inner { position: relative; padding-top: 40px; padding-bottom: 40px; }
.intro h1 { max-width: 19em; font-size: 52px; line-height: 60px; letter-spacing: -0.02em; }
.lead { margin-top: 14px; max-width: 38em; font-size: 20px; line-height: 30px; }

.expect { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; row-gap: 28px; margin-top: 32px; }
.expect-col { padding-top: 22px; border-top: 1px solid var(--light-tint); }
.expect-h { display: flex; align-items: center; gap: 12px; font-size: 22px; line-height: 28px; letter-spacing: -0.005em; }
.expect-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: var(--white); }
.expect-icon .ico { width: 19px; height: 19px; }
.ticks { display: grid; gap: 10px; margin-top: 14px; }
.ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: start; font-size: 17px; line-height: 26px; }
.tick { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: rgba(43, 96, 255, 0.1); color: var(--blue); }
.tick .ico { width: 14px; height: 14px; stroke-width: 2.6; }

/* ---------- 2. The booker, with the other two ways beside it ---------- */
.book { position: relative; background: var(--light); border-top: 1px solid var(--light-tint); padding-top: 32px; padding-bottom: 96px; }
.book-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; align-items: start; }
.booker {
  grid-column: 1 / span 7; position: relative; padding: 24px 40px 40px; border-radius: 16px; background: var(--white);
  box-shadow: 0 0 0 1px var(--light-tint), 0 24px 48px -36px rgba(0, 5, 71, 0.5);
}
/* Without scripting nothing here can book, so the booker steps aside and the call and message options remain */
html:not(.js) .booker { display: none; }
html:not(.js) .other-ways { grid-column: 1 / -1; }

/* The three steps: the current one in SigBridge Blue, finished ones outlined, the next ones quiet */
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--light-tint); }
.step { display: flex; align-items: center; gap: 10px; color: var(--navy-tint); font-size: 15px; line-height: 20px; font-weight: 600; }
.step + .step::before { content: ""; flex: none; width: 36px; height: 2px; margin-right: 2px; border-radius: 1px; background: var(--light-tint); }
.step-n {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--white); box-shadow: inset 0 0 0 1.5px var(--light-tint); color: var(--navy-tint);
  font-size: 14px; line-height: 1; font-weight: 600;
}
.step.is-current { color: var(--navy); }
.step.is-current .step-n { background: var(--blue); box-shadow: none; color: var(--white); }
.step.is-done .step-n { background: rgba(43, 96, 255, 0.08); box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); }
.step.is-done + .step::before { background: var(--blue); }
.booker.is-booked .steps { display: none; }

.panel-h { font-size: 28px; line-height: 36px; letter-spacing: -0.01em; }
.panel-h:focus { outline: none; }
.panel-note { display: block; margin-top: 2px; color: var(--navy-tint); font-family: var(--text); font-size: 16px; line-height: 24px; letter-spacing: 0; }

/* The chosen day (and time), carried from step to step. The line may shrink below the width of the day on one line
   (min-width 0), so on a narrow phone the day wraps inside the card instead of running past it. */
.chosen { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-weight: 600; }
.chosen .ico { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--blue); }
.chosen > span, .done-when > span { min-width: 0; }

/* The month: weekdays bookable (a light blue tile), weekends and past days quiet, the chosen day solid blue */
/* The heading and the month share one row (two rows on phones) */
.date-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.cal { margin-top: 20px; }
.cal-head { display: flex; align-items: center; gap: 16px; }
.cal-month { font-size: 18px; line-height: 28px; font-weight: 600; }
.cal-navs { display: flex; gap: 8px; }
.cal-nav {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--edge); color: var(--navy); cursor: pointer;
}
.cal-nav .ico { width: 20px; height: 20px; }
.cal-nav:hover:not(:disabled) { background: var(--light); }
.cal-nav:disabled { box-shadow: inset 0 0 0 1px var(--light-tint); color: rgba(0, 5, 71, 0.28); cursor: default; }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow span { color: var(--navy-tint); font-size: 13px; line-height: 20px; font-weight: 600; text-align: center; }
.cal-grid { margin-top: 8px; }
.cal-day {
  min-width: 0; height: 52px; padding: 0; border: 0; border-radius: 10px;
  background: rgba(43, 96, 255, 0.08); color: var(--navy);
  font-size: 16px; line-height: 1; font-weight: 600; cursor: pointer;
}
.cal-day:hover:not(:disabled) { background: rgba(43, 96, 255, 0.16); }
.cal-day:disabled { background: transparent; color: rgba(0, 5, 71, 0.3); font-weight: 500; cursor: default; }
.cal-day[aria-current="date"] { box-shadow: inset 0 0 0 1.5px var(--blue); }
.cal-day[aria-current="date"]:disabled { box-shadow: inset 0 0 0 1.5px var(--light-tint); }
.cal-day[aria-pressed="true"], .cal-day[aria-pressed="true"]:hover { background: var(--blue); color: var(--white); box-shadow: none; }

/* The times for the chosen day */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin-top: 20px; }
.slots:empty { display: none; }
.slot {
  min-height: 48px; padding: 0 8px; border: 0; border-radius: 10px;
  background: var(--white); box-shadow: inset 0 0 0 1px rgba(43, 96, 255, 0.5); color: var(--navy);
  font-size: 16px; line-height: 24px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.slot:hover { background: rgba(43, 96, 255, 0.08); box-shadow: inset 0 0 0 1.5px var(--blue); }
.slot[aria-pressed="true"] { background: var(--blue); box-shadow: none; color: var(--white); }
.slots-msg { margin-top: 20px; color: var(--navy-tint); }

.panel-actions { margin-top: 28px; }
.btn-quiet { background: var(--white); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--edge); }
.btn-quiet:hover { background: var(--light); }

/* A message that needs attention: navy on a light blue panel, a SigBridge Blue bar, the alert mark */
.alert:not(:empty) {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; margin-top: 20px; padding: 14px 16px 16px;
  border-radius: 12px; background: rgba(43, 96, 255, 0.07); box-shadow: inset 4px 0 0 var(--blue);
  color: var(--navy); font-size: 15px; line-height: 22px;
}
.alert .ico { width: 22px; height: 22px; margin-top: 0; color: var(--blue); }
.alert p + p { margin-top: 6px; }
.alert a { font-weight: 600; }

/* The details */
/* One column; an empty message takes no room (it keeps its place in the page for when it is filled) */
.form { max-width: 600px; margin-top: 24px; }
.form > * + * { margin-top: 20px; }
.form > .alert:empty { margin-top: 0; }
.field label { display: block; color: var(--navy); font-size: 15px; line-height: 22px; font-weight: 600; }
.help { margin-top: 2px; color: var(--navy-tint); font-size: 14px; line-height: 20px; }
.field input, .field textarea {
  display: block; width: 100%; margin-top: 8px; padding: 11px 14px;
  border: 1px solid var(--edge); border-radius: 10px; background: var(--white); color: var(--navy);
  font-size: 16px; line-height: 24px; font-weight: 500;
}
.field textarea { min-height: 76px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(43, 96, 255, 0.28); }
.field [aria-invalid="true"] { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: rgba(43, 96, 255, 0.04); }
/* The honeypot: off screen, out of the tab order, hidden from assistive technology */
.hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reassure { color: var(--navy-tint); font-size: 14px; line-height: 21px; }
.reassure a { font-weight: 600; white-space: nowrap; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.btn:disabled, .btn:disabled:hover { background: var(--blue); opacity: 0.6; cursor: progress; }
.btn-quiet:disabled, .btn-quiet:disabled:hover { background: var(--white); opacity: 0.5; cursor: default; }

/* Booked: the heading and its line replace the booker */
.done-mark { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 50%; background: var(--blue); color: var(--white); }
.done-mark .ico { width: 26px; height: 26px; stroke-width: 2.6; }
.done-body { max-width: 36em; margin-top: 12px; font-size: 18px; line-height: 28px; }
.done-body a { font-weight: 600; white-space: nowrap; }
.done-when { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding: 14px 16px; border-radius: 12px; background: var(--light); font-weight: 600; }
.done-when .ico { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--blue); }

/* The other two ways, quieter than the booker */
.other-ways { grid-column: 9 / span 4; display: grid; gap: 28px; padding-top: 28px; }
.way { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; }
.way-icon { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1px var(--light-tint); color: var(--blue); }
.way-icon .ico { width: 20px; height: 20px; }
.way-h { align-self: center; min-height: 40px; display: flex; align-items: center; font-size: 19px; line-height: 26px; }
.way p { color: var(--navy-tint); font-size: 15px; line-height: 23px; }
.way a { font-weight: 600; }
.way-tel { white-space: nowrap; }

/* ---------- Footer (v8): Web Blue; white 18.9:1, Gigabyte Tint 15:1; 44 px link rows ---------- */
.site-footer { background: var(--navy); color: var(--white); padding-top: 72px; padding-bottom: 32px; }
.footer-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 48px; align-items: start; }
.footer-brand { grid-column: 1 / span 4; }
.footer-line { margin-top: 64px; color: var(--white); font-family: var(--display); font-size: 20px; line-height: 28px; }
.footer-about { margin-top: 12px; max-width: 340px; color: var(--light-tint); font-size: 15px; line-height: 22px; }
.footer-line + .footer-about { margin-top: 20px; }
.footer-contact { margin-top: 28px; padding-top: 24px; max-width: 340px; border-top: 1px solid var(--rule-dark); }
.footer-name { color: var(--white); font-weight: 600; }
.footer-contact address { margin-top: 4px; color: var(--light-tint); }
.footer-phone { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); font-size: 18px; line-height: 28px; font-weight: 600; text-decoration: none; }
.footer-phone:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-area { color: var(--light-tint); }
.footer-col { grid-column: span 2; }
.footer-col h2 { color: var(--white); font-family: var(--display); font-size: 16px; line-height: 24px; letter-spacing: 0; }
.footer-col ul { margin-top: 8px; }
.footer-col li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--light-tint); font-weight: 500; text-decoration: none; }
.footer-col li a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.footer-legal { position: relative; display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; color: var(--light-tint); font-size: 14px; line-height: 20px; }
.footer-legal::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--rule-dark); }

/* ---------- Small state changes, only without a reduced-motion preference ---------- */
@media (prefers-reduced-motion: no-preference) {
  .panel { animation: panel-in 0.22s var(--ease-out) both; }
  .cal-day, .cal-nav, .slot, .btn, .field input, .field textarea { transition: background-color 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s; }
  .step-n, .step + .step::before { transition: background-color 0.2s, box-shadow 0.2s, color 0.2s; }

  /* Page transitions with the v11 home page and the message page: moving between them cross-fades with the header
     held, where the browser supports cross-document view transitions (v11's motion.js lists /meeting/ and /message/). */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: vt-out 0.24s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in 0.36s var(--ease-out) both; }
  ::view-transition-old(hero) { animation: vt-hero-out 0.28s var(--ease) both; }
}
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
@keyframes vt-hero-out { to { opacity: 0; transform: translateY(-12px); } }

/* ---------- Responsive ---------- */
@media (max-width: 1360px) {
  .header-phone { display: none; }
}

@media (max-width: 1240px) {
  /* The long label stays in the accessibility tree (clipped, never display: none), so the button keeps its one name,
     "Book a free on-site assessment", while the shorter label shows (aria-hidden) */
  .label-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .label-short { display: inline; }
}

@media (max-width: 1180px) {
  .header-nav ul { gap: 18px; }
  .header-nav a { font-size: 14px; }
  .intro h1 { font-size: 48px; line-height: 56px; }
  .booker { padding: 28px 32px 36px; }
}

@media (max-width: 1099px) {
  .header-nav { display: none; }
}

/* Below a laptop: the booker takes the full width and the other two ways sit under it, side by side */
@media (max-width: 999px) {
  .booker, .other-ways { grid-column: 1 / -1; }
  .other-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); padding-top: 4px; }
}

@media (max-width: 900px) {
  .footer-brand { grid-column: 1 / -1; }
  .footer-col { grid-column: span 6; }
}

@media (max-width: 720px) {
  .expect { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  :root { --gutter: 16px; }

  .header-row { height: 64px; }
  .lockup img { width: 161px; height: 42px; }
  .header-actions { padding-left: 12px; }

  /* Tighter spacing above the booker, so its step bar shows on the first screen of a 390x844 phone */
  .rings-intro { width: 640px; height: 640px; right: -380px; top: -380px; opacity: 0.22; }
  .intro-inner { padding-top: 24px; padding-bottom: 24px; }
  .intro h1 { font-size: clamp(32px, 9.4vw, 40px); line-height: 1.1; }
  .lead { margin-top: 10px; font-size: 18px; line-height: 27px; }
  .expect { margin-top: 20px; row-gap: 18px; }
  .expect-col { padding-top: 16px; }
  .expect-h { gap: 10px; font-size: 20px; line-height: 26px; }
  .expect-icon { width: 30px; height: 30px; }
  .expect-icon .ico { width: 17px; height: 17px; }
  .ticks { margin-top: 10px; gap: 8px; }
  .ticks li { font-size: 16px; line-height: 24px; }
  .tick { margin-top: 1px; }

  .book { padding-top: 16px; padding-bottom: 56px; }
  .booker { padding: 16px 16px 24px; border-radius: 14px; }
  .steps { padding-bottom: 14px; margin-bottom: 18px; }
  .step + .step::before { width: 20px; }
  .panel-h { font-size: 24px; line-height: 30px; }
  .date-top { display: block; }
  .cal-head { justify-content: space-between; margin-top: 12px; }
  .cal { margin-top: 16px; }
  .panel-note { font-size: 15px; line-height: 22px; }
  .cal-dow, .cal-grid { gap: 4px; }
  .cal-day { height: 46px; border-radius: 8px; font-size: 15px; }
  .slots { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .form-actions .btn { width: 100%; padding: 12px 20px; white-space: normal; text-align: center; }
  .done-body { font-size: 17px; line-height: 27px; }
  .other-ways { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  .site-footer { padding-top: 52px; }
  .footer-line { margin-top: 52px; }
  .footer-top { row-gap: 32px; }
  .footer-legal { flex-direction: column; gap: 4px; margin-top: 40px; }
}

/* Narrow phones: the steps drop their connecting rules so the three fit on one line, and the chosen day may wrap
   (its time stays on one line) */
@media (max-width: 400px) {
  .steps { gap: 8px 16px; }
  .step + .step::before { display: none; }
  .step { gap: 8px; font-size: 14px; }
  .step-n { width: 28px; height: 28px; }
  .when-date { white-space: normal; }
}

/* Small phones (up to 430 px): the lockup keeps its full size (the brand minimum is about 170 px), so the header
   button shows its shortest label, "Book a free visit", on one line; here that label is the button's one name. */
@media (max-width: 430px) {
  .header-actions .btn-small { max-width: 170px; min-height: 40px; padding: 0 12px; font-size: 13px; line-height: 20px; }
  .header-actions .label-long, .header-actions .label-short { display: none; }
  .header-actions .label-tiny { display: inline; }
  /* Wider day cells on phones: less side padding in the booker and a smaller gap (45 px cells at 390) */
  .booker { padding-left: 12px; padding-right: 12px; }
  .cal-dow, .cal-grid { gap: 3px; }
}

@media (max-width: 360px) {
  .cal-dow span { font-size: 12px; }
}