and let the single .cc-foot
link stretch over the card via this overlay. No anchor wrapping needed.
========================================================================== */
.cat-card,.img-card,.related-card{position:relative}
.cat-card .cc-foot,.img-card .cc-foot,.img-card .ic-body .cc-foot{position:static}
.cat-card .cc-foot::after,.img-card .cc-foot::after{content:"";position:absolute;inset:0;z-index:1}
/* Defensive: if a build uses a `.cc-media` image box inside a card (the canonical
image card is `.img-card > .ic-media`, but `.cc-media` was improvised with NO
css and rendered images at full intrinsic size, blowing the grid apart), still
constrain it to a fixed-ratio cover box so it can never balloon. */
.cc-media{aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius-md);margin-bottom:18px;position:relative}
.cc-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Last-ditch: a card-footer link that got ejected to be a DIRECT child of a grid
(the nested-anchor bug) must not sit in a card column and shove everything out of
alignment — drop it onto its own full-width row instead of interleaving the cards. */
.grid-2 > .cc-foot,.grid-3 > .cc-foot,.grid-4 > .cc-foot{grid-column:1/-1}
/* ==========================================================================
CTA / button breathing room. A button or actions row that follows content in a
body column (e.g. the "See the math" button pinned flush under a comparison
table) must never sit jammed against the element above it.
========================================================================== */
.split-body > .btn,.split-body > .hero-actions,.split-body > .btn-row,
.cta-content > * + .btn,.cta-content > * + .hero-actions{margin-top:24px}
.split-body > * + .btn,.detail-card > * + .btn,.sidebar-cta > * + .btn{margin-top:22px}
/* ==========================================================================
TABLES — for genuinely tabular content (comparison / spec / pricing). Use a REAL
wrapped in (the wrap scrolls
horizontally on small screens so columns never crush). NEVER fake a table by
splitting a sentence or key-value data across mis-sized grid/flex columns.
========================================================================== */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0 24px;border:1px solid var(--border);border-radius:var(--radius-md)}
.data-table,.compare-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:440px}
.data-table th,.data-table td,.compare-table th,.compare-table td{padding:13px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
.data-table thead th,.compare-table thead th{background:var(--surface);color:var(--text);font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.data-table tbody tr:last-child td,.compare-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:nth-child(even),.compare-table tbody tr:nth-child(even){background:var(--surface)}
.data-table td:first-child,.compare-table td:first-child{font-weight:600;color:var(--text)}
.data-table .td-yes{color:var(--accent-dark);font-weight:700}
.data-table .td-no{color:var(--text-muted)}
/* On a dark band the table inherits .on-dark light text; tint the header/zebra for contrast. */
.on-dark .table-wrap{border-color:rgba(255,255,255,.16)}
.on-dark .data-table th,.on-dark .data-table td,.on-dark .compare-table th,.on-dark .compare-table td{border-bottom-color:rgba(255,255,255,.14)}
.on-dark .data-table thead th,.on-dark .compare-table thead th{background:rgba(255,255,255,.08);color:#fff}
.on-dark .data-table tbody tr:nth-child(even),.on-dark .compare-table tbody tr:nth-child(even){background:rgba(255,255,255,.05)}
/* ==========================================================================
Trust / "backed by" bar — keep it from rendering as a jumbled plain-text list.
Items are spaced pills; an EMPTY item must not leave a ghost gap.
========================================================================== */
.trust-pills{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px}
.trust-pills :empty{display:none}
.trust-label{display:block;text-align:center}
/* ============================================================================
SIGNATURE / DESIGN-PACK LAYER — opt-in, VETTED, responsive + contrast-safe.
This is the toolkit for making a build DISTINCTIVE and design-heavy (see SKILL
"Design ceiling"). It EXTENDS the baseline; it never replaces it. Using these
classes is NOT "improvising CSS" — they are part of the shipped baseline, so you
reach for them instead of hand-rolling a section's internals. Each is
self-contained, mobile-safe, and degrades gracefully. Decorative glow/mesh/grid
layers sit BEHIND content (z-index) and are pointer-events:none. Pair every
dark/over-media band with .on-dark so text + icons stay light (contrast rule).
Push these on fitting clients (tech, premium, modern, creative); keep the
restrained baseline for trust-forward/industrial ones. Never at the cost of
contrast or responsiveness.
============================================================================ */
/* --- Decorative DARK-BAND backgrounds: futuristic glow / mesh / grid / scanlines.
Add to a `.section.dark` / `.hero-dark` / `.on-dark` band; content sits above. --- */
.bg-aurora{position:relative;overflow:hidden;isolation:isolate}
.bg-aurora::before{content:"";position:absolute;inset:-40% -15% auto -15%;height:95%;z-index:-1;pointer-events:none;
background:radial-gradient(55% 55% at 18% 20%,color-mix(in srgb,var(--accent) 42%,transparent),transparent 70%),
radial-gradient(50% 50% at 82% 12%,color-mix(in srgb,var(--primary) 60%,transparent),transparent 72%);
filter:blur(64px);opacity:.65}
.bg-grid{position:relative;overflow:hidden;isolation:isolate}
.bg-grid::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.45;
background-image:linear-gradient(color-mix(in srgb,var(--accent) 14%,transparent) 1px,transparent 1px),
linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent) 1px,transparent 1px);
background-size:46px 46px;
-webkit-mask-image:radial-gradient(72% 60% at 50% 28%,#000,transparent 76%);
mask-image:radial-gradient(72% 60% at 50% 28%,#000,transparent 76%)}
.bg-glow{position:relative;overflow:hidden;isolation:isolate}
.bg-glow::before{content:"";position:absolute;left:50%;top:-20%;width:70vw;height:70vw;max-width:760px;max-height:760px;
transform:translateX(-50%);z-index:-1;pointer-events:none;border-radius:50%;opacity:.5;filter:blur(90px);
background:radial-gradient(circle,color-mix(in srgb,var(--accent) 55%,transparent),transparent 65%)}
/* --- BENTO grid: an asymmetric feature grid (a wide/tall lead tile + smaller tiles)
instead of a flat row of identical cards. Children are normal .cat-card/.img-card/.glass. --- */
.bento{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:768px){
.bento{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(150px,auto)}
.bento .bento-lg{grid-column:span 2;grid-row:span 2}
.bento .bento-wide{grid-column:span 2}
.bento .bento-tall{grid-row:span 2}
}
/* --- GLASS card (glassmorphism) — only on dark / over-media bands (carry .on-dark). --- */
.glass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);
-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
box-shadow:0 10px 44px rgba(0,0,0,.28);padding:28px 24px}
/* --- Editorial DISPLAY type, gradient + outline headline words. --- */
.display-xl{font-size:clamp(2.6rem,8vw,5.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.02}
.display-lg{font-size:clamp(2.1rem,5.5vw,3.8rem);font-weight:800;letter-spacing:-.025em;line-height:1.06}
.text-gradient{background:linear-gradient(100deg,var(--accent),var(--primary));-webkit-background-clip:text;background-clip:text;color:transparent}
.text-stroke{-webkit-text-stroke:1.4px currentColor;color:transparent} /* outline word for editorial heroes */
.eyebrow-line{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.eyebrow-line::before{content:"";width:34px;height:2px;background:var(--accent)} /* minimalist line-label alt to the pill chip */
/* --- SPLIT-SCREEN hero: media on one side, content on the other (alt to the full-bleed hero). --- */
.hero-split{display:grid;grid-template-columns:1fr;min-height:auto}
.hero-split .hs-media{position:relative;overflow:hidden;min-height:44vh}
.hero-split .hs-media>img,.hero-split .hs-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-split .hs-body{display:flex;flex-direction:column;justify-content:center;padding:120px 0 64px}
@media(min-width:900px){
.hero-split{grid-template-columns:1.04fr .96fr;min-height:92vh}
.hero-split .hs-media{min-height:0}
.hero-split .hs-body{padding:96px 64px 96px 0}
}
/* --- ANGLED / soft-curve section divider — breaks the flat band-on-band stack.
Use sparingly (one or two per page) and only on a band with ample vertical padding. --- */
.section-angled{clip-path:polygon(0 0,100% 2.6vw,100% 100%,0 calc(100% - 2.6vw))}
.section-curve{border-top-left-radius:48px 26px;border-top-right-radius:48px 26px;overflow:hidden}
/* --- MARQUEE strip: a moving row of CAPSULE chips (duplicate the track once for a seamless loop).
⛔ HARD CONSTRAINT: every phrase is its own `.hm-pill` — a padded, bordered capsule with real
spacing between items. The old giant bare-text marquee shipped as an unreadable run-on word blur
and is BANNED. Never put bare text directly in `.hm-track`. Pauses on hover. --- */
.headline-marquee{overflow:hidden;white-space:nowrap;width:100%;padding:6px 0}
.headline-marquee .hm-track{display:inline-flex;gap:16px;align-items:center;width:max-content;
padding-right:16px;animation:hm-scroll 36s linear infinite}
.headline-marquee .hm-pill{display:inline-flex;align-items:center;gap:10px;padding:11px 24px;
border-radius:999px;border:1px solid var(--border);background:var(--surface);
font-weight:600;font-size:1.02rem;letter-spacing:.01em;line-height:1;color:var(--text)}
/* Icons on a LIGHT pill must never be raw --accent — a light client accent (cyan/yellow)
on near-white --surface drops below 2:1 and the QA probe blocks it as an invisible band.
Blend the accent toward --text so it stays brand-tinted but always readable; the dark
override below restores light icons on dark sections. */
.headline-marquee .hm-pill svg,.headline-marquee .hm-pill .icon{width:1.05em;height:1.05em;color:color-mix(in srgb,var(--accent) 55%,var(--text))}
:is(.on-dark,.section.dark,.hero-dark) .headline-marquee .hm-pill{
background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
:is(.on-dark,.section.dark,.hero-dark) .headline-marquee .hm-pill svg,
:is(.on-dark,.section.dark,.hero-dark) .headline-marquee .hm-pill .icon{color:#fff}
.headline-marquee .hm-dot{color:color-mix(in srgb,var(--accent) 55%,var(--text));font-weight:800}
:is(.on-dark,.section.dark,.hero-dark) .headline-marquee .hm-dot{color:rgba(255,255,255,.6)}
.headline-marquee:hover .hm-track{animation-play-state:paused}
@keyframes hm-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* --- Accent KICKER rule under a stat / feature, and a hairline "tech" border. --- */
.kicker-rule{width:46px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--primary));margin:14px 0 0}
.edge-glow{border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent),0 14px 50px rgba(0,0,0,.18)}
@media(prefers-reduced-motion:reduce){
.headline-marquee .hm-track{animation:none}
}
/* Mobile: kill the angled clip (it eats content at small sizes) and calm big type. */
@media(max-width:639px){
.section-angled{clip-path:none}
.hero-split .hs-body{padding:104px 0 56px}
}
/* AUTO-REPAIR: any explicit multi-column grid — INCLUDING a hand-written inline
`style="display:grid;grid-template-columns:repeat(3,1fr)"` — collapses to a single
column on phones. A stylesheet `!important` beats a non-important inline declaration,
so this neutralises the #1 cause of mobile horizontal scroll (responsive_hscroll)
regardless of how the section was authored. */
@media(max-width:600px){
[style*="grid-template-columns"]{grid-template-columns:1fr !important}
}
/* AUTO-REPAIR: a .cta-form is always a WHITE card. When it sits inside an on-dark band
(.cta-band / .cta-dark / .on-dark …), the band's white-text cascade turned the form's
labels, helper text and input text white-on-white — an invisible form. This higher-
specificity rule restores dark text inside the white card. (Same dark-cascade-into-a-
light-child defect that hit .process; .cta-form is the reliably-white one we can target.) */
:is(.on-dark,.section.dark,.hero-dark,.process,.cta-dark,.cta-band,.sidebar-cta,.quick-response,.trust-bar,.stat-bar) .cta-form
:where(h1,h2,h3,h4,h5,h6,p,label,span,small,strong,b,li,dd,dt,.form-label,.form-note,input,textarea,select){color:var(--text)}
/* AUTO-REPAIR: buttons inside the white .cta-form must use on-LIGHT styling. A .btn-outline
defaults to white text + faint-white border (built for dark bands) — invisible on the
white card. Force dark ink + a visible border so the form's buttons are always visible. */
.cta-form .btn-outline{color:var(--text);border-color:var(--border)}
.cta-form .btn-primary{color:var(--text)}
.cta-form :where(.btn,.btn-primary,.btn-outline) span{color:inherit}
/* AUTO-REPAIR: tolerate the FAQ class-name variants the builder sometimes emits
(.faq-q / .faq-a / .faq-icon) instead of the canonical .faq-question / .faq-answer /
.faq-ico, so the accordion still styles + collapses. Paired with a JS selector that
binds both spellings. */
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:20px 22px;font-weight:700;font-size:1.02rem;text-align:left;color:var(--text);cursor:pointer}
.faq-q .faq-icon{width:30px;height:30px;border-radius:50%;background:var(--secondary);color:var(--primary);
display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .25s,background .2s,color .2s}
.faq-q .faq-icon svg{width:16px;height:16px}
.faq-item.active .faq-icon{background:var(--accent);color:var(--text);transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--text-secondary);
font-size:.97rem;padding:0 22px}
.faq-a > :last-child{margin-bottom:22px}
/* AUTO-REPAIR: tolerate the process-section variant the builder sometimes emits (.ps-num for
the number circle, and a bare .process with steps not wrapped in .process-grid) so a
hand-rolled "How It Works" still styles instead of shipping as an unstyled stack. */
.process .ps-num,.ps-num{width:54px;height:54px;border-radius:50%;border:2px solid var(--accent);
color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;margin-bottom:18px}
.process > .container > .process-step{display:inline-block}
@media(min-width:768px){.process .process-step + .process-step{margin-top:0}}
/* ==========================================================================
THH RICH ENHANCEMENTS — Heroes grid, episode library, sun motif, collage.
Client-specific components layered on top of the baseline (append-only).
========================================================================== */
/* ---------- Gold sun motif accents ---------- */
.sun-wrap{position:relative;overflow:hidden}
.sun-wrap>.container{position:relative;z-index:1}
.sun-motif{position:absolute;pointer-events:none;user-select:none;z-index:0;max-height:none!important}
.sun-motif.sun-tr{top:-140px;right:-140px;width:420px;opacity:.16;animation:sun-spin 120s linear infinite}
.sun-motif.sun-bl{bottom:-160px;left:-160px;width:460px;opacity:.1;animation:sun-spin 160s linear infinite reverse}
.sun-motif.sun-hero{top:50%;right:-180px;transform:translateY(-50%);width:620px;opacity:.28;animation:sun-spin 180s linear infinite}
@keyframes sun-spin{to{transform:rotate(360deg)}}
.sun-motif.sun-hero{animation:sun-spin-c 180s linear infinite}
@keyframes sun-spin-c{from{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}
@media(max-width:767px){.sun-motif.sun-hero{width:420px;right:-200px;opacity:.18}}
.hero-dark .sun-motif{z-index:1}
@media(prefers-reduced-motion:reduce){.sun-motif{animation:none!important}}
/* ---------- Meet the Heroes grid ---------- */
.heroes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(min-width:640px){.heroes-grid{grid-template-columns:repeat(3,1fr);gap:22px}}
@media(min-width:1024px){.heroes-grid{grid-template-columns:repeat(4,1fr);gap:26px}}
.hero-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;display:flex;flex-direction:column}
.hero-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.hero-card .hc-media{aspect-ratio:1/1.08;overflow:hidden;position:relative;background:var(--surface-2)}
.hero-card .hc-media img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:top center;transition:transform .55s ease}
.hero-card:hover .hc-media img{transform:scale(1.06)}
.hero-card .hc-media::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(180deg,transparent,rgba(16,81,109,.28));opacity:0;transition:opacity .3s}
.hero-card:hover .hc-media::after{opacity:1}
.hero-card .hc-body{padding:14px 16px 16px}
.hero-card .hc-tag{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:5px}
.hero-card .hc-tag svg{width:12px;height:12px}
.hero-card h3{font-size:1.04rem;margin-bottom:2px}
.hero-card .hc-role{font-size:.85rem;color:var(--text-muted)}
.hero-card.hc-host{grid-column:span 2}
.hero-card.hc-host .hc-media{aspect-ratio:auto;min-height:100%}
@media(max-width:639px){.hero-card.hc-host{grid-column:span 2}}
/* ---------- Episode cards, library + filter ---------- */
.ep-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .22s ease;display:flex;flex-direction:column;color:var(--text)}
.ep-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.ep-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--dark)}
.ep-thumb img{width:100%;height:100%;max-height:none;object-fit:cover;transition:transform .5s ease}
.ep-card:hover .ep-thumb img{transform:scale(1.05)}
.ep-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);width:52px;height:52px;border-radius:50%;background:rgba(218,162,75,.94);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .22s ease,transform .22s ease;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.ep-play svg{width:20px;height:20px;margin-left:3px}
.ep-card:hover .ep-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ep-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.ep-cat{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}
.ep-title{font-weight:700;font-size:.98rem;line-height:1.35;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ep-watch{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:700;color:var(--accent-dark)}
.ep-watch svg{width:14px;height:14px}
.ep-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:640px){.ep-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.ep-grid{grid-template-columns:repeat(3,1fr)}}
.ep-toolbar{display:flex;flex-direction:column;gap:16px;align-items:center;margin-bottom:34px}
.ep-search{width:100%;max-width:440px;position:relative}
.ep-search input{width:100%;background:#fff;border:1px solid var(--border);border-radius:var(--radius-pill);padding:13px 20px 13px 46px;font-size:.95rem;color:var(--text);box-shadow:var(--shadow-sm)}
.ep-search input:focus{border-color:var(--primary)}
.ep-search svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--text-muted)}
.ep-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ep-chip{padding:8px 16px;border-radius:var(--radius-pill);border:1px solid var(--border);background:#fff;font-weight:600;font-size:.84rem;color:var(--text-secondary);cursor:pointer;transition:all .18s ease}
.ep-chip:hover{border-color:var(--primary);color:var(--primary)}
.ep-chip.active{background:var(--dark);border-color:var(--dark);color:#fff}
.ep-hidden{display:none!important}
.ep-empty{text-align:center;padding:40px 0;color:var(--text-muted);display:none}
.ep-count{font-size:.86rem;color:var(--text-muted)}
/* ---------- Horizontal episode scroller (home) ---------- */
.ep-scroller{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 20px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--accent) var(--surface-2)}
.ep-scroller::-webkit-scrollbar{height:8px}
.ep-scroller::-webkit-scrollbar-track{background:var(--surface-2);border-radius:8px}
.ep-scroller::-webkit-scrollbar-thumb{background:var(--accent);border-radius:8px}
.ep-scroller .ep-card{flex:0 0 320px;scroll-snap-align:start}
@media(max-width:479px){.ep-scroller .ep-card{flex-basis:270px}}
/* ---------- Hero thumbnail collage (home hero, desktop) ---------- */
.hero-collage{position:absolute;right:4%;top:50%;transform:translateY(-50%);width:390px;z-index:2;display:none}
@media(min-width:1330px){.hero-collage{display:block}}
.hero-collage .hco-card{position:absolute;width:300px;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);border:3px solid rgba(255,255,255,.14)}
.hero-collage .hco-card img{width:100%;display:block;max-height:none}
.hero-collage .hco-1{transform:rotate(-7deg) translate(-40px,-150px)}
.hero-collage .hco-2{transform:rotate(4deg) translate(64px,-8px);z-index:2}
.hero-collage .hco-3{transform:rotate(-3deg) translate(-58px,132px)}
.hero-collage .hco-card{transition:transform .35s ease}
.hero-collage:hover .hco-1{transform:rotate(-9deg) translate(-46px,-156px)}
.hero-collage:hover .hco-2{transform:rotate(2deg) translate(70px,-8px)}
.hero-collage:hover .hco-3{transform:rotate(-1deg) translate(-64px,138px)}
/* ---------- YouTube CTA band ---------- */
.yt-band{background:linear-gradient(135deg,var(--dark) 0%,var(--dark-mid) 60%,#0a3a52 100%);color:#fff}
.yt-band .yt-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:44px 0}
.yt-band h3{color:#fff;font-size:clamp(1.25rem,2.4vw,1.7rem);margin-bottom:6px}
.yt-band p{color:rgba(255,255,255,.78);max-width:520px}
.yt-band .yt-actions{display:flex;gap:12px;flex-wrap:wrap}
/* ==========================================================================
BLOG — index grid, featured post, and article page
========================================================================== */
.container-narrow{max-width:760px}
.chip-n{font-size:.72rem;opacity:.6;font-weight:700}
.ep-chip.active .chip-n{opacity:.85}
/* --- Post cards (reuse .ep-card shell, add excerpt + meta) --- */
.post-grid{align-items:stretch}
.post-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--dark)}
.post-thumb img{width:100%;height:100%;max-height:none;object-fit:cover;transition:transform .5s ease}
.post-card:hover .post-thumb img{transform:scale(1.05)}
.post-thumb-fallback{display:flex;align-items:flex-end;justify-content:flex-start;background:linear-gradient(135deg,var(--dark) 0%,var(--dark-mid) 55%,#0a3a52 100%)}
.post-thumb-fallback .sun-motif{position:absolute;top:50%;left:50%;width:120px;height:120px;transform:translate(-50%,-50%);opacity:.32;filter:none}
.post-thumb-fallback .ptf-cat{position:relative;margin:12px;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.14);padding:5px 11px;border-radius:var(--radius-pill)}
.post-body{padding:15px 17px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.post-title{font-weight:700;font-size:1.02rem;line-height:1.34;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-excerpt{font-size:.88rem;line-height:1.55;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-meta{margin-top:auto;padding-top:8px;font-size:.78rem;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:2px;align-items:center}
.post-meta span{white-space:nowrap}
/* --- Featured latest post --- */
.feature-post{display:grid;grid-template-columns:1fr;gap:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .22s ease;color:var(--text)}
.feature-post:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.fp-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,var(--dark),var(--dark-mid))}
.fp-media img{width:100%;height:100%;max-height:none;object-fit:cover;transition:transform .5s ease}
.fp-media .sun-motif{object-fit:contain;opacity:.4;padding:40px}
.feature-post:hover .fp-media img{transform:scale(1.04)}
.fp-body{padding:30px 30px 34px;display:flex;flex-direction:column;align-items:flex-start}
.fp-body h2{font-size:clamp(1.4rem,3vw,2rem);margin:6px 0 10px}
.fp-body p{color:var(--text-secondary);margin-bottom:14px}
@media(min-width:900px){.feature-post{grid-template-columns:1.15fr 1fr;align-items:stretch}.fp-media{aspect-ratio:auto;height:100%;min-height:340px}}
/* --- Article page --- */
.post-article{padding:44px 0 10px}
.post-breadcrumb{display:flex;gap:8px;align-items:center;font-size:.84rem;color:var(--text-muted);margin-bottom:22px;flex-wrap:wrap}
.post-breadcrumb a{color:var(--primary);font-weight:600}
.post-breadcrumb span{opacity:.6}
.post-head{margin-bottom:26px}
.post-head h1{font-size:clamp(1.7rem,4.2vw,2.7rem);line-height:1.15;margin:10px 0 16px}
.post-meta-lg{font-size:.92rem;color:var(--text-secondary);margin-top:0}
.post-hero-img{border-radius:var(--radius-lg);overflow:hidden;margin-bottom:30px;box-shadow:var(--shadow-md);background:var(--surface-2)}
.post-hero-img img{width:100%;height:auto;max-height:none;display:block}
.post-content{font-size:1.06rem;line-height:1.8;color:var(--text-secondary)}
.post-content p{margin:0 0 22px}
.post-content h2{font-size:clamp(1.3rem,2.6vw,1.7rem);color:var(--text);margin:38px 0 14px;line-height:1.25}
.post-content h3{font-size:1.2rem;color:var(--text);margin:30px 0 12px}
.post-content ul,.post-content ol{margin:0 0 22px;padding-left:24px}
.post-content li{margin-bottom:9px}
.post-content a{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.post-content a:hover{color:var(--primary-darker)}
.post-content strong{color:var(--text);font-weight:700}
.post-content blockquote{margin:26px 0;padding:18px 26px;border-left:4px solid var(--accent);background:var(--surface);border-radius:0 var(--radius-md) var(--radius-md) 0;font-style:italic;color:var(--text)}
.post-content blockquote p:last-child{margin-bottom:0}
.post-foot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin:40px 0 8px;padding-top:26px;border-top:1px solid var(--border)}
/* ==========================================================================
BRAND LAYER — The Healing Heroes signature moves, replicated from her live
site. Everything below is measured, not invented. Load-bearing for "it looks
like my brand": the gold marquee band, the cream highlighter swash on
headings, the gold moon-phase row, the navy pillar panels, script quotes.
========================================================================== */
/* ---- Cream highlighter swash behind heading words ----
Her signature: "Feel Like Something's [Missing]" with a #ead9bd sweep sitting
BEHIND the word, hugging the baseline. Not a full block — a marker stroke. */
.swash{position:relative;display:inline;background-image:linear-gradient(var(--cream),var(--cream));
background-repeat:no-repeat;background-size:100% .42em;background-position:0 88%;
padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
:is(.on-dark,.section.dark,.hero-dark,.process,.cta-dark,.cta-band,.sidebar-cta,.quick-response,.trust-bar,.stat-bar) .swash{background-image:linear-gradient(rgba(218,162,75,.34),rgba(218,162,75,.34))}
/* ---- Gold modality marquee band ---- (full-bleed gold, navy Recoleta text) */
.brand-marquee.gold-band{background:var(--accent);border-top:none;border-bottom:none;padding:16px 0;
background-image:url('../images/brand/gold-texture.jpg');background-size:cover;background-position:center}
.gold-band .bm-label{display:none}
.gold-band .brand-strip{-webkit-mask-image:none;mask-image:none}
.gold-band .brand-track{gap:0;animation-duration:60s}
.gold-band .brand-track span{font-family:var(--font-display);font-size:1.55rem;font-weight:400;
letter-spacing:0;color:var(--dark);opacity:1;padding:0 .38em}
/* ---- Moon-phase row (sits on the navy hero) ---- */
.moon-row{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
max-width:1000px;margin:64px auto 0;position:relative;z-index:2}
.moon-item{flex:1 1 0;min-width:110px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.moon-item img{width:52px;height:auto;filter:drop-shadow(0 2px 10px rgba(218,162,75,.3))}
.moon-item span{font-family:var(--font-sans);font-size:.7rem;font-weight:500;letter-spacing:.18em;
text-transform:uppercase;color:rgba(255,255,255,.9);line-height:1.6}
@media(max-width:640px){.moon-row{gap:26px}.moon-item{flex:0 0 40%}.moon-item img{width:42px}}
/* ---- Navy pillar panel + Asmillione script quote ---- */
.pillar-panel{position:relative;border-radius:2px;overflow:hidden;background:var(--dark)}
.pillar-panel img{width:100%;height:100%;object-fit:cover;display:block}
.script-quote{font-family:var(--font-script);font-weight:400;color:#fff;
font-size:clamp(1.75rem,2.8vw,2.3rem);line-height:1.4;letter-spacing:.015em;
text-shadow:0 2px 12px rgba(13,68,96,.5)}
.gold-icon{width:clamp(64px,7vw,104px);height:auto;margin:0 auto 26px;display:block}
/* ---- Gold eyebrow (futura-pt caps, letterspaced) — replaces the pill chip ---- */
.eyebrow.brand-eyebrow{background:none;padding:0;border-radius:0;color:var(--accent-dark);
font-family:var(--font-sans);font-weight:600;font-size:.74rem;letter-spacing:.2em}
.eyebrow.brand-eyebrow::before{display:none}
.on-dark .eyebrow.brand-eyebrow,.hero-dark .eyebrow.brand-eyebrow{color:var(--accent)}
/* ---- Gold splatter accent for CTA bands ---- */
.splatter-bg{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.85;
background:url('../images/brand/splatter.png') no-repeat center/cover}
/* ---- Heroes wheel ---- */
.heroes-wheel{width:min(100%,520px);height:auto;margin:0 auto;display:block;
animation:wheel-breathe 14s ease-in-out infinite}
@keyframes wheel-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}}
@media(prefers-reduced-motion:reduce){.heroes-wheel{animation:none}}
/* ---- Buttons: enforce her contrast rule ----
HARD RULE: gold never sits on light blue. Gold buttons are for navy fields;
light-blue buttons are for cream/white fields. Also: she asked for CTAs that
"pop a little bit more" — hence the larger tap target and letterspaced caps. */
.btn{font-family:var(--font-sans);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;padding:15px 30px}
.btn-lg{padding:17px 36px;font-size:.85rem}
.btn-sm{padding:11px 20px;font-size:.72rem;letter-spacing:.1em}
.btn-primary{background:var(--accent);color:var(--dark);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.secondary .btn-primary,.bg-lightblue .btn-primary{background:var(--dark);border-color:var(--dark);color:#fff}
.btn-blue{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-blue:hover{background:var(--primary-dark);border-color:var(--primary-dark);transform:translateY(-2px)}
/* ---- Nav / body voice ---- */
.nav-link,.mm-link,.dropdown-item .di-title{font-family:var(--font-sans);letter-spacing:.1em;
text-transform:uppercase;font-size:.76rem;font-weight:500}
.di-sub{text-transform:none;letter-spacing:0}
/* ---- Homepage hero: text left, heroes wheel right, moons beneath ---- */
.hero-brand{min-height:auto;padding:120px 0 64px}
.hero-split{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:1024px){.hero-split{grid-template-columns:1.05fr .95fr;gap:56px}
.hero-brand{padding:140px 0 72px}}
.hero-brand .hero-content{max-width:640px}
.hero-brand h1{margin-bottom:20px}
.hero-brand .eyebrow.brand-eyebrow{margin-bottom:18px}
.hero-welcome{font-family:var(--font-script);font-size:1.9rem;color:var(--accent);margin:-6px 0 26px}
.hero-or{font-family:var(--font-sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
color:rgba(255,255,255,.6);align-self:center}
.hero-figure{display:flex;justify-content:center}
/* ---- Pillar rows: navy panel + text, alternating ---- */
.pillars-section{background:var(--bg)}
.pillar-row{margin-bottom:64px}
.pillar-row:last-child{margin-bottom:0}
.pillar-row .pillar-panel img{aspect-ratio:1/1.15;object-fit:cover;border-radius:2px;
box-shadow:0 18px 50px rgba(16,81,109,.18);max-height:none}
.pillar-row .split-body h3{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:14px}
.pillar-row.reverse .pillar-panel{order:2}
@media(max-width:1023px){.pillar-row.reverse .pillar-panel{order:0}
.pillar-row .pillar-panel img{aspect-ratio:4/3}}
/* ---- Brand pull quote (Asmillione script, on light) ---- */
.brand-pullquote{font-family:var(--font-script);font-size:clamp(1.4rem,2.1vw,1.85rem);
line-height:1.5;color:var(--primary-darker);margin:24px 0;padding-left:22px;
border-left:2px solid var(--accent)}
/* The baseline's `:is(.on-dark,.section.dark,…) .eyebrow` computes to (0,3,0) and was
re-applying a translucent pill behind her gold eyebrows. Her eyebrows are bare
letterspaced caps — match that specificity to win cleanly. */
:is(.on-dark,.section.dark,.hero-dark,.process,.cta-dark,.cta-band,.sidebar-cta,.pillars-section) .eyebrow.brand-eyebrow,
.eyebrow.brand-eyebrow{background:none;padding:0;border-radius:0}
:is(.on-dark,.section.dark,.hero-dark,.cta-dark,.cta-band) .eyebrow.brand-eyebrow{color:var(--accent)}
.hero-welcome{font-size:2.4rem;line-height:1.2}
/* ==========================================================================
BRAND OVERRIDES OF TEMPLATE DEFAULTS
These template devices are not in her design language. Rather than edit 229
call-sites, rebrand the base classes so every page inherits her look.
========================================================================== */
/* Eyebrows: her site uses bare gold letterspaced caps — not a light-blue pill
with a dot. The pill also violated her "no gold on light blue" rule wherever
an accent sat inside it. */
.eyebrow{background:none!important;padding:0!important;border-radius:0!important;
color:var(--accent-dark);font-family:var(--font-sans);font-weight:600;
font-size:.74rem;letter-spacing:.2em;gap:0}
.eyebrow::before{display:none!important}
/* Louder eyebrow for a module whose whole job is the ask — the quiz band. */
.eyebrow.eyebrow-lg{font-size:1.15rem;letter-spacing:.18em;font-weight:700;margin-bottom:18px}
:is(.on-dark,.section.dark,.hero-dark,.process,.cta-dark,.cta-band,.sidebar-cta,
.quick-response,.trust-bar,.stat-bar) .eyebrow{color:var(--accent);background:none!important}
/* Headings: no gradient underline dash. Her decoration is the cream swash. */
.section-header h2::after{display:none!important}
/* Pull quote: Asmillione is her "Written Font" and her site uses it only for the
short quotes baked into the navy panels. A long paragraph set in script is
unreadable, so long quotes get Recoleta italic with a gold rule. */
.brand-pullquote{font-family:var(--font-display);font-style:italic;font-weight:400;
font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;color:var(--dark);
border-left:2px solid var(--accent);padding-left:22px;margin:24px 0}
/* ---- Dark-band text contrast ----
The base rule `p{color:var(--text-secondary)}` sets colour explicitly, so it beats
the inherited white on every navy band — the footer tagline was rendering #3D6270
on #10516d (invisible). Pre-existing; fixed here for every dark band at once. */
:is(.site-footer,.on-dark,.section.dark,.hero-dark,.process,.cta-dark,.cta-band,
.trust-bar,.stat-bar,.yt-band) :is(p,li,.footer-about,.footer-desc){color:rgba(255,255,255,.8)}
:is(.site-footer,.on-dark,.section.dark,.hero-dark,.cta-dark,.cta-band) :is(h1,h2,h3,h4,h5,h6){color:#fff}
/* Her footer mark sits directly on the navy, exactly as her live site shows it —
no white chip. */
.footer-logo{background:none;padding:0;border-radius:0;height:58px}
.footer-logo.logo-chip-dark,.footer-logo.logo-chip-light{background:none;padding:0;border-radius:0}
/* ==========================================================================
HER LIGHT-BLUE / GOLD RULE — from the call, [16:35]-[21:25]:
"we don't put this gold color on the light blue"
"I just wouldn't overlay gold buttons on a light blue"
"I'll get this light blue replaced with the main blue color, and we'll just
use light blue for small buttons ... use the light blue only for these
icons only. And for the large boxes, we'll just use the main color."
So: LARGE bands/boxes = navy --dark. Light blue = small icons + small buttons.
Gold = accents and buttons on navy, NEVER on a light-blue field.
========================================================================== */
/* Large surfaces were painted with light blue (--primary) and carried gold buttons —
the exact pairing she rejected. Repaint them her main blue. */
.cta-dark{background:var(--dark)}
.stat-bar{background:var(--dark)}
.quick-response{background:var(--dark)}
.sidebar-cta{background:var(--dark)}
/* Small icons keep light blue (her explicit carve-out) but must never be gold on it. */
.form-success .fs-ico{background:var(--primary);color:#fff}
.cat-card .cc-icon{background:var(--primary);color:#fff}
/* Belt and braces: any gold button that still lands on a light-blue or gold field
flips to navy so the pairing can never regress. */
:is(.stat-bar,.quick-response,.sidebar-cta,.bg-lightblue,.gold-band) .btn-primary{
background:var(--dark);border-color:var(--dark);color:#fff}
:is(.stat-bar,.quick-response,.sidebar-cta,.bg-lightblue,.gold-band) .btn-primary:hover{
background:var(--dark-mid);border-color:var(--dark-mid)}
/* ---- Homepage hero figure: the rotating sun, not the Heroes ----
[5:40] "I do not want them on our homepage." The wheel is twelve practitioner
portraits, so it cannot serve as the homepage image no matter how brand-y it looks
on her CURRENT site — that site is the Heroes-era branding she is moving away from.
She named the replacement herself: [3:00] "The image is right. I see the sun slowly
rotating on the right." / [42:44] "the sun is beautiful ... bring that brand blue forward". */
.sun-figure{width:min(100%,470px);height:auto;margin:0 auto;display:block;
animation:sun-spin 180s linear infinite;filter:drop-shadow(0 0 60px rgba(218,162,75,.22))}
@media(prefers-reduced-motion:reduce){.sun-figure{animation:none}}
@media(max-width:1023px){.sun-figure{width:min(72%,330px)}}
/* ---- CTAs: she asked these to POP MORE, [22:19] ----
"Highlight the color, like, maybe make it a button or increase size. Just something
that makes it pop a little bit more."
The brand pass restyled buttons to her futura-pt letterspaced caps but in doing so
shrank them (weight 700->600, .97->.8rem, btn-sm 47.5px -> 37.5px) — the opposite of
what she asked. Keep her type voice; give the mass back and then some. */
.btn{font-weight:700;font-size:.9rem;letter-spacing:.1em;padding:17px 34px}
.btn-lg{padding:20px 42px;font-size:1rem}
.btn-sm{padding:14px 26px;font-size:.82rem;letter-spacing:.08em}
.btn-primary{box-shadow:0 6px 18px rgba(218,162,75,.34)}
.btn-primary:hover{box-shadow:0 12px 30px rgba(218,162,75,.48);transform:translateY(-2px)}
/* the gold glow must never bloom over a light-blue or gold field (her rule) */
:is(.stat-bar,.quick-response,.sidebar-cta,.bg-lightblue,.gold-band) .btn-primary,
:is(.stat-bar,.quick-response,.sidebar-cta,.bg-lightblue,.gold-band) .btn-primary:hover{box-shadow:var(--shadow-md)}
/* Her medical/liability disclaimer — verbatim from her live site footer. Legally
load-bearing for a brand that is explicitly NOT clinical: [34:02] "this could get me
in really, really big trouble". Quiet by design, but present on every page. */
.footer-disclaimer{border-top:1px solid rgba(255,255,255,.1);padding:22px 0 4px}
.footer-disclaimer p{font-size:.72rem;line-height:1.7;color:rgba(255,255,255,.45);
font-style:italic;max-width:920px;margin:0 auto;text-align:center}
/* ==========================================================================
REAL PEOPLE ARE NEVER CROPPED
The baseline forced `.split-media img{aspect-ratio:4/3;object-fit:cover}`. Every
Chandler photo is portrait-to-square (0.83–1.06), so a 1.333 box cropped ~21%
off the top and bottom — it was cutting the top of her head off. These are the
client's own supplied headshots: show the whole frame, always.
========================================================================== */
.split-media img{aspect-ratio:auto;height:auto;object-fit:contain;max-height:none}
.product-visual img{aspect-ratio:auto;height:auto;object-fit:contain;max-height:none}
/* Heroes grid: portraits vary 0.83–1.10, so `cover` clipped some of them. `contain`
on a fixed box shows every face whole and keeps the grid tidy. */
.hero-card .hc-media{aspect-ratio:1/1.15;background:var(--surface-2)}
.hero-card .hc-media img{object-fit:contain;object-position:center;max-height:none}
.hero-card:hover .hc-media img{transform:none}
/* The global safety net capped content images at 560px and cover-cropped them.
Exempt the people. */
main img.no-crop,.split-media img,.hero-card .hc-media img{object-fit:contain!important;max-height:none!important}
/* Gold line-art on her navy panels — the same device her live site uses for the
pillar squares, reused for The Return (compass) and Contact (arrow). */
.pillar-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:56px 34px;gap:26px;min-height:380px}
.pillar-panel .gold-icon-panel{width:min(58%,210px);height:auto;object-fit:contain;margin:0 auto}
.pillar-panel .script-quote{text-align:center;margin:0}
.pillar-row .pillar-panel{padding:0;min-height:0;display:block}
.wordmark{height:26px;width:auto;margin-bottom:18px;display:block}
/* The Five Truths each carry one of her five gold moon phases — her own motif,
never repeated, giving each truth a visual anchor. */
.truth-moon{width:54px;height:auto;margin-bottom:16px;display:block;
filter:drop-shadow(0 2px 12px rgba(218,162,75,.28))}
.truth-line{font-family:var(--font-display);font-style:italic;font-size:1.18rem;
color:var(--accent-dark);margin-bottom:18px}
.truth-eyebrow{margin-bottom:12px}
/* The Five Truths, built the way her live site builds its pillars: a navy panel with a
large gold motif + an Asmillione line, alternating against the text. Each truth gets
a different moon phase, so no visual repeats on the page. */
.truth-row{align-items:center;margin-bottom:8px}
.truth-row .pillar-panel{min-height:340px;padding:48px 30px}
.truth-row .moon-panel{width:min(46%,150px)}
.truth-row .split-body h2{font-size:clamp(1.4rem,2.2vw,1.95rem)}
.truth-row .truth-moon{display:none}
@media(max-width:1023px){.truth-row.reverse .pillar-panel{order:0}}
/* .split.reverse only reorders .split-media; these rows use .pillar-panel, so the
left/right alternation never fired. */
@media(min-width:1024px){.truth-row.reverse .pillar-panel{order:2}}
/* ===== Quiz invite (homepage CTA band) =====
Replaces the Healing Roadmap signup form. Sits in the same .cfg-form slot, so it
inherits the band's card treatment; only the inner content differs. */
.quiz-invite{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.quiz-invite .qi-icon{width:38px;height:38px;color:var(--accent);margin-bottom:16px}
.quiz-invite h3{font-family:var(--font-display);font-size:1.32rem;line-height:1.3;
color:var(--text);margin-bottom:20px}
.quiz-invite .qi-list{list-style:none;display:flex;flex-direction:column;gap:11px;
margin:0 0 26px;width:100%}
.quiz-invite .qi-list li{position:relative;padding-left:28px;color:var(--text-secondary);
font-size:.97rem;line-height:1.5}
.quiz-invite .qi-list li::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;
border-radius:50%;background:var(--accent)}
.quiz-invite .btn{width:100%}