/* ==========================================================================
   Siteworks — styles for the PageCore header, footer and pages.
   Loaded on the front end and in the block editor. Every class starts with
   "pcl-" and is set on core blocks through Advanced → Additional CSS class(es).
   Colours use the theme's pc-* tokens plus the plugin's pcl-* tokens.

   1. Fonts            7. Bento (feature grid)    13. FAQ, CTA        19. Legal pages
   2. Tokens           8. Starter sites           14. Footer          20. 404
   3. Shared text      9. Steps                   15. Inner page hero
   4. Header           10. Browser frames, lists  16. Help text marks
   5. Hero, showcase   11. Style switcher         17. About
   6. Cards, tiles     12. Pricing card           18. Help            21. Starter site details
                                                                      22. Small screens
   ========================================================================== */

/* 1. Fonts: preview fonts for the style switcher (self-hosted, OFL 1.1). */
@font-face { font-family: "Epilogue"; src: url("../fonts/epilogue-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-latin-wght.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Domine"; src: url("../fonts/domine-latin-wght.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("../fonts/nunito-sans-latin-wght.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-wght.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

/* The new starter sites' own heading and text fonts, for their details pages (copied from the demos, OFL 1.1; a browser only downloads one where a page uses it). */
@font-face { font-family: "Lora"; src: url("../fonts/starter-lora-variable.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("../fonts/starter-libre-baskerville-variable.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonts/starter-open-sans-variable.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/starter-outfit-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../fonts/starter-sora-variable.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/starter-space-grotesk-variable.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("../fonts/starter-dm-serif-display-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/starter-public-sans-variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/starter-work-sans-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/starter-instrument-sans-variable.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/starter-figtree-variable.ttf") format("truetype"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/starter-nunito-variable.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("../fonts/starter-rubik-variable.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/starter-playfair-display-variable.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/starter-fraunces-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fonts/starter-oswald-variable.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("../fonts/starter-merriweather-variable.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/starter-lato-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/starter-lato-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/starter-geist-variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/starter-cormorant-garamond-variable.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

/* 2. Tokens ----------------------------------------------------------------- */
:root {
	--pcl-accent: var(--wp--preset--color--pc-accent, #002FA7);
	--pcl-heading: var(--wp--preset--color--pc-headings, #0A0B1E);
	--pcl-text: var(--wp--preset--color--pc-text, #4B4D68);
	--pcl-border: var(--wp--preset--color--pc-border, #E6E6F0);
	--pcl-soft: var(--wp--preset--color--pc-accent-light, #EBF0FB);
	--pcl-section: var(--wp--preset--color--pc-section, #F7F7FC);
	--pcl-midnight: var(--wp--preset--color--pcl-midnight, #060B1E);
	--pcl-midnight-2: var(--wp--preset--color--pcl-midnight-2, #0B1430);
	--pcl-on-dark: var(--wp--preset--color--pcl-on-dark, #B8C2DC);
	--pcl-on-dark-muted: var(--wp--preset--color--pcl-on-dark-muted, #919CBA);
	--pcl-gold: var(--wp--preset--color--pcl-gold, #FFC260);
	--pcl-line-dark: rgba(255, 255, 255, 0.12);
	--pcl-muted: #676983;
	--pcl-surface: #fff;
	--pcl-border-strong: #D5D5E3;
	--pcl-ink: #00226F;
	--pcl-header-bg: rgba(255, 255, 255, 0.82);
	--pcl-header-line: rgba(10, 11, 30, 0.08);
	--pcl-nav-text: #3A3C55;
	--pcl-nav-hover: rgba(10, 11, 30, 0.05);
	--pcl-grid-line: rgba(10, 11, 30, 0.045);
	--pcl-header-h: 75px;
	--pcl-sticky-top: calc(var(--pcl-header-h) + var(--wp-admin--admin-bar--height, 0px));
	--pcl-radius: 8px;
	--pcl-radius-sm: 4px;
}

/* Dark mode: chosen with the light / dark switch in the header (site.js).
   The theme's colour tokens are swapped, so every section and card follows. */
html[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--pc-background: #0B1020;
	--wp--preset--color--pc-section: #0F1630;
	--wp--preset--color--pc-border: #222B45;
	--wp--preset--color--pc-headings: #F1F3FA;
	--wp--preset--color--pc-text: #A9B2C9;
	--wp--preset--color--pc-link: #93B4FF;
	--wp--preset--color--pc-accent-light: #16214A;
	--pcl-accent: #93B4FF;
	--pcl-surface: #121A33;
	--pcl-border-strong: #2D3756;
	--pcl-muted: #8790AA;
	--pcl-ink: #C9D6FF;
	--pcl-header-bg: rgba(8, 12, 26, 0.82);
	--pcl-header-line: rgba(255, 255, 255, 0.08);
	--pcl-nav-text: rgba(255, 255, 255, 0.78);
	--pcl-nav-hover: rgba(255, 255, 255, 0.08);
	--pcl-grid-line: rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .pcl-grad { background-image: var(--wp--preset--gradient--pcl-gold-text, linear-gradient(90deg, #FFE29A, #FF9A4D)); }
html[data-theme="dark"] .pcl-icon img { filter: brightness(0) saturate(100%) invert(74%) sepia(25%) saturate(1600%) hue-rotate(185deg) brightness(102%); }
html[data-theme="dark"] .pcl-tpl-look__card { border-color: var(--pcl-border); background: var(--pcl-surface); }
html[data-theme="dark"] :is(.pcl-tpl-font, .pcl-tpl-font__sample) { color: #F1F3FA; }

html[data-theme="dark"] .pcl-eyebrow::before { box-shadow: 0 0 0 3px rgba(147, 180, 255, 0.2); }

/* 3. Shared text ------------------------------------------------------------ */
.pcl-eyebrow {
	display: inline-flex !important;
	align-items: center;
	gap: 0.55rem;
	width: auto !important;
	margin-bottom: 0 !important; /* owner, 2026-10-31: the same gap to the heading as heading to paragraph */
	padding: 0.3rem 0.8rem 0.3rem 0.55rem;
	border: 1px solid var(--pcl-border);
	border-radius: 999px;
	background: var(--pcl-surface);
	color: var(--pcl-heading);
	font-size: 0.8125rem !important;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.4;
}
.pcl-eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pcl-accent);
	box-shadow: 0 0 0 3px rgba(0, 47, 167, 0.18);
}

.pcl-head { max-width: 760px; margin-left: auto !important; margin-right: auto !important; text-align: center; }
.pcl-head .pcl-eyebrow { margin-left: auto; margin-right: auto; }

.pcl-lead { max-width: 62ch; line-height: 1.6; }
.pcl-head .pcl-lead { margin-left: auto !important; margin-right: auto !important; }

/* Headings: tight, bold, like v14 */
.pcl-landing h1, .pcl-landing h2 { letter-spacing: -0.038em; line-height: 1.06; font-weight: 750; text-wrap: balance; }
.pcl-landing h1 { font-weight: 800; letter-spacing: -0.042em; line-height: 1.02; }
.pcl-landing h3, .pcl-landing h4 { letter-spacing: -0.025em; line-height: 1.2; }
/* Section headings: at most 3rem (owner, 2026-10-31: first 3.2rem "so it dont look too much big in each section", then "make h2 font size of all sections 3rem"); the theme's xxx-large reaches 3.75rem. */
.pcl-landing h2.has-xxx-large-font-size { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3rem) !important; }

/* Gradient text: blue on light sections, gold on dark ones */
.pcl-grad {
	background: linear-gradient(90deg, #002FA7 0%, #1D4ED8 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Small pill label inside text (Tag format) */
.pcl-tag {
	display: inline-block;
	margin-right: 0.55rem;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--gradient--pcl-button, #002FA7);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
}

/* Buttons */
.pcl-landing .wp-block-button__link, .pcl-header .wp-block-button__link, .pcl-nf .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 6px;
	font-weight: 600;
	transition: transform 0.2s, filter 0.2s, background-color 0.2s, border-color 0.2s;
}
.pcl-landing .wp-block-button__link:hover, .pcl-nf .wp-block-button__link:hover { transform: translateY(-1px); }
.pcl-btn-lg .wp-block-button__link { padding: 0.95rem 1.9rem; font-size: 1.0625rem; }
.pcl-btn-sm .wp-block-button__link { padding: 0.55rem 1.05rem; font-size: 0.9375rem; }
.has-pcl-button-gradient-background:hover { filter: brightness(1.12); }

.pcl-btn-white .wp-block-button__link { background: #fff !important; color: var(--pcl-midnight) !important; }
.pcl-btn-white .wp-block-button__link:hover { background: var(--pcl-soft) !important; }
.pcl-btn-outline .wp-block-button__link { border: 1px solid var(--pcl-border-strong) !important; background: var(--pcl-surface) !important; color: var(--pcl-heading) !important; }
.pcl-btn-outline .wp-block-button__link:hover { border-color: var(--pcl-accent) !important; color: var(--pcl-accent) !important; }
.pcl-arrow .wp-block-button__link::after, .pcl-link a::after {
	content: "";
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s;
}
.pcl-arrow .wp-block-button__link:hover::after, .pcl-link a:hover::after { transform: translateX(3px); }
.pcl-dl .wp-block-button__link::before {
	content: "";
	width: 1.1em;
	height: 1.1em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 4. Header ------------------------------------------------------------------ */
.pcl-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--pcl-header-bg) !important;
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	backdrop-filter: saturate(180%) blur(16px);
	border-bottom: 1px solid var(--pcl-header-line);
	transition: transform 0.2s ease-out;
}
/* Out of the way while scrolling down, back on the smallest scroll up (site.js 5; owner, 2026-10-31). The sticky parts
   below it (Help topics, About profile, the stacked cards) keep their place, so the header never covers them when it
   comes back. */
.pcl-header.is-tucked { transform: translateY(calc(-100% - 2px)); }
@media (prefers-reduced-motion: reduce) { .pcl-header { transition: none; } }
.pcl-header__right { gap: 0.75rem !important; }
.pcl-header__right > * { margin: 0 !important; }
.pcl-logo--dark { display: none !important; }
html[data-theme="dark"] .pcl-logo--light { display: none !important; }
html[data-theme="dark"] .pcl-logo--dark { display: block !important; }
.pcl-theme-toggle {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--pcl-header-line);
	border-radius: 8px;
	background: transparent;
	color: var(--pcl-heading);
	cursor: pointer;
	transition: background-color 0.15s;
}
.pcl-theme-toggle:hover { background: var(--pcl-nav-hover); }
.pcl-theme-toggle::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-theme="dark"] .pcl-theme-toggle::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E") center / contain no-repeat; }
.admin-bar .pcl-header { top: var(--wp-admin--admin-bar--height, 32px); }
/* The blur would hold the full-screen phone menu inside the header bar. */
.pcl-header:has(.wp-block-navigation__responsive-container.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.pcl-header__logo img { width: 157px; height: auto; }
.pcl-header .wp-block-navigation a:not(.wp-block-button__link), .pcl-header .wp-block-navigation a:not(.wp-block-button__link):is(:hover, :focus) { padding: 0.55rem 0.85rem; border-radius: 4px; color: var(--pcl-nav-text); font-weight: 500; text-decoration: none; transition: background-color 0.15s, color 0.15s; }
.pcl-header .wp-block-navigation a:not(.wp-block-button__link):hover, .pcl-header .wp-block-navigation .current-menu-item > a { background: var(--pcl-nav-hover); color: var(--pcl-heading); }
.pcl-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { padding: 1.5rem; }
.pcl-header .wp-block-navigation__responsive-container.is-menu-open a:not(.wp-block-button__link) { color: var(--pcl-heading); font-size: 1.25rem; }
.pcl-header .wp-block-navigation__responsive-container-open, .pcl-header .wp-block-navigation__responsive-container-close { color: var(--pcl-heading); }

/* 5. Hero and showcase ---------------------------------------------------- */

.pcl-hero__center { max-width: 980px; margin-left: auto !important; margin-right: auto !important; text-align: center; }
.pcl-hero__center h1 { max-width: 16ch; margin-left: auto; margin-right: auto; }
.pcl-hero__center .pcl-lead { margin-left: auto !important; margin-right: auto !important; }

.pcl-showcase { position: relative; max-width: 1180px; margin: clamp(3.5rem, 2.5rem + 4vw, 5.5rem) auto 0 !important; }
.pcl-showcase::before {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	top: 10%;
	bottom: -10%;
	z-index: -1;
	background: radial-gradient(50% 50% at 50% 50%, rgba(47, 107, 255, 0.16), transparent 70%);
	filter: blur(50px);
}
.pcl-showcase > .pcl-browser { box-shadow: 0 1px 2px rgba(10, 20, 60, 0.04), 0 18px 40px -24px rgba(10, 20, 60, 0.28); }
.pcl-showcase > .pcl-browser--main { position: relative; z-index: 2; width: min(100%, 880px); margin: 0 auto !important; border-radius: 8px 8px 0 0; border-bottom: 0; }
.pcl-showcase > .pcl-browser--side-left, .pcl-showcase > .pcl-browser--side-right { display: none; position: absolute; z-index: 1; top: 12%; width: 40%; margin: 0 !important; opacity: 0.75; }
.pcl-showcase > .pcl-browser--side-left { left: 0; transform: perspective(1400px) rotateY(18deg) rotate(-2deg); transform-origin: right center; }
.pcl-showcase > .pcl-browser--side-right { right: 0; transform: perspective(1400px) rotateY(-18deg) rotate(2deg); transform-origin: left center; }
.pcl-chip {
	position: absolute;
	z-index: 3;
	display: flex !important;
	align-items: center;
	gap: 0.7rem;
	margin: 0 !important;
	padding: 0.75rem 1rem;
	border: 1px solid var(--pcl-border);
	border-radius: 8px;
	background: color-mix(in srgb, var(--pcl-surface) 88%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 10px 24px -16px rgba(10, 20, 60, 0.28);
	color: var(--pcl-text);
	font-size: 0.8125rem;
	line-height: 1.3;
	text-align: left;
}
.pcl-chip p { margin: 0 !important; font-size: 0.8125rem; }
.pcl-chip strong { display: block; color: var(--pcl-heading); font-size: 0.9375rem; }
.pcl-chip .pcl-icon img { width: 24px !important; height: 24px !important; }
.pcl-chip--a { left: max(0px, calc(50% - 580px)); top: 70%; }
.pcl-chip--b { right: max(0px, calc(50% - 580px)); top: 8%; }
.pcl-chip--b::before {
	content: "";
	width: 62px;
	height: 20px;
	flex: none;
	background:
		radial-gradient(circle at 10px 10px, #427A47 8px, var(--pcl-surface) 8px 10px, transparent 10px),
		radial-gradient(circle at 24px 10px, #50575E 8px, var(--pcl-surface) 8px 10px, transparent 10px),
		radial-gradient(circle at 38px 10px, #7E6144 8px, var(--pcl-surface) 8px 10px, transparent 10px),
		radial-gradient(circle at 52px 10px, #444C7E 8px, var(--pcl-surface) 8px 10px, transparent 10px);
}
@media (min-width: 960px) {
	.pcl-showcase > .pcl-browser--side-left, .pcl-showcase > .pcl-browser--side-right { display: block; }
}
/* The two small badges on the Home hero only on desktop (owner, 2026-10-30). */
@media (max-width: 1079px) { .pcl-chip { display: none !important; } }

.pcl-stats { position: relative; border-top: 1px solid var(--pcl-border); background: color-mix(in srgb, var(--pcl-surface) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pcl-stats__grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 !important; }
.pcl-stats__grid > * { margin: 0 !important; padding: 1.6rem 1rem; text-align: center; border-right: 1px solid var(--pcl-border); border-bottom: 1px solid var(--pcl-border); }
.pcl-stats__grid > :nth-child(2n) { border-right: 0; }
.pcl-stats__grid > :last-child { grid-column: 1 / -1; border-bottom: 0; }
.pcl-stats__num {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.8rem) !important;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.3; /* owner, 2026-10-31 */
	background: linear-gradient(90deg, #002FA7 0%, #1D4ED8 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
}
html[data-theme="dark"] .pcl-stats__num { background-image: var(--wp--preset--gradient--pcl-gold-text, linear-gradient(90deg, #FFE29A, #FF9A4D)); }
/* No gap between a number and its label (owner, 2026-10-31). */
.pcl-stats__label { margin: 0 !important; font-size: 0.875rem !important; color: var(--pcl-muted) !important; }
@media (min-width: 768px) {
	.pcl-stats__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.pcl-stats__grid > * { border-bottom: 0; border-right: 1px solid var(--pcl-border) !important; }
	.pcl-stats__grid > :last-child { grid-column: auto; border-right: 0 !important; }
}
/* Five stats in a row are narrow on tablets: smaller numbers, so "Resume" fits. */
@media (min-width: 768px) and (max-width: 1079px) {
	.pcl-stats__grid > * { padding-inline: 0.5rem; }
	.pcl-stats__num { font-size: 1.75rem !important; }
}

/* 6. Cards, tiles, links ---------------------------------------------------- */

/* Icons without boxes (variation E, site-wide since 2026-10-30) */
.pcl-icon.wp-block-image { flex: none; margin: 0 !important; }
.pcl-icon img { display: block; width: 26px !important; height: 26px !important; }
:is(.pcl-card, .pcl-principle, .pcl-contact-note) > .pcl-icon.wp-block-image { margin: 0 0 1rem !important; }
.pcl-link a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--pcl-accent); font-weight: 600; text-decoration: none; }

/* 7. Starter sites: Home shows the Starter sites page's cards (siteworks/starter-grid, limit 6) */
/* Home: "Browse starter sites" under the cards */
.pcl-st-short + .pcl-home-start { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem) !important; }

/* 8. Steps -------------------------------------------------------------------- */
.pcl-steps { position: relative; display: grid !important; gap: 1.25rem !important; counter-reset: pcl-step; }
.pcl-steps > * { margin: 0 !important; }
.pcl-step { position: relative; padding: 1.75rem !important; border: 1px solid var(--pcl-border); border-radius: var(--pcl-radius); background: var(--pcl-surface); }
.pcl-step::before {
	counter-increment: pcl-step;
	content: "0" counter(pcl-step);
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 1.4rem;
	border-radius: 5px;
	background: var(--wp--preset--gradient--pcl-button, #002FA7);
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 0.95rem;
}
.pcl-step h3 { margin: 0 0 0.5rem !important; }
.pcl-step p { margin: 0 !important; font-size: 0.9688rem; }
.pcl-step .pcl-path { padding-inline: 0.3em; white-space: normal; }
@media (min-width: 640px) { .pcl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) {
	.pcl-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.pcl-steps--4::before { content: ""; position: absolute; top: 52px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, transparent, rgba(0, 47, 167, 0.5), rgba(47, 107, 255, 0.5), transparent); }
}

/* 9. Browser frames, check lists, grids ------------------------------------ */
.pcl-browser { position: relative; overflow: hidden; border: 1px solid var(--pcl-border); border-radius: 5px; background: #fff; }
.pcl-browser .wp-block-image { margin: 0 0 -10px !important; } /* owner, 2026-10-31 */
.pcl-browser .wp-block-image img { display: block; width: 100%; height: auto; }
.pcl-browser__bar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	height: 40px;
	margin: 0 !important;
	padding: 0 0.9rem 0 4.6rem !important;
	background:
		radial-gradient(circle at 1.25rem 50%, #FF5F57 5.5px, transparent 6px),
		radial-gradient(circle at 2.15rem 50%, #FEBC2E 5.5px, transparent 6px),
		radial-gradient(circle at 3.05rem 50%, #28C840 5.5px, transparent 6px),
		#F3F3F8;
	border-bottom: 1px solid #E6E6F0;
	color: #676983;
	font-size: 0.75rem !important;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
}
.pcl-browser--theme { border-color: var(--pcl-border); }
ul.pcl-check { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
/* Room between an intro and its check list, and between the list and a button under it (owner, 2026-10-30). */
.pcl-lead + ul.pcl-check { margin-top: 1.5rem !important; }
ul.pcl-check + .wp-block-buttons { margin-top: 2rem !important; }
ul.pcl-check li { position: relative; margin: 0; padding-left: 1.9rem; }
ul.pcl-check li::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--wp--preset--gradient--pcl-button, #002FA7); }
ul.pcl-check li::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 1.2rem;
	height: 1.2rem;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8.5 10.2 15.5 7 12.3'/%3E%3C/svg%3E") center / 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8.5 10.2 15.5 7 12.3'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* Tablets: an odd last card fills the row instead of standing alone (owner's grid rule). */
@media (min-width: 640px) and (max-width: 1079px) { .pcl-grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* The theme screenshot: the one element with a soft shadow */
.pcl-browser--theme { box-shadow: 0 2px 6px rgba(10, 20, 60, 0.06), 0 24px 48px -18px rgba(10, 20, 60, 0.28); }

/* 10. Style switcher ------------------------------------------------------- */
ul.pcl-style-picker { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 2rem 0 0; padding: 0; list-style: none; }
ul.pcl-style-picker li { margin: 0; }
/* "See all 27 styles" under the buttons (2026-11-08) */
.pcl-style-more { margin: 1rem 0 0 !important; font-size: 0.9375rem; font-weight: 600; }
.pcl-style-more a { color: var(--pcl-accent); text-decoration: none; }
.pcl-style-more a::after { content: " →"; }
.pcl-style-more a:hover { text-decoration: underline; }
.pcl-style-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 48px;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--pcl-border-strong);
	border-radius: 999px;
	background: var(--pcl-surface);
	color: var(--pcl-heading);
	font: 600 0.9375rem var(--wp--preset--font-family--body);
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.pcl-style-btn:hover { border-color: var(--pcl-accent); }
.pcl-style-btn[aria-pressed="true"] { border-color: var(--pcl-accent); outline: 3px solid rgba(0, 47, 167, 0.25); }
.pcl-style-btn__dots { display: inline-flex; }
.pcl-style-btn__dots span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--pcl-surface); }
.pcl-style-btn__dots span + span { margin-left: -8px; }
.pcl-style-sample {
	--s-accent-light: color-mix(in srgb, var(--s-accent) 14%, var(--s-bg));
	--s-text: color-mix(in srgb, var(--s-heading) 78%, var(--s-bg));
	overflow: hidden;
	border: 1px solid rgba(10, 11, 30, 0.08);
	border-radius: 8px;
	background: var(--s-bg);
	color: var(--s-text);
	font-family: var(--s-font-b), var(--wp--preset--font-family--body);
	outline: 8px solid rgba(0, 47, 167, 0.07);
}
.pcl-style-sample * { transition: background-color 0.35s, color 0.35s; }
.pcl-style-sample__nav { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.6rem; border-bottom: 1px solid color-mix(in srgb, var(--s-heading) 10%, transparent); font-size: 0.875rem; }
.pcl-style-sample__logo { font-family: var(--s-font-h), var(--wp--preset--font-family--heading); font-weight: 700; color: var(--s-heading); font-size: 1.05rem; }
.pcl-style-sample__links { display: flex; gap: 1rem; }
.pcl-style-sample__hero { padding: 2.25rem 1.6rem 2rem; background: var(--s-accent-light); }
.pcl-style-sample__tag { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; background: color-mix(in srgb, var(--s-accent) 18%, var(--s-bg)); color: var(--s-accent-text, var(--s-accent-dark)); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.pcl-style-sample__title { margin: 0.9rem 0 0.6rem !important; font-family: var(--s-font-h), var(--wp--preset--font-family--heading); color: var(--s-heading); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
.pcl-style-sample__text { margin: 0 !important; font-size: 0.9688rem; line-height: 1.6; max-width: 40ch; }
.pcl-style-sample__buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.pcl-style-sample__btn { display: inline-block; padding: 0.6rem 1.1rem; border-radius: 8px; background: var(--s-accent); color: var(--s-on-accent, #fff); font-size: 0.875rem; font-weight: 600; }
.pcl-style-sample__btn--ghost { background: transparent; color: var(--s-accent-text, var(--s-accent-dark)); box-shadow: inset 0 0 0 1.5px var(--s-accent); }
.pcl-style-sample__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.6rem; background: var(--s-foot, var(--s-heading)); color: var(--s-foot-text, #fff); }
.pcl-style-sample__fonts { font-size: 0.875rem; }
.pcl-style-sample__fonts strong { font-family: var(--s-font-h), var(--wp--preset--font-family--heading); font-size: 1.1rem; margin-right: 0.35rem; }
.pcl-style-sample__swatches { display: flex; gap: 0.4rem; }
.pcl-style-sample__swatches span { width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.3); }

/* 11. Badge ------------------------------------------------------------------ */

.pcl-badge { display: inline-block; margin: 0 !important; padding: 0.25rem 0.7rem; border-radius: 999px; background: #DDF7EC; color: #065F46; font-size: 0.75rem !important; font-weight: 600; }

/* 12. FAQ --------------------------------------------------------------------- */
.pcl-faq { margin: 0 0 0.75rem !important; border: 1px solid var(--pcl-border); border-radius: 6px; background: var(--pcl-surface); }
.pcl-faq[open] { border-color: var(--pcl-border-strong); }
.pcl-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.2rem 1.4rem;
	color: var(--pcl-heading);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: -0.015em;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}
.pcl-faq summary::-webkit-details-marker { display: none; }
.pcl-faq summary::after {
	content: "";
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(var(--pcl-accent), var(--pcl-accent)) center / 12px 2px no-repeat, linear-gradient(var(--pcl-accent), var(--pcl-accent)) center / 2px 12px no-repeat, var(--pcl-soft);
	transition: transform 0.25s;
}
.pcl-faq[open] summary::after { transform: rotate(45deg); }
.pcl-faq > p { margin: 0 !important; padding: 0 1.4rem 1.4rem; }
.pcl-faq > ul { margin: -0.75rem 0 0 !important; padding: 0 1.4rem 1.4rem 2.65rem; }

/* 13. Footer: subscribe bar, logo and link columns, © bar ------------------- */
.pcl-site-footer { border-top: 1px solid var(--pcl-border); color: var(--pcl-text); font-size: 0.9375rem; }
.pcl-site-footer > * { margin-top: 0; }
.pcl-site-footer a:not(.wp-block-button__link) { color: var(--pcl-text); text-decoration: none; transition: color 0.15s; }
.pcl-site-footer a:not(.wp-block-button__link):hover { color: var(--pcl-heading); text-decoration: underline; text-underline-offset: 0.2em; }

/* Subscribe bar: words left, form right */
/* Open, not a card (owner, 2026-10-31: "remove box from subscripiton, make full width and then give bottom border") */
.pcl-footer-subscribe { display: grid !important; gap: 1.25rem 3rem !important; align-items: center; padding: 0 0 clamp(2rem, 1.5rem + 1.5vw, 3rem) !important; border-bottom: 1px solid var(--pcl-border); }
.pcl-footer-subscribe > * { margin: 0 !important; }
.pcl-site-footer .pcl-footer-subscribe + .pcl-help-strip { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem) !important; }
.pcl-footer-subscribe > :first-child > * { margin: 0 !important; }
.pcl-footer-subscribe .pcl-footer-subscribe__title { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem) !important; letter-spacing: -0.02em; line-height: 1.25; }
.pcl-footer-subscribe .pcl-footer-subscribe__text { margin-top: 0.4rem !important; color: var(--pcl-text); line-height: 1.55; }
@media (min-width: 900px) { .pcl-footer-subscribe { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }

/* Logo and link columns */
.pcl-footer-main { display: grid !important; gap: 2.5rem 2rem !important; }
.pcl-footer-main > * { margin: 0 !important; }
.pcl-footer__brandmark > * { margin: 0 !important; }
.pcl-footer__logo img { width: 140px; height: auto; }
.pcl-footer-brand .pcl-footer-brand__text { max-width: 30ch; color: var(--pcl-text); line-height: 1.6; }
.pcl-footer-col .pcl-footer-col__title { margin: 0 0 1rem !important; color: var(--pcl-heading); font-family: var(--wp--preset--font-family--body); font-size: 0.8125rem !important; font-weight: 600; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; }
ul.pcl-footer-links { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
ul.pcl-footer-links li { margin: 0; line-height: 1.45; }
ul.pcl-footer-links[hidden] { display: none !important; }
/* Starter site types (2026-11-08: the 6 biggest), "All N starter sites" last and stronger; two columns on phones. */
.pcl-footer-col--types ul.pcl-footer-links { display: block; columns: 2; column-gap: 1.5rem; }
.pcl-footer-col--types ul.pcl-footer-links li { margin: 0 0 0.7rem; break-inside: avoid; }
.pcl-site-footer .pcl-footer-links__all a { color: var(--pcl-heading); font-weight: 600; }
@media (min-width: 600px) {
	/* Tablets: logo across, then two by two (types beside Recent news, Learn beside PageCore) */
	.pcl-footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pcl-footer-brand { grid-column: 1 / -1; }
	.pcl-footer-col--types ul.pcl-footer-links { columns: 1; }
}
@media (min-width: 1080px) {
	/* Brand, types (one column), Recent news, Learn, PageCore (2026-11-08: "reduce one column … add new column recent news"). */
	.pcl-footer-main { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem !important; }
	.pcl-footer-brand { grid-column: auto; }
}
/* Recent news: the three newest posts (WordPress's Latest Posts block), title and date */
.pcl-site-footer ul.pcl-footer-news { display: grid; gap: 1rem; padding: 0; list-style: none; }
.pcl-footer-news li { display: grid; gap: 0.25rem; }
.pcl-footer-news .wp-block-latest-posts__post-title { line-height: 1.4; }
.pcl-footer-news .wp-block-latest-posts__post-date { margin: 0; color: var(--pcl-muted); font-size: 0.8125rem; }
/* Phones: each column folds under its title; site.js part 8 turns the titles into buttons. Without it all stays open. */
@media (max-width: 599px) {
	.pcl-footer-main { gap: 0 !important; }
	.pcl-footer-brand { margin-bottom: 2rem !important; }
	.pcl-footer-col { border-top: 1px solid var(--pcl-border); }
	.pcl-footer-col:last-child { border-bottom: 1px solid var(--pcl-border); }
	.pcl-footer-col .pcl-footer-col__title { margin: 0 !important; padding: 1.1rem 0 1rem; }
	.pcl-footer-col .pcl-footer-col__title:has(> .pcl-footer-col__toggle) { padding: 0; }
	.pcl-footer-col ul.pcl-footer-links { padding-bottom: 1.4rem; }
	.pcl-footer-col__toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; box-sizing: border-box; width: 100%; min-height: 3.5rem; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; text-transform: inherit; cursor: pointer; }
	.pcl-footer-col__toggle::after { content: ""; flex: none; width: 0.6rem; height: 0.6rem; margin: -0.3rem 0.3rem 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease, margin 0.2s ease; }
	.pcl-footer-col__toggle[aria-expanded="true"]::after { margin-top: 0.3rem; transform: rotate(-135deg); }
	.pcl-footer-col__toggle:focus-visible { outline: 2px solid var(--pcl-accent); outline-offset: 2px; border-radius: 4px; }
}
@media (max-width: 599px) and (prefers-reduced-motion: reduce) { .pcl-footer-col__toggle::after { transition: none; } }

/* © bar */
.pcl-footer-bottom { gap: 0.75rem 2rem !important; padding-top: 1.5rem !important; border-top: 1px solid var(--pcl-border); color: var(--pcl-muted); font-size: 0.875rem; }
.pcl-footer-bottom > * { margin: 0 !important; }
.pcl-footer-bottom__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
/* At the very bottom of a page the round back-to-top button (.pcl-to-top) sat on "Contact" from 768 to 1366px, where the
   links end at the right edge (site scan, 2026-11-09): the row leaves the button's width free. */
@media (min-width: 700px) and (max-width: 1439px) { .pcl-footer-bottom__links { padding-right: 3.75rem; } }
.pcl-site-footer .pcl-footer-bottom a { color: var(--pcl-muted); }
.pcl-site-footer .pcl-footer-bottom a:hover { color: var(--pcl-heading); }

/* 14. Inner page hero ---------------------------------------------------------- */
.pcl-page-hero h1 { max-width: 18ch; margin-left: auto !important; margin-right: auto !important; }
.pcl-breadcrumb, .pcl-page-hero__meta { color: var(--pcl-muted); }
.pcl-breadcrumb a { color: var(--pcl-muted); text-decoration: none; }
.pcl-breadcrumb a:hover { color: var(--pcl-heading); text-decoration: underline; }
.pcl-breadcrumb strong { color: var(--pcl-heading); font-weight: 500; }
.pcl-intro { font-size: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem) !important; line-height: 1.6 !important; }
/* Links in running text: blue and underlined. Later rules restyle the special ones. */
.pcl-landing :where(.pcl-story, .pcl-help-section, .pcl-legal) a:where(:not(.wp-block-button__link)) { color: var(--pcl-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.pcl-landing :where(.pcl-story, .pcl-help-section, .pcl-legal) a:where(:not(.wp-block-button__link)):hover { color: #00268A; }

/* 15. Help text marks: UI labels, menu paths, keys, code ----------------------- */
.pcl-ui, .pcl-landing kbd {
	padding: 0.05em 0.45em;
	border: 1px solid var(--pcl-border-strong);
	border-radius: 3px;
	background: var(--pcl-surface);
	color: var(--pcl-heading);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9em;
	font-weight: 600;
	white-space: nowrap;
}
.pcl-path {
	padding: 0.08em 0.5em;
	border-radius: 4px;
	background: var(--pcl-soft);
	color: var(--pcl-ink);
	font-size: 0.94em;
	font-weight: 600;
	white-space: nowrap;
}
.pcl-landing code {
	padding: 0.12em 0.4em;
	border: 1px solid var(--pcl-border);
	border-radius: 3px;
	background: var(--pcl-section);
	color: var(--pcl-heading);
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 0.85em;
	overflow-wrap: anywhere;
}

/* 16. About ------------------------------------------------------------------------ */
.pcl-about-grid { display: grid !important; gap: clamp(2rem, 1.5rem + 3vw, 4.5rem) !important; align-items: start; }
.pcl-about-grid > * { margin: 0 !important; }
.pcl-profile { padding: clamp(1.5rem, 1.25rem + 1vw, 2rem) !important; border: 1px solid var(--pcl-border); border-radius: var(--pcl-radius); background: var(--pcl-surface); }
.pcl-profile > * { margin-top: 0 !important; }
.pcl-profile__photo { width: 84px; height: 84px; overflow: hidden; border-radius: 50%; background: var(--wp--preset--gradient--pcl-button, #002FA7); }
.pcl-profile__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pcl-profile .pcl-profile__name { margin-top: 1.25rem !important; font-size: clamp(1.4rem, 1.22rem + 0.8vw, 1.75rem) !important; letter-spacing: -0.03em; line-height: 1.2; }
.pcl-profile .pcl-profile__role { margin-top: 0.35rem !important; line-height: 1.5; }
.pcl-profile .pcl-profile__place { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.6rem !important; color: var(--pcl-muted); }
.pcl-profile__place::before { content: ""; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.99-5.54 10.19-7.4 11.8a1 1 0 0 1-1.2 0C9.54 20.19 4 14.99 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.99-5.54 10.19-7.4 11.8a1 1 0 0 1-1.2 0C9.54 20.19 4 14.99 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat; }
.pcl-profile ul.pcl-profile__links { display: grid; gap: 0.5rem; margin: 1.5rem 0 0 !important; padding: 1.5rem 0 0; border-top: 1px solid var(--pcl-border); list-style: none; }
ul.pcl-profile__links li { margin: 0; }
ul.pcl-profile__links a {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 0.75rem;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--pcl-border);
	border-radius: var(--pcl-radius-sm);
	color: var(--pcl-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	transition: border-color 0.2s, background-color 0.2s;
}
ul.pcl-profile__links a:hover { border-color: var(--pcl-accent); background: var(--pcl-soft); }
ul.pcl-profile__links a::before { content: ""; grid-row: span 2; width: 1.15rem; height: 1.15rem; background: var(--pcl-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3Cpath d='M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3Cpath d='M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7'/%3E%3C/svg%3E") center / contain no-repeat; }
ul.pcl-profile__links li + li a::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E") center / contain no-repeat; }
ul.pcl-profile__links small { grid-column: 2; color: var(--pcl-muted); font-size: 0.8125rem; font-weight: 400; }
.pcl-about-story > * + * { margin-top: clamp(2.75rem, 2rem + 2vw, 3.75rem) !important; }
.pcl-story h2 { font-size: clamp(1.8rem, 1.45rem + 1.6vw, 2.6rem) !important; line-height: 1.15 !important; letter-spacing: -0.03em; }
.pcl-story p, .pcl-story li { line-height: 1.75; }
.pcl-story > .pcl-eyebrow, .pcl-help-section > .pcl-eyebrow { margin-bottom: 0.6rem !important; }
.pcl-principles { display: grid !important; gap: 0.85rem !important; margin-top: 1.5rem !important; }
.pcl-principles > * { margin: 0 !important; }
.pcl-principle { padding: 1.25rem !important; border: 1px solid var(--pcl-border); border-radius: 6px; background: var(--pcl-surface); }
.pcl-principle > * { margin-top: 0 !important; }
.pcl-principle > .pcl-icon.wp-block-image { margin-bottom: 0.85rem !important; }
.pcl-principle .pcl-icon img { width: 24px !important; height: 24px !important; }
.pcl-principle h3 { font-size: 1.0625rem !important; letter-spacing: -0.015em; }
.pcl-principle p { margin-top: 0.35rem !important; font-size: 0.9375rem; line-height: 1.6; }
.pcl-story ul.pcl-timeline { margin: 1.5rem 0 0 !important; padding: 0; border-left: 2px solid var(--pcl-border); list-style: none; }
ul.pcl-timeline li { position: relative; margin: 0; padding: 0 0 1.4rem 1.5rem; font-size: 0.9688rem; line-height: 1.6; }
ul.pcl-timeline li:last-child { padding-bottom: 0; }
ul.pcl-timeline li::before { content: ""; position: absolute; left: -7px; top: 0.45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--wp--preset--gradient--pcl-button, #002FA7); }
ul.pcl-timeline strong { display: block; margin-bottom: 0.2rem; color: var(--pcl-heading); font-family: var(--wp--preset--font-family--heading); font-size: 1.0323em; line-height: 1.5; }
.pcl-story .pcl-tf-card { margin-top: 1.5rem !important; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) !important; border: 1px solid var(--pcl-border); border-radius: var(--pcl-radius); background: var(--pcl-section); gap: 1rem 1.5rem !important; }
.pcl-tf-card h3 { margin: 0 !important; font-size: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem) !important; }
.pcl-tf-card p { margin: 0.3rem 0 0 !important; font-size: 0.9375rem; }
.pcl-tf-card .wp-block-button__link { padding: 0.75rem 1.25rem; font-size: 1rem; }
.pcl-ext .wp-block-button__link::after { content: ""; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (min-width: 700px) { .pcl-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
	.pcl-about-grid { grid-template-columns: 340px minmax(0, 1fr); }
	.pcl-profile { position: sticky; top: calc(var(--pcl-sticky-top) + 1.5rem); }
}

/* 17. Help: topic list beside the text ------------------------------------------ */
.pcl-docs { display: grid !important; gap: 2.5rem !important; }
.pcl-docs > * { min-width: 0; margin: 0 !important; }
.pcl-toc { margin: 0 !important; }
.pcl-toc > summary { display: none; }
/* The list is saved closed and topics.js opens it on wide screens, so phones see no jump when it folds (2026-11-07);
   without JavaScript its title stays to open it by hand. */
.pcl-toc:not([open]) > summary { display: flex; }
.pcl-topic-filter { position: relative; margin: 0 0 1.25rem !important; }
.pcl-topic-filter::before { content: ""; position: absolute; left: 0.8rem; top: 1.28rem; width: 1rem; height: 1rem; transform: translateY(-50%); background: var(--pcl-muted); pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat; }
.pcl-topic-filter input {
	box-sizing: border-box;
	width: 100%;
	padding: 0.6rem 0.8rem 0.6rem 2.2rem;
	border: 1px solid var(--pcl-border-strong);
	border-radius: var(--pcl-radius-sm);
	background: var(--pcl-surface);
	color: var(--pcl-heading);
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1.4;
}
.pcl-topic-filter input:focus { border-color: var(--pcl-accent); outline: none; } /* only the border colour (owner, 2026-10-31) */
.pcl-topic-filter__empty { margin: 0.75rem 0 0 !important; color: var(--pcl-muted); font-size: 0.9063rem; }
.pcl-toc__list > * { margin: 0 !important; }
.pcl-toc__list > * + * { margin-top: 1.25rem !important; }
.pcl-toc [hidden] { display: none !important; }
.pcl-toc__title { margin: 0 0 0.45rem !important; color: var(--pcl-muted); font-size: 0.75rem !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
ol.pcl-toc__links { display: grid; gap: 0.15rem; margin: 0 !important; padding: 0; border-left: 2px solid var(--pcl-border); list-style: none; }
ol.pcl-toc__links li { margin: 0; }
ol.pcl-toc__links a { display: block; margin-left: -2px; padding: 0.32rem 0 0.32rem 1rem; border-left: 2px solid transparent; color: var(--pcl-text); font-size: 0.9063rem; line-height: 1.4; text-decoration: none; }
ol.pcl-toc__links a:hover { color: var(--pcl-accent); }
ol.pcl-toc__links a.is-active { border-left-color: var(--pcl-accent); color: var(--pcl-accent); font-weight: 600; }
@media (min-width: 1080px) {
	.pcl-docs { grid-template-columns: 280px minmax(0, 1fr); gap: clamp(3rem, 2rem + 3vw, 5rem) !important; align-items: start; }
	.pcl-docs__nav { position: sticky; top: calc(var(--pcl-sticky-top) + 1.5rem); }
	/* The search box stays put; the list scrolls on its own when taller than the window. */
	.pcl-toc__list { max-height: calc(100vh - var(--pcl-sticky-top) - 7rem); overflow-y: auto; overscroll-behavior: contain; padding-right: 0.5rem; scrollbar-width: thin; scrollbar-color: #D5D5E3 transparent; }
}
@media (max-width: 1079px) {
	.pcl-toc { border: 1px solid var(--pcl-border); border-radius: 6px; background: var(--pcl-section); }
	.pcl-toc > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.95rem 1.15rem;
		color: var(--pcl-heading);
		font-family: var(--wp--preset--font-family--heading);
		font-weight: 700;
		list-style: none;
		cursor: pointer;
	}
	.pcl-toc > summary::-webkit-details-marker { display: none; }
	.pcl-toc > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform 0.2s; }
	.pcl-toc[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
	.pcl-toc > :not(summary) { padding: 0 1.15rem; }
	.pcl-toc > :last-child { padding-bottom: 1.15rem; }
}
.pcl-topics-button {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.7rem 1rem;
	border: 0;
	border-radius: 999px;
	background: var(--pcl-midnight);
	color: #fff;
	font: inherit;
	font-size: 0.9063rem;
	font-weight: 600;
	cursor: pointer;
}
.pcl-topics-button::before { content: ""; width: 1.1rem; height: 1.1rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 18h10'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 18h10'/%3E%3C/svg%3E") center / contain no-repeat; }
.pcl-topics-button[hidden] { display: none; }
@media (min-width: 1080px) { .pcl-topics-button { display: none !important; } }

/* Help text column */
.pcl-help-content { max-width: 860px; }
.pcl-help-content > * { margin: 0 !important; }
.pcl-help-section { padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem) !important; margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem) !important; border-bottom: 1px solid var(--pcl-border); }
.pcl-help-section:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: 0; }
.pcl-help-section > :is(p, ul, ol) { max-width: 72ch; }
.pcl-help-section p, .pcl-help-section li { line-height: 1.7; }
.pcl-help-section strong { color: var(--pcl-heading); font-weight: 600; }
.pcl-help-section h2 { font-size: clamp(1.8rem, 1.45rem + 1.6vw, 2.6rem) !important; line-height: 1.15 !important; letter-spacing: -0.03em; }
.pcl-help-section h3 { margin-top: 3rem !important; font-size: clamp(1.4rem, 1.22rem + 0.8vw, 1.75rem) !important; line-height: 1.25 !important; letter-spacing: -0.02em; }
.pcl-help-section h4 { margin-top: 1.75rem !important; font-size: 1.0625rem !important; }
.pcl-help-section :is(h2, h3) { scroll-margin-top: calc(var(--pcl-sticky-top) + 1.25rem); }
.pcl-help-section ul:not([class*="pcl-"]) { padding-left: 1.4rem; }
.pcl-help-section ul:not([class*="pcl-"]) li + li { margin-top: 0.45rem; }
ol.pcl-num-list { display: grid; gap: 0.75rem; padding: 0 !important; list-style: none; counter-reset: pcl-n; }
ol.pcl-num-list > li { position: relative; min-height: 1.85rem; margin: 0; padding: 0.12rem 0 0 2.6rem; counter-increment: pcl-n; }
ol.pcl-num-list > li::before {
	content: counter(pcl-n);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 1.85rem;
	height: 1.85rem;
	border-radius: 3px;
	background: var(--wp--preset--gradient--pcl-button, #002FA7);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
}
.pcl-table { margin: 1.25rem 0 0 !important; overflow-x: auto; border: 1px solid var(--pcl-border); border-radius: var(--pcl-radius); background: var(--pcl-surface); }
.pcl-table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.pcl-table thead { border-bottom: 0; }
.pcl-table :is(th, td) { padding: 0.9rem 1.15rem; border: 0; border-bottom: 1px solid var(--pcl-border); line-height: 1.55; text-align: left; vertical-align: top; }
.pcl-table th { background: var(--pcl-section); color: var(--pcl-heading); font-weight: 600; }
.pcl-table tbody tr:last-child > * { border-bottom: 0; }
.pcl-table tbody th[scope="row"] { min-width: 9.5rem; }
.pcl-callout { position: relative; padding: 1rem 1.2rem 1rem 3.25rem !important; border: 1px solid; border-radius: 6px; font-size: 0.9688rem; line-height: 1.65; }
.pcl-callout > * { margin-top: 0 !important; }
.pcl-callout > * + * { margin-top: 0.5rem !important; }
.pcl-callout::before { content: ""; position: absolute; left: 1.2rem; top: 1.2rem; width: 1.21rem; height: 1.21rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.pcl-callout strong { color: inherit; }
.pcl-callout a { color: inherit; text-decoration: underline; }
.pcl-callout--info { border-color: #D6E0F6; background: var(--pcl-soft); color: var(--pcl-ink); }
.pcl-callout--info::before { background: var(--pcl-accent); }
.pcl-callout--tip { border-color: #BBF0D6; background: #ECFDF5; color: #065F46; }
.pcl-callout--tip::before { background: #059669; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E") center / contain no-repeat; }
.pcl-callout--warn { border-color: #F3D58A; background: #FFF6E0; color: #5E4106; }
.pcl-callout--warn::before { background: #B7791F; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.pcl-help-section .pcl-help-start { display: grid !important; gap: 0.85rem !important; margin-top: 1.75rem !important; }
.pcl-help-start > * { margin: 0 !important; }
.pcl-help-card { position: relative; gap: 0.9rem !important; padding: 1.1rem 1.2rem !important; border: 1px solid var(--pcl-border); border-radius: 6px; background: var(--pcl-surface); transition: border-color 0.2s, transform 0.2s; }
.pcl-help-card:hover { border-color: var(--pcl-accent); transform: translateY(-2px); }
.pcl-help-card .pcl-icon { margin-top: 0.1rem !important; }
.pcl-help-card .pcl-icon img { width: 24px !important; height: 24px !important; }
.pcl-help-card .pcl-help-card__title { margin: 0 !important; font-family: var(--wp--preset--font-family--heading); font-size: 1.0313rem; font-weight: 700; line-height: 1.4; }
.pcl-help-card__title a { color: var(--pcl-heading); text-decoration: none; }
.pcl-help-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pcl-help-card .pcl-help-card__text { margin: 0.15rem 0 0 !important; font-size: 0.9063rem; line-height: 1.5; }
.pcl-help-section ol.pcl-mock-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	max-width: none;
	margin: 1.5rem 0 0 !important;
	padding: 1rem 1.2rem !important;
	border: 1px solid var(--pcl-border);
	border-radius: 6px;
	background: var(--pcl-section);
	list-style: none;
	counter-reset: pcl-m;
}
ol.pcl-mock-steps li { display: flex; align-items: center; gap: 0.55rem; margin: 0 !important; color: var(--pcl-heading); font-size: 0.9375rem; font-weight: 600; counter-increment: pcl-m; }
ol.pcl-mock-steps li::before { content: counter(pcl-m); display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--wp--preset--gradient--pcl-button, #002FA7); color: #fff; font-size: 0.8125rem; line-height: 1; }
.pcl-help-section .pcl-mock { margin-top: 1.5rem !important; overflow: hidden; border: 1px solid var(--pcl-border-strong); border-radius: 6px; background: #fff; font-size: 0.9375rem; }
.pcl-mock > * { margin: 0 !important; }
.pcl-mock__toolbar { gap: 0.75rem !important; padding: 0.7rem 0.9rem; border-bottom: 1px solid #E0E0E0; }
.pcl-mock__toolbar > * { margin: 0 !important; }
.pcl-mock__tool { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 2px; color: #1E1E1E; font-size: 1.35rem; line-height: 1 !important; }
.pcl-mock__tool--add { background: #1E1E1E; color: #fff; font-size: 1.1rem; }
.pcl-mock__toolbar .pcl-mock__end { margin-left: auto !important; }
.pcl-wp-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border: 1px solid #3858E9; border-radius: 2px; font-size: 0.8125rem !important; font-weight: 500; line-height: 1.4 !important; white-space: nowrap; }
.pcl-wp-btn--primary { background: #3858E9; color: #fff; }
.pcl-wp-btn--secondary { background: #fff; color: #3858E9; }
.pcl-wp-btn--tertiary { border-color: transparent; background: none; color: #3858E9; }
.pcl-mock__pin { position: relative; padding-left: calc(0.85rem + 18px + 0.4rem); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='43 50 780 780'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23002FA7'/%3E%3Cstop offset='1' stop-color='%23F26B2A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M115.57,666.58 A390,390 0 1 1 822.86,429.61 L655.68,498 A14,14 0 0 1 636.67,482.2 A208,208 0 0 0 240.49,361.24 Z M167.16,725.35 L235.55,558.18 A14,14 0 0 1 260.14,555.69 A208,208 0 0 0 511.76,632.51 L817.1,507.6 A390,390 0 0 1 167.16,725.35 Z M433,303.68 Q457.54,415.46 569.32,440 Q457.54,464.54 433,576.32 Q408.46,464.54 296.68,440 Q408.46,415.46 433,303.68 Z'/%3E%3C/svg%3E") 0.85rem center / 18px no-repeat, #3858E9; }
.pcl-mock__pin::after { content: "Click here"; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); padding: 0.2rem 0.55rem; border-radius: 4px; background: #F59E0B; color: #1E1E1E; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.pcl-mock__pin::before { content: ""; position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top: 0; border-bottom-color: #F59E0B; }
.pcl-mock__canvas { height: 90px; background: repeating-linear-gradient(0deg, #F6F7F7 0 14px, #fff 14px 28px); }
.pcl-mock__bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid #DCDCDE; background: #F0F0F1; color: #50575E; font-size: 0.8125rem !important; }
.pcl-mock__bar::before { content: ""; width: 50px; height: 10px; background: radial-gradient(circle, #DCDCDE 5px, transparent 5.5px) 0 0 / 20px 10px repeat-x; }
.pcl-mock__body { padding: 1.25rem 1.35rem; }
.pcl-mock__body > * { margin-top: 0 !important; }
.pcl-mock__body > * + * { margin-top: 0.5rem !important; }
.pcl-mock__body p { color: #3C434A; font-size: 0.9063rem; line-height: 1.6; }
/* The mock buttons keep their own colours inside the mock text (2026-11-07: "Use SVG icons" was grey on blue, 2.6:1) */
.pcl-mock__body p.pcl-wp-btn--primary { color: #fff; }
.pcl-mock__body p:is(.pcl-wp-btn--secondary, .pcl-wp-btn--tertiary) { color: #3858E9; }
.pcl-mock__body .pcl-mock__title { color: #1E1E1E; font-size: 1.0625rem; }
.pcl-mock__body .pcl-mock__title strong { color: inherit; }
.pcl-mock__body .pcl-mock__buttons { gap: 0.5rem !important; margin-top: 1rem !important; }
.pcl-mock__buttons > * { margin: 0 !important; }
.pcl-help-section .pcl-help-sites { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem !important; margin-top: 1.5rem !important; }
.pcl-help-sites > * { margin: 0 !important; }
.pcl-help-site { overflow: hidden; border: 1px solid var(--pcl-border); border-radius: 6px; background: var(--pcl-surface); }
.pcl-help-site > * { margin: 0 !important; }
.pcl-help-site img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; background: var(--pcl-section); }
.pcl-help-site__bar { gap: 0.5rem !important; padding: 0.65rem 0.8rem; }
.pcl-help-site__bar > * { margin: 0 !important; }
.pcl-help-site__bar strong { font-size: 0.9375rem; }
.pcl-help-site__bar a { font-size: 0.8438rem; font-weight: 600; white-space: nowrap; }
.pcl-help-section .pcl-help-styles { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.85rem !important; margin-top: 1.5rem !important; }
.pcl-help-styles > * { margin: 0 !important; }
.pcl-help-style { padding: 1rem !important; border: 1px solid var(--pcl-border); border-radius: 6px; }
/* Each card's colours and font come from the block siteworks/style-list (styles.json), 2026-11-08: before, five CSS
   rules gave them by position, so the 22 newer styles had no colours. */
ul.pcl-help-styles { padding: 0; list-style: none; }
.pcl-help-style { margin: 0 !important; }
.pcl-help-style__dots { display: flex; gap: 5px; margin-bottom: 0.75rem; }
.pcl-help-style__dots span { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(10, 11, 30, 0.12); }
html[data-theme="dark"] .pcl-help-style__dots span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.pcl-help-style .pcl-help-style__name { margin: 0 !important; color: var(--pcl-heading); font-family: var(--f, inherit); font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.pcl-help-style .pcl-help-style__fonts { margin: 0.3rem 0 0 !important; color: var(--pcl-muted); font-size: 0.8125rem; line-height: 1.45; }
.pcl-help-section ul.pcl-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; max-width: none; margin: 1.25rem 0 0 !important; padding: 0; list-style: none; }
ul.pcl-chips li { margin: 0 !important; padding: 0.3rem 0.7rem; border: 1px solid var(--pcl-border); border-radius: 999px; background: var(--pcl-surface); color: var(--pcl-heading); font-size: 0.875rem; line-height: 1.5; }
.pcl-help-section ul.pcl-schemes { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin: 1.25rem 0 0 !important; padding: 0; list-style: none; }
ul.pcl-schemes li { display: flex; align-items: center; gap: 0.5rem; margin: 0 !important; color: var(--pcl-heading); font-size: 0.9375rem; font-weight: 600; }
ul.pcl-schemes li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: #FCFDFC; }
ul.pcl-schemes li:nth-child(2)::before { background: #EFF3EF; }
ul.pcl-schemes li:nth-child(3)::before { background: #1A231A; }
ul.pcl-schemes li:nth-child(4)::before { background: #427A47; }
.pcl-help-section .pcl-help-faq { margin-top: 1.5rem !important; }
.pcl-help-faq > * { margin-top: 0 !important; }
.pcl-help-faq summary { font-size: 1rem; }
.pcl-help-faq .pcl-faq > :not(summary) { font-size: 0.9688rem; }
.pcl-help-section .pcl-glossary { margin-top: 1.25rem !important; overflow: hidden; border: 1px solid var(--pcl-border); border-radius: 6px; }
.pcl-glossary > * { margin: 0 !important; }
.pcl-glossary__row { display: grid; gap: 0.25rem 1.5rem; padding: 0.9rem 1.15rem; border-bottom: 1px solid var(--pcl-border); }
.pcl-glossary__row:last-child { border-bottom: 0; }
.pcl-glossary__row > * { margin: 0 !important; }
.pcl-glossary__term { color: var(--pcl-heading); font-weight: 700; }
.pcl-glossary__row > p + p { font-size: 0.9688rem; line-height: 1.6; }
.pcl-help-section .pcl-help-contact { margin-top: 1.5rem !important; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) !important; border: 1px solid var(--pcl-border); border-radius: var(--pcl-radius); background: var(--pcl-section); }
.pcl-help-section .pcl-help-contact > * { margin-top: 0 !important; }
.pcl-help-section .pcl-help-contact > * + * { margin-top: 0.75rem !important; }
.pcl-help-section .pcl-help-contact > .wp-block-buttons { margin-top: 1.25rem !important; }
.pcl-help-section .pcl-help-contact > .pcl-help-contact__review { margin-top: 1rem !important; font-size: 0.9375rem; }
@media (min-width: 640px) {
	.pcl-help-section .pcl-help-start { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pcl-glossary__row { grid-template-columns: 170px 1fr; }
}
/* 28 starter sites since 2026-11-07: 4 a row from tablets (7 full rows), each name above its Preview link */
@media (min-width: 760px) {
	.pcl-help-section .pcl-help-sites { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pcl-help-site__bar { flex-direction: column; align-items: flex-start !important; gap: 0.15rem !important; }
	.pcl-help-site__bar strong { font-size: 0.875rem; line-height: 1.3; }
}
@media (max-width: 559px) {
	/* Phones: each table row becomes a small card (label, then text). */
	.pcl-table thead { display: none; }
	.pcl-table :is(tr, th, td) { display: block; }
	.pcl-table tbody th[scope="row"] { min-width: 0; padding-bottom: 0.2rem; border-bottom: 0; background: none; }
	.pcl-table tbody td { padding-top: 0.2rem; border-bottom: 0; }
	.pcl-table tbody td[colspan] { padding-top: 0.9rem; background: var(--pcl-section); }
	.pcl-table tbody tr { padding-bottom: 0.4rem; border-bottom: 1px solid var(--pcl-border); }
	.pcl-table tbody tr:last-child { border-bottom: 0; }
	.pcl-help-site__bar { flex-direction: column; align-items: flex-start !important; gap: 0.15rem !important; }
	.pcl-help-site__bar strong { font-size: 0.875rem; }
}

/* Contact page */
.pcl-contact-grid { display: grid !important; gap: clamp(2rem, 1.5rem + 3vw, 4rem) !important; align-items: start; }
.pcl-contact-grid > * { margin: 0 !important; }
.pcl-contact-card { padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem) !important; border: 1px solid var(--pcl-border); border-radius: var(--pcl-radius); background: var(--pcl-surface); }
.pcl-contact-card .pcl-contact__title { margin-top: 0 !important; font-size: clamp(1.4rem, 1.22rem + 0.8vw, 1.75rem) !important; letter-spacing: -0.02em; }
.pcl-contact-note { padding: 1.5rem !important; border: 1px solid var(--pcl-border); border-radius: var(--pcl-radius); background: var(--pcl-section); }
.pcl-contact-note > * { margin-top: 0; }
.pcl-contact-note > .pcl-icon.wp-block-image { margin-bottom: 0.25rem !important; }
.pcl-contact-note .pcl-icon img { width: 24px !important; height: 24px !important; }
.pcl-contact-note h3 { font-size: 1.125rem !important; }
.pcl-contact-note p { font-size: 0.9688rem; line-height: 1.6; }
@media (min-width: 1000px) { .pcl-contact-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }

/* 18. Legal pages ------------------------------------------------------------------ */
.pcl-legal > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.pcl-legal > * + * { margin-top: 1rem !important; }
.pcl-legal > h2 { margin-top: clamp(3rem, 2.5rem + 2vw, 4.25rem) !important; margin-bottom: 1.1rem !important; font-size: clamp(1.8rem, 1.45rem + 1.6vw, 2.6rem) !important; line-height: 1.15 !important; letter-spacing: -0.025em; }
.pcl-legal > h3 { margin-top: 2rem !important; margin-bottom: 0.6rem !important; font-size: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem) !important; line-height: 1.3 !important; letter-spacing: -0.015em; }
.pcl-legal > :is(h2, h3) + * { margin-top: 0 !important; }
.pcl-legal :is(p, ul) { line-height: 1.75; }
.pcl-legal ul { padding-left: 1.25rem; }
.pcl-legal li + li { margin-top: 0.6rem; }
.pcl-legal li::marker { color: var(--pcl-accent); }
.pcl-legal strong { color: var(--pcl-heading); font-weight: 600; }
.pcl-legal code { padding: 0.1em 0.35em; border: 0; border-radius: 4px; font-size: 0.88em; }
.pcl-legal-summary { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) !important; border: 1px solid var(--pcl-border); border-radius: 6px; background: var(--pcl-section); }
.pcl-legal-summary > * { margin-top: 0 !important; }
.pcl-legal-summary > h2 { margin-bottom: 0.75rem !important; font-size: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem) !important; }
.pcl-legal-summary > h2 + * { margin-top: 0 !important; }

/* 19. 404 ----------------------------------------------------------------------------- */
.pcl-nf { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - var(--pcl-sticky-top) - 4.5rem); }
.pcl-nf > .pcl-hero__center { width: 100%; }
.pcl-nf__code {
	margin: 0 0 0.5rem !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(5rem, 3rem + 10vw, 10rem) !important;
	font-weight: 800;
	line-height: 1 !important;
	letter-spacing: -0.04em;
	background: linear-gradient(90deg, #002FA7 0%, #1D4ED8 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
}
html[data-theme="dark"] .pcl-nf__code { background-image: var(--wp--preset--gradient--pcl-gold-text, linear-gradient(90deg, #FFE29A, #FF9A4D)); }
.pcl-nf h1 { max-width: none !important; }

/* 20. Starter site details pages (design E), the Starter sites page and its list
   Variations A–D and their rules were deleted on 2026-10-30. */

.pcl-landing .pcl-tpl-other__link a { color: var(--pcl-accent); font-weight: 600; text-decoration: none; }
.pcl-landing .pcl-tpl-other__link a:hover { text-decoration: underline; }

/* More starter sites */
.pcl-tpl-others { display: grid !important; grid-template-columns: minmax(0, 1fr); /* 6 sites in full rows: 3 a row on desktops, 2 on tablets (was 5 + 1) */ gap: clamp(1rem, 0.8rem + 1vw, 1.5rem) !important; }
@media (min-width: 560px) { .pcl-tpl-others { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .pcl-tpl-others { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pcl-tpl-others > * { margin: 0 !important; }
.pcl-tpl-other { overflow: hidden; border: 1px solid var(--pcl-border); border-radius: var(--pcl-radius); background: var(--pcl-surface); }
.pcl-tpl-other > * { margin: 0 !important; }
.pcl-tpl-other__shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: top; border-bottom: 1px solid var(--pcl-border); }
.pcl-tpl-other__body { gap: 0.75rem !important; padding: 0.85rem 1rem !important; }
.pcl-tpl-other__body > * { margin: 0 !important; }
.pcl-tpl-other__body h3 { font-size: 1rem !important; }
.pcl-tpl-other__link { flex: none; font-size: 0.875rem; white-space: nowrap; } /* never "Previ / ew": the name wraps instead (2026-11-07) */
.pcl-tpl-other__body h3 { min-width: 0; }

/* Hero and the look */
.pcl-tpl-hero { display: grid !important; gap: clamp(2.5rem, 2rem + 3vw, 4rem) !important; align-items: center; grid-template-columns: minmax(0, 1fr); }
/* A long demo address must not widen the hero on phones (2026-10-31: the new starter sites have long names): phones show only the host. */
@media (max-width: 599px) { .pcl-tpl-hero .pcl-browser__path { display: none; } }
.pcl-tpl-hero > * { margin: 0 !important; }
.pcl-tpl-hero__text h1 { max-width: 14ch; }

.pcl-tpl-scroll { border-color: rgba(255, 255, 255, 0.14); }
.pcl-tpl-scroll .wp-block-image { max-height: min(560px, 70vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
@media (min-width: 1000px) { .pcl-tpl-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.pcl-tpl-look { display: grid !important; gap: clamp(2rem, 1.5rem + 3vw, 4rem) !important; align-items: center; }
.pcl-tpl-look > * { margin: 0 !important; }
.pcl-tpl-look__card { padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem) !important; border: 1px solid var(--pcl-border); border-radius: var(--pcl-radius); background: #F8F8F9; }
.pcl-tpl-look__card > * { margin-top: 0 !important; }
.pcl-tpl-look__card > * + * { margin-top: 0.75rem !important; }
.pcl-tpl-font, .pcl-tpl-font__sample { color: #1A1B23; font-family: "Epilogue", sans-serif; letter-spacing: -0.03em; }
.pcl-tpl-font { font-size: clamp(4rem, 3rem + 4vw, 6.5rem) !important; font-weight: 700; line-height: 1 !important; }
.pcl-tpl-font__sample { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem) !important; font-weight: 600; line-height: 1.2 !important; }

@media (min-width: 1000px) { .pcl-tpl-look { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Page tour */

.pcl-tpl-tour { display: grid !important; gap: clamp(1.75rem, 1.25rem + 2vw, 4rem) !important; align-items: center; }
.pcl-tpl-tour > * { margin: 0 !important; }
.pcl-tpl-tour__shot img { aspect-ratio: 4 / 3.4; object-fit: cover; object-position: top; }
.pcl-tpl-tour__text .pcl-eyebrow { margin-bottom: 0 !important; }
.pcl-tpl-tour__text > ul.pcl-check { margin-top: 1.25rem !important; }

@media (min-width: 900px) {
	.pcl-tpl-tour { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
	.pcl-tpl-tour--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
	.pcl-tpl-tour--flip .pcl-tpl-tour__media { order: 2; }
}

/* The first section runs up under the see-through header. */
.pcl-landing > .pcl-under-header:first-child { margin-top: calc(var(--pcl-header-h) * -1) !important; padding-top: calc(var(--pcl-header-h) + var(--wp--preset--spacing--pc-80)) !important; }
.pcl-tpl-hero-band { padding-bottom: calc(var(--wp--preset--spacing--pc-80) + 3.5rem) !important; }
.pcl-tpl-hero-band .pcl-tpl-hero__text h1 { max-width: 12ch; }
/* Two columns between 900 and 1199px leave the title about 450px: long names such as "Manufacturing & Industrial 1" must still fit word by word. */
@media (min-width: 900px) and (max-width: 1199px) { .pcl-tpl-hero-band .pcl-tpl-hero__text h1 { font-size: 3.6rem !important; } }
.pcl-tpl-hero__shot { position: relative; }
.pcl-tpl-hero__shot::before { content: ""; position: absolute; inset: 8% 4% -6%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, rgba(20, 70, 214, 0.55), transparent 70%); filter: blur(40px); pointer-events: none; }
.pcl-tpl-scroll-hint {
	position: absolute;
	right: 0.9rem;
	bottom: 0.9rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 !important;
	padding: 0.4rem 0.8rem 0.4rem 0.65rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(6, 11, 30, 0.78);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: 0.8125rem !important;
	font-weight: 600;
	line-height: 1.2;
	pointer-events: none;
}
.pcl-tpl-scroll-hint::before { content: ""; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='7'/%3E%3Cpath d='M12 6v4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='7'/%3E%3Cpath d='M12 6v4'/%3E%3C/svg%3E") center / contain no-repeat; }
/* The four points, over the foot of the hero */
.pcl-tpl-highlights {
	position: relative;
	z-index: 2;
	display: grid !important;
	margin-top: -3.5rem !important;
	overflow: hidden;
	border: 1px solid var(--pcl-border);
	border-radius: 10px;
	background: var(--pcl-surface);
}
.pcl-tpl-highlights > * { margin: 0 !important; }
.pcl-tpl-highlight { gap: 0.9rem !important; padding: 1.35rem 1.4rem !important; border-bottom: 1px solid var(--pcl-border); }
.pcl-tpl-highlight:last-child { border-bottom: 0; }
.pcl-tpl-highlight > * { margin: 0 !important; }

.pcl-tpl-highlight__title { margin: 0 !important; color: var(--pcl-heading); font-family: var(--wp--preset--font-family--heading); font-size: 1.0313rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.pcl-tpl-highlight__text { margin: 0.25rem 0 0 !important; color: var(--pcl-text); font-size: 0.9063rem; line-height: 1.45; }
@media (min-width: 640px) {
	.pcl-tpl-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pcl-tpl-highlight:nth-child(odd) { border-right: 1px solid var(--pcl-border); }
	.pcl-tpl-highlight:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (min-width: 1080px) {
	.pcl-tpl-highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pcl-tpl-highlight { border-bottom: 0; border-right: 1px solid var(--pcl-border); }
	.pcl-tpl-highlight:last-child { border-right: 0; }
}
/* Each page's role in the tour */
.pcl-tpl-tour__label { gap: 0.65rem !important; }
.pcl-tpl-tour__label > * { margin: 0 !important; }

.pcl-tpl-tour__role { color: var(--pcl-accent); font-size: 0.8125rem !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* What's included as an open list, and the "See all" link */
.pcl-tpl-included { display: grid !important; gap: 2rem 2.5rem !important; }
.pcl-tpl-included > * { margin: 0 !important; }
.pcl-tpl-included__item { gap: 1rem !important; }
.pcl-tpl-included__item > * { margin: 0 !important; }

.pcl-tpl-included__item h3.pcl-tpl-included__title { margin: 0 !important; font-size: 1.0625rem !important; letter-spacing: -0.015em; }
.pcl-tpl-included__text { margin: 0.35rem 0 0 !important; color: var(--pcl-text); font-size: 0.9375rem; line-height: 1.6; }
@media (min-width: 640px) { .pcl-tpl-included { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .pcl-tpl-included { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 3rem !important; } }
.pcl-tpl-all { margin-top: 2rem !important; }
.pcl-tpl-all a { justify-content: center; }

/* Light pages (E, Starter templates): light hero, plain icons, light closing */
.pcl-light-hero { position: relative; overflow: hidden; isolation: isolate; }
.pcl-light-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 60% at 92% 0%, rgba(47, 107, 255, 0.14), transparent 70%), radial-gradient(35% 55% at 0% 8%, rgba(255, 181, 71, 0.14), transparent 70%); }
.pcl-light-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--pcl-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--pcl-grid-line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 65% at 50% 0%, #000 20%, transparent 75%); }
.pcl-light-hero .pcl-hero__center .pcl-lead { margin-left: auto !important; margin-right: auto !important; }
.pcl-light-hero .pcl-tpl-scroll { border-color: var(--pcl-border); }
.pcl-light-hero .pcl-tpl-hero__shot::before { content: none; }
/* E: quieter screenshots, a thin border and a short soft shadow (owner, 2026-10-30: "less shadow around images"). */
.pcl-browser--theme.pcl-browser--soft { box-shadow: 0 1px 2px rgba(10, 20, 60, 0.04), 0 10px 24px -16px rgba(10, 20, 60, 0.16); }
html[data-theme="dark"] .pcl-browser--theme.pcl-browser--soft { box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.5); }
.pcl-tpl-scroll-hint { transition: opacity 0.3s, transform 0.3s; }
.pcl-tpl-scroll.is-scrolled .pcl-tpl-scroll-hint { opacity: 0; transform: translateY(6px); }
.pcl-tpl-highlights--soft { box-shadow: 0 6px 18px -12px rgba(10, 20, 60, 0.14); }
html[data-theme="dark"] .pcl-tpl-highlights--soft { box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.5); }
.pcl-tpl-highlight .pcl-icon { margin-top: 0.1rem !important; }
.pcl-tpl-tour__label .pcl-icon img { width: 22px !important; height: 22px !important; }
.pcl-tpl-included__item .pcl-icon { margin-top: 0.05rem !important; }
/* Closing card: words left, three screenshots fanned out on the right */
.pcl-cta-split { position: relative; display: grid !important; overflow: hidden; isolation: isolate; border: 1px solid var(--pcl-border); border-radius: 16px; background: radial-gradient(55% 90% at 100% 100%, rgba(47, 107, 255, 0.12), transparent 70%), radial-gradient(40% 60% at 0% 0%, rgba(255, 181, 71, 0.08), transparent 70%), var(--pcl-surface); }
.pcl-cta-split::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--pcl-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--pcl-grid-line) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 60% 80% at 85% 60%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 60% 80% at 85% 60%, #000 10%, transparent 75%); }
.pcl-cta-split > * { margin: 0 !important; }
.pcl-cta-split__text { padding: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(1.5rem, 1rem + 3vw, 4rem) clamp(1.5rem, 1rem + 2vw, 3rem) !important; }
.pcl-cta-split__text h2 { max-width: 18ch; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem) !important; }
.pcl-cta-split__text .pcl-lead { max-width: 44ch; }
.pcl-cta-split__note { color: var(--pcl-muted); }
.pcl-cta-split__shots { position: relative; aspect-ratio: 12 / 5; }
.pcl-cta-split__shots > .wp-block-image { position: absolute; bottom: -18%; width: 36%; margin: 0 !important; overflow: hidden; border: 1px solid var(--pcl-border); border-radius: 8px 8px 0 0; background: var(--pcl-surface); box-shadow: 0 1px 2px rgba(10, 20, 60, 0.04), 0 10px 24px -16px rgba(10, 20, 60, 0.18); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pcl-cta-split__shots img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 3.6; object-fit: cover; object-position: top; }
.pcl-cta-split__shots > :nth-child(1) { left: 6%; transform: rotate(-6deg); }
.pcl-cta-split__shots > :nth-child(2) { left: 29%; bottom: -8%; z-index: 2; }
.pcl-cta-split__shots > :nth-child(3) { right: 6%; transform: rotate(6deg); }
.pcl-cta-split:hover .pcl-cta-split__shots > :nth-child(1) { transform: rotate(-8deg) translate(-3%, -3%); }
.pcl-cta-split:hover .pcl-cta-split__shots > :nth-child(2) { transform: translateY(-4%); }
.pcl-cta-split:hover .pcl-cta-split__shots > :nth-child(3) { transform: rotate(8deg) translate(3%, -3%); }
html[data-theme="dark"] .pcl-cta-split__shots > .wp-block-image { box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.5); }
@media (min-width: 900px) {
	.pcl-cta-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
	.pcl-cta-split__text { padding-bottom: clamp(2rem, 1.5rem + 3vw, 4rem) !important; }
	.pcl-cta-split__shots { aspect-ratio: auto; }
	.pcl-cta-split__shots > .wp-block-image { bottom: -12%; width: 44%; }
	.pcl-cta-split__shots > :nth-child(2) { bottom: -4%; }
}
@media (prefers-reduced-motion: reduce) { .pcl-cta-split__shots > .wp-block-image { transition: none; } }

/* E: the look, compact. Font pair, sample line, the colours as small circles. */
.pcl-tpl-look__card.pcl-tpl-look__card--compact { padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem) !important; background: var(--pcl-surface); }
.pcl-tpl-type { gap: 1.25rem !important; }
.pcl-tpl-type > * { margin: 0 !important; }
.pcl-tpl-look__card--compact .pcl-tpl-font { font-size: clamp(3rem, 2.5rem + 2vw, 4rem) !important; }
.pcl-tpl-type__names { padding-left: 1.25rem; border-left: 1px solid var(--pcl-border); }
.pcl-tpl-type__names > * { margin: 0 !important; }
.pcl-tpl-type__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.55rem; line-height: 1.6; }
.pcl-tpl-type__row strong { color: var(--pcl-heading); font-family: "Epilogue", sans-serif; font-size: 1.0625rem; font-weight: 700; }
.pcl-tpl-type__row--body strong { font-family: "Inter", var(--wp--preset--font-family--body); font-weight: 600; }
.pcl-tpl-type__row span { color: var(--pcl-muted); font-size: 0.8125rem; }
.pcl-tpl-dots { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem !important; padding-top: 1.25rem; border-top: 1px solid var(--pcl-border); }
.pcl-tpl-dots > * { margin: 0 !important; }
.pcl-tpl-dot { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.65rem; font-size: 0.8125rem; line-height: 1.3; }
.pcl-tpl-dot::before { content: ""; grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--sw-c); box-shadow: inset 0 0 0 1px rgba(10, 11, 30, 0.12); }
html[data-theme="dark"] .pcl-tpl-dot::before { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.pcl-tpl-dot strong { display: block; align-self: end; color: var(--pcl-heading); font-weight: 600; white-space: nowrap; }
.pcl-tpl-dot span { display: block; align-self: start; color: var(--pcl-muted); font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace); font-size: 0.75rem; letter-spacing: 0.02em; }
.pcl-tpl-dot--accent { --sw-c: #444C7E; }
.pcl-tpl-dot--accent-dark { --sw-c: #2F3456; }
.pcl-tpl-dot--heading { --sw-c: #1A1B23; }
.pcl-tpl-dot--background { --sw-c: #F8F8F9; }
@media (min-width: 700px) and (max-width: 999px), (min-width: 1400px) { .pcl-tpl-dots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Starter site page: pages after the sixth fold away under "Show all 12 pages". */
.pcl-tpl-tour-more { margin-top: 0; }
.pcl-tpl-tour-more > summary { display: flex; justify-content: center; list-style: none; cursor: pointer; }
.pcl-tpl-tour-more > summary::-webkit-details-marker { display: none; }
.pcl-tpl-tour-more > summary { width: max-content; margin: 0 auto; padding: 0.75rem 1.4rem; border: 1px solid var(--pcl-border-strong); border-radius: 6px; background: var(--pcl-surface); color: var(--pcl-heading); font-weight: 600; transition: border-color 0.2s; }
.pcl-tpl-tour-more > summary:hover { border-color: var(--pcl-accent); }
.pcl-tpl-tour-more[open] > summary { display: none; }
.pcl-tpl-tour-more > .pcl-tpl-tour { margin-top: 0; }
.pcl-tpl-tour-more > .pcl-tpl-tour + .pcl-tpl-tour { margin-top: var(--wp--preset--spacing--pc-70); }

/* Starter templates page */
.pcl-st-meta { color: var(--pcl-muted); }
.pcl-st-grid { display: grid !important; gap: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem) clamp(1.25rem, 1rem + 1vw, 2rem) !important; }
.pcl-st-grid > * { margin: 0 !important; }
.pcl-st-card > * { margin: 0 !important; }
.pcl-st-card__media { position: relative; overflow: hidden; border: 1px solid var(--pcl-border); border-radius: 10px; background: var(--pcl-section); }
.pcl-st-card__media > * { margin: 0 !important; }
.pcl-st-card__shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 4.3; object-fit: cover; object-position: top; }
.pcl-st-card__actions { position: absolute !important; inset: 0; align-items: center; gap: 0.6rem !important; background: rgba(6, 11, 30, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.25s; }
.pcl-st-card:hover .pcl-st-card__actions, .pcl-st-card:focus-within .pcl-st-card__actions { opacity: 1; }
.pcl-st-card__body { gap: 0.75rem !important; padding: 1rem 0.15rem 0 !important; }
.pcl-st-card__body > * { margin: 0 !important; }
.pcl-st-card__name { margin: 0 !important; font-size: 1.1875rem !important; letter-spacing: -0.015em; }
.pcl-st-card__name a { color: inherit; text-decoration: none; }
.pcl-st-card__name a:hover { color: var(--pcl-accent); }
.pcl-st-card__kind { margin: 0.2rem 0 0 !important; color: var(--pcl-muted); font-size: 0.9063rem; }
.pcl-st-card__tag .pcl-tag { margin: 0; }
/* The list's filters: category chips, search, Free/Pro, sort */
.pcl-st-browser > * { margin-top: 0; margin-bottom: 0; }
.pcl-st-filters { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.pcl-st-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pcl-landing .pcl-st-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border: 1px solid var(--pcl-border); border-radius: 999px; background: var(--pcl-surface); color: var(--pcl-heading); font-size: 0.9063rem; font-weight: 500; line-height: 1.3; text-decoration: none; transition: border-color 0.15s, background-color 0.15s; }
.pcl-landing .pcl-st-chip span { color: var(--pcl-muted); font-size: 0.8125rem; font-weight: 400; }
.pcl-landing .pcl-st-chip:hover { border-color: var(--pcl-border-strong); }
.pcl-landing .pcl-st-chip[aria-current] { border-color: var(--pcl-heading); background: var(--pcl-heading); color: var(--wp--preset--color--pc-background); }
.pcl-landing .pcl-st-chip[aria-current] span { color: inherit; opacity: 0.7; }
.pcl-st-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.pcl-st-search { position: relative; flex: 1 1 16rem; max-width: 26rem; }
.pcl-st-search::before { content: ""; position: absolute; left: 0.85rem; top: 50%; width: 1rem; height: 1rem; transform: translateY(-50%); background: var(--pcl-muted); pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat; }
.pcl-st-search input, .pcl-st-sort select { box-sizing: border-box; min-height: 42px; border: 1px solid var(--pcl-border-strong); border-radius: 6px; background: var(--pcl-surface); color: var(--pcl-heading); font: inherit; font-size: 0.9375rem; }
.pcl-st-search input { width: 100%; padding: 0.55rem 0.85rem 0.55rem 2.35rem; }
.pcl-st-search input:focus, .pcl-st-sort select:focus { border-color: var(--pcl-accent); outline: none; } /* only the border colour (owner, 2026-10-31) */
.pcl-st-plan { display: inline-flex; margin: 0; padding: 3px; border: 1px solid var(--pcl-border-strong); border-radius: 8px; background: var(--pcl-surface); }
.pcl-st-plan label { position: relative; }
.pcl-st-plan input { position: absolute; opacity: 0; pointer-events: none; }
.pcl-st-plan span { display: block; padding: 0.4rem 0.85rem; border-radius: 5px; color: var(--pcl-text); font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.pcl-st-plan input:checked + span { background: var(--pcl-heading); color: var(--wp--preset--color--pc-background); }
.pcl-st-plan input:focus-visible + span { outline: 2px solid var(--pcl-accent); outline-offset: 1px; }
.pcl-st-sort { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; color: var(--pcl-muted); font-size: 0.875rem; }
.pcl-st-sort select { padding: 0.45rem 2rem 0.45rem 0.75rem; }
.pcl-st-apply { min-height: 42px; padding: 0 1rem; border: 0; border-radius: 6px; background: var(--pcl-accent); color: #fff; font: inherit; font-weight: 600; }
.pcl-st-count { margin-bottom: 1.25rem !important; color: var(--pcl-muted); font-size: 0.875rem; }
.pcl-st-empty { padding: 3rem 1rem; color: var(--pcl-text); text-align: center; }
.pcl-st-empty[hidden], .pcl-st-grid > [hidden] { display: none !important; }
.pcl-st-more { margin-top: 2rem !important; text-align: center; }
.pcl-st-more__button { min-height: 44px; padding: 0.6rem 1.4rem; border: 1px solid var(--pcl-border-strong); border-radius: 6px; background: var(--pcl-surface); color: var(--pcl-heading); font: inherit; font-weight: 600; cursor: pointer; }
.pcl-st-more__button:hover { border-color: var(--pcl-accent); }
.pcl-st-more__button[hidden] { display: none; }
@media (max-width: 599px) { .pcl-st-sort { margin-left: 0; } .pcl-st-search { max-width: none; } }
/* Card badges and the Pro tag */
.pcl-st-card__badges { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; display: flex; gap: 0.35rem; margin: 0 !important; }
.pcl-st-card__badges:empty { display: none; }
.pcl-badge { padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--pcl-heading); color: var(--wp--preset--color--pc-background); font-size: 0.75rem; font-weight: 700; line-height: 1.4; }
.pcl-badge--new { background: #059669; color: #fff; }
.pcl-tag.pcl-tag--pro { background: var(--wp--preset--gradient--pcl-gold-text, #FFC260); color: #1A1300; }

@media (hover: none) {
	/* Touch screens have no hover: the buttons sit under the screenshot. */
	.pcl-st-card__actions { position: static !important; justify-content: flex-start !important; padding: 0.75rem; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; }
}
@media (min-width: 640px) { .pcl-st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .pcl-st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 21. Small screens ------------------------------------------------------- */

@media (max-width: 599px) {

	.pcl-header .pcl-header__cta { display: none; }
	.pcl-style-sample__links { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link { transition: none !important; }
}

/* 22. Home options with hooks (2026-10-31). Since 2026-11-07 Home is option 10, the option pages are gone, and only the rules
   Home still uses are left here (the rest was removed after a check that every page keeps the same layout). -------- */
/* What you lose: the empty editor beside the list of losses */
.pcl-hk-split { display: grid !important; gap: clamp(2rem, 1.5rem + 3vw, 4.5rem) !important; align-items: center; }
.pcl-hk-split > * { margin: 0 !important; }
@media (min-width: 1000px) { .pcl-hk-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.pcl-hk-blank { position: relative; }
.pcl-hk-blank > * { margin: 0 !important; }
.pcl-hk-tag { position: absolute; top: -0.85rem; right: 1.25rem; z-index: 2; padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--pcl-heading); color: var(--pcl-surface); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 8px 18px -10px rgba(10, 20, 60, 0.5); }
.pcl-hk-losses { display: grid !important; gap: 1.6rem !important; }
.pcl-hk-losses > * { margin: 0 !important; }
.pcl-hk-loss { position: relative; padding-left: 3rem !important; }
.pcl-hk-loss > * { margin: 0 !important; }
.pcl-hk-loss::before { content: ""; position: absolute; left: 0; top: 0.05rem; width: 2rem; height: 2rem; border-radius: 50%; background: #FDECEA; }
.pcl-hk-loss::after { content: ""; position: absolute; left: 0.5rem; top: 0.55rem; width: 1rem; height: 1rem; background: #C2410C;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-theme="dark"] .pcl-hk-loss::before { background: rgba(251, 146, 60, 0.14); }
html[data-theme="dark"] .pcl-hk-loss::after { background: #FB923C; }
.pcl-hk-loss__title { font-size: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem) !important; }
.pcl-hk-loss .pcl-hk-loss__text { margin-top: 0.35rem !important; line-height: 1.6; }
.pcl-hk-turn { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem) !important; color: var(--pcl-heading); font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.pcl-hk-turn::after { content: ""; display: block; width: 1.6rem; height: 1.6rem; margin: 0.9rem auto 0; background: var(--pcl-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E") center / contain no-repeat; }

/* How easy: three outcomes beside the two real wizard screens, stacked */
.pcl-hk-points { display: grid !important; gap: 1.25rem !important; margin-top: 0.5rem !important; }
/* Room between an intro and the points under it (owner, 2026-10-31: "add proper space after this line"). */
.pcl-lead + .pcl-hk-points { margin-top: 1.75rem !important; }
.pcl-hk-points > * { margin: 0 !important; }
.pcl-hk-point { position: relative; padding-left: 2.25rem !important; }
.pcl-hk-point > * { margin: 0 !important; }
.pcl-hk-point::before { content: ""; position: absolute; left: 0; top: 0.2rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--wp--preset--gradient--pcl-button, #002FA7); }
.pcl-hk-point::after { content: ""; position: absolute; left: 0; top: 0.2rem; width: 1.35rem; height: 1.35rem; background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8.5 10.2 15.5 7 12.3'/%3E%3C/svg%3E") center / 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8.5 10.2 15.5 7 12.3'/%3E%3C/svg%3E") center / 100% no-repeat; }
.pcl-hk-point__title { font-size: 1.0625rem !important; letter-spacing: -0.015em; }
.pcl-hk-point .pcl-hk-point__text { margin-top: 0.25rem !important; font-size: 0.9688rem; line-height: 1.55; }
.pcl-hk-stack { position: relative; aspect-ratio: 1 / 0.86; }
.pcl-hk-stack > .wp-block-image { position: absolute; margin: 0 !important; }
.pcl-hk-stack img { display: block; width: 100%; height: auto; border: 1px solid var(--pcl-border); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(10, 20, 60, 0.05), 0 24px 48px -24px rgba(10, 20, 60, 0.35); }
.pcl-hk-stack__back { top: 0; left: 0; width: 80%; }
.pcl-hk-stack__front { right: 0; bottom: 0; width: 72%; }
html[data-theme="dark"] :is(.pcl-hk-stack, .pcl-hk-row__dialog) img { box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6); }

/* Option 2: three real moments */

/* Option 2: the real screens, text beside each in turn */

/* What it costs: a receipt that totals "Free" */
.pcl-hk-receipt { position: relative; max-width: 440px; margin: 0 auto !important; padding: 2rem 2rem 1.6rem !important; border: 1px solid var(--pcl-border); border-radius: 14px; background: var(--pcl-surface); box-shadow: 0 1px 2px rgba(10, 20, 60, 0.05), 0 32px 64px -32px rgba(10, 20, 60, 0.4); }
@media (min-width: 900px) { .pcl-hk-receipt { margin-right: 0 !important; transform: rotate(1.5deg); } }
.pcl-hk-receipt > * { margin: 0 !important; }
.pcl-hk-receipt .pcl-hk-receipt__head { padding-bottom: 1rem; border-bottom: 2px dashed var(--pcl-border-strong); color: var(--pcl-heading); font-family: var(--wp--preset--font-family--heading); font-size: 1.125rem; font-weight: 700; }
.pcl-hk-receipt__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px dotted var(--pcl-border-strong); font-size: 0.9688rem; line-height: 1.4; }
.pcl-hk-receipt__row span:first-child { color: var(--pcl-heading); }
.pcl-hk-receipt__row span:last-child { flex: none; color: #047857; font-weight: 600; }
html[data-theme="dark"] .pcl-hk-receipt__row span:last-child { color: #6EE7B7; }

.pcl-hk-maker { gap: 1rem !important; padding-top: 0.5rem !important; }
.pcl-hk-maker .pcl-profile__photo { flex: none; width: 56px; height: 56px; margin: 0 !important; }
.pcl-hk-maker .pcl-hk-maker__text { margin: 0 !important; font-size: 0.9375rem; line-height: 1.55; }
.pcl-hk-maker__text a { color: var(--pcl-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; }
@media (prefers-reduced-motion: reduce) { .pcl-hk-receipt { transform: none !important; } }

/* Option 3: two timelines, another tool against PageCore */
.pcl-hk-tracks { display: grid !important; gap: 1.25rem !important; }
.pcl-hk-tracks > * { margin: 0 !important; }
.pcl-hk-track { display: grid !important; gap: 1rem !important; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) !important; border: 1px solid var(--pcl-border); border-radius: 14px; background: var(--pcl-surface); }
.pcl-hk-track > * { margin: 0 !important; }
.pcl-hk-track .pcl-hk-track__label { align-self: center; color: var(--pcl-heading); font-family: var(--wp--preset--font-family--heading); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; }
.pcl-hk-step { position: relative; padding: 1.1rem 1.15rem 1.15rem 1.15rem !important; border-radius: 10px; background: var(--pcl-section); }
.pcl-hk-step > * { margin: 0 !important; }
.pcl-hk-step .pcl-hk-step__when { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pcl-hk-step .pcl-hk-step__title { margin-top: 0.35rem !important; font-size: 1.0625rem !important; letter-spacing: -0.015em; }
.pcl-hk-step .pcl-hk-step__text { margin-top: 0.3rem !important; font-size: 0.9063rem; line-height: 1.5; }
.pcl-hk-track--other .pcl-hk-step__when { color: #B45309; }
.pcl-hk-track--other .pcl-hk-step:nth-child(n+3) { background: #FFF4EE; }
.pcl-hk-track--other .pcl-hk-step:last-child { box-shadow: inset 0 0 0 1px #F5C6B3; }
html[data-theme="dark"] .pcl-hk-track--other .pcl-hk-step:nth-child(n+3) { background: rgba(251, 146, 60, 0.1); }
html[data-theme="dark"] .pcl-hk-track--other .pcl-hk-step:last-child { box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.35); }
html[data-theme="dark"] .pcl-hk-track--other .pcl-hk-step__when { color: #FDBA74; }
.pcl-hk-track--pagecore { border-color: color-mix(in srgb, var(--pcl-accent) 35%, var(--pcl-border)); box-shadow: 0 20px 44px -30px rgba(0, 47, 167, 0.45); }
.pcl-hk-track--pagecore .pcl-hk-step { background: color-mix(in srgb, var(--pcl-accent) 7%, var(--pcl-surface)); }
.pcl-hk-track--pagecore .pcl-hk-step__when { color: var(--pcl-accent); }
@media (min-width: 640px) { .pcl-hk-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pcl-hk-track__label { grid-column: 1 / -1; } }
@media (min-width: 1080px) { .pcl-hk-track { grid-template-columns: 150px repeat(4, minmax(0, 1fr)); } .pcl-hk-track__label { grid-column: auto; } }

/* Option 3: the honest comparison */

.pcl-hk-footnote { color: var(--pcl-muted); font-size: 0.875rem; }
@media (max-width: 559px) {
	/* Phones: each row becomes a small card, every answer labelled with its column. */
	
	
	
	
	
	
	
	
}

/* Under the side-by-side rows or the stacked cards, the three points get room of their own (owner, 2026-10-31). */
:is(.pcl-hk-cmp__row ~ .pcl-hk-points--row, .pcl-hk-deck + .pcl-hk-points--row) { margin-top: clamp(3.5rem, 2.5rem + 3vw, 6rem) !important; }

/* Option 3: who it's for */
.pcl-hk-personas { display: grid !important; gap: 1.25rem !important; }
.pcl-hk-personas > * { margin: 0 !important; }
@media (min-width: 900px) { .pcl-hk-personas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pcl-hk-persona { overflow: hidden; border: 1px solid var(--pcl-border); border-radius: 14px; background: var(--pcl-surface); }
.pcl-hk-persona > * { margin: 0 !important; }
.pcl-hk-persona__shot { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--pcl-border); }
.pcl-hk-persona__shot .wp-block-image { height: 100%; margin: 0 !important; }
.pcl-hk-persona__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.pcl-hk-persona__body { padding: 1.5rem 1.5rem 1.75rem !important; }
.pcl-hk-persona__body > * { margin: 0 !important; }
.pcl-hk-persona__title { font-size: 1.3rem !important; letter-spacing: -0.02em; }
.pcl-hk-persona .pcl-hk-persona__promise { margin-top: 0.4rem !important; color: var(--pcl-heading); font-weight: 600; line-height: 1.5; }
/* Room between the promise line and the list under it (owner, 2026-10-31: "give proper space after above lines"). */
.pcl-hk-persona .pcl-hk-persona__promise + ul.pcl-check { margin-top: 1.25rem !important; }
.pcl-hk-persona ul.pcl-check { gap: 0.6rem; font-size: 0.9375rem; }

/* Option 4: the real WordPress editor with numbered pointers */

.pcl-hk-pin { position: absolute; z-index: 2; display: grid; place-items: center; width: clamp(22px, 1.2rem + 0.8vw, 32px); height: clamp(22px, 1.2rem + 0.8vw, 32px); border-radius: 50%; background: var(--wp--preset--gradient--pcl-button, #002FA7); color: #fff; font-size: clamp(0.75rem, 0.65rem + 0.3vw, 0.9375rem); font-weight: 800; line-height: 1; transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.25), 0 6px 14px -4px rgba(0, 47, 167, 0.6); }

.pcl-hk-legend { display: grid !important; gap: 1.1rem 1.5rem !important; max-width: 1160px; margin-left: auto !important; margin-right: auto !important; }
.pcl-hk-legend > * { margin: 0 !important; }
@media (min-width: 640px) { .pcl-hk-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .pcl-hk-legend { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pcl-hk-legend__item { gap: 0.75rem !important; }
.pcl-hk-legend__item > * { margin: 0 !important; }
.pcl-hk-legend .pcl-hk-legend__num { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--wp--preset--gradient--pcl-button, #002FA7); color: #fff; font-size: 0.875rem; font-weight: 800; }
.pcl-hk-legend .pcl-hk-legend__text { color: var(--pcl-heading); font-size: 0.9688rem; line-height: 1.5; }

/* Option 4: the simple side by side */

/* Option 4: an AI-generated site against a PageCore starter site */

/* Option 5: moods in the year-by-year timeline, as single-colour icons (Google Material Symbols, Apache 2.0) */
.pcl-hk-step .pcl-hk-step__mood { display: block; width: 40px; height: 40px; margin: 0 0 0.65rem !important; }
.pcl-hk-step__mood::before { content: ""; display: block; width: 100%; height: 100%; background: var(--pcl-accent); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.pcl-hk-mood--very-satisfied::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-261q57 0 105.5-26t78.5-72q6-12-.5-23T643-393H317q-14 0-20.5 11t-.5 23q30 46 78.5 72T480-261ZM347-578l27 27q8 8 18 8t18-8q8-8 8-18t-8-18l-42-42q-9-9-21-9t-21 9l-42 42q-8 8-8 18t8 18q8 8 18 8t18-8l27-27Zm267 0 27 27q8 8 18 8t18-8q8-8 8-18t-8-18l-42-42q-9-9-21-9t-21 9l-42 42q-8 8-8 18t8 18q8 8 18 8t18-8l27-27ZM324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM480-480Zm241 241q99-99 99-241t-99-241q-99-99-241-99t-241 99q-99 99-99 241t99 241q99 99 241 99t241-99Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-261q57 0 105.5-26t78.5-72q6-12-.5-23T643-393H317q-14 0-20.5 11t-.5 23q30 46 78.5 72T480-261ZM347-578l27 27q8 8 18 8t18-8q8-8 8-18t-8-18l-42-42q-9-9-21-9t-21 9l-42 42q-8 8-8 18t8 18q8 8 18 8t18-8l27-27Zm267 0 27 27q8 8 18 8t18-8q8-8 8-18t-8-18l-42-42q-9-9-21-9t-21 9l-42 42q-8 8-8 18t8 18q8 8 18 8t18-8l27-27ZM324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM480-480Zm241 241q99-99 99-241t-99-241q-99-99-241-99t-241 99q-99 99-99 241t99 241q99 99 241 99t241-99Z'/%3E%3C/svg%3E"); }

.pcl-hk-mood--excited::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-240q66 0 113-47t47-113v-50q0-13-8.5-21.5T610-480H350q-13 0-21.5 8.5T320-450v50q0 66 47 113t113 47Zm0-60q-42 0-71-29t-29-71v-20h200v20q0 42-29 71t-71 29ZM340-680q-34 0-60 22t-40 54q-5 11 1.5 21t18.5 13q11 3 22-2.5t16-16.5q7-13 17.5-22t24.5-9q14 0 24.5 9.5T382-588q5 11 16 16t22 2q12-3 18.5-13t1.5-21q-14-32-40-54t-60-22Zm280 0q-34 0-60 22t-40 54q-5 11 1.5 21t18.5 13q11 3 22-2.5t16-16.5q7-13 17.5-22t24.5-9q14 0 24.5 9.5T662-588q5 11 16 16t22 2q12-3 18.5-13t1.5-21q-14-32-40-54t-60-22ZM324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM480-480Zm241 241q99-99 99-241t-99-241q-99-99-241-99t-241 99q-99 99-99 241t99 241q99 99 241 99t241-99Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-240q66 0 113-47t47-113v-50q0-13-8.5-21.5T610-480H350q-13 0-21.5 8.5T320-450v50q0 66 47 113t113 47Zm0-60q-42 0-71-29t-29-71v-20h200v20q0 42-29 71t-71 29ZM340-680q-34 0-60 22t-40 54q-5 11 1.5 21t18.5 13q11 3 22-2.5t16-16.5q7-13 17.5-22t24.5-9q14 0 24.5 9.5T382-588q5 11 16 16t22 2q12-3 18.5-13t1.5-21q-14-32-40-54t-60-22Zm280 0q-34 0-60 22t-40 54q-5 11 1.5 21t18.5 13q11 3 22-2.5t16-16.5q7-13 17.5-22t24.5-9q14 0 24.5 9.5T662-588q5 11 16 16t22 2q12-3 18.5-13t1.5-21q-14-32-40-54t-60-22ZM324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM480-480Zm241 241q99-99 99-241t-99-241q-99-99-241-99t-241 99q-99 99-99 241t99 241q99 99 241 99t241-99Z'/%3E%3C/svg%3E"); }

.pcl-hk-mood--stressed::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m480-338 49 49q5 5 11 5t11-5l49-49 18 18q9 9 21 9t21-9q9-9 9-21t-9-21l-49-49q-5-5-11-5t-11 5l-49 49-49-49q-5-5-11-5t-11 5l-49 49-49-49q-5-5-11-5t-11 5l-49 49q-9 9-9 21t9 21q9 9 21 9t21-9l18-18 49 49q5 5 11 5t11-5l49-49ZM339-560l-52 38q-10 8-12.5 20t5.5 22q8 10 20 12.5t22-5.5l102-75q6-5 6-12t-6-12l-102-75q-10-8-22-5.5T280-640q-8 10-6 22t13 20l52 38Zm282 0 52-38q10-8 12.5-20t-5.5-22q-8-10-20-12.5t-22 5.5l-102 75q-6 5-6 12t6 12l102 75q10 8 22 5.5t20-12.5q8-10 6-22t-13-20l-52-38ZM324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM480-480Zm241 241q99-99 99-241t-99-241q-99-99-241-99t-241 99q-99 99-99 241t99 241q99 99 241 99t241-99Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m480-338 49 49q5 5 11 5t11-5l49-49 18 18q9 9 21 9t21-9q9-9 9-21t-9-21l-49-49q-5-5-11-5t-11 5l-49 49-49-49q-5-5-11-5t-11 5l-49 49-49-49q-5-5-11-5t-11 5l-49 49q-9 9-9 21t9 21q9 9 21 9t21-9l18-18 49 49q5 5 11 5t11-5l49-49ZM339-560l-52 38q-10 8-12.5 20t5.5 22q8 10 20 12.5t22-5.5l102-75q6-5 6-12t-6-12l-102-75q-10-8-22-5.5T280-640q-8 10-6 22t13 20l52 38Zm282 0 52-38q10-8 12.5-20t-5.5-22q-8-10-20-12.5t-22 5.5l-102 75q-6 5-6 12t6 12l102 75q10 8 22 5.5t20-12.5q8-10 6-22t-13-20l-52-38ZM324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM480-480Zm241 241q99-99 99-241t-99-241q-99-99-241-99t-241 99q-99 99-99 241t99 241q99 99 241 99t241-99Z'/%3E%3C/svg%3E"); }

.pcl-hk-track--other .pcl-hk-mood--stressed::before { background: #C2410C; }

html[data-theme="dark"] .pcl-hk-track--other .pcl-hk-mood--stressed::before { background: #FB923C; }
.pcl-hk-track--moods .pcl-hk-step:last-child .pcl-hk-step__mood { width: 46px; height: 46px; }
.pcl-hk-track--moods .pcl-hk-step { padding-top: 1.2rem !important; }

/* Option 5: a photo of the person on each track, the track's name over it */
.pcl-hk-track__head { display: flex !important; flex-direction: column; justify-content: center; }
.pcl-hk-track__head > * { margin: 0 !important; }
.pcl-hk-track__head--photo { position: relative; min-height: 210px; overflow: hidden; border-radius: 12px; isolation: isolate; }
.pcl-hk-track__head--photo .pcl-hk-track__photo { position: absolute; inset: 0; z-index: -2; }
.pcl-hk-track__head--photo .pcl-hk-track__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pcl-hk-track--other .pcl-hk-track__photo img { object-position: 46% 26%; }
.pcl-hk-track--pagecore .pcl-hk-track__photo img { object-position: 54% 30%; }
.pcl-hk-track__head--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(6, 11, 30, 0.82)); }
.pcl-hk-track__head--photo .pcl-hk-track__label { margin-top: auto !important; padding: 1rem 1.1rem; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); }
@media (min-width: 640px) { .pcl-hk-track__head--photo { grid-column: 1 / -1; min-height: 230px; } }
@media (min-width: 1080px) {
	.pcl-hk-track--moods { grid-template-columns: 230px repeat(4, minmax(0, 1fr)); }
	.pcl-hk-track__head--photo { grid-column: auto; min-height: 0; }
	.pcl-hk-track--other .pcl-hk-track__photo img { transform: scale(1.3); transform-origin: 46% 30%; }
	.pcl-hk-track--pagecore .pcl-hk-track__photo img { transform: scale(1.3); transform-origin: 54% 34%; }
}

/* Option 5: the same hero, visual and code, side by side */
.pcl-hk-cmp__row { display: grid !important; gap: 1.1rem !important; }
.pcl-hk-cmp__row > * { margin: 0 !important; }
.pcl-hk-cmp__head { gap: 0.9rem !important; }
.pcl-hk-cmp__head > * { margin: 0 !important; }
.pcl-hk-cmp__head > * > * { margin: 0 !important; }
.pcl-hk-cmp__head .pcl-hk-cmp__num { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--wp--preset--gradient--pcl-button, #002FA7); color: #fff; font-family: var(--wp--preset--font-family--heading); font-size: 1.125rem; font-weight: 800; }
.pcl-hk-cmp__title { font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem) !important; letter-spacing: -0.02em; }
.pcl-hk-cmp__head .pcl-hk-cmp__sub { margin-top: 0.15rem !important; color: var(--pcl-muted); }
.pcl-hk-cmp__cells { display: grid !important; gap: 1.1rem !important; }
.pcl-hk-cmp__cells > * { margin: 0 !important; }
@media (min-width: 900px) { .pcl-hk-cmp__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pcl-hk-cmp__cell { display: flex !important; flex-direction: column; gap: 0.85rem; padding: 1rem !important; border: 1px solid var(--pcl-border); border-radius: 14px; background: var(--pcl-surface); }
.pcl-hk-cmp__cell > * { margin: 0 !important; }
.pcl-hk-cmp__cell--us { border-color: color-mix(in srgb, var(--pcl-accent) 35%, var(--pcl-border)); }
.pcl-hk-cmp__cell .pcl-hk-cmp__tag { align-self: flex-start; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--pcl-section); color: var(--pcl-heading); font-size: 0.8125rem; font-weight: 700; }
.pcl-hk-cmp__cell--us .pcl-hk-cmp__tag { background: color-mix(in srgb, var(--pcl-accent) 12%, var(--pcl-surface)); color: var(--pcl-accent); }
.pcl-hk-cmp__cell .pcl-browser { flex: 1; }
.pcl-hk-cmp__cell .pcl-hk-cmp__note { position: relative; padding-left: 1.7rem; color: var(--pcl-heading); font-size: 0.9688rem; font-weight: 600; line-height: 1.45; }
.pcl-hk-cmp__note::before { content: ""; position: absolute; left: 0; top: 0.12rem; width: 1.15rem; height: 1.15rem; }
.pcl-hk-cmp__note--us::before { background: #047857; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 90% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 90% no-repeat; }
.pcl-hk-cmp__note--them::before { background: #C2410C; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 80% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 80% no-repeat; }
html[data-theme="dark"] .pcl-hk-cmp__note--us::before { background: #6EE7B7; }
html[data-theme="dark"] .pcl-hk-cmp__note--them::before { background: #FDBA74; }
.pcl-hk-cmp__code { flex: 1; overflow: hidden; border-radius: 10px; background: #0B1020; }
.pcl-hk-cmp__code pre.wp-block-code { height: 100%; margin: 0 !important; padding: 1.1rem 1.2rem !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #C9D6FF !important; font-size: 0.8125rem !important; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.pcl-hk-cmp__code pre.wp-block-code code { padding: 0; border: 0; background: none !important; color: inherit !important; font-size: inherit !important; }
.pcl-hk-cmp__cell--them .pcl-hk-cmp__code pre.wp-block-code { color: #F3C9B2 !important; }
/* The page as visitors would see it with the builder switched off: an unstyled page full of codes. */
.pcl-hk-raw { padding: 1.4rem 1.5rem 1.6rem !important; background: #fff; font-family: "Times New Roman", Times, serif; }
.pcl-hk-raw > * { margin: 0 !important; }
.pcl-hk-raw .pcl-hk-raw__title { color: #000; font-size: 2rem; font-weight: 700; line-height: 1.2; }
.pcl-hk-raw .pcl-hk-raw__text { margin-top: 0.8rem !important; color: #111; font-size: 0.9375rem; line-height: 1.5; word-break: break-word; }
.pcl-hk-cmp__row + .pcl-hk-cmp__row { padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) !important; border-top: 1px dashed var(--pcl-border-strong); }

/* Option 6: notes around the editor screenshot with dotted curved arrows (from 1080px); numbered dots below that.
   Positions come from home_hooks.py (python3 home_hooks.py --css). */
.pcl-hk-anno { position: relative; max-width: 1160px; margin: 0 auto !important; }
.pcl-hk-anno > * { margin: 0 !important; }
.pcl-hk-anno__shot img { display: block; width: 100%; height: auto; border: 1px solid var(--pcl-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(10, 20, 60, 0.05), 0 28px 56px -30px rgba(10, 20, 60, 0.4); }
.pcl-hk-anno__arrows, .pcl-hk-anno__note { display: none; }
.pcl-hk-anno__legend { margin-top: clamp(1.5rem, 1.25rem + 1vw, 2.25rem) !important; }
@media (min-width: 1080px) {
	.pcl-hk-anno__pin, .pcl-hk-anno__legend { display: none !important; }
	.pcl-hk-anno__arrows { display: block; position: absolute; overflow: visible; color: var(--pcl-accent); pointer-events: none; }
	.pcl-hk-anno .pcl-hk-anno__note { display: block; position: absolute; color: var(--pcl-heading); font-family: var(--wp--preset--font-family--heading); font-size: clamp(0.875rem, 0.7rem + 0.3vw, 1rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; }
	.pcl-hk-anno__note--right { text-align: right; }
}
@media (min-width: 1080px) {
	.pcl-hk-anno { width: 68.571%; margin: calc(7.143% + 3rem) auto 1.905% !important; }
	.pcl-hk-anno__arrows { left: -22.917%; top: -17.281%; width: 145.833%; height: 121.889%; }
	.pcl-hk-anno__note--1 { left: -21.528%; top: 27.650%; width: 16.667%; }
	.pcl-hk-anno__note--2 { left: 26.389%; top: -15.899%; width: 29.167%; }
	.pcl-hk-anno__note--3 { left: 102.222%; top: 34.101%; width: 20.139%; }
	.pcl-hk-anno__note--4 { left: -21.528%; top: 79.493%; width: 19.444%; }
	.pcl-hk-anno__note--5 { left: -21.528%; top: -15.899%; width: 29.861%; }
	.pcl-hk-anno__note--6 { left: 77.778%; top: -15.899%; width: 23.611%; }
}
.pcl-hk-anno__pin--1 { left: 20.83%; top: 23.39%; }
.pcl-hk-anno__pin--2 { left: 31.39%; top: 17.51%; }
.pcl-hk-anno__pin--3 { left: 79.72%; top: 38.71%; }
.pcl-hk-anno__pin--4 { left: 13.89%; top: 85.48%; }
.pcl-hk-anno__pin--5 { left: 26.53%; top: 3.69%; }
.pcl-hk-anno__pin--6 { left: 91.81%; top: 3.69%; }

/* Option 6: Photos included — a wall of photos drifting in columns, one card on top */
.pcl-hk-lib { position: relative; display: grid !important; gap: 1.5rem !important; }
.pcl-hk-lib > * { margin: 0 !important; }
.pcl-hk-lib__wall { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px !important; height: 420px; overflow: hidden; border-radius: 18px;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.pcl-hk-lib__wall > * { margin: 0 !important; }
.pcl-hk-lib__col:nth-child(n+4) { display: none !important; }
.pcl-hk-lib__track { display: flex !important; flex-direction: column; gap: 12px; animation: pcl-hk-drift 90s linear infinite; }
.pcl-hk-lib__track > * { margin: 0 !important; }
.pcl-hk-lib__col:nth-child(even) .pcl-hk-lib__track { animation-direction: reverse; animation-duration: 110s; }
.pcl-hk-lib__col:nth-child(3n) .pcl-hk-lib__track { animation-duration: 100s; }
.pcl-hk-lib__track .wp-block-image { overflow: hidden; border-radius: 10px; background: var(--pcl-section); }
.pcl-hk-lib__track img { display: block; width: 100%; height: auto; }
@keyframes pcl-hk-drift { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 6px)); } }
.pcl-hk-lib:hover .pcl-hk-lib__track { animation-play-state: paused; }
.pcl-hk-lib__card { order: -1; text-align: center; }
.pcl-hk-lib__card > * { margin-left: auto !important; margin-right: auto !important; }
.pcl-hk-lib__card .pcl-eyebrow { margin-bottom: 0 !important; }
.pcl-hk-lib__lead a { color: var(--pcl-accent); font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 0.18em; }

@media (min-width: 640px) {
	.pcl-hk-lib__wall { grid-template-columns: repeat(4, minmax(0, 1fr)); height: 480px; }
	.pcl-hk-lib__col:nth-child(4) { display: block !important; }
}
@media (min-width: 1000px) {
	/* The card sits on the wall, which fills the section edge to edge. */
	.pcl-hk-lib { display: block !important; }
	.pcl-hk-lib__wall { grid-template-columns: repeat(6, minmax(0, 1fr)); height: 640px; -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(120% 90% at 50% 50%, #000 55%, transparent 100%); }
	.pcl-hk-lib__col:nth-child(n) { display: block !important; }
	.pcl-hk-lib__card { position: absolute; left: 50%; top: 50%; z-index: 2; width: min(620px, 56%); padding: 2.25rem 2.5rem !important; border: 1px solid color-mix(in srgb, var(--pcl-border) 70%, transparent); border-radius: 22px; background: color-mix(in srgb, var(--pcl-surface) 90%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 40px 80px -36px rgba(10, 20, 60, 0.55); transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) { .pcl-hk-lib__track { animation: none; } }

/* Option 7: "Same page. Two kinds of inside." as three cards that stack on scroll.
   Desktop screens at least 760px tall only; everywhere else the rows stay as they are.
   Native sticky positioning: the page scrolls at its normal speed. Each card stays fully in view for a short
   pause before the next slides over it, and the covered cards' numbers and titles keep showing above. */
.pcl-hk-deck > * { margin: 0 !important; }
.pcl-hk-deck__pause { display: none; }
/* "=" or "VS" between the two sides */
.pcl-hk-deck .pcl-hk-deck__vs { align-self: center; justify-self: center; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--pcl-border); border-radius: 50%; background: var(--pcl-surface); color: var(--pcl-heading); font-family: var(--wp--preset--font-family--heading); font-size: 1.0625rem; font-weight: 800; letter-spacing: 0.02em; box-shadow: 0 10px 24px -14px rgba(10, 20, 60, 0.4); }
.pcl-hk-deck .pcl-hk-deck__vs--same { color: #047857; font-size: 1.5rem; }
html[data-theme="dark"] .pcl-hk-deck .pcl-hk-deck__vs--same { color: #6EE7B7; }
@media (min-width: 900px) { .pcl-hk-deck .pcl-hk-cmp__cells { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
.pcl-hk-deck .pcl-hk-deck__card + .pcl-hk-deck__pause + .pcl-hk-deck__card { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) !important; padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) !important; border-top: 1px dashed var(--pcl-border-strong); }
@media (min-width: 1080px) and (min-height: 760px) {
	/* Each covered card keeps its number, title and subtitle in view, 14px clear of the next card (owner, 2026-10-31: "give proper
	   spacing so all title could be visible on scroll and slide goes one upon other"). The pictures and code inside the cards take
	   their height from the screen (--pcl-hk-deck-media), so the third card still fits whole below the two that peek out. */
	.pcl-hk-deck { --pcl-hk-deck-top: calc(var(--pcl-sticky-top) + 12px); --pcl-hk-deck-peek: 99px; --pcl-hk-deck-media: clamp(160px, calc(100vh - 560px), 315px); }
	/* The same space on all four sides of each card (owner, 2026-10-31: "give same top and bottom like space above text What visitors see"); 2.25rem where the screen is tall enough for three stacked cards. */
	@media (min-height: 860px) {
		.pcl-hk-deck { --pcl-hk-deck-peek: 111px; --pcl-hk-deck-media: clamp(160px, calc(100vh - 608px), 315px); }
		.pcl-hk-deck .pcl-hk-deck__card.pcl-hk-deck__card { padding: 2.25rem !important; }
		/* Cards 2 and 3 the same as card 1 (owner, 2026-10-31: "make sure other two boxes also need same top space"). */
		.pcl-hk-deck .pcl-hk-deck__card + .pcl-hk-deck__pause + .pcl-hk-deck__card.pcl-hk-deck__card { padding-top: 2.25rem !important; }
	}
	.pcl-hk-deck .pcl-hk-deck__card { position: sticky; top: var(--pcl-hk-deck-top); display: grid !important; gap: 0.85rem !important; padding: 1.5rem !important; border: 1px solid var(--pcl-border); border-radius: 18px; background: var(--pcl-surface); box-shadow: 0 -10px 30px -22px rgba(10, 20, 60, 0.35), 0 24px 48px -36px rgba(10, 20, 60, 0.35); }
	.pcl-hk-deck .pcl-hk-deck__card--2 { top: calc(var(--pcl-hk-deck-top) + var(--pcl-hk-deck-peek)); }
	.pcl-hk-deck .pcl-hk-deck__card--3 { top: calc(var(--pcl-hk-deck-top) + 2 * var(--pcl-hk-deck-peek)); }
	/* The pause after each card, the last one (the punchline) included. */
	.pcl-hk-deck__pause { display: block; height: 24vh; }
	.pcl-hk-deck__pause:last-child { height: 20vh; }
	.pcl-hk-deck .pcl-hk-deck__card + .pcl-hk-deck__pause + .pcl-hk-deck__card { margin-top: 0 !important; padding-top: 1.5rem !important; border-top: 1px solid var(--pcl-border); }
	.pcl-hk-deck .pcl-hk-cmp__head { min-height: 42px; }
	.pcl-hk-deck .pcl-hk-cmp__cell { gap: 0.55rem; padding: 0.7rem !important; background: var(--pcl-section); }
	.pcl-hk-deck .pcl-hk-cmp__code pre.wp-block-code { box-sizing: border-box; height: calc(var(--pcl-hk-deck-media) + 41px); overflow: hidden; font-size: 0.75rem !important; line-height: 1.5; padding: 0.9rem 1rem !important; }
	.pcl-hk-deck .pcl-hk-raw { box-sizing: border-box; height: var(--pcl-hk-deck-media); overflow: hidden; padding: 1rem 1.15rem 1.2rem !important; }
	.pcl-hk-deck .pcl-browser img { width: 100%; height: var(--pcl-hk-deck-media) !important; object-fit: cover; object-position: top; }
	.pcl-hk-deck .pcl-hk-raw .pcl-hk-raw__title { font-size: 1.6rem; }
	.pcl-hk-deck .pcl-hk-raw .pcl-hk-raw__text { font-size: 0.875rem; }
	.pcl-hk-deck .pcl-hk-cmp__cell .pcl-hk-cmp__note { font-size: 0.9063rem; }
}

/* Option 8: two rows moving sideways — every starter site page, and real sections from the demos.
   Each track holds its photos twice and moves by half its width, so the loop never shows a seam. */
.pcl-hk-mq-band { overflow: hidden; }
.pcl-hk-mq { display: grid !important; gap: 18px !important; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.pcl-hk-mq > * { margin: 0 !important; }
.pcl-hk-mq__row { overflow: hidden; }
.pcl-hk-mq__track { display: flex !important; gap: 18px; width: max-content; animation: pcl-hk-slide 140s linear infinite; }
.pcl-hk-mq__track > * { flex: none; margin: 0 !important; }
.pcl-hk-mq__row--sections .pcl-hk-mq__track { animation-duration: 170s; animation-direction: reverse; }
.pcl-hk-mq__track .wp-block-image { overflow: hidden; border: 1px solid var(--pcl-border); border-radius: 10px; background: #fff; box-shadow: 0 10px 24px -18px rgba(10, 20, 60, 0.35); }
.pcl-hk-mq__track img { display: block; width: auto !important; height: clamp(150px, 12vw + 80px, 240px) !important; }
.pcl-hk-mq__row--sections img { height: clamp(120px, 9vw + 70px, 190px) !important; }
@keyframes pcl-hk-slide { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } }
.pcl-hk-mq:hover .pcl-hk-mq__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.pcl-hk-mq__track { animation: none; }
	.pcl-hk-mq__row { overflow-x: auto; }
}

/* The FAQ page: questions grouped by topic */
.pcl-faq-page { max-width: 860px; margin-left: auto !important; margin-right: auto !important; }
.pcl-faq-page > * { margin: 0 !important; }
.pcl-faq-page > * + * { margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem) !important; }
.pcl-faq-topic > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.pcl-faq-topic .pcl-faq-topic__title { margin-bottom: 1rem !important; font-size: clamp(1.4rem, 1.22rem + 0.8vw, 1.75rem) !important; letter-spacing: -0.02em; }
.pcl-faq-page .pcl-faq p a, .pcl-faq-more a { color: var(--pcl-accent); text-decoration: underline; text-underline-offset: 0.18em; }
.pcl-faq-more { color: var(--pcl-muted); }

/* Option 8: an icon in front of each AI-section panel name — an AI sparkle, and the PageCore mark */

/* Option 8: Home's four questions shown open, in a grid, the link to all questions centred under them */

/* Option 8: the photo terms as a small line under the chips */

/* 23. The orange accent, site-wide (owner, 2026-10-31: "i like your new orange color"; first tried on option 9) ------
   #F26B2A for shapes and large text, #C2410C for small text. Orange only marks good things: the bad ones
   (crosses, the worried and stressed moods, the page-builder track) are red or grey, and gold is kept for Pro. */
:root { --pcl-orange: #F26B2A; --pcl-orange-text: #C2410C; --pcl-orange-glow: rgba(242, 107, 42, 0.2); --pcl-bad: #DC2626; --pcl-bad-strong: #B91C1C; --pcl-bad-soft: #FEF2F2; --pcl-bad-line: #FECACA; }
html[data-theme="dark"] { --pcl-orange: #FB8A4E; --pcl-orange-text: #FDA172; --pcl-orange-glow: rgba(251, 138, 78, 0.22); --pcl-bad: #F87171; --pcl-bad-strong: #FCA5A5; --pcl-bad-soft: rgba(248, 113, 113, 0.1); --pcl-bad-line: rgba(248, 113, 113, 0.35); }
/* Good: every gradient word runs blue into orange, like the PageCore icon (owner: "how about to use in all blue texts");
   a warmer glow, label dots, the editor arrows and numbers, badges, the Free total */
.pcl-grad { background-image: linear-gradient(90deg, #002FA7 0%, #1D4ED8 42%, var(--pcl-orange) 100%); }
html[data-theme="dark"] :is(.pcl-grad, .pcl-nf__code) { background-image: linear-gradient(90deg, #93B4FF 0%, #B9C9FF 40%, var(--pcl-orange) 100%); }
html[data-theme="dark"] .pcl-stats__num { background-image: linear-gradient(90deg, #93B4FF, #C7D7FF); }
.pcl-showcase::before { background: radial-gradient(45% 50% at 36% 50%, rgba(47, 107, 255, 0.16), transparent 70%), radial-gradient(40% 46% at 70% 56%, rgba(242, 107, 42, 0.15), transparent 70%); }
.pcl-eyebrow::before, html[data-theme="dark"] .pcl-eyebrow::before { background: var(--pcl-orange); box-shadow: 0 0 0 3px var(--pcl-orange-glow); }
.pcl-hk-anno__arrows { color: var(--pcl-orange); }
:is(.pcl-hk-pin, .pcl-hk-legend .pcl-hk-legend__num) { background: #C2410C; color: #fff; }
.pcl-hk-pin { box-shadow: 0 0 0 4px var(--pcl-orange-glow), 0 6px 14px -4px rgba(194, 65, 12, 0.6); }
:is(.pcl-badge, .pcl-badge--new) { background: #C2410C; color: #fff; }

/* Bad: red and grey (the older dark rules name html[data-theme], so the dark ones here do too) */
.pcl-hk-loss::before, html[data-theme="dark"] .pcl-hk-loss::before { background: var(--pcl-bad-soft); }
.pcl-hk-loss::after, html[data-theme="dark"] .pcl-hk-loss::after { background: var(--pcl-bad); }

.pcl-hk-track--other .pcl-hk-step__when, html[data-theme="dark"] .pcl-hk-track--other .pcl-hk-step__when { color: var(--pcl-muted); }
.pcl-hk-track--other .pcl-hk-step:nth-child(n+3), html[data-theme="dark"] .pcl-hk-track--other .pcl-hk-step:nth-child(n+3) { background: var(--pcl-bad-soft); }
.pcl-hk-track--other .pcl-hk-step:last-child, html[data-theme="dark"] .pcl-hk-track--other .pcl-hk-step:last-child { box-shadow: inset 0 0 0 1px var(--pcl-bad-line); }

.pcl-hk-track--other .pcl-hk-mood--stressed::before { background: var(--pcl-bad-strong); }

html[data-theme="dark"] .pcl-hk-track--other .pcl-hk-mood--stressed::before { background: var(--pcl-bad); }
:is(.pcl-hk-vs__row .pcl-hk-vs__them, .pcl-hk-cmp__note--them)::before, html[data-theme="dark"] :is(.pcl-hk-vs__row .pcl-hk-vs__them, .pcl-hk-cmp__note--them)::before { background: var(--pcl-bad); }
.pcl-hk-cmp__cell--them .pcl-hk-cmp__code pre.wp-block-code { color: #F2B8B8 !important; }

/* Option 9: the photo card's points as a plain ticked list, well apart from the sentence (owner: "remove button type shape") */
ul.pcl-hk-lib__ticks { display: grid; grid-template-columns: max-content; justify-content: center; gap: 0.7rem 2.25rem; margin-top: clamp(1.75rem, 1.5rem + 1vw, 2.5rem) !important; padding: 0; list-style: none; text-align: left; }
@media (min-width: 720px) { ul.pcl-hk-lib__ticks { grid-template-columns: repeat(2, max-content); } }
ul.pcl-hk-lib__ticks li { display: flex; align-items: center; gap: 0.55rem; margin: 0; color: var(--pcl-heading); font-size: 0.9375rem; font-weight: 600; line-height: 1.4; }
ul.pcl-hk-lib__ticks li::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; background: var(--pcl-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m421-389-98-98q-9-9-22-9t-23 10q-9 9-9 22t9 22l122 123q9 9 21 9t21-9l239-239q10-10 10-23t-10-23q-10-9-23.5-8.5T635-603L421-389Zm59 309q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m421-389-98-98q-9-9-22-9t-23 10q-9 9-9 22t9 22l122 123q9 9 21 9t21-9l239-239q10-10 10-23t-10-23q-10-9-23.5-8.5T635-603L421-389Zm59 309q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Z'/%3E%3C/svg%3E") center / contain no-repeat; }
ul.pcl-hk-lib__ticks li:last-child { color: var(--pcl-orange-text); }
ul.pcl-hk-lib__ticks li:last-child::before { background: var(--pcl-orange); }

/* Option 9: speed. Four tiles: two PageSpeed score rings in its own green, two plain facts in the brand colours */
.pcl-hk-speed { max-width: 1080px; margin-left: auto !important; margin-right: auto !important; }
.pcl-hk-speed > * { margin: 0 !important; }
.pcl-hk-gauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 900px) { .pcl-hk-gauges { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
.pcl-hk-gauge { display: grid; justify-items: center; align-content: start; gap: 1rem; margin: 0; padding: 1.75rem 1rem 1.5rem; border: 1px solid var(--pcl-border); border-radius: 14px; background: var(--pcl-surface); text-align: center; }
.pcl-hk-gauge__ring, .pcl-hk-gauge__fact { position: relative; width: clamp(96px, 80px + 3vw, 124px); aspect-ratio: 1; }
.pcl-hk-gauge__ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.pcl-hk-gauge__track { fill: rgba(12, 206, 107, 0.08); stroke: rgba(12, 206, 107, 0.16); stroke-width: 8; }
.pcl-hk-gauge__arc { fill: none; stroke: #0CCE6B; stroke-width: 8; stroke-linecap: round; }
.pcl-hk-gauge__fact { border-radius: 50%; background: color-mix(in srgb, var(--pcl-orange) 9%, var(--pcl-surface)); box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--pcl-orange) 16%, transparent); }
.pcl-hk-gauge__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.1em; color: #087F3F; font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.9rem, 1.5rem + 1vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.pcl-hk-gauge__fact .pcl-hk-gauge__num { color: var(--pcl-orange-text); }
.pcl-hk-gauge__num small { font-size: 0.45em; letter-spacing: 0; }
.pcl-hk-gauge figcaption { display: grid; gap: 0.3rem; }
.pcl-hk-gauge figcaption strong { color: var(--pcl-heading); font-family: var(--wp--preset--font-family--heading); font-size: 1.0625rem; }
.pcl-hk-gauge figcaption span { color: var(--pcl-muted); font-size: 0.875rem; line-height: 1.45; }
html[data-theme="dark"] .pcl-hk-gauge__ring .pcl-hk-gauge__num { color: #4ADE80; }
@media (max-width: 559px) {
	.pcl-hk-gauge { padding: 1.4rem 0.75rem 1.25rem; }
	.pcl-hk-gauge figcaption span { font-size: 0.8125rem; }
}
.pcl-hk-speed__note { max-width: 74ch; margin-left: auto !important; margin-right: auto !important; }
.pcl-hk-speed__note a { color: var(--pcl-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; }

/* Option 9: the hero's two buttons, the same width when they stack on a phone */
@media (max-width: 479px) {
	.pcl-home-hero .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.pcl-home-hero .wp-block-buttons .wp-block-button__link { width: 100%; justify-content: center; }
}

/* Option 9: year three, short (owner, 2026-10-31): Month 1 and Year 3 only, the two sides next to each other,
   each photo a small circle beside its label */
@media (min-width: 900px) { .pcl-hk-tracks.pcl-hk-tracks--short { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pcl-hk-tracks--short .pcl-hk-track { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; }
@media (max-width: 479px) { .pcl-hk-tracks--short .pcl-hk-track { grid-template-columns: minmax(0, 1fr) !important; } }
.pcl-hk-tracks--short .pcl-hk-track__head--photo { grid-column: 1 / -1 !important; flex-direction: row; align-items: center; gap: 0.85rem; min-height: 0 !important; overflow: visible; border-radius: 0; isolation: auto; }
.pcl-hk-tracks--short .pcl-hk-track__head--photo::after { display: none; }
.pcl-hk-tracks--short .pcl-hk-track__head--photo .pcl-hk-track__photo { position: relative; inset: auto; z-index: auto; flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 50%; }
.pcl-hk-tracks--short .pcl-hk-track__photo img { transform: scale(1.6) !important; }
.pcl-hk-tracks--short .pcl-hk-track--other .pcl-hk-track__photo img { transform-origin: 46% 26%; }
.pcl-hk-tracks--short .pcl-hk-track--pagecore .pcl-hk-track__photo img { transform-origin: 54% 30%; }
.pcl-hk-tracks--short .pcl-hk-track__head--photo .pcl-hk-track__label { margin: 0 !important; padding: 0; color: var(--pcl-heading); text-shadow: none; }
/* "2 years later" between the two cards: an arrow with the words under it; on phones a down arrow between the stacked cards */
.pcl-hk-tracks--short .pcl-hk-step__gap { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; max-width: 4.6rem; margin: 0 !important; color: var(--pcl-muted); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.3; text-align: center; text-transform: uppercase; }
.pcl-hk-tracks--short .pcl-hk-step__gap::before { content: ""; flex: none; width: 1.15rem; height: 1.15rem; background: currentColor; transform: rotate(90deg); -webkit-mask: url("../img/arrow-up.svg") center / contain no-repeat; mask: url("../img/arrow-up.svg") center / contain no-repeat; }
.pcl-hk-tracks--short .pcl-hk-track--pagecore .pcl-hk-step__gap { color: var(--pcl-accent); }
@media (max-width: 479px) {
	.pcl-hk-tracks--short .pcl-hk-step__gap { flex-direction: row; justify-content: center; max-width: none; }
	.pcl-hk-tracks--short .pcl-hk-step__gap::before { transform: rotate(180deg); }
}

/* 24. Help strip above the footer, What's new, choosing a starter site (2026-10-31) ----------------------- */
.pcl-help-strip { display: grid !important; gap: 0.75rem !important; }
.pcl-help-strip > * { margin: 0 !important; }
@media (min-width: 760px) { .pcl-help-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem !important; } }
.pcl-site-footer .pcl-help-strip__item a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; column-gap: 0.85rem; row-gap: 0.15rem; box-sizing: border-box; height: 100%; padding: 1rem 1.15rem; border: 1px solid var(--pcl-border); border-radius: 12px; background: var(--pcl-surface); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.pcl-site-footer .pcl-help-strip__item a:hover { border-color: color-mix(in srgb, var(--pcl-accent) 45%, var(--pcl-border)); box-shadow: 0 12px 26px -20px rgba(10, 20, 60, 0.4); text-decoration: none; }
.pcl-help-strip__item a::before { content: ""; grid-row: 1 / 3; width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; background: var(--pcl-accent); -webkit-mask: var(--pcl-help-icon) center / contain no-repeat; mask: var(--pcl-help-icon) center / contain no-repeat; }
.pcl-help-strip__item--docs { --pcl-help-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 4h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); }
.pcl-help-strip__item--forum { --pcl-help-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E"); }
.pcl-help-strip__item--contact { --pcl-help-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }
.pcl-help-strip__item strong { color: var(--pcl-heading); font-weight: 650; line-height: 1.4; }
.pcl-help-strip__item span { color: var(--pcl-muted); font-size: 0.875rem; line-height: 1.45; }

.pcl-releases { max-width: 880px; margin-left: auto !important; margin-right: auto !important; }
.pcl-release { display: grid !important; gap: 1rem 2.5rem !important; padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) !important; border: 1px solid var(--pcl-border); border-radius: 14px; background: var(--pcl-surface); }
.pcl-release > * { margin: 0 !important; }
@media (min-width: 760px) { .pcl-release { grid-template-columns: 9rem minmax(0, 1fr); } }
.pcl-release__meta > *, .pcl-release__body > * { margin: 0 !important; }
.pcl-release__body { display: grid !important; gap: 1.1rem !important; }
.pcl-release .pcl-release__version { display: inline-block; padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--pcl-soft); color: var(--pcl-accent); font-size: 0.8125rem; font-weight: 700; }
.pcl-release .pcl-release__date { margin-top: 0.5rem !important; color: var(--pcl-muted); font-size: 0.875rem; }
.pcl-release .pcl-release__title { font-size: clamp(1.4rem, 1.22rem + 0.8vw, 1.75rem) !important; letter-spacing: -0.02em; }
ul.pcl-release__list { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
ul.pcl-release__list li { position: relative; margin: 0; padding-left: 1.5rem; line-height: 1.6; }
ul.pcl-release__list li::before { content: ""; position: absolute; left: 0.1rem; top: 0.6em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--pcl-accent); }
ul.pcl-release__list strong { color: var(--pcl-heading); }

.pcl-choose__grid { display: grid !important; gap: 1rem !important; max-width: 1080px; margin-left: auto !important; margin-right: auto !important; }
.pcl-choose__grid > * { margin: 0 !important; }
@media (min-width: 760px) { .pcl-choose__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem !important; } }
.pcl-choose__item { display: grid !important; align-content: start; gap: 0.6rem !important; padding: 1.5rem !important; border: 1px solid var(--pcl-border); border-radius: 14px; background: var(--pcl-surface); }
.pcl-choose__item > * { margin: 0 !important; }
.pcl-choose__item .pcl-choose__num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: 0.25rem !important; border-radius: 50%; background: var(--pcl-soft); color: var(--pcl-accent); font-weight: 800; }
.pcl-choose__item .pcl-choose__head { font-size: 1.1875rem !important; }
.pcl-st-faq { display: grid !important; gap: 0.75rem !important; width: 100%; max-width: 820px; margin-left: auto !important; margin-right: auto !important; }
.pcl-st-faq > * { margin: 0 !important; }

/* The closing card's "How to install" link, close under the note line (owner, 2026-10-31) */
.pcl-cta-split__text .pcl-cta-split__install { margin-top: 0.35rem !important; }
.pcl-cta-split__install a { color: var(--pcl-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; }

/* 25. Back to top (owner, 2026-10-31: "go to top arrow at bottom right … use circle and then arrow icon and make it progressive"):
   a glass circle, its orange ring filling as the page is read; it shows once the page has been scrolled. */
.pcl-to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--pcl-surface) 75%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 6px 18px -8px rgba(10, 20, 60, 0.35); color: var(--pcl-heading); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(0.75rem); transition: opacity 0.2s linear, transform 0.2s linear, visibility 0.2s; }
.pcl-to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.pcl-to-top svg { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); }
.pcl-to-top path { fill: none; stroke: var(--pcl-orange); stroke-width: 6; transition: stroke-dashoffset 10ms linear; }
.pcl-to-top::after { content: ""; width: 1.05rem; height: 1.05rem; background: currentColor; -webkit-mask: url("../img/arrow-up.svg") center / contain no-repeat; mask: url("../img/arrow-up.svg") center / contain no-repeat; }
.pcl-to-top:hover { color: var(--pcl-orange-text); }
.pcl-to-top:focus-visible { outline: 2px solid var(--pcl-accent); outline-offset: 3px; }
@media (max-width: 599px) { .pcl-to-top { right: 1rem; bottom: 1rem; } }
@media (prefers-reduced-motion: reduce) { .pcl-to-top, .pcl-to-top path { transition: none; } }

/* 26. Home option 10 (owner, 2026-11-07: PageCore 1.0.1, "add some animations on page load … it should look highly premium",
   then "dont advertise pro version early … i dont see any psychology trick which has fear or greed"). Everything here is scoped to the page wrapper .pcl-o10, so no other page changes.
   Motion rules: entrances 0.5–0.9 s with ease-out, only transform/opacity (the separate translate and scale properties, so the
   hero's tilted side frames keep their own transform), each reveal plays once, nothing above the fold waits for a script,
   and visitors who ask for less motion see everything still. site.js part 6 adds .pcl-js-motion and the reveal classes. */
.pcl-o10 { --pcl10-out: cubic-bezier(0, 0, 0.2, 1); --pcl10-soft: cubic-bezier(0.16, 1, 0.3, 1); }

/* a. Not the selling point: the Free tag on the six starter cards */
.pcl-o10 .pcl-st-card__tag { display: none; }

/* b. Hero: plays in on load (pure CSS, so it never waits for a script) */
@media (prefers-reduced-motion: no-preference) {
	/* The headline slides up without fading in (2026-11-09, owner: "ok do 1"): one that starts invisible is painted late,
	   and Google's "largest paint" on phones waited for its fade (Lighthouse LCP 3.3 s). */
	.pcl-o10 .pcl-home-hero h1 { animation: pcl10-slide 0.7s var(--pcl10-out) both; }
	.pcl-o10 .pcl-hero__center > .pcl-lead { animation: pcl10-rise 0.6s 0.12s var(--pcl10-out) both; }
	.pcl-o10 .pcl-hero__center > .wp-block-buttons { animation: pcl10-rise 0.6s 0.22s var(--pcl10-out) both; }
	.pcl-o10 .pcl-showcase > .pcl-browser--main { animation: pcl10-lift 0.9s 0.3s var(--pcl10-soft) both; }
	.pcl-o10 .pcl-showcase > .pcl-browser--side-left { animation: pcl10-out-left 0.9s 0.55s var(--pcl10-soft) both; }
	.pcl-o10 .pcl-showcase > .pcl-browser--side-right { animation: pcl10-out-right 0.9s 0.55s var(--pcl10-soft) both; }
	.pcl-o10 .pcl-chip--b { animation: pcl10-pop 0.5s 0.9s var(--pcl10-soft) both, pcl10-float 6s 1.5s ease-in-out infinite alternate; }
	.pcl-o10 .pcl-chip--a { animation: pcl10-pop 0.5s 1.05s var(--pcl10-soft) both, pcl10-float 7s 1.7s ease-in-out infinite alternate-reverse; }
	.pcl-o10 .pcl-showcase::before { animation: pcl10-glow 16s ease-in-out infinite alternate; }
	.pcl-o10 .pcl-home-hero .pcl-stats { animation: pcl10-fade 0.6s 0.5s var(--pcl10-out) both; }
}
@keyframes pcl10-rise { from { opacity: 0; translate: 0 18px; } }
@keyframes pcl10-slide { from { translate: 0 18px; } }
@keyframes pcl10-lift { from { opacity: 0; translate: 0 48px; scale: 0.97; } }
@keyframes pcl10-out-left { from { opacity: 0; translate: 56px 18px; } }
@keyframes pcl10-out-right { from { opacity: 0; translate: -56px 18px; } }
@keyframes pcl10-pop { from { opacity: 0; translate: 0 10px; scale: 0.92; } }
@keyframes pcl10-float { to { translate: 0 -7px; } }
@keyframes pcl10-glow { to { translate: 2% -3%; scale: 1.08; } }
@keyframes pcl10-fade { from { opacity: 0; } }
.pcl-o10 .pcl-stats__num { font-variant-numeric: tabular-nums; }

/* c. Sections rise in once as they are reached (site.js marks only what starts below the screen) */
@media (prefers-reduced-motion: no-preference) {
	.pcl-o10 .pcl-rv { opacity: 0; translate: 0 26px; }
	.pcl-o10 .pcl-rv.is-in { opacity: 1; translate: 0 0; transition: opacity 0.6s var(--pcl10-out) var(--pcl-rv-delay, 0ms), translate 0.8s var(--pcl10-soft) var(--pcl-rv-delay, 0ms); }
	/* The speed rings draw themselves */
	.pcl-o10 .pcl-hk-gauge .pcl-hk-gauge__arc { transition: stroke-dasharray 1.4s var(--pcl10-soft) calc(var(--pcl-rv-delay, 0ms) + 0.25s); }
	.pcl-o10 .pcl-hk-gauge.pcl-rv:not(.is-in) .pcl-hk-gauge__arc { stroke-dasharray: 0 100; }
}
/* Cards answer the pointer: a small lift (mouse and trackpad only) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.pcl-o10 :is(.pcl-hk-persona, .pcl-hk-gauge, .pcl-o10-cost__way) { transition: translate 0.2s var(--pcl10-out), box-shadow 0.2s var(--pcl10-out); }
	.pcl-o10 :is(.pcl-hk-persona, .pcl-hk-gauge, .pcl-o10-cost__way):hover { translate: 0 -3px; box-shadow: 0 18px 36px -24px rgba(10, 20, 60, 0.35); }
}

/* d. Shared bits: the "New" pill, ticked lists */
.pcl-o10-new { display: inline-flex !important; width: auto !important; margin: 0 !important; padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--pcl-orange-text); color: #fff; font-size: 0.75rem !important; font-weight: 700; letter-spacing: 0.06em; line-height: 1.5; text-transform: uppercase; }
ul.pcl-o10-ticks { display: grid; gap: 0.6rem; margin: 0 !important; padding: 0; list-style: none; }
ul.pcl-o10-ticks li { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0; color: var(--pcl-heading); font-size: 0.9375rem; font-weight: 600; line-height: 1.45; }
ul.pcl-o10-ticks li::before { content: ""; flex: none; width: 1.2rem; height: 1.2rem; margin-top: 0.1rem; background: var(--pcl-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m421-389-98-98q-9-9-22-9t-23 10q-9 9-9 22t9 22l122 123q9 9 21 9t21-9l239-239q10-10 10-23t-10-23q-10-9-23.5-8.5T635-603L421-389Zm59 309q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m421-389-98-98q-9-9-22-9t-23 10q-9 9-9 22t9 22l122 123q9 9 21 9t21-9l239-239q10-10 10-23t-10-23q-10-9-23.5-8.5T635-603L421-389Zm59 309q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* e. Change design, under the Design Library's moving rows: the words beside a page whose hero swaps between three designs */
.pcl-o10-change { display: grid; gap: 2.5rem; align-items: center; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) !important; }
.pcl-o10-change > *, .pcl-o10-change__copy > * { margin: 0 !important; }
.pcl-o10-change__copy { display: grid; justify-items: start; gap: 1rem; max-width: 30rem; }
@media (min-width: 1200px) { .pcl-o10-change { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); } }
.pcl-o10-change__title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem) !important; line-height: 1.15; letter-spacing: -0.02em; }
.pcl-o10-change__text { color: var(--pcl-text); font-size: 1.0625rem; line-height: 1.6; }
.pcl-o10-change__text strong { color: var(--pcl-heading); }
.pcl-o10-swap { position: relative; padding-bottom: 0; }
.pcl-o10-swap__frame { overflow: hidden; border: 1px solid var(--pcl-border); border-radius: 12px; background: var(--pcl-surface); box-shadow: 0 1px 2px rgba(10, 20, 60, 0.04), 0 30px 60px -36px rgba(10, 20, 60, 0.45); }
.pcl-o10-swap__bar { display: flex; align-items: center; gap: 6px; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--pcl-border); }
.pcl-o10-swap__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--pcl-border-strong); }
.pcl-o10-swap__bar span { margin-left: 0.6rem; color: var(--pcl-muted); font-size: 0.75rem; }
.pcl-o10-swap__stage { position: relative; aspect-ratio: 1120 / 480; margin: 1.75rem 0.9rem 0.9rem; outline: 2px solid #3858E9; outline-offset: 0; }
.pcl-o10-swap__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcl-o10-swap__shot--2, .pcl-o10-swap__shot--3 { opacity: 0; }
.pcl-o10-swap__pick { position: absolute; top: -2px; left: -2px; padding: 0.1rem 0.5rem; border-radius: 3px 3px 0 0; background: #3858E9; color: #fff; font-size: 0.6875rem; font-weight: 600; line-height: 1.5; transform: translateY(-100%); }
.pcl-o10-swap__rest { display: grid; gap: 0.55rem; padding: 0.35rem 0.9rem 1.1rem; }
.pcl-o10-swap__rest i { height: 0.6rem; border-radius: 4px; background: var(--pcl-section); }
.pcl-o10-swap__rest i:nth-child(1) { width: 38%; height: 0.9rem; }
.pcl-o10-swap__rest i:nth-child(2) { width: 82%; }
.pcl-o10-swap__rest i:nth-child(3) { width: 64%; }
.pcl-o10-swap__panel { position: relative; margin: -1.5rem 0.9rem 0 auto; width: min(16.5rem, 80%); padding: 1rem; border: 1px solid var(--pcl-border); border-radius: 12px; background: var(--pcl-surface); box-shadow: 0 24px 48px -24px rgba(10, 20, 60, 0.4); }
@media (min-width: 600px) { .pcl-o10-swap__panel { position: absolute; right: 0.9rem; bottom: -2rem; margin: 0; } .pcl-o10-swap { padding-bottom: 2rem; } }
@media (min-width: 1200px) { .pcl-o10-swap__panel { right: -1.25rem; } }
.pcl-o10-swap__panel p { margin: 0 !important; }
.pcl-o10-swap__title { color: var(--pcl-heading); font-size: 0.875rem; font-weight: 700; }
.pcl-o10-swap__meta { margin-top: 0.15rem !important; color: var(--pcl-muted); font-size: 0.75rem; }
.pcl-o10-swap__thumbs { display: grid; gap: 0.5rem; margin: 0.75rem 0; }
.pcl-o10-swap__thumb { position: relative; display: block; overflow: hidden; border-radius: 6px; aspect-ratio: 1120 / 480; box-shadow: inset 0 0 0 1px var(--pcl-border); }
.pcl-o10-swap__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pcl-o10-swap__thumb::after { content: ""; position: absolute; inset: 0; border-radius: 6px; box-shadow: inset 0 0 0 2px #3858E9; opacity: 0; }
.pcl-o10-swap__thumb--1::after { opacity: 1; }
.pcl-o10-swap__toast { display: flex; gap: 0.4rem; padding: 0.45rem 0.65rem; border-radius: 6px; background: #1E1E1E; color: #fff; font-size: 0.75rem; opacity: 0; }
.pcl-o10-swap__toast u { color: #9DB6FF; text-underline-offset: 0.15em; }
/* The swap plays while it is on screen (site.js adds .is-playing): 9 s, one design every 3 s, then back to the first */
@media (prefers-reduced-motion: no-preference) {
	/* (::after can't go inside :is(), so the thumbnails' rings have their own selectors) */
	.pcl-js-motion .pcl-o10-swap :is(.pcl-o10-swap__shot--2, .pcl-o10-swap__shot--3, .pcl-o10-swap__toast), .pcl-js-motion .pcl-o10-swap .pcl-o10-swap__thumb::after { animation-duration: 9s; animation-iteration-count: infinite; animation-timing-function: linear; animation-play-state: paused; }
	.pcl-js-motion .pcl-o10-swap.is-playing :is(.pcl-o10-swap__shot--2, .pcl-o10-swap__shot--3, .pcl-o10-swap__toast), .pcl-js-motion .pcl-o10-swap.is-playing .pcl-o10-swap__thumb::after { animation-play-state: running; }
	.pcl-js-motion .pcl-o10-swap__shot--2 { animation-name: pcl10-shot-2; }
	.pcl-js-motion .pcl-o10-swap__shot--3 { animation-name: pcl10-shot-3; }
	.pcl-js-motion .pcl-o10-swap__thumb--1::after { animation-name: pcl10-thumb-1; }
	.pcl-js-motion .pcl-o10-swap__thumb--2::after { animation-name: pcl10-thumb-2; }
	.pcl-js-motion .pcl-o10-swap__thumb--3::after { animation-name: pcl10-thumb-3; }
	.pcl-js-motion .pcl-o10-swap__toast { animation-name: pcl10-toast; }
}
@keyframes pcl10-shot-2 { 0%, 33% { opacity: 0; } 38%, 72% { opacity: 1; } 72.5%, 100% { opacity: 0; } }
@keyframes pcl10-shot-3 { 0%, 66% { opacity: 0; } 71%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pcl10-thumb-1 { 0%, 31% { opacity: 1; } 34%, 96% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes pcl10-thumb-2 { 0%, 31% { opacity: 0; } 34%, 64% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes pcl10-thumb-3 { 0%, 64% { opacity: 0; } 67%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes pcl10-toast { 0%, 34% { opacity: 0; translate: 0 6px; } 38%, 56% { opacity: 1; translate: 0 0; } 60%, 67% { opacity: 0; } 71%, 89% { opacity: 1; } 93%, 100% { opacity: 0; } }
html[data-theme="dark"] .pcl-o10-swap__rest i { background: var(--pcl-border); }

/* f. The receipt "What PageCore saves you" ends like a real till receipt (owner, 2026-11-07: "do something great for this text
   at bottom"): the slow way's 6+ weeks struck out beside Minutes, a "Weeks saved" stamp, two promises, a barcode and a torn
   bottom edge. When it comes on screen the line strikes through, Minutes pops and the stamp lands (site.js part 6). */
.pcl-o10 .pcl-hk-receipt { padding-bottom: 2.2rem !important; box-shadow: none; -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from 135deg at top, #000 90deg, #0000 0) bottom / 18px 9px repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from 135deg at top, #000 90deg, #0000 0) bottom / 18px 9px repeat-x; }
.pcl-o10 .wp-block-column:has(> .pcl-hk-receipt) { filter: drop-shadow(0 24px 28px rgba(10, 20, 60, 0.16)) drop-shadow(0 1px 1px rgba(10, 20, 60, 0.08)); }
html[data-theme="dark"] .pcl-o10 .wp-block-column:has(> .pcl-hk-receipt) { filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.45)); }
.pcl-hk-receipt p.pcl-o10-total { position: relative; display: grid; gap: 0.4rem; margin-top: 1.1rem !important; padding: 1rem 1.1rem 1.1rem; border-radius: 12px; background: color-mix(in srgb, var(--pcl-orange) 8%, var(--pcl-surface)); }
.pcl-o10-total__label { color: var(--pcl-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; }
.pcl-o10-total__nums { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.pcl-o10-total s { position: relative; color: var(--pcl-muted); font-family: var(--wp--preset--font-family--heading); font-size: 1.25rem; font-weight: 700; line-height: 1.2; text-decoration: none; }
.pcl-o10-total s::after { content: ""; position: absolute; left: -4px; right: -4px; top: 52%; height: 3px; border-radius: 2px; background: var(--pcl-bad); rotate: -4deg; transform-origin: left center; }
.pcl-o10-total strong { font-family: var(--wp--preset--font-family--heading); font-size: clamp(2.25rem, 2rem + 1vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; background-image: linear-gradient(90deg, #C2410C, #F26B2A); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="dark"] .pcl-o10-total strong { background-image: linear-gradient(90deg, #FB8A4E, #FDBA74); }
.pcl-o10-stamp { position: absolute; right: 1rem; bottom: 1rem; display: block; padding: 0.4rem 0.65rem; border: 2.5px solid currentColor; border-radius: 8px; outline: 1.5px solid currentColor; outline-offset: 2px; color: var(--pcl-orange-text); font-family: var(--wp--preset--font-family--heading); font-size: 0.875rem; font-weight: 800; letter-spacing: 0.14em; line-height: 1.1; text-align: center; text-transform: uppercase; opacity: 0.88; rotate: -12deg; mix-blend-mode: multiply; }
html[data-theme="dark"] .pcl-o10-stamp { mix-blend-mode: normal; }
@media (max-width: 479px) { .pcl-o10-stamp { right: 0.75rem; padding: 0.3rem 0.5rem; font-size: 0.75rem; } }
.pcl-hk-receipt ul.pcl-o10-promise { display: grid; gap: 0.65rem; margin: 1.1rem 0 0 !important; padding: 1.1rem 0 0; border-top: 2px dashed var(--pcl-border-strong); list-style: none; }
ul.pcl-o10-promise li { position: relative; margin: 0; padding-left: 1.75rem; color: var(--pcl-text); font-size: 0.875rem; line-height: 1.45; }
ul.pcl-o10-promise li::before { content: ""; position: absolute; left: 0; top: 0.12rem; width: 1.1rem; height: 1.1rem; background: var(--pcl-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7.5a4 4 0 0 1 7.6-1.7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7.5a4 4 0 0 1 7.6-1.7'/%3E%3C/svg%3E") center / contain no-repeat; }
ul.pcl-o10-promise li:nth-child(2)::before { background: var(--pcl-orange); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3Cpath d='M18.5 15.5l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3Cpath d='M18.5 15.5l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7z'/%3E%3C/svg%3E"); }
ul.pcl-o10-promise strong { color: var(--pcl-heading); }
ul.pcl-o10-promise a { color: var(--pcl-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; }
.pcl-hk-receipt p.pcl-o10-barcode { display: grid; justify-items: center; gap: 0.45rem; margin-top: 1.4rem !important; color: var(--pcl-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.6875rem; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; }
p.pcl-o10-barcode::before { content: ""; width: min(230px, 85%); height: 36px; background: repeating-linear-gradient(90deg, var(--pcl-heading) 0 2px, transparent 2px 4px, var(--pcl-heading) 4px 5px, transparent 5px 7px, var(--pcl-heading) 7px 10px, transparent 10px 11px, var(--pcl-heading) 11px 12px, transparent 12px 15px, var(--pcl-heading) 15px 16px, transparent 16px 19px); opacity: 0.82; }
@media (prefers-reduced-motion: no-preference) {
	.pcl-js-motion .pcl-o10-total:not(.is-playing) .pcl-o10-stamp { opacity: 0; }
	.pcl-js-motion .pcl-o10-total:not(.is-playing) s::after { scale: 0 1; }
	.pcl-js-motion .pcl-o10-total.is-playing s::after { animation: pcl10-strike 0.45s 0.15s var(--pcl10-out) both; }
	.pcl-js-motion .pcl-o10-total.is-playing strong { animation: pcl10-pop 0.5s 0.55s var(--pcl10-soft) both; }
	.pcl-js-motion .pcl-o10-total.is-playing .pcl-o10-stamp { animation: pcl10-stamp 0.45s 1.05s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
}
@keyframes pcl10-strike { from { scale: 0 1; } }
@keyframes pcl10-stamp { 0% { opacity: 0; scale: 2.2; } 70% { opacity: 0.95; } 100% { opacity: 0.88; scale: 1; } }

/* g. Fear: the 50 ms first impression closing the loss section */
p.pcl-o10-stat { display: grid; justify-items: center; gap: 0.35rem; max-width: 34rem; margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0 !important; padding: 1.4rem 1.5rem; border: 1px solid var(--pcl-bad-line); border-radius: 16px; background: var(--pcl-bad-soft); color: var(--pcl-heading); font-size: 1.0625rem; font-weight: 600; line-height: 1.45; }
p.pcl-o10-stat strong { color: var(--pcl-bad); font-family: var(--wp--preset--font-family--heading); font-size: clamp(2.4rem, 2rem + 1.6vw, 3.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
p.pcl-o10-stat em { color: var(--pcl-muted); font-size: 0.8125rem; font-style: normal; font-weight: 500; }

/* h. What does waiting really cost you? The visitor's own number times the weeks each way takes (site.js part 7) */
.pcl-o10-cost-wrap { max-width: 1040px; margin-left: auto !important; margin-right: auto !important; }
.pcl-o10-cost-wrap > * { margin: 0 !important; }
.pcl-o10-cost { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 0.75rem + 2vw, 2.25rem); border: 1px solid var(--pcl-border); border-radius: 20px; background: var(--pcl-surface); box-shadow: 0 1px 2px rgba(10, 20, 60, 0.04), 0 30px 60px -40px rgba(10, 20, 60, 0.4); }
.pcl-o10-cost > * { margin: 0 !important; }
.pcl-o10-cost__ask { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; }
.pcl-o10-cost__ask label { color: var(--pcl-heading); font-size: 1.0625rem; font-weight: 700; }
.pcl-o10-cost__out { color: var(--pcl-accent); font-family: var(--wp--preset--font-family--heading); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.pcl-o10-cost__range { --pcl-fill: 8%; width: 100%; height: 2.75rem; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pcl-o10-cost__range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--pcl-orange) var(--pcl-fill), var(--pcl-border) var(--pcl-fill)); }
.pcl-o10-cost__range::-moz-range-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--pcl-orange) var(--pcl-fill), var(--pcl-border) var(--pcl-fill)); }
.pcl-o10-cost__range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -10px; border: 3px solid var(--pcl-orange); border-radius: 50%; background: #fff; box-shadow: 0 6px 14px -6px rgba(194, 65, 12, 0.7); -webkit-appearance: none; appearance: none; }
.pcl-o10-cost__range::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid var(--pcl-orange); border-radius: 50%; background: #fff; box-shadow: 0 6px 14px -6px rgba(194, 65, 12, 0.7); }
.pcl-o10-cost__range:focus-visible { outline: 2px solid var(--pcl-accent); outline-offset: 4px; border-radius: 4px; }
.pcl-o10-cost__ways { display: grid; gap: 0.9rem; }
@media (min-width: 768px) { .pcl-o10-cost__ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pcl-o10-cost__way { display: grid; align-content: start; gap: 0.3rem; padding: 1.25rem; border: 1px solid var(--pcl-bad-line); border-radius: 14px; background: var(--pcl-bad-soft); }
.pcl-o10-cost__way p { margin: 0 !important; }
.pcl-o10-cost__name { color: var(--pcl-heading); font-family: var(--wp--preset--font-family--heading); font-size: 1.0625rem; font-weight: 700; }
.pcl-o10-cost__time { color: var(--pcl-muted); font-size: 0.875rem; }
.pcl-o10-cost__lost { margin-top: 0.6rem !important; color: var(--pcl-bad); font-family: var(--wp--preset--font-family--heading); font-size: 1.125rem; font-weight: 700; }
.pcl-o10-cost__num { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.pcl-o10-cost__note { color: var(--pcl-text); font-size: 0.875rem; line-height: 1.45; }
.pcl-o10-cost__way--us { border-color: color-mix(in srgb, var(--pcl-accent) 35%, transparent); background: var(--pcl-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pcl-accent) 20%, transparent); }
.pcl-o10-cost__way--us .pcl-o10-cost__lost { color: var(--pcl-accent); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.pcl-o10-cost__fine { color: var(--pcl-muted); font-size: 0.8125rem; text-align: center; }

@media (max-width: 479px) { .pcl-hk-receipt p.pcl-o10-barcode { font-size: 0.625rem; letter-spacing: 0.06em; } }

/* 27. Industry tabs above a short starter site list (block siteworks/starter-grid with "tabs"; Home option 10, 2026-11-07,
   inspired by startertemplates.com): one pill-shaped bar, the chosen tab filled; it scrolls sideways on phones.
   starters/tabs.js shows the tabs (hidden without JavaScript) and the cards of the chosen industry. */
.pcl-st-tabs { position: relative; display: flex; gap: 0.25rem; width: max-content; max-width: 100%; margin: 0 auto clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); padding: 0.3rem; overflow-x: auto; border: 1px solid var(--pcl-border); border-radius: 999px; background: var(--pcl-surface); box-shadow: 0 1px 2px rgba(10, 20, 60, 0.04), 0 14px 30px -22px rgba(10, 20, 60, 0.35); scrollbar-width: none; overscroll-behavior-x: contain; }
.pcl-st-tabs::-webkit-scrollbar { display: none; }
.pcl-st-tabs[hidden] { display: none; }
.pcl-st-tab { flex: none; min-height: 44px; margin: 0; padding: 0.55rem 1.15rem; border: 0; border-radius: 999px; background: transparent; color: var(--pcl-text); font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color 0.15s, color 0.15s, box-shadow 0.15s; }
.pcl-st-tab:hover { background: var(--pcl-section); color: var(--pcl-heading); }
.pcl-st-tab[aria-selected="true"] { background: var(--wp--preset--gradient--pcl-button, #002FA7); color: #fff; box-shadow: 0 6px 16px -8px rgba(0, 47, 167, 0.6); }
.pcl-st-tab:focus-visible { outline: 2px solid var(--pcl-accent); outline-offset: 2px; }
@media (max-width: 599px) { .pcl-st-tab { padding-inline: 0.95rem; font-size: 0.875rem; } }
@media (prefers-reduced-motion: no-preference) {
	.pcl-st-grid > .is-entering { animation: pcl-st-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--pcl-st-i, 0) * 60ms) both; }
}
@keyframes pcl-st-in { from { opacity: 0; translate: 0 14px; } }

/* 28. Blog (2026-11-08; owner: "share option in each post … classic, list and grid view option … current standard,
   ai agents friendly, google friendly"). Blocks from the Siteworks blog module; templates from wp-build/blog.py.
   The list at /blog/ (and each topic): topics, the Classic / List / Grid switch (html[data-blog-view] = "list" or
   "classic", none = grid; set before drawing), the cards. A post: head, picture, "In this post", reading type, "In
   short" box, checklist, share links, and a sidebar (starter site; "In this post" and the sign-up staying in view),
   more posts. ------------------------ */

/* The list: topics and the view switch */
.pcl-hero__center .pcl-post-crumb { font-size: var(--wp--preset--font-size--small); }
.pcl-blog-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--pcl-border); }
.pcl-blog-topics { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pcl-blog-topics a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border: 1px solid var(--pcl-border); border-radius: 999px; background: var(--pcl-surface); color: var(--pcl-heading); font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: border-color 0.15s, background-color 0.15s; }
.pcl-blog-topics a:hover { border-color: var(--pcl-border-strong); }
.pcl-blog-topics a[aria-current="page"] { border-color: var(--pcl-accent); background: var(--pcl-soft); color: var(--pcl-ink); }
/* Search the posts (2026-11-08, owner: "Search on the blog page … add it"): beside the view switch; full width on phones. */
.pcl-blog-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.pcl-blog-search { position: relative; display: flex; align-items: center; margin: 0; }
.pcl-blog-search input[type="search"] { box-sizing: border-box; width: 15rem; min-height: 2.75rem; margin: 0; padding: 0 2.9rem 0 1.1rem; border: 1px solid var(--pcl-border); border-radius: 999px; background: var(--pcl-surface); color: var(--pcl-heading); font: inherit; font-size: 0.9375rem; -webkit-appearance: none; appearance: none; }
.pcl-blog-search input[type="search"]::placeholder { color: var(--pcl-muted); opacity: 1; }
.pcl-blog-search input[type="search"]:hover { border-color: var(--pcl-border-strong); }
.pcl-blog-search input[type="search"]:focus { border-color: var(--pcl-accent); outline: 2px solid var(--pcl-accent); outline-offset: 1px; }
.pcl-blog-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.pcl-blog-search__btn { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--pcl-heading); cursor: pointer; }
.pcl-blog-search__btn:hover { color: var(--pcl-accent); }
.pcl-blog-search__btn:focus-visible { outline: 2px solid var(--pcl-accent); outline-offset: -2px; }
@media (max-width: 639px) {
	.pcl-blog-tools { width: 100%; }
	.pcl-blog-search { flex: 1 1 12rem; }
	.pcl-blog-search input[type="search"] { width: 100%; }
}
.pcl-blog-views { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--pcl-border); border-radius: 10px; background: var(--pcl-section); }
.pcl-blog-views[hidden] { display: none; }
.pcl-blog-views__btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; min-height: 2.25rem; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--pcl-muted); font: 500 0.875rem/1 var(--wp--preset--font-family--body); cursor: pointer; transition: background-color 0.15s, color 0.15s, box-shadow 0.15s; }
.pcl-blog-views__btn:hover { color: var(--pcl-heading); }
.pcl-blog-views__btn[aria-pressed="true"] { background: var(--pcl-surface); color: var(--pcl-heading); box-shadow: 0 1px 2px rgba(10, 11, 30, 0.08), 0 0 0 1px var(--pcl-border); }
.pcl-blog-views__btn:focus-visible, .pcl-blog-topics a:focus-visible, .pcl-share__btn:focus-visible { outline: 2px solid var(--pcl-accent); outline-offset: 2px; }
@media (max-width: 599px) {
	.pcl-blog-topics a { min-height: 2.75rem; }
	.pcl-blog-views__btn { width: 2.75rem; min-height: 2.75rem; }
}

/* The cards: grid (the default) */
/* More room between rows (2026-11-08, owner: "give more space in row"): 56px on phones up to about 88px. */
.pcl-blog-list { display: grid !important; gap: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) clamp(1.25rem, 1rem + 1vw, 2.5rem); margin: 0 !important; padding: 0; list-style: none; }
.pcl-blog-list > li { margin: 0 !important; }
@media (min-width: 640px) { .pcl-blog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pcl-blog-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pcl-post-card { position: relative; display: flex !important; flex-direction: column; gap: 1.1rem; height: 100%; }
.pcl-post-card > *, .pcl-post-card__body > * { margin: 0 !important; }
.pcl-post-card__img { overflow: hidden; border: 1px solid var(--pcl-border); border-radius: 14px; background: var(--pcl-section); }
.pcl-post-card__img img { display: block; width: 100%; height: auto; transition: scale 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.pcl-post-card:hover .pcl-post-card__img img { scale: 1.035; }
.pcl-post-card__body { display: flex !important; flex: 1; flex-direction: column; gap: 0.6rem; }
.pcl-post-card__topic, .pcl-post-card__topic a { position: relative; z-index: 1; color: var(--pcl-accent); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; text-decoration: none; }
.pcl-post-card__topic a:hover { text-decoration: underline; }
.pcl-landing .pcl-post-card__title { font-size: clamp(1.2rem, 1.1rem + 0.35vw, 1.375rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.pcl-post-card__title a { color: var(--pcl-heading); text-decoration: none; }
.pcl-post-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; } /* the whole card is the link */
.pcl-post-card:hover .pcl-post-card__title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.pcl-post-card__title a:focus-visible { outline: none; }
.pcl-post-card:has(.pcl-post-card__title a:focus-visible) { outline: 2px solid var(--pcl-accent); outline-offset: 6px; border-radius: 16px; }
.pcl-post-card__excerpt p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--pcl-text); line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.pcl-post-meta--card { display: flex; flex-wrap: wrap; gap: 0.45rem; color: var(--pcl-muted); font-size: 0.875rem; line-height: 1.4; }
.pcl-post-card__body > .pcl-post-meta--card { margin-top: auto !important; padding-top: 0.2rem; }

/* List: picture beside the words, one post a row */
html[data-blog-view="list"] .pcl-blog > .pcl-blog-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
html[data-blog-view="list"] .pcl-blog > .pcl-blog-list > li { padding: clamp(1.25rem, 1rem + 1vw, 2rem) 0; border-bottom: 1px solid var(--pcl-border); }
html[data-blog-view="list"] .pcl-blog > .pcl-blog-list > li:first-child { padding-top: 0; }
html[data-blog-view="list"] .pcl-blog .pcl-post-card { display: grid !important; grid-template-columns: clamp(7rem, 32%, 21rem) minmax(0, 1fr); align-items: start; gap: clamp(1rem, 0.5rem + 2vw, 2.5rem); }
html[data-blog-view="list"] .pcl-blog .pcl-post-card__body > .pcl-post-meta--card { margin-top: 0.2rem !important; }
@media (max-width: 599px) {
	html[data-blog-view="list"] .pcl-blog .pcl-post-card { grid-template-columns: 6.5rem minmax(0, 1fr); }
	html[data-blog-view="list"] .pcl-blog .pcl-post-card__img { border-radius: 10px; }
	html[data-blog-view="list"] .pcl-blog .pcl-post-card__img img { aspect-ratio: 1 !important; }
	html[data-blog-view="list"] .pcl-blog .pcl-post-card__excerpt { display: none; }
	html[data-blog-view="list"] .pcl-landing .pcl-blog .pcl-post-card__title { font-size: 1.0625rem; }
}

/* Classic: one post a row, large picture, the whole summary */
html[data-blog-view="classic"] .pcl-blog > .pcl-blog-list { grid-template-columns: minmax(0, 1fr); max-width: 780px; margin-inline: auto !important; gap: clamp(3rem, 2.5rem + 2vw, 4.5rem); }
html[data-blog-view="classic"] .pcl-blog .pcl-post-card { gap: 1.5rem; }
/* The whole picture (3:2, like the pictures themselves): 16:9 cut off their headlines (owner, 2026-11-08). */
html[data-blog-view="classic"] .pcl-blog .pcl-post-card__img img { aspect-ratio: 3 / 2 !important; }
html[data-blog-view="classic"] .pcl-landing .pcl-blog .pcl-post-card__title { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.125rem); letter-spacing: -0.025em; line-height: 1.2; }
html[data-blog-view="classic"] .pcl-blog .pcl-post-card__excerpt p { display: block; font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); -webkit-line-clamp: unset; }
html[data-blog-view="classic"] .pcl-blog .pcl-post-card__body > .pcl-post-meta--card { margin-top: 0.2rem !important; }

/* Page numbers, empty list */
.pcl-blog > .pcl-blog-pages { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem) !important; gap: 0.5rem; font-size: 0.9375rem; }
.pcl-blog-pages a, .pcl-blog-pages .page-numbers { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.9rem; border: 1px solid var(--pcl-border); border-radius: 999px; color: var(--pcl-heading); text-decoration: none; }
.pcl-blog-pages a:hover { border-color: var(--pcl-border-strong); }
.pcl-blog-pages .page-numbers.current { border-color: var(--pcl-heading); background: var(--pcl-heading); color: var(--wp--preset--color--pc-background); }
.pcl-blog-empty { color: var(--pcl-text); text-align: center; }

/* A post: the head */
.pcl-landing .pcl-post-frame { box-sizing: border-box; width: 100%; max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; }
/* From 1100px the post uses the site's standard wide width, so its edges line up with the header and every other page
   (2026-11-08, owner: "why blog detail page has less width than standard pages"; was 1060px). */
@media (min-width: 1100px) { .pcl-landing .pcl-post-frame { max-width: var(--wp--style--global--wide-size, 1280px) !important; } }
.pcl-landing > .pcl-blog-hero { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem) !important; }
/* A post (2026-11-09): the breadcrumb on its own line, then the title at the top of the text column with the sidebar
   starting at the same height (like wpastra.com's posts; the full-width title band left empty space beside the title). */
.pcl-post-crumbs > * { margin: 0 !important; }
/* The soft top of every page on a post too (2026-11-09, owner: "can we add soft gradient etc. at top?"): the light hero's
   colours and faint grid, drawn at a fixed height (the post section is very tall), fading out before the text. */
.pcl-landing > .pcl-post-body { position: relative; isolation: isolate; }
.pcl-post-body::before, .pcl-post-body::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 640px; z-index: -1; pointer-events: none; }
.pcl-post-body::before { background: radial-gradient(40% 60% at 92% 0%, rgba(47, 107, 255, 0.14), transparent 70%), radial-gradient(35% 55% at 0% 8%, rgba(255, 181, 71, 0.14), transparent 70%); }
.pcl-post-body::after { background-image: linear-gradient(var(--pcl-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--pcl-grid-line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 65% at 50% 0%, #000 20%, transparent 75%); }
.pcl-post-crumbs .pcl-post-crumb { font-size: var(--wp--preset--font-size--small); }
.pcl-post-body > .pcl-post-crumbs + .pcl-post-layout { margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem) !important; }
.pcl-post-main > .pcl-post-head { margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 2.75rem) !important; }
.pcl-post-head > * { margin: 0 !important; }
.pcl-post-head > * + * { margin-top: 1.25rem !important; }
.pcl-landing .pcl-post-title { max-width: 22ch; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.25rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; }
.pcl-post-dek p { max-width: 62ch; margin: 0; color: var(--pcl-text); font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem); line-height: 1.55; }
.pcl-post-head > .pcl-post-meta--post { margin-top: 1.5rem !important; }
.pcl-post-meta--post { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem; color: var(--pcl-muted); font-size: 0.9375rem; line-height: 1.5; }
.pcl-post-meta--post .pcl-post-meta__when { display: inline-flex; gap: 0.5rem; color: inherit; font-size: inherit; white-space: nowrap; }
/* Phones: the name on its own line, then date and reading time (no dot left hanging at a line end). */
@media (max-width: 479px) { .pcl-post-meta--post .pcl-post-meta__sep { display: none; } .pcl-post-meta--post .pcl-post-meta__by { flex-basis: 100%; } }
.pcl-post-meta__by { color: var(--pcl-heading); font-size: 0.9375rem; font-weight: 600; }
.pcl-post-meta__by a { color: inherit; text-decoration: none; }
.pcl-post-meta__by a:hover { text-decoration: underline; }
.pcl-post-meta__when { display: flex; flex-wrap: wrap; gap: 0.45rem; color: var(--pcl-muted); font-size: 0.875rem; }

/* Share links */
.pcl-share__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.pcl-share__list li { position: relative; margin: 0; }
.pcl-share__list li[hidden] { display: none; }
.pcl-share__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; box-sizing: border-box; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--pcl-border); border-radius: 999px; background: var(--pcl-surface); color: var(--pcl-heading); cursor: pointer; text-decoration: none; transition: color 0.15s, border-color 0.15s, translate 0.15s; }
.pcl-share__btn:hover { border-color: currentColor; translate: 0 -1px; }
.pcl-share__btn--native { width: auto; padding: 0 1.1rem; border-color: var(--pcl-accent); color: var(--pcl-accent); font: 600 0.9375rem/1 var(--wp--preset--font-family--body); }
.pcl-share__btn--facebook:hover { color: #1877F2; }
.pcl-share__btn--linkedin:hover { color: #0A66C2; }
.pcl-share__btn--whatsapp:hover { color: #128C7E; }
.pcl-share__btn--pinterest:hover { color: #E60023; }
.pcl-share__btn--reddit:hover { color: #FF4500; }
.pcl-share__btn--bluesky:hover { color: #0085FF; }
.pcl-share__btn--telegram:hover { color: #1C8ADB; }
.pcl-share__btn--email:hover, .pcl-share__btn--copy:hover { color: var(--pcl-accent); }
html[data-theme="dark"] .pcl-share__btn--facebook:hover, html[data-theme="dark"] .pcl-share__btn--linkedin:hover, html[data-theme="dark"] .pcl-share__btn--whatsapp:hover, html[data-theme="dark"] .pcl-share__btn--telegram:hover { color: var(--pcl-accent); }
.pcl-share__btn--copy svg + svg, .pcl-share__btn--copy.is-copied svg:first-child { display: none; }
.pcl-share__btn--copy.is-copied svg + svg { display: block; }
.pcl-share__btn--copy.is-copied { border-color: var(--pcl-accent); color: var(--pcl-accent); }
.pcl-share__status { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 2; padding: 0.3rem 0.6rem; border-radius: 6px; background: var(--pcl-heading); color: var(--wp--preset--color--pc-background); font-size: 0.8125rem; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; translate: -50% 0; transition: opacity 0.15s; }
.pcl-share__status:not(:empty) { opacity: 1; }
.pcl-share__label { margin: 0 0 0.9rem; color: var(--pcl-heading); font-size: 1.0625rem; font-weight: 700; }

/* A post: the text (picture first) with a sidebar beside it (wide screens) or below it (2026-11-08) */
.pcl-landing > .pcl-post-body { padding-right: var(--wp--style--root--padding-right, 1.5rem) !important; padding-left: var(--wp--style--root--padding-left, 1.5rem) !important; } /* the page's side space, as on every section */
.pcl-post-body > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.pcl-post-main > .pcl-post-cover { margin: 0 0 clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) !important; }
.pcl-post-cover { overflow: hidden; border: 1px solid var(--pcl-border); border-radius: 18px; background: var(--pcl-section); }
.pcl-post-cover img { display: block; width: 100%; height: auto; }
.pcl-post-layout > * { margin: 0 !important; }
.pcl-post-side { display: grid !important; gap: 1.25rem; align-content: start; margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem) !important; }
.pcl-post-side > *, .pcl-post-side__stay > * { margin: 0 !important; }
.pcl-post-side__stay { display: grid !important; gap: 1.25rem; }
@media (min-width: 640px) and (max-width: 1099px) {
	.pcl-post-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pcl-post-side__stay { grid-column: 1 / -1; } /* tablets: starter site | topics, then the sign-up across */
}
@media (min-width: 1100px) {
	.pcl-post-layout { display: grid !important; grid-template-columns: minmax(0, 740px) 1px minmax(300px, 380px); justify-content: space-between; column-gap: clamp(1.5rem, 0.5rem + 1.75vw, 2.5rem); } /* text easy to read, the sidebar on the right edge */
	/* A thin line between the text and the sidebar, in the middle of the space between them, the full length of the post
	   (owner, 2026-11-08: "add divider line between content and sidebar, so that will be less blank space"). */
	.pcl-post-layout::before { content: ""; grid-column: 2; grid-row: 1; background: var(--pcl-border); }
	.pcl-post-layout > .pcl-post-main { grid-column: 1; grid-row: 1; }
	.pcl-post-layout > .pcl-post-side { grid-column: 3; grid-row: 1; }
	.pcl-post-side { margin-top: 0 !important; }
	/* The starter site and the sign-up stay in view while reading (the sidebar runs the full height of the text). */
	.pcl-post-side__stay { position: sticky; top: calc(var(--pcl-sticky-top) + 1.25rem); }
}
.pcl-post-main > .pcl-post-toc { margin-bottom: 2rem !important; }
.pcl-post-toc__box { border: 1px solid var(--pcl-border); border-radius: 12px; background: var(--pcl-surface); }
.pcl-post-toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; padding: 0 1.1rem; color: var(--pcl-heading); font-size: 0.9375rem; font-weight: 600; cursor: pointer; list-style: none; }
.pcl-post-toc summary::-webkit-details-marker { display: none; }
.pcl-post-toc summary::after { content: ""; width: 0.55rem; height: 0.55rem; margin-top: -0.25rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease, margin 0.2s ease; }
.pcl-post-toc__box[open] summary::after { margin-top: 0.25rem; transform: rotate(-135deg); }
.pcl-post-toc ol { display: grid; gap: 0.1rem; margin: 0; padding: 0 1.1rem 1rem; list-style: none; }
.pcl-post-toc li { margin: 0; }
.pcl-post-toc li a { display: block; padding: 0.4rem 0.5rem 0.4rem 0.8rem; border-left: 2px solid var(--pcl-border); color: var(--pcl-text); font-size: 0.9375rem; line-height: 1.4; text-decoration: none; transition: color 0.15s, border-color 0.15s; }
.pcl-post-toc li a:hover { border-left-color: var(--pcl-accent); color: var(--pcl-heading); }
/* "In this post" beside the text on wide screens (2026-11-08, owner: "add the sticky contents list on desktop"): it stays in
   view with the sign-up and marks the section being read (blog.js part 5); the closed box above the text is for smaller
   screens. A long list scrolls inside the card, so the card and the sign-up always fit the window. */
.pcl-post-toc--side { display: none; }
@media (min-width: 1100px) {
	.pcl-post-main > .pcl-post-toc { display: none; }
	.pcl-post-toc--side { display: block; }
	.pcl-post-toc--side .pcl-side-card__title { margin: 0 0 0.75rem !important; }
	.pcl-post-toc--side ol { max-height: max(8rem, calc(100vh - var(--pcl-sticky-top) - 25rem)); overflow-y: auto; overscroll-behavior: contain; padding: 0; scrollbar-width: thin; }
	/* No side line here; the section being read gets a small dot on its first line (owner, 2026-11-09: fewer lines in the sidebar). */
	.pcl-post-toc--side li a { position: relative; padding-left: 1rem; border-left: 0; }
	.pcl-post-toc--side li a[aria-current] { color: var(--pcl-heading); font-weight: 600; }
	.pcl-post-toc--side li a[aria-current]::before { content: ""; position: absolute; left: 0; top: calc(0.4rem + 0.7em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--pcl-accent); }
}
/* Click to enlarge (2026-11-08, owner): WordPress's own "Expand on click" for the pictures inside posts. A thin edge and a
   soft shadow, so a white chart does not melt into the white backdrop. */
.wp-lightbox-overlay .lightbox-image-container img { border-radius: 12px; box-shadow: 0 0 0 1px var(--pcl-border), 0 30px 60px -30px rgba(10, 11, 30, 0.35); }
/* Section links (2026-11-08): a heading's words link to the heading itself; a # shows on hover and focus (faint on touch
   screens); blog.js part 4 also copies the address. */
.pcl-post-content .pcl-h-link, .pcl-post-content .pcl-h-link:hover { color: inherit; text-decoration: none; }
.pcl-post-content .pcl-h-link::after { content: "#" / ""; margin-left: 0.3em; color: var(--pcl-accent); font-weight: 600; opacity: 0; transition: opacity 0.15s; }
.pcl-post-content :is(h2, h3):hover .pcl-h-link::after, .pcl-post-content .pcl-h-link:focus-visible::after { opacity: 1; }
.pcl-post-content .pcl-h-link:focus-visible { outline: 2px solid var(--pcl-accent); outline-offset: 3px; border-radius: 4px; }
@media (hover: none) { .pcl-post-content .pcl-h-link::after { opacity: 0.35; } }
.pcl-h-copied:not(:empty) { display: inline-block; margin-left: 0.6rem; padding: 0.25rem 0.6rem; border-radius: 6px; background: var(--pcl-heading); color: var(--wp--preset--color--pc-background); font-family: var(--wp--preset--font-family--body); font-size: 0.8125rem; font-weight: 600; letter-spacing: normal; line-height: 1.3; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .pcl-post-content .pcl-h-link::after { transition: none; } }

/* The sidebar's cards */
.pcl-side-card { box-sizing: border-box; padding: 1.25rem !important; border: 1px solid var(--pcl-border); border-radius: 14px; background: var(--pcl-surface); }
.pcl-side-card > * { margin: 0 !important; }
.pcl-side-card > * + * { margin-top: 0.75rem !important; }
.pcl-side-card__title { display: flex; align-items: center; gap: 0.45rem; color: var(--pcl-heading); font-size: 0.8125rem !important; font-weight: 700; letter-spacing: 0.07em; line-height: 1.4; text-transform: uppercase; }
.pcl-side-card__text { color: var(--pcl-text); font-size: 0.9375rem; line-height: 1.55; }
.pcl-side-topics ul, .pcl-side-tags ul { margin: 0; padding: 0; list-style: none; }
.pcl-side-topics li { margin: 0; }
.pcl-side-topics li + li { border-top: 1px solid var(--pcl-border); }
.pcl-side-topics a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; color: var(--pcl-heading); font-size: 0.9375rem; text-decoration: none; }
.pcl-side-topics a:hover, .pcl-side-topics a[aria-current] { color: var(--pcl-accent); }
.pcl-side-topics a span { min-width: 1.75rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--pcl-section); color: var(--pcl-muted); font-size: 0.8125rem; text-align: center; }
.pcl-side-tags ul { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pcl-side-tags li { margin: 0; }
.pcl-side-tags a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.8rem; border-radius: 999px; background: var(--pcl-section); color: var(--pcl-heading); font-size: 0.875rem; text-decoration: none; }
.pcl-side-tags a:hover { background: var(--pcl-soft); color: var(--pcl-ink); }
.pcl-side-starter__shot { display: block; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--pcl-border); border-radius: 10px; background: var(--pcl-section); }
.pcl-side-starter__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: scale 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.pcl-side-starter__shot:hover .pcl-side-starter__img { scale: 1.03; }
.pcl-side-starter__name { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.pcl-side-starter__name a { color: var(--pcl-heading); text-decoration: none; }
.pcl-side-starter__name a:hover { text-decoration: underline; }
.pcl-side-card > .pcl-side-starter__kind { margin-top: 0.15rem !important; color: var(--pcl-muted); font-size: 0.875rem; }
.pcl-side-starter__actions { display: flex; gap: 0.5rem; }
.pcl-side-starter__btn { display: inline-flex; flex: 1 1 auto; align-items: center; white-space: nowrap; justify-content: center; gap: 0.3rem; min-height: 2.5rem; padding: 0 0.75rem; border: 1px solid var(--pcl-border-strong); border-radius: 8px; color: var(--pcl-heading); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.pcl-side-starter__btn--main { border-color: var(--pcl-accent); background: var(--pcl-accent); color: #fff; }
html[data-theme="dark"] .pcl-side-starter__btn--main { color: #0B1020; }
.pcl-side-starter__btn:hover { border-color: var(--pcl-accent); }
.pcl-side-starter__btn--main:hover { filter: brightness(1.1); }
.pcl-side-starter__all { display: inline-block; color: var(--pcl-accent); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.pcl-side-starter__all::after { content: " →"; }
.pcl-side-starter__all:hover { text-decoration: underline; }
.pcl-side-updates .sw-subscribe__row { flex-direction: column; align-items: stretch; }
.pcl-side-updates .sw-subscribe__row > :not(.screen-reader-text) { flex: none; width: 100%; }
.pcl-side-updates .sw-form__note { font-size: 0.8125rem; }
@media (prefers-reduced-motion: reduce) { .pcl-post-toc summary::after, .pcl-post-card__img img, .pcl-share__btn, .pcl-side-starter__img { transition: none; } }

/* A post: the text */
.pcl-post-content { color: var(--pcl-text); font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); line-height: 1.75; }
.pcl-post-content > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.pcl-post-content > * + * { margin-top: 1.35em !important; }
.pcl-post-content > h2 { margin-top: 2.5em !important; scroll-margin-top: calc(var(--pcl-sticky-top) + 1.5rem); }
.pcl-post-content > h3 { margin-top: 1.9em !important; }
.pcl-post-content > :is(h2, h3) + * { margin-top: 0.7em !important; }
.pcl-landing .pcl-post-content h2 { color: var(--pcl-heading); font-size: clamp(1.6rem, 1.35rem + 1vw, 2.125rem); font-weight: 750; letter-spacing: -0.025em; line-height: 1.2; }
.pcl-landing .pcl-post-content h3 { color: var(--pcl-heading); font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; }
.pcl-post-content strong { color: var(--pcl-heading); font-weight: 600; }
/* Links in the words only (the starter site cards keep their own look). */
.pcl-post-content > :is(p, ul, ol) a, .pcl-post-content :is(.pcl-post-summary, .pcl-faq, figcaption) a { color: var(--pcl-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.pcl-post-content > :is(p, ul, ol) a:hover, .pcl-post-content :is(.pcl-post-summary, .pcl-faq, figcaption) a:hover { text-decoration-thickness: 2px; }
.pcl-post-content :is(ul, ol) { padding-left: 1.35em; }
.pcl-post-content li + li { margin-top: 0.5em; }
.pcl-post-content li::marker { color: var(--pcl-accent); }
.pcl-post-content .pcl-post-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--pcl-border); border-radius: 12px; }
.pcl-post-content .pcl-post-shot figcaption { margin: 0.75rem 0 0; color: var(--pcl-muted); font-size: 0.875rem; line-height: 1.5; text-align: left; }
.pcl-post-content > .pcl-post-shot { margin-top: 1.75em !important; }
.pcl-post-summary { padding: 1.35rem 1.6rem !important; border: 1px solid var(--pcl-border); border-left: 4px solid var(--pcl-accent); border-radius: 12px; background: var(--pcl-section); font-size: 1rem; line-height: 1.65; }
.pcl-post-summary > * { margin: 0 !important; }
.pcl-post-summary > * + * { margin-top: 0.6rem !important; }
.pcl-post-summary__title { color: var(--pcl-heading); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }
.pcl-post-summary li + li { margin-top: 0.35em; }
.pcl-post-content .pcl-post-checklist { padding-left: 0; list-style: none; }
.pcl-post-checklist li { position: relative; padding-left: 2.1rem; }
.pcl-post-checklist li::before { content: ""; position: absolute; top: 0.2em; left: 0; width: 1.35rem; height: 1.35rem; background: var(--pcl-orange); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/%3E%3Cpath d='M9 12l2 2l4 -4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/%3E%3Cpath d='M9 12l2 2l4 -4'/%3E%3C/svg%3E") center / contain no-repeat; }
.pcl-post-content > .pcl-faq { margin-top: 0.75rem !important; }
.pcl-post-content > h2 + .pcl-faq { margin-top: 1.1em !important; }
.pcl-post-content > .pcl-faq + :not(.pcl-faq) { margin-top: 2em !important; }
.pcl-post-content > .pcl-st-short { margin-top: 1.6em !important; }
/* A prompt to copy (posts about AI tools) and the list of sources at the end of a post (2026-11-08) */
.pcl-post-prompt { padding: 1.1rem 1.35rem !important; border: 1px solid var(--pcl-border); border-left: 4px solid var(--pcl-orange); border-radius: 12px; background: var(--pcl-surface); }
.pcl-post-prompt > * { margin: 0 !important; }
.pcl-post-prompt > * + * { margin-top: 0.45rem !important; }
.pcl-post-prompt__label { color: var(--pcl-orange-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pcl-post-prompt__text { color: var(--pcl-heading); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9375rem; line-height: 1.65; overflow-wrap: anywhere; }
.pcl-post-content > h3 + .pcl-post-prompt, .pcl-post-content > p + .pcl-post-prompt { margin-top: 1em !important; }
.pcl-post-content .pcl-post-sources { font-size: 0.9375rem; }
/* A table of numbers in a post (the speed test); scrolls sideways inside itself on small phones */
.pcl-post-content .pcl-post-table { overflow-x: auto; }
.pcl-post-content .pcl-post-table table { table-layout: auto; width: 100%; min-width: 600px; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
.pcl-post-content .pcl-post-table th, .pcl-post-content .pcl-post-table td { padding: 0.6rem 0.75rem; border: 0; border-bottom: 1px solid var(--pcl-border); text-align: left; }
.pcl-post-content .pcl-post-table th { border-bottom: 2px solid var(--pcl-border-strong); color: var(--pcl-heading); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; vertical-align: bottom; }
.pcl-post-content .pcl-post-table td:not(:first-child), .pcl-post-content .pcl-post-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.pcl-post-content .pcl-post-table td:not(:first-child) { white-space: nowrap; }
.pcl-post-content .pcl-post-table :is(th, td) { word-break: normal; }
.pcl-post-content .pcl-post-table td:first-child { white-space: nowrap; }
.pcl-post-content .pcl-post-table a { color: var(--pcl-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } /* names never break mid-word; the table scrolls inside its box on small phones */
.pcl-post-content .pcl-post-table thead { border-bottom: 0; }
.pcl-post-content .pcl-post-table tbody tr:hover { background: var(--pcl-section); }
.pcl-post-content code { padding: 0.1em 0.35em; border: 1px solid var(--pcl-border); border-radius: 4px; background: var(--pcl-section); font-size: 0.875em; }
@media (min-width: 640px) { .pcl-post-content .pcl-st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* A post: share, author, more posts */
.pcl-post-main > * { margin: 0 !important; }
.pcl-post-main > .pcl-share--end { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem) !important; padding-top: 2rem; border-top: 1px solid var(--pcl-border); }
/* End of the post (2026-11-08, owner: "move author at bottom, like it was before … remove topic card, add tags under post after
   share before author"): share, then the tags (as plain chips, labelled like "Share this post"), then the author. */
.pcl-post-main > .pcl-side-tags { margin-top: 2rem !important; padding: 0 !important; border: 0; border-radius: 0; background: none; }
.pcl-post-main > .pcl-side-tags .pcl-side-card__title { margin: 0 0 0.9rem !important; color: var(--pcl-heading); font-size: 1.0625rem !important; font-weight: 700; letter-spacing: normal; text-transform: none; }
.pcl-post-main > .pcl-author-box { margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem) !important; }
.pcl-author-box { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; border: 1px solid var(--pcl-border); border-radius: 14px; background: var(--pcl-section); }
.pcl-author-box__photo { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.pcl-author-box__text p { margin: 0; }
.pcl-author-box__eyebrow { color: var(--pcl-muted); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.pcl-author-box__name { margin-top: 0.1rem !important; font-size: 1.0625rem; font-weight: 700; }
.pcl-author-box__name a { color: var(--pcl-heading); text-decoration: none; }
.pcl-author-box__name a:hover { text-decoration: underline; }
.pcl-author-box__bio { margin-top: 0.45rem !important; color: var(--pcl-text); font-size: 0.9375rem; line-height: 1.55; }
.pcl-author-box__more { margin-top: 0.5rem !important; font-size: 0.875rem; font-weight: 600; }
.pcl-author-box__more a { color: var(--pcl-accent); text-decoration: none; }
.pcl-author-box__more a::after { content: " →"; }
.pcl-author-box__more a:hover { text-decoration: underline; }
/* More room before "Keep reading" (owner, 2026-11-08: "increase space between post content and Keep reading"): 64px on
   phones up to 96px, so the related posts read as their own section. */
.pcl-post-more .pcl-related { margin-top: clamp(4rem, 3rem + 3.3vw, 6rem) !important; }
.pcl-landing .pcl-related__title { margin: 0 0 2rem; font-size: clamp(1.6rem, 1.35rem + 1vw, 2.125rem); font-weight: 750; letter-spacing: -0.025em; line-height: 1.2; }
.pcl-landing .pcl-related .pcl-post-card__title { font-size: 1.2rem; }