/* ═══════════════════════════════════════════════════════════
   Blue Arctic · WordPress layer
   Loaded after the v2 layers. Maps core block markup onto the v2
   design system: template-part wrappers, buttons, lists, details,
   icons drawn with the brand mask instead of inline SVG, social
   links, and the few places core adds its own spacing.
   ═══════════════════════════════════════════════════════════ */

/* ── Check glyph used wherever v2 had an inline check icon ── */
:root {
  --ba-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
  --ba-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  --ba-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m0 0-6-6m6 6-6 6'/%3E%3C/svg%3E");
  --ba-gift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9s-4.5.3-5.5-2A2.1 2.1 0 0 1 10 4.6C11.8 5.6 12 9 12 9Zm0 0s4.5.3 5.5-2A2.1 2.1 0 0 0 14 4.6C12.2 5.6 12 9 12 9Z'/%3E%3Crect x='4' y='9' width='16' height='11' rx='1.5'/%3E%3Cpath d='M12 9v11M4 13.5h16'/%3E%3C/svg%3E");
  --ba-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.8 2.8 5.8 6.4.9-4.6 4.4 1.1 6.3L12 17.2l-5.7 3 1.1-6.3L2.8 9.5l6.4-.9Z'/%3E%3C/svg%3E");
  --ba-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='10.5' r='2.3'/%3E%3Cpath d='M12 21s-6.5-5.3-6.5-10.3a6.5 6.5 0 0 1 13 0C18.5 15.7 12 21 12 21Z'/%3E%3C/svg%3E");
  --ba-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.8 3.5h2.4l1.5 4-2 1.4a12.8 12.8 0 0 0 6.4 6.4l1.4-2 4 1.5v2.4a2 2 0 0 1-2.2 2A16.8 16.8 0 0 1 4.8 5.7a2 2 0 0 1 2-2.2Z'/%3E%3C/svg%3E");
  --ba-headset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='3' y='13.5' width='4.5' height='6' rx='1.5'/%3E%3Crect x='16.5' y='13.5' width='4.5' height='6' rx='1.5'/%3E%3Cpath d='M18.75 19.5c0 1.2-1.5 2-3.5 2H13'/%3E%3C/svg%3E");
  --ba-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 7.5 7.5 5.5 7.5-5.5'/%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3C/svg%3E");
}

/* ── Template-part wrappers ────────────────────────────────
   The header part holds the announce bar and the sticky header. Its
   wrapper must not become the sticky container, so it steps out of the
   box tree; the footer wrapper likewise adds nothing. */
.site-header-part,
.site-footer-part { display: contents; }
.wp-site-blocks { padding: 0; }

/* Core's skip link is kept (it targets <main>); give it the v2 look. */
.skip-link.screen-reader-text:focus {
  clip: auto !important;
  clip-path: none;
  width: auto;
  height: auto;
  left: 1rem;
  top: 1rem;
  z-index: 200;
  padding: .7rem 1.2rem;
  background: var(--navy-900);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
}

/* ── Flow spacing: v2 owns vertical rhythm ─────────────────
   Global blockGap is 0; these restate the few defaults v2 relied on the
   browser for, inside long-form content only. */
.prose > * + *,
.faq-body > * + * { margin-top: 1em; }

/* ── Buttons ───────────────────────────────────────────────
   The render filter puts .btn .btn-{style} .btn-{size} on the link.
   These restate what core's button CSS would otherwise win on source
   order. */
/* Zero-specificity defaults: v2's contextual rules (".hv-hero-ctas { … }",
   ".hv-hero-ctas .btn { width: 100% }") always win over them. */
:where(.wp-block-buttons) { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
:where(.wp-block-button) > .btn {
  display: inline-flex;
  height: auto;
  word-break: normal;
  text-align: center;
}
.wp-block-button > .btn-block, .wp-block-button.is-block { width: 100%; }
.btn-block { width: 100%; }
.wp-block-button > .link-arrow::after,
.link-arrow.wp-block-button__link::after {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--ba-arrow) center / contain no-repeat;
  mask: var(--ba-arrow) center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease-out);
}
.wp-block-button > .link-arrow:hover::after { transform: translateX(3px); }
.wp-block-button > .link-arrow { background: none; padding: 0; border: 0; }

/* Paragraph link arrows (v2 .link-arrow with an inline SVG). The paragraph
   carries the colour so v2's contextual rules (".hv-why-side .link-arrow")
   still recolour it. */
