/* =========================================================
   index2.php — Clevr House design system applied to home.
   All tokens come from /assets/design/tokens.css.
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--fg-1);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
img { max-width: 100%; display: block; }

/* ---- Preview banner ---- */
.ch-preview-banner {
    background: var(--clevr-blue-900);
    color: #fff;
    font: 500 13px var(--font-body);
    padding: 8px 16px;
    text-align: center;
    letter-spacing: 0.02em;
}
.ch-preview-banner a { color: var(--clevr-blue-200); text-decoration: underline; }

/* ---- Header ---- */
.ch-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
}
.ch-header-inner {
    max-width: 1200px; margin: 0 auto;
    padding: 14px 24px;
    display: flex; align-items: center; gap: 20px;
}
.ch-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 12px;
    min-width: max-content;
    text-decoration: none;
}
.ch-brand img { width: auto; height: 48px; }
.ch-brand span {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-display);
    font-size: 22px;
    color: var(--fg-1);
    white-space: nowrap;
    transition: color var(--motion-fast) var(--ease-standard);
}
.ch-brand:hover span { color: #2563eb; }
.ch-nav { display: flex; flex: 0 1 auto; gap: 6px; margin-left: 8px; min-width: 0; }
.ch-nav a {
    text-decoration: none;
    padding: 8px 14px; border-radius: 8px;
    font: 500 14px var(--font-body);
    color: var(--fg-2);
    transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.ch-nav a:hover { color: var(--fg-brand); background: var(--bg-brand-soft); }
.ch-nav a.active { color: var(--fg-brand); background: var(--bg-brand-soft); }
.ch-header-actions { margin-left: auto; display: flex; flex: 0 1 auto; gap: 8px; align-items: center; min-width: 0; }
.ch-header-search {
    position: relative;
    display: flex;
    align-items: center;
}
.ch-header-search input,
.ch-mobile-search input {
    width: 180px;
    border: 1.5px solid var(--border-base);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--fg-1);
    font: 500 14px var(--font-body);
    padding: 10px 38px 10px 14px;
    outline: none;
    transition: border-color var(--motion-fast) var(--ease-standard),
                box-shadow var(--motion-fast) var(--ease-standard);
}
.ch-header-search input:focus,
.ch-mobile-search input:focus {
    border-color: var(--clevr-blue-500);
    box-shadow: 0 0 0 3px var(--clevr-blue-100);
}
.ch-header-search button {
    position: absolute;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--fg-3);
    cursor: pointer;
    padding: 0;
}
.ch-cart-btn {
    position: relative;
    background: #fff;
    border: 1.5px solid var(--border-base);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    font: 600 14px var(--font-body); color: var(--fg-1);
    white-space: nowrap;
    transition: border-color var(--motion-fast) var(--ease-standard);
}
.ch-cart-btn:hover { border-color: var(--clevr-blue-500); color: var(--fg-brand); }
.ch-account-btn.is-logged-in {
    background: var(--clevr-blue-500);
    border-color: var(--clevr-blue-500);
    color: #fff;
    box-shadow: var(--shadow-brand);
}
.ch-account-btn.is-logged-in:hover {
    background: var(--clevr-blue-600);
    border-color: var(--clevr-blue-600);
    color: #fff;
}
.ch-mini-cart-wrap {
    position: relative;
}
.ch-mini-cart-wrap::after {
    content: "";
    position: absolute;
    right: 0;
    top: 100%;
    width: 320px;
    max-width: calc(100vw - 32px);
    height: 10px;
    z-index: 79;
}
.ch-mini-cart-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 80;
    width: 320px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: none;
}
.ch-mini-cart-wrap:hover .ch-mini-cart-panel,
.ch-mini-cart-wrap:focus-within .ch-mini-cart-panel {
    display: block;
}
.hidden {
    display: none !important;
}
.ch-mini-cart-panel .p-4 { padding: 16px; }
.ch-mini-cart-panel .p-6 { padding: 24px; }
.ch-mini-cart-panel .pb-2 { padding-bottom: 8px; }
.ch-mini-cart-panel .mb-2 { margin-bottom: 8px; }
.ch-mini-cart-panel .mb-4 { margin-bottom: 16px; }
.ch-mini-cart-panel .max-h-64 {
    max-height: 256px;
    overflow-y: auto;
}
.ch-mini-cart-panel .flex { display: flex; }
.ch-mini-cart-panel .items-center { align-items: center; }
.ch-mini-cart-panel .justify-between { justify-content: space-between; }
.ch-mini-cart-panel .space-x-2 > * + * { margin-left: 8px; }
.ch-mini-cart-panel .flex-1 { flex: 1 1 0%; }
.ch-mini-cart-panel .border-b { border-bottom: 1px solid var(--border-subtle); }
.ch-mini-cart-panel .border-t { border-top: 1px solid var(--border-subtle); }
.ch-mini-cart-panel .text-center { text-align: center; }
.ch-mini-cart-panel .text-sm { font-size: 14px; }
.ch-mini-cart-panel .text-xs { font-size: 12px; }
.ch-mini-cart-panel .font-semibold { font-weight: 600; }
.ch-mini-cart-panel .font-bold { font-weight: 700; }
.ch-mini-cart-panel .text-gray-500 { color: var(--fg-3); }
.ch-mini-cart-panel .text-gray-600 { color: var(--fg-2); }
.ch-mini-cart-panel .text-gray-800 { color: var(--fg-1); }
.ch-mini-cart-panel .text-red-500 { color: var(--danger); }
.ch-mini-cart-panel .text-red-700:hover { color: #b4232a; }
.ch-mini-cart-panel .bg-gray-200 { background: var(--neutral-200); }
.ch-mini-cart-panel .bg-gray-300:hover { background: var(--neutral-300); }
.ch-mini-cart-panel .bg-blue-600 { background: var(--clevr-blue-600); }
.ch-mini-cart-panel .bg-blue-700:hover { background: var(--clevr-blue-700); }
.ch-mini-cart-panel .text-white { color: #fff; }
.ch-mini-cart-panel .rounded-lg { border-radius: var(--radius-md); }
.ch-mini-cart-panel a {
    text-decoration: none;
}
.ch-mini-cart-panel .py-2 { padding-top: 8px; padding-bottom: 8px; }
.ch-mini-cart-panel .px-4 { padding-left: 16px; padding-right: 16px; }
.ch-mini-cart-panel button {
    border: 0;
    background: transparent;
    cursor: pointer;
}
.ch-admin-btn {
    background: #fff;
    border: 1.5px solid #fecaca;
    border-radius: var(--radius-md);
    color: #b91c1c;
    font: 700 13px var(--font-body);
    padding: 10px 12px;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--motion-fast) var(--ease-standard),
                border-color var(--motion-fast) var(--ease-standard);
}
.ch-admin-btn:hover {
    background: #fef2f2;
    border-color: #fca5a5;
}
.ch-cart-count {
    background: var(--clevr-blue-500); color: #fff;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    font: 700 11px var(--font-mono);
    display: inline-flex; align-items: center; justify-content: center;
}
.ch-mobile-menu-btn {
    display: none;
    width: 42px;
    height: 42px;
    border: 1.5px solid var(--border-base);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--fg-2);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: border-color var(--motion-fast) var(--ease-standard),
                color var(--motion-fast) var(--ease-standard),
                background var(--motion-fast) var(--ease-standard);
}
.ch-mobile-menu-btn:hover {
    border-color: var(--clevr-blue-500);
    color: var(--fg-brand);
    background: var(--bg-brand-soft);
}
.ch-mobile-menu-btn i,
.ch-mobile-menu-btn svg {
    width: 20px;
    height: 20px;
}
.ch-mobile-menu {
    display: none;
    border-top: 1px solid var(--border-subtle);
    background: rgba(255,255,255,0.96);
    padding: 8px 16px 14px;
}
.ch-mobile-menu a {
    display: block;
    padding: 11px 8px;
    border-radius: var(--radius-md);
    text-decoration: none;
    font: 600 14px var(--font-body);
    color: var(--fg-2);
}
.ch-mobile-menu a:hover {
    color: var(--fg-brand);
    background: var(--bg-brand-soft);
}
.ch-mobile-search {
    padding: 10px 8px 4px;
}
.ch-mobile-search input {
    width: 100%;
}

