/* ============================================================
   YOHB Marketing / Landing Page Styles
   Scoped under .yohb-landing to avoid collisions with app.css.
   Header CTA (`.yohb-header-cta`) is unscoped so NavMenu can use it.
   ============================================================ */

:root {
  --marketing-bg: #000000;
  --marketing-card-bg: #0A0A0A;
  --marketing-card-border: #1C1C1C;
  --marketing-text: #FFFFFF;
  --marketing-text-muted: #888888;
  --marketing-text-faint: #555555;
  --marketing-pill-bg: rgba(41, 171, 226, 0.10);
  --marketing-pill-border: rgba(41, 171, 226, 0.30);
  --gp-blue: #29abe2;
}

/* ===== Landing-variant header overrides ===== */
.yohb-header.yohb-header-landing {
    padding: 10px 0;
}

.yohb-header.yohb-header-landing .yohb-header-left {
    flex: 1 1 auto;
    padding-left: 20px;
    justify-content: flex-start;
}

.yohb-header.yohb-header-landing .yohb-header-right {
    flex: 0 0 auto;
    padding-left: 0;
    padding-right: 20px;
    justify-content: flex-end;
}

@media (min-width: calc(600px + 3rem)) {
    .yohb-header.yohb-header-landing .yohb-header-left {
        order: 0;
        flex: 1 1 auto;
        padding-left: 32px;
    }

    .yohb-header.yohb-header-landing .yohb-header-right {
        order: 1;
        flex: 0 0 auto;
        padding-right: 32px;
    }
}

/* ===== Header SIGN IN / SIGN UP button (used inside NavMenu) ===== */
.yohb-header-cta {
    background: var(--gp-blue);
    color: #000000;
    border: 0;
    padding: 11px 22px;
    border-radius: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    line-height: 1;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.yohb-header-cta:hover,
.yohb-header-cta:focus {
    color: #000000;
    filter: brightness(1.1);
}

/* ============================================================
   LANDING PAGE ROOT
   ============================================================ */
.yohb-landing {
    background: var(--marketing-bg);
    color: var(--marketing-text);
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    width: 100%;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.yohb-landing::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(41, 171, 226, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 60%, rgba(41, 171, 226, 0.05) 0%, transparent 50%);
}

/* ============================================================
   HERO
   ============================================================ */
.yohb-landing .hero {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 32px 100px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
    z-index: 1;
}

.yohb-landing .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--marketing-pill-border);
    background: var(--marketing-pill-bg);
    border-radius: 100px;
    color: var(--gp-blue);
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.yohb-landing .eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--gp-blue);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--gp-blue);
}

.yohb-landing .hero h1 {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 1.05;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
    color: var(--marketing-text);
}

.yohb-landing .hero h1 .scan {
    color: var(--gp-blue);
}

.yohb-landing .hero .subhead {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.55;
    color: var(--marketing-text-muted);
    max-width: 540px;
    margin-bottom: 28px;
}

.yohb-landing .feature-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}

.yohb-landing .pill {
    padding: 5px 12px;
    border: 1px solid var(--marketing-pill-border);
    border-radius: 100px;
    color: var(--gp-blue);
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.3px;
    background: transparent;
}

/* ===== Waitlist form ===== */
.yohb-landing .waitlist-form {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin-bottom: 14px;
    align-items: stretch;
}

.yohb-landing .waitlist-form input {
    flex: 1;
    background: var(--marketing-card-bg);
    border: 1px solid var(--marketing-card-border);
    border-radius: 8px;
    padding: 13px 16px;
    color: var(--marketing-text);
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
    min-width: 0;
}

.yohb-landing .waitlist-form input::placeholder {
    color: var(--marketing-text-faint);
}

.yohb-landing .waitlist-form input:focus {
    border-color: var(--gp-blue);
}

.yohb-landing .marketing-btn {
    background: var(--gp-blue);
    color: #000000;
    border: 0;
    padding: 9px 20px;
    border-radius: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: filter 0.2s ease;
    white-space: nowrap;
}

.yohb-landing .marketing-btn:hover,
.yohb-landing .marketing-btn:focus {
    color: #000000;
    filter: brightness(1.1);
}

.yohb-landing .marketing-btn[disabled],
.yohb-landing .marketing-btn.is-busy {
    opacity: 0.6;
    cursor: default;
}

.yohb-landing .waitlist-newsletter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 6px;
    color: var(--marketing-text-muted);
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
    text-align: left;
}

.waitlist-newsletter {
    display: flex;
    flex-direction: row;
}

.waitlist-newsletter span {
  font-size: 14px;
}

.yohb-landing .waitlist-newsletter input[type="checkbox"] {
  accent-color: var(--gp-blue);
}

