/* ==========================================================================
   ARCHITECT 3D — storefront design system
   Executes the approved mockups over Hummingbird / Bootstrap 5.3.

   Tokens are taken from the mockups, which in turn keep the #189AD0 brand blue
   from the existing WooCommerce sites so the rebuild reads as the same brand.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root,
[data-bs-theme="light"] {
  --a3d-brand:      #189AD0;
  --a3d-brand-deep: #0F7BA8;
  --a3d-deep:       #0C1E29;
  --a3d-deep-2:     #0A1922;
  --a3d-paper:      #FAF9F6;
  --a3d-surface:    #FFFFFF;
  --a3d-ink:        #14171A;
  --a3d-muted:      #4A5259;
  --a3d-line:       #E3E1DC;
  --a3d-line-2:     #D8D5CE;
  --a3d-coral:      #EB5443;

  --a3d-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --a3d-body:    'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;

  --a3d-gutter: clamp(20px, 5vw, 72px);
  --a3d-max:    1440px;

  --bs-primary: #189AD0;
  --bs-primary-rgb: 24, 154, 208;
  --bs-link-color: #0F7BA8;
  --bs-link-color-rgb: 15, 123, 168;
  --bs-link-hover-color: #14171A;
  --bs-body-color: #14171A;
  --bs-body-bg: #FAF9F6;
  --bs-border-color: #E3E1DC;
  --bs-border-radius: 3px;
  --bs-border-radius-sm: 2px;
  --bs-border-radius-lg: 4px;
  --bs-font-sans-serif: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------------------
   1. Foundations
   -------------------------------------------------------------------------- */

/* Hummingbird parks its off-canvas search and menu panels off the right edge.
   The clip has to sit on the root: `overflow` set on body only reaches the
   viewport by propagation, and `clip` is explicitly excluded from that, so a
   rule on body alone left the document 89px wide on a phone. `clip` rather
   than `hidden` keeps position: sticky working inside. */
html { overflow-x: clip; }

body {
  font-family: var(--a3d-body);
  background: var(--a3d-paper);
  color: var(--a3d-ink);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--a3d-display);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--a3d-ink);
  text-wrap: balance;
}
h1, .h1 { font-size: clamp(2rem, 4vw, 3.2rem);  line-height: 1.06; }
h2, .h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.12; }
h3, .h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }

p { line-height: 1.62; }
a { color: var(--a3d-brand-deep); text-decoration: none; }
a:hover { color: var(--a3d-ink); }
:focus-visible { outline: 2px solid var(--a3d-brand); outline-offset: 2px; }

/* The mockups are full-bleed with a wide measure; Hummingbird's Bootstrap
   containers cap everything at ~960px, which is the single biggest reason the
   stock pages read as a narrow generic grid. */
.container, .container-md, .container-lg, .container-xl, .container-fluid {
  max-width: var(--a3d-max);
  padding-inline: var(--a3d-gutter);
  width: 100%;
}
.a3d-shell {
  max-width: var(--a3d-max);
  margin-inline: auto;
  padding-inline: var(--a3d-gutter);
  width: 100%;
}

/* --------------------------------------------------------------------------
   2. Header — utility bar, masthead, navigation
   -------------------------------------------------------------------------- */

#header { background: var(--a3d-deep); color: #fff; border: 0; position: relative; z-index: 40; }