/* ---- Hero (dark PCB-circuitry background, two-column with rotating PCB) ---- */
.ch-hero {
    padding: 88px 24px 80px;
    position: relative;
    overflow: hidden;
    overflow-anchor: none;
    background: radial-gradient(ellipse at 30% 0%, #0b2347 0%, #061633 55%, #03081a 100%);
    color: #fff;
    border-bottom: 1px solid #0b2347;
}
.ch-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ch-hero-bg.grid { opacity: 0.22; }
.ch-hero-vignette {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 30% 50%, rgba(3,8,26,0) 0%, rgba(3,8,26,0.45) 70%, rgba(3,8,26,0.85) 100%);
}

/* Two-column shell: copy on the left, rotating PCB on the right */
.ch-hero-grid {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
    min-height: 520px;
}
#ch-hero-copy {
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-anchor: none;
}

/* Animations: traces, pads, LEDs, plus PCB float / glow / cross-fade */
@keyframes ch-trace-flow     { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -240; } }
@keyframes ch-trace-flow-rev { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset:  240; } }
@keyframes ch-pad-pulse      { 0%,100% { opacity: 0.35; r: 2.4; } 50% { opacity: 1; r: 3.4; } }
@keyframes ch-node-blink     { 0%,92%,100% { opacity: 0.25; } 94% { opacity: 1; } 97% { opacity: 0.4; } }
@keyframes ch-pcb-float      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ch-glow-pulse     { 0%,100% { opacity: 0.35; } 50% { opacity: 0.65; } }
@keyframes ch-fade-in        { 0% { opacity: 0; transform: translateY(8px); }  100% { opacity: 1; transform: translateY(0); } }
@keyframes ch-pcb-fade-in    { 0% { opacity: 0; transform: translateY(14px) scale(0.985); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.ch-trace     { stroke-dasharray: 6 10; animation: ch-trace-flow     7s linear infinite; }
.ch-trace-rev { stroke-dasharray: 4 8;  animation: ch-trace-flow-rev 9s linear infinite; }
.ch-pad       { animation: ch-pad-pulse 3.6s ease-in-out infinite; }
.ch-pad.p2 { animation-delay: 0.7s; } .ch-pad.p3 { animation-delay: 1.4s; }
.ch-pad.p4 { animation-delay: 2.1s; } .ch-pad.p5 { animation-delay: 2.8s; }
.ch-node      { animation: ch-node-blink 5s ease-in-out infinite; }
.ch-node.n2 { animation-delay: 1.2s; } .ch-node.n3 { animation-delay: 2.4s; } .ch-node.n4 { animation-delay: 3.6s; }
.ch-pcb-img-wrap { animation: ch-pcb-float 6s ease-in-out infinite; }
.ch-pcb-glow     { animation: ch-glow-pulse 4s ease-in-out infinite; }
.ch-text-fade    { animation: ch-fade-in 600ms ease both; }
.ch-pcb-fade     { animation: ch-pcb-fade-in 700ms ease both; }

/* Hero typography — light on dark, headline supports highlighted spans */
.ch-caption {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--clevr-blue-600);
}
.ch-hero .ch-caption { color: #9EC5F9; }
.ch-hero-eyebrow-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ch-hero-eyebrow-logo {
    width: 32px; height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(106,166,245,0.65));
}
.ch-display {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: 60px;
    line-height: 1.05;
    letter-spacing: var(--ls-display);
    color: var(--fg-1);
    margin: 14px 0 20px;
}
.ch-hero .ch-display { color: #fff; text-shadow: 0 2px 24px rgba(47,128,237,0.35); }
.ch-hero .ch-display .ch-hl { color: #6AA6F5; }
.ch-lead {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-lg);
    line-height: var(--lh-body);
    color: var(--fg-2);
    max-width: 640px;
    margin: 0 auto;
}
.ch-hero .ch-lead { color: #CFE2FC; max-width: 520px; margin: 0 0 28px; }

/* Hero CTAs */
.ch-hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ch-hero-cta {
    padding: 14px 22px;
    border-radius: 10px;
    cursor: pointer;
    font: 600 15px var(--font-body);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: filter var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard);
}
.ch-hero-cta.primary {
    background: var(--pcb-green);
    color: #fff;
    border: 0;
    box-shadow: 0 8px 20px -6px rgba(47,174,101,0.45);
}
.ch-hero-cta.primary:hover { filter: brightness(0.93); }
.ch-hero-cta.secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.35);
}
.ch-hero-cta.secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); }