p.link-arrow { color: var(--blue-600); font-weight: 600; }
p.link-arrow a { color: inherit; }
p.link-arrow a,
a.link-arrow:not(.wp-block-button__link) { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
p.link-arrow a::after {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--ba-arrow) center / contain no-repeat;
  mask: var(--ba-arrow) center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease-out);
}
p.link-arrow a:hover::after { transform: translateX(3px); }

/* ── Lists ─────────────────────────────────────────────── */
.footer-col ul,
.plan-features { list-style: none; padding: 0; margin: 0; }

/* Check marks: every list v2 drew with an inline check icon. */
.is-style-checklist li,
.plan-features li,
.bahero-proof li,
.dev-details li,
.cta-band-chips .chip,
.chip-check { display: flex; align-items: flex-start; gap: .55rem; }
.is-style-checklist li::before,
.plan-features li::before,
.bahero-proof li::before,
.dev-details li::before,
.chip-check::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: .3em;
  background: var(--ok-600);
  -webkit-mask: var(--ba-check) center / contain no-repeat;
  mask: var(--ba-check) center / contain no-repeat;
}
.bahero-proof li::before { background: var(--sky-400); margin-top: .25em; }

/* ── Disclosure: FAQ items and other <details> ──────────── */
.wp-block-details.faq-item > summary,
.wp-block-details.is-style-faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.wp-block-details.faq-item > summary::-webkit-details-marker { display: none; }
.wp-block-details.faq-item > summary::after,
.wp-block-details.is-style-faq > summary::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--ink-3);
  -webkit-mask: var(--ba-chevron) center / contain no-repeat;
  mask: var(--ba-chevron) center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease-out);
}
.wp-block-details.faq-item > summary:hover { color: var(--blue-600); }
.wp-block-details.faq-item > summary:hover::after,
.wp-block-details.faq-item[open] > summary::after { background: var(--blue-600); }
.wp-block-details.faq-item[open] > summary { color: var(--blue-600); }
.wp-block-details.faq-item[open] > summary::after { transform: rotate(180deg); }
.wp-block-details.faq-item > :not(summary) {
  padding-inline: 1.3rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.wp-block-details.faq-item > :not(summary):last-child { padding-bottom: 1.2rem; }
.wp-block-details.faq-item > :not(summary) + :not(summary) { margin-top: .7rem; }
.wp-block-details.faq-item a { font-weight: 600; }

/* The offer disclosures (hero, homepage, under plan grids). */
.bahero-offer-line::before,
.plans-offer-line::before,
.hv-offer-line::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--ba-gift) center / contain no-repeat;
  mask: var(--ba-gift) center / contain no-repeat;
}
.plans-offer-line::before { width: 16px; height: 16px; background: var(--blue-600); }

/* Compare table chevron (v2 used an inline SVG). */
.compare-chevron {
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--ba-chevron) center / contain no-repeat;
  mask: var(--ba-chevron) center / contain no-repeat;
}

/* ── Review stars (spans instead of inline SVG) ──────────── */
.rv-star {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--star);
  -webkit-mask: var(--ba-star) center / contain no-repeat;
  mask: var(--ba-star) center / contain no-repeat;
}
.rv-stars, .hv-rv-stars { display: inline-flex; gap: 2px; }
.hv-rv-quote > p, .rv-quote > p { margin: 0; }

/* ── Footer contact list icons ───────────────────────────── */
.footer-contact li { list-style: none; }
.footer-contact li::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-top: .3rem;
  background: var(--sky-400);
  -webkit-mask: var(--ba-phone) center / contain no-repeat;
  mask: var(--ba-phone) center / contain no-repeat;
}
.footer-contact .ba-contact--helpdesk::before { -webkit-mask-image: var(--ba-headset); mask-image: var(--ba-headset); }
.footer-contact .ba-contact--email::before { -webkit-mask-image: var(--ba-mail); mask-image: var(--ba-mail); }
.footer-contact { padding: 0; }

/* Footer headings: v2 styled .footer-col h2. */
.footer-col .footer-col-title {
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #E8F1F9;
  margin-bottom: 1rem;
}
.footer-bottom p { margin: 0; }
.ba-logo img { display: block; width: 181px; height: auto; }

