/* The landing page uses the site's existing yellow with neutral surfaces. */
body:has(.hero) {
    --home-accent: var(--accent-10);
    --home-ink: var(--site-text);
    --home-muted: var(--site-muted);
    --home-line: var(--site-border);
    --home-soft: var(--site-raised);
    --home-dark: var(--site-canvas);
    --home-panel: var(--site-surface);
    --home-light: var(--site-text);
    --home-light-muted: var(--site-muted);
    --primary-60-soft: var(--home-soft);
    --text-main: var(--home-ink);
    --text-muted: var(--home-muted);
    --text-light: var(--home-muted);
}
.hero { padding:4rem 0; min-height:min(760px,90svh); display:flex; align-items:center; background:var(--home-dark); color:var(--home-light); overflow:hidden; }
.hero-content { position:relative; }
.hero-title { font-size:clamp(3rem,7vw,5.5rem); font-weight:800; line-height:1.06; letter-spacing:-.04em; margin-bottom:1.5rem; color:var(--home-light); }
.hero-title .accent { color:var(--site-accent-text); }
.hero .intro-label { color:var(--home-light); }
.hero .intro-label::before { background:var(--home-accent); }
.hero-subtitle { font-size:1.1rem; color:var(--home-light-muted); max-width:500px; line-height:1.7; margin:0 0 2rem; }
.hero-ctas, .home-cta-actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.btn-hero-primary, .btn-hero-secondary { display:inline-flex; align-items:center; justify-content:center; gap:.65rem; min-height:48px; padding:.85rem 1.5rem; border:1px solid transparent; border-radius:10px; font-size:.95rem; font-weight:600; text-decoration:none; transition:background .2s,border-color .2s; }
.btn-hero-primary { background:var(--home-accent); color:#171717; }
.btn-hero-primary:hover { background:#ffe34d; color:#171717; }
.btn-hero-secondary { background:transparent; border-color:var(--site-border); color:var(--home-light); }
.btn-hero-secondary:hover { background:var(--site-surface); border-color:var(--site-border); color:var(--home-light); }
.hero-visual { min-width:0; }
.hero-catalog-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.hero-catalog-heading h2 { margin:0; font-size:1.1rem; font-weight:600; color:var(--home-light); }
.hero-catalog-heading a { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; color:var(--site-accent-text); text-decoration:none; font-size:.9rem; }
.hero-catalog { border:1px solid var(--site-border); border-radius:16px; background:var(--home-panel); overflow:hidden; }
.hero-product-media { position:relative; aspect-ratio:16/10; background:var(--site-surface); }
.hero-product-media:has(.hero-photo-placeholder:not([hidden])) { aspect-ratio:auto; height:240px; }
.hero-product-image { display:block; width:100%; height:100%; object-fit:cover; }
.hero-photo-placeholder { display:flex; height:100%; align-items:center; justify-content:center; flex-direction:column; gap:.5rem; padding:1rem; background:var(--site-surface); }
.hero-photo-placeholder[hidden] { display:none; }
.hero-window-illustration { width:130px; max-height:65%; flex-shrink:1; color:var(--site-accent-text); }
.hero-photo-placeholder > span { color:var(--home-light-muted); font-size:.8rem; }
.hero-product-details { padding:1.15rem 1.4rem .7rem; }
.hero-product-category { color:var(--site-accent-text); margin:0 0 .4rem; font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; overflow-wrap:anywhere; }
.hero-product-details h3 { color:var(--home-light); font-size:1.25rem; font-weight:600; line-height:1.35; margin:0 0 .35rem; overflow-wrap:anywhere; }
.hero-product-link { display:inline-flex; align-items:center; gap:.75rem; min-height:44px; color:var(--home-light); font-size:.9rem; font-weight:500; text-decoration:none; }
.hero-product-link i { font-size:.8rem; color:var(--site-accent-text); }
.hero-product-link:hover { color:var(--site-accent-text); }
.hero-carousel-navigation { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.65rem 1.4rem; border-top:1px solid var(--site-border); }
.hero-carousel-count { color:var(--home-light-muted); font-size:.85rem; letter-spacing:.1em; font-variant-numeric:tabular-nums; }
.hero-carousel-count [data-slide-current] { color:var(--home-light); }
.hero-carousel-buttons { display:flex; gap:.5rem; }
.hero-carousel-button { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--site-border); border-radius:50%; background:transparent; color:var(--home-light); font-size:.9rem; }
.hero-carousel-button:hover { background:var(--site-surface); }
.hero-catalog-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:320px; padding:2rem; gap:.75rem; text-align:center; color:var(--home-light-muted); }
.hero-catalog-empty h3 { color:var(--home-light); font-size:1.35rem; margin:0; }
.hero-catalog-empty p { margin:0; max-width:24ch; font-size:.95rem; }

