/* ====================================================================
   Bukanako Directory · Editorial / Quarterly aesthetic
   "Find someone who can help. Today."
   --------------------------------------------------------------------
   Magazine-cover composition with oversized typography, ticker marquee,
   tracked-out small caps, dotted-grid backdrop, dashed dividers.
   ==================================================================== */

:root {
    --bg: #fefcf6;
    --surface: #ffffff;
    --surface-raised: #faf6ec;
    --text: #1a1a1a;
    --text-2: #3a3a3a;
    --text-3: #6b6b6b;
    --border: #e6e1d3;
    --border-strong: #1a1a1a;
    --accent: #facc15;
    --accent-soft: #fff5cc;
    --accent-on: #1a1a1a;
    --danger: #c0392b;
    --success: #1f7a4d;
    --grid-dot: rgba(26, 26, 26, 0.08);
    --shadow: 0 1px 0 rgba(26, 26, 26, 0.04), 0 8px 24px -16px rgba(26, 26, 26, 0.18);
    --serif: 'Outfit', 'Times New Roman', serif;
    --display: 'Outfit', sans-serif;
    --body: 'Instrument Sans', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* Dark — applied automatically when the OS prefers dark, unless the user has
   explicitly selected the light theme via the masthead toggle. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0e0e0c;
        --surface: #14140f;
        --surface-raised: #1c1c16;
        --text: #f4f1e6;
        --text-2: #c9c5b4;
        --text-3: #918d7c;
        --border: #2a2820;
        --border-strong: #f4f1e6;
        --accent: #facc15;
        --accent-soft: rgba(250, 204, 21, 0.16);
        --accent-on: #0e0e0c;
        --grid-dot: rgba(244, 241, 230, 0.06);
        --shadow: 0 1px 0 rgba(244, 241, 230, 0.04), 0 12px 28px -16px rgba(0, 0, 0, 0.6);
    }
}

/* Manual override — wins over the OS preference. */
:root[data-theme="dark"] {
    --bg: #0e0e0c;
    --surface: #14140f;
    --surface-raised: #1c1c16;
    --text: #f4f1e6;
    --text-2: #c9c5b4;
    --text-3: #918d7c;
    --border: #2a2820;
    --border-strong: #f4f1e6;
    --accent: #facc15;
    --accent-soft: rgba(250, 204, 21, 0.16);
    --accent-on: #0e0e0c;
    --grid-dot: rgba(244, 241, 230, 0.06);
    --shadow: 0 1px 0 rgba(244, 241, 230, 0.04), 0 12px 28px -16px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }

/* smooth-scroll + reduced-motion globals live in bukanako-base.css */

html { margin: 0; padding: 0; }

/* Specificity bump (`body.dir` vs plain `body`) so these rules beat the
   asset-mapper-loaded app.css which paints body with its own --bk-* tokens. */
body.dir {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 0) 0 0 / 24px 24px,
        var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: inherit; text-decoration: none; }

/* Pre-animation hide pattern (only when JS is enabled and motion isn't reduced). */
body[data-js="1"] .anim-target,
body[data-js="1"] .anim-word > span {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    body[data-js="1"] .anim-target,
    body[data-js="1"] .anim-word > span {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================ Masthead ============================ */
.masthead {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.4rem clamp(1.25rem, 3vw, 3rem);
    border-bottom: 1px solid var(--border);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.brand-icon {
    width: 32px;
    height: 32px;
    display: block;
}

.brand-mark {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.005em;
}

.masthead-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-3);
    letter-spacing: 0.08em;
}

.issue { color: var(--text-2); font-weight: 500; }
.issue-sep { opacity: 0.4; }

.masthead-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Pin to the right edge of whichever grid column the actions land
       in. With a masthead-meta sibling the actions sit in the third
       (auto) column — fine. Without one (register / login pages) the
       actions land in the middle 1fr column and would otherwise hug
       the brand on the left. justify-self: end fixes both layouts. */
    justify-self: end;
}

.signin {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.005em;
    background: var(--text);
    color: var(--bg);
    border: 1px solid var(--text);
    transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s, gap 0.18s;
}

.signin:hover,
.signin:focus-visible {
    background: var(--accent);
    color: var(--accent-on);
    border-color: var(--accent);
    transform: translateX(2px);
    gap: 0.6rem;
    outline: none;
}

/* .theme-light-only / .theme-dark-only / .theme-toggle live in bukanako-base.css */

@media (max-width: 640px) {
    .masthead { grid-template-columns: auto auto; }
    .masthead-meta { display: none; }
    .signin { padding: 0.5rem 0.85rem; font-size: 0.78rem; }
}

/* ============================ Hero ============================ */
.hero {
    position: relative;
    padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.25rem, 3vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
    border-bottom: 1px dashed var(--border);
    overflow: hidden;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
}

.oversized-stamp {
    position: absolute;
    top: -0.25em;
    right: -0.05em;
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(5rem, 19vw, 14rem);
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--text);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1.4rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-2);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tick {
    display: inline-block;
    width: 22px;
    height: 2px;
    background: var(--accent);
}

.hero-line {
    margin: 0 0 1.8rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.5rem, 8.5vw, 6.5rem);
    line-height: 0.96;
    letter-spacing: -0.035em;
    color: var(--text);
    max-width: 14ch;
}

.hero-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: baseline;
    margin-right: 0.18em;
}

.hero-word > span {
    display: inline-block;
}

.mark {
    display: inline-block;
    background: linear-gradient(transparent 60%, var(--accent) 60%, var(--accent) 92%, transparent 92%);
    padding: 0 0.04em;
    font-style: italic;
}