/* Social links in the v2 bordered squares. */
.wp-block-social-links.footer-social { display: flex; gap: .5rem; margin: 1.5rem 0 0; padding: 0; }
.wp-block-social-links.footer-social .wp-social-link {
  background: none;
  color: #B9CBDD;
  border: 1px solid rgba(157, 180, 201, .2);
  border-radius: var(--r-sm);
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  margin: 0;
  transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast);
}
.wp-block-social-links.footer-social .wp-social-link a { padding: 0; color: inherit; display: grid; place-items: center; width: 100%; height: 100%; }
.wp-block-social-links.footer-social .wp-social-link svg { width: 18px; height: 18px; }
.wp-block-social-links.footer-social .wp-social-link:hover { color: #fff; border-color: var(--sky-400); background: rgba(95, 185, 238, .1); transform: none; }

/* ── Hero captions and markers drawn with masks ──────────── */
.bahero-caption .ico, .hv-hero-caption .ico { flex: none; }

/* ── Icon block ─────────────────────────────────────────── */
.ba-icon { display: inline-grid; place-items: center; }
.ba-icon svg { display: block; }
/* An icon on its own line above copy (v2: a <p> holding only an icon). It
   follows the text alignment of its container. */
.ba-icon.is-stacked { display: block; line-height: 0; }
.ba-icon.is-stacked svg { display: inline-block; }

/* ── Images from the media library ──────────────────────── */
.wp-block-image img { height: auto; }
.prose figure.wp-block-image figcaption { font-size: var(--fs-tiny); color: var(--ink-3); margin-top: .5rem; }
/* Photo captions on the homepage carry the map pin (was an inline SVG). */
.hv-photo figcaption::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--sky-400);
  -webkit-mask: var(--ba-pin) center / contain no-repeat;
  mask: var(--ba-pin) center / contain no-repeat;
}

/* ── Tables (core/table) ────────────────────────────────
   v2 classes (spec-table, compare-table) sit on the block's <figure>;
   restate their table-level rules on the inner <table>. */
.wp-block-table { margin: 0; overflow-x: auto; }
.wp-block-table.has-hidden-caption figcaption {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wp-block-table.spec-table { min-width: 0; width: auto; }
.wp-block-table.spec-table > table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 40rem; }
.wp-block-table.spec-table.bas-3922d3 > table,
.about-facts .wp-block-table.spec-table > table { min-width: 0; }
.prose .wp-block-table table,
.article-body .wp-block-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.article-body .wp-block-table th, .article-body .wp-block-table td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; vertical-align: top; }
.article-body .wp-block-table thead th { background: var(--mist); color: var(--ink); }

/* Inline arrow links inside running text. */
a.link-arrow:not(.wp-block-button__link)::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--ba-arrow) center / contain no-repeat;
  mask: var(--ba-arrow) center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease-out);
}
a.link-arrow:not(.wp-block-button__link):hover::after { transform: translateX(3px); }

/* ── Forms (contact form block) ─────────────────────────── */
.ba-form .notice { margin: 0 0 1rem; }
.notice-ok { border-left: 3px solid var(--ok-600); background: #EEF9F4; padding: .9rem 1.1rem; border-radius: var(--r-sm); color: var(--ink); }
.field-hint-center { text-align: center; margin-top: .6rem; }
.input[aria-invalid="true"] { border-color: #B42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.field-error { color: #B42318; font-size: var(--fs-tiny); margin-top: .35rem; }
.form-status:focus { outline: none; }

/* ── Plan cards from the data blocks ─────────────────────── */
.plan-note { font-size: var(--fs-small); margin-top: .9rem; color: var(--ink-2); }
.plan-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; margin-inline: auto; } /* v2 page.css width */
.plan-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .plan-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .plan-grid-2, .plan-grid-4 { grid-template-columns: 1fr; } }

/* ── Customer logos: one moving strip, two label styles ──────
   bluearctic/customer-logos prints the set twice (the copy is aria-hidden)
   and the track slides left by exactly one set, so the loop has no seam.
   Each set is at least as wide as the strip (100cqi), so a short list of
   logos never leaves a gap on a wide screen. Motion: hover pauses it, the
   round control beside the strip pauses it for keyboard and touch
   (WCAG 2.2.2), and prefers-reduced-motion shows one still, wrapped row.
   Logos stay grey and quiet; they are proof, not decoration. */