/* Shared rhythm for the light sections. */
.spotlight, .features-strip, .how-it-works { padding:4.5rem 0; color:var(--home-ink); }
.spotlight, .how-it-works { background:var(--site-surface); }
.features-strip { background:var(--home-soft); border-block:1px solid var(--home-line); }
.home-section-heading { margin-bottom:2rem; max-width:680px; }
.home-section-heading--split { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; max-width:none; }
.section-eyebrow { display:flex; align-items:center; gap:.6rem; font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--home-muted); margin-bottom:.65rem; }
.section-eyebrow::before { content:''; width:20px; height:3px; background:var(--home-accent); flex-shrink:0; }
.section-title { font-size:clamp(1.75rem,3vw,2.6rem); font-weight:700; line-height:1.18; letter-spacing:-.035em; color:var(--home-ink); margin:0; text-wrap:balance; }
.section-sub { font-size:1rem; color:var(--home-muted); max-width:48ch; line-height:1.65; margin:.8rem 0 0; }
.home-text-link { display:inline-flex; align-items:center; gap:.75rem; min-height:44px; color:var(--home-ink); font-size:.9rem; font-weight:600; text-decoration:none; white-space:nowrap; }
.home-text-link:hover { color:var(--home-ink); text-decoration:underline; text-underline-offset:4px; }
.home-collections { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.collection-swipe-hint { display:none; }
.spotlight-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--home-line); border-radius:16px; overflow:hidden; background:var(--site-surface); }
.spotlight-img { height:210px; background-size:cover; background-position:center; border-bottom:1px solid var(--home-line); }
.spotlight-img img { width:100%; height:100%; object-fit:cover; }
.spotlight-img--placeholder { display:grid; place-items:center; height:170px; background:var(--home-soft); }
.spotlight-img--placeholder .hero-window-illustration { color:var(--home-ink); width:100px; max-height:110px; }
.spotlight-body { padding:1.25rem; flex:1; }
.spotlight-name { font-size:1.15rem; font-weight:600; margin:0 0 .5rem; color:var(--home-ink); overflow-wrap:anywhere; }
.spotlight-desc { font-size:.95rem; color:var(--home-muted); line-height:1.6; margin:0; overflow-wrap:anywhere; }
.spotlight-footer { padding:0 1.25rem 1.25rem; }
.btn-spotlight { display:flex; justify-content:space-between; align-items:center; gap:.75rem; min-height:48px; padding:.7rem 1rem; background:var(--home-accent); color:#171717; border-radius:10px; text-decoration:none; font-size:.9rem; font-weight:600; }
.btn-spotlight:hover { background:#ffe34d; color:#171717; }
.collection-empty { grid-column:1/-1; margin:0; padding:1.5rem; border:1px solid var(--home-line); border-radius:12px; color:var(--home-muted); }
.collection-empty a { color:var(--home-ink); }
.home-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
.feature-card { padding:1.5rem; background:var(--site-surface); border:1px solid var(--home-line); border-radius:14px; }
.feature-icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--home-accent); color:#171717; font-size:1.15rem; margin-bottom:1rem; }
.feature-card h3, .step-card h3 { font-size:1.05rem; font-weight:600; line-height:1.4; margin:0 0 .5rem; }
.feature-card p, .step-card p { font-size:.95rem; color:var(--home-muted); line-height:1.65; margin:0; }
.home-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem; margin:0; padding:0; list-style:none; }
.step-card { min-width:0; padding-top:1.25rem; border-top:2px solid var(--home-line); }
.step-number { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--home-accent); color:#171717; font-size:.95rem; font-weight:700; margin-bottom:1rem; }

