/* ================================================================
   SYNARII LANDING — site styles (loads AFTER style.css)
   Same brand: #131E1B deep green · #C69F60 gold · Playfair + Inter.
   Adds: lighter chooser, shorter hero, feature tiles, slide-in feature
   panel, feature pages, combined pricing, About us, nav links.
================================================================ */

/* ── Nav links ────────────────────────────────────────────────── */
.lp-nav-links {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}
.lp-nav-links a.nav-link {
    font-size: 0.85rem;
    font-weight: 500;
    color: #D1D5D4;
    text-decoration: none;
    transition: color 0.2s;
}
.lp-nav-links a.nav-link:hover { color: #C69F60; }

/* Industry switch used on feature pages (no full-screen chooser there) */
.industry-switch {
    display: inline-flex;
    border: 1px solid rgba(198,159,96,0.3);
    border-radius: 50px;
    overflow: hidden;
}
.industry-switch button {
    background: transparent;
    border: none;
    color: #D1D5D4;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 7px 14px;
    cursor: pointer;
}
body.industry-grooming .industry-switch button[data-ind="grooming"],
body.industry-hb .industry-switch button[data-ind="hb"] {
    background: rgba(198,159,96,0.18);
    color: #C69F60;
}

/* Section links only make sense once the main page is showing */
body:not(.industry-grooming):not(.industry-hb) .lp-nav-links a.nav-link { display: none; }

/* The home page carries the switch too (29 Sep 2026): on a phone the nav is
   logo + switch + Log In, so tighten everything so it fits a 360 px screen. */
@media (max-width: 640px) {
    .lp-nav-links { gap: 0.45rem; }
    .lp-logo { font-size: 1.35rem !important; }
    /* Log In becomes its icon alone; the switch stays on one line each. */
    .lp-nav-links .btn-outline { font-size: 0 !important; padding: 9px 10px !important; line-height: 0; }
    .lp-nav-links .btn-outline i { font-size: 0.95rem; }
    .industry-switch button { padding: 7px 7px; font-size: 0.66rem; white-space: nowrap; }
}

/* ── Chooser: one line on what Synarii is + price, so it isn't a blank wall */
#industry-selector {
    justify-content: safe center;
    overflow-y: auto;
    padding-top: 5.5rem;
}
.selector-prompt { margin-bottom: 1.75rem; }
.selector-what {
    max-width: 560px;
    text-align: center;
    font-size: 0.98rem;
    color: #D1D5D4;
    line-height: 1.65;
    margin: -1.5rem auto 2.25rem;
}
.selector-foot {
    margin-top: 2.25rem;
    font-size: 0.8rem;
    color: rgba(209,213,212,0.6);
    text-align: center;
}
.selector-foot span { color: #C69F60; }

/* Font Awesome's own display rule beats .grooming-only/.hb-only on icons, so the
   live page shows both the paw and the scissors — pin it down here. */
i.grooming-only, i.hb-only { display: none !important; }
body.industry-grooming i.grooming-only,
body.industry-hb i.hb-only { display: inline-block !important; }

/* ── Hero: shorter than the live page ─────────────────────────── */
.hero.hero-short { min-height: 0; padding: 8.5rem 2rem 3.5rem; }
.hero-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.5rem;
    margin: -1rem 0 2.25rem;
    font-size: 0.88rem;
    color: #D1D5D4;
}
.hero-points i { color: #C69F60; margin-right: 6px; font-size: 0.8rem; }

/* Tighter section rhythm than the live page */
.lp-section.tight { padding: 4.5rem 2rem; }
.compare-section.tight, .mia-hero-section.tight { padding: 4.5rem 2rem; }

/* ── Feature tiles ────────────────────────────────────────────── */
.tile-group { margin-top: 2.75rem; }
.tile-group-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #C69F60;
    margin-bottom: 1rem;
}
.tile-group-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(198,159,96,0.18);
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

