:root {
    --sb-obsidian: #080a0c;
    --sb-surface: #111519;
    --sb-surface-raised: #171c20;
    --sb-ivory: #f6f1e7;
    --sb-muted: #bdb7ad;
    --sb-gold: #d4af37;
    --sb-gold-light: #f7e7a8;
    --sb-gold-dark: #8a6714;
    --sb-teal: #45c8be;
}

.platform-brand-page {
    color: var(--sb-ivory);
    background:
        radial-gradient(circle at 10% 0%, rgba(212, 175, 55, .10), transparent 30rem),
        radial-gradient(circle at 92% 10%, rgba(69, 200, 190, .07), transparent 34rem),
        var(--sb-obsidian);
}

.platform-brand-page .platform-shell {
    width: min(1240px, calc(100% - 40px));
    margin-inline: auto;
}

.platform-brand-page .platform-topbar {
    min-height: 78px;
    margin-bottom: 0;
    padding: 14px 18px;
    border: 1px solid rgba(212, 175, 55, .24);
    border-radius: 0 0 16px 16px;
    background: rgba(12, 15, 17, .88);
    backdrop-filter: blur(16px);
}

.platform-brand-page .platform-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
}

.platform-brand-page .platform-wordmark > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--sb-gold-light);
    border-radius: 12px;
    color: #080a0c;
    background: linear-gradient(135deg, var(--sb-gold-dark), var(--sb-gold) 44%, var(--sb-gold-light) 60%, #b88620);
    box-shadow: 0 8px 22px rgba(212, 175, 55, .18);
    font-size: .76rem;
    font-weight: 950;
}

.platform-brand-page .platform-header-logo {
    width: 96px;
    height: 96px;
    display: block;
    object-fit: contain;
    object-position: center;
}

.platform-brand-page .platform-wordmark > strong {
    color: var(--sb-ivory);
    font-size: 1rem;
}

.platform-brand-page .platform-topbar div a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding-inline: 13px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--sb-ivory);
    text-decoration: none;
}

.platform-brand-page .platform-topbar div a:last-child {
    border-color: rgba(212, 175, 55, .46);
    color: var(--sb-gold-light);
}

.platform-brand-page .platform-brand-hero {
    min-height: auto;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: clamp(32px, 7vw, 88px);
    align-items: center;
    padding: clamp(44px, 5vw, 68px) 0 clamp(52px, 6vw, 82px);
}

.platform-brand-page .platform-hero-copy { min-width: 0; }

.platform-brand-page .platform-brand-emblem-main {
    width: 116px;
    height: 116px;
    margin-bottom: 24px;
    padding: 8px;
    border: 1px solid rgba(212, 175, 55, .42);
    border-radius: 24px;
    background: #0c0f11;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .34);
}

.platform-brand-page .platform-brand-emblem-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.platform-brand-page .platform-brand-hero .eyebrow,
.platform-brand-page .section-title > span,
.platform-brand-page .discovery-head span,
.platform-brand-page .platform-growth-card span,
.platform-brand-page .payments-explainer span {
    color: var(--sb-gold);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.platform-brand-page .platform-brand-hero h1 {
    max-width: 12ch;
    margin: 12px 0 20px;
    color: var(--sb-ivory);
    font-size: clamp(3.35rem, 7.1vw, 6.7rem);
    line-height: .88;
    letter-spacing: -.055em;
}

.platform-brand-page .platform-brand-hero .lead {
    max-width: 670px;
    color: #d0cac1;
    font-size: clamp(1.05rem, 1.6vw, 1.28rem);
    line-height: 1.6;
}

.platform-brand-page .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.platform-brand-page .hero-actions a {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 22px;
    border-radius: 10px;
    font-weight: 900;
    text-decoration: none;
}

.platform-brand-page .hero-actions .primary-link {
    border: 1px solid var(--sb-gold-light);
    color: #080a0c;
    background: linear-gradient(135deg, var(--sb-gold-dark), var(--sb-gold) 42%, var(--sb-gold-light));
}

.platform-brand-page .hero-actions .secondary-link {
    border: 1px solid rgba(246, 241, 231, .20);
    color: var(--sb-ivory);
    background: #14181b;
}

.platform-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.platform-trust-row span {
    padding: 8px 11px;
    border: 1px solid rgba(246, 241, 231, .13);
    border-radius: 999px;
    color: #c9c3ba;
    background: rgba(255, 255, 255, .035);
    font-size: .76rem;
    font-weight: 750;
}

.platform-brand-page .network-panel {
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, .32);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(212, 175, 55, .07), transparent 45%), var(--sb-surface);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .34);
}

