/*
 * hookedonfacets.com — /demo/ redesign (Claude Design "redesign 2" handoff,
 * July 2026). Token source: design/demo/colors.css + typography.css.
 * All demo chrome is .d-* (parallel to the landing's .l-*); the .hof-facet-*
 * rules restyle the plugin's real components inside the demo card only
 * (everything is scoped under .d-page).
 * Fonts: self-hosted Geist variable, same faces as the handoff's import.
 */

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'Geist Mono';
    src: url('../fonts/GeistMono-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --hof-color-hook-purple: #534AB7;
    --hof-color-facet-coral: #D85A30;
    --hof-color-deep-ink: #2C2C2A;
    --hof-color-warm-cream: #F1EFE8;
    --hof-color-purple-50:  #EEEDFE;
    --hof-color-purple-200: #CECBF6;
    --hof-color-purple-400: #7F77DD;
    --hof-color-purple-700: #3C3489;
    --hof-color-ink-900: #1A1A19;
    --hof-color-ink-700: #5F5E5A;
    --hof-color-ink-500: #888780;
    --hof-color-ink-300: #B4B2A9;
    --hof-color-ink-200: #D3D1C7;
    --hof-color-ink-100: #E6E3D9;
    --hof-color-ink-50:  #F8F6EE;
    --d-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --d-mono: 'Geist Mono', 'SF Mono', Menlo, Consolas, monospace;
    --d-pop-shadow: 0 16px 40px -16px rgba(44, 44, 42, 0.3);
}

/* ---------- base ---------- */
.d-page {
    margin: 0;
    background: var(--hof-color-warm-cream);
    font-family: var(--d-sans);
    color: var(--hof-color-deep-ink);
    font-feature-settings: 'ss01', 'cv11';
    font-size: 15px;
    line-height: 1.55;
}
.d-page a { color: var(--hof-color-hook-purple); }
.d-page a:hover { color: var(--hof-color-purple-700); }
.d-page input,
.d-page select,
.d-page button { font-family: var(--d-sans); }

.d-sr {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); border: 0;
}

.d-hp { position: absolute; left: -9999px; }

/* ---------- nav (mirrors the landing's) ---------- */
.d-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 48px; background: #fff;
    border-bottom: 1px solid var(--hof-color-ink-100);
}
.d-nav-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.d-nav-brand:hover { color: inherit; }
.d-nav-logo { width: 48px; height: 48px; display: block; }
.d-nav-name { display: block; font: 600 20px var(--d-sans); letter-spacing: -0.02em; line-height: 1; }
.d-nav-tag { display: block; font: 500 11px var(--d-mono); color: var(--hof-color-ink-500); margin-top: 3px; }
.d-nav-links { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; color: var(--hof-color-ink-700); }
.d-nav-links a { color: inherit; text-decoration: none; }
.d-nav-links a:hover,
.d-nav-links a[aria-current="page"] { color: var(--hof-color-deep-ink); }
.d-nav-links a[aria-current="page"] { font-weight: 600; }