.yohb-landing .waitlist-message {
    max-width: 480px;
    background: var(--marketing-card-bg);
    border: 0.5px solid var(--marketing-pill-border);
    border-radius: 8px;
    padding: 14px 16px;
    color: var(--marketing-text);
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 14px;
}

.yohb-landing .waitlist-error {
    color: #ff6b6b;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    margin-top: 8px;
}

.yohb-landing .signin-link {
    display: block;
    color: var(--gp-blue);
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 17px;
    transition: opacity 0.2s ease;
}

.yohb-landing .signin-link:hover {
    opacity: 0.8;
}

/* Stacked sign-in / sign-up links: gap goes between consecutive links only,
   so the first link keeps its original placement under the form. */
.yohb-landing .signin-link + .signin-link {
    margin-top: 6px;
}

/* ============================================================
   PHONE MOCKUP
   ============================================================ */
.yohb-landing .phone-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: default;
}

.yohb-landing .phone-wrap * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.yohb-landing .phone-wrap::before {
    content: '';
    position: absolute;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(41, 171, 226, 0.18) 0%, transparent 70%);
    filter: blur(40px);
    z-index: 0;
}

.yohb-landing .phone {
    width: 320px;
    height: 660px;
    background: #000;
    border-radius: 44px;
    border: 8px solid #1A1A1A;
    box-shadow:
        0 0 0 1px #2A2A2A,
        0 30px 80px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(41, 171, 226, 0.12);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

/* iPhone notch */
.yohb-landing .phone::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 22px;
    background: #000;
    border-radius: 100px;
    z-index: 10;
}

/* App Header (inside phone mockup) */
.yohb-landing .phone .app-header {
    padding: 40px 14px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #000;
    border-bottom: 0.5px solid var(--marketing-card-border);
}

.yohb-landing .phone .header-left,
.yohb-landing .phone .header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.yohb-landing .phone .header-icon {
    color: var(--marketing-text);
    font-size: 22px;
}

.yohb-landing .phone .header-logo {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 1.5px;
}

.yohb-landing .phone .header-logo .yo { color: var(--marketing-text); }
.yohb-landing .phone .header-logo .hb { color: var(--gp-blue); }

.yohb-landing .phone .avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1A1A1A;
    border: 1.5px solid var(--gp-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: var(--gp-blue);
}

.yohb-landing .phone .bell-wrap {
    position: relative;
}

.yohb-landing .phone .bell-badge {
    position: absolute;
    top: -2px;
    right: -3px;
    width: 8px;
    height: 8px;
    background: var(--gp-blue);
    border-radius: 50%;
    border: 1.5px solid #000;
}

/* Page Hero inside phone */
.yohb-landing .phone .page-hero {
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #000;
    border-bottom: 0.5px solid var(--marketing-card-border);
    position: static;
}

.yohb-landing .phone .page-hero-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.5px;
}

.yohb-landing .phone .add-post-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 7px;
    border: 1.5px solid var(--gp-blue);
    background: transparent;
    color: var(--gp-blue);
    border-radius: var(--gp-card-border-radius);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
}

.yohb-landing .phone .add-post-btn .material-symbols-outlined {
    font-size: 16px;
}

/* Feed inside phone */
.yohb-landing .phone .feed {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background: #000;
    scrollbar-color: #1C1C1C #000;
    scrollbar-width: thin;
}

.yohb-landing .phone .feed::-webkit-scrollbar {
    width: 8px;
}

.yohb-landing .phone .feed::-webkit-scrollbar-track {
    background: #000;
}

.yohb-landing .phone .feed::-webkit-scrollbar-thumb {
    background: #1C1C1C;
    border-radius: 4px;
}

.yohb-landing .phone .feed::-webkit-scrollbar-thumb:hover {
    background: #2A2A2A;
}

.yohb-landing .phone .post-card {
    background: var(--marketing-card-bg);
    border: 0.5px solid var(--marketing-card-border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
}

.yohb-landing .phone .post-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.yohb-landing .phone .post-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1A1A1A;
    border: 1.5px solid var(--gp-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--gp-blue);
    flex-shrink: 0;
}

.yohb-landing .phone .post-author {
    flex: 1;
    min-width: 0;
}

.yohb-landing .phone .post-name {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: var(--marketing-text);
}

.yohb-landing .phone .post-meta {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: var(--marketing-text-faint);
    margin-top: 2px;
}

.yohb-landing .phone .mockup-more {
    color: var(--marketing-text-faint);
    font-size: 20px;
}

.yohb-landing .phone .mockup-body {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--marketing-text);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