.ba-logos {
  --ba-logos-h: 2.5rem;
  --ba-logos-h-compact: 4.75rem; /* sol-logo.png's ink fills 57.5% of its canvas */
  --ba-logos-gap: clamp(3rem, 5.5vw, 5rem);
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 2rem;
  align-items: center;
  column-gap: .75rem;
}
.ba-logos-label {
  grid-column: 1 / -1;
  margin: 0 0 1.5rem;
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-2);
}
.ba-logos--band .ba-logos-label {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ba-logos-scroller {
  grid-column: 2;
  grid-row: 2;
  container-type: inline-size;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ba-logos-track {
  display: flex;
  width: max-content;
  animation: ba-logos-scroll 48s linear infinite;
}
.ba-logos-set {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-around;
  gap: var(--ba-logos-gap);
  min-width: 100cqi;
  padding-inline-end: var(--ba-logos-gap);
}
.ba-logos-set img {
  flex: none;
  height: var(--ba-logos-h);
  width: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(0);
  opacity: .48;
}
.ba-logos-set img.logo-compact { height: var(--ba-logos-h-compact); }
@keyframes ba-logos-scroll { to { transform: translateX(-50%); } }
@media (hover: hover) {
  .ba-logos-scroller:hover .ba-logos-track { animation-play-state: paused; }
}

/* Pause control: a real checkbox, visually hidden, drawn by its label as a
   small round button. Pause bars while moving, a play triangle when paused. */
.ba-logos-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}
.ba-logos-pause {
  grid-column: 3;
  grid-row: 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-3);
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.ba-logos-pause:hover { color: var(--ink); border-color: var(--line-2); }
.ba-logos-toggle:focus-visible + .ba-logos-pause { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.ba-logos-pause-icon {
  box-sizing: border-box;
  width: .625rem;
  height: .7rem;
  border-inline: 3px solid currentColor;
}
.ba-logos-toggle:checked + .ba-logos-pause .ba-logos-pause-icon {
  border: 0;
  margin-inline-start: 2px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.ba-logos-pause-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ba-logos-toggle:checked ~ .ba-logos-scroller .ba-logos-track { animation-play-state: paused; }

@media (max-width: 760px) {
  .ba-logos {
    --ba-logos-h: 2rem;
    --ba-logos-h-compact: 3.8rem;
    --ba-logos-gap: 2.5rem;
    grid-template-columns: minmax(0, 1fr) 2rem;
  }
  .ba-logos-scroller { grid-column: 1; }
  .ba-logos-pause { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .ba-logos { grid-template-columns: minmax(0, 1fr); }
  .ba-logos-scroller { grid-column: 1; -webkit-mask-image: none; mask-image: none; }
  .ba-logos-track { animation: none; width: auto; }
  .ba-logos-set {
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.75rem 2.75rem;
    min-width: 0;
    padding-inline-end: 0;
  }
  /* Nothing moves, so there is nothing to pause: the checkbox leaves the
     tab order along with its label. */
  .ba-logos-set[aria-hidden="true"],
  .ba-logos-toggle,
  .ba-logos-pause { display: none; }
}

/* ── Spacing contract for the Core proof blocks ─────────────
   In v2 the wrapper around a logo row or review rail carried its own
   margin (often inline). The Core blocks that replaced those wrappers
   own no outer margin, so the stack does: a logo strip or review block
   followed by anything keeps a component gap below it. Margins collapse,
   so a sibling asking for more space still gets it. */
.wp-block-bluearctic-customer-logos:not(:last-child) { margin-block-end: calc(var(--space-component) * 1.375); }
.wp-block-bluearctic-reviews:not(:last-child) { margin-block-end: var(--space-component); }

/* ── Reviews: cards variant (was a JS carousel in v2) ────── */
.rv--cards .rv-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-card-gap);
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}
.rv--cards .rv-card {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
.rv--cards .rv-quote { margin: 0; color: var(--ink); line-height: 1.65; flex: 1; }
.rv--cards .rv-meta { display: grid; gap: .1rem; font-size: var(--fs-small); color: var(--ink-3); }
.rv--cards .rv-name { font-style: normal; font-weight: 700; color: var(--ink); }
.rv--cards .rv-src { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 700px) {
  .rv--cards .rv-track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .5rem;
  }
  .rv--cards .rv-slide { scroll-snap-align: start; }
}
/* Featured reviews without JS: every quote shows. */
.hv-rv:not(.is-ready) .hv-rv-item { display: block; }
.hv-rv:not(.is-ready) .hv-rv-tabs { display: none; }

/* ── Editor-only placeholders (harmless on the front end) ─ */
.ba-placeholder { padding: 1rem; border: 1px dashed var(--line-2); border-radius: var(--r-sm); font-size: var(--fs-small); color: var(--ink-3); }

/* ── Chip rows: the paragraph the chips sit in steps out of the flex row ── */
.cta-band-chips > p,
.chip-row > p { display: contents; }
.chip::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--ok-600);
  -webkit-mask: var(--ba-check) center / contain no-repeat;
  mask: var(--ba-check) center / contain no-repeat;
}

