/*
Theme Name: SunAmpRV
Theme URI: https://sunamprv.com/
Description: The SunAmpRV design: RV solar guides organised by system component. Built for the posts SunAmpRV publishes, with topic and guide-type pages, a five-step sizing path and readable comparison tables on every screen size. Works with the SunAmpRV Site Tools plugin.
Version: 1.1.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
Author: SunAmpRV
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sunamprv
*/

/* Fonts: printed in <head> by functions.php (files in uploads/sunamprv-fonts). */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Colour names used by page-builder blocks and forms made with the previous theme (Spectra, SureForms) */
:root {
  --ast-global-color-0: #10273d; --ast-global-color-1: #183650; --ast-global-color-2: #18242f;
  --ast-global-color-3: #536170; --ast-global-color-4: #eff3f6; --ast-global-color-5: #ffffff;
  --ast-global-color-6: #e2e9ef; --ast-global-color-7: #c6d0d9; --ast-global-color-8: #8796a4;
}
body { margin: 0; background: #ffffff; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.sa {
  --cell: #10273d;
  --cell-2: #183650;
  --cell-line: #3b5a78;
  --sun: #f2b33d;
  --sun-soft: #fdf1d6;
  --day: #ffffff;
  --frame: #eff3f6;
  --frame-2: #e2e9ef;
  --wire: #c6d0d9;
  --wire-strong: #8796a4;
  --ink: #18242f;
  --slate: #536170;
  --link: #1c5a99;
  --on-dark: #e8eef3;
  --on-dark-muted: #a9b8c6;
  --font-ui: "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-read: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --gutter: 20px;
  --radius: 8px;
  --focus: var(--cell);

  container-type: inline-size;
  container-name: sa;
  background: var(--day);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:where(.sa) *, :where(.sa) *::before, :where(.sa) *::after { box-sizing: border-box; }
:where(.sa) img { max-width: 100%; height: auto; display: block; }
:where(.sa) a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(.sa) a:hover { color: var(--cell); }
:where(.sa) :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
/* Keyboard focus: navy on light surfaces, yellow on navy ones */
.sa-hero, .sa-section--cell, .sa-footer, .sa-mega__aside, .sa-hub__map { --focus: var(--sun); }
:where(.sa) :is(h1, h2, h3, h4) { font-family: var(--font-ui); color: var(--ink); margin: 0; letter-spacing: -0.012em; text-wrap: balance; }
:where(.sa) p { text-wrap: pretty; }
:where(.sa) p { margin: 0; }
:where(.sa) :is(ul, ol) { margin: 0; padding: 0; }
.sa-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.sa-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons ---------- */
.sa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: 6px; font-family: var(--font-ui); font-weight: 700; font-size: 17px; line-height: 1; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.sa-btn:active { transform: translateY(1px); }
.sa-btn--sun { background: var(--sun); color: var(--cell); }
.sa-btn--sun:hover { background: #f7c45f; color: var(--cell); }
.sa-btn--sun:active { background: #e9a730; }
.sa-btn--line-dark { border-color: #5c7a96; color: var(--on-dark); background: transparent; }
.sa-btn--line-dark:hover { border-color: var(--on-dark); color: #fff; background: rgba(255, 255, 255, .06); }
.sa-btn--line { border-color: var(--wire-strong); color: var(--ink); background: transparent; }
.sa-btn--line:hover { border-color: var(--cell); color: var(--cell); background: rgba(16, 39, 61, .04); }

/* ---------- Logo ---------- */
.sa-logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--ink); }
.sa-logo:hover { color: var(--ink); }
.sa-logo svg { width: 34px; height: 34px; flex: none; }
.sa-logo__word { font-weight: 900; font-size: 22px; letter-spacing: -0.02em; line-height: 1; padding-top: 3px; }
.sa-logo__plate { font-weight: 800; font-size: 13px; letter-spacing: 0.04em; line-height: 1; padding: 5px 6px 3px; border: 2px solid currentColor; border-radius: 4px; margin-left: 2px; }
.sa-logo--dark { color: #fff; }
.sa-logo--dark:hover { color: #fff; }

/* ---------- Header ---------- */
.sa-header { background: var(--day); border-bottom: 1px solid var(--wire); position: relative; z-index: 5; }
.sa-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.sa-nav { display: none; }
.sa-nav ul { list-style: none; display: flex; gap: 4px; }
.sa-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 12px; font-weight: 600; font-size: 16px; color: var(--ink); text-decoration: none; border-radius: 6px; }
.sa-nav a:hover { background: var(--frame); color: var(--ink); }
.sa-nav a[aria-current="page"], .sa-nav a.is-open, .sa-nav a[aria-expanded="true"] { background: var(--frame); box-shadow: inset 0 -3px 0 var(--sun); }
.sa-nav a[aria-expanded="true"] svg { transform: rotate(180deg); }
.sa-nav a.is-highlight { border: 2px solid var(--sun); }
.sa-nav svg { width: 12px; height: 12px; }
.sa-header__tools { display: flex; align-items: center; gap: 4px; }
.sa-iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 6px; border: 0; background: transparent; color: var(--ink); font-family: var(--font-ui); font-weight: 600; font-size: 16px; cursor: pointer; text-decoration: none; }
.sa-iconbtn:hover { background: var(--frame); color: var(--ink); }
.sa-iconbtn svg { width: 22px; height: 22px; }
.sa-iconbtn__text { display: none; }
.sa-menubtn { border: 2px solid var(--ink); }
.sa-menubtn .sa-iconbtn__text { display: inline; }
/* Narrow phones, and narrow desktop windows where a scrollbar takes 15 px of the width: a smaller logo and tighter
   spacing keep the whole bar on screen. Below 340 px the Menu and Close buttons keep only their icon, and the
   word stays available to screen readers. */
@container sa (max-width: 399.98px) {
  .sa-header__bar { gap: 10px; }
  :is(.sa-header, .sa-mmenu__top) .sa-logo { gap: 7px; }
  :is(.sa-header, .sa-mmenu__top) .sa-logo svg { width: 28px; height: 28px; }
  :is(.sa-header, .sa-mmenu__top) .sa-logo__word { font-size: 19px; }
  :is(.sa-header, .sa-mmenu__top) .sa-logo__plate { font-size: 11px; padding: 4px 5px 2px; }
  .sa-header__tools { gap: 2px; }
  :is(.sa-header__tools, .sa-mmenu__top) .sa-iconbtn { padding: 0 8px; gap: 6px; }
}
@container sa (max-width: 339.98px) {
  :is(.sa-header__tools, .sa-mmenu__top) .sa-menubtn { padding: 0; }
  .sa-menubtn .sa-iconbtn__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sa-search > svg { display: none; }
}
@container sa (max-width: 299.98px) {
  .sa-wrap { --gutter: 16px; }
  .sa-header__bar { gap: 8px; }
  .sa-header__tools { gap: 0; }
}

/* ---------- Mega menu (Topics) ---------- */
.sa-mega { background: var(--day); border-bottom: 1px solid var(--wire); box-shadow: 0 24px 40px -24px rgba(16, 39, 61, 0.35); }
.sa-mega__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 300px; gap: 0 32px; padding-top: 28px; padding-bottom: 32px; }
.sa-mega__topic { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; padding: 16px 0; border-top: 2px solid var(--frame-2); text-decoration: none; color: var(--ink); }
.sa-mega__topic:hover { color: var(--ink); }
.sa-mega__topic:hover .sa-mega__name { color: var(--link); }
.sa-mega__topic svg { grid-row: span 2; width: 40px; height: 40px; color: var(--cell); }
.sa-mega__name { font-weight: 800; font-size: 18px; }
.sa-mega__desc { font-size: 15px; color: var(--slate); line-height: 1.4; }
.sa-mega__aside { grid-column: 4; grid-row: 1 / span 2; background: var(--cell); color: var(--on-dark); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.sa-mega__aside h2 { color: #fff; font-size: 20px; }
.sa-mega__aside p { color: var(--on-dark-muted); font-size: 15px; }
.sa-mega__aside ol { list-style: none; display: grid; gap: 6px; counter-reset: step; }
.sa-mega__aside li { counter-increment: step; display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: baseline; font-size: 15px; }
.sa-mega__aside li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--sun); color: var(--sun); font-weight: 800; font-size: 12px; padding-top: 2px; }
.sa-mega__aside a { color: var(--on-dark); }

/* ---------- Mobile menu (open state) ---------- */
.sa-mmenu { background: var(--day); min-height: 100%; }
.sa-mmenu__top { display: flex; align-items: center; justify-content: space-between; height: 64px; border-bottom: 1px solid var(--wire); }
.sa-mmenu__body { padding-top: 20px; padding-bottom: 32px; display: grid; gap: 24px; }
.sa-search { display: flex; align-items: center; gap: 10px; border: 2px solid var(--wire-strong); border-radius: 8px; padding: 0 12px; min-height: 52px; }
.sa-search svg { width: 20px; height: 20px; color: var(--slate); flex: none; }
.sa-search input { border: 0; outline: 0; font: inherit; font-size: 17px; width: 100%; min-height: 48px; align-self: stretch; background: transparent; color: var(--ink); }
.sa-search:focus-within { border-color: var(--link); box-shadow: 0 0 0 3px rgba(28, 90, 153, .25); }
.sa-search label { font-weight: 600; }
.sa-mmenu__label { font-weight: 800; font-size: 15px; color: var(--slate); margin-bottom: 10px; }
.sa-mmenu__topics { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sa-mmenu__topics a { display: grid; gap: 6px; min-height: 92px; padding: 14px; border: 1px solid var(--wire); border-radius: 8px; text-decoration: none; color: var(--ink); background: var(--day); }
.sa-mmenu__topics svg { width: 30px; height: 30px; color: var(--cell); }
.sa-mmenu__topics strong { font-weight: 800; font-size: 16px; line-height: 1.2; }
.sa-mmenu__topics span { font-size: 14px; color: var(--slate); }
.sa-mmenu__links { list-style: none; border-top: 1px solid var(--wire); }
.sa-mmenu__links a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--wire); font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; }
.sa-mmenu__links svg { width: 18px; height: 18px; color: var(--slate); }

/* ---------- Home: hero ---------- */
.sa-hero { background: var(--cell); color: var(--on-dark); overflow: hidden; }
.sa-hero__grid { display: grid; gap: 28px; padding-top: 32px; padding-bottom: 40px; }
.sa-hero h1 { color: #fff; font-weight: 800; font-size: 32px; line-height: 1.08; letter-spacing: -0.02em; }
.sa-hero__lead { font-family: var(--font-read); font-size: 18px; line-height: 1.55; color: var(--on-dark); max-width: 34em; margin-top: 18px; }
.sa-hero__more { display: none; }
.sa-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.sa-hero__actions .sa-btn { flex: 1 1 auto; padding-left: 16px; padding-right: 16px; }
.sa-hero__note { margin-top: 16px; font-size: 14px; color: var(--on-dark-muted); }

/* System diagram (tablet and desktop) */
.sa-diagram { display: none; }
.sa-diagram > svg { width: 100%; height: auto; display: block; overflow: visible; }
.sa-diagram .wire { stroke: #5b7997; stroke-width: 2; fill: none; }
.sa-diagram .current { stroke: var(--sun); stroke-width: 2.5; fill: none; stroke-dasharray: 5 13; stroke-linecap: round; opacity: .95; animation: sa-current 4s linear infinite; animation-play-state: paused; }
.sa-diagram.is-live .current { animation-play-state: running; }
.sa-diagram .frame { stroke: #4c6a87; stroke-width: 1.5; stroke-dasharray: 6 6; fill: none; }
.sa-diagram .node rect { fill: var(--cell-2); stroke: #3d5d7b; stroke-width: 1.5; transition: stroke .15s; }
.sa-diagram a:hover .node rect, .sa-diagram a:focus .node rect { stroke: var(--sun); }
.sa-diagram a:focus-visible { outline: none; }
.sa-diagram a:focus-visible .node rect { stroke: var(--sun); stroke-width: 3; }
.sa-diagram .node-name { fill: #fff; font-family: var(--font-ui); font-weight: 800; font-size: 16px; }
.sa-diagram .node-count { fill: var(--on-dark-muted); font-family: var(--font-ui); font-weight: 600; font-size: 13px; }
.sa-diagram .node-icon { color: var(--sun); }
.sa-diagram .label-muted { fill: var(--on-dark-muted); font-family: var(--font-ui); font-weight: 600; font-size: 13px; }
.sa-diagram .frame-label { fill: #fff; font-family: var(--font-ui); font-weight: 800; font-size: 14px; }
@keyframes sa-current { to { stroke-dashoffset: -36; } }
@media (prefers-reduced-motion: reduce) { .sa-diagram .current { animation: none; } }

/* System map: the diagram for phones, and "you are here" on topic pages */
.sa-map { --map-wire: #5b7997; --gx: 22px; --gy: 24px; display: grid; grid-template-columns: minmax(0, 1fr) var(--gx) minmax(0, 1fr); grid-template-rows: auto 16px auto var(--gy) auto var(--gy) auto; grid-template-areas: "sun plan plan" "w1 . ." "panels w2 controllers" ". . w3" "wiring w4 batteries" ". . w5" "loads w6 inverters"; padding: 10px 12px 14px; border: 1.5px dashed #4c6a87; border-radius: 16px; color: var(--on-dark); }
.sa-map__sun { grid-area: sun; justify-self: center; width: 40px; height: 40px; }
.sa-map__sun svg { display: block; width: 100%; height: 100%; }
.sa-map__plan { grid-area: plan; justify-self: end; align-self: center; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0 8px; min-height: 44px; padding: 10px 6px; border-radius: 8px; color: #fff; text-decoration: none; }
.sa-map__plan .sa-map__name { font-size: 14px; }
.sa-map__plan:hover { color: #fff; text-decoration: underline; }
.sa-map__node { display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 10px; min-height: 64px; padding: 10px 10px 10px 12px; background: var(--cell-2); border: 1.5px solid #3d5d7b; border-radius: 10px; color: #fff; text-decoration: none; transition: border-color .15s; }
.sa-map__node svg { grid-row: 1 / span 2; align-self: center; width: 26px; height: 26px; color: var(--sun); }
.sa-map__node:hover { border-color: var(--sun); color: #fff; }
.sa-map__name { font-weight: 800; font-size: 15px; line-height: 1.15; }
.sa-map__count { font-weight: 600; font-size: 12.5px; line-height: 1.3; color: var(--on-dark-muted); margin-top: 3px; }
.sa-map__node--panels { grid-area: panels; }
.sa-map__node--controllers { grid-area: controllers; }
.sa-map__node--wiring { grid-area: wiring; }
.sa-map__node--batteries { grid-area: batteries; }
.sa-map__node--inverters { grid-area: inverters; }
.sa-map__node.is-empty { visibility: hidden; }
.sa-map__loads { grid-area: loads; display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: right; color: var(--on-dark-muted); }
.sa-map__loads svg { flex: none; width: 34px; height: 30px; color: #a9b8c6; }
.sa-map__wire { position: relative; overflow: hidden; }
.sa-map__wire--w1 { grid-area: w1; }
.sa-map__wire--w2 { grid-area: w2; }
.sa-map__wire--w3 { grid-area: w3; }
.sa-map__wire--w4 { grid-area: w4; }
.sa-map__wire--w5 { grid-area: w5; }
.sa-map__wire--w6 { grid-area: w6; }
.sa-map__wire::before, .sa-map__wire::after { content: ""; position: absolute; }
.sa-map__wire--right::before, .sa-map__wire--left::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--map-wire); }
.sa-map__wire--down::before { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--map-wire); }
.sa-map__wire--right::after, .sa-map__wire--left::after { left: -18px; right: -18px; top: 50%; height: 3px; margin-top: -1.5px; background: repeating-linear-gradient(90deg, var(--sun) 0 6px, transparent 6px 18px); }
.sa-map__wire--down::after { top: -18px; bottom: -18px; left: 50%; width: 3px; margin-left: -1.5px; background: repeating-linear-gradient(180deg, var(--sun) 0 6px, transparent 6px 18px); }
.sa-map.is-live .sa-map__wire--right::after { animation: sa-flow-right 2s linear infinite; }
.sa-map.is-live .sa-map__wire--left::after { animation: sa-flow-left 2s linear infinite; }
.sa-map.is-live .sa-map__wire--down::after { animation: sa-flow-down 2s linear infinite; }
@keyframes sa-flow-right { from { transform: translateX(-18px); } to { transform: translateX(0); } }
@keyframes sa-flow-left { from { transform: translateX(0); } to { transform: translateX(-18px); } }
@keyframes sa-flow-down { from { transform: translateY(-18px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .sa-map .sa-map__wire::after { animation: none !important; } }
/* The topic being shown */
.sa-map__node[aria-current="page"] { background: var(--sun); border-color: var(--sun); color: var(--cell); }
.sa-map__node[aria-current="page"] svg { color: var(--cell); }
.sa-map__node[aria-current="page"] .sa-map__count { color: #5a4310; }
.sa-map__plan[aria-current="page"] { background: var(--sun); color: var(--cell); padding-left: 12px; padding-right: 12px; }
.sa-map__plan[aria-current="page"] .sa-map__count { color: #5a4310; }
.sa-hero .sa-map { margin-top: 4px; }
.sa-hero__system .sa-map + .sa-hero__note { display: none; }

/* ---------- Home: sections ---------- */
.sa-section { padding-top: 56px; padding-bottom: 56px; }
.sa-section--frame { background: var(--frame); }
.sa-section--cell { background: var(--cell); color: var(--on-dark); --focus: var(--sun); }
.sa-section__head { display: grid; gap: 10px; margin-bottom: 28px; max-width: 46em; }
.sa-section__head h2 { font-weight: 800; font-size: 28px; line-height: 1.12; }
.sa-section__head p { font-family: var(--font-read); font-size: 18px; color: var(--slate); line-height: 1.5; }
.sa-section--cell .sa-section__head h2 { color: #fff; }
.sa-section--cell .sa-section__head p { color: var(--on-dark-muted); }
.sa-section__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 32px; margin-bottom: 28px; }
.sa-section__top .sa-section__head { margin-bottom: 0; }
.sa-more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 16px; color: var(--link); text-decoration: underline; text-decoration-color: rgba(28, 90, 153, .35); }
.sa-more:hover { color: var(--cell); text-decoration-color: currentColor; }
.sa-section--cell .sa-more { color: #fff; text-decoration-color: rgba(255, 255, 255, .4); }
.sa-section--cell .sa-more:hover { color: #fff; text-decoration-color: var(--sun); }

/* Five steps: a worksheet. Each step works out a number the next one uses. */
.sa-route__grid { display: grid; gap: 28px; }
.sa-route__intro h2 { font-weight: 800; font-size: 28px; line-height: 1.12; }
.sa-route__intro p { font-family: var(--font-read); font-size: 18px; line-height: 1.5; color: var(--slate); margin-top: 10px; max-width: 30em; }
.sa-route__intro .sa-btn { margin-top: 22px; }
.sa-route__intro { display: flex; flex-direction: column; align-items: flex-start; }
.sa-route__photo { order: -1; width: 100%; max-width: 560px; margin: 0 0 28px; }
.sa-route__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--frame); }
.sa-path { list-style: none; display: grid; }
.sa-path__step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "num title" ". result" ". link"; column-gap: 16px; padding-bottom: 22px; }
.sa-path__step:last-child { padding-bottom: 0; }
.sa-path__step::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--wire); }
.sa-path__step:last-child::before { display: none; }
.sa-path__num { grid-area: num; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--cell); background: var(--day); color: var(--cell); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 17px; padding-top: 3px; position: relative; z-index: 1; transition: background-color .15s, border-color .15s; }
.sa-path__step:first-child .sa-path__num { background: var(--sun); border-color: var(--sun); }
.sa-path__title { grid-area: title; font-weight: 800; font-size: 19px; line-height: 1.25; padding-top: 8px; }
.sa-path__text { grid-area: text; display: none; font-family: var(--font-read); font-size: 16.5px; line-height: 1.5; color: var(--slate); margin-top: 6px; max-width: 34em; }
.sa-path__result { grid-area: result; justify-self: start; display: inline-flex; align-items: baseline; gap: 8px; margin-top: 10px; padding: 6px 10px 5px; border-radius: 6px; background: var(--cell); color: var(--sun); font-weight: 800; font-size: 14.5px; line-height: 1.2; white-space: nowrap; }
.sa-path__result span { color: var(--on-dark-muted); font-weight: 600; font-size: 12.5px; }
.sa-path__link { grid-area: link; justify-self: start; margin-top: 6px; padding: 4px 0; font-weight: 700; font-size: 15.5px; line-height: 1.35; color: var(--link); text-decoration: none; }
.sa-path__link::after { content: ""; position: absolute; inset: -6px -10px 8px -10px; border-radius: 12px; }
.sa-path__step:last-child .sa-path__link::after { bottom: -6px; }
.sa-path__link:focus-visible { outline: none; }
.sa-path__link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 0; }
.sa-path__step.has-link:hover .sa-path__link { text-decoration: underline; }
.sa-path__step.has-link:is(:hover, :focus-within) .sa-path__num { background: var(--sun); border-color: var(--sun); }
/* One yellow number at a time: step 1 marks where to start, and the yellow moves to the step you point at or tab to */
.sa-path__num { transition: background-color .15s, border-color .15s; }
.sa-path:has(.sa-path__step.has-link:is(:hover, :focus-within)) .sa-path__step:first-child:not(:hover, :focus-within) .sa-path__num { background: var(--day); border-color: var(--cell); }

/* Guides by component: a drawing of each part, then its key guides */
.sa-parts { list-style: none; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 12px; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
.sa-part { flex: 0 0 min(80%, 300px); scroll-snap-align: start; display: flex; flex-direction: column; }
.sa-part__figure { display: block; padding: 10px 14px 6px; background: var(--day); border: 1px solid var(--frame-2); border-radius: 12px; transition: border-color .15s; }
.sa-part__figure svg { display: block; width: 100%; height: auto; }
.sa-part__figure:hover { border-color: var(--wire-strong); }
.sa-part__name { margin-top: 16px; font-weight: 800; font-size: 21px; line-height: 1.2; }
.sa-part__name a { color: var(--ink); text-decoration: none; }
.sa-part__name a:hover { color: var(--link); text-decoration: underline; }
.sa-part__count { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--slate); }
.sa-part__short { margin-top: 8px; font-family: var(--font-read); font-size: 16px; line-height: 1.45; color: var(--slate); }
.sa-part__guides { list-style: none; margin-top: 12px; border-top: 1px solid var(--wire); }
.sa-part__guides li { border-bottom: 1px solid var(--wire); }
.sa-part__guides a { display: block; padding: 10px 0; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--link); text-decoration: none; }
.sa-part__guides a:hover { color: var(--cell); text-decoration: underline; }

/* New guides */
.sa-latest { display: grid; gap: 24px; }
.sa-feature { display: grid; gap: 16px; text-decoration: none; color: var(--ink); }
.sa-feature:hover { color: var(--ink); }
.sa-feature:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; }
.sa-feature img, .sa-feature .sa-thumb-ph { border-radius: 12px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; background: var(--frame); }
.sa-feature__text { display: grid; gap: 8px; }
.sa-feature h3 { font-weight: 800; font-size: 24px; line-height: 1.15; }
.sa-feature p { font-family: var(--font-read); font-size: 17px; color: var(--slate); line-height: 1.5; }
.sa-type { font-weight: 700; font-size: 14px; color: var(--cell); display: inline-flex; align-items: center; gap: 8px; }
.sa-type::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--cell); }
.sa-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: var(--slate); }
.sa-list { list-style: none; display: grid; gap: 0; }
.sa-list li + li { border-top: 1px solid var(--wire); }
.sa-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 0; text-decoration: none; color: var(--ink); }
.sa-item:hover { color: var(--ink); }
.sa-item:hover h3 { text-decoration: underline; }
.sa-item img { border-radius: 8px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; background: var(--frame); }
.sa-item__text { display: grid; gap: 4px; justify-items: start; }
.sa-item h3 { font-weight: 800; font-size: 17px; line-height: 1.25; }
.sa-item .sa-meta { margin-top: 2px; font-size: 13.5px; }

/* Buying guides: nameplates. Every plate has the same parts in the same place, so guides compare at a glance. */
.sa-plates { list-style: none; display: grid; gap: 16px; }
.sa-plates > li { display: grid; }
.sa-plate { display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; padding: 18px 18px 16px; border: 1px solid #2b4a68; border-radius: 12px; background: var(--cell-2); color: var(--on-dark); text-decoration: none; transition: border-color .15s; }
.sa-plate:hover { border-color: var(--sun); color: var(--on-dark); }
.sa-plate:hover .sa-plate__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sa-plate__topic { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 14px; font-weight: 700; color: var(--on-dark-muted); }
.sa-plate__topic svg { width: 24px; height: 24px; flex: none; color: var(--sun); }
.sa-plate__title { margin-top: 10px; font-weight: 800; font-size: 19px; line-height: 1.22; color: #fff; }
.sa-plate__label { align-self: start; display: grid; margin-top: 16px; border-radius: 8px; overflow: hidden; background: #fff; color: var(--ink); }
.sa-plate__band { padding: 5px 12px 4px; background: var(--sun); color: var(--cell); font-weight: 800; font-size: 13px; line-height: 1.3; }
.sa-plate__product { padding: 10px 12px 0; font-weight: 800; font-size: 17px; line-height: 1.25; }
.sa-plate__for { margin: 4px 12px 12px; font-family: var(--font-read); font-size: 15px; line-height: 1.4; color: var(--slate); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sa-plate__band + .sa-plate__for { margin-top: 10px; }
.sa-plate__foot { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--on-dark-muted); }
/* On light pages */
.sa-plates--light .sa-plate { background: var(--day); border-color: var(--wire); color: var(--ink); }
.sa-plates--light .sa-plate:hover { border-color: var(--cell); color: var(--ink); }
.sa-plates--light .sa-plate__topic { color: var(--slate); }
.sa-plates--light .sa-plate__topic svg { color: var(--cell); }
.sa-plates--light .sa-plate__title { color: var(--ink); }
.sa-plates--light .sa-plate__label { background: var(--frame); }
.sa-plates--light .sa-plate__foot { color: var(--slate); }
.sa-plates--same-topic .sa-plate { grid-template-rows: auto 1fr auto; }
.sa-plates--same-topic .sa-plate__title { margin-top: 0; }
/* Home: one swipeable row on phones */
.sa-shelf { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 14px; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: #3d5d7b transparent; }
.sa-shelf > li { flex: 0 0 min(82%, 300px); scroll-snap-align: start; }

/* How guides are made */
.sa-trust__grid { display: grid; gap: 26px; }
.sa-trust h2 { font-weight: 800; font-size: 24px; line-height: 1.15; }
.sa-method { list-style: none; display: grid; gap: 22px; }
.sa-method__item { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-content: start; gap: 4px 14px; }
.sa-method__item svg { width: 36px; height: 36px; color: var(--cell); grid-row: span 2; }
.sa-method__item h3 { font-weight: 800; font-size: 18px; line-height: 1.25; padding-top: 5px; }
.sa-method__item p { font-family: var(--font-read); font-size: 16.5px; color: var(--slate); line-height: 1.5; }
.sa-method__foot { padding-top: 20px; border-top: 1px solid var(--wire); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; font-size: 16px; }

/* ---------- Footer ---------- */
.sa-footer { background: var(--cell); color: var(--on-dark); padding-top: 44px; padding-bottom: 28px; }
.sa-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.sa-footer__grid > div:last-child { grid-column: 1 / -1; }
.sa-footer__brand { grid-column: 1 / -1; }
.sa-footer__brand p { font-family: var(--font-read); color: var(--on-dark-muted); font-size: 16px; margin-top: 14px; max-width: 30em; line-height: 1.5; }
.sa-footer h2 { color: #fff; font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.sa-footer ul { list-style: none; display: grid; gap: 2px; }
.sa-footer a { color: var(--on-dark); text-decoration: none; font-size: 15.5px; display: inline-block; padding: 6px 0; }
.sa-footer .sa-logo { display: inline-flex; padding: 0; font-size: inherit; color: #fff; }
.sa-footer .sa-logo:hover { text-decoration: none; }
.sa-footer a:hover { color: #fff; text-decoration: underline; }
.sa-footer__bottom { margin-top: 32px; padding-top: 18px; border-top: 1px solid #2b4a68; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; justify-content: space-between; font-size: 14px; color: var(--on-dark-muted); }
.sa-footer__bottom a { font-size: 14px; color: var(--on-dark-muted); padding: 10px 0; text-decoration: underline; }

/* ---------- Breadcrumb ---------- */
.sa-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14.5px; color: var(--slate); }
.sa-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--wire-strong); }
.sa-crumbs a { color: var(--slate); }

/* ---------- Article ---------- */
.sa-article__head { padding-top: 24px; padding-bottom: 24px; }
.sa-article__head .sa-type { margin-top: 18px; }
.sa-article h1 { font-weight: 800; font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; margin-top: 10px; max-width: 22ch; }
.sa-article__meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px; font-size: 15px; color: var(--slate); }
.sa-article__meta b { color: var(--ink); font-weight: 700; }
.sa-article__meta a { display: inline-block; padding: 10px 0; margin: -10px 0; }
.sa-article__layout { display: grid; gap: 0; padding-bottom: 56px; }
.sa-toc { display: none; }
.sa-toc-mobile { margin: 20px 0 24px; border: 1px solid var(--wire); border-radius: 8px; background: var(--day); font-family: var(--font-ui); }
.sa-toc-mobile summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; font-weight: 800; font-size: 16px; }
.sa-toc-mobile summary::-webkit-details-marker { display: none; }
.sa-toc-mobile summary svg { width: 18px; height: 18px; }
.sa-toc-mobile ol { list-style: none; padding: 0 16px 14px; display: grid; gap: 2px; counter-reset: none; }
.sa-toc-mobile a { display: block; padding: 8px 0; font-size: 15.5px; font-weight: 600; text-decoration: none; color: var(--ink); border-top: 1px solid var(--frame-2); }
.sa-toc ol { list-style: none; display: grid; gap: 0; border-left: 2px solid var(--wire); }
.sa-toc a { display: block; padding: 10px 0 10px 16px; margin-left: -2px; border-left: 2px solid transparent; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--slate); text-decoration: none; }
.sa-toc a:hover { color: var(--ink); }
.sa-toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--sun); font-weight: 800; }
.sa-toc__label { font-weight: 800; font-size: 15px; margin-bottom: 10px; }
.sa-toc__aside { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--wire); font-size: 14.5px; color: var(--slate); line-height: 1.45; display: grid; gap: 4px; justify-items: start; }
.sa-toc .sa-toc__aside a { padding: 11px 0; margin: 0; border: 0; color: var(--link); font-weight: 700; font-size: 15px; }

/* Article body: styles BlogBot's semantic HTML (no per-post work) */
.sa-content { min-width: 0; max-width: 680px; font-family: var(--font-read); font-size: 17.5px; line-height: 1.62; color: var(--ink); }
.sa-content > * + * { margin-top: 1.05em; }
.sa-content p { margin: 0; }
.sa-content p + p, .sa-content :is(ul, ol, div, table, figure, blockquote, pre, section, details) + p { margin-top: 1.05em; }
.sa-content a { color: var(--link); }
.sa-content strong { font-weight: 600; }
.sa-content h2 { font-family: var(--font-ui); font-weight: 800; font-size: 25px; line-height: 1.18; margin-top: 2.1em; scroll-margin-top: 80px; }
.sa-content h3 { font-family: var(--font-ui); font-weight: 800; font-size: 20.5px; line-height: 1.25; margin-top: 1.9em; scroll-margin-top: 80px; }
.sa-content h2 + *, .sa-content h3 + * { margin-top: 0.6em; }
.sa-content ul, .sa-content ol { padding-left: 1.25em; }
.sa-content li + li { margin-top: 0.45em; }
.sa-content figure { margin: 1.8em 0; }
.sa-content figure img { border-radius: var(--radius); width: 100%; background: var(--frame); }
.sa-content figcaption { font-family: var(--font-ui); font-size: 14.5px; line-height: 1.45; color: var(--slate); margin-top: 10px; }
.sa-content figure.hero { margin-top: 0; }
.sa-content nav.sun-in-this { display: none; }

/* TL;DR panel */
.sa-content .sun-tldr, .sa-content .tldr { background: var(--frame); border-radius: var(--radius); padding: 20px 18px 18px; margin-top: 1.6em; }
.sa-content .sun-tldr h2, .sa-content .tldr h2 { font-size: 17px; margin-top: 0; color: var(--cell); }
.sa-content .tldr-list { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 0; }
.sa-content .tldr-card { margin: 0; padding: 11px 0; border-top: 1px solid var(--wire); font-size: 16.5px; line-height: 1.45; }
.sa-content .tldr-card + .tldr-card { margin-top: 0; }
.sa-content .tldr-card strong { display: block; font-family: var(--font-ui); font-weight: 800; font-size: 14.5px; color: var(--cell); margin-bottom: 2px; }

/* Product picks: separate each product with a wire, lift the "Best for" line */
.sa-content .sa-sec--picks h3 { border-top: 2px solid var(--wire); padding-top: 22px; }
.sa-content .sa-sec--picks h3 + p > strong:first-child { display: block; font-family: var(--font-ui); font-weight: 700; font-size: 16.5px; line-height: 1.4; color: var(--cell); margin-bottom: 6px; }

/* Comparison tables: scroll box on tablet, cards on phones, wide sticky-column table on desktop */
.sa-content .sa-tablewrap { margin: 1.6em 0 0; }
.sa-content .sa-tablewrap__hint { display: none; font-family: var(--font-ui); font-size: 13.5px; color: var(--slate); margin-bottom: 8px; }
.sa-content table { border-collapse: separate; border-spacing: 0; width: 100%; font-family: var(--font-ui); font-size: 15px; line-height: 1.4; }
.sa-content th { background: var(--cell); color: #fff; font-weight: 700; font-size: 14px; text-align: left; vertical-align: bottom; padding: 12px 14px; }
.sa-content td { padding: 12px 14px; vertical-align: top; border-bottom: 1px solid var(--wire); }
.sa-content td:first-child { font-weight: 800; color: var(--ink); }
.sa-content table a[rel~="sponsored"] { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 2px solid var(--cell); border-radius: 6px; font-weight: 700; color: var(--cell); text-decoration: none; white-space: nowrap; }
.sa-content table a[rel~="sponsored"]:hover { background: var(--cell); color: #fff; }
.sa-content p.affiliate-disclosure { position: relative; margin-top: 14px; padding: 12px 16px 12px 44px; background: var(--frame); border-left: 4px solid var(--cell); border-radius: 0 6px 6px 0; font-family: var(--font-ui); font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.sa-content p.affiliate-disclosure::before { content: ""; position: absolute; left: 15px; top: 13px; width: 19px; height: 19px; background: var(--cell); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round'%3E%3Ccircle cx='24' cy='24' r='19'/%3E%3Cpath d='M24 22v12M24 15v.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round'%3E%3Ccircle cx='24' cy='24' r='19'/%3E%3Cpath d='M24 22v12M24 15v.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Phone: each row becomes a card */
.sa-content .sa-tablewrap table, .sa-content .sa-tablewrap tbody, .sa-content .sa-tablewrap tr, .sa-content .sa-tablewrap td { display: block; width: 100%; }
.sa-content .sa-tablewrap thead { display: none; }
.sa-content .sa-tablewrap tbody { display: grid; gap: 14px; }
.sa-content .sa-tablewrap tr { border: 1px solid var(--wire); border-radius: var(--radius); overflow: hidden; background: var(--day); }
.sa-content .sa-tablewrap td { border-bottom: 1px solid var(--frame-2); padding: 10px 16px; font-size: 15.5px; }
.sa-content .sa-tablewrap td::before { content: attr(data-label); display: block; font-weight: 700; font-size: 13px; color: var(--slate); margin-bottom: 2px; }
.sa-content .sa-tablewrap td:first-child { background: var(--cell); color: #fff; font-size: 18px; padding: 14px 16px; border-bottom: 0; }
.sa-content .sa-tablewrap td:first-child::before { display: none; }
.sa-content .sa-tablewrap td:last-child { border-bottom: 0; }
.sa-content .sa-tablewrap td[data-label="Where to buy"] a { width: 100%; justify-content: center; }

/* Safety: the only caution-label treatment on the site */
.sa-content .sa-sec--safety { position: relative; background: var(--sun-soft); border-radius: var(--radius); padding: 22px 18px 20px; margin-top: 2.2em; overflow: hidden; }
.sa-content .sa-sec--safety::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(-45deg, var(--ink) 0 10px, var(--sun) 10px 20px); }
.sa-content .sa-sec--safety h2 { margin-top: 6px; display: flex; align-items: center; gap: 10px; font-size: 22px; }
.sa-content .sa-sec--safety h2 svg { width: 26px; height: 26px; flex: none; }
.sa-content .sa-sec--safety ul { list-style: none; padding: 0; margin-top: 12px; }
.sa-content .sa-sec--safety li { position: relative; padding-left: 22px; font-size: 16.5px; }
.sa-content .sa-sec--safety li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; background: var(--ink); transform: rotate(45deg); }

/* FAQ */
.sa-content .sa-sec--faqs ul { list-style: none; padding: 0; margin-top: 8px; }
.sa-content .sa-sec--faqs li { padding: 18px 0; border-top: 1px solid var(--wire); margin: 0; font-size: 17px; }
.sa-content .sa-sec--faqs li:last-child { border-bottom: 1px solid var(--wire); }
.sa-content .sa-sec--faqs li > strong:first-child { display: block; font-family: var(--font-ui); font-weight: 800; font-size: 18.5px; line-height: 1.3; margin-bottom: 6px; }


/* End of article */
.sa-endnote { margin-top: 40px; display: grid; gap: 14px; max-width: 680px; }
.sa-report { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 18px 20px; border: 1px solid var(--wire); border-radius: var(--radius); }
.sa-report p { font-size: 16px; font-weight: 600; }
.sa-related { margin-top: 36px; max-width: 680px; }
.sa-related h2 { font-weight: 800; font-size: 22px; margin-bottom: 6px; }

/* ---------- Topic hub ---------- */
.sa-hubhead { background: var(--frame); }
.sa-hub__head { padding-top: 24px; padding-bottom: 36px; }
.sa-hub__head--map { display: grid; gap: 0 32px; }
.sa-hub__head--map .sa-crumbs { grid-column: 1 / -1; }
.sa-hub__map { display: none; background: var(--cell); border-radius: 16px; padding: 14px; }
.sa-hub__title { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; margin-top: 16px; }
.sa-hub__title svg { width: 52px; height: 52px; color: var(--cell); }
.sa-hub h1 { font-weight: 800; font-size: 34px; line-height: 1.08; }
.sa-hub__lead { font-family: var(--font-read); font-size: 18.5px; line-height: 1.55; color: var(--slate); max-width: 40em; margin-top: 16px; }
.sa-hub__group { padding-top: 40px; }
.sa-hub__group h2 { font-weight: 800; font-size: 23px; line-height: 1.2; margin-bottom: 14px; }
.sa-hub__group h2 a { display: inline-flex; align-items: center; gap: 12px; }
.sa-hub__group h2 svg { width: 30px; height: 30px; flex: none; color: var(--cell); }
.sa-cards { list-style: none; display: grid; gap: 0; }
.sa-cards > li { border-top: 1px solid var(--wire); }
.sa-cards > li:last-child { border-bottom: 1px solid var(--wire); }
.sa-rows { list-style: none; display: grid; column-gap: 40px; }
.sa-rows > li { border-top: 1px solid var(--wire); }
.sa-rows > li:last-child { border-bottom: 1px solid var(--wire); }

/* ---------- About ---------- */
.sa-about__why { display: grid; gap: 28px; padding-top: 8px; padding-bottom: 56px; }
.sa-about__system { margin: 0; }
.sa-about__system figcaption { margin-top: 10px; font-size: 14px; color: var(--slate); }
.sa-systempanel { background: var(--cell); border-radius: 16px; padding: 14px; --focus: var(--sun); }
.sa-about__find .sa-about__sub { margin-top: 36px; font-weight: 800; font-size: 19px; }
.sa-about__find .sa-topiclinks { margin-top: 14px; }
.sa-about__body { padding-top: 56px; padding-bottom: 72px; }
.sa-about__head { padding-top: 28px; padding-bottom: 28px; display: grid; gap: 28px; }
.sa-about h1 { font-weight: 800; font-size: 36px; line-height: 1.06; }
.sa-about__lead { font-family: var(--font-read); font-size: 19px; line-height: 1.5; color: var(--ink); margin-top: 16px; max-width: 32em; }
.sa-about__img { border-radius: var(--radius); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.sa-about__body { display: grid; gap: 40px; }
.sa-about__block { max-width: 680px; }
.sa-about__block h2 { font-weight: 800; font-size: 26px; line-height: 1.15; margin-bottom: 12px; }
.sa-about .sa-section__head h2 { font-size: 26px; }
.sa-about__block p, .sa-about__block li { font-family: var(--font-read); font-size: 18px; line-height: 1.6; }
.sa-about__block p + p { margin-top: 0.9em; }
.sa-kinds { list-style: none; display: grid; gap: 0; margin-top: 8px; }
.sa-kinds li { padding: 16px 0; border-top: 1px solid var(--wire); font-family: var(--font-read); font-size: 17px; line-height: 1.55; }
.sa-kinds b { display: block; font-family: var(--font-ui); font-weight: 800; font-size: 18px; margin-bottom: 2px; }
.sa-kinds__link { display: flex; width: fit-content; align-items: center; gap: 4px; min-height: 44px; margin-top: 2px; font-family: var(--font-ui); font-weight: 700; font-size: 16px; color: var(--link); text-decoration: none; }
.sa-kinds__link:hover { text-decoration: underline; }
.sa-kinds__link svg { width: 18px; height: 18px; flex: none; }
.sa-kinds li:has(> .sa-kinds__img) { padding-top: 20px; }
.sa-kinds__img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 8px; background: var(--frame); margin-bottom: 14px; }
.sa-about__block .sa-about__sub { margin-top: 22px; font-family: var(--font-ui); font-weight: 800; font-size: 17px; }
.sa-topiclinks { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.sa-about__block .sa-topiclinks li { font-family: var(--font-ui); }
.sa-topiclinks a { display: grid; gap: 4px; align-content: start; min-height: 92px; padding: 10px 14px 14px; border: 1px solid var(--wire); border-radius: 10px; text-decoration: none; color: var(--ink); background: var(--day); transition: border-color .15s; }
.sa-topiclinks a:hover { border-color: var(--cell); color: var(--ink); }
.sa-topiclinks a:hover strong { text-decoration: underline; }
.sa-topiclinks svg { width: 30px; height: 30px; color: var(--cell); }
.sa-topiclinks .sa-drawing { width: 100%; height: auto; margin-bottom: 4px; }
.sa-topiclinks strong { font-weight: 800; font-size: 16px; line-height: 1.2; }
.sa-topiclinks span { font-size: 14px; color: var(--slate); }
.sa-about__aside { background: var(--frame); border-radius: var(--radius); padding: 22px; display: grid; gap: 12px; align-self: start; }
.sa-about__aside h2 { font-size: 19px; font-weight: 800; }
.sa-about__aside p { font-family: var(--font-read); font-size: 16.5px; line-height: 1.5; color: var(--ink); }

/* ======================= Responsive (container queries) ======================= */
@container sa (min-width: 640px) {
  .sa { --gutter: 32px; }
  .sa-kinds li:has(> .sa-kinds__img) { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 20px; align-items: start; }
  .sa-kinds__img { aspect-ratio: 3 / 2; margin: 4px 0 0; }
  .sa-hero h1 { font-size: 46px; max-width: 17ch; }
  .sa-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .sa-footer__grid > div:last-child { grid-column: auto; }
  .sa-footer__brand { grid-column: 1 / -1; }
  .sa-article h1 { font-size: 42px; }
  .sa-content { font-size: 18px; }
  .sa-content h2 { font-size: 28px; }
  .sa-content h3 { font-size: 22px; }
  .sa-content .sa-sec--safety { padding: 26px 26px 24px; }
  /* Tablet: real table in a scroll box with a visible hint */
  .sa-content .sa-tablewrap { overflow-x: auto; border: 1px solid var(--wire); border-radius: var(--radius); }
  .sa-content .sa-tablewrap__hint { display: block; padding: 10px 14px 0; }
  .sa-content .sa-tablewrap table { display: table; width: max-content; min-width: 100%; }
  .sa-content .sa-tablewrap thead { display: table-header-group; }
  .sa-content .sa-tablewrap tbody { display: table-row-group; }
  .sa-content .sa-tablewrap tr { display: table-row; border: 0; border-radius: 0; }
  .sa-content .sa-tablewrap td, .sa-content .sa-tablewrap th { display: table-cell; width: auto; max-width: 240px; }
  .sa-content .sa-tablewrap td::before { display: none; }
  .sa-content .sa-tablewrap td:first-child { background: var(--day); color: var(--ink); font-size: 15px; position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--wire); min-width: 150px; border-bottom: 1px solid var(--wire); }
  .sa-content .sa-tablewrap th:first-child { position: sticky; left: 0; z-index: 2; }
  .sa-content .sa-tablewrap tbody tr:nth-child(even) td { background: var(--frame); }
  .sa-content .sa-tablewrap td:last-child { border-bottom: 1px solid var(--wire); }
  .sa-content .sa-tablewrap td[data-label="Where to buy"] a { width: auto; }
  .sa-hub h1 { font-size: 44px; }
  .sa-about h1 { font-size: 46px; }
  .sa-about__lead { font-size: 21px; }
  .sa-about__block h2, .sa-about .sa-section__head h2 { font-size: 30px; }
  .sa-topiclinks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container sa (min-width: 960px) {
  .sa-header__bar { height: 72px; }
  .sa-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .sa-footer__brand { grid-column: auto; }
  .sa-about__body { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; }
  .sa-about__why { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; padding-bottom: 72px; }
  .sa-about__find .sa-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
  .sa-kinds li:has(> .sa-kinds__img) { display: block; padding-top: 20px; }
  .sa-kinds__img { aspect-ratio: 3 / 2; margin: 0 0 14px; }
  .sa-about__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; padding-top: 48px; padding-bottom: 48px; }
  .sa-about h1 { font-size: 56px; }
}

@container sa (min-width: 1000px) {
  .sa-nav { display: block; }
  .sa-menubtn { display: none; }
  .sa-iconbtn__text { display: inline; }
  /* Landscape tablets and small laptops: contents list beside the text; the table keeps its scroll box but uses the free width */
  .sa-article__head-inner { margin-left: 240px; }
  .sa-article__layout { grid-template-columns: 200px minmax(0, 680px); gap: 0 40px; }
  .sa-toc { display: block; position: sticky; top: 24px; align-self: start; padding-top: 6px; }
  .sa-toc-mobile { display: none; }
  .sa-content .sa-tablewrap { width: min(880px, calc(min(1200px, 100cqw) - 2 * var(--gutter) - 240px)); }
  .sa-endnote, .sa-related, .sa-comments-wrap { margin-left: 240px; }
}

@container sa (min-width: 1100px) {
  .sa-article h1 { font-size: 52px; }
  .sa-article__head { padding-top: 32px; }
  .sa-article__head-inner { margin-left: 276px; }
  .sa-article__layout { grid-template-columns: 220px minmax(0, 680px); gap: 0 56px; }
  .sa-content { font-size: 19px; line-height: 1.64; }
  .sa-content .sa-tablewrap { width: min(880px, calc(min(1200px, 100cqw) - 2 * var(--gutter) - 276px)); border: 0; overflow-x: auto; }
  .sa-content .sa-tablewrap__hint { display: none; }
  .sa-content .sa-tablewrap table { width: 100%; }
  .sa-content .sa-tablewrap td, .sa-content .sa-tablewrap th { max-width: none; }
  .sa-content .sa-tablewrap td:first-child { position: static; box-shadow: none; }
  .sa-content .sa-tablewrap th:first-child { position: static; }
  .sa-content .sa-tablewrap th:first-child { border-top-left-radius: var(--radius); }
  .sa-content .sa-tablewrap th:last-child { border-top-right-radius: var(--radius); }
  .sa-endnote, .sa-related, .sa-comments-wrap { margin-left: 276px; }
  .sa-hub__head { padding-top: 32px; }
}

/* =================================================================== Theme additions */

/* Text for screen readers only (used by WordPress and plugins) */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { background-color: #fff; clip: auto !important; clip-path: none; color: #18242f; display: block; font-size: 1rem; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }
.sa-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--sun); color: var(--cell); padding: 12px 18px; border-radius: 6px; font-weight: 800; text-decoration: none; }
.sa-skip:focus { left: 8px; color: var(--cell); }
#sa-main:focus { outline: none; }

/* Topics menu and search panel open under the header bar */
.sa-header .sa-mega, .sa-searchpanel { position: absolute; left: 0; right: 0; top: 100%; }
.sa-mega[hidden], .sa-searchpanel[hidden] { display: none; }
.sa-searchpanel { background: var(--day); border-bottom: 1px solid var(--wire); box-shadow: 0 24px 40px -24px rgba(16, 39, 61, 0.35); padding: 16px 0 20px; }
.sa-searchpanel .sa-search { max-width: 720px; }
.sa-search__go { flex: none; min-height: 40px; padding: 0 16px; margin-right: -6px; border: 0; border-radius: 6px; background: var(--cell); color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 15px; cursor: pointer; }
.sa-search__go:hover { background: var(--cell-2); }
.sa-search input::-webkit-search-cancel-button { cursor: pointer; }

/* Phone and tablet menu: covers the screen, outside the page container */
.sa-overlay { position: fixed; inset: 0; z-index: 100000; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #ffffff; }
.sa-overlay[hidden] { display: none; }
.sa-overlay:target { display: block; }
.sa-overlay > .sa { min-height: 100%; }
body.admin-bar .sa-overlay { top: 32px; }
@media (max-width: 782px) { body.admin-bar .sa-overlay { top: 46px; } }
html.sa-noscroll, html.sa-noscroll body { overflow: hidden; }
body.admin-bar .sa-toc { top: 56px; }

/* Image placeholder when a guide has no featured image */
.sa-thumb-ph { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; width: 100%; border-radius: 6px; background: var(--frame); color: var(--cell); }
.sa-thumb-ph svg { width: 40%; max-width: 56px; height: auto; }
.sa-thumb-ph .sa-drawing { width: 66%; max-width: 360px; }
.sa-feature .sa-thumb-ph { border-radius: var(--radius); }

/* How-to guides: numbered steps and the "What You'll Need" list */
.sa-content .sa-sec--steps > ol { list-style: none; padding: 0; counter-reset: sa-step; }
.sa-content .sa-sec--steps > ol > li { counter-increment: sa-step; position: relative; padding-left: 52px; margin-top: 1.2em; }
.sa-content .sa-sec--steps > ol > li:first-child { margin-top: 0.9em; }
.sa-content .sa-sec--steps > ol > li::before { content: counter(sa-step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--cell); background: var(--day); color: var(--cell); font-family: var(--font-ui); font-weight: 900; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; padding-top: 2px; }
.sa-content .sa-sec--steps > ol > li > strong:first-child { font-family: var(--font-ui); font-weight: 800; }
.sa-content .sa-sec--needs > ul { list-style: none; padding: 16px 18px; background: var(--frame); border-radius: var(--radius); }
.sa-content .sa-sec--needs > ul > li { position: relative; padding-left: 30px; }
.sa-content .sa-sec--needs > ul > li::before { content: ""; position: absolute; left: 3px; top: 0.5em; width: 13px; height: 7px; border-left: 3px solid var(--cell); border-bottom: 3px solid var(--cell); transform: rotate(-45deg); }

/* Sizing guides: the formula box */
.sa-content .sun-formula { margin-top: 1.4em; padding: 16px 18px; background: var(--frame); border-left: 4px solid var(--sun); border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--font-ui); font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.sa-content .sun-formula strong { font-weight: 800; }

/* Tables without a header row, and a header row inside tbody */
.sa-content .sa-tablewrap--plain td::before { display: none; }
.sa-content .sa-tablewrap tr.sa-headrow { display: none; }
.sa-content .sa-tablewrap.is-fitting .sa-tablewrap__hint { display: none; }

/* Code and quotes in guides */
.sa-content code { font-size: 0.9em; background: var(--frame); padding: 1px 5px; border-radius: 4px; }
.sa-content blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--wire-strong); color: var(--slate); }
.sa-content hr { border: 0; border-top: 1px solid var(--wire); margin: 2em 0; }

.sa-related__all { margin-top: 10px; font-weight: 700; }
.sa-related__all a { display: inline-block; padding: 8px 0; }

/* Ordinary pages */
.sa-page__head { padding-top: 24px; }
.sa-page__head h1 { font-weight: 800; font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; margin-top: 14px; max-width: 24ch; }
.sa-page__body { padding-top: 8px; padding-bottom: 64px; }
.sa-page__content { margin-top: 18px; }
.sa-page__content > :first-child { margin-top: 0; }
.sa-page__content h2:first-child { margin-top: 0.6em; }
.sa-page__content .alignwide, .sa-page__content .alignfull { width: auto; max-width: 100%; margin-left: 0; margin-right: 0; }
/* Pages built with blocks from the previous theme: keep their content, drop the outer boxes */
.sa-page__content .spectra-is-root-container { padding: 0 !important; margin: 0 !important; background: none !important; min-height: 0 !important; width: auto !important; max-width: 100% !important; }
.sa-page__content .wp-block-spectra-container { gap: 0; }
.sa-page__content .wp-block-spectra-container > * + * { margin-top: 1.05em; }
.sa-page__content .wp-block-spectra-content { font-family: inherit; }
.sa-page__content :is(h1, h2, h3, h4, h5, h6).wp-block-spectra-content { font-family: var(--font-ui); }
.sa-page__content p.wp-block-spectra-content { font-size: inherit; line-height: inherit; color: inherit; }
/* Visitors also get Spectra's own layout styles for these blocks (inner boxes, centring, a narrow form column).
   Keep the content in the site's single column instead: no boxes or centring, and a full-width form. */
.sa .sa-page__content :is(.wp-block-spectra-container, .spectra-overlay-color) { display: block !important; width: auto !important; max-width: none !important; min-height: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; text-align: left !important; }
.sa .sa-page__content .wp-block-spectra-content { max-width: none !important; padding: 0 !important; text-align: left !important; }
.sa .sa-page__content [data-spectra-id] > p + [data-spectra-id] { margin-top: 1.6em; }
.sa-page__content .srfm-form-container { margin-top: 18px; font-family: var(--font-ui); }
.sa-page__content .srfm-form-container :is(button, input, textarea, select) { font-family: var(--font-ui); }
/* SureForms: the "Edit Form" link that logged-in editors see above a form, and the form's button in the site's button style */
.sa .srfm-edit-form-btn-wrap { margin: 0 0 16px; }
.sa .srfm-edit-form-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px 6px; border: 1px solid var(--wire-strong); border-radius: 6px; background: var(--day); font-family: var(--font-ui); font-weight: 700; font-size: 14.5px; line-height: 1.2; color: var(--ink); text-decoration: none; }
.sa .srfm-edit-form-btn:hover { border-color: var(--cell); color: var(--cell); }
.sa .srfm-edit-form-btn svg { width: 16px; height: 16px; flex: none; }
.sa .srfm-form-container { --srfm-btn-padding: 12px 22px; --srfm-btn-font-size: 17px; --srfm-btn-font-weight: 700; --srfm-btn-line-height: 22px; }
/* SureForms fields: the name above each field stays visible while you type, in the site's label style */
.sa .srfm-form-container .srfm-block-label { font-family: var(--font-ui); font-weight: 700; font-size: 16px; line-height: 1.4; color: var(--ink); }
/* Fields show focus like the search field: blue border and a soft blue ring */
.sa .srfm-form-container { --srfm-color-input-border-hover: var(--link); --srfm-color-input-border-focus-glow: rgba(28, 90, 153, .25); }
.sa .srfm-form-container .srfm-input-common:focus-visible { outline: 0; }
/* Complianz cookie policy: the cookie lists keep to the screen width on phones. */
.sa-page__content :is(#cmplz-document, #cmplz-cookies-overview) .cookies-per-purpose > div { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .sa-page__content :is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose { grid-template-columns: 100px minmax(0, 1fr); } }
.sa-content :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], textarea, select) { font-family: var(--font-ui); max-width: 100%; }