a.tile {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 1.35rem 1.4rem 1.2rem;
    text-decoration: none;
    transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
a.tile:hover {
    border-color: rgba(198,159,96,0.45);
    background: rgba(198,159,96,0.05);
    transform: translateY(-3px);
}
.tile-top { display: flex; align-items: center; gap: 0.8rem; }
.tile .feature-icon { width: 40px; height: 40px; font-size: 1rem; }
.tile-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    color: #FFFFFF;
    line-height: 1.25;
}
.tile-benefit {
    font-size: 0.86rem;
    color: #D1D5D4;
    line-height: 1.5;
    flex: 1;
}
.tile-more {
    font-size: 0.76rem;
    font-weight: 600;
    color: #C69F60;
    letter-spacing: 0.02em;
}
.tile-more i { font-size: 0.68rem; margin-left: 4px; transition: transform 0.2s; }
a.tile:hover .tile-more i { transform: translateX(3px); }

/* Tiles whose write-up isn't drafted yet (preview only) */
a.tile.pending { opacity: 0.72; }
a.tile.pending .tile-more { color: rgba(209,213,212,0.55); }

a.tile.grooming-only, a.tile.hb-only { display: none; }
body.industry-grooming a.tile.grooming-only,
body.industry-hb a.tile.hb-only { display: flex; }

/* ── Slide-in feature panel (keeps the song playing) ──────────── */
#feature-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(5,10,8,0.62);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
#feature-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 1500;
    width: min(760px, 100%);
    background: #131E1B;
    border-left: 1px solid rgba(198,159,96,0.25);
    box-shadow: -30px 0 80px rgba(0,0,0,0.5);
    transform: translateX(102%);
    transition: transform 0.35s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
}
body.panel-open #feature-panel { transform: translateX(0); }
body.panel-open #feature-panel-backdrop { opacity: 1; visibility: visible; }
body.panel-open { overflow: hidden; }