.lede {
    max-width: 56ch;
    margin: 0 0 0;
    font-family: var(--body);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.55;
    color: var(--text-2);
}

.stats-strip {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    max-width: 1100px;
}

.stats-strip .stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.stat-num {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 1;
    letter-spacing: -0.02em;
}

.stat-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-3);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.stats-strip .rule {
    flex: 0 0 1px;
    height: 32px;
    background: var(--border);
}

@media (max-width: 540px) {
    .stats-strip .rule { display: none; }
    .stats-strip { gap: 1.5rem; flex-wrap: wrap; }
}

/* ---- Scroll cue ---- */
.scroll-cue {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 1rem 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-family: var(--display);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--text);
    transition: border-color 0.18s, color 0.18s, gap 0.18s, background 0.18s;
    /* Periodic "billboard" pulse — every ~6.5s the cue scales up briefly with
       a yellow halo, drawing the eye back to it without being constantly noisy. */
    animation: scroll-cue-attention 6.5s ease-in-out 2s infinite;
}

.scroll-cue:hover,
.scroll-cue:focus-visible {
    border-color: var(--border-strong);
    color: var(--text);
    gap: 1.05rem;
    outline: none;
    animation-play-state: paused;
}

.scroll-cue-track {
    position: relative;
    width: 1.5px;
    height: 26px;
    background: linear-gradient(to bottom, transparent, var(--border-strong), transparent);
    overflow: visible;
    flex-shrink: 0;
}

.scroll-cue-dot {
    position: absolute;
    left: -3px;
    top: -2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow:
        0 0 0 3px rgba(250, 204, 21, 0.16),
        0 0 14px rgba(250, 204, 21, 0.7);
    animation: scroll-cue-fall 1.7s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* Triple-dot trail — three dots stagger so the track always shows motion. */
.scroll-cue-dot:nth-child(2) { animation-delay: -0.55s; }
.scroll-cue-dot:nth-child(3) { animation-delay: -1.1s; }

.scroll-cue-label { white-space: nowrap; }

.scroll-cue-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--text);
    color: var(--bg);
    transition: background 0.18s, color 0.18s;
    animation: scroll-cue-dive 2s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

.scroll-cue:hover .scroll-cue-arrow,
.scroll-cue:focus-visible .scroll-cue-arrow,
.scroll-cue-rail:hover .scroll-cue-arrow,
.scroll-cue-rail:focus-visible .scroll-cue-arrow {
    background: var(--accent);
    color: var(--accent-on);
}

@keyframes scroll-cue-fall {
    0%   { top: -8px; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { top: calc(100% + 4px); opacity: 0; }
}

/* Arrow drops further than a gentle bob and snaps back — feels more urgent. */
@keyframes scroll-cue-dive {
    0%, 70%, 100% { transform: translateY(0); }
    30%           { transform: translateY(6px); }
    45%           { transform: translateY(-1px); }
    55%           { transform: translateY(0); }
}

/* Periodic billboard pulse — scale + yellow halo flash to recapture attention. */
@keyframes scroll-cue-attention {
    0%, 82%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(250, 204, 21, 0);
    }
    87% {
        transform: scale(1.04);
        box-shadow: 0 0 0 6px rgba(250, 204, 21, 0.22);
    }
    93% {
        transform: scale(1.02);
        box-shadow: 0 0 0 14px rgba(250, 204, 21, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-cue,
    .scroll-cue-rail,
    .scroll-cue-arrow,
    .scroll-cue-dot { animation: none !important; }
    .scroll-cue-dot { top: 40%; opacity: 0.85; }
    .scroll-cue-dot:nth-child(2),
    .scroll-cue-dot:nth-child(3) { display: none; }
}

/* ---- Vertical rail variant (≥768px) ---- */
.scroll-cue-rail {
    position: absolute;
    bottom: clamp(1.25rem, 3vh, 2.5rem);
    right: clamp(1.25rem, 3vw, 2.5rem);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-radius: 999px;
    z-index: 2;
    color: var(--text-2);
    text-decoration: none;
    transition: color 0.18s;
    /* Same periodic pulse as the horizontal pill so both variants
       behave identically across viewport sizes. */
    animation: scroll-cue-attention 6.5s ease-in-out 2s infinite;
}

.scroll-cue-rail:hover,
.scroll-cue-rail:focus-visible {
    color: var(--text);
    outline: none;
    animation-play-state: paused;
}

.scroll-cue-rail-label {
    font-family: var(--mono);
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-2);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 0.5rem 0;
    transition: color 0.18s;
}

.scroll-cue-rail:hover .scroll-cue-rail-label,
.scroll-cue-rail:focus-visible .scroll-cue-rail-label {
    color: var(--text);
}

.scroll-cue-rail .scroll-cue-track {
    width: 1px;
    height: clamp(70px, 9vh, 110px);
}

.scroll-cue-rail .scroll-cue-arrow {
    width: 32px;
    height: 32px;
}

/* On wide screens swap the cue: vertical rail on, horizontal pill off. */
@media (min-width: 768px) {
    .scroll-cue { display: none; }
    .scroll-cue-rail { display: inline-flex; }
}

@media (max-width: 540px) {
    .scroll-cue-label { display: none; }
    .scroll-cue { padding: 0.45rem 0.5rem 0.45rem 0.55rem; }
}

/* ============================ Marquee ============================ */
.marquee {
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    padding: 1rem 0;
    background: var(--surface-raised);
    -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 1.75rem;
    padding-left: 100%;
    animation: marquee 38s linear infinite;
    white-space: nowrap;
    will-change: transform;
}

.marquee-item {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    letter-spacing: 0.04em;
    color: var(--text);
}

.marquee-dot {
    color: var(--accent);
    font-size: 0.6rem;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; padding-left: 1.5rem; }
}

