/* CHIP — Base + components
 * Global resets, layout primitives, buttons, header/footer, accessibility.
 * Section-specific styles are appended per Home pattern (P4).
 */

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
	margin: 0;
	background: var(--chip-sand-bg);
	color: var(--chip-sea-800);
	font-family: var(--chip-font-body);
	font-size: var(--chip-fs-body);
	line-height: var(--chip-lh-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--chip-cyan-600); text-decoration: none; }
a:hover { color: var(--chip-cyan-700); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--chip-font-display);
	color: var(--chip-sea-800);
	font-weight: 800;
	line-height: var(--chip-lh-tight);
	letter-spacing: var(--chip-ls-h1);
	margin: 0 0 0.5em;
}
h1 { font-size: var(--chip-fs-h1); letter-spacing: var(--chip-ls-h1); }
h2 { font-size: var(--chip-fs-h2); font-weight: 700; letter-spacing: var(--chip-ls-h2); }
h3 { font-size: var(--chip-fs-h3); font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }

/* ---------- Layout primitives ---------- */
.chip-main { display: block; }
.chip-container { width: 100%; max-width: var(--chip-content); margin-inline: auto; padding-inline: var(--chip-gutter); }
.chip-section { padding-block: clamp(3.5rem, 6vw, var(--chip-space-2xl)); }
/* Eyebrow / section label — one canonical style (design .eyebrow).
 * !important so a section's `.chip-X p` rule can't override the eyebrow
 * (matches the design, which also forces the eyebrow font). */
.chip-eyebrow,
.chip-section-label,
.eyebrow {
	font-family: var(--chip-font-mono) !important;
	font-weight: 500 !important;
	font-size: 10px !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--chip-cyan-500) !important;
	margin: 0 0 14px !important;
	max-width: none !important;
}

/* ---------- Buttons ----------
 * Design class name: .btn-primary (kept as an alias of .chip-btn--primary).
 * Editable WP buttons render div.wp-block-button > a.wp-block-button__link, so
 * .btn-primary on the wrapper maps to the painted <a> via the descendant rules.
 */
