@media (max-width: 640px) {

  /* LIST 4, 5, 6, 7 - the four plans: every plan is a full-width band, edge to edge, so the plans' black-white stagger reads
     as alternate bands down the phone (only 02 bleeds today); the bleed is measured from the screen itself, so the
     words stay in line with the rest of the section whatever its inset. */
  .a3-phone-plans .tier {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
  }

  /* LIST 8 - the star stays on the "02 MOST POPULAR" line beside the words (its colour is set with the plans; this only keeps it on the line). */
  .a3-phone-plans .tier__label { flex-wrap: nowrap; }
  /* LIST 8 */
  .a3-phone-plans .a3-plans-star { flex: none; line-height: 1; }

  /* LIST 4-8, 12, 21 - the plan buttons and the links under the four (terms tab, book) are full-width 44-px rows. */
  .a3-phone-plans .tier__go .button,
  .a3-phone-plans .plans__actions :is(.button, .text-link) {
    min-height: 44px;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    box-sizing: border-box;
  }

  /* LIST 13 - the nine store rows: one column, the picture above the words (odd and even rows alike). */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band, .a3-store-row, .a3-phone-row) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
    padding-block: 24px 28px;
  }
  /* LIST 13 */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band, .a3-store-row, .a3-phone-row) > :is(figure, picture, .cat-band__pic, .a3-store-pic) { order: -1 !important; }

  /* LIST 15 - no sideways slide at 390: whatever moves a row or its halves sideways (transform or translate) is held
     still here; the arrival is the short fade-up below instead. */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band, .a3-store-row, .a3-phone-row) { transform: none !important; translate: none !important; }
  /* LIST 15 */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band, .a3-store-row, .a3-phone-row) > * { transform: none !important; }

  /* LIST 15 - the short fade-up: each half rises 16 px and fades in as it enters the screen, tied to the scroll
     (no script; a browser without scroll timelines shows the rows still and whole). Before a half enters it rests as
     it is, below the screen, so a full-length still of the page shows every row whole. */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band, .a3-store-row, .a3-phone-row) > * {
    animation: a3-phone-rise linear forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
  }
  @keyframes a3-phone-rise {
    from { opacity: 0.001; translate: 0 16px; }
    to { opacity: 1; translate: 0 0; }
  }

  /* LIST 16 - a card can only stick to the screen if no box around it scrolls: home.css turns the layout band into a
     scroll box below 900 px (overflow: hidden), which pins the cards to the band instead; clip cuts the same overflow
     without making a scroll box, so the cards stick to the screen again. */
  .a3-phone-page .composition:has(:is(.a3-phone-store, .a3-store)) { overflow: clip; }

  /* LIST 16 - the stacking cards keep working on the phone: each row sticks just under the 55-px phone header with a
     4-px step (smaller than the desktop step), so the next row slides up over the one before and its edge shows. */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band, .a3-store-row, .a3-phone-row) { top: 56px; }
  /* LIST 16 */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band, .a3-store-row, .a3-phone-row):nth-child(2 of :is(.cat-band, .a3-store-row, .a3-phone-row)) { top: 60px; }
  /* LIST 16 */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band, .a3-store-row, .a3-phone-row):nth-child(3 of :is(.cat-band, .a3-store-row, .a3-phone-row)) { top: 64px; }
  /* LIST 16 */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band, .a3-store-row, .a3-phone-row):nth-child(4 of :is(.cat-band, .a3-store-row, .a3-phone-row)) { top: 68px; }
  /* LIST 16 */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band, .a3-store-row, .a3-phone-row):nth-child(5 of :is(.cat-band, .a3-store-row, .a3-phone-row)) { top: 72px; }
  /* LIST 16 */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band, .a3-store-row, .a3-phone-row):nth-child(6 of :is(.cat-band, .a3-store-row, .a3-phone-row)) { top: 76px; }
  /* LIST 16 */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band, .a3-store-row, .a3-phone-row):nth-child(7 of :is(.cat-band, .a3-store-row, .a3-phone-row)) { top: 80px; }
  /* LIST 16 */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band, .a3-store-row, .a3-phone-row):nth-child(8 of :is(.cat-band, .a3-store-row, .a3-phone-row)) { top: 84px; }
  /* LIST 16 */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band, .a3-store-row, .a3-phone-row):nth-child(9 of :is(.cat-band, .a3-store-row, .a3-phone-row)) { top: 88px; }

  /* LIST 13, 16 - a stacked card must fit the screen under the header and above the call bar, or its button would be
     covered before it is read: the words tighten on the phone (the pictures stay whole). */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band__d, .a3-store-d) { margin-bottom: 14px; font-size: 1rem; }
  /* LIST 13, 16 */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band__why, .a3-store-why) { margin-bottom: 18px; font-size: 1.12rem; }
  /* LIST 13, 16 */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band__name, .a3-store-name) { margin-bottom: 10px; }

  /* LIST 13 - each row's store button stays a full-width 44-px row. */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band__go, .a3-store-go, .a3-phone-go) :is(a, .button) {
    min-height: 44px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }

  /* LIST 14 - the store page's land-open: a group opened from the home page scrolls into view clear of the sticky
     phone header instead of under it. */
  .a3-phone-page [id^="heading-g"] { scroll-margin-top: 72px; }

  /* LIST 18, 20 - who we serve: the brand story leads the section, centred. */
  .a3-phone-serve .a3-serve-story { text-align: center; margin-inline: auto; }

  /* LIST 10 - "See More" sits centred under the industries list as a 44-px target (it is the section's only link to
     the index itself, so it is found by its address). */
  .a3-phone-serve :is(p, div):has(> a[href="/industries/"]) { text-align: center; }
  /* LIST 10 */
  .a3-phone-serve a[href="/industries/"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  /* LIST 3 - the burger carries the full site menu, "Team Login" included; every entry is at least a 44-px tap. */
  .a3-phone-page .mnav__drawer :is(a, button) { min-height: 44px; }

  /* LIST 12 - the pricing page's five tabs: one row that scrolls sideways (the site's tab bar wraps today); the bar
     sits in the page's unpadded main column, so it keeps the page's 22-px inset inside itself. */
  .a3-phone-pricing .tool-tabs[role="tablist"] {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    gap: 0 22px;
    padding-inline: 22px;
    scroll-padding-inline: 22px;
  }
  /* LIST 12 */
  .a3-phone-pricing .tool-tabs[role="tablist"]::-webkit-scrollbar { display: none; }
  /* LIST 12 */
  .a3-phone-pricing .tool-tabs[role="tablist"] > [role="tab"] {
    flex: none;
    white-space: nowrap;
    min-height: 44px;
    scroll-snap-align: start;
  }

  /* LIST 12 - the active tab is always in view: it sticks to whichever edge of the bar it would otherwise scroll past
     (a deep link to "The terms" opens with that tab on screen, with no script), on the page's own ground. */
  .a3-phone-pricing .tool-tabs[role="tablist"] > [role="tab"][aria-selected="true"] {
    position: sticky;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: var(--black);
  }

  /* LIST 17 - the booker's month grid fits 390: seven equal columns and 44-px days, no sideways scroll - the home
     close's booking card (its padding was eating the width: about 36-px days) ... */
  .a3-phone-page .bk-ov { padding: 0; }
  /* LIST 17 */
  .a3-phone-page .bk-card {
    width: 100%;
    max-height: 100dvh;
    padding: 22px 12px 20px;
    border-radius: 0;
    box-sizing: border-box;
  }
  /* LIST 17 */
  .a3-phone-page .bk-body { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* LIST 17 */
  .a3-phone-page :is(.bk-dow, .bk-days) { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  /* LIST 17 */
  .a3-phone-page .bk-day { min-height: 44px; min-width: 0; }
  /* LIST 17 */
  .a3-phone-page .bk-nav { width: 44px; height: 44px; }
  /* LIST 17 */
  .a3-phone-page .bk-times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* LIST 17 */
  .a3-phone-page .bk-times :is(button, a) { min-height: 44px; }

  /* LIST 17 - ... and the front desk's booker (the month view in frontdesk.js): a day never keeps the 66-px minimum
     the fortnight strip needed, so seven of them share the panel's width at 44 px. */
  .a3-phone-page .fd-day { min-width: 0; min-height: 44px; }
  /* LIST 17 */
  .a3-phone-page .fd-slot { min-height: 44px; }

  /* LIST 19 - the industry pages' rectangular boxes (the two blue pills restyled as the store's boxes) are full width on the phone. */
  .a3-phone-industry :is(.a3-btn-box, .buybar__buy, .buybar__cart) {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* LIST 9, 17 and every row with words - the site's own SITEFIX-1010 rule, mirrored for the home page (home.css does
     not carry it): a call, mail or text link inside body copy is an INLINE box with 14 px above and below, so the line
     keeps its height; one addition, measured on a true 390 render: the link is positioned, so its padded box is drawn and hit-tested
     above the next line of text instead of under it. */
  .a3-phone-page :is(p, li, dd, td) a:is([href^="tel:"], [href^="mailto:"], [href^="sms:"]):not(.mhbar__act) {
    display: inline;
    min-height: 0;
    padding-top: 14px;
    padding-bottom: 14px;
    position: relative;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  /* LIST 15, 16 - the motion rule: under reduced motion nothing this file animates moves - no fade-up, no rise - and
     the rows do not stick (the store section's own switch), so the plain stacked layout shows. */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band, .a3-store-row, .a3-phone-row) > * { animation: none !important; translate: none !important; opacity: 1; }
  /* LIST 15, 16 */
  .a3-phone-page :is(.a3-phone-store, .a3-store) :is(.cat-band, .a3-store-row, .a3-phone-row) { position: static !important; }
}

@media (max-width: 640px) {

  /* PHONE LIST 2 - the OUR TOOLS names become white boxes, all the same size: two equal columns and equal rows (every
     row as tall as the tallest name), with a gap that keeps each box its own. */
  .a3-phone-page .hp-tools__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
  }
  /* PHONE LIST 2 - each name's item is the box: the site's white, no grey line down its left edge. */
  .a3-phone-page .hp-tools__list li {
    display: flex;
    align-self: stretch;
    padding: 0;
    border-left: 0;
    background-color: var(--white);
    color: var(--black);
  }
  /* PHONE LIST 2 - the link fills its box, so the whole box is the tap; black words centred both ways. */
  .a3-phone-page .hp-tools__list a {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 12px 10px;
    box-sizing: border-box;
    color: var(--black);
    text-align: center;
  }

  
  .a3-phone-page .s1-left-in > div:has(> .s1-brand) { display: none; }
  /* PHONE LIST 3b - the same two lines by name, for a browser without :has(); kept inside the left column, because
     every inner page's footer carries its own .s1-brand, which stays. */
  .a3-phone-page .s1-left .s1-brand,
  .a3-phone-page .s1-left .s1-brand + .muted { display: none; }
  /* PHONE LIST 3b - and the band that framed it: below 900 px the left column shows nothing else (its services list
     is hidden there and the menu is the burger), so the column's 22-px frame and bottom line go too and the hero
     rises to sit under the site bar. */
  .a3-phone-page .s1-left:has(> .s1-left-in > div > .s1-brand) { display: none; }

  /* PHONE LIST 3c - the place for his crest, spinning, beside the hero's title. On the phone the title is pixels in the
     hero picture, so the place is measured off the picture and kept in its own proportions: the crest is as wide as
     the title's capital letters are tall, and its top and left are shares of the picture. Today's picture leaves no
     room beside the title's first line, so the crest sits after the title's last word; a new phone picture changes
     these three values, never the rules below. */
  .a3-phone-page .hp-frame {
    --a3-phone-spin-size: 3.5714%;
    --a3-phone-spin-top: 70.3287%;
    --a3-phone-spin-left: 67.8571%;
  }
  /* PHONE LIST 3c - the slot: a square laid on the picture that never takes a tap (taps pass through to the picture's
     own links, wherever in the frame the slot is placed) and adds no motion of its own (the spin and its reduced-motion
     stop belong to the crest itself). It makes no layer of its own: the crest's video drops its dark ground by blending
     with the hero picture behind it, which a layer would hide. */
  .a3-phone-page .hp-frame > .a3-phone-spin-slot {
    position: absolute;
    top: var(--a3-phone-spin-top);
    left: var(--a3-phone-spin-left);
    width: var(--a3-phone-spin-size);
    aspect-ratio: 1 / 1;
    pointer-events: none;
  }
  /* PHONE LIST 3c - if the title becomes live text over the picture (this class on the hero section), the slot rides
     the title's own line instead: as tall as its capitals, a quarter of that from the last word. */
  .a3-phone-page .a3-phone-hero-text .a3-phone-spin-slot {
    position: static;
    display: inline-block;
    vertical-align: baseline;
    width: auto;
    height: 0.7em;
    height: 1cap;
    margin-left: 0.175em;
    margin-left: 0.25cap;
    aspect-ratio: 1 / 1;
    pointer-events: none;
  }

  /* PHONE LIST 4 - the store page on the phone: the label words over each product go - no "Name", no "Details", no
     "Page" (the price keeps its own label: it is not one of the four words he named). */
  .a3-phone-page .finder-row > :is(.finder-name, .finder-line, .finder-action)::before { content: none; }
  /* PHONE LIST 4 - and the "What you get" link words go: the product's name is the link and the only direction (the
     whole row is one link already), so the row ends with its details and takes no third line. */
  .a3-phone-page .finder-row > .finder-action { display: none; }

  /* PHONE LIST 6a2 - the time-to-complete line under the plans is centred on the phone: its words centred, its box in
     the middle of the column. */
  .a3-phone-plans .plans__build {
    text-align: center;
    margin-inline: auto;
  }

  /* PHONE LIST 8 - the plans on the phone: when the compare table is in the plans section it carries every plan's
     items, so the four item lists (with the line that heads each) give way to it; a section without the table keeps
     its lists, so a phone never loses the items. */
  .a3-phone-plans:has([class*="a3-compare-"]) :is(.tier__list, .tier__plus) { display: none; }
}