/* Trust badges row */
.ch-hero-trust {
    display: flex;
    gap: 28px;
    margin-top: 36px;
    flex-wrap: wrap;
    color: #CFE2FC;
    font: 500 13px var(--font-body);
}
.ch-hero-trust > div { display: flex; align-items: center; gap: 10px; }
.ch-hero-trust i { width: 18px; height: 18px; color: #6AA6F5; }
.ch-hero-trust .label { color: #fff; font-weight: 600; line-height: 1.2; }
.ch-hero-trust .sub   { color: #9EC5F9; font-size: 12px; line-height: 1.2; }

/* Right column — rotating PCB centerpiece */
.ch-hero-pcb {
    position: relative;
    height: 420px;
    min-height: 420px;
    overflow-anchor: none;
}
.ch-hero-pcb .glow {
    position: absolute;
    inset: -10% -5% -10% -5%;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(47,128,237,0.5) 0%,
        rgba(47,128,237,0.2) 35%,
        rgba(47,128,237,0)   70%);
    filter: blur(20px);
    pointer-events: none;
}
.ch-pcb-img-wrap {
    position: relative;
    width: 110%;
    height: 100%;
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,0.55)) drop-shadow(0 0 40px rgba(47,128,237,0.35));
}
.ch-pcb-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* Soft radial fade so the PCB edges blend into the dark background. */
    -webkit-mask: radial-gradient(ellipse 65% 65% at 50% 50%, #000 55%, rgba(0,0,0,0.7) 78%, transparent 100%);
            mask: radial-gradient(ellipse 65% 65% at 50% 50%, #000 55%, rgba(0,0,0,0.7) 78%, transparent 100%);
}
.ch-hero-pcb-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Status pill (board name + chip) */
.ch-hero-pill {
    position: absolute;
    bottom: 8px;
    right: 12px;
    background: rgba(11,35,71,0.85);
    border: 1px solid rgba(106,166,245,0.4);
    color: #CFE2FC;
    padding: 6px 12px;
    border-radius: 999px;
    font: 600 11px var(--font-mono);
    letter-spacing: 0.06em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ch-hero-pill .led {
    width: 6px; height: 6px; border-radius: 3px;
    background: #2BB673;
    box-shadow: 0 0 8px #2BB673;
}

/* Pagination dots */
.ch-hero-dots {
    position: absolute;
    bottom: 8px;
    left: 12px;
    display: flex;
    gap: 8px;
}
.ch-hero-dots button {
    width: 8px; height: 8px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    background: rgba(106,166,245,0.35);
    transition: all 300ms ease;
    padding: 0;
}
.ch-hero-dots button.active { width: 24px; background: #6AA6F5; }

/* ---- Section primitives ---- */
.ch-section { padding: 56px 24px; }
.ch-section.soft     { background: var(--bg-subtle); padding: 64px 24px; }
/* Tightens the top so the three "Featured…" sections read as one group */
.ch-section.tight-top { padding: 24px 24px 56px; }
.ch-section-inner { max-width: 1200px; margin: 0 auto; }
.ch-h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-3xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    color: var(--fg-1);
    margin: 0;
}
.ch-section-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 24px; gap: 16px;
}
.ch-section-head h2 { white-space: nowrap; }
.ch-viewall {
    font: 600 14px var(--font-body);
    color: var(--fg-link);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    transition: border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.ch-viewall:hover { color: var(--fg-link-hover); border-bottom-color: currentColor; }

/* ---- Path cards (reference layout: pronounced outlines, image on top, ribbon on Builder) ---- */
.ch-path-intro { text-align: center; margin-bottom: 36px; }
.ch-path-intro h2 { margin: 0 0 10px; }
.ch-path-intro .underline {
    width: 56px; height: 3px;
    background: var(--clevr-blue-500);
    border-radius: 2px;
    margin: 0 auto;
}
.ch-path-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch;
}
.ch-path-card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
    transition: transform var(--motion-base) var(--ease-standard),
                box-shadow var(--motion-base) var(--ease-standard);
    box-shadow: 0 8px 24px -12px rgba(15,23,42,0.18);
}
.ch-path-card.architect { border: 2px solid var(--clevr-blue-500); }
.ch-path-card.builder   { border: 2px solid var(--pcb-green); }
.ch-path-card.kit       { border: 2px solid var(--flux-amber); }
.ch-path-card:hover { transform: translateY(-4px); }

