/**
 * Specialty Appliances: hand-written styles. Loads LAST (functions.php), after the
 * generated design files (tokens, responsive, base, hover), so overrides belong here
 * and nowhere else (F9).
 *
 * The design is styled inline; this file only carries what an inline style cannot:
 * accessibility helpers, component :hover/:focus states the design system keeps in
 * React state (pass 2), and interim styles for store templates the design does not
 * cover (account dashboard, policy pages).
 */

/* DV49 (client, 2026-10-15): filled buttons use the darker green the design keeps for green
   text (--green-text, #16875A) with white text. White on the brand green (#22BC7E) is 2.45:1,
   under WCAG AA for a 16px label; on #16875A it is 4.52:1. Hover lifts to the design's
   original brand green (#22BC7E, client request 2026-10-15) and press is the design's own
   press shade. The brand green stays on accents, icons, chips, tabs and the outline
   button's border. */
:root { --sp-btn-fill: #16875A; --sp-btn-fill-hover: #22BC7E; --sp-btn-fill-press: #199462; }
.sp-btn-primary, [data-m~="btn-primary"] { background-color: var(--sp-btn-fill) !important; color: #fff !important; }
.sp-btn-primary:active, [data-m~="btn-primary"]:active { background-color: var(--sp-btn-fill-press) !important; }

/* Skip link: first element in <body>, visually hidden until focused, so the design
   is unchanged at rest (handoff README §8). */
.skip-nav {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 1000;
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--sp-btn-fill);
  color: #fff;
  font: 600 15px/1 var(--font-sans);
  text-decoration: none;
}
.skip-nav:focus {
  top: 16px;
  outline: 2px solid var(--sp-ink);
  outline-offset: 2px;
}

/* Visible focus, the design system's ring (border-focus), for every control the
   design styles inline without one. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   INTERIM templates (template-parts/interim.php): pages the design does not cover
   yet, and store pages it never will. Built only from the design's own tokens, so
   they sit in the family until each is designed. */
.sp-interim-band { background: var(--grad-dark-section); color: var(--text-inverse); padding: 168px 0 64px; border-radius: 0 0 var(--radius-section) var(--radius-section); }
.sp-interim-wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 40px; box-sizing: border-box; }
.sp-interim-kicker { margin: 0 0 16px; font: var(--type-eyebrow); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--sp-green); }
.sp-interim-title { margin: 0; font: var(--type-section-h2); letter-spacing: var(--tracking-h2); color: var(--text-inverse); }
.sp-interim-body { padding-top: 64px; padding-bottom: 120px; color: var(--text-body); font: var(--type-paragraph); }
.sp-interim-prose > * { max-width: 760px; }
.sp-interim-prose h2 { font: var(--type-small-heading); letter-spacing: var(--tracking-heading); margin: 48px 0 12px; }
.sp-interim-prose h3 { font: var(--type-callout-title); margin: 32px 0 8px; }
.sp-interim-prose a, .sp-interim-list a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }
.sp-interim-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sp-interim-button { display: inline-flex; align-items: center; height: 52px; padding: 0 28px; border-radius: var(--radius-control); background: var(--sp-btn-fill); color: #fff !important; font: var(--type-button); text-decoration: none !important; }
.sp-interim-button:hover { background: var(--sp-btn-fill-hover); }
main[data-nav="dark"] .sp-interim-body, main[style*="sp-carbon"] .sp-interim-body { color: var(--text-inverse); }

/* WooCommerce, interim: its own CSS is removed (functions.php), so the store pages the
   design does not cover need the basics to stay usable. */
.sp-interim-prose .woocommerce table { width: 100%; border-collapse: collapse; font: var(--type-supporting); }
.sp-interim-prose .woocommerce th, .sp-interim-prose .woocommerce td { padding: 12px 8px; border-bottom: 1px solid var(--border-subtle); text-align: left; }
.sp-interim-prose .woocommerce input[type="text"], .sp-interim-prose .woocommerce input[type="email"], .sp-interim-prose .woocommerce input[type="password"], .sp-interim-prose .woocommerce input[type="tel"], .sp-interim-prose .woocommerce select, .sp-interim-prose .woocommerce textarea { width: 100%; max-width: 480px; height: var(--input-h); padding: 0 12px; border: 1px solid var(--border-input); border-radius: var(--radius-control); background: var(--surface-form); font: var(--type-supporting); box-sizing: border-box; }
.sp-interim-prose .woocommerce textarea { height: auto; min-height: 120px; padding: 10px 12px; }
.sp-interim-prose .woocommerce button, .sp-interim-prose .woocommerce .button { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-control); background: var(--sp-btn-fill); color: #fff; font: var(--type-button); cursor: pointer; text-decoration: none; }
.sp-interim-prose .woocommerce button:hover, .sp-interim-prose .woocommerce .button:hover { background: var(--sp-btn-fill-hover); }
.sp-interim-prose .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 32px; }
.sp-interim-prose .woocommerce-message, .sp-interim-prose .woocommerce-info, .sp-interim-prose .woocommerce-error { list-style: none; margin: 0 0 24px; padding: 14px 18px; border-radius: var(--radius-control); background: var(--status-info-bg); }
.sp-interim-prose .woocommerce-error { background: var(--status-danger-bg); }
@media (max-width: 767px) { .sp-interim-wrap { padding: 0 20px; } .sp-interim-band { padding-top: 132px; } }

/* ---------------------------------------------------------------------------
   Header components: the hover/press states the design system keeps in React state
   (NavBar IconBtn, Button outline-accent arrowOnHover, AppliancesMenu CatItem/Tile,
   TextLink, the header's HA rows, SupportMenu TopicChip, SearchModal close).
   !important because the at-rest values are inline, exactly as the runtime overrode
   them. Every :hover has a :focus-visible twin (keyboard parity, not in the design). */