/* ============================ Browser ============================ */
.browser {
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 3vw, 3rem);
    flex: 1;
}

.dir-browser {
    max-width: 1280px;
    margin: 0 auto;
}

.browser-toolbar {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.search-shell {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.search-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-3);
}

.search-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.search-field:focus-within {
    border-color: var(--border-strong);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-icon {
    color: var(--text-3);
    flex-shrink: 0;
}

.search-field input {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: var(--body);
    font-size: 1.05rem;
    color: var(--text);
    outline: none;
    min-width: 0;
}

.search-field input::placeholder {
    color: var(--text-3);
    font-style: italic;
}

.search-clear {
    border: 0;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.search-clear:hover {
    color: var(--text);
    background: var(--surface-raised);
}

.cat-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cat-chip {
    position: relative;
    cursor: pointer;
    user-select: none;
}

.cat-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.cat-chip > span {
    display: inline-block;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-family: var(--display);
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.005em;
    color: var(--text-2);
    transition: all 0.18s ease;
}

.cat-chip:hover > span {
    border-color: var(--border-strong);
    color: var(--text);
}

.cat-chip.is-active > span {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

@media (prefers-color-scheme: dark) {
    .cat-chip.is-active > span {
        background: var(--accent);
        color: var(--accent-on);
        border-color: var(--accent);
    }
}

.cat-chip input:focus-visible + span {
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ============================ Result meta ============================ */
.result-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 1.5rem;
    padding: 0 0 1.25rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px dashed var(--border);
}

.result-meta-num {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.num-display {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(3.5rem, 8vw, 6rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.num-suffix {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--text-3);
    text-transform: uppercase;
}

.result-meta-text {
    font-family: var(--body);
    font-size: 0.95rem;
    color: var(--text-2);
    padding-bottom: 0.4rem;
}

.result-meta-text strong { color: var(--text); font-weight: 600; }

.reset-link {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--body);
    font-size: 0.95rem;
    color: var(--text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
}

.reset-link:hover { color: var(--accent-on); background: var(--accent); padding: 0 0.25rem; }

@media (max-width: 640px) {
    .result-meta { grid-template-columns: 1fr; gap: 0.85rem; }
}

/* ============================ Provider grid ============================ */
.provider-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    counter-reset: card;
}

@media (min-width: 720px) {
    .provider-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1080px) {
    .provider-grid { grid-template-columns: repeat(3, 1fr); }
}

.provider-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.provider-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.provider-link {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1.4rem;
    height: 100%;
    position: relative;
}

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px dashed var(--border);
}

.card-num {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--text-3);
    font-weight: 500;
}

.card-industry {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-2);
}

.card-name {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.35rem, 2.2vw, 1.65rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
}

.card-desc {
    margin: 0;
    font-size: 0.93rem;
    color: var(--text-2);
    line-height: 1.5;
}

.card-meta {
    margin: 0;
    padding: 0.85rem 0 0;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.meta-row {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 0.5rem;
    align-items: baseline;
}

.meta-row dt {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
}

.meta-row dd {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-2);
}

.stars {
    display: inline-flex;
    gap: 1px;
    margin-right: 0.4rem;
    font-size: 0.92rem;
}

.star { color: var(--border); }
.star.on { color: var(--accent); }

.rating-num {
    font-family: var(--mono);
    font-weight: 600;
    color: var(--text);
}

.rating-count {
    color: var(--text-3);
    font-size: 0.85rem;
}

.rating-empty {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
}

.card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.5rem;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text);
    transition: gap 0.2s ease;
}

.provider-card:hover .card-cta {
    gap: 0.7rem;
    color: var(--accent-on);
}

.card-rule {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.25s ease;
}

.provider-card:hover .card-rule {
    transform: scaleY(1);
    transform-origin: top;
}

/* ============================ Load-more / infinite scroll ============================ */
.load-more {
    margin-top: 2rem;
    padding: 1.5rem 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    border-top: 1px dashed var(--border);
    text-align: center;
}

.load-more-meta {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
}

.load-more-meta strong {
    color: var(--text);
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    margin: 0 0.1em;
}

.load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.5rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, transform 0.18s, gap 0.2s;
}

.load-more-btn:hover {
    background: var(--text);
    color: var(--bg);
    transform: translateY(-1px);
    gap: 0.85rem;
}

.load-more-sentinel {
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.load-more-end {
    color: var(--text-3);
}

.load-more-pip {
    color: var(--accent);
    font-size: 0.6rem;
    letter-spacing: 0.4em;
    display: inline-block;
}

/* During a LiveComponent re-render, dim the grid slightly. */
.dir-browser[busy] .provider-grid,
.dir-browser[busy] .load-more {
    opacity: 0.6;
    transition: opacity 0.15s;
}

/* ============================ Empty state ============================ */
.empty-state {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    border: 1px dashed var(--border);
    border-radius: 6px;
    background: var(--surface);
}

.empty-num {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(4rem, 12vw, 8rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--text);
    opacity: 0.12;
}

.empty-title {
    margin: 0 0 0.4rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.5vw, 1.75rem);
    color: var(--text);
}

.empty-lede {
    margin: 0 0 1.25rem;
    color: var(--text-2);
    font-size: 1rem;
    max-width: 50ch;
}