/* Builder card is "Most Popular" — lifted by default, stronger green-tinted shadow */
.ch-path-card.popular {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px -12px rgba(47,174,101,0.35),
                0 2px 0 var(--pcb-green) inset;
}
.ch-path-card.popular:hover { transform: translateY(-10px); }

.ch-path-ribbon {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pcb-green);
    color: #fff;
    font: 700 11px var(--font-body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    box-shadow: 0 4px 12px -2px rgba(47,174,101,0.5);
    white-space: nowrap;
}

.ch-path-kind {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    font: 600 12px var(--font-body);
    align-self: flex-start;
    margin-bottom: 4px;
    width: fit-content;
}
.ch-path-kind.architect { background: var(--clevr-blue-50);          color: var(--clevr-blue-500); }
.ch-path-kind.builder   { background: rgba(47,174,101,0.08);         color: var(--pcb-green); }
.ch-path-kind.kit       { background: rgba(245,184,46,0.10);         color: var(--flux-amber); }
.ch-path-kind i { width: 14px; height: 14px; }

.ch-path-name {
    font: 500 13px var(--font-body);
    color: var(--fg-3);
    margin: 0 0 16px;
}

/* Image area — takes center stage, 4:3 ratio, accent-soft background */
.ch-path-visual {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    margin-bottom: 18px;
    display: flex; align-items: center; justify-content: center;
}
.ch-path-visual.architect { background: var(--clevr-blue-50);   border: 1px solid var(--clevr-blue-100); }
.ch-path-visual.builder   { background: rgba(47,174,101,0.08);  border: 1px solid rgba(47,174,101,0.25); }
.ch-path-visual.kit       { background: rgba(245,184,46,0.10);  border: 1px solid rgba(245,184,46,0.30); }
.ch-path-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Includes list */
.ch-path-features {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ch-path-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font: 400 14px/1.4 var(--font-body);
    color: var(--fg-2);
}
.ch-path-features i { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.ch-path-card.architect .ch-path-features i { color: var(--clevr-blue-500); }
.ch-path-card.builder   .ch-path-features i { color: var(--pcb-green); }
.ch-path-card.kit       .ch-path-features i { color: var(--flux-amber); }

/* CTA: outlined for Architect & All-in-One, filled green for Builder */
.ch-path-btn {
    margin-top: auto;
    width: 100%;
    padding: 14px 18px;
    border-radius: 10px;
    cursor: pointer;
    font: 600 15px var(--font-body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    transition: all var(--motion-fast) var(--ease-standard);
}
.ch-path-btn.architect      { background: transparent;        color: var(--clevr-blue-500); border: 2px solid var(--clevr-blue-500); }
.ch-path-btn.architect:hover{ background: var(--clevr-blue-500); color: #fff; }
.ch-path-btn.builder        { background: var(--pcb-green);   color: #fff;                 border: 2px solid var(--pcb-green); }
.ch-path-btn.builder:hover  { filter: brightness(0.93); }
.ch-path-btn.kit            { background: transparent;        color: var(--flux-amber);    border: 2px solid var(--flux-amber); }
.ch-path-btn.kit:hover      { background: var(--flux-amber);  color: #3a2a04; }
.ch-path-btn i { width: 16px; height: 16px; }

/* ---- Featured Article ---- */
.ch-article-card {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard);
    text-decoration: none; color: inherit;
}
.ch-article-card:hover { box-shadow: var(--shadow-md); border-color: var(--clevr-blue-200); }
.ch-article-body {
    padding: 36px 36px 32px;
    display: flex; flex-direction: column; gap: 14px;
}
.ch-article-body h3 {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: 26px; line-height: var(--lh-snug);
    color: var(--fg-1); margin: 0;
}
.ch-article-body p { color: var(--fg-2); margin: 0; }
.ch-article-cta {
    font: 600 14px var(--font-body);
    color: var(--fg-link);
    margin-top: auto;
    text-decoration: none;
}
.ch-article-cta:hover { color: var(--fg-link-hover); }
.ch-article-media {
    background: linear-gradient(135deg, var(--clevr-blue-600), var(--clevr-blue-800));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font: 500 12px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
    min-height: 220px;
    position: relative;
}
.ch-article-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* ---- Featured Article carousel (auto-rotates every 5s, like the article-page image carousel) ---- */
.featured-article-carousel { position: relative; }
.featured-stage {
    position: relative;
    /* Reserve space so the absolutely-positioned slides don't collapse the section. */
    min-height: 280px;
}

/* Scoped to the carousel so the rest of the site keeps the existing
   cover-crop behavior. Featured-articles have varied aspect ratios, so
   no fixed crop anchor (top/center/bottom) works for every photo —
   instead show the FULL image with object-fit: contain, and fill the
   leftover cell space with a heavily blurred copy of the same image
   (frosted-glass / Apple-music-style backdrop). The blur is generated
   from the same URL the browser is already caching, so there's no
   second download. */
.featured-slide .ch-article-media               { min-height: 280px; overflow: hidden; }
.featured-slide .ch-article-media .featured-bg-fill {
    object-fit: cover;
    filter: blur(28px) brightness(0.65);
    /* Scale up slightly so the blur's softened edges don't leak in. */
    transform: scale(1.1);
    z-index: 0;
}
.featured-slide .ch-article-media .featured-fg-image {
    object-fit: contain;
    z-index: 1;
    /* Tiny inset so the image sits inside the cell rather than touching the edges. */
    padding: 12px;
}
.featured-stage > .featured-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .45s ease, transform .45s ease;
}
.featured-stage > .featured-slide.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    /* Make the active slide drive the stage height so the section doesn't
       reflow as the user navigates between articles of different lead lengths. */
    position: relative;
}

/* Prev/next arrows on the featured carousel — same visual language as the
   article-page image carousel for consistency. */
.featured-prev, .featured-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    border: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 4px 0;
    z-index: 3;
    transition: background .2s ease, transform .15s ease;
}
.featured-prev { left: -8px; }
.featured-next { right: -8px; }
.featured-prev:hover, .featured-next:hover { background: rgba(15, 23, 42, 0.85); }
.featured-prev:active, .featured-next:active { transform: translateY(-50%) scale(0.95); }

/* Pagination dots — small, centered under the stage. Active dot is wider. */
.featured-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}
.featured-dot {
    width: 8px; height: 8px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    background: var(--border-base);
    padding: 0;
    transition: all 300ms ease;
}
.featured-dot:hover  { background: var(--clevr-blue-200); }
.featured-dot.active { width: 24px; background: var(--clevr-blue-500); }