.yohb-landing .phone .post-photo {
    height: 130px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1a3a5a 0%, #0d1f2f 100%);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    text-align: center;
    padding: 8px;
    position: relative;
    overflow: hidden;
}

.yohb-landing .phone .post-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yohb-landing .phone .post-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 40%, rgba(41, 171, 226, 0.15) 0%, transparent 50%);
}

.yohb-landing .phone .vehicle-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    background: var(--marketing-pill-bg);
    border: 0.5px solid var(--marketing-pill-border);
    border-radius: 6px;
    color: var(--gp-blue);
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 11px;
    margin-bottom: 10px;
}

.yohb-landing .phone .post-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 8px;
    border-top: 0.5px solid var(--marketing-card-border);
}

.yohb-landing .phone .post-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--marketing-text-muted);
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 11px;
}

.yohb-landing .phone .post-action .material-symbols-outlined {
    font-size: 18px;
}

/* Phone bottom nav */
.yohb-landing .phone .bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0 18px;
    background: #000;
    border-top: 0.5px solid var(--marketing-card-border);
}

.yohb-landing .phone .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--marketing-text-faint);
}

.yohb-landing .phone .nav-item.active {
    color: var(--gp-blue);
}

.yohb-landing .phone .nav-item .material-symbols-outlined {
    font-size: 22px;
}

.yohb-landing .phone .nav-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 0.2px;
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.yohb-landing .trust-bar {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 32px;
    text-align: center;
    border-top: 0.5px solid var(--marketing-card-border);
    border-bottom: 0.5px solid var(--marketing-card-border);
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yohb-landing .trust-bar p {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.5;
    color: var(--marketing-text-muted);
    margin: 0;
}

.yohb-landing .trust-bar strong {
    color: var(--marketing-text);
    font-weight: 600;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.yohb-landing .how-it-works {
    max-width: 1280px;
    margin: 0 auto;
    padding: 100px 32px;
    position: relative;
    z-index: 1;
}

.yohb-landing .section-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 40px;
    letter-spacing: -0.3px;
    text-align: center;
    margin-bottom: 14px;
    color: var(--marketing-text);
}

.yohb-landing .section-sub {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--marketing-text-muted);
    text-align: center;
    margin-bottom: 60px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.yohb-landing .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.yohb-landing .step {
    padding: 32px;
    background: var(--marketing-card-bg);
    border: 0.5px solid var(--marketing-card-border);
    border-radius: 16px;
    position: relative;
}

.yohb-landing .step-num {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--gp-blue);
    letter-spacing: 2px;
    margin-bottom: 16px;
    display: block;
    line-height: 1;
}

.yohb-landing .step-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.2px;
    margin-bottom: 10px;
    color: var(--marketing-text);
}

.yohb-landing .step-body {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    color: var(--marketing-text-muted);
}

/* ============================================================
   FEATURES (2x2 GRID)
   ============================================================ */
.yohb-landing .features {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px 100px;
    position: relative;
    z-index: 1;
}

.yohb-landing .feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.yohb-landing .feature-card {
    padding: 36px;
    background: var(--marketing-card-bg);
    border: 0.5px solid var(--marketing-card-border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.yohb-landing .feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--marketing-pill-bg);
    border: 1px solid var(--marketing-pill-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gp-blue);
}

.yohb-landing .feature-icon {
    font-size: 24px;
}

.material-symbols-outlined
{
    font-size: 20px;
}

.yohb-landing .feature-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.2px;
  color: var(--marketing-text);
}

.yohb-landing .feature-body {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    color: var(--marketing-text-muted);
}

/* ============================================================
   REPEAT CTA
   ============================================================ */