.panel-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.5rem;
    background: rgba(19,30,27,0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(198,159,96,0.14);
}
.panel-bar button, .panel-bar a {
    background: none;
    border: none;
    color: #D1D5D4;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.panel-bar button:hover, .panel-bar a:hover { color: #C69F60; }
.panel-bar i { margin-right: 6px; }

/* ── Feature page body (same markup standalone and inside the panel) ── */
.feature-page { max-width: 760px; margin: 0 auto; padding: 8rem 2rem 4rem; }
#feature-panel .feature-page { padding: 2.25rem 2rem 3rem; }

.fp-crumb {
    font-size: 0.78rem;
    color: rgba(209,213,212,0.55);
    margin-bottom: 1.25rem;
}
.fp-crumb a { color: #C69F60; text-decoration: none; }
#feature-panel .fp-crumb { display: none; }

.fp-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.fp-head .feature-icon { width: 52px; height: 52px; font-size: 1.3rem; }
.fp-name {
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #C69F60;
}
.feature-page h1 {
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    letter-spacing: -0.5px;
    margin-bottom: 1rem;
}
.fp-lede { font-size: 1.08rem; line-height: 1.7; color: #D1D5D4; margin-bottom: 2.25rem; }

.fp-h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: #FFFFFF;
    margin: 2.5rem 0 1rem;
}

.fp-steps { list-style: none; display: grid; gap: 0.75rem; counter-reset: step; }
.fp-steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 1rem;
    align-items: start;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
}
.fp-steps li::before {
    content: counter(step);
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(198,159,96,0.14);
    color: #C69F60;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fp-steps strong { display: block; color: #FFFFFF; font-size: 0.98rem; margin-bottom: 2px; }
.fp-steps span { font-size: 0.9rem; line-height: 1.6; color: #D1D5D4; }

.fp-shot {
    margin: 2rem 0 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(198,159,96,0.2);
}
.fp-shot img { width: 100%; height: auto; display: block; }
.fp-shot figcaption {
    padding: 0.7rem 1rem;
    font-size: 0.8rem;
    font-style: italic;
    color: #C69F60;
    background: #0f1815;
    text-align: center;
}
/* Placeholder until a real (anonymised) screenshot is supplied */
.fp-shot.placeholder {
    box-shadow: none;
    border: 1.5px dashed rgba(198,159,96,0.45);
    padding: 2.75rem 1.5rem;
    text-align: center;
    color: rgba(209,213,212,0.7);
    font-size: 0.88rem;
}
.fp-shot.placeholder i { display: block; font-size: 1.6rem; color: #C69F60; margin-bottom: 0.75rem; }

.fp-benefits { list-style: none; display: grid; gap: 0.7rem; }
.fp-benefits li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.6;
}
.fp-benefits li i { color: #C69F60; margin-top: 5px; font-size: 0.85rem; }
.fp-benefits strong { color: #FFFFFF; }

.fp-note {
    margin-top: 2rem;
    background: rgba(198,159,96,0.06);
    border-left: 3px solid #C69F60;
    border-radius: 0 12px 12px 0;
    padding: 1.1rem 1.25rem;
    font-size: 0.9rem;
    line-height: 1.65;
}
.fp-note strong { color: #C69F60; }

.fp-cta {
    margin-top: 2.75rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(198,159,96,0.15);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}
.fp-cta small { font-size: 0.78rem; color: rgba(209,213,212,0.6); }

.fp-related { margin-top: 2.5rem; font-size: 0.85rem; color: rgba(209,213,212,0.6); }
.fp-related a { color: #C69F60; text-decoration: none; margin-right: 1.1rem; white-space: nowrap; }
.fp-related a:hover { text-decoration: underline; }

/* ── Pricing: totals with Mia included ────────────────────────── */
.tier-incl {
    margin-top: 0.35rem;
    font-size: 0.74rem;
    color: rgba(209,213,212,0.6);
}
.tier-list {
    list-style: none;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(198,159,96,0.15);
    display: grid;
    gap: 0.5rem;
    text-align: left;
    font-size: 0.85rem;
    color: #D1D5D4;
}
.tier-list i { color: #C69F60; margin-right: 8px; font-size: 0.75rem; }

.price-notes {
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
.price-note {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    font-size: 0.86rem;
    line-height: 1.6;
}
.price-note strong {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1.02rem;
    color: #FFFFFF;
    margin-bottom: 4px;
}
.price-note.gold { background: rgba(198,159,96,0.07); border-color: rgba(198,159,96,0.35); }

/* ── About us ─────────────────────────────────────────────────── */
.about-inner {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 3.5rem;
    align-items: center;
    margin-top: 3rem;
}
.about-photo {
    aspect-ratio: 4 / 5;
    border-radius: 20px;
    border: 1.5px dashed rgba(198,159,96,0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
    padding: 1.5rem;
    font-size: 0.85rem;
    color: rgba(209,213,212,0.7);
}
.about-photo i { font-size: 2rem; color: #C69F60; }
.about-copy p { font-size: 1rem; line-height: 1.75; margin-bottom: 1.1rem; }
.about-copy p strong { color: #FFFFFF; }
.about-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.5rem;
}
.about-facts span {
    font-size: 0.8rem;
    border: 1px solid rgba(198,159,96,0.3);
    border-radius: 50px;
    padding: 6px 14px;
    color: #D1D5D4;
}
.about-facts i { color: #C69F60; margin-right: 7px; }

.footer-company {
    font-size: 0.78rem;
    color: rgba(209,213,212,0.5);
    margin-bottom: 0.6rem;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .lp-nav-links a.nav-link { display: none; }
    .about-inner { grid-template-columns: 1fr; gap: 2rem; }
    .about-photo { max-width: 280px; margin: 0 auto; }
}
@media (max-width: 768px) {
    .lp-section.tight, .compare-section.tight, .mia-hero-section.tight { padding: 3.5rem 1.25rem; }
    .hero.hero-short { padding: 6.5rem 1.25rem 2.5rem; }
    .feature-page { padding: 6.5rem 1.25rem 3rem; }
    #feature-panel .feature-page { padding: 1.75rem 1.25rem 2.5rem; }
    .tile-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    a.tile { padding: 1.1rem 1rem 1rem; }
    .tile-top { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
    .tile-benefit { font-size: 0.8rem; }
}
/* Phones: one compact row per feature so sixteen tiles don't become a long scroll */
@media (max-width: 420px) {
    .tile-grid { grid-template-columns: 1fr; gap: 0.6rem; }
    a.tile { padding: 0.9rem 1rem; gap: 0.3rem; }
    .tile-top { flex-direction: row; align-items: center; gap: 0.75rem; }
    .tile .feature-icon { width: 34px; height: 34px; font-size: 0.9rem; }
    .tile-name { font-size: 1rem; }
    .tile-benefit { padding-left: calc(34px + 0.75rem); }
    .tile-more { display: none; }
    a.tile::after {
        content: '\f105';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #C69F60;
        font-size: 0.8rem;
    }
    a.tile { position: relative; padding-right: 2.25rem; }
}

/* ── Owner quote on a feature page ────────────────────────────── */
.fp-quote {
    margin: 2rem 0 0;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid #C69F60;
    background: rgba(198,159,96,0.06);
    border-radius: 0 12px 12px 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.15rem;
    color: #FFFFFF;
    line-height: 1.5;
}
.fp-quote cite {
    display: block;
    margin-top: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: 0.8rem;
    color: #C69F60;
}

/* ── Reviews ──────────────────────────────────────────────────── */
.review-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 3rem;
    align-items: start;
}
.review-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 1.6rem 1.5rem;
}
.review-stars { color: #C69F60; font-size: 0.8rem; letter-spacing: 3px; margin-bottom: 0.9rem; }
.review-card blockquote { font-size: 0.92rem; line-height: 1.7; color: #D1D5D4; }
.review-card figcaption {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(198,159,96,0.15);
    font-size: 0.8rem;
    color: rgba(209,213,212,0.7);
}
.review-card figcaption strong { display: block; color: #FFFFFF; font-size: 0.9rem; }

.owner-says { margin-top: 2rem; text-align: center; }
.owner-says-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #C69F60;
}
.owner-says-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1rem;
    text-align: left;
}
.owner-says-row p {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.6;
    color: #FFFFFF;
    border-left: 3px solid rgba(198,159,96,0.5);
    padding-left: 1.1rem;
}
.owner-says-row cite {
    display: block;
    margin-top: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: 0.78rem;
    color: rgba(209,213,212,0.65);
}

/* ── About photo (falls back to the dashed placeholder until the file is saved) ── */
.about-photo.has-img { border: none; padding: 0; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(198,159,96,0.2); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; }

/* ── Mia vs human: "show all" only exists on phones ───────────── */
.compare-more { display: none; }

@media (max-width: 900px) {
    .review-row { grid-template-columns: 1fr; }
    .owner-says-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    /* Reviews become a swipe row so three cards cost one card of height */
    .review-row {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 0.9rem;
        margin: 2rem -1.25rem 0;
        padding: 0 1.25rem 0.75rem;
        -webkit-overflow-scrolling: touch;
    }
    .review-card { flex: 0 0 84%; scroll-snap-align: center; }
    .review-card.reveal { opacity: 1; transform: none; }

    /* Comparison: first six rows, the rest behind "Show all ten" */
    .compare-inner:not(.all) .compare-table tbody tr:nth-child(n+7) { display: none; }
    .compare-inner:not(.all) .compare-more {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 1rem;
        background: none;
        border: 1px solid rgba(198,159,96,0.4);
        border-radius: 50px;
        color: #C69F60;
        font-family: 'Inter', sans-serif;
        font-size: 0.8rem;
        font-weight: 600;
        padding: 9px 18px;
        cursor: pointer;
    }
}

/* Customer names are never in the page — this chip only signals "name hidden" */
.name-blur {
    display: inline-block;
    margin-right: 6px;
    color: #D1D5D4;
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
}

/* About us — credentials */
.about-creds { display: grid; gap: 0.55rem; margin: 0.25rem 0 0.5rem; }
.about-creds span { font-size: 0.9rem; color: #FFFFFF; display: grid; grid-template-columns: 26px 1fr; align-items: start; }
.about-creds i { color: #C69F60; margin-top: 4px; font-size: 0.85rem; }

/* Our story page */
.story p:not(.fp-lede):not(.fp-crumb):not(.fp-related) { font-size: 1rem; line-height: 1.8; margin-bottom: 1.1rem; }
.story p strong { color: #FFFFFF; }
.story .fp-shot { margin: 0 0 1rem; }
.story .fp-shot img { max-height: 560px; object-fit: cover; object-position: 50% 38%; }
.about-facts { margin-top: 1.25rem; }

/* ── Barber shops: Hair & Beauty with barber wording where it matters ── */
.barber-word { display: none; }
body.industry-barber .barber-word { display: inline; }
body.industry-barber .hb-word.has-barber { display: none; }
.barber-only { display: none; }
body.industry-barber .barber-only { display: block; }
body.industry-barber .barber-grid { display: grid; }
body.industry-barber .hb-only.not-barber { display: none; }
/* three-way switch: H&B is not "on" while Barber is */
body.industry-barber .industry-switch button[data-ind="hb"] { background: transparent; color: #D1D5D4; }
body.industry-barber .industry-switch button[data-ind="barber"] { background: rgba(198,159,96,0.18); color: #C69F60; }
/* three chooser cards */
.selector-cards { max-width: 1140px; }
@media (max-width: 1000px) { .industry-switch button { padding: 7px 10px; font-size: 0.7rem; } }
@media (max-width: 640px) { .lp-nav-links .btn-gold { display: none; } }

/* Chooser with three cards: when they can't sit side by side, each becomes a compact
   row (icon · name + line · Enter) so all three fit on one screen, phones included. */
@media (max-width: 960px) {
    .selector-cards { flex-direction: column; align-items: center; gap: 0.8rem; }
    .selector-card {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 1rem;
        align-items: center;
        text-align: left;
        width: 100%;
        max-width: 560px;
        min-width: 0;
        padding: 1rem 1.15rem;
        border-radius: 18px;
        flex: none;
    }
    .selector-card .selector-icon { grid-row: 1 / 3; font-size: 1.9rem; margin: 0; }
    .selector-card h3 { font-size: 1.15rem; margin: 0; align-self: end; }
    .selector-card p { grid-column: 2; font-size: 0.78rem; line-height: 1.4; margin: 2px 0 0; align-self: start; }
    .selector-card .selector-card-btn { grid-column: 3; grid-row: 1 / 3; padding: 9px 16px; font-size: 0.8rem; }
    .selector-logo { font-size: clamp(2rem, 7vw, 3rem); }
    .selector-tagline { margin-bottom: 2.25rem; font-size: 0.72rem; }
    .selector-what { font-size: 0.9rem; margin-bottom: 1.5rem; }
    .selector-prompt { margin-bottom: 1.1rem; }
    .selector-foot { margin-top: 1.4rem; font-size: 0.74rem; }
}
@media (max-width: 420px) {
    .selector-card p { display: none; }
    .selector-card h3 { align-self: center; grid-row: 1 / 3; }
}

/* Short screens (small laptops): keep all three Enter buttons above the fold */
@media (min-width: 961px) and (max-height: 820px) {
    #industry-selector { padding-top: 4.75rem; padding-bottom: 1rem; }
    .selector-logo { font-size: 2.6rem; margin-bottom: 0.25rem; }
    .selector-tagline { margin-bottom: 1.1rem; font-size: 0.78rem; }
    .selector-what { margin: 0 auto 1.1rem; font-size: 0.9rem; line-height: 1.55; }
    .selector-prompt { margin-bottom: 1.1rem; font-size: 1.5rem; }
    .selector-card { padding: 1.4rem 1.4rem 1.5rem; }
    .selector-card .selector-icon { font-size: 2.1rem; margin-bottom: 0.5rem; }
    .selector-card h3 { font-size: 1.3rem; }
    .selector-card p { margin-bottom: 1rem; font-size: 0.84rem; }
    .selector-foot { margin-top: 1.25rem; }
}
/* Phones: all three rows + the price line on one screen */
@media (max-width: 420px) {
    #industry-selector { padding: 4.5rem 1.25rem 1rem; }
    .selector-tagline { margin-bottom: 2rem; letter-spacing: 0.08em; }
    .selector-what { font-size: 0.85rem; line-height: 1.5; margin-bottom: 1.1rem; }
    .selector-prompt { margin-bottom: 0.8rem; font-size: 1.3rem; }
    .selector-cards { gap: 0.6rem; }
    .selector-card { padding: 0.8rem 1rem; }
    .selector-foot { margin-top: 1rem; line-height: 1.6; }
}

/* Currency switch beside the prices (site.js SynariiPricing) — same pill as the industry switch */
.currency-switch {
    display: inline-flex;
    align-items: center;
    margin-top: 18px;
    border: 1px solid rgba(198,159,96,0.3);
    border-radius: 50px;
    overflow: hidden;
}
.currency-switch-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9CA3AF;
    padding: 7px 6px 7px 16px;
}
.currency-switch button {
    background: transparent;
    border: none;
    color: #D1D5D4;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 7px 14px;
    cursor: pointer;
}
.currency-switch button.active { background: rgba(198,159,96,0.18); color: #C69F60; }
.currency-switch button:focus-visible { outline: 2px solid #C69F60; outline-offset: -2px; }