@media (max-width: 640px) {
    .featured-prev, .featured-next { width: 36px; height: 36px; font-size: 24px; }
    .featured-prev { left: 4px; }
    .featured-next { right: 4px; }
}

/* ---- Featured PCBs carousel — same interaction as the Featured Articles
   carousel, different slide layout (image on left, product info on right). ---- */
.featured-pcb-carousel { position: relative; }
.pcb-stage {
    position: relative;
    min-height: 360px;
}
.pcb-stage > .pcb-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .45s ease, transform .45s ease;
}
.pcb-stage > .pcb-slide.active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Slide layout: image left | product details right. Same shell as the article
   card so the section reads as a sibling pattern. */
.featured-pcb-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--motion-base) var(--ease-standard),
                border-color var(--motion-base) var(--ease-standard);
}
.featured-pcb-card:hover { box-shadow: var(--shadow-md); border-color: var(--clevr-blue-200); }

/* Media cell — same blurred-backdrop technique as the article carousel so
   PCB photos of any aspect ratio show in full without cropping. */
.featured-pcb-media {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--clevr-blue-600), var(--clevr-blue-800));
    display: flex; align-items: center; justify-content: center;
}
.featured-pcb-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
}
.featured-pcb-media .featured-bg-fill {
    object-fit: cover;
    filter: blur(28px) brightness(0.65);
    transform: scale(1.1);
    z-index: 0;
}
.featured-pcb-media .featured-fg-image {
    object-fit: contain;
    z-index: 1;
    padding: 16px;
}
.featured-pcb-placeholder {
    color: #fff;
    font: 500 13px var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    padding: 0 16px;
    z-index: 1;
}