/* ── Generic disclosures that had an inline chevron ─────── */
.dev-details > summary,
.wp-block-details:not(.faq-item):not(.compare) > summary { cursor: pointer; }
.dev-details > summary::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin-left: .35rem;
  background: currentColor;
  -webkit-mask: var(--ba-chevron) center / contain no-repeat;
  mask: var(--ba-chevron) center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease-out);
}
.dev-details[open] > summary::after { transform: rotate(180deg); }

/* App chips (WordPress, WooCommerce…) carry their brand mark via has-icon-*. */
.app-row li { --ba-icon-color: var(--blue-600); }
.app-row li::before { width: 15px; height: 15px; }

/* Icon list items inside v2 check lists: same size and nudge as the checks. */
.check-list [class*="has-icon-"]::before { width: 15px; height: 15px; margin-top: .3em; }
.check-list .has-icon-close { --ba-icon-color: var(--ink-3); }

/* Generic compare disclosures (VPS/VDS technical details): the chevron that
   v2 drew with an inline SVG. */
.wp-block-details.compare > summary::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--ink-3);
  -webkit-mask: var(--ba-chevron) center / contain no-repeat;
  mask: var(--ba-chevron) center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease-out);
}
.wp-block-details.compare[open] > summary::after { transform: rotate(180deg); background: var(--blue-600); }

/* Honesty rows: the paragraph steps out of the flex row; each span gets its check. */
.plans-honesty > p { display: contents; }
.plans-honesty > p > span { display: inline-flex; align-items: center; gap: .45rem; }
.plans-honesty > p > span::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: var(--ok-600);
  -webkit-mask: var(--ba-check) center / contain no-repeat;
  mask: var(--ba-check) center / contain no-repeat;
}

/* v2 put its buttons straight into the CTA row and sized them there
   (".hv-hero-ctas .btn { width: 100% }" on phones, ".plan-cta .btn"). On the
   front end the core wrapper steps out of the layout so those rules act on
   the same box they were written for. The editor keeps the wrapper. */
body:not(.editor-styles-wrapper) .wp-block-buttons > .wp-block-button { display: contents; }
.plan-cta .wp-block-buttons { display: flex; }
.plan-cta .wp-block-buttons .btn { width: 100%; }

/* Paragraphs that led with an icon (notices, "last updated" lines):
   keep their own display; the icon sits first. */
p[class*="has-icon-"] { display: flex; align-items: flex-start; gap: .6rem; }
p[class*="has-icon-"]::before { margin-top: .25em; }
.notice[class*="has-icon-"]::before { --ba-icon-color: var(--blue-600); width: 16px; height: 16px; }
.notice-warn[class*="has-icon-"]::before { --ba-icon-color: #B54708; }

/* A row of inline items (chips, index links) kept in one paragraph: the
   paragraph steps out of the box tree so the v2 flex/grid parent lays them out. */
p.ba-run { display: contents; }
.legal-index-go[class*="has-icon-"]::before { width: 16px; height: 16px; }

/* <mark> carries v2's "New" tags; drop the browser highlighter. */
mark { background-color: transparent; color: inherit; }

/* ── Links inside running text (WCAG 1.4.1) ────────────────
   v2 relied on colour alone, which fails against the grey body copy.
   A quiet underline keeps the look and makes links identifiable.
   Standalone links (nav, footer, cards, buttons) are untouched. */
.site-main :where(p, li, td, dd, figcaption, .faq-item, .notice) a:not([class]),
.site-main .plan-renewal a,
.site-main .plans-footnote a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: .18em;
}
.site-main :where(p, li, td, dd, figcaption, .faq-item, .notice) a:not([class]):hover { text-decoration-color: currentColor; }