/* --- utility bar --- */
.a3d-utility {
  background: var(--a3d-deep-2);
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: .82rem;
}
.a3d-utility__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 42px; }
.a3d-utility__left, .a3d-utility__right { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 26px); }
.a3d-utility, .a3d-utility a { color: rgba(255,255,255,.6); }
.a3d-utility a:hover { color: #fff; }
.a3d-utility__platform { display: none; align-items: center; gap: 7px; }
.a3d-utility__platform img { opacity: .55; filter: brightness(0) invert(1); }
@media (min-width: 768px) { .a3d-utility__platform { display: inline-flex; } }
.a3d-utility__link { white-space: nowrap; }
@media (max-width: 991.98px) {
  /* The child selector matters: `.a3d-utility__right > *` a few rules up sets
     display:flex, and a bare .a3d-utility__link cannot outrank it. */
  .a3d-utility__right > .a3d-utility__link { display: none; }
  /* Sign-in and cart already have mobile buttons in the masthead; the desktop
     modules here rendered empty and pushed the language selector off screen. */
  .a3d-utility__right > #_desktop_ps_customersignin,
  .a3d-utility__right > #_desktop_ps_shoppingcart { display: none; }
  .a3d-utility__inner { gap: 10px; }
  .a3d-utility__left, .a3d-utility__right { gap: 10px; min-width: 0; }
  .a3d-picker__button span { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .a3d-utility__right .form-select { max-width: 12ch; }
}

/* Hummingbird's language selector and sign-in land here; flatten them so they
   sit on the bar rather than bringing their own card. */
.a3d-utility__right .header-block,
.a3d-utility__right > div { display: flex; align-items: center; }
.a3d-utility__right .dropdown-menu { background: var(--a3d-deep); border: 1px solid rgba(255,255,255,.14); }
.a3d-utility__right .dropdown-item { color: rgba(255,255,255,.75); font-size: .85rem; }
.a3d-utility__right .dropdown-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.a3d-utility__right .material-icons { font-size: 19px; }

/* --- region picker --- */
.a3d-picker { position: relative; }
.a3d-picker__button {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 6px 0;
  color: rgba(255,255,255,.72); font: inherit; cursor: pointer;
}
.a3d-picker__button:hover { color: #fff; }
.a3d-picker__flag { border-radius: 2px; display: block; }
.a3d-picker__caret { transition: transform .15s ease; }
.a3d-picker.is-open .a3d-picker__caret { transform: rotate(180deg); }
.a3d-utility .a3d-picker__menu {
  position: absolute; top: 100%; left: 0; z-index: 60;
  margin: 4px 0 0; padding: 6px; list-style: none; min-width: 232px;
  background: var(--a3d-deep); border: 1px solid rgba(255,255,255,.16);
  border-radius: 4px; box-shadow: 0 18px 40px rgba(0,0,0,.35);
  display: none;
}
.a3d-utility .a3d-picker.is-open .a3d-picker__menu { display: block; }
.a3d-picker__menu a {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 3px; color: rgba(255,255,255,.8); font-size: .88rem;
}
.a3d-picker__menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
.a3d-picker__menu a[aria-current] { background: rgba(24,154,208,.18); color: #fff; }
.a3d-picker__menu em { font-style: normal; font-size: .76rem; color: rgba(255,255,255,.45); }

/* --- masthead --- */
.a3d-masthead { background: var(--a3d-deep); }
.a3d-masthead__inner {
  display: flex; align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
  min-height: 78px; padding-block: 14px;
}
.a3d-masthead__brand { flex: 0 0 auto; }
.a3d-masthead__h1 { margin: 0; font-size: inherit; line-height: 0; }
.a3d-masthead__logo { display: block; }
.a3d-masthead__logo img { height: 22px; width: auto; display: block; }
.a3d-masthead__nav { flex: 1 1 auto; display: flex; align-items: center; gap: 20px; min-width: 0; }
.a3d-masthead__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* --- main navigation --- */
.a3d-nav { display: none; }
/* 1250, not 992: seven items, a search box and the wordmark have never fitted
   in 992px. Below this the burger drawer takes over — see section 59. */
@media (min-width: 1250px) { .a3d-nav { display: block; } }
.a3d-nav__list { display: flex; align-items: center; gap: clamp(6px, 1.4vw, 20px); margin: 0; padding: 0; list-style: none; }
.a3d-nav__item { position: relative; }
.a3d-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.8); font-size: .93rem; font-weight: 500;
  padding: 10px 2px; border-bottom: 2px solid transparent; white-space: nowrap;
}
.a3d-nav__link:hover { color: #fff; border-bottom-color: var(--a3d-brand); }
.a3d-nav__item.is-current > .a3d-nav__link { color: #fff; border-bottom-color: var(--a3d-brand); }
.a3d-nav__caret { transition: transform .15s ease; opacity: .6; }

.a3d-nav__panel {
  position: absolute; top: 100%; left: -14px; z-index: 60;
  min-width: 264px; padding: 8px;
  background: #fff; border: 1px solid var(--a3d-line);
  border-radius: 4px; box-shadow: 0 22px 48px rgba(12,30,41,.22);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
/* `hover: hover` used to gate this. A touchscreen laptop reports `none` for
   that feature even with a mouse attached, so the dropdowns never opened on
   that hardware. Width alone now decides, and a3d.js drives the same state via
   mouseenter so the behaviour does not depend on this rule at all. */
@media (min-width: 1250px) {
  .a3d-nav__item.has-children:hover > .a3d-nav__panel { opacity: 1; visibility: visible; transform: none; }
  .a3d-nav__item.has-children:hover > .a3d-nav__link .a3d-nav__caret { transform: rotate(180deg); }
}
.a3d-nav__item.is-open > .a3d-nav__panel { opacity: 1; visibility: visible; transform: none; }
.a3d-nav__sub { margin: 0; padding: 0; list-style: none; }
.a3d-nav__sub a { display: block; padding: 9px 12px; border-radius: 3px; color: var(--a3d-ink); }
.a3d-nav__sub a:hover { background: var(--a3d-paper); color: var(--a3d-brand-deep); }
.a3d-nav__sub-label { display: block; font-size: .92rem; font-weight: 500; }
.a3d-nav__sub-more { display: block; margin-top: 2px; font-size: .78rem; color: var(--a3d-muted); }

/* --- search, account, cart --- */
.a3d-masthead__nav .header-block,
.a3d-masthead__nav > div { display: flex; align-items: center; }
.a3d-masthead__nav form { margin-left: auto; }
.a3d-masthead__nav input[type="text"],
.a3d-masthead__nav .form-control {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; min-height: 40px; min-width: 220px; border-radius: 3px;
}
.a3d-masthead__nav input::placeholder { color: rgba(255,255,255,.45); }
/* The magnifier is absolutely positioned at left:.75rem and Hummingbird pads
   .ps-searchbar__input by 2.5rem to clear it. That padding was losing to an
   UNLAYERED `.form-control{padding:.7rem .9rem}` late in theme.css: for normal
   declarations an unlayered rule outranks every @layer, so the layered 2.5rem
   never applied and the placeholder ran under the icon. Restated here, where
   the brand layer is also unlayered and simply comes later in source order. */
.a3d-masthead__nav .ps-searchbar__input,
.a3d-masthead__nav .ps-searchbar input[type="text"] {
  padding-inline-start: 2.6rem;
  padding-inline-end: 2.4rem;
}
.a3d-masthead__nav .ps-searchbar__magnifier { color: rgba(255,255,255,.55); pointer-events: none; }
.a3d-masthead__nav .ps-searchbar__clear { color: rgba(255,255,255,.7); }
.a3d-masthead__tools a,
.a3d-masthead__tools button { color: rgba(255,255,255,.85); }
.a3d-masthead__tools a:hover { color: #fff; }
.a3d-masthead__tools .material-icons { font-size: 22px; }
.a3d-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: #fff; background: none; border: 0; cursor: pointer;
}
.a3d-cart-badge {
  background: var(--a3d-brand); color: #fff; font-size: .7rem; font-weight: 600;
  border-radius: 999px; padding: 1px 6px; margin-left: -6px;
}

/* --- mobile drawer --- */
.a3d-burger { flex-direction: column; gap: 5px; }
.a3d-burger span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; }
@media (max-width: 1249.98px) {
  body.a3d-menu-open .a3d-nav {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--a3d-deep-2); border-top: 1px solid rgba(255,255,255,.1);
    padding: 8px var(--a3d-gutter) 20px; z-index: 55;
    max-height: 74vh; overflow-y: auto;
  }
  body.a3d-menu-open .a3d-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  body.a3d-menu-open .a3d-nav__link { justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  body.a3d-menu-open .a3d-nav__panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none; background: transparent; border: 0; box-shadow: none; padding: 0 0 8px;
  }
  body.a3d-menu-open .a3d-nav__item.is-open > .a3d-nav__panel { display: block; }
  body.a3d-menu-open .a3d-nav__sub a { color: rgba(255,255,255,.72); padding-left: 14px; }
  body.a3d-menu-open .a3d-nav__sub a:hover { background: rgba(255,255,255,.06); color: #fff; }
  body.a3d-menu-open .a3d-nav__sub-more { color: rgba(255,255,255,.42); }
  .a3d-masthead__nav form { margin-left: 0; }
  .a3d-masthead__nav input[type="text"] { min-width: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */

.btn {
  font-family: var(--a3d-body);
  font-weight: 600;
  border-radius: 3px;
  padding: .78rem 1.8rem;
  line-height: 1.2;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--a3d-brand); border-color: var(--a3d-brand); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--a3d-brand-deep); border-color: var(--a3d-brand-deep); color: #fff;
}
.btn-secondary, .btn-outline-primary {
  background: transparent; border-color: var(--a3d-brand); color: var(--a3d-brand-deep);
}
.btn-secondary:hover, .btn-outline-primary:hover { background: var(--a3d-brand); border-color: var(--a3d-brand); color: #fff; }
.a3d-btn-ghost { border: 1px solid rgba(255,255,255,.24); color: #fff; background: transparent; }
.a3d-btn-ghost:hover { background: rgba(255,255,255,.09); color: #fff; }

/* --------------------------------------------------------------------------
   4. Homepage
   -------------------------------------------------------------------------- */

.a3d-home { max-width: none; padding: 0; }

.a3d-hero { background: var(--a3d-deep); color: #fff; padding-block: clamp(48px, 7vw, 92px); }
.a3d-hero__inner {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 64px); align-items: center;
  max-width: var(--a3d-max); margin-inline: auto; padding-inline: var(--a3d-gutter);
}
.a3d-hero__copy { display: flex; flex-direction: column; gap: 24px; }
.a3d-eyebrow {
  align-self: flex-start; padding: 7px 14px;
  background: rgba(24,154,208,.14); border: 1px solid rgba(24,154,208,.35);
  border-radius: 999px; font-size: .76rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #5FC4EC;
}
.a3d-hero__title { margin: 0; font-size: clamp(2.1rem, 4.4vw, 3.75rem); line-height: 1.04; letter-spacing: -.035em; color: #fff; }
.a3d-hero__lede { margin: 0; max-width: 34em; font-size: clamp(1rem, 1.15vw, 1.18rem); color: rgba(255,255,255,.72); }
.a3d-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.a3d-hero__meta { display: flex; flex-wrap: wrap; gap: 22px; margin: 6px 0 0; padding: 0; list-style: none; font-size: .85rem; color: rgba(255,255,255,.55); }
.a3d-hero__art { background: var(--a3d-deep-2); border: 1px solid rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; }
.a3d-hero__art svg { display: block; width: 100%; height: auto; }

.a3d-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-bottom: 1px solid var(--a3d-line); }
.a3d-strip__item { display: flex; flex-direction: column; gap: 4px; padding: 26px var(--a3d-gutter); border-right: 1px solid var(--a3d-line); }
.a3d-strip__icon { display: block; width: 26px; height: 26px; margin-bottom: 8px; color: var(--a3d-brand); }
.a3d-strip__icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.a3d-strip__item:last-child { border-right: 0; }
.a3d-strip__item b { font-family: var(--a3d-display); font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 700; letter-spacing: -.03em; }
.a3d-strip__item span { font-size: .83rem; color: var(--a3d-muted); }

.a3d-editions, .a3d-caps { padding-block: clamp(48px, 6vw, 88px); padding-inline: var(--a3d-gutter); }
.a3d-editions { background: var(--a3d-paper); }
.a3d-caps { background: #fff; border-top: 1px solid var(--a3d-line); }
.a3d-section-head { max-width: 42ch; margin: 0 auto 34px; padding: 0; }
.a3d-editions > *, .a3d-caps > * { max-width: var(--a3d-max); margin-inline: auto; }
.a3d-section-head { margin-inline: 0; }
.a3d-section-head h2 { margin: 0; }

.a3d-caps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.a3d-cap { padding: 30px; background: var(--a3d-paper); border: 1px solid var(--a3d-line); border-radius: 4px; }
.a3d-cap h3 { margin: 0 0 10px; }
.a3d-cap p { margin: 0; font-size: .95rem; color: var(--a3d-muted); }

.a3d-upgrade { background: var(--a3d-deep); color: #fff; padding-block: clamp(44px, 5vw, 76px); padding-inline: var(--a3d-gutter); }
.a3d-upgrade__inner { max-width: 660px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.a3d-upgrade__inner h2 { margin: 0; color: #fff; }
.a3d-upgrade__inner p { margin: 0; color: rgba(255,255,255,.72); }

/* --------------------------------------------------------------------------
   5. Product cards
   -------------------------------------------------------------------------- */

.products, .product_list, #js-product-list .products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.product-miniature { width: auto !important; max-width: none !important; }
.product-miniature .card, .product-miniature .thumbnail-container {
  height: 100%;
  background: var(--a3d-surface);
  border: 1px solid var(--a3d-line);
  border-radius: 4px;
  box-shadow: none;
  transition: border-color .15s ease, transform .15s ease;
}
.product-miniature .card:hover, .product-miniature .thumbnail-container:hover {
  border-color: var(--a3d-brand);
}
.product-title a, .product-miniature .product-title a {
  font-family: var(--a3d-display); font-weight: 600; letter-spacing: -.02em; color: var(--a3d-ink);
}
.product-price-and-shipping .price, .product-price, .current-price-value {
  font-family: var(--a3d-display); font-weight: 700; letter-spacing: -.03em; color: var(--a3d-ink);
}
.regular-price { color: var(--a3d-muted); }
.product-flag { border-radius: 2px; font-weight: 600; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.product-flag.discount, .product-flag.on-sale, .discount-percentage { background: var(--a3d-coral); border-color: var(--a3d-coral); color: #fff; }
.product-flag.new { background: var(--a3d-brand); border-color: var(--a3d-brand); color: #fff; }

/* no reviews yet: an empty star rating reads as broken, so hide it until there are */
.product-miniature .comments_note,
.product-miniature .star_content,
.product-miniature [class*="product-comment"] { display: none !important; }

/* --------------------------------------------------------------------------
   6. Product page — the buy box from the mockup
   -------------------------------------------------------------------------- */

#product #wrapper > .container,
#product .product__container { max-width: var(--a3d-max); margin-inline: auto; }

.product__container {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-block: clamp(28px, 4vw, 52px);
}
.product__left img { border: 1px solid var(--a3d-line); border-radius: 4px; background: #fff; }
.product__right { display: flex; flex-direction: column; gap: 20px; }
.product__name { font-size: clamp(1.6rem, 2.6vw, 2.3rem); letter-spacing: -.032em; margin: 0; }

.product__right .product-prices,
.product__right .product__prices {
  padding: 24px;
  background: var(--a3d-paper);
  border: 1px solid var(--a3d-line);
  border-radius: 4px;
  margin: 0;
}
.product__right .current-price-value,
.product__right .product-price {
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  line-height: 1;
}
.product__description-short { color: var(--a3d-muted); font-size: 1.02rem; }

.product__actions .btn-add-to-cart,
.product__actions button[type="submit"] { width: 100%; padding-block: 1rem; font-size: 1.02rem; }

/* digital goods: shipping and delivery copy does not apply */
.product-additional-info .delivery-information,
#delivery, .product__delivery-information { display: none; }

.product__bottom { padding-block: clamp(28px, 4vw, 56px); }
.accordion-button { font-family: var(--a3d-display); font-weight: 600; letter-spacing: -.02em; }
.accordion-button:not(.collapsed) { background: var(--a3d-paper); color: var(--a3d-ink); box-shadow: none; }

.a3d-assurance {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px 24px; background: #fff;
  border: 1px solid var(--a3d-line); border-radius: 4px;
  font-size: .93rem; color: var(--a3d-muted);
}
.a3d-assurance b { color: var(--a3d-ink); font-weight: 600; }
.a3d-assurance__row { display: flex; align-items: baseline; gap: 10px; }
.a3d-assurance__row::before { content: ""; flex: 0 0 6px; height: 6px; border-radius: 50%; background: var(--a3d-brand); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   7. Category pages
   -------------------------------------------------------------------------- */

#category #wrapper > .container { max-width: var(--a3d-max); }
.block-category, #category .page-header { border: 0; background: transparent; padding-inline: 0; }
#category .page-header h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: .4rem; }
.breadcrumb { background: transparent; padding-left: 0; font-size: .84rem; color: var(--a3d-muted); }

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */

.a3d-footer { background: var(--a3d-deep); color: rgba(255,255,255,.72); padding-block: clamp(40px, 5vw, 64px) 28px; margin-top: clamp(40px, 6vw, 80px); }
.a3d-wordmark { font-family: var(--a3d-display); font-weight: 700; font-size: 1.18rem; letter-spacing: -.02em; color: #fff; }
.a3d-wordmark b { color: var(--a3d-brand); font-weight: 700; }
.a3d-footer__brand p { margin: 12px 0 0; max-width: 34ch; font-size: .9rem; color: rgba(255,255,255,.55); }
.a3d-footer__col { display: flex; flex-direction: column; gap: 10px; }
.a3d-footer__col h3 { margin: 0 0 2px; font-size: .74rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.a3d-footer__col a { color: rgba(255,255,255,.74); font-size: .92rem; }
.a3d-footer__col a:hover { color: #fff; }
.a3d-footer__modules { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1); }
.a3d-footer__modules a { color: rgba(255,255,255,.7); }
.a3d-footer__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: .82rem; color: rgba(255,255,255,.42);
}
#footer, .footer-container { background: var(--a3d-deep); padding: 0; margin: 0; }

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .products, #js-product-list .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a3d-caps__grid { grid-template-columns: repeat(2, 1fr); }
  .a3d-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 992px) {
  .product__container { grid-template-columns: 1fr; }
  .a3d-hero__inner { grid-template-columns: 1fr; }
  .a3d-hero__art { order: -1; }
  .a3d-strip { grid-template-columns: repeat(2, 1fr); }
  .a3d-strip__item:nth-child(2) { border-right: 0; }
  .a3d-strip__item:nth-child(-n+2) { border-bottom: 1px solid var(--a3d-line); }
}
@media (max-width: 640px) {
  .products, #js-product-list .products, .a3d-caps__grid { grid-template-columns: 1fr; }
  .a3d-strip, .a3d-footer__cols { grid-template-columns: 1fr; }
  .a3d-strip__item { border-right: 0; border-bottom: 1px solid var(--a3d-line); }
  .a3d-masthead__inner { flex-wrap: wrap; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   10. Header modules — language, account, cart, search
   Hummingbird's nav modules are block-level, so without this they stack into a
   170px tower instead of sitting on the utility bar.
   -------------------------------------------------------------------------- */

.a3d-utility__left > *,
.a3d-utility__right > * { display: flex; align-items: center; margin: 0; }
.a3d-utility ul:not(.a3d-picker__menu) { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.a3d-utility li { margin: 0; }
.a3d-utility select,
.a3d-utility .form-select {
  width: auto;
  min-height: 30px;
  padding: 2px 26px 2px 10px;
  font-size: .82rem;
  color: #fff;
  background-color: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.a3d-utility select option { color: var(--a3d-ink); }
.a3d-utility .material-icons { font-size: 18px; }
.a3d-utility .header-block__badge,
.a3d-utility .cart-products-count { background: var(--a3d-brand); color: #fff; border-radius: 999px; padding: 0 6px; font-size: .72rem; }

.a3d-masthead__nav > *,
.a3d-masthead__tools > * { flex: 0 0 auto; width: auto !important; max-width: none !important; padding: 0; }
.a3d-masthead__nav .ps-searchbar { margin-left: auto; }
.a3d-masthead__nav .ps-searchbar input { min-width: 220px; }

/* --------------------------------------------------------------------------
   11. Edition selector (a3deditions module)
   Each tier is a real product link, so these are anchors styled as pills
   rather than a JS control.
   -------------------------------------------------------------------------- */

.a3d-selector { display: flex; flex-direction: column; gap: 18px; }
.a3d-selector__group { display: flex; flex-direction: column; gap: 9px; }
.a3d-selector__label {
  font-size: .78rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--a3d-muted);
}

.a3d-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.a3d-tier {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 8px; min-height: 62px; justify-content: center;
  border: 1px solid var(--a3d-line-2); border-radius: 3px;
  background: #fff; color: var(--a3d-ink); text-align: center;
  transition: border-color .12s ease, background-color .12s ease;
}
.a3d-tier:hover { border-color: var(--a3d-brand); color: var(--a3d-ink); }
.a3d-tier.is-active { background: var(--a3d-deep); border-color: var(--a3d-deep); color: #fff; }
.a3d-tier__name { font-family: var(--a3d-display); font-weight: 600; font-size: .95rem; letter-spacing: -.01em; }
.a3d-tier__price { font-size: .8rem; color: var(--a3d-muted); }
.a3d-tier.is-active .a3d-tier__price { color: rgba(255,255,255,.66); }

.a3d-licence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.a3d-licence__opt {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 18px; border: 1px solid var(--a3d-line-2); border-radius: 3px;
  background: #fff; color: var(--a3d-ink);
}
.a3d-licence__opt:hover { border-color: var(--a3d-brand); color: var(--a3d-ink); }
.a3d-licence__opt.is-active { border-color: var(--a3d-brand); background: rgba(24,154,208,.07); }
.a3d-licence__opt b { font-weight: 600; font-size: .96rem; }
.a3d-licence__opt span { font-size: .84rem; color: var(--a3d-muted); }

.a3d-selector__compare { font-size: .89rem; font-weight: 600; color: var(--a3d-brand-deep); }

@media (max-width: 560px) {
  .a3d-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   12. Category pages
   -------------------------------------------------------------------------- */

#category #wrapper, #category .container { background: transparent; }
#category .page-header, #category #js-product-list-header { padding-inline: 0; }
#category .page-header h1 { margin-bottom: .35rem; }
#category #category-description { color: var(--a3d-muted); max-width: 60ch; }
#js-product-list-top, .products-sort-order { border: 0; }
.pagination { --bs-pagination-color: var(--a3d-brand-deep); --bs-pagination-active-bg: var(--a3d-brand); --bs-pagination-active-border-color: var(--a3d-brand); }

/* the left filter column Hummingbird reserves is empty here — reclaim the width */
#category #left-column:empty, #category #right-column:empty { display: none; }
#category #content-wrapper { width: 100%; }

/* The category tree sidebar repeats the header nav verbatim, so it costs 330px
   of grid width and tells the visitor nothing new. */
#category #left-column,
#category #right-column,
#category .ps-categorytree { display: none !important; }
#category #content-wrapper,
#category #content,
#category .col-lg-9, #category .col-md-9 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
#category .products, #js-product-list .products { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1200px) { #category .products, #js-product-list .products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { #category .products, #js-product-list .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { #category .products, #js-product-list .products { grid-template-columns: 1fr; } }

/* keep the homepage ladder at three across regardless */
.a3d-editions .products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { .a3d-editions .products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .a3d-editions .products { grid-template-columns: 1fr !important; } }

/* --------------------------------------------------------------------------
   13. Edition ladder — designed pricing cards on the homepage
   -------------------------------------------------------------------------- */

.a3d-ladder {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.a3d-plan {
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
  padding: 30px 24px;
  background: #fff;
  border: 1px solid var(--a3d-line);
  border-radius: 4px;
}
.a3d-plan.is-featured { background: var(--a3d-deep); border-color: var(--a3d-deep); color: #fff; }
.a3d-plan__flag {
  position: absolute; top: -11px; left: 24px;
  padding: 4px 11px; background: var(--a3d-coral); color: #fff;
  border-radius: 2px; font-size: .66rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.a3d-plan__head { display: flex; flex-direction: column; gap: 5px; }
.a3d-plan__name { margin: 0; font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
.a3d-plan.is-featured .a3d-plan__name { color: #fff; }
.a3d-plan__tag { margin: 0; font-size: .82rem; color: var(--a3d-muted); }
.a3d-plan.is-featured .a3d-plan__tag { color: rgba(255,255,255,.6); }
.a3d-plan__price {
  font-family: var(--a3d-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.1vw, 2rem); letter-spacing: -.03em; line-height: 1;
}
.a3d-plan.is-featured .a3d-plan__price { color: #fff; }
.a3d-plan__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.a3d-plan__list li { font-size: .85rem; line-height: 1.45; color: var(--a3d-muted); }
.a3d-plan.is-featured .a3d-plan__list li { color: rgba(255,255,255,.75); }
.a3d-plan__cta {
  margin-top: auto; padding: 11px 14px; text-align: center;
  border: 1px solid var(--a3d-brand); border-radius: 3px;
  font-size: .88rem; font-weight: 600; color: var(--a3d-brand-deep);
}
.a3d-plan__cta:hover { background: var(--a3d-brand); color: #fff; }
.a3d-plan.is-featured .a3d-plan__cta { background: var(--a3d-brand); border-color: var(--a3d-brand); color: #fff; }
.a3d-plan.is-featured .a3d-plan__cta:hover { background: var(--a3d-brand-deep); border-color: var(--a3d-brand-deep); }

.a3d-landscape {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  margin-top: 20px; padding: 26px 32px;
  background: #fff; border: 1px solid var(--a3d-line); border-radius: 4px;
}
.a3d-landscape h3 { margin: 0 0 5px; font-size: 1.12rem; font-weight: 600; }
.a3d-landscape p { margin: 0; font-size: .89rem; color: var(--a3d-muted); max-width: 68ch; }
.a3d-landscape__cta {
  flex: 0 0 auto; padding: 12px 26px;
  border: 1px solid var(--a3d-brand); border-radius: 3px;
  font-family: var(--a3d-display); font-weight: 700; letter-spacing: -.02em;
  color: var(--a3d-brand-deep);
}
.a3d-landscape__cta:hover { background: var(--a3d-brand); color: #fff; }

/* --------------------------------------------------------------------------
   14. Upgrade configurator
   -------------------------------------------------------------------------- */

.a3d-upgrader {
  background: #fff; border: 1px solid var(--a3d-line); border-radius: 4px;
  padding: clamp(24px, 3vw, 40px); margin-bottom: 40px;
}
.a3d-upgrader__head { max-width: 60ch; margin-bottom: 28px; }
.a3d-upgrader__head h2 { margin: 0 0 8px; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.a3d-upgrader__head p { margin: 0; color: var(--a3d-muted); }
.a3d-upgrader__grid { display: grid; grid-template-columns: 1.35fr .9fr; gap: clamp(24px, 3vw, 44px); align-items: start; }
.a3d-upgrader__steps { display: flex; flex-direction: column; gap: 24px; }

.a3d-step { display: flex; gap: 14px; }
.a3d-step__n {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--a3d-deep); color: #fff;
  font-family: var(--a3d-display); font-size: .8rem; font-weight: 700;
}
.a3d-step__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; }
.a3d-step__body label { font-size: .95rem; font-weight: 600; color: var(--a3d-ink); }

.a3d-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.a3d-chip {
  padding: 9px 16px; border: 1px solid var(--a3d-line-2); border-radius: 3px;
  background: #fff; color: var(--a3d-ink); font-size: .88rem; font-weight: 500;
  cursor: pointer; transition: border-color .12s ease, background-color .12s ease;
}
.a3d-chip:hover { border-color: var(--a3d-brand); }
.a3d-chip.is-active { background: var(--a3d-deep); border-color: var(--a3d-deep); color: #fff; }

.a3d-options { display: flex; flex-direction: column; gap: 8px; }
.a3d-option {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px;
  padding: 13px 18px; border: 1px solid var(--a3d-line-2); border-radius: 3px;
  background: #fff; text-align: left; cursor: pointer; width: 100%;
}
.a3d-option:hover { border-color: var(--a3d-brand); }
.a3d-option.is-active { border-color: var(--a3d-brand); background: rgba(24,154,208,.06); }
.a3d-option__name { font-family: var(--a3d-display); font-weight: 600; letter-spacing: -.02em; }
.a3d-option__note { font-size: .78rem; }
.a3d-option__note.is-good { color: #128A00; }
/* A tier with no upgrade discount is a normal purchase, not an error. It was
   coral, which put a column of warning-red down a page whose job is to sell an
   upgrade. Grey states the same fact without arguing with the customer. */
.a3d-option__note.is-flat { color: var(--a3d-muted); }
.a3d-option__price { font-family: var(--a3d-display); font-weight: 700; letter-spacing: -.02em; }

.a3d-quote {
  position: sticky; top: 20px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px; background: var(--a3d-paper);
  border: 1px solid var(--a3d-line); border-radius: 4px;
}
.a3d-quote__label { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--a3d-muted); }
.a3d-quote__title { font-family: var(--a3d-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.025em; }
.a3d-quote__from { font-size: .86rem; color: var(--a3d-muted); }
.a3d-quote__figure { font-family: var(--a3d-display); font-size: 2.3rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.a3d-quote__figure s { font-size: .95rem; font-weight: 500; color: var(--a3d-muted); margin-left: 10px; letter-spacing: 0; }
.a3d-quote__save { margin: 0; padding: 9px 13px; font-size: .84rem; font-weight: 600; color: #128A00; background: rgba(20,170,0,.08); border: 1px solid rgba(20,170,0,.26); border-radius: 3px; }
.a3d-quote__note {
  margin: 0; padding: 9px 13px; font-size: .84rem;
  color: var(--a3d-muted); background: var(--a3d-paper);
  border: 1px solid var(--a3d-line); border-radius: 3px;
}
/* Where the chosen tier has no discount but another one does, the panel says
   so and offers to jump there — a dead end turned into the next step. */
.a3d-quote__nudge {
  margin: 0; padding: 10px 13px; font-size: .84rem; line-height: 1.45;
  color: var(--a3d-ink);
  background: rgba(24,154,208,.07);
  border: 1px solid rgba(24,154,208,.28);
  border-radius: 3px;
}
.a3d-quote__nudge strong { font-weight: 700; }
.a3d-quote__switch {
  display: inline; padding: 0; margin-left: 2px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 600;
  color: var(--a3d-brand-on-white);
  text-decoration: underline; text-underline-offset: 2px;
}
.a3d-quote__switch:hover { color: var(--a3d-brand-deep); }
.a3d-quote__sku { margin: 0; font-size: .78rem; color: var(--a3d-muted); }
.a3d-quote__hint { margin: 0; color: var(--a3d-muted); font-size: .9rem; }
.a3d-quote__cta { width: 100%; text-align: center; }

@media (max-width: 1200px) { .a3d-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 992px)  { .a3d-upgrader__grid { grid-template-columns: 1fr; } .a3d-quote { position: static; } }
@media (max-width: 760px)  { .a3d-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } .a3d-landscape { flex-direction: column; align-items: flex-start; gap: 18px; } }
@media (max-width: 520px)  { .a3d-ladder { grid-template-columns: 1fr; } .a3d-option { grid-template-columns: 1fr auto; } .a3d-option__note { grid-column: 1 / -1; } }

/* --------------------------------------------------------------------------
   15. Buttons — the authored set
   The theme's own button, so pages stop depending on Bootstrap's .btn
   cascade winning against Hummingbird.
   -------------------------------------------------------------------------- */

.a3d-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .82rem 1.9rem;
  font-family: var(--a3d-body); font-size: .95rem; font-weight: 600; line-height: 1.2;
  border: 1px solid var(--a3d-brand); border-radius: 3px;
  background: var(--a3d-brand); color: #fff;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.a3d-btn:hover, .a3d-btn:focus { background: var(--a3d-brand-deep); border-color: var(--a3d-brand-deep); color: #fff; }
.a3d-btn--ghost { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.a3d-btn--ghost:hover, .a3d-btn--ghost:focus { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); color: #fff; }

/* --------------------------------------------------------------------------
   16. Hero art and video facade
   The YouTube iframe is only built on click, so a cold page load never talks
   to a third party.
   -------------------------------------------------------------------------- */

.a3d-hero__art {
  position: relative; margin: 0; overflow: hidden;
  background: var(--a3d-deep-2);
  border: 1px solid rgba(255,255,255,.12); border-radius: 4px;
  aspect-ratio: 2 / 1;
}
.a3d-hero__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.a3d-hero__video { display: block; width: 100%; height: 100%; border: 0; aspect-ratio: 2 / 1; }
.a3d-play {
  position: absolute; inset: 0; margin: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(180deg, rgba(12,30,41,0) 30%, rgba(12,30,41,.55) 100%);
  border: 0; cursor: pointer; color: #fff;
  font-family: var(--a3d-body); font-size: .88rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  transition: background-color .2s ease;
}
.a3d-play svg {
  padding: 20px 18px 20px 24px; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4);
  box-sizing: content-box; width: 22px; height: 26px;
  transition: background-color .2s ease, transform .2s ease;
}
.a3d-play:hover svg { background: var(--a3d-brand); border-color: var(--a3d-brand); transform: scale(1.05); }

/* --------------------------------------------------------------------------
   17. Project stages — homepage teaser
   Numbered because the stages really are a sequence: you cannot decorate a
   room you have not drawn.
   -------------------------------------------------------------------------- */

.a3d-stages { background: var(--a3d-paper); border-top: 1px solid var(--a3d-line); padding-block: clamp(48px, 6vw, 88px); padding-inline: var(--a3d-gutter); }
.a3d-stages > * { max-width: var(--a3d-max); margin-inline: auto; }
.a3d-stages .a3d-section-head p { margin: 8px 0 0; color: var(--a3d-muted); }
.a3d-stages__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.a3d-stage-card { margin: 0; }
.a3d-stage-card a {
  display: block; height: 100%; position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--a3d-line); border-radius: 4px;
  color: inherit; transition: border-color .15s ease, transform .15s ease;
}
.a3d-stage-card a:hover { border-color: var(--a3d-brand); transform: translateY(-2px); }
/* height:auto is load-bearing wherever aspect-ratio sizes an image. The width
   and height ATTRIBUTES on <img> are presentational hints, so with no author
   height the element gets a definite height from the attribute and
   aspect-ratio is ignored entirely — the stage cards were rendering 267x576
   (and 267x800 for the one whose attribute said 800) instead of 16/10. */
.a3d-stage-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.a3d-stage-card__n {
  position: absolute; top: 12px; left: 12px;
  padding: 3px 9px; border-radius: 2px;
  background: var(--a3d-deep); color: #fff;
  font-family: var(--a3d-display); font-size: .76rem; font-weight: 700; letter-spacing: .04em;
}
.a3d-stage-card h3 { margin: 18px 20px 6px; font-size: 1.05rem; }
.a3d-stage-card p { margin: 0 20px 20px; font-size: .88rem; color: var(--a3d-muted); }

/* --------------------------------------------------------------------------
   18. Capability icons
   -------------------------------------------------------------------------- */

.a3d-cap__icon { display: block; width: 34px; height: 34px; margin-bottom: 16px; color: var(--a3d-brand); }
.a3d-cap__icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   19. Edition comparison table
   -------------------------------------------------------------------------- */

.a3d-compare { background: #fff; border-top: 1px solid var(--a3d-line); padding-block: clamp(48px, 6vw, 88px); padding-inline: var(--a3d-gutter); }
.a3d-compare > * { max-width: var(--a3d-max); margin-inline: auto; }
.a3d-compare__head { margin-bottom: 30px; }
.a3d-compare__head h2 { margin: 0; }
.a3d-compare__head p { margin: 10px 0 0; max-width: 60ch; color: var(--a3d-muted); }

.a3d-compare__scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.a3d-compare__scroll.has-more::after {
  content: ''; position: sticky; top: 0; right: 0; float: right;
  width: 40px; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff);
}
.a3d-compare__table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .92rem; }
.a3d-compare__table th,
.a3d-compare__table td { padding: 13px 16px; text-align: center; border-bottom: 1px solid var(--a3d-line); }
.a3d-compare__rowhead {
  position: sticky; left: 0; z-index: 2;
  text-align: left; font-weight: 500; background: #fff;
  min-width: 210px; box-shadow: 1px 0 0 var(--a3d-line);
}
.a3d-compare__table thead th { border-bottom: 2px solid var(--a3d-line-2); vertical-align: bottom; padding-block: 18px; }
.a3d-compare__table thead a { display: block; color: inherit; }
.a3d-compare__tier { display: block; font-family: var(--a3d-display); font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; }
.a3d-compare__price { display: block; margin-top: 3px; font-size: .84rem; color: var(--a3d-muted); }
.a3d-compare__table thead a:hover .a3d-compare__tier { color: var(--a3d-brand-deep); }
.a3d-compare__table .is-featured { background: rgba(24,154,208,.05); }
.a3d-compare__table thead .is-featured { background: rgba(24,154,208,.1); }
.a3d-compare__tick { color: var(--a3d-brand); display: inline-block; vertical-align: middle; }
.a3d-compare__no { color: var(--a3d-line-2); }
.a3d-compare__num { font-family: var(--a3d-display); font-weight: 600; letter-spacing: -.01em; }
.a3d-compare__table tbody tr:hover td,
.a3d-compare__table tbody tr:hover .a3d-compare__rowhead { background: var(--a3d-paper); }

/* --------------------------------------------------------------------------
   20. Newsletter band

   The band is light rather than navy, deliberately. ps_emailsubscription
   paints its own .bg-body-tertiary section and marks the small print
   .text-body-secondary, both Bootstrap utilities carrying !important inside
   Hummingbird's @layer utilities. Important declarations in a layer outrank
   unlayered important ones, so an override here cannot win without either
   re-entering the layer or !important-ing from `vendors` — both fragile.
   Matching the module's own surface is simpler and cannot regress: it also
   gives the page a light beat before the navy footer.
   -------------------------------------------------------------------------- */

.a3d-newsletter {
  background: var(--a3d-paper);
  border-top: 1px solid var(--a3d-line);
  padding-block: clamp(38px, 4.5vw, 62px);
}
.a3d-newsletter__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.a3d-newsletter__copy h2 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
.a3d-newsletter__copy p { margin: 10px 0 0; max-width: 46ch; color: var(--a3d-muted); font-size: .95rem; }

/* Flatten the module's own container so it sits in the band's grid column
   rather than re-centring itself in a Bootstrap container of its own. */
.a3d-newsletter__form .ps-emailsubscription { padding: 0; }
.a3d-newsletter__form .container { max-width: none; padding: 0; }
.a3d-newsletter__form .row { --bs-gutter-x: 0; }
.a3d-newsletter__form [class*="col-"] { width: 100%; max-width: none; flex: 1 1 100%; padding: 0; }
.a3d-newsletter__form p.h3 { display: none; }   /* the band supplies the heading */

.a3d-newsletter__form .form-control {
  min-height: 50px; padding: 0 16px;
  border: 1px solid var(--a3d-line-2); border-radius: 3px;
  font-size: .95rem; color: var(--a3d-ink); background: #fff;
}
.a3d-newsletter__form .form-control:focus { border-color: var(--a3d-brand); box-shadow: none; }
.a3d-newsletter__form .btn,
.a3d-newsletter__form input[type="submit"] {
  min-height: 50px; padding: 0 28px;
  background: var(--a3d-brand); border: 1px solid var(--a3d-brand); border-radius: 3px;
  color: #fff; font-weight: 600; font-size: .95rem;
}
.a3d-newsletter__form .btn:hover,
.a3d-newsletter__form input[type="submit"]:hover { background: var(--a3d-brand-deep); border-color: var(--a3d-brand-deep); }
.a3d-newsletter__form .alert { margin: 10px 0 0; }

/* --------------------------------------------------------------------------
   21. Footer — replaces section 8's grid for the new markup
   -------------------------------------------------------------------------- */

.a3d-footer__top {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) 3fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.a3d-footer__logo { height: 20px; width: auto; display: block; opacity: .9; }
.a3d-footer__brand p { margin: 16px 0 0; max-width: 46ch; font-size: .88rem; line-height: 1.6;
  color: rgba(255,255,255,.55); }
.a3d-footer__mail { display: inline-block; margin-top: 14px; color: rgba(255,255,255,.75); font-size: .9rem; }
.a3d-footer__mail:hover { color: #fff; }
.a3d-footer__links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(20px, 3vw, 40px); }
.a3d-footer__col { display: flex; flex-direction: column; gap: 10px; }
.a3d-footer__col h3 { margin: 0 0 2px; font-size: .74rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.a3d-footer__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.a3d-footer__col a { color: rgba(255,255,255,.74); font-size: .92rem; }
.a3d-footer__col a:hover { color: #fff; }
.a3d-footer__social { display: flex; align-items: center; gap: 12px; }
.a3d-footer__social ul { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.a3d-footer__social a { color: rgba(255,255,255,.6); }
.a3d-footer__social a:hover { color: #fff; }
.a3d-footer__region { display: inline-flex; align-items: center; gap: 8px; }
.a3d-footer__region img { border-radius: 2px; }

/* --------------------------------------------------------------------------
   22. Your Project — the CMS page
   -------------------------------------------------------------------------- */

.a3d-cms-wide { max-width: none; padding: 0; margin: 0; }
.a3d-project { color: var(--a3d-ink); }

.a3d-project__head {
  background: var(--a3d-deep); color: #fff;
  padding: clamp(48px, 6vw, 88px) var(--a3d-gutter) clamp(36px, 4vw, 56px);
}
.a3d-project__head > * { max-width: var(--a3d-max); margin-inline: auto; }
.a3d-project__eyebrow {
  margin: 0 auto 14px; font-size: .76rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #5FC4EC;
}
.a3d-project__lead { margin: 0 auto; max-width: 20ch; color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.06; }
.a3d-project__standfirst { margin: 20px auto 0; max-width: 62ch; color: rgba(255,255,255,.68); font-size: 1.02rem; }
.a3d-project__jump { margin-top: 36px; }
.a3d-project__jump ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.a3d-project__jump a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 14px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 3px;
  color: rgba(255,255,255,.8); font-size: .92rem; font-weight: 500;
}
.a3d-project__jump a:hover { border-color: var(--a3d-brand); background: rgba(24,154,208,.12); color: #fff; }
.a3d-project__jump b { font-family: var(--a3d-display); color: #5FC4EC; font-size: .8rem; letter-spacing: .04em; }

.a3d-project__stage { padding: clamp(48px, 6vw, 88px) var(--a3d-gutter); scroll-margin-top: 20px; }
.a3d-project__stage:nth-child(even) { background: #fff; }
.a3d-project__stage:nth-child(odd) { background: var(--a3d-paper); }
.a3d-project__stage > * { max-width: var(--a3d-max); margin-inline: auto; }

.a3d-project__intro { max-width: 68ch; margin-bottom: clamp(30px, 4vw, 52px); }
.a3d-project__step {
  display: block; margin-bottom: 10px;
  font-family: var(--a3d-display); font-size: .82rem; font-weight: 700;
  letter-spacing: .12em; color: var(--a3d-brand);
}
.a3d-project__intro h3 { margin: 0 0 16px; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.03em; }
.a3d-project__intro p { margin: 0 0 12px; color: var(--a3d-muted); font-size: 1.02rem; }

.a3d-project__block {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.5vw, 56px); align-items: center;
  padding-block: clamp(22px, 3vw, 40px);
  border-top: 1px solid var(--a3d-line);
}
.a3d-project__block:nth-child(odd) .a3d-project__figure { order: 2; }
.a3d-project__figure { margin: 0; border-radius: 4px; overflow: hidden; border: 1px solid var(--a3d-line); background: #fff; }
.a3d-project__figure img { display: block; width: 100%; height: auto; }
.a3d-project__points { display: flex; flex-direction: column; gap: 24px; }
.a3d-project__points h4 { margin: 0 0 8px; font-family: var(--a3d-display); font-size: 1.06rem; font-weight: 600; letter-spacing: -.02em; }
.a3d-project__points p { margin: 0; color: var(--a3d-muted); font-size: .95rem; }

.a3d-project__cta {
  background: var(--a3d-deep); color: #fff; text-align: center;
  padding: clamp(44px, 5vw, 76px) var(--a3d-gutter);
}
.a3d-project__cta h3 { margin: 0 auto; max-width: 24ch; color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.a3d-project__cta p { margin: 14px auto 24px; max-width: 58ch; color: rgba(255,255,255,.7); }

/* --------------------------------------------------------------------------
   23. Upgrades category — the full SKU list, folded away
   -------------------------------------------------------------------------- */

.a3d-allskus { margin: 36px 0 0; border-top: 1px solid var(--a3d-line); padding-top: 20px; }
.a3d-allskus summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--a3d-brand-deep); }
.a3d-allskus summary:hover { color: var(--a3d-ink); }
.a3d-allskus__list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 32px; }
.a3d-allskus__list li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--a3d-line); font-size: .89rem; }
.a3d-allskus__list b { font-weight: 600; white-space: nowrap; }

/* --------------------------------------------------------------------------
   24. Responsive for the sections above
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  .a3d-stages__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991.98px) {
  .a3d-hero__art { aspect-ratio: 16 / 9; }
  .a3d-newsletter__inner { grid-template-columns: 1fr; }
  .a3d-footer__top { grid-template-columns: 1fr; }
  .a3d-project__jump ul { grid-template-columns: repeat(2, 1fr); }
  .a3d-project__block { grid-template-columns: 1fr; }
  .a3d-project__block:nth-child(odd) .a3d-project__figure { order: 0; }
  .a3d-allskus__list { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .a3d-stages__grid { grid-template-columns: 1fr; }
  .a3d-project__jump ul { grid-template-columns: 1fr; }
  .a3d-compare { padding-inline: 0; }
  .a3d-compare__head { padding-inline: var(--a3d-gutter); }
  .a3d-compare__rowhead { min-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .a3d-stage-card a, .a3d-nav__panel, .a3d-play svg, .a3d-picker__caret, .a3d-nav__caret { transition: none; }
  .a3d-stage-card a:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   25. Product description
   The copy is authored in the back office, so this styles plain h2/p/ul rather
   than expecting classes that an editor would have to remember to add.
   -------------------------------------------------------------------------- */

.product__description,
.product__description.rich-text { max-width: 78ch; }
.product__description h2 {
  margin: 34px 0 12px;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  letter-spacing: -.02em;
}
.product__description h2:first-child { margin-top: 0; }
.product__description p { margin: 0 0 14px; color: var(--a3d-muted); }
.product__description ul { margin: 0 0 18px; padding-left: 1.15em; color: var(--a3d-muted); }
.product__description li { margin-bottom: 6px; }

.a3d-doclinks { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 28px; }

/* Tool list and system specs — two- and four-up inside the description, so a
   long list reads as a reference table rather than a scroll. */
.a3d-toolgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px 28px; margin: 0 0 26px;
}
.a3d-specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 28px; margin: 0 0 26px;
}
.product__description .a3d-toolgrid h3,
.product__description .a3d-specs h3 {
  margin: 14px 0 8px; font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--a3d-muted);
}
.product__description .a3d-toolgrid ul,
.product__description .a3d-specs ul { margin: 0; padding-left: 1.1em; }
.product__description .a3d-toolgrid li,
.product__description .a3d-specs li { margin-bottom: 5px; font-size: .92rem; }
.a3d-btn--quiet {
  background: transparent; border-color: var(--a3d-line-2); color: var(--a3d-ink);
}
.a3d-btn--quiet:hover, .a3d-btn--quiet:focus {
  background: var(--a3d-paper); border-color: var(--a3d-brand); color: var(--a3d-brand-deep);
}

/* Hummingbird stacks Description / Product Details / Data sheet in a Bootstrap
   accordion rather than a tab strip. Keep the accordion — it is better on a
   phone — but give it the flat, rule-separated look the rest of the site has. */
.product__accordion { border-top: 1px solid var(--a3d-line); }
.product__accordion .accordion-item { border: 0; border-bottom: 1px solid var(--a3d-line); background: transparent; }
.product__accordion .accordion-button {
  padding: 20px 0; background: transparent; box-shadow: none;
  font-family: var(--a3d-display); font-size: 1.08rem; font-weight: 600;
  letter-spacing: -.02em; color: var(--a3d-ink);
}
.product__accordion .accordion-button:not(.collapsed) { color: var(--a3d-brand-deep); background: transparent; }
.product__accordion .accordion-button:focus { border-color: transparent; box-shadow: none; }
.product__accordion .accordion-body { padding: 4px 0 30px; }
.product__accordion h2 { margin: 0; font-size: inherit; letter-spacing: inherit; }

/* Product Details and Data sheet — Hummingbird renders both as details__list.
   The Data sheet is the comparison matrix for one product, so it is set as a
   two-column table rather than a stack of label/value pairs. */
.product__accordion .details__list { margin: 0; padding: 0; list-style: none; max-width: 640px; }
.product__accordion .details__item {
  display: grid; grid-template-columns: minmax(160px, 40%) 1fr; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--a3d-line); align-items: baseline;
}
.product__accordion .details__item:last-child { border-bottom: 0; }
.product__accordion .details__title { color: var(--a3d-muted); font-size: .92rem; }
.product__accordion .details__right { font-size: .92rem; font-weight: 500; }

/* --------------------------------------------------------------------------
   26. Subcategory tiles — the tier pages now hanging off Editions
   -------------------------------------------------------------------------- */

.subcategories, .category__subcategories { margin: 24px 0 8px; }
.subcategories ul, .category__subcategories ul {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none;
}
.subcategories a, .category__subcategories a {
  display: inline-block; padding: 9px 18px;
  border: 1px solid var(--a3d-line-2); border-radius: 999px;
  background: #fff; color: var(--a3d-ink);
  font-size: .9rem; font-weight: 500;
}
.subcategories a:hover, .category__subcategories a:hover {
  border-color: var(--a3d-brand); color: var(--a3d-brand-deep);
}

/* --------------------------------------------------------------------------
   27. Header link colour — belt and braces

   Hummingbird's theme.css carried `#header a { color: rgba(255,255,255,.78) }`
   at ID specificity, which turned the white dropdown panel's links white on
   white. That rule came from an old brand layer appended to theme.css and has
   been stripped, but a module or a theme update could reintroduce a header-wide
   colour, and the failure mode is invisible text rather than an obvious break.
   These rules restate the panel's own colours at matching specificity.
   -------------------------------------------------------------------------- */

#header .a3d-nav__panel a,
#header .a3d-nav__sub a { color: var(--a3d-ink); }
#header .a3d-nav__sub a:hover { color: var(--a3d-brand-deep); }
#header .a3d-nav__sub-more { color: var(--a3d-muted); }

/* --------------------------------------------------------------------------
   28. Comparison table — feature tooltips

   The row label carries both a native `title` (keyboard and screen-reader
   users, and anyone with JS off) and a styled bubble on hover. The bubble is
   CSS-only: no library, and nothing to initialise.
   -------------------------------------------------------------------------- */

.a3d-compare__more { margin: 14px 0 0; font-size: .93rem; }
.a3d-compare__feature {
  position: relative;
  color: var(--a3d-ink);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--a3d-line-2);
  text-underline-offset: 3px;
}
.a3d-compare__feature:hover,
.a3d-compare__feature:focus-visible { color: var(--a3d-brand-deep); text-decoration-color: var(--a3d-brand); }
.a3d-compare__feature.is-static { cursor: help; }

.a3d-compare__feature[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 20;
  width: max-content; max-width: 280px;
  padding: 10px 12px;
  background: var(--a3d-deep); color: #fff;
  border-radius: 4px; box-shadow: 0 12px 30px rgba(12,30,41,.28);
  font-size: .82rem; font-weight: 400; line-height: 1.45; white-space: normal;
  text-decoration: none; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
  pointer-events: none;
}
.a3d-compare__feature[data-tip]:hover::after,
.a3d-compare__feature[data-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: none; }

/* The sticky first column clips its own overflow, so the bubble has to escape
   sideways rather than upward on narrow screens. */
/* The bubble is an ::after on a cell inside .a3d-compare__scroll, and a
   container with overflow-x:auto clips on BOTH axes — so the tooltip was being
   sliced off at the row boundary however much room the page had. Dropping the
   scroller on desktop removes the clipping context and the horizontal scrollbar
   in one move; the table is sized to fit instead of forcing 720px. */
@media (min-width: 768px) {
  .a3d-compare__scroll { overflow: visible; }
  .a3d-compare__scroll.has-more::after { display: none; }
  .a3d-compare__table { min-width: 0; }
  .a3d-compare__table th,
  .a3d-compare__table td { padding: 13px 10px; }
  /* The first column stuck only because the table scrolled sideways. It no
     longer does, and `position: sticky` was actively harmful: it gives every
     row label its own stacking context, so a tooltip opened on one row was
     painted under the labels of the rows below it — the bubble escaped the
     scroller and then disappeared behind the next three rows instead. */
  .a3d-compare__rowhead {
    position: static;
    min-width: 0; width: 30%; padding-inline-end: 14px;
    box-shadow: none;
  }
}

/* Whatever the breakpoint, the row being pointed at has to paint above the
   ones after it. Later siblings win ties in paint order, so the open row needs
   both a position and a z-index to sit on top of them. */
.a3d-compare__table tbody tr:hover .a3d-compare__rowhead,
.a3d-compare__table tbody tr:focus-within .a3d-compare__rowhead {
  position: relative;
  z-index: 40;
}

/* Touch devices cannot hover, so the bubble can never be summoned there and a
   clipped one is all a tap would produce. The native title attribute still
   carries the same sentence for assistive tech and for a mouse on a small
   window, so nothing is lost by hiding it. */
@media (max-width: 767.98px) {
  .a3d-compare__feature[data-tip]::after { display: none; }
}

/* A tooltip on a right-hand cell would run past the table edge now that the
   scroller no longer contains it. Anchor those to the right instead. */
.a3d-compare__table td:nth-last-child(-n+2) .a3d-compare__feature[data-tip]::after,
.a3d-compare__table th:nth-last-child(-n+2) .a3d-compare__feature[data-tip]::after {
  left: auto; right: 0;
}
@media (prefers-reduced-motion: reduce) {
  .a3d-compare__feature[data-tip]::after { transition: none; }
}

/* --------------------------------------------------------------------------
   30. Blog — index and post
   -------------------------------------------------------------------------- */

.a3d-bloglist { padding-bottom: 0; }
.a3d-blog {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.5vw, 30px);
  max-width: var(--a3d-max); margin: 0 auto clamp(48px, 6vw, 88px);
  padding-inline: var(--a3d-gutter);
}
.a3d-blog__card a {
  display: block; height: 100%; overflow: hidden;
  background: #fff; border: 1px solid var(--a3d-line); border-radius: 4px;
  color: inherit; transition: border-color .15s ease, transform .15s ease;
}
.a3d-blog__card a:hover { border-color: var(--a3d-brand); transform: translateY(-2px); }
.a3d-blog__cover { margin: 0; background: var(--a3d-paper); }
.a3d-blog__cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; height: auto; }
.a3d-blog__cover.is-empty { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--a3d-paper), #ECEAE4); }
.a3d-blog__body { padding: 20px 22px 24px; }
.a3d-blog__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: .78rem; color: var(--a3d-muted); }
.a3d-blog__kicker { font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--a3d-brand-deep); }
.a3d-blog__card h3 { margin: 0 0 8px; font-size: 1.08rem; line-height: 1.3; }
.a3d-blog__excerpt { margin: 0; font-size: .9rem; color: var(--a3d-muted); }

.a3d-post { max-width: 760px; margin: 0 auto clamp(48px, 6vw, 88px); padding-inline: var(--a3d-gutter); }
.a3d-post__head { padding-top: clamp(32px, 4vw, 56px); }
.a3d-post__kicker { margin: 0 0 10px; font-size: .78rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--a3d-brand-deep); }
.a3d-post__head h1 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.a3d-post__date { margin: 12px 0 0; font-size: .88rem; color: var(--a3d-muted); }
.a3d-post__cover { margin: 28px 0 0; border-radius: 4px; overflow: hidden; border: 1px solid var(--a3d-line); }
.a3d-post__cover img { display: block; width: 100%; height: auto; }
.a3d-post__body { margin-top: 28px; }
.a3d-post__body h2 { margin: 34px 0 12px; font-size: clamp(1.25rem, 2vw, 1.6rem); }
.a3d-post__body h3 { margin: 26px 0 10px; }
.a3d-post__body p { margin: 0 0 16px; line-height: 1.7; }
.a3d-post__body ul, .a3d-post__body ol { margin: 0 0 18px; padding-left: 1.2em; }
.a3d-post__body li { margin-bottom: 8px; line-height: 1.65; }
.a3d-post__body img { max-width: 100%; height: auto; border-radius: 4px; }
.a3d-post__body figure { margin: 24px 0; }
.a3d-post__body figcaption { margin-top: 8px; font-size: .84rem; color: var(--a3d-muted); }
.a3d-post__body a { text-decoration: underline; text-underline-offset: 2px; }
.a3d-post__body iframe { max-width: 100%; }

/* --------------------------------------------------------------------------
   31. Platform switch — Windows 26 / Mac 22

   Two product lines on different versions, so this is a switch between two
   ladders rather than a filter within one. The version number sits in the
   control because it is the thing a Mac buyer most needs to notice.
   -------------------------------------------------------------------------- */

.a3d-platform {
  display: inline-flex; gap: 4px; margin: 0 0 28px;
  padding: 4px; background: var(--a3d-paper);
  border: 1px solid var(--a3d-line); border-radius: 999px;
}
.a3d-platform__opt {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px;
  color: var(--a3d-muted); font-size: .92rem; font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}
.a3d-platform__opt:hover { color: var(--a3d-ink); }
.a3d-platform__opt.is-active { background: var(--a3d-deep); color: #fff; }
.a3d-platform__opt img,
.a3d-platform__opt svg { opacity: .75; }
.a3d-platform__opt.is-active img { filter: brightness(0) invert(1); opacity: 1; }
.a3d-platform__opt svg { fill: currentColor; }
.a3d-platform__opt.is-active svg { opacity: 1; }
.a3d-platform__opt em {
  font-style: normal; font-family: var(--a3d-display); font-size: .78rem;
  font-weight: 700; letter-spacing: .03em; opacity: .6;
}

.a3d-ladder__note {
  max-width: 68ch; margin: 0 0 24px;
  padding: 12px 16px; border-left: 3px solid var(--a3d-brand);
  background: var(--a3d-paper); color: var(--a3d-muted); font-size: .92rem;
}

/* A Mac card carries price and tier only, so give the shorter card the same
   footprint as a Windows one rather than letting the row go ragged. */
.a3d-plan__list:empty { min-height: 0; margin-block: 4px; }

/* --------------------------------------------------------------------------
   32. Contrast corrections

   Found by measuring every text node against its painted background:

   - the cart module drops a dark "Cart" label into the navy utility bar, so
     it was #14171A on #0A1922 — 1.01:1, effectively invisible
   - white on the brand blue #189AD0 is 3.20:1, under the 4.5:1 AA floor for
     text this size, which put every primary button and the cart badge below
     the line; the darker brand tone clears it at 4.7:1
   - the coral "Most popular" flag was 3.57:1
   - the comparison table's "not included" dash was 1.47:1 — quiet was the
     intent, but it had disappeared entirely
   -------------------------------------------------------------------------- */

:root, [data-bs-theme="light"] {
  /* Brand blue is the identity; this is the tone it takes when it has to
     carry white text. Same hue, enough contrast. */
  --a3d-brand-on-white: #0F7BA8;
  --a3d-coral-deep:     #C63B2C;
}

/* Any module text landing on the navy utility bar inherits the bar's palette. */
.a3d-utility,
.a3d-utility *:not(.a3d-picker__menu):not(.a3d-picker__menu *) { color: rgba(255,255,255,.78); }
.a3d-utility a:hover, .a3d-utility button:hover { color: #fff; }
.a3d-utility .a3d-picker__menu a { color: rgba(255,255,255,.85); }
.a3d-utility select, .a3d-utility .form-select { color: #fff; }
.a3d-utility select option { color: var(--a3d-ink); }

/* White-on-brand surfaces */
.a3d-btn { background: var(--a3d-brand-on-white); border-color: var(--a3d-brand-on-white); }
.a3d-btn:hover, .a3d-btn:focus { background: #0C6488; border-color: #0C6488; }
.a3d-btn--ghost { background: transparent; border-color: rgba(255,255,255,.28); }
.a3d-btn--ghost:hover, .a3d-btn--ghost:focus { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); }
.a3d-btn--quiet { background: transparent; border-color: var(--a3d-line-2); color: var(--a3d-ink); }
.a3d-btn--quiet:hover, .a3d-btn--quiet:focus { background: var(--a3d-paper); border-color: var(--a3d-brand); color: var(--a3d-brand-deep); }
.btn-primary { background: var(--a3d-brand-on-white); border-color: var(--a3d-brand-on-white); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: #0C6488; border-color: #0C6488; }
.a3d-cart-badge { background: var(--a3d-brand-on-white); color: #fff; }
/* The plan and landscape CTAs are OUTLINE buttons — brand text on white. Filling
   them with the brand colour made text and background identical. Only the
   filled states need the darker tone. */
.a3d-plan__cta:hover,
.a3d-landscape__cta:hover,
.a3d-plan.is-featured .a3d-plan__cta {
  background: var(--a3d-brand-on-white); border-color: var(--a3d-brand-on-white); color: #fff;
}
.a3d-plan.is-featured .a3d-plan__cta:hover { background: #0C6488; border-color: #0C6488; }
.a3d-newsletter__form .btn,
.a3d-newsletter__form input[type="submit"] { background: var(--a3d-brand-on-white); border-color: var(--a3d-brand-on-white); }

.a3d-plan__flag { background: var(--a3d-coral-deep); }

/* The comparison table's "not included" mark: quiet, but legible. */
.a3d-compare__no { color: #8A8579; }
.a3d-compare__table .is-featured .a3d-compare__price { color: var(--a3d-ink); }

/* The cart module keeps its own badge element separate from .a3d-cart-badge. */
.a3d-utility .header-block__badge,
.a3d-utility .cart-products-count,
.a3d-masthead .header-block__badge,
.a3d-masthead .cart-products-count {
  background: var(--a3d-brand-on-white); color: #fff;
}

/* Coral as text on white is 3.57:1. It carries the "no discount here" warning
   in the configurator, which is the one line a buyer must not miss. */
.a3d-option__note.is-flat { color: var(--a3d-muted); }

/* Small brand-blue text on white is 3.20:1; these are labels, not decoration. */
.a3d-project__step { color: var(--a3d-brand-on-white); }
.product-flag.new, .product-flag { background: var(--a3d-brand-on-white); border-color: var(--a3d-brand-on-white); color: #fff; }
.product-flags .badge, .product-flags .badge.new, .badge.new, .badge.online-only, .badge.pack {
  background: var(--a3d-brand-on-white); color: #fff;
}

/* --------------------------------------------------------------------------
   33. Announcement banner, platform badges, trust markers, feature icons
   -------------------------------------------------------------------------- */

/* --- platform badges ------------------------------------------------------ */
.a3d-hero__platforms {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.a3d-hero__platforms li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .84rem; font-weight: 500; color: rgba(255,255,255,.9);
  padding: 6px 12px 6px 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
}
.a3d-pi { width: 15px; height: 15px; flex: none; }

/* --- trust markers -------------------------------------------------------- */
.a3d-hero__trust {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; gap: 9px 22px;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  max-width: 620px;
}
.a3d-hero__trust li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .84rem; line-height: 1.35; color: rgba(255,255,255,.68);
}
.a3d-ti { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--a3d-brand); }

/* --- feature icons in the comparison table -------------------------------- */
.a3d-compare__rowhead { white-space: normal; }
.a3d-compare__rowinner { display: flex; align-items: center; gap: 10px; }
.a3d-fi {
  width: 19px; height: 19px; flex: none;
  color: var(--a3d-brand-on-white); opacity: .85;
}
.a3d-compare__table tbody tr:hover .a3d-fi { opacity: 1; }
@media (max-width: 767.98px) {
  .a3d-fi { width: 17px; height: 17px; }
  .a3d-compare__rowinner { gap: 8px; }
}

/* --- Editions dropdown: Windows / Mac columns ----------------------------- */
.a3d-nav__panel--platforms { min-width: 460px; padding: 18px 20px 14px; }
.a3d-nav__cols { display: flex; gap: 30px; }
.a3d-nav__col { flex: 1 1 0; min-width: 0; }
.a3d-nav__coltitle {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px; padding-bottom: 8px;
  border-bottom: 1px solid var(--a3d-line);
  font-family: var(--a3d-display); font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--a3d-ink);
}
.a3d-nav__colicon { width: 15px; height: 15px; flex: none; color: var(--a3d-brand-on-white); }
.a3d-nav__colnote {
  margin-inline-start: auto; font-family: var(--a3d-body);
  font-size: .7rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--a3d-muted);
}
.a3d-nav__panel--platforms .a3d-nav__sub a {
  display: flex; align-items: baseline; gap: 10px; padding: 6px 0;
}
.a3d-nav__sub-price { margin-inline-start: auto; font-size: .8rem; color: var(--a3d-muted); }
.a3d-nav__panel--platforms .a3d-nav__sub a:hover .a3d-nav__sub-price { color: var(--a3d-brand-deep); }
.a3d-nav__colall {
  display: inline-block; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--a3d-line); width: 100%;
  font-size: .84rem; font-weight: 600; color: var(--a3d-brand-on-white);
}
@media (max-width: 991.98px) {
  .a3d-nav__panel--platforms { min-width: 0; }
  .a3d-nav__cols { flex-direction: column; gap: 16px; }
}



/* --------------------------------------------------------------------------
   35. Copilot CMS page — hero, tab strip, accordion, before/after grid
   -------------------------------------------------------------------------- */

.a3d-cp__hero {
  display: grid; gap: clamp(24px, 3.5vw, 44px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center; margin-bottom: 34px;
}
.a3d-cp__kicker {
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--a3d-brand-on-white);
}
.a3d-cp__hero h1 { margin: 10px 0 0; }
.a3d-cp__lede { margin: 12px 0 0; font-size: 1.04rem; color: var(--a3d-muted); max-width: 48ch; }
.a3d-cp__heroart { margin: 0; }
.a3d-cp__heroart img,
.a3d-cp__wide img {
  display: block; width: 100%; height: auto;
  border-radius: 5px; border: 1px solid var(--a3d-line);
}
.a3d-cp__wide { margin: 26px 0 0; }

/* Radio-driven tabs: each panel shows only while its own radio is checked.
   No script, so this works in the back-office preview too, and the radio
   group gives arrow-key movement between tabs for free. */
.a3d-cp__radio { position: absolute; opacity: 0; pointer-events: none; }
.a3d-cp__tablist {
  display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 2px solid var(--a3d-line); margin-bottom: 26px;
}
.a3d-cp__tab {
  padding: 11px 18px; cursor: pointer;
  font-family: var(--a3d-display); font-size: .92rem; font-weight: 600;
  color: var(--a3d-muted); border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.a3d-cp__tab:hover { color: var(--a3d-ink); }
.a3d-cp__panel { display: none; }
#a3d-cp-t0:checked ~ .a3d-cp__tablist label[for=a3d-cp-t0],
#a3d-cp-t1:checked ~ .a3d-cp__tablist label[for=a3d-cp-t1],
#a3d-cp-t2:checked ~ .a3d-cp__tablist label[for=a3d-cp-t2],
#a3d-cp-t3:checked ~ .a3d-cp__tablist label[for=a3d-cp-t3],
#a3d-cp-t4:checked ~ .a3d-cp__tablist label[for=a3d-cp-t4] {
  color: var(--a3d-ink); border-bottom-color: var(--a3d-brand);
}
#a3d-cp-t0:checked ~ .a3d-cp__panel--0,
#a3d-cp-t1:checked ~ .a3d-cp__panel--1,
#a3d-cp-t2:checked ~ .a3d-cp__panel--2,
#a3d-cp-t3:checked ~ .a3d-cp__panel--3,
#a3d-cp-t4:checked ~ .a3d-cp__panel--4 { display: block; }
#a3d-cp-t0:focus-visible ~ .a3d-cp__tablist label[for=a3d-cp-t0],
#a3d-cp-t1:focus-visible ~ .a3d-cp__tablist label[for=a3d-cp-t1],
#a3d-cp-t2:focus-visible ~ .a3d-cp__tablist label[for=a3d-cp-t2],
#a3d-cp-t3:focus-visible ~ .a3d-cp__tablist label[for=a3d-cp-t3],
#a3d-cp-t4:focus-visible ~ .a3d-cp__tablist label[for=a3d-cp-t4] {
  outline: 2px solid var(--a3d-brand); outline-offset: 2px;
}

/* Accordion. <details>/<summary> rather than a scripted one: it opens with the
   keyboard, screen readers announce the state, find-in-page can open a closed
   section to reveal a match, and it degrades to plain visible content. */
.a3d-cp__acc { border-top: 1px solid var(--a3d-line); }
.a3d-cp__item { border-bottom: 1px solid var(--a3d-line); }
.a3d-cp__summary {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 4px; cursor: pointer; list-style: none;
  font-family: var(--a3d-display); font-size: 1.02rem; font-weight: 600; color: var(--a3d-ink);
}
.a3d-cp__summary::-webkit-details-marker { display: none; }
.a3d-cp__summary::marker { content: ''; }
.a3d-cp__summary:hover { color: var(--a3d-brand-deep); }
.a3d-cp__fi { width: 20px; height: 20px; flex: none; color: var(--a3d-brand-on-white); }
.a3d-cp__sumtext { flex: 1 1 auto; }
.a3d-cp__chev { width: 12px; height: 8px; flex: none; color: var(--a3d-muted); transition: transform .15s ease; }
.a3d-cp__item[open] .a3d-cp__chev { transform: rotate(180deg); }
.a3d-cp__body { padding: 0 4px 22px 44px; }
.a3d-cp__body p { margin: 0 0 14px; color: var(--a3d-muted); max-width: 62ch; }
.a3d-cp__accart { margin: 0; }
.a3d-cp__accart img {
  display: block; width: 100%; height: auto;
  border-radius: 4px; border: 1px solid var(--a3d-line);
}
.a3d-cp__accart--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.a3d-cp__sublede { color: var(--a3d-muted); max-width: 68ch; }
.a3d-cp__grid {
  display: grid; gap: 26px; margin-top: 22px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.a3d-cp__ba { margin: 0; }
.a3d-cp__bapair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a3d-cp__bahalf { position: relative; border-radius: 4px; overflow: hidden; }
.a3d-cp__bahalf img { display: block; width: 100%; height: auto; }
.a3d-cp__balabel {
  position: absolute; left: 8px; top: 8px;
  font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px;
  background: rgba(12,30,41,.8); color: #fff;
}
.a3d-cp__balabel.is-after { background: var(--a3d-brand); color: #05222f; }
.a3d-cp__ba figcaption { margin-top: 9px; font-size: .88rem; color: var(--a3d-ink); }

.a3d-cp__steps { list-style: none; margin: 22px 0 30px; padding: 0; display: grid; gap: 20px; }
.a3d-cp__steps li { display: flex; gap: 16px; align-items: flex-start; }
.a3d-cp__stepno {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--a3d-brand-on-white); color: #fff;
  font-family: var(--a3d-display); font-weight: 700; font-size: .9rem;
}
.a3d-cp__steps h3 { margin: 2px 0 5px; font-size: 1rem; }
.a3d-cp__steps p { margin: 0; color: var(--a3d-muted); max-width: 62ch; }
.a3d-cp__note { color: var(--a3d-muted); font-size: .9rem; max-width: 62ch; }
.a3d-cp__cta { margin-top: 22px; }

@media (max-width: 767.98px) {
  .a3d-cp__hero { grid-template-columns: minmax(0, 1fr); }
  .a3d-cp__body { padding-left: 4px; }
  .a3d-cp__tab { padding: 10px 12px; font-size: .86rem; }
  .a3d-cp__accart--pair { grid-template-columns: 1fr; }
}

/* Both platform marks on the utility bar, sized to the text beside them. */
.a3d-utility__platform { display: inline-flex; align-items: center; gap: 6px; }
.a3d-utility__os { width: 13px; height: 13px; flex: none; opacity: .8; }
.a3d-utility__os + .a3d-utility__os { margin-inline-start: -2px; margin-inline-end: 3px; }

/* --------------------------------------------------------------------------
   34. Home page Copilot promotional block

   A full section, not a notification strip: a thin bar of text reads as a
   cookie notice and gets dismissed before it is read. This sits after the
   comparison table, so the ladder and the feature matrix — what a buyer came
   for — come first, and Copilot reads as the reason to choose 26 over 25.

   The section is navy, so EVERY text colour here is stated explicitly. The
   first version inherited --a3d-ink for the heading, which is near-black: the
   title was invisible against the background.
   -------------------------------------------------------------------------- */

.a3d-promo {
  background: var(--a3d-deep);
  color: #fff;
  padding-block: clamp(48px, 6vw, 84px);
  padding-inline: var(--a3d-gutter);
}
.a3d-promo__inner { max-width: var(--a3d-max); margin-inline: auto; }

.a3d-promo__head { max-width: 62ch; }
.a3d-promo__kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--a3d-brand);
}
.a3d-promo__kickicon { width: 15px; height: 15px; }
.a3d-promo__title {
  margin: 12px 0 0;
  font-family: var(--a3d-display);
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  font-weight: 700; letter-spacing: -.02em;
  color: #fff;
}
.a3d-promo__lede {
  margin: 14px 0 0;
  font-size: 1.02rem; line-height: 1.6;
  color: rgba(255,255,255,.76);
}

/* --- before / after reveal slider ---------------------------------------- */

.a3d-reveal { margin: 32px 0 0; }
.a3d-reveal__frame {
  position: relative;
  border-radius: 6px; overflow: hidden;
  background: #0a1a23;
  touch-action: pan-y;
}
.a3d-reveal__base { display: block; width: 100%; height: auto; }
.a3d-reveal__over {
  position: absolute; inset: 0;
  /* Reveal from the left up to the divider. inset() rather than a width, so
     the image inside never reflows as the divider moves. */
  clip-path: inset(0 calc(100% - var(--a3d-reveal-pos, 50%)) 0 0);
}
.a3d-reveal__over img { display: block; width: 100%; height: 100%; object-fit: cover; }

.a3d-reveal__divider {
  position: absolute; top: 0; bottom: 0;
  left: var(--a3d-reveal-pos, 50%);
  width: 2px; margin-left: -1px;
  background: rgba(255,255,255,.9);
  pointer-events: none;
}
.a3d-reveal__grip {
  position: absolute; top: 50%; left: 50%;
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border-radius: 50%;
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
/* Two chevrons on the grip, drawn with borders so there is no extra markup. */
.a3d-reveal__grip::before,
.a3d-reveal__grip::after {
  content: ''; position: absolute; top: 50%; width: 7px; height: 7px;
  margin-top: -4px;
  border-top: 2px solid var(--a3d-deep); border-right: 2px solid var(--a3d-deep);
}
.a3d-reveal__grip::before { left: 9px; transform: rotate(-135deg); }
.a3d-reveal__grip::after { right: 9px; transform: rotate(45deg); }

.a3d-reveal__tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 3px;
  background: rgba(12,30,41,.82); color: #fff;
}
.a3d-reveal__tag.is-after {
  left: auto; right: 12px;
  background: var(--a3d-brand); color: #05222f;
}

/* The real control. Kept transparent and stretched over the frame so a drag
   anywhere on the image works, while the keyboard still gets a proper range. */
.a3d-reveal__range {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; margin: 0;
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; cursor: ew-resize;
}
.a3d-reveal__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent; border: 0; cursor: ew-resize;
}
.a3d-reveal__range::-moz-range-thumb {
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent; border: 0; cursor: ew-resize;
}
.a3d-reveal__range:focus-visible { outline: 2px solid var(--a3d-brand); outline-offset: 3px; }
.a3d-reveal figcaption {
  margin-top: 12px;
  font-size: .88rem; color: rgba(255,255,255,.6);
}

/* --- capability cards ----------------------------------------------------- */

.a3d-promo__cards {
  list-style: none; margin: 36px 0 0; padding: 0;
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.a3d-promo__card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column;
}
.a3d-promo__card img { display: block; width: 100%; height: 150px; object-fit: cover; }
.a3d-promo__cardbody { padding: 16px 18px 20px; }
.a3d-promo__card h3 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 8px;
  font-family: var(--a3d-display); font-size: .98rem; font-weight: 600;
  color: #fff;
}
.a3d-promo__ci { width: 18px; height: 18px; flex: none; color: var(--a3d-brand); }
.a3d-promo__card p {
  margin: 0; font-size: .88rem; line-height: 1.55;
  color: rgba(255,255,255,.68);
}

.a3d-promo__foot {
  margin-top: 32px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px;
}
.a3d-promo__note {
  margin: 0; max-width: 52ch;
  font-size: .86rem; color: rgba(255,255,255,.55);
}

@media (prefers-reduced-motion: reduce) {
  .a3d-reveal__over { transition: none; }
}

/* --------------------------------------------------------------------------
   36. Long-form CMS pages (FAQs, glossary, policies)

   These bodies came across from WordPress as plain prose with h2/h3/p/ul, so
   they are styled once here rather than carrying inline styles per page. The
   measure is capped: policy and glossary text runs to 19KB and a full-width
   line of it is unreadable.
   -------------------------------------------------------------------------- */

.a3d-doc { max-width: 74ch; }
.a3d-doc > h2 {
  margin: 40px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--a3d-line);
  font-family: var(--a3d-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  letter-spacing: -.015em;
}
.a3d-doc > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.a3d-doc > h3 {
  margin: 26px 0 8px;
  font-family: var(--a3d-display);
  font-size: 1.04rem; font-weight: 600;
  color: var(--a3d-ink);
}
.a3d-doc p,
.a3d-doc li { line-height: 1.68; color: var(--a3d-body, var(--a3d-ink)); }
.a3d-doc p { margin: 0 0 14px; }
.a3d-doc ul,
.a3d-doc ol { margin: 0 0 16px; padding-inline-start: 22px; }
.a3d-doc li { margin-bottom: 7px; }
.a3d-doc a { color: var(--a3d-brand-on-white); text-decoration: underline; text-underline-offset: 2px; }
.a3d-doc a:hover { color: var(--a3d-brand-deep); }
.a3d-doc strong { font-weight: 600; color: var(--a3d-ink); }
.a3d-doc table {
  width: 100%; border-collapse: collapse; margin: 0 0 20px;
  font-size: .92rem;
}
.a3d-doc th,
.a3d-doc td { padding: 9px 12px; border-bottom: 1px solid var(--a3d-line); text-align: left; }
.a3d-doc th { font-weight: 600; background: var(--a3d-paper); }

/* --------------------------------------------------------------------------
   37. Gallery
   -------------------------------------------------------------------------- */

.a3d-gal__lede { color: var(--a3d-muted); max-width: 68ch; }
.a3d-gal h2 {
  margin: 40px 0 16px;
  font-family: var(--a3d-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -.015em;
}
.a3d-gal__grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.a3d-gal__item { margin: 0; border-radius: 5px; overflow: hidden; background: var(--a3d-paper); }
.a3d-gal__item img {
  display: block; width: 100%; height: 220px;
  object-fit: cover;
  transition: transform .3s ease;
}
.a3d-gal__item:hover img { transform: scale(1.03); }

.a3d-gal__videos {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.a3d-gal__video { margin: 0; }
/* A still that links out, not an embedded player: six iframes would open six
   connections to YouTube on a cold load and set cookies before anyone has
   chosen to watch anything. */
.a3d-gal__play {
  position: relative; display: block;
  border-radius: 5px; overflow: hidden; background: #000;
}
.a3d-gal__play img { display: block; width: 100%; height: auto; opacity: .92; transition: opacity .2s ease; }
.a3d-gal__play:hover img { opacity: 1; }
.a3d-gal__playicon {
  position: absolute; top: 50%; left: 50%;
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; background: rgba(12,30,41,.78);
  border: 2px solid rgba(255,255,255,.9);
}
.a3d-gal__playicon::after {
  content: ''; position: absolute; top: 50%; left: 52%;
  transform: translate(-50%, -50%);
  border-left: 14px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.a3d-gal__play:hover .a3d-gal__playicon { background: var(--a3d-brand); }
.a3d-gal__video figcaption {
  margin-top: 9px; font-size: .89rem; line-height: 1.4; color: var(--a3d-ink);
}

@media (max-width: 575.98px) {
  .a3d-gal__item img { height: 180px; }
}

/* --------------------------------------------------------------------------
   38. Mac upgrades block on the upgrades page
   -------------------------------------------------------------------------- */

.a3d-macup {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--a3d-line);
}
.a3d-macup__head h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px;
  font-family: var(--a3d-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -.015em;
}
.a3d-macup__os { width: 20px; height: 20px; flex: none; color: var(--a3d-ink); }
.a3d-macup__head p { margin: 0 0 22px; color: var(--a3d-muted); max-width: 64ch; }

.a3d-macup__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.a3d-macup__item {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--a3d-line); border-radius: 5px;
  background: #fff;
}
.a3d-macup__item:hover { border-color: var(--a3d-line-2); }
.a3d-macup__tier {
  flex: 1 1 auto;
  font-family: var(--a3d-display); font-weight: 600; font-size: 1.02rem;
  color: var(--a3d-ink);
}
.a3d-macup__price {
  font-family: var(--a3d-display); font-weight: 700; font-size: 1.05rem;
  color: var(--a3d-ink); white-space: nowrap;
}
.a3d-macup__cta {
  flex: none; padding: 8px 16px; border-radius: 3px;
  border: 1px solid var(--a3d-brand-on-white);
  color: var(--a3d-brand-on-white); font-size: .88rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.a3d-macup__cta:hover {
  background: var(--a3d-brand-on-white); color: #fff;
}
.a3d-macup__more { margin: 18px 0 0; font-size: .92rem; }
.a3d-macup__more a { color: var(--a3d-brand-on-white); font-weight: 600; }

@media (max-width: 575.98px) {
  .a3d-macup__item { flex-wrap: wrap; gap: 8px 14px; }
  .a3d-macup__cta { width: 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   39. Mac feature comparison (89 rows, 7 collapsible sections)
   -------------------------------------------------------------------------- */

.a3d-maccmp { margin-top: clamp(40px, 5vw, 64px); }
.a3d-maccmp__head h2 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font-family: var(--a3d-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -.015em;
}
.a3d-maccmp__os { width: 20px; height: 20px; flex: none; color: var(--a3d-ink); }
.a3d-maccmp__head p { margin: 0 0 20px; color: var(--a3d-muted); max-width: 66ch; }

.a3d-maccmp__sec { border-top: 1px solid var(--a3d-line); }
.a3d-maccmp__sec:last-of-type { border-bottom: 1px solid var(--a3d-line); }
.a3d-maccmp__sum {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 4px; cursor: pointer; list-style: none;
  font-family: var(--a3d-display); font-size: 1.02rem; font-weight: 600;
  color: var(--a3d-ink);
}
.a3d-maccmp__sum::-webkit-details-marker { display: none; }
.a3d-maccmp__sum::marker { content: ''; }
.a3d-maccmp__sum:hover { color: var(--a3d-brand-deep); }
.a3d-maccmp__sum > span:first-child { flex: 1 1 auto; }
.a3d-maccmp__count {
  font-family: var(--a3d-body); font-size: .78rem; font-weight: 600;
  color: var(--a3d-muted); background: var(--a3d-paper);
  padding: 2px 8px; border-radius: 10px;
}
.a3d-maccmp__chev { width: 12px; height: 8px; flex: none; color: var(--a3d-muted); transition: transform .15s ease; }
.a3d-maccmp__sec[open] .a3d-maccmp__chev { transform: rotate(180deg); }

/* Five tier columns plus a label column stay readable down to tablet width;
   below that the table scrolls rather than crushing the feature names. */
.a3d-maccmp__scroll { overflow-x: auto; padding-bottom: 6px; }
.a3d-maccmp__table {
  width: 100%; border-collapse: collapse; font-size: .9rem;
  margin-bottom: 18px;
}
.a3d-maccmp__table th,
.a3d-maccmp__table td {
  padding: 10px 12px; text-align: center;
  border-bottom: 1px solid var(--a3d-line);
}
.a3d-maccmp__table tbody th {
  text-align: left; font-weight: 400; color: var(--a3d-ink);
  min-width: 220px;
}
.a3d-maccmp__table thead th { border-bottom: 2px solid var(--a3d-line-2); vertical-align: bottom; }
.a3d-maccmp__table thead a { display: block; color: inherit; text-decoration: none; }
.a3d-maccmp__tier {
  display: block; font-family: var(--a3d-display);
  font-size: .98rem; font-weight: 700; letter-spacing: -.015em;
}
.a3d-maccmp__price { display: block; margin-top: 2px; font-size: .8rem; color: var(--a3d-muted); }
.a3d-maccmp__table thead a:hover .a3d-maccmp__tier { color: var(--a3d-brand-deep); }
.a3d-maccmp__table tbody tr:hover th,
.a3d-maccmp__table tbody tr:hover td { background: var(--a3d-paper); }
.a3d-maccmp__tick { color: var(--a3d-brand); vertical-align: middle; }
.a3d-maccmp__no { color: var(--a3d-line-2); }
.a3d-maccmp__num { font-family: var(--a3d-display); font-weight: 600; }

/* Same dotted underline the Windows table uses, so a tooltip reads as one. */
.a3d-maccmp__feature {
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: var(--a3d-line-2); text-underline-offset: 3px;
  cursor: help;
}

/* --------------------------------------------------------------------------
   40. Glossary

   160 terms as a run of paragraphs is not readable, so the page is grouped by
   initial with a jump bar. dl/dt/dd rather than bold-inside-a-paragraph: the
   term and its definition are genuinely a pair, and a screen reader announces
   them as one.
   -------------------------------------------------------------------------- */

.a3d-gloss__intro { max-width: 72ch; color: var(--a3d-muted); margin-bottom: 22px; }
.a3d-gloss__jump {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 12px; margin-bottom: 30px;
  background: var(--a3d-paper); border: 1px solid var(--a3d-line); border-radius: 5px;
  position: sticky; top: 0; z-index: 5;
}
.a3d-gloss__jump a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 6px;
  border-radius: 3px; background: #fff; border: 1px solid var(--a3d-line);
  font-family: var(--a3d-display); font-weight: 700; font-size: .84rem;
  color: var(--a3d-brand-on-white); text-decoration: none;
}
.a3d-gloss__jump a:hover { background: var(--a3d-brand-on-white); color: #fff; border-color: var(--a3d-brand-on-white); }

.a3d-gloss__group { margin-bottom: 30px; }
.a3d-gloss__group h2 {
  margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 2px solid var(--a3d-line);
  font-family: var(--a3d-display); font-size: 1.4rem; font-weight: 700;
  color: var(--a3d-brand-on-white);
  scroll-margin-top: 70px;
}
.a3d-gloss dl { margin: 0; }
.a3d-gloss dt {
  font-family: var(--a3d-display); font-weight: 600; font-size: .98rem;
  color: var(--a3d-ink); margin-top: 14px;
}
.a3d-gloss dd {
  margin: 3px 0 0; padding: 0;
  color: var(--a3d-muted); line-height: 1.6; max-width: 72ch;
}
/* --------------------------------------------------------------------------
   41. Product page content blocks

   Sits below the specification accordion. Full-bleed on the page's own gutter
   rather than inside the narrow product column: these are pictures, and the
   product column is sized for a paragraph.
   -------------------------------------------------------------------------- */

.a3d-pblocks { margin-top: clamp(44px, 5vw, 72px); }
.a3d-pb { padding-block: clamp(34px, 4vw, 56px); border-top: 1px solid var(--a3d-line); }
.a3d-pb:first-child { border-top: 0; padding-top: 0; }

.a3d-pb__head { max-width: 62ch; margin-bottom: 24px; }
.a3d-pb h2 {
  margin: 0 0 10px;
  font-family: var(--a3d-display);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 700; letter-spacing: -.02em;
  color: var(--a3d-ink);
}
.a3d-pb__head p,
.a3d-pb__copy p { margin: 0; color: var(--a3d-muted); line-height: 1.6; }

/* --- what it produces ----------------------------------------------------- */
.a3d-pb__grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.a3d-pb__shot { margin: 0; }
.a3d-pb__shot img {
  display: block; width: 100%; height: 190px; object-fit: cover;
  border-radius: 5px; border: 1px solid var(--a3d-line);
}
.a3d-pb__shot figcaption {
  margin-top: 8px; font-size: .85rem; line-height: 1.4; color: var(--a3d-muted);
}

/* --- split: art beside copy ---------------------------------------------- */
.a3d-pb--split,
.a3d-pb--copilot {
  display: grid; gap: clamp(24px, 3.5vw, 48px);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
}
.a3d-pb--copilot { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.a3d-pb__art { margin: 0; }
.a3d-pb__art > img {
  display: block; width: 100%; height: auto;
  border-radius: 5px; border: 1px solid var(--a3d-line);
}
.a3d-pb__points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.a3d-pb__points li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .92rem; line-height: 1.45; color: var(--a3d-ink);
}
.a3d-pb__pi { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--a3d-brand-on-white); }

/* --- Copilot band --------------------------------------------------------- */
.a3d-pb--copilot {
  background: var(--a3d-deep);
  color: #fff;
  border-radius: 6px;
  padding: clamp(26px, 3.5vw, 44px);
  border-top: 0;
  margin-top: clamp(34px, 4vw, 56px);
}
/* Navy band: every colour restated, nothing inherited from the light page. */
.a3d-pb--copilot h2 { color: #fff; }
.a3d-pb--copilot p { color: rgba(255,255,255,.76); }
.a3d-pb__kicker {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--a3d-brand);
}
.a3d-pb__kickicon { width: 14px; height: 14px; }
.a3d-pb--copilot .a3d-pb__cta { color: #fff; }
.a3d-pb--copilot .a3d-pb__cta:hover { color: var(--a3d-brand); }

.a3d-pb__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a3d-pb__half { position: relative; border-radius: 4px; overflow: hidden; }
.a3d-pb__half img { display: block; width: 100%; height: auto; }
.a3d-pb__tag {
  position: absolute; left: 8px; top: 8px;
  font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px;
  background: rgba(12,30,41,.82); color: #fff;
}
.a3d-pb__tag.is-after { background: var(--a3d-brand); color: #05222f; }

/* --- compare footer ------------------------------------------------------- */
.a3d-pb--compare {
  display: flex; flex-wrap: wrap; gap: 18px 32px;
  align-items: center; justify-content: space-between;
}
.a3d-pb--compare > div { flex: 1 1 min(46ch, 100%); }
.a3d-pb__cta {
  display: inline-block; flex: none;
  font-weight: 600; font-size: .95rem;
  color: var(--a3d-brand-on-white); text-decoration: none;
}
.a3d-pb__cta:hover { color: var(--a3d-brand-deep); text-decoration: underline; }

@media (max-width: 860px) {
  .a3d-pb--split,
  .a3d-pb--copilot { grid-template-columns: minmax(0, 1fr); }
  .a3d-pb__shot img { height: 170px; }
}
/* --------------------------------------------------------------------------
   42. Add-on picker

   A pick-list, not a product grid. The eight content packs are the same price
   with near-identical boxshots, so tiles asked people to compare eight
   pictures that differ in one line of text.

   Each row is a <label> around a real checkbox: the whole card is the hit
   area, the keyboard works, and the visible box is a styled span driven off
   :checked. The native input stays in the layout (clipped, not
   display:none) so it is still focusable and still announced.
   -------------------------------------------------------------------------- */

.a3d-addons { margin-block: clamp(28px, 3.5vw, 48px); }
.a3d-addons__head { max-width: 64ch; margin-bottom: 20px; }
.a3d-addons__head h2 {
  margin: 0 0 8px;
  font-family: var(--a3d-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700; letter-spacing: -.02em;
}
.a3d-addons__head p { margin: 0; color: var(--a3d-muted); line-height: 1.55; }

.a3d-addons__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.a3d-addons__item { position: relative; }

.a3d-addons__card {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: auto 64px minmax(0, 1fr) auto;
  padding: 12px 96px 12px 14px;
  border: 1px solid var(--a3d-line); border-radius: 5px;
  background: #fff; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.a3d-addons__card:hover { border-color: var(--a3d-line-2); }

/* Clipped rather than hidden: display:none would take it out of the tab
   order and stop screen readers announcing the checked state. */
.a3d-addons__check {
  position: absolute; width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}
.a3d-addons__box {
  width: 20px; height: 20px; flex: none;
  border: 2px solid var(--a3d-line-2); border-radius: 3px;
  background: #fff; position: relative;
}
.a3d-addons__check:checked ~ .a3d-addons__box {
  background: var(--a3d-brand-on-white); border-color: var(--a3d-brand-on-white);
}
.a3d-addons__check:checked ~ .a3d-addons__box::after {
  content: ''; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.a3d-addons__check:focus-visible ~ .a3d-addons__box {
  outline: 2px solid var(--a3d-brand); outline-offset: 2px;
}
/* The selected state is driven by a class the script toggles, not by
   :has(.a3d-addons__check:checked). That selector matched — CSS.supports
   agreed, element.matches agreed — and still lost the computed border to
   another rule, and :has() is unsupported outright on older Safari. A class
   cannot be argued with. */
.a3d-addons__item.is-picked .a3d-addons__card {
  border-color: var(--a3d-brand);
  background: rgba(24,154,208,.05);
  box-shadow: inset 0 0 0 1px var(--a3d-brand);
}

.a3d-addons__img {
  width: 64px; height: 64px; object-fit: contain;
  border-radius: 3px; background: var(--a3d-paper);
}
.a3d-addons__body { display: block; min-width: 0; }
.a3d-addons__name {
  display: block; font-weight: 600; font-size: .96rem; color: var(--a3d-ink);
  margin-bottom: 3px;
}
.a3d-addons__blurb {
  display: block; font-size: .85rem; line-height: 1.45; color: var(--a3d-muted);
}
.a3d-addons__price {
  font-family: var(--a3d-display); font-weight: 700; font-size: 1.02rem;
  color: var(--a3d-ink); white-space: nowrap;
}

/* The details link sits outside the label — nesting an <a> inside a <label>
   makes clicking it ambiguous, and browsers disagree about which wins. */
.a3d-addons__more {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: .84rem; font-weight: 600;
  color: var(--a3d-brand-on-white); text-decoration: none;
}
.a3d-addons__more:hover { text-decoration: underline; }

.a3d-addons__bar {
  position: sticky; bottom: 12px; z-index: 6;
  margin-top: 14px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--a3d-deep); color: #fff;
  border-radius: 5px; box-shadow: 0 8px 24px rgba(12,30,41,.22);
}
.a3d-addons__bar[hidden] { display: none; }
.a3d-addons__count { font-size: .9rem; color: rgba(255,255,255,.78); }
.a3d-addons__total {
  font-family: var(--a3d-display); font-weight: 700; font-size: 1.1rem; color: #fff;
  margin-inline-end: auto;
}
.a3d-addons__add {
  border: 0; border-radius: 3px; cursor: pointer;
  padding: 10px 20px;
  background: var(--a3d-brand); color: #05222f;
  font-family: var(--a3d-display); font-weight: 700; font-size: .94rem;
}
.a3d-addons__add:hover { background: #fff; }
.a3d-addons__add:disabled { opacity: .65; cursor: default; }

.a3d-addons__all { margin: 14px 0 0; font-size: .92rem; }
.a3d-addons__all a { color: var(--a3d-brand-on-white); font-weight: 600; }

/* Compact variant, under a product */
.a3d-addons--compact { border-top: 1px solid var(--a3d-line); padding-top: clamp(28px, 3.5vw, 44px); }
.a3d-addons--compact .a3d-addons__blurb { display: none; }
.a3d-addons--compact .a3d-addons__card { padding-block: 10px; }

@media (max-width: 700px) {
  .a3d-addons__card {
    grid-template-columns: auto 48px minmax(0, 1fr);
    padding-right: 14px; padding-bottom: 38px;
  }
  .a3d-addons__img { width: 48px; height: 48px; }
  .a3d-addons__price { grid-column: 3; justify-self: start; }
  .a3d-addons__more { right: auto; left: 76px; top: auto; bottom: 10px; transform: none; }
}

/* --------------------------------------------------------------------------
   43. What's new in version 26

   The page a version 25 owner lands on to decide whether to upgrade. It was
   962 bytes of text with no pictures.

   The header is a navy band carrying the release date, the headline and an
   index — a reader who only wants to know about SketchUp import should not
   have to scroll past Copilot to find it. The two before/after pairs are the
   same drag-to-reveal control as the home page.
   -------------------------------------------------------------------------- */

.a3d-wn { margin-block: 0 clamp(30px, 4vw, 56px); }

/* --- header band ---------------------------------------------------------- */
.a3d-wn__hero {
  background: var(--a3d-deep);
  color: #fff;
  border-radius: 6px;
  padding: clamp(28px, 4vw, 52px);
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.a3d-wn__badge {
  display: inline-block; margin-bottom: 14px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(24,154,208,.16);
  border: 1px solid rgba(24,154,208,.4);
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--a3d-brand);
}
/* Navy band: every colour stated, nothing inherited from the light page. */
.a3d-wn__h1 {
  margin: 0 0 14px;
  font-family: var(--a3d-display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.08;
  color: #fff;
}
.a3d-wn__lede {
  margin: 0; max-width: 62ch;
  font-size: 1.06rem; line-height: 1.6;
  color: rgba(255,255,255,.78);
}
.a3d-wn__index {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.a3d-wn__index a {
  padding: 7px 14px; border-radius: 3px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  font-size: .86rem; font-weight: 600; color: rgba(255,255,255,.88);
  text-decoration: none;
}
.a3d-wn__index a:hover {
  background: var(--a3d-brand); border-color: var(--a3d-brand); color: #05222f;
}

/* --- sections ------------------------------------------------------------- */
.a3d-wn__sec {
  padding-block: clamp(30px, 3.6vw, 50px);
  border-top: 1px solid var(--a3d-line);
  scroll-margin-top: 24px;
}
.a3d-wn__sec:first-of-type { border-top: 0; padding-top: 0; }
.a3d-wn__copy { max-width: 68ch; }
.a3d-wn__tag {
  display: inline-block; margin-bottom: 8px;
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--a3d-brand-on-white);
}
.a3d-wn__sec h2 {
  margin: 0 0 10px;
  font-family: var(--a3d-display);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -.02em;
}
.a3d-wn__sec.is-lead h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.a3d-wn__sec p { margin: 0; color: var(--a3d-muted); line-height: 1.65; }

/* --- figures -------------------------------------------------------------- */
.a3d-wn__fig { margin: 22px 0 0; }
.a3d-wn__fig > img,
.a3d-wn__pair img {
  display: block; width: 100%; height: auto;
  border-radius: 5px; border: 1px solid var(--a3d-line);
}
.a3d-wn__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.a3d-wn__fig figcaption {
  margin-top: 11px; font-size: .87rem; line-height: 1.45; color: var(--a3d-muted);
}
/* The reveal control styles come from the home page block (section 34); the
   frame only needs a border here, since it sits on white rather than navy. */
.a3d-wn__fig--reveal .a3d-reveal__frame { border: 1px solid var(--a3d-line); }

/* --- quote ---------------------------------------------------------------- */
.a3d-wn__quote {
  margin: 0; padding: clamp(24px, 3vw, 38px) 0;
  border-top: 1px solid var(--a3d-line);
  max-width: 72ch;
}
.a3d-wn__quote p {
  margin: 0 0 12px;
  font-family: var(--a3d-display);
  font-size: clamp(1.1rem, 2.1vw, 1.35rem); line-height: 1.5;
  color: var(--a3d-ink);
}
.a3d-wn__quote cite { font-style: normal; font-size: .87rem; color: var(--a3d-muted); }

/* --- availability --------------------------------------------------------- */
.a3d-wn__avail {
  padding: clamp(26px, 3.4vw, 40px);
  border: 1px solid var(--a3d-line);
  border-radius: 6px;
  background: var(--a3d-paper);
}
.a3d-wn__avail h2 {
  margin: 0 0 10px;
  font-family: var(--a3d-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em;
}
.a3d-wn__avail p { margin: 0; color: var(--a3d-muted); line-height: 1.6; max-width: 68ch; }
.a3d-wn__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 22px; }
.a3d-wn__link { font-weight: 600; color: var(--a3d-brand-on-white); text-decoration: none; }
.a3d-wn__link:hover { text-decoration: underline; }

@media (max-width: 575.98px) {
  .a3d-wn__pair { grid-template-columns: 1fr; }
  .a3d-wn__index a { padding: 6px 11px; font-size: .82rem; }
}

/* --------------------------------------------------------------------------
   44. Trust strip under the buy button

   Sits where ps_sharebuttons used to put Facebook, X and Pinterest. Quiet by
   design: this is reassurance, not another thing competing with the buy
   button. Small type, muted colour, one accent on the icons.
   -------------------------------------------------------------------------- */

.a3d-trust {
  list-style: none; margin: 20px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--a3d-line);
  display: grid; gap: 13px;
}
.a3d-trust__item { display: flex; align-items: flex-start; gap: 11px; }
.a3d-trust__i {
  width: 19px; height: 19px; flex: none; margin-top: 1px;
  color: var(--a3d-brand-on-white);
}
.a3d-trust__item span {
  font-size: .86rem; line-height: 1.45; color: var(--a3d-muted);
}
.a3d-trust__item strong {
  display: block; font-weight: 600; font-size: .89rem;
  color: var(--a3d-ink); margin-bottom: 1px;
}

/* --- payment marks -------------------------------------------------------- */
/* Drawn rather than fetched: a logo strip from a CDN is a third-party request
   on every product page, and these must survive that host being unreachable. */
.a3d-trust__pay {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--a3d-line);
}
.a3d-trust__paylabel {
  font-size: .78rem; color: var(--a3d-muted);
  margin-inline-end: 4px;
}
.a3d-trust__card {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 28px; padding: 0 8px;
  border: 1px solid var(--a3d-line); border-radius: 4px;
  background: #fff;
  font-family: var(--a3d-display);
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
}
.a3d-trust__card.is-visa  { color: #1A1F71; }
.a3d-trust__card.is-amex  { color: #006FCF; }
.a3d-trust__card.is-pp    { color: #003087; letter-spacing: 0; font-size: .72rem; }

/* Mastercard's two interlocking discs, as two overlapping circles. */
.a3d-trust__mc { display: inline-flex; align-items: center; }
.a3d-trust__mc i {
  display: block; width: 15px; height: 15px; border-radius: 50%;
}
.a3d-trust__mc i:first-child { background: #EB001B; }
.a3d-trust__mc i:last-child  { background: #F79E1B; margin-left: -6px; opacity: .85; }

@media (min-width: 380px) {
  .a3d-trust { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   45. Features explained

   Where the comparison table's tooltips land. It was seventeen headings each
   followed by one sentence — accurate and completely flat, on a store selling
   design software.

   Now: a header band, a jump bar, six groups, and one card per feature
   carrying the same icon the comparison table uses, so a reader arriving from
   a tooltip recognises the row they clicked.
   -------------------------------------------------------------------------- */

.a3d-features__hero {
  background: var(--a3d-deep);
  color: #fff;
  border-radius: 6px;
  padding: clamp(26px, 3.6vw, 46px);
  margin-bottom: clamp(26px, 3.4vw, 44px);
}
/* Navy band: every colour stated, none inherited from the light page. */
.a3d-features__hero h1 {
  margin: 0 0 12px;
  font-family: var(--a3d-display);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
  color: #fff;
}
.a3d-features__hero p {
  margin: 0; max-width: 62ch;
  font-size: 1.02rem; line-height: 1.6; color: rgba(255,255,255,.76);
}
.a3d-features__jump {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.a3d-features__jump a {
  padding: 7px 14px; border-radius: 3px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.88);
  text-decoration: none;
}
.a3d-features__jump a:hover {
  background: var(--a3d-brand); border-color: var(--a3d-brand); color: #05222f;
}

.a3d-features__group { margin-bottom: clamp(30px, 3.6vw, 46px); scroll-margin-top: 20px; }
.a3d-features__group h2 {
  margin: 0 0 16px; padding-bottom: 10px;
  border-bottom: 2px solid var(--a3d-line);
  font-family: var(--a3d-display);
  font-size: clamp(1.15rem, 2.1vw, 1.45rem); font-weight: 700; letter-spacing: -.015em;
}

.a3d-features__grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.a3d-feature {
  padding: 20px;
  border: 1px solid var(--a3d-line); border-radius: 6px;
  background: #fff;
  scroll-margin-top: 20px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.a3d-feature:hover {
  border-color: var(--a3d-line-2);
  box-shadow: 0 3px 14px rgba(12,30,41,.06);
}
/* Arriving from a tooltip link should land somewhere obvious. */
.a3d-feature:target {
  border-color: var(--a3d-brand);
  box-shadow: 0 0 0 3px rgba(24,154,208,.14);
}
.a3d-feature__icon {
  width: 26px; height: 26px; display: block; margin-bottom: 12px;
  color: var(--a3d-brand-on-white);
}
.a3d-feature h3 {
  margin: 0 0 7px;
  font-family: var(--a3d-display);
  font-size: 1.02rem; font-weight: 600; color: var(--a3d-ink);
}
.a3d-feature p {
  margin: 0; font-size: .89rem; line-height: 1.55; color: var(--a3d-muted);
}
.a3d-feature__in {
  margin-top: 12px !important;
  padding-top: 10px;
  border-top: 1px solid var(--a3d-line);
  font-size: .82rem !important;
}
.a3d-feature__in span {
  font-weight: 600; color: var(--a3d-ink);
}

.a3d-features__back { margin-top: 8px; font-size: .93rem; }
.a3d-features__back a { color: var(--a3d-brand-on-white); font-weight: 600; text-decoration: none; }
.a3d-features__back a:hover { text-decoration: underline; }

@media (max-width: 575.98px) {
  .a3d-features__jump a { padding: 6px 11px; font-size: .81rem; }
  .a3d-feature { padding: 16px; }
}

/* --------------------------------------------------------------------------
   46. Support page

   /6-support was a category listing: 133 product tiles under the word
   "Support", because the Support category holds the Maintenance & Support
   Renewal SKUs. Somebody who cannot activate their licence has no use for a
   grid of things to buy.

   The contact band comes first and is the only coloured block on the page —
   everything below it is a link someone can follow instead of writing in, and
   the ordering says so without a word of copy.
   -------------------------------------------------------------------------- */

.a3d-sup__hero { max-width: 66ch; margin-bottom: clamp(24px, 3vw, 36px); }
.a3d-sup__hero h1 {
  margin: 0 0 12px;
  font-family: var(--a3d-display);
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
}
.a3d-sup__hero p { margin: 0; font-size: 1.04rem; line-height: 1.6; color: var(--a3d-muted); }

/* --- contact band --------------------------------------------------------- */
.a3d-sup__contact {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px 32px;
  padding: clamp(22px, 3vw, 34px);
  margin-bottom: clamp(30px, 3.6vw, 46px);
  background: var(--a3d-deep);
  border-radius: 6px;
  color: #fff;
}
.a3d-sup__contactcopy { flex: 1 1 min(46ch, 100%); }
/* Navy band: every colour stated explicitly, none inherited from the page. */
.a3d-sup__contact h2 {
  margin: 0 0 8px;
  font-family: var(--a3d-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em;
  color: #fff;
}
.a3d-sup__contact p { margin: 0; color: rgba(255,255,255,.76); line-height: 1.55; }
.a3d-sup__contactact { flex: none; }
.a3d-sup__mail { margin-top: 12px !important; font-size: .88rem; }
.a3d-sup__mail a { color: var(--a3d-brand); text-decoration: underline; text-underline-offset: 2px; }
.a3d-sup__mail a:hover { color: #fff; }

/* --- blocks --------------------------------------------------------------- */
.a3d-sup__block { margin-bottom: clamp(30px, 3.6vw, 46px); }
.a3d-sup__block h2 {
  margin: 0 0 6px;
  font-family: var(--a3d-display);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 700; letter-spacing: -.015em;
}
.a3d-sup__sub { margin: 0 0 18px; color: var(--a3d-muted); }

.a3d-sup__grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.a3d-sup__card {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 16px 18px;
  border: 1px solid var(--a3d-line); border-radius: 6px;
  background: #fff;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.a3d-sup__card:hover {
  border-color: var(--a3d-brand);
  box-shadow: 0 3px 14px rgba(12,30,41,.07);
  text-decoration: none;
}
.a3d-sup__icon {
  width: 22px; height: 22px; flex: none; margin-top: 1px;
  color: var(--a3d-brand-on-white);
}
.a3d-sup__cardbody { display: block; min-width: 0; }
.a3d-sup__cardtitle {
  display: block;
  font-family: var(--a3d-display); font-size: .98rem; font-weight: 600;
  color: var(--a3d-ink); margin-bottom: 3px;
}
.a3d-sup__carddesc {
  display: block; font-size: .86rem; line-height: 1.5; color: var(--a3d-muted);
}
/* Marks a link that leaves the store, so nobody is surprised by a new tab. */
.a3d-sup__ext {
  display: inline-block; margin-left: 6px;
  font-size: .78em; color: var(--a3d-muted); vertical-align: baseline;
}
.a3d-sup__card:hover .a3d-sup__ext { color: var(--a3d-brand-on-white); }

.a3d-sup__more { margin: 14px 0 0; font-size: .93rem; }
.a3d-sup__more a { color: var(--a3d-brand-on-white); font-weight: 600; text-decoration: none; }
.a3d-sup__more a:hover { text-decoration: underline; }

.a3d-sup__note {
  margin: 0; padding: 16px 18px;
  background: var(--a3d-paper);
  border: 1px solid var(--a3d-line); border-radius: 5px;
  font-size: .88rem; line-height: 1.55; color: var(--a3d-muted);
}

@media (max-width: 700px) {
  .a3d-sup__contactact { flex: 1 1 100%; }
  .a3d-sup__contactact .a3d-btn { width: 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   47. System requirements

   Two products, two release cycles: Windows is version 26, Mac is version 22.
   The old page ran them together as one prose list, which meant a Mac owner
   read seven Windows lines before finding out none of them applied. Side by
   side, the question "will it run on my machine" is answered by looking at one
   column.

   The wrapper is deliberately NOT a3d-doc — that caps the measure at 74ch,
   which two columns cannot live inside — and deliberately not in page.tpl's
   designed list either, so the theme still draws the page header and the body
   carries no h1 of its own.
   -------------------------------------------------------------------------- */

.a3d-sr__lede {
  max-width: 66ch; margin: 0 0 clamp(24px, 3vw, 34px);
  font-size: 1.02rem; line-height: 1.68; color: var(--a3d-muted);
}

/* min() on the track floor, not a bare 340px: the CMS container is 335px wide
   on a 375px phone, so a 340px minimum made both panels overflow it by 5px —
   and by 20px on a 360px handset. min(340px, 100%) lets the track collapse to
   whatever the container actually is. */
.a3d-sr__grid {
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  align-items: start;
}

.a3d-sr__panel {
  background: var(--a3d-surface);
  border: 1px solid var(--a3d-line);
  border-radius: 5px;
  padding: clamp(20px, 2.4vw, 28px);
}

.a3d-sr__head {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 16px; margin-bottom: 4px;
  border-bottom: 1px solid var(--a3d-line);
}
.a3d-sr__head h2 {
  margin: 0;
  font-family: var(--a3d-display);
  font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--a3d-ink);
}
.a3d-sr__meta {
  margin: 3px 0 0;
  font-size: .84rem; color: var(--a3d-muted);
}

/* The mark sits in a tinted tile so the two panels read as a matched pair —
   the Windows and Apple glyphs have very different visual weight and would
   otherwise look mismatched at the same size. */
.a3d-sr__logo {
  flex: none; box-sizing: content-box;
  width: 22px; height: 22px; padding: 9px;
  border-radius: 5px;
  background: var(--a3d-paper);
  border: 1px solid var(--a3d-line);
  color: var(--a3d-deep);
}
.a3d-sr__panel--win .a3d-sr__logo { color: #0C7CD5; }

.a3d-sr__sub {
  margin: 20px 0 4px;
  font-family: var(--a3d-display);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--a3d-muted);
}

.a3d-sr__spec { margin: 0; }
.a3d-sr__row {
  display: grid;
  grid-template-columns: minmax(110px, 34%) 1fr;
  gap: 4px 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--a3d-line);
}
.a3d-sr__row:last-child { border-bottom: 0; padding-bottom: 0; }
.a3d-sr__row dt {
  margin: 0; font-size: .87rem; font-weight: 500; color: var(--a3d-muted);
}
.a3d-sr__row dd {
  margin: 0; font-size: .93rem; line-height: 1.5; color: var(--a3d-ink);
}

.a3d-sr__rec {
  margin-top: 20px; padding: 16px 18px;
  background: var(--a3d-paper);
  border: 1px solid var(--a3d-line);
  border-left: 3px solid var(--a3d-brand);
  border-radius: 4px;
}
.a3d-sr__rec h3 {
  margin: 0 0 4px;
  font-family: var(--a3d-display);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--a3d-brand-deep);
}
.a3d-sr__rec p { margin: 0 0 8px; font-size: .87rem; color: var(--a3d-muted); }
.a3d-sr__rec ul { margin: 0; padding-inline-start: 18px; }
.a3d-sr__rec li { margin-bottom: 4px; font-size: .92rem; color: var(--a3d-ink); }
.a3d-sr__rec li:last-child { margin-bottom: 0; }

.a3d-sr__fine {
  margin: 18px 0 0;
  font-size: .82rem; line-height: 1.55; color: var(--a3d-muted);
}

.a3d-sr__foot { margin-top: clamp(28px, 3.5vw, 42px); }
.a3d-sr__foot h2 {
  margin: 0 0 14px; padding-top: 20px;
  border-top: 1px solid var(--a3d-line);
  font-family: var(--a3d-display);
  font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -.015em;
}
.a3d-sr__foot ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.a3d-sr__foot li {
  padding: 15px 17px;
  background: var(--a3d-surface);
  border: 1px solid var(--a3d-line); border-radius: 5px;
  font-size: .9rem; line-height: 1.6; color: var(--a3d-muted);
}
.a3d-sr__foot a { color: var(--a3d-brand-on-white); text-decoration: underline; text-underline-offset: 2px; }
.a3d-sr__foot a:hover { color: var(--a3d-brand-deep); }

@media (max-width: 420px) {
  .a3d-sr__row { grid-template-columns: 1fr; gap: 2px; }
}

/* --------------------------------------------------------------------------
   48. Tool sets in the product description

   The descriptions used to list tool NAMES: "Site planner", "PlantFinder",
   "IntelliDeck". A name tells a buyer nothing about whether the program does
   the thing they came for. These are the same tools with a line each saying
   what they are for, so the list reads as an answer rather than an inventory.
   -------------------------------------------------------------------------- */

.a3d-toolset {
  display: grid; gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  margin: 0 0 26px;
}
.a3d-toolset > div {
  padding: 13px 16px;
  background: var(--a3d-surface);
  border: 1px solid var(--a3d-line);
  border-radius: 5px;
}
.a3d-toolset dt {
  font-family: var(--a3d-display);
  font-size: .95rem; font-weight: 600; color: var(--a3d-ink);
  margin: 0 0 3px;
}
.a3d-toolset dd {
  margin: 0;
  font-size: .89rem; line-height: 1.55; color: var(--a3d-muted);
}

/* --------------------------------------------------------------------------
   49. Icons on the project page

   The four stages were four numbered blocks of prose that looked identical at
   a glance, and each stage's points were an undifferentiated run of headed
   paragraphs. A mark per stage and per point is what lets someone scanning
   for "the garden bit" find it without reading.
   -------------------------------------------------------------------------- */

.a3d-project__stage h3 { display: flex; align-items: center; gap: 11px; }
.a3d-project__stageicon {
  width: 26px; height: 26px; flex: none;
  color: var(--a3d-brand-on-white);
}

.a3d-project__points article { display: flex; align-items: flex-start; gap: 11px; }
.a3d-project__pointicon {
  width: 19px; height: 19px; flex: none; margin-top: 3px;
  color: var(--a3d-brand-on-white);
}
.a3d-project__points article > div { min-width: 0; }

@media (max-width: 480px) {
  .a3d-project__stageicon { width: 22px; height: 22px; }
}

/* --------------------------------------------------------------------------
   50. Product page: full-width description, compact facts

   Two problems, both of them empty space.

   The description sat in the left half of a two-column row whose right half
   held four short lines of reassurance. On a wide screen that meant a column
   of prose beside a screen-height of nothing, and the prose itself was
   squeezed to half the page while the page scrolled for a foot below it.

   And the facts box under the buy button was a bordered card of four rows,
   which read as though it were as important as the price. It is a footnote:
   SKU, platform, how it arrives.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
  /* One column. The accordion and everything under it get the full measure. */
  .product__bottom { display: block; }
  .product__bottom-left,
  .product__bottom-right { width: auto; max-width: none; }
  .product__bottom-right { margin-top: 28px; }
}

/* Facts as a wrapped line of chips, not a card. */
.a3d-assurance {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 16px 0 0; padding: 14px 0 0;
  list-style: none;
  border-top: 1px solid var(--a3d-line);
}
.a3d-assurance li {
  position: relative;
  margin: 0; padding-left: 13px;
  font-size: .84rem; line-height: 1.5; color: var(--a3d-muted);
}
.a3d-assurance li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--a3d-brand);
}
.a3d-assurance b { font-weight: 600; color: var(--a3d-ink); }

/* --------------------------------------------------------------------------
   51. Copilot description

   Two thousand words about a visual tool, with no picture of it. The opening
   now runs beside a shot of the workspace and the "in practice" section opens
   with a generated view, so the reader sees the output before being asked to
   buy the ability to produce it.
   -------------------------------------------------------------------------- */

.a3d-cpd__lead {
  display: grid; gap: clamp(20px, 3vw, 34px);
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: 8px;
}
@media (min-width: 860px) {
  .a3d-cpd__lead { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.a3d-cpd__copy > h2:first-child { margin-top: 0; }

.a3d-cpd__figure,
.a3d-cpd__wide { margin: 0 0 22px; }
.a3d-cpd__figure img,
.a3d-cpd__wide img {
  display: block; width: 100%; height: auto;
  border-radius: 6px; border: 1px solid var(--a3d-line);
  background: var(--a3d-paper);
}
.a3d-cpd__wide { margin: 6px 0 26px; }
.a3d-cpd__figure figcaption,
.a3d-cpd__wide figcaption {
  margin-top: 8px;
  font-size: .85rem; line-height: 1.5; color: var(--a3d-muted);
}

/* --------------------------------------------------------------------------
   52. Features explained: pictures, and the boxes themselves

   The page was six groups of icon-plus-sentence — accurate and completely
   flat. A page called "Every feature, explained" that never shows the software
   explains nothing anyone can see.

   The first attempt over-corrected: two full-width 16:9 pictures per group is
   about 1,300px of image per group and 7,000px down the page, for seventeen
   short cards of actual content. The pictures now sit two-up as one band, at
   4:3 and height-capped, so a group's imagery is a strip rather than two
   slabs and the cards it illustrates are on the same screen.
   -------------------------------------------------------------------------- */

.a3d-features__shots {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  margin: 0 0 20px;
}
.a3d-features__shot { margin: 0; }
.a3d-features__shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; max-height: 300px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--a3d-line);
  background: var(--a3d-paper);
}
.a3d-features__shot figcaption {
  margin-top: 7px;
  font-size: .82rem; line-height: 1.45; color: var(--a3d-muted);
}

.a3d-features__editions { margin-top: clamp(36px, 4vw, 56px); }
.a3d-features__editions > h2 {
  margin: 0 0 18px; padding-top: 24px;
  border-top: 1px solid var(--a3d-line);
  font-family: var(--a3d-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -.015em;
}
.a3d-features__boxes {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.a3d-fbox {
  display: block; padding: 14px 12px 16px;
  background: var(--a3d-surface);
  border: 1px solid var(--a3d-line); border-radius: 6px;
  text-align: center; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.a3d-fbox:hover {
  border-color: var(--a3d-brand);
  box-shadow: 0 3px 14px rgba(12,30,41,.08);
  text-decoration: none;
}
.a3d-fbox img { display: block; width: 100%; height: auto; margin-bottom: 10px; }
.a3d-fbox__name {
  display: block;
  font-family: var(--a3d-display); font-size: .9rem; font-weight: 600;
  line-height: 1.3; color: var(--a3d-ink);
}
.a3d-fbox__price { display: block; margin-top: 3px; font-size: .88rem; color: var(--a3d-muted); }

/* --------------------------------------------------------------------------
   53. Product description

   Nine stacked headings, a grid of tool names, the same tools again with
   explanations, and two bullet lists — 7.5KB of left-aligned prose at one
   width, on a page selling software nobody could see.

   Now: a lead with the edition's figures as figures, then the four areas of
   the job as blocks with a screenshot beside the tools, alternating side to
   side so the eye has somewhere to go. The tool-NAME grid is gone; it was a
   table of contents for the section directly beneath it.
   -------------------------------------------------------------------------- */

.a3d-pd { --pd-gap: clamp(22px, 3vw, 40px); }
.a3d-pd > h2 {
  margin: var(--pd-gap) 0 12px;
  font-family: var(--a3d-display);
  font-size: clamp(1.2rem, 2.1vw, 1.5rem); font-weight: 700; letter-spacing: -.015em;
}
.a3d-pd > h2:first-child { margin-top: 0; }

/* --- lead ---------------------------------------------------------------- */
.a3d-pd__lead > h2 {
  margin: 0 0 10px;
  font-family: var(--a3d-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; letter-spacing: -.02em;
}
.a3d-pd__lead > p { margin: 0 0 18px; font-size: 1.02rem; line-height: 1.65; max-width: 68ch; }

.a3d-pd__stats {
  display: grid; gap: 10px; margin: 0 0 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  max-width: 560px;
}
.a3d-pd__stats > div {
  padding: 12px 14px;
  background: var(--a3d-paper);
  border: 1px solid var(--a3d-line); border-radius: 6px;
}
.a3d-pd__stats dt {
  margin: 0;
  font-family: var(--a3d-display);
  font-size: 1.35rem; font-weight: 700; line-height: 1.1;
  color: var(--a3d-ink); letter-spacing: -.02em;
}
.a3d-pd__stats dd { margin: 2px 0 0; font-size: .84rem; color: var(--a3d-muted); }

.a3d-pd__sub {
  margin: var(--pd-gap) 0 8px;
  font-family: var(--a3d-display); font-size: 1.05rem; font-weight: 600;
}
.a3d-pd__adds { margin: 0 0 14px; padding-inline-start: 20px; }
.a3d-pd__adds li { margin-bottom: 5px; line-height: 1.6; }
.a3d-pd__note { margin: 12px 0 16px; font-size: .84rem; color: var(--a3d-muted); }

/* --- one block per area of the job --------------------------------------- */
.a3d-pd__block {
  display: grid; gap: clamp(16px, 2.4vw, 30px);
  grid-template-columns: 1fr;
  align-items: start;
  padding: var(--pd-gap) 0;
  border-top: 1px solid var(--a3d-line);
}
.a3d-pd__block:first-of-type { border-top: 0; }

@media (min-width: 860px) {
  .a3d-pd__block { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  /* Alternating sides: the picture moves, the reading order does not.
     `order` alone is not enough — it reorders items but leaves them in the
     track auto-placement already gave them, so a flipped picture inherited
     the 6fr column and came out half again as wide as the others. Swap the
     tracks and place both children, so the picture is the 4fr column on
     either side and every picture on the page is one size. */
  .a3d-pd__block--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
  .a3d-pd__block--flip .a3d-pd__shot { grid-column: 2; grid-row: 1; }
  .a3d-pd__block--flip .a3d-pd__blockbody { grid-column: 1; grid-row: 1; }
}

.a3d-pd__shot { margin: 0; position: sticky; top: 90px; }
.a3d-pd__shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--a3d-line);
  background: var(--a3d-paper);
}
.a3d-pd__shot figcaption {
  margin-top: 7px; font-size: .81rem; line-height: 1.45; color: var(--a3d-muted);
}
.a3d-pd__blockbody > h2 {
  margin: 0 0 14px;
  font-family: var(--a3d-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; letter-spacing: -.015em;
}

/* In a block the tools are a single column: two columns beside a picture
   makes three columns of text on one line. */
.a3d-toolset--stacked { grid-template-columns: 1fr; gap: 8px; margin-bottom: 0; }

/* --- what you can design -------------------------------------------------- */
.a3d-pd__can {
  display: grid; gap: 8px 22px; margin: 0 0 4px; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.a3d-pd__can li {
  position: relative; padding-left: 26px;
  line-height: 1.6; color: var(--a3d-body, var(--a3d-ink));
}
.a3d-pd__can li::before {
  content: ''; position: absolute; left: 3px; top: .45em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--a3d-brand);
  border-bottom: 2px solid var(--a3d-brand);
  transform: rotate(-45deg);
}

/* --- requirements and delivery, together at the foot ---------------------- */
.a3d-pd__foot {
  display: grid; gap: clamp(18px, 2.5vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  margin-top: var(--pd-gap); padding-top: var(--pd-gap);
  border-top: 1px solid var(--a3d-line);
}
.a3d-pd__foot h3 {
  margin: 0 0 10px;
  font-family: var(--a3d-display); font-size: 1.02rem; font-weight: 600;
}
.a3d-pd__foot h4 {
  margin: 0 0 6px;
  font-size: .76rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--a3d-muted);
}
.a3d-pd__foot ul { margin: 0 0 14px; padding-inline-start: 18px; }
.a3d-pd__foot li { margin-bottom: 4px; font-size: .89rem; line-height: 1.5; }
.a3d-pd__foot p { margin: 0; font-size: .89rem; line-height: 1.6; color: var(--a3d-muted); }

@media (prefers-reduced-motion: reduce) {
  .a3d-pd__shot { position: static; }
}

/* The theme caps .product__description at a 65ch measure, which is right for
   prose and wrong for a block layout: the description was rendering at 749px
   inside a 1137px container, so the picture-beside-tools blocks had 288px for
   a picture. The cap is lifted here and re-imposed on the paragraphs, which
   are the only part that wants it. */
.product__description.rich-text { max-width: none; }
.a3d-pd > p,
.a3d-pd__lead > p,
.a3d-pd__note { max-width: 72ch; }
.a3d-cpd__copy > p { max-width: 64ch; }

/* ==========================================================================
   54. Editions dropdown banner
   The panel was two price lists and nothing else. Somebody choosing between
   six editions is exactly the person who should be told what is new in this
   version, so the banner sits under both columns rather than inside either —
   it belongs to the release, not to Windows or to Mac.
   ========================================================================== */
.a3d-nav__promo {
  display: flex; align-items: center; gap: 14px;
  margin: 4px 0 0; padding: 12px 14px;
  background: var(--a3d-paper); border: 1px solid var(--a3d-line); border-radius: 8px;
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, background-color .15s ease;
}
.a3d-nav__promo:hover,
.a3d-nav__promo:focus-visible { border-color: var(--a3d-brand); background: #fff; }
.a3d-nav__promo img {
  flex: 0 0 auto; width: 62px; height: auto; display: block;
  filter: drop-shadow(0 2px 5px rgba(12, 30, 41, .16));
}
.a3d-nav__promobody { display: block; min-width: 0; }
.a3d-nav__promoeyebrow {
  display: block; font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--a3d-brand);
}
.a3d-nav__promotitle {
  display: block; margin-top: 2px;
  font-family: var(--a3d-display); font-size: .98rem; font-weight: 700; letter-spacing: -.01em;
}
.a3d-nav__promotext {
  display: block; margin-top: 3px;
  font-size: .8rem; line-height: 1.45; color: var(--a3d-muted);
}
.a3d-nav__promocta {
  flex: 0 0 auto; margin-left: auto; white-space: nowrap;
  font-size: .82rem; font-weight: 600; color: var(--a3d-brand);
}
@media (max-width: 620px) {
  .a3d-nav__promo { flex-wrap: wrap; }
  .a3d-nav__promocta { margin-left: 0; }
}

/* ==========================================================================
   55. Copilot product description
   Same block layout as the editions, but the picture beside each claim is a
   before/after the reader can drag, because every claim this product makes is
   about a transformation.
   ========================================================================== */

/* The workspace shot, full width under the lead. */
.a3d-pd__hero { margin: 0 0 var(--pd-gap); }
.a3d-pd__hero img {
  display: block; width: 100%; height: auto;
  border-radius: 6px; border: 1px solid var(--a3d-line);
  background: var(--a3d-paper);
}
.a3d-pd__hero figcaption {
  margin-top: 8px; font-size: .81rem; line-height: 1.45; color: var(--a3d-muted);
}

/* A slider is a control, not a picture: it must not scroll away under a
   sticky offset while the reader is dragging it. */
.a3d-pd__shot--reveal { position: static; }
.a3d-pd__shot--reveal .a3d-reveal__frame {
  border: 1px solid var(--a3d-line);
  aspect-ratio: 3 / 2;
}
/* Undo the product-picture treatment on the two images inside the frame. The
   frame owns the shape; these two only have to line up with each other. */
.a3d-pd__shot--reveal img {
  aspect-ratio: auto; object-fit: cover;
  border: 0; border-radius: 0; background: none;
  width: 100%; height: 100%;
}

.a3d-pd__blockbody > h3 {
  margin: 0 0 12px;
  font-family: var(--a3d-display);
  font-size: clamp(1.1rem, 1.9vw, 1.32rem); font-weight: 700; letter-spacing: -.015em;
}
/* In the checked list the capability is named, then explained. */
.a3d-pd__can li strong { font-weight: 700; }
.a3d-pd__can li strong::after { content: " — "; font-weight: 400; color: var(--a3d-muted); }

/* ==========================================================================
   56. Footer credibility row
   The four things somebody wants settled before paying, under the company
   statement rather than beside the buy button — the product page already has
   its own strip and this is not a second copy of it.
   ========================================================================== */
.a3d-footer__hours {
  display: block; margin-top: 6px;
  font-size: .82rem; color: rgba(255, 255, 255, .55);
}
.a3d-footer__trust {
  list-style: none; margin: 26px 0 0; padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: grid; gap: 18px 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
/* auto-fit made five tracks for four items and left a hole on the right;
   there are exactly four of these and there always will be. */
@media (min-width: 1000px) {
  .a3d-footer__trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.a3d-footer__trust li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: .84rem; line-height: 1.5; color: rgba(255, 255, 255, .62);
}
.a3d-footer__trust strong {
  display: block; color: #fff; font-weight: 600; letter-spacing: -.005em;
}
.a3d-footer__trusti {
  flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px;
  color: var(--a3d-brand); fill: none; stroke: currentColor; stroke-width: 1.6;
}

/* ==========================================================================
   57. Maintenance & Support renewal
   The page has one job, so it gets one panel. The select and the price sit on
   the same line as the button because they are one sentence — "I own Platinum,
   that costs this, add it" — and splitting them over three rows made the price
   read as a separate claim about the page rather than about the choice.
   ========================================================================== */
.a3d-renew {
  max-width: 860px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) 0 8px;
}
.a3d-renew__eyebrow {
  margin: 0 0 10px; font-family: var(--a3d-display);
  font-size: .74rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--a3d-brand-deep);
}
.a3d-renew__h {
  margin: 0 0 14px; font-family: var(--a3d-display);
  font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 700;
  letter-spacing: -.02em; color: var(--a3d-deep);
}
.a3d-renew__lede {
  margin: 0 0 30px; max-width: 62ch;
  font-size: 1.02rem; line-height: 1.65; color: var(--a3d-muted);
}

.a3d-renew__panel {
  padding: clamp(20px, 3.5vw, 32px);
  background: var(--a3d-surface);
  border: 1px solid var(--a3d-line);
  border-top: 3px solid var(--a3d-brand);
}
.a3d-renew__label {
  display: block; margin-bottom: 12px;
  font-family: var(--a3d-display); font-size: 1.02rem; font-weight: 600;
  color: var(--a3d-deep);
}
.a3d-renew__row {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px;
}
.a3d-renew__select {
  flex: 1 1 220px; min-width: 0; height: 52px; padding: 0 14px;
  font: inherit; font-size: 1rem; color: var(--a3d-ink);
  background: var(--a3d-paper);
  border: 1px solid var(--a3d-line-2); border-radius: 2px;
}
.a3d-renew__select:focus-visible {
  outline: 2px solid var(--a3d-brand); outline-offset: 1px;
}
/* The price is an <output>, not a heading: it is the answer to the select, so
   it is tied to it and read as one by a screen reader. */
.a3d-renew__price {
  display: flex; align-items: center; padding: 0 4px;
  font-family: var(--a3d-display); font-size: 1.6rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--a3d-deep); white-space: nowrap;
}
.a3d-renew__go {
  flex: 0 0 auto; height: 52px; padding: 0 26px;
  font-family: var(--a3d-display); font-size: .96rem; font-weight: 600;
  color: #fff; background: var(--a3d-brand-deep);
  border: 0; border-radius: 2px; cursor: pointer;
  transition: background .15s ease;
}
.a3d-renew__go:hover { background: var(--a3d-deep); }
.a3d-renew__go:focus-visible {
  outline: 2px solid var(--a3d-deep); outline-offset: 2px;
}
.a3d-renew__note {
  margin: 18px 0 0; font-size: .88rem; line-height: 1.6; color: var(--a3d-muted);
}

.a3d-renew__what {
  display: grid; gap: 22px; margin: 34px 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.a3d-renew__what li {
  font-size: .92rem; line-height: 1.6; color: var(--a3d-muted);
}
.a3d-renew__what strong {
  display: block; margin-bottom: 5px;
  font-family: var(--a3d-display); font-size: .95rem; font-weight: 600;
  color: var(--a3d-deep);
}

.a3d-renew__lapsed { margin: 34px 0 0; }
.a3d-renew__lapsed h3 {
  margin: 0 0 8px; font-family: var(--a3d-display);
  font-size: 1.06rem; font-weight: 600; color: var(--a3d-deep);
}
.a3d-renew__lapsed p {
  margin: 0; max-width: 62ch;
  font-size: .92rem; line-height: 1.65; color: var(--a3d-muted);
}

.a3d-renew__all { margin: 32px 0 0; border-top: 1px solid var(--a3d-line); }
.a3d-renew__all summary {
  padding: 16px 0; cursor: pointer;
  font-family: var(--a3d-display); font-size: .93rem; font-weight: 600;
  color: var(--a3d-brand-deep);
}
.a3d-renew__all ul { margin: 0 0 20px; padding: 0; list-style: none; }
.a3d-renew__all li {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 11px 0; border-top: 1px solid var(--a3d-line);
  font-size: .92rem;
}
.a3d-renew__all span { color: var(--a3d-muted); white-space: nowrap; }

@media (max-width: 560px) {
  .a3d-renew__row { flex-direction: column; align-items: stretch; }
  .a3d-renew__price { justify-content: flex-start; }
}

/* ==========================================================================
   58. Featured products — six across
   The block only appears at the foot of the cart, where it is a last-look
   shelf rather than a listing, and it holds exactly twelve products. Three
   across made that four rows the customer has to scroll past on the way to
   checkout; six makes it two, and twelve divides evenly at every step below
   so no row is ever left with orphans.

   Scoped to the block. The category listings keep their own four-across rule
   and the Editions ladder its three, both of which are sized for browsing.
   ========================================================================== */
.ps-featuredproducts .products {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
/* At a sixth of the container the card is about 200px wide, which is not
   enough for the stepper and the cart button side by side — Hummingbird lays
   them out in a row. Stacked, both stay full width and hittable. */
.ps-featuredproducts .product-miniature__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
/* Hummingbird's stepper is a wrapping flex row whose buttons are 83px wide,
   so in a 178px card it broke into three rows — minus, then the field, then
   plus, stacked. Fixed 34px buttons and no wrapping keeps it one line, and the
   field takes whatever is left. */
.ps-featuredproducts .quantity-button__group { flex-wrap: nowrap; }
.ps-featuredproducts .quantity-button__group .btn {
  flex: 0 0 34px; width: 34px; min-width: 0; padding: 0;
}
.ps-featuredproducts .quantity-button__group .form-control {
  min-width: 0; text-align: center; padding-inline: 2px;
}
/* The add-to-cart button carries 28.8px of padding on each side, which in a
   162px form leaves 104px for a 24px icon and an 85px label — so it wrapped to
   two lines and the button stood 70px tall against the stepper's 38. */
.ps-featuredproducts .product-miniature__add {
  padding-inline: 10px; font-size: .9rem; white-space: nowrap;
}
.ps-featuredproducts .product-miniature__title { font-size: .88rem; line-height: 1.35; }
.ps-featuredproducts .product-miniature__price { font-size: 1rem; }

@media (max-width: 1400px) { .ps-featuredproducts .products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .ps-featuredproducts .products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .ps-featuredproducts .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .ps-featuredproducts .products { grid-template-columns: 1fr; } }

/* ==========================================================================
   59. Masthead — let the header compress instead of overflowing
   The wordmark, the nav and the search share one flex row inside a 1440px
   container, and section 10 pins every child of that row with `flex: 0 0 auto;
   width: auto !important`. Nothing could shrink, so once the labels outgrew
   the space the row ran off the right edge and put a horizontal scrollbar on
   the whole page — on the French store at ordinary laptop widths, which is why
   it went unnoticed: the other three markets fit.

   The burger breakpoint moved from 992px to 1250px at the same time (section
   2), because below about 1235 the desktop nav does not fit in any market and
   no amount of tightening changes that.
   ========================================================================== */

/* The search gives way before the page does — but only down to a width it can
   still be typed into. The floor goes on the WRAPPER: put on the input, it let
   the input grow past its own container and hang out of the header gutter. */
.a3d-masthead__nav .ps-searchbar { flex: 0 1 auto; min-width: 180px; }
.a3d-masthead__nav .ps-searchbar__form { min-width: 0; width: 100%; }
.a3d-masthead__nav .ps-searchbar__input,
.a3d-masthead__nav .ps-searchbar input[type="text"] { min-width: 0; width: 100%; }
.a3d-masthead__nav .a3d-nav__list { min-width: 0; }
/* Hummingbird wraps the search in a .col-auto, which section 10's `> *` rule
   also pins; the wrapper has to be released or its child cannot shrink. */
.a3d-masthead__nav > .col-auto { flex: 0 1 auto !important; min-width: 0; }

/* Between the burger breakpoint and a comfortable desktop the row is tight in
   every market, so the gutter narrows and the nav text steps down. The gap
   stays a clamp: the base rule is clamp(6px, 1.4vw, 20px), and replacing it
   with a fixed value made the gap larger at narrow widths, not smaller. */
@media (min-width: 1250px) and (max-width: 1439.98px) {
  .a3d-masthead__inner { padding-inline: 40px; }
  .a3d-nav__list { gap: clamp(6px, 1.1vw, 14px); }
  .a3d-nav__link { font-size: .86rem; }
}

/* French labels are the longest of the four — "Aide et téléchargements" alone
   measures 186px against 144 for "Help & downloads" — so it needs the gap
   tightened at full width too, where the others do not. */
.lang-fr .a3d-nav__list { gap: clamp(6px, 1vw, 12px); }
.lang-fr .a3d-masthead__inner { padding-inline: 48px; }
@media (min-width: 1250px) and (max-width: 1439.98px) {
  .lang-fr .a3d-masthead__inner { padding-inline: 32px; }
}

/* The burger is marked d-lg-none, which hides it from 992px. That is
   Bootstrap's class on the button in header.tpl, so it is overridden rather
   than edited — the two have to change together or a window between 992 and
   1250 gets no menu at all. */
/* The burger used to carry Bootstrap's d-lg-none, which hid it from 992px.
   That class sets display:none!important inside a cascade layer, and for
   important declarations a layered rule beats an unlayered one — so an
   !important override here lost, and between 992 and 1250 the page had no menu
   at all: no nav, no burger. The class is off the button in header.tpl now and
   the visibility is owned here, where it can be kept in step with the nav. */
.a3d-burger { display: none; }
@media (max-width: 1249.98px) {
  .a3d-masthead__tools .a3d-burger { display: flex; }
}

/* ==========================================================================
   60. Nav panel banner
   The Your project dropdown is two links, which next to the Editions panel is
   a thin strip of text. It gets the same promo component the Editions panel
   uses, restyled for a narrow column: the picture goes on top and full width,
   because a 62px thumbnail beside two lines of text reads as an icon rather
   than as a photograph of what the software makes.
   ========================================================================== */
.a3d-nav__panel:not(.a3d-nav__panel--platforms) { min-width: 300px; }
.a3d-nav__promo--panel {
  flex-direction: column; align-items: stretch; gap: 10px;
  margin-top: 8px; padding: 0 0 12px; overflow: hidden;
}
.a3d-nav__promo--panel img {
  width: 100%; height: 132px; object-fit: cover;
  border-radius: 7px 7px 0 0; filter: none;
}
.a3d-nav__promo--panel .a3d-nav__promobody,
.a3d-nav__promo--panel .a3d-nav__promocta { padding-inline: 12px; }
.a3d-nav__promo--panel .a3d-nav__promotext {
  display: block; margin-top: 3px; font-size: .8rem; line-height: 1.45; color: var(--a3d-muted);
}
.a3d-nav__promo--panel .a3d-nav__promocta {
  display: block; margin-top: 8px;
  font-size: .82rem; font-weight: 600; color: var(--a3d-brand-deep);
}

/* --------------------------------------------------------------------------
   61. Cookie banner

   The ets_cookie_banner module adds its stylesheet from hookDisplayHeader:

       $this->context->controller->addCSS($this->_path.'views/css/front.css');

   That is a PrestaShop 1.6 pattern. In 1.7 and later, setMedia() has already
   finished collecting assets by the time displayHeader renders, so the call is
   a no-op and views/css/front.css never reaches the page. Only the module's
   banner.css survives, because the template inlines it in a <style> block —
   and banner.css carries nothing but the configured colours and width.

   Everything structural was in the file that never loaded: position, z-index,
   the close cross, the button row. Without it the banner rendered as a plain
   box below the footer.

   So the layout lives here. Colours deliberately do NOT: the module inlines
   those from the back-office configuration in a <style> inside <body>, which
   outranks this file at equal specificity, and fighting it would mean the
   colour pickers in the back office silently stopped working.
   -------------------------------------------------------------------------- */
.ets_cookie_banber_block {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 10000;
  max-width: calc(100vw - 40px);
  padding: 20px 24px;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--a3d-ink);
}
.ets_cookie_banber_block.right_bottom { left: auto; right: 20px; }
.ets_cookie_banber_block.bottom {
  left: 0; right: 0; bottom: 0;
  width: 100%; max-width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 20px;
  border-radius: 0;
}

.ets_cookie_banner_content > *:last-child { margin-bottom: 0; }
.ets_cookie_banner_content a { text-decoration: underline; }

.ets_cookie_banner_footer {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
}
.ets_cookie_banber_block.bottom .ets_cookie_banner_footer { padding-top: 0; flex-shrink: 0; }

.ets_cookie_banber_block .btn.ets-cb-btn-ok,
.ets_cookie_banber_block .btn.ets-cb-btn-not-ok {
  padding: 8px 18px;
  font-size: .85rem;
  font-weight: 600;
  text-transform: none;
  border-radius: 3px;
  white-space: nowrap;
}
/* Declining is a real choice, not a dead end — but it is the quieter one. */
.ets_cookie_banber_block .btn.ets-cb-btn-not-ok {
  background: transparent;
  color: var(--a3d-muted);
  border: 1px solid var(--a3d-line);
}
.ets_cookie_banber_block .btn.ets-cb-btn-not-ok:hover {
  color: var(--a3d-ink);
  border-color: var(--a3d-muted);
}

/* The close cross. The module ships an empty <span>, so it is drawn here. */
.ets_cookie_banber_block .close_cookie {
  position: absolute;
  top: 6px; right: 6px;
  width: 26px; height: 26px;
  cursor: pointer;
  border-radius: 50%;
}
.ets_cookie_banber_block .close_cookie:hover { background: rgba(12, 30, 41, .07); }
.ets_cookie_banber_block .close_cookie::before,
.ets_cookie_banber_block .close_cookie::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 1.5px;
  margin: -1px 0 0 -6.5px;
  background: var(--a3d-muted);
}
.ets_cookie_banber_block .close_cookie::before { transform: rotate(45deg); }
.ets_cookie_banber_block .close_cookie::after { transform: rotate(-45deg); }

@media (max-width: 767px) {
  .ets_cookie_banber_block,
  .ets_cookie_banber_block.right_bottom {
    left: 12px; right: 12px; bottom: 12px;
    width: auto; max-width: none;
  }
  .ets_cookie_banber_block.bottom { flex-direction: column; gap: 14px; }
  .ets_cookie_banner_footer { flex-direction: column-reverse; }
  .ets_cookie_banber_block .btn.ets-cb-btn-ok,
  .ets_cookie_banber_block .btn.ets-cb-btn-not-ok { width: 100%; }
}

/* --------------------------------------------------------------------------
   62. Checkout: the payment step

   The payment step is assembled from three sources that have never met: the
   theme's checkout layout, PrestaShop's payment-option markup, and the
   Braintree module's own form, which ships a Bootstrap 4 utility set under a
   `bt__` prefix. Measured on the rendered page, that produced four faults:

     - `.bt__form-row` pulls itself out by `margin: 0 -15px`, expecting Bootstrap
       4 columns with 15px padding. Under Bootstrap 5 a bare `col-md-6` outside
       a `.row` has NO padding, so nothing puts the 15px back: the expiry and
       CVC fields sat 15px to the left of the card-number field above them, and
       their row was 30px wider. Measured: row x=57, card number x=72.
     - Those two columns are 365px each in a 731px row — they touch, with no
       gutter at all between expiry date and CVC.
     - The card-brand strip is a 395x32 PNG being drawn at 495x40. A 1.25x
       upscale of a bitmap that small is visibly soft, and it pushed the "Pay
       with card" text onto a second line under the images.
     - `#card-image`, the card-type indicator inside the number field, loads a
       sprite from a CodePen S3 bucket that now returns 403. It renders nothing
       and costs a failed third-party request on every checkout.

   Braintree's field chrome is also its own — 34px tall, 4px radius, an inset
   shadow — against the theme's 41.6px and 3px. Matched here, because a payment
   form that looks bolted on is the one place a customer notices.

   Colours are the theme's tokens throughout; nothing here restates a brand
   value.
   -------------------------------------------------------------------------- */

/* --- the option itself, as a card ----------------------------------------- */
.payment-options__list .payment-option {
  background: var(--a3d-surface);
  border: 1px solid var(--a3d-line);
  border-radius: 3px;
  padding: 1.1rem 1.35rem 1.35rem;
}
.payment-options__list .payment-option:has(.payment-option__input:checked) {
  border-color: var(--a3d-brand);
  box-shadow: 0 0 0 1px var(--a3d-brand);
}

/* Label on the left, card brands on the right. The text is an anonymous flex
   item and always sorts to order 0, so giving the image a higher order moves
   it after the text without touching the module's markup. */
.payment-option__label {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
  color: var(--a3d-ink);
}
/* max-width, not width. As a flex item this image is sized to the space left
   over — 677px against a 395px original, stretched horizontally while its
   height stayed at 32px, which is what made the card logos look smeared. A
   `width` here loses the cascade; the clamp holds and restores the aspect. */
.payment-option__label img {
  order: 2;
  margin-left: auto;
  width: auto;
  max-width: 395px;
  height: auto;
  flex: 0 0 auto;
}

.payment-option__additional-information { padding-block-start: .9rem; }
/* The module wraps its form in a Bootstrap `col-md-10`, so the fields stopped
   short of the panel edge with a 90px gap on the right and 12px on the left.
   Inside our own panel there is nothing to reserve that column for. */
.payment-option__additional-information > .row { margin: 0; }
.payment-option__additional-information > .row > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0;
}

/* --- Braintree's own form ------------------------------------------------- */
/* Undo the Bootstrap 4 row and lay the two fields out directly. */
.payment-option .bt__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0;
}
.payment-option .bt__form-row > [class*="col-"] {
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
}

.payment-option .bt__form-label {
  margin-bottom: .35rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--a3d-muted);
}
.payment-option .bt__form-control {
  height: 2.6rem;
  padding: .5rem .75rem;
  border: 1px solid var(--a3d-line-2);
  border-radius: 3px;
  box-shadow: none;
}
.payment-option .bt__form-control.braintree-hosted-fields-focused {
  border-color: var(--a3d-brand);
  box-shadow: 0 0 0 2px rgba(24, 154, 208, .18);
}

/* The CVC hint card, sized so it sits on the label's baseline instead of
   stretching to whatever height the flex row happens to be. */
.payment-option [data-bt-card-cvv] .bt__form-label svg {
  height: 1.05rem;
  width: auto;
  max-width: none;
  display: block;
}

/* The card-type indicator's sprite 404s at source; hiding the element also
   stops the request. The brand strip above the form already says which cards
   are accepted. */
.payment-option .braintree-card #card-image { display: none; }

/* Braintree's own lock line and logo: one row, aligned, not two floating
   fragments. */
.payment-option .braintree-card-form-header,
.payment-option .payment-option__additional-information .row {
  align-items: center;
}
.payment-option .payment-option__additional-information img[src*="braintree-paypal"] {
  width: 108px;
  height: auto;
  opacity: .75;
}

/* --- terms and the buttons ------------------------------------------------ */
#conditions-to-approve { margin-block: 1.25rem 0; }
#conditions-to-approve .form-check-label { color: var(--a3d-muted); }

.buttons-wrapper--split { margin-block-start: 1.25rem; align-items: center; }
/* Place Order is disabled until the terms are ticked. Make that read as
   deliberate rather than as a broken button. */
#payment-confirmation .btn.disabled,
#payment-confirmation .btn:disabled {
  background: var(--a3d-line-2);
  border-color: var(--a3d-line-2);
  color: var(--a3d-muted);
  opacity: 1;
  cursor: not-allowed;
}

@media (max-width: 767px) {
  .payment-option .bt__form-row { grid-template-columns: 1fr; }
  .payment-option__label { flex-wrap: wrap; }
  .payment-option__label img { order: 0; margin-left: 0; width: 100%; max-width: 395px; }
}

/* Braintree's reassurance line: a lock icon, a sentence and the Braintree mark,
   dropped in as three inline siblings. Made one aligned row, with the mark
   pushed to the right edge so it lines up under the card-brand strip above.
   Its width is an inline style on the element, so it is left alone. */
.payment-option .braintree-row-payment > .bt__mb-2 {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-block-end: .9rem;
  border-block-end: 1px solid var(--a3d-line);
  font-size: .9rem;
}
.payment-option .braintree-row-payment > .bt__mb-2 b { font-weight: 600; }
.payment-option .braintree-row-payment > .bt__mb-2 img {
  margin-left: auto !important;
  opacity: .8;
}
.payment-option .braintree-row-payment > .bt__mb-2 .mi-lock {
  font-size: 1.05rem;
  color: var(--a3d-muted);
}
.payment-option .braintree-row-payment { padding-block-end: 0 !important; }
.payment-option .payment_module.braintree-card { padding-block-start: 1.1rem; }

/* §63 Checkout — the "why is this button greyed out" notice ---------------- */
/* Sits inside the selected PayPal payment option, directly under the faded
   button, and disappears the moment the terms box is ticked. Coral rather than
   the brand blue: it is an instruction the customer has to act on, not a link. */
.js-a3d-consent-note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: .85rem 0 0;
  padding: .7rem .9rem;
  border-left: 3px solid var(--a3d-coral);
  /* Plain value first: color-mix is unsupported before Chrome 111 / Safari 16.2,
     and a declaration a browser cannot parse is dropped, not defaulted. */
  background: #FDF2F0;
  background: color-mix(in srgb, var(--a3d-coral) 7%, var(--a3d-surface));
  border-radius: 0 3px 3px 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--a3d-ink);
}
.js-a3d-consent-note > span { flex: 1 1 auto; }
/* Looks like the link it behaves as; it is a <button> so keyboard users get it
   in the tab order and screen readers announce an action, not a destination. */
.js-a3d-consent-go {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--a3d-brand-on-white);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.js-a3d-consent-go:hover { color: var(--a3d-coral); }
/* Two seconds of "it is this one", for the box we just scrolled to. */
/* outline, not box-shadow: box-shadow is a paint-only property and could not be
   verified in the test harness, and outline also survives forced-colours mode,
   where a decorative shadow is dropped and the customer would be left with the
   same unexplained dead button this whole notice exists to prevent. */
.form-check.a3d-consent-flash {
  border-radius: 3px;
  outline: 3px solid var(--a3d-coral);
  outline-offset: 3px;
}

/* §64 Copilot before/after slider -------------------------------------------
   Replaces the side-by-side pair, which showed each render at half width — on
   a phone that was two ~160px thumbnails of images whose whole point is fine
   detail in lighting and materials. One full-width image with a wipe shows the
   same comparison at twice the size, and the eye compares the same pixels
   rather than two pixels 8px apart.

   The position lives in one custom property so the clip, the line and the
   handle can never disagree, and so the default is correct before any JS runs
   — the reference implementation on the old WordPress site measured the
   element to set its starting position, which reads 0 if it runs before layout.
   -------------------------------------------------------------------------- */
.a3d-ba {
  --a3d-ba-pos: 50%;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  /* Without this the browser claims the drag as a page scroll on touch. */
  touch-action: none;
  user-select: none;
  cursor: ew-resize;
}
.a3d-ba img { display: block; width: 100%; height: auto; }
.a3d-ba__after {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  clip-path: inset(0 calc(100% - var(--a3d-ba-pos)) 0 0);
}
.a3d-ba__label {
  position: absolute; top: 8px; z-index: 2;
  font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px;
  background: rgba(12, 30, 41, .8); color: #fff;
  pointer-events: none;
}
.a3d-ba__label--before { left: 8px; }
.a3d-ba__label--after  { right: 8px; background: var(--a3d-brand); color: #05222f; }
.a3d-ba__line {
  position: absolute; top: 0; bottom: 0; left: var(--a3d-ba-pos);
  width: 2px; margin-left: -1px; z-index: 3;
  background: #fff; box-shadow: 0 0 6px rgba(12, 30, 41, .45);
  pointer-events: none;
}
.a3d-ba__handle {
  position: absolute; top: 50%; left: var(--a3d-ba-pos); z-index: 4;
  transform: translate(-50%, -50%);
  width: 38px; height: 38px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; border-radius: 50%;
  background: rgba(12, 30, 41, .78); color: #fff;
  font-size: 1rem; line-height: 1;
  box-shadow: 0 2px 10px rgba(12, 30, 41, .35);
  cursor: ew-resize;
}
.a3d-ba__handle:focus-visible {
  outline: 3px solid var(--a3d-brand);
  outline-offset: 3px;
}
/* Nudging the handle with the keyboard should glide; dragging must not lag
   behind the pointer, so the transition is only applied off-drag. */
.a3d-ba:not(.is-dragging) .a3d-ba__after,
.a3d-ba:not(.is-dragging) .a3d-ba__line,
.a3d-ba:not(.is-dragging) .a3d-ba__handle { transition: clip-path .12s ease-out, left .12s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .a3d-ba__after, .a3d-ba__line, .a3d-ba__handle { transition: none !important; }
}

/* §65 Copilot render styles -------------------------------------------------
   Eight renders of the SAME house, so the differences between the styles are
   the only thing changing. Cards are wider than the before/after grid because
   these are single images with no wipe to operate — nothing here needs to be
   dragged, so they can be read at a glance.
   -------------------------------------------------------------------------- */
.a3d-cp__styles {
  display: grid; gap: 24px; margin-top: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.a3d-cp__style { margin: 0; }
.a3d-cp__style img {
  display: block; width: 100%; height: auto;
  border-radius: 4px;
  background: var(--a3d-line);   /* holds the box before the image arrives */
}
.a3d-cp__style h3 {
  margin: 12px 0 5px;
  font-family: var(--a3d-display); font-size: 1rem; font-weight: 600;
  color: var(--a3d-ink);
}
.a3d-cp__style p {
  margin: 0;
  font-size: .88rem; line-height: 1.55; color: var(--a3d-muted);
}