/* ---------- buttons ---------- */
.d-btn { display: inline-block; border: 0; cursor: pointer; text-decoration: none; text-align: center; }
.d-btn-primary { background: var(--hof-color-hook-purple); color: #fff !important; padding: 11px 22px; border-radius: 8px; font-weight: 600; font-size: 15px; }
.d-btn-primary:hover { background: var(--hof-color-purple-700); }
.d-btn-coral { background: var(--hof-color-facet-coral); color: #fff !important; padding: 14px 26px; border-radius: 10px; font-weight: 600; font-size: 15px; }
.d-btn-coral:hover { filter: brightness(0.92); }
.d-btn-outline { background: transparent; border: 1.5px solid var(--hof-color-ink-700); color: #fff !important; padding: 14px 28px; border-radius: 10px; font-weight: 600; font-size: 16px; }
.d-btn-outline:hover { border-color: var(--hof-color-ink-500); }
.d-btn-lg { padding: 14px 28px; border-radius: 10px; font-size: 16px; }

/* ---------- header + tabs ---------- */
.d-head { display: flex; flex-direction: column; gap: 16px; padding: 64px 48px 36px; max-width: 900px; }
.d-eyebrow {
    margin: 0;
    font: 500 13px var(--d-mono);
    color: var(--hof-color-facet-coral);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.d-head h1 {
    margin: 0;
    font: 500 56px/1.05 var(--d-sans);
    letter-spacing: -0.03em;
    text-wrap: balance;
}
.d-sub { margin: 0; font-size: 19px; line-height: 1.6; color: var(--hof-color-ink-700); text-wrap: pretty; }
.d-sub strong { font-weight: 600; color: var(--hof-color-deep-ink); }
.d-code {
    font-family: var(--d-mono); font-size: 16px;
    background: var(--hof-color-ink-50);
    border: 1px solid var(--hof-color-ink-100);
    border-radius: 6px; padding: 2px 7px;
}
.d-tabs { display: flex; gap: 8px; margin-top: 4px; }
.d-tab {
    padding: 9px 15px; border-radius: 999px;
    font-weight: 600; font-size: 14px; text-decoration: none;
    background: #fff; border: 1.5px solid var(--hof-color-ink-200);
    color: var(--hof-color-ink-700) !important;
}
.d-tab:hover { filter: brightness(0.95); }
.d-tab.is-active { background: var(--hof-color-deep-ink); border-color: var(--hof-color-deep-ink); color: #fff !important; }

/* ---------- demo card ---------- */
.d-card-gutter { padding: 0 48px; }
.d-card {
    background: #fff;
    border: 1px solid var(--hof-color-ink-200);
    border-radius: 20px;
    box-shadow: 0 20px 60px -30px rgba(44, 44, 42, 0.18);
}

/* ---- ask + visual dna row ---- */
.d-askrow { padding: 22px 24px; border-bottom: 1px solid var(--hof-color-ink-100); }
.d-askrow-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.d-askcol, .d-dnacol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.d-slot-label {
    margin: 0;
    font: 500 11px var(--d-mono);
    color: var(--hof-color-ink-500);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* The plugin's Ask facet, dressed per the handoff ask bar. */
.d-page .hof-facet-ask > .hof-facet-label { display: none; }
.d-page .hof-ask-form {
    display: flex; align-items: center; gap: 10px;
    border: 2px solid var(--hof-color-deep-ink);
    border-radius: 12px; padding: 8px 8px 8px 16px;
    background: #fff;
}
.d-page .hof-ask-icon {
    width: 14px; height: 14px; flex: none;
    background: var(--hof-color-hook-purple);
    transform: rotate(45deg); border-radius: 3px;
    font-size: 0; line-height: 0; color: transparent;
}
.d-page .hof-ask-input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font-size: 15px; color: var(--hof-color-deep-ink);
}
.d-page .hof-ask-submit {
    flex: none; border: 0; cursor: pointer;
    background: var(--hof-color-facet-coral); color: #fff;
    font-weight: 600; font-size: 14px; padding: 9px 18px; border-radius: 8px;
}
.d-page .hof-ask-submit:hover { filter: brightness(0.92); }
.d-page .hof-ask-submit span { display: none; }
.d-page .hof-ask-submit::after { content: 'Ask'; }
/* The active-filters bar is the chips surface — Ask's own echo would double it. */
.d-page .hof-ask-heard { display: none; }
.d-page .hof-ask-status { margin: 4px 0 0; font: 12px var(--d-mono); color: var(--hof-color-ink-500); }

/* ---- active filter chips ---- */
.d-chips { min-height: 28px; }
.d-page .hof-active-filters-count { display: none; }
.d-page .hof-active-filters-eyebrow { display: none; }
.d-page .hof-active-filters-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.d-page .hof-active-filters-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--hof-color-purple-50);
    color: var(--hof-color-purple-700);
    border: 1px solid var(--hof-color-purple-200);
    padding: 5px 12px; border-radius: 99px;
    font-weight: 600; font-size: 12.5px; cursor: pointer;
}
.d-page .hof-active-filters-chip:hover { border-color: var(--hof-color-purple-400); }
/* Drop the "facet:" prefix, keep the value — the classic font-size-0 trick. */
.d-page .hof-active-filters-chip-label { font-size: 0; }
.d-page .hof-active-filters-chip-label strong { font-size: 12.5px; font-weight: 600; }
.d-page .hof-active-filters-chip-x { color: var(--hof-color-ink-500); font-size: 12.5px; }
.d-page .hof-active-filters-clear {
    border: 0; background: none; cursor: pointer; padding: 0;
    color: var(--hof-color-hook-purple); font-weight: 600; font-size: 13px;
}
.d-page .hof-active-filters-clear:hover { color: var(--hof-color-purple-700); }
.d-hint { margin: 0; font: 12px var(--d-mono); color: var(--hof-color-ink-300); }
.d-chips [data-hof-active-filters]:not([hidden]) ~ .d-hint { display: none; }

/* ---- visual dna box ---- */
.d-page .hof-facet-visual-dna { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.d-page .hof-facet-visual-dna > .hof-facet-label { display: none; }
.d-page .hof-visual-dna-drop {
    display: flex; align-items: center; gap: 10px;
    border: 1.5px dashed var(--hof-color-ink-200);
    border-radius: 12px; padding: 12px 16px;
    cursor: pointer; flex: 1;
    font-size: 13px; line-height: 1.45; color: var(--hof-color-ink-700);
}
.d-page .hof-visual-dna-drop:hover,
.d-page .hof-visual-dna-drop:focus-visible { border-color: var(--hof-color-purple-400); outline: none; }
.d-page .hof-visual-dna-drop-icon { color: var(--hof-color-hook-purple); }
.d-page .hof-visual-dna-actions { display: flex; gap: 8px; align-items: center; }
.d-page .hof-visual-dna-url {
    flex: 1; min-width: 0;
    border: 1.5px solid var(--hof-color-ink-200); border-radius: 8px;
    padding: 7px 10px; font-size: 12.5px; outline: none; background: #fff;
    color: var(--hof-color-deep-ink);
}
.d-page .hof-visual-dna-url:focus { border-color: var(--hof-color-hook-purple); }
.d-page .hof-visual-dna-eyedrop {
    flex: none; border: 1.5px solid var(--hof-color-ink-200); background: #fff;
    border-radius: 999px; padding: 6px 12px; cursor: pointer;
    font-weight: 600; font-size: 12.5px; color: var(--hof-color-ink-700);
}
.d-page .hof-visual-dna-eyedrop:hover { border-color: var(--hof-color-ink-300); }
.d-page .hof-visual-dna-result { font-size: 12.5px; }
.d-page .hof-visual-dna-result-row { display: flex; align-items: center; gap: 10px; }
.d-page .hof-visual-dna-swatch {
    width: 22px; height: 22px; border-radius: 99px; flex: none;
    border: 1px solid rgba(44, 44, 42, 0.15);
}
.d-page .hof-visual-dna-hex { font-family: var(--d-mono); color: var(--hof-color-ink-500); }
.d-page .hof-visual-dna-match { font-weight: 600; color: var(--hof-color-purple-700); }
.d-page .hof-visual-dna-clear {
    margin-left: auto; border: 0; background: none; cursor: pointer;
    color: var(--hof-color-hook-purple); font-weight: 600; font-size: 12.5px;
}
.d-page .hof-visual-dna-palette { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.d-page .hof-visual-dna-palette > * { width: 22px; height: 22px; border-radius: 99px; cursor: pointer; border: 1px solid rgba(44, 44, 42, 0.15); }

/* ---------- chip toolbar ---------- */
.d-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 16px 24px; border-bottom: 1px solid var(--hof-color-ink-100);
}
.d-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.d-meta { margin: 0; font: 500 13px var(--d-mono); color: var(--hof-color-ink-500); white-space: nowrap; }

.d-chip-wrap { position: relative; }
.d-chip {
    padding: 9px 15px; border-radius: 999px;
    font-weight: 600; font-size: 14px; cursor: pointer; user-select: none;
    background: #fff; border: 1.5px solid var(--hof-color-ink-200);
    color: var(--hof-color-ink-700);
}
.d-chip:hover { filter: brightness(0.95); }
.d-chip.is-active {
    background: var(--hof-color-deep-ink);
    border-color: var(--hof-color-deep-ink);
    color: #fff;
}
.d-chip-caret { font-size: 11px; }

.d-pop {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
    width: 230px; max-height: 340px; overflow-y: auto;
    background: #fff; border: 1px solid var(--hof-color-ink-200);
    border-radius: 12px; box-shadow: var(--d-pop-shadow);
    padding: 8px;
}
.d-pop-right { left: auto; right: 0; width: 200px; }

/* ---- the plugin's facets, restyled as menu rows inside a popover ---- */
.d-pop .hof-facet-label,
.d-pop .hof-facet-fieldset legend { display: none; }
.d-pop .hof-facet-fieldset { border: 0; margin: 0; padding: 0; }
.d-pop .hof-facet-options,
.d-pop .hof-facet-swatches,
.d-pop .hof-hierarchy-tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.d-pop .hof-facet-option label,
.d-pop .d-radio-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.d-pop .hof-facet-option label:hover,
.d-pop .d-radio-row:hover { background: var(--hof-color-ink-50); }
.d-pop .hof-facet-name,
.d-pop .d-radio-label { flex: 1; font-size: 14.5px; color: var(--hof-color-deep-ink); }
.d-pop .hof-facet-count { font: 500 12px var(--d-mono); color: var(--hof-color-ink-500); }
.d-pop .hof-facet-empty { margin: 0; padding: 9px 10px; font: 12px var(--d-mono); color: var(--hof-color-ink-300); }

/* custom checkbox square */
.d-pop .hof-facet-option input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px; margin: 0; flex: none;
    border: 1.5px solid var(--hof-color-ink-200); border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; cursor: pointer;
}
.d-pop .hof-facet-option input[type="checkbox"]:checked {
    background: var(--hof-color-hook-purple);
    border-color: var(--hof-color-hook-purple);
}
.d-pop .hof-facet-option input[type="checkbox"]:checked::after {
    content: '✓'; color: #fff; font-size: 12px; line-height: 1;
}

/* custom radio dot (plugin radio facets + the site sort rows) */
.d-pop .hof-facet-option input[type="radio"] {
    appearance: none; -webkit-appearance: none;
    width: 16px; height: 16px; margin: 0; flex: none;
    border: 1.5px solid var(--hof-color-ink-200); border-radius: 99px;
    background: #fff; cursor: pointer;
}
.d-pop .hof-facet-option input[type="radio"]:checked { border: 5px solid var(--hof-color-hook-purple); }
.d-radio-row input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.d-radio-dot {
    width: 16px; height: 16px; flex: none; border-radius: 99px;
    border: 1.5px solid var(--hof-color-ink-200); background: #fff;
}
.d-radio-row input[type="radio"]:checked ~ .d-radio-dot { border: 5px solid var(--hof-color-hook-purple); }

/* swatch facet → rows with a color dot */
.d-pop .hof-facet-swatch-item { display: block; }
.d-pop .hof-facet-swatch-tile {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.d-pop .hof-facet-swatch-tile:hover { background: var(--hof-color-ink-50); }
.d-pop .hof-facet-swatch-tile[data-hof-selected] { background: var(--hof-color-purple-50); }
.d-pop .hof-facet-swatch-tile[data-hof-selected] .hof-facet-swatch-name { color: var(--hof-color-purple-700); font-weight: 600; }
.d-pop .hof-facet-swatch-visual {
    width: 15px; height: 15px; flex: none; border-radius: 99px;
    background-color: var(--hof-swatch-color, var(--hof-color-ink-100));
    background-image: var(--hof-swatch-image, none);
    background-size: cover;
    border: 1px solid rgba(44, 44, 42, 0.15);
    display: inline-flex; align-items: center; justify-content: center;
}
.d-pop .hof-facet-swatch-initial { font: 600 9px var(--d-mono); color: var(--hof-color-ink-500); }
.d-pop .hof-facet-swatch-text { display: flex; align-items: center; gap: 10px; flex: 1; }
.d-pop .hof-facet-swatch-name { flex: 1; font-size: 14.5px; }

/* range facet inside a popover (under the presets) */
.d-pop .hof-facet-range { padding: 4px 10px 6px; }
.d-pop .hof-facet-range-inputs { display: flex; align-items: center; gap: 6px; }
.d-pop .hof-facet-range-inputs input {
    width: 70px; min-width: 0;
    border: 1.5px solid var(--hof-color-ink-200); border-radius: 8px;
    padding: 6px 8px; font: 500 13px var(--d-mono); outline: none;
    color: var(--hof-color-deep-ink); background: #fff;
}
.d-pop .hof-facet-range-inputs input:focus { border-color: var(--hof-color-hook-purple); }
.d-pop .hof-facet-range-sep { color: var(--hof-color-ink-300); }
.d-pop .hof-facet-range-bounds { margin: 4px 0 0; font: 11px var(--d-mono); color: var(--hof-color-ink-300); }

/* preset quick-pick rows */
.d-presets { display: flex; flex-direction: column; border-bottom: 1px solid var(--hof-color-ink-100); margin-bottom: 6px; padding-bottom: 6px; }
.d-preset {
    border: 0; background: none; text-align: left; cursor: pointer;
    padding: 9px 10px; border-radius: 8px; font-size: 14.5px;
    color: var(--hof-color-deep-ink);
}
.d-preset:hover { background: var(--hof-color-ink-50); }
.d-preset.is-active { background: var(--hof-color-purple-50); color: var(--hof-color-purple-700); font-weight: 600; }

/* the stock toggle chip hides the plugin's toggle entirely */
.d-toggle-holder { display: none; }

/* ---------- results grids ---------- */
.d-results { padding: 24px; }
.d-results[data-hof-loading] { opacity: 0.55; transition: opacity 0.15s ease; }
.d-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.d-grid-store { grid-template-columns: repeat(4, 1fr); }
.d-grid-listings { grid-template-columns: repeat(3, 1fr); }

/* product card */
.d-pcard { border: 1px solid var(--hof-color-ink-100); border-radius: 14px; overflow: hidden; background: #fff; }
.d-pcard.is-soldout { opacity: 0.55; }
.d-thumb {
    position: relative; height: 150px;
    display: flex; align-items: center; justify-content: center;
    background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 45%, rgba(26, 26, 25, 0.18));
}
.d-thumb-label {
    font: 500 10.5px var(--d-mono);
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}
.d-thumb.is-light .d-thumb-label { color: rgba(44, 44, 42, 0.55); }
.d-badge {
    position: absolute; top: 10px; left: 10px;
    font: 600 11px var(--d-mono); letter-spacing: 0.05em; text-transform: uppercase;
    color: #fff; padding: 4px 9px; border-radius: 99px;
    box-shadow: 0 1px 4px rgba(26, 26, 25, 0.2);
}
.d-badge-coral, .d-badge-price-cut { background: var(--hof-color-facet-coral); }
.d-badge-ink, .d-badge-open-sat { background: var(--hof-color-deep-ink); }
.d-badge-new { background: var(--hof-color-hook-purple); }
.d-pcard-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; }
.d-pcard-title { margin: 0; font: 500 16px var(--d-sans); letter-spacing: -0.01em; }
.d-pcard-meta { margin: 0; font: 500 12px var(--d-mono); color: var(--hof-color-ink-500); }
.d-pcard-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.d-price { margin: 0; display: flex; align-items: baseline; gap: 7px; }
.d-price-was { font: 500 13px var(--d-mono); color: var(--hof-color-ink-300); }
.d-price-now { font: 500 15px var(--d-mono); color: var(--hof-color-deep-ink); }
.d-price-now.is-sale { color: var(--hof-color-facet-coral); }
.d-pcard-btn {
    font-weight: 600; font-size: 13px; padding: 7px 13px; border-radius: 8px;
    border: 1.5px solid var(--hof-color-purple-200);
    color: var(--hof-color-hook-purple) !important;
    text-decoration: none; white-space: nowrap;
}
.d-pcard-btn:hover { border-color: var(--hof-color-purple-400); }
.d-pcard-btn.is-muted { border-color: var(--hof-color-ink-200); color: var(--hof-color-ink-500) !important; }

/* listing card */
.d-lcard { border: 1px solid var(--hof-color-ink-100); border-radius: 14px; overflow: hidden; background: #fff; }
.d-lphoto {
    position: relative; height: 160px;
    display: flex; align-items: center; justify-content: center;
    background: repeating-linear-gradient(45deg, var(--hof-color-ink-100) 0 10px, var(--hof-color-ink-50) 10px 20px);
}
.d-lphoto-label { font: 12px var(--d-mono); color: var(--hof-color-ink-500); }
.d-lcard-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.d-lprice { margin: 0; font: 500 19px var(--d-mono); letter-spacing: -0.01em; }
.d-laddress { margin: 0; font: 500 15.5px var(--d-sans); }
.d-lmeta { margin: 0; font: 500 12px var(--d-mono); color: var(--hof-color-hook-purple); }
.d-ltags { margin: 0; font-size: 13px; color: var(--hof-color-ink-500); }

/* empty state */
.d-empty {
    border: 1px dashed var(--hof-color-ink-200); border-radius: 14px;
    padding: 48px; text-align: center; font-size: 15px; color: var(--hof-color-ink-500);
}
.d-empty-clear {
    border: 0; background: none; cursor: pointer; padding: 0;
    color: var(--hof-color-hook-purple); font-weight: 600; font-size: 15px;
}
.d-empty-clear:hover { color: var(--hof-color-purple-700); }

/* ---------- CTA band ---------- */
.d-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
    margin: 56px 48px 0;
    background: var(--hof-color-deep-ink); border-radius: 20px; padding: 44px 56px;
}
.d-cta-title { margin: 0 0 6px; font: 500 30px var(--d-sans); color: #fff; letter-spacing: -0.02em; }
.d-cta-sub { margin: 0; font-size: 16px; color: var(--hof-color-ink-300); }
.d-cta-actions { display: flex; gap: 12px; flex: none; }

/* ---------- beta ---------- */
.d-beta {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 80px 48px; text-align: center;
}
.d-beta-title { margin: 0; font: 500 40px var(--d-sans); letter-spacing: -0.025em; }
.d-beta-sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--hof-color-ink-700); max-width: 560px; text-wrap: pretty; }
.d-beta-sub strong { font-weight: 600; color: var(--hof-color-deep-ink); }
.d-note { margin: 0; font: 500 13px var(--d-mono); color: var(--hof-color-purple-700); }
.d-note-err { color: var(--hof-color-facet-coral); }
.d-beta-form { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.d-beta-form input[type="email"] {
    width: 280px;
    border: 1.5px solid var(--hof-color-ink-200); border-radius: 10px;
    padding: 14px 18px; font-size: 15px; outline: none; background: #fff;
    color: var(--hof-color-deep-ink);
}
.d-beta-form input[type="email"]:focus { border-color: var(--hof-color-hook-purple); }
.d-beta-form select {
    border: 1.5px solid var(--hof-color-ink-200); border-radius: 10px;
    padding: 14px; font-size: 15px; background: #fff; color: var(--hof-color-ink-700); outline: none;
}

/* ---------- footer ---------- */
.d-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 48px; margin-top: 8px;
    border-top: 1px solid var(--hof-color-ink-100);
    font-size: 13.5px; color: var(--hof-color-ink-500);
}
.d-foot-copy { font-family: var(--d-mono); text-transform: uppercase; font-size: 12px; }
.d-foot-links { display: flex; gap: 24px; }
.d-foot-links a { color: inherit; text-decoration: none; }
.d-foot-links a:hover { color: var(--hof-color-deep-ink); }

/* ---------- responsive (below the prototype's 1180px floor) ---------- */
@media (max-width: 1024px) {
    .d-head { padding: 48px 32px 28px; }
    .d-head h1 { font-size: 42px; }
    .d-card-gutter { padding: 0 32px; }
    .d-askrow-split { grid-template-columns: 1fr; }
    .d-grid-store { grid-template-columns: repeat(3, 1fr); }
    .d-grid-listings { grid-template-columns: repeat(2, 1fr); }
    .d-cta { margin: 48px 32px 0; flex-direction: column; align-items: flex-start; padding: 36px; }
    .d-nav { padding: 16px 24px; }
    .d-nav-links { gap: 18px; }
}
@media (max-width: 720px) {
    .d-nav-links a:not(.d-btn) { display: none; }
    .d-head { padding: 36px 20px 24px; }
    .d-head h1 { font-size: 32px; }
    .d-sub { font-size: 16px; }
    .d-card-gutter { padding: 0 16px; }
    .d-askrow { padding: 16px; }
    .d-toolbar { padding: 12px 16px; }
    .d-toolbar-right { margin-left: 0; width: 100%; justify-content: space-between; }
    .d-results { padding: 16px; }
    .d-grid-store, .d-grid-listings { grid-template-columns: 1fr 1fr; }
    .d-cta { margin: 40px 16px 0; padding: 28px 24px; }
    .d-cta-actions { flex-wrap: wrap; }
    .d-beta { padding: 56px 20px; }
    .d-beta-form { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
    .d-beta-form input[type="email"] { width: 100%; box-sizing: border-box; }
    .d-foot { flex-direction: column; gap: 12px; padding: 20px 16px; }
}
@media (max-width: 520px) {
    .d-grid-store, .d-grid-listings { grid-template-columns: 1fr; }
}