/* ── Step lists: the title line ─────────────────────────────
   A v2 step title was a bare <strong> (display: block) directly above
   the step's <p>. The conversion wraps it in a paragraph, which must not
   take the step copy's small size or a paragraph gap such as
   .split-copy p + p. (abuse, compliance, pro-services,
   website-maintenance, website-migration) */
.step-list p:has(> strong:only-child) { font-size: inherit; color: var(--ink); }
.step-list p:has(> strong:only-child) + p { margin-top: 0; }

/* ── Plan summary (bluearctic/plan-summary) ─────────────────
   The homepage plan rows. Same material as the product cards
   (.hv-managed-card): white card, hairline border, soft shadow, a faint
   arctic wash in the corner. The popular plan is the only filled card and,
   by default, the only primary button in the row.

   Billing switch: both terms are in the markup; the checked radio hides
   the other one. Browsers without :has() keep the default term the block
   printed and lose the switch, never showing both prices. */
.ba-ps + .ba-ps { margin-top: clamp(3rem, 5.5vw, 4.25rem); }
.ba-ps-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1.5rem;
}
.ba-ps-intro { max-width: 38rem; }
.ba-ps-kicker {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .7rem;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.ba-ps-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-md);
  border: 1px solid var(--ice-200);
  background: linear-gradient(135deg, var(--ice-100), var(--blue-100));
  color: var(--blue-600);
}
.ba-ps-title { margin: 0 0 .4rem; font-size: clamp(1.4rem, 2.1vw, 1.75rem); line-height: 1.15; letter-spacing: -.022em; }
.ba-ps-text { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2); }
.ba-ps-note {
  margin: 0;
  padding: .45rem .95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--mist);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-2);
}

.ba-ps-switch {
  display: inline-flex;
  margin: 0;
  padding: .25rem;
  min-inline-size: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--mist);
}
.ba-ps-opt { position: relative; display: flex; cursor: pointer; }
.ba-ps-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ba-ps-opt span {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1.05rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-2);
  transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.ba-ps-opt em,
.ba-ps-save {
  font-style: normal;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .12rem .5rem;
  border-radius: var(--r-pill);
  background: #E3F4ED;
  color: #0A6B4B;
}
.ba-ps-opt input:checked + span { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(8, 25, 45, .1), 0 0 0 1px var(--line); }
.ba-ps-opt input:focus-visible + span { outline: 2px solid var(--blue-600); outline-offset: 2px; }