.yohb-landing .cta-section {
    max-width: 1280px;
    margin: 0 auto;
    padding: 100px 32px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.yohb-landing .cta-section h2 {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 48px;
    letter-spacing: -0.3px;
    margin-bottom: 14px;
    color: var(--marketing-text);
}

.yohb-landing .cta-section h2 .brand {
    color: var(--gp-blue);
}

.yohb-landing .cta-section .subhead {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--marketing-text-muted);
    margin-bottom: 36px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

.yohb-landing .cta-section .waitlist-form {
    margin-left: auto;
    margin-right: auto;
}

.yohb-landing .cta-section .waitlist-message {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* CTA-section override: force the newsletter checkbox to center the same way
   the signin-link does (auto-margin block instead of inline-flex), so it lines
   up under the centered form rather than hugging the left edge. */
.yohb-landing .cta-section .waitlist-newsletter {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.yohb-landing .cta-section .signin-link {
    margin-top: 6px;
}

/* ============================================================
   AUTH PAGES (Login, Sign Up, Password Reset, Resend Activation)
   Reuses legacy class names (.form-group, .form-control, .btn,
   .form-error, .forgot-links, .link-item) but scoped under
   .yohb-landing so the marketing look wins over app.css.
   ============================================================ */
/* Auth pages are short; make the page fill the viewport so the marketing
   footer sticks to the bottom instead of floating mid-screen on wide/tall
   screens. Scoped via :has so Home (also .yohb-landing) is untouched. */
.yohb-landing:has(.marketing-auth) {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.yohb-landing:has(.marketing-auth) .marketing-auth {
    flex: 1 0 auto;
}

.yohb-landing:has(.marketing-auth) .marketing-footer {
    margin-top: auto;
}

.yohb-landing .marketing-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 56px 24px 72px;
    position: relative;
    z-index: 1;
}

.yohb-landing .marketing-auth-card {
    width: 100%;
    max-width: 440px;
    box-sizing: border-box;
    background: var(--marketing-card-bg);
    border: 1px solid var(--marketing-card-border);
    border-radius: 14px;
    padding: 34px 30px;
}

/* Full-bleed variant (Event Check-In): the card IS the page body — full width,
   no border/radius, no centering padding band. The page scrolls normally. */
.yohb-landing .marketing-auth.marketing-auth-full { padding: 0; }
.yohb-landing .marketing-auth.marketing-auth-full .marketing-auth-card {
    max-width: none;
    border: 0;
    border-radius: 0;
    padding: 20px 16px 40px;
    min-height: calc(100vh - var(--gp-header-height, 56px));
}

/* Check-in QR scanner: a STATIC SQUARE, center-cropped preview. The legacy
   .qrScanComponent-content rule (app.css, flex + 300px max-height) let the
   raw camera frame spill OVER the inputs/buttons below it — here the
   container reserves real square layout space (aspect-ratio) and crops the
   feed to fill it (object-fit: cover), so following content always flows
   BELOW the camera. Scoped to .yohb-landing so the legacy EventScanDialog
   keeps the old look. */
.yohb-landing .qrScanComponent-content {
    display: block !important;
    width: min(100%, 320px);
    aspect-ratio: 1 / 1;
    max-height: none !important;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
    position: relative;
    background: #000000;
}
.yohb-landing .qrScanComponent-content video,
.yohb-landing .qrScanComponent-content canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    border-radius: 12px !important;
}

/* Legacy app.css pins .login-form / .signup-form to a fixed 350px width,
   which overflows the card on small screens. Let them fill the card. */
.yohb-landing .marketing-auth .login-form,
.yohb-landing .marketing-auth .signup-form {
    width: 100%;
}

.yohb-landing .marketing-auth .marketing-auth-title,
.yohb-landing .marketing-auth .form-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--marketing-text);
    margin: 0 0 6px;
}

.yohb-landing .marketing-auth .marketing-auth-sub {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--marketing-text-muted);
    line-height: 1.5;
    margin: 0 0 22px;
}

.yohb-landing .marketing-auth .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.yohb-landing .marketing-auth .form-group label {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--marketing-text-muted);
}

.yohb-landing .marketing-auth input,
.yohb-landing .marketing-auth .form-control {
    width: 100%;
    box-sizing: border-box;
    background: var(--marketing-bg);
    border: 1px solid var(--marketing-card-border);
    border-radius: 8px;
    padding: 13px 16px;
    color: var(--marketing-text);
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 15px;
}

.yohb-landing .marketing-auth input::placeholder,
.yohb-landing .marketing-auth .form-control::placeholder {
    color: var(--marketing-text-faint);
}

.yohb-landing .marketing-auth input:focus,
.yohb-landing .marketing-auth .form-control:focus {
    border-color: var(--gp-blue);
    outline: none;
}

/* Bio: grow with content as typed (same mechanism as VehicleComponent's
   .item-edit-expanding-text — field-sizing: content). */
.yohb-landing .marketing-auth textarea.form-control {
    field-sizing: content;
    min-height: 84px;
    max-height: 320px;
    resize: vertical;
}

/* Application-question free-text answers start ONE line tall (no 84px floor)
   and grow with content via the field-sizing rule above. */
.yohb-landing .marketing-auth textarea.form-control.club-answer-text {
    min-height: 0;
    resize: none;
}

.yohb-landing .marketing-auth .btn {
    width: 100%;
    background: var(--gp-blue);
    color: #000000;
    border: 0;
    padding: 13px 20px;
    border-radius: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    margin-top: 6px;
    transition: filter 0.2s ease;
}

.yohb-landing .marketing-auth .btn:hover,
.yohb-landing .marketing-auth .btn:focus {
    filter: brightness(1.1);
}