[data-navbar] .sp-iconbtn:hover, [data-navbar] .sp-iconbtn:focus-visible,
[data-navbar] [data-login-toggle]:hover, [data-navbar] [data-login-toggle]:focus-visible { background: var(--sp-nav-box) !important; }
[data-navbar] .sp-iconbtn.is-active { background: var(--sp-green) !important; color: #fff !important; }

.sp-btn-outline:hover, .sp-btn-outline:focus-visible { background: var(--sp-btn-fill) !important; border-color: var(--sp-btn-fill) !important; color: #fff !important; }
.sp-btn-outline:hover > span[aria-hidden], .sp-btn-outline:focus-visible > span[aria-hidden] { max-width: 24px !important; margin-left: 8px !important; opacity: 1 !important; }
.sp-btn-outline:hover > span[aria-hidden] > svg, .sp-btn-outline:focus-visible > span[aria-hidden] > svg { transform: translateX(0) !important; }
/* The header's Get Started keeps its size on hover: the arrow sliding in widened it and pushed the
   whole header sideways (Pastel #117, 22 October 2026). Elsewhere the button keeps its arrow. */
[data-el="site-header"] .sp-btn-outline > span[aria-hidden] { display: none !important; }
/* The decision card's list arrows show only when the list scrolls (Pastel #116; global.js and
   home.js mark a list that fits its box). */
[data-guides-fit] button[aria-label="Scroll up"], [data-guides-fit] button[aria-label="Scroll down"] { visibility: hidden; }
.sp-btn-primary:hover, .sp-btn-primary:focus-visible, [data-m~="btn-primary"]:is(:hover, :focus-visible) { background-color: var(--sp-btn-fill-hover) !important; }

.sp-cat:not(.is-on):hover, .sp-cat:not(.is-on):focus-visible { color: var(--green-text) !important; }
.sp-tile:hover .sp-tile-img, .sp-tile:focus-visible .sp-tile-img { transform: scale(1.04) !important; }
/* Pastel #464: four across, the tiles are 125px; the name is smaller and set closer to the edge so a long one stays on two lines */
[data-cols="4"] .sp-tile > span:last-child { left: 10px !important; right: 10px !important; bottom: 9px !important; font-size: 12px !important; line-height: 1.2 !important; }
.sp-tile:hover .sp-tile-shade, .sp-tile:focus-visible .sp-tile-shade { opacity: 1 !important; }

.sp-mi:hover .sp-mi-t, .sp-mi:focus-visible .sp-mi-t { color: #22BC7E !important; }
.sp-tile-row:hover, .sp-tile-row:focus-visible { color: #22BC7E !important; }
.sp-tile-row:hover .sp-tile-ico, .sp-tile-row:focus-visible .sp-tile-ico { background: #22BC7E !important; color: #fff !important; }
.sp-footlink:hover, .sp-footlink:focus-visible { color: #22BC7E !important; }

.sp-textlink:hover, .sp-textlink:focus-visible { color: var(--green-text) !important; }
.sp-textlink--dark:hover, .sp-textlink--dark:focus-visible { color: #fff !important; }
.sp-textlink:hover > svg, .sp-textlink:focus-visible > svg { transform: translateX(3px) !important; }
.sp-textlink:hover > span[aria-hidden], .sp-textlink:focus-visible > span[aria-hidden] { transform: scaleX(1) !important; transform-origin: left center !important; }

.sp-featlink:hover, .sp-featlink:focus-visible { color: #22BC7E !important; }
.sp-featlink:hover > span:not([aria-hidden]), .sp-featlink:focus-visible > span:not([aria-hidden]) { transform: translateX(3px) !important; }
.sp-featlink:hover > span[aria-hidden], .sp-featlink:focus-visible > span[aria-hidden] { transform: scaleX(1) !important; transform-origin: left center !important; }

.sp-acct:hover, .sp-acct:focus-visible { background: rgba(34, 44, 55, .05) !important; }
.sp-acct:hover > span:first-child, .sp-acct:focus-visible > span:first-child { background: var(--sp-green) !important; }
.sp-acct:hover > span:last-child > span:first-child, .sp-acct:focus-visible > span:last-child > span:first-child { color: #22BC7E !important; }
.sp-acct { color: inherit; text-decoration: none; box-sizing: border-box; } /* retagged from <button> (F5): no UA link colour, and a <button>'s border-box sizing (without it width:100% plus the padding ran 24px past the panel: Pastel #97) */

.sp-chip:hover, .sp-chip:focus-visible { background: var(--sp-green) !important; color: #fff !important; }
.sp-sr:hover .sp-sr-t, .sp-sr:focus-visible .sp-sr-t { color: var(--green-text) !important; }
.sp-x:hover, .sp-x:focus-visible { color: var(--sp-green) !important; transform: rotate(90deg) !important; }
/* The `hidden` attribute loses to an inline `display` (the port keeps the design's
   inline display on panels, logos and badges), so make it win everywhere. */
[hidden] { display: none !important; }

/* P4 honeypot (footer subscribe): out of the tab order and the accessibility tree,
   and NEVER visible. display:none, not off-screen positioning. */
.sp-hp { display: none !important; }

/* Visually hidden, still announced (status messages the design has no visible slot for). */
.sp-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------------------
   Home (Specialty Home.dc.html) components whose hover lives in React state:
   Button primary arrowOnHover + press, ApplianceCard. Same pattern as the header. */
.sp-btn-primary:hover > span[aria-hidden], .sp-btn-primary:focus-visible > span[aria-hidden] { max-width: 24px !important; margin-left: 8px !important; opacity: 1 !important; }
.sp-btn-primary:hover > span[aria-hidden] > svg, .sp-btn-primary:focus-visible > span[aria-hidden] > svg { transform: translateX(0) !important; }
.sp-btn-primary:active { background-color: var(--sp-btn-fill-press) !important; transform: scale(0.98) !important; }
.sp-acard:hover, .sp-acard:focus-visible { transform: translateY(-6px) !important; }
.sp-acard:hover > div:nth-child(2), .sp-acard:focus-visible > div:nth-child(2) { color: var(--green-text) !important; }
/* width/height attributes (CLS) must not size an image the design sizes by height only. */
img[data-m="cta-img"] { width: auto; }
/* Brand SVG <img>s carry width/height (CLS); most are sized by an inline width alone,
   so the height must follow the ratio rather than the attribute. Inline heights win. */
img[src*="/assets/images/brand/"] { height: auto; }

/* Retag (F5, DV12): Get Started on internal pages is an <a>; responsive.css keys the
   mobile full-width primary button to the TAG (button[data-m~="btn-primary"]), so the
   same rules for the link. Same breakpoint as responsive.css's mobile block. */
@media (max-width: 767px) {
  a[data-m~="btn-primary"] { display: flex !important; width: 100% !important; flex: 0 0 auto !important; }
  :is(div, span, section):has(> a[data-m~="btn-primary"]) { flex-wrap: wrap !important; }
  [data-m~="cta-row"] a[data-m~="btn-primary"] { align-self: stretch !important; order: -1; }
  /* Pastel #334: the contact box's call and email actions take the box's full width */
  [data-m~="cta-row"] > [data-m~="cta-actions"] { align-self: stretch !important; }
}

/* Appliance Category: the "Other Appliances" chips navigate, so they are links (as DV1);
   a <button> centres its label in its 40px height by itself, a link needs telling. */
.sp-catchip { display: inline-flex; align-items: center; text-decoration: none; }
/* Parts tiles: the design's hover state (p.enter): green tile, white glyph (the label
   colour is the captured hover class sp-h-1c17e5). */
.sp-part:hover > span:first-child, .sp-part:focus-visible > span:first-child { background: #22BC7E !important; color: #fff !important; }
.sp-part:focus-visible { color: rgb(22, 135, 90) !important; }
/* 2026-10-15 export: on an appliance CATEGORY page the parts row's label turns the brand
   green (#22BC7E) on hover; the appliance page keeps the darker green. */
.sp-catparts .sp-part:is(:hover, :focus-visible) { color: #22BC7E !important; }

/* Products Hub category cards: the design's hover state (lift, green title). */
/* Pastel #231 (Sebastian, 26 October): the lift and the title colour ease in and out (the cards had no transition, so the hover jumped) */
.sp-pcard { transition: transform 0.5s var(--ease-out); }
.sp-pcard > div:nth-child(2) { transition: color var(--dur-hover) var(--ease-out); }
.sp-pcard:hover, .sp-pcard:focus-visible { transform: translateY(-6px) !important; }
.sp-pcard:hover > div:nth-child(2), .sp-pcard:focus-visible > div:nth-child(2) { color: #22BC7E !important; }

/* Product Detail, signed in (DV17): WooCommerce's own add-to-cart form inside the
   design's box, dressed in the design's controls (no design exists for this state). */
.sp-buybox-price .woocommerce-Price-amount { font: inherit; }
.sp-buybox-price del { opacity: .5; margin-right: 8px; font-weight: 400; }
.sp-buybox-price ins { text-decoration: none; }
.sp-buybox { margin-top: 20px; font: 400 16px/22px var(--font-sans); color: var(--sp-ink); }
.sp-buybox form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0; }
.sp-buybox form.variations_form { flex-direction: column; align-items: stretch; }
.sp-buybox table.variations { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
.sp-buybox table.variations th, .sp-buybox table.variations td { padding: 6px 0; text-align: left; vertical-align: middle; }
.sp-buybox table.variations label { font: 600 12px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sp-green); }
.sp-buybox select, .sp-buybox input.qty { height: 48px; padding: 0 14px; border: 1px solid rgba(34, 44, 55, .2); border-radius: var(--radius-control); background: #fff; font: 400 16px/1 var(--font-sans); color: var(--sp-ink); box-sizing: border-box; }
.sp-buybox input.qty { width: 88px; }
.sp-buybox .reset_variations { margin-left: 12px; font-size: 14px; color: var(--text-muted); }
.sp-buybox .single_variation_wrap { display: flex; flex-direction: column; gap: 12px; }
.sp-buybox .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.sp-buybox button.single_add_to_cart_button { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border: 1px solid transparent; border-radius: var(--radius-control); background: var(--sp-btn-fill); color: #fff; font: var(--weight-semibold) 16px/1 var(--font-sans); cursor: pointer; transition: background var(--dur-hover) var(--ease-out); }
.sp-buybox button.single_add_to_cart_button:hover, .sp-buybox button.single_add_to_cart_button:focus-visible { background: var(--sp-btn-fill-hover); }
.sp-buybox button.single_add_to_cart_button.disabled { opacity: .4; cursor: not-allowed; }
.sp-buybox button.single_add_to_cart_button.loading { opacity: .6; cursor: progress; } /* the in-place add (global.js buyBox) while the Store API answers */
.sp-buybox .woocommerce-message, .sp-buybox .woocommerce-error, .sp-buybox .woocommerce-info { list-style: none; margin: 0 0 16px; padding: 14px 16px; border-radius: 10px; background: var(--sp-green-soft); color: var(--sp-ink); }
.sp-buybox .woocommerce-message .button { float: right; color: var(--green-text); font-weight: 600; }
.sp-buybox .stock { margin: 0 0 8px; color: var(--text-muted); }

/* DS Input / Select focus (the design draws it in JS: green border + soft ring). The inline
   `outline: none` the controls carry left them with no focus indicator at all (I29). */
.sp-input:focus { border-color: var(--sp-green) !important; box-shadow: 0 0 0 3px rgba(34, 188, 126, .18) !important; }
/* DS Checkbox and the checkout's rate cards hide their native control; show its focus on the drawn one. */
.sp-check input:focus-visible + span { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.sp-co-rate:has(> input:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* WooCommerce's own notices on the cart, checkout and store sign-in (no design exists for
   them): the buy box's treatment, errors on the danger tint. */
:is([data-cart-page], [data-checkout-page], [data-screen-label="Store sign-in"]) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { list-style: none; margin: 32px 0 0; padding: 14px 18px; border-radius: 10px; background: var(--sp-green-soft); color: var(--sp-ink); font: 400 14px/20px var(--font-sans); text-align: left; }
:is([data-cart-page], [data-checkout-page], [data-screen-label="Store sign-in"]) .woocommerce-error { background: var(--status-danger-bg); }
:is([data-cart-page], [data-checkout-page], [data-screen-label="Store sign-in"]) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
:is([data-cart-page], [data-checkout-page], [data-screen-label="Store sign-in"]) :is(.woocommerce-message, .woocommerce-info) .button { float: right; margin-left: 16px; }
[data-screen-label="Store sign-in"] :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { margin: 0 0 16px; }
[data-screen-label="Store sign-in"] .sp-input[aria-invalid="true"] { border-color: var(--status-danger) !important; box-shadow: 0 0 0 1px var(--status-danger) !important; }

/* Checkout (inc/checkout.php). wc-checkout prepends its error group INTO the form, which is
   the design's two-column grid: give it the whole first row. */
form.sp-co-form > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
form.sp-co-form > .woocommerce-NoticeGroup > :first-child { margin-top: 0; }
[data-sp-co="pay"] .sp-co-methods { list-style: none; margin: 0; padding: 0; }
[data-sp-co="pay"] .payment_box > p { margin: 0 0 16px; font: 400 14px/20px var(--font-sans); color: var(--text-muted); }
/* CyberSource's own card form (payment_fields(): Flex Microform iframes for the number and
   security code, an input for expiry), laid out and drawn as the design's three DS Inputs. */
[data-sp-co="pay"] .wc-payment-form { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
[data-sp-co="pay"] .wc-payment-form .form-row { grid-column: span 3; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
[data-sp-co="pay"] .wc-payment-form .form-row-wide { grid-column: span 6; }
[data-sp-co="pay"] .wc-payment-form .clear { display: none; }
[data-sp-co="pay"] .wc-payment-form label { font: var(--type-field-label); color: var(--sp-ink); }
[data-sp-co="pay"] .wc-payment-form .required { color: var(--status-required); margin-left: 3px; border: 0; text-decoration: none; }
[data-sp-co="pay"] .wc-payment-form input.input-text, [data-sp-co="pay"] .wc-payment-form [id$="-hosted"] { min-height: var(--input-h); height: var(--input-h); padding: 0 12px; border-radius: var(--radius-control); box-sizing: border-box; width: 100%; border: 1px solid var(--border-input); background: var(--surface-form); color: var(--sp-ink); font: 400 13px/1.4 var(--font-sans); outline: none; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
[data-sp-co="pay"] .wc-payment-form input.input-text:focus, [data-sp-co="pay"] .wc-payment-form [id$="-hosted"].flex-microform-focused { border-color: var(--sp-green); box-shadow: 0 0 0 3px rgba(34, 188, 126, .18); }
[data-sp-co="pay"] .woocommerce-privacy-policy-text, [data-checkout-page] .woocommerce-privacy-policy-text { margin-top: 16px; font: 400 13px/18px var(--font-sans); color: var(--text-muted); }
[data-checkout-page] .woocommerce-privacy-policy-text p { margin: 0; }
[data-checkout-page] .woocommerce-privacy-policy-text a { color: var(--sp-ink); text-decoration: underline; text-underline-offset: 2px; }
[data-checkout-page][aria-busy="true"] [data-sp-co] { opacity: .6; transition: opacity .2s; }
@media (max-width: 767px) { [data-sp-co="pay"] .wc-payment-form .form-row { grid-column: span 6; } }

/* Education cards and rows (Education Hub / Category / Post). The design drives these
   hovers from JS state (cardVals: zoom, green title, play button; LinkRow nudge). */
:is(.sp-ecard, .sp-efeat):is(:hover, :focus-visible) [data-e="zoom"] { transform: scale(1.04) !important; }
:is(.sp-ecard, .sp-efeat):is(:hover, :focus-visible) [data-e="title"] { color: #22BC7E !important; }
.sp-ecard:is(:hover, :focus-visible) [data-e="play"] { background: #22BC7E !important; color: #fff !important; }
.sp-efeat:is(:hover, :focus-visible) [data-e="read"] { color: var(--green-text) !important; }
.sp-efeat:is(:hover, :focus-visible) [data-e="nudge"] { transform: translateX(3px) !important; }
.sp-efeat:is(:hover, :focus-visible) [data-e="line"] { transform: scaleX(1) !important; transform-origin: left center !important; }
.sp-elib:is(:hover, :focus-visible) { color: #22BC7E !important; }
.sp-elib:is(:hover, :focus-visible) > span:last-child { transform: translateX(3px) !important; }
.sp-etype:is(:hover, :focus-visible) > span:first-child, .sp-etype:is(:hover, :focus-visible) > span:nth-child(2) > span:first-child { color: #22BC7E !important; }
.sp-etype:is(:hover, :focus-visible) > span:last-child { transform: translateX(3px) !important; }
/* Education Category sidebar (the design's cats hover: tile and text green) and search focus. */
.sp-ecat:not([aria-current="page"]):is(:hover, :focus-visible) { color: #22BC7E !important; }
.sp-ecat:not([aria-current="page"]):is(:hover, :focus-visible) > span:first-child { background: #22BC7E !important; color: #fff !important; }
.sp-esearch:focus { border-color: #22BC7E !important; box-shadow: 0 0 0 3px rgba(34, 188, 126, .22) !important; }

/* Education Post body (single-post.php): the post's own content in the design's article
   type. The design inlines these on its sample blocks (h3, p, ul/li); a post's real
   headings are h2/h3, both drawn as the design's section heading. */
.sp-prose :is(h2, h3) { margin: 56px 0 0; font: 500 clamp(24px, 2.3334vw, 28px)/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--sp-ink); }
.sp-prose :is(h4, h5, h6) { margin: 40px 0 0; font: 600 20px/26px var(--font-sans); letter-spacing: -0.01em; color: var(--sp-ink); }
.sp-prose p { margin: 20px 0 0; font: 400 18px/26px var(--font-sans); letter-spacing: 0; color: var(--sp-ink); text-wrap: pretty; }
.sp-prose :is(ul, ol) { margin: 20px 0 0; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.sp-prose li { padding-left: 4px; font: 400 18px/26px var(--font-sans); color: var(--sp-ink); }
.sp-prose li :is(ul, ol) { margin-top: 8px; }
.sp-prose span[style*="font-size"] { font-size: inherit !important; }
/* Links: the DS TextLink's ink text and green rule (green text on cream is 4.34:1, under AA). */
.sp-prose a { color: var(--sp-ink); text-decoration: underline; text-decoration-color: var(--sp-green); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-hover) var(--ease-out); }
.sp-prose a:is(:hover, :focus-visible) { color: var(--green-text); }
.sp-prose :is(strong, b) { font-weight: 600; }
.sp-prose :is(figure, .wp-block-image, .wp-block-embed) { margin: 40px 0 0; }
.sp-prose :is(img, video) { display: block; max-width: 100%; height: auto; border-radius: 20px; }
.sp-prose figcaption { margin-top: 12px; font: 400 14px/20px var(--font-sans); color: var(--text-muted); }
.sp-prose iframe { display: block; width: 100%; max-width: 100%; margin: 40px 0 0; border: 0; border-radius: 20px; }
/* Video embeds fill the measure at 16:9; any other embed (a podcast player, a map) keeps the
   height it declares. */
.sp-prose iframe:is([src*="youtube"], [src*="youtu.be"], [src*="vimeo"], [src*="wistia"], [src*="loom.com"]) { height: auto; aspect-ratio: 16 / 9; }
.sp-prose blockquote { margin: 40px 0 0; padding-left: 24px; border-left: 2px solid var(--sp-green); }
.sp-prose blockquote p { font: 400 22px/1.5 var(--font-sans); }
.sp-prose table { margin: 40px 0 0; width: 100%; border-collapse: collapse; font: 400 16px/22px var(--font-sans); }
.sp-prose :is(th, td) { padding: 12px 16px 12px 0; border-bottom: 1px solid rgba(34, 44, 55, .12); text-align: left; vertical-align: top; }
.sp-prose th { font-weight: 600; }
.sp-prose .wp-block-embed__wrapper:empty, .sp-prose figure:empty { display: none; }
/* Video poster: the design scales the play button on hover. */
.sp-eplay:is(:hover, :focus-visible) > span:nth-child(2) { transform: translate(-50%, -50%) scale(1.08) !important; }
/* Education Category / Post sidebar grids: the design gives them no phone rule, so at 390px
   the content column collapsed to almost nothing (one word per line). Stacked below 768px
   exactly as the design's own data-m="stack" + "unstick" do for legal pages (DV33). */
@media (max-width: 767px) {
  .sp-mstack { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  .sp-mstack > aside { position: static !important; }
}

/* Support Hub (page-templates/support-hub.php): the design's JS hover/focus states. */
.sp-supq:focus-within { border-color: #22BC7E !important; box-shadow: 0 0 0 3px rgba(34, 188, 126, .22) !important; }
.sp-supres:is(:hover, :focus-visible) { color: #22BC7E !important; }
.sp-supfb:is(:hover, :focus-visible) { background: rgba(255, 250, 242, .08) !important; }
.sp-supfb:is(:hover, :focus-visible) > span:first-child > span:last-child > span:first-child,
.sp-supfb:is(:hover, :focus-visible) > span:last-child > span:first-child { color: #22BC7E !important; }
.sp-supfb:is(:hover, :focus-visible) > span:last-child > span:last-child { transform: translateX(3px) !important; }
.sp-suppop:is(:hover, :focus-visible) > span:first-child { color: #22BC7E !important; }
.sp-suppop:is(:hover, :focus-visible) > span:last-child > span:first-child > span:last-child { transform: translateX(3px) !important; }
.sp-supdlt:is(:hover, :focus-visible) { color: #22BC7E !important; }
.sp-supdlt:is(:hover, :focus-visible) > span:last-child { background: #22BC7E !important; color: #fff !important; }
/* Downloads: four across from 1100px (the design's `wide` state), two below. */
@media (max-width: 1099px) { .sp-supdl { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* Rx Sheets rows (the design's r.enter/r.leave): title, format and icon turn green, the
   arrow drops 2px. The Canada rows keep the captured .sp-h-2e4692 (style-hover). */
.sp-rxrow:is(:hover, :focus-visible) > span:first-child > span:first-child,
.sp-rxrow:is(:hover, :focus-visible) > span:first-child > span:last-child > span:first-child,
.sp-rxrow:is(:hover, :focus-visible) > span:last-child { color: #22BC7E !important; }
.sp-rxrow:is(:hover, :focus-visible) > span:last-child > svg { transform: translateY(2px) !important; }
/* Legal pages (DR20): the policy's own content in the design's section type (sections and
   their h2s carry the design's inline styles; this sets what the content brings). */
.sp-legal > p:first-of-type { margin-top: 0; }
.sp-legal section > :is(p, ul, ol, .sp-legal-table) { margin-top: 16px; }
.sp-legal section :is(h3, h4) { margin: 32px 0 0; font: 600 20px/26px var(--font-sans); letter-spacing: -0.01em; color: var(--sp-ink); }
.sp-legal .sp-legal-note { margin: 16px 0 0; font: 400 16px/22px var(--font-sans); color: var(--text-muted); text-wrap: wrap; }
.sp-legal-table { overflow-x: auto; }
.sp-legal-table table { margin: 0; min-width: 640px; font: 400 14px/20px var(--font-sans); }
.sp-legal-table:focus-visible { outline: 2px solid var(--sp-green); outline-offset: 4px; }
/* Email Preferences: the design's Save button sits in an import host (.sc-host-x) that takes
   its width: 100%, so on desktop the button keeps its own width; phones make it full width
   (the responsive button rule). */
[data-email-prefs] button[data-m~="btn-primary"] { align-self: flex-start; }
/* Search results (DR22): group titles are <h2>s (the design's <div>s, same type); a result row
   turns its title and icon green and nudges its arrow (the design's r.enter/r.leave). */
.sp-srch-h { margin: 0; }
.sp-srow:is(:hover, :focus-visible) > span:first-child,
.sp-srow:is(:hover, :focus-visible) > span:nth-child(2) > span:first-child { color: #22BC7E !important; }
.sp-srow:is(:hover, :focus-visible) > span:last-child { transform: translateX(3px) !important; }
/* Not Found destination cards (the design's d.enter/d.leave): lighter fill, green title, arrow nudged. */
.sp-nfcard:is(:hover, :focus-visible) { background: rgba(255, 250, 242, 0.08) !important; }
.sp-nfcard:is(:hover, :focus-visible) > span:first-child > span:first-child { color: #22BC7E !important; }
.sp-nfcard:is(:hover, :focus-visible) > span:last-child > span { transform: translateX(3px) !important; }
/* Thank You: the call cards' titles are <h3>s (the design's <div>s, same type); the "In the
   meantime" cards light up, turn their title and link line green and nudge the arrow. */
.sp-ty-h { margin-bottom: 0; color: inherit; }
.sp-tycard:is(:hover, :focus-visible) { background: rgba(255, 250, 242, 0.08) !important; }
.sp-tycard:is(:hover, :focus-visible) > span:first-child > span:last-child > span:first-child,
.sp-tycard:is(:hover, :focus-visible) > span:last-child > span:first-child { color: #22BC7E !important; }
.sp-tycard:is(:hover, :focus-visible) > span:last-child > span:last-child { transform: translateX(3px) !important; }
/* Login: card titles are <h2>s (the design's <span>s, same type); a card lights up, turns its
   link line green and nudges the arrow (the design's c.enter/c.leave; keyboard: its link). */
.sp-login-h { margin: 0; }
.sp-logincard:is(:hover, :focus-within) { background: rgba(255, 250, 242, 0.08) !important; }
.sp-logincard:is(:hover, :focus-within) > a:last-child > span:first-child { color: #22BC7E !important; }
.sp-logincard:is(:hover, :focus-within) > a:last-child > span:last-child { transform: translateX(3px) !important; }
/* Content pages (DR23): a page's own content in the design's prose; its Gravity Form dressed as
   the design's controls (.sp-gform), with the prose list styles kept off the form's markup and
   the required-fields line shown (Get Started says it in its own copy, these pages do not). */
.sp-content > :first-child { margin-top: 0; }
.sp-content table { display: block; overflow-x: auto; }
.sp-content .gform_wrapper { margin-top: 40px; }
.sp-content .gform_wrapper :is(ul, ol) { display: block; margin: 0; padding: 0; list-style: none; }
.sp-content .gform_wrapper li { padding: 0; font: inherit; }
.sp-content .gform_wrapper .gform_required_legend { display: block; margin: 0 0 8px; font: 400 14px/20px var(--font-sans); color: var(--text-muted); }
.sp-content .gform_wrapper .gfield_description { font: 400 14px/20px var(--font-sans); color: var(--text-muted); }
/* Checkout rate cards: the design draws them as <button>s, which size padding and border inside
   their width; as <label>s (real radios inside) they need it said, or each card ran 38px past
   its column (2026-10-13, first signed-in QA). */
.sp-co-rate { box-sizing: border-box; }
/* Checkout: what plugins add through the review-order hooks (UPS Access Point selector,
   Discount Rules messages), set in the design's type instead of WooCommerce's table look. */
.sp-co-hook { width: 100%; border-collapse: collapse; font: 400 14px/20px var(--font-sans); color: var(--sp-ink); }
.sp-co-hook :is(th, td) { display: block; padding: 0; text-align: left; font-weight: 400; }
.sp-co-hook th { margin-bottom: 8px; font: var(--type-field-label); }
.sp-co-hook select { width: 100%; min-height: var(--input-h); padding: 0 12px; border-radius: var(--radius-control); border: 1px solid var(--border-input); background: var(--surface-form); font: 400 13px/1.4 var(--font-sans); color: var(--sp-ink); }
/* Support Article / Category (template-parts/support-article.php, taxonomy-support_category.php). */
.sp-prose--answer > :first-child { margin-top: 0 !important; }
.sp-suprel:is(:hover, :focus-visible) { transform: translateY(-2px) !important; }
.sp-suprel:is(:hover, :focus-visible) > span:first-child > span,
.sp-suprel:is(:hover, :focus-visible) > span:last-child > span:first-child { color: #22BC7E !important; }
.sp-suprel:is(:hover, :focus-visible) > span:last-child > span:last-child { transform: translateX(3px) !important; }
/* Support Hub category cards: the design keeps them two across at every width, which leaves
   ~70px of text per card at 390px; one column below 768px (DV35). */
@media (max-width: 767px) { .sp-supgrid { grid-template-columns: minmax(0, 1fr) !important; } }

/* Get Started (page-templates/get-started.php): Gravity Forms' own form dressed as the design's
   DS controls (Input, Select, Textarea, the account-type pills, the full-width Button). The
   design's sizes: 48px controls, 16px type, 8px column gap, 20px between rows (DV40). */
.sp-gform .gform_wrapper.gravity-theme { margin: 0; }
.sp-gform .gform_required_legend { display: none; } /* the design's own line says it: "Every field marked * is required." */
.sp-gform .gform_wrapper.gravity-theme .gform_fields { row-gap: 20px; column-gap: 8px; }
.sp-gform .gform_wrapper.gravity-theme .gform_body { margin-top: 28px; }
.sp-gform .gform_wrapper.gravity-theme :is(.gfield_label, legend.gfield_label) { margin: 0 0 8px; padding: 0; font: var(--type-field-label); color: var(--sp-ink); }
.sp-gform .gform_wrapper.gravity-theme .gfield_required { color: var(--status-required); margin-left: 3px; font: inherit; }
/* Gravity Forms 3.1 wraps the asterisk in a second .gfield_required, which doubled the gap (I79). */
.sp-gform .gform_wrapper.gravity-theme .gfield_required .gfield_required { margin-left: 0; }
.sp-gform .gform_wrapper.gravity-theme :is(input[type="text"], input[type="tel"], input[type="email"], select, textarea) {
  min-height: var(--input-h); height: 48px; padding: 0 12px; border-radius: var(--radius-control); box-sizing: border-box; width: 100%;
  border: 1px solid var(--border-input); background: var(--surface-form); box-shadow: none; color: var(--sp-ink);
  font: 400 16px/1.4 var(--font-sans); outline: none; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.sp-gform .gform_wrapper.gravity-theme textarea { height: auto; padding: 12px; font: 400 16px/1.5 var(--font-sans); resize: vertical; }
.sp-gform .gform_wrapper.gravity-theme select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background: var(--surface-form) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7580' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
.sp-gform .gform_wrapper.gravity-theme :is(input, select, textarea):focus { border-color: var(--sp-green); box-shadow: 0 0 0 3px rgba(34, 188, 126, .18); }
.sp-gform .gform_wrapper.gravity-theme ::placeholder { color: var(--text-muted); opacity: 1; }
.sp-gform .gform_wrapper.gravity-theme .ginput_complex { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 8px; }
.sp-gform .gform_wrapper.gravity-theme .ginput_complex > span { width: auto; max-width: none; padding: 0; margin: 0; }
/* Account type: the design's three pills (radio group). */
.sp-gform .gform_wrapper.gravity-theme .gfield_radio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 8px; }
.sp-gform .gform_wrapper.gravity-theme .gfield_radio .gchoice { position: relative; margin: 0; display: flex; }
.sp-gform .gform_wrapper.gravity-theme .gfield_radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sp-gform .gform_wrapper.gravity-theme .gfield_radio label { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; max-width: none; margin: 0; padding: 10px 12px;
  box-sizing: border-box; border-radius: var(--radius-control); border: 1px solid var(--border-input); background: #fff; color: var(--sp-ink);
  font: 500 14px/1.25 var(--font-sans); text-align: center; cursor: pointer; transition: background .25s cubic-bezier(.22,.61,.36,1), border-color .25s, color .25s; }
.sp-gform .gform_wrapper.gravity-theme .gfield_radio label:hover { border-color: #22BC7E; }
.sp-gform .gform_wrapper.gravity-theme .gfield_radio input:checked + label { border-color: rgb(34, 188, 126); background: var(--sp-green-soft); }
.sp-gform .gform_wrapper.gravity-theme .gfield_radio input:focus-visible + label { outline: 2px solid var(--border-focus); outline-offset: 2px; }
/* Errors: the design's "Required" line and red border. */
.sp-gform .gform_wrapper.gravity-theme .gfield_error :is(input, select, textarea) { border-color: var(--status-required); }
.sp-gform .gform_wrapper.gravity-theme .gfield_validation_message, .sp-gform .gform_wrapper.gravity-theme .validation_message {
  margin: 8px 0 0; padding: 0; border: 0; background: none; font: 400 12px/1.4 var(--font-sans); color: var(--status-required); }
.sp-gform .gform_wrapper.gravity-theme .gform_validation_errors { margin: 24px 0 0; padding: 14px 16px; border: 0; border-radius: 10px; background: var(--status-danger-bg); box-shadow: none; }
.sp-gform .gform_wrapper.gravity-theme .gform_validation_errors > h2 { margin: 0; font: 600 14px/20px var(--font-sans); color: var(--sp-ink); }
.sp-gform .gform_wrapper.gravity-theme .gform_validation_errors > h2 .gform-icon { display: none; }
/* Submit: the design's full-width primary Button. */
.sp-gform .gform_wrapper.gravity-theme .gform_footer { margin: 28px 0 0; padding: 0; }
.sp-gform .gform_wrapper.gravity-theme .gform_footer :is(input[type="submit"], button) { display: flex; width: 100%; align-items: center; justify-content: center; height: 52px; margin: 0; padding: 0 28px;
  border-radius: var(--radius-control); border: 1px solid transparent; background: var(--sp-btn-fill); color: #fff; font: var(--weight-semibold) 16px/1 var(--font-sans); cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out); }
.sp-gform .gform_wrapper.gravity-theme .gform_footer :is(input[type="submit"], button):is(:hover, :focus-visible) { background: var(--sp-btn-fill-hover); }
.sp-gform .gform_ajax_spinner { margin-left: 12px; }
/* Gravity Forms' honeypot: GF hides it with its own CSS; this guarantees it if that CSS is
   ever off (standards: a honeypot whose wrapper has no rule renders in full view). */
.gform_wrapper .gform_validation_container { display: none !important; }
/* Measured against the design (Get Started @1440): legends are 600 14px/1.3 (labels the DS
   field-label type), the pills sit 10px under their legend, 24px separates the set-up
   pills from the name row (the v2 customer pills keep the form's 20px), and the message box
   is the design's five rows (146px). */
.sp-gform .gform_wrapper.gravity-theme legend.gfield_label { font: 600 14px/1.3 var(--font-sans); }
.sp-gform .gform_wrapper.gravity-theme .gfield--type-radio legend.gfield_label { margin-bottom: 10px; }
.sp-gform .gform_wrapper.gravity-theme .gfield--type-radio:has(+ .gfield--type-name) { margin-bottom: 4px; }
.sp-gform .gform_wrapper.gravity-theme .gfield textarea { height: 146px !important; display: block; padding: 12px; font: 400 16px/1.5 var(--font-sans); } /* over GF's own .medium (192px) and the input rule's :is() specificity */
.sp-gform .gform_wrapper.gravity-theme .ginput_complex > span { padding: 0 !important; margin: 0 !important; flex: none; }

/* Staff accounts see WordPress's admin bar (customers do not: WooCommerce hides it). The
   fixed header and the mobile menu sit below it instead of under it. */
body.admin-bar [data-el="site-header"] { top: calc(20px + 32px) !important; }
body.admin-bar [data-mob-panel] { top: 32px !important; }
@media screen and (max-width: 782px) {
  body.admin-bar [data-el="site-header"] { top: calc(20px + 46px) !important; }
  body.admin-bar [data-mob-panel] { top: 46px !important; }
}


/* ---------------------------------------------------------------------------
   My Account, signed in (template-parts/account.php; no design exists: DV46). The store
   family the design does draw: the header account menu's items as the navigation, the
   Checkout's white box for the content, DS Inputs and Buttons on WooCommerce's own markup
   (its CSS is removed: functions.php). Every rule is scoped to [data-account-page]. */
[data-account-page] .sp-acct-page { margin-top: 56px; }
[data-account-page] .sp-acct-page > .woocommerce { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 32px; align-items: start; }
[data-account-page] .sp-acct-page > p { margin: 0; }
[data-account-page] .sp-acct-page iframe { display: block; max-width: 100%; margin-top: 32px; }
[data-account-page] .sp-acct-staffnote { margin: 24px 0 0 !important; font: 400 13px/18px var(--font-sans); color: var(--text-muted); }
/* Navigation: the header menu's .sp-acct items (bar, title) and its divider + footer link. */
[data-account-page] .sp-acct-nav { background: #fff; border-radius: 16px; box-shadow: var(--shadow-soft); padding: 12px; box-sizing: border-box; }
[data-account-page] .sp-acct-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
[data-account-page] .sp-acct-nav .sp-acct { display: flex; gap: 12px; padding: 12px; border-radius: 8px; transition: background .25s cubic-bezier(.22, .61, .36, 1); }
[data-account-page] .sp-acct-nav .sp-acct > span:first-child { width: 3px; border-radius: 2px; flex: 0 0 auto; background: var(--sp-mist); transition: background .25s cubic-bezier(.22, .61, .36, 1); }
[data-account-page] .sp-acct-nav .sp-acct > span:last-child > span { font: 600 15px/1.25 var(--font-sans); color: var(--sp-ink); transition: color .25s; }
[data-account-page] .sp-acct-nav .sp-acct[aria-current="page"] { background: rgba(34, 44, 55, .05); }
[data-account-page] .sp-acct-nav .sp-acct[aria-current="page"] > span:first-child { background: var(--sp-green); }
[data-account-page] .sp-acct-nav .woocommerce-MyAccount-navigation-link--customer-logout { margin: 8px 12px 0; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
[data-account-page] .sp-acct-nav .sp-footlink { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font: 600 14px/1.2 var(--font-sans); color: var(--text-muted); text-decoration: none; transition: color .25s; }
/* Content: the Checkout's box. */
[data-account-page] .woocommerce-MyAccount-content { min-width: 0; background: #fff; border-radius: 16px; box-shadow: var(--shadow-soft); box-sizing: border-box; padding: 40px 36px; color: var(--sp-ink); font: 400 16px/24px var(--font-sans); }
[data-account-page] .woocommerce-MyAccount-content p { margin: 0 0 16px; }
[data-account-page] .woocommerce-MyAccount-content a:not(.button) { color: var(--sp-ink); text-decoration: underline; text-decoration-color: var(--sp-green); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .25s; }
[data-account-page] .woocommerce-MyAccount-content a:not(.button):is(:hover, :focus-visible) { color: var(--green-text); }
[data-account-page] .woocommerce-MyAccount-content h2 { margin: 40px 0 16px; font: 600 20px/24px var(--font-sans); letter-spacing: -0.02em; color: var(--sp-ink); }
[data-account-page] .woocommerce-MyAccount-content h3 { margin: 24px 0 12px; font: 600 16px/22px var(--font-sans); }
[data-account-page] .woocommerce-MyAccount-content mark { background: none; color: inherit; font-weight: 600; }
[data-account-page] .woocommerce-MyAccount-content address { font-style: normal; }
[data-account-page] .woocommerce-MyAccount-content address p { margin: 8px 0 0; color: var(--text-muted); }
[data-account-page] .woocommerce-MyAccount-content :is(.button, button[type="submit"]) { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--radius-control); background: var(--sp-btn-fill); color: #fff; font: var(--weight-semibold) 14px/1 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; box-sizing: border-box; transition: background var(--dur-hover) var(--ease-out); }
[data-account-page] .woocommerce-MyAccount-content :is(.button, button[type="submit"]):is(:hover, :focus-visible) { background: var(--sp-btn-fill-hover); }
/* Tables: orders, order details, saved cards. */
[data-account-page] .woocommerce-MyAccount-content table { width: 100%; border-collapse: collapse; font: 400 15px/22px var(--font-sans); color: var(--sp-ink); }
[data-account-page] .woocommerce-MyAccount-content thead th { padding: 0 12px 12px; border-bottom: 1px solid var(--border-subtle); text-align: left; font: 600 12px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
[data-account-page] .woocommerce-MyAccount-content :is(tbody, tfoot) :is(th, td) { padding: 16px 12px; border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: middle; font-weight: 400; }
[data-account-page] .woocommerce-MyAccount-content table :is(th, td):first-child { padding-left: 0; }
[data-account-page] .woocommerce-MyAccount-content table :is(th, td):last-child { padding-right: 0; }
[data-account-page] .woocommerce-orders-table__cell-order-number a { font-weight: 600; }
[data-account-page] :is(.woocommerce-orders-table__header-order-actions, .woocommerce-orders-table__cell-order-actions) { text-align: right !important; }
[data-account-page] :is(.woocommerce-orders-table, .woocommerce-MyAccount-paymentMethods) .button { height: 36px; padding: 0 16px; }
[data-account-page] :is(.woocommerce-orders-table, .woocommerce-MyAccount-paymentMethods) .button + .button { margin-left: 8px; }
[data-account-page] .woocommerce-table--order-details :is(th, td):last-child { text-align: right; }
[data-account-page] .woocommerce-table--order-details tfoot th { color: var(--text-muted); }
[data-account-page] .woocommerce-table--order-details tfoot tr:last-child :is(th, td) { border-bottom: 0; font: 600 18px/24px var(--font-sans); color: var(--sp-ink); }
[data-account-page] .woocommerce-table--order-details :is(.product-quantity, .shipped_via) { font-weight: 400; color: var(--text-muted); }
[data-account-page] .woocommerce-table--order-details .wc-item-meta { list-style: none; margin: 6px 0 0; padding: 0; font: 400 13px/18px var(--font-sans); color: var(--text-muted); }
[data-account-page] .woocommerce-table--order-details .wc-item-meta p { display: inline; margin: 0; }
[data-account-page] .woocommerce-pagination { margin-top: 24px; display: flex; justify-content: space-between; }
/* Addresses (Addresses and an order's customer details): two outlined panels. */
[data-account-page] .woocommerce-MyAccount-content .col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
[data-account-page] .woocommerce-MyAccount-content .col2-set > * { min-width: 0; padding: 24px; border: 1px solid var(--border-subtle); border-radius: 12px; box-sizing: border-box; }
[data-account-page] .woocommerce-MyAccount-content .col2-set h2 { margin: 0 0 12px; font-size: 16px; line-height: 22px; }
[data-account-page] .woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
[data-account-page] .woocommerce-Address-title h2 { margin: 0 !important; }
[data-account-page] .woocommerce-Address-title .edit { font: 600 14px/1.2 var(--font-sans); }
/* Edit address: WooCommerce's form rows as DS Inputs on the Checkout's two-column grid. */
[data-account-page] .woocommerce-MyAccount-content form > h2:first-child { margin-top: 0; }
[data-account-page] .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
[data-account-page] .woocommerce-MyAccount-content .form-row { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; }
[data-account-page] .woocommerce-MyAccount-content .form-row-first { grid-column: 1; }
[data-account-page] .woocommerce-MyAccount-content .form-row-last { grid-column: 2; }
[data-account-page] .woocommerce-MyAccount-content .form-row label { font: var(--type-field-label); color: var(--sp-ink); }
[data-account-page] .woocommerce-MyAccount-content .form-row .required { color: var(--status-required); border: 0; text-decoration: none; }
[data-account-page] .woocommerce-MyAccount-content .form-row .optional { font-weight: 400; color: var(--text-muted); }
[data-account-page] .woocommerce-MyAccount-content .woocommerce-input-wrapper { display: block; }
[data-account-page] .woocommerce-MyAccount-content :is(input.input-text, select, textarea) { width: 100%; height: 48px; min-height: var(--input-h); padding: 0 12px; border: 1px solid var(--border-input); border-radius: var(--radius-control); background: var(--surface-form); color: var(--sp-ink); font: 400 16px/1.4 var(--font-sans); box-sizing: border-box; outline: none; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
[data-account-page] .woocommerce-MyAccount-content textarea { height: auto; padding: 12px; }
[data-account-page] .woocommerce-MyAccount-content select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; background: var(--surface-form) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7580' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
[data-account-page] .woocommerce-MyAccount-content :is(input.input-text, select, textarea):focus { border-color: var(--sp-green); box-shadow: 0 0 0 3px rgba(34, 188, 126, .18); }
[data-account-page] .woocommerce-MyAccount-content .woocommerce-invalid :is(input.input-text, select, .select2-selection) { border-color: var(--status-required); }
[data-account-page] .woocommerce-MyAccount-content form button[name="save_address"] { height: 52px; margin-top: 12px; padding: 0 28px; font-size: 16px; }
/* selectWoo (WooCommerce's country and state selects) drawn as the DS Select. */
[data-account-page] .woocommerce-MyAccount-content .select2-container { width: 100% !important; }
[data-account-page] .woocommerce-MyAccount-content .select2-container .select2-selection--single { height: 48px; border: 1px solid var(--border-input); border-radius: var(--radius-control); background: var(--surface-form); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
[data-account-page] .woocommerce-MyAccount-content .select2-container .select2-selection--single .select2-selection__rendered { padding: 0 36px 0 12px; font: 400 16px/46px var(--font-sans); color: var(--sp-ink); }
[data-account-page] .woocommerce-MyAccount-content .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; right: 8px; }
[data-account-page] .woocommerce-MyAccount-content :is(.select2-container--focus, .select2-container--open) .select2-selection--single { border-color: var(--sp-green); box-shadow: 0 0 0 3px rgba(34, 188, 126, .18); }
body.woocommerce-account .select2-dropdown { border-color: var(--border-input); border-radius: var(--radius-control); font: 400 15px/1.4 var(--font-sans); color: var(--sp-ink); }
body.woocommerce-account .select2-container--default .select2-results__option--highlighted:is([aria-selected], [data-selected]) { background: var(--sp-green); color: #fff; }
/* WooCommerce's notices, as on the cart and checkout. */
[data-account-page] .woocommerce-MyAccount-content :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { list-style: none; margin: 0 0 24px; padding: 14px 18px; border-radius: 10px; background: var(--sp-green-soft); color: var(--sp-ink); font: 400 14px/20px var(--font-sans); }
[data-account-page] .woocommerce-MyAccount-content .woocommerce-error { background: var(--status-danger-bg); }
[data-account-page] .woocommerce-MyAccount-content :is(.woocommerce-message, .woocommerce-info) .button { float: right; height: 32px; margin-left: 16px; padding: 0 14px; }
[data-account-page] .woocommerce-MyAccount-content > :last-child, [data-account-page] .woocommerce-MyAccount-content > p:last-of-type:last-child { margin-bottom: 0; }
[data-account-page] .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:empty + * { margin-top: 0; }
@media (max-width: 1023px) {
  [data-account-page] .sp-acct-page > .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  [data-account-page] .sp-acct-nav ul { flex-direction: row; flex-wrap: wrap; align-items: center; }
  [data-account-page] .sp-acct-nav .woocommerce-MyAccount-navigation-link--customer-logout { margin: 0 0 0 auto; padding: 0 12px; border: 0; }
}
@media (max-width: 767px) {
  [data-account-page] .sp-acct-page { margin-top: 40px; }
  [data-account-page] .woocommerce-MyAccount-content { padding: 28px 20px; }
  [data-account-page] :is(.woocommerce-MyAccount-content .col2-set, .woocommerce-address-fields__field-wrapper) { grid-template-columns: minmax(0, 1fr); }
  [data-account-page] .woocommerce-MyAccount-content :is(.form-row-first, .form-row-last) { grid-column: 1 / -1; }
  /* WooCommerce's responsive tables (shop_table_responsive): one block per row, labelled cells. */
  [data-account-page] .shop_table_responsive thead { display: none; }
  [data-account-page] .shop_table_responsive tbody tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
  [data-account-page] .shop_table_responsive tbody tr:first-child { padding-top: 0; }
  [data-account-page] .shop_table_responsive tbody tr:last-child { padding-bottom: 0; border-bottom: 0; }
  [data-account-page] .shop_table_responsive tbody :is(th, td) { display: block; padding: 6px 0 !important; border: 0; text-align: right !important; }
  [data-account-page] .shop_table_responsive tbody :is(th, td)[data-title]::before { content: attr(data-title); float: left; margin-right: 16px; font-weight: 600; color: var(--text-muted); }
  [data-account-page] .shop_table_responsive tbody .woocommerce-orders-table__cell-order-actions::before { content: none; }
}

/* Store password reset (template-parts/store-reset.php, Q45): WooCommerce's request form, its
   "email sent" confirmation and its new-password form inside the Store Login card. */
[data-screen-label="Store password reset"] .sp-reset { margin-top: 16px; text-align: left; font: 400 16px/22px var(--font-sans); color: var(--text-muted); }
[data-screen-label="Store password reset"] .sp-reset > p:empty { display: none; }
[data-screen-label="Store password reset"] .sp-reset form > p:first-child { margin: 0; text-align: center; text-wrap: pretty; }
[data-screen-label="Store password reset"] .sp-reset > p { margin: 16px 0 0; text-align: center; }
[data-screen-label="Store password reset"] .sp-reset .form-row { margin: 20px 0 0; display: flex; flex-direction: column; gap: 8px; }
[data-screen-label="Store password reset"] .sp-reset .form-row + .form-row { margin-top: 12px; }
[data-screen-label="Store password reset"] .sp-reset label { font: var(--type-field-label); color: var(--sp-ink); }
[data-screen-label="Store password reset"] .sp-reset .required { color: var(--status-required); }
[data-screen-label="Store password reset"] .sp-reset .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[data-screen-label="Store password reset"] .sp-reset .clear { display: none; }
[data-screen-label="Store password reset"] .sp-reset input.input-text { width: 100%; height: 48px; min-height: var(--input-h); padding: 0 12px; border: 1px solid var(--border-input); border-radius: var(--radius-control); background: var(--surface-form); color: var(--sp-ink); font: 400 16px/1.4 var(--font-sans); box-sizing: border-box; outline: none; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
[data-screen-label="Store password reset"] .sp-reset input.input-text:focus { border-color: var(--sp-green); box-shadow: 0 0 0 3px rgba(34, 188, 126, .18); }
[data-screen-label="Store password reset"] .sp-reset button[type="submit"] { display: flex; width: 100%; align-items: center; justify-content: center; height: 52px; margin-top: 8px; padding: 0 28px; border: 1px solid transparent; border-radius: var(--radius-control); background: var(--sp-btn-fill); color: #fff; font: var(--weight-semibold) 16px/1 var(--font-sans); cursor: pointer; transition: background var(--dur-hover) var(--ease-out); }
[data-screen-label="Store password reset"] .sp-reset button[type="submit"]:is(:hover, :focus-visible) { background: var(--sp-btn-fill-hover); }
[data-screen-label="Store password reset"] .sp-reset :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { list-style: none; margin: 0 0 16px; padding: 14px 18px; border-radius: 10px; background: var(--sp-green-soft); color: var(--sp-ink); font: 400 14px/20px var(--font-sans); text-align: left; }
[data-screen-label="Store password reset"] .sp-reset .woocommerce-error { background: var(--status-danger-bg); }

/* 3D FlipBook (the Specialty Products Catalogue: the plugin's own full-screen template, which
   has no <main>). The site footer is sticky and every other page's <main> lifts itself over it;
   here nothing did, so the footer painted over the book and the catalogue was hidden. The book
   takes <main>'s place (above the footer, the carbon page, the rounded edge and shadow of
   specialty_main_open('carbon')), fills the screen, and starts below the floating header. */
:is(.single-3d-flip-book, .post-type-archive-3d-flip-book) ._3d-flip-book { position: relative; z-index: 1; box-sizing: border-box; min-height: 100vh; padding-top: 104px; background: var(--sp-carbon); border-radius: 0 0 48px 48px; box-shadow: rgba(10, 14, 20, 0.55) 0px 40px 80px -30px; }

/* Account details (WooCommerce's edit-account form, switched on 2026-10-14: Q45). The address
   form's grid and DS inputs, the password change as an outlined panel, and WooCommerce's
   show-password button (its own CSS is removed) drawn as an eye in the field. */
[data-account-page] .woocommerce-EditAccountForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
[data-account-page] .woocommerce-EditAccountForm > * { grid-column: 1 / -1; margin: 0; }
[data-account-page] .woocommerce-EditAccountForm > .form-row-first { grid-column: 1; }
[data-account-page] .woocommerce-EditAccountForm > .form-row-last { grid-column: 2; }
[data-account-page] .woocommerce-EditAccountForm > .clear { display: none; }
[data-account-page] .woocommerce-EditAccountForm em { font: 400 13px/18px var(--font-sans); color: var(--text-muted); }
[data-account-page] .woocommerce-EditAccountForm fieldset { margin-top: 8px; padding: 20px 24px 24px; border: 1px solid var(--border-subtle); border-radius: 12px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
[data-account-page] .woocommerce-EditAccountForm legend { padding: 0 8px; margin-left: -8px; font: 600 16px/22px var(--font-sans); color: var(--sp-ink); }
[data-account-page] .woocommerce-EditAccountForm button[name="save_account_details"] { height: 52px; padding: 0 28px; font-size: 16px; justify-self: start; }
:is([data-account-page], [data-screen-label="Store password reset"]) .password-input { position: relative; display: block; }
:is([data-account-page], [data-screen-label="Store password reset"]) .password-input input { padding-right: 44px; }
:is([data-account-page], [data-screen-label="Store password reset"]) .show-password-input { position: absolute; top: 50%; right: 8px; width: 32px; height: 32px; margin: 0; padding: 0; transform: translateY(-50%); border: 0; border-radius: 8px; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7580' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center; }
:is([data-account-page], [data-screen-label="Store password reset"]) .show-password-input.display-password { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2322BC7E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); }
@media (max-width: 767px) { [data-account-page] .woocommerce-EditAccountForm > :is(.form-row-first, .form-row-last) { grid-column: 1 / -1; } }

/* Q50: the account Orders page shows the website's orders (WooCommerce's list) and the
   NetSuite transactions frame, each under its own heading. */
[data-account-page] .woocommerce-MyAccount-content h2.sp-acct-orders-title { margin: 0 0 20px; }
[data-account-page] .sp-acct-ns-title { margin: 56px 0 0; font: 600 24px/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--sp-ink); }
[data-account-page] .sp-acct-ns-lede { margin: 8px 0 0 !important; max-width: 640px; font: 400 16px/24px var(--font-sans); color: var(--text-muted); }

/* OnBRACE white papers (2026-10-15 export, now inside Compared): the design keeps the
   row hover in React state (phov): title text green, arrow nudged 3px. */
.sp-evlink { transition: color .25s; }
.sp-evlink:is(:hover, :focus-visible) { color: #22BC7E !important; }
.sp-evlink:is(:hover, :focus-visible) > span[aria-hidden] { transform: translateX(3px) !important; }

/* Ordont "Where to find everything" tiles (2026-10-15 export): the whole tile follows its
   link (global.js loginCards, data-card-link); the design's hover state (st.tile): the tile
   lifts to 8% cream, the link label turns green and its arrow moves 3px. */
.sp-otile:hover { background: rgba(255, 250, 242, 0.08) !important; }
.sp-otile:hover > a > span:first-child, .sp-otile > a:focus-visible > span:first-child { color: #22BC7E !important; }
.sp-otile:hover > a > span[aria-hidden], .sp-otile > a:focus-visible > span[aria-hidden] { transform: translateX(3px) !important; }

/* FAQ rows (Ordont): .faq-row / .faq-answer mark real question/answer pairs, which
   bin/check-schema.py requires wherever FAQPage is emitted (inc/schema.php). */
.faq-row .faq-answer { text-wrap: pretty; }

/* Get Started v2 (2026-10-15): the Request Pricing dialog's close button (the design's
   style-hover: green tile, white cross) and the dialog's Gravity Form, which carries the
   same dressing as the hero form (.sp-gform); its confirmation is the design's sent state. */
.sp-dlg-close:is(:hover, :focus-visible) { background: #22BC7E !important; color: #fff !important; }
.sp-gform--pricing .gform_wrapper.gravity-theme .gform_footer { margin-top: 28px; }
.sp-pricing-sent .sp-textlink:is(:hover, :focus-visible) { color: var(--green-text) !important; }


/* Our Promise (2026-10-16 export): below 1060px (or under 760px tall) the design swaps the
   pinned horizontal track for a stacked copy of the four promises: the intro across the top,
   then the panels as square cards in two columns (one below 768px), padding 96px 40px,
   20px apart. The page renders the promises once, so the one section takes that layout
   here; the dots belong to the track and go with it. global.js promisePage() leaves the
   track alone at these sizes. */
@media (max-width: 1059px), (max-height: 759px) {
  [data-screen-label="The four promises intro"] { padding-top: 96px !important; }
  [data-op-h] { height: auto !important; padding: 28px 40px 96px; }
  [data-op-sticky] { position: static !important; height: auto !important; overflow: visible !important; display: block !important; }
  [data-op-track] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px !important; padding: 0 !important; width: auto !important; transform: none !important; }
  [data-op-panel] { width: auto !important; height: auto !important; flex: none !important; aspect-ratio: 1 / 1; padding: 48px !important; }
  [data-op-dots] { display: none !important; }
}
@media (max-width: 767px) {
  [data-op-h] { padding: 28px 25px 75px; }
  [data-op-track] { grid-template-columns: minmax(0, 1fr); }
}
/* Our Promise (2026-10-16): with reduced motion the design pins no zoom: the hero is one
   screen and the content sheet overlaps it by 48px, as on the other pages. */
@media (prefers-reduced-motion: reduce) {
  [data-op-zoom] { height: 100vh !important; }
  [data-op-cover] { margin-top: -48px !important; }
}

/* Our Promise · the promise in writing, below 768px: the design's responsive.css puts every
   bento box in one column, but its own tablet rule ([data-bento="a"] spanning two, the more
   specific selector) still wins, which adds a 0px column and squeezes the stack. */
@media (max-width: 767px) {
  [data-m~="op-bento"] > [data-bento] { grid-column: auto !important; }
}

/* Our Promise · the promise in writing without its remake-rate and warranty boxes (DR31:
   both wait on approved figures): the last box takes the row it would otherwise half fill. */
@media (min-width: 1200px) {
  [data-m~="op-bento"][data-bento-short] > [data-bento="f"] { grid-column: span 4 !important; }
}

/* Home · the appliance rail (Pastel #92, 20 October): a hovered card lifts twice, the design's
   wrapper (.sp-h-bd67c5) and the DS card inside it (.sp-acard), 12px in all, and the rail
   clips vertically (overflow-x: auto) with 8px above the track, so the card's top was cut.
   8px more room above the track, taken back from the rail's margin: nothing else moves. */
[data-m~="rail-mask"][data-el="rail"] { margin-top: 72px !important; }
[data-m~="rail-track"] { padding-top: 16px !important; }

/* Home · the History and Turnaround cards (Pastel #93, 20 October): with the Quality card out
   (DR31) the two left take the row at half width each, and their centred line ran ~560px wide.
   Narrower, still centred. */
[data-m~="story-cards"] [data-m~="box"] p { max-width: 400px; margin-left: auto !important; margin-right: auto !important; }

/* My Account · the dashboard (DV65, 2026-10-20, user: "this layout could be improved"):
   the greeting, the latest three orders, and the two places a practice works with the lab. */
[data-account-page] .woocommerce-MyAccount-content p.sp-acct-hello { margin: 0 0 32px; font: 400 18px/26px var(--font-sans); }
[data-account-page] .sp-acct-recent { margin: 0; }
[data-account-page] .sp-acct-dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
[data-account-page] .woocommerce-MyAccount-content .sp-acct-dash-head h2 { margin: 0; }
[data-account-page] .woocommerce-MyAccount-content a.sp-acct-dash-all { font: 600 14px/1.2 var(--font-sans); }
[data-account-page] .sp-acct-orders { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-subtle); }
[data-account-page] .sp-acct-orders li { border-bottom: 1px solid var(--border-subtle); }
[data-account-page] .woocommerce-MyAccount-content .sp-acct-orders a { display: grid; grid-template-columns: minmax(72px, auto) minmax(0, 1fr) auto minmax(88px, auto) 16px; align-items: center; gap: 8px 20px; padding: 16px 0; color: var(--sp-ink); text-decoration: none; }
[data-account-page] .woocommerce-MyAccount-content .sp-acct-orders a:is(:hover, :focus-visible) { color: var(--sp-ink); }
[data-account-page] .sp-acct-order-no { font: 600 15px/22px var(--font-sans); transition: color .25s; }
[data-account-page] .sp-acct-orders a:is(:hover, :focus-visible) .sp-acct-order-no { color: var(--green-text); }
[data-account-page] .sp-acct-order-date { font: 400 15px/22px var(--font-sans); color: var(--text-muted); }
[data-account-page] .sp-acct-order-status { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-chip); background: var(--sp-green-soft); font: 400 13px/1 var(--font-sans); color: var(--green-text); white-space: nowrap; }
[data-account-page] .sp-acct-order-total { font: 600 15px/22px var(--font-sans); text-align: right; font-variant-numeric: tabular-nums; }
[data-account-page] .sp-acct-order-go, [data-account-page] .sp-acct-quick-go { display: flex; color: var(--sp-green); transition: transform .25s cubic-bezier(.22, .61, .36, 1); }
[data-account-page] .sp-acct-orders a:is(:hover, :focus-visible) .sp-acct-order-go, [data-account-page] .sp-acct-quick a:is(:hover, :focus-visible) .sp-acct-quick-go { transform: translateX(3px); }
[data-account-page] .woocommerce-MyAccount-content p.sp-acct-empty { margin: 0; padding: 16px 0; border-top: 1px solid var(--border-subtle); color: var(--text-muted); }
[data-account-page] .sp-acct-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
[data-account-page] .woocommerce-MyAccount-content .sp-acct-quick a { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 52px 20px 20px; border: 1px solid var(--border-subtle); border-radius: 12px; color: var(--sp-ink); text-decoration: none; transition: border-color .25s, background .25s; }
[data-account-page] .woocommerce-MyAccount-content .sp-acct-quick a:is(:hover, :focus-visible) { color: var(--sp-ink); border-color: var(--sp-green); background: rgba(34, 188, 126, .04); }
[data-account-page] .sp-acct-quick-title { font: 600 16px/22px var(--font-sans); }
[data-account-page] .sp-acct-quick-text { font: 400 14px/20px var(--font-sans); color: var(--text-muted); }
[data-account-page] .sp-acct-quick-go { position: absolute; right: 20px; top: 50%; margin-top: -8px; }
@media (max-width: 767px) {
  /* Orders: number and total on the first line, date and status under them. */
  [data-account-page] .woocommerce-MyAccount-content .sp-acct-orders a { grid-template-columns: minmax(0, 1fr) auto 16px; gap: 4px 12px; }
  [data-account-page] .sp-acct-order-no { grid-column: 1; grid-row: 1; }
  [data-account-page] .sp-acct-order-total { grid-column: 2; grid-row: 1; }
  [data-account-page] .sp-acct-order-date { grid-column: 1; grid-row: 2; font-size: 14px; }
  [data-account-page] .sp-acct-order-status { grid-column: 2; grid-row: 2; justify-self: end; }
  [data-account-page] .sp-acct-order-go { grid-column: 3; grid-row: 1 / span 2; }
  [data-account-page] .sp-acct-quick { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }

  /* The account menu: one row of pills that scrolls sideways, edge to edge, instead of a
     wrapped card (it broke 3 + 2 with the bars and Log out on a line of their own). */
  [data-account-page] .sp-acct-nav { margin: 0 -25px; padding: 0; background: transparent; border-radius: 0; box-shadow: none; }
  [data-account-page] .sp-acct-nav ul { flex-wrap: nowrap; gap: 8px; padding: 2px 25px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 25px; overscroll-behavior-x: contain; }
  [data-account-page] .sp-acct-nav ul::-webkit-scrollbar { display: none; }
  [data-account-page] .sp-acct-nav li { flex: 0 0 auto; }
  [data-account-page] .sp-acct-nav .sp-acct { gap: 0; padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-subtle); white-space: nowrap; }
  [data-account-page] .sp-acct-nav .sp-acct > span:first-child { display: none; }
  [data-account-page] .sp-acct-nav .sp-acct > span:last-child > span { font-size: 14px; }
  [data-account-page] .sp-acct-nav .sp-acct[aria-current="page"] { background: var(--sp-ink) !important; box-shadow: none; }
  [data-account-page] .sp-acct-nav .sp-acct[aria-current="page"] > span:last-child > span { color: #fff !important; }
  [data-account-page] .sp-acct-nav .woocommerce-MyAccount-navigation-link--customer-logout { margin: 0; padding: 0; border: 0; }
  [data-account-page] .sp-acct-nav .sp-footlink { gap: 6px; height: 100%; padding: 10px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border-subtle); white-space: nowrap; box-sizing: border-box; }
  [data-account-page] .sp-acct-page { margin-top: 32px; }
}

/* ---------------------------------------------------------------------------------------------
   The backdrop behind an appliance photo (DR38, 22 October 2026; specialty_pbg()). The new
   product photography is cut out, so the box behind it shows. The home hero, kept moving: carbon,
   its green glow (the hero's own 12deg gradient) sweeping along the bottom and breathing, a second
   glow crossing the top, and the hero's film grain (global.js pbgNoise(): the same grey noise
   tile, stepping 24 times a second as the hero's does). Transform and opacity only, so the
   compositor runs it. The photo covers most of the box, so the motion is sized to read in its
   edges and corners (user, 22 October: the first, gentler version did not show). The layers are
   oversized (-40%) so a sweep never shows an edge; the glow's stops are re-based onto them.
   ------------------------------------------------------------------------------------------- */
[data-pbg] { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--sp-carbon); pointer-events: none; }
[data-pbg] > span { position: absolute; inset: -40%; }
[data-pbg] > span:nth-child(1) { background: linear-gradient(12deg, rgba(34, 188, 126, .85) 22%, rgba(11, 77, 56, .5) 33%, rgba(34, 188, 126, 0) 48%); animation: sp-pbg-glow 9s ease-in-out infinite alternate; }
[data-pbg] > span:nth-child(2) { background: radial-gradient(30% 30% at 70% 30%, rgba(34, 188, 126, .5) 0%, rgba(11, 77, 56, .25) 50%, rgba(20, 28, 36, 0) 100%); animation: sp-pbg-glow2 13s ease-in-out infinite alternate; }
/* The grain holds still (Pastel #190, Michael Williams, 23 October); the glow behind it still moves. */
[data-pbg] > span:nth-child(3) { inset: 0; background-image: var(--pbg-noise, var(--grain)); background-size: 192px 192px; opacity: .1; }
[data-pbg="1"] > span:nth-child(-n+2) { animation-delay: -1.5s; }
[data-pbg="2"] > span:nth-child(-n+2) { animation-delay: -4.5s; }
[data-pbg="3"] > span:nth-child(-n+2) { animation-delay: -3s; }
[data-pbg="4"] > span:nth-child(-n+2) { animation-delay: -7.5s; }
[data-pbg="5"] > span:nth-child(-n+2) { animation-delay: -6s; }
@keyframes sp-pbg-glow { 0% { transform: translate(-14%, 6%) rotate(-10deg); opacity: .55; } 100% { transform: translate(14%, -4%) rotate(10deg); opacity: 1; } }
@keyframes sp-pbg-glow2 { 0% { transform: translate(8%, -6%) scale(1); opacity: .35; } 100% { transform: translate(-30%, 10%) scale(1.35); opacity: 1; } }
/* Nothing runs where nobody can see it: a closed mega menu, a closed selection-guide row. */
[data-dropdown][style*="visibility: hidden"] [data-pbg] > span,
[data-acc][aria-expanded="false"] + div [data-pbg] > span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  [data-pbg] > span:nth-child(n) { animation: none; }
}

/* Home's appliance slider: its Previous / Next arrows show at every width (Pastel #113, 22 October
   2026). The design shows them only below 1200px and leaves desktop to scroll sideways, which a
   mouse without a sideways wheel cannot do: at 1905px the cards run 3,553px wide. */
[data-m~="rail-arrows"] { display: flex !important; justify-content: flex-start; }

/* Michael Williams's Home pass (Pastel #175 to #195, 23 October). Where something moves, CSS order moves it:
   the recorded hover and step states address elements by their place in the markup, so the markup stays put. */
/* #190: an appliance photo card is 4:5, the appliance set in with room around it (Home's slider, the Appliances
   hub, the category grids, Related) */
[data-acard-photo] { aspect-ratio: 4 / 5 !important; }
[data-acard-photo] img { object-fit: contain !important; padding: 14%; box-sizing: border-box; }
/* #175: the proof line sits under the buttons */
[data-m~="hero-stack"] { display: flex; flex-direction: column; }
[data-m~="hero-stack"] > [data-m~="hero-proof"] { order: 1; margin-top: 28px !important; }
/* #193: each step's label is a green pill (the darker green, for white text), and the text comes before its illustration */
[data-el="process"] [data-step-text] { order: 1; }
[data-el="process"] [data-step-art] { order: 2; }
[data-el="process"] [data-step-after] { order: 3; }
[data-step-text] > div > div:first-child { justify-self: center; display: inline-block; padding: 7px 12px; border-radius: 999px; background: #16875A; color: #fff !important; }
/* #195: the trust row's lines each sit in their own box (Home and Our Promise share the row) */
[data-trust] { gap: 16px !important; }
[data-trust] > div { display: flex; }
[data-trust] > div > div { flex: 1 1 auto; box-sizing: border-box; padding: 18px 20px; border-radius: 14px; background: rgba(255, 255, 255, 0.55); border: 1px solid var(--hairline-light); }
/* #183: the Innovation card turns dark on hover like the two beside it (theirs come from the recorded states) */
[data-innov] [data-m="box"]:hover { transform: translateY(-8px) !important; box-shadow: rgba(20, 28, 36, 0.6) 0px 40px 70px -36px !important; } /* Pastel #340: the same lift and shadow as History and Turnaround */
[data-innov] [data-m="box"]:hover [data-innov-glow] { opacity: 1 !important; }
[data-innov] [data-m="box"]:hover [data-innov-ink] { color: rgb(255, 250, 242) !important; }
[data-innov] [data-m="box"]:hover [data-innov-chip] { color: rgb(255, 250, 242) !important; border-color: rgba(255, 250, 242, 0.3) !important; background: rgba(255, 250, 242, 0.06) !important; }
[data-innov] [data-m="box"]:hover [data-illus] { --ln: #FFFAF2 !important; --dim: rgba(255, 250, 242, 0.35) !important; } /* John's #469: the drawing on the card's dark hover. Pastel #485 (Sebastian, 2 November): !important, or the drawing's own inline --ln kept the lines ink on the dark card and only the green showed */

/* The Pastel round of 26 October (DR43). */
/* #209 (Michael): the stacked "Three things" cards sit on the content rail, not edge to edge */
[data-el="tabs"] > [data-panel] { width: calc(100% - 80px); max-width: 1280px; margin-left: auto; margin-right: auto; }
/* #211 (Michael): less room between a step's text and its illustration */
[data-el="process"] [data-step-art] { margin-top: clamp(4px, 1vh, 12px) !important; height: 176px !important; }
/* #219 (Sebastian): the longer home headline needs a little more line-height */
[data-el="heroCopy"] h1 { line-height: 0.95 !important; }
/* #221 (Sebastian): "Get to know us" lines up with the top of the story heading */
[data-m~="story-link"] { align-self: flex-start; padding-top: 18px !important; }
/* #255 (Sebastian): the Canada sheet rows turn green on hover, icon box filled */
[data-cdl]:hover, [data-cdl]:focus-visible { color: var(--sp-green) !important; }
[data-cdl]:hover > span:first-child, [data-cdl]:focus-visible > span:first-child { background: var(--sp-green) !important; color: #FFFFFF !important; }
/* #234, #250: the category list's phone toggle (responsive.css shows it below 768px) */
@media (min-width: 768px) { [data-oa-toggle] { display: none !important; } }
/* #190 (Michael, follow-up of 23 October): the appliance page's own photos get the cards' room around the
   appliance; their frame stays square. The grain behind them is already still (DR42). Same for a
   selection-guide row's photo. */
[data-gal-main] [data-gal-photo], [data-acc-photo] { inset: 11% !important; background-size: contain !important; background-repeat: no-repeat !important; }
[data-gal-thumb] > span:last-child { inset: 12% !important; background-size: contain !important; background-repeat: no-repeat !important; }
/* #202, #276: the Our Promise scroll cue nudges down */
@keyframes sp-cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { [data-op-cue] svg, [data-op-cue-wheel] { animation: none !important; } }

/* The testimonial rails (Home, Our Promise) carry quotes of different lengths since DR41 (23 October
   2026, the current site's four). The design's cards were twelve copies of one quote, so equal
   heights came free; the quote already grows (flex: 1) to set the name at the foot of the card. */
[data-el="tTrack"] > div > [data-tcard], [data-el="tTrack"] > div > [data-tcard] > figure,
[data-op-ttrack] > div > figure { height: 100%; }

/* The Pastel round of 27 October. */
@media (max-width: 767px) {
  /* #289 (Sebastian): on phones the hero video sits above the copy; it blends into the carbon below it, as
     the desktop's masks blend it into the copy column (responsive.css drops those masks on phones) */
  [data-m~="home-hero"] [data-m~="hero-par"] { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, #000 22%, #000 46%, transparent 100%) !important; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, #000 22%, #000 46%, transparent 100%) !important; }
  /* #290 (Sebastian): the stacked "Three things" cards run edge to edge on phones. #209's phone rule in
     responsive.css never applied (the rail rule above loads later), and the cards' 340px grid column was
     wider than the card, which cut the copy off at the right */
  [data-el="tabs"] > [data-panel] { width: 100%; }
  [data-el="tabs"] > [data-panel] > [data-m~="rail"] > div { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  /* #291 (Sebastian): each card's graphic is square, the graphic centred both ways */
  [data-el="tabs"] [data-m~="tab-card"] { aspect-ratio: 1 / 1 !important; max-width: none !important; }
  [data-el="tabs"] [data-panel="0"] [data-m~="tab-card"] > h3 + div { top: 50% !important; }
  [data-el="tabs"] :is([data-panel="1"], [data-panel="2"]) [data-m~="tab-card"] > h3 + div { top: 50% !important; transform: translateY(-50%) !important; }
  /* #292 (Sebastian): the testimonials heading sits left on phones, on the screen's gutter */
  [data-screen-label="Testimonials"] > [data-ul] { justify-content: flex-start !important; padding: 0px 25px !important; }
  [data-screen-label="Testimonials"] > [data-ul] h2 { text-align: left !important; }
}
/* #284: the search field draws its own clear button; Chrome's built-in one doubled it */
#support-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }

/* Pastel #309, #317 (John, 27 October): the appliance categories' row under a category's heading. It scrolls
   sideways, fading out at the right edge until it reaches the end (global.js otherAppliances() marks
   data-at-end); on phones it is the "Explore all appliances" toggle and a list (responsive.css [data-oa]). */
[data-subnav-row]::-webkit-scrollbar { display: none; }
[data-subnav-row] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent); }
[data-subnav-row][data-at-end] { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 767px) {
  [data-subnav] [data-subnav-row] { flex-direction: column; align-items: flex-start; overflow: visible !important; padding-right: 0px !important; -webkit-mask-image: none; mask-image: none; }
}

/* Pastel #327 (John, 27 October): the phone toggle for the category row uses the FAQ's icon, a plus in a
   tinted box that turns 45 degrees into a green × when open (responsive.css turns the old chevron 180). */
@media (max-width: 767px) {
  [data-subnav] [data-oa-toggle] { padding-right: 8px !important; }
  [data-subnav] [data-oa-toggle][aria-expanded="true"] svg { transform: rotate(45deg); }
  [data-subnav] [data-oa-toggle][aria-expanded="true"] [data-oa-icon] { background: var(--sp-green) !important; color: rgb(255, 255, 255) !important; }
}

/* Pastel #375 (Sebastian, 29 October): the site-wide mobile rules, and the comments that apply
   them page by page (#342 to #433). Phone only, except the back links and the strip icons, which
   read the same at every width.
   1. Image + text: the image above the text.  2. Buttons after the section's content.
   3. Primary buttons full width; a secondary follows the content's alignment.
   4. Section headings and their descriptions left-aligned.
   5. Cards and boxes 20px inside; larger CTA sections 30px top and bottom, 20px at the sides.
   Template hooks: data-m "m-reflow" (a column whose children may reorder), "m-contents" (a
   wrapper that lets its children join that column), "m-last" (goes to the end), "m-first". */
/* Back links (#382, #383, #395): the arrow on the left, pointing back */
.sp-textlink--back { flex-direction: row-reverse; }
.sp-textlink--back > svg { transform: scaleX(-1) !important; }
.sp-textlink--back:hover > svg, .sp-textlink--back:focus-visible > svg { transform: translateX(-3px) scaleX(-1) !important; }
/* CTA strips (#407, #412, #418): the icon green */
[data-m~="box"][data-m~="cta-row"] > div > span[aria-hidden="true"]:first-child { color: var(--sp-green) !important; }
@media (max-width: 767px) {
  [data-m~="m-reflow"] { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; }
  [data-m~="m-reflow"] > a, [data-m~="m-contents"] > a { align-self: flex-start; }
  [data-m~="m-contents"] > :not([style*="position: absolute"]) { position: relative; }
  [data-m~="m-gap"] { margin-top: 40px !important; }
  [data-m~="m-gap-sm"] { margin-top: 20px !important; }
  [data-m~="m-contents"] { display: contents !important; }
  [data-m~="m-last"] { order: 99 !important; }
  [data-m~="m-first"] { order: -1 !important; }
  /* 2, 3: a row holding text and a button (CTA strips, Login, My Account): the text first, the
     button after it at full width (#407, #412, #418, #430, #432, #433); a row of buttons alone
     keeps the primary on top */
  [data-m~="cta-row"]:is([data-m~="box"], :has(> span)) > a[data-m~="btn-primary"] { order: 0 !important; }
  [data-m~="cta-row"] > div:not(:has(a, button)) { align-self: stretch !important; }
  [data-m~="cta-row"]:not([data-m~="box"]) { align-self: stretch !important; width: 100%; }
  /* the strip's icon or photo sits at the top of its text (#370, #371, #407, #412, #418) */
  [data-m~="cta-row"] > div:not(:has(a, button)) { align-items: flex-start !important; }
  /* 3: every primary button is full width (#364, #369) */
  main .sp-btn-primary { display: flex !important; width: 100% !important; flex: 0 0 auto !important; box-sizing: border-box; }
  main :is(div, span):has(> .sp-btn-primary) { flex-wrap: wrap !important; }
  /* 4: section headings and their descriptions on the left (#342, #350, #365, #402, #410, #411, #413, #414, #427) */
  main section h2 { text-align: left !important; margin-left: 0 !important; }
  main section :is(div, header):has(> h2, > div > h2) { text-align: left !important; align-items: flex-start !important; }
  main section :is(div, header):has(> h2, > div > h2) > :is(p, div) { text-align: left !important; margin-left: 0 !important; }
  /* 5: a band whose inner wrapper repeated the section's own gutters and padding (#344, #346, #351,
     #400, #403, #422, #427) */
  section[data-m~="rail"] > div[style*="max-width: 1280px"] { padding: 0 !important; }
  /* 5: cards and boxes 20px inside (#359, #388); strips 20px all round; the larger boxes keep
     30px top and bottom */
  main :is(div, article, li, a, aside):is([style*="border-radius: 2"], [style*="border-radius: 16px"], [style*="border-radius: 12px"]):is([style*="padding: 3"], [style*="padding: 4"], [style*="padding: 5"], [style*="padding: 6"], [style*="padding: 7"], [style*="padding: 8"]):not([data-m~="cta-box"]) { padding: 20px !important; }
  main [style*="padding: 16px 40px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-m~="box"][data-m~="cta-row"] { padding: 20px !important; }
  /* A two-part heading flows as one line of text, not two stacked parts (#409, #413) */
  h2 > .sp-mbr { display: none; }
  /* Home: "Get to know us" centred under the centred cards (#343) */
  [data-m~="story-link"] { align-self: center !important; }
  /* A stacked image and text no longer need the desktop's 64 to 80px between them (#367) */
  main :is([style*="gap: 80px"], [style*="gap: 64px"]) { gap: 40px !important; }
  /* Get Started: no card title runs off the screen (#368) */
  #info span[style*="white-space: nowrap"] { white-space: normal !important; }
  /* Support: the featured card's three articles one under another (#378), its article count on
     the icon's line (#385); a link row's icon at the top of its text (#381); the category label
     above the question (#380) */
  #help [data-m~="box"] > div[style*="repeat(3, minmax(0px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; }
  #help [data-m~="box"] > span[style*="position: absolute"] { top: 25px !important; right: 20px !important; }
  .sp-supgrid a.sp-h-2e4692, .sp-supgrid a.sp-h-2e4692 > span { align-items: flex-start !important; }
  .sp-supgrid a.sp-h-2e4692 svg { margin-top: 3px; }
  .sp-suppop > span:last-child { display: contents !important; }
  .sp-suppop > span:last-child > span:last-child { order: -1; align-self: flex-start; }
  .sp-suppop > span:last-child > span:first-child { order: 1; }
  /* Education: the featured card's text 20px in (#388); "Read the Article" on its own line under the date (#387) */
  .sp-efeat > span:nth-child(2) { padding: 20px !important; }
  .sp-efeat > span:nth-child(2) > span:last-child { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  /* Get Started: each contact line's label over its value (#363) */
  [data-m~="m-last"] > ul > li[style*="grid-template-columns: 132px"] { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }
  /* About: more room between the people cards (#397); the promise callout's mark, heading and
     link on one left edge (#398); each certificate's icon above its text (#399); the timeline
     opens one year at a time (#396, global.js timeline()) */
  #people [style*="gap: 24px"] { gap: 44px !important; }
  a[data-m~="box"][data-m~="cta-row"] > span:not([aria-hidden]) { align-self: flex-start !important; }
  a[data-m~="box"][data-m~="cta-row"] > span:not([aria-hidden]):has(> svg) { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
  #certifications [style*="gap: 18px"][style*="align-items: flex-start"] { flex-direction: column !important; gap: 16px !important; }
  [data-tl-year][role="button"] { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
  [data-tl-year][role="button"]::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-right: 6px; border-right: 2px solid var(--sp-green); border-bottom: 2px solid var(--sp-green); transform: translateY(-3px) rotate(45deg); transition: transform 0.3s var(--ease-out); }
  [data-tl-year][aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  [data-tl] > div { padding-bottom: 20px; }
  /* Our Promise: the scroll cue's words centred under the mouse (#401); the four promise cards
     sized to their content, not squares (#405); Who Answers' photo below its text (#404) */
  [data-op-cue] { text-align: center; }
  [data-op-panel] { aspect-ratio: auto !important; padding: 24px 20px !important; justify-content: flex-start !important; }
  [data-op-panel] > span:nth-child(2) { margin-top: 20px !important; }
  [data-op-panel] > :is(h2, p) { margin-top: 12px !important; }
  [data-op-panel] > div[style*="margin-top: auto"] { padding-top: 20px !important; }
  [data-bento="f"] { display: flex !important; flex-direction: column !important; }
  [data-bento="f"] > img { position: relative !important; right: auto !important; order: 9; align-self: flex-end; height: 200px !important; max-width: 60% !important; margin: 16px 0 -20px; }
  [data-bento="f"] > div[style*="margin-top: auto"] { margin-top: 20px !important; }
  /* Canada: the globe closer to its heading (#415) */
  #account > div > div:first-child { margin-bottom: -16px; }
  /* Ordont: the opening paragraph and the logo row on the left (#416) */
  #what-happened [style*="text-align: center"] { text-align: left !important; align-items: flex-start !important; }
  #what-happened [style*="justify-content: center"] { justify-content: flex-start !important; }
  /* Content before the sidebar: support and education archives, posts (#384, #390 to #394) */
  .sp-mstack > aside { order: 2; }
  /* Nothing wider than the screen (#386, #389, #379) */
  main :is([style*="minmax(3"], [style*="minmax(4"]) { grid-template-columns: minmax(0, 1fr) !important; }
}

/* For Investors (Pastel #423 to #426, Sebastian, 29 October): each leader is a card with the name
   in green; the bio sits behind "Read Bio" (a native details toggle, so it is in the page either way) */
.sp-bio { margin-top: 4px; }
.sp-bio > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: var(--weight-semibold) 16px/1.2 var(--font-sans); color: var(--sp-ink); }
.sp-bio > summary::-webkit-details-marker { display: none; }
.sp-bio > summary svg { transition: transform var(--dur-hover) var(--ease-out); }
.sp-bio[open] > summary svg { transform: rotate(180deg); }
.sp-bio > summary:is(:hover, :focus-visible) { color: var(--green-text); }
/* Pastel #462 (Sebastian, 30 October): Read Bio opens the leader's card as a modal (global.js bioModals()) */
.sp-bio-open { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; font: var(--weight-semibold) 16px/1.5 var(--font-sans); color: var(--sp-ink); }
.sp-bio-open > svg { transition: transform var(--dur-hover) var(--ease-out); }
.sp-bio-open:is(:hover, :focus-visible) { color: var(--green-text); }
.sp-bio-open:is(:hover, :focus-visible) > svg { transform: translateX(3px); }
.sp-bio-modal { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid rgba(34, 44, 55, 0.1); border-radius: 20px; background: var(--sp-cream); color: var(--sp-ink); box-shadow: 0 30px 80px -20px rgba(10, 14, 20, 0.45); overflow: auto; }
.sp-bio-modal::backdrop { background: rgba(10, 14, 20, 0.55); backdrop-filter: blur(4px); }
.sp-bio-modal[open] { animation: sp-bio-in .35s var(--ease-out) both; }
@keyframes sp-bio-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.sp-bio-card { position: relative; padding: 32px 32px 32px; }
.sp-bio-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: rgba(34, 44, 55, 0.06); color: var(--sp-ink); cursor: pointer; }
.sp-bio-close:is(:hover, :focus-visible) { background: rgba(34, 44, 55, 0.12); }
@media (max-width: 767px) { .sp-bio-card { padding: 24px 20px; } }
@media (prefers-reduced-motion: reduce) { .sp-bio-modal[open] { animation: none; } }
/* Pastel #450 (Tom, 29 October): a leader with no bio keeps the Read Bio line's 28px (4px margin + 24px
   toggle), so closed cards in a row are one height; the grid stays align-items: start, so an opened bio
   still grows only its own card */
.sp-leader > div:last-child:not(:has(> .sp-bio))::after { content: ""; display: block; height: 28px; }
@media (max-width: 767px) { .sp-leader { padding: 20px !important; } }

/* Phone fixes, second pass (Pastel #377, #431) */
@media (max-width: 767px) {
  /* Product categories: the count under the folded list stays (the appliance page's rule hides
     what follows its list) */
  .sp-pcat-oa [data-oa-list] + div { display: block !important; }
  .sp-pcat-oa { gap: 16px !important; }
  /* The search dialog fits the screen: its panel was a fixed 640px inside a 343px window */
  [data-search] > div { max-width: calc(100vw - 32px) !important; }
  [data-search] > div > div[style*="width: 640px"] { width: 100% !important; padding: 20px 20px 8px !important; }
}

/* Pastel #361, #366 (John, 29 October): under the simple heading (internal-hero.php "simple") the
   sheet sits flush, with no overlap, shadow or rounded top, and its first section needs no top padding */
[data-simple-hero] + [data-el="cover"] { margin-top: -1px !important; padding-top: 0 !important; box-shadow: none !important; border-radius: 0 0 48px 48px !important; }
[data-simple-hero] + [data-el="cover"] > section:first-child { padding-top: 0 !important; }

/* Pastel #372 (John, 29 October): call-to-action boxes and buttons inside articles carried the old
   site's colours (royal blue, pill buttons in capitals) in the post content; here they take the
   site's own: the dark box with the green glow's colours, the eyebrow in green, the site's buttons */
.sp-prose .wp-block-group.has-background { background: var(--sp-ink) !important; border: 0 !important; border-radius: 20px !important; padding: 40px !important; color: rgb(255, 250, 242); }
.sp-prose .wp-block-group.has-background > .wp-block-group__inner-container > p.has-text-color:first-child { color: var(--sp-green) !important; font: 600 12px/1 var(--font-sans) !important; letter-spacing: 0.14em !important; text-transform: uppercase; }
.sp-prose .wp-block-group.has-background :is(h2, h3, h4) { color: rgb(255, 255, 255) !important; font: 500 clamp(24px, 2.3334vw, 28px)/1.15 var(--font-sans) !important; letter-spacing: -0.02em !important; }
.sp-prose .wp-block-group.has-background p.has-text-color:not(:first-child) { color: rgba(255, 250, 242, 0.86) !important; font: 400 18px/26px var(--font-sans) !important; }
.sp-prose .wp-block-buttons { gap: 16px 28px !important; align-items: center; }
.sp-prose .wp-block-button__link { display: inline-flex !important; align-items: center; justify-content: center; min-width: 0 !important; min-height: 52px !important; padding: 0 28px !important; border-radius: var(--radius-control) !important; font: var(--weight-semibold) 16px/1 var(--font-sans) !important; letter-spacing: 0 !important; text-transform: none !important; background-color: var(--sp-btn-fill) !important; color: #fff !important; border: 1px solid transparent !important; transition: background var(--dur-hover) var(--ease-out); }
.sp-prose .wp-block-button__link:is(:hover, :focus-visible) { background-color: var(--sp-btn-fill-hover) !important; }
.sp-prose .wp-block-button__link[style*="background-color:transparent"] { background-color: transparent !important; border-color: rgba(34, 44, 55, 0.24) !important; color: var(--sp-ink) !important; }
.sp-prose .wp-block-group.has-background .wp-block-button__link[style*="background-color:transparent"] { border-color: rgba(255, 250, 242, 0.4) !important; color: rgb(255, 255, 255) !important; }
.sp-prose .wp-block-button__link[style*="background-color:transparent"]:is(:hover, :focus-visible) { background-color: rgba(34, 188, 126, 0.12) !important; }
@media (max-width: 767px) {
  .sp-prose .wp-block-group.has-background { padding: 20px !important; }
  .sp-prose .wp-block-button, .sp-prose .wp-block-button__link { width: 100%; }
}

/* Pastel #376 (Sebastian, 29 October, "Specialty Home Hero Lab.html"): the design's responsive rules
   for the new Page CTA (three appliances) and Home hero; responsive.css is generated, so they live here */
@media (max-width: 1199px) {
  [data-m~="cta-copy"] { max-width: 48% !important; }
  [data-m~="cta-trio"] { right: 30px !important; width: min(400px, calc(100% - 30px)) !important; }
}
@media (max-width: 767px) {
  [data-m~="cta-copy"] { max-width: none !important; }
  [data-m~="cta-trio"] { right: 50% !important; transform: translate(50%, -50%) !important; width: min(320px, 100%) !important; }
}

/* Home hero, Pastel #376 ("Specialty Home Hero Lab.html"): the case card's ping and pop, and the
   design's rules for the photo and card below 1200px (stacked under the copy) and on phones (no card) */
@keyframes hz-ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes hz-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { [data-m~="hero-ui"] * { animation: none !important; } }
/* Pastel #454 (Sebastian, 30 October): the case card's number and status pill keep to one line at every
   width (the card is 272px; 248px wrapped "CASE 24-1203" and the pill), and the card is anchored from the
   hero's bottom, as the photo is, so it overlaps the appliance's top edge by the same amount at any screen
   height. Between 1200 and 1299px it sits 30px lower and nearer the edge, clear of the headline. */
[data-m~="hero-ui"] > div:first-child > span { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1299px) {
  [data-m~="hero-card-pos"] { bottom: 230px !important; right: 40px !important; }
}
@media (max-width: 1199px) {
  [data-m~="hero-photo"] { left: 50% !important; transform: translateX(-50%); width: min(520px, 100%) !important; height: 100% !important; }
  [data-m~="hero-ui"] { top: 0 !important; right: 30px !important; width: 240px !important; padding: 16px 16px 14px !important; }
  [data-m~="hero-card-pos"] { top: 36px !important; bottom: auto !important; right: 36px !important; }
  /* the card is 240px here: a smaller pill keeps the number and status on one line */
  [data-m~="hero-ui"] > div:first-child { gap: 8px !important; }
  [data-m~="hero-ui"] > div:first-child > span:last-child { font-size: 12px !important; padding: 0 8px !important; height: 22px !important; }
  [data-m~="home-hero"]:has([data-m~="hero-3d"]) { height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column; }
  [data-m~="home-hero"]:has([data-m~="hero-3d"]) [data-m~="hero-copy"] { order: 1; height: auto !important; padding-bottom: 0 !important; }
  [data-m~="hero-3d"] { position: relative !important; top: auto !important; bottom: auto !important; right: auto !important; left: auto !important; inset: auto !important; width: 100% !important; height: 420px; order: 2; margin-top: 40px; margin-bottom: 75px; }
}
@media (max-width: 767px) {
  /* Pastel #473 (John, 31 October): phones show the case card too (the design hid it), centred over the
     appliance's top edge as on a desktop, so the space above the appliance carries it instead of standing empty */
  [data-m~="hero-ui"] { width: 248px !important; padding: 14px 14px 12px !important; }
  [data-m~="hero-card-pos"] { top: 0 !important; bottom: auto !important; right: auto !important; left: 50% !important; transform: translateX(-50%) !important; }
  [data-m~="hero-3d"] { height: 400px !important; margin-top: 28px !important; margin-bottom: 40px !important; }
  [data-m~="hero-3d"] [data-m~="hero-photo"] { top: 96px !important; height: calc(100% - 96px) !important; }
}

/* Home, How a case moves (Pastel #376, "Specialty Home Hero Lab.html"): the five step drawings' loops,
   verbatim; on short screens the line under the heading goes and the drawing shrinks, as the design does */
@keyframes sp-draw{0%{stroke-dashoffset:420}55%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes sp-sweep{0%{transform:translateX(-70px)}55%{transform:translateX(70px)}100%{transform:translateX(70px)}}
@keyframes sp-check{0%,50%{opacity:0;transform:scale(.6)}62%{opacity:1;transform:scale(1.08)}70%,100%{opacity:1;transform:scale(1)}}
@keyframes sp-snapA{0%,10%{transform:translate(-10px,-8px)}35%,100%{transform:translate(0,0)}}
@keyframes sp-snapB{0%,15%{transform:translate(9px,10px)}40%,100%{transform:translate(0,0)}}
@keyframes sp-snapC{0%,20%{transform:translate(-8px,9px)}45%,100%{transform:translate(0,0)}}
@keyframes sp-glow{0%,40%{opacity:0}60%,85%{opacity:1}100%{opacity:0}}
@keyframes sp-plate{0%{transform:translateY(44px)}70%,85%{transform:translateY(0)}100%{transform:translateY(44px)}}
@keyframes sp-grow{0%{transform:scaleY(0)}70%,85%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes pr5-fade{0%{opacity:0}4%{opacity:1}92%{opacity:1}100%{opacity:0}}
@keyframes pr5-box{0%{transform:translateY(-18px);opacity:0}12%{transform:translateY(0) scaleY(.96);opacity:1}18%,100%{transform:translateY(0) scaleY(1);opacity:1}}
@keyframes pr5-tape{0%,20%{stroke-dashoffset:100}44%,100%{stroke-dashoffset:0}}
@keyframes pr5-label{0%,40%{opacity:0}52%,100%{opacity:1}}
@keyframes pr5-route{0%,50%{stroke-dashoffset:100}76%,100%{stroke-dashoffset:0}}
@keyframes pr5-pin{0%,76%{opacity:0;transform:translateY(-6px)}86%,100%{opacity:1;transform:translateY(0)}}
@keyframes pr4-fade{0%{opacity:0}6%{opacity:1}92%{opacity:1}100%{opacity:0}}
@keyframes pr4-smooth{0%,10%{stroke-dashoffset:100}68%,100%{stroke-dashoffset:0}}
@keyframes pr4-gleam{0%,10%{stroke-dashoffset:8;opacity:0}14%{opacity:.85}64%{opacity:.85}68%,100%{stroke-dashoffset:-92;opacity:0}}
@keyframes pr4-spark{0%,70%{opacity:0;transform:scale(.3)}76%{opacity:1;transform:scale(1.15)}82%{opacity:1;transform:scale(1)}90%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(.8)}}
@keyframes pr3-fill{0%{transform:scaleY(0);opacity:1}70%{transform:scaleY(1);opacity:1}88%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@keyframes pr3-head{0%{transform:translateY(0);opacity:0}5%{opacity:.9}70%{transform:translateY(-101px);opacity:.9}78%,100%{transform:translateY(-101px);opacity:0}}
@keyframes sp-shine{0%{transform:translateX(-90px)}60%,100%{transform:translateX(110px)}}
@keyframes sp-stamp{0%,55%{opacity:0;transform:scale(1.5)}68%{opacity:1;transform:scale(.95)}75%,100%{opacity:1;transform:scale(1)}}
@keyframes sp-lidL{0%,15%{transform:rotate(-70deg)}40%,100%{transform:rotate(0)}}
@keyframes sp-lidR{0%,15%{transform:rotate(70deg)}40%,100%{transform:rotate(0)}}
@keyframes sp-route{0%,40%{stroke-dashoffset:120}80%,100%{stroke-dashoffset:0}}
@keyframes sp-pin{0%,78%{opacity:0;transform:translateY(-6px)}88%,100%{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce) { [data-proc-ico] * { animation: none !important; } }
@media (max-height: 640px) {
  [data-m~="proc-intro"] { display: none !important; }
  [data-m~="proc-stage"] { height: 112px !important; }
  [data-el="process"] p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 767px) {
  /* How a case moves is one centred composition (drawing, steps, dots); rule 4 of #375 stops at it */
  main section [data-m~="proc-panel"] { align-items: center !important; }
  [data-el="process"] h2, [data-el="process"] [data-m~="proc-panel"] > * { text-align: center !important; }
}

/* About, the Our promise callout (Pastel #448; the design's prEnter / prLeave): pointing at the box turns
   its link green, nudges the arrow and draws the line under the link from the left */
[data-screen-label="Our promise callout"] a[data-m~="cta-row"]:is(:hover, :focus-visible) > span:last-child { color: #22BC7E !important; }
[data-screen-label="Our promise callout"] a[data-m~="cta-row"]:is(:hover, :focus-visible) > span:last-child > span:first-child { transform: translateX(3px) !important; }
[data-screen-label="Our promise callout"] a[data-m~="cta-row"]:is(:hover, :focus-visible) > span:last-child > span:last-child { transform: scaleX(1) !important; transform-origin: left center !important; }

/* About, Our people (Pastel #314): the cut-out portraits are framed from the top of the photo */
[data-team-photo] img { object-position: 50% 0%; }

/* About, the story timeline on a desktop (Pastel #200, #99; global.js timelineTrack()): one pinned row
   that scrolls sideways; every year is shown (the reveal does not wait for a year to scroll in) */
/* Pastel #446 (Sebastian, 29 October): the pinned row runs the full width of the screen, its first
   year on the content edge; the page cover clips sideways so a scrollbar's width never scrolls the page.
   #447: the heading over the years is centred above them and pinned with them. */
[data-el="cover"]:has([data-tl-wrap]) { overflow-x: clip; }
@media (min-width: 1024px) {
  [data-tl-wrap].is-h [data-tl-sticky] { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100vw; margin-left: calc(50% - 50vw); }
  [data-tl-wrap].is-h [data-tl-head] { align-self: stretch; margin: 0 0 64px !important; padding: 0 40px; text-align: center; }
  [data-tl-wrap].is-h [data-tl-track] { display: flex !important; gap: 56px !important; width: max-content; padding-inline: calc((100vw - min(100vw, 1280px)) / 2 + 40px); box-sizing: content-box; will-change: transform; }
  [data-tl-wrap].is-h [data-tl] { flex: 0 0 340px; width: 340px; opacity: 1 !important; transform: none !important; }
  [data-tl-wrap].is-h [data-tl-year] { font-size: clamp(40px, 4vw, 56px) !important; transition: color 0.35s var(--ease-out); }
  [data-tl-wrap].is-h [data-tl-text] { font-size: 18px !important; line-height: 26px !important; }
}

/* WCAG AA: a white label on the brand green is 2.3:1. Education's chips (the featured label, the card
   type pills, the selected filter) take the buttons' fill (#16875A, 4.6:1). Seen by check-a11y once the
   simple heading (Pastel #361) brought these cards into the first screen. */
:is(.sp-efeat, .sp-ecard) span[style*="background: var(--sp-green)"][style*="color: rgb(255, 255, 255)"],
[data-edu-filter][aria-selected="true"] { background: var(--sp-btn-fill) !important; }
/* ...and the pale type pills' green text (#16875A on #E3F4EA, 4.0:1 at 14px) is the deep green, 8.6:1 */
:is(.sp-efeat, .sp-ecard) span[style*="background: var(--sp-green-soft)"][style*="color: var(--green-text)"] { color: var(--sp-kelp) !important; }

/* Home on a phone (John's phone recording, 30 October): stacked one under another, the Innovation card
   need not match its row's height, so it ends under its chips instead of leaving a gap above them */
@media (max-width: 767px) {
  [data-innov] [data-m="box"] { min-height: 0 !important; }
  [data-innov-art] { min-height: 140px !important; margin-top: 24px !important; }
}

/* Visually hidden, still read by screen readers and in the heading outline (Support's "Help topics") */
.sp-vh { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

/* Phones (John's pins #479, #480, 31 October): the #375 rule sets section headings on the left, but where a
   heading sits two wrappers inside a centred stack, its eyebrow, intro and chip row stayed centred (Get
   Started's Pricing and Additional information); and a centred intro paragraph straight under its section
   (3D Printed's "What we print.") was out of the rule's reach. A sweep of the 30 guard pages found no others. */
@media (max-width: 767px) {
  :is([data-screen-label="Pricing"], [data-screen-label="Additional information"]) div[style*="text-align: center"] { text-align: left !important; align-items: flex-start !important; }
  [data-screen-label="Additional information"] [role="tablist"] { justify-content: flex-start !important; }
  main section > p[style*="text-align: center"] { text-align: left !important; margin-left: 0 !important; }
}

/* The Pastel round of 2 November (Sebastian's phone pass, #485 to #534). */
@media (max-width: 767px) {
  /* #486: Right fit's heading sits inside the dark card, bottom left, in cream (the card's own hidden h3,
     shown), and the copy column's copy of it gives way, so each card's copy is shorter and the three labels
     can stack one under another (home.js TOPS_M) with the whole of each card still on screen */
  [data-el="tabs"] [data-m~="tab-card"] > h3[hidden] { display: block !important; position: absolute !important; left: 20px; right: 20px; bottom: 20px; z-index: 2; padding: 0 !important; text-align: left !important; color: rgb(255, 250, 242); }
  [data-el="tabs"] [data-m~="tab-card"] + div > h3 { display: none !important; }
  [data-el="tabs"] [data-m~="tab-card"] + div > :is(h3 + p, h3 + p[hidden] + p) { margin-top: 0 !important; }
}
@media (max-width: 767px) {
  /* #488: the Page CTA's three appliances above its copy and buttons (rule 1, image before text) */
  [data-m~="cta-box"] { padding: 312px 20px 30px !important; }
  [data-m~="cta-float"] { top: 20px !important; bottom: auto !important; }
  /* #489: the hero's case card centred over the appliance. The tablet rule's right: 30px also moved this
     relatively positioned card 30px left on phones */
  [data-m~="hero-ui"] { right: auto !important; }
}
@media (max-width: 767px) {
  /* #491, #492: 3D Printed, OnBRACE. A reordering column (m-reflow) spaces its parts with their own margins
     (m-gap), but where its desktop gap was 80 or 64px the #375 gap rule above (gap: 40px) outranked its gap: 0
     and every part got both: 68 to 80px between heading, text, checklist and button */
  main [data-m~="m-reflow"] { gap: 0 !important; }
  /* #491: 3D Printed's opening photo above its text and button (rule 1) */
  [data-screen-label="What it is"] > div[style*="grid-template-columns"] > div:last-child:has(img, [role="img"]) { order: -1; }
  /* #493: the selection guide's list 40px under its heading, as a section's content is elsewhere */
  #compare > div[style*="margin-top: 64px"] { margin-top: 40px !important; }
}
@media (max-width: 767px) {
  /* #500, #502, #503, #507, #514, #516 (rule 2, site-wide): a section heading's row that also carries a "View
     All" link (Related appliances, Related products, Related articles, Keep reading, Support's featured
     category) opens up on phones, so the link joins the column below it and goes last, after the cards.
     Rows with their own data-m hooks (m-contents) already do this. */
  main :is(section, div):has(> div[style*="justify-content: space-between"]:not([data-m]) > a.sp-textlink):has(> div[style*="justify-content: space-between"]:not([data-m]) :is(h2, h3)) { display: flex !important; flex-direction: column !important; }
  main div[style*="justify-content: space-between"]:not([data-m]):has(> a.sp-textlink):has(:is(h2, h3)) { display: contents !important; }
  main div[style*="justify-content: space-between"]:not([data-m]):has(> a.sp-textlink):has(:is(h2, h3)) > a.sp-textlink { order: 99; align-self: flex-start; margin-top: 40px !important; }
  /* #504: Support's downloads one to a row */
  .sp-supdl { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 767px) {
  /* #518 (rule 1, and the site-wide sweep for it): About's story photo above its text */
  #story > div > div[style*="display: grid"] > div:last-child:has(img, [role="img"]) { order: -1; }
  /* #521: Our Promise's two-line scroll cue gets room between its lines */
  [data-op-cue] { line-height: 1.45 !important; }
  /* #522: the four promise cards had their flex gap (32px) on top of each part's margin. Now the icon, then
     20px, the eyebrow, 18px, the heading, 14px, the text (Home's cards' spacing) */
  [data-op-panel] { gap: 0 !important; }
  [data-op-panel] > :is(h2) { margin-top: 18px !important; }
  [data-op-panel] > :is(p) { margin-top: 14px !important; }
  /* #523, #524: a bento card's eyebrow keeps 16px above what follows (the heading or chips are pushed down by
     margin-top: auto, which on a phone's content-height card came to nothing) */
  [data-bento]:not([data-bento="f"]) > div:first-child { margin-bottom: 16px; }
  /* #525: Who Answers' photo centred, the person the card's full width (the cutout is 64% person, 36% clear
     either side, so the image box is 150% wide and centred; the card's overflow: hidden trims the clear sides) */
  [data-bento="f"] > img { align-self: center !important; width: 150% !important; max-width: none !important; height: auto !important; margin: 20px 0 -20px !important; }
  /* #526: Pause reviews centred under the rail */
  div:has(> [data-op-tbtn]) { justify-content: center !important; }
  /* #528, #533 (rule 3): a primary button is full width even when the wrapper around its row sits in a centred
     column (Our Promise's closing call to action, the empty cart), which shrank the wrapper to the button */
  main div:has(> [data-m~="cta-row"] > .sp-btn-primary), main div:has(> .sp-btn-primary) { align-self: stretch !important; }
}
@media (max-width: 767px) {
  /* #510: Education's featured card photo at the 4:3 of the cards below it (was 420px tall) */
  .sp-efeat > span:first-child { min-height: 0 !important; aspect-ratio: 4 / 3; }
  /* #511: Education's card text runs the card's full width (it stopped at 85%) */
  main span[style*="max-width: 85%"] { max-width: none !important; }
  /* #515: a post's photo or video sits as far under the title as the text sits under the photo */
  article > h1 ~ :is([data-edu-video], div[role="img"]) { margin-top: 28px !important; }
}
@media (max-width: 767px) {
  /* #529, #530, #531 (and the sweep of every page that followed): sections are 75px apart on phones. A coloured
     band kept its desktop margin under it (80, 120 or 140px); a plain section with top padding that follows one
     with bottom padding doubled up (Canada's Rx sheets, 150px); Home's story kept its desktop 150px top and
     Right fit its 40px; an appliance's Resources kept 75px of its own under the band's margin (#498) */
  main section:is([style*="margin: 0px 0px 80px"], [style*="margin: 0px 0px 120px"], [style*="margin: 0px 0px 140px"], [style*="margin: -48px 0px 140px"]) { margin-bottom: 75px !important; }
  main section[data-m~="pb"]:not([style*="background"]) + section[data-m~="pt"]:not([style*="background"]) { padding-top: 0 !important; }
  [data-m~="story"] { padding-top: 75px !important; }
  #fit { padding-top: 0 !important; }
  [data-screen-label="What every case needs"] + [data-screen-label="Resources"] { padding-top: 0 !important; }
  /* #495, #505: the simple heading (appliance and store products, Support and Education archives) sits a little
     closer to what follows: 56px under its line, not 75 */
  [data-simple-hero][data-m~="pb"] { padding-bottom: 56px !important; }
}
@media (max-width: 767px) {
  /* #506, #508: a support article's category and date stack under Back to Support, 20px below it, 10px apart */
  [data-screen-label="Article"] article > [data-m~="m-reflow"] > div:not([data-m]) { margin-top: 20px; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
}
@media (max-width: 767px) {
  /* #532: the search panel starts where the header's top edge is (20px), not 96px down: the header is hidden
     behind the open search, so its room above the panel read as a gap */
  [data-search] { padding-top: 20px !important; }
  [data-search] > div { max-height: calc(100vh - 40px) !important; }
}

/* Pastel #536 (John, 2 November): a row of buttons in post content (the Atlas courses' "View the course on
   Atlas") sits 32px under the text before it, and its label is not underlined like the article's links
   (.sp-prose a); every width */
.sp-prose * + .wp-block-buttons { margin-top: 32px !important; }
.sp-prose .wp-block-button__link, .sp-prose .wp-block-button__link:is(:hover, :focus-visible) { text-decoration: none !important; color: #fff !important; }
.sp-prose .wp-block-button__link[style*="background-color:transparent"], .sp-prose .wp-block-button__link[style*="background-color:transparent"]:is(:hover, :focus-visible) { color: var(--sp-ink) !important; }
.sp-prose .wp-block-group.has-background .wp-block-button__link[style*="background-color:transparent"] { color: rgb(255, 255, 255) !important; }