/* Phone layout fixes for the design exports. Desktop is untouched: every rule is
 * inside the 760px breakpoint that site-chrome.js uses for the menu button.
 * The pages are rendered by dc-runtime, which writes inline styles in the
 * browser's serialized form ("display: flex; gap: 14px"), so the attribute
 * selectors below match that form, and need !important to beat inline styles.
 * #dc-prerender is the static copy shown while the page loads (tools/prerender.mjs);
 * the same rules apply to it so nothing shifts when the live page takes over. */
@media (max-width: 759.98px) {

  /* ── Nav: logo · compact CTA · menu button on one row ───────────────── */
  nav {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  nav > :first-child { margin-right: auto; min-width: 0; }
  /* "How it works" / "Attentiv for Work" page label and its divider */
  nav span[style*="font-style: italic"],
  nav div[style*="width: 1px"] { display: none !important; }
  nav [data-nav-links] { flex: 0 0 auto !important; gap: 0 !important; }
  /* Pill CTA: same button, shorter label so it fits beside the logo */
  nav a[style*="border-radius: 100px"] {
    font-size: 0 !important;
    padding: 11px 16px !important;
    white-space: nowrap !important;
    flex-shrink: 0;
    box-shadow: none !important;
  }
  nav a[style*="border-radius: 100px"]::after { content: 'Get the band'; font-size: 13px; }
  nav a[href="#employers"][style*="border-radius: 100px"]::after { content: 'Talk to us'; }
  [data-menu-btn] { order: 10; }
  /* The menu panel's own "Get the Attentiv Band" button keeps its full label. */
  nav [data-menu-panel] a[style*="border-radius: 100px"] { font-size: 15px !important; padding: 0 16px !important; }
  nav [data-menu-panel] a[style*="border-radius: 100px"]::after { content: none; }
  nav [data-menu-panel] a { text-decoration: none !important; }

  /* ── Sticky side columns stack on phones; sticky makes the next column
        scroll over them (Access to Work "Funded by the government…") ─── */
  :is(#dc-root, #dc-prerender) [style*="position: sticky"]:not(nav) { position: static !important; }

  /* ── Heading + intro paragraph rows ("Inside the app…", "Simple to fund…") ── */
  :is(#dc-root, #dc-prerender) [style*="justify-content: space-between"][style*="align-items: flex-end"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* ── Footer: stack logo, notice, links and copyright ── */
  footer [style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  /* ── "Mornings that slip → Anchor at the time you set" rows ── */
  div:has(> span[style*="min-width: 170px"]) { flex-direction: column !important; gap: 3px !important; }
  span[style*="min-width: 170px"] { min-width: 0 !important; }

  /* ── How it works "01 → 02 → 03" step pills: a vertical column, connectors turn vertical ── */
  div:has(> div[style*="width: 36px; height: 1.5px"]) { flex-direction: column !important; flex-wrap: nowrap !important; gap: 6px !important; }
  div[style*="width: 36px; height: 1.5px"] { width: 1.5px !important; height: 14px !important; }

  /* ── Product "The things that slip": name above description ── */
  :is(#dc-root, #dc-prerender) [style*="grid-template-columns: minmax(0px, 180px) minmax(0px, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  /* ── Product "Why not just use my phone?" table: tighter cells ── */
  :is(#dc-root, #dc-prerender) [style*="grid-template-columns: minmax(0px, 1.6fr) minmax(0px, 1fr) minmax(0px, 1fr)"] > * {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ── How it works "What you have switched on" panel ── */
  :is(#dc-root, #dc-prerender) div[style*="min-width: 76px"] { min-width: 0 !important; }
  :is(#dc-root, #dc-prerender) span[style*="margin-left: auto"] { white-space: nowrap; }

  /* ══ Phone polish ═════════════════════════════════════════════════════ */

  html { -webkit-text-size-adjust: 100%; }
  a, button { -webkit-tap-highlight-color: rgba(55, 177, 140, .15); }

  /* Section rhythm: desktop's 96–110px gaps become 64px. */
  :is(#dc-root, #dc-prerender) section:is(
    [style*="padding: 104px 0px"], [style*="padding: 110px 0px"], [style*="padding: 100px 0px"],
    [style*="padding: 96px 0px"], [style*="padding: 88px 0px"], [style*="padding: 84px 0px"]) {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  :is(#dc-root, #dc-prerender) section:is(
    [style*="padding: 0px 0px 100px"], [style*="padding: 0px 0px 104px"], [style*="padding: 0px 0px 96px"]) {
    padding-bottom: 64px !important;
  }
  :is(#dc-root, #dc-prerender) [style*="padding: 0px clamp(20px, 5vw, 48px) 96px"] { padding-bottom: 64px !important; }
  :is(#dc-root, #dc-prerender) [style*="padding-top: 88px"] { padding-top: 56px !important; }
  :is(#dc-root, #dc-prerender) [style*="margin: 0px auto 64px"] { margin-bottom: 40px !important; }
  :is(#dc-root, #dc-prerender) [style*="margin-bottom: 80px"] { margin-bottom: 48px !important; }
  :is(#dc-root, #dc-prerender) [style*="margin-bottom: 48px"] { margin-bottom: 32px !important; }
  /* Two-column layouts that stack: the 56–72px column gap is far too much. */
  :is(#dc-root, #dc-prerender) [style*="display: grid"]:is([style*="gap: 72px"], [style*="gap: 64px"], [style*="gap: 56px"]) {
    gap: 36px !important;
  }

  /* Photos at phone height, not desktop height. */
  :is(#dc-root, #dc-prerender) img:is([style*="height: 560px"], [style*="height: 520px"], [style*="height: 440px"]) {
    height: auto !important;
    aspect-ratio: 4 / 3.4;
  }
  :is(#dc-root, #dc-prerender) div[style*="height: 520px"][style*="overflow: hidden"] { height: 320px !important; }

  /* How it works: the animated reminder panels, and the card around them. */
  :is(#dc-root, #dc-prerender) div[style*="height: 400px"][style*="background: rgb(18, 20, 15)"] { height: 250px !important; }
  /* The Runway panel draws two bars from the bottom: it needs a little more room. */
  :is(#dc-root, #dc-prerender) div[style*="height: 400px"][style*="background: rgb(18, 20, 15)"]:not([style*="place-items"]) { height: 300px !important; }
  :is(#dc-root, #dc-prerender) [style*="gap: 56px"][style*="border-radius: 28px"] {
    gap: 22px !important;
    padding: 14px 14px 22px !important;
  }
  :is(#dc-root, #dc-prerender) [style*="gap: 56px"][style*="border-radius: 28px"] > :last-child { padding: 0 6px; }

  /* Cards: desktop-sized padding trimmed. */
  :is(#dc-root, #dc-prerender) [style*="border-radius: 20px"]:is(
    [style*="padding: 30px 24px"], [style*="padding: 30px 28px"], [style*="padding: 34px 30px"], [style*="padding: 34px 36px"]),
  :is(#dc-root, #dc-prerender) [style*="border-radius: 22px"][style*="padding: 32px 28px"] {
    padding: 22px 20px !important;
  }

  /* Access to Work "Attentiv for Teams" quote card. */
  :is(#dc-root, #dc-prerender) [style*="border-radius: 24px"][style*="padding: 48px"] { padding: 24px 20px !important; }

  /* Bordered stat/rule strips: once they stack, the desktop column dividers
     become stray half-lines. Drop them and divide the rows instead. */
  :is(#dc-root, #dc-prerender) [style*="display: grid"][style*="repeat(auto-fit"]:has(> :is([style*="border-right"], [style*="border-left"])) > * {
    border-left: 0 !important;
    border-right: 0 !important;
  }
  :is(#dc-root, #dc-prerender) [style*="display: grid"][style*="repeat(auto-fit"][style*="border: 1px solid rgb(232, 226, 212)"]:has(> [style*="border-right"]) > * + * {
    border-top: 1px solid #E8E2D4 !important;
  }
  :is(#dc-root, #dc-prerender) [style*="display: grid"][style*="repeat(auto-fit"][style*="border: 1px solid rgba(255, 251, 240"]:has(> [style*="border-right"]) > * + * {
    border-top: 1px solid rgba(255, 251, 240, .12) !important;
  }
  :is(#dc-root, #dc-prerender) [style*="display: grid"][style*="repeat(auto-fit"]:has(> [style*="border-right"]) > * {
    padding: 20px !important;
  }
  /* Home "Engineered to disappear" spec list: an open list, no side padding. */
  :is(#dc-root, #dc-prerender) [style*="display: grid"][style*="border-top: 1px solid rgba(255, 251, 240"] > * {
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(255, 251, 240, .12) !important;
  }

  /* Footer link columns two to a row, brand across the top. */
  footer [style*="minmax(min(180px, 100%), 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 20px !important;
    padding-bottom: 28px !important;
  }
  footer [style*="minmax(min(180px, 100%), 1fr)"] > :first-child { grid-column: 1 / -1; }
  footer[style*="padding: 64px 0px 32px"] { padding-top: 44px !important; }

  /* iPhone zooms into any field under 16px when it's tapped. */
  :is(#dc-root, #dc-prerender) :is(input, textarea, select) { font-size: 16px !important; }

  /* Pre-rendered copy, before the menu script runs: same nav as the live page. */
  #dc-prerender [data-nav-links] > a:not([style*="border-radius: 100px"]) { display: none !important; }

  /* Product page footer: its 110px bottom space was room for a fixed bar it no longer has on phones. */
  footer[style*="clamp(110px, 12vw, 36px)"] { padding-bottom: 32px !important; }

  /* ── Leave room for the fixed "Get the Attentiv Band" bar at the bottom ── */
  body:has([style*="position: fixed; left: 0px; right: 0px; bottom: 0px"]) footer { padding-bottom: 96px !important; }
}

/* Quote page: the A4 sheet is scaled to the screen width (see mobile.js). */
@media screen and (max-width: 900px) {
  doc-page { zoom: var(--doc-fit-zoom, 1); }
}
@media screen and (max-width: 900px) {
  /* the zoomed sheet no longer fills the viewport height: keep the desk colour below it */
  html:has(doc-page), body:has(doc-page) { background: #f5f5f4; }
}