.yohb-landing .marketing-auth .spinner-container {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.yohb-landing .marketing-auth .form-error p {
    color: #ff6b6b;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    margin: 8px 0 0;
}

.yohb-landing .marketing-auth .form-message {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    margin: 18px 0;
}

.yohb-landing .marketing-auth .form-message-success {
    color: var(--gp-blue);
}

.yohb-landing .marketing-auth .form-message-error {
    color: #ff6b6b;
}

.yohb-landing .marketing-auth .form-note {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--marketing-text-muted);
    margin: 12px 0 0;
}

.yohb-landing .marketing-auth .forgot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 20px;
}

.yohb-landing .marketing-auth .forgot-links .link-item {
    color: var(--gp-blue);
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
}

.yohb-landing .marketing-auth .forgot-links .link-item:hover {
    opacity: 0.8;
}

.yohb-landing .marketing-auth .account-created {
    text-align: center;
}

.yohb-landing .marketing-auth .account-created h1 {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: var(--marketing-text);
    margin: 0 0 12px;
}

.yohb-landing .marketing-auth .account-created p {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--marketing-text-muted);
    line-height: 1.6;
    margin: 0 0 12px;
}

.yohb-landing .marketing-auth .account-created-next-steps {
    text-align: left;
    background: var(--marketing-bg);
    border: 1px solid var(--marketing-card-border);
    border-radius: 8px;
    padding: 16px 18px;
    margin: 16px 0;
}

.yohb-landing .marketing-auth .account-created-next-steps-title {
    font-weight: 700;
    color: var(--marketing-text);
    margin: 0 0 8px;
}

.yohb-landing .marketing-auth .account-created-next-steps ul {
    margin: 0;
    padding-left: 18px;
}

.yohb-landing .marketing-auth .account-created-next-steps li {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--marketing-text-muted);
    line-height: 1.6;
}

/* ============================================================
   PROFILE SETUP FLOW + PROFILE PAGE (reuses .marketing-auth)
   ============================================================ */
.yohb-landing .marketing-auth .profile-steps {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--gp-blue);
    margin: 0 0 14px;
}

.yohb-landing .marketing-auth .profile-public-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--marketing-pill-bg);
    border: 0.5px solid var(--marketing-pill-border);
    color: var(--gp-blue);
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}

/* Counterpart to .profile-public-badge — shown on fields like VIN and
   License Plate when the owner has flipped the "make public" toggle off.
   Uses a warning/amber tone so it reads as "private/sensitive" rather than
   "feature available". Same shape/size as the public badge. */
.yohb-landing .marketing-auth .profile-private-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 191, 0, 0.10);
    border: 0.5px solid rgba(255, 191, 0, 0.30);
    color: var(--gp-amber, #FFBF00);
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}

.yohb-landing .marketing-auth .profile-field-hint {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--marketing-text-faint);
    margin: 4px 0 0;
}

.yohb-landing .marketing-auth .profile-privacy-note {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    line-height: 1.55;
    color: var(--marketing-text-muted);
    background: var(--marketing-bg);
    border: 1px solid var(--marketing-card-border);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 20px;
}

.profile-privacy-note .profile-public-badge {
  margin-left: 0px !important;
}

.yohb-landing .marketing-auth .profile-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  color: var(--marketing-text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
}

.profile-toggle input {
    flex: 0 0 auto;
    /* Override the wide .yohb-landing .marketing-auth input / .form-control
       width:100% so the native checkbox keeps its intrinsic size (Safari
       collapsed the label next to it without this). */
    width: auto !important;
}

.yohb-landing .marketing-auth .profile-interest-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    margin: 6px 0 4px;
}

.yohb-landing .marketing-auth .profile-interest-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--marketing-text);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
}

.profile-interest-grid label > input {
    flex: 0 0 auto;
    /* Override the wide .yohb-landing .marketing-auth input / .form-control
       width:100% so the native checkbox keeps its intrinsic size (Safari
       collapsed the label next to it without this). */
    width: auto !important;
}

/* Club Add wizard — indented VIN/plate sub-toggles + application-question rows. */
.yohb-landing .marketing-auth .club-subrequire {
    margin-left: 22px;
    padding-left: 10px;
    border-left: 1.5px solid var(--gp-card-border, #1C1C1C);
}
.yohb-landing .marketing-auth .club-question-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.yohb-landing .marketing-auth .club-question-required { flex: 0 0 auto; }
.yohb-landing .marketing-auth .club-creator-disclaimer strong { display: block; margin-bottom: 6px; }
.yohb-landing .marketing-auth .club-creator-disclaimer p { margin: 0 0 10px; font-family: 'DM Sans', sans-serif; }

.yohb-landing .marketing-auth .profile-social-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: center;
    /* Clear separation + divider so each entry (inputs + its Public toggle)
       reads as one group and the toggle isn't ambiguous between entries. */
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 0.5px solid var(--marketing-card-border);
}