.cta-banner { padding:4.5rem 0; background:var(--home-dark); color:var(--home-light); }
/* Quiet surfaces: depth belongs to the product display, not a repeating pattern. */
body:has(.hero) {
    --home-display-light: rgba(255, 215, 0, .08);
    --home-display-shadow: 0 24px 64px -32px rgba(33, 27, 15, .25);
}
html[data-color-mode="dark"] body:has(.hero) {
    --home-display-light: rgba(255, 215, 0, .055);
    --home-display-shadow: 0 24px 64px -32px rgba(0, 0, 0, .8);
}
.hero, .cta-banner, .spotlight, .features-strip, .how-it-works {
    background-image: none;
}
.hero { border-bottom: 1px solid var(--home-line); }
.hero-visual { position: relative; isolation: isolate; }
.hero-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse closest-side, var(--home-display-light) 0%, transparent 100%);
}
.hero-catalog { box-shadow: var(--home-display-shadow); }
.hero-catalog-heading { padding-inline: .25rem; margin-bottom: 1rem; }
.hero-catalog-heading h2 { font-size: .85rem; letter-spacing: .04em; }
.hero-photo-placeholder { background: var(--home-soft); }
.spotlight, .features-strip, .how-it-works { padding-block: clamp(3.5rem, 6vw, 6rem); }
.cta-banner { border-top: 1px solid var(--home-line); }
.home-cta-content::before {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--home-accent);
    margin: 0 auto 1.75rem;
}
@media (forced-colors: active), print {
    .hero-visual::before { display: none; }
    .hero-catalog { box-shadow: none; }
}
.home-cta-content { max-width:650px; margin:auto; text-align:center; }
.cta-banner .section-eyebrow { justify-content:center; color:var(--home-light-muted); }
.cta-banner .section-title { color:var(--home-light); }
.home-cta-content > p { max-width:44ch; margin:1rem auto 1.75rem; color:var(--home-light-muted); font-size:1rem; line-height:1.65; }
.home-cta-actions { justify-content:center; }
body:has(.hero) a:focus-visible, body:has(.hero) button:focus-visible, .home-collections:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.hero a:focus-visible, .hero button:focus-visible, .hero-catalog:focus-visible, .cta-banner a:focus-visible { outline:2px solid var(--home-accent); outline-offset:4px; }
@media (prefers-reduced-motion:reduce) {
    body:has(.hero) .reveal { opacity:1; transform:none; transition:none; }
}