.empty-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    background: var(--text);
    color: var(--bg);
    border: 0;
    border-radius: 999px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.18s, transform 0.18s;
}

.empty-action:hover {
    background: var(--accent);
    color: var(--accent-on);
    transform: translateX(2px);
}

@media (max-width: 640px) {
    .empty-state { grid-template-columns: 1fr; gap: 1rem; }
}

/* ============================ Colophon ============================ */
.colophon {
    margin-top: 4rem;
    padding: 2rem clamp(1.25rem, 3vw, 3rem);
    border-top: 1px solid var(--border);
    background: var(--surface-raised);
    display: grid;
    gap: 0.85rem;
}

.colophon-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--text-3);
    text-transform: uppercase;
}

.colophon-logo {
    height: 20px;
    width: auto;
    display: block;
    opacity: 0.85;
}

.colophon-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.colophon-nav a {
    color: var(--text-2);
    transition: color 0.18s;
}

.colophon-nav a:hover { color: var(--text); }

.colophon-nav .sep { opacity: 0.4; }

.colophon-copyright { color: var(--text-2); }

.colophon-attribution {
    text-align: right;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--text-3);
}

.colophon-attribution a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
    padding-bottom: 1px;
    transition: color 0.18s, border-color 0.18s;
}

.colophon-attribution a:hover {
    color: var(--text);
    border-color: var(--text);
}

@media (max-width: 640px) {
    .colophon-attribution { text-align: left; }
}

/* ====================================================================
   Provider page · /provider/{slug}
   Editorial profile — name as cover headline, services as numbered
   register, reviews as set quotes, sticky CTA card on the right.
   ==================================================================== */

.provider-page main {
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 3rem) 0;
}

/* ---- Breadcrumbs ---- */
.crumbs {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
}

.crumbs a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem 0.35rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-2);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.crumbs a:hover {
    border-color: var(--border-strong);
    color: var(--text);
    background: var(--surface);
}

.crumb-sep { opacity: 0.5; }
.crumb-current { color: var(--text); letter-spacing: 0.08em; }

@media (max-width: 540px) {
    .crumb-current { display: none; }
}

/* ---- Provider hero ---- */
.provider-hero {
    position: relative;
    padding: 0 0 clamp(2rem, 4vw, 3rem);
    border-bottom: 1px dashed var(--border);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.provider-name-display {
    margin: 0 0 1.25rem;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2.25rem, 7vw, 4.75rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: var(--text);
    max-width: 18ch;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 0.6rem;
}

.verify-stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    vertical-align: middle;
    transform: translateY(-0.15em);
}

.verify-trusted {
    background: var(--accent);
    color: var(--accent-on);
    border-color: var(--accent);
}

.verify-verified {
    background: var(--surface);
    color: var(--text);
}

.provider-lede {
    margin: 0 0 1.5rem;
    max-width: 62ch;
    font-family: var(--body);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.6;
    color: var(--text-2);
}

.provider-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(1rem, 2.5vw, 2rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.provider-stats .stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.provider-stats .stat-num {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.stat-num-text {
    font-weight: 600;
    letter-spacing: -0.005em;
}

.provider-stats .stat-label {
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--text-3);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.provider-stats .rule {
    flex: 0 0 1px;
    align-self: stretch;
    height: auto;
    min-height: 28px;
    background: var(--border);
}

@media (max-width: 540px) {
    .provider-stats .rule { display: none; }
}

/* ---- Two-column layout ---- */
.provider-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-bottom: 4rem;
}

@media (min-width: 980px) {
    .provider-layout {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 3rem;
    }
}

.provider-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 3.5vw, 3rem);
}

/* ---- Status strip ---- */
.status-strip {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    position: relative;
    overflow: hidden;
}

.status-strip::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent);
}

.status-strip.is-clear::before { background: var(--success); }

.status-pip {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    margin-top: 0.4rem;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.18);
    animation: status-pulse 2.4s ease-out infinite;
}

.status-strip.is-clear .status-pip {
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(31, 122, 77, 0.18);
}

@keyframes status-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.35); }
    70%  { box-shadow: 0 0 0 10px rgba(250, 204, 21, 0); }
    100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .status-pip { animation: none; }
}

.status-text { display: flex; flex-direction: column; gap: 0.2rem; }

.status-headline {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
}

.status-sub {
    font-family: var(--body);
    font-size: 0.88rem;
    color: var(--text-2);
}

/* ---- Sections ---- */
.section { display: flex; flex-direction: column; gap: 1.25rem; }

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
}

.section-title {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    letter-spacing: -0.02em;
    color: var(--text);
}

.section-meta {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* ---- Service list (numbered register) ---- */
.service-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.service-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px dashed var(--border);
    transition: background 0.18s;
}

.service-row:last-child { border-bottom: 0; }

.service-row:hover {
    background: linear-gradient(to right, var(--surface-raised), transparent 70%);
}

.service-num {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--text-3);
    align-self: center;
}

.service-body { min-width: 0; }

.service-name {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text);
    line-height: 1.3;
}