/* List pages: All guides, guide types, archives, search, not found */
.sa-hub__h1 { margin-top: 16px; }
.sa-hub__count { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--slate); }
.sa-hub__search { margin-top: 18px; max-width: 620px; }
.sa-hub__body { padding-bottom: 56px; }
.sa-hub__group h2 a { color: inherit; text-decoration: none; }
.sa-hub__group h2 a:hover { color: var(--link); text-decoration: underline; }
.sa-hub__group > p { font-family: var(--font-read); font-size: 17.5px; line-height: 1.55; max-width: 40em; }
.sa-hub__group > p + .sa-chips { margin-top: 16px; }
.sa-hub__related { margin-top: 24px; }
.sa-jump { margin-top: 20px; }
.sa-filters { display: grid; gap: 10px; margin-top: 18px; }
.sa-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.sa-chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px 6px; border: 1px solid var(--wire); border-radius: 999px; background: var(--day); font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--ink); text-decoration: none; }
.sa-chips a:hover { border-color: var(--cell); color: var(--ink); }
.sa-chips a span { font-weight: 600; font-size: 14px; color: var(--slate); }
.sa-chips svg { width: 22px; height: 22px; flex: none; color: var(--cell); margin-left: -4px; }
.sa-chips a[aria-current="page"] { background: var(--cell); border-color: var(--cell); color: #fff; }
.sa-chips a[aria-current="page"] span { color: var(--on-dark-muted); }
.sa-pagination { margin-top: 28px; }
.sa-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.sa-pagination :is(a, span) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--wire); border-radius: 6px; font-weight: 700; color: var(--ink); text-decoration: none; }
.sa-pagination a:hover { border-color: var(--cell); }
.sa-pagination .current { background: var(--cell); border-color: var(--cell); color: #fff; }
.sa-pagination .dots { border-color: transparent; }

/* About */
.sa-about__main { display: grid; gap: 40px; }

/* Comments (only if switched on) */
.sa-comments-wrap { max-width: 680px; margin-top: 40px; padding-bottom: 56px; }
.sa-comments h2 { font-weight: 800; font-size: 22px; margin-bottom: 12px; }
.sa-comments__list { list-style: none; display: grid; gap: 16px; }
.sa-comments :is(input:not([type="checkbox"]):not([type="submit"]), textarea) { font: inherit; width: 100%; border: 2px solid var(--wire-strong); border-radius: 6px; padding: 10px 12px; }
.sa-comments .comment-form > p { margin-top: 14px; }
.sa-comments .comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; }
.sa-comments .comment-form-cookies-consent input { margin-top: 5px; }
.sa-comments .submit { width: auto; min-height: 48px; padding: 12px 22px; border: 0; border-radius: 6px; background: var(--cell); color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 17px; cursor: pointer; transition: background-color .15s; }
.sa-comments .submit:hover { background: var(--cell-2); }

