/* a3-boxes.css - his words of 14 October on the plans as they read on his phone: the heading under each plan's button
   centred, and no blue outlined box anywhere on the site - an outline is white on a black ground and black on a white
   ground. The ruled blue stays where it is a rule line or a heading underline (the plan items' left rules, the pricing
   tabs' underline, the detail heading's own underline). Every rule here is keyed on the hook a3-boxes that the page's
   body carries, so a page without the hook is the page as it is. No motion is added. Plain ASCII. The arrow glyphs on
   links and buttons are not a style: they are gone from the markup itself. */

/* ---------- 1. THE HEADING UNDER EACH PLAN'S BUTTON ("What each service does") ----------
   Measured before at a true 390: the heading sat at the left of its row, its centre 89.4 px left of the row's centre
   (the row is a wrapping flex row; the plan's button above it is already full width there, a3-phone.css). Centring
   the row's items moves only the heading; the button keeps its full width. Wider screens keep the row as it stands,
   the button and the heading side by side. */
@media (max-width: 640px) {
  .a3-boxes .a3-plans-section .a3-plans-go {
    justify-content: center;
  }
  .a3-boxes .a3-plans-section .a3-plans-go .a3-plans-detail {
    text-align: center;
  }
}

/* ---------- 2. THE PLAN BUTTONS ("See Launchpad" and its three siblings) ----------
   Before: a 1 px blue outline on every band. Now the outline takes the band's own ink: white on the black bands,
   black on the white bands (the --a3-plans-ink token the plans section already sets per band). Hover and focus keep
   their inverted fill. */
.a3-boxes .a3-plans-section .a3-plans-band .a3-plans-go .a3-plans-link {
  border-color: var(--a3-plans-ink);
}

/* ---------- 3. THE HOME PAGE'S OTHER BUTTONS AND LINKS UNDER A FINGER OR THE KEYBOARD ----------
   The store section's buttons turned their outline and words blue on hover or focus, and its links drew a blue focus
   ring; the live-site button did the same; the hero's hotspots, the tools list and its boxes drew blue rings. On the
   black ground every one is paper now, and a hovered button takes the site's own look: paper fill, black words. */
.a3-boxes .cats .button:hover,
.a3-boxes .cats .button:focus-visible,
.a3-boxes .case__go .button:hover,
.a3-boxes .case__go .button:focus-visible {
  color: var(--black, #000);
  background: var(--paper, #F1F0EB);
  border-color: var(--paper, #F1F0EB);
}
.a3-boxes .cats .button.light:hover,
.a3-boxes .cats .button.light:focus-visible {
  color: var(--paper, #F1F0EB);
  background: var(--black, #000);
  border-color: var(--black, #000);
}
.a3-boxes .cats a:focus-visible,
.a3-boxes .hp-hot:focus-visible,
.a3-boxes .hp-tools:focus-visible,
.a3-boxes .hp-tools__list a:focus-visible,
.a3-boxes .a3-nav-list.a3-nav-list .a3-nav-link:focus-visible,
.a3-boxes .fd-launch.a3-bubble-launch:focus-visible,
.a3-boxes .a3-compare-wrap:focus-visible {
  outline-color: var(--paper, #F1F0EB);
}
/* the lightbox note on the home page carries a blue frame; paper now */
.a3-boxes .s2lb-found {
  border-color: var(--paper, #F1F0EB);
}

/* ---------- 4. THE PRICING PAGE ----------
   The two links under each plan ("See Launchpad", "Book a call") and the "In plain words" panel were framed in blue on
   the black ground; the frames and the focus rings are paper now. The tabs' underline stays blue (a heading underline). */
.a3-boxes .a3-pricing-link {
  border-color: #F1F0EB;
}
.a3-boxes .a3-pricing-panel .plain {
  border-color: #F1F0EB;
}
.a3-boxes .a3-pricing-tab:focus-visible,
.a3-boxes .a3-pricing-link:focus-visible {
  outline-color: #F1F0EB;
}

/* ---------- 5. THE INDUSTRY PAGES ----------
   The two rectangular boxes ("Read what this is", "Book a time") were a 2 px blue frame with blue words on the near-black
   ground; paper frame and paper words now, and under a finger or the keyboard the box fills paper with black words,
   the way the site's own buttons answer. */
.a3-boxes .a3-btn-box.a3-btn-box {
  border-color: #F1F0EB;
  color: #F1F0EB;
}
.a3-boxes .a3-btn-box.a3-btn-box:hover,
.a3-boxes .a3-btn-box.a3-btn-box:focus-visible {
  background: #F1F0EB;
  color: #0B0B0B;
}
.a3-boxes .a3-btn-box.a3-btn-box:focus-visible {
  outline-color: #F1F0EB;
}

/* ---------- 6. THE STORE PAGE ----------
   The skip link's frame, the pressed group tab's frame and its left bar, and every focus ring on the finder were blue;
   paper now. The pressed tab keeps its weight and its underline. The bar over the search controls stays blue (a rule
   line). */
.a3-boxes[data-page="store-finder"] .skip-link {
  border-color: #F1F0EB;
}
.a3-boxes .finder button[aria-pressed="true"] {
  border-color: #F1F0EB;
  color: #F1F0EB;
  box-shadow: inset 3px 0 #F1F0EB;
}
.a3-boxes .finder :is(a, button, input):focus-visible {
  outline-color: #F1F0EB;
}