.platform-brand-page .network-panel > div {
    min-height: 92px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(246, 241, 231, .10);
}

.platform-brand-page .network-panel > div:last-child { border-bottom: 0; }
.platform-brand-page .network-panel span { color: #9f9990; }
.platform-brand-page .network-panel strong { color: var(--sb-ivory); }

.platform-growth-card,
.platform-brand-page .barbershop-discovery,
.platform-brand-page .plans-band,
.platform-brand-page .payments-explainer {
    margin: 26px 0;
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid rgba(212, 175, 55, .24);
    border-radius: 22px;
    background: var(--sb-surface);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .22);
}

.platform-growth-card {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
    gap: 34px;
    align-items: center;
}

.platform-growth-card h2 {
    margin: 8px 0 0;
    color: var(--sb-ivory);
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    line-height: 1.05;
}

.platform-growth-card p { color: #c7c1b8; line-height: 1.6; }

.platform-brand-page .barbershop-card,
.platform-brand-page .plan-card,
.platform-brand-page .flow-band article {
    border: 1px solid rgba(246, 241, 231, .13);
    border-radius: 16px;
    background: var(--sb-surface-raised);
}

.platform-brand-page .barbershop-card a,
.platform-brand-page .payments-explainer > a {
    border-radius: 9px;
    color: #080a0c;
    background: var(--sb-gold);
    font-weight: 900;
}

.platform-brand-page .plan-card > span,
.platform-brand-page .flow-band article > span { color: var(--sb-gold); }

.platform-brand-page .flow-band {
    gap: 14px;
    margin-block: 18px;
}

.platform-brand-page .flow-band article { padding: 24px; }

.platform-brand-page button:focus-visible,
.platform-brand-page a:focus-visible,
.platform-brand-page summary:focus-visible {
    outline: 3px solid rgba(247, 231, 168, .94);
    outline-offset: 3px;
}

.platform-brand-page .trial-offer-dialog {
    width: min(780px, calc(100vw - 30px));
    max-height: none;
    padding: 0;
    overflow: visible;
    border: 1px solid rgba(212, 175, 55, .58);
    border-radius: 22px;
    color: var(--sb-ivory);
    background: #0e1215;
    box-shadow: 0 34px 100px rgba(0, 0, 0, .72);
}

.platform-brand-page .trial-offer-dialog::backdrop {
    background: rgba(2, 4, 5, .78);
    backdrop-filter: blur(8px);
}

.trial-offer-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr);
    gap: 26px;
    padding: clamp(24px, 4vw, 38px);
}

.platform-brand-page .trial-offer-close {
    position: absolute;
    z-index: 2;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(246, 241, 231, .24);
    border-radius: 50%;
    color: var(--sb-ivory);
    background: #181d21;
    font-size: 1.35rem;
}

.trial-offer-copy { min-width: 0; padding-right: 12px; }

.platform-brand-page .trial-offer-kicker {
    color: var(--sb-gold);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.platform-brand-page #trialOfferTitle {
    display: block;
    max-width: 12ch;
    margin: 12px 0 14px;
    color: var(--sb-ivory);
    font-size: clamp(2.25rem, 5vw, 3.8rem);
    line-height: .94;
    letter-spacing: -.045em;
}

