/* ==========================================================================
   Bamboozle theme — main stylesheet
   ========================================================================== */

@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/roboto-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/roboto-latin-700-normal.woff2") format("woff2"); }

:root, :host {
	--green-900: #0c4d08;
	--green-800: #145f10;
	--green-600: #2f8a28;
	--green-500: #4eac47;
	--green-400: #5cc04f;
	--ink: #181b31;
	--text: #1f2330;
	--muted: #5b6270;
	--line: #e3e8e2;
	--bg: #ffffff;
	--bg-mint: #f4f9f3;
	--bg-ice: #f4f7ff;
	--bg-utility: #eef2f6;
	--black: #000000;

	--font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--container: 1200px;
	--gutter: clamp(16px, 4vw, 32px);
	--radius: 4px;
	--shadow: 0 10px 30px rgba(12, 30, 10, .08);
	--header-h: 72px;
	--secnav-h: 50px;
	/* The utility bar scrolls away with the page, but it still sits above the hero on
	   first paint, so the full-height hero has to subtract it as well as the header. */
	--utility-h: 38px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--secnav-h)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; overflow-x: clip; font-family: var(--font); font-size: 16px; line-height: 1.7; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--green-900); text-decoration: none; }
a:hover { color: var(--green-600); }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; line-height: 1.15; color: var(--ink); margin: 0 0 .5em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--green-900); color: #fff; padding: 8px 16px; }
.skip-link:focus { left: 8px; color: #fff; }

/* ---------- Buttons ---------- */
.btn svg { flex: none; }
.btn { display: inline-flex; align-items: center; gap: .5em; padding: 12px 22px; font-size: 14px; font-weight: 700; line-height: 1.2; border: 2px solid transparent; border-radius: var(--radius); transition: background .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn--primary { background: var(--green-900); color: #fff; }
.btn--primary:hover { background: var(--green-600); color: #fff; }
.btn--outline { border-color: var(--green-900); color: var(--green-900); background: #fff; }
.btn--outline:hover { background: var(--green-900); color: #fff; }
.btn--ghost { border-color: rgba(255,255,255,.8); color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--green-900); }
.btn--sm { padding: 9px 16px; font-size: 13px; }
.btn--lg { padding: 16px 28px; font-size: 16px; border-radius: 10px; }

/* ---------- Utility bar ---------- */
.utility-bar { background: var(--bg-utility); font-size: 13px; }
.utility-bar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 38px; }
.social { display: flex; gap: 6px; }
.utility-bar .social a { display: grid; place-items: center; width: 24px; height: 24px; background: var(--green-900); color: #fff; border-radius: 2px; }
.utility-bar .social a:hover { background: var(--green-600); }
.utility-bar__left { display: flex; align-items: center; gap: 14px; }
.status-badge { position: relative; display: block; width: 200px; height: 30px; }
.status-badge iframe { display: block; width: 200px; height: 30px; border: 0; color-scheme: light; pointer-events: none; }
.utility-links { display: flex; gap: 24px; }
.utility-links a { color: var(--ink); }
.utility-links a:hover { color: var(--green-600); }
.utility-links--mobile { display: none; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 1px 0 var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 32px; min-height: var(--header-h); }
.brand img { width: 200px; height: auto; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; color: var(--ink); padding: 8px; }
.nav-toggle__close { display: none; }
.primary-nav { display: flex; align-items: center; flex: 1; gap: 24px; }
.menu { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.menu__link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 10px 15px; font-size: 17px; font-weight: 600; color: #000; background: none; border: 0; }
.menu__link:hover, .menu__trigger[aria-expanded="true"] { color: var(--green-600); }
.menu__item.is-active > .menu__link { color: var(--green-500); }
.menu__trigger .icon { transition: transform .2s; }
.menu__trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.account { display: flex; align-items: center; gap: 25px; }
.search-toggle { display: grid; place-items: center; width: 38px; height: 38px; margin-right: -6px; color: var(--ink); background: none; border: 0; border-radius: 50%; cursor: pointer; transition: background .2s, color .2s; }
.search-toggle:hover, .search-toggle[aria-expanded="true"] { color: var(--green-800); background: var(--bg-mint); }
.site-search { padding: 18px 0 22px; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 12px 24px rgba(0,0,0,.08); }
.site-search .s-form { max-width: 720px; margin: 0 auto; box-shadow: none; border: 1px solid var(--line); }
.site-search .s-form:focus-within { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(78,172,71,.2); }
.nav-search { display: none; }
.account .btn { padding: 9px 19px; font-size: 13px; border-width: 1px; border-radius: 2px; }

/* Mega menu */
.mega { position: absolute; left: 0; right: 0; top: 100%; padding-inline: var(--gutter); visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; pointer-events: none; }
.has-mega.is-open > .mega { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
.mega__panel { max-width: var(--container); margin-inline: auto; background: #fff; box-shadow: 0 30px 60px rgba(0,0,0,.18); }
.mega__title { margin: 0; padding: 20px 45px; font-size: 19px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); }
.mega__body { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: stretch; }

/* The rail: categories above, promos pinned to the foot of it. */
.mega__rail { display: flex; flex-direction: column; gap: 18px; padding: 18px 18px 22px 30px; background: var(--bg-mint); border-right: 1px solid var(--line); }
.mega__cats { margin: 0; padding: 0; list-style: none; }
.mega__cats li { margin: 0; }
.mega__cat { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 16px; text-align: left; color: var(--ink); cursor: pointer; }
.mega__cat .icon--duo { flex: 0 0 22px; }
.mega__cat > span { flex: 1 1 auto; }
.mega__cat-arrow { flex: 0 0 16px; color: var(--muted); opacity: 0; transition: opacity .12s var(--ease); }
.mega__cat:hover, .mega__cat:focus-visible { background: #e7f2e4; }
.mega__cat[aria-selected="true"] { background: #fff; font-weight: 700; color: var(--green-600); box-shadow: 0 1px 3px rgba(12,30,10,.1); }
.mega__cat[aria-selected="true"] .mega__cat-arrow { opacity: 1; color: var(--green-600); }

.mega__promos { margin-top: 22px; display: grid; gap: 10px; }
.mega__promo { display: block; padding: 11px 13px; background: #fff; border: 1px solid #dcebd9; border-radius: 10px; color: var(--ink); }
.mega__promo:hover { border-color: var(--green-500); text-decoration: none; }
.mega__promo-head { display: flex; align-items: center; gap: 9px; }
.mega__promo-head b { flex: 1 1 auto; font-size: 15px; line-height: 1.3; }
.mega__promo-arrow { flex: 0 0 15px; color: var(--green-600); }
.mega__promo-text { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* The pane: one category's products, three across. */
.mega__panes { padding: 26px 34px 30px; }
.mega__pane + .mega__pane { margin-top: 26px; }  /* only ever seen without JS */
.mega__pane-title { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.mega__pane-desc { margin: 7px 0 0; max-width: 72ch; font-size: 15px; line-height: 1.55; color: var(--muted); }
.mega__goto { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding-bottom: 2px; border-bottom: 1px solid currentColor; font-size: 15px; font-weight: 500; color: var(--green-600); }
.mega__goto:hover { text-decoration: none; color: var(--green-900); }
.mega__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 26px; margin: 20px 0 0; padding: 0; list-style: none; }
.mega__items li { margin: 0; }
.mega__item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 10px 10px 0; border-radius: 8px; color: var(--ink); }
.mega__item:hover { text-decoration: none; }
.mega__item .icon--duo { flex: 0 0 26px; margin-top: 1px; }
.mega__item b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.mega__item:hover b { color: var(--green-600); }
.mega__item span span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.mega__band { margin: 0; padding: 12px 45px; text-align: right; text-transform: uppercase; font-size: 22px; color: #fff; background: linear-gradient(90deg, var(--green-500), var(--green-900)); }

/* ---------- Hero ---------- */
/* The hero fills the viewport below the header, so the next section never peeks in
   above the fold. The container takes the slack and centres; the logo marquee stays
   pinned to the bottom edge. */
.hero { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-h) - var(--utility-h)); min-height: calc(100svh - var(--header-h) - var(--utility-h));
	color: #fff; background: linear-gradient(0deg, var(--green-900) 0%, var(--green-500) 100%); padding: 0; overflow: hidden; }
/* Headline block sits high, the four service captions drop to the bottom of the hero —
   the gap between them is what gives the fold its structure. */
/* Logged-in admins get WordPress's own 32px bar above everything (46px on narrow
   screens), which the viewport units know nothing about. */
.admin-bar .hero { min-height: calc(100vh - var(--header-h) - var(--utility-h) - 32px); min-height: calc(100svh - var(--header-h) - var(--utility-h) - 32px); }
@media (max-width: 782px) { .admin-bar .hero { min-height: calc(100svh - var(--header-h) - var(--utility-h) - 46px); } }
.hero > .container { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; padding-block: clamp(30px, 6vh, 92px) clamp(14px, 2.6vh, 44px); }
.hero__features { margin-top: auto; }
.eyebrow { margin: 0 0 14px; font-size: 18px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.eyebrow--light { color: #fff; }
/* Sized against the viewport's height as well as its width, so a 768px laptop screen
   shrinks the headline instead of pushing the logo strip out of the fold. */
.hero h1 { max-width: 760px; font-size: clamp(34px, min(4.4vw, 6.6vh), 58px); line-height: 1.04; color: #fff; margin-bottom: clamp(12px, 2.2vh, 22px); }
.hero__lead { max-width: 520px; margin: 0 0 clamp(18px, 3.4vh, 40px); font-size: clamp(16px, 2vh, 18px); line-height: 1.6; color: rgba(255, 255, 255, .88); }
.hero__features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 60px; }
.hero__features .icon { color: #fff; margin-bottom: clamp(5px, 1.4vh, 12px); }
.hero__features h3 { font-size: 18px; margin-bottom: 8px; }
.hero__features h3 a { color: #fff; }
.hero__features h3 a:hover { text-decoration: underline; }
.hero__features p { font-size: 15px; line-height: 1.5; color: #fff; }
@media (max-width: 900px) { .hero__features { grid-template-columns: 1fr 1fr; } }
/* Short windows: tighten the caption block rather than let it push past the fold. */
@media (max-height: 760px) {
	.hero__features { gap: 34px; }
	.hero__features h3 { font-size: 17px; margin-bottom: 5px; }
	.hero__features p { font-size: 14px; line-height: 1.45; }
}
/* The generous bottom padding is the gap between the logo strip and the section below;
   without it the logos sit flush on the fold. */
.marquee__label { flex: 0 0 auto; margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: rgba(255,255,255,.72); }
.marquee { flex: 0 0 auto; margin-top: 0; padding: clamp(14px, 2.8vh, 30px) 0 clamp(30px, 5.6vh, 66px); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 90px; width: max-content; animation: marquee 90s linear infinite; }
.marquee__track img { height: 46px; width: auto; max-width: 180px; object-fit: contain; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 45px)); } }

/* Section nav (sticky under header) */
.section-nav { position: sticky; top: var(--header-h); z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
/* Labels must never wrap mid-item — two-word entries like "Use Cases" broke onto a
   second line and doubled the bar's height. The gap shrinks with the viewport, and once
   even that is not enough the row scrolls sideways rather than stacking. `safe center`
   keeps the first item reachable when it does overflow. */
.section-nav ul { display: flex; flex-wrap: nowrap; justify-content: center; justify-content: safe center;
	gap: clamp(16px, 3vw, 48px); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.section-nav ul::-webkit-scrollbar { display: none; }
.section-nav li { flex: none; }
.section-nav a { display: flex; align-items: center; gap: 8px; height: var(--secnav-h); white-space: nowrap; color: var(--ink); font-size: 16px; }
.section-nav a .icon { flex: none; }
.section-nav a .icon { color: var(--green-900); }
.section-nav a:hover { color: var(--green-600); }

/* Mobile hub (mobile only, like the old bam-mobile-hub) */
.hub { display: none; }

/* Two-tone icons. The tones are variables so one drawing serves both backgrounds:
   on light, dark carries the detail; on the green, dark becomes white and the pale
   tone drops to a translucent white, which is the only way these read at all there. */
.icon--duo {
	--ic-pale: #cfe8cb;
	--ic-mid: #4eac47;
	--ic-dark: #0c4d08;
	--ic-on-mid: #ffffff;      /* sits on the mid tone */
	--ic-on-dark: #ffffff;     /* sits on the dark tone */
	--ic-badge-ring: #ffffff;  /* separates a badge from what it overlaps */
}
.hero .icon--duo,
.split--dark .icon--duo,
.hub-card .icon--duo,
.card__art .icon--duo,
.section--dark .icon--duo,
.p-cards--dark .icon--duo {
	--ic-pale: rgba(255, 255, 255, .34);
	--ic-mid: #8fdc85;
	--ic-dark: #ffffff;
	--ic-on-mid: #0c4d08;
	--ic-on-dark: #0c4d08;
	--ic-badge-ring: rgba(12, 77, 8, .55);
}

/* The hero gradient is mid-green, not the near-black green of the dark panels, so the
   tones above lose their contrast against it and the icons recede. Here the same
   drawings render as white silhouettes with the detail cut out of them: the shapes
   stay the site's own, the contrast stays the hero's. */
.hero__features .icon--duo {
	--ic-pale: rgba(255, 255, 255, .5);
	--ic-mid: #ffffff;
	--ic-dark: #ffffff;
	--ic-on-mid: #1d7a18;
	--ic-on-dark: #1d7a18;
	--ic-badge-ring: #1d7a18;
}

/* ---------- Sections ---------- */
.section { padding: 72px 0; }
/* After an in-page jump, land 32px above the heading instead of the full section padding. */
.section[id] { scroll-margin-top: -40px; }
.section--mint { background: var(--bg-mint); }
.section--ice { background: var(--bg-ice); }
.section-head { text-align: center; max-width: 820px; margin: 0 auto 40px; }
.section-head .eyebrow { font-size: 24px; }
.section-head h2 { font-size: clamp(28px, 3vw, 40px); text-transform: uppercase; }
.section-head .lead { font-size: 18px; color: #000; }
.section-head--stacked .eyebrow { font-size: clamp(24px, 2.2vw, 30px); }
.section-head--stacked h2 { text-transform: none; font-size: clamp(24px, 2.4vw, 34px); max-width: 700px; margin-inline: auto; }
.section-head--news h2 { text-transform: none; }

/* Cards */
.cards { display: grid; gap: 20px; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); gap: 30px; }
.card { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 30px 30px 26px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
/* The accent is a bar that draws itself across the top on hover, rather than a
   permanent rule down the side — four static green edges read as a form, not a menu. */
.card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--green-500), var(--green-900)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.card--accent { border-left: 1px solid var(--line); }
.card:hover { transform: translateY(-3px); border-color: rgba(12, 77, 8, .3); box-shadow: 0 18px 40px rgba(12, 40, 10, .1); }
.card:hover::before { transform: scaleX(1); }
.card__art { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 18px;
	background: linear-gradient(145deg, var(--green-600), var(--green-900)); }
/* Green, not mint: these hold two-tone product icons, and --ic-pale is a pale green that
   would have washed out against a mint tile. On the green the tones invert and read. */
.card__art .icon--duo { transition: transform .3s var(--ease); }
.card:hover .card__art .icon--duo { transform: scale(1.06); }
.card__title { font-size: 23px; color: var(--ink); margin-bottom: 10px; transition: color .2s var(--ease); }
.card:hover .card__title { color: var(--green-900); }
.card p { font-size: 16px; line-height: 1.7; color: #3f4552; margin-bottom: 20px; }
.card__link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--green-900); }
.card__link .icon { color: var(--green-500); transition: transform .2s var(--ease); }
.card:hover .card__link { color: var(--green-600); }
.card:hover .card__link .icon { transform: translateX(4px); }

/* Split (bare metal) */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--header-h) - var(--secnav-h)); min-height: calc(100svh - var(--header-h) - var(--secnav-h)); }
.split--dark { background: var(--green-900); color: #fff; }
.split__text { align-self: center; max-width: 600px; margin-left: auto; padding: 64px clamp(24px, 5vw, 72px); }
.split h2 { color: #fff; text-transform: uppercase; font-size: clamp(28px, 3vw, 40px); margin-bottom: 24px; }
/* Was 15px/1.6 under a 40px heading, which read as a caption rather than body copy. */
.split p { font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .92); }
.split p + p { margin-top: 18px; }
.split__text > p:first-of-type { font-size: 19px; line-height: 1.6; color: #fff; }
.split__partners { width: 300px; margin: 28px 0; }
.split__media { position: relative; min-height: 320px; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Photo cards (datacenter) */
.photo-card { position: relative; display: block; aspect-ratio: 6 / 7; overflow: hidden; border-radius: var(--radius); color: #fff; }
.photo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.photo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.65)); }
.photo-card:hover img { transform: scale(1.05); }
.photo-card__caption { position: absolute; left: 26px; right: 26px; bottom: 26px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.photo-card__tag { padding: 2px 8px; font-size: 11px; font-weight: 700; line-height: 1.6; color: #111; background: #fff; }
.photo-card__title { font-size: 26px; font-weight: 700; line-height: 1.1; color: #fff; }

/* Tabs (cyber protection) */
.tabs { display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: "list panel"; gap: 44px; max-width: 1120px; margin-inline: auto; }
.tabs__list { grid-area: list; display: flex; flex-direction: column; gap: 6px; }
.tabs__tab { padding: 14px 18px; text-align: left; font-size: 15px; font-weight: 700; line-height: 1.35; color: #111; background: transparent; border: 0; border-left: 3px solid transparent; border-radius: var(--radius); }
.tabs__tab span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.tabs__tab:hover { background: rgba(255, 255, 255, .6); }
.tabs__tab[aria-selected="true"] { background: #fff; border-left-color: var(--green-500); box-shadow: var(--shadow); }
.tabs__panel { grid-area: panel; }
.tabs__panel[hidden] { display: none; }
html:not(.js) .tabs__panel[hidden] { display: block; }
.tabs__panel-title { font-size: 20px; }
.js .tabs__panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Panel = drawn laptop + copy. The art is CSS rather than a console screenshot, which
   dates the moment the console is redesigned; it is decorative and hidden from AT. */
.cyber { display: block; }
.cyber__below { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 30px; align-items: start; margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(12, 77, 8, .14); }
.cyber__lead { margin: 0; font-size: 16.5px; line-height: 1.75; color: #111; }
.cyber__links { display: flex; flex-direction: column; gap: 2px; margin: 0 0 18px; }
.cyber__links a { display: inline-flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 15px; font-weight: 700; color: var(--green-900); }
.cyber__links a:hover { color: var(--green-600); }
.cyber__links .icon { color: var(--green-500); transition: transform .2s var(--ease); }
.cyber__links a:hover .icon { transform: translateX(3px); }

/* The foot is wider than the lid, so the laptop carries matching side padding and the
   foot pulls back out into it — nothing escapes the element's own box at any width.
   Type inside the screen is sized in cqw so one set of rules serves a 640px laptop on
   the desktop and a 330px one on a phone, clamped so neither end goes silly. */
.laptop { container-type: inline-size; max-width: 640px; margin-inline: auto; padding-inline: 6%; }
.laptop__lid { padding: 1.6cqw 1.6cqw 2cqw; background: linear-gradient(160deg, #d8e0d7, #a8b4a7); border-radius: 14px; box-shadow: 0 26px 54px rgba(12, 40, 10, .22); }
.laptop__foot { height: 1.8cqw; min-height: 10px; margin: -4px -6% 0; background: linear-gradient(180deg, #c3ccc2, #97a396); border-radius: 3px 3px 11px 11px; }
.laptop__foot::after { content: ""; display: block; width: 16%; height: 30%; margin: 0 auto; background: rgba(0, 0, 0, .16); border-radius: 0 0 4px 4px; }
/* 16:10, so it reads as a laptop screen rather than a letterbox strip. */
.cscreen { display: flex; flex-direction: column; aspect-ratio: 16 / 10; overflow: hidden; background: #fbfdfa; border-radius: 4px; }
.cscreen__bar { flex: none; display: flex; align-items: center; gap: .9cqw; padding: 1.5cqw 1.9cqw; background: var(--green-900); }
.cscreen__bar i { width: clamp(5px, 1.1cqw, 9px); aspect-ratio: 1; background: rgba(255, 255, 255, .42); border-radius: 50%; }
.cscreen__bar b { margin-left: 1.2cqw; font-size: clamp(10px, 1.85cqw, 13px); font-weight: 700; letter-spacing: .04em; color: #fff; }
.cscreen__body { flex: 1 1 auto; display: grid; grid-template-columns: 34% 1fr; min-height: 0; }
.cscreen__rail { margin: 0; padding: 2cqw 0; list-style: none; background: #eef4ec; border-right: 1px solid #dde7db; }
.cscreen__rail li { padding: 1.3cqw 2cqw; font-size: clamp(9.5px, 1.85cqw, 13px); line-height: 1.35; color: #5b6a59; border-left: 2px solid transparent; }
.cscreen__rail li.on { font-weight: 700; color: var(--green-900); background: #fff; border-left-color: var(--green-500); }
.cscreen__main { display: flex; flex-direction: column; padding: 2.4cqw 2.8cqw; }
.cscreen__head { margin: 0 0 2cqw; font-size: clamp(11.5px, 2.3cqw, 17px); font-weight: 700; line-height: 1.3; color: var(--green-900); }
.cscreen__head em { display: block; margin-top: .4cqw; font-size: clamp(9.5px, 1.8cqw, 13px); font-style: normal; font-weight: 400; color: var(--muted); }
.cscreen__row { display: flex; align-items: flex-start; gap: 1.4cqw; margin: 0 0 1.6cqw; font-size: clamp(10px, 1.9cqw, 13.5px); line-height: 1.5; color: #2d3a2c; }
.cscreen__row .icon { flex: none; width: clamp(13px, 2.5cqw, 18px); height: auto; margin-top: .2cqw; padding: 2px; color: #fff; background: var(--green-500); border-radius: 50%; }
/* The services in this group, listed as the console would list active modules — it is
   the same set the links below the laptop point at, and it fills the lower screen. */
.cscreen__mods { display: flex; flex-wrap: wrap; gap: .8cqw; margin: 2.6cqw 0 0; margin-top: auto; padding: 2.2cqw 0 0; list-style: none; border-top: 1px solid #e4ece2; }
.cscreen__mods li { display: flex; align-items: center; gap: .9cqw; padding: .7cqw 1.5cqw; font-size: clamp(8.5px, 1.65cqw, 12px); color: #46543f; background: #f1f7ef; border: 1px solid #e0ebdd; border-radius: 999px; }
.cscreen__mods li::before { content: ""; width: clamp(4px, .9cqw, 7px); aspect-ratio: 1; background: var(--green-500); border-radius: 50%; }

html:not(.js) .tabs { grid-template-columns: 1fr; grid-template-areas: none; }
html:not(.js) .tabs__list { display: none; }
html:not(.js) .tabs__panel { grid-area: auto; margin-bottom: 40px; }

/* News slider */
.slider { position: relative; }
.slider__track { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 10px; }
.slider__track::-webkit-scrollbar { display: none; }
.news-card { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 1fr 1.2fr; gap: 0; align-items: stretch; }
.news-card--text { grid-template-columns: 1fr; }
/* The image is never cropped. It is 1200x627 because that is the OG size, the card
   column is a different shape, and — because .slider__track is a flex row — every card
   stretches to the tallest one, so the panel's shape is set by whichever news item has
   the longest headline. No amount of margin inside the image survives that: the first
   attempt lost the logo, and widening the margin to 104px only moved the clip to 8px
   away. So the panel mats the image instead of filling with it. It still stretches, so
   the two halves of the card stay the same height. */
.news-card__media { align-self: stretch; min-height: 280px; background: var(--bg-mint);
  display: grid; place-items: center; padding: 20px; }
.news-card__media img { width: 100%; height: 100%; object-fit: contain; border-radius: 3px; }

/* Clamping these keeps the cards close to the same height, which keeps the matting
   thin. Without it one long headline stretches every card in the slider. */
.news-card h3 a, .news-card p { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.news-card h3 a { -webkit-line-clamp: 3; }
.news-card p { -webkit-line-clamp: 3; }
.news-card__body { position: relative; padding: 40px; background: #fff; border-left: 3px solid var(--green-500); }
.news-card__tag { position: absolute; top: 20px; right: 20px; padding: 3px 8px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--green-500); }
.news-card time { display: block; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-600); margin-bottom: 14px; }
.news-card h3 { font-size: 24px; line-height: 1.25; }
.news-card h3 a { color: var(--green-900); }
.news-card p { font-size: 14px; color: #555; }

/* The /company/news/ archive. The card is the homepage card; only the container that
   holds it differs, because there it sits in a scroll-snap slider and here it stacks. */
.news-list { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.news-list .news-card { flex: none; scroll-snap-align: none; }
/* An announcement is short and read once, so it is centred on a comfortable measure
   rather than run to the full container width. 72ch is roughly 90 characters a line. */
.page-news .p-hero--page { text-align: center; }
.news-single__body, .news-single__foot { max-width: 72ch; margin-inline: auto; }
.news-single__body > p, .news-single__body > ul, .news-single__body > ol { text-align: left; }
.news-single__foot { margin-top: 40px; padding-bottom: 24px; text-align: center; }

/* The lead paragraph.
   Every article — news or blog — opens with one sentence that is the whole of the point,
   set bold and a size up, with a rule under it. It is structure, not decoration: a reader
   who stops there has still had the answer, which leaves the paragraphs below free to be
   ordinary. Italic did this job before and reads as an aside, which is the opposite of
   what a standfirst is for.
   It lands on the first paragraph automatically so that no post can forget it; .lead is
   there for the few that want it on something other than the first. */
.article-body > p:first-of-type, .prose p.lead {
  font-size: 20px; font-weight: 700; line-height: 1.55; color: var(--ink);
  margin-bottom: 1.15em; padding-bottom: 1.15em; border-bottom: 1px solid var(--line); }
/* Already bold and already set apart, so the old italic standfirsts stop shouting twice. */
.article-body > p:first-of-type em, .prose p.lead em { font-style: normal; }
.article-body > p:first-of-type a, .prose p.lead a { color: var(--green-900); }

/* A blog post. Same measure as an announcement, because the thing that makes long-form
   readable is the line length, not the word count. */
.page-post .p-hero--page { text-align: center; }
.blog-single__body, .blog-single__foot { max-width: 72ch; margin-inline: auto; }
.blog-single__foot { margin-top: 44px; padding: 26px 0 24px; border-top: 1px solid var(--line); }
.blog-single__foot .btn { margin-right: 10px; }
.blog-single__foot .article-tags + p { margin-top: 20px; }
.article-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.article-tags a { display: inline-block; padding: 5px 11px; font-size: 13px; color: var(--green-900);
  text-decoration: none; background: var(--bg-mint); border: 1px solid #dcebd9; border-radius: 999px; }
.article-tags a:hover { border-color: var(--green-500); }
.article-tags--wide { justify-content: center; gap: 10px; }
.article-tags--wide a { padding: 9px 16px; font-size: 15px; font-weight: 600; }
.article-tags--wide b { margin-left: 6px; font-weight: 400; color: var(--muted); }
.page-blog .p-hero--page { text-align: center; }
.blog-page-note { margin-top: 26px; font-size: 14px; color: var(--muted); text-align: center; }

/* ==========================================================================
   The blog index: one featured post, then a grid
   ==========================================================================
   The first attempt stacked every post as a wide card, which is right for three
   announcements and wrong for twenty-one articles: at 1440px each row was a third
   picture and two thirds empty paper, and twenty-one identical rows of it read as a
   spreadsheet. The newest post gets the room instead, and the rest get a grid that
   actually reaches both edges of the container. */

/* The hero lead is centred by the block, not only by its text. .p-hero__lead carries
   max-width:640px with margin:0, so centring the text inside a left-aligned box put the
   sentence noticeably left of the headline above it. */
.page-blog .p-hero--page, .page-post .p-hero--page { text-align: center; }
.page-blog .p-hero__lead, .page-news .p-hero__lead { margin-inline: auto; }
.page-blog .p-hero--page { padding-bottom: 96px; }

/* The featured card lifts into the bottom of the hero, so the page starts with
   something happening rather than with a rule and a gap. */
.feature-post { position: relative; margin-top: -72px; display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: stretch;
  background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(12,77,8,.16); }
.feature-post__media { position: relative; min-height: 430px; background: var(--bg-mint); }
.feature-post__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-post__body { display: flex; flex-direction: column; justify-content: center;
  gap: 16px; padding: 46px 48px; }
.feature-post__body h2 { font-size: clamp(27px, 2.5vw, 38px); line-height: 1.15; color: var(--green-900); }
.feature-post__body h2 a { color: inherit; }
.feature-post__body p { font-size: 16.5px; line-height: 1.6; color: #4a5160; }
.feature-post .btn { align-self: flex-start; }

/* Meta line shared by the featured card and the grid cards. */
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green-600); }
.post-meta .tag { padding: 4px 9px; letter-spacing: .08em; color: #fff;
  background: var(--green-500); border-radius: 3px; }
.post-meta .sep { color: #c5cbd4; }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(326px, 1fr));
  gap: 30px; margin: 0; padding: 0; list-style: none; }
.post-card { display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.post-card:hover { border-color: rgba(78,172,71,.5); box-shadow: 0 14px 34px rgba(12,77,8,.12);
  transform: translateY(-2px); }
.post-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--bg-mint); }
.post-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-card { position: relative; }
/* A photograph can be cropped to the card's shape. The generated header card has its
   headline typeset into it, so cropping it cuts words off — the first cut of this lost
   half of "From a single 1U". Until a post has a photograph, its card is matted. */
.post-card__media.is-card { padding: 14px; }
.post-card__media.is-card img { position: absolute; inset: 14px; width: calc(100% - 28px);
  height: calc(100% - 28px); object-fit: contain; border-radius: 4px; }
.feature-post__media.is-card { display: grid; place-items: center; padding: 26px; }
.feature-post__media.is-card img { position: static; width: 100%; height: auto;
  max-height: 100%; object-fit: contain; border-radius: 5px; }
/* The category sits on the picture rather than in the meta line, which was running
   "DEDICATED SERVERS 23 SEP 2026 5 MIN" together onto two cramped lines. */
.post-chip { position: absolute; top: 14px; left: 14px; z-index: 1; padding: 5px 10px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 10px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0c4d08;
  background: #8fdc85; border-radius: 3px; }
.post-card__body { display: flex; flex-direction: column; gap: 11px; flex: 1; padding: 22px 24px 26px; }
.post-card h3 { font-size: 19.5px; line-height: 1.3; }
.post-card h3 a { color: var(--green-900); }
.post-card p { font-size: 14.5px; line-height: 1.6; color: #555;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.post-card__more { margin-top: auto; padding-top: 4px; font-size: 14px; font-weight: 700;
  color: var(--green-700, #2f8a28); }
.post-card__more::after { content: " →"; }

/* A post's own photograph behind the hero. Without one the band stays as it is, so a
   post with no picture is plainer rather than broken. */
.p-hero--photo { position: relative; padding: 108px 0 96px; background: var(--green-900); }
.p-hero--photo::before { content: ""; position: absolute; inset: 0;
  background-image: var(--hero-photo); background-size: cover; background-position: center; opacity: .42; }
.p-hero--photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,48,5,.35) 0%, rgba(8,48,5,.82) 100%); }
.p-hero--photo > .container { position: relative; z-index: 1; }

/* Pagination. WordPress ships this as a bare list of links, which at the foot of a
   grid of cards looks like something that failed to load. */
.pagination { margin-top: 44px; }
.pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers { display: grid; place-items: center; min-width: 42px; height: 42px;
  padding-inline: 14px; font-size: 15px; font-weight: 700; color: var(--green-900);
  text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.pagination .page-numbers:hover { border-color: var(--green-500); }
.pagination .page-numbers.current { color: #fff; background: var(--green-900); border-color: var(--green-900); }
.pagination .page-numbers.dots { border-color: transparent; background: none; }
.screen-reader-text:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (max-width: 900px) {
  .feature-post { grid-template-columns: 1fr; margin-top: -56px; }
  .feature-post__media { min-height: 0; aspect-ratio: 16 / 9; }
  .feature-post__body { padding: 28px 24px 32px; }
}
@media (max-width: 720px) {
  .page-blog .p-hero--page { padding-bottom: 76px; }
  .post-grid { grid-template-columns: 1fr; gap: 22px; }
  .p-hero--photo { padding: 72px 0 64px; }
}

/* A pull quote and a number, so a long post has something other than paragraphs in it. */
.prose .pull { margin: 34px 0; padding: 4px 0 4px 22px; font-size: 21px; font-weight: 600;
  line-height: 1.45; color: var(--green-900); border-left: 3px solid var(--green-500); }
.prose .pull cite { display: block; margin-top: 10px; font-size: 14px; font-weight: 400;
  font-style: normal; color: var(--muted); }
.prose .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px; margin: 32px 0; max-width: none; }
.prose .stat { padding: 20px 22px; background: var(--bg-mint); border: 1px solid #dcebd9; border-radius: 10px; }
.prose .stat b { display: block; font-size: 28px; line-height: 1.1; color: var(--green-900); }
.prose .stat span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: #4a5160; }
@media (max-width: 720px) {
  .article-body > p:first-of-type, .prose p.lead { font-size: 18px; }
  .prose .pull { font-size: 19px; }
}

/* A hero diagram placed inside an article by [bbz_diagram]. It is the same drawing the
   product page uses, so it carries its own colour and only needs room and a caption. */
.prose .diagram-figure { margin: 34px auto; padding: 26px 28px 18px; max-width: 100%; background: var(--bg-mint);
  border: 1px solid #dcebd9; border-radius: 10px; }
.prose .diagram-figure .diagram { width: 100%; height: auto; color: var(--green-900); }
.prose .diagram-figure figcaption { margin-top: 14px; font-size: 14px; line-height: 1.5;
  color: var(--muted); text-align: center; }
@media (max-width: 720px) { .prose .diagram-figure { padding: 16px 14px 12px; } }
.slider__controls { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.slider__btn { display: grid; place-items: center; width: 40px; height: 40px; background: var(--green-900); color: #fff; border: 0; border-radius: 2px; }
.slider__btn:hover { background: var(--green-600); }

/* ---------- Newsletter ---------- */
/* Flat, not a gradient: on a product page this sits directly under .p-cta, which runs
   bright to dark downwards. A gradient here ran dark to bright, mirroring it - a dark
   seam where the two met and a bright strip against the black footer. */
.newsletter { color: #fff; background: var(--green-900); }
.newsletter__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-block: 50px; }
.newsletter h2 { color: #fff; font-size: 28px; margin-bottom: 6px; }
.newsletter__copy p { margin: 0; font-weight: 700; font-size: 15px; }
.newsletter__fields { display: flex; background: #fff; border-radius: var(--radius); padding: 4px; }
.newsletter__fields input { flex: 1; min-width: 0; padding: 12px 14px; font: inherit; font-size: 14px; border: 0; border-right: 1px solid #e5e5e5; outline-offset: -2px; }
.newsletter__fields button { display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--ink); background: none; border: 0; }
.newsletter__done { margin: 0 0 14px; font-size: 15px; font-weight: 700; }
.newsletter__done--err { font-weight: 400; color: #ffe1e1; }
.newsletter__check { margin: 10px 0 0; min-height: 0; }
.newsletter__check:empty { display: none; } /* no widget until it is interacted with */
.newsletter__note { margin: 8px 0 0; font-size: 12px; opacity: .85; }
.newsletter__note.is-error { color: #ffe1e1; opacity: 1; }
.newsletter__note.is-ok { font-weight: 700; opacity: 1; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: #fff; font-size: 15px; }
.site-footer__inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; padding-block: 70px 50px; }
.site-footer__about p { margin: 22px 0; line-height: 1.6; }
.site-footer__about .site-footer__slogan { margin: 12px 0 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.social--footer { gap: 26px; margin-top: 30px; }
.social--footer a { color: #fff; }
.social--footer a:hover { color: var(--green-400); }
.site-footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.site-footer__heading { margin: 20px 0 6px; font-weight: 700; font-size: 16px; line-height: 1.4; }
.site-footer__col > .site-footer__heading:first-child { margin-top: 0; }
.site-footer__nav li a { display: block; padding: 1px 0; font-size: 14px; line-height: 1.45; color: #fff; }
.site-footer__nav li a:hover { color: var(--green-400); }
.site-footer__bottom { position: relative; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: 24px 40px; }
.site-footer__bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 3px solid #fff; }
.site-footer__bottom p { margin: 0; }
.site-footer__bottom ul { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer__bottom a { color: #fff; }

/* ---------- Generic page ---------- */
.page-hero { padding: 70px 0 50px; background: linear-gradient(0deg, var(--green-900), var(--green-500)); }
.page-hero h1 { color: #fff; margin: 0; font-size: clamp(30px, 4vw, 48px); }
.prose { padding-block: 60px; }
.prose > * { max-width: 860px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
	.utility-links { gap: 16px; }
	.menu__link { padding-inline: 10px; font-size: 16px; }
	.brand img { width: 180px; }
	.primary-nav, .account { gap: 14px; }
	.account .btn { padding-inline: 14px; }
	.hero__features { gap: 30px; }
	.mega__title { padding-inline: 30px; }
	.mega__body { grid-template-columns: 260px minmax(0, 1fr); }
	.mega__rail { padding-left: 22px; }
	.mega__panes { padding-inline: 26px; }
}

@media (max-width: 1024px) {
	.menu__item.is-active > .menu__link { color: var(--green-600); }
	/* The utility bar is hidden here, so the hero only has the header above it. */
	:root { --header-h: 64px; --secnav-h: 0px; --utility-h: 0px; }
	.utility-bar { display: none; }
	.brand img { width: 170px; }
	.nav-toggle { display: block; }
	.primary-nav { position: fixed; inset: var(--header-h) 0 0 0; flex-direction: column; align-items: stretch; gap: 20px; padding: 16px var(--gutter) 40px; background: #fff; overflow-y: auto; opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; }
	.nav-open .primary-nav { opacity: 1; transform: none; visibility: visible; }
	.nav-open .nav-toggle__open { display: none; }
	.nav-open .nav-toggle__close { display: block; }
	.nav-open { overflow: hidden; }
	.menu { flex-direction: column; align-items: stretch; margin: 0; gap: 0; }
	.menu__item { border-bottom: 1px solid var(--line); }
	.menu__link { width: 100%; justify-content: space-between; flex-direction: row-reverse; padding: 16px 0; font-size: 18px; color: var(--ink); }
	.menu__link:not(.menu__trigger) { flex-direction: row; }
	.mega { position: static; padding: 0; transform: none; transition: none; display: none; visibility: visible; opacity: 1; pointer-events: auto; }
	.has-mega.is-open > .mega { display: block; }
	.mega__panel { box-shadow: none; }
	.mega__title, .mega__band { display: none; }
	/* No room for a rail beside a pane on a phone, and no hover to drive it either, so
	   the tabs are dropped entirely: every category becomes a heading with its products
	   under it, which is what a long accordion wants to be anyway. */
	.mega__body { display: flex; flex-direction: column; padding: 0 0 16px; }
	/* The promos live at the top of the source order because on a desktop they are the
	   foot of the rail. Here they would push the products off the screen, so they go last. */
	.mega__rail { order: 2; gap: 14px; margin-top: 18px; padding: 0; background: none; border-right: 0; }
	.mega__cats { display: none; }
	.mega__promos { margin: 0; }
	.mega__panes { padding: 0; }
	.mega__pane { display: block !important; }
	.mega__pane + .mega__pane { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
	.mega__pane-title { font-size: 17px; }
	.mega__pane-desc { display: none; }
	.mega__goto { margin-top: 8px; font-size: 14px; }
	.mega__items { grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 12px; }
	.mega__item { padding: 8px 0; }
	.mega__item b { font-size: 14.5px; }
	.mega__item span span { display: none; }
	.account { justify-content: stretch; }
	.search-toggle, .site-search { display: none !important; }
	.nav-search { display: block; order: -1; }
	.nav-search .s-form { max-width: none; margin: 0; box-shadow: none; border: 1px solid var(--line); }
	.nav-search .s-form input { padding: 13px 14px; font-size: 16px; }
	.account .btn { flex: 1; justify-content: center; padding-block: 14px; }
	.utility-links--mobile { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 14px; }

	.section-nav { display: none; }
	.cards--2 { grid-template-columns: 1fr; }
	.split { grid-template-columns: 1fr; min-height: 0; }
	.split__text { max-width: none; margin: 0; }
	.split__media { min-height: 300px; }
	.tabs { grid-template-columns: 1fr; grid-template-areas: "list" "panel"; gap: 24px; }
	.tabs__list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; }
	.newsletter__inner, .site-footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
	.section { padding: 52px 0; }
	.section[id] { scroll-margin-top: -24px; }
	.hero .eyebrow { font-size: 14px; }
	.hero__features, .hero .marquee, .hero .marquee__label { display: none; }

	/* Mobile hub — a compact 2-up jump menu above the sections, not a page of its own.
	   The cards were 200px tall with an empty top third; these are about a third of that. */
	.hub { display: block; padding: 30px 0 34px; text-align: center; }
	.hub .eyebrow { font-size: 12px; letter-spacing: .2em; color: var(--green-600); }
	.hub__title { font-size: 26px; color: var(--green-900); margin-bottom: 4px; }
	.hub__sub { font-size: 15px; color: var(--muted); padding-bottom: 18px; border-bottom: 1px solid var(--line); }
	.hub__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; text-align: left; }
	.hub__cards > li:last-child:nth-child(odd) { grid-column: span 2; }
	.hub-card { position: relative; display: flex; flex-direction: column; gap: 5px; min-height: 0; padding: 13px 13px 14px; color: #fff; border-radius: 12px; background:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 40px 40px,
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 40px 40px,
		linear-gradient(155deg, #1d7517, #0b3d07 72%); }
	.hub__cards > li:nth-child(even) .hub-card { background:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 40px 40px,
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 40px 40px,
		linear-gradient(155deg, #16600f, #082e05 72%); }
	.hub-card__icon { position: static; display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 3px; border: 1px solid rgba(255,255,255,.32); border-radius: 9px; }
	.hub-card__icon .icon { width: 17px; height: 17px; }
	.hub-card__title { font-size: 15.5px; font-weight: 700; line-height: 1.2; }
	.hub-card__sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 11.5px; line-height: 1.35; opacity: .8; }
	.hub-card__go { display: none; }
	.hub__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
	.hub__cta .btn { justify-content: center; padding-inline: 14px; text-align: center; }
	.hub__locations { margin-top: 18px; font-size: 12px; letter-spacing: .06em; color: var(--muted); }

	.snap { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
	.snap::-webkit-scrollbar { display: none; }
	.snap > li { flex: 0 0 86%; scroll-snap-align: center; }
	.card { flex-direction: column; gap: 14px; padding: 26px 22px; }
	.card__title { font-size: 21px; }
	.news-card { grid-template-columns: 1fr; flex-basis: 100%; }
	.news-card__media { display: none; }
	.news-card__body { padding: 28px 22px; border-left: 0; border-top: 3px solid var(--green-500); }
	.mega__items { grid-template-columns: 1fr; }
	.site-footer__nav { grid-template-columns: 1fr 1fr; }
	.newsletter__fields { flex-wrap: wrap; }
	.newsletter__fields input { flex-basis: 100%; border-right: 0; border-bottom: 1px solid #e5e5e5; }
	.newsletter__fields button { padding: 12px 14px; }
}

/* ==========================================================================
   Product pages (templates/product.php)
   ========================================================================== */
.btn--white { background: #fff; color: var(--green-900); }
.btn--white:hover { background: var(--bg-mint); color: var(--green-900); }

.p-hero { color: #fff; background: linear-gradient(100deg, var(--green-900) 0%, #1f7419 45%, var(--green-500) 100%); padding: 64px 0 72px; overflow: hidden; }
.p-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 48px; }
.p-hero--diagram .p-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.p-hero__art { color: #fff; }
.p-hero__art svg { width: 100%; height: auto; max-height: 340px; }
.p-hero__badge { margin: 0 0 8px; font-size: 20px; color: #fff; opacity: .95; }
.p-hero h1 { font-size: clamp(38px, 4.2vw, 55px); line-height: 1.05; color: #fff; margin-bottom: 22px; }
.p-hero__lead { max-width: 640px; margin: 0; font-size: 20px; line-height: 1.55; color: #fff; }

.section-nav--product { background: var(--bg-ice); }
.section-nav--product a { font-size: clamp(14px, 1.15vw, 16px); }

.p-head { text-align: center; max-width: 820px; margin: 0 auto 48px; }
.p-head__eyebrow { margin: 0 0 10px; font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green-600); }
.p-head h2 { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 14px; }
.p-head p:not(.p-head__eyebrow) { margin: 0; font-size: 19px; line-height: 1.6; color: #3f4552; }
.p-head--light h2, .p-head--light p:not(.p-head__eyebrow) { color: #fff; }
.p-head--light p:not(.p-head__eyebrow) { opacity: .85; }
.p-head--light .p-head__eyebrow { color: #b9f0b2; }

/* Intro + stats (Cyber Protect) */
.p-intro { padding: 48px 0 0; }
.p-intro__text { max-width: 960px; margin: 0 auto 36px; text-align: center; font-size: 21px; line-height: 1.65; color: var(--ink); }
.p-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; }
.p-stats__item { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; padding: 22px 16px; background: var(--bg-mint); border-top: 3px solid var(--green-500); text-align: center; }
.p-stats dd { margin: 0; font-size: 38px; font-weight: 700; line-height: 1.1; color: var(--green-900); }
.p-stats dt { font-size: 16px; color: var(--muted); }

/* Features */
.p-features { background: #fafcfa; }
.p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.p-card { padding: 32px 30px; background: #fff; border: 1px solid var(--line); border-radius: 6px; transition: border-color .2s, box-shadow .2s; }
.p-card:hover { border-color: #c9dcc6; box-shadow: var(--shadow); }
.p-card__icon { display: block; margin-bottom: 14px; line-height: 0; color: var(--green-600); }
/* Two-tone icons carry their own colour, so the mint tile that used to supply it is
   gone: it squashed them to 20px and washed the pale tone out against its own green. */
.p-card h3 { font-size: 22px; line-height: 1.25; margin-bottom: 12px; }
.p-card p { margin: 0; font-size: 16px; line-height: 1.7; color: #3f4552; }

/* Workloads / use cases: split — heading left, checklist right */
.p-workloads { background: var(--green-900); }
.p-workloads__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.p-workloads .p-head { text-align: left; margin: 0; position: sticky; top: calc(var(--header-h) + var(--secnav-h) + 32px); }
.p-checks { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.p-checks li { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; font-size: 18px; line-height: 1.45; color: #fff; border-bottom: 1px solid rgba(255,255,255,.14); }
.p-checks .icon { flex: 0 0 auto; margin-top: 2px; color: var(--green-400); }

/* How it works */
.p-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; background: var(--green-900); border-radius: 8px; overflow: hidden; }
.p-step { padding: 34px 30px 36px; color: #fff; }
.p-step + .p-step { border-left: 1px solid rgba(255,255,255,.12); }
.p-step__num { display: block; margin-bottom: 16px; font-size: 44px; font-weight: 700; line-height: 1; color: var(--green-400); }
.p-step h3 { font-size: 21px; color: #fff; margin-bottom: 12px; }
.p-step p { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.85); }

/* Interactive demo (Storylane) in a laptop frame */
.p-demo { background: linear-gradient(180deg, #f4f9f3 0%, #eef3f7 100%); }
.p-demo__laptop { max-width: 1040px; margin: 0 auto; }
.p-demo__screen { position: relative; padding: 26px 16px 16px; border-radius: 16px 16px 6px 6px; background: linear-gradient(175deg, #2b2f33 0%, #16191c 100%); box-shadow: 0 22px 50px rgba(12, 30, 10, .22), inset 0 1px 0 rgba(255,255,255,.08); }
.p-demo__camera { position: absolute; top: 11px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #0b0d0f; box-shadow: inset 0 0 0 1.5px #2f3438, 0 0 3px rgba(120,200,255,.35); }
.p-demo__frame { position: relative; width: 100%; height: 0; border-radius: 6px; overflow: hidden; background: #fff; }
.p-demo__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.p-demo__base { position: relative; height: 15px; margin: 0 auto; width: 112%; max-width: none; transform: translateX(-5.35%); border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #d7dbdf 0%, #aeb4b9 62%, #878d92 100%); box-shadow: 0 10px 20px rgba(12, 30, 10, .18); }
.p-demo__base span { position: absolute; top: 0; left: 50%; width: 120px; height: 9px; margin-left: -60px; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #9aa1a7 0%, #c3c9ce 100%); }
.p-demo__covers { max-width: 780px; margin: 38px auto 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.p-demo__covers summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; font-size: 17px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.p-demo__covers summary::-webkit-details-marker { display: none; }
.p-demo__covers summary:hover { color: var(--green-600); }
.p-demo__covers[open] { border-color: var(--green-500); box-shadow: inset 3px 0 0 var(--green-500); }
.p-demo__covers[open] .faq__toggle { transform: rotate(45deg); }
.p-demo__covers ul { margin: 0; padding: 0 22px 20px 40px; }
.p-demo__covers li { font-size: 16px; line-height: 1.7; color: var(--muted); }
.p-demo__covers li + li { margin-top: 8px; }
@media (max-width: 720px) {
	.p-demo__screen { padding: 20px 10px 10px; border-radius: 12px 12px 5px 5px; }
	.p-demo__base { height: 11px; width: 108%; transform: translateX(-3.7%); }
	.p-demo__base span { width: 86px; margin-left: -43px; height: 7px; }
}

/* Colocation configurator */
.p-config__layout { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 34px; align-items: start; }
.p-config__group { border: 0; margin: 0 0 26px; padding: 0; }
.p-config__group legend { padding: 0; margin-bottom: 12px; font-size: 16px; font-weight: 700; color: var(--ink); }
.p-config__hint { font-weight: 400; color: var(--muted); font-size: 14px; }
.p-config__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.p-config__choice { position: relative; }
.p-config__choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.p-config__choice span { display: inline-block; padding: 10px 16px; font-size: 15px; line-height: 1.3; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.p-config__choice span:hover { border-color: var(--green-500); color: var(--green-600); }
.p-config__choice input:checked + span { background: var(--green-500); border-color: var(--green-500); color: #fff; font-weight: 500; }
.p-config__choice input:focus-visible + span { outline: 2px solid var(--green-600); outline-offset: 2px; }
.p-config__number { display: inline-flex; align-items: center; gap: 8px; }
.p-config__step { width: 40px; height: 40px; font-size: 20px; line-height: 1; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); cursor: pointer; }
.p-config__step:hover { border-color: var(--green-500); color: var(--green-600); }
.p-config__number input { width: 78px; height: 40px; text-align: center; font-size: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.p-config__unit { font-size: 15px; color: var(--muted); }
.p-config__group textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; border: 1px solid var(--line); border-radius: var(--radius); resize: vertical; }
.p-config__equip-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.p-config__equip-row select { order: 0; flex: 1 1 240px; min-width: 0; height: 44px; padding: 0 12px; font: inherit; font-size: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.p-config__equip-qty { order: 1; }
.p-config__equip-remove { order: 2; }
.p-config__equip-custom { order: 3; flex: 0 0 calc(50% - 5px); justify-content: space-between; }
.p-config__equip-qty, .p-config__equip-custom { display: flex; flex-direction: row; align-items: center; gap: 8px; height: 44px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.p-config__equip-custom[hidden] { display: none; }
.p-config__equip-qty span, .p-config__equip-custom span { font-size: 13px; color: var(--muted); white-space: nowrap; }
.p-config__equip-qty input, .p-config__equip-custom input { width: 72px; height: 40px; padding: 0; font: inherit; font-size: 15px; font-weight: 700; text-align: center; border: 0; background: transparent; }
.p-config__equip-qty input:focus, .p-config__equip-custom input:focus { outline: none; }
.p-config__equip-qty:focus-within, .p-config__equip-custom:focus-within { border-color: var(--green-500); }
.p-config__equip-remove { flex: none; margin-left: auto; width: 44px; height: 44px; font-size: 20px; line-height: 1; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--muted); cursor: pointer; }
.p-config__equip-remove:hover { border-color: #d66; color: #c44; }
.p-config__equip-add { margin-top: 4px; padding: 10px 18px; font-size: 14px; border-color: var(--green-500); color: var(--green-600); }
.p-config__equip-add:hover { background: var(--green-500); border-color: var(--green-500); color: #fff; }
.p-config__equip-total { margin: 14px 0 4px; padding: 12px 16px; font-size: 15px; font-weight: 700; color: var(--green-800); background: var(--bg-mint); border-radius: var(--radius); }
.p-config__equip .p-config__hint { display: block; font-size: 13px; }
@media (max-width: 720px) {
	.p-config__equip-row select { flex: 1 1 100%; }
	.p-config__equip-remove { margin-left: auto; }
}

.p-config__summary { position: sticky; top: calc(var(--header-h) + 16px); background: var(--bg-mint); border: 1px solid var(--line); border-radius: 10px; padding: 24px 22px; }
.p-config__summary h3 { font-size: 18px; margin-bottom: 14px; }
.p-config__summary dl { margin: 0 0 6px; }
.p-config__row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dashed rgba(0,0,0,.09); }
.p-config__row dt { font-size: 14px; color: var(--muted); flex: 0 0 48%; }
.p-config__row dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--ink); text-align: right; }
.p-config__row--stacked { flex-direction: column; align-items: flex-start; gap: 3px; }
.p-config__row--stacked dt { flex: none; }
.p-config__row--stacked dd { text-align: left; font-weight: 600; }
.p-config__empty { font-size: 14px; color: var(--muted); margin: 0; }
.p-config__contact { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.p-config__contact h3 { margin-bottom: 12px; }
.p-config__contact .bbz-form__field { margin-bottom: 12px; }
.p-config__contact .btn { width: 100%; justify-content: center; margin-top: 6px; }
@media (max-width: 960px) {
	.p-config__layout { grid-template-columns: 1fr; }
	.p-config__summary { position: static; }
}

/* CTA band */
.p-cta { padding: 64px 0; text-align: center; color: #fff; background: linear-gradient(180deg, var(--green-500) 0%, var(--green-900) 100%); }
.p-cta h2 { font-size: clamp(30px, 3.2vw, 42px); color: #fff; margin-bottom: 10px; }
.p-cta p { max-width: 640px; margin: 0 auto 30px; font-size: 19px; color: rgba(255,255,255,.92); }
.p-cta__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.p-cta .btn--ghost { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); }

/* FAQ */
.p-faq__layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; }
.faq { border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.faq + .faq { margin-top: 10px; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--ink); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--green-600); }
.faq__toggle { flex: 0 0 auto; color: var(--green-600); transition: transform .2s var(--ease); }
.faq[open] { border-color: var(--green-500); box-shadow: inset 3px 0 0 var(--green-500); }
.faq[open] .faq__toggle { transform: rotate(45deg); }
.faq__answer { padding: 0 22px 20px; font-size: 16.5px; line-height: 1.7; color: #3a404c; }
.faq__answer strong { color: var(--ink); }
.p-faq__aside { position: sticky; top: calc(var(--header-h) + var(--secnav-h) + 20px); display: grid; gap: 10px; }
.p-tile { display: flex; align-items: center; gap: 12px; padding: 22px; font-size: 18px; font-weight: 700; color: #fff; background: var(--green-900); border-radius: 6px; }
.p-tile span { flex: 1; }
.p-tile:hover { color: #fff; background: var(--green-600); }
.p-faq__more { margin: 8px 0 0; font-size: 16px; color: var(--muted); }

/* Related products */
.p-related { background: var(--bg-mint); }
.p-head--related { padding-bottom: 28px; border-bottom: 2px solid var(--green-500); max-width: none; }
.p-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.p-rel { position: relative; display: flex; flex-direction: column; padding: 30px 26px; background: #fff; border: 1px solid var(--line); border-radius: 6px; transition: box-shadow .2s, border-color .2s; }
.p-rel:hover { border-color: #c9dcc6; box-shadow: var(--shadow); }
.p-rel__icon { color: var(--green-500); margin-bottom: 14px; }
.p-rel h3 { font-size: 20px; margin-bottom: 10px; }
.p-rel h3 a { color: var(--ink); }
.p-rel h3 a::after { content: ""; position: absolute; inset: 0; }
.p-rel:hover h3 a { color: var(--green-600); }
.p-rel p { flex: 1; margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.p-rel__more { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--green-600); }

@media (max-width: 1024px) {
	.p-grid { grid-template-columns: repeat(2, 1fr); }
	.p-steps { grid-template-columns: repeat(2, 1fr); }
	.p-step:nth-child(3) { border-left: 0; }
	.p-step:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
	.p-stats { grid-template-columns: repeat(2, 1fr); }
	.p-faq__layout { grid-template-columns: 1fr; }
	.p-workloads__inner, .p-hero--diagram .p-hero__inner { grid-template-columns: 1fr; gap: 32px; }
	.p-workloads .p-head { position: static; }
	.p-hero__art { max-width: 520px; }
	.p-faq__aside { position: static; grid-template-columns: 1fr 1fr; }
	.p-faq__more { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
	.p-hero { padding: 44px 0 48px; }
	.p-hero__lead { font-size: 17px; }
	.p-head p:not(.p-head__eyebrow) { font-size: 17px; }
	.p-card h3 { font-size: 20px; }
	.faq summary { font-size: 17px; }
	.p-intro { padding-top: 36px; }
	.p-intro__text { font-size: 18px; text-align: left; }
	.p-stats dd { font-size: 30px; }
	.p-grid, .p-steps, .p-checks { grid-template-columns: 1fr; }
	.p-checks li { font-size: 17px; padding: 12px 0; }
	.p-hero__art { display: none; }
	.p-step + .p-step { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
	.p-cta { padding: 48px 0; }
	.p-cta__buttons .btn { flex: 1 1 100%; justify-content: center; }
	.p-faq__aside { grid-template-columns: 1fr; }
	.faq summary { padding: 14px 16px; }
	.faq__answer { padding: 0 16px 16px; }
}

/* Hero diagrams (template-parts/diagrams/*.php) */
.diagram text { font-family: var(--font); }
.diagram__flow { stroke-dasharray: 6 8; animation: bbz-flow 1.2s linear infinite; }
.diagram__pulse { transform-box: fill-box; transform-origin: center; animation: bbz-pulse 2s ease-in-out infinite; }
@keyframes bbz-flow { to { stroke-dashoffset: -28; } }
@keyframes bbz-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }

/* ---------- Product section types (batch 2) ---------- */
.p-head--left { text-align: left; margin-left: 0; }
.p-intro:not(:has(.p-intro__text)) { padding-top: 40px; }

/* Cards: use cases, industries, node pools, plans */
.p-cards--dark { background: var(--green-900); }
.p-cards--mint { background: var(--bg-mint); }
.p-cards__group { margin: 8px 0 20px; }
.p-cards__group + .p-cards__grid { margin-bottom: 48px; }
.p-cards__grid + .p-cards__group { margin-top: 48px; }
.p-cards__group h3 { font-size: 24px; margin-bottom: 6px; }
.p-cards__group p { margin: 0; font-size: 17px; color: var(--muted); max-width: 820px; }
.p-cards__grid { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
.p-cards__grid--3 { grid-template-columns: repeat(3, 1fr); }
.p-cards__grid--2 { grid-template-columns: repeat(2, 1fr); }
.p-box { position: relative; display: flex; flex-direction: column; padding: 28px 26px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.p-cards--dark .p-box { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; }
.p-box--featured { border: 2px solid var(--green-500); box-shadow: var(--shadow); }
.p-box__badge { align-self: flex-start; display: inline-block; margin-bottom: 14px; padding: 4px 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green-900); background: #d4f5cf; border-radius: 999px; vertical-align: middle; }
.p-box__title { font-size: 21px; line-height: 1.25; margin-bottom: 6px; }
.p-cards--dark .p-box__title { color: #fff; }
.p-box__sub { margin: 0 0 12px; font-size: 15px; color: var(--muted); }
.p-cards--dark .p-box__sub { color: #b9f0b2; }
.p-box__body { margin: 6px 0 0; font-size: 16px; line-height: 1.7; color: #3f4552; }
.p-cards--dark .p-box__body { color: rgba(255,255,255,.85); }
.p-box__meta { margin: 8px 0 0; }
.p-box__meta div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.p-cards--dark .p-box__meta div { border-color: rgba(255,255,255,.14); }
.p-box__meta dt { color: var(--muted); }
.p-cards--dark .p-box__meta dt { color: rgba(255,255,255,.7); }
.p-box__meta dd { margin: 0; font-weight: 700; text-align: right; }
.p-box__price { margin: auto 0 0; padding-top: 20px; }
.p-box__from { display: block; font-size: 13px; color: var(--muted); }
.p-box__price strong { font-size: 34px; line-height: 1.1; color: var(--green-900); }
.p-box__price > span:not(.p-box__from) { font-size: 16px; color: var(--muted); }
.p-box__price small { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.p-box__price em { font-style: normal; font-weight: 700; color: var(--green-600); }
.p-box__btn { margin-top: 18px; justify-content: center; }
.p-note { margin: 24px 0 0; font-size: 15px; color: var(--muted); text-align: center; }
.p-cards--dark .p-note { color: rgba(255,255,255,.75); }

/* Tiles */
.p-tiles__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.p-tiles__grid li { display: flex; flex-direction: column; justify-content: center; min-height: 72px; padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--green-500); border-radius: 6px; }
.p-tiles__grid strong { font-size: 17px; color: var(--ink); }
.p-tiles__grid span { font-size: 14px; color: var(--muted); }
.p-tiles { background: #fafcfa; }

/* Price callout */
.p-price__box { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; max-width: 900px; margin: 0 auto; padding: 36px 40px; background: var(--bg-mint); border-top: 3px solid var(--green-500); border-radius: 8px; }
.p-price__value { margin: 0; }
.p-price__value strong { display: block; font-size: 64px; line-height: 1; color: var(--green-900); }
.p-price__value span { font-size: 16px; color: var(--muted); }
.p-price__text { margin: 0; font-size: 17px; line-height: 1.7; color: #3f4552; }

/* Split (dark) */
.p-split { background: var(--green-900); }
.p-split__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.p-split .p-head { margin-bottom: 24px; }
.p-split__list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; font-size: 18px; line-height: 1.5; color: #fff; border-bottom: 1px solid rgba(255,255,255,.14); }
.p-split__list .icon { flex: 0 0 auto; margin-top: 3px; color: var(--green-400); }
.p-split__panel { padding: 34px; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; }
.p-split__panel h3 { font-size: 24px; color: #fff; }
.p-split__panel p { color: rgba(255,255,255,.85); font-size: 16px; }
.p-split__tags-label { margin: 26px 0 10px; font-weight: 700; }
.p-split__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.p-split__tags li { padding: 6px 12px; font-size: 14px; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; }
.p-split__note { margin: 20px 0 0; font-size: 14px !important; opacity: .8; }

/* Tables */
.p-table:nth-of-type(even) { background: #fafcfa; }
.p-table__head { margin: 40px 0 14px; }
.p-table__head:first-of-type { margin-top: 0; }
.p-table__head h3 { font-size: 22px; margin-bottom: 4px; }
.p-table__head p { margin: 0; color: var(--muted); }
.p-table__scroll { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.p-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.p-table th, .p-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.p-table thead th, .p-table tbody th, .p-table td:last-child { white-space: nowrap; }
.p-table thead th { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--green-900); }
.p-table tbody th { font-weight: 700; color: var(--ink); }
.p-table tbody tr:last-child > * { border-bottom: 0; }
.p-table tbody tr:hover { background: var(--bg-mint); }
.p-table__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.rate { display: inline-block; padding: 3px 10px; font-size: 14px; font-weight: 700; border-radius: 999px; }
.rate--best { color: #fff; background: var(--green-600); }
.rate--good { color: var(--green-900); background: #d4f5cf; }
.rate--ok { color: #5b6270; background: #eef2f6; }
.rate--no { color: #9aa1ab; }

@media (max-width: 1024px) {
	.p-cards__grid, .p-cards__grid--3 { grid-template-columns: repeat(2, 1fr); }
	.p-split__inner { grid-template-columns: 1fr; gap: 32px; }
	.p-price__box { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 720px) {
	.p-cards__grid, .p-cards__grid--3, .p-cards__grid--2 { grid-template-columns: 1fr; }
	.p-price__value strong { font-size: 52px; }
	.p-price__box { padding: 28px 22px; }
	.p-split__panel { padding: 26px 22px; }
	.p-table th, .p-table td { padding: 12px 14px; font-size: 15px; }
}
@media (min-width: 1025px) {
	.p-steps--3 { grid-template-columns: repeat(3, 1fr); }
	.p-steps--5 { grid-template-columns: repeat(5, 1fr); }
	.p-steps--5 .p-step { padding: 30px 22px 32px; }
	.p-steps--5 .p-step h3 { font-size: 19px; }
}
@media (max-width: 720px) {
	.p-table td { white-space: nowrap; }
	.p-table tbody th { min-width: 150px; white-space: normal; }
}

/* Logo grid */
.p-logos__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.p-logos__grid li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 120px; padding: 18px 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; text-align: center; }
.p-logos__grid img { width: 56px; height: 56px; object-fit: contain; }
.p-logos__grid span { font-size: 16px; font-weight: 700; color: var(--ink); }
@media (max-width: 1024px) { .p-logos__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .p-logos__grid { grid-template-columns: repeat(2, 1fr); } }
.diagram__fill { transform-box: fill-box; transform-origin: left center; animation: bbz-fill 1.6s var(--ease) both; }
@keyframes bbz-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Tabbed tables (progressive: without JS every panel shows) */
.p-tabs__list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; border-bottom: 2px solid var(--line); }
.p-tabs__tab { margin-bottom: -2px; padding: 12px 18px; font-size: 16px; font-weight: 700; color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; }
.p-tabs__tab:hover { color: var(--green-900); }
.p-tabs__tab[aria-selected="true"] { color: var(--green-900); border-bottom-color: var(--green-500); }
.p-tabs__panel[hidden] { display: none; }
/* Centred tabs, for the one place the tab strip is the only thing on its line. */
.p-tabs--center .p-tabs__list { justify-content: center; border-bottom-color: #dcebd9; }
.p-tabs--center .p-tabs__tab { padding-inline: 26px; }
html:not(.js) .p-tabs--center .p-tabs__list { display: none; }
html:not(.js) .p-tabs__panel[hidden] { display: block; }
html:not(.js) .p-tabs__list { display: none; }
.p-tabs__panel .p-table__head { margin-top: 0; }
html:not(.js) .p-tabs__panel + .p-tabs__panel .p-table__head { margin-top: 40px; }
@media (max-width: 720px) { .p-tabs__list { flex-wrap: nowrap; overflow-x: auto; } .p-tabs__tab { white-space: nowrap; font-size: 15px; } }

/* Enquiry form */
.p-enquiry { background: var(--bg-mint); }
.p-enquiry__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.p-enquiry__points li { display: flex; gap: 12px; padding: 10px 0; font-size: 17px; }
.p-enquiry__points .icon { flex: 0 0 auto; margin-top: 3px; color: var(--green-600); }
.bbz-form { padding: 36px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.bbz-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.bbz-form__wide { grid-column: 1 / -1; }
.bbz-form__field { margin: 0; border: 0; padding: 0; min-width: 0; }
.bbz-form label, .bbz-form legend { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 700; color: var(--ink); padding: 0; }
.bbz-form__hint { font-weight: 400; color: var(--muted); }
.bbz-form input[type="text"], .bbz-form input[type="email"], .bbz-form input[type="tel"], .bbz-form textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid #cfd8cd; border-radius: 6px; }
.bbz-form input:focus, .bbz-form textarea:focus { outline: 0; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(78,172,71,.2); }
.bbz-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.bbz-pill { position: relative; margin: 0 !important; font-weight: 400 !important; cursor: pointer; }
.bbz-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bbz-pill span { display: inline-block; padding: 8px 14px; font-size: 15px; color: var(--text); border: 1px solid #cfd8cd; border-radius: 999px; transition: all .15s; }
.bbz-pill:hover span { border-color: var(--green-500); }
.bbz-pill input:checked + span { color: #fff; background: var(--green-900); border-color: var(--green-900); }
.bbz-pill input:focus-visible + span { outline: 3px solid var(--green-500); outline-offset: 2px; }
.bbz-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.bbz-form__note { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--muted); }
.bbz-form__notice { margin: 0; padding: 12px 16px; font-size: 15px; color: #8a1c10; background: #fdecea; border-radius: 6px; }
.bbz-form__done { padding: 24px 0; text-align: center; }
.bbz-form__done .icon { margin: 0 auto 12px; color: var(--green-600); }
@media (max-width: 1024px) { .p-enquiry__inner { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 720px) { .bbz-form { padding: 24px 18px; } .bbz-form__grid { grid-template-columns: 1fr; } }

/* Config cards (bare metal reference configurations) */
.p-box__head { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.p-box__head .p-box__badge { margin-bottom: 6px; }
.p-box__head .p-box__title { margin: 0; }
.p-chip { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 72px; height: 72px; padding: 6px; color: #fff; text-align: center; line-height: 1.05; background: var(--green-900); border-radius: 10px; box-shadow: inset 0 0 0 3px rgba(255,255,255,.12); }
.p-chip--amd { background: var(--ink); }
.p-chip small { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.p-chip strong { font-size: 17px; font-weight: 700; margin: 2px 0; }
.p-chip em { font-size: 9.5px; font-style: normal; opacity: .85; }
.p-chip--img { object-fit: contain; background: #fff; box-shadow: none; border: 1px solid var(--line); }
.p-cards--config .p-box__sub { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--ink); }
.p-cards--config .p-box__body { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.p-cards--config .p-box__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.p-cards--config .p-box__meta div { flex-direction: column; justify-content: flex-start; gap: 2px; padding: 0; border: 0; }
.p-cards--config .p-box__meta dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.p-cards--config .p-box__meta dd { font-size: 15px; line-height: 1.35; text-align: left; }
.p-cards--config .p-box__price strong { font-size: 30px; }
.p-box__cpu { margin: 4px 0 0; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--muted); }
.p-cards--config .p-box__head { margin-bottom: 16px; }

/* Category hubs */
.p-hero__links { padding: 26px 28px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; }
.p-hero__links p { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #b9f0b2; }
.p-hero__links li + li { border-top: 1px solid rgba(255,255,255,.14); }
.p-hero__links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; font-size: 18px; font-weight: 700; color: #fff; }
.p-hero__links a:hover { color: #b9f0b2; }
.p-links__grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.p-links__grid--2 { grid-template-columns: repeat(2, 1fr); }
.p-link { position: relative; display: flex; flex-direction: column; padding: 32px 30px; background: #fff; border: 1px solid var(--line); border-radius: 8px; transition: border-color .2s, box-shadow .2s; }
.p-link:hover { border-color: #c9dcc6; box-shadow: var(--shadow); }
.p-link h3 { font-size: 22px; margin-bottom: 10px; }
.p-link h3 a { color: var(--ink); }
.p-link h3 a::after { content: ""; position: absolute; inset: 0; }
.p-link:hover h3 a { color: var(--green-600); }
.p-link p { margin: 0 0 16px; font-size: 16px; line-height: 1.65; color: #3f4552; }
.p-link__tagline { font-weight: 700; color: var(--green-900) !important; }
.p-link__points { margin: 0 0 18px; }
.p-link__points li { display: flex; gap: 10px; padding: 5px 0; font-size: 15px; }
.p-link__points .icon { flex: 0 0 auto; margin-top: 4px; color: var(--green-600); }
.p-link__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--green-600); }
.p-callout { padding: 0 0 72px; background: #fafcfa; }
.p-features + .p-callout { padding-top: 0; }
.p-callout__box { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 32px 36px; background: var(--bg-mint); border-left: 4px solid var(--green-500); border-radius: 8px; }
.p-callout__icon { display: grid; place-items: center; width: 56px; height: 56px; color: var(--green-900); background: #d4f5cf; border-radius: 12px; }
.p-callout__text h2 { font-size: 26px; margin-bottom: 6px; }
.p-callout__text p:last-child { margin: 0; color: #3f4552; }
.p-callout .p-head__eyebrow { margin-bottom: 4px; }
@media (max-width: 1024px) {
	.p-links__grid { grid-template-columns: repeat(2, 1fr); }
	.p-callout__box { grid-template-columns: 1fr; }
	.p-hero__links { max-width: 520px; }
}
@media (max-width: 720px) {
	.p-links__grid, .p-links__grid--2 { grid-template-columns: 1fr; }
	.p-hero__links { display: none; }
}
@media (min-width: 1025px) { .p-grid:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }

/* Homepage on phones: the hub cards act as a jump menu at the top, then every section
   runs in one column. Previously the whole desktop homepage was hidden below 720px,
   which left phone visitors with the cards and nothing else — and no <h1> on the page. */
@media (max-width: 720px) {
	.section-nav { display: none; }
	.hero, .admin-bar .hero { min-height: 0; padding: 0; }
	.hero > .container { padding-block: 40px 36px; }
	.hero h1 { margin-bottom: 16px; }
	.hero__lead { margin-bottom: 0; font-size: 16.5px; }

	/* Bare metal: text over photo instead of side by side. */
	.split { grid-template-columns: 1fr; min-height: 0; }
	.split__text { max-width: none; margin-left: 0; padding: 40px var(--gutter); }
	.split__text > p:first-of-type { font-size: 17px; }
	.split p { font-size: 16px; }
	.split__partners { width: 240px; }
	.split__media { min-height: 240px; }

	/* Cyber: tabs become a scrolling chip row, laptop above the copy. */
	.tabs { grid-template-columns: 1fr; grid-template-areas: none; gap: 22px; }
	.tabs__list { grid-area: auto; flex-direction: row; flex-wrap: nowrap; gap: 8px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
	.tabs__list::-webkit-scrollbar { display: none; }
	.tabs__tab { flex: none; max-width: 170px; border-left: 0; border-bottom: 3px solid transparent; }
	.tabs__tab[aria-selected="true"] { border-left: 0; border-bottom-color: var(--green-500); }
	.tabs__panel { grid-area: auto; }
	.cyber__below { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; padding-top: 20px; }
	.laptop { max-width: 360px; }
}

/* Narrow phones (iPhone SE and similar): the two hub buttons no longer fit side by side. */
@media (max-width: 360px) {
	.hub__cta { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Pricing page (templates/pricing.php + assets/js/pricing.js)
   ========================================================================== */
.p-hero--pricing { padding-bottom: 56px; }
.pricing { padding: 40px 0 80px; background: #fafcfa; }
.pricing__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.pricing__controls { position: sticky; top: calc(var(--header-h) + var(--secnav-h)); z-index: 20; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 28px; margin-bottom: 32px; padding: 18px 22px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(12, 30, 10, .06); }
.pricing__controls label, .seg legend { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pricing__controls select { display: block; margin-top: 6px; }
.pricing__hint { flex: 1 1 220px; margin: 0; font-size: 14px; color: var(--muted); }
.pricing select, .pricing input[type="number"] { font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid #cfd8cd; border-radius: 6px; }
.pricing select { padding: 10px 12px; max-width: 100%; }
.seg { margin: 0; padding: 0; border: 0; }
.seg legend { padding: 0; margin-bottom: 6px; }
.seg label { position: relative; display: inline-block; cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: inline-block; padding: 10px 16px; font-size: 15px; font-weight: 700; color: var(--muted); background: #fff; border: 1px solid #cfd8cd; }
.seg label:first-of-type span { border-radius: 6px 0 0 6px; }
.seg label:last-of-type span { border-radius: 0 6px 6px 0; margin-left: -1px; }
.seg input:checked + span { color: #fff; background: var(--green-900); border-color: var(--green-900); }
.seg input:focus-visible + span { outline: 3px solid var(--green-500); outline-offset: 2px; }
.seg--inline { margin: 0 0 18px; }

.pr-sec { padding: 8px 0 40px; scroll-margin-top: calc(var(--header-h) + var(--secnav-h) + 110px); }
.pr-sec + .pr-sec { border-top: 1px solid var(--line); padding-top: 40px; }
.pr-sec h2 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 8px; }
.pr-sec__intro { margin: 0 0 24px; font-size: 17px; color: #3f4552; }
.pr-table { margin-bottom: 28px; }
.pr-table h3, .pr-extras h3 { font-size: 20px; margin-bottom: 4px; }
.pr-table > p, .pr-extras > p { margin: 0 0 12px; font-size: 15px; color: var(--muted); }
.pr-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pr-table th, .pr-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pr-table thead th { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--green-900); }
.pr-table tbody th { font-weight: 700; color: var(--ink); }
.pr-table .r { text-align: right; }
.pr-table tbody tr:last-child > * { border-bottom: 0; }
.pr-table tr.on { background: #eaf7e7; }
.pr-table tr.na { opacity: .45; }
.pr-table tr.na th::after { content: " · not in this region"; font-weight: 400; color: var(--muted); }
.qty { display: inline-flex; align-items: stretch; border: 1px solid #cfd8cd; border-radius: 6px; overflow: hidden; background: #fff; }
.qty__btn { width: 30px; font-size: 16px; font-weight: 700; color: var(--green-900); background: var(--bg-mint); border: 0; }
.qty__btn:hover:not(:disabled) { background: #d4f5cf; }
.qty__btn:disabled { color: #b6bdb4; cursor: not-allowed; }
.qty input { width: 56px; padding: 6px 4px; font-size: 15px !important; text-align: center; border: 0 !important; border-radius: 0 !important; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
tr.on .qty { border-color: var(--green-500); }
.pr-extras { margin-bottom: 20px; padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.pr-extras__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 20px; margin-top: 14px; }
.pr-extras__grid--4 { grid-template-columns: repeat(4, 1fr); }
.pr-extras__grid label { position: relative; display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.pr-extras__grid label.na { opacity: .45; }
.pr-extras__grid small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
/* The grid stretches every label to the tallest in its row, so the control has to be
   pushed to the bottom. Without this a label with a short caption leaves its field
   floating mid-cell while the unit, anchored to the label's bottom edge, drifts below
   it. A fixed field height then lets the unit centre itself over the field instead of
   relying on a magic offset. */
.pr-extras__grid input, .pr-extras__grid select { width: 100%; height: 42px; margin-top: auto; padding: 0 12px; font: inherit; font-size: 15px; font-weight: 400; }
.pr-extras__grid label:has(> span) input { padding-right: 52px; }
.pr-extras__grid label > span { position: absolute; right: 12px; bottom: 0; display: flex; align-items: center; height: 42px; font-size: 13px; font-weight: 400; color: var(--muted); pointer-events: none; }
.pr-rates { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.pr-rates li { padding: 2px 0; }
.pr-note { font-size: 15px; color: var(--muted); }

.pricing__summary { position: sticky; top: calc(var(--header-h) + var(--secnav-h) + 16px); }
.est { padding: 26px 24px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--green-500); border-radius: 10px; box-shadow: var(--shadow); }
.est h2 { font-size: 22px; margin-bottom: 4px; }
.est__region { margin: 0 0 16px; font-size: 14px; color: var(--muted); }
.est__lines { max-height: calc(100vh - 460px); min-height: 60px; overflow-y: auto; margin-bottom: 16px; }
.est__empty { margin: 0; font-size: 15px; color: var(--muted); }
.est__group + .est__group { margin-top: 12px; }
.est__group p { display: flex; justify-content: space-between; margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--ink); }
.est__group li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 13px; color: var(--muted); }
.est__group li span:first-child { overflow: hidden; text-overflow: ellipsis; }
.est__group li span:last-child { flex: 0 0 auto; }
.est__total { margin: 0 0 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.est__total div { display: flex; justify-content: space-between; align-items: baseline; }
.est__total dt { font-size: 14px; color: var(--muted); }
.est__total dd { margin: 0; font-weight: 700; color: var(--green-900); }
.est__total div:first-child dd { font-size: 30px; }
.est__actions { display: grid; gap: 8px; }
.est__actions .btn { justify-content: center; }
.est__reset { justify-self: center; padding: 4px; font-size: 14px; color: var(--muted); background: none; border: 0; text-decoration: underline; }
.est__note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.est-bar { display: none; }

@media (max-width: 1180px) {
	.pricing__layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
	.pr-extras__grid, .pr-extras__grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
	.pricing__layout { grid-template-columns: minmax(0, 1fr); }
	.pricing__summary { position: static; }
	.est__lines { max-height: none; }
	.pricing__controls { top: var(--header-h); }
	.est-bar:not([hidden]) { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; color: #fff; background: var(--green-900); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
	.est-bar strong { margin-left: auto; font-size: 17px; }
	.est-bar:hover { color: #fff; }
}
@media (max-width: 720px) {
	.pricing { padding-top: 24px; }
	.pricing__controls { position: static; padding: 16px; }
	.pr-extras { padding: 18px 16px; }
	.pr-extras__grid, .pr-extras__grid--4 { grid-template-columns: 1fr; }
	.pr-table th, .pr-table td { padding: 9px 10px; font-size: 14px; }
	.pr-table tr.na th::after { content: ""; }
}
.seg label { text-transform: none; letter-spacing: 0; }
.pricing .p-tabs { margin-bottom: 8px; }
.pricing .p-tabs__panel .pr-table h3 { margin-top: 4px; }
.p-tabs__tab.has-qty::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; vertical-align: middle; background: var(--green-500); border-radius: 50%; }

/* ==========================================================================
   Converted pages (page.php + inc/legacy-content.php): legal, security, NOC, availability …
   ========================================================================== */
.p-hero--page { padding: 56px 0 60px; }
.p-hero__title { margin: 0 0 14px; font-size: clamp(34px, 4vw, 50px); font-weight: 700; line-height: 1.08; color: #fff; }
.legacy-content { padding-top: 48px; padding-bottom: 72px; }
.prose { font-size: 17px; line-height: 1.75; color: #2a2f3a; }
.prose > * { max-width: 860px; }
.prose > .legacy-row, .prose > div { max-width: none; }
.prose h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 1.6em 0 .5em; }
.prose h3 { font-size: 21px; margin: 1.4em 0 .4em; }
.prose ul, .legacy-content .bwz-legal-content ul, .legacy-content .bwz-legal-content ol { margin: 0 0 1.2em; padding-left: 1.3em; list-style: disc; }
.prose ol { margin: 0 0 1.2em; padding-left: 1.3em; list-style: decimal; }
.prose a, .bwz-legal-content a { text-decoration: underline; text-underline-offset: 2px; }
.prose table, .bwz-legal-content table { width: 100%; margin: 0 0 1.5em; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td, .bwz-legal-content th, .bwz-legal-content td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose thead th, .bwz-legal-content thead th { font-weight: 700; color: var(--ink); background: var(--bg-mint); }
.legacy-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin: 0 0 24px; }
.legacy-col--card { min-width: 0; padding: 26px 26px 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); transition: border-color .2s, box-shadow .2s; }
.legacy-col--card:hover { border-color: rgba(78,172,71,.45); }
.legacy-col--card .legacy-row, .legacy-col--card .legacy-col { display: block; margin: 0; }
.legacy-col--card h2 { margin: 0 0 12px; font-size: 20px; line-height: 1.3; }
.legacy-card__title { display: flex; align-items: center; gap: 12px; }
.legacy-card__icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; color: var(--green-800); background: var(--bg-mint); border-radius: 10px; }
.legacy-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; font-size: 16px; font-weight: 600; line-height: 1.4; text-decoration: none !important; border-top: 1px solid var(--line); }
.legacy-link::after { content: "→"; flex: none; color: var(--green-500); transition: transform .2s; }
.legacy-link:hover::after { transform: translateX(3px); }
.legacy-link:focus-visible { outline-offset: 0; border-radius: 4px; }

/* Legal & security documents */
.page-legacy--doc .legacy-content { padding-top: 40px; }
.bwz-legal-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr) 220px; gap: 44px; align-items: start; }
.bwz-legal-sidebar, .bwz-legal-toc { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; font-size: 14.5px; }
.bwz-legal-sidebar ul, .bwz-legal-toc ul { margin: 0 0 18px; padding: 0; list-style: none; }
.bwz-legal-sidebar li a, .bwz-legal-toc li a { display: block; padding: 5px 10px; color: #3f4552; border-left: 2px solid var(--line); }
.bwz-legal-sidebar li a:hover, .bwz-legal-toc li a:hover { color: var(--green-900); border-left-color: var(--green-500); }
.bwz-legal-sidebar a.bwz-active { font-weight: 700; color: var(--green-900); border-left-color: var(--green-600); background: var(--bg-mint); }
.bwz-sidebar-home { display: inline-block; margin-bottom: 18px; font-weight: 700; }
.bwz-sidebar-cat, .bwz-toc-title { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bwz-legal-content { min-width: 0; font-size: 16.5px; line-height: 1.75; color: #2a2f3a; }
.bwz-legal-breadcrumb { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--green-600); }
.bwz-legal-content h1 { margin: 6px 0 12px; font-size: clamp(30px, 3.2vw, 42px); }
.bwz-legal-content h2 { margin: 1.8em 0 .5em; font-size: 24px; scroll-margin-top: calc(var(--header-h) + 20px); }
.bwz-legal-content h3 { margin: 1.4em 0 .4em; font-size: 19px; scroll-margin-top: calc(var(--header-h) + 20px); }
.bwz-legal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 26px; padding-bottom: 18px; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--line); }
.bwz-legal-print { padding: 7px 14px; font-size: 14px; font-weight: 700; color: var(--green-900); background: var(--bg-mint); border: 1px solid #cfe5cb; border-radius: 6px; }
.bwz-legal-print:hover { background: #d4f5cf; }

/* Security overview (/security/) */
.bwz-sec-intro-bubble { display: block; margin-bottom: 32px; padding: 32px 34px; background: var(--bg-mint); border-left: 4px solid var(--green-500); border-radius: 10px; }
.bwz-sec-intro-bubble-icon, .bwz-sec-card-icon { display: none; }
.bwz-sec-intro-bubble h2 { margin-top: 0; }
.bwz-sec-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bwz-sec-badges-label { margin-top: 18px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bwz-sec-badge { padding: 6px 12px; font-size: 14px; font-weight: 700; color: var(--green-900); background: #d4f5cf; border-radius: 999px; }
.bwz-sec-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 40px; max-width: none !important; }
.bwz-sec-stat { padding: 22px; text-align: center; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--green-500); border-radius: 8px; }
.bwz-sec-stat-num { font-size: 36px; font-weight: 700; line-height: 1.1; color: var(--green-900); }
.bwz-sec-stat-label { font-size: 15px; color: var(--muted); }
.bwz-sec-grid { margin: 0 0 36px; max-width: none !important; }
.bwz-sec-grid-title { margin: 0 0 14px; font-size: 24px; font-weight: 700; color: var(--ink); }
.bwz-sec-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.prose .bwz-sec-card { position: relative; display: block; padding: 26px 24px; color: inherit; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; transition: box-shadow .2s, border-color .2s; }
.bwz-sec-card:hover { border-color: #c9dcc6; box-shadow: var(--shadow); }
.bwz-sec-card-arrow { position: absolute; top: 18px; right: 20px; font-size: 24px; color: var(--green-500); }
.bwz-sec-card-cat { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-600); }
.bwz-sec-card h3 { margin: 6px 0 8px; font-size: 20px; color: var(--ink); }
.bwz-sec-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.bwz-sec-contact { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin-top: 12px; padding: 30px 32px; color: #fff; background: var(--green-900); border-radius: 10px; max-width: none !important; }
.bwz-sec-contact h2 { margin: 0 0 6px; color: #fff; }
.bwz-sec-contact p { margin: 0; color: rgba(255,255,255,.85); }
.bwz-sec-contact-links { display: grid; gap: 8px; }
.prose .bwz-sec-contact-link { padding: 10px 16px; font-weight: 700; color: var(--green-900); text-decoration: none; background: #fff; border-radius: 6px; }

@media (max-width: 1180px) {
	.bwz-legal-wrap { grid-template-columns: 220px minmax(0, 1fr); }
	.bwz-legal-toc { display: none; }
}
@media (max-width: 1024px) {
	.bwz-sec-cards { grid-template-columns: repeat(2, 1fr); }
	.bwz-sec-contact { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
	.bwz-legal-wrap { grid-template-columns: 1fr; gap: 24px; }
	.bwz-legal-sidebar { position: static; max-height: none; order: 2; padding-top: 20px; border-top: 1px solid var(--line); }
	.bwz-sec-stats, .bwz-sec-cards { grid-template-columns: 1fr; }
}
@media print {
	.utility-bar, .site-header, .newsletter, .site-footer, .p-hero, .bwz-legal-sidebar, .bwz-legal-toc, .bwz-legal-print { display: none !important; }
	.bwz-legal-wrap { display: block; }
	.legacy-content { padding: 0; }
}
.legacy-col:has(> .legacy-col--card) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.legacy-col:has(> .legacy-col--card) > :not(.legacy-col--card) { grid-column: 1 / -1; }
.legacy-col:has(> .legacy-col--card) > p { max-width: 860px; margin-bottom: 0; }

/* Text + quote, timeline (About) */
.p-text__body { max-width: 860px; }
.p-text__inner--quote { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.p-text__inner--quote .p-text__body { max-width: none; }
.p-text__body p { font-size: 18px; line-height: 1.75; color: #2a2f3a; }
.p-quote { margin: 0; padding: 34px 32px; color: #fff; background: var(--green-900); border-radius: 12px; position: sticky; top: calc(var(--header-h) + var(--secnav-h) + 24px); }
.p-quote blockquote { margin: 0 0 20px; }
.p-quote blockquote p { margin: 0; font-size: 20px; line-height: 1.6; }
.p-quote blockquote p::before { content: "“"; display: block; font-size: 64px; line-height: .6; color: var(--green-400); }
.p-quote figcaption strong { display: block; font-size: 17px; }
.p-quote figcaption span { font-size: 15px; color: #b9f0b2; }
.p-timeline { background: var(--green-900); }
.p-timeline__list { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; margin: 0; padding: 0; list-style: none; }
.p-timeline__list li { padding: 22px 22px 20px; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-top: 3px solid var(--green-400); border-radius: 8px; }
.p-timeline__year { display: block; margin-bottom: 8px; font-size: 26px; font-weight: 700; color: var(--green-400); }
.p-timeline__list p { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.88); }
@media (max-width: 1024px) {
	.p-text__inner--quote { grid-template-columns: 1fr; gap: 28px; }
	.p-quote { position: static; }
	.p-timeline__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) { .p-timeline__list { grid-template-columns: 1fr; } }

/* Partner cards: light text link instead of a solid button */
.p-cards--partners .p-box__btn { align-self: flex-start; margin-top: auto; padding: 8px 0 0; color: var(--green-600); background: none; border: 0; }
.p-cards--partners .p-box__btn:hover { color: var(--green-900); background: none; }
.p-cards--partners .p-box__body { margin-bottom: 14px; font-size: 15px; }
.p-cards--partners .p-box__logo { width: 160px; height: 40px; margin-bottom: 16px; object-fit: contain; object-position: left center; }

/* ---------- Search & 404 ---------- */
.s-hero h1 { margin-bottom: 14px; }
.s-form { display: flex; max-width: 640px; margin-top: 26px; background: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.18); overflow: hidden; }
.s-form input { flex: 1; min-width: 0; padding: 16px 18px; font: inherit; font-size: 17px; color: var(--ink); border: 0; outline: 0; background: transparent; }
.s-form input::-webkit-search-cancel-button { cursor: pointer; }
.s-form button { display: inline-flex; align-items: center; gap: 8px; padding: 0 24px; font: inherit; font-weight: 700; color: #fff; background: var(--green-800); border: 0; cursor: pointer; transition: background .2s; }
.s-form button:hover { background: var(--green-900); }
.s-form:focus-within { box-shadow: 0 0 0 3px var(--green-500), 0 8px 30px rgba(0,0,0,.18); }
.s-count, .s-list, .s-empty > p { max-width: 860px; }
.s-count { margin: 0 0 8px; font-size: 15px; color: var(--muted); }
.s-list { margin: 0; padding: 0; list-style: none; }
.s-item { padding: 24px 0; border-bottom: 1px solid var(--line); }
.s-item__label { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-800); }
.s-item h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.3; }
.s-item h2 a { color: var(--ink); text-decoration: none; }
.s-item h2 a:hover { color: var(--green-800); text-decoration: underline; text-underline-offset: 3px; }
.s-item p { margin: 0; color: var(--text); line-height: 1.6; }
.s-item .s-item__url { margin-top: 6px; font-size: 14px; color: var(--muted); }
.s-item mark, .s-empty mark { padding: 0 2px; color: inherit; background: var(--bg-mint); border-radius: 3px; box-shadow: inset 0 -2px 0 rgba(78,172,71,.45); }
.s-empty h2 { margin: 0 0 10px; font-size: 26px; }
.s-empty > p { max-width: 720px; margin: 0 0 24px; }
.s-popular { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; margin: 20px 0 32px; padding: 0; list-style: none; }
.s-popular a { display: flex; gap: 14px; align-items: flex-start; height: 100%; padding: 20px; color: var(--ink); text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.s-popular a:hover { border-color: rgba(78,172,71,.45); box-shadow: var(--shadow); }
.s-popular__icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; color: var(--green-800); background: var(--bg-mint); border-radius: 10px; }
.s-popular strong { display: block; margin-bottom: 2px; font-size: 17px; }
.s-popular small { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); }
.s-empty__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 560px) {
	.s-form button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.s-form button { padding: 0 18px; }
}

/* Configurator v2: searchable catalogue, build list, rack elevation */
.p-config__pick{border:1px solid var(--line,#e3e8e2);border-radius:10px;padding:14px;background:#fff;margin-bottom:14px}
.p-config__pick .p-config__search{display:flex;align-items:center;gap:9px;margin:0;padding:0 12px;height:42px;font-weight:400;border:1px solid var(--line,#e3e8e2);border-radius:8px;background:#fff}
.p-config__pick .p-config__search:focus-within{border-color:var(--green-500,#2f8a28)}
.p-config__pick .p-config__search svg{flex:0 0 18px;opacity:.55}
.p-config__pick .p-config__search input{flex:1 1 auto;width:100%;min-width:0;height:100%;margin:0;padding:0;border:0;outline:0;background:transparent;font:inherit;font-size:15px;font-weight:400;color:var(--ink);appearance:none;-webkit-appearance:none;text-overflow:ellipsis}
.p-config__pick .p-config__search input::placeholder{color:#8a929c;opacity:1}
.p-config__cats{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.p-config__cat{font:inherit;font-size:13px;font-weight:700;padding:6px 14px;border-radius:999px;
 border:1px solid var(--line,#e3e8e2);background:#fff;color:var(--ink,#181b31);cursor:pointer}
.p-config__cat:hover{border-color:var(--green-500,#4eac47);color:var(--green-600,#2f8a28)}
.p-config__cat.is-on{background:var(--green-600,#2f8a28);border-color:var(--green-600,#2f8a28);color:#fff}
/* Brand is the second cut, so it sits quieter and under a hairline. */
.p-config__cats + .p-config__vendors{margin-top:10px;padding-top:10px;border-top:1px solid var(--line,#e3e8e2)}
.p-config__vendors{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.p-config__vendor{font:inherit;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--line,#e3e8e2);background:#fff;color:#5b6270;cursor:pointer}
.p-config__vendor.is-on{background:#0c4d08;border-color:#0c4d08;color:#fff}
.p-config__results{list-style:none;margin:8px 0 0;padding:0;max-height:300px;overflow-y:auto}
.p-config__results li+li{margin-top:2px}
button.p-config__result{display:block;width:100%;text-align:left;font:inherit;background:transparent;border:0;border-radius:6px;padding:7px 10px;cursor:pointer}
button.p-config__result:hover,button.p-config__result:focus-visible{background:#f4f9f3}
.p-config__result-name{display:block;font-weight:600;font-size:14px}
.p-config__result-meta{display:block;font-size:12px;color:#5b6270}
.p-config__result.is-empty{font-size:13px;color:#5b6270;padding:8px 10px}
.p-config__buildlist{list-style:none;margin:0 0 10px;padding:0;counter-reset:bl}
.p-config__buildlist .p-config__equip-row{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;padding:6px 8px;border:1px solid var(--line,#e3e8e2);border-radius:8px;background:#fff}
.p-config__buildlist .p-config__equip-row+.p-config__equip-row{margin-top:6px}
.p-config__equip-row.is-dragging{opacity:.45}
.p-config__grip{cursor:grab;background:transparent;border:0;font-size:15px;color:#9aa3ad;padding:0 2px;line-height:1}
.p-config__equip-name{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:600;line-height:1.25}
.p-config__buildlist .p-config__equip-qty{display:flex;align-items:center;gap:4px;margin:0;flex:0 0 auto}
.p-config__buildlist .p-config__equip-qty span{font-size:11px;color:#5b6270;text-transform:uppercase;letter-spacing:.04em}
.p-config__buildlist .p-config__equip-qty input{width:52px;height:30px;padding:0 6px;font:inherit;font-size:13px;border:1px solid var(--line,#e3e8e2);border-radius:5px;text-align:center}
.p-config__buildlist .p-config__equip-custom{display:flex;align-items:center;gap:4px;margin:0;flex:0 0 auto}
.p-config__buildlist .p-config__equip-custom[hidden]{display:none}
.p-config__buildlist .p-config__equip-custom span{font-size:11px;color:#5b6270}
.p-config__buildlist .p-config__equip-custom input{width:62px;height:30px;padding:0 6px;font:inherit;font-size:13px;border:1px solid var(--line,#e3e8e2);border-radius:5px;text-align:center}
.p-config__buildlist .p-config__equip-remove{flex:0 0 auto;width:26px;height:26px;border:1px solid var(--line,#e3e8e2);border-radius:5px;background:#fff;color:#5b6270;font-size:15px;line-height:1;cursor:pointer;padding:0}
.p-config__rack{margin:18px 0 0;padding:0}
.p-config__rack figcaption{font-size:12px;color:#5b6270;margin-bottom:8px}
.p-config__rack-art{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.p-config__rack-one{text-align:center}
.p-config__rack-one .rack{width:240px;height:auto;display:block}
.p-config__rack-label{display:block;font-size:12px;font-weight:600;color:#5b6270;margin-top:6px}
.p-config__rack-empty{font-size:13px;color:#5b6270;margin:8px 0 0}
.p-config__group--equip{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:20px;align-items:start}
.p-config__group--equip legend{grid-column:1/-1}
.p-config__group--equip .p-config__rack{position:sticky;top:90px;margin:0}
@media (max-width:900px){.p-config__group--equip{grid-template-columns:1fr}.p-config__group--equip .p-config__rack{position:static}}
@media (max-width:640px){.p-config__equip-name{min-width:100%}.p-config__rack-one .rack{width:200px}}
.p-config__fact{display:flex;gap:9px;align-items:flex-start;margin:0;padding:11px 13px;border-radius:8px;background:#f4f9f3;border:1px solid #dcebd9;font-size:14px;line-height:1.5}
.p-config__fact svg{flex:0 0 18px;margin-top:2px;color:#2f8a28}

/* Calculator mode: the rack is the point, so give it the room and shrink the totals panel. */
.p-config__form--calc .p-config__layout{grid-template-columns:minmax(0,1fr) 280px;gap:26px}
.p-config__form--calc .p-config__group--equip{grid-template-columns:minmax(0,1fr) 360px}
.p-config__form--calc .p-config__rack-one .rack{width:350px}
.p-config__form--calc .p-config__summary{padding:20px 18px}
.p-config__form--calc .p-config__summary h3{font-size:17px}
.p-config__form--calc .p-config__row dd{font-size:14px}
@media (max-width:1100px){.p-config__form--calc .p-config__group--equip{grid-template-columns:minmax(0,1fr) 260px}.p-config__form--calc .p-config__rack-one .rack{width:250px}}
@media (max-width:900px){.p-config__form--calc .p-config__layout{grid-template-columns:1fr}.p-config__form--calc .p-config__group--equip{grid-template-columns:1fr}}



/* /noc/ — the AS200851 network summary. */
.p-net{padding:40px 0 8px}
.p-net__head{max-width:62ch;margin-bottom:26px}
.p-net__eyebrow{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-600)}
.p-net h2{font-size:28px;margin:0 0 10px}
.p-net__lead{margin:0;font-size:16px;line-height:1.6;color:#4a5260}
.p-net__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;margin:0 0 22px;
 background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.p-net__facts>div{background:#fff;padding:13px 16px}
.p-net__facts dt{margin:0 0 3px;font-size:12px;color:var(--muted)}
.p-net__facts dd{margin:0;font-size:15px;font-weight:700;color:var(--ink)}
.p-net__facts dd a{display:inline-flex;align-items:center;gap:5px;color:var(--green-600)}
.p-net__grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:900px){.p-net__grid{grid-template-columns:1fr 1fr}}
.p-net__card{border:1px solid var(--line);border-radius:10px;padding:18px 20px;background:#fff}
.p-net__card h3{font-size:16px;margin:0 0 10px}
.p-net__note{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.p-net__card h3+.p-net__note{margin:0 0 12px}
.p-net__table{width:100%;border-collapse:collapse;font-size:13.5px}
.p-net__table th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
 font-weight:700;padding:0 8px 6px 0;border-bottom:1px solid var(--line)}
.p-net__table td{padding:9px 8px 9px 0;border-bottom:1px solid #f0f3f0;vertical-align:top;line-height:1.7}
.p-net__table td:last-child{white-space:nowrap;text-align:right;padding-right:0;font-weight:700}
.p-net__table th:last-child{text-align:right;padding-right:0}
.p-net__table tr:last-child td{border-bottom:0}
.p-net__table td span{display:block;font-size:12px;color:var(--muted);font-weight:400}
.p-net code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--ink)}
.p-net__prefix-label{margin:12px 0 5px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.p-net__card h3+.p-net__note+.p-net__prefix-label{margin-top:0}
.p-net__prefixes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.p-net__prefixes li{background:var(--bg-mint);border:1px solid #dcebd9;border-radius:6px;padding:4px 9px}
.p-net__list{list-style:none;margin:0;padding:0}
.p-net__list li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #f0f3f0;font-size:14px}
.p-net__list li:last-child{border-bottom:0}
.p-net__list span{color:var(--muted);font-size:13px;white-space:nowrap}
.p-net__contacts{display:flex;flex-wrap:wrap;gap:18px;margin:18px 0 0;font-size:13.5px;color:var(--muted)}
.p-net__contacts a{color:var(--green-600)}
@media (max-width:640px){.p-net{padding-top:28px}.p-net h2{font-size:24px}}


/* ── Appointment booking (template-parts/product/booking.php) ───────────────── */
/* Two modes: an embedded Nextcloud booking page, or a card linking out to it.
   The link-out is the default because Nextcloud sends X-Frame-Options SAMEORIGIN
   and the frame renders blank until that is relaxed for the booking path. */
.p-booking__frame {
  position: relative; width: 100%; max-width: 860px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff;
}
.p-booking__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.p-booking__fallback {
  margin: 14px auto 0; max-width: 860px; text-align: center;
  font-size: 15px; color: var(--muted);
}
.p-booking__cta {
  max-width: 640px; margin: 0 auto; text-align: center;
  padding: 36px 28px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.p-booking__cta .btn { font-size: 17px; padding: 14px 30px; }
.p-booking__note { margin-top: 14px; font-size: 15px; color: var(--muted); line-height: 1.55; }
@media (max-width: 720px) {
  .p-booking__frame { border-radius: 10px; }
  .p-booking__cta { padding: 28px 20px; }
}