@media (min-width:768px) {
    .home-collections > .spotlight-card:only-child { grid-column:1/-1; display:grid; grid-template-columns:minmax(180px,.75fr) minmax(0,1fr); }
    .home-collections > .spotlight-card:only-child .spotlight-img { grid-row:1/3; height:100%; min-height:220px; border-bottom:0; border-right:1px solid var(--home-line); }
    .home-collections > .spotlight-card:only-child .spotlight-body { align-self:end; padding:1.5rem 2rem 1rem; }
    .home-collections > .spotlight-card:only-child .spotlight-footer { padding:0 2rem 1.5rem; }
}
@media (max-width:991.98px) {
    .hero { min-height:auto; padding:2.5rem 0; }
    .hero-content > .row { --bs-gutter-y:2rem; }
    .hero-title { max-width:12ch; }
    .home-collections, .home-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .home-features { gap:1rem; }
    .feature-card { padding:1.15rem; }
}
@media (max-width:767.98px) {
    .hero .container, .spotlight .container, .features-strip .container, .how-it-works .container, .cta-banner .container { padding-inline:24px; }
    .hero { padding:1.5rem 0 2rem; }
    .hero-content > .row { --bs-gutter-y:1.5rem; }
    .hero .intro-label { font-size:.75rem; letter-spacing:.03em; line-height:1.5; margin-bottom:1rem; }
    .hero .intro-label::before { display:none; }
    .hero-title { font-size:clamp(2.45rem,10vw,3.5rem); max-width:11ch; margin-bottom:1rem; }
    .hero-subtitle { font-size:.95rem; line-height:1.65; margin-bottom:1.5rem; }
    .hero-ctas, .home-cta-actions { flex-direction:column; gap:.65rem; }
    .btn-hero-primary, .btn-hero-secondary { width:100%; padding:.8rem 1rem; font-size:.95rem; }
    .hero-catalog-heading h2 { font-size:1rem; }
    .hero-catalog { border-radius:14px; }
    .hero-product-media { aspect-ratio:16/9; }
    .hero-product-media:has(.hero-photo-placeholder:not([hidden])) { height:152px; }
    .hero-window-illustration { width:110px; }
    .hero-product-details { padding:1rem 1.1rem .6rem; }
    .hero-product-details h3 { font-size:1.15rem; }
    .hero-carousel-navigation { padding:.5rem 1.1rem; }
    .hero-carousel-buttons { order:-1; }
    .hero-carousel-count { margin-right:3rem; }
    .spotlight, .features-strip, .how-it-works { padding:3rem 0; }
    .home-section-heading { margin-bottom:1.5rem; }
    .home-section-heading--split { align-items:flex-start; flex-direction:column; gap:.6rem; }
    .section-eyebrow { font-size:.7rem; letter-spacing:.08em; }
    .section-title { font-size:1.75rem; text-wrap:pretty; }
    .section-sub { font-size:.95rem; }
    .home-collections { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:88%; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.75rem; scrollbar-width:thin; scrollbar-color:#737373 var(--home-soft); }
    .home-collections:has(> :only-child) { grid-auto-columns:100%; }
    .spotlight-card { scroll-snap-align:start; }
    .collection-empty { grid-column:auto; }
    .collection-swipe-hint { display:flex; gap:.5rem; align-items:center; color:var(--home-muted); font-size:.8rem; margin:0 0 .75rem; }
    .spotlight-img { height:170px; }
    .spotlight-img--placeholder { height:116px; }
    .spotlight-body { padding:1.1rem; }
    .spotlight-footer { padding:0 1.1rem 1.1rem; }
    .home-features { grid-template-columns:1fr; gap:.85rem; }
    .feature-card { display:grid; grid-template-columns:44px minmax(0,1fr); gap:.25rem .85rem; padding:1.1rem; }
    .feature-icon { grid-row:span 2; margin:0; }
    .feature-card h3 { margin:0; }
    .feature-card p { grid-column:2; font-size:.9rem; }
    .home-steps { grid-template-columns:1fr; gap:0; }
    .step-card { display:grid; grid-template-columns:40px minmax(0,1fr); gap:1rem; border:0; padding:0 0 1.5rem; position:relative; }
    .step-card:not(:last-child)::after { content:''; position:absolute; width:2px; background:var(--home-line); left:19px; top:48px; bottom:8px; }
    .step-card:last-child { padding-bottom:0; }
    .step-number { margin:0; }
    .step-card h3 { margin-bottom:.25rem; }
    .step-card p { font-size:.9rem; }
    .cta-banner { padding:3rem 0; }
    .home-cta-content { text-align:left; }
    .cta-banner .section-eyebrow { justify-content:flex-start; }
    .home-cta-content > p { margin:1rem 0 1.5rem; font-size:.95rem; }
}

/* Let the shared glass surface remain visible through empty media areas. */
html[data-theme-scope="customer"][data-color-mode="dark"] :is(.hero-catalog, .spotlight-card, .feature-card) {
    border-radius: 24px;
}
html[data-theme-scope="customer"][data-color-mode="dark"] :is(
    .hero-product-media, .hero-photo-placeholder, .spotlight-img--placeholder
) {
    background: transparent;
}
/* Local light behind the glass, leaving the surrounding page canvas untouched. */
body:has(.hero) { --home-glass-light: rgba(255, 215, 0, .08); }
html[data-color-mode="dark"] body:has(.hero) { --home-glass-light: rgba(207, 168, 69, .075); }
.home-collections, .home-features {
    background: radial-gradient(ellipse closest-side at 50% 50%, var(--home-glass-light) 0%, transparent 100%);
}
.hero-visual::before {
    background: radial-gradient(ellipse closest-side at 50% 45%, var(--home-glass-light) 0%, transparent 100%);
}