.trial-offer-copy > p,
.trial-offer-note { color: #c8c2b8; line-height: 1.5; }

.trial-offer-benefits {
    display: grid;
    gap: 9px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.trial-offer-benefits li {
    position: relative;
    padding-left: 22px;
    color: #ddd7cd;
    font-size: .9rem;
}

.trial-offer-benefits li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .38em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sb-teal);
    box-shadow: 0 0 0 4px rgba(69, 200, 190, .12);
}

.trial-offer-side {
    align-self: stretch;
    display: grid;
    align-content: center;
    gap: 14px;
    padding: 22px;
    border: 1px solid rgba(212, 175, 55, .26);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(212, 175, 55, .08), transparent 55%), #151a1e;
}

.platform-brand-page .trial-offer-counter {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 0;
    border: 0;
    background: transparent;
}

.platform-brand-page .trial-offer-counter > span {
    align-self: end;
    color: var(--sb-gold-light);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.platform-brand-page #trialOfferRemaining {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
    color: var(--sb-gold);
    font-size: clamp(3.2rem, 7vw, 5.2rem);
    line-height: .8;
}

.platform-brand-page .trial-offer-counter small { color: #aaa49b; }
.platform-brand-page .trial-offer-note { margin: 0; font-size: .82rem; }

.platform-brand-page .trial-offer-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.platform-brand-page .trial-offer-actions a,
.platform-brand-page .trial-offer-actions button {
    min-height: 46px;
    display: grid;
    place-items: center;
    padding: 10px 14px;
    border-radius: 9px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

.platform-brand-page .trial-offer-actions a {
    border: 1px solid var(--sb-gold-light);
    color: #080a0c;
    background: linear-gradient(135deg, var(--sb-gold-dark), var(--sb-gold) 48%, var(--sb-gold-light));
}

.platform-brand-page .trial-offer-actions button {
    border: 1px solid rgba(246, 241, 231, .18);
    color: var(--sb-ivory);
    background: #1b2024;
}

@media (max-width: 820px) {
    .platform-brand-page .platform-shell { width: min(100% - 24px, 1240px); }
    .platform-brand-page .platform-brand-hero { min-height: auto; grid-template-columns: 1fr; padding: 42px 0 52px; }
    .platform-brand-page .platform-brand-hero h1 { max-width: 11ch; font-size: clamp(3rem, 13vw, 5rem); }
    .platform-growth-card { grid-template-columns: 1fr; gap: 14px; }
    .trial-offer-layout { grid-template-columns: 1fr; gap: 18px; padding: 26px; }
    .trial-offer-copy { padding-right: 32px; }
    .platform-brand-page #trialOfferTitle { max-width: 14ch; font-size: clamp(2rem, 8vw, 3rem); }
    .trial-offer-benefits { display: none; }
    .trial-offer-side { padding: 17px; }
}

@media (max-width: 560px) {
    .platform-brand-page .platform-shell { width: 100%; padding-inline: 12px; }
    .platform-brand-page .platform-topbar { align-items: center; flex-direction: row; border-radius: 0 0 14px 14px; }
    .platform-brand-page .platform-topbar div { width: auto; }
    .platform-brand-page .platform-topbar div a:first-child { display: none; }
    .platform-brand-page .platform-header-logo { width: 72px; height: 72px; }
    .platform-brand-page .hero-actions { display: grid; }
    .platform-brand-page .hero-actions a { width: 100%; }
    .platform-brand-page .trial-offer-dialog { width: calc(100vw - 18px); }
    .trial-offer-layout { padding: 22px 18px 18px; }
    .platform-brand-page #trialOfferTitle { font-size: clamp(1.9rem, 10vw, 2.55rem); }
    .trial-offer-copy > p { margin-bottom: 0; font-size: .9rem; }
    .trial-offer-side { gap: 11px; }
    .platform-brand-page #trialOfferRemaining { font-size: 3.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .platform-brand-page *,
    .platform-brand-page *::before,
    .platform-brand-page *::after { scroll-behavior: auto !important; transition: none !important; }
}