.ba-ps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-card-gap);
}
/* Subgrid rows line the prices, spec lists and buttons up across cards. */
.ba-ps-card {
  position: relative;
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  overflow: hidden;
  padding: 1.6rem 1.5rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med);
}
.ba-ps-card::before {
  content: "";
  position: absolute;
  inset: -45% -35% auto auto;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(95, 185, 238, .13), transparent);
  pointer-events: none;
}
.ba-ps-card > * { position: relative; }
@media (hover: hover) {
  .ba-ps-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--ice-200); }
}
.ba-ps-card.is-popular {
  border-color: var(--blue-500);
  background: linear-gradient(180deg, #F3F8FF 0%, var(--paper) 45%);
  box-shadow: 0 0 0 1px var(--blue-500), var(--shadow-lift);
}
.ba-ps-card.is-popular:hover { border-color: var(--blue-500); }
.ba-ps-flag {
  position: absolute;
  top: 1.45rem;
  right: 1.4rem;
  margin: 0;
  padding: .2rem .65rem;
  border-radius: var(--r-pill);
  background: var(--blue-600);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.ba-ps-name { margin: 0 0 .25rem; font-size: 1.2rem; letter-spacing: -.012em; }
.ba-ps-for { margin: 0 0 1.1rem; font-size: var(--fs-tiny); line-height: 1.5; color: var(--ink-2); }
.ba-ps-price { margin: 0; font-family: var(--font-display); line-height: 1; color: var(--ink); }
.ba-ps-amount { font-size: clamp(2rem, 2.6vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; }
.ba-ps-period { margin-left: .2rem; font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; color: var(--ink-3); }
.ba-ps-terms { margin: .55rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--ink-3); }
.ba-ps-save { display: inline-block; margin-left: .3rem; }
.ba-ps-specs,
.ba-ps-common { list-style: none; margin: 0; padding: 0; }
.ba-ps-specs {
  display: grid;
  align-content: start;
  gap: .45rem;
  margin: 1.15rem 0 1.4rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink);
}
.ba-ps-specs li,
.ba-ps-common li { display: flex; align-items: flex-start; gap: .6rem; }
.ba-ps-specs li::before,
.ba-ps-common li::before {
  content: "";
  flex: none;
  width: .38rem;
  height: .68rem;
  margin: .28rem .15rem 0 .2rem;
  border: solid var(--blue-600);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ba-ps-cta { align-self: end; }
.ba-ps-cta .btn { width: 100%; }

.ba-ps-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  margin-top: 1.35rem;
}
.ba-ps-common { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: var(--fs-tiny); color: var(--ink-2); }
.ba-ps-common li::before { margin-top: .22rem; }
.ba-ps-more { margin: 0; font-size: var(--fs-small); }

/* The switch. */
.ba-ps:has(.ba-ps-term-y:checked) .ba-ps-m,
.ba-ps:has(.ba-ps-term-m:checked) .ba-ps-y { display: none; }
@supports not selector(:has(*)) {
  .ba-ps--default-yearly .ba-ps-m,
  .ba-ps--default-monthly .ba-ps-y,
  .ba-ps-switch { display: none; }
}

@media (max-width: 900px) {
  .ba-ps-grid { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-inline: auto; }
  .ba-ps-head { max-width: 34rem; margin-inline: auto; }
  .ba-ps-foot { max-width: 34rem; margin-inline: auto; }
}
/* One column (tablet and phone): six full cards would be a long scroll, so
   each card tightens: price beside the name, specs as one wrapped line.
   Nothing is hidden. */
@media (max-width: 560px) {
  .ba-ps-head { flex-direction: column; align-items: flex-start; }
  .ba-ps-switch { display: flex; width: 100%; }
  .ba-ps-opt { flex: 1 1 auto; }
  .ba-ps-opt span { width: 100%; justify-content: center; padding-inline: .75rem; }
}
@media (max-width: 900px) {
  .ba-ps-card {
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "flag flag"
      "name price"
      "for price"
      "terms terms"
      "specs specs"
      "cta cta";
    column-gap: 1rem;
    padding: 1.25rem 1.2rem 1.2rem;
  }
  .ba-ps-flag { position: static; grid-area: flag; justify-self: start; margin-bottom: .6rem; }
  .ba-ps-name { grid-area: name; }
  .ba-ps-for { grid-area: for; margin-bottom: .6rem; }
  .ba-ps-price { grid-area: price; align-self: start; text-align: right; }
  .ba-ps-amount { font-size: 1.85rem; }
  .ba-ps-terms { grid-area: terms; margin-top: 0; }
  .ba-ps-specs {
    grid-area: specs;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1.1rem;
    margin: .85rem 0 1rem;
    padding-top: .85rem;
    font-size: var(--fs-tiny);
  }
  .ba-ps-cta { grid-area: cta; }
}
@media (prefers-reduced-motion: reduce) {
  .ba-ps-card, .ba-ps-opt span { transition: none; }
  .ba-ps-card:hover { transform: none; }
}

/* ── Hosting plans (bluearctic/hosting-plans) ───────────────
   The homepage hosting component: Web Hosting | Managed WordPress in the
   plan-summary segmented style (larger, with icons), one family shown at a
   time. The checked radio picks the family with :has(); no script.

   Both intros share grid row 1 and both plan sets row 2. The inactive
   intro is visibility:hidden (keeps its space, leaves the accessibility
   tree), so the row is as tall as the taller intro and the cards start at
   the same height for either family: the selector, the billing control and
   the top of the cards never move when switching. The inactive plans are
   display:none. Without :has() the selector is hidden and both families
   are shown in turn, each at its default term. */
.ba-hp-family {
  display: flex;
  width: fit-content;
  margin: 0 auto clamp(1.75rem, 3.2vw, 2.5rem);
  padding: .3rem;
}
.ba-hp-family .ba-ps-opt span { gap: .55rem; padding: .7rem 1.45rem; font-size: 1rem; }
.ba-hp-opt-ico { flex: none; color: var(--ink-3); transition: color var(--dur-fast); }
.ba-hp-family input:checked + span .ba-hp-opt-ico { color: var(--blue-600); }

.ba-hp-stage { display: grid; grid-template-columns: minmax(0, 1fr); }
.ba-hp-panel { display: contents; }
.ba-hp-head { grid-row: 1; grid-column: 1; width: 100%; }
.ba-hp-head .ba-ps-intro { align-self: flex-start; }
.ba-hp-body { grid-row: 2; grid-column: 1; min-width: 0; animation: ba-hp-in var(--dur-med) var(--ease-out); }
@keyframes ba-hp-in { from { opacity: 0; } }
.ba-hp.has-family:has(.ba-hp-pick-shared:checked) .ba-hp-panel--wordpress > .ba-hp-head,
.ba-hp.has-family:has(.ba-hp-pick-wordpress:checked) .ba-hp-panel--shared > .ba-hp-head { visibility: hidden; }
.ba-hp.has-family:has(.ba-hp-pick-shared:checked) .ba-hp-panel--wordpress > .ba-hp-body,
.ba-hp.has-family:has(.ba-hp-pick-wordpress:checked) .ba-hp-panel--shared > .ba-hp-body { display: none; }

/* What every plan in the family includes: one quiet band under the cards,
   then the family's comparison link. */
.ba-hp-foot { display: grid; justify-items: center; gap: 1.1rem; margin-top: 1.5rem; }
.ba-hp-common {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: 1rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .72);
}
.ba-hp-common-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.ba-hp-common .ba-ps-common {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: .5rem 2rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.ba-hp-common .ba-ps-common.is-cols-1 { grid-template-columns: auto; }
.ba-hp-common .ba-ps-common.is-cols-2 { grid-template-columns: repeat(2, auto); }
.ba-hp-common .ba-ps-common li::before { margin-top: .3rem; }
.ba-hp-more { text-align: center; }

@supports not selector(:has(*)) {
  .ba-hp-family { display: none; }
  .ba-hp-stage,
  .ba-hp-panel { display: block; }
  .ba-hp-panel + .ba-hp-panel { margin-top: clamp(3rem, 5.5vw, 4.25rem); }
}
@media (max-width: 900px) {
  .ba-hp-foot { max-width: 34rem; margin-inline: auto; }
  .ba-hp-common { flex-direction: column; align-items: flex-start; padding: 1.1rem 1.2rem; }
  .ba-hp-common .ba-ps-common,
  .ba-hp-common .ba-ps-common[class*="is-cols-"] { grid-template-columns: minmax(0, 1fr); justify-content: start; gap: .5rem; }
  /* One resource per line: four short lines scan faster than a wrapped row. */
  .ba-hp .ba-ps-specs { display: grid; gap: .35rem; }
}
/* Phones: the selector spans the width, each option sized to its label
   ("Managed WordPress" needs more room than "Web Hosting"); each intro
   keeps its control at the bottom of the shared row, right above the
   cards, whichever intro is taller. */
@media (max-width: 560px) {
  .ba-hp-family { width: 100%; }
  .ba-hp-family .ba-ps-opt { flex: 1 1 auto; }
  .ba-hp-family .ba-ps-opt span { gap: .4rem; padding: .75rem .55rem; font-size: .9375rem; }
  .ba-hp-head .ba-ps-switch,
  .ba-hp-head .ba-ps-note { margin-top: auto; }
}
@media (max-width: 374px) {
  .ba-hp-opt-ico { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ba-hp-body { animation: none; }
  .ba-hp-opt-ico { transition: none; }
}

/* ── Breadcrumbs (bluearctic/breadcrumbs) ───────────────────
   The trail is an ordered list inside nav.crumbs (page.css, hero.css
   colours). Separators are aria-hidden; the current page is aria-current. */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: inline-flex; align-items: center; gap: .4rem; }
.crumbs-sep { display: inline-flex; }
.crumbs [aria-current="page"] { color: inherit; }

/* Spacing contract: copy that follows a stat row (a note, a link on) keeps
   a component gap from the cards, as copy under a feature grid does. */
.stat-row + p { margin-top: 1.5rem; }
/* A feature card used as the media side of a split row. */
.split-media > .feature-card { align-self: center; }

/* Eyebrow rhythm. An eyebrow labels what follows it, so it always keeps a
   small gap below; without this it sat 2–6px above its content wherever no
   context rule spaced it (book sidebar cards, pro-services, affiliate).
   Zero specificity, and the hero is left out: section heads, the page hero
   and split rows keep their own spacing. */
:where(.eyebrow:not(:last-child):not(.bahero .eyebrow)) { margin-bottom: .75rem; }