@container sa (min-width: 640px) {
  .sa-page__head h1 { font-size: 42px; }
}
@container sa (min-width: 1100px) {
  .sa-page__head { padding-top: 32px; }
  .sa-page__head h1 { font-size: 48px; }
}


/* ---------- Home page and list pages: wider screens ---------- */
@container sa (min-width: 640px) {
  .sa-hero__grid { padding-top: 48px; padding-bottom: 56px; }
  .sa-hero__lead { font-size: 19px; }
  .sa-hero__more { display: inline; }
  .sa-section { padding-top: 72px; padding-bottom: 72px; }
  .sa-section__head h2, .sa-route__intro h2 { font-size: 34px; }
  .sa-path__step { grid-template-areas: "num title" ". text" ". result" ". link"; padding-bottom: 30px; }
  .sa-path__text { display: block; }
  .sa-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; overflow: visible; margin: 0; padding: 0; }
  .sa-item { grid-template-columns: 168px minmax(0, 1fr); gap: 20px; }
  .sa-item h3 { font-size: 19px; }
  .sa-feature { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 28px; }
  .sa-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .sa-plates > li { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .sa-plate { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .sa-plates--same-topic > li, .sa-plates--same-topic .sa-plate { grid-row: span 3; }
  .sa-shelf { display: grid; overflow: visible; margin: 0; padding: 0; }
  .sa-shelf > li:nth-child(n+7) { display: none; }
  .sa-method { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; }
  .sa-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
  .sa-cards > li, .sa-cards > li:last-child { border: 0; }
  .sa-cards .sa-item { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0; }
  .sa-cards .sa-item img, .sa-cards .sa-thumb-ph { border-radius: 10px; }
}
@container sa (min-width: 480px) {
  .sa-hero__actions .sa-btn { flex: 0 0 auto; padding-left: 22px; padding-right: 22px; }
}
@container sa (min-width: 700px) {
  .sa-diagram { display: block; max-width: 620px; margin-left: auto; margin-right: auto; }
  .sa-diagram > .sa-hero__note { text-align: center; }
  .sa-hero .sa-map { display: none; }
  .sa-path__step { grid-template-columns: 44px minmax(0, 1fr) 190px; grid-template-areas: "num title result" ". text result" ". link result"; column-gap: 24px; }
  .sa-path__num { width: 44px; height: 44px; }
  .sa-path__step::before { left: 21px; top: 44px; }
  .sa-path__title { padding-top: 10px; }
  .sa-path__result { align-self: start; margin-top: 6px; }
  .sa-method__item { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sa-method__item svg { grid-row: auto; }
  .sa-method__item h3 { padding-top: 0; }
}
@container sa (min-width: 960px) {
  .sa-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 48px; padding-top: 64px; padding-bottom: 72px; }
  .sa-diagram { margin-left: 0; margin-right: 0; }
  .sa-diagram > .sa-hero__note { text-align: left; }
  .sa-hero h1 { font-size: 54px; max-width: 18ch; }
  .sa-section { padding-top: 88px; padding-bottom: 88px; }
  .sa-route__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
  .sa-route__intro { position: sticky; top: 32px; }
  .sa-route__photo { order: 0; margin: 36px 0 0; }
  .sa-route__photo img { aspect-ratio: 4 / 3; }
  .sa-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 36px; }
  .sa-latest { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .sa-feature { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
  .sa-item { grid-template-columns: 132px minmax(0, 1fr); }
  .sa-item h3 { font-size: 18px; }
  .sa-plates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sa-trust h2 { font-size: 28px; }
  .sa-method { gap: 24px 40px; }
  .sa-hub__head--map { grid-template-columns: minmax(0, 1fr) 400px; align-items: center; gap: 0 56px; }
  .sa-hub__head--map .sa-hub__map { margin-top: 20px; }
  .sa-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-rows > li:nth-last-child(2) { border-bottom: 1px solid var(--wire); }
  .sa-hub__map { display: block; }
}
@container sa (min-width: 1100px) {
  .sa-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sa-about__find .sa-topiclinks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sa-shelf > li:nth-child(n+7) { display: grid; }
  .sa-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
}

@media print {
  .sa-header, .sa-footer, .sa-toc, .sa-toc-mobile, .sa-endnote, .sa-related, .sa-overlay, .sa-skip, #wpadminbar, .sa-tablewrap__hint { display: none !important; }
  .sa-article__head-inner { margin-left: 0 !important; }
  .sa-article__layout { display: block !important; }
  .sa-content { max-width: none !important; }
  .sa-content .sa-tablewrap { width: auto !important; overflow: visible !important; border: 0 !important; }
}