/*
Theme Name: WPZEE 2027
Theme URI: https://wpzee.com/
Author: WPZee
Author URI: https://wpzee.com/
Description: Hand-built classic theme for wpzee.com — the Elementor replacement. One stylesheet, one deferred script, no jQuery, no page builder.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpzee-2027
Tags: custom-menu, custom-logo, editor-style, featured-images
*/

/* =====================================================================
   wpzee-2027 — single stylesheet. Layer order IS the cascade:
     1 TOKENS      :root custom properties (+ their responsive blocks)
     2 BASE        : element defaults, focus ring, print, reduced motion
     3 LAYOUT      : container/section primitives, chrome skeleton, main height
     4 COMPONENTS  : the component inventory (style system §6)
     5 PAGE        : one banner per page/template scope, props + page-only rules
   Provenance: `kit` = Elementor kit post 6, `H47`/`F63` = header template 47 /
   footer template 63, `customizer` = post 45, `hello:reset`/`hello:theme` =
   hello-elementor 3.5.1. Every number comes from docs/research/style-sources.md
   (the inventory) and docs/plans/style-system.md (the design).  Commands to
   re-extract any value: style-sources §14.
   ===================================================================== */

/* ==== 1. TOKENS =====================================================
   :root only. One token per recurring literal, each with provenance. One-offs
   stay inline at their use site (style system §2). Elementor's --e-global-*
   names are deliberately not aliased anywhere.
   ==================================================================== */
:root {
	/* --- colour --- */
	--wpz-ink: #000000;              /* kit: --e-global-color-primary/-text */
	--wpz-white: #FFFFFF;
	--wpz-grey: #F0F0F0;             /* menu toggle bg, `code` bg (customizer) */
	--wpz-border: #F0F0F9;           /* kit: --e-global-color-ac66228 "Border" */
	--wpz-surface-hover: #F9FAFD;    /* nav dropdown hover, header surfaces */
	--wpz-surface-alt: #F7F7F7;      /* review-strip card bg */
	--wpz-bg-pink: #FFEEF3;          /* kit: -9f7181c */
	--wpz-bg-blue: #F1F1FA;          /* kit: -3e1e355 */
	--wpz-bg-green: #EEF7F8;         /* kit: -bdd6625 */
	--wpz-bg-yellow: #FFFCEE;        /* kit: -684c5be */
	--wpz-accent-green: #54D6A8;     /* card icons — not in the kit palette */
	--wpz-accent-green-deep: #2CC492;/* icon-list icons — not in the kit palette */
	--wpz-accent-teal: #49A1AC;      /* kit: -e573858 "Green Dark" (teal shadow) */
	--wpz-icon-navy: #324A6D;        /* footer icon-list icons */
	--wpz-link-hover: #4848FF;       /* kit: link_hover_color */
	--wpz-header-glass: #FFFFFFC7;   /* H47 sticky bar */
	--wpz-cta-hover: #1F1F33B8;      /* H47 header CTA hover */
	--wpz-nav-pointer-top: #FFFFFF42;
	--wpz-nav-pointer-main: #35355F26;
	--wpz-btn-shadow-pink: rgba(255, 126, 180, .55);
	--wpz-btn-shadow-blue: rgba(135, 135, 253, .55);
	--wpz-btn-shadow-green: rgba(139, 243, 255, .5);
	--wpz-btn-shadow-yellow: rgba(255, 234, 134, .5);
	/* Unreferenced kit palette entries, seen and rejected (not missed):
	   secondary=primary=#000000, accent #FF7EB4, Blue #8787FD, Shadow Blue
	   #8787FD80, Green #8BF3FF. They style nothing in the rendered site. */

	/* --- type --- */
	--wpz-font: "Quicksand", sans-serif;
	--wpz-fs-h1: 58px; --wpz-fs-h2: 40px; --wpz-fs-h3: 28px;
	--wpz-fs-h4: 24px; --wpz-fs-h5: 20px; --wpz-fs-h6: 16px;
	--wpz-fs-lead: 18px;   /* feature-card headings/bodies */
	--wpz-fs-ui: 16px;     /* body, links, nav, footer lists */
	--wpz-fs-label: 14px;  /* small labels, tablet nav/CTA */
	--wpz-fs-post: 20px;   /* blog post body */
	--wpz-lh-heading: 1.25em; --wpz-lh-body: 1.6em; --wpz-lh-tight: 1em; --wpz-lh-post: 1.5;

	/* --- layout --- */
	--wpz-container: 1140px;
	--wpz-pad-x: 30px; --wpz-pad-y: 50px; --wpz-gap: 20px; --wpz-gap-sm: 15px;

	/* --- shape --- */
	--wpz-radius-media: 4px; --wpz-radius-card: 5px; --wpz-radius-tab: 10px;
	--wpz-radius-tabs: 15px; --wpz-radius-menu: 20px; --wpz-radius-pill: 21px;
	--wpz-radius-btn: 30px; --wpz-radius-block: 40px;

	/* --- elevation --- */
	--wpz-shadow-card: 0px 10px 20px 0px #F0F0F9;
	--wpz-shadow-card-lg: 0px 20px 30px 0px #F0F0F9;
	--wpz-shadow-card-xl: 0px 10px 30px 0px #F0F0F9;
	--wpz-shadow-card-hover: 0px 20px 30px -18px rgba(0, 0, 0, .5), inset -2px -7px 28px rgba(0, 0, 0, .1);
	--wpz-shadow-tabs: 0 10px 16px #F0F0F9;
	--wpz-shadow-teal: 0px 12px 30px 0px rgba(73, 161, 172, .22);

	/* --- motion --- */
	--wpz-t-meta: .3s;     /* background, border, border-radius, box-shadow */
	--wpz-t-lift: .4s;     /* container hover translateY */
	--wpz-t-btn: .3s;      /* button all */
}
@media (max-width: 1024px) {
	:root { --wpz-fs-h1: 40px; --wpz-fs-h2: 32px; --wpz-container: 1024px; }
}
@media (max-width: 767px) {
	:root { --wpz-fs-h1: 32px; --wpz-fs-h2: 24px; --wpz-container: 767px; }
}


/* --- fonts: Quicksand, self-hosted (style system §8) ----------------
   All 15 rules verbatim from uploads/elementor/google-fonts/css/quicksand.css
   (5 weights x 3 subsets, same file per subset); only the src paths are
   rewritten to assets/fonts/. font-display and unicode-range are unchanged;
   do not collapse to 3 rules with a font-weight range.
   Files (byte-identical copies): latin 28,360 B, latin-ext 26,752 B,
   vietnamese 8,840 B. Weights rendered today: 700 / 400 / 500. */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/quicksand-6xktdszam9ie8kbpra_hjfqncom.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/quicksand-6xktdszam9ie8kbpra_hjvqncom.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/quicksand-6xktdszam9ie8kbpra_hk1qn.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/quicksand-6xktdszam9ie8kbpra_hjfqncom.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/quicksand-6xktdszam9ie8kbpra_hjvqncom.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/quicksand-6xktdszam9ie8kbpra_hk1qn.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/quicksand-6xktdszam9ie8kbpra_hjfqncom.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/quicksand-6xktdszam9ie8kbpra_hjvqncom.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/quicksand-6xktdszam9ie8kbpra_hk1qn.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/quicksand-6xktdszam9ie8kbpra_hjfqncom.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/quicksand-6xktdszam9ie8kbpra_hjvqncom.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/quicksand-6xktdszam9ie8kbpra_hk1qn.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/quicksand-6xktdszam9ie8kbpra_hjfqncom.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/quicksand-6xktdszam9ie8kbpra_hjvqncom.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/quicksand-6xktdszam9ie8kbpra_hk1qn.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==== 2. BASE =======================================================
   Element defaults reproducing the computed result of hello:reset +
   hello:theme + the kit's global element rules (style system §3). Not a
   vendored normalize; no third-party reset.
   ==================================================================== */
/* hello:reset's `body{overflow-x:clip}` clips the body box only, so a closed drawer
   panel that sticks out of the viewport (its stretched `width: 100vw` sits at the nav's
   x until theme.js re-anchors it) widened the document to 720px on a 390px viewport and
   the correction reflowed the page — a 0.135 CLS on `/`, the one CWV hard gate (#10 §7).
   `clip` (not `hidden`) on the root keeps sticky working and makes the layout identical
   to production's, where the closed panel is a zero-size box. Measured: CLS 0.135 →
   0.002, no pixel change at any gate viewport. */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; scroll-behavior: auto; overflow-x: clip; }
*, :after, :before { box-sizing: border-box; }