/* Public toggle sits full-width directly under this entry's inputs, tight to
   them (scoped to social rows so the Bio/location toggles keep their spacing). */
.yohb-landing .marketing-auth .profile-social-row .profile-toggle {
    grid-column: 1 / -1;
    margin: 2px 0 0;
}

/* Capacity & fees editor rows: Group / Fee / Capacity / Remove (the fee row
   gained the Capacity column in the 2026-06-12 attendance overhaul). */
.yohb-landing .marketing-auth .event-fee-row { grid-template-columns: 1.2fr 86px 86px auto; }
.yohb-landing .marketing-auth .event-fee-head {
    display: grid;
    grid-template-columns: 1.2fr 86px 86px auto;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--marketing-text-muted, #9A9A9A);
    margin-bottom: 6px;
}

.yohb-landing .marketing-auth .profile-social-row select,
.yohb-landing .marketing-auth select.form-control {
    width: 100%;
    box-sizing: border-box;
    background: var(--marketing-bg);
    border: 1px solid var(--marketing-card-border);
    border-radius: 8px;
    padding: 13px 16px;
    color: var(--marketing-text);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
}

.yohb-landing .marketing-auth .profile-link-btn {
    background: none;
    border: 0;
    color: var(--gp-blue);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 6px;
}

.yohb-landing .marketing-auth .profile-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

/* When the actions row holds only a spinner (e.g. AddVehicle step 1 during
   VIN lookup), make the spinner container span the row so its inner
   justify-content: center actually centers the spinner. Without this the
   container shrinks to spinner width and parks at flex-start (left). */
.yohb-landing .marketing-auth .profile-actions > .spinner-container {
    flex: 1 1 auto;
}

/* Secondary buttons (Back + Cancel) are ALWAYS hollow: transparent background,
   blue border, WHITE text. !important is REQUIRED — legacy app.css paints
   `.btn` filled blue with !important, which otherwise wins and fills these
   (the recurring "Back button isn't hollow" bug, root-caused 2026-06-11). */
.yohb-landing .marketing-auth .btn.btn-secondary {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 1.5px solid var(--gp-blue) !important;
}

/* .btn-cancel kept on markup for semantics; the white text it used to add is
   now the secondary default above. */

/* Danger zone on the Edit forms (Delete club / Delete event): a filled red
   action row below Cancel/Save. !important because legacy app.css `.btn`
   paints its background with !important. */
.yohb-landing .marketing-auth .yohb-danger-zone { margin-top: 12px; }

.yohb-landing .marketing-auth .btn.yohb-delete-btn {
    background: var(--gp-error) !important;
    border: 1.5px solid var(--gp-error);
    color: #FFFFFF !important;
    width: 100%;
}

/* Event schedule rows: the DATE spans the whole row; start + end time sit side
   by side beneath it (all four on one row didn't fit the card). Remove rides
   the times row. The fee rows (type + amount + Remove) reuse the social-row
   1fr 1fr auto grid as-is. */
.yohb-landing .marketing-auth .event-schedule-row {
    grid-template-columns: 1fr 1fr auto;
}

.yohb-landing .marketing-auth .event-schedule-row .event-schedule-date {
    grid-column: 1 / -1;
}

/* Club join-requirement + member-invite toggles read as primary content — white
   like the Activities grid labels, not the muted toggle gray. */
.yohb-landing .marketing-auth .profile-toggle.profile-toggle-bright { color: var(--marketing-text); }

.yohb-landing .marketing-auth .profile-laterlink {
    display: inline-block;
    margin-top: 14px;
    color: var(--marketing-text-muted);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color 0.15s ease;
}

.yohb-landing .marketing-auth .profile-laterlink:hover,
.yohb-landing .marketing-auth .profile-laterlink:focus {
    color: var(--gp-blue);
}

.yohb-landing .marketing-auth .profile-readonly {
    color: var(--marketing-text-muted);
    display: flex;
    align-items: center;
}

.profile-laterlink:hover {
    color: var(--gp-blue) !important;
}

.yohb-landing .marketing-auth .profile-view-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--marketing-card-border);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
}

.profile-view-row .value{
    display: flex;
}

.yohb-landing .marketing-auth .profile-view-row .label {
    color: var(--marketing-text-muted);
}

.yohb-landing .marketing-auth .profile-view-row .value {
    color: var(--marketing-text);
    text-align: right;
}

/* ============================================================
   PROFILE SETUP MODAL (global, app pages)
   ============================================================ */