.service-meta {
    margin-top: 0.2rem;
    font-family: var(--body);
    font-size: 0.88rem;
    color: var(--text-3);
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.service-meta .dot { opacity: 0.6; }

.service-desc { color: var(--text-2); }

.service-price {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    align-self: center;
    white-space: nowrap;
}

@media (max-width: 540px) {
    .service-row {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 0.6rem;
    }
    .service-price { grid-column: 2; margin-top: 0.35rem; }
}

/* ---- Reviews (set quotes) ---- */
.review-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.review {
    position: relative;
    padding: 1.4rem 1.5rem 1.4rem 1.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.review::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.4rem;
    bottom: 1.4rem;
    width: 3px;
    background: var(--accent);
}

.review-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.review-head .stars { font-size: 1rem; }

.review-date {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    color: var(--text-3);
}

.review-comment {
    margin: 0 0 0.5rem;
    padding: 0;
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.08rem;
    line-height: 1.55;
    color: var(--text);
    font-style: italic;
    position: relative;
}

.quote-glyph {
    font-family: var(--display);
    font-size: 1.4em;
    line-height: 0;
    color: var(--accent);
    margin-right: 0.15em;
    font-style: normal;
    vertical-align: -0.15em;
}

.review-reply {
    margin: 0.85rem 0 0;
    padding: 0.85rem 1rem;
    background: var(--surface-raised);
    border-radius: 4px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-2);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.reply-tag {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* ---- CTA aside ---- */
.provider-aside {
    min-width: 0;
}

@media (min-width: 980px) {
    .provider-aside {
        position: sticky;
        top: 1.5rem;
        align-self: start;
    }
}

.cta-card {
    padding: clamp(1.5rem, 2vw, 2rem);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.cta-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
    background: var(--accent);
    transform: translate(45%, -45%) rotate(45deg);
    pointer-events: none;
}

.cta-kicker {
    margin: 0 0 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--text-2);
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.cta-title {
    margin: 0 0 0.85rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 1.85rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text);
    position: relative;
    z-index: 1;
}

.cta-lede {
    margin: 0 0 1.4rem;
    font-size: 0.95rem;
    color: var(--text-2);
    line-height: 1.5;
    position: relative;
    z-index: 1;
}

.cta-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: relative;
    z-index: 1;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.95rem 1.15rem;
    border-radius: 4px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.98rem;
    transition: transform 0.18s, background 0.18s, color 0.18s, border-color 0.18s;
}

.cta-btn-primary {
    background: var(--text);
    color: var(--bg);
    border: 1px solid var(--text);
}

.cta-btn-primary:hover {
    background: var(--accent);
    color: var(--accent-on);
    border-color: var(--accent);
    transform: translateX(2px);
}

.cta-btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-strong);
}

.cta-btn-ghost:hover {
    background: var(--text);
    color: var(--bg);
    transform: translateX(2px);
}

.cta-fineprint {
    margin: 0.85rem 0 0;
    font-family: var(--body);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-3);
    position: relative;
    z-index: 1;
}
.cta-fineprint strong { color: var(--text); font-weight: 600; }

/* "Also on" channel row — secondary WhatsApp / Messenger entry points
   for logged-in customers. Always visible (no disclosure to hunt for),
   visually subordinate to the primary in-app CTAs above, and brand-tinted
   on hover so the channel reads at a glance. */
.cta-channels {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--border);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    position: relative;
    z-index: 1;
}

.cta-channels__label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-3);
}

.cta-channel {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-2);
    text-decoration: none;
    padding: 0.4rem 0.75rem 0.4rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    transition: color 0.18s, border-color 0.18s, background-color 0.18s, transform 0.18s;
}

.cta-channel svg { transition: color 0.18s; }
.cta-channel:hover { transform: translateY(-1px); }

/* Brand colors only on hover — at rest, channels are neutral so they
   don't compete with the primary CTA's yellow. */
.cta-channel--whatsapp:hover {
    color: #25D366;
    border-color: rgba(37, 211, 102, 0.35);
    background: rgba(37, 211, 102, 0.06);
}
.cta-channel--whatsapp:hover svg { color: #25D366; }

.cta-channel--messenger:hover {
    color: #0084FF;
    border-color: rgba(0, 132, 255, 0.35);
    background: rgba(0, 132, 255, 0.06);
}
.cta-channel--messenger:hover svg { color: #0084FF; }

@media (prefers-color-scheme: dark) {
    .cta-channel { background: var(--surface-raised, var(--surface)); }
    .cta-channel--whatsapp:hover { background: rgba(37, 211, 102, 0.1); }
    .cta-channel--messenger:hover { background: rgba(0, 132, 255, 0.1); }
}

.cta-divider {
    height: 1px;
    background: var(--border);
    margin: 1.4rem 0;
    background-image: repeating-linear-gradient(to right, var(--border) 0, var(--border) 4px, transparent 4px, transparent 8px);
    background-color: transparent;
    position: relative;
    z-index: 1;
}

.cta-meta {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: relative;
    z-index: 1;
}

.cta-meta-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 0.6rem;
    align-items: baseline;
}

.cta-meta-row dt {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
}

.cta-meta-row dd {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-2);
}

.cta-card .mark {
    background: linear-gradient(transparent 60%, var(--accent) 60%, var(--accent) 92%, transparent 92%);
    padding: 0 0.04em;
    font-style: italic;
}

/* ---- Closer / browse-more banner ---- */
.closer {
    margin: clamp(1.5rem, 3vw, 3rem) 0 0;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
    background:
        repeating-linear-gradient(135deg, transparent 0, transparent 12px, rgba(250, 204, 21, 0.04) 12px, rgba(250, 204, 21, 0.04) 13px),
        var(--surface-raised);
}

.closer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 800px) {
    .closer-grid {
        grid-template-columns: 1fr auto;
        gap: 3rem;
    }
}

.closer-text { max-width: 60ch; }

.closer-kicker {
    margin: 0 0 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-2);
}

.closer-title {
    margin: 0 0 0.6rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.85rem, 4vw, 2.85rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text);
}