.featured-pcb-body {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
}
.featured-pcb-title {
    font: 600 26px/1.25 var(--font-body);
    color: var(--fg-1);
    margin: 0;
}
.featured-pcb-blurb {
    color: var(--fg-2);
    margin: 0;
    /* Clamp to 3 lines so slide heights stay roughly consistent across PCBs. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.featured-pcb-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 6px;
}
.featured-pcb-price {
    font: 700 28px var(--font-mono);
    color: var(--fg-1);
    line-height: 1;
}
.featured-pcb-cta {
    font: 600 14px var(--font-body);
    color: var(--fg-link);
    white-space: nowrap;
}
.featured-pcb-card:hover .featured-pcb-cta { color: var(--fg-link-hover); }

/* Prev/next + dots — visually identical to the article carousel controls. */
.pcb-prev, .pcb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    border: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 4px 0;
    z-index: 3;
    transition: background .2s ease, transform .15s ease;
}
.pcb-prev { left: -8px; }
.pcb-next { right: -8px; }
.pcb-prev:hover, .pcb-next:hover { background: rgba(15, 23, 42, 0.85); }
.pcb-prev:active, .pcb-next:active { transform: translateY(-50%) scale(0.95); }

.pcb-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
    /* If there are many PCBs the dots row scrolls horizontally rather than wrapping. */
    overflow-x: auto;
    padding: 4px 0;
    scrollbar-width: thin;
}
.pcb-dot {
    width: 8px; height: 8px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    background: var(--border-base);
    padding: 0;
    flex: 0 0 auto;
    transition: all 300ms ease;
}
.pcb-dot:hover  { background: var(--clevr-blue-200); }
.pcb-dot.active { width: 24px; background: var(--clevr-blue-500); }