.chip-btn,
.btn-primary,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--chip-font-body);
	font-weight: 700;
	font-size: 0.875rem;
	line-height: 1;
	padding: 0.8rem 1.75rem;
	border-radius: var(--chip-radius-pill);
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform 0.2s var(--chip-ease), background-color 0.2s var(--chip-ease), color 0.2s var(--chip-ease), box-shadow 0.2s var(--chip-ease);
}
.chip-btn--primary,
a.btn-primary,
.btn-primary .wp-block-button__link,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--chip-cyan-500);
	color: var(--chip-white);
}
/* Primary hover: darker (#c50d5e) + pink glow + lift, per design. Targets the painted <a>. */
.chip-btn--primary:hover,
.chip-btn--primary:focus-visible,
a.btn-primary:hover,
a.btn-primary:focus-visible,
.btn-primary .wp-block-button__link:hover,
.btn-primary .wp-block-button__link:focus-visible,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	background: var(--chip-magenta-700);
	color: var(--chip-white);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(232, 16, 110, 0.3);
}
.chip-btn--magenta { background: var(--chip-magenta-500); color: var(--chip-white); box-shadow: 0 6px 18px rgba(231, 65, 173, 0.28); }
.chip-btn--magenta:hover { background: #cf2f99; color: var(--chip-white); transform: translateY(-1px); }
.wp-block-button.chip-btn--yellow .wp-block-button__link, a.chip-btn--yellow { background: var(--chip-amber-500); color: #13262D; border-color: var(--chip-amber-500); box-shadow: 0 6px 18px rgba(231,182,92,0.28); }
.wp-block-button.chip-btn--yellow .wp-block-button__link:hover, a.chip-btn--yellow:hover { background: #d8a84e; color: #13262D; }
.chip-btn--outline-teal { background: transparent; color: var(--chip-cyan-600); border-color: var(--chip-cyan-500); box-shadow: none; }
.chip-btn--outline-teal:hover { background: var(--chip-cyan-500); color: #fff; border-color: var(--chip-cyan-500); transform: translateY(-1px); }
.chip-btn--ghost { background: transparent; color: var(--chip-sea-800); border-color: var(--chip-border); }
.chip-btn--ghost:hover { border-color: var(--chip-cyan-500); color: var(--chip-cyan-600); }
.chip-btn--outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); box-shadow: none; }
.chip-btn--outline-white:hover { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; transform: translateY(-1px); }
.chip-btn:active, .wp-block-button__link:active { transform: translateY(0); }
/* When chip-btn is the wp:button WRAPPER, the pill padding lives on the inner __link —
 * zero the wrapper's inherited button padding so the pill aligns to the wrapper's left edge
 * (otherwise it's indented ~28px; only visible on left-aligned buttons). */
.wp-block-button.chip-btn { padding: 0; border: 0; }

/* ---------- Header / nav (dark bar + floating dropdown mega-menu) ---------- */
.chip-header { position: sticky; top: 0; z-index: 200; }
.chip-nav { background: rgba(15, 32, 48, 0.96); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.07); height: 64px; padding: 0 clamp(1rem, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; }
.chip-logo { display: inline-flex; align-items: center; color: #fff; text-decoration: none; }
.chip-logo__img { height: 30px; width: auto; display: block; }
a.chip-logo:hover { opacity: 0.85; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links li { margin: 0; display: flex; align-items: center; }
.nav-links a { color: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 500; text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: #fff; }
.nav-cta { background: var(--chip-magenta-500); color: #fff !important; padding: 9px 22px; border-radius: 100px; font-weight: 700; font-size: 13px; transition: opacity 0.2s, transform 0.2s; }
.nav-cta:hover { opacity: 0.9; transform: translateY(-1px); color: #fff !important; }

/* Hamburger */
.chip-menu-btn { display: inline-flex; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: 4px; transition: opacity 0.2s; }
.chip-menu-btn:hover { opacity: 0.75; }
.chip-menu-btn span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.chip-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.chip-menu-btn.open span:nth-child(2) { opacity: 0; }
.chip-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Floating dropdown mega-menu (non-modal) */
.chip-menu { position: fixed; top: 60px; right: 20px; width: 720px; max-width: calc(100vw - 40px); background: #0F2030; border: 1px solid rgba(24, 161, 206, 0.18); border-radius: 14px; padding: 28px 30px; z-index: 199; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(-8px); transition: opacity 0.18s ease-out, transform 0.18s ease-out; }
.chip-menu[hidden] { display: none; }
.chip-menu.open { opacity: 1; transform: translateY(0); }
.chip-menu__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.chip-menu__col { display: flex; flex-direction: column; }
.chip-menu__col h4 { font-family: var(--chip-font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chip-cyan-400); margin: 0 0 14px; }
.chip-menu__col a { display: block; padding: 7px 0; color: rgba(255, 255, 255, 0.78); font-size: 14px; font-weight: 500; text-decoration: none; transition: color 0.15s; }
.chip-menu__col a:hover { color: var(--chip-cyan-500); }

@media (max-width: 768px) {
	.nav-links li:not(:last-child) { display: none; }
	.chip-menu { left: 12px; right: 12px; width: auto; max-width: none; padding: 22px 20px; }
	.chip-menu__grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}
@media (max-width: 460px) {
	.chip-menu__grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- Footer ---------- */
.chip-footer { background: var(--chip-sea-900); color: rgba(255, 255, 255, 0.55); padding-block: 52px 24px; }
.chip-footer a { color: rgba(255, 255, 255, 0.55); }
.chip-footer a:hover { color: var(--chip-white); }
.chip-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.chip-footer__wordmark { font-family: var(--chip-font-display); font-weight: 800; font-size: 1.6rem; color: var(--chip-cyan-400); letter-spacing: -0.03em; margin: 0 0 0.5rem; }
.chip-footer__logo { margin: 0 0 1rem; }
.chip-footer__logo img { height: 34px; width: auto; display: block; }
.chip-footer__brand > p { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.4); margin: 10px 0 14px; max-width: 30ch; }
.chip-footer__col h4 { font-family: var(--chip-font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin: 0 0 14px; }
.chip-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.chip-footer__links li { margin: 0; }
.chip-footer__links a { display: block; font-size: 13px; color: rgba(255,255,255,0.55); }
.chip-footer__accent { color: var(--chip-cyan-400) !important; }
.chip-footer__bottom { margin-top: 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 18px 24px; }
.chip-footer__copy { flex: 0 0 auto; font-size: 12px; color: rgba(255,255,255,0.2); margin: 0; }
.chip-footer__copy a { color: rgba(255,255,255,0.4); }
.chip-footer__legal { flex: 1 1 0; min-width: 0; max-width: 880px; font-size: 11px; line-height: 1.6; font-style: italic; color: rgba(255,255,255,0.35); margin: 0; }
.chip-footer__social { flex-basis: 100%; display: flex; gap: 14px; align-items: center; }
.chip-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55); transition: background 0.2s, color 0.2s, transform 0.15s; }
.chip-footer__social a:hover { background: var(--chip-cyan-500); color: #fff; transform: translateY(-2px); }
.chip-footer__social svg { width: 17px; height: 17px; display: block; fill: currentColor; }

/* ---------- Page wrappers ---------- */
.chip-page { }
.chip-page--empty, .chip-404 { max-width: 640px; margin: 6rem auto; padding-inline: var(--chip-gutter); text-align: center; }

/* ---------- Accessibility ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.chip-skip-link:focus {
	position: fixed; top: 12px; left: 12px; z-index: 1000;
	width: auto; height: auto; clip: auto; margin: 0;
	padding: 0.75rem 1.25rem; background: var(--chip-sea-800); color: var(--chip-white);
	border-radius: var(--chip-radius-s);
}
:focus-visible { outline: 3px solid var(--chip-cyan-400); outline-offset: 2px; border-radius: 4px; }

/* ---------- Block alignment (classic theme) ---------- */
.chip-page__content > * { margin-inline: auto; max-width: var(--chip-content); }
.chip-page__content > .alignwide { max-width: var(--chip-wide); }
.chip-page__content > .alignfull { max-width: none; width: 100%; margin-inline: 0; }
.chip-page__content { padding-inline: 0; }

/* =====================================================================
 * HOME SECTIONS (pixel-match)
 * ===================================================================== */

/* ---------- Hero ---------- */
.chip-hero { color: #fff; overflow: clip; }
.chip-hero .wp-block-cover__inner-container { width: 100%; max-width: var(--chip-content); margin-inline: auto; padding-inline: var(--chip-gutter); }
.chip-hero__content { max-width: 620px; }
@media (max-width: 860px) { .chip-hero__content { max-width: none; } }
/* Home hero video layer (inc/home-hero.php), from updatedherosection.netlify.app.
   The section is no longer a core Cover block: the video sits in .chip-hero__bg
   behind the copy, with the same left-to-right scrim the Cover's gradient gave.
   Second word cyan, separator amber, as the reference. */
.chip-hero { position: relative; display: flex; align-items: center; min-height: 680px; padding-block: clamp(3rem, 7vw, 5.5rem); background: var(--chip-sea-900); }
.chip-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.chip-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 32%; display: block; }
.chip-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,22,35,0.93) 0%, rgba(11,22,35,0.84) 44%, rgba(11,22,35,0.40) 66%, rgba(11,22,35,0.05) 100%); }
.chip-hero > .chip-hero__inner, .chip-hero .wp-block-group.chip-hero__inner { position: relative; z-index: 1; width: 100%; max-width: var(--chip-content); margin-inline: auto; padding-inline: var(--chip-gutter); }
.chip-hero__ticks { position: absolute; right: clamp(16px, 4vw, 48px); bottom: 22px; display: flex; gap: 8px; }
.chip-hero__tick { width: 18px; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.3); transition: background 0.3s var(--chip-ease); }
.chip-hero__tick.is-on { background: var(--chip-amber-500); }
/* Pause control for the looping video (WCAG 2.2.2). */
.chip-hero__motion { position: absolute; left: clamp(16px, 4vw, 48px); bottom: 18px; z-index: 2; padding: 6px 14px; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--chip-radius-pill); background: rgba(11,22,35,0.55); color: #fff; font-family: var(--chip-font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; }
.chip-hero__motion:hover { background: rgba(11,22,35,0.8); border-color: #fff; }
.chip-hero__motion:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.chip-hero__motion-play { display: none; }
.chip-hero__bg.is-paused .chip-hero__motion-pause { display: none; }
.chip-hero__bg.is-paused .chip-hero__motion-play { display: inline; }
/* The rotating half of the headline sits on its OWN line, as in the reference.
   Inline, a longer pair rewrapped the whole headline: measured the h1 flipping
   between 104px and 156px and the paragraph below it moving 26px every few
   seconds. On its own line with a reserved height, only this line changes. */
.chip-hero__pair { display: block; min-height: 1.15em; white-space: nowrap; }
.chip-hero__dot { color: var(--chip-amber-500); padding-inline: 0.12em; }
/* The second word carries the reference's amber rule: it sweeps in from the left
   once the word has finished typing (--u goes 0 → 1 in chip-hero.js), which is
   what makes a phrase read as settled rather than merely stopped. */
.chip-hero__w2 { color: var(--chip-cyan-400); position: relative; white-space: nowrap; }
.chip-hero__w2::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.08em; height: 0.09em; border-radius: 9px; background: var(--chip-amber-500); transform-origin: left center; transform: scaleX(var(--u, 0)); transition: transform 0.45s var(--chip-ease); }
.chip-hero__words::after { content: ""; display: inline-block; width: 2px; height: 0.82em; margin-left: 0.06em; vertical-align: -0.06em; background: var(--chip-cyan-400); animation: chip-hero-caret 1s steps(1) infinite; }
.chip-hero__pair.is-typed .chip-hero__words::after { opacity: 0; animation: none; }
@keyframes chip-hero-caret { 50% { opacity: 0; } }
@media (max-width: 860px) {
	/* Narrow enough that the longest pair needs two lines; reserve both so the
	   headline does not grow and shrink between pairs. */
	.chip-hero__pair { white-space: normal; min-height: 2.3em; }
	.chip-hero__ticks { right: 50%; transform: translateX(50%); bottom: 14px; }
	.chip-hero__motion { left: 50%; transform: translateX(-50%); bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
	.chip-hero__words::after { animation: none; opacity: 0; }
	.chip-hero__tick, .chip-hero__w2::after { transition: none; }
}
.chip-hero__eyebrow {
	color: var(--chip-cyan-400);
	font-family: var(--chip-font-mono);
	font-size: 10px; font-weight: 500;
	letter-spacing: 1.6px; text-transform: uppercase;
	margin: 0 0 16px;
}
.chip-hero__title {
	color: #fff;
	font-family: var(--chip-font-display);
	font-size: clamp(2.1rem, 1.2rem + 3vw, 48px);
	font-weight: 800; line-height: 1.08; letter-spacing: -0.03em;
	margin: 0 0 0.5em; max-width: 16ch;
}
.chip-hero__title em { font-style: normal; color: var(--chip-cyan-400); }

/* ---------- Brand squiggle underline (emphasis words, site-wide) ---------- */
.chip-hero__title em,
.chip-sec__em,
.chip-cta__title em,
.chip-teaser__title em,
.chip-news__title em,
.chip-featured__title em,
.chip-page-header h1 em {
	background-image: var(--chip-underline);
	background-repeat: no-repeat;
	background-position: left 100%;
	background-size: 100% 0.32em;
	padding-bottom: 0.18em;
}
.chip-hero__sub {
	color: rgba(255, 255, 255, 0.65);
	font-size: 17px; line-height: 1.7;
	max-width: 520px; margin: 0 0 32px;
}
.chip-hero__btns { margin-bottom: 24px; }
.chip-hero__trust {
	display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
	font-size: 12px; color: rgba(255, 255, 255, 0.55); margin: 0;
}
.chip-hero__trust span { display: inline-flex; align-items: center; gap: 0.4rem; }
.chip-hero__trust span::before {
	content: "";
	width: 14px; height: 14px; flex: none;
	background-color: var(--chip-cyan-400);
	-webkit-mask: var(--chip-check) center / contain no-repeat;
	mask: var(--chip-check) center / contain no-repeat;
}

/* ---------- Shared section scaffolding ---------- */
.chip-sec { padding-block: clamp(3.5rem, 6vw, 80px); }
.chip-sec__inner { max-width: var(--chip-content); margin-inline: auto; padding-inline: var(--chip-gutter); }
.chip-sec--cream { background: #FBF8F2; }
.chip-sec--sand { background: var(--chip-sand-bg); }
.chip-sec--navy { background: var(--chip-sea-800); color: rgba(255,255,255,0.82); }
.chip-sec--navy h1,.chip-sec--navy h2,.chip-sec--navy h3 { color: #fff; }
.chip-sec--white { background: #fff; }
.chip-sec__em { font-style: normal; color: var(--chip-cyan-500); }
.chip-sec--navy .chip-sec__em { color: var(--chip-cyan-400); }
.chip-sec__title { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 0.5em; }

/* ---------- Press strip ---------- */
.chip-press { background: #fff; border-bottom: 1px solid var(--chip-line); }
.chip-press__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-block: 32px; }
.chip-press__label { font-family: var(--chip-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--chip-muted); text-align: center; }
.chip-press__logos { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; justify-content: center; }
.chip-press__logo { font-family: var(--chip-font-display); font-weight: 800; font-size: 1.05rem; color: #98a6ab; letter-spacing: -0.01em; opacity: 0.9; }

/* ---------- Pathway ---------- */
.chip-pathway__head { text-align: center; max-width: none; margin: 0 auto 40px; }
.chip-pathway__intro { color: var(--chip-slate); font-size: 1.0625rem; line-height: 1.6; max-width: 660px; margin-inline: auto; }
.chip-pathway__prompt { font-weight: 700; color: var(--chip-sea-800); margin-top: 1rem; }
.chip-pathway__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-block: 2.5rem; align-items: stretch; grid-auto-rows: 1fr; }
.chip-pathway__grid > * { margin-block-start: 0 !important; }
.chip-card {
	display: flex; flex-direction: column; gap: 0.5rem;
	background: #fff; border: 1px solid rgba(12, 42, 56, 0.09); border-radius: 18px;
	padding: 26px 24px; text-align: left; box-shadow: var(--chip-shadow-card);
	transition: translate var(--chip-dur) var(--chip-ease), box-shadow var(--chip-dur) var(--chip-ease), border-color var(--chip-dur) var(--chip-ease), background-color var(--chip-dur) var(--chip-ease);
}
/* Hover carries what used to be the "featured card" treatment: no card is
   highlighted until the visitor points at it.
   The lift uses `translate`, not `transform`: these cards sit in reveal grids
   whose chip-rise animation runs with `both`, so it keeps ownership of
   `transform` after it finishes and a transform here never applied at all.
   `translate` is a separate property, so it composes with the animation. */
.chip-card:hover { translate: 0 -3px; border-color: var(--chip-cyan-500); background: var(--chip-cyan-050); box-shadow: 0 12px 32px rgba(22, 163, 204, 0.18); }
.chip-card:hover .chip-card__fit { border-top-color: rgba(22, 163, 204, 0.3); }
/* Numbered index (design .pathway-icon: number + short amber dash) */
.chip-card__num { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-family: var(--chip-font-mono); font-weight: 500; font-size: 23px; letter-spacing: -1px; color: var(--chip-cyan-500); line-height: 1; }
.chip-card__num::after { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--chip-amber-500); }
.chip-card__title { font-family: var(--chip-font-display); font-weight: 700; font-size: 1.1rem; color: var(--chip-sea-800); line-height: 1.25; margin: 0; }
.chip-card__desc { color: var(--chip-slate); font-size: 0.9rem; line-height: 1.6; margin: 0; flex: 1; }
.chip-card__fit { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--chip-cyan-200); }
.chip-card__fit-label { font-family: var(--chip-font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chip-cyan-600); margin: 0 0 0.25rem; }
.chip-card__fit-combo { color: var(--chip-sea-800); font-weight: 600; font-size: 0.8rem; line-height: 1.4; margin: 0; }
.chip-pathway__cta { text-align: center; margin-top: 2rem; }
.chip-pathway__cta .wp-block-button__link { padding: 14px 32px; font-size: 15px; }
.chip-pathway__hint { color: var(--chip-muted); font-size: 0.85rem; margin-top: 0.85rem; }
.chip-pathway__hint strong { color: var(--chip-sea-700); }

/* ---------- Orbit ---------- */
.chip-orbit { padding-top: 0; } /* client: too much gap above "Wealth is bigger than investing" */
.chip-orbit__head { text-align: center; max-width: 860px; margin: 0 auto 48px; }
.chip-orbit__head p { color: var(--chip-slate); font-size: 1rem; line-height: 1.7; max-width: 620px; margin-inline: auto; }

/* Orbital stage (desktop) */
.chip-orbit__stage { position: relative; max-width: 860px; height: 560px; margin: 0 auto; }
.chip-orbit__stage::before,
.chip-orbit__stage::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 455px; height: 455px; border-radius: 50%;
	transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
}
.chip-orbit__stage::before { border: 2px dashed rgba(22, 163, 204, 0.35); }
.chip-orbit__stage::after { border: 2px solid transparent; border-top-color: var(--chip-cyan-500); opacity: 0.5; animation: orbitSpin 18s linear infinite; }
@keyframes orbitSpin { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }

.chip-orbit__center {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 200px; height: 200px; border-radius: 50%; overflow: hidden; margin: 0;
	background: linear-gradient(135deg, var(--chip-cyan-500), var(--chip-cyan-400));
	box-shadow: 0 12px 48px rgba(22, 163, 204, 0.35); z-index: 3;
}
.chip-orbit__center img { width: 100%; height: 100%; object-fit: cover; }

.chip-orbit__bubble {
	position: absolute; margin: 0; width: 172px; height: 172px; border-radius: 50%;
	background: var(--chip-sea-800); color: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; padding: 22px; box-shadow: 0 8px 28px rgba(27, 54, 74, 0.22); z-index: 2;
	transition: transform 0.25s var(--chip-ease), box-shadow 0.25s var(--chip-ease);
}
.chip-orbit__bubble:hover { transform: scale(1.06); box-shadow: 0 14px 40px rgba(27, 54, 74, 0.32); }
.chip-orbit__stage > .chip-orbit__bubble:nth-of-type(1) { left: 155px; top: 11px; }
.chip-orbit__stage > .chip-orbit__bubble:nth-of-type(2) { left: 533px; top: 11px; }
.chip-orbit__stage > .chip-orbit__bubble:nth-of-type(3) { left: 34px;  top: 194px; }
.chip-orbit__stage > .chip-orbit__bubble:nth-of-type(4) { left: 654px; top: 194px; }
.chip-orbit__stage > .chip-orbit__bubble:nth-of-type(5) { left: 155px; top: 377px; }
.chip-orbit__stage > .chip-orbit__bubble:nth-of-type(6) { left: 533px; top: 377px; }
.chip-orbit__because { font-size: 11px; font-weight: 600; color: var(--chip-cyan-200); margin: 0 0 2px; }
.chip-orbit__role { font-family: var(--chip-font-display); font-size: 15px; font-weight: 700; line-height: 1.15; color: #fff; margin: 0 0 8px; }
.chip-orbit__quote { font-size: 11.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.78); margin: 0; }

.chip-orbit__cta { text-align: center; margin-top: 36px; position: relative; z-index: 2; }
.chip-orbit__cta p { color: var(--chip-muted); font-size: 0.9rem; margin-top: 0.85rem; }

/* Orbital → 2-col card grid on smaller screens */
@media (max-width: 900px) {
	.chip-orbit__stage { position: static; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
	.chip-orbit__stage::before, .chip-orbit__stage::after { display: none; }
	.chip-orbit__center { position: static; transform: none; width: 148px; height: 148px; margin: 0 auto 28px; grid-column: 1 / -1; }
	.chip-orbit__bubble { position: static; left: auto; top: auto; width: auto; height: auto; border-radius: 16px; padding: 18px 14px; justify-content: flex-start; }
}
@media (max-width: 520px) {
	.chip-orbit__stage { grid-template-columns: 1fr; }
}

/* ---------- Teaser (team / money / faq) ---------- */
.chip-teaser { text-align: center; }
.chip-teaser__inner { max-width: 920px; margin-inline: auto; padding-inline: var(--chip-gutter); }
.chip-teaser__title { font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 14px; }
.chip-teaser p { color: var(--chip-slate); font-size: 15px; line-height: 1.7; margin: 0 auto 26px; max-width: 600px; }
.chip-teaser--dark p { color: rgba(255,255,255,0.7); }

/* ---------- Home video carousel (inc/home-videos.php) ----------
   Rebuilt from the client's reference on the site's own tokens, on cream rather
   than the reference's navy: the section below is already navy, and two dark
   bands back to back would read as one.

   The section deliberately does NOT carry .chip-teaser. `.chip-teaser p` (0,1,1)
   would out-rank every card rule below (0,1,0) and centre and restyle the card
   text; the head reuses .chip-teaser__title directly instead. */
.chip-videos { text-align: center; }
.chip-videos__head { max-width: 920px; margin-inline: auto; padding-inline: var(--chip-gutter); }
.chip-videos .chip-videos__sub { color: var(--chip-slate); font-size: 15px; line-height: 1.7; margin: 0 auto 40px; max-width: 560px; }
/* The track already carries 28px of bottom padding for the cards' hover lift,
   so the button only needs the rest of the gap. */
.chip-videos__btns { margin-top: 12px; }

.chip-hv { --hv-gap: 28px; --hv-card: 300px; position: relative; max-width: 1200px; margin-inline: auto; text-align: left; }
.chip-hv__toggle {
	display: flex; margin: 0 var(--chip-gutter) 12px auto; align-items: center; gap: 6px;
	font-family: var(--chip-font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
	color: var(--chip-sea-800); background: #fff; border: 1px solid var(--chip-line); border-radius: var(--chip-radius-pill);
	padding: 7px 14px; cursor: pointer;
}
.chip-hv__toggle:hover { border-color: var(--chip-cyan-500); }
.chip-hv__toggle:focus-visible { outline: 2px solid var(--chip-cyan-500); outline-offset: 2px; }
.chip-hv__toggle-play { display: none; }
.chip-hv.is-paused .chip-hv__toggle-pause { display: none; }
.chip-hv.is-paused .chip-hv__toggle-play { display: inline; }

/* The edge fade is a MASK, not the reference's coloured overlays: an overlay
   has to be painted in the section's own colour and breaks the moment that
   colour changes. A mask fades to whatever is behind. */
.chip-hv__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.chip-hv__track {
	display: flex; gap: var(--hv-gap); width: max-content; list-style: none; margin: 0;
	/* Trailing space equal to one gap makes the track exactly two identical
	   halves, so translateX(-50%) lands on the clone's first card with no jump.
	   Without it the loop is off by half a gap and visibly hitches. */
	padding: 14px var(--hv-gap) 28px 0;
}
.chip-hv--marquee .chip-hv__track { animation: chip-hv-scroll var(--hv-duration, 53s) linear infinite; }
.chip-hv--marquee:hover .chip-hv__track,
.chip-hv--marquee:focus-within .chip-hv__track,
.chip-hv.is-paused .chip-hv__track,
.chip-hv.is-offscreen .chip-hv__track { animation-play-state: paused; }
@keyframes chip-hv-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Fewer than three videos cannot fill a row, so they sit still and centred. */
.chip-hv--static .chip-hv__viewport { -webkit-mask-image: none; mask-image: none; }
.chip-hv--static .chip-hv__track { width: auto; flex-wrap: wrap; justify-content: center; padding: 14px var(--chip-gutter) 28px; }

.chip-hv__card {
	flex: 0 0 var(--hv-card); background: #fff; border-radius: 18px; overflow: hidden;
	box-shadow: var(--chip-shadow-card); transition: transform 0.25s var(--chip-ease), box-shadow 0.25s var(--chip-ease);
}
.chip-hv__card:hover { transform: translateY(-6px); box-shadow: var(--chip-shadow-raised); }
.chip-hv__media {
	position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; margin: 0;
	background: linear-gradient(135deg, var(--chip-sea-800), var(--chip-sea-600)); cursor: pointer; overflow: hidden;
}
.chip-hv__media:focus-visible { outline: 3px solid var(--chip-cyan-500); outline-offset: -3px; }
.chip-hv__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chip-hv__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,0.94);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 18px rgba(6,36,48,0.3); transition: transform 0.2s var(--chip-ease);
}
.chip-hv__media:hover .chip-hv__play, .chip-hv__media:focus-visible .chip-hv__play { transform: translate(-50%, -50%) scale(1.08); }
.chip-hv__play svg { width: 22px; height: 22px; margin-left: 3px; fill: var(--chip-sea-800); }

.chip-hv__info { padding: 20px 20px 24px; }
.chip-hv .chip-hv__name { font-family: var(--chip-font-display); font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--chip-sea-800); margin: 0 0 2px; }
/* #0A7FA3 on white is 4.6:1, clear of AA at this size. The reference's pink
   is not part of this palette. */
.chip-hv .chip-hv__creds { font-size: 12.5px; font-weight: 700; color: var(--chip-cyan-600); margin: 0 0 10px; }
.chip-hv .chip-hv__role { font-size: 13.5px; line-height: 1.45; color: var(--chip-slate); margin: 0 0 10px; }
/* The reference's #8a99a8 location grey is 2.9:1 on white and fails AA. */
.chip-hv .chip-hv__loc { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: #5B6B70; margin: 0; }
.chip-hv__loc svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* Player */
.chip-hv__dialog { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
.chip-hv__dialog::backdrop { background: rgba(6, 20, 28, 0.9); }
/* One rule for both orientations. Width is the smallest of: the screen, a 960px
   cap, and the width at which the video's height would hit 86vh. aspect-ratio
   then derives the height, so the frame is always exactly the video's shape.
   The earlier split rules capped portrait by height and width separately, and
   at 390px that left a frame 12% taller than its video, letterboxed. */
.chip-hv__frame { position: relative; width: min(92vw, 960px, calc(86vh * var(--hv-ar, 1.7778))); aspect-ratio: var(--hv-ratio, 16 / 9); }
.chip-hv__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; border-radius: 12px; }
.chip-hv__close {
	position: absolute; top: -48px; right: 0; width: 40px; height: 40px; padding: 8px;
	background: none; border: 0; border-radius: 50%; color: #fff; cursor: pointer;
}
.chip-hv__close svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.chip-hv__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 640px) {
	.chip-hv { --hv-gap: 20px; --hv-card: 240px; }
}

/* No motion: stop the loop, drop the decorative clones, and let the row scroll
   by hand with snap points instead. */
@media (prefers-reduced-motion: reduce) {
	.chip-hv--marquee .chip-hv__track { animation: none; padding-left: var(--chip-gutter); }
	.chip-hv__card[inert], .chip-hv__toggle { display: none; }
	.chip-hv__viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
	.chip-hv__card { scroll-snap-align: start; }
	.chip-hv__card, .chip-hv__play { transition: none; }
	.chip-hv__card:hover { transform: none; }
}

/* ---------- Real progress ---------- */
/* Background photo + navy overlay */
.chip-progress {
	position: relative; overflow: hidden;
	background-color: var(--chip-sea-900);
	background-image: linear-gradient(90deg, rgba(12,42,56,0.92) 0%, rgba(12,42,56,0.78) 40%, rgba(12,42,56,0.45) 72%, rgba(12,42,56,0.28) 100%), url("../images/progress.jpg");
	background-size: cover; background-position: right center;
}
.chip-progress::before {
	content: ""; position: absolute; top: -100px; right: -100px;
	width: 360px; height: 360px; pointer-events: none;
	background: radial-gradient(circle, rgba(22,163,204,0.14) 0%, transparent 70%);
}
.chip-progress .chip-sec__inner { position: relative; z-index: 1; max-width: 1100px; }
.chip-progress__head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.chip-progress__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-block: 0 32px; align-items: stretch; }
.chip-quote { display: flex; flex-direction: column; height: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 24px 26px; backdrop-filter: blur(2px); }
.chip-quote__avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; margin: 0 0 14px; }
.chip-quote__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip-quote__mark { font-family: var(--chip-font-display); font-size: 40px; line-height: 0.6; color: var(--chip-cyan-400); margin: 0 0 8px; height: 22px; }
.chip-quote__text { font-size: 15px; font-style: italic; color: rgba(255,255,255,0.88); line-height: 1.55; margin: 0 0 14px; flex: 1; }
.chip-quote__cite { font-style: normal; color: var(--chip-cyan-400); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; margin: 0; }
/* Real Stories carousel (inc/testimonials.php), from chiptestimonials.netlify.app.
   One glass card on the photo band, arrows outside it, dots under it. The old
   three-card grid rules (.chip-progress__grid/.chip-quote) are kept: the grid is
   still what [chip_testimonials] rendered before today, and other stored pages
   may still carry it. */
.chip-testi { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, 2vw, 28px); max-width: 1100px; margin: 0 auto 28px; }
.chip-testi__track { grid-column: 2; list-style: none; margin: 0; padding: 0; }
.chip-testi__slide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 260px; padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 44px); text-align: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: 20px; backdrop-filter: blur(3px); }
.chip-testi__slide[hidden] { display: none; }
.chip-testi .chip-testi__where { font-family: var(--chip-font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 700; line-height: 1.2; color: #fff; margin: 0; }
.chip-testi__quote { margin: 0; max-width: 680px; }
.chip-testi .chip-testi__quote p { font-size: clamp(15px, 1.6vw, 17px); font-style: italic; line-height: 1.7; color: rgba(255,255,255,0.88); margin: 0; }
.chip-testi__arrow { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255,255,255,0.28); border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; cursor: pointer; transition: background 0.2s var(--chip-ease), border-color 0.2s var(--chip-ease); }
.chip-testi__arrow:hover { background: rgba(255,255,255,0.18); border-color: #fff; }
.chip-testi__arrow:focus-visible { outline: 3px solid var(--chip-cyan-400); outline-offset: 3px; }
.chip-testi__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chip-testi__arrow--prev { grid-column: 1; }
.chip-testi__arrow--next { grid-column: 3; }
.chip-testi__dots { grid-column: 2; display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.chip-testi__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,0.28); cursor: pointer; transition: width 0.2s var(--chip-ease), background 0.2s var(--chip-ease); }
.chip-testi__dot.is-current { width: 22px; background: var(--chip-cyan-400); }
.chip-testi__dot:focus-visible { outline: 2px solid var(--chip-cyan-400); outline-offset: 3px; }
@media (max-width: 700px) {
	/* Arrows move under the card on a phone: beside it they would eat ~110px of
	   its width at 390px. They share one row with the dots, as grid cells rather
	   than absolute positioning, which first put them ON TOP of the dots. */
	.chip-testi { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 18px; }
	.chip-testi__track { grid-column: 1 / -1; grid-row: 1; }
	.chip-testi__slide { min-height: 0; }
	.chip-testi__arrow { grid-row: 2; width: 40px; height: 40px; }
	.chip-testi__arrow--prev { grid-column: 1; }
	.chip-testi__arrow--next { grid-column: 3; }
	.chip-testi__dots { grid-column: 2; grid-row: 2; align-items: center; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .chip-testi__arrow, .chip-testi__dot { transition: none; } }
.chip-progress__stat { text-align: center; }
.chip-progress__stat-num { margin: 0; }
.chip-progress__stat { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 28px; }
.chip-progress__stat-num strong { font-family: var(--chip-font-display); font-size: 34px; font-weight: 500; color: var(--chip-amber-500); }
.chip-progress__stat-word { font-family: var(--chip-font-display); font-size: 34px; font-weight: 500; color: #fff; }
.chip-progress__stat-label { color: rgba(255,255,255,0.5); font-size: 12px; letter-spacing: 0.5px; margin: 0.25rem 0 0; }

/* ---------- Why ---------- */
.chip-why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 64px); align-items: start; }

/* left column */
.chip-why__title { font-family: var(--chip-font-display); font-size: clamp(32px, 4vw, 48px); font-weight: 700; color: var(--chip-sea-800); line-height: 1.1; margin: 0 0 18px; }
.chip-why__lede { font-family: var(--chip-font-display); font-style: italic; font-size: 19px; color: var(--chip-sea-800) !important; line-height: 1.4; margin-top: 14px; }
.chip-why__left p { color: var(--chip-muted); font-size: 15px; line-height: 1.8; }
.chip-why__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 1.5rem; align-items: stretch; }
.chip-why__cards > * { margin-block-start: 0 !important; margin-top: 0 !important; }
.chip-why__card { height: 100%; background: #fff; border: 1px solid rgba(12,42,56,0.08); border-radius: 16px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.chip-why__card-title { position: relative; padding-top: 15px; font-family: var(--chip-font-display); font-size: 14px; font-weight: 700; color: var(--chip-sea-800); margin: 0 0 6px; }
.chip-why__card-title::before { content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 3px; border-radius: 2px; background: var(--chip-amber-500); }
.chip-why__card-desc { font-size: 12px; color: var(--chip-muted); line-height: 1.6; margin: 0; }

/* right column */
.chip-why__right { display: flex; flex-direction: column; }
.chip-why__proof { position: relative; overflow: hidden; background: var(--chip-sea-800); color: #fff; border-radius: 20px; padding: 36px; margin-bottom: 20px; }
.chip-why__proof::before { content: ""; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; pointer-events: none; background: radial-gradient(circle, rgba(24,161,206,0.12) 0%, transparent 70%); }
.chip-why__proof-title { position: relative; font-family: var(--chip-font-display); font-size: 26px; color: #fff; line-height: 1.2; margin: 0 0 10px; }
.chip-why__proof-intro { position: relative; font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.7; margin: 0 0 24px; }
.chip-why__price-row { position: relative; display: flex; align-items: flex-start; gap: 12px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; }
.chip-why__proof .chip-why__price { font-family: var(--chip-font-display); font-size: 28px; font-weight: 700; color: var(--chip-cyan-400); min-width: 48px; line-height: 1; margin: 0; }
.chip-why__proof .chip-why__pricecap { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.5; padding-top: 4px; margin: 0; }

/* shared navy value panel — used by How It Works (hiw-why) */
.chip-why__panel { background: var(--chip-sea-800); color: #fff; border-radius: 20px; padding: clamp(1.75rem, 3vw, 36px); box-shadow: 0 8px 40px rgba(0,0,0,0.12); }
.chip-why__panel h3 { color: #fff; font-size: 24px; line-height: 1.2; }
.chip-why__panel .chip-why__price { font-family: var(--chip-font-display); font-size: 3rem; font-weight: 800; color: var(--chip-cyan-400); }
.chip-why__panel .chip-why__pricecap { color: rgba(255,255,255,0.6); font-size: 0.9rem; }
.chip-why__walk { background: var(--chip-cyan-050); border: 1px solid var(--chip-line); border-radius: 20px; padding: 28px 32px; margin-bottom: 20px; }
.chip-why__walk .chip-eyebrow { margin-bottom: 16px; }
.chip-why__check { position: relative; padding-left: 26px; font-size: 14px; color: var(--chip-sea-800); line-height: 1.5; margin: 0 0 14px; }
.chip-why__check:last-child { margin-bottom: 0; }
.chip-why__check::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--chip-cyan-500); font-weight: 700; font-size: 15px; }
.chip-why__check strong { color: var(--chip-sea-800); }
.chip-why__cta { justify-content: center; padding: 8px 0; }

/* ---------- Newsletter ---------- */
.chip-news__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 64px); align-items: center; }
.chip-news__title { font-family: var(--chip-font-display); color: #fff; font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.15; margin-bottom: 10px; }
.chip-news__title em { background-image: none; color: var(--chip-cyan-400); font-style: italic; }
.chip-news p { color: rgba(255,255,255,0.5); font-size: 15px; line-height: 1.7; }
.chip-news__cta { display: flex; justify-content: flex-end; }
.chip-news__btn { padding: 15px 52px; font-size: 15px; white-space: nowrap; cursor: pointer; }
.chip-news__fine { font-size: 11px; color: rgba(255,255,255,0.25); margin-top: 10px; }

/* ---------- Split duo: FAQ teaser + newsletter (card layout) ---------- */
.chip-sec--navy.chip-duo { background: var(--chip-sea-900); }
.chip-duo__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: clamp(1.5rem, 3vw, 32px); }
.chip-duo__col {
	display: flex; flex-direction: column; justify-content: flex-start;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: var(--chip-radius-l);
	padding: clamp(2rem, 4vw, 56px);
}
/* WP flow layout adds a top margin to the 2nd grid child, breaking equal-height
 * stretch — zero it so both cards fill the row identically. */
.chip-duo__grid > .chip-duo__col { margin: 0; }
.chip-sec--navy.chip-duo .chip-eyebrow--news { color: var(--chip-magenta-500) !important; }

/* Type scale tuned to the client mock: bigger eyebrow, 2-line heading, 3-line body. */
.chip-duo .chip-eyebrow { font-size: 12px !important; letter-spacing: 0.18em !important; margin: 0 0 20px !important; }
.chip-duo .chip-teaser__title,
.chip-duo .chip-news__title { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.chip-duo .chip-teaser p,
.chip-duo .chip-news__left p { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.6); max-width: 360px; }
.chip-duo .chip-teaser .wp-block-button__link,
.chip-duo .chip-news button,
.chip-duo .chip-news .wp-block-button__link { padding: 16px 38px; font-size: 16px; }

.chip-duo .chip-teaser { text-align: left; }
.chip-duo .chip-teaser__inner { max-width: none; margin-inline: 0; padding-inline: 0; }
.chip-duo .chip-teaser p { margin-inline: 0; }

/* Both cards run on one rhythm so their rows line up across the gap: eyebrow,
 * heading, body, button. The two sides are built differently — the FAQ card is a
 * plain stack, the newsletter card is a grid of two sub-groups — so left to
 * themselves they space out differently and the buttons land on different lines.
 * Fix: make both inners flex columns, zero the margins WP's flow layout puts on
 * every child, and set the spacing here in one place for both. Flex also stops
 * margins collapsing on one side but not the other. */
.chip-duo .chip-teaser__inner,
.chip-duo .chip-news__inner,
.chip-duo .chip-news__left { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.chip-duo .chip-teaser__inner > *,
.chip-duo .chip-news__inner > *,
.chip-duo .chip-news__left > *,
.chip-duo .chip-news__right > * { margin-block-start: 0; }
.chip-duo .chip-teaser__title,
.chip-duo .chip-news__title { margin: 0 0 14px; }
/* Same measure and a floor of three lines on both bodies, so they read as one
 * block and the two blocks of copy end level. */
.chip-duo .chip-teaser p:not(.chip-eyebrow),
.chip-duo .chip-news__left p:not(.chip-eyebrow) { max-width: 360px; min-height: 5.1em; margin: 0; }

/* Both CTAs sit on the card floor, so the buttons hold their line even when one
 * card's copy runs a line longer — at a narrow width, or after the client edits it. */
.chip-duo .chip-teaser__inner,
.chip-duo .chip-news__inner { flex: 1 1 auto; }
.chip-duo .chip-teaser .wp-block-buttons,
.chip-duo .chip-news__right { margin-top: auto; padding-top: 26px; }
.chip-duo .chip-news__cta { justify-content: flex-start; }
/* The newsletter card ends in a line of fine print and the FAQ card does not, so in
 * flow the two BLOCKS would bottom-align and leave the buttons on different lines.
 * Hanging it below the CTA keeps the buttons themselves level, and keeps this
 * working either way: Additional CSS currently hides the fine print site-wide, and
 * un-hiding it must not move the button. Font-size beats `.chip-news p` (0-1-1),
 * which would otherwise render it at 15px. */
.chip-duo .chip-news__right { position: relative; }
.chip-duo .chip-news__fine {
	position: absolute;
	top: 100%;
	left: 0;
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.6;
}

/* ---------- Founder note ---------- */
.chip-founder__inner { max-width: 1080px; margin-inline: auto; }
.chip-founder__card { display: flex; gap: 36px; align-items: center; flex-wrap: wrap; background: var(--chip-cream); border: 1px solid var(--chip-line); border-radius: 20px; padding: 32px 48px; }
.chip-founder__meta { flex: 0 0 auto; max-width: 230px; }
.chip-founder__mark { font-family: var(--chip-font-display); font-size: 56px; line-height: 0.7; font-weight: 400; color: var(--chip-cyan-500); opacity: 0.35; margin: 0 0 8px; }
.chip-founder__label { font-family: var(--chip-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chip-cyan-500); margin: 0 0 14px; }
.chip-founder__attrib { display: flex; align-items: center; gap: 12px; }
.chip-founder__attrib::before { content: ""; flex: 0 0 auto; width: 36px; height: 3px; background: var(--chip-cyan-500); }
.chip-founder__name { font-family: var(--chip-font-display); font-size: 18px; font-weight: 700; color: var(--chip-sea-900); margin: 0; }
.chip-founder__by { font-family: var(--chip-font-display); font-size: 16px; font-weight: 600; color: var(--chip-sea-800); margin: 0; }
.chip-founder__org { font-size: 11px; color: var(--chip-muted); line-height: 1.4; margin: 2px 0 0; }
.chip-founder__quote { flex: 1; min-width: 300px; font-size: 15px; color: var(--chip-sea-800); line-height: 1.7; margin: 0; }
.chip-founder__lead { font-family: var(--chip-font-display); font-size: 17px; font-style: italic; }
.chip-founder__card > *, .chip-founder__meta > *, .chip-founder__person > * { margin-block-start: 0 !important; }
.chip-founder__name + .chip-founder__by { margin-top: 2px; }

/* ---------- Partners ---------- */
.chip-partners__head { max-width: 620px; margin-inline: auto; text-align: center; }
.chip-sec--navy.chip-partners .chip-eyebrow { color: rgba(255,255,255,0.35) !important; letter-spacing: 0.22em !important; }
.chip-partners__head p { color: rgba(255,255,255,0.25); font-size: 0.8125rem; }
.chip-partners__logos { display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; align-items: center; justify-content: center; margin-top: 1.75rem; }
.chip-partner { margin: 0; }
.chip-partners__logos span { font-family: var(--chip-font-body); font-weight: 700; color: #fff; font-size: 1rem; letter-spacing: -0.3px; }
.chip-partners__fine { font-size: 0.6875rem; color: rgba(255,255,255,0.2); margin-top: 1.75rem; text-align: center; }
/* Partners page "Our Partners": real logo files instead of the home band's text
   names. One shared box for every logo (no per-logo sizes), so an editor can
   swap a file without a code change: wide wordmarks hit the width cap, compact
   marks hit the height cap, and they read at a similar weight. */
/* margin-top carries an extra 18px because --weight-low lifts the tallest mark
   by 19% of 88px (~17px); without it the ornament crowds the label above. */
.chip-partners--logos .chip-partners__logos { gap: 2rem 3.5rem; margin-top: calc(1.5rem + 18px); }
.chip-partners--logos .chip-partner-logo { margin: 0; }
.chip-partners--logos .chip-partner-logo img { display: block; width: auto; height: auto; max-height: 56px; max-width: 200px; }
/* A near-square mark capped at the same height as a wordmark renders at about
   half the area (measured: Idea Decanter 4,684px² against 9,270 and 11,767), so
   it reads as a lesser partner. --compact gives square marks their own taller
   box; all three now land within ~5% of 9,000px². Apply it to any future logo
   whose width is under about 1.5x its height. */
.chip-partners--logos .chip-partner-logo--compact img { max-height: 88px; max-width: 110px; }
/* Optical alignment. Flexbox centres the BOXES, but the eye aligns on the ink.
   Measured: ABEPP and Daylight carry their visual weight at 53% and 54% of
   their height, while Idea Decanter's sits at 69% — the thin ")(" ornament
   fills the top 40% with 15% of the ink, the heavy "(idea) DECANTER" sits
   below — so centred, its wordmark hung ~17px low. --weight-low lifts the
   artwork by that offset. A percentage translate is relative to the image's own
   height, so it scales with the logo on phones, and transform leaves the row
   height alone. Re-measure before applying it to a different logo. */
.chip-partners--logos .chip-partner-logo--weight-low img { transform: translateY(-19%); }
/* The same lift also leaves ~17px extra under the row, so the small print sits
   further below the logos than the label sits above them. Take it back where
   the lifted mark shares a row with the others; on phones the row wraps and the
   bottom logo is not lifted, so the gap is already even there. */
@media (min-width: 641px) {
	.chip-partners--logos .chip-partners__fine { margin-top: calc(1.75rem - 17px); }
}
@media (max-width: 640px) {
	.chip-partners--logos .chip-partners__logos { gap: 1.5rem 2.25rem; }
	.chip-partners--logos .chip-partner-logo img { max-height: 48px; max-width: 160px; }
	.chip-partners--logos .chip-partner-logo--compact img { max-height: 72px; max-width: 90px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.chip-pathway__grid,
	.chip-progress__grid { grid-template-columns: 1fr 1fr; }
	.chip-why__grid,
	.chip-news__inner { grid-template-columns: 1fr; }
	.chip-news__cta { justify-content: center; }
	.chip-duo__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.chip-pathway__grid,
	.chip-progress__grid,
	.chip-why__cards { grid-template-columns: 1fr; }
	.chip-hero__title { font-size: 2rem; }
}

/* =====================================================================
 * PHASE 2 — SHARED PAGE PRIMITIVES
 * ===================================================================== */

/* ---------- Interior page header (hero) ---------- */
.chip-page-header { padding-block: clamp(3.5rem, 7vw, 7rem); }
.chip-page-header--dark { background: var(--chip-sea-800); color: rgba(255,255,255,0.82); }
.chip-page-header--dark h1 { color: #fff; }
.chip-page-header--photo { position: relative; background: var(--chip-sea-900); color: rgba(255,255,255,0.82); overflow: clip; padding-block: clamp(3rem, 6vw, 5.5rem); }
.chip-page-header--photo h1 { color: #fff; }
.chip-page-header--photo .chip-page-header__lede { color: rgba(255,255,255,0.78); }
.chip-page-header--photo .wp-block-cover__inner-container { width: 100%; }
.chip-page-header--photo .chip-sec__inner { width: 100%; }
.chip-page-header__inner { max-width: 820px; }
.chip-page-header__inner--center { margin-inline: auto; text-align: center; }
/* Center constrained children too (lede has max-width → would sit left otherwise). */
.chip-page-header__inner--center > * { margin-inline: auto; }
.chip-page-header h1 { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.25rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; margin: 0.5rem 0; }
.chip-page-header h1 em { font-style: normal; color: var(--chip-cyan-400); }
.chip-page-header__lede { font-size: 1.15rem; line-height: 1.6; color: rgba(255,255,255,0.7); max-width: 60ch; }
.chip-page-header--light { background: var(--chip-sand-bg); }
.chip-page-header--light .chip-page-header__lede { color: var(--chip-slate); }

/* ---------- Section label (01 — Heading) ---------- */
.chip-sec--navy .chip-section-label,
.chip-sec--navy .chip-eyebrow,
.chip-page-header--dark .chip-section-label,
.chip-page-header--photo .chip-section-label { color: var(--chip-cyan-400) !important; }
.chip-section-intro { color: var(--chip-slate); font-size: 1.0625rem; line-height: 1.6; max-width: 70ch; }
.chip-sec--navy .chip-section-intro { color: rgba(255,255,255,0.7); }

/* ---------- Grids ---------- */
.chip-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.chip-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.chip-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.chip-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.chip-grid-2, .chip-grid-3, .chip-grid-4, .chip-grid-auto { margin-block: 2.5rem; }

/* ---------- Feature / value card ---------- */
.chip-feature { background: #fff; border: 1px solid var(--chip-line); border-radius: var(--chip-radius-m); padding: 1.6rem; box-shadow: var(--chip-shadow-card); transition: transform var(--chip-dur) var(--chip-ease), box-shadow var(--chip-dur) var(--chip-ease); }
.chip-feature:hover { transform: translateY(-3px); box-shadow: var(--chip-shadow-raised); }
.chip-sec--navy .chip-feature { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); box-shadow: none; }
.chip-feature__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--chip-cyan-050); color: var(--chip-cyan-600); font-size: 1.3rem; margin-bottom: 1rem; }
.chip-sec--navy .chip-feature__icon { background: rgba(22,163,204,0.18); color: var(--chip-cyan-400); }
.chip-feature__title { font-family: var(--chip-font-display); font-weight: 700; font-size: 1.15rem; color: var(--chip-sea-800); margin: 0 0 0.4rem; }
.chip-sec--navy .chip-feature__title { color: #fff; }
.chip-feature__desc { color: var(--chip-slate); font-size: 0.95rem; line-height: 1.55; margin: 0; }
.chip-sec--navy .chip-feature__desc { color: rgba(255,255,255,0.7); }

/* ---------- Team card ---------- */
.chip-team-card { background: #fff; border: 1px solid var(--chip-line); border-radius: var(--chip-radius-m); overflow: hidden; box-shadow: var(--chip-shadow-card); }
.chip-team-card__photo { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--chip-cyan-100), var(--chip-cyan-050)); display: grid; place-items: center; margin: 0; }
.chip-team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.chip-team-card__initials { font-family: var(--chip-font-display); font-weight: 800; font-size: 2.5rem; letter-spacing: -0.02em; color: var(--chip-cyan-600); }
.chip-team-card__body { padding: 1.1rem 1.25rem 1.4rem; }
.chip-team-card__name { font-family: var(--chip-font-display); font-weight: 700; font-size: 1.05rem; color: var(--chip-sea-800); margin: 0; }
.chip-team-card__role { color: var(--chip-cyan-600); font-size: 0.8rem; font-weight: 600; margin: 0.2rem 0 0; }
.chip-team-card__bio { color: var(--chip-slate); font-size: 0.88rem; line-height: 1.5; margin: 0.6rem 0 0; }

/* ---------- Numbered steps ---------- */
.chip-steps { display: grid; gap: 14px; margin-block: 2.5rem; }
.chip-step { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; background: #fff; border: 1px solid var(--chip-line); border-radius: var(--chip-radius-m); padding: 1.4rem 1.6rem; box-shadow: var(--chip-shadow-card); }
.chip-step__num { width: 38px; height: 38px; border-radius: 50%; background: var(--chip-cyan-500); color: #fff; font-family: var(--chip-font-display); font-weight: 800; display: grid; place-items: center; }
.chip-step__title { font-family: var(--chip-font-display); font-weight: 700; font-size: 1.15rem; color: var(--chip-sea-800); margin: 0 0 0.3rem; }
.chip-step__desc { color: var(--chip-slate); font-size: 0.95rem; line-height: 1.55; margin: 0; }

/* ---------- FAQ accordion ---------- */
.chip-faq__group { margin-bottom: 2.5rem; max-width: 820px; margin-inline: auto; }
/* FAQs hero: lede fits 2 lines, no bottom padding on the dark header. */
.chip-faqs-page .chip-page-header { padding-bottom: 0; }
.chip-faqs-page .chip-page-header__lede { max-width: 900px; }
/* FAQs hero accent: teal italic, no squiggle (matches comp). */
.chip-faqs-page .chip-page-header h1 em { background-image: none; font-style: italic; }
.chip-faq__cat { font-family: var(--chip-font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chip-cyan-400); margin: 0 0 1rem; }
.chip-faq__list { display: grid; gap: 12px; }
.chip-faq__item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--chip-radius-m); overflow: hidden; }
.chip-faq--light .chip-faq__item { background: #fff; border-color: var(--chip-line); box-shadow: var(--chip-shadow-card); }
.chip-faq__item > summary { cursor: pointer; list-style: none; padding: 1.1rem 1.4rem; font-family: var(--chip-font-display); font-weight: 700; font-size: 1.02rem; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.chip-faq--light .chip-faq__item > summary { color: var(--chip-sea-800); }
.chip-faq__item > summary::-webkit-details-marker { display: none; }
.chip-faq__item > summary::after { content: "+"; font-size: 1.4rem; color: var(--chip-cyan-400); transition: transform var(--chip-dur) var(--chip-ease); flex: none; }
.chip-faq__item[open] > summary::after { transform: rotate(45deg); }
.chip-faq__answer { padding: 0 1.4rem 1.3rem; color: rgba(255,255,255,0.72); line-height: 1.6; margin: 0; }
.chip-faq--light .chip-faq__answer { color: var(--chip-slate); }

/* ---------- CTA band ---------- */
.chip-cta { background: var(--chip-sea-800); color: #fff; text-align: center; }
.chip-cta__inner { max-width: 760px; margin-inline: auto; padding-inline: var(--chip-gutter); }
.chip-cta__title { color: #fff; font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 0.6rem; }
.chip-cta__title em { font-style: normal; color: var(--chip-cyan-400); }
.chip-cta p { color: rgba(255,255,255,0.72); font-size: 1.08rem; margin: 0 auto 1.75rem; max-width: 560px; }
.chip-cta__btns { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }
/* CHIP Pro CTA secondary links (Log in / Talk to our team) under the Join button */
.chip-cta__sublinks { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; margin: 1.1rem 0 0; max-width: none; }
.chip-cta--cyan .chip-cta__sublinks a { color: var(--chip-sea-900); font-size: 0.95rem; font-weight: 600; text-decoration: none; }
.chip-cta--cyan .chip-cta__sublinks a:hover { text-decoration: underline; }
.chip-cta .chip-cta__fine { font-size: 0.85rem; color: rgba(255,255,255,0.45); margin-top: 1.25rem; }
.chip-cta .chip-cta__disclaimer { font-size: 10px; line-height: 1.65; color: rgba(255,255,255,0.4); max-width: none; margin: 1.5rem -80px 0; }
@media (max-width: 900px) { .chip-cta .chip-cta__disclaimer { margin-inline: 0; } }
.chip-cta__disclaimer a { color: rgba(255,255,255,0.7); text-decoration: underline; }
.chip-cta--cyan { background: var(--chip-cyan-500); }
.chip-cta--cyan .chip-cta__title em { color: var(--chip-sea-900); }
.chip-cta--cyan p { color: rgba(255,255,255,0.9); }
.chip-cta--cyan .chip-section-label { color: var(--chip-sea-900) !important; }
.chip-cta--cyan .chip-btn, .chip-cta--cyan .wp-block-button__link { background: #fff; color: var(--chip-sea-800); border-color: #fff; box-shadow: 0 6px 18px rgba(6,36,48,0.18); }
.chip-cta--cyan .chip-btn:hover, .chip-cta--cyan .wp-block-button__link:hover { background: var(--chip-sea-800); color: #fff; border-color: var(--chip-sea-800); }
.chip-cta--cyan .chip-cta__fine { color: rgba(255,255,255,0.85); }

/* ---------- Two-column media ---------- */
.chip-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.chip-twocol__media img { border-radius: var(--chip-radius-l); box-shadow: var(--chip-shadow-card); width: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.chip-footer__grid { grid-template-columns: 1fr 1fr; }
	.chip-footer__brand { grid-column: 1 / -1; }
	.chip-footer__bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
	.chip-grid-3, .chip-grid-4 { grid-template-columns: 1fr 1fr; }
	.chip-twocol { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.chip-footer__grid, .chip-grid-2, .chip-grid-3, .chip-grid-4 { grid-template-columns: 1fr; }
	.chip-step { grid-template-columns: auto 1fr; }
}

/* ---------- Programs ---------- */
.chip-programs .chip-program { background: #fff; border: 1px solid var(--chip-line); border-radius: var(--chip-radius-l); padding: clamp(1.6rem, 3vw, 2.5rem); box-shadow: var(--chip-shadow-card); margin-bottom: 1.25rem; max-width: 880px; }
.chip-program__tag { font-family: var(--chip-font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chip-magenta-500); margin: 0 0 0.6rem; }
.chip-program__title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); margin: 0 0 0.6rem; }
.chip-program__desc { color: var(--chip-slate); font-size: 1.0625rem; line-height: 1.6; margin: 0 0 1rem; max-width: 70ch; }
.chip-program__link { margin: 0; }
.chip-program__link a { font-weight: 700; color: var(--chip-cyan-600); }

/* =====================================================================
 * PHASE 3 — EXPLORE PAGE COMPONENTS
 * ===================================================================== */

/* ---------- Filter tabs (client-side) ---------- */
.chip-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block: 1.75rem; }
.chip-filter { font-family: var(--chip-font-body); font-weight: 600; font-size: 0.9rem; padding: 0.55rem 1.1rem; border-radius: var(--chip-radius-pill); border: 1.5px solid var(--chip-line); background: #fff; color: var(--chip-sea-700); cursor: pointer; transition: all var(--chip-dur) var(--chip-ease); }
.chip-filter:hover { border-color: var(--chip-cyan-400); color: var(--chip-cyan-600); }
.chip-filter.is-active { background: var(--chip-sea-800); border-color: var(--chip-sea-800); color: #fff; }
.chip-sec--navy .chip-filter { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.8); }
.chip-sec--navy .chip-filter.is-active { background: var(--chip-cyan-500); border-color: var(--chip-cyan-500); color: #fff; }
.chip-hide { display: none !important; }

/* ---------- Pro card (Browse Professionals) — matches design .bp-card ---------- */
.chip-pro-card { background: #fff; border: 1px solid var(--chip-line); border-radius: 18px; padding: 26px 24px; display: flex; flex-direction: column; transition: transform 0.2s var(--chip-ease), box-shadow 0.2s var(--chip-ease), border-color 0.2s var(--chip-ease); }
.chip-pro-card[hidden] { display: none !important; }
.chip-pro-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); border-color: var(--chip-border); }
.chip-pro-card__top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.chip-pro-card__avatar { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--chip-font-body); font-weight: 700; font-size: 17px; color: #fff; flex: none; }
.chip-pro-card__avatar--img { overflow: hidden; background: var(--chip-line); }
.chip-pro-card__avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip-pro-card__name { font-family: var(--chip-font-display); font-weight: 700; font-size: 16px; color: var(--chip-sea-800); line-height: 1.2; margin: 0; }
.chip-pro-card__creds { font-size: 12px; font-weight: 600; color: var(--chip-cyan-600); margin: 2px 0 0; }
.chip-pro-card__role { font-size: 12px; color: var(--chip-muted); margin: 2px 0 0; }
.chip-pro-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.chip-pro-card__tag { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--chip-radius-pill); background: var(--chip-cyan-050); color: var(--chip-cyan-600); }
.chip-pro-card__bio { color: var(--chip-muted); font-size: 13px; line-height: 1.6; margin: 0 0 18px; flex: 1; }
.chip-pro-card__lock { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; border-radius: var(--chip-radius-pill); border: none; background: var(--chip-sea-800); font-family: var(--chip-font-body); font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; transition: all 0.2s var(--chip-ease); }
.chip-pro-card__lock:hover { background: var(--chip-sea-900); transform: translateY(-1px); }

/* Browse hero accent: teal italic, no squiggle (matches comp). */
.chip-browse-page .chip-page-header h1 em { background-image: none; font-style: italic; }

/* ---------- Browse controls: filters (teal active) + search + count + empty ---------- */
.chip-browse__filters { justify-content: center; gap: 8px; margin-bottom: 22px; }
.chip-browse .chip-filter { color: var(--chip-muted); }
.chip-browse .chip-filter:hover,
.chip-browse .chip-filter.is-active { background: var(--chip-cyan-200); border-color: var(--chip-cyan-500); color: var(--chip-cyan-500); }
.chip-browse__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; max-width: 760px; margin: 0 auto 36px; }
.chip-browse__search { flex: 1; min-width: 240px; padding: 13px 18px; border: 1px solid var(--chip-border); border-radius: var(--chip-radius-pill); font-family: var(--chip-font-body); font-size: 14px; color: var(--chip-sea-800); outline: none; transition: border-color 0.2s var(--chip-ease); }
.chip-browse__search:focus { border-color: var(--chip-cyan-400); }
.chip-browse__count { font-size: 13px; font-weight: 600; color: var(--chip-muted); white-space: nowrap; margin: 0; }
.chip-browse__empty { text-align: center; padding: 60px 20px; color: var(--chip-muted); font-size: 15px; }
.chip-browse__empty p { margin: 0; }
.chip-browse__reset { background: none; border: none; color: var(--chip-cyan-600); font-weight: 600; font-size: 15px; cursor: pointer; padding: 0; }
.chip-browse__reset:hover { text-decoration: underline; }

/* ---------- Archetype card ---------- */
.chip-arch { background: #fff; border: 1px solid var(--chip-line); border-radius: var(--chip-radius-l); padding: 1.75rem; box-shadow: var(--chip-shadow-card); }
.chip-arch__emoji { font-size: 2rem; line-height: 1; margin: 0 0 0.75rem; }
.chip-arch__name { font-family: var(--chip-font-display); font-weight: 800; font-size: 1.4rem; color: var(--chip-sea-800); margin: 0 0 0.4rem; }
.chip-arch__tags { font-family: var(--chip-font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chip-cyan-600); margin: 0 0 0.85rem; }
.chip-arch__desc { color: var(--chip-slate); font-size: 0.98rem; line-height: 1.55; margin: 0 0 1rem; }
.chip-arch__match-label { font-family: var(--chip-font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chip-muted); margin: 0 0 0.3rem; }
.chip-arch__match { font-weight: 700; color: var(--chip-sea-700); font-size: 0.9rem; margin: 0; }

/* ---------- Credential card (Teamopedia) ---------- */
.chip-cred { background: #fff; border: 1px solid var(--chip-line); border-radius: var(--chip-radius-m); padding: 1.4rem; box-shadow: var(--chip-shadow-card); transition: transform var(--chip-dur) var(--chip-ease), box-shadow var(--chip-dur) var(--chip-ease); }
.chip-cred:hover { transform: translateY(-3px); box-shadow: var(--chip-shadow-raised); }
.chip-cred__top { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.5rem; }
.chip-cred__acronym { font-family: var(--chip-font-display); font-weight: 800; font-size: 1.3rem; color: var(--chip-cyan-600); }
.chip-cred__cat { font-family: var(--chip-font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chip-muted); margin-left: auto; }
.chip-cred__name { font-weight: 700; color: var(--chip-sea-800); font-size: 0.98rem; margin: 0 0 0.5rem; }
.chip-cred__who { color: var(--chip-slate); font-size: 0.9rem; line-height: 1.5; margin: 0; }
.chip-cred__who b { color: var(--chip-sea-700); }

/* ---------- Article card (Cultural Coins) ---------- */
.chip-article { background: #fff; border: 1px solid var(--chip-line); border-radius: var(--chip-radius-m); overflow: hidden; box-shadow: var(--chip-shadow-card); transition: transform var(--chip-dur) var(--chip-ease), box-shadow var(--chip-dur) var(--chip-ease); }
.chip-article:hover { transform: translateY(-3px); box-shadow: var(--chip-shadow-raised); }
.chip-article__thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--chip-sea-700), var(--chip-cyan-600)); }
.chip-article__body { padding: 1.2rem 1.3rem 1.4rem; }
.chip-article__cat { font-family: var(--chip-font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chip-magenta-500); margin: 0 0 0.5rem; }
.chip-article__title { font-family: var(--chip-font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.25; color: var(--chip-sea-800); margin: 0 0 0.5rem; }
.chip-article__meta { font-size: 0.8rem; color: var(--chip-muted); margin: 0; }

/* ---------- Featured article ---------- */
.chip-featured { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; background: #fff; border: 1px solid var(--chip-line); border-radius: var(--chip-radius-l); overflow: hidden; box-shadow: var(--chip-shadow-card); }
.chip-featured__media { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--chip-sea-800), var(--chip-cyan-600)); height: 100%; }
.chip-featured__body { padding: clamp(1.5rem,3vw,2.5rem); }
.chip-featured__cat { font-family: var(--chip-font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chip-magenta-500); }
.chip-featured__title { font-size: clamp(1.4rem,1rem+1.4vw,2rem); margin: 0.5rem 0; }

/* ---------- Partner type card ---------- */
.chip-partner-type { background: #fff; border: 1px solid var(--chip-line); border-radius: var(--chip-radius-l); padding: 1.75rem; box-shadow: var(--chip-shadow-card); }
.chip-partner-type__icon { font-size: 1.8rem; margin: 0 0 0.85rem; }
.chip-partner-type__title { font-family: var(--chip-font-display); font-weight: 700; font-size: 1.2rem; color: var(--chip-sea-800); margin: 0 0 0.5rem; }
.chip-partner-type__desc { color: var(--chip-slate); font-size: 0.95rem; line-height: 1.55; margin: 0; }

@media (max-width: 900px) {
	.chip-featured { grid-template-columns: 1fr; }
	.chip-featured__media { aspect-ratio: 16/9; }
}

/* ---------- Two-column media image ---------- */
.chip-twocol__media { margin: 0; }
.chip-twocol__media .wp-block-image, .chip-round-img { margin: 0; }
.chip-twocol__media img, .chip-round-img img { border-radius: var(--chip-radius-l); box-shadow: var(--chip-shadow-card); width: 100%; display: block; }

/* =====================================================================
 * GLOBAL POLISH SWEEP
 * ===================================================================== */

/* Selection + smooth anchor offset under sticky header */
::selection { background: var(--chip-cyan-200); color: var(--chip-sea-900); }
:target, [id] { scroll-margin-top: 88px; }

/* Typographic finishing */
h1, h2, .chip-sec__title, .chip-cta__title, .chip-teaser__title, .chip-hero__title,
.chip-page-header h1, .chip-featured__title, .chip-program__title { text-wrap: balance; }
p, .chip-page-header__lede, .chip-section-intro, .chip-feature__desc, .chip-card__desc { text-wrap: pretty; }

/* Header gains a shadow once the page is scrolled */
.chip-nav { transition: box-shadow var(--chip-dur) var(--chip-ease), background-color var(--chip-dur) var(--chip-ease); }
.chip-header.is-scrolled .chip-nav { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); background: rgba(12, 28, 42, 0.98); }

/* Inline prose links (not buttons/nav) get a hover underline */
.chip-section-intro a:not(.chip-btn),
.chip-twocol__text a:not(.chip-btn),
.chip-founder__inner a:not(.chip-btn) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Consistent media polish */
.wp-block-image img { border-radius: var(--chip-radius-m); }
.chip-featured__media, .chip-article__thumb, .chip-twocol__media img, .chip-round-img img { will-change: transform; }

/* ---- Scroll reveal (JS-gated; no-JS shows everything) ---- */
body.js-reveal .chip-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--chip-ease), transform 0.6s var(--chip-ease); }
body.js-reveal .chip-reveal.is-in { opacity: 1; transform: none; }
/* stagger cards inside grids */
body.js-reveal .chip-reveal.is-in .chip-grid-2 > *,
body.js-reveal .chip-reveal.is-in .chip-grid-3 > *,
body.js-reveal .chip-reveal.is-in .chip-pathway__grid > *,
body.js-reveal .chip-reveal.is-in .chip-progress__grid > *,
body.js-reveal .chip-reveal.is-in [data-filter-grid] > * { animation: chip-rise 0.55s var(--chip-ease) both; }
body.js-reveal .chip-reveal.is-in .chip-grid-3 > *:nth-child(2),
body.js-reveal .chip-reveal.is-in .chip-pathway__grid > *:nth-child(2) { animation-delay: 0.06s; }
body.js-reveal .chip-reveal.is-in .chip-grid-3 > *:nth-child(3),
body.js-reveal .chip-reveal.is-in .chip-pathway__grid > *:nth-child(3) { animation-delay: 0.12s; }
body.js-reveal .chip-reveal.is-in .chip-pathway__grid > *:nth-child(n+4) { animation-delay: 0.16s; }
@keyframes chip-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	body.js-reveal .chip-reveal { opacity: 1 !important; transform: none !important; transition: none; }
	body.js-reveal .chip-reveal.is-in * { animation: none !important; }
}

/* ============================================================
   Cultural Coins page
   ============================================================ */

/* Filter tabs (shared; light by default, dark variant on navy) */
.chip-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.chip-filter { padding: 8px 18px; border-radius: 100px; font-family: var(--chip-font-body); font-size: 13px; font-weight: 600; border: 1.5px solid var(--chip-line); background: #fff; color: var(--chip-muted); cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; }
.chip-filter:hover, .chip-filter.is-active { border-color: var(--chip-cyan-500); color: var(--chip-cyan-600); background: var(--chip-cyan-050); }
.chip-filters--dark { margin-bottom: 0; }
.chip-filters--dark .chip-filter { background: transparent; border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.5); }
.chip-filters--dark .chip-filter:hover, .chip-filters--dark .chip-filter.is-active { background: var(--chip-cyan-500); border-color: var(--chip-cyan-500); color: #fff; }
.chip-hide { display: none !important; }

/* Hero — tags + CTA */
.chip-coins-hero__cta { margin-top: 1.75rem; }
.chip-coins-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.5rem; }
.chip-coins-tag { margin: 0; font-size: 12px; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); padding: 5px 14px; border-radius: 100px; }

/* Featured article card */
.chip-cfeat { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 32px rgba(0,0,0,0.06); margin-top: 1.25rem; }
.chip-cfeat > * { margin-block-start: 0 !important; }
.chip-cfeat__media { position: relative; min-height: 340px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--chip-sea-800) 0%, #0f2a3d 100%); overflow: hidden; }
.chip-cfeat__media::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 50%, rgba(24,161,206,0.2) 0%, transparent 60%); }
.chip-cfeat__media-label { position: relative; margin: 0; font-family: var(--chip-font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chip-cyan-400); }
.chip-cfeat__body { padding: 40px; display: flex; flex-direction: column; align-items: flex-start; }
.chip-cfeat__body > * { margin-block-start: 0 !important; }
.chip-pill { display: inline-block; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; background: var(--chip-cyan-200); color: var(--chip-cyan-700); padding: 4px 12px; border-radius: 100px; }
.chip-cfeat__title { font-family: var(--chip-font-display); font-size: 28px; font-weight: 700; color: var(--chip-sea-800); line-height: 1.2; margin: 14px 0 12px; }
.chip-cfeat__excerpt { font-size: 14px; color: var(--chip-muted); line-height: 1.75; margin: 0 0 20px; }

/* Author row (shared) */
.chip-author { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.chip-author__avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--chip-cyan-500); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin: 0; }
.chip-author__meta { display: flex; flex-direction: column; }
.chip-author__name { font-size: 13px; font-weight: 600; color: var(--chip-sea-800); margin: 0; }
.chip-author__detail { font-size: 11px; color: var(--chip-muted); margin: 0; }
.chip-author--dark .chip-author__name { color: #fff; }
.chip-author--dark .chip-author__detail { color: rgba(255,255,255,0.35); }

/* Video section */
.chip-cvid__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 36px; }
.chip-cvid__title { font-family: var(--chip-font-display); font-size: clamp(28px, 3.5vw, 42px); color: #fff; line-height: 1.1; margin: 8px 0 0; }
.chip-cvid__title em { color: var(--chip-cyan-400); font-style: italic; }

.chip-vfeat { display: grid; grid-template-columns: 1fr 1fr; min-height: 300px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; overflow: hidden; margin-bottom: 20px; text-decoration: none; }
.chip-vfeat__thumb { position: relative; display: flex; align-items: center; justify-content: center; min-height: 280px; background: linear-gradient(135deg, #0f2a3d, #0a1f30); }
.chip-vfeat__thumb::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 40% 50%, rgba(24,161,206,0.15) 0%, transparent 60%); }
.chip-play { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: var(--chip-magenta-500); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 8px 24px rgba(231,16,110,0.4); transition: transform 0.2s; }
.chip-vfeat:hover .chip-play, .chip-vcard:hover .chip-play { transform: scale(1.1); }
.chip-play--sm { width: 40px; height: 40px; font-size: 14px; }
.chip-vfeat__badge, .chip-vcard__badge { position: absolute; top: 14px; left: 14px; background: var(--chip-magenta-500); color: #fff; font-size: 9px; font-weight: 700; padding: 3px 10px; border-radius: 100px; letter-spacing: 1px; text-transform: uppercase; }
.chip-vfeat__time, .chip-vcard__time { position: absolute; bottom: 14px; right: 14px; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.chip-vfeat__info { padding: 32px 36px; display: flex; flex-direction: column; justify-content: center; }
.chip-vfeat__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--chip-cyan-400); margin-bottom: 10px; }
.chip-vfeat__title { font-family: var(--chip-font-display); font-size: 22px; color: #fff; line-height: 1.2; margin-bottom: 12px; }
.chip-vfeat__excerpt { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.7; margin-bottom: 20px; }
.chip-vfeat__cta { display: inline-flex; align-self: flex-start; margin-top: 4px; padding: 10px 20px; font-size: 13px; }

.chip-vgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.chip-vcard { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; overflow: hidden; text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.chip-vcard:hover { border-color: rgba(24,161,206,0.35); transform: translateY(-3px); }
.chip-vcard__thumb { position: relative; display: flex; align-items: center; justify-content: center; height: 140px; background: linear-gradient(135deg, #0f2a3d, #0a1f30); }
.chip-vcard__badge--amber { background: rgba(231,182,92,0.2); color: var(--chip-amber-500); border: 1px solid rgba(231,182,92,0.3); }
.chip-vcard__badge--teal { background: rgba(24,161,206,0.2); color: var(--chip-cyan-400); border: 1px solid rgba(24,161,206,0.3); }
.chip-vcard__body { padding: 16px; }
.chip-vcard__title { display: block; font-family: var(--chip-font-display); font-size: 14px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 6px; }
.chip-vcard__meta { font-size: 11px; color: rgba(255,255,255,0.4); }
.chip-cvid__sub { display: inline-block; margin-top: 28px; color: var(--chip-cyan-400); font-size: 14px; font-weight: 700; text-decoration: none; }
.chip-cvid__sub:hover { color: #fff; }

/* Article grid */
.chip-agrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.article-card { display: flex; flex-direction: column; align-items: flex-start; background: #fff; border: 1px solid var(--chip-line); border-radius: 14px; overflow: hidden; padding: 0 0 24px; text-decoration: none; transition: box-shadow 0.2s, transform 0.2s; }
.article-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
.article-card__thumb { width: 100%; height: 150px; background: linear-gradient(135deg, var(--chip-cyan-700), var(--chip-sea-800)); }
.article-card__tag { font-size: 11px; font-weight: 700; color: var(--chip-cyan-600); margin: 20px 24px 8px; }
.article-card__title { font-family: var(--chip-font-display); font-size: 15px; font-weight: 700; color: var(--chip-sea-800); line-height: 1.4; margin: 0 24px 8px; }
.article-card__excerpt { font-size: 12px; color: var(--chip-muted); line-height: 1.6; margin: 0 24px 16px; }
.article-card__foot { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; padding: 0 24px; }
.article-card__read-time { font-size: 12px; color: var(--chip-muted); }
.article-card__read { font-size: 13px; font-weight: 600; color: var(--chip-magenta-500); }

/* Dynamic-post tweaks: links + thumbnails */
.chip-cfeat__media { text-decoration: none; }
.chip-cfeat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chip-cfeat__title a { color: inherit; text-decoration: none; }
.chip-cfeat__title a:hover { color: var(--chip-cyan-600); }
.chip-cfeat__more { margin: 0; }
.article-card__thumb { position: relative; overflow: hidden; }
.article-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Post archive (category / tag / date) */
.chip-archive__head .chip-sec__inner { max-width: 820px; }
.chip-archive__empty { text-align: center; color: var(--chip-muted); padding: 3rem 0; margin: 0; }
.chip-pagination { margin-top: clamp(2rem, 5vw, 3.5rem); }
.chip-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--chip-line); border-radius: 10px; background: #fff; color: var(--chip-sea-800); font-weight: 600; font-size: 14px; text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.chip-pagination .page-numbers:hover { border-color: var(--chip-cyan-500); color: var(--chip-cyan-600); }
.chip-pagination .page-numbers.current { background: var(--chip-cyan-500); border-color: var(--chip-cyan-500); color: #fff; }
.chip-pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* Cultural Coins responsive */
@media (max-width: 980px) {
	.chip-vgrid { grid-template-columns: 1fr 1fr; }
	.chip-agrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
	.chip-cfeat { grid-template-columns: 1fr; }
	.chip-vfeat { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.chip-vgrid, .chip-agrid { grid-template-columns: 1fr; }
}

/* =========================================================================
 * How It Works
 * ===================================================================== */

/* Outline button for light backgrounds (line border, navy text). */
.chip-btn--outline-dark { background: transparent; color: var(--chip-sea-800); border-color: var(--chip-line); box-shadow: none; }
.chip-btn--outline-dark:hover { border-color: var(--chip-cyan-500); color: var(--chip-cyan-600); transform: translateY(-1px); }
/* Paint the inner <a> for these block buttons so their face matches the variant
 * (the global ":not(.is-style-outline) .wp-block-button__link" rule would otherwise
 * fill it cyan). Same specificity, declared later → wins. */
.wp-block-button.chip-btn--magenta .wp-block-button__link { background: var(--chip-magenta-500); color: var(--chip-white); }
.wp-block-button.chip-btn--magenta .wp-block-button__link:hover { background: #cf2f99; color: var(--chip-white); }
.wp-block-button.chip-btn--outline-dark .wp-block-button__link { background: transparent; color: var(--chip-sea-800); border-color: var(--chip-line); }
.wp-block-button.chip-btn--outline-dark .wp-block-button__link:hover { border-color: var(--chip-cyan-500); color: var(--chip-cyan-600); }

/* --- Sticky progress nav (sits below the 64px site header) --------------- */
.chip-hiw-nav { position: sticky; top: 64px; z-index: 90; background: #fff; border-bottom: 1px solid var(--chip-line); padding: 0; }
.chip-hiw-nav__inner { max-width: var(--chip-content); margin-inline: auto; padding-inline: var(--chip-gutter); display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chip-hiw-nav__inner::-webkit-scrollbar { display: none; }
.chip-hiw-nav__item { display: flex; align-items: center; gap: 10px; padding: 14px 22px; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--chip-muted); border-bottom: 3px solid transparent; transition: color 0.2s, border-color 0.2s; }
.chip-hiw-nav__item:hover { color: var(--chip-sea-800); }
.chip-hiw-nav__item.is-active { color: var(--chip-cyan-600); border-bottom-color: var(--chip-cyan-500); }
.chip-hiw-nav__num { width: 22px; height: 22px; border-radius: 50%; background: var(--chip-line); color: var(--chip-muted); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; transition: background 0.2s, color 0.2s; }
.chip-hiw-nav__item.is-active .chip-hiw-nav__num { background: var(--chip-cyan-500); color: #fff; }
.chip-hiw-nav__item.is-done .chip-hiw-nav__num { background: var(--chip-green); color: #fff; }
/* anchor offset so smooth-scroll lands below both sticky bars */
#hiw-what, #hiw-how, #hiw-why, #hiw-for-you, #hiw-tech { scroll-margin-top: 128px; }

/* --- Hero Q&A cards ------------------------------------------------------ */
.chip-hiw-hero__cta { margin-block: 1.75rem 0; }
.chip-hiw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 2.75rem; align-items: stretch; grid-auto-rows: 1fr; }
.chip-hiw-cards > * { margin-block-start: 0 !important; }
.chip-hiw-card { height: 100%; background: #fff; border: 1px solid var(--chip-line); border-radius: 16px; padding: 24px; box-shadow: var(--chip-shadow-card); }
.chip-hiw-card__q { font-size: 15px; font-weight: 700; color: var(--chip-sea-800); margin: 0 0 6px; }
.chip-hiw-card__a { font-size: 13px; color: var(--chip-muted); line-height: 1.65; margin: 0; }

/* --- 01 What We Do: accent cards ---------------------------------------- */
.chip-what-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 2.5rem; align-items: stretch; grid-auto-rows: 1fr; }
.chip-what-grid > * { margin-block-start: 0 !important; height: 100%; }
.chip-what-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--chip-line); border-radius: 18px; padding: 32px; transition: transform 0.25s var(--chip-ease), box-shadow 0.25s var(--chip-ease); }
.chip-what-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,0.07); }
.chip-what-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--chip-cyan-500); }
.chip-what-card--pink::before { background: var(--chip-magenta-500); }
.chip-what-card--green::before { background: var(--chip-green); }
.chip-what-card--yellow::before { background: var(--chip-amber-500); }
.chip-what-card__role { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--chip-cyan-600); margin: 0 0 8px; }
.chip-what-card__title { font-family: var(--chip-font-display); font-size: 22px; font-weight: 700; color: var(--chip-sea-800); line-height: 1.2; margin: 0 0 10px; }
.chip-what-card__desc { font-size: 14px; color: var(--chip-muted); line-height: 1.75; margin: 0 0 14px; }
.chip-what-card__example { background: var(--chip-sand-bg); border-left: 3px solid var(--chip-cyan-200); border-radius: 10px; padding: 14px 16px; font-size: 13px; font-style: italic; color: var(--chip-sea-800); line-height: 1.6; margin: 0; }

/* --- 02 How We Do It: step accordion ------------------------------------ */
.chip-steps { display: flex; flex-direction: column; gap: 0; margin-top: 2.5rem; }
.chip-step { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 0; cursor: pointer; }
/* continuous connector line behind the number circles (timeline look) */
.chip-step:not(:last-child)::after { content: ""; position: absolute; left: 25px; top: 52px; bottom: 0; width: 2px; background: var(--chip-line); transition: background 0.3s; }
.chip-step.is-open:not(:last-child)::after { background: var(--chip-sea-800); }
.chip-step__num { position: relative; z-index: 1; width: 52px; height: 52px; margin: 0; border-radius: 50%; border: 2px solid var(--chip-line); background: #fff; color: var(--chip-muted); font-family: var(--chip-font-display); font-size: 20px; font-weight: 700; display: grid; place-items: center; transition: all 0.3s var(--chip-ease); }
.chip-step.is-open .chip-step__num { background: var(--chip-sea-800); border-color: var(--chip-sea-800); color: #fff; transform: scale(1.08); box-shadow: 0 4px 16px rgba(12,42,56,0.25); }
.chip-step__body { padding: 4px 0 40px 28px; }
.chip-step__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--chip-muted); margin: 8px 0 8px; }
.chip-step.is-open .chip-step__eyebrow { color: var(--chip-cyan-600); }
.chip-step__title { font-family: var(--chip-font-display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; color: var(--chip-sea-800); line-height: 1.2; margin: 0 0 10px; }
.chip-step__desc { font-size: 15px; color: var(--chip-muted); line-height: 1.8; max-width: 600px; margin: 0 0 16px; }
.chip-step__detail { display: none; background: #fff; border: 1px solid var(--chip-line); border-radius: 14px; padding: 20px 24px; max-width: 560px; }
.chip-step.is-open .chip-step__detail { display: block; }
.chip-step__detail-title { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--chip-cyan-600); margin: 0 0 12px; }
.chip-step__detail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.chip-step__detail-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--chip-sea-800); line-height: 1.55; }
.chip-step__detail-list li::before { content: "✓"; color: var(--chip-green); font-weight: 700; flex-shrink: 0; }

/* --- 03 Why It Matters: reasons + sticky pullquote ---------------------- */
.chip-why-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-top: 2.5rem; }
.chip-why-reasons { display: flex; flex-direction: column; gap: 28px; }
.chip-why-reason { display: flex; gap: 20px; align-items: flex-start; padding-bottom: 28px; border-bottom: 1px solid var(--chip-line); }
.chip-why-reason:last-child { border-bottom: none; padding-bottom: 0; }
.chip-why-reason__icon { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-size: 20px; margin: 0; background: var(--chip-cyan-050); }
.chip-why-reason--amber .chip-why-reason__icon { background: #fef3c7; }
.chip-why-reason--green .chip-why-reason__icon { background: #f0fdf4; }
.chip-why-reason--pink .chip-why-reason__icon { background: #fdf2f8; }
.chip-why-reason__title { font-size: 16px; font-weight: 700; color: var(--chip-sea-800); margin: 0 0 6px; }
.chip-why-reason__desc { font-size: 14px; color: var(--chip-muted); line-height: 1.7; margin: 0; }
.chip-why-pullquote { position: sticky; top: 140px; background: var(--chip-sea-800); border-radius: 20px; padding: 40px; }
.chip-pullquote__q { font-family: var(--chip-font-display); font-size: 24px; font-weight: 700; color: #fff; line-height: 1.3; margin: 0 0 20px; }
.chip-pullquote__q em { font-style: normal; color: var(--chip-cyan-400); }
.chip-pullquote__sub { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.7; margin: 0 0 24px; }
.chip-stat-rows { display: flex; flex-direction: column; gap: 16px; }
.chip-stat-row { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.chip-stat-row:last-child { border-bottom: none; padding-bottom: 0; }
.chip-stat-row__num { font-family: var(--chip-font-display); font-size: 30px; font-weight: 700; color: var(--chip-cyan-400); line-height: 1; min-width: 54px; margin: 0; }
.chip-stat-row__text { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.6; margin: 4px 0 0; }

/* --- 04 Why It Matters For You: persona tabs ---------------------------- */
.chip-persona-tabs { margin-top: 2.25rem; margin-bottom: 2.25rem; }
.chip-persona-tabs .chip-filter.is-active { background: var(--chip-sea-800); border-color: var(--chip-sea-800); color: #fff; }
.chip-persona-content { display: none; }
.chip-persona-content:not(.chip-hide) { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.chip-persona-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; margin-bottom: 14px; background: var(--chip-cyan-050); color: var(--chip-cyan-700); border: 1px solid var(--chip-cyan-200); }
.chip-persona-story h3 { font-family: var(--chip-font-display); font-size: clamp(24px, 3vw, 36px); font-weight: 700; color: var(--chip-sea-800); line-height: 1.2; margin: 0 0 12px; }
.chip-persona-story p { font-size: 15px; color: var(--chip-muted); line-height: 1.8; margin: 0 0 12px; }
.chip-persona-story__callout { background: var(--chip-cyan-050); border-left: 3px solid var(--chip-cyan-400); border-radius: 10px; padding: 14px 16px; font-style: italic; color: var(--chip-sea-800); }
.chip-persona-journey { display: flex; flex-direction: column; gap: 12px; }
.chip-journey-step { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--chip-line); border-radius: 14px; padding: 20px; }
.chip-journey-step__num { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--chip-cyan-050); border: 1.5px solid var(--chip-cyan-200); color: var(--chip-cyan-600); }
.chip-journey-step h4 { font-size: 13px; font-weight: 700; color: var(--chip-sea-800); margin: 0 0 3px; }
.chip-journey-step p { font-size: 12px; color: var(--chip-muted); line-height: 1.55; margin: 0; }
/* persona accents */
.chip-persona--blue .chip-persona-tag { background: #eff6ff; color: #2563EB; border-color: #bfdbfe; }
.chip-persona--blue .chip-journey-step__num { background: #eff6ff; border-color: #bfdbfe; color: #2563EB; }
.chip-persona--green .chip-persona-tag { background: #f0fdf4; color: #059669; border-color: #bbf7d0; }
.chip-persona--green .chip-journey-step__num { background: #f0fdf4; border-color: #bbf7d0; color: #059669; }
.chip-persona--purple .chip-persona-tag { background: #f5f3ff; color: #7C3AED; border-color: #ddd6fe; }
.chip-persona--purple .chip-journey-step__num { background: #f5f3ff; border-color: #ddd6fe; color: #7C3AED; }
.chip-persona--amber .chip-persona-tag { background: #fffbeb; color: #D97706; border-color: #fde68a; }
.chip-persona--amber .chip-journey-step__num { background: #fffbeb; border-color: #fde68a; color: #D97706; }

/* --- 05 See the Technology: prototype ----------------------------------- */
.chip-tech-label { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--chip-cyan-600); background: var(--chip-cyan-050); border-radius: 100px; padding: 5px 14px; margin: 0 0 14px; }
.chip-tech-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-block: 2.25rem 1.25rem; }
.chip-tech-tab { padding: 9px 18px; border-radius: 100px; border: 1.5px solid var(--chip-line); background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--chip-muted); transition: all 0.2s; }
.chip-tech-tab:hover { border-color: var(--chip-cyan-500); color: var(--chip-sea-800); }
.chip-tech-tab.is-active { background: var(--chip-sea-800); border-color: var(--chip-sea-800); color: #fff; }
.chip-proto-wrap { border-radius: 20px; overflow: hidden; box-shadow: 0 18px 60px rgba(12,42,56,0.18); }
.chip-proto-screen { display: none; }
.chip-proto-screen.is-active { display: block; }
.chip-proto { min-height: 520px; }
.chip-proto-logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--chip-font-display); font-weight: 800; color: #fff; font-size: 15px; }
.chip-proto-logo__dot { width: 22px; height: 22px; border-radius: 50%; background: var(--chip-cyan-500); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--chip-sea-900); }
/* quiz */
.chip-proto--quiz { background: var(--chip-sea-900); }
.chip-proto-quiz-top { background: var(--chip-sea-800); padding: 16px 28px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.chip-proto-progress { flex: 1; height: 4px; background: rgba(255,255,255,0.1); border-radius: 100px; overflow: hidden; }
.chip-proto-progress__fill { display: block; height: 100%; background: var(--chip-cyan-400); border-radius: 100px; }
.chip-proto-q-count { font-size: 12px; color: rgba(255,255,255,0.5); white-space: nowrap; }
.chip-proto-skip { font-size: 12px; color: rgba(255,255,255,0.5); white-space: nowrap; cursor: pointer; }
.chip-proto-skip:hover { color: #fff; }
.chip-proto-q-area { padding: 40px 48px; }
.chip-proto-q-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--chip-cyan-400); margin: 0 0 12px; }
.chip-proto-q-eyebrow--amber { color: var(--chip-amber-500); }
.chip-proto-q-text { font-family: var(--chip-font-display); font-size: clamp(20px, 2.5vw, 28px); font-weight: 700; color: #fff; line-height: 1.25; margin: 0 0 28px; }
.chip-proto-answers { display: flex; flex-direction: column; gap: 10px; }
.chip-proto-answer { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px 18px; cursor: pointer; transition: all 0.2s; }
.chip-proto-answer:hover { background: rgba(255,255,255,0.08); border-color: rgba(24,161,206,0.4); }
.chip-proto-answer.selected { background: rgba(24,161,206,0.12); border-color: var(--chip-cyan-400); }
.chip-proto-answer__letter { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.5); }
.chip-proto-answer.selected .chip-proto-answer__letter { background: var(--chip-cyan-500); border-color: var(--chip-cyan-500); color: #fff; }
.chip-proto-answer__text { font-size: 14px; color: rgba(255,255,255,0.72); line-height: 1.4; }
.chip-proto-continue { margin-top: 24px; width: 100%; padding: 14px; background: var(--chip-magenta-500); color: #fff; border: none; border-radius: 100px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.chip-proto-continue:disabled { opacity: 0.4; cursor: not-allowed; }
.chip-proto-continue:not(:disabled):hover { transform: translateY(-2px); }
/* signup */
.chip-proto--signup { background: var(--chip-sea-900); padding: 56px 48px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.chip-proto-signup__title { font-family: var(--chip-font-display); font-size: 32px; font-weight: 800; color: #fff; margin: 0 0 12px; }
.chip-proto-signup__lede { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.7; max-width: 460px; margin: 0 0 28px; }
.chip-proto-signup__lede em { color: var(--chip-cyan-400); font-style: normal; }
.chip-proto-input { width: 100%; max-width: 420px; padding: 14px 18px; margin-bottom: 12px; background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.15); border-radius: 12px; color: #fff; font-size: 14px; }
.chip-proto-input::placeholder { color: rgba(255,255,255,0.4); }
.chip-proto-input:focus { outline: none; border-color: var(--chip-cyan-400); }
/* result */
.chip-proto--result { background: var(--chip-sea-900); padding: 48px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.chip-proto-result-icon { width: 96px; height: 96px; border-radius: 50%; background: rgba(24,161,206,0.15); border: 3px solid var(--chip-cyan-500); display: grid; place-items: center; font-size: 40px; margin-bottom: 20px; box-shadow: 0 0 40px rgba(24,161,206,0.2); }
.chip-proto-result-name { font-family: var(--chip-font-display); font-size: 42px; font-weight: 800; color: #fff; margin: 0 0 12px; }
.chip-proto-result-tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.chip-proto-result-tag { background: rgba(24,161,206,0.15); border: 1px solid rgba(24,161,206,0.3); padding: 4px 14px; border-radius: 100px; font-size: 12px; font-weight: 600; color: var(--chip-cyan-200); }
.chip-proto-result-desc { font-size: 15px; color: rgba(255,255,255,0.55); max-width: 520px; line-height: 1.75; margin: 0 0 28px; }
.chip-proto-match-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 20px 24px; max-width: 460px; width: 100%; margin-bottom: 24px; text-align: left; }
.chip-proto-match-label { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--chip-amber-500); margin: 0 0 8px; }
.chip-proto-match-text { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.6; margin: 0; }
.chip-proto-result-btns { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.chip-proto-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--chip-magenta-500); color: #fff; padding: 15px 32px; border: none; border-radius: 100px; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; transition: all 0.2s; }
.chip-proto-foot { display: flex; justify-content: center; margin-top: 28px; }
.chip-proto-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(231,65,173,0.35); }
.chip-proto-link { background: none; border: none; color: rgba(255,255,255,0.55); font-size: 13px; font-weight: 600; cursor: pointer; }
.chip-proto-link:hover { color: #fff; }
.chip-proto-fine { font-size: 11px; color: rgba(255,255,255,0.4); margin: 16px 0 0; }
/* dashboard */
.chip-proto--dash { background: var(--chip-sand-bg); }
.chip-proto-dash-nav { background: var(--chip-sea-800); padding: 14px 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chip-proto-dash-badge { font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 100px; }
.chip-proto-dash-badge--teal { background: rgba(24,161,206,0.2); color: var(--chip-cyan-200); }
.chip-proto-dash-tabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.chip-proto-dash-tab { padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.45); white-space: nowrap; }
.chip-proto-dash-tab.is-active { background: rgba(24,161,206,0.15); color: var(--chip-cyan-400); }
.chip-proto-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0; }
.chip-proto-dash-body { padding: 24px; }
.chip-proto-dash-welcome { background: var(--chip-cyan-050); border-left: 4px solid var(--chip-cyan-500); border-radius: 14px; padding: 18px 22px; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.chip-proto-dash-welcome h4 { font-size: 15px; font-weight: 700; color: var(--chip-sea-800); margin: 0 0 2px; }
.chip-proto-dash-welcome p { font-size: 12px; color: var(--chip-muted); margin: 0; }
.chip-proto-dash-pill { font-size: 11px; font-weight: 700; color: var(--chip-cyan-700); background: #fff; border-radius: 100px; padding: 6px 14px; white-space: nowrap; }
.chip-proto-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.chip-proto-stat-card { background: #fff; border: 1px solid var(--chip-line); border-radius: 12px; padding: 16px; text-align: center; }
.chip-proto-stat-card__num { display: block; font-family: var(--chip-font-display); font-size: 28px; font-weight: 700; color: var(--chip-cyan-500); }
.chip-proto-stat-card__num--green { color: var(--chip-green); }
.chip-proto-stat-card__num--pink { color: var(--chip-magenta-500); }
.chip-proto-stat-card__label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; color: var(--chip-muted); margin-top: 3px; }
.chip-proto-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chip-proto-dash-card { background: #fff; border: 1px solid var(--chip-line); border-radius: 12px; padding: 18px; }
.chip-proto-dash-card h5 { font-size: 12px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--chip-sea-800); margin: 0 0 12px; }
.chip-proto-match-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--chip-line); }
.chip-proto-match-row:last-child { border-bottom: none; }
.chip-proto-match-info { flex: 1; display: flex; flex-direction: column; }
.chip-proto-match-name { font-size: 13px; font-weight: 700; color: var(--chip-sea-800); }
.chip-proto-match-cred { font-size: 11px; color: var(--chip-muted); }
.chip-proto-match-status { font-size: 11px; font-weight: 600; color: var(--chip-green); white-space: nowrap; }
.chip-proto-goal-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.chip-proto-goal-row:last-child { margin-bottom: 0; }
.chip-proto-goal-label { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--chip-sea-800); }
.chip-proto-goal-bar { height: 6px; background: var(--chip-line); border-radius: 100px; overflow: hidden; }
.chip-proto-goal-fill { display: block; height: 100%; border-radius: 100px; }

/* --- Supported By band (above CTA) -------------------------------------- */
/* Navy band — continuous with the CTA below it (same sea-800). White logos. */
.chip-supporters { background: var(--chip-sea-800); border-top: 1px solid rgba(255,255,255,0.06); padding-block: 52px; }
.chip-supporters__head { text-align: center; margin-bottom: 36px; }
.chip-supporters__label { font-family: var(--chip-font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin: 0 0 8px; }
.chip-supporters__lede { font-size: 13px; color: rgba(255,255,255,0.25); margin: 0; }
.chip-supporters__logos { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0; row-gap: 28px; }
.chip-supporters__logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin: 0; padding: 0 32px; border-right: 1px solid rgba(255,255,255,0.08); text-align: center; font-family: var(--chip-font-body); color: #fff; opacity: 0.6; transition: opacity 0.2s; }
.chip-supporters__logo:last-child { border-right: none; }
.chip-supporters__logo:hover { opacity: 1; }
.chip-supporters__badge { background: #6366f1; color: #fff; font-size: 13px; font-weight: 800; padding: 5px 10px; border-radius: 6px; letter-spacing: -0.5px; }
/* per-brand wordmarks */
.chip-supporters__logo--a16z { flex-direction: row; gap: 8px; }
.chip-supporters__a16z-text { display: flex; flex-direction: column; text-align: left; font-size: 13px; font-weight: 700; line-height: 1.1; }
.chip-supporters__logo--bgv { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.15; }
.chip-supporters__logo--life { font-size: 16px; font-weight: 600; letter-spacing: 0.5px; }
.chip-supporters__logo--gen8 { font-size: 20px; font-weight: 800; letter-spacing: -1px; }
.chip-supporters__logo--nwm { font-family: Georgia, serif; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.15; }
.chip-supporters__logo--nwm sup { font-size: 9px; }
.chip-supporters__logo--aws { font-size: 22px; font-weight: 300; letter-spacing: -1px; line-height: 1; }
.chip-supporters__awsbar { width: 36px; height: 2px; background: linear-gradient(to right, #ff9900, transparent); border-radius: 2px; margin-top: 2px; }
.chip-supporters__logo--njeda { font-size: 22px; font-weight: 900; letter-spacing: -1px; line-height: 1; }
.chip-supporters__sub { font-size: 8px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 2px; }
.chip-supporters__fine { text-align: center; margin: 24px 0 0; font-size: 11px; font-style: italic; color: rgba(255,255,255,0.2); }

/* --- How It Works responsive -------------------------------------------- */
@media (max-width: 980px) {
	.chip-hiw-cards { grid-template-columns: 1fr; }
	.chip-what-grid { grid-template-columns: 1fr; }
	.chip-why-split { grid-template-columns: 1fr; gap: 32px; }
	.chip-why-pullquote { position: static; }
	.chip-persona-content:not(.chip-hide) { grid-template-columns: 1fr; gap: 24px; }
	.chip-proto-stats { grid-template-columns: repeat(2, 1fr); }
	.chip-proto-dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.chip-proto-q-area, .chip-proto--signup, .chip-proto--result { padding-inline: 24px; }
	.chip-step__body { padding-left: 20px; }
	.chip-step { grid-template-columns: 56px 1fr; }
	.chip-supporters__logo { padding: 4px 16px; font-size: 13px; }
}

/* =====================================================================
 * ABOUT PAGE — mission stats, mission statement, story timeline,
 * commitments, team grids + bio modal. Pixel-matched to chip30.css.
 * ===================================================================== */

/* ---------- Mission hero (dark): text + stat cards ---------- */
.chip-mission { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 80px); align-items: center; margin-top: 2rem; }
.chip-mission__text > p { font-size: 16px; color: rgba(255,255,255,0.65); line-height: 1.8; margin: 0 0 16px; }
.chip-mstats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.chip-mstat { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 24px; text-align: center; }
.chip-mstat .chip-mstat__num { font-family: var(--chip-font-display); font-weight: 800; font-size: 40px; color: var(--chip-cyan-400); display: block; margin: 0 0 6px; letter-spacing: -0.01em; }
.chip-mstat p { font-size: 13px; color: rgba(255,255,255,0.5); margin: 0; }
/* Equal-height + top-aligned stat cards (WP is-layout-flow injects margin-block-start on non-first children). */
.chip-mission .chip-mstats { align-items: stretch; grid-auto-rows: 1fr; }
.chip-mission .chip-mstats > * { height: 100%; margin-block-start: 0 !important; }
/* Hero CTA is left-aligned (the centered .chip-cta__btns default is for the CTA bands). */
.chip-page-header .chip-cta__btns { justify-content: flex-start; }

/* ---------- "Our Mission" centered statement ---------- */
.chip-mission-stmt { max-width: 760px; margin-inline: auto; text-align: center; }
.chip-mission-stmt__body { font-size: 17px; color: var(--chip-muted); line-height: 1.8; margin: 1.1rem auto 0; }
.chip-explain { max-width: 760px; margin: 2.25rem auto; background: var(--chip-sand-bg); border: 1px solid var(--chip-line); border-radius: 18px; padding: 36px 40px; text-align: left; }
.chip-explain__lead { font-size: 15px; color: var(--chip-sea-800); font-weight: 600; margin: 0 0 18px; }
.chip-explain__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.chip-explain__list li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; color: var(--chip-muted); line-height: 1.6; }
.chip-explain__list li::before { content: "\2192"; color: var(--chip-cyan-500); font-weight: 700; font-size: 18px; flex-shrink: 0; }
.chip-mission-quote { text-align: center; font-family: var(--chip-font-display); font-size: 22px; color: var(--chip-sea-800); font-style: italic; max-width: none; white-space: nowrap; margin: 0 auto 2.25rem; line-height: 1.4; }
@media (max-width: 760px) { .chip-mission-quote { white-space: normal; max-width: 90%; font-size: 18px; } }
.chip-mission-cta { text-align: center; }

/* ---------- Our Story timeline + Our Commitments ---------- */
.chip-story { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.chip-timeline { position: relative; padding-left: 48px; }
.chip-timeline::before { content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--chip-cyan-500), var(--chip-magenta-500)); }
.chip-timeline__item { position: relative; margin-bottom: 36px; }
.chip-timeline__item:last-child { margin-bottom: 0; }
.chip-timeline__item::before { content: ""; position: absolute; left: -40px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--chip-cyan-500); border: 2px solid #fff; box-shadow: 0 0 0 3px var(--chip-cyan-200); }
.chip-timeline__year { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--chip-magenta-500); text-transform: uppercase; margin: 0 0 6px; }
.chip-timeline__item h4 { font-size: 17px; font-weight: 700; color: var(--chip-sea-800); margin: 0 0 6px; }
.chip-timeline__item p { font-size: 14px; color: var(--chip-muted); line-height: 1.6; margin: 0; }
.chip-commits { display: flex; flex-direction: column; gap: 16px; }
.chip-commit { padding: 20px 24px; background: #fff; border-radius: 14px; border: 1px solid var(--chip-line); }
.chip-commit__title { font-size: 14px; font-weight: 700; color: var(--chip-sea-800); margin: 0 0 4px; }
.chip-commit__desc { font-size: 13px; color: var(--chip-muted); line-height: 1.55; margin: 0; }

/* ---------- Team + advisor grids ---------- */
.chip-tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
/* Three across, same card size as the leadership grid above it. The old
   2-up + 860px cap was sized for exactly two advisors; a third made the row
   wrap. Narrows to 2 at 920px and 1 at 600px with the leadership grid. */
.chip-tgrid--adv { grid-template-columns: repeat(3, 1fr); margin-inline: auto; }
.chip-tcard { background: #fff; border: 1px solid var(--chip-line); border-radius: 16px; overflow: hidden; text-align: left; cursor: pointer; transition: transform 0.15s var(--chip-ease), box-shadow 0.2s var(--chip-ease); }
.chip-tcard:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(12,42,56,.14), 0 6px 16px rgba(12,42,56,.07); }
.chip-tcard:focus-visible { outline: 2px solid var(--chip-cyan-500); outline-offset: 3px; }
/* 4/5 matches the baked crop of every team headshot (800x1000), so `cover` has
   nothing left to trim and each face lands in the same place. Do NOT swap this
   back to a fixed height: that applies a second, uncontrolled crop on top of
   the first, which is exactly what made the row look mismatched before.
   The crop spec itself (face ~42% of frame, whole head inside) lives in
   assets/images/team/README.txt — changing this ratio invalidates all eight. */
.chip-tcard__photo { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; font-family: var(--chip-font-display); font-weight: 800; font-size: 38px; letter-spacing: -0.02em; color: rgba(12,42,56,.5); }
.chip-tcard__info { padding: 20px; }
.chip-tcard__role { font-size: 16px; font-weight: 700; color: var(--chip-sea-800); margin: 0 0 4px; }
.chip-tcard__name { font-size: 13.5px; font-weight: 600; color: var(--chip-sea-800); letter-spacing: -0.01em; margin: -2px 0 4px; }
.chip-tcard__dept { font-size: 12px; font-weight: 600; color: var(--chip-cyan-600); line-height: 1.6; margin: 0; }
/* Pronouns sit with the name, quieter than it. Rendered only when a team
   member has filled the field in, so cards without them are unchanged. */
.chip-tcard__pronouns { font-weight: 500; color: var(--chip-sea-500, #6b7f8a); }
.chip-tcard__pronouns::before { content: " \00b7 "; }
.chip-bio__pronouns { font-weight: 500; opacity: 0.7; }
.chip-bio__pronouns::before { content: " \00b7 "; }
.chip-tsocials { display: flex; gap: 8px; margin-top: 13px; }
.chip-tsocials a { width: 29px; height: 29px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--chip-sand-bg); border: 1px solid var(--chip-line); color: var(--chip-sea-800); transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
.chip-tsocials a:hover { background: var(--chip-cyan-500); border-color: var(--chip-cyan-500); color: #fff; transform: translateY(-1px); }
.chip-tsocials svg { width: 14px; height: 14px; fill: currentColor; display: block; }
.chip-tcard__readbio { display: inline-block; margin-top: 13px; font-family: var(--chip-font-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--chip-cyan-500); font-weight: 600; }
.chip-tcard:hover .chip-tcard__readbio { text-decoration: underline; }

/* ---------- Bio modal ---------- */
.chip-bio { position: fixed; inset: 0; z-index: 5000; display: none; align-items: center; justify-content: center; padding: 24px; }
.chip-bio.is-open { display: flex; }
.chip-bio__backdrop { position: absolute; inset: 0; background: rgba(7,21,28,.62); backdrop-filter: blur(4px); }
.chip-bio__card { position: relative; z-index: 1; display: flex; flex-direction: column; background: #fff; border-radius: 22px; width: 100%; max-width: 620px; max-height: 88vh; overflow: hidden; box-shadow: 0 50px 110px rgba(12,42,56,.34); }
.chip-bio__photo { display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--chip-font-display); font-weight: 800; font-size: 80px; letter-spacing: -0.02em; background: linear-gradient(150deg, #0C2A38, #103A4C); }
.chip-bio__photo--img { background-size: cover; background-position: center top; background-repeat: no-repeat; }
.chip-bio__body { flex: 1 1 auto; min-height: 0; padding: 36px 38px; overflow-y: auto; }
.chip-bio__role { font-family: var(--chip-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--chip-cyan-500); margin-bottom: 10px; }
.chip-bio__name { font-family: var(--chip-font-display); font-weight: 800; font-size: 26px; color: var(--chip-sea-800); letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 18px; }
.chip-bio__prose p { font-size: 14px; color: var(--chip-muted); line-height: 1.72; margin: 0 0 13px; }
.chip-bio__socials { display: flex; gap: 9px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--chip-line); }
.chip-bio__socials a { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--chip-sand-bg); border: 1px solid var(--chip-line); color: var(--chip-sea-800); transition: all .15s ease; }
.chip-bio__socials a:hover { background: var(--chip-cyan-500); border-color: var(--chip-cyan-500); color: #fff; }
.chip-bio__socials svg { width: 15px; height: 15px; fill: currentColor; }
.chip-bio__close { position: absolute; top: 14px; right: 16px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,0.85); color: var(--chip-sea-800); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.chip-bio__close:hover { background: #fff; }

/* ---------- About CTA: teal→navy gradient band, amber accent (matches generic .cta-section) ---------- */
.chip-cta--gradient { background: linear-gradient(135deg, var(--chip-cyan-500) 0%, var(--chip-sea-800) 100%); }
.chip-cta--gradient .chip-cta__title em { color: var(--chip-amber-500); background-image: none; }
/* One-line CTA heading (Prosperity Matrix, "Your financial life deserves clarity,
   not confusion."). At 48px the line is ~1015px wide, but .chip-cta__inner caps
   at 760px, so it always wrapped. Rather than shrink the type to fit 760px, the
   heading steps out of that box: width:max-content, then margin-left:50% plus
   translateX(-50%) centres it on the column whatever its width, without touching
   the container, the subtitle or the button.
   Font size only drops when the SCREEN is too narrow: the divisor is the
   measured width-to-size ratio of this line (21.15) rounded up to 21.6 for
   safety, so it stays 48px down to ~1100px wide.
   Below 768px a one-line headline would need ~16px type, so it wraps as normal. */
@media (min-width: 768px) {
	.chip-cta__title--oneline {
		white-space: nowrap;
		width: max-content;
		max-width: none;
		margin-left: 50%;
		transform: translateX(-50%);
		font-size: min(3rem, calc((100vw - 64px) / 21.6));
	}
}

/* About comp uses no brand-underline accents — suppress the site-wide squiggle here. */
.chip-about .chip-sec__em,
.chip-about .chip-cta__title em { background-image: none; }

/* Values grid: equal-height cards + amber accent dash above each title (matches .value-card). */
.chip-about .chip-grid-3 { align-items: stretch; grid-auto-rows: 1fr; }
.chip-about .chip-grid-3 > * { height: 100%; margin-block-start: 0 !important; }
.chip-about .chip-feature__title::before { content: ""; display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--chip-amber-500); margin: 0 0 14px; }

/* =====================================================================
 * PARTNERS — type cards, benefits + inquiry form. From chip30.css.
 * ===================================================================== */
/* Hero accent: amber italic, no squiggle (matches comp). */
.chip-partners-page .chip-page-header h1 em { color: var(--chip-amber-500); background-image: none; font-style: italic; }

/* Side-image hero: photo as a right-side panel with a left→right navy scrim.
   Shared by Partners + Programs. */
.chip-hero-photo, .chip-partners-hero { position: relative; overflow: clip; background: var(--chip-sea-800); }
.chip-hero-photo__img, .chip-partners-hero__img { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; margin: 0; z-index: 0; }
.chip-hero-photo__img img, .chip-partners-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.chip-hero-photo__img::after, .chip-partners-hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--chip-sea-800) 0%, rgba(12,42,56,0.65) 30%, rgba(12,42,56,0.12) 100%); }
.chip-hero-photo .chip-sec__inner, .chip-partners-hero .chip-sec__inner { position: relative; z-index: 1; }
@media (max-width: 860px) {
	.chip-hero-photo__img, .chip-partners-hero__img { position: relative; width: 100%; height: 200px; margin-top: 24px; border-radius: 16px; overflow: hidden; }
	.chip-hero-photo__img::after, .chip-partners-hero__img::after { background: linear-gradient(180deg, rgba(12,42,56,0.1) 0%, rgba(12,42,56,0.5) 100%); }
}

/* =====================================================================
 * CHIP PRO (for professionals) — hero cards, problem, solution lists,
 * directory + sample profile, ecosystem, build-your-brand.
 * ===================================================================== */
/* Accents: teal italic hero, no brand squiggle anywhere on this page (matches comp). */
.chip-pro-page .chip-page-header h1 em { background-image: none; font-style: italic; }
.chip-pro-page .chip-sec__em { background-image: none; }
/* Newsletter modal (Brevo iframe, centered card) */
.chip-nl { position: fixed; inset: 0; z-index: 7000; display: none; align-items: center; justify-content: center; padding: 20px; }
.chip-nl.is-open { display: flex; }
.chip-nl__backdrop { position: absolute; inset: 0; background: rgba(15, 30, 44, 0.72); backdrop-filter: blur(3px); }
.chip-nl__dialog { position: relative; z-index: 1; background: #fff; border-radius: 18px; box-shadow: 0 30px 80px rgba(15, 30, 44, 0.45); padding: 22px; max-width: 100%; max-height: 92vh; overflow: auto; }
.chip-nl__frame { display: block; border: 0; width: 540px; max-width: 100%; height: 760px; }
/* Close button: white disc, navy glyph (client, 2026-09-30). Colours, size,
   weight, shadow and hover are as supplied, with two changes made because the
   dialog is white and scrolls:
   - INSIDE the corner (8px), not the supplied -16px. `.chip-nl__dialog` is
     `overflow: auto`, which clips anything outside it: at -16px a quarter of the
     disc was cut off, and what remained was white on the white dialog, so the
     button all but vanished. The old navy disc survived that because it was dark.
   - The #e5e7eb edge measures 1.24:1 on white, so it is darkened to
     rgba(15,30,44,0.35) (2.19:1) to give the disc a visible boundary. */
.chip-nl__close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(15,30,44,0.35); background: #fff; color: var(--chip-sea-800); font-size: 24px; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(15, 30, 44, 0.4); transition: background 0.2s; }
.chip-nl__close:hover { background: #F7F3EC; }
.chip-nl__close:focus-visible { outline: 2px solid var(--chip-cyan-500); outline-offset: 2px; }
body.chip-nl-open { overflow: hidden; }
@media (max-width: 600px) {
	.chip-nl__dialog { padding: 16px; }
	/* The button already sits inside the corner at every width, so the old
	   phone-only reposition is no longer needed; the dialog just loses padding. */
}

/* Mission band (navy): pills + translucent quote; keep the amber underline */
.chip-pro-page .chip-sec__em.chip-em-ul { background-image: var(--chip-underline); background-repeat: no-repeat; background-position: left 100%; background-size: 100% 0.32em; padding-bottom: 0.18em; }
.chip-pro-mquote { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--chip-radius-l); padding: 1.5rem 2rem; max-width: 760px; margin: 0 auto 1.75rem; }
.chip-pro-mquote p { font-family: var(--chip-font-display); font-style: italic; font-size: 1.15rem; line-height: 1.5; color: rgba(255,255,255,0.9); margin: 0; }
.chip-pro-mquote cite { display: block; font-style: normal; font-family: var(--chip-font-mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin-top: 0.9rem; }
/* Final CTA (cyan band): white em (no squiggle) + navy button */
.chip-pro-page .chip-cta--cyan .chip-cta__title em { color: #fff; background-image: none; }
.chip-cta--cyan .chip-btn--navy .wp-block-button__link { background: var(--chip-sea-800); color: #fff; border-color: var(--chip-sea-800); box-shadow: 0 6px 18px rgba(6,36,48,0.25); }
.chip-cta--cyan .chip-btn--navy .wp-block-button__link:hover { background: var(--chip-sea-900); color: #fff; border-color: var(--chip-sea-900); }
.chip-pro-ctalinks { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; margin: 1.25rem 0 0; }
.chip-pro-ctalinks a { font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.85); text-decoration: none; }
.chip-pro-ctalinks a:hover { color: #fff; text-decoration: underline; }
.chip-cta .chip-pro-ctafine { font-size: 0.7rem; color: rgba(255,255,255,0.65); text-align: center; max-width: 760px; margin: 2.5rem auto 0; line-height: 1.6; }
.chip-cta .chip-pro-ctadisc { font-size: 0.65rem; font-style: italic; color: rgba(255,255,255,0.5); text-align: center; max-width: 820px; margin: 1rem auto 0; line-height: 1.6; }

/* Hero: 2-col (text | "What You Get" panel) */
.chip-pro-hero__grid { display: grid; grid-template-columns: 1fr 380px; gap: clamp(2rem, 5vw, 56px); align-items: center; }
.chip-pro-fine { font-size: 0.85rem; color: rgba(255,255,255,0.5); margin: 1.25rem 0 0; }
.chip-pro-wyg { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--chip-radius-l); padding: 1.5rem 1.75rem; }
.chip-pro-wyg__eyebrow { font-family: var(--chip-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chip-cyan-400); margin: 0 0 0.5rem; }
.chip-pro-wyg__card { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.chip-pro-wyg__card:last-of-type { border-bottom: 0; }
.chip-pro-wyg__title { font-family: var(--chip-font-display); font-weight: 700; font-size: 0.95rem; color: #fff; margin: 0 0 3px; }
.chip-pro-wyg__desc { font-size: 0.8rem; color: rgba(255,255,255,0.55); line-height: 1.45; margin: 0; }
.chip-pro-wyg__fine { font-size: 0.72rem; color: rgba(255,255,255,0.4); margin: 0.9rem 0 0; padding-top: 0.9rem; border-top: 1px solid rgba(255,255,255,0.08); }
/* Stats band (cyan) — thin ribbon */
.chip-pro-statsband { background: var(--chip-cyan-500); padding-block: 1.6rem; }
.chip-pro-statsband .chip-sec__inner { display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; }
.chip-pro-statband__cell { text-align: center; padding: 8px 56px; }
.chip-pro-statband__cell + .chip-pro-statband__cell { border-left: 1px solid rgba(255,255,255,0.2); }
.chip-pro-statband__num { display: block; font-family: var(--chip-font-display); font-weight: 800; font-size: 2rem; color: #fff; line-height: 1; margin: 0 0 4px; }
.chip-pro-statband__label { font-size: 0.85rem; color: rgba(255,255,255,0.8); }
@media (max-width: 860px) {
	.chip-pro-hero__grid { grid-template-columns: 1fr; }
	.chip-pro-statsband .chip-sec__inner { flex-direction: column; align-items: center; gap: 1rem; }
	.chip-pro-statband__cell + .chip-pro-statband__cell { border-left: 0; }
}

/* Benefits cards: colored top border, cycling (teal/purple/pink/yellow/teal/pink) */
.chip-pro-ben .chip-feature { border-top: 3px solid var(--chip-cyan-400); }
.chip-pro-ben .chip-feature:nth-child(2) { border-top-color: #7C3AED; }
.chip-pro-ben .chip-feature:nth-child(3) { border-top-color: var(--chip-magenta-500); }
.chip-pro-ben .chip-feature:nth-child(4) { border-top-color: var(--chip-amber-500); }
.chip-pro-ben .chip-feature:nth-child(5) { border-top-color: var(--chip-cyan-400); }
.chip-pro-ben .chip-feature:nth-child(6) { border-top-color: var(--chip-magenta-500); }

/* Problem section: pink accents, lighter bg, darker cards w/ pink left border */
.chip-prob__tag { font-family: var(--chip-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chip-magenta-500); margin: 0 0 0.6rem; }
.chip-prob .chip-section-label { color: var(--chip-magenta-500) !important; }
.chip-prob .chip-sec__em { color: var(--chip-magenta-500); background-image: none; }
.chip-prob .chip-feature { background: var(--chip-sand-bg); border: 1px solid var(--chip-line); border-left: 3px solid var(--chip-magenta-500); box-shadow: none; }

/* Solution (navy): 2-col — text/quote/lead LEFT, stacked IS-NOT/IS cards RIGHT */
.chip-pro-sol__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 56px); align-items: start; }
.chip-pro-solquote { border-left: 3px solid var(--chip-cyan-400); background: rgba(22,163,204,0.08); border-radius: 0 var(--chip-radius-m) var(--chip-radius-m) 0; padding: 1rem 1.25rem; font-family: var(--chip-font-display); font-style: italic; font-size: 1.1rem; line-height: 1.5; color: rgba(255,255,255,0.9); margin: 1.5rem 0; }
.chip-pro-isnot-lead { font-size: 0.9rem; font-weight: 700; color: rgba(255,255,255,0.85); margin: 0; }
.chip-pro-isnot { display: flex; flex-direction: column; gap: 20px; }
.chip-pro-isnot__col { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--chip-radius-l); padding: 1.5rem 1.6rem; }
.chip-pro-isnot__h { font-family: var(--chip-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 1rem; }
.chip-pro-isnot__col--no .chip-pro-isnot__h { color: var(--chip-magenta-500); }
.chip-pro-isnot__col--yes .chip-pro-isnot__h { color: var(--chip-green-500); }
.chip-pro-isnot__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.chip-pro-isnot__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.5; }
.chip-pro-isnot__col--no li::before { content: "✕"; color: var(--chip-magenta-500); font-weight: 700; flex-shrink: 0; }
.chip-pro-isnot__col--yes li::before { content: "✓"; color: var(--chip-green-500); font-weight: 700; flex-shrink: 0; }
@media (max-width: 860px) { .chip-pro-sol__grid { grid-template-columns: 1fr; } }

/* Directory: light-cyan band, 2-col + sample profile card */
.chip-pro-dir-sec { background: var(--chip-cyan-100); }
.chip-pro-dir { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 56px); align-items: center; }
.chip-pro-dir__col .chip-cta__btns { justify-content: flex-start; }
.chip-pro-dir__check { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; display: flex; flex-direction: column; gap: 10px; }
.chip-pro-dir__check li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--chip-sea-800); line-height: 1.4; background: #fff; border: 1px solid var(--chip-line); border-radius: var(--chip-radius-m); padding: 12px 16px; }
.chip-pro-dir__check li::before { content: "✓"; color: var(--chip-cyan-500); font-weight: 700; flex-shrink: 0; }
.chip-pro-sample__cta { display: flex; width: 100%; justify-content: center; }
.chip-pro-sample { background: #fff; border: 1px solid var(--chip-line); border-radius: var(--chip-radius-l); padding: 28px; box-shadow: var(--chip-shadow-raised); }
.chip-pro-sample__eyebrow { font-family: var(--chip-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chip-muted); margin: 0 0 14px; }
.chip-pro-sample__name { font-family: var(--chip-font-display); font-weight: 800; font-size: 1.2rem; color: var(--chip-sea-800); margin: 0 0 2px; }
.chip-pro-sample__role { font-size: 0.85rem; color: var(--chip-cyan-600); font-weight: 600; margin: 0 0 14px; }
.chip-pro-sample__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.chip-pro-sample__tag { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--chip-radius-pill); background: var(--chip-sand-bg); color: var(--chip-sea-800); }
.chip-pro-sample__status { font-size: 12px; color: var(--chip-muted); margin: 0 0 16px; }
.chip-pro-sample__status b { color: var(--chip-green-500); }

/* Ecosystem (navy): translucent discipline cards + centered teal-tint pullquote */
.chip-pro-eco .chip-grid-3 { text-align: center; }
.chip-disc { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--chip-radius-m); padding: 1.5rem 1.4rem; }
.chip-disc__name { font-family: var(--chip-font-display); font-weight: 700; font-size: 1.05rem; color: #fff; margin: 0 0 0.4rem; }
.chip-disc__creds { font-family: var(--chip-font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--chip-cyan-400); margin: 0; }
.chip-pro-ecoquote { background: rgba(22,163,204,0.15); border: 1px solid rgba(22,163,204,0.3); border-radius: var(--chip-radius-m); padding: 1.25rem 1.75rem; font-family: var(--chip-font-display); font-style: italic; font-size: 1.1rem; line-height: 1.55; color: rgba(255,255,255,0.9); max-width: 820px; margin: 2rem auto; }

/* Pullquote (solution / ecosystem) */
.chip-pro-quote { font-family: var(--chip-font-display); font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--chip-sea-800); border-left: 3px solid var(--chip-cyan-400); padding-left: 1.25rem; max-width: 760px; margin: 2rem 0; }
.chip-sec--navy .chip-pro-quote { color: rgba(255,255,255,0.9); }

@media (max-width: 860px) {
	.chip-pro-wyg { grid-template-columns: 1fr 1fr; }
	.chip-pro-isnot, .chip-pro-dir { grid-template-columns: 1fr; }
}

/* =====================================================================
 * PROGRAMS — Beyond the Benefits / WTF / CHIP Chats blocks.
 * ===================================================================== */
/* Hero accent: teal, no squiggle (matches comp). */
.chip-programs-page .chip-page-header h1 em { background-image: none; font-style: italic; }
/* 24px top margin: `margin: 0 ...` had zeroed the flow layout's block-start
   margin, so the stats sat flush on the paragraph above (measured 0px,
   2026-09-21). Same bug as .chip-wtf__cohort. */
.chip-prog-stats { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 24px 0 1.75rem; }
.chip-prog-stat__num { display: block; font-family: var(--chip-font-display); font-weight: 800; font-size: 2.25rem; line-height: 1; color: var(--chip-cyan-600); }
.chip-prog-stat__label { font-size: 0.8rem; color: var(--chip-muted); max-width: 22ch; }
.chip-btb__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 56px); align-items: center; }
.chip-whofor { background: var(--chip-cyan-050); border: 1px solid var(--chip-line); border-radius: var(--chip-radius-l); padding: clamp(1.5rem, 3vw, 2rem); }
.chip-whofor__title { font-family: var(--chip-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chip-cyan-600); margin: 0 0 1rem; }
.chip-whofor__cards { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 860px) { .chip-btb__grid { grid-template-columns: 1fr; } }

/* Program-block buttons sit flush-left in their column (not centered like CTA bands). */
.chip-btb__col .chip-cta__btns, .chip-wtf__col .chip-cta__btns, .chip-chats__col .chip-cta__btns { justify-content: flex-start; }

/* WTF (navy): tag + "What's Inside" dark list */
.chip-wtf__tag { font-family: var(--chip-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--chip-amber-500); margin: 0 0 6px; }
/* WTF heading: keep on one line (client feedback) — shrink slightly + nowrap on desktop */
.chip-wtf__col .chip-sec__title { font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.3rem); white-space: nowrap; }
@media (max-width: 520px) { .chip-wtf__col .chip-sec__title { white-space: normal; font-size: clamp(1.5rem, 6vw, 2rem); } }
.chip-wtf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 56px); align-items: start; }
/* Top margin 24px to match the column's flow gap: the old `margin: 0 0 1.25rem`
   zeroed the block-start margin the flow layout gives every other child, so the
   box sat flush against the paragraph above (measured 0px, 2026-09-21). */
.chip-wtf__cohort { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--chip-radius-m); padding: 1.1rem 1.25rem; margin: 24px 0 1.25rem; }
.chip-wtf__cohort .chip-wtf__tag { margin: 0 0 6px; }
.chip-wtf__cohort p { margin: 0; }
.chip-wtf__inside { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--chip-radius-l); padding: clamp(1.25rem, 3vw, 1.75rem); }
.chip-wtf__inside-label { font-family: var(--chip-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--chip-amber-500); margin: 0 0 18px; }
.chip-wtf__list { display: flex; flex-direction: column; gap: 12px; }
.chip-wtf__item { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--chip-radius-m); padding: 1rem 1.25rem; }
.chip-wtf__item h4 { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.chip-wtf__item p { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; margin: 0; }

/* CHIP Chats: checklist + recent topics */
.chip-chats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 56px); align-items: start; }
.chip-chats__check { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: 12px; }
.chip-chats__check li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--chip-slate); line-height: 1.5; }
.chip-chats__check li::before { content: "✓"; color: var(--chip-magenta-500); font-weight: 700; font-size: 16px; flex-shrink: 0; }
.chip-topics__label { font-size: 13px; font-weight: 700; color: var(--chip-sea-800); margin: 0 0 18px; }
.chip-topics { display: flex; flex-direction: column; gap: 12px; }
.chip-topic { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--chip-line); border-radius: var(--chip-radius-m); padding: 1rem 1.25rem; box-shadow: var(--chip-shadow-card); }
.chip-topic__swatch { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; background: var(--chip-magenta-500); }
.chip-topic:nth-child(2) .chip-topic__swatch { background: var(--chip-cyan-500); }
.chip-topic:nth-child(3) .chip-topic__swatch { background: var(--chip-amber-500); }
.chip-topic:nth-child(4) .chip-topic__swatch { background: #7C3AED; }
.chip-topic h4 { font-size: 14px; font-weight: 700; color: var(--chip-sea-800); margin: 0 0 3px; }
.chip-topic p { font-size: 12px; color: var(--chip-muted); line-height: 1.5; margin: 0; }
/* CHIP Chats recap video card (patterns/programs-chats.php), from the client's
   comp, 2026-09-21. Core blocks inside flow-layout groups, so each child would get
   the 24px block-start margin; zeroed here and spacing set explicitly. The pill
   is white on #D6249A (4.59:1) rather than the comp's lighter pink. Play button
   and duration badge are added by chip-forms.js. */
.chip-chats__side > .chip-chat-video { margin-block-start: 0; }
.chip-chats__side > .chip-chat-video + * { margin-block-start: 32px; }
.chip-chat-video { position: relative; background: var(--chip-sea-800); border-radius: 18px; overflow: hidden; box-shadow: var(--chip-shadow-raised); }
.chip-chat-video > *, .chip-chat-video__body > * { margin-block-start: 0; }
.chip-chat-video__media { position: relative; margin: 0; aspect-ratio: 16 / 10; background: #000; }
.chip-chat-video__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.chip-chat-video .chip-chat-video__tag {
	position: absolute; top: 14px; left: 14px; z-index: 2; margin: 0; padding: 5px 12px;
	border-radius: var(--chip-radius-pill); background: #D6249A; color: #fff;
	font-family: var(--chip-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4;
}
.chip-chat-video__play {
	position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%);
	display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; padding: 0;
	border: 0; border-radius: 50%; background: #fff; box-shadow: 0 10px 28px rgba(0,0,0,0.35); cursor: pointer;
	transition: transform 0.2s var(--chip-ease);
}
.chip-chat-video__play svg { width: 22px; height: 22px; margin-left: 3px; fill: var(--chip-sea-800); }
.chip-chat-video__play:hover { transform: translate(-50%, -50%) scale(1.08); }
.chip-chat-video__play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.chip-chat-video__dur { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,0.72); color: #fff; font-family: var(--chip-font-mono); font-size: 11px; line-height: 1.4; }
.chip-chat-video.is-playing .chip-chat-video__tag, .chip-chat-video.is-playing .chip-chat-video__dur { display: none; }
.chip-chat-video__body { padding: 20px 22px 22px; }
.chip-chat-video .chip-chat-video__title { font-family: var(--chip-font-display); font-size: 17px; font-weight: 700; line-height: 1.3; color: #fff; margin: 0 0 6px; }
.chip-chat-video .chip-chat-video__desc { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.72); margin: 0; }
.chip-chat-video .chip-chat-video__loc { font-family: var(--chip-font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin: 12px 0 0; }
@media (prefers-reduced-motion: reduce) { .chip-chat-video__play { transition: none; } .chip-chat-video__play:hover { transform: translate(-50%, -50%); } }
/* "Own a local business?" card under the CHIP Chats buttons (client comp,
   2026-09-21). White on the cream band with an amber edge, icon tile on the left.
   Children of these flow groups would each get the 24px block-start margin, so
   it is zeroed and the spacing set here. */
.chip-chats__col > .chip-chats__local { margin-block-start: 32px; }
.chip-chats__local { display: flex; gap: 18px; align-items: center; max-width: 440px; padding: 22px 24px; background: #fff; border: 1.5px solid var(--chip-amber-500); border-radius: 16px; box-shadow: var(--chip-shadow-card); }
.chip-chats__local > *, .chip-chats__local-body > * { margin-block-start: 0; }
.chip-chats__local .chip-chats__local-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; border-radius: 8px; background: var(--chip-amber-500); font-size: 20px; line-height: 1; }
.chip-chats__local .chip-chats__local-title { font-family: var(--chip-font-display); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--chip-sea-800); margin: 0 0 6px; }
.chip-chats__local .chip-chats__local-text { font-size: 13px; line-height: 1.6; color: var(--chip-slate); margin: 0; }
/* Programs interest modal (inc/program-interest.php). The submit and the success
   tick are #D6249A, the house magenta that clears 4.5:1 with white; the brand
   #E741AD measures 3.65:1 and is kept for the focus ring only. */
.chip-pi { width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 20px; background: #fff; box-shadow: var(--chip-shadow-raised); overflow: visible; }
.chip-pi::backdrop { background: rgba(6, 20, 28, 0.72); }
/* The dialog takes focus on open; the ring belongs on the controls inside, not
   around the whole panel. Every focusable child keeps its own indicator. */
.chip-pi:focus, .chip-pi:focus-visible { outline: none; }
.chip-pi__card { position: relative; max-height: calc(100vh - 32px); overflow-y: auto; padding: 32px clamp(20px, 5vw, 40px) 34px; border-radius: 20px; }
.chip-pi__close { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--chip-cloud); color: var(--chip-slate); cursor: pointer; }
.chip-pi__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.chip-pi__close:hover { background: var(--chip-line); }
.chip-pi__close:focus-visible { outline: 2px solid var(--chip-cyan-500); outline-offset: 2px; }
.chip-pi .chip-pi__eyebrow { font-family: var(--chip-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chip-cyan-600); margin: 0 0 8px; }
.chip-pi .chip-pi__title { font-family: var(--chip-font-display); font-size: clamp(22px, 3.4vw, 26px); font-weight: 800; line-height: 1.25; color: var(--chip-sea-800); margin: 0 0 8px; }
.chip-pi .chip-pi__sub { font-size: 14px; line-height: 1.6; color: var(--chip-slate); margin: 0 0 24px; }
.chip-pi__form { display: flex; flex-direction: column; gap: 16px; }
.chip-pi__field { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; }
.chip-pi__label { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--chip-sea-800); padding: 0; }
.chip-pi__optional { font-weight: 400; color: var(--chip-muted); }
.chip-pi__input, .chip-pi__textarea { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1.5px solid var(--chip-border); border-radius: 10px; background: #fff; font-family: inherit; font-size: 15px; color: var(--chip-ink); }
.chip-pi__textarea { resize: vertical; min-height: 84px; }
.chip-pi__input::placeholder, .chip-pi__textarea::placeholder { color: var(--chip-muted); }
.chip-pi__input:focus-visible, .chip-pi__textarea:focus-visible { outline: none; border-color: var(--chip-cyan-500); box-shadow: 0 0 0 3px rgba(22,163,204,0.25); }
.chip-pi__radios { display: flex; flex-direction: column; gap: 8px; }
.chip-pi__radio { position: relative; }
.chip-pi__radio input { position: absolute; top: 16px; left: 14px; margin: 0; accent-color: #D6249A; }
.chip-pi__radio label { display: block; padding: 11px 14px 11px 38px; border: 1.5px solid var(--chip-border); border-radius: 10px; cursor: pointer; }
.chip-pi__radio label:hover { border-color: var(--chip-cyan-400); }
.chip-pi__radio input:checked + label { border-color: #D6249A; background: var(--chip-magenta-100); }
.chip-pi__radio input:focus-visible + label { outline: 2px solid var(--chip-cyan-500); outline-offset: 2px; }
.chip-pi__radio-name { display: block; font-size: 14px; font-weight: 700; color: var(--chip-sea-800); }
.chip-pi__radio-sub { display: block; font-size: 12px; color: var(--chip-muted); margin-top: 2px; }
.chip-pi__hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.chip-pi__submit { margin-top: 4px; padding: 13px 28px; border: 0; border-radius: var(--chip-radius-pill); background: #D6249A; color: #fff; font-family: var(--chip-font-body); font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.15s ease; }
.chip-pi__submit:hover { background: #B81E84; }
.chip-pi__submit:focus-visible { outline: 3px solid var(--chip-magenta-500); outline-offset: 3px; }
.chip-pi__submit:disabled { cursor: progress; opacity: 0.75; }
.chip-pi .chip-pi__status { min-height: 18px; margin: 0; font-size: 13px; color: var(--chip-slate); }
.chip-pi .chip-pi__status.is-error { color: #B81E84; }
.chip-pi .chip-pi__fine { font-size: 11.5px; line-height: 1.5; color: var(--chip-muted); margin: 0; }
.chip-pi__done { text-align: center; padding: 24px 0 8px; }
.chip-pi__done:focus { outline: none; }
.chip-pi__done-badge { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: var(--chip-magenta-100); }
.chip-pi__done-badge svg { width: 26px; height: 26px; }
.chip-pi .chip-pi__done-title { font-family: var(--chip-font-display); font-size: 24px; font-weight: 800; color: var(--chip-sea-800); margin: 0 0 8px; }
.chip-pi__done p { font-size: 14px; line-height: 1.6; color: var(--chip-slate); margin: 0; }
/* The CTA that opens it: the comp's pink, in the shade that clears AA with white. */
.chip-cta .chip-btn--magenta .wp-block-button__link { background: #D6249A; color: #fff; }
.chip-cta .chip-btn--magenta .wp-block-button__link:hover { background: #B81E84; color: #fff; }
@media (max-width: 860px) { .chip-wtf__grid, .chip-chats__grid { grid-template-columns: 1fr; } }

.partner-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 2.5rem 0 0; }
.partner-type-card { background: #fff; border: 1px solid var(--chip-line); border-radius: 16px; padding: 32px 28px; text-align: center; transition: transform 0.25s var(--chip-ease), box-shadow 0.25s var(--chip-ease), border-color 0.25s var(--chip-ease); }
.partner-type-card:hover { border-color: var(--chip-cyan-500); box-shadow: 0 12px 40px rgba(10,126,164,0.12); transform: translateY(-4px); }
.partner-icon { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 20px; background: var(--chip-cyan-050); }
.partner-type-card:nth-child(2) .partner-icon { background: var(--chip-magenta-100); }
.partner-type-card:nth-child(3) .partner-icon { background: var(--chip-amber-100); }
.partner-type-card h3 { font-family: var(--chip-font-display); font-size: 20px; font-weight: 700; color: var(--chip-sea-800); margin: 0 0 10px; }
.partner-type-card > p { font-size: 14px; color: var(--chip-muted); line-height: 1.7; margin: 0 0 20px; }
.partner-type-card ul { list-style: none; padding: 0; margin: 0; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.partner-type-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--chip-slate); line-height: 1.5; }
.partner-type-card li span { color: var(--chip-cyan-500); font-weight: 700; flex-shrink: 0; }

.partner-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 56px); align-items: center; }
.benefits-list { display: flex; flex-direction: column; gap: 20px; margin-top: 1.5rem; }
.benefit-item { display: flex; gap: 16px; align-items: flex-start; }
.benefit-num { width: 36px; height: 36px; border-radius: 50%; background: var(--chip-magenta-500); color: #fff; font-family: var(--chip-font-display); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.benefit-item h4 { font-size: 15px; font-weight: 700; color: var(--chip-sea-800); margin: 0 0 4px; }
.benefit-item p { font-size: 13px; color: var(--chip-muted); line-height: 1.6; margin: 0; }

/* Partner inquiry form (inc/partners.php), the client's supplied Brevo form.
   Ported from their inline <style>, with these deliberate changes:
   - the wrap drops the supplied 24px padding: that was for a standalone preview;
     here the grid column owns the measure, and padding would inset the panel
     against the left column;
   - submit #D6249A (white 4.59:1), not #E741AD (3.6:1); hover darkens instead of
     fading, since opacity 0.9 would drop the contrast further;
   - a 3px cyan focus ring on fields and the button (the supplied CSS set
     outline:none and only nudged the border, too faint to see);
   - placeholders at 0.5 white (4.23:1 on the field) instead of 0.35 (2.87:1). */
.chip-partner-form-wrap { display: flex; justify-content: center; box-sizing: border-box; }
.chip-partner-form-panel { width: 100%; max-width: 560px; background: var(--chip-sea-800); border-radius: 20px; padding: 40px 36px; box-sizing: border-box; font-family: var(--chip-font-body); }
.chip-partner-form-panel .chip-pf-heading { margin: 0 0 12px; color: #fff; font-family: var(--chip-font-body); font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: 0; }
.chip-partner-form-panel .chip-pf-heading em { color: var(--chip-cyan-400); font-style: italic; }
.chip-partner-form-panel .chip-pf-subtext { margin: 0 0 28px; color: rgba(255,255,255,0.6); font-size: 15px; line-height: 1.5; }
.chip-pf-form { display: flex; flex-direction: column; gap: 18px; position: relative; }
.chip-pf-field { display: flex; flex-direction: column; gap: 6px; }
.chip-pf-field label { color: rgba(255,255,255,0.6); font-size: 12px; font-weight: 600; letter-spacing: 0.5px; }
.chip-pf-optional { font-weight: 400; }
.chip-pf-field input, .chip-pf-field select, .chip-pf-field textarea {
	width: 100%; box-sizing: border-box; padding: 12px 16px; margin: 0;
	background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px;
	font-family: inherit; font-size: 15px; outline: none; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.chip-pf-field textarea { resize: vertical; min-height: 90px; }
.chip-pf-field input::placeholder, .chip-pf-field textarea::placeholder { color: rgba(255,255,255,0.5); }
.chip-pf-field select {
	appearance: none; -webkit-appearance: none; padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1L7 7L13 1' stroke='white' stroke-opacity='0.6' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center;
}
.chip-pf-field select option { background: var(--chip-sea-800); color: #fff; }
.chip-pf-field input:focus, .chip-pf-field select:focus, .chip-pf-field textarea:focus { border-color: var(--chip-cyan-400); background-color: rgba(255,255,255,0.12); box-shadow: 0 0 0 3px rgba(67,183,218,0.45); }
.chip-pf-hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.chip-pf-submit {
	margin-top: 8px; align-self: flex-start; padding: 12.8px 28px; border: 0; border-radius: var(--chip-radius-pill);
	background: #D6249A; color: #fff; font-family: var(--chip-font-body); font-size: 15px; font-weight: 700; cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.chip-pf-submit:hover { background: #B81E84; }
.chip-pf-submit:active { transform: scale(0.98); }
.chip-pf-submit:focus-visible { outline: 3px solid var(--chip-cyan-400); outline-offset: 3px; }
.chip-pf-submit:disabled { cursor: progress; opacity: 0.75; }
.chip-pf-status { margin: 4px 0 0; min-height: 18px; font-size: 13px; color: rgba(255,255,255,0.8); }
.chip-pf-status.is-error { color: #F7A8D6; }
@media (max-width: 480px) {
	.chip-partner-form-panel { padding: 28px 20px; border-radius: 14px; }
	.chip-partner-form-panel .chip-pf-heading { font-size: 24px; }
}
@media (max-width: 860px) {
	.partner-types { grid-template-columns: 1fr; }
	.partner-benefits { grid-template-columns: 1fr; }
}

/* =====================================================================
 * ASK A PRO — download card, question teaser, email-capture modal.
 * ===================================================================== */
/* Hero accent: teal, no brand squiggle (matches comp). */
.chip-ask-page .chip-page-header h1 em { background-image: none; }
/* Free-download guide card — dark navy, two columns (text | actions) */
.chip-apdl { display: grid; grid-template-columns: 1.4fr 0.85fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; background: none; border: none; border-radius: 0; max-width: none; margin: 0; padding: 0; }
/* Ask-a-Pro hero: full-bleed dark, tab bar attached at the bottom */
.chip-ask-hero { padding-bottom: 0; }
.chip-apdl .chip-section-label { color: var(--chip-cyan-400) !important; }
.chip-apdl__title { font-family: var(--chip-font-display); font-weight: 800; font-size: clamp(1.5rem, 1rem + 2vw, 2.1rem); line-height: 1.14; color: #fff; margin: 0.25rem 0 0.75rem; }
.chip-apdl__title em { font-style: italic; color: var(--chip-cyan-400); }
.chip-apdl__desc { color: rgba(255,255,255,0.6); font-size: 0.95rem; line-height: 1.6; margin: 0 0 1.5rem; }
.chip-apdl__stats { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 0; }
.chip-apdl__stat-num { display: block; font-family: var(--chip-font-display); font-weight: 800; font-size: 1.6rem; color: var(--chip-cyan-400); line-height: 1; }
.chip-apdl__stat-label { font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.chip-apdl__actions { display: flex; flex-direction: column; gap: 0.6rem; }
.chip-apdl__action { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--chip-radius-m); padding: 0.8rem 1.1rem; cursor: pointer; transition: all 0.2s var(--chip-ease); font-family: var(--chip-font-body); text-align: left; width: 100%; }
.chip-apdl__action:hover { border-color: var(--chip-cyan-400); transform: translateY(-2px); }
/* "Share with a friend" is an <a href="mailto:…">, so it arrives carrying the
 * global link colour and underline. Everything else it shares with the buttons. */
a.chip-apdl__action,
a.chip-apdl__action:hover { color: inherit; text-decoration: none; box-sizing: border-box; line-height: normal; }
.chip-apdl__action b { font-size: 0.9rem; font-weight: 700; color: #fff; }
.chip-apdl__action span { font-size: 0.72rem; color: rgba(255,255,255,0.45); }
.chip-apdl__action--primary { background: var(--chip-magenta-500); border-color: var(--chip-magenta-500); }
.chip-apdl__action--primary:hover { background: var(--chip-magenta-700); border-color: var(--chip-magenta-700); }
.chip-apdl__action--primary span { color: rgba(255,255,255,0.8); }
@media (max-width: 760px) { .chip-apdl { grid-template-columns: 1fr; } }

/* Question teaser: category pills + cards */
.chip-ap__cats { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0; justify-content: center; border-top: 1px solid rgba(255,255,255,0.1); margin-top: clamp(2rem, 4vw, 3rem); padding: 0 var(--chip-gutter); }
.chip-ap__cat { background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 1rem 1.4rem; margin-bottom: -1px; cursor: pointer; text-align: center; transition: border-color 0.2s var(--chip-ease), color 0.2s var(--chip-ease); display: flex; flex-direction: column; gap: 3px; white-space: nowrap; flex: none; }
.chip-ap__cat:hover .chip-ap__cat-name { color: #fff; }
.chip-ap__cat.is-active { border-bottom-color: var(--chip-cyan-400); }
.chip-ap__cat-name { font-weight: 700; font-size: 0.9rem; color: rgba(255,255,255,0.6); }
.chip-ap__cat.is-active .chip-ap__cat-name { color: #fff; }
.chip-ap__cat-badge { font-family: var(--chip-font-mono); font-size: 0.7rem; color: rgba(255,255,255,0.4); }
.chip-ap__cat.is-active .chip-ap__cat-badge { color: var(--chip-cyan-400); }
.chip-ap__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; max-width: 820px; margin: 0 auto 1.5rem; text-align: left; }
.chip-ap__head-text { flex: 1; min-width: 240px; }
.chip-ap__title { font-family: var(--chip-font-display); font-weight: 700; font-size: 1.4rem; color: var(--chip-sea-800); margin: 0 0 0.25rem; }
.chip-ap__sub { color: var(--chip-slate); font-size: 0.95rem; margin: 0; }
.chip-ap__count { flex: none; font-family: var(--chip-font-body); font-size: 0.78rem; font-weight: 600; color: #fff; background: var(--chip-cyan-500); border-radius: var(--chip-radius-pill); padding: 6px 14px; white-space: nowrap; }
.chip-ap__panel[hidden] { display: none; }
.chip-ap__list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 auto; }
.chip-ap__q { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; background: #fff; border: 1px solid var(--chip-line); border-radius: var(--chip-radius-m); padding: 1.1rem 1.25rem; box-shadow: var(--chip-shadow-card); }
.chip-ap__q[hidden] { display: none; }
.chip-ap__q-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--chip-cyan-050); color: var(--chip-cyan-600); font-family: var(--chip-font-mono); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.chip-ap__q-body { flex: 1; }
.chip-ap__more[hidden] { display: none; }
.chip-ap__q-text { font-size: 14px; font-weight: 500; color: var(--chip-sea-800); line-height: 1.55; margin: 0 0 4px; }
.chip-ap__q-why { font-size: 11px; color: var(--chip-muted); line-height: 1.5; font-style: italic; margin: 0; }
.chip-ap__q-why strong { font-style: normal; color: var(--chip-slate); }
.chip-ap__q-tag { flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--chip-radius-pill); margin-top: 4px; white-space: nowrap; }
.chip-ap__q-tag--must { background: rgba(232,16,110,0.1); color: var(--chip-magenta-500); }
.chip-ap__q-tag--smart { background: var(--chip-cyan-050); color: var(--chip-cyan-600); }
.chip-ap__q-tag--good { background: var(--chip-sand-bg); color: var(--chip-muted); }
.chip-ap__more { text-align: center; font-size: 0.9rem; color: var(--chip-muted); margin: 1.75rem 0 1rem; }
.chip-ap__dl { text-align: center; }
.chip-ap__gate[hidden] { display: none; }
/* Gate after the free questions (inc/ask-a-pro.php CHIP_ASK_FREE). The next two
   questions show as a blurred, fading peek and the gate card overlaps the second,
   so it reads as "there is more right here", not as an empty box (the first
   version, a dashed placeholder card, looked unfinished). The button is NOT
   chip-btn--primary: that cyan #16A3CC behind white text measures 2.9:1. #D6249A is
   the house magenta for white text (4.59:1, hover #B81E84 5.90:1), and it echoes the
   pink Download PDF button in the hero, which opens the same form. */
.chip-ap__q--peek { filter: blur(3px); opacity: 0.55; pointer-events: none; user-select: none; }
.chip-ap__q--peek + .chip-ap__q--peek { opacity: 0.25; }
.chip-ap__gate { position: relative; z-index: 1; max-width: 560px; margin: -72px auto 0; padding: 1.75rem 1.5rem 1.9rem; text-align: center; background: #fff; border: 1px solid var(--chip-line); border-radius: var(--chip-radius-l); box-shadow: var(--chip-shadow-raised); }
.chip-ap__gate-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--chip-magenta-100); margin-bottom: 12px; }
.chip-ap__gate-icon svg { width: 20px; height: 20px; fill: none; stroke: #B81E84; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chip-ap .chip-ap__gate-title { font-family: var(--chip-font-display); font-weight: 700; font-size: 1.25rem; color: var(--chip-sea-800); margin: 0 0 6px; }
.chip-ap .chip-ap__gate-sub { font-size: 0.9rem; color: var(--chip-slate); line-height: 1.6; max-width: 420px; margin: 0 auto 1.25rem; text-wrap: balance; }
.chip-ap .chip-ap__unlock { background: #D6249A; color: #fff; border-color: #D6249A; cursor: pointer; }
.chip-ap .chip-ap__unlock:hover, .chip-ap .chip-ap__unlock:focus-visible { background: #B81E84; border-color: #B81E84; color: #fff; }
.chip-ap .chip-ap__unlock:focus-visible { outline: 2px solid #B81E84; outline-offset: 3px; }
/* Phones stack each card to ~200px, so two peeks pushed the gate ~340px below the
   free questions. One peek, with the gate pulled halfway over it. */
@media (max-width: 600px) {
	.chip-ap__q { flex-direction: column; }
	.chip-ap__q--peek + .chip-ap__q--peek { display: none; }
	.chip-ap__gate { margin-top: -110px; }
}

/* Email-capture modal */
.chip-ec { position: fixed; inset: 0; z-index: 6000; display: none; align-items: center; justify-content: center; padding: 24px; }
.chip-ec.is-open { display: flex; }
.chip-ec__backdrop { position: absolute; inset: 0; background: rgba(7,21,28,0.6); backdrop-filter: blur(4px); }
.chip-ec__card { position: relative; z-index: 1; background: #fff; border-radius: 24px; max-width: 480px; width: 100%; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.35); max-height: 92vh; overflow-y: auto; }
.chip-ec__band { background: var(--chip-sea-800); padding: 36px 40px 28px; position: relative; overflow: hidden; }
.chip-ec__band::before { content: ""; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(24,161,206,0.15) 0%, transparent 70%); pointer-events: none; }
.chip-ec__close { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.chip-ec__close:hover { background: rgba(255,255,255,0.16); color: #fff; }
.chip-ec__eyebrow { font-family: var(--chip-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chip-cyan-400); margin: 0 0 10px; }
.chip-ec__title { font-family: var(--chip-font-display); font-weight: 800; font-size: 26px; color: #fff; line-height: 1.15; margin: 0 0 8px; }
.chip-ec__title em { font-style: italic; color: var(--chip-cyan-400); }
.chip-ec__sub { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.6; margin: 0; }
.chip-ec__form { padding: 28px 40px 36px; }
.chip-ec__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.chip-ec__field { margin-bottom: 12px; }
.chip-ec__field label { display: block; font-size: 11px; font-weight: 700; color: var(--chip-sea-800); letter-spacing: 0.5px; margin-bottom: 5px; }
.chip-ec__req { color: var(--chip-magenta-500); }
.chip-ec__field input, .chip-ec__field select { width: 100%; padding: 11px 14px; border: 1.5px solid var(--chip-line); border-radius: 10px; font-family: var(--chip-font-body); font-size: 14px; color: var(--chip-sea-800); outline: none; background: #fff; transition: border-color 0.2s; }
.chip-ec__field input:focus, .chip-ec__field select:focus { border-color: var(--chip-cyan-500); }
.chip-ec__field input.is-invalid { border-color: var(--chip-magenta-500); }
.chip-ec__error { font-size: 11px; color: var(--chip-magenta-500); margin: 4px 0 0; }
.chip-ec__submit { width: 100%; justify-content: center; margin-top: 6px; }
.chip-ec__fine { font-size: 11px; color: var(--chip-muted); text-align: center; margin: 12px 0 0; line-height: 1.5; }
.chip-ec__success { padding: 40px; text-align: center; }
.chip-ec__success-icon { font-size: 40px; margin: 0 0 12px; }
.chip-ec__success h4 { font-family: var(--chip-font-display); font-weight: 800; font-size: 24px; color: var(--chip-sea-800); margin: 0 0 8px; }
.chip-ec__success p { font-size: 14px; color: var(--chip-muted); line-height: 1.7; margin: 0 0 16px; }
.chip-ec__success-close { background: none; border: none; font-size: 13px; color: var(--chip-muted); cursor: pointer; text-decoration: underline; }
.chip-news__done { color: rgba(255,255,255,0.85); font-size: 0.95rem; margin: 0; }

/* ---------- Ask a Pro Videos (inc/ask-videos.php, patterns/ask-videos.php) ----------
   Rebuilt from askaprovideoclips.netlify.app. The column is the reference's
   980px. The band is NOT the reference's #062430: that is the footer's colour,
   and as the last section on the page it ran straight into the footer with no
   edge. It stays on .chip-sec--navy (#0C2A38). Accent TEXT uses each row's
   on-dark shade (--aap-accent, set per row by chip_aap_accents()); the measured
   contrast table lives on that function. White-alpha text is held to 0.55+
   (5.50:1): the reference's 0.32-0.38 labels measure under 3.5:1 here.
   The player dialog is the Video Carousel's (.chip-hv__dialog), so its styles
   are not repeated here. */
.chip-aap-sec__inner { max-width: calc(980px + 2 * var(--chip-gutter)); margin-inline: auto; padding-inline: var(--chip-gutter); }
.chip-aap-sec .chip-aap-sec__eyebrow {
	display: block; width: fit-content; margin: 0 auto 22px; padding: 7px 18px;
	font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
	color: var(--chip-amber-500); border: 1px solid rgba(231,182,92,0.4); background: rgba(231,182,92,0.08); border-radius: var(--chip-radius-pill);
}
.chip-aap-sec .chip-aap-sec__title { font-family: var(--chip-font-display); font-weight: 700; font-size: clamp(28px, 4vw, 42px); line-height: 1.18; letter-spacing: -0.01em; color: #fff; max-width: 760px; margin: 0 auto; }
.chip-aap-sec .chip-aap-sec__sub { font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,0.6); max-width: 560px; margin: 20px auto 0; }

.chip-aap { margin-top: 56px; }
.chip-aap__list { list-style: none; margin: 0; padding: 0; }
.chip-aap__row { padding: 34px 0; border-bottom: 1px solid rgba(255,255,255,0.09); }
.chip-aap__row:first-child { padding-top: 0; }
.chip-aap__row:last-child { border-bottom: 0; padding-bottom: 0; }
.chip-aap__info { margin-bottom: 26px; }
.chip-aap .chip-aap__name { font-family: var(--chip-font-body); font-size: 19px; font-weight: 800; line-height: 1.35; letter-spacing: -0.01em; color: #fff; margin: 0 0 4px; }
.chip-aap .chip-aap__role { font-size: 13.5px; font-weight: 700; color: var(--aap-accent); margin: 0 0 8px; }
.chip-aap .chip-aap__full-title { font-style: italic; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.8); max-width: 520px; margin: 2px 0 10px; }
.chip-aap__watch {
	display: inline-flex; align-items: center; gap: 6px; padding-bottom: 2px;
	font-size: 13px; font-weight: 800; color: var(--aap-accent); text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--aap-accent) 50%, transparent); transition: opacity 0.2s var(--chip-ease);
}
.chip-aap__watch:hover { opacity: 0.72; color: var(--aap-accent); }
.chip-aap__watch:focus-visible { outline: 2px solid var(--aap-accent); outline-offset: 3px; }
.chip-aap .chip-aap__label { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 12px; }
.chip-aap__clips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.chip-aap__clip { margin: 0; min-width: 0; }
.chip-aap__thumb {
	position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 9 / 16; padding: 0; cursor: pointer; overflow: hidden;
	border-radius: 14px; border: 1px solid rgba(255,255,255,0.09);
	background: radial-gradient(ellipse at 30% 15%, rgba(255,255,255,0.09) 0%, transparent 55%), linear-gradient(155deg, var(--chip-sea-700) 0%, var(--chip-sea-900) 100%);
}
/* Posters are stills of 9:16 clips in a 9:16 box, so cover never crops a face. */
.chip-aap__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--chip-ease); }
.chip-aap__thumb:hover .chip-aap__poster { transform: scale(1.03); }
.chip-aap__thumb:focus-visible { outline: 3px solid var(--aap-accent); outline-offset: 3px; }
/* The icon is navy, not the reference's white: white on amber is 1.8:1, and a
   play glyph is a graphic that must clear 3:1 against its circle. */
.chip-aap__play {
	position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px;
	border-radius: 50%; background: var(--aap-accent); box-shadow: 0 10px 24px rgba(0,0,0,0.35); transition: transform 0.2s var(--chip-ease);
}
.chip-aap__play svg { width: 20px; height: 20px; margin-left: 3px; fill: var(--chip-sea-900); }
.chip-aap__thumb:hover .chip-aap__play, .chip-aap__thumb:focus-visible .chip-aap__play { transform: scale(1.08); }
.chip-aap .chip-aap__clip-title { font-size: 13px; font-weight: 600; line-height: 1.45; color: rgba(255,255,255,0.8); margin: 10px 2px 0; }
.chip-aap-sec .chip-aap-cta__lead { font-size: 14.5px; color: rgba(255,255,255,0.6); margin: 60px 0 18px; }
.chip-aap-sec .chip-aap-cta { margin: 0; }

@media (max-width: 640px) {
	.chip-aap { margin-top: 40px; }
	.chip-aap-sec .chip-aap-cta__lead { margin-top: 44px; }
	.chip-aap__clips { gap: 10px; }
	.chip-aap__thumb { border-radius: 10px; }
	.chip-aap__play { width: 40px; height: 40px; }
	.chip-aap__play svg { width: 14px; height: 14px; margin-left: 2px; }
	.chip-aap .chip-aap__clip-title { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.chip-aap__poster, .chip-aap__play, .chip-aap__watch { transition: none; }
	.chip-aap__thumb:hover .chip-aap__poster { transform: none; }
}

/* =====================================================================
 * TEAMOPEDIA (Credential Decoder) — filter + search + rich cred cards.
 * Ported from chip30.css .cred-* / .prereq-* (tokens already aliased).
 * ===================================================================== */
.chip-teamopedia .chip-filters { justify-content: center; gap: 8px; margin-bottom: 20px; }
.chip-teamopedia .chip-filter { color: var(--chip-muted); }
.chip-teamopedia .chip-filter.is-active { background: var(--chip-cyan-500); border-color: var(--chip-cyan-500); color: #fff; }
.cred-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; max-width: 760px; margin: 0 auto 32px; }
.cred-search { flex: 1; min-width: 240px; padding: 13px 18px; border: 1px solid var(--chip-border); border-radius: var(--chip-radius-pill); font-family: var(--chip-font-body); font-size: 14px; color: var(--chip-sea-800); outline: none; transition: border-color 0.2s var(--chip-ease); }
.cred-search:focus { border-color: var(--chip-cyan-400); }
.cred-count { font-size: 13px; font-weight: 600; color: var(--chip-muted); white-space: nowrap; margin: 0; }

.cred-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.cred-card { background: #fff; border: 1px solid var(--chip-line); border-radius: 16px; overflow: hidden; transition: transform 0.25s var(--chip-ease), box-shadow 0.25s var(--chip-ease); box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
.cred-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
.cred-card[hidden] { display: none !important; }
.cred-header { display: flex; gap: 14px; align-items: center; padding: 20px 22px 16px; background: var(--chip-sea-800); }
.cred-abbr { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--chip-cyan-400); font-family: var(--chip-font-display); min-width: 52px; }
.cred-full-name { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 2px; }
.cred-category { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.45); letter-spacing: 1px; text-transform: uppercase; margin: 0; }
.cred-body { padding: 18px 22px; }
.cred-section-label { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--chip-cyan-500); margin: 0 0 6px; font-style: italic; }
.cred-plain { font-size: 13px; color: var(--chip-sea-800); line-height: 1.65; margin: 0 0 16px; font-style: italic; border-left: 3px solid var(--chip-cyan-200); padding-left: 10px; }
.cred-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.cred-item { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--chip-muted); line-height: 1.55; }
.cred-item-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.cred-item strong { color: var(--chip-sea-800); display: block; margin-bottom: 2px; }
.cred-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.cred-badge { font-size: 10px; color: var(--chip-muted); background: var(--chip-sand-bg); border: 1px solid var(--chip-line); padding: 2px 8px; border-radius: var(--chip-radius-pill); }
.cred-badge--ok { font-weight: 700; color: var(--chip-green-500); background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.2); }
.prereq-toggle { width: calc(100% + 44px); margin: 0 -22px; text-align: left; background: var(--chip-sand-bg); border: none; border-top: 1px solid var(--chip-line); padding: 10px 22px; font-family: var(--chip-font-body); font-size: 12px; font-weight: 600; color: var(--chip-cyan-600); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; }
.prereq-toggle:hover { background: var(--chip-cyan-050); }
.prereq-arrow { transition: transform 0.25s; }
.prereq-toggle.is-open .prereq-arrow { transform: rotate(180deg); }
.prereq-panel { display: none; padding: 14px 0 4px; }
.prereq-panel.is-open { display: block; }
.prereq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.prereq-label { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--chip-muted); margin: 0 0 4px; }
.prereq-text { font-size: 11px; color: var(--chip-sea-800); line-height: 1.6; margin: 0; }
.finra-link { font-size: 11px; font-weight: 600; color: var(--chip-cyan-600); text-decoration: none; display: inline-block; }
.finra-link:hover { text-decoration: underline; }
.cred-no-results { text-align: center; padding: 60px 20px; color: var(--chip-muted); font-size: 15px; }
.cred-more { text-align: center; margin-top: 28px; }
.cred-more__btn[hidden] { display: none; }
.cred-no-results__reset { background: none; border: none; color: var(--chip-cyan-600); font-weight: 600; font-size: 15px; cursor: pointer; padding: 0; }
.cred-no-results__reset:hover { text-decoration: underline; }
@media (max-width: 600px) { .cred-grid { grid-template-columns: 1fr; } }

/* Teamopedia "How It Works" step cards: big alternating-color number + left border */
.chip-how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 2.5rem; align-items: stretch; }
.chip-how-steps > * { margin-block-start: 0 !important; }
.chip-how-step { height: 100%; background: #fff; border: 1px solid var(--chip-line); border-left: 4px solid var(--chip-cyan-500); border-radius: 16px; padding: 26px 24px; box-shadow: var(--chip-shadow-card); }
.chip-how-step:nth-child(2) { border-left-color: var(--chip-magenta-500); }
.chip-how-step__num { font-family: var(--chip-font-display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--chip-cyan-500); margin: 0 0 1.25rem; }
.chip-how-step:nth-child(2) .chip-how-step__num { color: var(--chip-magenta-500); }
.chip-how-step__title { font-family: var(--chip-font-display); font-weight: 700; font-size: 1.05rem; color: var(--chip-sea-800); margin: 0 0 0.4rem; }
.chip-how-step__desc { color: var(--chip-slate); font-size: 0.92rem; line-height: 1.6; margin: 0; }
@media (max-width: 760px) { .chip-how-steps { grid-template-columns: 1fr; } }

/* Teamopedia hero trust row + FINRA pill + founder quote */
.chip-team-pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--chip-font-mono); font-size: 10px; letter-spacing: 0.03em; color: var(--chip-cyan-400); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--chip-radius-pill); padding: 5px 12px; margin: 20px 0 18px; }
.chip-team-trust { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 22px 0 0; list-style: none; padding: 0; }
.chip-team-trust li { font-size: 13px; color: rgba(255,255,255,0.7); margin: 0; }
.chip-team-quote { font-family: var(--chip-font-display); font-style: italic; font-size: 1.1rem; line-height: 1.55; color: rgba(255,255,255,0.85); border-left: 3px solid var(--chip-cyan-400); padding-left: 1.1rem; max-width: 720px; margin: 28px 0 0; }

/* =====================================================================
 * MONEY ARCHETYPES (personas) — hero stats, what-are steps, persona grid,
 * financial seasons + matrix, persona-matched resources. From chip30.css.
 * ===================================================================== */

/* Archetypes hero accent: teal italic, no brand squiggle (seasons ems keep the amber squiggle). */
.chip-arch-page .chip-page-header h1 em { background-image: none; font-style: italic; }
.chip-em-amber { color: var(--chip-amber-500); font-style: normal; }
.chip-sec--navy .chip-em-amber { color: var(--chip-amber-500); }

/* Arch hero: confine content to a left column so the person stays visible on the right */
.chip-arch-page .chip-page-header--photo .chip-sec__inner > * { max-width: 520px; }
.chip-arch-page .chip-page-header--photo .chip-p-stats { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; max-width: 520px; gap: 18px; }
.chip-arch-page .chip-page-header--photo .chip-p-stats > * { margin-block-start: 0 !important; }
@media (max-width: 860px) {
	.chip-arch-page .chip-page-header--photo .chip-sec__inner > * { max-width: none; }
	.chip-arch-page .chip-page-header--photo .chip-p-stats { max-width: 420px; }
}
@media (max-width: 480px) {
	.chip-arch-page .chip-page-header--photo .chip-p-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Hero stats row (on the dark cover header) */
.chip-p-stats { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 40px; }
.chip-p-stat { text-align: left; }
.chip-p-stat__num { font-family: var(--chip-font-display); font-weight: 800; font-size: 28px; color: var(--chip-cyan-400); display: block; line-height: 1; margin: 0 0 4px; }
.chip-p-stat__label { font-size: 12px; color: rgba(255,255,255,0.5); margin: 0; }

/* "What Are Archetypes" — text + checklist + numbered steps */
.chip-arch-what { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 64px); align-items: center; }
.chip-arch-check { list-style: none; padding: 0; margin: 1.5rem 0; display: flex; flex-direction: column; gap: 12px; }
.chip-arch-check li { position: relative; padding-left: 30px; font-size: 15px; color: var(--chip-slate); line-height: 1.5; }
.chip-arch-check li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; background: var(--chip-cyan-500); -webkit-mask: var(--chip-check) center/contain no-repeat; mask: var(--chip-check) center/contain no-repeat; }
.chip-arch-steps { display: grid; gap: 14px; background: var(--chip-sea-800); border-radius: var(--chip-radius-l); padding: clamp(1.25rem, 3vw, 2rem); }
.chip-arch-step { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-left: 3px solid var(--chip-cyan-400); border-radius: var(--chip-radius-m); padding: 1.1rem 1.3rem; }
.chip-arch-step:nth-child(2) { border-left-color: var(--chip-magenta-500); }
.chip-arch-step:nth-child(3) { border-left-color: var(--chip-amber-500); }
.chip-arch-step__num { font-family: var(--chip-font-mono); font-weight: 700; font-size: 13px; color: var(--chip-cyan-400); margin: 0 0 0.3rem; }
.chip-arch-step:nth-child(2) .chip-arch-step__num { color: var(--chip-magenta-500); }
.chip-arch-step:nth-child(3) .chip-arch-step__num { color: var(--chip-amber-500); }
.chip-arch-step__title { font-family: var(--chip-font-display); font-weight: 700; font-size: 1.05rem; color: #fff; margin: 0 0 0.25rem; }
.chip-arch-step__desc { color: rgba(255,255,255,0.6); font-size: 0.92rem; line-height: 1.5; margin: 0; }

/* "What Are" button: flush-left (not the centered CTA-band default) */
.chip-arch-what .chip-cta__btns { justify-content: flex-start; }

/* Persona cards: 3 per row, last row centered (5 → 3 + 2 centered) */
.chip-pgrid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 16px; margin-top: 2.5rem; }
.chip-pgrid > * { margin-block-start: 0 !important; }
.chip-parch { flex: 0 1 calc((100% - 32px) / 3); max-width: 340px; }
.chip-parch { background: #fff; border: 1px solid var(--chip-line); border-radius: 16px; padding: 24px 20px; text-align: center; display: flex; flex-direction: column; justify-content: center; transition: transform 0.25s var(--chip-ease), box-shadow 0.25s var(--chip-ease), border-color 0.25s var(--chip-ease); }
.chip-parch:hover { border-color: var(--chip-cyan-500); box-shadow: 0 8px 24px rgba(10,126,164,0.1); transform: translateY(-4px); }
.chip-parch__emoji { font-size: 32px; display: block; margin: 0 0 12px; }
.chip-parch__name { font-family: var(--chip-font-display); font-size: 15px; font-weight: 700; color: var(--chip-sea-800); margin: 0 0 6px; }
.chip-parch__tagline { font-size: 11px; color: var(--chip-cyan-600); font-weight: 600; margin: 0 0 10px; }
.chip-parch__desc { font-size: 12px; color: var(--chip-muted); line-height: 1.5; margin: 0 0 14px; }
.chip-parch__match-label { font-family: var(--chip-font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chip-muted); margin: 0 0 3px; }
.chip-parch__match { font-size: 11px; font-weight: 600; color: var(--chip-sea-700); line-height: 1.4; margin: 0; }

/* Financial Seasons (dark) + Archetype × Season matrix */
.chip-seasons__intro { font-family: var(--chip-font-display); font-size: 22px; color: #fff; line-height: 1.3; max-width: 760px; margin: 1rem 0 1.5rem; }
.chip-seasons__quote { font-family: var(--chip-font-display); font-style: italic; font-size: 1.25rem; line-height: 1.5; color: rgba(255,255,255,0.85); border-left: 3px solid var(--chip-cyan-400); padding-left: 1.25rem; max-width: 760px; margin: 0 0 2.5rem; }
/* Seasons top: text (left) | matrix panel (right) */
.chip-seasons-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 64px); align-items: start; margin-bottom: 56px; }
.chip-asm { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 28px; overflow-x: auto; }
.chip-asm__caption { font-family: var(--chip-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin: 0 0 12px; }
.chip-asm__table { display: grid; grid-template-columns: 72px repeat(4, 1fr); gap: 6px; font-size: 10px; }
.chip-asm__h { font-family: var(--chip-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--chip-cyan-400); padding: 4px 6px; }
.chip-asm__row-label { display: flex; align-items: center; font-weight: 700; font-size: 11px; color: #fff; padding: 6px; }
.chip-asm__cell { font-size: 10px; line-height: 1.3; color: rgba(255,255,255,0.78); padding: 8px 7px; border-radius: 7px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
.chip-asm__cell--explorer { background: rgba(48,161,205,0.12); }
.chip-asm__cell--builder { background: rgba(31,158,107,0.12); }
.chip-asm__cell--optimizer { background: rgba(231,182,92,0.12); }
.chip-asm__cell--protector { background: rgba(232,16,110,0.10); }
.chip-asm__cell--architect { background: rgba(124,58,237,0.14); }
.chip-seasons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.chip-season-card { border-radius: 12px; padding: 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-top: 3px solid var(--chip-cyan-400); }
.chip-season-card__name { font-family: var(--chip-font-display); font-weight: 700; font-size: 1.1rem; color: #fff; margin: 0 0 2px; }
.chip-season-card__sub { font-size: 12px; font-weight: 600; color: var(--chip-cyan-400); margin: 0 0 10px; }
.chip-season-card__desc { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.55; margin: 0 0 12px; }
.chip-season-card__tags { font-family: var(--chip-font-mono); font-size: 10px; letter-spacing: 0.04em; color: rgba(255,255,255,0.45); margin: 0; }
.chip-season-card--building { border-top-color: var(--chip-cyan-400); }
.chip-season-card--stabilizing { border-top-color: var(--chip-green-500); }
.chip-season-card--expanding { border-top-color: var(--chip-amber-500); }
.chip-season-card--recovering { border-top-color: var(--chip-magenta-500); }

@media (max-width: 980px) {
	.chip-arch-what { grid-template-columns: 1fr; }
	.chip-seasons-top { grid-template-columns: 1fr; }
	.chip-parch { flex-basis: calc((100% - 16px) / 2); }
	.chip-seasons-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.chip-parch { flex-basis: 100%; }
	.chip-seasons-grid { grid-template-columns: 1fr; }
}

/* ---------- CTA pills ---------- */
.chip-cta__pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 1.5rem; }
.chip-cta__pill { margin: 0; font-size: 12px; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 8px 18px; }

/* ---------- About responsive ---------- */
@media (max-width: 920px) {
	.chip-story { grid-template-columns: 1fr; gap: 48px; }
	.chip-tgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
	.chip-mission { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
	.chip-mission-stats, .chip-mstats { grid-template-columns: 1fr 1fr; gap: 12px; }
	.chip-mstat { padding: 18px 14px; }
	.chip-mstat__num { font-size: 28px; margin-bottom: 4px; }
	.chip-mstat p { font-size: 11px; line-height: 1.4; }
	.chip-explain { padding: 26px 22px; }
	.chip-bio__card { grid-template-columns: 1fr; max-height: 92vh; }
	.chip-bio__photo { height: 150px; font-size: 60px; }
}
@media (max-width: 600px) {
	.chip-tgrid, .chip-tgrid--adv { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.chip-bio__body { padding: 24px 22px; }
	.chip-bio__name { font-size: 22px; }
	.chip-bio__photo { font-size: 54px; }
}

/* ============================================================
   CULTURAL COINS HUB — /cultural-coins/  (redesign, v0.5.0)

   A direct port of the signed-off comp. Every value here is the
   comp's value, not a token, on purpose: the comp uses a fixed
   24px gutter and fixed type sizes where the site-wide tokens
   use fluid clamps, and rounding them to the nearest token is
   exactly how a pixel-match drifts. Tokens are used only where
   the comp's colour already equals the brand colour.

   Namespaced `chip-cc-*` and NOT reusing `.article-card`,
   `.chip-cfeat` or `.chip-vcard`: those classes are still
   rendered by patterns/arch-resources.php, so restyling them
   here would silently repaint the Money Archetypes page.
   ============================================================ */

/* ------------------------------------------------------------------
   ACCESSIBILITY — WCAG 2.2 AA, actioned 2026-08-23.

   The comp's muted greys, its cyan and its magenta all failed AA as
   drawn: 36 distinct text/background pairs measured below 4.5:1, plus
   two UI borders below 3:1. They are corrected here. Every value was
   solved by lowering HSL lightness only, so hue and saturation — and
   therefore the brand read — are unchanged; the shift is a few percent
   of lightness, not a new palette.

   The substitutions, and why there are so few of them:

     #74858B, #9DACB1, #B9C4C8  ->  #637176   one muted grey
       Three greys collapse into one. The comp used lightness alone to
       separate body copy from labels from counts, and there is no room
       left in that range once all three have to clear 4.5:1. The
       hierarchy now comes from size, weight and letter-spacing, which
       those elements already differed by.

     #16A3CC on light           ->  #0C7695   one cyan
       Also the fill behind white text (hero CTA, active tab, active
       chip, avatar). 5.20:1 on white, 4.70:1 on the sand card.
       #0A7FA3 (--chip-cyan-600) was tried first and misses on sand at
       4.15:1, which is why this is a new value and not the token.

     #16A3CC on #B7E4F1         ->  #075E7A   featured badge only
       That badge sits on its own pale-cyan chip, so it has to go darker
       than the general cyan to clear it. 5.32:1.

     #E741AD fill               ->  #D6249A   one magenta
       Behind white text: featured link, video badge, play button,
       subscribe button. 4.59:1.

     #E741AD text on dark art   ->  #EC67BD   video series badge

     rgba(255,255,255,.38/.40/.48)  ->  .58    on the navy cards

   Archetype cards carry TWO colours from here on:

     accent  the brand hue, unchanged, and still what the archetype-
             linked article templates use. chip_cc_archetypes() is the
             source of truth and single.php reads it into --cc-accent.
     ink     a darker shade of the same hue, used only where the colour
             has to carry text: the identity bar and the active fill.
             White on the Explorer, Optimizer and Protector accents
             lands at 2.94, 3.77 and 3.41:1. Builder and Architect
             already cleared it, so their ink IS their accent.

   Non-text contrast (1.4.11) needed three more changes. A control's
   boundary is what marks it as a control, and the comp's hairlines sat
   at 1.37:1 (filter chips) and 1.89:1 (video tabs, the email field,
   Load More). Those alphas go to .52 on white and .38 on navy.

   The active video tab is the one place where the fill cannot carry the
   state: it has to stay dark enough for white text (5.20:1), which
   leaves it at 2.88:1 against the navy band behind it. Its border goes
   to #43B7DA instead, so the state reads at 6.43:1.

   The magenta focus ring was already fine — 3.30:1 on the sand card,
   3.65:1 on white, 4.10:1 on navy — and is unchanged.

   .chip-cc-card__ghost stays at rgba(255,255,255,.16). It is a
   watermark repeating, verbatim, the category printed 20px below it in
   the same card; it is aria-hidden and conveys nothing on its own.
   Raising it to 3:1 needs ~.45 alpha, at which point it stops reading
   as a watermark and starts reading as a second heading.
   ------------------------------------------------------------------ */

/* WP wraps every pattern section in .wp-block-group, and core's
   is-layout-flow rule injects a 24px margin-block-start onto
   non-first children. Zero it so the comp's own margins govern. */
.chip-cc-hero__inner > *,
.chip-cc-container > *,
.chip-cc-hero__actions > *,
.chip-cc-nl > *,
.chip-cc-nl__copy > * { margin-block-start: 0; }

.chip-cc-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.chip-cc-section { padding: 56px 24px; }

/* The comp's <body> sets neither font-size nor line-height, so every element in
   it that does not declare its own inherits 16px / normal. The theme's body sets
   17px / 1.6. Re-baselining the three hub roots is what keeps pill heights,
   badges and meta rows at the comp's pixel heights instead of ~4px taller each. */
.chip-cc-hero, .chip-cc-featured, .chip-cc-section { font-size: 16px; line-height: normal; }

.chip-cc-eyebrow {
	display: block;
	font-family: var(--chip-font-body);
	font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
	color: #43B7DA; margin: 0 0 14px;
}
.chip-cc-eyebrow.is-teal { color: #0C7695; }

.chip-cc-section__title { font-family: var(--chip-font-display); font-weight: 800; font-size: clamp(24px, 3.5vw, 32px); line-height: 1.15; letter-spacing: -0.02em; color: #0C2A38; margin: 0 0 10px; }
.chip-cc-section__desc { font-size: 14px; color: #637176; line-height: 1.7; margin: 0 0 28px; max-width: 62ch; }

/* Magenta focus ring, per the comp's accessibility spec. */
.chip-cc-hero a:focus-visible,
.chip-cc-section a:focus-visible,
.chip-cc-section button:focus-visible,
.chip-cc-section input:focus-visible,
.chip-cc-featured a:focus-visible { outline: 3px solid #E741AD; outline-offset: 2px; border-radius: 4px; }

/* ---------- HERO ---------- */
.chip-cc-hero { background: #0C2A38; position: relative; overflow: hidden; }
.chip-cc-hero::before {
	content: ""; position: absolute; top: -100px; right: -80px; width: 420px; height: 420px;
	background: radial-gradient(circle, rgba(24,161,206,0.14) 0%, transparent 70%); pointer-events: none;
}
.chip-cc-hero__inner { max-width: 1200px; margin: 0 auto; padding: 64px 24px 48px; position: relative; z-index: 1; }
.chip-cc-hero__title { font-family: var(--chip-font-display); font-weight: 800; font-size: clamp(36px, 6vw, 60px); line-height: 1.03; letter-spacing: -0.035em; color: #fff; margin: 0; }
.chip-cc-hero__sub { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.62); max-width: 58ch; margin: 18px 0 26px; }
.chip-cc-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
/* The comp puts the <a> directly in the flex row. A block pattern has to wrap it
   in a paragraph, so the paragraph shrink-wraps instead of adding a line box. */
.chip-cc-hero__cta-wrap { margin: 0; display: flex; }
.chip-cc-hero__cta {
	display: inline-block; font-family: var(--chip-font-display); font-weight: 700; font-size: 14px; color: #fff;
	background: #0C7695; padding: 12px 22px; border-radius: 100px; border: none; cursor: pointer;
	transition: background 0.2s var(--chip-ease);
}
.chip-cc-hero__cta:hover { background: #0A6076; color: #fff; }
.chip-cc-hero__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-cc-hero__tag {
	margin: 0; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
	padding: 6px 14px; border-radius: 100px; font-size: 12px; color: rgba(255,255,255,0.62);
}

/* ---------- FEATURED ---------- */
.chip-cc-featured { background: #F7F3EC; padding: 48px 24px; }
.chip-cc-feat {
	/* Colour is pinned so nothing inside inherits the theme's global link colour;
	   in the comp these cards inherit the comp's own. */
	color: #0C7695;
	display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-radius: 20px;
	overflow: hidden; box-shadow: 0 4px 32px rgba(0,0,0,0.06); text-decoration: none;
	transition: box-shadow 0.2s var(--chip-ease), transform 0.2s var(--chip-ease);
}
.chip-cc-feat:hover { box-shadow: 0 10px 40px rgba(12,42,56,0.12); transform: translateY(-2px); }
.chip-cc-feat__art {
	position: relative; min-height: 260px; overflow: hidden; display: block;
	background: linear-gradient(150deg, #0a2230 0%, #0C2A38 55%, #0e3348 100%);
}
.chip-cc-feat__art::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: radial-gradient(circle at 78% 78%, rgba(24,161,206,0.32) 0%, transparent 58%);
}
/* A real cover image replaces the generated artwork; the scrim keeps the
   caption legible over any photograph. */
.chip-cc-feat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chip-cc-feat__art.has-img::before { background: linear-gradient(180deg, rgba(10,34,48,0.15) 0%, rgba(10,34,48,0.8) 100%); }
.chip-cc-feat__art.has-img .chip-cc-feat__mark { display: none; }
.chip-cc-feat__mark {
	position: absolute; left: 28px; top: 24px; z-index: 2; width: 48px; height: 48px; border-radius: 50%;
	border: 2px solid rgba(67,183,218,0.55); display: flex; align-items: center; justify-content: center;
	font-family: var(--chip-font-display); font-weight: 800; font-size: 20px; color: #43B7DA; background: rgba(10,34,48,0.4);
}
.chip-cc-feat__caption { position: absolute; left: 28px; bottom: 24px; z-index: 2; text-shadow: 0 2px 14px rgba(10,34,48,0.9); }
.chip-cc-feat__tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #43B7DA; }
.chip-cc-feat__line { display: block; font-family: var(--chip-font-display); font-weight: 800; font-size: 17px; color: rgba(255,255,255,0.95); margin-top: 4px; max-width: 15ch; }
.chip-cc-feat__body { padding: 32px 30px; display: block; }
.chip-cc-feat__badge { font-family: var(--chip-font-display); font-weight: 700; font-size: 11px; background: #B7E4F1; color: #075E7A; padding: 5px 12px; border-radius: 100px; display: inline-block; }
/* A real <h2> so the card is announced as an article, matching the comp's
   outline; the theme's global heading margin is overridden here, not inherited. */
.chip-cc-feat__title { display: block; font-family: var(--chip-font-display); font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; letter-spacing: -0.02em; color: #0C2A38; margin: 14px 0 10px; }
.chip-cc-feat__excerpt { display: block; font-size: 14px; color: #637176; line-height: 1.7; margin: 0 0 18px; }
.chip-cc-feat__link { display: inline-flex; font-family: var(--chip-font-display); font-weight: 700; font-size: 13px; color: #fff; background: #D6249A; padding: 10px 20px; border-radius: 100px; }
.chip-cc-feat:hover .chip-cc-feat__link { background: #B81A83; }

/* ---------- SHARED: hover-peek cards (topics + series) ---------- */
/* The caret is a shade darker than the hub's cyan on purpose: it sits on its own
   rgba(12,42,56,.06) chip, which darkens the sand card to #E9E7E1 underneath it
   and costs the general cyan its AA margin there (4.20:1). */
.chip-cc-arrow {
	display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
	background: rgba(12,42,56,0.06); color: #0A6B88; font-size: 10px; border: none; flex-shrink: 0; cursor: pointer;
	position: relative; z-index: 2; padding: 1px 6px; line-height: normal;
	font-family: inherit; /* a bare <button> falls back to the UA font, which reshapes the caret */
	transition: transform 0.2s ease, background 0.2s ease;
}
.chip-cc-topic:hover .chip-cc-arrow, .chip-cc-topic:focus-within .chip-cc-arrow,
.chip-cc-scard:hover .chip-cc-arrow, .chip-cc-scard:focus-within .chip-cc-arrow,
.chip-cc-arrow[aria-expanded="true"] { transform: rotate(180deg); background: rgba(22,163,204,0.18); }
.chip-cc-peek {
	position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 3;
	background: #fff; border-radius: 12px; box-shadow: 0 14px 34px rgba(12,42,56,0.2);
	padding: 12px 16px; opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.chip-cc-topic:hover .chip-cc-peek, .chip-cc-topic:focus-within .chip-cc-peek,
.chip-cc-scard:hover .chip-cc-peek, .chip-cc-scard:focus-within .chip-cc-peek,
.chip-cc-peek.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
/* Raising the panel inside the card is not enough. Every card in the grid is its
   own stacking context at z-index 1, so a panel that overhangs the row below is
   painted UNDER the next card's opaque background — the CARD has to be lifted,
   not the panel. :hover and :focus-within do that already; a tap has no hover,
   so chip-coins.js marks the card is-peeking alongside the panel. */
.chip-cc-topic.is-peeking, .chip-cc-scard.is-peeking { z-index: 30; }
.chip-cc-peek__label { font-family: var(--chip-font-display); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #637176; margin-bottom: 6px; }
.chip-cc-peek ul { margin: 0; padding: 0; list-style: none; }
.chip-cc-peek li { padding: 7px 0; border-top: 1px solid rgba(12,42,56,0.08); }
.chip-cc-peek li:first-child { border-top: none; }
.chip-cc-peek li a { display: block; font-family: var(--chip-font-display); font-size: 12px; font-weight: 600; color: #0C2A38; line-height: 1.4; }
.chip-cc-peek li a:hover { color: #0C7695; }

/* ---------- TOPICS ---------- */
.chip-cc-topics { background: #fff; }
.chip-cc-topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.chip-cc-topic { position: relative; z-index: 1; background: #F7F3EC; border-radius: 14px; padding: 20px 18px; }
.chip-cc-topic:hover, .chip-cc-topic:focus-within { z-index: 30; }
.chip-cc-topic__name { font-family: var(--chip-font-display); font-weight: 700; font-size: 14.5px; line-height: 1.3; letter-spacing: 0; color: #0C2A38; margin: 0 0 6px; min-height: 38px; }
/* The whole card is the link target; the arrow and peek sit above it. */
.chip-cc-topic__name a { color: inherit; }
.chip-cc-topic__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.chip-cc-topic:hover .chip-cc-topic__name a { color: #0C7695; }
.chip-cc-topic__desc { font-size: 12px; color: #637176; line-height: 1.55; margin: 0 0 12px; }
.chip-cc-topic__foot { display: flex; align-items: center; justify-content: space-between; }
.chip-cc-topic__count { font-family: var(--chip-font-display); font-size: 11px; font-weight: 700; color: #637176; }
.chip-cc-topic.is-empty .chip-cc-topic__count { color: #637176; font-style: italic; }

/* ---------- VIDEOS ---------- */
.chip-cc-videos { background: #0C2A38; }
.chip-cc-vhead { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 14px; }
.chip-cc-vtitle { font-family: var(--chip-font-display); font-weight: 800; font-size: clamp(24px, 3.5vw, 34px); color: #fff; line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
.chip-cc-vtitle em { color: #43B7DA; font-style: italic; font-weight: 700; }
.chip-cc-vtabs { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-cc-vtab {
	cursor: pointer; padding: 7px 16px; border-radius: 100px; border: 1.5px solid rgba(255,255,255,0.38);
	background: transparent; color: rgba(255,255,255,0.5); font-family: var(--chip-font-body);
	font-size: 11.5px; font-weight: 600; transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.chip-cc-vtab:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.chip-cc-vtab.is-active { border-color: #43B7DA; background: #0C7695; color: #fff; font-weight: 700; }

.chip-cc-vfeat {
	color: #0C2A38;
	background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px;
	overflow: hidden; margin-bottom: 18px; display: grid; grid-template-columns: 1fr 1fr; text-decoration: none;
}
.chip-cc-vfeat__art {
	background: linear-gradient(135deg, #0f2a3d, #0a1f30); position: relative; display: flex; align-items: center;
	justify-content: center; min-height: 220px;
}
.chip-cc-vfeat__art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 40% 50%, rgba(24,161,206,0.15) 0%, transparent 60%); }
.chip-cc-vfeat__img, .chip-cc-vcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chip-cc-vfeat__art.has-img::before, .chip-cc-vcard__art.has-img::before { background: rgba(10,31,48,0.45); }
.chip-cc-vplay {
	width: 52px; height: 52px; border-radius: 50%; background: #D6249A; display: flex; align-items: center; justify-content: center;
	position: relative; z-index: 2; box-shadow: 0 8px 24px rgba(214,36,154,0.4); color: #fff; font-size: 18px;
	transition: transform 0.2s var(--chip-ease);
}
.chip-cc-vfeat:hover .chip-cc-vplay, .chip-cc-vcard:hover .chip-cc-vplay { transform: scale(1.08); }
.chip-cc-vplay--sm { width: 36px; height: 36px; background: rgba(255,255,255,0.9); color: #0C2A38; font-size: 13px; box-shadow: none; }
.chip-cc-vfeat__badge {
	position: absolute; top: 12px; left: 12px; z-index: 2; background: #D6249A; color: #fff; font-size: 9px; font-weight: 700;
	padding: 4px 10px; border-radius: 100px; letter-spacing: 0.08em; text-transform: uppercase;
}
.chip-cc-vfeat__body { padding: 26px 28px; display: flex; flex-direction: column; justify-content: center; }
.chip-cc-vfeat__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; color: #43B7DA; text-transform: uppercase; margin-bottom: 8px; }
.chip-cc-vfeat__title { font-family: var(--chip-font-display); font-weight: 700; font-size: 18px; color: #fff; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 10px; }
.chip-cc-vfeat__excerpt { font-size: 12.5px; color: rgba(255,255,255,0.58); line-height: 1.65; margin: 0 0 16px; }
.chip-cc-vfeat .chip-author { margin: 0; gap: 7px; }
.chip-cc-vfeat .chip-author__avatar { width: 30px; height: 30px; font-family: var(--chip-font-display); font-size: 10.5px; background: #0C7695; }
.chip-cc-vfeat .chip-author__name { font-family: var(--chip-font-display); font-size: 11.5px; font-weight: 600; color: #fff; }
.chip-cc-vfeat .chip-author__detail { font-size: 9.5px; color: rgba(255,255,255,0.58); }

.chip-cc-vgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.chip-cc-vcard { color: #0C2A38; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; overflow: hidden; text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.chip-cc-vcard:hover { border-color: rgba(24,161,206,0.35); transform: translateY(-3px); }
.chip-cc-vcard__art { background: linear-gradient(135deg, #0f2a3d, #0a1f30); height: 120px; position: relative; display: flex; align-items: center; justify-content: center; }
.chip-cc-vcard__art::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.chip-cc-vbadge { position: absolute; top: 9px; left: 9px; z-index: 2; font-size: 8.5px; font-weight: 700; padding: 3px 8px; border-radius: 100px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid; }
.chip-cc-vbadge--amber { background: rgba(231,182,92,0.2); color: #E7B65C; border-color: rgba(231,182,92,0.3); }
.chip-cc-vbadge--teal { background: rgba(24,161,206,0.15); color: #43B7DA; border-color: rgba(24,161,206,0.3); }
.chip-cc-vbadge--magenta { background: rgba(231,65,173,0.15); color: #EC67BD; border-color: rgba(231,65,173,0.3); }
.chip-cc-vtime { position: absolute; bottom: 7px; right: 7px; z-index: 2; background: rgba(0,0,0,0.6); color: #fff; font-size: 9.5px; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
.chip-cc-vcard__body { display: block; padding: 12px 14px; }
.chip-cc-vcard__title { display: block; font-family: var(--chip-font-display); font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.4; margin-bottom: 5px; }
.chip-cc-vcard__meta { display: block; font-size: 10.5px; color: rgba(255,255,255,0.58); }

/* min-height holds the comp's footer rhythm on a shelf that has nothing left to
   page in, where the "Load More" button is (correctly) not rendered at all. */
.chip-cc-vfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; flex-wrap: wrap; gap: 10px; min-height: 37px; }
.chip-cc-more {
	cursor: pointer; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.62); padding: 10px 20px; border-radius: 100px;
	font-family: var(--chip-font-body); font-size: 12px; font-weight: 600; border: 1px solid rgba(255,255,255,0.38);
}
.chip-cc-more:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.chip-cc-yt { display: flex; align-items: center; gap: 7px; color: #43B7DA; font-size: 12px; font-weight: 600; }
.chip-cc-yt span { font-size: 16px; }
.chip-cc-yt:hover { color: #fff; }

/* ---------- SERIES ---------- */
.chip-cc-series { background: #F7F3EC; }
.chip-cc-series-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.chip-cc-scard { position: relative; z-index: 1; background: #fff; border-radius: 14px; padding: 20px 16px; border-top: 3px solid transparent; }
.chip-cc-scard.is-flagship { border-top-color: #0C7695; }
.chip-cc-scard:hover, .chip-cc-scard:focus-within { z-index: 30; }
.chip-cc-scard__name { font-family: var(--chip-font-display); font-weight: 700; font-size: 14.5px; line-height: 1.3; letter-spacing: 0; color: #0C2A38; margin: 0 0 6px; min-height: 38px; }
.chip-cc-scard__name a { color: inherit; }
.chip-cc-scard__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.chip-cc-scard:hover .chip-cc-scard__name a { color: #0C7695; }
.chip-cc-scard__desc { font-size: 12px; color: #637176; line-height: 1.55; margin: 0 0 10px; }
.chip-cc-scard__foot { display: flex; align-items: center; justify-content: flex-end; }

/* ---------- LATEST ARTICLES ---------- */
.chip-cc-latest { background: #fff; }
.chip-cc-latest__title { margin-bottom: 26px; }
.chip-cc-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; }
.chip-cc-frow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip-cc-frow__label { font-family: var(--chip-font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #637176; min-width: 74px; }
.chip-cc-chip {
	cursor: pointer; font-family: var(--chip-font-display); font-weight: 700; font-size: 12px; padding: 6px 14px;
	border-radius: 100px; border: 1.5px solid rgba(12,42,56,0.52); background: #fff; color: #0C2A38;
	transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.chip-cc-chip:hover { border-color: #0C7695; }
.chip-cc-chip.is-active { border-color: #0C7695; background: #0C7695; color: #fff; }
.chip-cc-chip__count { opacity: 0.5; font-weight: 500; }
.chip-cc-chip.is-active .chip-cc-chip__count { opacity: 0.75; }

.chip-cc-arch-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 36px; }
.chip-cc-arch {
	cursor: pointer; border-radius: 12px; padding: 16px; border: none; border-top: 3px solid transparent;
	display: block; width: 100%; transition: background 0.15s ease;
	/* The comp draws these as <div>s. They are <button>s here so the filter is
	   keyboard-operable, which means undoing the UA button font, size and colour. */
	font-family: inherit; font-size: 16px; line-height: normal; color: #0C2A38; text-align: inherit;
}
.chip-cc-arch__name { display: block; font-family: var(--chip-font-display); font-weight: 700; font-size: 14px; margin-bottom: 5px; }
.chip-cc-arch__desc { display: block; font-family: var(--chip-font-body); font-size: 11.5px; line-height: 1.5; margin: 0; }

/* Persona colours, per the CHIP Persona Colour System (Corrected, v2).
   Written out per slug rather than driven by a custom property because the five
   archetypes are a closed set — the article templates hard-code the same five.

   Two shades each. The ACCENT is the brand hue and is what chip_cc_archetypes()
   hands to the article templates and to single.php. The INK is a darker shade of
   that same hue, used only where the colour carries text: the identity bar and
   the active fill. See the ACCESSIBILITY block at the top of this section. */
.chip-cc-arch[data-archetype="explorer"]  { background: #EFF9FC; border-top-color: #0C7695; }
.chip-cc-arch[data-archetype="explorer"] .chip-cc-arch__name { color: #0C2A38; }
.chip-cc-arch[data-archetype="explorer"] .chip-cc-arch__desc { color: #4B7788; }
.chip-cc-arch[data-archetype="explorer"].is-active { background: #0C7695; }

.chip-cc-arch[data-archetype="builder"]   { background: #F5F3FF; border-top-color: #7C3AED; }
.chip-cc-arch[data-archetype="builder"] .chip-cc-arch__name { color: #5B21B6; }
.chip-cc-arch[data-archetype="builder"] .chip-cc-arch__desc { color: #79669C; }
.chip-cc-arch[data-archetype="builder"].is-active { background: #7C3AED; }

.chip-cc-arch[data-archetype="optimizer"] { background: #ECFDF5; border-top-color: #047E58; }
.chip-cc-arch[data-archetype="optimizer"] .chip-cc-arch__name { color: #065F46; }
.chip-cc-arch[data-archetype="optimizer"] .chip-cc-arch__desc { color: #457D6C; }
.chip-cc-arch[data-archetype="optimizer"].is-active { background: #047E58; }

.chip-cc-arch[data-archetype="protector"] { background: #FFF7ED; border-top-color: #AF5514; }
.chip-cc-arch[data-archetype="protector"] .chip-cc-arch__name { color: #C2410C; }
.chip-cc-arch[data-archetype="protector"] .chip-cc-arch__desc { color: #8F6A4E; }
.chip-cc-arch[data-archetype="protector"].is-active { background: #AF5514; }

.chip-cc-arch[data-archetype="architect"] { background: #EFF6FF; border-top-color: #1D4ED8; }
.chip-cc-arch[data-archetype="architect"] .chip-cc-arch__name { color: #1E40AF; }
.chip-cc-arch[data-archetype="architect"] .chip-cc-arch__desc { color: #54719C; }
.chip-cc-arch[data-archetype="architect"].is-active { background: #1D4ED8; }

.chip-cc-arch.is-active .chip-cc-arch__name { color: #fff; }
/* Solid, not the comp's rgba(...,.78): on three of the five fills .78 has to
   become .99 to clear AA, and .99 white is white. */
.chip-cc-arch.is-active .chip-cc-arch__desc { color: #fff; }

.chip-cc-agrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.chip-cc-card { color: #0C2A38; background: #F7F3EC; border-radius: 14px; overflow: hidden; text-decoration: none; display: block; transition: box-shadow 0.2s var(--chip-ease), transform 0.2s var(--chip-ease); }
.chip-cc-card:hover { box-shadow: 0 10px 30px rgba(12,42,56,0.10); transform: translateY(-2px); }
.chip-cc-card__art { position: relative; height: 140px; background: linear-gradient(135deg, #0f2a3d, #0C2A38); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.chip-cc-card__art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 68% 45%, rgba(24,161,206,0.22) 0%, transparent 62%); }
.chip-cc-card__art.has-img::before { background: none; }
.chip-cc-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chip-cc-card__ghost { position: relative; z-index: 2; font-family: var(--chip-font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: rgba(255,255,255,0.16); }
.chip-cc-card__body { padding: 18px; display: block; }
.chip-cc-card__cat { display: inline; font-family: var(--chip-font-display); font-size: 10px; font-weight: 700; color: #0C7695; letter-spacing: 0.08em; text-transform: uppercase; }
.chip-cc-card__title { display: block; font-family: var(--chip-font-display); font-weight: 700; font-size: 16px; color: #0C2A38; line-height: 1.3; letter-spacing: -0.015em; margin: 7px 0 8px; }
.chip-cc-card__excerpt { display: block; font-size: 12px; color: #637176; line-height: 1.6; margin: 0 0 14px; }
.chip-cc-card__foot { display: flex; justify-content: space-between; align-items: center; }
.chip-cc-card__read { font-size: 10.5px; color: #637176; }
.chip-cc-card__link { font-family: var(--chip-font-display); font-size: 11.5px; font-weight: 700; color: #0C7695; }
.chip-cc-empty { padding: 40px 0; text-align: center; color: #637176; font-size: 14px; }
.chip-cc-hidden { display: none !important; }

/* ---------- NEWSLETTER BANNER ---------- */
.chip-cc-nl {
	margin-top: 44px; background: #0C2A38; border-radius: 20px; padding: 36px; display: flex; justify-content: space-between;
	align-items: center; gap: 30px; flex-wrap: wrap; position: relative; overflow: hidden;
}
.chip-cc-nl::before { content: ""; position: absolute; top: -90px; right: -60px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(24,161,206,0.16) 0%, transparent 70%); pointer-events: none; }
.chip-cc-nl__copy { max-width: 440px; position: relative; z-index: 1; }
.chip-cc-nl__title { font-family: var(--chip-font-display); color: #fff; font-weight: 800; font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 6px; }
.chip-cc-nl__lede { color: rgba(255,255,255,0.5); font-size: 13px; line-height: 1.6; margin: 0; }
/* No align-items: the comp lets the button stretch to the input's height. */
.chip-cc-nlform { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.chip-cc-nlform input {
	padding: 12px 16px; border-radius: 100px; border: 1.5px solid rgba(255,255,255,0.38); background: rgba(255,255,255,0.07);
	color: #fff; font-size: 13px; font-family: var(--chip-font-body); outline: none; min-width: 220px;
}
.chip-cc-nlform input::placeholder { color: rgba(255,255,255,0.4); }
.chip-cc-nlform input.is-invalid { border-color: #E741AD; }
.chip-cc-nlform button {
	cursor: pointer; font-family: var(--chip-font-display); font-weight: 700; font-size: 13px; color: #fff;
	background: #D6249A; padding: 12px 22px; border-radius: 100px; border: none; white-space: nowrap;
}
.chip-cc-nlform button:hover { background: #B81A83; }
.chip-cc-nlform button[disabled] { opacity: 0.6; cursor: default; }
.chip-cc-nlform__msg { flex-basis: 100%; margin: 0; font-size: 12px; color: #43B7DA; }
.chip-cc-nlform__msg:empty { display: none; }
.chip-cc-nlform__msg.is-error { color: #F5A3D8; }

/* ---------- RESPONSIVE (comp breakpoints, ported verbatim) ---------- */
@media (max-width: 980px) {
	.chip-cc-topic-grid { grid-template-columns: repeat(2, 1fr); }
	.chip-cc-vgrid { grid-template-columns: repeat(2, 1fr); }
	.chip-cc-series-grid { grid-template-columns: repeat(2, 1fr); }
	.chip-cc-arch-grid { grid-template-columns: repeat(3, 1fr); }
	.chip-cc-agrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.chip-cc-feat, .chip-cc-vfeat { grid-template-columns: 1fr; }
	.chip-cc-topic-grid, .chip-cc-vgrid, .chip-cc-arch-grid, .chip-cc-agrid { grid-template-columns: 1fr; }
	.chip-cc-series-grid { grid-template-columns: repeat(2, 1fr); }
	.chip-cc-frow { align-items: flex-start; }
	.chip-cc-nl { padding: 28px 22px; }
	.chip-cc-nlform input { min-width: 0; flex: 1 1 100%; }
}

/* ============================================================
   TEAMOPEDIA — credential cards now open their own article
   ============================================================ */

/* The card is one link target that also contains a disclosure button. The
   anchor covers the card via ::after rather than wrapping it, because a
   <button> inside an <a> is invalid and unreachable by keyboard. Everything
   interactive after the anchor has to be lifted above that overlay. */
.cred-card { position: relative; display: flex; flex-direction: column; }
.cred-full-name {
	font-family: var(--chip-font-display); font-size: 14px; font-weight: 700;
	line-height: 1.3; letter-spacing: 0; color: #fff; margin: 0 0 2px;
}
.cred-full-name a { color: inherit; }
.cred-full-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Targets the heading, not its link, so the colour change still happens on cards
   whose guide is switched off and have no link inside (chip_cred_guide_live). */
.cred-card:hover .cred-full-name { color: var(--chip-cyan-400); }
.cred-card:focus-within { outline: 3px solid #E741AD; outline-offset: 2px; }
.cred-full-name a:focus-visible { outline: none; }

.prereq-toggle, .prereq-panel { position: relative; z-index: 2; }

/* Pushed to the bottom so every card's read-more sits on the same line
   regardless of how much plain-English copy it carries. */
.cred-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.cred-readmore {
	display: block; margin-top: auto; padding-top: 14px;
	font-family: var(--chip-font-display); font-size: 12px; font-weight: 700;
	color: #0C7695;
}
.cred-card:hover .cred-readmore { color: #075E7A; }

/* AA: --chip-cyan-600 (#0A7FA3) measures 4.15:1 on the sand toolbar strip and
   4.29:1 on the pale cyan hover — both under 4.5. Same #0C7695 the Cultural
   Coins hub standardised on. */
.prereq-toggle { color: #0C7695; }
.prereq-toggle:hover { color: #075E7A; }

/* ============================================================
   TEAMOPEDIA — credential guide (single-chip_credential.php)

   Ported from the signed-off comp. Namespaced chip-tp-* because the
   comp reuses .cred-card / .cred-grid for its comparison block and
   those class names already belong to the Teamopedia PAGE's filter
   grid — sharing them would repaint one from the other.

   The comp's palette is corrected to WCAG AA here rather than after
   the fact, using the same shades the rest of the theme settled on.
   What moved, and why:
     --tp-light  #7A93A3 -> #597181   2.91:1 on the sand body
     cyan text   #16A3CC -> #0C7695   2.66:1 on sand, 2.94 on white
     amber text  #E7B65C -> #926615   1.69:1 on sand (label use only)
     green text  #1F9E6B -> #1A855A   3.41:1 on white
     green badge #1F9E6B -> #20A26E   4.39:1 on navy
     hero stat   white .4 -> .58      3.60:1 on navy
   The comp's cyan BUTTON is left exactly as drawn: it puts navy text
   on #16A3CC, which measures 5.09:1 and already passes. Repainting it
   to the ink would have made it worse, not better.
   ============================================================ */

.chip-tp {
	--tp-navy: #0C2A38;
	--tp-paper: #F7F3EC;
	--tp-border: #D8E4EA;
	--tp-mid: #4A6070;
	--tp-light: #597181;
	--tp-cyan: #16A3CC;
	--tp-cyan-ink: #0C7695;
	--tp-amber: #E7B65C;
	--tp-amber-ink: #926615;
	--tp-green: #1F9E6B;
	--tp-green-ink: #1A855A;
	background: var(--tp-paper);
	font-size: 17px;
	line-height: 1.6;
}

/* ---------- reading progress ---------- */
.chip-tp-progress { position: sticky; top: 0; z-index: 60; height: 3px; background: rgba(12,42,56,0.08); }
.chip-tp-progress__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--chip-cyan-500), var(--chip-amber-500)); }

/* ---------- hero ---------- */
.chip-tp-hero { background: var(--tp-navy); padding: 4rem 4rem 3.5rem; position: relative; overflow: hidden; }
.chip-tp-hero::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: rgba(22,163,204,0.2); }
.chip-tp-hero__inner { max-width: 1000px; margin: 0 auto; position: relative; z-index: 2; }
.chip-tp-hero__eyebrow {
	font-family: var(--chip-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--tp-cyan); display: flex; align-items: center; gap: 10px; margin: 0 0 1.5rem;
}
.chip-tp-hero__eyebrow::before { content: ""; display: block; width: 24px; height: 1px; background: var(--tp-cyan); }
.chip-tp-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1.75rem; }
.chip-tp-badge {
	font-family: var(--chip-font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.07em;
	text-transform: uppercase; padding: 6px 12px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
}
.chip-tp-badge--outline { border: 1px solid rgba(255,255,255,0.35); color: rgba(255,255,255,0.75); }
.chip-tp-badge--cyan { background: rgba(22,163,204,0.15); color: #18AFDB; border: 1px solid rgba(22,163,204,0.3); }
.chip-tp-badge--green { background: rgba(31,158,107,0.15); color: #24B57B; border: 1px solid rgba(31,158,107,0.35); }
.chip-tp-hero__title {
	font-family: var(--chip-font-display); font-size: clamp(2.4rem, 5.5vw, 3.6rem); font-weight: 800;
	color: #fff; line-height: 1.12; letter-spacing: -0.03em; margin: 0 0 1.25rem; max-width: 850px;
}
.chip-tp-em { color: var(--tp-amber); position: relative; display: inline-block; }
.chip-tp-em::after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 3px; background: var(--tp-amber); border-radius: 2px; opacity: 0.5; }
.chip-tp-hero__sub { font-size: 1.1rem; font-weight: 300; color: rgba(255,255,255,0.72); max-width: 760px; line-height: 1.7; margin: 0 0 2rem; }
.chip-tp-hero__stats { display: flex; gap: 24px; flex-wrap: wrap; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.08); }
.chip-tp-stat { font-size: 12px; color: rgba(255,255,255,0.58); display: flex; align-items: center; gap: 6px; }

/* ---------- facts band ---------- */
/* The comp scrolls this band horizontally and hides the scrollbar. Real
   credential data is longer than the comp's abbreviated values ("30 hrs every 2
   years" vs "30 hrs/2yr"), so it overflows in practice rather than in theory —
   which makes the hidden scrollbar a problem the comp never hit. The region is
   therefore focusable (WCAG 2.1.1: a scrollable region has to be reachable by
   keyboard) and carries a fade on the overflowing edge so there is some signal
   that more facts exist. */
.chip-tp-facts { background: #fff; border-bottom: 1px solid var(--tp-border); position: relative; }
.chip-tp-facts::after {
	content: ""; position: absolute; top: 0; bottom: 1px; right: 0; width: 48px; pointer-events: none;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 85%);
}
.chip-tp-facts__inner { max-width: 1000px; margin: 0 auto; padding: 0 2rem; display: flex; overflow-x: auto; scrollbar-width: thin; }
.chip-tp-facts__inner:focus-visible { outline: 3px solid #E741AD; outline-offset: -3px; }
.chip-tp-fact { padding: 1.4rem 2.5rem; border-right: 1px solid var(--tp-border); flex-shrink: 0; white-space: nowrap; }
.chip-tp-fact:first-child { padding-left: 0; }
.chip-tp-fact:last-child { border-right: none; }
.chip-tp-fact__num { font-family: var(--chip-font-display); font-size: 1.5rem; font-weight: 800; color: var(--tp-navy); line-height: 1; margin: 0 0 3px; letter-spacing: -0.02em; }
.chip-tp-fact__num span { color: var(--tp-cyan-ink); }
.chip-tp-fact__label { font-family: var(--chip-font-mono); font-size: 10px; font-weight: 500; color: var(--tp-light); letter-spacing: 0.1em; text-transform: uppercase; margin: 0; }

/* ---------- layout ---------- */
.chip-tp-body { max-width: 1000px; margin: 0 auto; padding: 3.5rem 2rem 4rem; display: grid; grid-template-columns: 1fr 280px; gap: 4rem; align-items: start; }
.chip-tp-article { min-width: 0; }
/* :where() so this stays the weakest rule in the article: it is the default for
   a bare paragraph, and must never outrank a component class. Written as a plain
   descendant selector it was (0,1,1) and beat every (0,1,0) block class, which
   silently flattened the section eyebrows, the FAQ eyebrow and the scenario
   label back to body copy. */
.chip-tp-article :where(p) { margin: 0 0 1.2rem; color: var(--tp-mid); }
.chip-tp-article :where(strong) { color: var(--tp-navy); font-weight: 600; }
.chip-tp-stub { font-style: italic; color: var(--tp-light); }

/* ---------- sidebar ---------- */
.chip-tp-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1.25rem; }
.chip-tp-card { background: #fff; border: 1px solid var(--tp-border); border-radius: 14px; padding: 1.4rem; }
.chip-tp-card__title { font-family: var(--chip-font-display); font-size: 13px; font-weight: 700; color: var(--tp-navy); margin: 0 0 1rem; letter-spacing: 0; line-height: 1.6; }
.chip-tp-glance { margin: 0; display: flex; flex-direction: column; }
.chip-tp-glance__row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; padding: 7px 0; border-bottom: 1px solid var(--tp-border); }
.chip-tp-glance__row:last-child { border-bottom: none; }
.chip-tp-glance dt { color: var(--tp-light); }
.chip-tp-glance dd { margin: 0; display: flex; }
.chip-tp-glance__val { font-family: var(--chip-font-mono); font-size: 10px; font-weight: 500; background: rgba(22,163,204,0.1); color: var(--tp-cyan-ink); padding: 2px 9px; border-radius: 8px; display: block; text-align: right; }
.chip-tp-glance__val.is-green { background: rgba(31,158,107,0.1); color: #187C54; }

.chip-tp-cta { background: var(--tp-navy); border-radius: 14px; padding: 1.5rem; }
.chip-tp-cta__eyebrow { font-family: var(--chip-font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tp-amber); margin: 0 0 0.75rem; }
.chip-tp-cta__title { font-family: var(--chip-font-display); font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0 0 0.6rem; line-height: 1.3; }
.chip-tp-cta__lede { color: rgba(255,255,255,0.72); font-size: 13px; margin: 0 0 1.1rem; line-height: 1.6; }
.chip-tp-cta__btn { display: block; text-align: center; background: var(--tp-cyan); color: var(--tp-navy); font-family: var(--chip-font-display); font-weight: 700; font-size: 13px; padding: 11px 0; border-radius: 8px; }
.chip-tp-cta__btn:hover { background: #43B7DA; color: var(--tp-navy); }

.chip-tp-related { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--tp-border); }
.chip-tp-related:last-child { border-bottom: none; }
.chip-tp-related__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tp-cyan-ink); margin-top: 6px; flex-shrink: 0; }
.chip-tp-related__title { display: block; font-family: var(--chip-font-display); font-size: 12.5px; font-weight: 700; color: var(--tp-navy); line-height: 1.35; }
.chip-tp-related:hover .chip-tp-related__title { color: var(--tp-cyan-ink); }
.chip-tp-related__pillar { display: block; font-family: var(--chip-font-mono); font-size: 9.5px; color: var(--tp-light); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

/* ---------- disclaimer ---------- */
.chip-tp-disclaimer { background: rgba(231,182,92,0.07); border: 1px solid rgba(231,182,92,0.35); border-radius: 8px; padding: 1.25rem 1.5rem; margin-top: 2.75rem; font-size: 12px; color: #576F7E; line-height: 1.65; }
.chip-tp-disclaimer strong { color: var(--tp-mid); }
/* Five values above are a shade off the template's own tokens on purpose: they
   sit on their component's translucent tint rather than the flat surface behind
   it, so they were re-solved against the composite. Solving against the plain
   navy or plain white leaves each of them between 3.75 and 4.47:1. */

/* ---------- article footer ---------- */
.chip-tp-footer { background: #fff; border-top: 1px solid var(--tp-border); }
.chip-tp-footer__inner { max-width: 1000px; margin: 0 auto; padding: 3rem 2rem; }
.chip-tp-share { display: flex; align-items: center; gap: 10px; margin-bottom: 2.5rem; flex-wrap: wrap; }
.chip-tp-share__label { font-family: var(--chip-font-mono); font-size: 11px; color: var(--tp-light); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 4px; }
.chip-tp-share__btn { font-family: var(--chip-font-display); font-size: 12px; font-weight: 600; color: var(--tp-navy); background: var(--tp-paper); border: 1px solid #A9BFCB; padding: 7px 14px; border-radius: 999px; cursor: pointer; line-height: normal; text-align: center; }
.chip-tp-share__btn:hover { border-color: var(--tp-cyan-ink); color: var(--tp-cyan-ink); }
.chip-tp-more__title { font-family: var(--chip-font-display); font-size: 1.1rem; font-weight: 700; color: var(--tp-navy); margin: 0 0 1.25rem; }
.chip-tp-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.chip-tp-more__card { display: block; border: 1px solid var(--tp-border); border-radius: 14px; overflow: hidden; }
.chip-tp-more__card:hover { border-color: var(--tp-cyan-ink); }
.chip-tp-more__bar { display: block; height: 4px; background: var(--tp-cyan); }
.chip-tp-more__body { display: block; padding: 1.1rem 1.25rem; background: #fff; }
.chip-tp-more__badge { display: block; font-family: var(--chip-font-mono); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; color: var(--tp-cyan-ink); }
.chip-tp-more__heading { display: block; font-family: var(--chip-font-display); font-size: 13.5px; font-weight: 700; color: var(--tp-navy); line-height: 1.4; margin-bottom: 6px; }
.chip-tp-more__meta { display: block; font-family: var(--chip-font-mono); font-size: 10.5px; color: var(--tp-light); text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- responsive (comp breakpoints) ---------- */
@media (max-width: 960px) {
	.chip-tp-body { grid-template-columns: 1fr; gap: 2.5rem; }
	.chip-tp-sidebar { position: static; }
}
@media (max-width: 760px) {
	.chip-tp-hero { padding: 3rem 1.5rem; }
	.chip-tp-body { padding: 2.5rem 1.5rem 3rem; }
	.chip-tp-facts__inner, .chip-tp-footer__inner { padding-inline: 1.5rem; }
	.chip-tp-fact { padding-inline: 1.5rem; }
}

/* ---------- Teamopedia article blocks (the chip/tp-* patterns) ---------- */
.chip-tp-intro { font-size: 1.15rem; line-height: 1.8; color: var(--tp-mid); margin: 0 0 2.5rem; font-weight: 300; }
.chip-tp-intro strong { color: var(--tp-navy); font-weight: 600; }

.chip-tp-section { margin-bottom: 3.25rem; scroll-margin-top: 80px; }
.chip-tp-section__eyebrow {
	font-family: var(--chip-font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--tp-cyan-ink); margin: 0 0 0.6rem; display: flex; align-items: center; gap: 8px;
}
.chip-tp-section__eyebrow::before { content: ""; display: block; width: 16px; height: 1px; background: var(--tp-cyan-ink); }
.chip-tp-section__title { font-family: var(--chip-font-display); font-size: clamp(1.35rem, 2.8vw, 1.75rem); font-weight: 700; color: var(--tp-navy); line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 1.1rem; }

.chip-tp-quote { border-top: 2px solid var(--tp-navy); border-bottom: 1px solid var(--tp-border); padding: 1.6rem 0; margin: 2.5rem 0; }
.chip-tp-quote blockquote { font-family: var(--chip-font-display); font-size: clamp(1.15rem, 2.4vw, 1.4rem); font-weight: 700; color: var(--tp-navy); line-height: 1.35; letter-spacing: -0.02em; margin: 0; border: none; padding: 0; }
.chip-tp-quote blockquote p { font: inherit; color: inherit; margin: 0; }
.chip-tp-quote em, .chip-tp-quote .chip-tp-quote__em { color: var(--tp-cyan-ink); font-style: normal; }
.chip-tp-quote cite { display: block; margin-top: 0.85rem; font-family: var(--chip-font-mono); font-size: 11px; font-style: normal; color: var(--tp-light); letter-spacing: 0.05em; }

.chip-tp-faq { background: var(--tp-navy); border-radius: 22px; padding: 1.85rem 2.1rem; margin: 0 0 3rem; position: relative; overflow: hidden; }
.chip-tp-faq::before { content: ""; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(22,163,204,0.1) 0%, transparent 70%); }
.chip-tp-faq__eyebrow { font-family: var(--chip-font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tp-amber); margin: 0 0 1rem; position: relative; }
.chip-tp-faq ul { list-style: none; margin: 0; padding: 0; position: relative; }
.chip-tp-faq li { display: flex; gap: 14px; padding: 0.9rem 0; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 14px; color: rgba(255,255,255,0.78); line-height: 1.6; }
.chip-tp-faq li::before { content: "Q"; font-family: var(--chip-font-mono); font-size: 11px; font-weight: 500; color: var(--tp-cyan); flex-shrink: 0; min-width: 20px; padding-top: 2px; }
.chip-tp-faq li > * { flex: 1 1 auto; }
.chip-tp-faq li:last-child { border-bottom: none; }
.chip-tp-faq li strong { color: rgba(255,255,255,0.95); font-weight: 600; display: block; margin-bottom: 4px; }

.chip-tp-scenario { background: var(--tp-paper); border-left: 3px solid var(--tp-amber); border-radius: 0 14px 14px 0; padding: 1.5rem 1.75rem; margin: 2rem 0; }
.chip-tp-scenario__label { font-family: var(--chip-font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tp-amber-ink); margin: 0 0 0.75rem; display: flex; align-items: center; gap: 8px; }
.chip-tp-scenario__label::before { content: ""; display: block; width: 14px; height: 1px; background: var(--tp-amber-ink); }
.chip-tp-scenario :where(p) { font-size: 1rem; color: var(--tp-navy); font-style: italic; margin: 0; line-height: 1.75; }

.chip-tp-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.75rem 0; }
.chip-tp-compare__card { background: #fff; border: 1px solid var(--tp-border); border-radius: 8px; padding: 1rem 1.1rem; }
.chip-tp-compare__abbr { font-family: var(--chip-font-mono); font-size: 12px; font-weight: 500; color: var(--tp-cyan-ink); margin: 0 0 4px; letter-spacing: 0.06em; }
.chip-tp-compare__name { font-family: var(--chip-font-display); font-size: 13px; font-weight: 700; color: var(--tp-navy); margin: 0 0 4px; }
.chip-tp-compare__body { font-size: 12px; color: var(--tp-light); line-height: 1.5; margin: 0; }

.chip-tp-compliance { display: flex; gap: 14px; background: rgba(22,163,204,0.07); border: 1px solid rgba(22,163,204,0.35); border-radius: 14px; padding: 1.25rem 1.5rem; margin: 1.75rem 0; }
.chip-tp-compliance__icon { width: 26px; height: 26px; background: var(--tp-green-ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-size: 13px; margin-top: 2px; }
.chip-tp-compliance p { font-size: 14px; color: var(--tp-mid); line-height: 1.65; margin: 0; }
.chip-tp-compliance strong { color: #0C7290; }

.chip-tp-checklist { background: #fff; border: 1px solid var(--tp-border); border-radius: 14px; padding: 1.5rem 1.75rem; margin: 1.75rem 0; }
.chip-tp-checklist__title { font-family: var(--chip-font-display); font-weight: 700; font-size: 14px; color: var(--tp-navy); margin: 0 0 1rem; }
.chip-tp-checklist ul { list-style: none; margin: 0; padding: 0; }
/* A real <button> per row: the comp used an onclick div, which is unreachable
   by keyboard and announces nothing. aria-pressed carries the ticked state. */
.chip-tp-check { display: flex; align-items: flex-start; gap: 10px; padding: 0.55rem 0; width: 100%; background: none; border: none; text-align: left; cursor: pointer; font: inherit; }
.chip-tp-check__box { width: 18px; height: 18px; border: 1.5px solid #A9BFCB; border-radius: 5px; flex-shrink: 0; margin-top: 2px; position: relative; transition: background 0.15s, border-color 0.15s; }
.chip-tp-check[aria-pressed="true"] .chip-tp-check__box { background: var(--tp-cyan-ink); border-color: var(--tp-cyan-ink); }
.chip-tp-check[aria-pressed="true"] .chip-tp-check__box::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; }
.chip-tp-check span:last-child { font-size: 14px; color: var(--tp-mid); line-height: 1.5; }
.chip-tp-check[aria-pressed="true"] span:last-child { color: var(--tp-light); text-decoration: line-through; }

.chip-tp-insights { margin: 1.6rem 0; }
.chip-tp-insight { padding: 1.4rem 0; border-bottom: 1px solid var(--tp-border); }
.chip-tp-insight:last-child { border-bottom: none; }
.chip-tp-insight__num { font-family: var(--chip-font-mono); font-size: 10px; font-weight: 500; color: var(--tp-cyan-ink); letter-spacing: 0.1em; margin: 0 0 0.4rem; }
.chip-tp-insight__heading { font-family: var(--chip-font-display); font-size: 1.05rem; font-weight: 700; color: var(--tp-navy); margin: 0 0 0.55rem; line-height: 1.3; letter-spacing: normal; }
.chip-tp-insight__body { font-size: 15px; color: var(--tp-mid); line-height: 1.7; margin: 0; }

.chip-tp-connect { background: var(--tp-navy); border-radius: 22px; padding: 2rem 2.25rem; margin: 2.5rem 0; position: relative; overflow: hidden; }
.chip-tp-connect::before { content: ""; position: absolute; top: -60px; right: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(22,163,204,0.12) 0%, transparent 70%); }
.chip-tp-connect > * { position: relative; }
.chip-tp-connect__label { font-family: var(--chip-font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tp-amber); margin: 0 0 0.75rem; }
.chip-tp-connect__title { font-family: var(--chip-font-display); font-size: 1.4rem; font-weight: 700; color: #fff; margin: 0 0 0.75rem; }
.chip-tp-connect__lede { color: rgba(255,255,255,0.72); font-size: 0.95rem; margin: 0 0 1.5rem; }
.chip-tp-connect ul { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chip-tp-connect li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,0.75); }
.chip-tp-connect li::before { content: "→"; color: var(--tp-amber); font-weight: 700; flex-shrink: 0; }
.chip-tp-connect__btn { display: inline-flex; align-items: center; gap: 8px; background: var(--tp-cyan); color: var(--tp-navy); font-family: var(--chip-font-display); font-weight: 700; font-size: 14px; padding: 12px 24px; border-radius: 8px; }
.chip-tp-connect__btn:hover { background: #43B7DA; color: var(--tp-navy); }

/* ============================================================
   CULTURAL COINS — article (single.php)

   One template, five skins. The bundle's archetype variants differ
   from the base in nothing but colour, so the skin is four custom
   properties set by single.php from the post's archetype term:
     --cc-accent       painted only, never read off
     --cc-accent-ink   text on paper/cream/tint, and fills under white
     --cc-accent-dark  text on the navy bands
     --cc-accent-pale  pills and ::selection on navy

   AA is folded in as this is written, not retrofitted. The comp's own
   --cyan-light and pale values are KEPT — measured 5.50-7.78:1 on navy
   and 7.79-8.63:1 on the pill, so the client's palette already passed
   and there was nothing to improve. What changed:
     --gray  #74858B -> #637176   3.64:1 on the paper background
     --light #9DACB1 -> #637176   2.22:1
     --pink  #E741AD -> #D6249A   3.65:1 behind white button text
   and every accent used ON a light surface resolves to --cc-accent-ink,
   because the Explorer accent as a painted rule measures 2.79:1 against
   the paper and fails even the 3:1 non-text minimum.
   ============================================================ */

.chip-ca {
	--ca-navy: #0C2A38;
	--ca-paper: #faf9f5;
	--ca-cream: #F7F3EC;
	--ca-mid: #33454d;
	--ca-grey: #637176;
	--ca-border: rgba(12,42,56,0.1);
	--ca-pink: #D6249A;
	display: block;
	background: var(--ca-paper);
}
.chip-ca ::selection { background: var(--cc-accent-pale); color: var(--ca-navy); }

/* ---------- reading progress ---------- */
.chip-ca-progress { position: sticky; top: 0; left: 0; right: 0; height: 3px; background: rgba(12,42,56,0.06); z-index: 60; }
.chip-ca-progress__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--cc-accent), var(--cc-accent-dark)); transition: width 0.12s linear; }

/* ---------- hero ---------- */
.chip-ca-hero { background: var(--ca-navy); position: relative; overflow: hidden; }
.chip-ca-hero::before {
	content: ""; position: absolute; top: -140px; right: -100px; width: 600px; height: 600px; pointer-events: none;
	background: radial-gradient(circle, color-mix(in srgb, var(--cc-accent) 16%, transparent) 0%, transparent 70%);
}
.chip-ca-hero__inner { max-width: 820px; margin: 0 auto; padding: 44px 40px 56px; position: relative; z-index: 1; }

/* ---------- hero photograph (one per topic, see chip_cc_topic_photo) ---------- */
/* Inserted HERE rather than appended at the end of the file: appended below the
   existing hero rules it would win at equal specificity by order, which is how
   an "additive" change silently reorders a cascade. */

/* The photos arrived at 1000x670. The hero is 1425 wide at a 1440 viewport, so
   stretching one to fit upscales it 1.43x. The band is therefore capped at the
   source's own width and centred, with its two edges dissolved into the navy so
   the cap reads as vignetting rather than as a seam. Below 1000px the band is
   full width and already downscaling, so no cap and no mask. */
.chip-ca-hero__photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.chip-ca-hero__photo img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	/* set per topic from the measured face band — never assume centre */
	object-position: var(--cc-photo-pos, 50% 50%);
}
@media (min-width: 1000px) {
	.chip-ca-hero__photo { left: 50%; right: auto; width: 1000px; transform: translateX(-50%); --cc-edge: 140px; }
	.chip-ca-hero__photo {
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--cc-edge), #000 calc(100% - var(--cc-edge)), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 var(--cc-edge), #000 calc(100% - var(--cc-edge)), transparent 100%);
	}
}

/* Scrim. Paints over the photo (::after follows the photo div in tree order at
   the same z-index) and under .chip-ca-hero__inner, which holds z-index 1.
   Weighted to the left because the photo subjects sit right of centre in most of
   the eight; the lightest stop is 0.66, where white text over a pure-white photo
   pixel still measures 5.0:1. */
.chip-ca-hero--photo::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: linear-gradient(105deg, rgba(12,42,56,0.94) 0%, rgba(12,42,56,0.86) 38%, rgba(12,42,56,0.66) 100%);
}
/* Under 700px the title wraps to three or four lines and the type crosses the
   whole band, so the directional scrim is replaced by a flat, heavier one. */
@media (max-width: 700px) {
	.chip-ca-hero--photo::after { background: linear-gradient(180deg, rgba(12,42,56,0.88) 0%, rgba(12,42,56,0.92) 100%); }
}

.chip-ca-back { display: inline-flex; align-items: center; gap: 7px; font-family: var(--chip-font-display); font-weight: 600; font-size: 14px; color: var(--cc-accent-dark); margin-bottom: 28px; }
.chip-ca-back:hover { color: #fff; }
.chip-ca-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-bottom: 22px; }
.chip-ca-pill {
	font-family: var(--chip-font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
	padding: 6px 14px; border-radius: 100px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); color: var(--cc-accent-pale);
}
/* The archetype pill is filled with --cc-accent-ink, not --cc-accent. White on
   the raw accent measures 2.94 (Explorer), 3.77 (Optimizer) and 3.41 (Protector)
   — three of the five fail AA. On the ink every one clears it at 5.08 to 6.70,
   and the ink is the same hue a few percent darker, so the comp's look holds.
   Border matches the fill, per the comp: the pill outline is decoration and the
   label itself carries the contrast. */
.chip-ca-pill--archetype { background: var(--cc-accent-ink); border-color: var(--cc-accent-ink); color: #fff; }
.chip-ca-title { font-family: var(--chip-font-display); font-weight: 800; font-size: clamp(31px, 4.6vw, 50px); line-height: 1.06; letter-spacing: -0.03em; color: #fff; margin: 0 0 24px; }
.chip-ca-byline { display: flex; align-items: center; gap: 13px; }
.chip-ca-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--cc-accent-ink); display: flex; align-items: center; justify-content: center; font-family: var(--chip-font-display); font-size: 14px; font-weight: 700; color: #fff; flex: none; }
.chip-ca-byline__name { display: block; font-family: var(--chip-font-display); font-size: 13.5px; font-weight: 600; color: #fff; }
.chip-ca-byline__meta { display: block; font-family: var(--chip-font-body); font-size: 12px; color: rgba(255,255,255,0.62); }

/* ---------- video (this template also serves video posts) ---------- */
.chip-ca-video { max-width: 900px; margin: 0 auto; padding: 40px 40px 0; }
.chip-ca-video__frame { position: relative; padding-top: 56.25%; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(12,42,56,0.18); }
.chip-ca-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.chip-ca-video__link { margin: 0; }

/* ---------- layout ---------- */
.chip-ca-grid { max-width: 1120px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.chip-ca-rail { position: sticky; top: 98px; padding-top: 52px; }
.chip-ca-rail__label { font-family: var(--chip-font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ca-grey); margin: 0 0 16px; }
.chip-ca-toc__list { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--ca-border); margin-bottom: 36px; }
.chip-ca-toc__item {
	font-family: var(--chip-font-display); font-weight: 500; font-size: 14px; line-height: 1.35;
	padding: 7px 0 7px 16px; margin-left: -2px; border-left: 2px solid transparent; color: var(--ca-grey);
	transition: color 0.15s, border-color 0.15s; display: block;
}
.chip-ca-toc__item:hover { color: var(--cc-accent-ink); }
.chip-ca-toc__item.is-active { font-weight: 700; color: var(--cc-accent-ink); border-left-color: var(--cc-accent-ink); }
.chip-ca-share { display: flex; gap: 9px; flex-wrap: wrap; }
.chip-ca-share__btn {
	cursor: pointer; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(12,42,56,0.35); background: #fff;
	color: var(--ca-navy); font-family: var(--chip-font-display); font-weight: 700; font-size: 13px;
	display: flex; align-items: center; justify-content: center; padding: 0;
}
.chip-ca-share__btn:hover { border-color: var(--cc-accent-ink); color: var(--cc-accent-ink); }

/* Follow row. Its own label because these go to CHIP's profiles, not to a share
   sheet — see the note in single.php. Same 38px target as the share row so the
   two read as one rail. */
.chip-ca-rail__label + .chip-ca-share + .chip-ca-rail__label,
.chip-ca-share + .chip-ca-rail__label { margin-top: 26px; }
.chip-ca-follow { display: flex; gap: 9px; flex-wrap: wrap; }
.chip-ca-follow__btn {
	width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(12,42,56,0.35); background: #fff;
	color: var(--ca-navy); display: flex; align-items: center; justify-content: center; padding: 0;
}
.chip-ca-follow__btn svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.chip-ca-follow__btn:hover { border-color: var(--cc-accent-ink); color: var(--cc-accent-ink); }
.chip-ca-follow__btn:focus-visible { outline: 2px solid var(--cc-accent-ink); outline-offset: 2px; }

/* ---------- article body ---------- */
.chip-ca-body { padding: 52px 0 20px; max-width: 720px; }
/* :where() so these stay the weakest rules in the article and can never
   outrank a block component class. */
.chip-ca-body :where(h2) { font-family: var(--chip-font-display); font-weight: 700; font-size: 27px; line-height: 1.2; letter-spacing: -0.02em; color: var(--ca-navy); margin: 50px 0 6px; scroll-margin-top: 98px; }
.chip-ca-body :where(p) { font-family: var(--chip-font-body); font-size: 18.5px; line-height: 1.75; color: var(--ca-mid); margin: 18px 0; }
.chip-ca-body :where(p) strong { font-family: var(--chip-font-display); font-weight: 700; color: var(--ca-navy); }
.chip-ca-body :where(a) { color: var(--cc-accent-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ================= Netlify reference parity =================================
   The client's refresh page (chipculturalcoinsblogpage.netlify.app) renders the
   article at a smaller, denser scale than the original comp, and Chris chose
   that reference over the comp on 2026-09-10. Everything below matches its
   measured values.

   Section and sub-section headings render at the SAME size here, so the page
   reads as the reference's single heading level. They stay h2 and h3 in the
   markup: the contents rail is built from h2s at runtime, so truly flattening
   the tags would fill the rail with sub-sections and break the very thing the
   reference shows. One apparent level, two real ones.
   ========================================================================== */
.chip-ca-grid { grid-template-columns: 260px minmax(0, 1fr); }
.chip-ca-rail { width: auto; padding: 30px 20px 30px 32px; border-right: 1px solid #eee; }
.chip-ca-rail__label { font-size: 10.5px; letter-spacing: 0.07em; color: #8a969a; margin: 0 0 10px; }
.chip-ca-toc__list { border-left: 2px solid #eee; }
.chip-ca-toc__item {
	display: block; padding: 7px 0 7px 14px; margin-left: -2px;
	font-size: 13.5px; line-height: 1.4; color: #4b5a5e;
	border-left: 2px solid transparent;
}
/* The reference marks the FIRST entry in the accent, not the scrolled-to one. */
.chip-ca-toc__item:first-child { color: var(--cc-accent-ink); font-weight: 700; border-left-color: var(--cc-accent-ink); }

.chip-ca-body { padding: 30px 32px 8px; }
.chip-ca-body :where(h2), .chip-ca-body :where(h3) {
	font-size: 19px; line-height: 1.3; letter-spacing: -0.01em;
	color: #12262d; margin: 26px 0 10px;
}
.chip-ca-body :where(p) { font-size: 15.5px; line-height: 1.65; color: #2a3538; margin: 0 0 14px; }
.chip-ca-body :where(li) { font-size: 15.5px; line-height: 1.6; color: #2a3538; margin-bottom: 8px; }

/* The lead-in, which the reference sets in a tinted box rather than as body copy. */
.chip-ca-body :where(p).chip-ca-quick {
	background: #f7f4ee; border: 1px solid #eee; border-radius: 10px;
	padding: 14px 16px; font-size: 15px; line-height: 1.6; color: #2a3538; margin-bottom: 8px;
}

/* FAQ: hairline rules instead of the comp's card treatment. */
.chip-ca-faq { border: 0; background: none; padding: 0; margin: 26px 0 0; }
.chip-ca-body :where(h2).chip-ca-faq__eyebrow { font-size: 19px; color: #12262d; margin: 26px 0 10px; text-transform: none; letter-spacing: -0.01em; }
.chip-ca-faq__item { border-top: 1px solid #eee; padding: 14px 0; background: none; border-radius: 0; }
.chip-ca-body :where(h3).chip-ca-faq__q { font-size: 15px; color: #12262d; margin: 0 0 6px; }
.chip-ca-body :where(p).chip-ca-faq__a { font-size: 14.5px; line-height: 1.55; color: #5b6b70; margin: 0; }

/* Follow row adopts the reference's 32px buttons. */
.chip-ca-follow__btn { width: 32px; height: 32px; border: 1px solid #e3e3e3; color: #33454b; }
.chip-ca-follow__btn svg { width: 15px; height: 15px; }
.chip-ca-follow__btn:hover { background: #f2f0e9; color: #12262d; border-color: #e3e3e3; }

@media (max-width: 900px) {
	.chip-ca-grid { grid-template-columns: minmax(0, 1fr); }
	.chip-ca-rail { border-right: 0; padding: 24px 0 0; }
	.chip-ca-body { padding: 24px 0 8px; }
}

/* term list — the comp's .li-block */
.chip-ca-terms { margin: 22px 0; padding: 0; list-style: none; }
.chip-ca-terms li { display: flex; gap: 14px; margin: 11px 0 11px 4px; font-family: var(--chip-font-body); font-size: 18px; line-height: 1.68; color: var(--ca-mid); }
.chip-ca-terms li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cc-accent-ink); margin-top: 11px; }
.chip-ca-terms li strong { font-family: var(--chip-font-display); font-weight: 700; color: var(--ca-navy); }

/* closer — reference parity.
   The comp set the closing statement as a 25px pull quote in a cream panel with
   an accent rule. The Netlify reference has no such treatment: its closing
   paragraphs are ordinary body copy, and the copy itself is unchanged either
   way. Neutralised rather than deleted so the class stays a valid hook and the
   28 stored blocks need no edit. Restore the two lines below to bring the
   flourish back. */
.chip-ca-closer { margin: 0; padding: 0; border-left: 0; background: none; border-radius: 0; }
.chip-ca-closer p { font-family: var(--chip-font-body); font-weight: 400; font-size: 15.5px; line-height: 1.65; letter-spacing: normal; color: #2a3538; margin: 0 0 14px; }

/* stat callout */
.chip-ca-stat { margin: 34px 0; padding: 30px 34px; border-radius: 16px; background: var(--ca-navy); position: relative; overflow: hidden; display: flex; align-items: center; gap: 26px; }
.chip-ca-stat::before { content: ""; position: absolute; top: -60px; right: -40px; width: 220px; height: 220px; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--cc-accent) 28%, transparent) 0%, transparent 70%); }
.chip-ca-stat__num { position: relative; z-index: 1; font-family: var(--chip-font-display); font-weight: 800; font-size: 44px; letter-spacing: -0.03em; color: var(--cc-accent-dark); flex: none; line-height: 1; margin: 0; }
.chip-ca-stat__copy { position: relative; z-index: 1; }
.chip-ca-stat__label { font-family: var(--chip-font-body); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin: 0 0 6px; }
.chip-ca-stat__text { font-family: var(--chip-font-body); font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.88); margin: 0; }

/* comparison table */
.chip-ca-table { margin: 34px 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--ca-border); background: #fff; overflow-x: auto; }
.chip-ca-table table { width: 100%; border-collapse: collapse; font-family: var(--chip-font-body); }
.chip-ca-table thead th { background: var(--ca-navy); color: #fff; font-family: var(--chip-font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.03em; text-align: left; padding: 14px 20px; }
.chip-ca-table tbody td { padding: 16px 20px; font-size: 15.5px; line-height: 1.55; color: var(--ca-mid); border-top: 1px solid var(--ca-border); vertical-align: top; }
.chip-ca-table tbody td:first-child { font-family: var(--chip-font-display); font-weight: 700; color: var(--ca-navy); }
.chip-ca-table tbody tr:nth-child(even) { background: var(--ca-cream); }

/* embed / tool link-out */
.chip-ca-embed { margin: 34px 0; padding: 26px 30px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--cc-accent) 40%, transparent); background: color-mix(in srgb, var(--cc-accent) 8%, #fff); display: flex; align-items: center; gap: 20px; justify-content: space-between; flex-wrap: wrap; }
.chip-ca-embed__copy { flex: 1; min-width: 220px; }
.chip-ca-embed__eyebrow { font-family: var(--chip-font-body); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-accent-ink); margin: 0 0 6px; }
.chip-ca-embed__title { font-family: var(--chip-font-display); font-weight: 700; font-size: 18px; color: var(--ca-navy); margin: 0 0 4px; }
.chip-ca-embed__desc { font-family: var(--chip-font-body); font-size: 14px; color: var(--ca-grey); margin: 0; }
.chip-ca-embed__btn { flex: none; display: inline-block; font-family: var(--chip-font-display); font-weight: 700; font-size: 14px; color: #fff; background: var(--cc-accent-ink); padding: 12px 22px; border-radius: 100px; white-space: nowrap; text-decoration: none; }
.chip-ca-embed__btn:hover { background: var(--ca-navy); color: #fff; }

/* CTA banner */
.chip-ca-cta { margin: 48px 0 8px; padding: 30px 32px; border-radius: 20px; background: var(--ca-navy); position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; justify-content: space-between; }
.chip-ca-cta::before { content: ""; position: absolute; top: -80px; right: -60px; width: 320px; height: 320px; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--cc-accent) 20%, transparent) 0%, transparent 70%); }
.chip-ca-cta > * { position: relative; z-index: 1; }
.chip-ca-cta__heading { font-family: var(--chip-font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: #fff; margin: 0; }
.chip-ca-cta__sub { font-family: var(--chip-font-body); font-size: 15px; color: rgba(255,255,255,0.68); margin: 5px 0 0; }
.chip-ca-cta__btn { flex: none; display: inline-block; font-family: var(--chip-font-display); font-weight: 700; font-size: 15px; color: #fff; background: var(--ca-pink); padding: 13px 24px; border-radius: 100px; text-decoration: none; }
.chip-ca-cta__btn:hover { background: #B81A83; color: #fff; }
.chip-ca-cta__fine { font-family: var(--chip-font-body); font-size: 13.5px; color: rgba(255,255,255,0.68); width: 100%; margin: 0; }
.chip-ca-cta__fine a { color: var(--cc-accent-dark); font-weight: 700; }

/* FAQ */
.chip-ca-faq { background: var(--ca-cream); border-top: 1px solid var(--ca-border); margin: 56px 0 0; padding: 64px 0 20px; }
.chip-ca-faq__eyebrow { font-family: var(--chip-font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cc-accent-ink); margin: 0 0 22px; }
.chip-ca-faq__item { border-bottom: 1px solid var(--ca-border); padding: 20px 0; }
.chip-ca-faq__q { font-family: var(--chip-font-display); font-weight: 700; font-size: 17px; color: var(--ca-navy); margin: 0 0 8px; }
.chip-ca-faq__a { font-family: var(--chip-font-body); font-size: 15.5px; line-height: 1.65; color: var(--ca-mid); margin: 0; }

/* compliance note */
/* Compliance note. Reference parity: a quiet footnote under the column rather
   than the comp's italic aside. Edited HERE rather than overridden earlier in
   the file, because this rule sits after the parity block and would win. */
.chip-ca-note { font-family: var(--chip-font-body); font-size: 12px; color: #8a969a; line-height: 1.6; border-top: 1px solid #eee; margin: 20px 0 0; padding: 16px 0 26px; max-width: 720px; }
.chip-ca-note :where(p) { font-size: 12px; line-height: 1.6; color: #8a969a; margin: 0; }

/* ---------- responsive (comp breakpoint) ---------- */
@media (max-width: 860px) {
	.chip-ca-grid { grid-template-columns: 1fr; padding: 0 24px; gap: 0; }
	.chip-ca-rail { display: none; }
	.chip-ca-hero__inner { padding: 32px 24px 40px; }
	.chip-ca-video { padding: 28px 24px 0; }
	.chip-ca-body { padding: 32px 0; }
	.chip-ca-stat { flex-direction: column; text-align: center; }
	.chip-ca-table table { font-size: 13px; }
}

/* ============================================================
   MEET THE PROS — directory cards now open a profile
   ============================================================ */

/* Same stretched-link pattern as the Teamopedia credential cards: the anchor
   wraps only the name and covers the card via ::after, because the card also
   holds a "Get Matched" control and nesting it inside the link would be invalid
   and unreachable by keyboard. */
/* Closing card in the Browse grid (inc/browse.php): fills the gap the last row
   leaves. Two panels, light and dark, in one rounded card spanning two columns;
   at 2-up it spans the full row, and at 1-up the panels stack. The pink is
   #D6249A (4.59:1 with white), not the brand #E741AD (3.65:1). */
.chip-browse__cta { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; border-radius: 18px; overflow: hidden; border: 1px solid var(--chip-line); }
.chip-browse__cta-panel { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; padding: clamp(24px, 3vw, 34px); }
.chip-browse__cta-panel--light { background: #fff; }
.chip-browse__cta-panel--dark { background: var(--chip-sea-800); }
.chip-browse__cta-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; }
.chip-browse__cta-panel--light .chip-browse__cta-icon { background: var(--chip-magenta-100); color: #D6249A; }
.chip-browse__cta-panel--dark .chip-browse__cta-icon { background: rgba(255,255,255,0.1); color: #fff; }
.chip-browse__cta-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chip-browse__cta .chip-browse__cta-title { font-family: var(--chip-font-display); font-size: 19px; font-weight: 700; line-height: 1.25; margin: 0; }
.chip-browse__cta-panel--light .chip-browse__cta-title { color: var(--chip-sea-800); }
.chip-browse__cta-panel--dark .chip-browse__cta-title { color: #fff; }
.chip-browse__cta .chip-browse__cta-text { font-size: 14px; line-height: 1.6; margin: 0; max-width: 34ch; }
.chip-browse__cta-panel--light .chip-browse__cta-text { color: var(--chip-slate); }
.chip-browse__cta-panel--dark .chip-browse__cta-text { color: rgba(255,255,255,0.75); }
.chip-browse__cta-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 12px 24px; border-radius: var(--chip-radius-pill); font-family: var(--chip-font-body); font-size: 14px; font-weight: 700; text-decoration: none; transition: background 0.2s var(--chip-ease); }
.chip-browse__cta-btn--dark { background: var(--chip-sea-800); color: #fff; }
.chip-browse__cta-btn--dark:hover { background: var(--chip-sea-900); color: #fff; }
.chip-browse__cta-btn--pink { background: #D6249A; color: #fff; }
.chip-browse__cta-btn--pink:hover { background: #B81E84; color: #fff; }
.chip-browse__cta-btn:focus-visible { outline: 3px solid var(--chip-cyan-400); outline-offset: 3px; }
@media (max-width: 900px) {
	/* 2-up grid: the card takes the whole row, panels still side by side. */
	.chip-browse__cta { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
	.chip-browse__cta { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .chip-browse__cta-btn { transition: none; } }
.chip-pro-card { position: relative; display: flex; flex-direction: column; }
.chip-pro-card__name {
	font-family: var(--chip-font-display); font-size: 1rem; font-weight: 700;
	line-height: 1.3; letter-spacing: 0; color: var(--chip-sea-800); margin: 0 0 2px;
}
.chip-pro-card__name a { color: inherit; }
.chip-pro-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.chip-pro-card:hover .chip-pro-card__name a { color: #0C7695; }
.chip-pro-card:focus-within { outline: 3px solid #E741AD; outline-offset: 2px; }
.chip-pro-card__name a:focus-visible { outline: none; }

.chip-pro-card__profile {
	display: block; margin-top: auto; padding-top: 12px;
	font-family: var(--chip-font-display); font-size: 12px; font-weight: 700; color: #0C7695;
}
.chip-pro-card:hover .chip-pro-card__profile { color: #075E7A; }
/* Raised above the stretched link so it stays independently clickable. The
   margin is the gap under "View profile →", which measured 0px: the link has
   padding above it but nothing below, so the two sat flush. */
.chip-pro-card__lock { position: relative; z-index: 2; margin-top: 14px; }

/* ---------- Meet the Pros: profile-specific blocks ----------
   The profile reuses the Teamopedia guide's chip-tp-* skeleton wholesale — the
   two comps are the same layout — so only the blocks unique to a person are
   defined here. AA values follow the same rules already established: text on
   navy uses the light shades, text on light uses the inks. */
.chip-mp-hero__grid { display: grid; grid-template-columns: 1fr 420px; gap: 3.5rem; align-items: center; }

.chip-mp-photo { border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 9; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; }
.chip-mp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip-mp-photo__fallback {
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
	font-family: var(--chip-font-display); font-weight: 800; font-size: 64px; color: #fff; letter-spacing: -0.02em;
}

.chip-mp-byline { display: flex; align-items: center; gap: 12px; margin-top: 1.5rem; }
.chip-mp-byline__av {
	width: 42px; height: 42px; border-radius: 50%; background: var(--tp-cyan); display: flex; align-items: center;
	justify-content: center; font-family: var(--chip-font-display); font-weight: 800; font-size: 15px;
	color: var(--tp-navy); flex-shrink: 0;
}
.chip-mp-byline__text { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.4; }
.chip-mp-byline__name { display: block; color: rgba(255,255,255,0.95); font-weight: 600; margin-bottom: 1px; font-family: var(--chip-font-display); }

.chip-mp-quote { margin: 2.5rem 0; padding: 1.6rem 0; border-top: 2px solid var(--tp-navy); border-bottom: 1px solid var(--tp-border); }
.chip-mp-quote p { font-family: var(--chip-font-display); font-size: clamp(1.15rem, 2.4vw, 1.4rem); font-weight: 700; color: var(--tp-navy); line-height: 1.35; letter-spacing: -0.02em; margin: 0; }
.chip-mp-quote cite { display: block; margin-top: 0.85rem; font-family: var(--chip-font-mono); font-size: 11px; font-style: normal; color: var(--tp-light); letter-spacing: 0.05em; }

.chip-mp-video { margin: 2.5rem 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--tp-border); }
.chip-mp-video__bar { background: var(--tp-navy); padding: 0.85rem 1.25rem; }
.chip-mp-video__eyebrow { font-family: var(--chip-font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tp-amber); }
.chip-mp-video__frame { position: relative; padding-top: 56.25%; background: var(--tp-navy); }
.chip-mp-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.chip-mp-quick { background: #fff; border: 1px solid var(--tp-border); border-radius: 22px; overflow: hidden; margin: 2.5rem 0; }
.chip-mp-quick__head { background: var(--tp-navy); padding: 1rem 1.5rem; font-family: var(--chip-font-display); font-weight: 700; font-size: 14px; color: #fff; }
.chip-mp-quick__list { margin: 0; }
.chip-mp-quick__row { display: flex; align-items: baseline; gap: 1.25rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--tp-border); }
.chip-mp-quick__row:last-child { border-bottom: none; }
.chip-mp-quick__row dt { flex: 0 0 140px; font-family: var(--chip-font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tp-light); }
.chip-mp-quick__row dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tp-mid); }

.chip-mp-linkedin { display: block; text-align: center; margin-top: 10px; font-family: var(--chip-font-display); font-weight: 700; font-size: 12px; color: var(--tp-cyan); }
.chip-mp-linkedin:hover { color: #fff; }

@media (max-width: 960px) {
	.chip-mp-hero__grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 760px) {
	.chip-mp-quick__row { flex-direction: column; gap: 4px; }
	.chip-mp-quick__row dt { flex: none; }
}

/* ==========================================================================
   Pricing page (/pricing/, inc/pricing.php + patterns/pricing-*.php)
   Rebuilt from the client reference chipbusinessmodel.netlify.app on the site
   tokens. Scoped under body.chip-pricing-page and APPENDED here on purpose: it
   has to out-rank global rules earlier in this file (dark heading colour on
   h1-h6, the cyan fill on .wp-block-button:not(.is-style-outline) links) at
   equal specificity, which only source order can do.

   Deviations from the reference, deliberately:
   - Headings use the site display face, not the reference's Georgia.
   - Secondary text is lifted from the reference's 35-50% white, which fails
     WCAG AA on navy, to at least 64% white.
   ========================================================================== */
body.chip-pricing-page { background: var(--chip-sea-900); }
.chip-pricing-page .chip-page { background: var(--chip-sea-900); color: #fff; }
.chip-pricing-page .chip-pr-sec { color: rgba(255,255,255,0.78); padding-block: 0 1.75rem; }
.chip-pricing-page .chip-pr-sec h1,
.chip-pricing-page .chip-pr-sec h2,
.chip-pricing-page .chip-pr-sec h3 { color: #fff; }
.chip-pricing-page .chip-pr-sec a:not(.wp-block-button__link) { color: var(--chip-cyan-400); }
.chip-pricing-page .chip-pr-sec a:not(.wp-block-button__link):hover { color: #fff; }
.chip-pr-inner { max-width: 1072px; margin-inline: auto; padding-inline: var(--chip-gutter); box-sizing: border-box; }
.chip-pr-inner--narrow { max-width: 880px; }
.chip-pr-inner--faq { max-width: 760px; }
.chip-pr-inner--band { max-width: 1000px; }
.chip-pr-center { text-align: center; margin-inline: auto; }
.chip-pricing-page .chip-pr-eyebrow { font-family: var(--chip-font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.27em; text-transform: uppercase; color: var(--chip-cyan-400); margin: 0 0 14px; }
.chip-pricing-page .chip-pr-h2 { font-size: clamp(1.45rem, 2.4vw, 1.75rem); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 10px; }
.chip-pricing-page .chip-pr-lede { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.72); max-width: 760px; margin: 0 0 28px; }
/* `margin-inline: auto` has to be repeated here. .chip-pr-center sets it, but
   .chip-pricing-page .chip-pr-lede below it is more specific and its `margin`
   shorthand resets the inline margins to 0, which left the 620px box hugging
   the left edge while its text centred inside it. */
.chip-pricing-page .chip-pr-lede.chip-pr-center { max-width: 620px; margin-inline: auto; }
.chip-pricing-page .chip-pr-sec em { font-style: normal; }
/* The shared translucent card the reference uses for its middle sections. */
.chip-pr-panel { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 42px; }
.chip-pr-sec > .chip-pr-panel { max-width: calc(1072px - 2 * var(--chip-gutter)); }
.chip-pricing-page .chip-pr-sec > .chip-pr-inner.chip-pr-panel { margin-inline: auto; width: calc(100% - 2 * var(--chip-gutter)); max-width: 1024px; padding-inline: 42px; }

/* Buttons (block buttons on the page). */
.chip-pricing-page .chip-pr-btn .wp-block-button__link { font-size: 14px; padding: 13px 26px; }
.chip-pricing-page .chip-pr-btn--pink .wp-block-button__link { background: var(--chip-magenta-500); color: #fff; }
.chip-pricing-page .chip-pr-btn--pink .wp-block-button__link:hover,
.chip-pricing-page .chip-pr-btn--pink .wp-block-button__link:focus-visible { background: #c50d5e; color: #fff; }
.chip-pricing-page .chip-pr-btn--navy .wp-block-button__link { background: var(--chip-sea-800); color: #fff; font-size: 15px; padding: 15px 32px; }
.chip-pricing-page .chip-pr-btn--navy .wp-block-button__link:hover,
.chip-pricing-page .chip-pr-btn--navy .wp-block-button__link:focus-visible { background: var(--chip-sea-900); color: #fff; box-shadow: 0 10px 28px rgba(6,36,48,0.35); }
.chip-pricing-page .chip-pr-btn--ghost .wp-block-button__link { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.7); font-size: 15px; padding: 14px 30px; }
.chip-pricing-page .chip-pr-btn--ghost .wp-block-button__link:hover,
.chip-pricing-page .chip-pr-btn--ghost .wp-block-button__link:focus-visible { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; box-shadow: none; }
.chip-pricing-page .wp-block-button__link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Hero */
.chip-pr-hero { position: relative; overflow: hidden; text-align: center; }
.chip-pricing-page .chip-pr-sec.chip-pr-hero { padding-block: clamp(4rem, 8vw, 6rem) 3.5rem; }
.chip-pr-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 900px 520px at 50% -40px, rgba(22,163,204,0.16) 0%, transparent 65%); }
.chip-pr-hero > * { position: relative; }
.chip-pricing-page .chip-pr-hero__title { font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.02em; margin: 0 auto 20px; max-width: 900px; }
.chip-pricing-page .chip-pr-hero__title em { background-image: var(--chip-underline); background-repeat: no-repeat; background-position: left 100%; background-size: 100% 0.32em; padding-bottom: 0.1em; }
.chip-pricing-page .chip-pr-hero__sub { font-size: 18px; line-height: 1.75; color: rgba(255,255,255,0.72); max-width: 620px; margin: 0 auto 24px; }
.chip-pricing-page .chip-pr-trust { list-style: none; padding: 0; margin: 0 auto 42px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 13px; color: rgba(255,255,255,0.7); }
.chip-pricing-page .chip-pr-trust li::before { content: "✓ "; color: var(--chip-cyan-400); font-weight: 700; }
.chip-pr-pill { display: inline-flex; align-items: center; gap: 16px; background: rgba(22,163,204,0.09); border: 1px solid rgba(22,163,204,0.28); border-radius: 999px; padding: 10px 10px 10px 26px; }
.chip-pricing-page .chip-pr-pill__text { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.8); margin: 0; }
.chip-pricing-page .chip-pr-pill__text strong { color: #fff; }
.chip-pr-pill__btns { margin: 0; }

/* Plans */
.chip-pr-plans { max-width: 1000px; margin: 0 auto; padding-inline: var(--chip-gutter); }
.chip-pr-toggle { display: flex; width: max-content; margin: 0 auto 30px; gap: 4px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 5px; }
.chip-pr-toggle__opt { background: transparent; border: 0; color: rgba(255,255,255,0.72); font: 700 14px/1 var(--chip-font-body); padding: 10px 20px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.chip-pr-toggle__opt:hover { color: #fff; }
.chip-pr-toggle__opt.is-active { background: var(--chip-cyan-600); color: #fff; }
.chip-pr-toggle__opt:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.chip-pr-toggle__save { font-size: 10px; font-weight: 700; background: var(--chip-green-500); color: #fff; padding: 3px 7px; border-radius: 999px; }
.chip-pr-toggle__opt.is-active .chip-pr-toggle__save { background: rgba(6,36,48,0.35); }
.chip-pr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 480px)); justify-content: center; gap: 20px; align-items: start; margin-bottom: 40px; }
.chip-pr-plan { position: relative; display: flex; flex-direction: column; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 22px; padding: 38px; transition: transform 0.3s var(--chip-ease), box-shadow 0.3s var(--chip-ease), border-color 0.3s; }
.chip-pr-plan:hover { transform: translateY(-6px); border-color: rgba(22,163,204,0.35); box-shadow: 0 24px 64px rgba(0,0,0,0.38); }
.chip-pr-plan--featured { background: rgba(22,163,204,0.07); border: 1.5px solid var(--chip-cyan-500); }
.chip-pr-plan--featured:hover { border-color: var(--chip-cyan-500); }
.chip-pricing-page .chip-pr-plan__ribbon { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); margin: 0; background: var(--chip-cyan-600); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 5px 18px; border-radius: 0 0 12px 12px; white-space: nowrap; }
.chip-pr-plan__bar { display: block; width: 30px; height: 4px; border-radius: 2px; background: var(--chip-amber-500); margin-bottom: 16px; }
.chip-pr-plan__bar--pink { background: var(--chip-magenta-500); }
.chip-pricing-page .chip-pr-plan__label { font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--chip-cyan-400); margin: 0 0 8px; }
.chip-pricing-page .chip-pr-plan__label--pink { color: #F07CC8; }
.chip-pricing-page .chip-pr-plan__name { font-size: 27px; line-height: 1.15; margin: 0 0 7px; }
.chip-pricing-page .chip-pr-plan__tagline { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.68); margin: 0 0 26px; }
.chip-pricing-page .chip-pr-price p { margin: 0; }
.chip-pricing-page .chip-pr-price__row { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.chip-pr-price__dollar { font-size: 20px; font-weight: 700; color: rgba(255,255,255,0.8); }
.chip-pr-price__num { font-family: var(--chip-font-display); font-weight: 800; font-size: 54px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.chip-pr-price__num--word { font-size: 38px; }
.chip-pr-price__period { font-size: 14px; color: rgba(255,255,255,0.68); }
.chip-pricing-page .chip-pr-price__match { font-size: 12px; line-height: 1.55; color: rgba(255,255,255,0.68); margin: 8px 0 4px; }
.chip-pricing-page .chip-pr-price__match strong { color: rgba(255,255,255,0.9); }
.chip-pricing-page .chip-pr-price__note { font-size: 11px; font-weight: 700; color: var(--chip-cyan-400); min-height: 16px; margin-bottom: 22px; }
.chip-pricing-page .chip-pr-price__note--muted { color: rgba(255,255,255,0.66); }
.chip-pr-plan__rule { border: 0; border-top: 1px solid rgba(255,255,255,0.1); margin: 18px 0; }
.chip-pricing-page .chip-pr-plan__featlabel { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.64); margin: 0 0 14px; }
.chip-pr-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.chip-pr-feats li { position: relative; padding-left: 24px; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.78); }
.chip-pr-feats li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--chip-cyan-400); font-weight: 700; }
.chip-pr-feats strong { color: #fff; }
.chip-pr-tag { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: rgba(231,65,173,0.18); color: #F07CC8; padding: 2px 6px; border-radius: 4px; margin-left: 4px; vertical-align: middle; }
.chip-pr-plan__cta { display: block; width: 100%; box-sizing: border-box; margin-top: 26px; padding: 14px; border-radius: 999px; font: 700 14px/1.2 var(--chip-font-body); text-align: center; text-decoration: none; cursor: pointer; transition: all 0.2s; }
.chip-pricing-page a.chip-pr-plan__cta--pink { background: var(--chip-magenta-500); color: #fff; border: 0; }
.chip-pricing-page a.chip-pr-plan__cta--pink:hover { background: #c50d5e; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(231,65,173,0.3); }
.chip-pr-plan__cta--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.4); }
.chip-pr-plan__cta--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.chip-pr-plan__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.chip-pricing-page .chip-pr-plan__foot { font-size: 11px; color: rgba(255,255,255,0.64); text-align: center; margin: 11px 0 0; }

/* Showcase */
.chip-pr-showcase__frame { position: relative; max-width: 1120px; height: 400px; margin: 6px auto 0; overflow: hidden; }
.chip-pr-showcase__img { position: absolute; inset: 0; margin: 0; }
.chip-pr-showcase__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.chip-pr-showcase__frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, var(--chip-sea-900) 0%, rgba(6,36,48,0) 22%, rgba(6,36,48,0) 78%, var(--chip-sea-900) 100%), linear-gradient(to bottom, var(--chip-sea-900) 0%, rgba(6,36,48,0) 32%, rgba(6,36,48,0) 50%, var(--chip-sea-900) 100%); }
.chip-pricing-page .chip-pr-showcase__cap { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 2; margin: 0; padding: 0 30px; text-align: center; font-family: var(--chip-font-display); font-weight: 700; font-size: clamp(18px, 2.3vw, 26px); line-height: 1.3; color: #fff; }
.chip-pricing-page .chip-pr-showcase__cap em { color: var(--chip-cyan-200); }

/* Trial explainer */
.chip-pr-trial__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.chip-pricing-page .chip-pr-trial__copy p:not([class]) { font-size: 14px; line-height: 1.75; color: rgba(255,255,255,0.72); }
.chip-pr-mini { margin-top: 20px; padding: 16px 18px; background: rgba(22,163,204,0.08); border: 1px solid rgba(22,163,204,0.25); border-radius: 12px; }
.chip-pricing-page .chip-pr-mini p { margin: 0; }
.chip-pricing-page .chip-pr-mini__label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--chip-cyan-400); margin-bottom: 8px !important; }
.chip-pricing-page .chip-pr-mini__row { gap: 12px; margin-bottom: 6px; font-size: 13px; }
.chip-pricing-page .chip-pr-mini__row p:first-child { color: rgba(255,255,255,0.74); }
.chip-pricing-page .chip-pr-mini__val { font-weight: 700; color: #fff; }
.chip-pricing-page .chip-pr-mini__val--teal { color: var(--chip-cyan-400); }
.chip-pricing-page .chip-pr-mini__fine { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.66); margin-top: 10px !important; }
.chip-pricing-page .chip-pr-mini__fine em { font-style: italic; }
.chip-pr-steps { display: flex; flex-direction: column; gap: 14px; }
.chip-pr-step { display: flex; gap: 14px; align-items: flex-start; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 15px 16px; }
.chip-pricing-page .chip-pr-step__num { flex: none; width: 27px; height: 27px; margin: 0; border-radius: 50%; background: rgba(22,163,204,0.15); border: 1.5px solid rgba(22,163,204,0.35); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--chip-cyan-400); }
.chip-pricing-page .chip-pr-step__text h3 { font-family: var(--chip-font-body); font-size: 13px; font-weight: 700; letter-spacing: 0; margin: 0 0 3px; }
.chip-pricing-page .chip-pr-step__text p { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.68); margin: 0; }

/* Platform tiles */
.chip-pr-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.chip-pr-tile { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 24px; transition: background 0.25s, border-color 0.25s; }
.chip-pr-tile:hover { background: rgba(255,255,255,0.07); border-color: rgba(22,163,204,0.25); }
.chip-pr-tile::before { content: ""; display: block; width: 40px; height: 40px; border-radius: 10px; margin-bottom: 14px; background: var(--tile, rgba(22,163,204,0.7)); }
.chip-pr-tile--teal { --tile: rgba(22,163,204,0.7); }
.chip-pr-tile--pink { --tile: rgba(231,65,173,0.7); }
.chip-pr-tile--amber { --tile: rgba(231,182,92,0.85); }
.chip-pr-tile--green { --tile: rgba(31,158,107,0.75); }
.chip-pr-tile--purple { --tile: rgba(124,107,214,0.75); }
.chip-pr-tile--sky { --tile: rgba(67,183,218,0.7); }
.chip-pricing-page .chip-pr-tile__title { font-family: var(--chip-font-body); font-size: 14px; font-weight: 700; letter-spacing: 0; margin: 0 0 5px; }
.chip-pricing-page .chip-pr-tile__desc { font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.68); margin: 0 0 12px; }
.chip-pricing-page .chip-pr-tile .chip-pr-tag { margin: 0; background: rgba(22,163,204,0.22); color: var(--chip-cyan-200); padding: 3px 9px; border-radius: 999px; }
/* Group blocks are flow layouts, so core gives every child after the first
   margin-block-start: 24px. Inside a grid or flex container that margin does
   not collapse into the gap: it pushed tiles 2-6 down 24px against tile 1,
   and doubled the spacing between steps, FAQs and the pro band copy. The
   gap owns spacing in these containers. */
.chip-pricing-page .chip-pr-trial__grid > *,
.chip-pricing-page .chip-pr-steps > *,
.chip-pricing-page .chip-pr-step > *,
.chip-pricing-page .chip-pr-tiles > *,
.chip-pricing-page .chip-pr-band__grid > *,
.chip-pricing-page .chip-pr-band__text > *,
.chip-pricing-page .chip-faq__list > * { margin-block-start: 0; }

/* Videos */
.chip-pr-videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.chip-pr-video { margin: 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; overflow: hidden; }
.chip-pr-video video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.chip-pr-video__body { display: flex; flex-direction: column; padding: 18px 22px 22px; }
.chip-pr-video__name { font-size: 15px; font-weight: 700; color: #fff; }
.chip-pr-video__role { font-size: 12.5px; color: var(--chip-cyan-400); margin-top: 2px; }
.chip-pr-video__loc { font-size: 12px; color: rgba(255,255,255,0.66); margin-top: 6px; }

/* Who belongs */
.chip-pricing-page .chip-pr-who__note { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--chip-cyan-400); margin: 0 0 30px; }
.chip-pricing-page .chip-pr-who__note::before { content: "● "; }
.chip-pr-disc { display: flex; flex-direction: column; gap: 12px; }
.chip-pr-disc__item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; overflow: hidden; transition: border-color 0.2s, background 0.2s; }
.chip-pr-disc__item:hover { border-color: rgba(22,163,204,0.3); }
.chip-pr-disc__item[open] { border-color: rgba(22,163,204,0.4); background: rgba(22,163,204,0.05); }
.chip-pr-disc__head { display: flex; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; }
.chip-pr-disc__head::-webkit-details-marker { display: none; }
.chip-pr-disc__head::after { content: "+"; flex: none; font-size: 22px; line-height: 1; color: rgba(255,255,255,0.6); transition: transform 0.25s var(--chip-ease); }
.chip-pr-disc__item[open] .chip-pr-disc__head::after { transform: rotate(45deg); color: var(--chip-cyan-400); }
.chip-pr-disc__head:focus-visible { outline: 2px solid var(--chip-cyan-400); outline-offset: -2px; border-radius: 14px; }
.chip-pr-disc__mark { flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--mark-bg); border: 1px solid var(--mark-bd); }
.chip-pr-disc__item--teal { --mark-bg: rgba(22,163,204,0.18); --mark-bd: rgba(22,163,204,0.35); }
.chip-pr-disc__item--amber { --mark-bg: rgba(231,182,92,0.2); --mark-bd: rgba(231,182,92,0.4); }
.chip-pr-disc__item--green { --mark-bg: rgba(31,158,107,0.18); --mark-bd: rgba(31,158,107,0.38); }
.chip-pr-disc__item--purple { --mark-bg: rgba(124,107,214,0.2); --mark-bd: rgba(124,107,214,0.4); }
.chip-pr-disc__item--pink { --mark-bg: rgba(231,65,173,0.18); --mark-bd: rgba(231,65,173,0.38); }
.chip-pr-disc__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chip-pr-disc__title { font-family: var(--chip-font-display); font-weight: 700; font-size: 19px; line-height: 1.2; color: #fff; }
.chip-pr-disc__sub { font-size: 12px; color: rgba(255,255,255,0.66); margin-top: 2px; }
.chip-pr-disc__count { flex: none; font-size: 11px; font-weight: 700; color: var(--chip-cyan-400); background: rgba(22,163,204,0.12); border: 1px solid rgba(22,163,204,0.25); padding: 3px 10px; border-radius: 999px; }
.chip-pr-disc__roles { list-style: none; margin: 0; padding: 0 22px 22px 80px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-pr-role { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 8px 14px; border-radius: 999px; }
.chip-pr-role::before { content: "✓"; color: var(--chip-cyan-400); font-size: 11px; font-weight: 700; }
.chip-pr-role__q { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.64); }
.chip-pricing-page .chip-pr-who__caveat { text-align: center; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.66); max-width: 620px; margin: 20px auto 0; }
.chip-pricing-page .chip-pr-who__caveat a { font-weight: 600; white-space: nowrap; }
.chip-pricing-page .chip-pr-sec.chip-pr-who { padding-block: 3rem 4rem; }

/* Pro band */
.chip-pr-band__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.chip-pr-band__img { position: relative; min-height: 400px; margin: 0; }
.chip-pr-band__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; -webkit-mask-image: linear-gradient(to right, #000 50%, transparent 98%); mask-image: linear-gradient(to right, #000 50%, transparent 98%); }
.chip-pr-band__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, var(--chip-sea-900) 0%, rgba(6,36,48,0) 26%, rgba(6,36,48,0) 66%, var(--chip-sea-900) 100%); }
.chip-pr-band__text { padding: 46px 42px; display: flex; flex-direction: column; justify-content: center; }
.chip-pricing-page .chip-pr-band__text .chip-pr-h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); margin: 0 0 14px; }
.chip-pricing-page .chip-pr-band__text .chip-pr-h2 em { background-image: var(--chip-underline); background-repeat: no-repeat; background-position: left 100%; background-size: 100% 0.32em; padding-bottom: 0.1em; }
.chip-pricing-page .chip-pr-band__text p:not([class]) { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.72); margin-bottom: 24px; }
.chip-pricing-page .chip-pr-sec.chip-pr-band { padding-block: 0 4rem; }

/* FAQ (reuses .chip-faq__item) */
.chip-pricing-page .chip-pr-faq .chip-faq__list { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.chip-pricing-page .chip-pr-faq .chip-faq__answer { color: rgba(255,255,255,0.74); font-size: 14px; line-height: 1.75; }
.chip-pricing-page .chip-pr-sec.chip-pr-faq { padding-block: 0 5rem; }
.chip-pricing-page .chip-faq__item > summary:focus-visible { outline: 2px solid var(--chip-cyan-400); outline-offset: -2px; }

/* Final CTA */
.chip-pricing-page .chip-pr-sec.chip-pr-final { background: var(--chip-cyan-600); text-align: center; padding-block: 74px; }
.chip-pricing-page .chip-pr-final__title { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 16px; }
.chip-pricing-page .chip-pr-final__title em { font-style: italic; color: rgba(255,255,255,0.9); }
.chip-pricing-page .chip-pr-final__sub { font-size: 16px; line-height: 1.7; color: #fff; max-width: 500px; margin: 0 auto 32px; }
.chip-pr-final__btns { justify-content: center; gap: 14px; }
/* Client asked for exactly two lines: the sentence, then the italic line after
   the <br>. The first line measures 19.85em, wider than the 880px narrow column
   at 3rem, so from 768px up the title escapes the column (centred on it) and
   shrinks with the viewport rather than wrapping. 20.6 = 19.85em + slack.
   Below 768px it wraps normally; two lines would need ~17px type on a phone. */
@media (min-width: 768px) {
	.chip-pricing-page .chip-pr-final__title { white-space: nowrap; width: max-content; max-width: none; margin-left: 50%; transform: translateX(-50%); font-size: min(3rem, calc((100vw - 64px) / 20.6)); }
}

/* Firm dialog */
.chip-pr-dialog { width: min(640px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 0; background: transparent; color: #fff; overflow: auto; }
.chip-pr-dialog::backdrop { background: rgba(6,14,24,0.9); backdrop-filter: blur(10px); }
.chip-pr-dialog__card { position: relative; background: var(--chip-sea-800); border: 1px solid rgba(255,255,255,0.14); border-radius: 22px; padding: 42px; box-shadow: 0 30px 90px rgba(0,0,0,0.55); }
.chip-pr-dialog__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.8); cursor: pointer; }
.chip-pr-dialog__close svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.chip-pr-dialog__close:hover { color: #fff; background: rgba(255,255,255,0.12); }
.chip-pr-dialog__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.chip-pr-dialog__head { text-align: center; margin-bottom: 28px; }
.chip-pr-dialog__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.27em; text-transform: uppercase; color: #F07CC8; margin: 0 0 12px; }
.chip-pr-dialog .chip-pr-dialog__title { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 10px; }
.chip-pr-dialog__head p:last-child { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.72); max-width: 460px; margin: 0 auto; }
.chip-pr-form__row { margin: 0 0 22px; border: 0; padding: 0; min-width: 0; }
.chip-pr-form__row[hidden] { display: none; }
.chip-pr-form__row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.chip-pr-form__label { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: rgba(255,255,255,0.8); margin-bottom: 9px; padding: 0; }
.chip-pr-req { color: #F07CC8; margin-left: 2px; font-weight: 700; }
.chip-pr-opt { font-size: 12px; color: rgba(255,255,255,0.64); font-weight: 500; }
.chip-pr-input { display: block; width: 100%; box-sizing: border-box; font: 14px/1.4 var(--chip-font-body); color: #fff; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; padding: 13px 15px; }
.chip-pr-input::placeholder { color: rgba(255,255,255,0.5); }
.chip-pr-input:focus { outline: 2px solid var(--chip-cyan-400); outline-offset: 1px; border-color: var(--chip-cyan-500); background: rgba(22,163,204,0.06); }
select.chip-pr-input { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2343B7DA' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
select.chip-pr-input option, select.chip-pr-input optgroup { background: var(--chip-sea-900); color: #fff; }
.chip-pr-input--area { resize: vertical; min-height: 96px; }
.chip-pr-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chip-pr-seg__opt { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; padding: 13px 10px; cursor: pointer; }
.chip-pr-seg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-pr-seg__opt:has(input:checked) { background: rgba(22,163,204,0.15); border-color: var(--chip-cyan-500); color: #fff; }
.chip-pr-seg__opt:has(input:focus-visible) { outline: 2px solid var(--chip-cyan-400); outline-offset: 2px; }
.chip-pr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.chip-pr-form__error { min-height: 18px; margin: 0 0 8px; text-align: center; font-size: 13px; color: #FF9AAB; }
.chip-pr-form__submit { width: 100%; padding: 16px; border: 0; border-radius: 999px; background: var(--chip-magenta-500); color: #fff; font: 700 15px/1 var(--chip-font-body); cursor: pointer; transition: all 0.2s; }
.chip-pr-form__submit:hover { background: #c50d5e; transform: translateY(-2px); }
.chip-pr-form__submit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.chip-pr-form__submit:disabled { opacity: 0.6; cursor: progress; transform: none; }
.chip-pr-form__success { text-align: center; padding: 24px; background: rgba(31,158,107,0.12); border: 1px solid rgba(31,158,107,0.35); border-radius: 14px; color: #A6EBC4; font-size: 14px; line-height: 1.6; }
.chip-pr-form__success p { margin: 0; }
.chip-pr-form__success:focus { outline: none; }

@media (max-width: 860px) {
	.chip-pr-grid, .chip-pr-trial__grid, .chip-pr-tiles, .chip-pr-videos, .chip-pr-band__grid { grid-template-columns: 1fr; }
	.chip-pr-trial__grid { gap: 28px; }
	.chip-pricing-page .chip-pr-sec > .chip-pr-inner.chip-pr-panel { padding: 28px 22px; }
	.chip-pr-pill { flex-direction: column; border-radius: 22px; padding: 18px; gap: 12px; text-align: center; }
	.chip-pr-band__img { min-height: 240px; }
	.chip-pr-band__text { padding: 32px 0 0; }
	.chip-pr-disc__roles { padding-left: 22px; }
	.chip-pr-plan { padding: 30px 24px; }
}
@media (max-width: 640px) {
	.chip-pr-form__row--two, .chip-pr-seg { grid-template-columns: 1fr; }
	.chip-pr-dialog__card { padding: 30px 20px; }
	.chip-pr-showcase__frame { height: 280px; }
	.chip-pr-disc__count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.chip-pr-plan, .chip-pr-plan__cta, .chip-pr-form__submit, .chip-pr-disc__head::after { transition: none; }
	.chip-pr-plan:hover, .chip-pr-plan__cta:hover, .chip-pr-form__submit:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
 * Hidden until launch
 *
 * Nav links that exist in the markup but must not be reachable yet. Right now:
 * Pricing, in parts/header.html (the menu panel) and parts/footer.html, because
 * /pricing/ is still a draft and would 404 for a logged-out visitor.
 *
 * TO REVEAL: publish the page, then delete the chip-nav-soon class from both
 * template parts. Deleting this rule alone is not enough and is not the way to
 * do it: the class is the marker for what is not live yet.
 *
 * display:none (not visibility or opacity) keeps the link out of the tab order
 * and out of the accessibility tree, so nobody can reach a draft page by
 * keyboard or screen reader.
 *
 * WHY !important, which the rest of this file avoids: the menu panel styles
 * `.chip-menu__col a` with display:flex at (0,1,1), which out-ranks a bare
 * class even from the end of the file. Measured: without it the header link was
 * 36px tall with the menu open. A gate on unreleased content must not be
 * losable to a cascade accident, and nothing should ever want to override it —
 * the way to show the link is to remove the class.
 * ------------------------------------------------------------------------- */
.chip-nav-soon { display: none !important; }