.closer-title .mark {
    background: linear-gradient(transparent 60%, var(--accent) 60%, var(--accent) 92%, transparent 92%);
    padding: 0 0.05em;
    font-style: italic;
}

.closer-lede {
    margin: 0;
    font-family: var(--body);
    font-size: 1rem;
    color: var(--text-2);
    line-height: 1.55;
}

.closer-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.05rem 1.5rem;
    background: var(--text);
    color: var(--bg);
    border-radius: 4px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.005em;
    transition: background 0.2s, color 0.2s, transform 0.2s, gap 0.2s;
    white-space: nowrap;
    align-self: start;
    justify-self: start;
}

@media (min-width: 800px) {
    .closer-cta { align-self: center; justify-self: end; }
}

.closer-cta:hover {
    background: var(--accent);
    color: var(--accent-on);
    transform: translateX(2px);
    gap: 0.85rem;
}

.closer-cta-label { display: inline-block; }

/* ---- Tighter hero & layout ---- */
.provider-hero { padding-top: clamp(0.5rem, 1vw, 1rem); }

.provider-layout {
    padding-bottom: 0;
}

.provider-page main {
    padding-bottom: 0;
}

/* When the closer banner appears, drop colophon top margin since the closer
   already provides the strong divider. */
.provider-page .closer + footer.colophon {
    margin-top: 0;
}

/* ====================================================================
   /for-providers landing page
   --------------------------------------------------------------------
   Reuses .masthead / .hero / .closer / .colophon from the directory.
   Adds: a register CTA card with the Bukanako WhatsApp number, a
   numbered "what you get" register, and a stats strip variant.
   ==================================================================== */

body.for-providers main {
    max-width: 1280px;
    margin: 0 auto;
}

.for-providers-stats {
    margin-top: clamp(2rem, 4vw, 3rem);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(1rem, 2.5vw, 2.25rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    max-width: 900px;
}

.for-providers-stats .stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.for-providers-stats .stat-num {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text);
}

.for-providers-stats .stat-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
}

.for-providers-stats .rule {
    flex: 0 0 1px;
    align-self: stretch;
    min-height: 32px;
    background: var(--border);
}

@media (max-width: 540px) {
    .for-providers-stats .rule { display: none; }
}

/* ---- Register CTA card ---- */
.for-providers-cta {
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 3rem);
    border-bottom: 1px dashed var(--border);
}

.cta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: stretch;
    max-width: 1100px;
}

@media (min-width: 880px) {
    .cta-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 3rem;
        align-items: center;
    }
}

.cta-text { min-width: 0; }

.cta-headline {
    margin: 0 0 0.85rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.85rem, 4vw, 2.85rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text);
}

.cta-text .cta-kicker { margin: 0 0 1rem; }

.cta-text .cta-lede {
    margin: 0 0 1rem;
    color: var(--text-2);
    line-height: 1.6;
}

.cta-text .cta-lede strong {
    font-family: var(--mono);
    font-weight: 700;
    background: var(--accent-soft);
    color: var(--text);
    padding: 0.05em 0.4em;
    border-radius: 4px;
    letter-spacing: 0.04em;
}

.cta-text .cta-fineprint {
    margin: 1.5rem 0 0;
    font-size: 1.05rem;
    color: var(--text-2);
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
}

.inline-link {
    color: var(--text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--accent);
    transition: color 0.15s, text-decoration-color 0.15s;
}

.inline-link:hover {
    color: var(--accent-on);
    background: var(--accent);
    text-decoration: none;
    padding: 0 0.2em;
}

/* The big register destination — looks like a magazine ad block. */
.register-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--text);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.register-cta:hover,
.register-cta:focus-visible {
    transform: translateY(-2px);
    outline: none;
}

/* A single bold accent rule down the left edge — replaces the busy diagonal
   hatch + corner flag combo that competed with the WhatsApp number. */
.register-cta::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--accent);
    pointer-events: none;
    transform-origin: top;
    transition: transform 0.3s ease;
}

.register-cta:hover::before,
.register-cta:focus-visible::before {
    transform: scaleY(1.05);
}

.register-cta-pip {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.18);
    animation: register-pip 2s ease-in-out infinite;
}

@keyframes register-pip {
    0%, 100% { box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.18); }
    50% { box-shadow: 0 0 0 8px rgba(250, 204, 21, 0.05); }
}

.register-cta-line {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-2);
}

.register-cta-line strong {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--text);
    background: var(--accent);
    padding: 0.05em 0.45em;
    border-radius: 3px;
    letter-spacing: 0.08em;
}

.register-cta-number {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.85rem, 4vw, 2.6rem);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    margin: 0.4rem 0 1rem;
}

.register-cta-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--border);
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    transition: gap 0.18s, color 0.18s;
}

.register-cta:hover .register-cta-action,
.register-cta:focus-visible .register-cta-action {
    gap: 0.85rem;
    color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .register-cta-pip { animation: none; }
}

/* ---- Pillar register (numbered "what you get") ---- */
.for-providers-pillars {
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 3vw, 3rem);
    border-bottom: 1px dashed var(--border);
}

.pillar-list {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    counter-reset: pillar;
}