/* "1 / N" counter — useful when the dot row gets long and the user can't
   tell how many slides there are at a glance. */
.pcb-counter {
    text-align: center;
    margin-top: 8px;
    font: 600 12px var(--font-mono);
    color: var(--fg-3);
    letter-spacing: 0.05em;
}

/* Mobile: stack media on top of body */
@media (max-width: 720px) {
    .featured-pcb-card { grid-template-columns: 1fr; }
    .featured-pcb-media { min-height: 240px; }
    .featured-pcb-body  { padding: 24px; }
    .featured-pcb-title { font-size: 22px; }
    .featured-pcb-price { font-size: 24px; }
    .pcb-prev, .pcb-next { width: 36px; height: 36px; font-size: 24px; }
    .pcb-prev { left: 4px; }
    .pcb-next { right: 4px; }
}

/* ---- Product grid ---- */
.ch-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ch-card {
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
    transition: box-shadow var(--motion-base) var(--ease-standard),
                border-color var(--motion-base) var(--ease-standard),
                transform var(--motion-base) var(--ease-standard);
}
.ch-card:hover { box-shadow: var(--shadow-md); border-color: var(--clevr-blue-200); }
.ch-card-media {
    aspect-ratio: 16/10;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font: 500 12px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
    position: relative;
    background: #f3f4f6;
}
.ch-card-media img {
    width: 100%; height: 100%; object-fit: contain; background: #fff;
}
.ch-card-media .ch-tag {
    position: absolute; top: 10px; left: 10px;
    background: #fff; color: var(--clevr-blue-700);
    font: 600 10px var(--font-body);
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px;
}
.ch-card-body {
    padding: 16px;
    display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.ch-card-title {
    font: 600 15px/1.35 var(--font-body);
    color: var(--fg-1); margin: 0; flex: 1;
}
.ch-card-foot {
    display: flex; align-items: center; justify-content: space-between; margin-top: 10px;
}
.ch-card-price {
    font: 700 17px var(--font-mono);
    color: var(--fg-1);
}
.ch-card-price.free { color: var(--pcb-green); }
.ch-card-btn {
    font: 600 13px var(--font-body);
    background: var(--clevr-blue-500); color: #fff;
    border: 0; padding: 8px 14px; border-radius: var(--radius-md);
    cursor: pointer; text-decoration: none;
    transition: background var(--motion-fast) var(--ease-standard);
}
.ch-card-btn:hover { background: var(--clevr-blue-600); }
.ch-card-link {
    font: 600 13px var(--font-body);
    color: var(--fg-link); text-decoration: none;
}
.ch-card-link:hover { color: var(--fg-link-hover); }

/* ---- Footer ---- */
.ch-footer {
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-subtle);
    padding: 48px 24px 24px;
    margin-top: 80px;
}
.ch-footer-inner {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.ch-footer h4 { font: 600 14px var(--font-body); color: var(--fg-1); margin: 0 0 14px; }
.ch-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ch-footer ul a { font: 400 13px var(--font-body); color: var(--fg-2); text-decoration: none; }
.ch-footer ul a:hover { color: var(--fg-link-hover); }
.ch-footer p { font: 400 13px/1.55 var(--font-body); color: var(--fg-3); margin: 0; }

/* ---- Responsive ---- */
@media (max-width: 960px) {
    .ch-header-search {
        display: none;
    }

    .ch-path-grid { grid-template-columns: 1fr; }
    .ch-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .ch-article-card { grid-template-columns: 1fr; }
    .ch-footer-inner { grid-template-columns: repeat(2, 1fr); }
    .ch-display { font-size: 44px; }
}
@media (max-width: 640px) {
    .ch-grid-3 { grid-template-columns: 1fr; }
    .ch-header-inner { gap: 16px; padding: 12px 16px; }
    .ch-nav { display: none; }
    .ch-header-actions .ch-cart-btn {
        padding: 10px;
        font-size: 0;
        gap: 0;
    }
    .ch-header-actions .ch-cart-btn svg,
    .ch-header-actions .ch-cart-btn i {
        width: 18px;
        height: 18px;
    }
    .ch-header-search,
    .ch-admin-btn {
        display: none;
    }
    .ch-mobile-menu-btn { display: inline-flex; }
    .ch-mobile-menu.open { display: block; }
    .ch-hero { padding: 48px 16px 32px; }
    .ch-hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        min-height: 0;
    }
    #ch-hero-copy { min-height: 360px; }
    .ch-hero-pcb {
        height: 280px;
        min-height: 280px;
    }
    .ch-pcb-img-wrap {
        width: 100%;
        max-width: 420px;
    }
    .ch-display { font-size: 36px; }
}