.profile-setup-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.profile-setup-modal {
    width: 100%;
    max-width: 420px;
    background: var(--marketing-card-bg);
    border: 1px solid var(--marketing-card-border);
    border-radius: 14px;
    padding: 26px 24px;
    color: var(--marketing-text);
    font-family: 'DM Sans', sans-serif;
}

.profile-setup-modal h2 {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 22px;
    margin: 0 0 8px;
}

.profile-setup-modal p {
    /* Explicit font: FluentUI's reboot.css (loaded after ours) re-fonts bare p
       to Segoe via `p { font-family: var(--body-font) }` — inheritance loses. */
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--marketing-text-muted);
    line-height: 1.55;
    margin: 0 0 18px;
}

.profile-setup-modal .profile-setup-modal-actions {
    display: flex;
    gap: 10px;
}

.profile-setup-modal .btn {
    flex: 1;
    background: var(--gp-blue);
    color: #000000;
    border: 0;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

/* Same !important rationale as the marketing-auth secondary above — legacy
   app.css `.btn` otherwise paints this filled. */
.profile-setup-modal .btn.btn-secondary {
    background: transparent !important;
    color: var(--marketing-text-muted) !important;
    border: 1.5px solid var(--marketing-card-border) !important;
}

/* TEMPORARY — NavTests pages. Safe to delete with the NavTests folder. */
.yohb-landing .marketing-auth .navtest-list {
    color: var(--marketing-text-muted);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    padding-left: 18px;
}
.yohb-landing .marketing-auth .navtest-list li {
    margin-bottom: 16px;
}
.yohb-landing .marketing-auth .navtest-list a {
    color: var(--gp-blue);
    text-decoration: none;
    font-weight: 700;
}

/* ============================================================
   FOOTER (landing + static marketing pages)
   ============================================================ */
.yohb-landing .marketing-footer {
    border-top: 0.5px solid var(--marketing-card-border);
    padding: 40px 32px;
    position: relative;
    z-index: 1;
}

.yohb-landing .marketing-footer .footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.yohb-landing .marketing-footer .footer-logo {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 1.5px;
}

.yohb-landing .marketing-footer .footer-logo .yo { color: var(--marketing-text); }
.yohb-landing .marketing-footer .footer-logo .hb { color: var(--gp-blue); }

.yohb-landing .marketing-footer .footer-links {
    display: flex;
    gap: 24px;
}

.yohb-landing .marketing-footer .footer-links a {
    color: var(--marketing-text-muted);
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
    transition: color 0.2s ease;
}

.yohb-landing .marketing-footer .footer-links a:hover {
    color: var(--marketing-text);
}

.yohb-landing .marketing-footer .footer-copy {
    color: var(--marketing-text-faint);
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
}

/* ============================================================
   STATIC MARKETING PAGES (Terms/Privacy/Support/Contact)
   ============================================================ */
.yohb-landing .marketing-static-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 60px 32px 80px;
    position: relative;
    z-index: 1;
    color: var(--marketing-text);
}

.yohb-landing .marketing-static-page h1 {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 48px;
    letter-spacing: -0.3px;
    color: var(--marketing-text);
    margin-bottom: 8px;
}

.yohb-landing .marketing-static-page h2 {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.2px;
    color: var(--marketing-text);
    margin-top: 28px;
    margin-bottom: 10px;
}

.yohb-landing .marketing-static-page h3 {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--marketing-text-muted);
    margin-bottom: 24px;
}

.yohb-landing .marketing-static-page p {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.65;
    color: var(--marketing-text-muted);
    margin-bottom: 14px;
}

.yohb-landing .marketing-static-page p b,
.yohb-landing .marketing-static-page p strong {
    color: var(--marketing-text);
    font-weight: 600;
}

.yohb-landing .marketing-static-page ul {
    margin: 6px 0 14px 24px;
    color: var(--marketing-text-muted);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.65;
}

.yohb-landing .marketing-static-page ul li {
    margin-bottom: 6px;
}

/* Body reset for standalone static marketing pages */
.yohb-marketing-body {
    background: var(--marketing-bg);
    color: var(--marketing-text);
    margin: 0;
    overflow-x: hidden;
    font-family: 'DM Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Static page minimal top nav (logo only + sign in button) */
.yohb-landing .marketing-topnav {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(0, 0, 0, 0.65);
    border-bottom: 0.5px solid var(--marketing-card-border);
}

.yohb-landing .marketing-topnav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    box-sizing: border-box;
}