@media (min-width: 880px) {
    .pillar-list { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

/* Editorial chapter card — oversized numeral as the visual anchor at top,
   title and copy stack below it, a yellow rule animates in across the
   bottom on hover/focus. The yellow accent in the background follows the
   pointer for a touch of motion. */
.pillar {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.5rem, 2vw, 1.85rem) clamp(1.6rem, 2.5vw, 2.25rem);
    /* Grid rather than flex so the three rows (number, title, text) line
       up across cards even when titles wrap to a different number of
       lines. The 1fr row pushes copy down so the text starts at the same
       Y on every card and the bottom hover-rule lands consistently. */
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 0.4rem;
    overflow: hidden;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.pillar:hover {
    border-color: var(--border-strong);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

/* Yellow rule that draws across the bottom on hover. */
.pillar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.pillar:hover::after,
.pillar:focus-within::after {
    transform: scaleX(1);
}

/* Oversized chapter number — the visual anchor of the card. The "№" glyph
   is rendered via ::before so the markup can use clean "01" / "02" / "03". */
.pillar-num {
    display: inline-flex;
    align-items: baseline;
    gap: 0.1em;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(3.5rem, 6vw, 5rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    transition: color 0.25s ease;
}

.pillar-num::before {
    content: "№";
    font-weight: 500;
    font-size: 0.55em;
    color: var(--text-3);
    letter-spacing: 0;
    transform: translateY(-0.05em);
    transition: color 0.25s ease;
}

.pillar:hover .pillar-num::before {
    color: var(--accent);
}

.pillar-title {
    margin: 0.5rem 0 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text);
    padding-top: 0.85rem;
    border-top: 1px dashed var(--border);
    /* Reserve space for two title lines so the dashed border under the
       number lines up across all three cards even when one title wraps
       and another doesn't. ~2 × line-height (1.15) + the padding-top. */
    min-height: calc(2 * 1.15em + 0.85rem);
}

.pillar-text {
    margin: 0.4rem 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-2);
}

.pillar-text strong {
    font-family: var(--mono);
    font-weight: 600;
    background: var(--accent-soft);
    color: var(--text);
    padding: 0.05em 0.35em;
    border-radius: 3px;
    letter-spacing: 0.02em;
}

.for-providers-pillars .section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
}

.for-providers-pillars .section-title {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    letter-spacing: -0.02em;
    color: var(--text);
}

.for-providers-pillars .section-meta {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* ---- For-providers masthead actions: distinct CTA from "Sign in" pill ---- */
.masthead-actions { display: inline-flex; align-items: center; gap: 0.6rem; }

.masthead-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text);
    letter-spacing: 0.005em;
    padding: 0.55rem 0.7rem;
    border-radius: 4px;
    text-decoration: none;
    transition: color 0.18s, gap 0.18s, background 0.18s;
}

.masthead-cta:hover,
.masthead-cta:focus-visible {
    color: var(--accent-on);
    background: var(--accent);
    gap: 0.7rem;
    outline: none;
}

@media (max-width: 720px) {
    .masthead-cta-label { display: none; }
    .masthead-cta { padding: 0.5rem; }
}

/* ── Hero "Register your business" pill with animated indicator ─── */
.hero-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.75rem;
    padding: 0.85rem 1.4rem 0.85rem 1.6rem;
    background: var(--text);
    color: var(--surface);
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    isolation: isolate;
}
.hero-cta:hover,
.hero-cta:focus-visible {
    transform: translateY(-2px);
    outline: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
.hero-cta-pulse {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    transform: translateY(-50%);
    z-index: -1;
}
.hero-cta-pulse::before,
.hero-cta-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.7;
    animation: hero-cta-ping 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.hero-cta-pulse::after { animation-delay: 0.9s; }
@keyframes hero-cta-ping {
    0%   { transform: scale(1);   opacity: 0.7; }
    80%  { transform: scale(3.2); opacity: 0;   }
    100% { transform: scale(3.2); opacity: 0;   }
}
.hero-cta-label { padding-left: 0.35rem; }
.hero-cta-chevron { animation: hero-cta-nudge 1.6s ease-in-out infinite; }
@keyframes hero-cta-nudge {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-cta-pulse::before,
    .hero-cta-pulse::after,
    .hero-cta-chevron { animation: none; }
}

/* ── Web-register card — bolder accent than the WhatsApp alt ────── */
.register-cta-web .register-cta-line {
    font-size: 1.1rem;
    font-weight: 700;
}
.register-cta-web .register-cta-number {
    font-size: 0.95rem;
    color: var(--text-2);
    font-family: 'Instrument Sans', sans-serif;
    letter-spacing: 0.01em;
    text-transform: none;
}

/* ── Web-register alternative under the main + closer CTAs ───────── */
.register-stack { display: flex; flex-direction: column; gap: 0.85rem; }
.register-alt {
    margin: 0;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.8125rem;
    color: var(--text-3);
    line-height: 1.5;
    text-align: left;
}
.register-alt-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.25rem;
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed var(--text-3);
    padding-bottom: 1px;
    transition: color 0.12s, border-color 0.12s;
}
.register-alt-link:hover,
.register-alt-link:focus-visible {
    color: var(--accent);
    border-bottom-color: var(--accent);
    outline: none;
}
.closer-cta-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}
.closer-alt-link {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.8125rem;
    color: var(--text-3);
    text-decoration: none;
    transition: color 0.12s;
}
.closer-alt-link:hover,
.closer-alt-link:focus-visible {
    color: var(--accent);
    outline: none;
}
@media (max-width: 720px) {
    .closer-cta-stack { align-items: stretch; }
    .closer-alt-link { text-align: center; }
}

/* ──────────────────────────────────────────────────────────────────
   Curated shelves above the main grid (homepage state only).
   Horizontal scrolling rail of compact cards — Amazon / eBay pattern,
   one rail per shelf. Hidden as soon as the customer picks a filter.
   ────────────────────────────────────────────────────────────────── */