/* hello:reset, overridden by kit: body */
body {
	background-color: var(--wpz-white);
	color: var(--wpz-ink);
	font-family: var(--wpz-font);
	font-size: var(--wpz-fs-ui);
	font-weight: 400;
	line-height: var(--wpz-lh-body);
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

/* hello:reset margins + kit colour/line-height + kit h1/h2 sizes */
h1, h2, h3, h4, h5, h6 {
	color: var(--wpz-ink);
	font-weight: 700;
	line-height: var(--wpz-lh-heading);
	margin-block: .5rem 1rem;
}
h1 { font-size: var(--wpz-fs-h1); }
h2 { font-size: var(--wpz-fs-h2); }
h3 { font-size: var(--wpz-fs-h3); }
h4 { font-size: var(--wpz-fs-h4); }
h5 { font-size: var(--wpz-fs-h5); }
h6 { font-size: var(--wpz-fs-h6); }

p { margin-block: 0 .9rem; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace; font-size: 1em; white-space: pre-wrap; }

/* kit a: ink, underlined, 16px; hover --wpz-link-hover (the kit's 700 hover
   weight is set in meta but never emitted — do not add it). */
a {
	background-color: transparent;
	color: var(--wpz-ink);
	font-family: var(--wpz-font);
	font-size: var(--wpz-fs-ui);
	font-weight: 400;
	line-height: var(--wpz-lh-body);
	text-decoration: underline;
}
a:hover { color: var(--wpz-link-hover); }
a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover { color: inherit; text-decoration: none; }
a:not([href]):not([tabindex]):focus { outline: 0; }

abbr[title] { border-block-end: none; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -.25em; }
sup { top: -.5em; }
img { border-style: none; height: auto; max-width: 100%; }
details { display: block; }
summary { display: list-item; }
figcaption { color: #333; font-size: 16px; font-style: italic; font-weight: 400; line-height: 1.4; }
[hidden], template { display: none; }

/* hello:reset lists */
dd, dl, dt, li, ol, ul {
	background: transparent;
	border: 0;
	font-size: 100%;
	margin-block-end: 0;
	margin-block-start: 0;
	outline: 0;
	vertical-align: baseline;
}

/* hello:reset tables */
table { background-color: transparent; border-collapse: collapse; border-spacing: 0; font-size: .9em; margin-block-end: 15px; width: 100%; }
table td, table th { border: 1px solid hsla(0, 0%, 50%, .502); line-height: 1.5; padding: 15px; vertical-align: top; }
table th { font-weight: 700; }
table tfoot th, table thead th { font-size: 1em; }
table caption + thead tr:first-child td, table caption + thead tr:first-child th,
table colgroup + thead tr:first-child td, table colgroup + thead tr:first-child th,
table thead:first-child tr:first-child td, table thead:first-child tr:first-child th { border-block-start: 1px solid hsla(0, 0%, 50%, .502); }
table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th { background-color: hsla(0, 0%, 50%, .071); }
table tbody tr:hover > td, table tbody tr:hover > th { background-color: hsla(0, 0%, 50%, .102); }
table tbody + tbody { border-block-start: 2px solid hsla(0, 0%, 50%, .502); }
@media (max-width: 767px) {
	table table { font-size: .8em; }
	table table td, table table th { line-height: 1.3; padding: 7px; }
	table table th { font-weight: 400; }
}

/* hello:reset form controls */
label { display: inline-block; line-height: 1; vertical-align: middle; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 1rem; line-height: 1.5; margin: 0; }
input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], select, textarea {
	border: 1px solid #666;
	border-radius: 3px;
	padding: .5rem 1rem;
	transition: all .3s;
	width: 100%;
}
input[type=date]:focus, input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=time]:focus, input[type=url]:focus, select:focus, textarea:focus { border-color: #333; }
button, input { overflow: visible; }
button, select { text-transform: none; }
[type=button], [type=reset], [type=submit], button { -webkit-appearance: button; width: auto; }
[type=button], [type=submit], button {
	background-color: transparent;
	border: 1px solid #c36;
	border-radius: 3px;
	color: #c36;
	display: inline-block;
	font-size: 1rem;
	font-weight: 400;
	padding: .5rem 1rem;
	text-align: center;
	transition: all .3s;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	white-space: nowrap;
}
[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover { background-color: #c36; color: #fff; text-decoration: none; }
[type=button]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { cursor: pointer; }
fieldset { padding: .35em .75em .625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; resize: vertical; }
[type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; }
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; }
[type=search] { -webkit-appearance: textfield; outline-offset: -2px; }
[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
select { display: block; }

/* kit button base (button, input[type=button|submit], .btn-wpzee). The kit sets
   no hover background: :hover/:focus keep white text — and, because the ported
   hello:reset hover rule above still carries the hello theme's pink `#c36`, re-state
   the background here (same specificity, later source) so no semantic <button>
   acquires a hover colour the baseline's markup never met (measured: the pricing
   tabs went pink on hover). */
button, input[type="button"], input[type="submit"], .btn-wpzee {
	background-color: var(--wpz-ink);
	border-radius: var(--wpz-radius-btn);
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 700;
	line-height: 1em;
	padding: 14px 30px;
	text-decoration: none;
}
button:hover, button:focus,
input[type="button"]:hover, input[type="button"]:focus,
input[type="submit"]:hover, input[type="submit"]:focus { background-color: var(--wpz-ink); color: #FFFFFF; }
.btn-wpzee:hover, .btn-wpzee:focus { color: #FFFFFF; }

/* focus ring (hello:reset) */
[tabindex]:not([tabindex="-1"]):focus-visible,
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	box-shadow: 0 0 0 4px #fff;
	outline: 2px solid #000;
	outline-offset: 2px;
}
[tabindex]:not([tabindex="-1"]):focus:not(:focus-visible),
a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:focus:not(:focus-visible),
select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) { box-shadow: none; outline: none; }

/* hello:theme alignment classes (used in post/legal content) */
.alignright { float: right; margin-left: 1rem; }
.alignleft { float: left; margin-right: 1rem; }
.aligncenter { clear: both; display: block; margin-inline: auto; }
.alignwide { margin-inline: -80px; }
.alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; overflow-x: hidden; width: 100vw; }
.alignfull img { width: 100%; }

/* print block — hello:reset verbatim, plus the reference's one print exception.
   The block reproduces hello's declarations; what it cannot reproduce here is the
   *cascade* they sit in. On the baseline reset.css is enqueued last (after
   Elementor's stylesheets), so its element-level rules win outright and the nav's
   own `.elementor-item:after` pointer scaffolding — content:'' display:block
   0x0 absolute — beats hello's `a[href]:after` suffix. The nav therefore never
   grows in print on the baseline (item boxes 65x26; header 142). This theme's nav
   links carry no ::after of their own, so they would take the suffix and wrap
   (header 275, top bar 136 vs 42) — the exception below re-states Elementor's
   suppression at equal specificity, after hello's rule. */
@media print {
	*, :after, :before { background: transparent !important; box-shadow: none !important; color: #000 !important; text-shadow: none !important; }
	a, a:visited { text-decoration: underline; }
	a[href]:after { content: " (" attr(href) ")"; }
	/* Elementor `.elementor-item:after` (H47 nav widgets) */
	a.wpz-menu__link:after, a.wpz-nav__link:after { content: ""; display: block; height: 0; position: absolute; width: 0; }
	abbr[title]:after { content: " (" attr(title) ")"; }
	a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }
	pre { white-space: pre-wrap !important; }
	blockquote, pre { -moz-column-break-inside: avoid; border: 1px solid #ccc; break-inside: avoid; }
	thead { display: table-header-group; }
	img, tr { -moz-column-break-inside: avoid; break-inside: avoid; }
	h2, h3, p { orphans: 3; widows: 3; }
	h2, h3 { -moz-column-break-after: avoid; break-after: avoid; }
}

/* smooth scrolling + reduced motion (behaviours-a11y §2.3/§2.6) */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	/* opponent: third-party stylesheets (CookieYes, Tawk, Mailchimp embed) */
	html * { transition-delay: 0s !important; transition-duration: 0s !important; }
	.animated { animation: none !important; }
}

/* ==== 3. LAYOUT =====================================================
   The container/section primitives, the chrome skeleton and main's height.
   Section internals are components (layer 4).
   ==================================================================== */

/* The boxed inner: capped, centred. Sections carry the side padding
   (the reference splits it the same way: padding-inline on the container,
   capped inner). `--wpz-container-width` lets a section be 768/828 (#11 §6.3). */
.wpz-container {
	margin-inline: auto;
	max-width: min(100%, var(--wpz-container-width, var(--wpz-container)));
}

/* Section block padding, per-section via one prop (#11 §6.3); values come from
   the reference (Appendix A.1 of the inventory), never from a convention. */
.wpz-section {
	padding: var(--wpz-section-padding, var(--wpz-pad-y) var(--wpz-pad-x));
}

.wpz-grid { display: grid; gap: var(--wpz-gap); }

/* main has no height floor. Style system §4 re-expressed hello's
   `.site-header+.elementor` as `main#content{min-height:calc(100vh - 320px)}`,
   but that hello rule never matched the baseline (hello prints `.site-header`;
   the reference's header is `<header class="elementor ...">`), so the baseline
   has no floor. Measured 2026-10-12 on /blog/category/announcements/: baseline
   567.69 px tall @1440 and 462.59 @390; the floor made it 580 / 524 — 12.31 and
   61.41 px of surplus that pushed the footer down by the same amount. `main`
   hugs its content, exactly as the reference does. */

/* Anchor offset under the sticky bar (#8 §6): hardcoded, no observer, no JS.
   The three ids are the reference's in-page anchor targets. */
#services,
#features,
#pricing { scroll-margin-top: 100px; }

/* Chrome skeleton (visuals below, layer 4).
   Sticky is CSS only (#8 §6). The sticky element is the header itself, pinned with a
   negative top equal to the top bar's height: the top bar scrolls out of view and the
   main bar lands at top: 0 (the reference's JS position:fixed + spacer, without the JS
   and without a spacer). `.wpz-header__main` also declares sticky/top:0/z-index:1000 —
   it is the hook the state assertions read (the baseline's sticky element was the bar). */
.wpz-header {
	--wpz-topbar-h: 42px;
	position: sticky;
	top: calc(-1 * var(--wpz-topbar-h));
	z-index: 1000;
}
/* Logged-in visitors: WP's admin bar is fixed at the top of the viewport (z-index 99999)
   and is 32px tall — 46px at <=782px, both published by core as
   `--wp-admin--admin-bar--height`. The whole sticky header therefore parks that much lower,
   so the main bar lands *below* the bar instead of under it, which is how Elementor's sticky
   header behaved before the conversion. It has to be the header, not `.wpz-header__main`:
   a sticky child cannot leave its sticky parent's box, so a `top` on the main bar is clamped
   away. Scoped to `body.admin-bar`, and the parity gate captures logged out, so no gated
   pixel or state row can move because of this. */
body.admin-bar .wpz-header { top: calc(var(--wp-admin--admin-bar--height, 32px) - var(--wpz-topbar-h)); }
.wpz-header__main { position: sticky; top: 0; z-index: 1000; }
.wpz-footer { display: block; }

/* ==== 4. COMPONENTS =================================================
   The inventory of style system §6, grouped primitives -> utilities ->
   chrome -> sections -> widgets -> listing.
   ==================================================================== */

.wpz-icon { display: inline-block; fill: currentColor; height: 1em; line-height: 1; vertical-align: -.125em; width: 1em; }

/* --- utilities ------------------------------------------------------ */
/* The skip link markup is `class="skip-link screen-reader-text"` (#8 §7.1) — the
   `.screen-reader-text` pair below hides it and reveals it on focus; `.skip-link`
   is the stable hook the state assertion reads. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important; /* opponent: third-party stylesheets */
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #333;
	display: block;
	font-size: 1rem;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 12px 24px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* --- buttons -------------------------------------------------------- */
/* customizer: .btn-wpzee a — re-expressed on the anchor (the wrapper is gone).
   Colour variants set the shadow colour; the shadow triple is the design. */
.btn-pink { --btn-shadow-color: var(--wpz-btn-shadow-pink); }
.btn-blue { --btn-shadow-color: var(--wpz-btn-shadow-blue); }
.btn-green { --btn-shadow-color: var(--wpz-btn-shadow-green); }
.btn-yellow { --btn-shadow-color: var(--wpz-btn-shadow-yellow); }
.btn-wpzee {
	box-shadow: 0px 17px 18px -12px var(--btn-shadow-color), inset -2px -7px 24px 0px var(--btn-shadow-color);
	display: inline-block;
	transform: translate(0, 0);
	transition: box-shadow var(--wpz-t-btn), transform var(--wpz-t-btn);
}
.btn-wpzee:hover, .btn-wpzee:focus {
	box-shadow: 0px 20px 20px -8px var(--btn-shadow-color), inset -2px -7px 24px 12px var(--btn-shadow-color);
	transform: translate(0, -2px);
}
.btn-wpzee:active {
	box-shadow: 0px 17px 18px -12px var(--btn-shadow-color), inset -2px -7px 24px 120px var(--btn-shadow-color);
	transform: translate(0, 0);
}
/* header CTA (H47 button 7b9dbb1e): kit button base, capitalize, hover #1F1F33B8.
   The kit's radius rides along with the base — measured 30px on the reference's
   CTA at 1440/1024/390 (this rule dropped it: a square button at every width). */
.wpz-btn { align-items: center; display: inline-flex; justify-content: center; }
.wpz-btn--login {
	background-color: var(--wpz-ink);
	border-radius: var(--wpz-radius-btn);
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 700;
	line-height: 1em;
	padding: 14px 30px;
	text-decoration: none;
	text-transform: capitalize;
	transition: background-color var(--wpz-t-btn);
}
.wpz-btn--login:hover, .wpz-btn--login:focus { background-color: var(--wpz-cta-hover); color: #FFFFFF; }
.wpz-btn__icon { display: inline-flex; line-height: 1; margin-inline-end: 10px; }
.wpz-btn__icon .wpz-icon { height: 1em; width: 1em; }
@media (max-width: 1024px) {
	.wpz-btn--login { font-size: var(--wpz-fs-label); padding: 14px 35px; }
}
@media (max-width: 767px) {
	.wpz-btn--login { font-size: 12px; padding: 8px 15px; }
}

/* --- chrome: header ------------------------------------------------- */
/* H47 /0: black strip, padding 8px 30px, boxed 1140 inner */
.wpz-header__top-bar { background-color: var(--wpz-ink); padding-inline: var(--wpz-pad-x); }
.wpz-header__top-inner {
	align-items: center;
	display: flex;
	margin-inline: auto;
	max-width: min(100%, var(--wpz-container));
	padding-block: 8px;
}
.wpz-header__top-left { align-items: center; display: flex; flex-wrap: nowrap; gap: 10px; width: 50%; }
.wpz-header__welcome-icon .wpz-icon { fill: #FFFFFF; height: 16px; margin-block-end: -7px; width: 16px; }
.wpz-header__welcome { margin: 0; }
.wpz-header__welcome a { color: #FFFFFF; font-size: 16px; font-weight: 700; line-height: var(--wpz-lh-body); }
.wpz-header__welcome a:hover { text-decoration: underline; }
.wpz-header__top-nav { align-items: center; display: flex; justify-content: flex-end; width: 50%; }
@media (max-width: 767px) {
	.wpz-header__top-left, .wpz-header__top-nav { width: auto; }
	.wpz-header__welcome a { font-size: 12px; }
	.wpz-header__welcome-icon .wpz-icon { height: 12px; width: 12px; }
}

/* H47 /1: the sticky glass bar */
.wpz-header__main {
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	background-color: var(--wpz-header-glass);
	border-bottom: 1px solid var(--wpz-border);
	display: flex;
	min-height: 100px;
	padding-inline: var(--wpz-pad-x);
}
.wpz-header__main-inner {
	align-items: stretch;
	display: flex;
	flex: 1 1 auto;
	margin-inline: auto;
	max-width: min(100%, var(--wpz-container));
}
.wpz-header__brand { display: flex; flex-direction: column; justify-content: center; width: 30%; }
/* H47 logo (d0785f0): the reference's `img` is an inline-block sitting in the
   widget's line box — `display:inline-block; vertical-align:middle` with the
   inherited 25.6px line-height — which is what places it at y 76.5 / 44.69 /
   39.08 inside a 30 / 27.375 / 25.594px line box. Blockifying it (this theme's
   first cut) centred the img's own 20px box instead: 0.19px high @1024 and
   1.08px @390 (the 390 logo row was the last chrome band in the page runs). */
.wpz-header__logo { display: block; text-align: start; }
.wpz-header__logo-img { display: inline-block; height: 30px; object-fit: contain; object-position: center center; vertical-align: middle; width: auto; }
.wpz-header__nav-wrap {
	align-items: center;
	display: flex;
	flex-grow: 1;
	flex-wrap: wrap;
	gap: 30px 15px;
	justify-content: flex-end;
	width: 70%;
}
@media (min-width: 768px) and (max-width: 1024px) {
	.wpz-header__brand { width: 15%; }
	.wpz-header__nav-wrap { width: 85%; }
}
@media (max-width: 1024px) {
	.wpz-header { --wpz-topbar-h: 16px; }
	.wpz-header__main { min-height: 85px; }
	.wpz-header__logo-img { height: 27px; }
	/* H47 moves the mobile nav after the CTA at <=1024 (the reference's order hack),
	   so the burger sits at the right edge. */
	.wpz-header__mobile { order: 99999; }
}
@media (max-width: 767px) {
	.wpz-header__main { min-height: 65px; }
	.wpz-header__brand { width: 20%; }
	.wpz-header__logo-img { height: 20px; }
	.wpz-header__nav-wrap { width: 80%; }
}

/* --- chrome: nav (H47 nav widgets) ---------------------------------- */
.wpz-nav { position: relative; }
.wpz-nav__main { display: block; }
.wpz-menu { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.wpz-menu__item { margin: 0; padding: 0; position: relative; }
.wpz-nav__link, .wpz-menu__link {
	align-items: center;
	color: var(--wpz-ink);
	display: flex;
	font-family: var(--wpz-font);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: var(--wpz-lh-tight);
	position: relative;
	text-decoration: none;
	z-index: 1;
}
.wpz-menu__link { padding: 8px 15px; }
.wpz-menu__link:before {
	background-color: var(--wpz-nav-pointer-main);
	border-radius: var(--wpz-radius-pill);
	content: "";
	display: block;
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity var(--wpz-t-meta) cubic-bezier(.58, .3, .005, 1);
	z-index: -1;
}
.wpz-menu__link:hover:before, .wpz-menu__link:focus:before, .wpz-item-active .wpz-menu__link:before { opacity: 1; }
/* Hover on a nav item is the pointer pill (`--wpz-nav-pointer-*`), never a colour change:
   the reference's nav links keep their colour. hello:reset's `a:hover{color:#4848FF}` (the
   kit's link_hover) otherwise reaches the *main* nav — the top bar escapes it only because
   `.wpz-nav--top-bar .wpz-menu__link` out-specifies `a:hover`. Content links keep the kit's
   blue hover; this is scoped to the nav. */
.wpz-menu__link:hover, .wpz-menu__link:focus,
.wpz-nav__link:hover, .wpz-nav__link:focus { color: inherit; }
.wpz-nav--top-bar .wpz-menu__link { color: #FFFFFF; padding: 5px 15px; }
.wpz-nav--top-bar .wpz-menu__link:before { background-color: var(--wpz-nav-pointer-top); }
@media (max-width: 1024px) {
	.wpz-menu__link { font-size: var(--wpz-fs-label); }
}

/* Drawer (mobile location): burger + panel. State contract in inc/nav-menu.php;
   the JS is ticket #35's. */
.wpz-nav--drawer .wpz-nav__main { display: none; }
.wpz-nav__toggle { display: none; }
.wpz-nav--drawer .wpz-nav__toggle {
	align-items: center;
	background-color: var(--wpz-grey);
	border-radius: 66px;
	color: var(--wpz-ink);
	cursor: pointer;
	display: flex;
	font-size: 28px;
	justify-content: center;
	padding: .25em;
}
.wpz-nav--drawer .wpz-nav__toggle .wpz-icon { display: block; height: 1em; width: 1em; }
.wpz-nav__toggle-icon { display: block; line-height: 0; }
.wpz-nav__toggle-icon--close { display: none; }
.wpz-nav__toggle--active .wpz-nav__toggle-icon--open { display: none; }
.wpz-nav__toggle--active .wpz-nav__toggle-icon--close { display: block; }
.wpz-nav--drawer .wpz-nav__dropdown {
	background-color: #FFFFFF;
	/* Reference geometry, measured on production at 390 with the drawer open (the
	   state capture #10 §5.2 is the gate): `margin-top: 15px`, a 1px #F0F0F9
	   top+bottom border and **no** shadow (the earlier `--wpz-shadow-card` + no
	   border moved the panel 5px up and painted 4 rows of shadow the reference
	   never had; the 1px border is what puts the first link's box at panel+1). */
	border-bottom: 1px solid var(--wpz-border);
	border-radius: 0;
	border-top: 1px solid var(--wpz-border);
	box-shadow: none;
	/* The panel spans the viewport from x=0 whatever the widget's own position.
	   The reference does this with StretchElement (inline width/left/top, recomputed
	   on resize); theme.js (ticket #35) writes the same width/left, so the CSS
	   carries the reference's own closed-state values — `left: 0`, the width
	   StretchElement also writes — and never a centring transform, which would
	   shift the stretched box a second time. */
	left: 0;
	margin-top: 10px;
	max-height: 0;
	overflow: hidden auto;
	position: absolute;
	top: 100%;
	transform-origin: center top;
	transition: max-height var(--wpz-t-meta), transform var(--wpz-t-meta);
	width: 100vw;
	z-index: 10;
}
/* The closed panel is a zero-width box. Production's Elementor nav leaves its closed
   dropdown with no box at all; ours was a real 390px-wide box sitting at the nav's x (330),
   which widened the *body's* scrollable width to 720 on a 390 viewport. That re-wrapped the
   hero's text (hero 678px instead of 703) until theme.js's stretch landed — invisible on the
   PHP-rendered site (the script beats the first paint) but a 0.07 CLS against the static
   mirror, which paints first. Zeroing it costs nothing while the panel is a `max-height: 0`,
   `aria-hidden` box, and the open state is untouched: theme.js writes `width` inline and
   flips `aria-hidden` when it opens. */
.wpz-nav--drawer .wpz-nav__dropdown[aria-hidden="true"] { width: 0; }
.wpz-nav--drawer .wpz-nav__dropdown[aria-hidden="false"] { max-height: var(--menu-height, 1000vmax); }
.wpz-nav__dropdown .wpz-menu { display: block; }
.wpz-nav__dropdown .wpz-menu__link { color: var(--wpz-ink); font-size: var(--wpz-fs-label); padding: 15px 30px; }
.wpz-nav__dropdown .wpz-menu__item:not(:last-child) { border-bottom: 1px solid var(--wpz-border); }
.wpz-nav__dropdown .wpz-menu__item:not(:last-child) .wpz-menu__link:before { border-radius: 0; }
@media (max-width: 1024px) {
	.wpz-nav--drawer .wpz-nav__dropdown .wpz-menu__link { padding: 15px 30px; }
}
@media (max-width: 767px) {
	.wpz-nav--drawer .wpz-nav__toggle { border-radius: 27px; font-size: 20px; }
	/* Reference: the panel's gap is 10px on tablet and 15px at ≤767 (measured on
	   production at 1024/768/390 — the drawer-open state capture reads the 390
	   value; the earlier rule had the two breakpoints the wrong way round). */
	.wpz-nav--drawer .wpz-nav__dropdown { margin-top: 15px; }
}

/* --- chrome: footer (F63) ------------------------------------------- */
.wpz-footer { background-color: var(--wpz-ink); }
.wpz-footer__main { padding-block: 50px; padding-inline: var(--wpz-pad-x); }
.wpz-footer__inner { display: flex; margin-inline: auto; max-width: min(100%, var(--wpz-container)); }
.wpz-footer__col { display: flex; flex-direction: column; gap: var(--wpz-gap); width: 20%; }
.wpz-footer__col--company { padding-inline-end: 20%; width: 40%; }
.wpz-footer__heading { color: #FFFFFF; font-size: var(--wpz-fs-ui); font-weight: 700; line-height: var(--wpz-lh-body); margin: 0; }
.wpz-footer__text { color: #FFFFFF; font-size: var(--wpz-fs-ui); font-weight: 400; line-height: var(--wpz-lh-body); }
.wpz-footer__list { list-style: none; margin: 0; padding: 0; }
.wpz-footer__item { align-items: center; display: flex; }
.wpz-footer__item:not(:last-child) { padding-block-end: 5px; }
.wpz-footer__item:not(:first-child) { margin-block-start: 5px; }
.wpz-footer__list a { color: #FFFFFF; font-size: var(--wpz-fs-ui); font-weight: 400; line-height: var(--wpz-lh-body); text-decoration: none; }
.wpz-footer__list a:hover { color: #FFFFFF; text-decoration: underline; }
/* F63 /1 (7a4efe18): the padding sits on the capped e-con-inner, not on the black
   box (measured: bar padding-block 0, inner 20px 0 50px = 84px). F63's 45px
   min-height is inert there under border-box (84 > 20 + 14 + 50); re-stated on
   this unpadded inner it would add 31px, so it is reproduced as padding, not
   carried (baseline .wpz-footer 414.97 @1440, 699.45 @1024, 891.5 @390). */
.wpz-footer__bar { background-color: var(--wpz-ink); padding-inline: var(--wpz-pad-x); }
.wpz-footer__bar .wpz-footer__inner { flex-direction: column; justify-content: center; padding-block: 20px 50px; }
/* F63 /1 copyright widget: a column-flex child hugging its text
   (align-self: flex-start, 146px wide at every viewport) — text-align stays
   the reference's `center`, which is inert on the hug (text starts at the
   inner's left edge: x=150 @1440, x=30 below). */
.wpz-footer__copyright { align-self: flex-start; color: #FFFFFF; font-size: var(--wpz-fs-label); font-weight: 400; line-height: var(--wpz-lh-tight); margin: 0; text-align: center; }
/* F63 /0 inner (measured @1024): wrap, column-gap 50 + row-gap 50, four children
   25/25/25/100% — the last wraps to its own full-width row, pushed down 8% and
   padded 35% on the inline end. The 4px list rhythm is the <=767 value only:
   the reference still uses 5px at 1024 (list 132.38 vs 126.38 @390). */
@media (max-width: 1024px) {
	.wpz-footer__inner { flex-wrap: wrap; gap: 50px; }
	.wpz-footer__col { width: 25%; }
	.wpz-footer__col--company { margin-block-start: 8%; order: 99999; padding-inline-end: 35%; width: 100%; }
}
/* F63 /0 (measured @390): column-gap 0 keeps the two halves flush (165 + 165 of
   330), the fourth column wraps alone at 50%, and the company column is still
   the full-width last row (330px, no move-up, no pad) — without the restated
   width it inherits the sibling 50% and shares column 4's row, stacking the
   footer 220.78px short. */
@media (max-width: 767px) {
	.wpz-footer__inner { column-gap: 0; }
	.wpz-footer__col { width: 50%; }
	.wpz-footer__col--company { margin-block-start: 0; padding-inline-end: 0; width: 100%; }
	.wpz-footer__item:not(:last-child) { padding-block-end: 4px; }
	.wpz-footer__item:not(:first-child) { margin-block-start: 4px; }
}

/* --- sections: hero (S-A, 2f94681 / 59ed790 / 0a62a07 / 16be538) ----- */
/* The panel consumes the page-scope props: --wpz-hero-paint (gradient literal)
   and --wpz-hero-image (theme URL). The <=1024 stack (media first, full width,
   320/200px tall) is the reference's behaviour for five of the six marketing
   heroes; home alone keeps the two-column row through the tablet band and flips
   to row-reverse + wrap-reverse at <=767 - both in its page scope (#25/#35b). */
.wpz-hero__panel {
	background-color: transparent;
	background-image: var(--wpz-hero-paint, none);
	border-radius: var(--wpz-radius-block);
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wpz-gap);
	justify-content: flex-end;
	padding: var(--wpz-pad-x);
}
.wpz-hero__content {
	display: flex;
	flex-direction: column;
	gap: 30px 0;
	justify-content: center;
	max-width: 550px;
	padding-block: 50px;
	width: 50%;
}
.wpz-hero__title { margin: 0; }
.wpz-hero__lead { font-size: var(--wpz-fs-post); line-height: var(--wpz-lh-body); margin: 0; }
.wpz-hero__actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--wpz-gap); }
.wpz-hero__link { font-weight: 400; line-height: var(--wpz-lh-tight); }
.wpz-hero__media {
	background-image: var(--wpz-hero-image, none);
	background-position: 50% 50%;
	background-repeat: repeat;
	background-size: cover;
	border-radius: var(--wpz-radius-tab);
	width: 50%;
}
@media (max-width: 1024px) {
	.wpz-hero__panel { flex-direction: column; }
	.wpz-hero__content { padding-block: 0; width: 100%; }
	.wpz-hero__lead { font-size: var(--wpz-fs-ui); }
	.wpz-hero__media { min-height: 320px; order: -99999; width: 100%; }
}
@media (max-width: 767px) {
	.wpz-hero__panel { flex-wrap: wrap; }
	.wpz-hero__content { padding-block: 0; width: 100%; }
	.wpz-hero__media { min-height: 200px; width: 100%; }
}

/* --- sections: review strip (S-B, 98cfdcb / a4079ec) ---------------- */
.wpz-review-strip__inner { align-items: center; display: flex; gap: 0; }
.wpz-review-strip__items { --wpz-icon-list-gap: 30px; flex: 1 1 50%; }
.wpz-review-strip__card {
	align-items: center;
	background-color: var(--wpz-surface-alt);
	border: 0 solid var(--wpz-ink);
	border-radius: 38px;
	color: inherit;
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	gap: 5px;
	justify-content: flex-end;
	padding: 15px 30px 14px;
	text-decoration: none;
	transition: box-shadow var(--wpz-t-meta), border-color var(--wpz-t-meta);
}
.wpz-review-strip__card:hover, .wpz-review-strip__card:focus { border-width: 1px; box-shadow: var(--wpz-shadow-card-hover); color: inherit; }
.wpz-review-strip__label { font-size: var(--wpz-fs-ui); font-weight: 700; line-height: var(--wpz-lh-tight); }
/* The reference's card and image-widget container are Elementor `e-transform`
   elements: their computed transform is `perspective(0) ...` (an identity matrix
   with a 3D context). That context changes how the browser rasterises the text
   and the logo inside them (sub-pixel anti-aliasing), so it is part of the
   pixels and is reproduced here. */
.wpz-review-strip__card { transform: perspective(0); }
.wpz-review-strip__logo-wrap { margin-block-start: -8px; transform: perspective(0); }
.wpz-review-strip__logo { display: inline-block; height: auto; max-width: 100%; vertical-align: middle; width: 100px; }
.wpz-review-strip__items .wpz-icon-list__icon { color: var(--wpz-accent-green-deep); padding-inline-end: 1px; }
.wpz-review-strip .wpz-icon-list__text { font-weight: 700; line-height: 1.5em; }
@media (max-width: 1024px) {
	.wpz-review-strip__inner { align-items: center; flex-direction: column; gap: var(--wpz-gap); justify-content: center; }
	.wpz-review-strip__items { justify-content: center; text-align: center; }
	.wpz-review-strip__items, .wpz-review-strip__card { flex: 0 0 auto; }
	.wpz-review-strip__card { justify-content: center; }
}

/* --- sections: feature rows (S-C/S-D/S-F/S-G, 75659c3e / 7fb55bd / 9be22b5) */
.wpz-feature-row--intro > .wpz-container,
.wpz-feature-row--grid > .wpz-container { display: flex; gap: var(--wpz-gap); }
.wpz-feature-row__intro {
	background-color: var(--wpz-bg-pink);
	border-radius: var(--wpz-radius-block);
	display: flex;
	flex-direction: column;
	gap: var(--wpz-gap);
	padding: var(--wpz-pad-x);
	width: 50%;
}
.wpz-feature-row__title { margin: 0; }
.wpz-feature-row__lead { font-size: var(--wpz-fs-ui); line-height: var(--wpz-lh-body); margin: 0; }
.wpz-feature-row__tiles { display: grid; gap: var(--wpz-gap); list-style: none; margin: 0; padding: 0; width: 50%; }
.wpz-feature-row--grid .wpz-feature-row__tiles, .wpz-feature-row--panel .wpz-feature-row__tiles { width: 100%; }
.wpz-feature-row__tile { align-items: center; display: flex; gap: var(--wpz-gap); }
.wpz-feature-row__tile-media {
	align-items: center;
	border: 1px solid var(--wpz-bg-pink);
	border-radius: var(--wpz-radius-menu);
	display: flex;
	justify-content: center;
	padding: 25px;
	width: 20%;
}
.wpz-feature-row__tile-media img { border-radius: var(--wpz-radius-card); display: block; height: auto; max-width: 100%; }
.wpz-feature-row__tile-body { display: flex; flex-direction: column; width: 80%; }
.wpz-feature-row__tile-title { font-size: var(--wpz-fs-lead); font-weight: 700; line-height: var(--wpz-lh-heading); margin: 0; }
.wpz-feature-row__tile-text { font-size: var(--wpz-fs-ui); line-height: var(--wpz-lh-body); }
.wpz-feature-row__panel { background-color: var(--wpz-bg-green); border-radius: var(--wpz-radius-block); padding: 50px var(--wpz-pad-x); }
.wpz-feature-row--panel .wpz-container { display: flex; flex-direction: column; gap: var(--wpz-gap); }
.wpz-feature-row__copy { display: flex; flex-direction: column; gap: var(--wpz-gap); width: 75%; }
.wpz-feature-row__copy p { margin: 0; }
.wpz-feature-row__media img { display: block; height: auto; max-width: 100%; }
@media (max-width: 1024px) {
	.wpz-feature-row__tile { align-items: flex-start; }
	.wpz-feature-row__tile-media { box-sizing: border-box; min-height: 80px; padding: 10px; width: 80px; }
	.wpz-feature-row__panel { padding: var(--wpz-pad-x); }
}
@media (max-width: 767px) {
	.wpz-feature-row--intro > .wpz-container,
	.wpz-feature-row--grid > .wpz-container { flex-wrap: wrap; row-gap: var(--wpz-gap); }
	.wpz-feature-row__intro, .wpz-feature-row__tiles, .wpz-feature-row__copy { width: 100%; }
	.wpz-feature-row__tile { flex-wrap: nowrap; }
	.wpz-feature-row__tile-body { width: 75%; }
	.wpz-feature-row__tile-media { flex: 1 0 80px; }
}

/* --- sections: divider (S-I, 71a0186b) ------------------------------ */
/* The reference line sits 50px into the box: an `hr` border renders outside the
   padding box, so the 1px line is painted as the element's own background
   (content-box clipped) with equal 50px block padding around it. */
.wpz-divider__line { background-color: var(--wpz-border); background-clip: content-box; border: 0; height: 1px; margin: 0; padding-block: 50px; }

/* --- sections: FAQ (S-J, ee42603) ----------------------------------- */
.wpz-faq > .wpz-container { display: flex; gap: 0 var(--wpz-gap); }
.wpz-faq__aside { display: flex; flex-direction: column; gap: var(--wpz-gap); padding-inline-end: 10px; width: 25%; }
.wpz-faq__title { margin: 0; }
.wpz-faq__intro { font-size: var(--wpz-fs-ui); line-height: var(--wpz-lh-body); margin: 0; }
.wpz-faq__list { display: flex; flex-direction: column; gap: 30px; width: 75%; }
.wpz-faq__item { display: flex; flex-direction: column; gap: 10px; }
.wpz-faq__q { font-size: var(--wpz-fs-ui); font-weight: 700; line-height: var(--wpz-lh-body); margin: 0; }
.wpz-faq__a, .wpz-faq__rich { margin: 0; }
.wpz-faq__rich ul { list-style: disc; padding-inline-start: 2em; }
@media (max-width: 767px) {
	.wpz-faq > .wpz-container { flex-wrap: wrap; }
	.wpz-faq__aside, .wpz-faq__list { width: 100%; }
}

/* --- sections: CTA (S-E, 141cf6d3 / 5465b602) ----------------------- */
.wpz-cta__panel {
	background-color: var(--wpz-bg-blue);
	border-radius: var(--wpz-radius-block);
	display: flex;
	gap: var(--wpz-gap);
	padding: var(--wpz-pad-x);
}
.wpz-cta__content { align-self: center; display: flex; flex-direction: column; gap: var(--wpz-gap); width: 50%; }
.wpz-cta__title { margin: 0; }
.wpz-cta__lead { font-size: var(--wpz-fs-ui); line-height: var(--wpz-lh-body); margin: 0; }
.wpz-cta__media {
	background-image: var(--wpz-cta-image, none);
	background-position: 50% 0%;
	background-repeat: repeat;
	background-size: cover;
	border-radius: var(--wpz-radius-tab);
	width: 50%;
}
@media (max-width: 767px) {
	.wpz-cta__panel { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
	.wpz-cta__content, .wpz-cta__media { width: 100%; }
	/* the illustration column is 30vh tall from 767 down (reference 7ffff986) */
	.wpz-cta__media { min-height: 30vh; }
}

/* --- sections: pricing + tabs (S-H/S-K, 4787736a / 20d720bb) -------- */
.wpz-pricing > .wpz-container { display: flex; }
.wpz-pricing__intro {
	display: flex;
	flex-direction: column;
	gap: var(--wpz-gap);
	padding: 110px 30px 0 0;
	width: 25%;
}
.wpz-pricing__title { margin: 0; }
.wpz-pricing__lead { font-size: var(--wpz-fs-ui); line-height: var(--wpz-lh-body); margin: 0; }
.wpz-tabs { display: flex; flex-direction: column; position: relative; width: 75%; }
.wpz-tabs__nav {
	align-self: center;
	background-color: transparent;
	border: 1px solid var(--wpz-border);
	border-radius: var(--wpz-radius-tabs);
	box-shadow: var(--wpz-shadow-tabs);
	display: flex;
	gap: 5px;
	justify-content: center;
	padding: 5px;
	width: max-content;
}
.wpz-tabs__tab {
	align-items: center;
	background-color: var(--wpz-white);
	border: 0;
	border-radius: var(--wpz-radius-tab);
	color: var(--wpz-ink);
	cursor: pointer;
	display: flex;
	font-family: var(--wpz-font);
	font-size: var(--wpz-fs-ui);
	font-weight: 700;
	gap: 5px;
	justify-content: center;
	line-height: var(--wpz-lh-tight);
	padding: 15px 35px;
	position: relative;
	transition: background-color var(--wpz-t-meta), border-radius var(--wpz-t-meta);
}
/* The reference's tab hover is a no-op: production's titles are spans in the tabs widget,
   so the selected tab stays black and the other stays white (the kit's button rule carries
   no hover background either). Without these the base's button hover would paint the
   inactive tab ink. */
.wpz-tabs__tab:hover, .wpz-tabs__tab:focus { background-color: var(--wpz-white); color: var(--wpz-ink); }
.wpz-tabs__tab[aria-selected="true"]:hover, .wpz-tabs__tab[aria-selected="true"]:focus { background-color: var(--wpz-ink); color: #FFFFFF; }
.wpz-tabs__tab[aria-selected="true"] {
	background-color: var(--wpz-ink);
	border-radius: var(--wpz-radius-tab);
	color: #FFFFFF;
}
.wpz-tab-label { border: 1px solid currentColor; border-radius: 5px; font-size: 12px; padding: 2px 6px; text-transform: uppercase; }
.wpz-tabs__panels { margin-block-start: var(--wpz-tabs-gap, var(--wpz-gap)); }
.wpz-pricing__plans { display: grid; gap: 0; grid-template-columns: repeat(3, 33.33%); list-style: none; margin: 0; padding: 0; }
.wpz-pricing__plan {
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: var(--wpz-radius-block);
	display: flex;
	flex-direction: column;
	gap: var(--wpz-gap);
	justify-content: space-between;
	padding: 10px 10px 30px;
	transform: translate(0, 0);
	transition: box-shadow var(--wpz-t-meta), border-color var(--wpz-t-meta), transform var(--wpz-t-meta);
}
.wpz-pricing__plan:hover { border-color: var(--wpz-ink); box-shadow: var(--wpz-shadow-card-lg); transform: translate(0, -2px); }
.wpz-pricing__head { background-color: var(--wpz-pricing-head-bg, transparent); border-radius: 30px; display: flex; flex-direction: column; gap: 0; padding: var(--wpz-gap); }
.wpz-pricing__head--green { --wpz-pricing-head-bg: var(--wpz-bg-green); }
.wpz-pricing__head--pink { --wpz-pricing-head-bg: var(--wpz-bg-pink); }
.wpz-pricing__head--yellow { --wpz-pricing-head-bg: var(--wpz-bg-yellow); }
.wpz-pricing__head--blue { --wpz-pricing-head-bg: var(--wpz-bg-blue); }
.wpz-pricing__name {
	align-self: flex-start;
	background-color: var(--wpz-ink);
	border-radius: var(--wpz-radius-tab);
	color: var(--wpz-white);
	display: inline-block;
	font-size: var(--wpz-fs-ui);
	font-weight: 700;
	line-height: var(--wpz-lh-body);
	padding: 6px 20px;
	text-transform: uppercase;
}
.wpz-pricing__price { align-items: flex-end; display: flex; margin-block-start: var(--wpz-gap); }
.wpz-pricing__amount { display: inline-block; margin: 0; }
.wpz-pricing__per { font-size: var(--wpz-fs-ui); font-weight: 700; line-height: var(--wpz-lh-body); margin: 0 0 6px 2px; }
.wpz-pricing__currency { font-size: var(--wpz-fs-label); line-height: var(--wpz-lh-body); }
.wpz-icon-list.wpz-pricing__features {
	--wpz-icon-list-gap: 20px;
	--wpz-icon-list-size: 14px;
	/* the reference's features widget is the flex item that absorbs the card's
	   slack (`--container-widget-flex-grow:1`), which pins the buy button to the
	   card's bottom edge */
	flex-grow: 1;
	margin-inline: var(--wpz-gap);
}
.wpz-pricing__features .wpz-icon-list__item { align-items: flex-start; }
.wpz-pricing__features .wpz-icon-list__icon { padding-inline-end: 10px; top: 5px; }
.wpz-pricing__features .wpz-icon-list__text { font-size: var(--wpz-fs-label); line-height: var(--wpz-lh-body); }
.wpz-pricing__plan > .btn-wpzee { margin: 10px var(--wpz-gap) 0; text-align: center; }
.wpz-pricing__locations { border: 1px solid var(--wpz-border); border-radius: 30px; display: flex; flex-direction: column; gap: 10px; padding: var(--wpz-gap); }
.wpz-pricing__locations-title { font-size: var(--wpz-fs-label); font-weight: 700; line-height: var(--wpz-lh-heading); margin: 0; }
.wpz-pricing__locations-list { --wpz-icon-list-gap: 10px; --wpz-icon-list-size: 16px; }
.wpz-pricing__locations .wpz-icon-list__text { font-size: var(--wpz-fs-label); line-height: var(--wpz-lh-tight); padding-inline-start: 5px; }
.wpz-pricing__locations .wpz-icon-list__icon svg { border-radius: 4px; }
@media (max-width: 1024px) {
	.wpz-pricing > .wpz-container { flex-wrap: wrap; row-gap: var(--wpz-gap); }
	.wpz-pricing__intro, .wpz-tabs { width: 100%; }
	.wpz-pricing__intro { padding: 0; }
}
@media (max-width: 767px) {
	.wpz-pricing__plans { grid-template-columns: 1fr; }
	.wpz-tabs__tab { padding: 15px 35px; }
}

/* --- sections: card, bio tiles -------------------------------------- */
.wpz-card { background-color: #FFFFFF; border-radius: var(--wpz-radius-card); box-shadow: var(--wpz-shadow-card); }
.wpz-bio-links { display: grid; gap: var(--wpz-gap); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
.wpz-bio-links__item { background-color: #303030; border-radius: var(--wpz-radius-menu); color: #FFFFFF; display: block; padding: var(--wpz-gap); text-decoration: none; }

/* --- widgets: icon list -------------------------------------------- */
.wpz-icon-list { list-style: none; margin: 0; padding: 0; }
.wpz-icon-list__item { align-items: center; display: flex; font-size: inherit; margin: 0; padding: 0; position: relative; }
.wpz-icon-list__item > a { align-items: center; display: flex; font-size: inherit; }
.wpz-icon-list__icon { display: flex; position: relative; }
.wpz-icon-list__icon .wpz-icon { height: var(--wpz-icon-list-size, 1em); margin-inline-end: calc(var(--wpz-icon-list-size, 1em) * .25); width: var(--wpz-icon-list-size, 1em); }
.wpz-icon-list__text { align-self: center; font-size: 16px; font-weight: 400; line-height: var(--wpz-lh-body); padding-inline-start: 5px; }
.wpz-icon-list--inline { display: flex; flex-wrap: wrap; margin-inline: calc(var(--wpz-icon-list-gap, 16px) / -2); }
.wpz-icon-list--inline .wpz-icon-list__item { margin-inline: calc(var(--wpz-icon-list-gap, 16px) / 2); }
.wpz-icon-list--traditional .wpz-icon-list__item:not(:last-child) { padding-block-end: calc(var(--wpz-icon-list-gap, 16px) / 2); }
.wpz-icon-list--traditional .wpz-icon-list__item:not(:first-child) { margin-block-start: calc(var(--wpz-icon-list-gap, 16px) / 2); }

/* --- widgets: social icons ----------------------------------------- */
.wpz-social-icons { display: flex; flex-wrap: wrap; gap: 0 20px; list-style: none; margin: 0; padding: 0; }
.wpz-social-icons__item { margin: 0; }
.wpz-social-icon { color: #FFFFFF; display: block; transition: color var(--wpz-t-meta); }
.wpz-social-icon .wpz-icon { display: block; height: var(--wpz-social-icon-size, 23px); width: var(--wpz-social-icon-size, 23px); }
.wpz-social-icon:hover { color: var(--wpz-border); }

/* --- existing site hooks (#8 §4) ------------------------------------ */
/* The chat button wrapper: no paint of its own in the reference, but it is the
   selector snippet #1372 uses (`.tawk-to-toggle a`) and it must survive. */
.tawk-to-toggle { display: block; }
@media (max-width: 1024px) {
	.wpz-social-icons { --wpz-social-icon-size: 18px; }
}

/* --- widgets: share + newsletter cards (#11 §2) --------------------- */
/* Rest borders are the reference's widget values: the newsletter card carries the
   border colour (#F0F0F9), the share/related cards are transparent; hover is ink +
   the card shadow on all three. */
.wpz-share__card, .wpz-newsletter__card, .wpz-post-related__card {
	background-color: #FFFFFF;
	border: 1px solid transparent;
	border-radius: var(--wpz-radius-block);
	transition: border-color var(--wpz-t-meta), box-shadow var(--wpz-t-meta);
}
.wpz-share__card { padding: var(--wpz-pad-x); }
.wpz-newsletter__card { border-color: var(--wpz-border); padding: 30px 30px 20px; }
.wpz-post-related__card { padding: 30px 30px 15px; }
.wpz-share__card:hover, .wpz-newsletter__card:hover, .wpz-post-related__card:hover {
	border-color: var(--wpz-ink);
	box-shadow: var(--wpz-shadow-card);
}
/* The card icons are 20px blocks with the reference's 2px line-box tail between the
   icon widget and the heading; the headings carry no margins of their own — the
   10px rhythm below each is the next widget's own container margin. */
.wpz-share__card > .wpz-icon,
.wpz-newsletter__card > .wpz-icon,
.wpz-post-related__card > .wpz-icon { display: block; font-size: var(--wpz-fs-h5); margin-block-end: 2px; }
.wpz-share__title, .wpz-newsletter__title, .wpz-post-related__title { font-size: var(--wpz-fs-h5); margin: 0; }

/* Share row (55b5f2e): the widget's inline-block grid — 10px column gap, 10px
   bottom margin per item, −10px on the container, 10px widget-container top margin.
   The extra 1.09375px (70/64) is the reference grid's line-box tail: the inline-block
   grid sits in a font-size:0 line box, which extends 1.09375px below the items'
   margin box — measured against production at all three gate viewports. */
.wpz-share__row { column-gap: 10px; display: flex; flex-wrap: wrap; list-style: none; margin: 10px 0 -10px; padding: 0 0 1.09375px; }
.wpz-share__item { margin-block-end: 10px; }
.wpz-share__btn {
	align-items: center;
	border-radius: 99.9em;
	cursor: pointer;
	display: flex;
	font-size: 10px;
	height: 4.5em;
	justify-content: center;
	overflow: hidden;
	transition: filter .2s, background-color .2s, border-color .2s;
}
.wpz-share__btn--facebook { background-color: #3b5998; }
.wpz-share__btn--threads { background-color: #000000; }
.wpz-share__btn--reddit { background-color: #ff4500; }
.wpz-share__btn--linkedin { background-color: #0077b5; }
.wpz-share__btn--whatsapp { background-color: #25d366; }
.wpz-share__btn--email { background-color: #ea4335; }
.wpz-share__btn:hover { filter: saturate(1.5) brightness(1.2); }
/* view-icon + gradient skin: the icon fills the 4.5em square and carries the skin's
   .12 black wash; the glyph is the official white at 2em (20px). */
.wpz-share__icon {
	align-items: center;
	align-self: stretch;
	background-image: linear-gradient(90deg, rgba(0, 0, 0, .12), transparent);
	color: #FFFFFF;
	display: flex;
	flex-grow: 1;
	justify-content: center;
	width: 4.5em;
}
.wpz-share__icon .wpz-icon { height: 2em; width: 2em; }

/* Newsletter embed (99e9b48): the widget container's 10px top margin + the widget's
   custom CSS over the Mailchimp stylesheet. `width:100%` must beat the embed's own
   inline `<style>` (inside the body), hence the scoped selector; the four
   `!important`s are registered at the end of this file. */
.wpz-newsletter__embed { margin-block-start: 10px; }
/* ≤767 the reference's flex-column card drops the html widget's bottom 1.4375px —
   a Chrome flex sub-pixel artifact (the widget's height is 1.4375 short of its
   overflowing Mailchimp container once the foot grid wraps). Reproduced so the card
   height matches production at 390, the narrow gate viewport. */
@media (max-width: 767px) { .wpz-newsletter__embed { margin-block-end: -1.4375px; } }
.wpz-newsletter__embed #mc_embed_signup { width: 100%; }
.wpz-newsletter__embed #mc_embed_signup form { margin: 0 !important; }
.wpz-newsletter__embed #mc_embed_signup .mc-field-group { width: 100% !important; }
.wpz-newsletter__embed #mc_embed_signup .indicates-required { display: none !important; margin-right: 0 !important; }
.wpz-newsletter__embed #mc_embed_signup .foot { width: 100% !important; }
.wpz-newsletter__embed #mc_embed_signup .button {
	background-color: var(--wpz-ink);
	border-radius: var(--wpz-radius-btn);
	font-family: var(--wpz-font);
	font-weight: 700;
	height: unset;
	line-height: 1em;
	padding: 14px 30px;
	text-decoration: none;
}
.wpz-newsletter__embed #mc_embed_signup .button:hover { background-color: var(--wpz-cta-hover); }

/* --- listing: grid, card, post content (#11 §1.2, §6) --------------- */
/* 85f3f96 (templates 1438/1435): 3-up, 2 ≤1024, 1 ≤767; row gap 20px, column gap 30px.
   The theme base carried `gap: 30px 30px`; corrected to the reference's 20px row gap
   here in the component (a page scope may not redeclare a component's properties).
   `--wpz-post-grid-cols*`/`--wpz-post-grid-row-gap` are the per-call override hooks
   (partial args `columns`/`row_gap`) — the same mechanism Elementor used inline. */
.wpz-post-grid { display: grid; gap: var(--wpz-post-grid-row-gap, 20px) 30px; grid-template-columns: repeat(var(--wpz-post-grid-cols, 3), 1fr); }
.wpz-post-grid--archive { --wpz-post-grid-row-gap: 20px; }
.wpz-post-grid--related { --wpz-post-grid-row-gap: 30px; grid-template-columns: repeat(var(--wpz-post-grid-cols, 2), 1fr); }
.wpz-post-grid--bio { --wpz-post-grid-row-gap: 35px; }
.wpz-post-card { display: flex; flex-direction: column; }
.wpz-post-card__thumb-link { display: block; margin-block-end: 10px; text-decoration: none; }
.wpz-post-card--related .wpz-post-card__thumb-link,
.wpz-post-card--bio .wpz-post-card__thumb-link { margin-block-end: 5px; }
.wpz-post-card__thumb { border-radius: 10px; overflow: hidden; padding-block-start: 66%; position: relative; }
.wpz-post-card--related .wpz-post-card__thumb,
.wpz-post-card--bio .wpz-post-card__thumb { border-radius: 10px; }
.wpz-post-card__img { display: block; left: calc(50% + 1px); max-width: none; position: absolute; top: calc(50% + 1px); transform: scale(1.01) translate(-50%, -50%); transition: filter var(--wpz-t-meta); }
.wpz-post-card__img.is-fit-height { height: 100%; width: auto; }
.wpz-post-card__img.is-fit-width { height: auto; width: 100%; }
.wpz-post-card__title { font-size: 16px; font-weight: 700; margin: 0; }
.wpz-post-card--archive .wpz-post-card__title { font-size: var(--wpz-fs-post); margin-block-end: 5px; }
/* the wrapper heading keeps the base 1.25em and never paints; the anchor carries the
   rendered 1.6em — archive 20px/700/32px, related + bio 16px/700/25.6px. Two variants,
   never the phantom third (style system §0.1). */
.wpz-post-card__title a { font-size: 16px; font-weight: 700; line-height: var(--wpz-lh-body); text-decoration: none; }
.wpz-post-card--archive .wpz-post-card__title a { font-size: inherit; font-weight: inherit; }
.wpz-post-card__meta { color: var(--wpz-ink); font-size: 12px; line-height: 1.3; margin-block-end: 13px; }
.wpz-post-grid--bio .wpz-post-card__title, .wpz-post-grid--bio .wpz-post-card__title a { color: #FFFFFF; }
.wpz-post-card__text { display: block; }
/* pagination (dormant by design: `posts_per_page` is 12, today's listings hold ≤5).
   1438/1435: `.elementor-pagination{text-align:center;margin-top:50px}` + the 5px
   half-gap on each page number. */
.wpz-pagination { font-size: var(--wpz-fs-ui); font-weight: 700; line-height: var(--wpz-lh-body); margin-block-start: 50px; text-align: center; }
.wpz-pagination .page-numbers:not(:first-child) { margin-inline-start: 5px; }
.wpz-pagination .page-numbers:not(:last-child) { margin-inline-end: 5px; }
@media (max-width: 1024px) {
	.wpz-post-grid { grid-template-columns: repeat(var(--wpz-post-grid-cols-md, 2), 1fr); }
}
@media (max-width: 767px) {
	.wpz-post-grid, .wpz-post-grid--related { grid-template-columns: repeat(var(--wpz-post-grid-cols-sm, 1), 1fr); }
	.wpz-post-card__thumb { padding-block-start: 50%; }
	/* the box ratio is 50% here: an image that was fit-height in the 66% box is fit-width
	   unless it is taller than the 50% box. Elementor toggles `.elementor-fit-height` in
	   JS per breakpoint; `is-fit-height-mobile` (emitted by the partial) is the static
	   equivalent. */
	.wpz-post-card__img.is-fit-height:not(.is-fit-height-mobile) { height: auto; width: 100%; }
}

/* wpz-post-content — template 1400 + `customizer` (the four !important rules
   are dropped: they existed to beat Elementor's specificity) */
.wpz-post-content { font-size: var(--wpz-fs-post); font-weight: 500; line-height: var(--wpz-lh-post); }
.wpz-post-content > :first-child { margin-block-start: 0; }
.wpz-post-content h2 { font-size: var(--wpz-fs-h2); font-weight: 700; line-height: 1.25; margin: 48px 0 16px; }
.wpz-post-content h3 { font-size: var(--wpz-fs-h3); font-weight: 700; line-height: 1.25; }
.wpz-post-content p { margin-block: 1.5rem; }
.wpz-post-content ul { margin-block-end: 2rem; }
.wpz-post-content a, .wpz-post-content a:link { font-size: inherit; }
.wpz-post-content code { background-color: var(--wpz-grey); border-radius: 6px; padding: 1px 5px; }
.wpz-post-content blockquote {
	background-color: #f9f9f9;
	border-radius: var(--wpz-radius-block);
	margin: 0;
	margin-block: 1.5rem;
	padding: 30px;
	padding-block-start: 60px;
	position: relative;
}
.wpz-post-content blockquote::before { content: "\""; font-size: 5rem; left: 30px; opacity: .5; position: absolute; top: 40px; }
.wpz-post-content blockquote cite { font-size: 16px; }
/* opponent: wp-block-library (core sets its own padding on .wp-block-code code) */
.wp-block-code { border-radius: var(--wpz-radius-block); padding: 40px; }
.wp-block-code code { background-color: transparent; border-radius: 0; font-size: .8em; padding: 0; }

/* --- utilities (last in the layer: they must beat the unqualified component
   rules above, which would otherwise win inside the same media queries) --- */
@media (min-width: 1025px) { .wpz-hidden-desktop { display: none; } }
@media (min-width: 768px) and (max-width: 1024px) { .wpz-hidden-tablet { display: none; } }
@media (max-width: 767px) { .wpz-hidden-mobile { display: none; } }

/* --- page hooks ----------------------------------------------------- */
.wpz-page { display: block; }
.wpz-page__title { margin-block-start: 0; }

/* --- print: the link outcomes the reference's cascade produced -------
   hello's print block (layer 2) is enqueued last on the baseline — after
   Elementor's stylesheets — so its element-level rules decide the print result
   there; here the components come later and a class outranks any element rule,
   so the outcomes they switch off for screen are re-stated at component
   specificity. Measured on production (print emulation, 1440):
     footer list  `.elementor-icon-list-item a` → flex + underline; the href
       suffix becomes a flex item laid out in the row (li boxes 31/31/56/26,
       column 230.97) — footer 414.97, unchanged from screen;
     social icons `.elementor-social-icon` → inline-flex 23x23, underline, with a
       0/0 wrapper — and no icons at all: Elementor's are background-image
       glyphs, which hello's `background: transparent !important` erases. This
       theme's are inline SVG and would print, so they are hidden to match; the
       anchor also clips its suffix, which otherwise wraps into a 690px column
       and extends the document (measured 4249px page against this rule's 3713);
     header CTA  `.elementor-button` → inline-block, 260.6x60, the suffix on its
       own line (its text span is block-level and its icon is erased).
   The href suffixes print this theme's own URLs, as the reference prints its. */
@media print {
	.wpz-footer__list a { align-items: center; display: flex; text-decoration: underline; }
	.wpz-social-icons { font-size: 0; line-height: 0; }
	.wpz-social-icon { display: inline-flex; font-size: var(--wpz-social-icon-size, 23px); height: var(--wpz-social-icon-size, 23px); line-height: var(--wpz-social-icon-size, 23px); overflow: hidden; text-decoration: underline; width: var(--wpz-social-icon-size, 23px); }
	.wpz-social-icon .wpz-icon { display: none; }
	/* the reference's `word-break: break-word` + `text-align: center`: they let the
	   suffix shrink into the icon's own column instead of running 430px across the
	   footer (which would also widen the capture past the viewport). */
	.wpz-social-icon:after { text-align: center; word-break: break-word; }
	/* the reference's CTA is inline-block with `text-align: center` and its icon
	   erased but still laid out (26px: 16px glyph + 10px gap), so the appended
	   suffix breaks to a second line and the button measures 260.6x60 inside the
	   100px bar (production, print, 1440); ours is inline-flex and grows sideways
	   to 334.2x44. The icon stays in flow for the same reason. */
	.wpz-btn--login { display: inline-block; text-align: center; }
	.wpz-btn--login:after { display: block; }
	.wpz-btn__icon { visibility: hidden; }
}

/* ==== 5. PAGE =======================================================
   One banner per page/template scope (style system §7). A page scope may set
   props the components consume, plus declarations that exist on exactly one
   page — never a component's own properties, never `body.page-id-*`.

   Scope   | Template                                    | Props set
   --------|---------------------------------------------|----------
   --home  | front-page.php (#25)                        | --wpz-hero-paint/-image
   --hosting | page-wordpress-hosting.php (#26)          | --wpz-hero-paint/-image
   --email | page-email.php (#27)                        | --wpz-hero-paint/-image
   --socialbee | page-socialbee.php (#28)                | --wpz-hero-paint/-image
   --about | page-about.php (#29)                        | --wpz-hero-paint/-image
   --contact | page-contact.php (#30)                    | --wpz-hero-paint/-image
   --wordpress | page-wordpress.php (#31, ad page)       | --wpz-hero-paint/-image (older .png pair)
   --bio   | page-bio.php (#31, canvas)                  | dark palette literals, padding-bottom
   --page  | page.php (#34, legal + DB pages)            | 44px title, bordered content box
   --post  | single.php (#32)                            | section paddings
   --blog  | home.php (#33)                              | section paddings
   --archive | archive.php (#33)                         | section paddings
   --not-found | 404.php (#23, below)                    | none (page-only rules)

   Hero image prop: the page scope carries a stylesheet-relative URL
   (url("assets/img/heroes/….webp")), the #14 §4 preload keeps
   get_theme_file_uri() — the painted URL must equal the preload target.
   ==================================================================== */

/* --- page: not-found (404.php) -------------------------------------- */
/* Spacing per the design sketch, with the usual side padding at the ends of the
   scale (the sketch's `... 0` lets the h1 touch the viewport edge at 390 — the
   sketch marks the spacing execution-tunable within tokens, so it is tuned here). */
.wpz-page--not-found .wpz-section { padding: calc(var(--wpz-pad-y) * 2) var(--wpz-pad-x); }
.wpz-page--not-found .wpz-container { align-items: center; display: flex; flex-direction: column; gap: var(--wpz-gap); text-align: center; }
.wpz-page--not-found h1,
.wpz-page--not-found p { margin: 0; }
.wpz-page--not-found p { font-size: var(--wpz-fs-lead); }
.wpz-page--not-found .btn-wpzee { margin-top: var(--wpz-gap-sm); }

/* =====================================================================
   !important register (style system §1.1) — each use names its opponent.
   The theme never uses !important to beat its own rules.
   | selector                      | opponent                                   |
   | .screen-reader-text           | third-party stylesheets (CookieYes, Tawk)  |
   | reduced-motion transitions    | third-party stylesheets + embeds           |
   | @media print block            | hello:reset's verbatim print block         |
   | #mc_embed_signup form         | classic-061523.css (Mailchimp embed)       |
   | #mc_embed_signup .mc-field-group | classic-061523.css                      |
   | #mc_embed_signup .indicates-required | classic-061523.css                   |
   | #mc_embed_signup .foot        | classic-061523.css                         |
   ===================================================================== */

/* ==== PAGE: email (page-email.php) ===========================

   Page scope (style system §7): props the components consume, plus the
   declarations that exist on exactly one page. Reference ids are the frozen
   baseline's Elementor ids; every value is read from that page's generated CSS
   (`docs/research/style-sources.md` §3.3) and re-checked against the rendered
   page. The blocks marked "instance geometry" are values the shared layer-4
   component does not expose as a prop — they belong here rather than in a
   component rule, and §26/§28 carry their own copies for their own pages.
   ==================================================================== */

/* --- props ---------------------------------------------------------- */
/* Hero paint row (59ed790) and its painted image (16be538). The URL is
   stylesheet-relative (resolves against the theme root), so the painted URL
   equals the #14 §4 preload target, which keeps get_theme_file_uri(). */
.wpz-page--email .wpz-hero {
	--wpz-hero-paint: linear-gradient(90deg, #E4F3FF 0%, #E8E3FC 100%);
	--wpz-hero-image: url("assets/img/heroes/email-hero-alt-cleaned.webp");
}
/* 91f1859: the reference's "View Pricing" anchor inherits the 1em line-height of its
   heading wrapper (the theme's `a` rule carries the 1.6em body line) */
.wpz-page--email .wpz-hero__link { line-height: var(--wpz-lh-tight); }

/* The shared CTA partial emits `.wpz-section wpz-cta` with no boxed inner and no
   padding prop of its own; the reference's section is 0/30/50/30 (116a3ab) and its
   panel (21db8f3) is the 1140 boxed inner. */
.wpz-page--email .wpz-cta { --wpz-section-padding: 0 var(--wpz-pad-x) var(--wpz-pad-y); }
/* the reference's CTA panel wraps (row-reverse + wrap-reverse) only from 767 down */
.wpz-page--email .wpz-cta__panel { flex-wrap: nowrap; }
.wpz-page--email .wpz-cta__content { display: flex; flex-direction: column; gap: var(--wpz-gap); }
.wpz-page--email .wpz-cta__lead { font-size: var(--wpz-fs-ui); }
.wpz-page--email .wpz-cta__content p { margin: 0; }
.wpz-page--email .wpz-cta__title { margin: 0; }
.wpz-page--email .wpz-cta__panel { margin-inline: auto; max-width: min(100%, var(--wpz-container)); }

/* --- hero: reference instance geometry ------------------------------ */
/* 59ed790 becomes a column at ≤1024 with the media column first (16be538
   `order:-99999`), full width, 320px tall (200px from 767 down). */
@media (max-width: 1024px) {
	.wpz-page--email .wpz-hero__panel { flex-direction: column; }
	.wpz-page--email .wpz-hero__content { padding-block: 0; width: 100%; }
	.wpz-page--email .wpz-hero__lead { font-size: var(--wpz-fs-ui); }
	/* the reference's per-element 32px h1 is a mobile override; through the tablet
	   band the kit token already carries the right size (40px, then 32px) */
	.wpz-page--email .wpz-hero__title { font-size: var(--wpz-fs-h1); }
	.wpz-page--email .wpz-hero__media { order: -99999; width: 100%; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.wpz-page--email .wpz-hero__media { min-height: 320px; }
}

/* --- review strip: reference instance geometry ---------------------- */
/* Trust items (ffe4f18): 30px item spacing, 16px #2CC492 icons with a 1px icon
   gap; card label 700/1em (876eca6) and the 100px logo pulled 8px up (83a7121). */
.wpz-page--email .wpz-review-strip__items { --wpz-icon-list-gap: 30px; --wpz-icon-list-size: 16px; }
/* ffe4f18: the reference centres the trust items once they wrap (mobile) */
@media (max-width: 767px) {
	.wpz-page--email .wpz-review-strip__items { justify-content: center; }
}
.wpz-page--email .wpz-review-strip__items .wpz-icon-list__icon { color: var(--wpz-accent-green-deep); padding-inline-end: 1px; }
.wpz-page--email .wpz-review-strip__label { font-weight: 700; line-height: var(--wpz-lh-tight); }
/* 83a7121: the reference wraps the 100px logo in a widget container with a -8px top
   margin; inside it the inline image adds the 1.5625px baseline descender of the 16px
   body line, so the card's content is 18.172 tall and the image starts 6.4375 above it.
   The theme's image sits directly in the flex row (no line box), so the descender is
   folded into the margin to land the image and the card's height on the same pixels. */
.wpz-page--email .wpz-review-strip__logo { margin-block-start: calc(-8px + 1.5625px); width: 100px; }
/* a4079ec: the reference card's border is 0 and only the hover state draws it; it also
   carries Elementor's `e-transform` perspective matrix (a visual no-op) which puts the
   card on its own compositing layer, so its text rasterises with grayscale AA */
.wpz-page--email .wpz-review-strip__card { border-width: 0; transform: perspective(1px); }
.wpz-page--email .wpz-review-strip__card:hover,
.wpz-page--email .wpz-review-strip__card:focus { border-width: 1px; }

/* --- feature rows: reference instance geometry ---------------------- */
/* Every reference container is a flex column with a 20px gap and its headings
   and paragraphs carry no margins (75659c3e, 5c68efb8, 4a25396, 5143e1d,
   6ed3391f, 1096ef24); the intro/grid columns are 50/50 through the tablet band
   and the tile text is the kit body size, not the 18px card size. */
.wpz-page--email .wpz-feature-row__cols { align-items: flex-start; display: flex; gap: var(--wpz-gap); }
.wpz-page--email .wpz-feature-row__intro,
.wpz-page--email .wpz-feature-row__copy,
.wpz-page--email .wpz-feature-row__tile-body { display: flex; flex-direction: column; gap: var(--wpz-gap); }
/* 1096ef24 is the full-bleed box (padding 50/30, `--wpz-bg-blue` #F1F1FA — the
   component carries the green kit colour, so this page needs the blue override) and
   its `.e-con-inner` is the 1140 inner; the copy row and the 1140 illustration column
   stack with the 20px container gap. */
.wpz-page--email .wpz-feature-row__panel { background-color: var(--wpz-bg-blue); padding-block: 0; }
.wpz-page--email .wpz-feature-row__panel > .wpz-container { display: flex; flex-direction: column; gap: var(--wpz-gap); padding-block: var(--wpz-pad-y); }
.wpz-page--email .wpz-feature-row__tile-body { gap: 0; }
.wpz-page--email .wpz-feature-row__intro .wpz-feature-row__title,
.wpz-page--email .wpz-feature-row__copy .wpz-feature-row__title,
.wpz-page--email .wpz-feature-row__tile-title { line-height: var(--wpz-lh-heading); margin: 0; }
.wpz-page--email .wpz-feature-row__lead,
.wpz-page--email .wpz-feature-row__tile-text { font-size: var(--wpz-fs-ui); }
.wpz-page--email .wpz-feature-row__intro p,
.wpz-page--email .wpz-feature-row__copy p { margin: 0; }
.wpz-page--email .wpz-feature-row__media img { border-radius: var(--wpz-radius-menu); width: 100%; }
.wpz-page--email .wpz-feature-row--grid > .wpz-container { display: flex; gap: var(--wpz-gap); }
.wpz-page--email .wpz-feature-row--grid .wpz-feature-row__tiles { width: 50%; }

/* The tile row is the reference's flex line: the media column is 20% of the row
   (80px through the tablet band, 80px fixed at mobile) with border-box sizing, and
   the text column is its 80%/75% sibling; the 20px row gap then shrinks both by the
   reference's own amounts (1440: 109.52/429.92, 1024: 79.23/372.08, 390: 80/230). */
.wpz-page--email .wpz-feature-row__tile-media { box-sizing: border-box; min-width: 0; padding: 25px; width: 20%; }
.wpz-page--email .wpz-feature-row__tile-body { flex: 0 1 auto; width: 80%; }
@media (max-width: 1024px) {
	.wpz-page--email .wpz-feature-row__tile-media { flex: 0 1 auto; min-height: 80px; padding: 10px; width: 80px; }
	/* 4a25396 takes --align-items:flex-start from 1024 down (the tile row stops centring) */
	.wpz-page--email .wpz-feature-row__tile { align-items: flex-start; }
}
@media (max-width: 767px) {
	.wpz-page--email .wpz-feature-row__tile-media { flex: 1 0 auto; }
	.wpz-page--email .wpz-feature-row__tile-body { flex: 1 1 auto; width: 75%; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.wpz-page--email .wpz-feature-row__intro,
	.wpz-page--email .wpz-feature-row__tiles { width: 50%; }
	.wpz-page--email .wpz-feature-row__copy { width: 75%; }
}
@media (max-width: 767px) {
	.wpz-page--email .wpz-feature-row--grid > .wpz-container { flex-wrap: wrap; }
	.wpz-page--email .wpz-feature-row--grid .wpz-feature-row__tiles { width: 100%; }
	.wpz-page--email .wpz-feature-row__cols { flex-wrap: wrap; }
	.wpz-page--email .wpz-feature-row__cols .wpz-feature-row__intro,
	.wpz-page--email .wpz-feature-row__cols .wpz-feature-row__tiles { width: 100%; }
}
@media (max-width: 1024px) {
	.wpz-page--email .wpz-feature-row__panel { padding: 0 30px; }
	.wpz-page--email .wpz-feature-row__panel > .wpz-container { padding-block: 30px; }
}

/* --- flat pricing: reference instance geometry ---------------------- */
/* 4f95f0c (row of 25% intro + 2 × 37.5% cards, wrapping at ≤1024), 2e1aeff
   (10px top pad), 5a809bf/797982b (1px transparent border, radius 40, padding
   10/10/30, space-between), 9acac24/4a47c08 (heads), 3ad2921/ea9ddde (pills),
   5bc004c/ada09fb (14px icons, 20px item spacing, 0 20px inset, top-aligned
   icons) and efe5b9a/33b3d5c (10px above the full-width buy button).
   The reference container is `--gap: 0px 0px` at every width (the ≤1024 rule only
   adds `--flex-wrap:wrap`), while the component's ≤1024 rule supplies hosting's
   `--row-gap: 20px`; `row-gap: 0` here keeps the wrapping tablet row from gaining
   20px between the intro and the cards. */
.wpz-page--email .wpz-pricing > .wpz-container { display: flex; flex-wrap: wrap; row-gap: 0; }
.wpz-page--email .wpz-pricing__intro { display: flex; flex-direction: column; gap: var(--wpz-gap); padding: 10px 30px 0 0; }
.wpz-page--email .wpz-pricing__intro .wpz-pricing__title { margin: 0; }
.wpz-page--email .wpz-pricing__intro .wpz-pricing__lead { margin: 0; }
.wpz-page--email .wpz-pricing__lead { font-size: var(--wpz-fs-ui); }
.wpz-page--email .wpz-pricing__plan {
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: var(--wpz-radius-block);
	box-shadow: none;
	display: flex;
	flex-direction: column;
	gap: var(--wpz-gap);
	justify-content: space-between;
	padding: 10px 10px 30px;
	width: 37.5%;
}
.wpz-page--email .wpz-pricing__plan:hover { border-color: var(--wpz-ink); box-shadow: none; }
.wpz-page--email .wpz-pricing__head { border-radius: 30px; display: flex; flex-direction: column; margin-block-end: 0; padding: var(--wpz-gap); }
.wpz-page--email .wpz-pricing__head--green { background-color: var(--wpz-bg-green); }
.wpz-page--email .wpz-pricing__head--pink { background-color: var(--wpz-bg-pink); }
.wpz-page--email .wpz-pricing__name { align-self: flex-start; border-radius: var(--wpz-radius-tab); padding: 6px 20px; }
.wpz-page--email .wpz-pricing__amount { display: block; margin-block-start: var(--wpz-gap); }
.wpz-page--email .wpz-pricing__currency { font-size: var(--wpz-fs-ui); }
/* 913eff4: the features widget's 20px inline inset now lives on the component
   (`.wpz-icon-list.wpz-pricing__features { margin-inline: var(--wpz-gap) }`, hoisted
   by #26); the page-scope `padding-inline: 20px` that predates it double-counted the
   inset, shifting every item +20px and narrowing it by 40px (which wraps the 390 text
   to two lines and lifts the section by 175px). */
.wpz-page--email .wpz-pricing__features { --wpz-icon-list-gap: 20px; --wpz-icon-list-size: var(--wpz-fs-label); flex-grow: 1; }
.wpz-page--email .wpz-pricing__features .wpz-icon-list__item { align-items: flex-start; }
/* 913eff4's icon: 5px down, 10px trailing. The component now carries both
   (`top: 5px` + `padding-inline-end: 10px`, #26 hoist); the page-scope
   `margin-block-start: 5px` that predates it pushed the icons another 5px down. */
.wpz-page--email .wpz-pricing__features .wpz-icon-list__text { font-size: var(--wpz-fs-label); }
.wpz-page--email .wpz-pricing__plan .btn-wpzee { margin-block-start: 10px; margin-inline: 20px; text-align: center; }
@media (max-width: 1024px) {
	.wpz-page--email .wpz-pricing__intro { padding: 0 0 10px; width: 100%; }
	.wpz-page--email .wpz-pricing__plan { width: 50%; }
}
@media (max-width: 767px) {
	.wpz-page--email .wpz-pricing__plan { width: 100%; }
}

/* --- FAQ: reference instance geometry ------------------------------- */
/* ee42603: the aside is a flex column with a 20px gap and a 16px intro
   (017006d/4041e33); aside 25% / list 75% hold through the tablet band. */
.wpz-page--email .wpz-faq > .wpz-container { column-gap: var(--wpz-gap); display: flex; }
.wpz-page--email .wpz-faq__aside { display: flex; flex-direction: column; gap: var(--wpz-gap); }
.wpz-page--email .wpz-faq__title { margin: 0; }
.wpz-page--email .wpz-faq__intro { font-size: var(--wpz-fs-ui); }
@media (min-width: 768px) and (max-width: 1024px) {
	.wpz-page--email .wpz-faq__aside { width: 25%; }
	.wpz-page--email .wpz-faq__list { width: 75%; }
}
/* the reference wraps the FAQ columns only at mobile (`.e-con.e-flex` takes
   --flex-wrap-mobile from 767 down) */
@media (max-width: 767px) {
	.wpz-page--email .wpz-faq > .wpz-container { flex-wrap: wrap; }
}

/* --- CTA: reference instance geometry ------------------------------- */
/* af12bf1: the illustration column is 30vh tall from 767 down. */
@media (max-width: 767px) {
	.wpz-page--email .wpz-cta__panel { flex-wrap: wrap-reverse; }
	.wpz-page--email .wpz-cta__media { min-height: 30vh; }
}

/* ==== PAGE: home (front-page.php) ==== */
/* Scope props (style system §7) + the page-only blocks of the composition spec §3
   (product cards, reviews). Section paddings are Appendix A.1 values: hero 30,
   trust bar 20/30/50/30, everything else 0/30/50/30.
   Page component references: hero 2f94681/59ed790/0a62a07/16be538; trust bar
   98cfdcb/4f65b19/17038db/a4079ec/83a7121; product cards b850d32/827a8d1/506b539/
   e92575e; features 7e1611ed/499cc4e9/7ec33a7e; reviews 1c2d4b7/632376c0/848fff9/
   599a536/3674c89/2df240a. */
.wpz-page--home .wpz-hero {
	--wpz-hero-paint: linear-gradient(90deg, #FFEEF3 0%, #E2F3FF 100%);
	--wpz-hero-image: url("assets/img/heroes/wpzee_hero_1.webp");
	--wpz-section-padding: var(--wpz-pad-x);
}
.wpz-page--home .wpz-review-strip { --wpz-section-padding: 20px var(--wpz-pad-x) var(--wpz-pad-y); }
.wpz-page--home .wpz-prod-cards { --wpz-section-padding: 0 var(--wpz-pad-x) var(--wpz-pad-y); }
.wpz-page--home .wpz-feature-row--intro { --wpz-section-padding: 0 var(--wpz-pad-x) var(--wpz-pad-y); }
.wpz-page--home .wpz-reviews { --wpz-section-padding: 0 var(--wpz-pad-x) var(--wpz-pad-y); }
.wpz-page--home .wpz-cta { --wpz-section-padding: 0 var(--wpz-pad-x) var(--wpz-pad-y); }

/* Home-only hero rows — the page's own per-element rules (59ed790 / 0a62a07 /
   8c6afc6 / c8e510f / 16be538). The component's <=1024 stack serves the other
   five marketing heroes; home keeps the two-column row all through the tablet
   band (panel `row`, 50% columns, content padding-block 50px, media order back
   to 0, no min-height) and then flips to media-over-text at <=767: panel
   `row-reverse` + `wrap-reverse`, both children full width, so the DOM's
   content-first pair wraps into media-row (above) and content-row (below). */
@media (max-width: 1024px) {
	.wpz-page--home .wpz-hero__panel { flex-direction: row; }
	.wpz-page--home .wpz-hero__content { padding-block: 50px; width: 50%; }
	.wpz-page--home .wpz-hero__title { font-size: 32px; }
	.wpz-page--home .wpz-hero__lead { font-size: var(--wpz-fs-ui); }
	.wpz-page--home .wpz-hero__media { min-height: auto; order: 0; width: 50%; }
}
@media (max-width: 767px) {
	.wpz-page--home .wpz-hero__panel { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
	.wpz-page--home .wpz-hero__content { padding-block: 0; width: 100%; }
	.wpz-page--home .wpz-hero__media { min-height: 200px; width: 100%; }
}

/* Home-only: the feature-tile images carry a 5px radius (home's per-element CSS,
   `65f8c9a1`/`735f6657`/`41aebba8`/`4c8f72af`; hosting's grid images use 4px). */
.wpz-page--home .wpz-feature-row__tile-media img { border-radius: 5px; }

/* --- page-scoped shared-component values (HOIST CANDIDATES) -------------
   Values the frozen baseline's generated CSS gives these components; they are
   page-scoped only because layers 1–4 are not this ticket's to edit. The same
   values are needed by #26–#28 (identical section ids on those pages), so the
   coordinator can hoist each row to its component unchanged. */
/* trust bar: icon list `ffe4f18` (30px gap, 16px #2CC492 icons, 1px icon pad),
   label `876eca6` (16px/700/1), logo `83a7121` (100px wide). */
.wpz-page--home .wpz-review-strip__items { --wpz-icon-list-gap: 30px; }
.wpz-page--home .wpz-review-strip .wpz-icon-list__icon { padding-inline-end: 1px; }
.wpz-page--home .wpz-review-strip .wpz-icon-list__icon .wpz-icon { fill: var(--wpz-accent-green-deep); }
.wpz-page--home .wpz-review-strip__label { font-weight: 700; line-height: var(--wpz-lh-tight); }
/* Card: 0-width border (the baseline's 1px border is `border-width:0`, #00B77B);
   the identity `perspective(0)` reproduces the baseline card's `e-transform`
   matrix (it changes text AA and image resampling — 160px of the card's diff);
   the logo's -6.44px lift reproduces the baseline image-widget line box (the
   img is `inline-block; vertical-align:middle` there, bottom-flush in an 18.17px
   box); hover adds the reference's `translateY(-2px)`. */
.wpz-page--home .wpz-review-strip__card { border-width: 0; transform: perspective(0); transition: box-shadow var(--wpz-t-meta), transform var(--wpz-t-lift); }
.wpz-page--home .wpz-review-strip__card:hover { transform: translateY(-2px); }
.wpz-page--home .wpz-review-strip__logo { margin-block-start: -6.44px; width: 100px; }
@media (max-width: 1024px) {
	.wpz-page--home .wpz-review-strip__items { justify-content: center; }
}
/* features: `7e1611ed` inner is the row; `499cc4e9` intro col (radius 40, flex
   column gap 20); `33e4ae81` lead 16px; `66978f97` media 20% border-box;
   `51d61c21` body 80%; `4aba6ace` title 18px/1.25 margin 0; `7ea0d016` body 16px. */
.wpz-page--home .wpz-feature-row > .wpz-container { display: flex; gap: var(--wpz-gap); }
/* The component stacks at ≤1024; the reference keeps 50/50 through the 768–1024
   band (`499cc4e9`/`7ec33a7e` are `--width:50%` at min-width 768) and stacks at
   ≤767, where the children fall back to 100% and the row wraps (`--flex-wrap-mobile`). */
@media (min-width: 768px) and (max-width: 1024px) {
	.wpz-page--home .wpz-feature-row__intro, .wpz-page--home .wpz-feature-row__tiles { width: 50%; }
}
@media (max-width: 767px) {
	.wpz-page--home .wpz-feature-row > .wpz-container { flex-wrap: wrap; }
}
.wpz-page--home .wpz-feature-row__intro { border-radius: var(--wpz-radius-block); display: flex; flex-direction: column; gap: var(--wpz-gap); }
.wpz-page--home .wpz-feature-row__title { margin: 0; }
.wpz-page--home .wpz-feature-row__lead { font-size: var(--wpz-fs-ui); margin: 0; }
.wpz-page--home .wpz-feature-row__tile-media { box-sizing: border-box; min-width: 0; width: 20%; }
.wpz-page--home .wpz-feature-row__tile-body { box-sizing: border-box; width: 80%; }
/* Tablet: the media is `--width:80px` with flex-shrink 1 (the component pins it to
   `flex: 0 0 80px`, which changes the 768–1024 shrink split). */
@media (max-width: 1024px) {
	.wpz-page--home .wpz-feature-row__tile-media { flex: 0 1 80px; }
	/* The reference tile rows switch to `--align-items:flex-start` at ≤1024
	   (`61adb865`), so the 80px media box sits at the row top, not centred. */
	.wpz-page--home .wpz-feature-row__tile { align-items: flex-start; }
}
.wpz-page--home .wpz-feature-row__tile-title { line-height: var(--wpz-lh-heading); margin: 0; }
.wpz-page--home .wpz-feature-row__tile-text { font-size: var(--wpz-fs-ui); }
@media (max-width: 767px) {
	.wpz-page--home .wpz-feature-row__tile-media { flex: 1 0 80px; }
	.wpz-page--home .wpz-feature-row__tile-body { width: 75%; }
}
/* CTA: `44ce9219` content flex column gap 20; `206adb69` title margin 0;
   `574025fd`/`1e981528` leads 16px margin 0 (panel cap: the partial's container).
   The panel is `nowrap` at ≥768 (desktop `e-con` default); the component's
   `wrap` base would wrap the 50%+50% columns instead of shrinking them. Mobile
   media keeps the reference's `min-height:30vh` (`5f0bb923`). */
.wpz-page--home .wpz-cta__content { display: flex; flex-direction: column; gap: var(--wpz-gap); }
.wpz-page--home .wpz-cta__title { margin: 0; }
.wpz-page--home .wpz-cta__lead { font-size: var(--wpz-fs-ui); margin: 0; }
@media (min-width: 768px) {
	.wpz-page--home .wpz-cta__panel { flex-wrap: nowrap; }
}
@media (max-width: 767px) {
	.wpz-page--home .wpz-cta__media { min-height: 30vh; }
}

/* --- page-only: product cards (b850d32 / 827a8d1 / 506b539) ------------- */
.wpz-prod-cards__grid { display: grid; gap: var(--wpz-gap); grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; }
.wpz-prod-card {
	border: 1px solid var(--wpz-border);
	border-radius: var(--wpz-radius-block);
	display: flex;
	flex-direction: column;
	padding: var(--wpz-pad-x);
	transition: border-color var(--wpz-t-meta), box-shadow var(--wpz-t-meta);
}
.wpz-prod-card:hover { border-color: var(--wpz-ink); box-shadow: var(--wpz-shadow-card-xl); }
.wpz-prod-card__media { align-items: center; border-radius: var(--wpz-radius-tab); display: flex; justify-content: center; min-height: 80px; width: 80px; }
.wpz-prod-card--green .wpz-prod-card__media { background-color: var(--wpz-bg-green); }
.wpz-prod-card--blue .wpz-prod-card__media { background-color: var(--wpz-bg-blue); }
.wpz-prod-card--yellow .wpz-prod-card__media { background-color: var(--wpz-bg-yellow); }
.wpz-prod-card__img { display: block; width: 40px; }
.wpz-prod-card__title { margin: 20px 0; }
.wpz-prod-card__text { margin: 0 0 var(--wpz-gap); }
.wpz-prod-card__from { font-size: var(--wpz-fs-label); line-height: var(--wpz-lh-body); margin: 0; }
.wpz-prod-card__price { align-items: flex-end; display: flex; }
.wpz-prod-card__amount { margin: 0; }
.wpz-prod-card__per { font-size: var(--wpz-fs-ui); font-weight: 700; margin: 0 0 6px 2px; }
.wpz-prod-card .btn-wpzee { margin-block-start: var(--wpz-gap); text-align: center; width: 100%; }
@media (max-width: 1024px) {
	.wpz-prod-cards__grid { grid-template-columns: 1fr; }
}

/* --- page-only: reviews (1c2d4b7 / 632376c0 / 848fff9 / 3674c89) ------- */
/* `overflow: clip` (not hidden) so the panel does not become the sticky aside's
   scrollport — with `hidden` the aside is pinned 150px into the panel at rest and
   never sticks to the viewport. */
.wpz-reviews__panel { background-color: var(--wpz-bg-green); border-radius: var(--wpz-radius-block); overflow: clip; padding: var(--wpz-pad-y) var(--wpz-pad-x); }
.wpz-reviews__grid { align-items: flex-start; display: flex; gap: var(--wpz-gap); }
.wpz-reviews__list { display: flex; flex-direction: column; gap: var(--wpz-gap); list-style: none; margin: 0; padding: 0 var(--wpz-pad-x) 0 0; width: 66.66%; }
.wpz-review-card {
	background-color: #FFFFFF;
	border: 1px solid var(--wpz-border);
	border-radius: var(--wpz-radius-tab);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--wpz-pad-x);
}
.wpz-review-card__stars { align-items: flex-start; color: var(--wpz-accent-green); display: flex; gap: 6px; line-height: var(--wpz-lh-body); min-height: 1.6em; }
.wpz-review-card__stars .wpz-icon { fill: var(--wpz-accent-green); height: 18px; width: 18px; }
.wpz-review-card__author { font-size: var(--wpz-fs-ui); font-weight: 700; line-height: var(--wpz-lh-body); margin: 0; }
.wpz-reviews__aside { align-items: flex-start; align-self: flex-start; display: flex; flex-direction: column; gap: var(--wpz-gap); position: sticky; top: 150px; width: 33.33%; }
.wpz-reviews__aside h2, .wpz-reviews__aside p { margin: 0; }
@media (max-width: 1024px) {
	.wpz-reviews__grid { flex-direction: column; }
	.wpz-reviews__list { padding: 0; width: 100%; }
	.wpz-reviews__aside { order: -1; position: static; width: 100%; }
}
/* ==== PAGE: blog + archives (home.php, archive.php) ==== */
/* Templates 1438/1435: the title section is the section default (50px 30px) and the
   list section is top-flush (0 30px 50px 30px) — a prop, not a redeclaration. The h1
   carries zero margins on its own (the reference's heading widget renders margin 0:
   the title section is exactly 50 + 72.5 + 50 at 1440). Grid, cards and pagination are
   components (layer 4) — nothing here restates them. */
.wpz-page--blog .wpz-blog-list,
.wpz-page--archive .wpz-blog-list { --wpz-section-padding: 0 var(--wpz-pad-x) var(--wpz-pad-y); }
.wpz-page--blog .wpz-blog-title h1,
.wpz-page--archive .wpz-blog-title h1 { margin: 0; }


/* ==== PAGE: contact (page-contact.php) ==== */
/* Props + the page-only contact-cards block (style system §7). The section
   paddings are this page's values from the composition spec (contact.md §1–§3);
   the hero pair is this page's row of the §7 paint table as a stylesheet-relative
   URL, so the painted URL equals the #14 §4 preload target (README §5.9). */
.wpz-page--contact .wpz-hero { --wpz-section-padding: var(--wpz-pad-x); }
.wpz-page--contact .wpz-hero {
	--wpz-hero-paint: linear-gradient(90deg, #FDE2EA 0%, #F5DCBF 100%); /* contact: 59ed790 */
	--wpz-hero-image: url("assets/img/heroes/contact-hero.webp"); /* contact: 16be538 */
}
.wpz-page--contact .wpz-review-strip { --wpz-section-padding: 20px var(--wpz-pad-x) var(--wpz-pad-y); }
.wpz-page--contact .wpz-contact-cards { --wpz-section-padding: 0 var(--wpz-pad-x) var(--wpz-pad-y); }
/* The hero button targets #methods; `#services/#features/#pricing` are the layer-3
   anchor offsets, this page's id is its own (behaviours-a11y §2.2). */
.wpz-page--contact #methods { scroll-margin-top: 100px; }

/* Contact methods — page-only block (7e13eb1 / cb6ec29 / a839f1e / 5a3d33b).
   Reference geometry: 3 columns, 20px gap, cards bordered at `--wpz-border` and
   30px-padded, the paragraph grows so the action row sits on the grid row's
   floor. The rows are grids of 1/2/4 (the reference's `9ae2092`/`0ab44e5`
   collapse to one column at ≤767); every button is full width. */
/* minmax(0, 1fr) rather than bare 1fr: the icon-only buttons' min-content
   (16px glyph + 60px padding) is wider than a 4-across cell, and a bare `1fr`
   track floors on it — the reference's cells squeeze instead (measured 68.66px
   at 1440), which the 0 floor reproduces. */
.wpz-contact-cards__grid { display: grid; gap: var(--wpz-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.wpz-contact-card {
	border: 1px solid var(--wpz-border);
	border-radius: var(--wpz-radius-block);
	display: flex;
	flex-direction: column;
	gap: var(--wpz-gap);
	padding: var(--wpz-pad-x);
	transition: border-color var(--wpz-t-meta), box-shadow var(--wpz-t-meta);
}
.wpz-contact-card:hover { border-color: var(--wpz-ink); box-shadow: var(--wpz-shadow-card); }
/* The icon slot is 30px tall in the reference (`f28a4d8`: 28px glyph in a 30px
   line box) — the 2px lands below the glyph, before the 20px card gap. */
.wpz-contact-card__icon { display: flex; font-size: 28px; height: 30px; }
.wpz-contact-card__title { margin: 0; }
.wpz-contact-card__text { flex: 1 0 auto; margin: 0; }
.wpz-contact-card__actions { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.wpz-contact-card__actions--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wpz-contact-card__actions--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wpz-contact-card__actions .btn-wpzee { align-items: center; display: flex; justify-content: center; width: 100%; }
.wpz-contact-card__actions .btn-wpzee .wpz-icon { flex: 0 0 auto; }
@media (max-width: 1024px) {
	.wpz-contact-cards__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.wpz-contact-card__actions--2, .wpz-contact-card__actions--4 { grid-template-columns: 1fr; }
}

/* --- page-scoped shared-component values (HOIST CANDIDATES) -------------
   Values the frozen baseline's generated CSS gives the shared sections; they are
   page-scoped only because layers 1–4 are not this ticket's to edit. #26–#28 need
   the same rows (identical section ids), so the coordinator can hoist each row to
   its component unchanged. */
/* Trust bar: icon list `ffe4f18` (30px gap, 16px #2CC492 icons, 1px icon pad);
   label `876eca6` (16px/700/1em); logo `83a7121` (100px wide, -8px widget
   margin); the card's border is 0-width in the reference (`a4079ec`
   `border-width:0`) and its hover lifts 2px. The reference card is also an
   Elementor transform container (`.e-con.e-transform`): even at rest its chain
   resolves to `perspective(0)`, which makes the card a 3D layer and shifts
   Chrome's rasterisation of the label and logo by ~0.4 CSS px — reproduce the
   reference's own value or the band diffs at all three viewports. */
.wpz-page--contact .wpz-review-strip__items { --wpz-icon-list-gap: 30px; }
.wpz-page--contact .wpz-review-strip .wpz-icon-list__icon { color: var(--wpz-accent-green-deep); padding-inline-end: 1px; }
.wpz-page--contact .wpz-review-strip__label { font-weight: 700; line-height: var(--wpz-lh-tight); }
.wpz-page--contact .wpz-review-strip__card { border-width: 0; transform: perspective(0); transition: box-shadow var(--wpz-t-meta), transform var(--wpz-t-lift); }
.wpz-page--contact .wpz-review-strip__card:hover { transform: perspective(0) translateY(-2px); }
.wpz-page--contact .wpz-review-strip__logo-wrap { margin-block-start: -8px; }
.wpz-page--contact .wpz-review-strip__logo { display: inline-block; vertical-align: middle; width: 100px; }
/* Hero at ≤1024: the component encodes home's tablet geometry (row, 50% text
   column, 32px title). The other five pages share the reference's stacked shape —
   media first at a 320/200px floor, text column full-width under its 550px cap,
   title at the h1 token, lead at 16px (measured identical on all five). */
@media (max-width: 1024px) {
	.wpz-page--contact .wpz-hero__panel { flex-direction: column; }
	.wpz-page--contact .wpz-hero__content { padding-block: 0; width: 100%; }
	.wpz-page--contact .wpz-hero__title { font-size: var(--wpz-fs-h1); }
	.wpz-page--contact .wpz-hero__lead { font-size: var(--wpz-fs-ui); }
	.wpz-page--contact .wpz-hero__media { min-height: 320px; order: -99999; width: 100%; }
}
@media (max-width: 767px) {
	.wpz-page--contact .wpz-hero__media { min-height: 200px; }
}
/* ==== PAGE: single post (single.php) ==== */
/* Template 1400 (§2): the four-value section paddings and the 768/828 container
   widths are props the components consume; the title/date row, the featured image's
   500px frame and the related widget's grid margin are declarations that exist on
   exactly this page. */
.wpz-page--post .wpz-post-featured,
.wpz-page--post .wpz-post-share { --wpz-section-padding: 0 var(--wpz-pad-x) var(--wpz-pad-y); }
.wpz-page--post .wpz-post-body { --wpz-container-width: 768px; --wpz-section-padding: 0 var(--wpz-pad-x) 30px; }
.wpz-page--post .wpz-post-newsletter,
.wpz-page--post .wpz-post-share,
.wpz-page--post .wpz-post-related { --wpz-container-width: 828px; }
.wpz-page--post .wpz-post-related { --wpz-section-padding: 0 var(--wpz-pad-x) 100px; }

/* Title row: the reference's 20px flex-column gap between h1 and date, both centred,
   zero margins (the heading widget and the icon list both render margin 0). */
.wpz-page--post .wpz-post-header .wpz-container { display: flex; flex-direction: column; gap: var(--wpz-gap); }
.wpz-page--post .wpz-post-title { margin: 0; text-align: center; }
.wpz-page--post .wpz-post-meta { margin: 0; text-align: center; }

/* Featured image (288d812): 100% × 500px, cover-cropped, centre position, 40px radius
   at every viewport (the widget's per-instance CSS). */
.wpz-page--post .wpz-post-featured__img { border-radius: var(--wpz-radius-block); display: block; height: 500px; object-fit: cover; object-position: center center; width: 100%; }

/* The related posts widget container's 10px top margin (b7f7a63). */
.wpz-page--post .wpz-post-related .wpz-post-grid { margin-block-start: 10px; }

/* ==== PAGE: legal / DB-driven (page.php) ==== */
/* Elementor template 615 (`/privacy/`, `/terms/`, `/use-policy/`, `/refunds/` and
   the draft `/vulnerability-patching/`; any future page falls here too). Values
   read off the baseline's rendered geometry and its per-element CSS, which has no
   media queries — the layout is identical at 1440/1024/390:
     - section: the theme's default 50px 30px (the container's own padding);
     - title: 44px, margin 0 (`.elementor-615 …-2f5357e .elementor-heading-title
       {font-size:44px}` beating the kit's h1 size; the heading widget renders no
       margins), so the h1 does not use `--wpz-fs-h1`;
     - content: 1px solid `#F0F0F9` (kit border colour = `--wpz-border`), radius
       40px (`--wpz-radius-block`), 30px padding all sides;
     - the 20px title↔box gap is the reference's `e-con-inner{display:flex;gap:20px}`,
       re-expressed as the container's flex gap (this page has exactly two children).
   The DB content's typography (16px/1.6em body, the kit h3/h4 sizes, list, link and
   table styles) is base layer + `wp-block-library`; nothing here restates it, and no
   `wpz-post-content` class is applied (style system §6, legal gets none). */
.wpz-page--page .wpz-container { display: flex; flex-direction: column; gap: var(--wpz-gap); }
.wpz-page--page .wpz-page__title { font-size: 44px; margin-block: 0; }
.wpz-page--page .wpz-page__content { border: 1px solid var(--wpz-border); border-radius: var(--wpz-radius-block); padding: var(--wpz-pad-x); }

/* ==== PAGE: socialbee (page-socialbee.php) ==== */
/* Composition: docs/plans/page-composition-marketing/socialbee.md. Reference ids
   (`2f94681`, …) are the frozen baseline's Elementor ids; every value below is read
   from that page's generated CSS and re-checked against the rendered baseline
   (1440/1024/390).

   Groups:
   1. Props — the hero paint and the per-section `--wpz-section-padding` (layer 5's
      normal shape).
   2. Layout — section-internal rows/columns the base leaves to the page: the boxed
      inner of a row section is the page's `wpz-container`, exactly as 404 declares
      its own container (the component rule only caps and centres it).
   3. Reference values — the baseline's values where the layer-4 default differs.
      Checked against /wordpress-hosting/ as well, so they are component-level
      mismatches rather than socialbee-only values: hoist candidates (ticket report).
   4. Responsive deltas, desktop-first, in the four sanctioned queries.
   5. The comparison table's own stylesheet (d0972f4), verbatim under the page scope. */

/* --- 1. props: hero paint (style system §7) ------------------------- */
.wpz-page--socialbee .wpz-hero {
	--wpz-hero-paint: linear-gradient(90deg,#FFFCDC 0%,#FFEED2 100%);
	--wpz-hero-image: url("assets/img/heroes/socialbee-hero-2-reup.webp");
}

/* --- 1. props: per-section padding (composition spec §1–§12) -------- */
.wpz-page--socialbee .wpz-hero { --wpz-section-padding: 30px var(--wpz-pad-x); }              /* 2f94681 */
.wpz-page--socialbee .wpz-review-strip { --wpz-section-padding: 20px var(--wpz-pad-x) 50px; }  /* 98cfdcb */
.wpz-page--socialbee .wpz-feature-row--intro { --wpz-section-padding: 0 var(--wpz-pad-x); }    /* 1c958bd2 */
.wpz-page--socialbee .wpz-feature-row--grid { --wpz-section-padding: 0 var(--wpz-pad-x) 50px; }/* be03aec */
.wpz-page--socialbee .wpz-feature-row--panel { --wpz-section-padding: 0 var(--wpz-pad-x); }    /* 4e13ce00 */
.wpz-page--socialbee .wpz-pricing { --wpz-section-padding: 50px var(--wpz-pad-x) 0; }          /* 6c8f009b */
.wpz-page--socialbee .wpz-divider { --wpz-section-padding: 50px var(--wpz-pad-x) 50px; }       /* 71a0186b */
.wpz-page--socialbee .wpz-compare { --wpz-section-padding: 0 var(--wpz-pad-x); }               /* 156f578 */
.wpz-page--socialbee .wpz-faq { --wpz-section-padding: 0 var(--wpz-pad-x); }                   /* ee42603 */
.wpz-page--socialbee .wpz-cta { --wpz-section-padding: 0 var(--wpz-pad-x) 50px; }              /* 7730283 */

/* --- 2. layout ------------------------------------------------------ */
/* The row sections: `wpz-container` is their boxed inner, so it carries the row. */
.wpz-page--socialbee .wpz-feature-row > .wpz-container { display: flex; gap: var(--wpz-gap); }
.wpz-page--socialbee .wpz-faq > .wpz-container { display: flex; gap: 0 var(--wpz-gap); }
/* The FAQ heading column is a 20px-gap stack (1c90501). */
.wpz-page--socialbee .wpz-faq__aside { display: flex; flex-direction: column; gap: var(--wpz-gap); }
.wpz-page--socialbee .wpz-faq__title { margin-block-end: 0; }
.wpz-page--socialbee .wpz-pricing > .wpz-container { display: flex; gap: 0; }
/* The panel's inner holds a 75% copy column and the full-width illustration, which
   wraps below it (7462f318 is a column container with a wrapping inner). */
.wpz-page--socialbee .wpz-feature-row__inner { display: flex; flex-wrap: wrap; gap: var(--wpz-gap); }
/* Feature rows stack their own copy: the heading column is a flex column and the
   intro's tile column flows 1-per-row (26135fda / 43d989b1, gap 20). */
.wpz-page--socialbee .wpz-feature-row__intro,
.wpz-page--socialbee .wpz-feature-row--intro .wpz-feature-row__tiles,
.wpz-page--socialbee .wpz-pricing__intro {
	display: flex;
	flex-direction: column;
	gap: var(--wpz-gap);
}
/* The reference's spacing is the container gap: the copy's own margins are zero. */
.wpz-page--socialbee .wpz-feature-row__intro > *,
.wpz-page--socialbee .wpz-pricing__intro > * { margin-block: 0; }
/* The tabs widget stacks: the pill is `align-self: center` (220ff9f5). */
.wpz-page--socialbee .wpz-tabs { display: flex; flex-direction: column; }
/* Compare: intro, box, button are a column (156f578). */
.wpz-page--socialbee .wpz-compare > .wpz-container { display: flex; flex-direction: column; gap: var(--wpz-gap); }
/* The divider's line sits 50px into the section (71a0186b: the widget pads above the
   line), not at the section's top. */
.wpz-page--socialbee .wpz-divider__line { padding-block: 0; }
/* CTA (5465b602 / 23378b2b): the panel is the reference's boxed container — 1140 wide,
   a single row at desktop. Hoist candidates (five pages share the partial). */
.wpz-page--socialbee .wpz-cta__panel { flex-wrap: nowrap; margin-inline: auto; max-width: var(--wpz-container); }
.wpz-page--socialbee .wpz-cta__content { display: flex; flex-direction: column; gap: var(--wpz-gap); }
.wpz-page--socialbee .wpz-cta__content > * { margin-block: 0; }
.wpz-page--socialbee .wpz-cta__lead { font-size: var(--wpz-fs-ui); }
.wpz-page--socialbee .wpz-cta__media { min-height: 30vh; }                                     /* 7ffff986 */

/* --- 3. reference values -------------------------------------------- */
/* Hero (96b79b0): the "View Pricing" heading-link is a 1.25 line box. */
.wpz-page--socialbee .wpz-hero__link { line-height: 1.25; }
/* Review strip (98cfdcb / ffe4f18 / 876eca6 / 83a7121): 50/50 columns, the item row
   centred in its half, the card right-aligned; the logo is a 100px box whose line
   box (24.61 image − 8 widget margin + 1.56 baseline shift) is 18.17 tall. */
.wpz-page--socialbee .wpz-review-strip__items { --wpz-icon-list-gap: 30px; --wpz-icon-list-size: 16px; flex: 0 1 50%; }
.wpz-page--socialbee .wpz-review-strip .wpz-icon-list__icon { padding-inline-end: 1px; }
/* The review strip's icon is the one coloured icon-list instance on the page
   (ffe4f18: fill #2CC492 = --wpz-accent-green-deep). Hoist candidate: the style
   system gives the component that token; the checks/pricing lists stay black. */
.wpz-page--socialbee .wpz-review-strip .wpz-icon-list__icon .wpz-icon { fill: var(--wpz-accent-green-deep); }
.wpz-page--socialbee .wpz-review-strip__label { font-size: var(--wpz-fs-ui); font-weight: 700; line-height: var(--wpz-lh-tight); }
.wpz-page--socialbee .wpz-review-strip__card { border-width: 0; margin-inline-start: auto; }
/* The reference's card carries Elementor's identity 3D transform (`translateZ(-1px)`,
   the e-transform default), which makes it a composited layer — the label and logo
   rasterise with the baseline's antialiasing; without it they differ by a level. */
.wpz-page--socialbee .wpz-review-strip__card { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -1, 0, 0, 0, 1); }
.wpz-page--socialbee .wpz-review-strip__logo { margin-block-start: -6.44px; width: 100px; }
/* Feature rows (3749f96f / 1893331e / fff3656 / 2ad644d6): titles carry the heading
   line box, the leads and tile bodies are 16px. */
.wpz-page--socialbee .wpz-feature-row__title { margin-block-end: 0; }
.wpz-page--socialbee .wpz-feature-row__lead,
.wpz-page--socialbee .wpz-feature-row__tile-text { font-size: var(--wpz-fs-ui); }
.wpz-page--socialbee .wpz-feature-row__tile-title { line-height: var(--wpz-lh-heading); margin-block-end: 0; }
.wpz-page--socialbee .wpz-feature-row__tile-media { align-self: flex-start; box-sizing: border-box; flex: 0 1 20%; min-width: 0; }
.wpz-page--socialbee .wpz-feature-row__tile-body { flex: 0 1 80%; min-width: 0; }
/* The feature grid's four tiles fill two columns column-wise, as the reference's two
   half-width columns do (be03aec / 02e5fbc / 8be2ea2). */
.wpz-page--socialbee .wpz-feature-row--grid { margin-block-start: 20px; }
.wpz-page--socialbee .wpz-feature-row--grid .wpz-feature-row__tiles {
	grid-auto-flow: column;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, auto);
}
/* Check list (35b4cf9): 5px item gap, 16px icons, 0.125×size icon margin. */
.wpz-page--socialbee .wpz-feature-row__checks { --wpz-icon-list-gap: 5px; --wpz-icon-list-size: 16px; }
.wpz-page--socialbee .wpz-feature-row__checks .wpz-icon-list__icon { padding-inline-end: 5px; }
.wpz-page--socialbee .wpz-feature-row__checks .wpz-icon-list__icon .wpz-icon { margin-inline: calc(var(--wpz-icon-list-size, 1em) * .125); }
/* Panel (7462f318 / 33f05029 / 7e05ed54 / 58c06ce3): yellow, 20px-widget spacing.
   The reference's widget spacing is the copy column's flex `gap` (measured 20px on
   production between every child, with zero child margins); the earlier
   `> * { margin-block: 0 20px }` double-counted it (+40px per copy column, caught by
   the consolidated sweep), so the gap alone provides it. */
.wpz-page--socialbee .wpz-feature-row__panel { background-color: var(--wpz-bg-yellow); }
.wpz-page--socialbee .wpz-feature-row__media { width: 100%; }
.wpz-page--socialbee .wpz-feature-row__media img { width: 100%; }
/* Pricing (6bf24710 / 220ff9f5 / 7be2fe4a / 5cf5ee80 / 106fe78 / 7626b65f): intro
   offset, the flat tab pill, the plan card/head/pill geometry, the price row, the
   rule-separated feature list and the full-width buy button. */
.wpz-page--socialbee .wpz-pricing__intro { padding-block-start: 110px; }
.wpz-page--socialbee .wpz-pricing__title { margin-block-end: 0; }
.wpz-page--socialbee .wpz-pricing__lead { font-size: var(--wpz-fs-ui); }
.wpz-page--socialbee .wpz-tabs__nav { background-color: transparent; gap: 5px; }
.wpz-page--socialbee .wpz-tabs__tab[aria-selected="false"] { background-color: #FFFFFF; }
.wpz-page--socialbee .wpz-pricing__plans { gap: 0; grid-template-columns: repeat(3, 1fr); }
/* The pill-to-panels distance is the reference's own 40px (production's tab nav bottom
   2900+58, its plan grid top 2998), the same value hosting carries — not the component's
   20px default. */
.wpz-page--socialbee .wpz-tabs { --wpz-tabs-gap: 40px; }
.wpz-page--socialbee .wpz-pricing__plan { border-radius: var(--wpz-radius-block); padding: 10px 10px 30px; }
.wpz-page--socialbee .wpz-pricing__head { border-radius: 30px; }
.wpz-page--socialbee .wpz-pricing__name { border-radius: 10px; padding: 6px 20px; }
.wpz-page--socialbee .wpz-pricing__price { align-items: flex-end; display: flex; margin-block-start: var(--wpz-gap); }
.wpz-page--socialbee .wpz-pricing__per { font-weight: 700; margin: 0 0 6px 2px; }
.wpz-page--socialbee .wpz-pricing__currency { line-height: var(--wpz-lh-body); }
.wpz-page--socialbee .wpz-pricing__features { margin-inline: 20px; --wpz-icon-list-gap: 20px; --wpz-icon-list-size: 14px; }
.wpz-page--socialbee .wpz-pricing__features .wpz-icon-list__item { align-items: flex-start; }
.wpz-page--socialbee .wpz-pricing__features .wpz-icon-list__text { font-size: var(--wpz-fs-label); }
.wpz-page--socialbee .wpz-pricing__features .wpz-icon-list__icon { padding-inline-end: 11.75px; top: 5px; }
.wpz-page--socialbee .wpz-pricing__features .wpz-icon-list__icon .wpz-icon { margin-inline-end: calc(var(--wpz-icon-list-size, 1em) * .125); }
.wpz-page--socialbee .wpz-pricing__features .wpz-icon-list__item:not(:last-child)::after {
	border-block-start: 1px solid var(--wpz-border);
	bottom: 0;
	content: "";
	inset-inline: 0;
	margin: auto;
	position: absolute;
}
/* The buy button's top spacing is the reference's 10px inline-block line-box tail
   (production: the 44px button sits in a 54px block, in a card whose other gaps are the
   flex `gap`), not a 30px margin — that extra 20px made every card and the whole pricing
   panel 20/40px too tall (caught by the consolidated sweep after an earlier fix removed
   the tab gap and the two errors cancelled out). */
.wpz-page--socialbee .wpz-pricing__plan .btn-wpzee { display: block; margin-block-start: 10px; margin-inline: 20px; text-align: center; }
.wpz-page--socialbee .wpz-pricing__plan--bootstrap .wpz-pricing__head { background-color: var(--wpz-bg-green); }
.wpz-page--socialbee .wpz-pricing__plan--accelerate .wpz-pricing__head { background-color: var(--wpz-bg-pink); }
.wpz-page--socialbee .wpz-pricing__plan--pro .wpz-pricing__head { background-color: var(--wpz-bg-yellow); }
.wpz-page--socialbee .wpz-pricing__plan--pro50 .wpz-pricing__head,
.wpz-page--socialbee .wpz-pricing__plan--pro100 .wpz-pricing__head,
.wpz-page--socialbee .wpz-pricing__plan--pro150 .wpz-pricing__head { background-color: var(--wpz-bg-blue); }
/* Compare (ae3b9e6 / 48a37ae / 027f2ca). */
.wpz-page--socialbee .wpz-compare__intro { width: 75%; }
.wpz-page--socialbee .wpz-compare__intro h2 { margin: 0 0 var(--wpz-gap); }
.wpz-page--socialbee .wpz-compare__intro p { font-size: var(--wpz-fs-ui); margin-block-end: 0; }
.wpz-page--socialbee .wpz-compare__box {
	border: 1px solid var(--wpz-ink);
	border-radius: 10px;
	box-shadow: var(--wpz-shadow-card);
	overflow: hidden;
}
.wpz-page--socialbee .wpz-compare__back { align-self: center; margin-block-start: 30px; }
.wpz-page--socialbee .wpz-compare__back .wpz-icon { margin-inline-end: 5px; }
/* FAQ (1c90501 / 4bc3fac / ee42603): 16px intro; rich answers are content markup. */
.wpz-page--socialbee .wpz-faq__intro { font-size: var(--wpz-fs-ui); }
.wpz-page--socialbee .wpz-faq__rich ul { padding-inline-start: 40px; }
.wpz-page--socialbee .wpz-faq__rich > :first-child { margin-block-start: 0; }
.wpz-page--socialbee .wpz-faq__rich > :last-child { margin-block-end: 0; }

/* --- 4. responsive deltas ------------------------------------------- */
@media (max-width: 1024px) {
	/* Hero (59ed790 / 0a62a07 / 16be538): a column, media first, 320 tall. The h1
	   follows the kit (40px at tablet); the lead drops to 16px. */
	.wpz-page--socialbee .wpz-hero__panel { flex-direction: column; }
	.wpz-page--socialbee .wpz-hero__content { padding-block: 0; width: 100%; }
	.wpz-page--socialbee .wpz-hero__title { font-size: var(--wpz-fs-h1); }
	.wpz-page--socialbee .wpz-hero__lead { font-size: var(--wpz-fs-ui); }
	.wpz-page--socialbee .wpz-hero__media { min-height: 320px; order: -1; width: 100%; }
	/* Review strip (4f65b19 / 17038db): the item row centres, the card stops being
	   pushed right. */
	.wpz-page--socialbee .wpz-review-strip__items { justify-content: center; }
	.wpz-page--socialbee .wpz-review-strip .wpz-review-strip__card { margin-inline-start: 0; }
	/* Feature rows keep their 50/50 row at tablet (26135fda / 43d989b1); the tile
	   media becomes an 80px box (337c475f). */
	.wpz-page--socialbee .wpz-feature-row__intro,
	.wpz-page--socialbee .wpz-feature-row--intro .wpz-feature-row__tiles { width: 50%; }
	.wpz-page--socialbee .wpz-feature-row__tile-media { flex: 0 1 80px; min-height: 80px; }
	/* The panel's own padding drops to 30 at tablet (7462f318) and its copy column
	   stays 75% until the media wraps (33f05029). */
	.wpz-page--socialbee .wpz-feature-row__panel { padding-block: 30px; }
	.wpz-page--socialbee .wpz-feature-row__copy { width: 75%; }
	/* Pricing (6c8f009b / 6bf24710): the intro and the tabs stack (the row wraps) and
	   the intro's 110px offset and 30px end padding drop away. */
	.wpz-page--socialbee .wpz-pricing > .wpz-container { flex-wrap: wrap; row-gap: var(--wpz-gap); }
	.wpz-page--socialbee .wpz-pricing__intro { padding: 0; }
	/* FAQ keeps its 25/75 row at tablet. */
	.wpz-page--socialbee .wpz-faq__aside { width: 25%; }
	.wpz-page--socialbee .wpz-faq__list { width: 75%; }
}
@media (max-width: 767px) {
	/* Hero media shrinks to 200 (16be538). */
	.wpz-page--socialbee .wpz-hero__media { min-height: 200px; }
	/* Every row stacks: the intro/tiles, the FAQ pair and the pricing pair wrap. */
	.wpz-page--socialbee .wpz-feature-row > .wpz-container,
	.wpz-page--socialbee .wpz-faq > .wpz-container,
	.wpz-page--socialbee .wpz-pricing > .wpz-container { flex-wrap: wrap; }
	.wpz-page--socialbee .wpz-feature-row__intro,
	.wpz-page--socialbee .wpz-feature-row--intro .wpz-feature-row__tiles { width: 100%; }
	.wpz-page--socialbee .wpz-feature-row__tile-media { flex: 1 0 80px; }
	/* The CTA panel wraps with the media above the copy at mobile (23378b2b). */
	.wpz-page--socialbee .wpz-cta__panel { flex-wrap: wrap-reverse; }
	.wpz-page--socialbee .wpz-feature-row--grid .wpz-feature-row__tiles {
		grid-auto-flow: row;
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}
	.wpz-page--socialbee .wpz-feature-row__copy { width: 100%; }
	/* The compare intro goes full width when the box stacks under it (ae3b9e6). */
	.wpz-page--socialbee .wpz-compare__intro { width: 100%; }
	.wpz-page--socialbee .wpz-pricing__plans { grid-template-columns: 1fr; }
	.wpz-page--socialbee .wpz-faq__aside,
	.wpz-page--socialbee .wpz-faq__list { width: 100%; }
}

/* --- 5. the comparison table's stylesheet (d0972f4) ----------------- */
/* Hand-written content classes (`.social-bee`, `.pricing-table*`), verbatim from the
   reference's html-widget custom CSS including the nested `&…:hover` rules. */
.wpz-page--socialbee .social-bee .pricing-table-container { max-width: 100%; max-height: none; overflow-x: auto; width: 100%; }
.wpz-page--socialbee .social-bee .pricing-table { margin: 0 auto; min-width: 1024px; width: 100%; }
.wpz-page--socialbee .social-bee .pricing-table__header-row {
	/*background-color: #F0F0F9;*/
	border-radius: 10px;
	overflow: hidden;

	&.pricing-table__row:hover {
		background-color: unset;
	}
}
.wpz-page--socialbee .social-bee .pricing-table__row {
	display: flex;
	width: 100%;

	&:hover {
		background-color: #f0f0f9;
	}
}
.wpz-page--socialbee .social-bee .pricing-table__row + .pricing-table__row { border-top: 1px solid #F0F0F9; }
.wpz-page--socialbee .social-bee .pricing-table__header-row + .pricing-table__row { border-top: 1px solid #000; }
.wpz-page--socialbee .social-bee .pricing-table__cell {
	align-items: center;
	display: flex;
	flex: 1;
	font-size: 14px;
	justify-content: center;
	line-height: 1.5;
	padding: 8px 15px;
	text-align: center;
}
.wpz-page--socialbee .social-bee .pricing-table__header-cell { font-weight: bold; padding: 24px 15px; }
.wpz-page--socialbee .social-bee .pricing-table__feature-name { flex: 1.5; font-weight: bold; justify-content: flex-start; text-align: left; }
.wpz-page--socialbee .social-bee .pricing-table__feature-header {
	/*background-color: #f3c500;*/
	color: #000;
	flex: 1.5;
}
.wpz-page--socialbee .social-bee .pricing-table__icon.pricing-table__icon--check { color: #61d097; font-weight: bold; }
.wpz-page--socialbee .social-bee .pricing-table__icon.pricing-table__icon--cross { color: #f7717e; font-weight: bold; }

/* ==== PAGE: about (page-about.php) ==== */
/* Scope props (style system §7) + the Appendix A.1 section paddings + the page-only
   blocks of the composition spec (two-column copy, business information, this page's
   own inline CTA). Component references: hero 2f94681/59ed790/0a62a07/16be538;
   trust bar 98cfdcb/4f65b19/17038db/a4079ec/876eca6/83a7121; copy 75659c3e/5c68efb8/
   8ce6f70; business 9be22b5/0b3525f/1da7f54/8650a51/d3ebd7f; CTA f9253f9/5f07373. */
.wpz-page--about .wpz-hero {
	--wpz-hero-paint: linear-gradient(90deg, #D5E9FF 0%, #F8EFDF 100%);
	--wpz-hero-image: url("assets/img/heroes/about-hero.webp");
	--wpz-section-padding: var(--wpz-pad-x);
}
.wpz-page--about .wpz-review-strip { --wpz-section-padding: 20px var(--wpz-pad-x) var(--wpz-pad-y); }
.wpz-page--about .wpz-copy-cols,
.wpz-page--about .wpz-about-info,
.wpz-page--about .wpz-about-cta { --wpz-section-padding: 0 var(--wpz-pad-x) var(--wpz-pad-y); }

/* Hero lead `c8e510f`: 20px desktop, 16px at ≤1024; hero title `8c6afc6`: the kit's h1
   token at every band (58/40/32) — the theme component pins 32px to the whole ≤1024
   band, so the tablet band needs the token back (40px). Both rows are HOIST CANDIDATES
   for `.wpz-hero`. */
@media (max-width: 1024px) {
	.wpz-page--about .wpz-hero__lead { font-size: var(--wpz-fs-ui); }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.wpz-page--about .wpz-hero__title { font-size: var(--wpz-fs-h1); }
}

/* Hero stacking (HOIST CANDIDATE — the six marketing pages share it): the reference's
   `59ed790` flips to `--flex-direction:column` at ≤1024 and `16be538` carries the
   `--order:-99999` hack, so the *media* stacks above the text, both full width — the
   text column's `max-width:550px` then left-aligns it (production: content box
   60,501,550,231 at 1024; the component's row+wrap leaves it right-aligned at 414).
   The painting is 320px tall at 768–1024, 200px at ≤767, and the text column loses its
   block padding. All page-scoped because layers 1–4 are not this ticket's to edit. */
@media (max-width: 1024px) {
	.wpz-page--about .wpz-hero__panel { flex-direction: column; }
	.wpz-page--about .wpz-hero__content { padding-block: 0; width: 100%; }
	.wpz-page--about .wpz-hero__media { min-height: 320px; order: -1; width: 100%; }
}
@media (max-width: 767px) {
	.wpz-page--about .wpz-hero__media { min-height: 200px; }
}

/* --- page-scoped shared-component values (HOIST CANDIDATES) -------------
   Values the frozen baseline's generated CSS gives these components; they are
   page-scoped only because layers 1–4 are not this ticket's to edit. #26–#30 need the
   same rows (identical widget ids: 98cfdcb is one global template), so each can be
   hoisted to its component unchanged. */
/* Trust bar icon list `ffe4f18`: 30px item spacing, 16px icons in `--wpz-accent-green-deep`
   with the widget's 1px `padding-inline-end` (the theme's `.25em` svg margin is the
   baseline's `.25 × --e-icon-list-icon-size`, so 16px must be set explicitly). */
.wpz-page--about .wpz-review-strip__items { --wpz-icon-list-gap: 30px; --wpz-icon-list-size: 16px; }
.wpz-page--about .wpz-review-strip .wpz-icon-list__icon { color: var(--wpz-accent-green-deep); padding-inline-end: 1px; }
/* Label `876eca6`: 16px/700/1em. Card `a4079ec`: border-width 0 (#00B77B at width 0),
   hover light-lift 2px. Logo `83a7121`: `img{width:100px}` at an integral x (the card's
   content right − 100) inside a flex line that is exactly 18.17px tall — the baseline
   image widget's inline line box, which also sets the card's 47.17px height.
   The theme's img is the flex item itself, so the row reproduces the line box with one
   top margin of `24.609375 − 18.171875 = −6.4375px` (the reference's painted image top
   is 6.4375 above the line; a sum like −6.44 rounds the flex line up to 18.1875px and
   shifts every band below the strip by +0.0156px — the 1px line-advance bands on `The
   Company`/`Postal Address`). The label's trailing half-pixel correction is gone: at
   104.4063px its text measures the same as the reference, so the card's content is
   209.4063px and the card's box (269.4063 × 47.1719) matches production at 1440/1024/390
   to the last 1/64px; `flex-shrink: 0` keeps the logo from absorbing any residual
   fractional shrink. The label carries the reference widget container's `e-transform`
   3D context (`perspective(0)`, an identity matrix whose 3D rasterisation is part of
   the painted text pixels); the logo deliberately does not get its own transform — the
   card's own `perspective(0)` already puts it in a 3D layer like the reference's, and a
   second transform on the image makes Chrome re-rasterise it as its own layer (measured:
   +124 mismatched px in the strip vs the frozen baseline). */
.wpz-page--about .wpz-review-strip__label { font-weight: 700; line-height: var(--wpz-lh-tight); transform: perspective(0); }
.wpz-page--about .wpz-review-strip__card { border-width: 0; transition: box-shadow var(--wpz-t-meta), transform var(--wpz-t-lift); }
.wpz-page--about .wpz-review-strip__card:hover { transform: perspective(0) translateY(-2px); }
.wpz-page--about .wpz-review-strip__logo { flex-shrink: 0; margin-block: -6.4375px 0; width: 100px; }
@media (max-width: 1024px) {
	.wpz-page--about .wpz-review-strip__items { justify-content: center; }
}

/* --- page-only: two-column copy (75659c3e / 5c68efb8 / 8ce6f70) -------- */
/* The two 50% columns are flex children of a 1140 inner with a 20px column gap, so
   each shrinks to 560px (1160 > 1140), exactly as the reference does. The left column
   carries the reference's 1px `--wpz-border` top/right edge and its 0 40px 0 0 radius
   (`5c68efb8` — paint only, no background); the right column is the pink panel. Both
   are flex columns with a 20px gap and heading/paragraph margins at 0 (the baseline's
   heading widgets render margin 0), so the columns measure 275/355 at 1440. */
.wpz-copy-cols__grid { align-items: flex-start; display: flex; gap: var(--wpz-gap); }
.wpz-copy-cols__col {
	border-radius: 0 var(--wpz-radius-block) 0 0;
	border-right: 1px solid var(--wpz-border);
	border-top: 1px solid var(--wpz-border);
	display: flex;
	flex-direction: column;
	gap: var(--wpz-gap);
	padding: 30px 30px 0 0;
	width: 50%;
}
.wpz-copy-cols__col--spark {
	background-color: var(--wpz-bg-pink);
	border: 0;
	border-radius: var(--wpz-radius-block);
	padding: 30px;
}
.wpz-copy-cols__title { margin: 0; }
.wpz-copy-cols__col p { margin: 0; }
/* `#more` is this page's in-page anchor (the hero's "Keep Reading" target): production
   lands the section 100px down — the sticky header's height, the same offset the three
   shared anchors carry in layer 3 (the reference's anchor behaviour, ticket #4).
   Page-only because only about links to it. */
.wpz-copy-cols { scroll-margin-top: 100px; }
@media (max-width: 767px) {
	.wpz-copy-cols__grid { flex-wrap: wrap; }
	.wpz-copy-cols__col { width: 100%; }
}

/* --- page-only: business information (9be22b5 / 0b3525f / 1da7f54 / 8650a51) --- */
/* The blue panel is the section's inner width (1380 at 1440, x 30) with the boxed
   1140 container centred inside it — the reference's `e-con` horizontal padding is
   absorbed by that cap. Padding 50/30 (30/30 at ≤1024); the intro column is 75%;
   the rows are white, radius 10, pad 30, over a 3-column 20px grid (1 column ≤767).
   `56dcbdb`: the labels carry the kit's *accent* typography — 16px/700/1.6em. */
.wpz-about-info__panel {
	background-color: var(--wpz-bg-blue);
	border-radius: var(--wpz-radius-block);
	padding: var(--wpz-pad-y) var(--wpz-pad-x);
}
.wpz-about-info__panel > .wpz-container { display: flex; flex-direction: column; gap: var(--wpz-gap); }
.wpz-about-info__intro { width: 75%; }
.wpz-about-info__intro h2 { margin: 0; }
.wpz-about-info__grid { display: grid; gap: var(--wpz-gap); grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; }
.wpz-about-info__row { background-color: #FFFFFF; border-radius: var(--wpz-radius-tab); padding: var(--wpz-pad-x); }
.wpz-about-info__label { font-size: var(--wpz-fs-ui); font-weight: 700; line-height: var(--wpz-lh-body); margin: 0; }
.wpz-about-info__value { margin: 0; }
@media (max-width: 1024px) {
	.wpz-about-info__panel { padding: 30px var(--wpz-pad-x); }
}
@media (max-width: 767px) {
	.wpz-about-info__intro { width: 100%; }
	.wpz-about-info__grid { grid-template-columns: 1fr; }
}

/* --- page-only: contact CTA (f9253f9 / 5f07373) ------------------------ */
/* A single centred inline button — `elementor-align-center`; the internal link keeps
   its baseline `target="_blank"` (about.md §5). The section's 50px bottom padding is
   the gap to the footer (the section is top-flush: the panel above ends at its own
   50px padding). */
.wpz-about-cta__inner { text-align: center; }

/* ==== PAGE: bio + wordpress ad (page-bio.php, page-wordpress.php) ==== */
/* Ticket #31. Two scopes in one block (they share this ticket's files):
   `--bio` (the canvas, 1639) and `--wordpress` (the ad landing, 1798).

   Two kinds of rules live here, both page-only by construction:
   1. **Props** the components consume (`--wpz-section-padding`, `--wpz-hero-*`,
      `--wpz-icon-list-*`, …) — the sanctioned mechanism (#11 §6.3).
   2. **Flat/bio-only declarations**: the ad page's pricing is `wpz-pricing--flat`
      (the component in layer 4 is the *tabbed* one; `--flat` has no layer-4 rules),
      bio's four stanzas are page-only blocks, and the rows marked `HOIST` reproduce
      the reference's per-element values for a *shared* component whose layer-4 value
      differs (they are scoped under `.wpz-page--…` and are candidates to move into
      layer 4 unchanged — same situation, same note, as the `--home` block).

   Every number comes from the frozen baseline's generated CSS; the reference Elementor
   element ids are named per row. Baseline geometry at 1440/1024/390 was verified with a
   headless-Chrome rect probe against production (`chat_b.png` above the fold, etc.). */

/* --- page: bio (page-bio.php) — the canvas (spec §3) ------------------------- */
/* Black canvas: page 1639's `background_color=#000000`, on body *and* main so the
   elastic-scroll area is black too (spec §3.1). */
.wpz-page--bio { background-color: #000000; }

/* Section 1 (3778635): centred column, 20px gap; padding is the section default
   (50/30/50/30 — the reference splits it section/inner, same offsets). */
.wpz-bio-head .wpz-container { align-items: center; display: flex; flex-direction: column; gap: var(--wpz-gap); }
/* Logo (b1b0381): `width:auto;height:30px` → renders 130.02×30, centred. */
.wpz-bio-logo { text-align: center; }
.wpz-bio-logo-img { display: block; height: 30px; margin-inline: auto; width: auto; }
/* Social icons (2b0218b): 50px black circles, 25px white glyphs, 5px gaps. The
   reference's ≤767 block shrinks them to 32px/20px with 10px gaps (verified live). */
.wpz-social-icons--bio { --wpz-social-icon-size: 25px; gap: 0 5px; justify-content: center; }
.wpz-social-icons--bio .wpz-social-icon {
	align-items: center;
	background-color: #000000;
	border-radius: 50px;
	display: flex;
	height: 50px;
	justify-content: center;
	transition: background-color var(--wpz-t-meta);
	width: 50px;
}
.wpz-social-icons--bio .wpz-social-icon:hover { background-color: #686868; color: #FFFFFF; }
@media (max-width: 767px) {
	.wpz-social-icons--bio { --wpz-social-icon-size: 20px; gap: 0 10px; }
	.wpz-social-icons--bio .wpz-social-icon { height: 32px; width: 32px; }
}

/* Section 2 (08566f7): 3-column grid, 20px gaps; 1 column ≤767 (the reference keeps
   3 across the 768–1024 band — verified live; spec §3.3's "1 ≤1024" is wrong).
   `wpz-bio-links` is the spec's stanza name, but layer 4 also carries a placeholder
   component of that name (a 1-column dark tile grid) that never renders — it would
   also kill the section padding. The stanza role wins here (HOIST: drop the layer-4
   placeholder). */
.wpz-page--bio .wpz-bio-links {
	--wpz-section-padding: 0 var(--wpz-pad-x) var(--wpz-pad-y);
	display: block;
	padding: var(--wpz-section-padding);
}
.wpz-bio-links-grid { display: grid; gap: var(--wpz-gap); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) {
	.wpz-bio-links-grid { grid-template-columns: 1fr; }
}
/* Card (4a20ace): flex row, 20px gap, centred; 3px white ring, 50px radius, 10px pad;
   hover `#303030` with the reference's background transition. */
.wpz-bio-card {
	align-items: center;
	border: 3px solid #FFFFFF;
	border-radius: 50px;
	display: flex;
	gap: var(--wpz-gap);
	padding: 10px;
	text-decoration: none;
	transition: background-color var(--wpz-t-meta);
}
.wpz-bio-card:hover { background-color: #303030; }
/* Icon (71e2795 / 08b576a / dceabc6): 38px circle, 22px glyph, one tone per card.
   The wrapper is the reference's icon widget (`line-height:1`, an inline-block icon
   inside it → a 40px line box at desktop); ≤767 its container carries the -2px bottom
   margin, which is what makes the card 64px there instead of 66px. */
.wpz-bio-card-icon-wrap { line-height: var(--wpz-lh-tight); }
.wpz-bio-card-icon {
	border-radius: 50%;
	color: #000000;
	display: inline-block;
	height: 38px;
	padding: 8px;
	width: 38px;
}
.wpz-bio-card-icon .wpz-icon { display: block; height: 22px; line-height: 1; width: 22px; }
.wpz-bio-card-icon--wordpress-simple { background-color: #DEFFFE; }
.wpz-bio-card-icon--envelope { background-color: #D8DFFA; }
.wpz-bio-card-icon--magic { background-color: #F7F0D2; }
/* Title (67eb5bb): 16/700/1.6em white → 1em ≤767. */
.wpz-bio-card-title { color: #FFFFFF; font-size: var(--wpz-fs-ui); font-weight: 700; line-height: var(--wpz-lh-body); }
@media (max-width: 767px) {
	.wpz-bio-card-icon-wrap { margin-block-end: -2px; }
}
/* The reference's ≤767 title rule is `line-height:1em` on the *span* inside a 1.6em
   line box; the span here carries both roles, so keeping 1.6em puts the text on the
   same baseline (verified with a text-range probe: 203.2px both, vs 204 with 1em). */

/* Section 3 (e3f8162): title + grid, 20px gap; grid bottom padding 50. */
.wpz-page--bio .wpz-bio-posts { --wpz-section-padding: 0 var(--wpz-pad-x) var(--wpz-pad-y); }
.wpz-bio-posts .wpz-container { display: flex; flex-direction: column; gap: var(--wpz-gap); }
/* HOIST: the bio listing's title links keep the baseline's underline — the classic
   skin's `text-decoration: none` (correct on /blog/ and the archives, verified) is not
   in play on this page, where the kit's `a` rule paints them (media/pixel diff at
   1440/1024/390 is exactly these underlines). */
.wpz-page--bio .wpz-post-card--bio .wpz-post-card__title a { text-decoration: underline; }

/* "Latest Blog Posts" (69ee435): 30/700/1.25em white, centred → 24 ≤767, margin 0. */
.wpz-bio-posts-title { color: #FFFFFF; font-size: 30px; line-height: var(--wpz-lh-heading); margin: 0; text-align: center; }
@media (max-width: 767px) {
	.wpz-bio-posts-title { font-size: 24px; }
}

/* Section 4 (0756333): centred, 20px gap, 100px bottom padding. Each line mirrors the
   reference's heading widget (a block with the body line-height around an inline
   `line-height:1em` span) — that is what puts the two lines 45.6px apart and the text
   2px inside its line box; a plain flex item would shift the copy ~5px. */
.wpz-page--bio .wpz-bio-foot { --wpz-section-padding: var(--wpz-pad-y) var(--wpz-pad-x) 100px; }
.wpz-bio-foot-lines { align-items: center; display: flex; flex-direction: column; gap: var(--wpz-gap); }
.wpz-bio-foot-text { color: #FFFFFF; font-size: var(--wpz-fs-ui); line-height: var(--wpz-lh-tight); }
.wpz-bio-foot-text a { color: #FFFFFF; font-size: inherit; }
.wpz-bio-foot-text a:hover { color: var(--wpz-link-hover); }
@media (max-width: 767px) {
	.wpz-bio-foot-text { font-size: var(--wpz-fs-label); }
}

/* --- page: wordpress ad landing (page-wordpress.php) — spec §4 ------------------ */

/* Paint + section paddings (spec §4.1/§4.2; Appendix A.1). The hero keeps the older
   2025 `.png` pair — the .webp on the six marketing pages is not this page. */
.wpz-page--wordpress .wpz-hero {
	--wpz-hero-paint: linear-gradient(90deg, #E3F5F7 0%, #EFF8DF 100%);
	--wpz-hero-image: url("assets/img/heroes/wordpress-hosting-hero.png");
	--wpz-section-padding: var(--wpz-pad-x);
}
.wpz-page--wordpress .wpz-review-strip { --wpz-section-padding: 20px var(--wpz-pad-x) var(--wpz-pad-y); }
.wpz-page--wordpress .wpz-feature-row--intro { --wpz-section-padding: 0 var(--wpz-pad-x) 0; }
.wpz-page--wordpress .wpz-feature-row--grid { --wpz-section-padding: 20px var(--wpz-pad-x) var(--wpz-pad-y); }
.wpz-page--wordpress .wpz-feature-row--panel { --wpz-section-padding: 0 var(--wpz-pad-x) 0; }
.wpz-page--wordpress .wpz-pricing { --wpz-section-padding: var(--wpz-pad-y) var(--wpz-pad-x) 0; }
.wpz-page--wordpress .wpz-divider { --wpz-section-padding: 0 var(--wpz-pad-x) 0; }
.wpz-page--wordpress .wpz-faq { --wpz-section-padding: 0 var(--wpz-pad-x) 0; }
.wpz-page--wordpress .wpz-cta { --wpz-section-padding: 0 var(--wpz-pad-x) var(--wpz-pad-y); }

/* Hero (2f94681/59ed790/0a62a07/16be538). HOIST: the ≤1024 stack is the reference's
   (`--flex-direction:column` on the paint row); the component only wraps ≤767. The h1
   is 40px at 1024 (the token) — the component's ≤1024 32px is the 390 value only. */
@media (max-width: 1024px) {
	.wpz-page--wordpress .wpz-hero__panel { flex-direction: column; }
	.wpz-page--wordpress .wpz-hero__content { padding-block: 0; width: 100%; }
	.wpz-page--wordpress .wpz-hero__media { min-height: 320px; order: -99999; width: 100%; }
	.wpz-page--wordpress .wpz-hero__lead { font-size: var(--wpz-fs-ui); }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.wpz-page--wordpress .wpz-hero__title { font-size: var(--wpz-fs-h1); }
}
@media (max-width: 767px) {
	.wpz-page--wordpress .wpz-hero__media { min-height: 200px; }
}
/* The "View Pricing" heading-link keeps the reference widget's 1em line box (16px),
   which is what centres its 20px inline box in the 44px action row. */
.wpz-page--wordpress .wpz-hero__link, .wpz-page--wordpress .wpz-hero__link a { line-height: var(--wpz-lh-tight); }

/* Trust bar (98cfdcb/4f65b19/17038db/a4079ec/83a7121). HOIST rows: inline item gap
   30px, 16px `#2CC492` icons + 1px icon padding, 700/1em label, 0-width card border,
   the logo's 100px width and -6.44px lift (the reference's image-widget line box). */
.wpz-page--wordpress .wpz-review-strip__items { --wpz-icon-list-gap: 30px; }
.wpz-page--wordpress .wpz-review-strip .wpz-icon-list__icon { color: var(--wpz-accent-green-deep); padding-inline-end: 1px; }
.wpz-page--wordpress .wpz-review-strip__label { font-weight: 700; line-height: var(--wpz-lh-tight); }
/* The reference card carries Elementor's `e-transform` (`a4079ec`, a hover translateY
   keeps the 3D matrix at rest: `matrix3d(…,0,1,-1,…)`). That matrix is invisible
   geometry-wise but gives the card a 3D rendering context, which is what rasterises its
   label grayscale instead of subpixel — a 300px-that-shows-up-in-pixels difference.
   `perspective(1px) translateZ(0)` computes to the same matrix; hover keeps it. */
.wpz-page--wordpress .wpz-review-strip__card {
	border-width: 0;
	transform: perspective(1px) translateZ(0);
	transition: box-shadow var(--wpz-t-meta), transform var(--wpz-t-lift);
}
.wpz-page--wordpress .wpz-review-strip__card:hover { transform: perspective(1px) translateY(-2px); }
.wpz-page--wordpress .wpz-review-strip__logo { margin-block-start: -6.44px; width: 100px; }
@media (max-width: 1024px) {
	.wpz-page--wordpress .wpz-review-strip__items { justify-content: center; }
}
/* Feature rows (75659c3e/7fb55bd/9be22b5). The row is a flex pair: intro + tiles 50/50
   with a 20px gap (the reference's `.e-con-inner` is the flex row), wrapping ≤767. */
.wpz-page--wordpress .wpz-feature-row > .wpz-container { display: flex; gap: var(--wpz-gap); }
.wpz-page--wordpress .wpz-feature-row__intro { border-radius: var(--wpz-radius-block); display: flex; flex-direction: column; gap: var(--wpz-gap); }
.wpz-page--wordpress .wpz-feature-row__title { margin: 0; }
.wpz-page--wordpress .wpz-feature-row__lead { font-size: var(--wpz-fs-ui); margin: 0; }
.wpz-page--wordpress .wpz-feature-row__tile-media { box-sizing: border-box; min-width: 0; width: 20%; }
.wpz-page--wordpress .wpz-feature-row__tile-media img { border-radius: 5px; }
.wpz-page--wordpress .wpz-feature-row__tile-body { box-sizing: border-box; width: 80%; }
.wpz-page--wordpress .wpz-feature-row__tile-title { line-height: var(--wpz-lh-heading); margin: 0; }
.wpz-page--wordpress .wpz-feature-row__tile-text { font-size: var(--wpz-fs-ui); }
/* HOIST: the reference keeps 50/50 through the 768–1024 band (both columns are
   `--width:50%` at min-width 768); the component stacks to 100% at ≤1024 and wraps
   ≤767 — with 100% on one column only, the shrink split differs by 15px. */
@media (min-width: 768px) and (max-width: 1024px) {
	.wpz-page--wordpress .wpz-feature-row__intro,
	.wpz-page--wordpress .wpz-feature-row__tiles { width: 50%; }
}
@media (max-width: 1024px) {
	.wpz-page--wordpress .wpz-feature-row__tile { align-items: flex-start; }
	.wpz-page--wordpress .wpz-feature-row__tile-media { flex: 0 1 80px; }
	.wpz-page--wordpress .wpz-feature-row__tile-media img { width: 100%; }
}
@media (max-width: 767px) {
	.wpz-page--wordpress .wpz-feature-row > .wpz-container { flex-wrap: wrap; }
	.wpz-page--wordpress .wpz-feature-row__tile-media { flex: 1 0 80px; }
	.wpz-page--wordpress .wpz-feature-row__tile-body { width: 75%; }
}

/* Panel (9be22b5/0b3525f/1da7f54/8650a51). The green box is full-bleed with the 1140
   container inside; copy 75% (100% ≤1024), media full width, 20px between them. */
.wpz-page--wordpress .wpz-feature-row__panel { padding-block: var(--wpz-pad-y); }
.wpz-page--wordpress .wpz-feature-row__panel .wpz-container { display: flex; flex-direction: column; gap: var(--wpz-gap); }
.wpz-page--wordpress .wpz-feature-row__copy { display: flex; flex-direction: column; gap: var(--wpz-gap); }
.wpz-page--wordpress .wpz-feature-row__copy h2,
.wpz-page--wordpress .wpz-feature-row__copy p { margin: 0; }
.wpz-page--wordpress .wpz-feature-row__media img { width: 100%; }
@media (min-width: 768px) and (max-width: 1024px) {
	/* HOIST: the reference's copy column stays 75% through the band (`1da7f54`). */
	.wpz-page--wordpress .wpz-feature-row__copy { width: 75%; }
}
@media (max-width: 1024px) {
	.wpz-page--wordpress .wpz-feature-row__panel { padding-block: var(--wpz-pad-x); }
}

/* Live-chat CTA (7730283/23378b2b/5c65b93d/456eef6e/65755796/7ffff986). HOIST (shared
   partial): content flex column gap 20, title margin 0, leads 16px margin 0, panel
   nowrap ≥768 (the component's `wrap` base would wrap the 50%+50% columns instead of
   shrinking them), media 30vh ≤767. Identical on the five pages that use the partial. */
.wpz-page--wordpress .wpz-cta__content { display: flex; flex-direction: column; gap: var(--wpz-gap); }
.wpz-page--wordpress .wpz-cta__title { margin: 0; }
.wpz-page--wordpress .wpz-cta__lead { font-size: var(--wpz-fs-ui); margin: 0; }
@media (min-width: 768px) {
	.wpz-page--wordpress .wpz-cta__panel { flex-wrap: nowrap; }
}
@media (max-width: 767px) {
	.wpz-page--wordpress .wpz-cta__media { min-height: 30vh; }
}

/* HOIST: the divider line sits 50px from the section's top in the reference (the
   widget's 50px padding before its separator). Layer 4's `padding-block:50px` plus a
   *top* border puts the line at the section's edge instead; the pseudo-element pins it
   at +50px without relying on margin collapsing, and the transparent bottom border keeps
   the reference's 101px box (50 + 1 + 50 — a 1px short box shifts every later section).
   `height: 0` cancels the component's 1px content height (#26), which would otherwise
   add a second pixel: the border box would be 50 + 1 (content) + 1 (border) + 50.
   Affects every `.wpz-divider` page. */
.wpz-page--wordpress .wpz-divider__line { border: 0; border-block-end: 1px solid transparent; height: 0; padding-block: var(--wpz-pad-y); position: relative; }
.wpz-page--wordpress .wpz-divider__line::before {
	border-block-start: 1px solid var(--wpz-border);
	content: "";
	inset-block-start: var(--wpz-pad-y);
	inset-inline: 0;
	position: absolute;
}

/* FAQ (ee42603/1c90501/4bc3fac): aside 25% (10px right padding) + list 75%, 20px
   column gap, wrapping ≤767; every A is a `p` with margin 0. */
.wpz-page--wordpress .wpz-faq > .wpz-container { display: flex; gap: 0 var(--wpz-gap); }
.wpz-page--wordpress .wpz-faq__aside { display: flex; flex-direction: column; gap: var(--wpz-gap); }
.wpz-page--wordpress .wpz-faq__title,
.wpz-page--wordpress .wpz-faq__intro,
.wpz-page--wordpress .wpz-faq__q,
.wpz-page--wordpress .wpz-faq__a { margin: 0; }
.wpz-page--wordpress .wpz-faq__intro { font-size: var(--wpz-fs-ui); }
/* HOIST: the reference keeps 25/75 through the 768–1024 band (the component stacks at
   ≤1024 and only wraps ≤767). */
@media (min-width: 768px) and (max-width: 1024px) {
	.wpz-page--wordpress .wpz-faq__aside { width: 25%; }
	.wpz-page--wordpress .wpz-faq__list { width: 75%; }
}
@media (max-width: 767px) {
	.wpz-page--wordpress .wpz-faq > .wpz-container { flex-wrap: wrap; }
}

/* Pricing (06cac56) — `wpz-pricing--flat`, the flat annual variant. `--flat` has no
   layer-4 rules (the component there is the tabbed one), so the flat layout is defined
   here: intro 25% with 110px top padding, cards column 75%, one row of three 33.33%
   cards inset 10px, and the card interior. References per row. */
.wpz-page--wordpress .wpz-pricing > .wpz-container { display: flex; }
/* Intro (c926d64): flex column, 20px gap, 110px top padding, 30px right padding. */
.wpz-page--wordpress .wpz-pricing__intro { display: flex; flex-direction: column; gap: var(--wpz-gap); padding-block-start: 110px; }
.wpz-page--wordpress .wpz-pricing__title { margin: 0; }
.wpz-page--wordpress .wpz-pricing__lead { font-size: var(--wpz-fs-ui); margin: 0; }
/* The hidden discount banner (5a48054) stays in the DOM (spec §5.4) but never paints:
   `elementor-hidden-desktop/-tablet/-mobile`, i.e. display:none at every breakpoint. */
.wpz-page--wordpress .wpz-pricing__banner { border: 1px solid var(--wpz-ink); border-radius: var(--wpz-radius-menu); display: none; gap: 5px; padding: var(--wpz-gap-sm); }
.wpz-page--wordpress .wpz-pricing__cards { width: 75%; }
/* Row (6294f00): flex row, 10px padding all round, no gap — the three 33.33% cards
   shrink to 278.3/314.63/310 at 1440/1024/390 exactly as the reference does. ≤767 the
   row wraps (each card 100%) instead of shrinking to min-content. */
.wpz-page--wordpress .wpz-pricing__plans { display: flex; gap: 0; padding: 10px; }
.wpz-page--wordpress .wpz-pricing__plan {
	background-color: transparent;
	border-radius: var(--wpz-radius-block);
	box-shadow: none;
	display: flex;
	flex-direction: column;
	gap: var(--wpz-gap);
	justify-content: space-between;
	padding: 10px 10px 30px;
	width: 33.33%;
}
.wpz-page--wordpress .wpz-pricing__plan:hover { border-color: var(--wpz-ink); box-shadow: var(--wpz-shadow-card-lg); }
/* Head (971f9c3/6144c92): the coloured inner — radius 30, 20px padding, tone per plan. */
.wpz-page--wordpress .wpz-pricing__head { border-radius: 30px; display: flex; flex-direction: column; gap: 0; margin-block-end: 0; }
.wpz-page--wordpress .wpz-pricing__head--green { background-color: var(--wpz-bg-green); }
.wpz-page--wordpress .wpz-pricing__head--pink { background-color: var(--wpz-bg-pink); }
.wpz-page--wordpress .wpz-pricing__head--yellow { background-color: var(--wpz-bg-yellow); }
/* Badge (1410d57): black pill, radius 10, 6px 20px, 16/700/1.6em uppercase white. */
.wpz-page--wordpress .wpz-pricing__name {
	align-self: flex-start;
	background-color: var(--wpz-ink);
	border-radius: 10px;
	color: #FFFFFF;
	font-size: var(--wpz-fs-ui);
	font-weight: 700;
	line-height: var(--wpz-lh-body);
	padding: 6px 20px;
	text-transform: uppercase;
}
/* Price row (d117ee7): amount + `/year` baseline-flush, 20px above; `USD` 14/1.6. The
   `/year` keeps the reference's widget-container line box (25.6) around its inline
   span — a bare flex item would move the copy ~5px. */
.wpz-page--wordpress .wpz-pricing__price { align-items: flex-end; display: flex; margin-block-start: var(--wpz-gap); }
.wpz-page--wordpress .wpz-pricing__amount { margin: 0; }
.wpz-page--wordpress .wpz-pricing__per { margin: 0 0 6px 2px; }
.wpz-page--wordpress .wpz-pricing__per span { font-size: var(--wpz-fs-ui); font-weight: 700; line-height: var(--wpz-lh-body); }
.wpz-page--wordpress .wpz-pricing__currency { font-size: var(--wpz-fs-label); line-height: var(--wpz-lh-body); }
/* Locations (e224627/8428f82): visible on this page only (spec §6.1), US-only, one
   inline-SVG flag at 16px with a 4px radius (the reference's per-element custom CSS).
   The flag is a raw inline SVG (no `wpz-icon` class), so its size/spacing is explicit
   here: 16px box, the 4px `--e-icon-list-icon-size`-derived margin, 6px icon padding. */
.wpz-page--wordpress .wpz-pricing__locations { border: 1px solid var(--wpz-border); border-radius: 30px; display: flex; flex-direction: column; gap: 10px; padding: var(--wpz-gap); }
.wpz-page--wordpress .wpz-pricing__locations-title { font-size: var(--wpz-fs-label); font-weight: 700; line-height: var(--wpz-lh-heading); margin: 0; text-transform: uppercase; }
.wpz-page--wordpress .wpz-pricing__locations-list { --wpz-icon-list-gap: 10px; }
.wpz-page--wordpress .wpz-pricing__locations .wpz-icon-list__icon { padding-inline-end: 6px; }
.wpz-page--wordpress .wpz-pricing__locations .wpz-flag { border-radius: var(--wpz-radius-media); display: block; height: 16px; margin-inline-end: 4px; width: 16px; }
.wpz-page--wordpress .wpz-pricing__locations .wpz-icon-list__text { font-size: var(--wpz-fs-label); line-height: var(--wpz-lh-tight); }
/* Features (913eff4): 14px text, 14px icons with the reference's 5px vertical offset,
   20px item spacing, 1px separators between items (absolutely positioned like the
   reference's `:after`, so they add no height), the widget's 0 20px padding — the
   padding now comes from the component's `margin-inline` (#26 hoist); the page-scope
   `padding-inline` that predates it double-counted the inset (+20px shift, −40px
   width, wrapping the 1024 text). */
/* HOIST: the reference's features widget grows (`--flex-grow:1;--flex-shrink:0`) to eat
   the card's leftover height — without it the card's `space-between` spreads that height
   into the gaps and every row below the head lands 21.6/43.2px lower. */
.wpz-page--wordpress .wpz-pricing__features { --wpz-icon-list-gap: 20px; --wpz-icon-list-size: 14px; flex: 1 0 auto; }
.wpz-page--wordpress .wpz-pricing__features .wpz-icon-list__item { align-items: flex-start; }
.wpz-page--wordpress .wpz-pricing__features .wpz-icon-list__item:not(:last-child)::after {
	border-block-start: 1px solid var(--wpz-border);
	content: "";
	inset-block-end: 0;
	inset-inline: 0;
	position: absolute;
}
.wpz-page--wordpress .wpz-pricing__features .wpz-icon-list__icon { color: var(--wpz-ink); padding-inline-end: 10px; position: relative; top: 5px; }
.wpz-page--wordpress .wpz-pricing__features .wpz-icon-list__text { font-size: var(--wpz-fs-label); }
.wpz-page--wordpress .wpz-pricing__features .wpz-icon-list__text strong { font-weight: 700; }
/* Buy (f1687f9): full-width in the card, 20px inline padding, 10px above. */
/* HOIST note: the reference's buy widget is 54px tall (its 44px button plus the 10px
   the wrapper adds below the features) — keep that 10px: it is part of the card's
   content height, and dropping it shifts the `space-between` split of the cards. */
.wpz-page--wordpress .wpz-pricing__buy { margin-block-start: 10px; padding-inline: var(--wpz-gap); }
.wpz-page--wordpress .wpz-pricing__buy .btn-wpzee { display: block; text-align: center; }
@media (max-width: 1024px) {
	.wpz-page--wordpress .wpz-pricing > .wpz-container { flex-wrap: wrap; row-gap: var(--wpz-gap); }
	.wpz-page--wordpress .wpz-pricing__intro { padding: 0; }
	.wpz-page--wordpress .wpz-pricing__cards { width: 100%; }
}
@media (max-width: 767px) {
	.wpz-page--wordpress .wpz-pricing__plans { flex-wrap: wrap; }
	.wpz-page--wordpress .wpz-pricing__plan { width: 100%; }
}

/* ==== PAGE: wordpress-hosting (page-wordpress-hosting.php) ==== */
/* Props + genuinely page-only declarations only (style system §7). The
   section paddings are the per-page values from the composition README §2 /
   Appendix A.1; the hero pair is this page's row of the §7 paint table
   (`--wpz-hero-image` is stylesheet-relative so the painted URL equals the
   preload target, README §5.9). The tabs behaviour is #35's; nothing here
   redeclares a component's own properties. */
.wpz-page--hosting .wpz-hero { --wpz-section-padding: 30px; }
.wpz-page--hosting .wpz-hero {
	--wpz-hero-paint: linear-gradient(90deg, #E3F5F7 0%, #EFF8DF 100%); /* wordpress-hosting: 59ed790 */
	--wpz-hero-image: url("assets/img/heroes/wordpress-hosting-hero.webp"); /* wordpress-hosting: 16be538 */
}
.wpz-page--hosting .wpz-review-strip { --wpz-section-padding: 20px var(--wpz-pad-x) 50px; }
.wpz-page--hosting .wpz-feature-row--intro { --wpz-section-padding: 0 var(--wpz-pad-x); }
.wpz-page--hosting .wpz-feature-row--grid { --wpz-section-padding: 20px var(--wpz-pad-x) 50px; }
.wpz-page--hosting .wpz-feature-row--panel { --wpz-section-padding: 0 var(--wpz-pad-x); }
.wpz-page--hosting .wpz-pricing { --wpz-section-padding: 50px var(--wpz-pad-x) 0; }
.wpz-page--hosting .wpz-divider { --wpz-section-padding: 0 var(--wpz-pad-x); }
.wpz-page--hosting .wpz-faq { --wpz-section-padding: 0 var(--wpz-pad-x); }
.wpz-page--hosting .wpz-cta { --wpz-section-padding: 0 var(--wpz-pad-x) 50px; }
.wpz-page--hosting .wpz-tabs { --wpz-tabs-gap: 40px; }