.yohb-landing .marketing-topnav .logo,
.yohb-landing .marketing-topnav .logo:link,
.yohb-landing .marketing-topnav .logo:visited,
.yohb-landing .marketing-topnav .logo:hover,
.yohb-landing .marketing-topnav .logo:focus,
.yohb-landing .marketing-topnav .logo:active {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 1.5px;
    text-decoration: none;
    line-height: 1;
    outline: none;
}

.yohb-landing .marketing-topnav .logo .yo,
.yohb-landing .marketing-topnav .logo:link .yo,
.yohb-landing .marketing-topnav .logo:visited .yo,
.yohb-landing .marketing-topnav .logo:hover .yo,
.yohb-landing .marketing-topnav .logo:focus .yo,
.yohb-landing .marketing-topnav .logo:active .yo {
    color: var(--marketing-text);
}

.yohb-landing .marketing-topnav .logo .hb,
.yohb-landing .marketing-topnav .logo:link .hb,
.yohb-landing .marketing-topnav .logo:visited .hb,
.yohb-landing .marketing-topnav .logo:hover .hb,
.yohb-landing .marketing-topnav .logo:focus .hb,
.yohb-landing .marketing-topnav .logo:active .hb {
    color: var(--gp-blue);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .yohb-landing .hero {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 48px 20px 72px;
    }

    .yohb-landing .hero h1 {
        font-size: 44px;
    }

    .yohb-landing .hero .subhead {
        font-size: 16px;
    }

    .yohb-landing .feature-pills {
        gap: 6px;
    }

    .yohb-landing .pill {
        padding: 4px 10px;
        font-size: 11px;
    }

    .yohb-landing .waitlist-form {
        flex-direction: column;
    }

    .yohb-landing .waitlist-form .marketing-btn {
        width: 100%;
        padding: 13px 20px;
    }

    .yohb-landing .phone {
        width: 280px;
        height: 580px;
    }

    .yohb-landing .trust-bar {
        padding: 24px 20px;
    }

    .yohb-landing .how-it-works,
    .yohb-landing .features,
    .yohb-landing .cta-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .yohb-landing .how-it-works,
    .yohb-landing .cta-section {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .yohb-landing .features {
        padding-bottom: 64px;
    }

    .yohb-landing .section-title {
        font-size: 32px;
    }

    .yohb-landing .steps,
    .yohb-landing .feature-grid {
        grid-template-columns: 1fr;
    }

    .yohb-landing .cta-section h2 {
        font-size: 36px;
    }

    .yohb-landing .marketing-footer .footer-inner {
        flex-direction: column;
        text-align: center;
    }

    .yohb-landing .marketing-footer .footer-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .yohb-landing .marketing-static-page {
        padding: 40px 20px 60px;
    }

    .yohb-landing .marketing-static-page h1 {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    .yohb-landing .hero h1 {
        font-size: 36px;
    }

    .yohb-landing .section-title {
        font-size: 28px;
    }

    .yohb-landing .cta-section h2 {
        font-size: 28px;
    }

    .yohb-landing .phone {
        width: 260px;
        height: 540px;
    }
}

/* ============================================================
   When the LANDING page (not just any .yohb-landing wrapper) is rendered,
   expand .page (which is normally capped at 700px in app.claude.css) so
   the marketing layout can be wider. Scoped to `.yohb-header-landing` —
   the stripped header NavMenu only emits on actual landing routes — so
   in-app pages that reuse the .marketing-auth card (ProfileSetup,
   AddVehicle, /Profile/{u}/Edit) keep the full 700px app chrome.
   ============================================================ */
body:has(.yohb-header-landing) .page {
    max-width: none;
}

/* Allow the landing header to grow taller for the SIGN IN / SIGN UP CTA.
   Other pages keep the fixed 56px height set in app.claude.css. */
body:has(.yohb-header-landing) .page > .header {
    height: auto !important;
    min-height: 56px;
}

/* ============================================================
   LOGGED-IN LOCKOUT (LoggedInLockout.razor)

   Shown on Activate/Login/SignUp/PasswordReset/ResendActivationEmail
   when the viewer is already signed in. Replaces the form area inside
   .marketing-auth-card with a "you're signed in" notice plus a user
   card and a Log Out button.
   ============================================================ */
.yohb-landing .marketing-auth .yohb-locked-out {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.yohb-landing .marketing-auth .yohb-locked-out-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--gp-card-border);
    border-radius: var(--gp-card-border-radius);
    background: var(--gp-card-bg);
}

.yohb-landing .marketing-auth .yohb-locked-out-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 48px;
    background: var(--gp-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
}

.yohb-landing .marketing-auth .yohb-locked-out-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.yohb-landing .marketing-auth .yohb-locked-out-name {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yohb-landing .marketing-auth .yohb-locked-out-handle {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--gp-muted);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}