.dir-shelf {
    margin: 2.5rem 0 2.25rem;
}

/* Editorial four-cell header:
     row 1 ──  [SHELF · 01]  .........................................  /italic byline/
     row 2 ──  Display heading ──────────────────────  [← →]  nav buttons
   The nav lives in the title row so it sits visually anchored to the
   shelf title, not floating in space above the rail. */
.dir-shelf-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "kicker .   meta"
        "title  .   nav";
    align-items: baseline;
    column-gap: 1rem;
    margin: 0 0 1.25rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--border);
}
.dir-shelf-kicker {
    grid-area: kicker;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-3);
}
.dir-shelf-meta {
    grid-area: meta;
    font-family: var(--body);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--text-3);
    text-align: right;
}
.dir-shelf-title {
    grid-area: title;
    margin: 0.35rem 0 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.35rem, 2.1vw, 1.7rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text);
}

/* Rail — Swiper handles overflow + momentum + arrow nav. We just style
   the container, slides keep their existing `.dir-shelf-card` shape. */
.dir-shelf-rail {
    position: relative;
    padding: 0;
    overflow: hidden;
}
/* Swiper ships its own stylesheet but we don't import it (one less HTTP
   request, and we want full control over slide layout anyway). The
   wrapper needs explicit flex behaviour so cards lay out horizontally
   both pre-init (before Swiper's JS runs) and post-init. */
.dir-shelf-rail .swiper-wrapper {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: stretch;
    gap: 1rem;
    box-sizing: content-box;
    /* Subtle right-edge bleed so scrolled-in slides don't end with a
       hard edge — feels like a magazine spread continuing off-page. */
    padding-right: 1px;
}

/* Header nav buttons — generous tap target (44px) so they're obviously
   clickable; the heavier stroke + slight surface contrast make them
   read clearly against the editorial header rule. */
.dir-shelf-nav {
    grid-area: nav;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    align-self: end;
}
.dir-shelf-nav-btn {
    appearance: none;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.dir-shelf-nav-btn:hover {
    border-color: var(--accent);
    color: var(--accent-on);
    background: var(--surface-raised);
    box-shadow: 0 2px 12px var(--accent-soft);
}
.dir-shelf-nav-btn:active {
    transform: scale(0.94);
}
.dir-shelf-nav-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.dir-shelf-nav-btn[aria-disabled="true"] {
    opacity: 0.28;
    cursor: default;
    pointer-events: none;
}
/* Directory-wide arrow standard — 16×16 with 2.5 stroke. Matches
   .scroll-cue-arrow so every "go this way" arrow on the page reads
   as the same family of glyph. */
.dir-shelf-nav-btn svg {
    width: 16px;
    height: 16px;
}
/* Rails that fit on one screen → no nav needed. The controller toggles
   `.is-static` when there's nothing to scroll. */
.dir-shelf.is-static .dir-shelf-nav {
    visibility: hidden;
}

/* Cards — wider, more vertical breathing room, single meta line.
   Width is set directly (not via flex-basis) so Swiper's `slidesPerView:
   'auto'` mode can read the intended slide size from offsetWidth. */
.dir-shelf-card {
    width: clamp(260px, 28vw, 308px);
    flex-shrink: 0;
    height: auto;
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.dir-shelf-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.dir-shelf-card a {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.2rem 1.3rem 1.1rem;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.dir-shelf-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.dir-shelf-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
}
.dir-shelf-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--text-3);
    flex-shrink: 0;
}
.dir-shelf-num {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--text-3);
    font-weight: 500;
}

.dir-shelf-card-name {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.08rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text);
    /* Cap to 2 lines so business names stay scannable without being clipped. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dir-shelf-card-foot {
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.dir-shelf-card-city {
    font-family: var(--body);
    font-style: italic;
    font-size: 0.82rem;
    color: var(--text-2);
}
.dir-shelf-card-arrow {
    color: var(--text-3);
    transition: transform 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}
.dir-shelf-card:hover .dir-shelf-card-arrow {
    transform: translateX(3px);
    color: var(--accent-on);
}

/* Per-shelf accents on the status chip — gives each shelf an identifying
   colour signal without needing whole-card styling differences. */
.dir-shelf--new .dir-shelf-tag-dot       { background: var(--accent); }
.dir-shelf--new .dir-shelf-tag           { color: var(--accent-on); }

.dir-shelf--available .dir-shelf-tag-dot {
    background: #34c759;
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.18);
}
.dir-shelf--available .dir-shelf-tag     { color: #2f8a4a; }

.dir-shelf--trending .dir-shelf-tag-dot  { background: var(--text-2); }
.dir-shelf--trending .dir-shelf-tag      { color: var(--text-2); }

.dir-shelf--featured .dir-shelf-tag-dot  { background: var(--accent); }
.dir-shelf--featured .dir-shelf-tag      { color: var(--accent-on); }

/* Mobile — header reflows into a stacked column with the nav buttons
   sitting on the same row as the kicker (top-right). Cards take more
   of the viewport so they're still tappable. */
@media (max-width: 720px) {
    .dir-shelf-head {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "kicker nav"
            "title  title"
            "meta   meta";
        row-gap: 0.2rem;
    }
    .dir-shelf-meta { text-align: left; margin-top: 0.15rem; }
    .dir-shelf-card { width: 76vw; }
    .dir-shelf-nav-btn { width: 40px; height: 40px; }
    /* svg stays at the directory-wide 16×16 / 2.5 standard */
}