/* ===== RESET ===== */
* {
    box-sizing: border-box;
}

/* ===== BODY ===== */
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: #020617;
    color: #E5E7EB;
}

/* ===== PAGE FRAME ===== */
.page-frame {
    margin: 20px;
    min-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    /* REAL BACKGROUND SYSTEM */
    background: radial-gradient(circle at 70% 30%, rgba(59,130,246,0.18), transparent 50%), linear-gradient(rgba(2,6,23,0.55), rgba(2,6,23,0.85)), url('/images/bg-city.jpg') center/cover no-repeat;
    border: 2px solid rgba(255,255,255,0.06);
    box-shadow: 0 40px 120px rgba(0,0,0,0.6), inset 0 0 80px rgba(59,130,246,0.05);
}

/* ===== NAV ===== */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 24px 60px;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo {
    width: 226px;
}

.nav-right {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

    .nav-right a {
        color: #E5E7EB;
        cursor: pointer;
        text-decoration: none;
    }

        .nav-right a:hover {
            color: white;
        }

.marketing-nav-link,
.btn-outline {
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(15,23,42,0.48);
    color: #E5E7EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.marketing-nav-link:hover,
.btn-outline:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.22);
    background: rgba(30,41,59,0.72);
    box-shadow: 0 12px 24px rgba(15,23,42,0.24);
}

.marketing-nav-link.active,
.btn-outline.active {
    border-color: rgba(96,165,250,0.5);
    background: linear-gradient(180deg, rgba(59,130,246,0.82), rgba(37,99,235,0.74));
    color: #F8FAFC;
    box-shadow: 0 12px 24px rgba(37,99,235,0.22);
}

/* ===== HERO ===== */
.hero {
    padding: 80px 80px 20px 80px;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 40px;
}

/* TEXT */
.hero h1 {
    font-size: 64px;
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: 20px;
    border: none;
}

.hero-title-frame {
    display: inline-block;
    padding: 20px 28px;
    margin-bottom: 20px;
    border: none;
    
    background: transparent;
}

    /* tighten text inside */
    .hero-title-frame h1 {
        margin: 0;
        font-size: 64px;
        font-weight: 700;
        line-height: 1.05;
        border: none;
        /* THIS removes the broken border issue */
        display: inline-block;
    }

.hero p {
    color: #9CA3AF;
    font-size: 18px;
    margin-bottom: 30px;
    max-width: 620px;
}

/* BUTTONS */
.hero-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

[data-sg-theme="light"] .page-frame {
    background:
        radial-gradient(circle at 70% 30%, rgba(59,130,246,0.12), transparent 50%),
        linear-gradient(rgba(241,245,249,0.80), rgba(226,232,240,0.92)),
        url('/images/bg-citylite.jpg') center/cover no-repeat;
    border-color: rgba(15,23,42,0.08);
    box-shadow: 0 26px 80px rgba(15,23,42,0.14), inset 0 0 60px rgba(59,130,246,0.04);
}

[data-sg-theme="light"] .feature,
[data-sg-theme="light"] .contact-form-card {
    background:
        linear-gradient(rgba(241,245,249,0.84), rgba(226,232,240,0.92)),
        url('/images/bg-citylite.jpg') center/cover no-repeat;
    border-color: rgba(15,23,42,0.08);
    box-shadow: 0 16px 44px rgba(15,23,42,0.14), inset 0 0 18px rgba(59,130,246,0.04);
}

[data-sg-theme="light"] .feature p,
[data-sg-theme="light"] .hero p,
[data-sg-theme="light"] .contact-form-card input::placeholder,
[data-sg-theme="light"] .contact-form-card textarea::placeholder {
    color: #475569;
}

[data-sg-theme="light"] .contact-form-card input,
[data-sg-theme="light"] .contact-form-card textarea {
    background: rgba(248,250,252,0.86);
    border-color: rgba(148,163,184,0.45);
    color: #0F172A;
}

/* ===== BUTTONS ===== */
.btn-primary {
    background: #3B82F6;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    color: white;
    cursor: pointer;
}

    .btn-primary:hover {
        box-shadow: 0 0 25px rgba(59,130,246,0.6);
    }

.btn-secondary {
    border: 1px solid #374151;
    background: transparent;
    padding: 12px 20px;
    border-radius: 10px;
    color: white;
}

.btn-outline {
    text-decoration: none;
}

.btn-outline:hover {
    color: white;
}

.login-page-body {
    min-height: calc(100vh - 110px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 24px 72px;
}

.login-page-card {
    width: 100%;
    max-width: 420px;
}

/* ===== HERO VISUAL ===== */
.hero-visual {
    position: relative;
}

/* GLOW (NOT CARD) */
.visual-glow {
    position: absolute;
    right: 0;
    top: 40px;
    width: 520px;
    height: 320px;
    background: radial-gradient(circle, rgba(59,130,246,0.25), transparent 70%);
    filter: blur(60px);
}

/* LAPTOP */
.hero-visual img {
    position: relative;
    width: 720px;
    max-width: 100%;
    display: block;
    transform: perspective(1400px) rotateY(-12deg) rotateX(2deg);
    
}

/* ===== FEATURES ===== */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 40px 80px 60px 80px;
}

.contact-form-card {
    width: min(100%, 760px);
    margin: 28px auto 0;
    padding: 28px;
    border-radius: 18px;
    background: linear-gradient(rgba(2,6,23,0.5), rgba(2,6,23,0.82)), url('/images/bg-city.jpg') center/cover no-repeat;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.35), inset 0 0 24px rgba(59,130,246,0.06);
    display: grid;
    gap: 16px;
    text-align: left;
}

.contact-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.contact-form-card input,
.contact-form-card textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,0.24);
    background: rgba(15,23,42,0.72);
    color: #F8FAFC;
    outline: none;
}

.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder {
    color: #94A3B8;
}

.contact-form-card input:focus,
.contact-form-card textarea:focus {
    border-color: rgba(96,165,250,0.72);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}

.contact-submit {
    width: 100%;
}

/* TRUE GLASS CARDS */
.feature {
    padding: 30px;
    border-radius: 16px;
    background: linear-gradient(rgba(2,6,23,0.45), rgba(2,6,23,0.75)), url('/images/bg-city.jpg') center/cover no-repeat;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 0 30px rgba(59,130,246,0.06);
    text-align: center;
    transition: all 0.25s ease;
}

    .feature:hover {
        transform: translateY(-6px);
        box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    }

    .feature img {
        width: 190px;
        margin-bottom: 20px;
    }

    .feature p {
        color: #9CA3AF;
    }

.link {
    display: inline-block;
    margin-top: 15px;
    color: #3B82F6;
}

/* ===== MARKETING UTILITY ===== */

/* Eyebrow text */
.mkt-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #60A5FA;
    margin-bottom: 10px;
}

/* Accent colour in headings */
.mkt-accent {
    background: linear-gradient(90deg, #3B82F6, #818CF8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Large CTA button */
.mkt-btn-lg {
    font-size: 15px !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Trust pills row under hero */
.mkt-trust-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.mkt-trust-pill {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(96,165,250,0.28);
    background: rgba(59,130,246,0.08);
    color: #93C5FD;
    font-size: 12px;
    font-weight: 500;
}

/* ===== MARKETING SECTIONS ===== */

.mkt-section {
    padding: 60px 80px;
}

.mkt-section--alt {
    background: rgba(255,255,255,0.015);
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.mkt-section-header {
    text-align: center;
    margin-bottom: 40px;
}

.mkt-section-header h2 {
    font-size: 32px;
    font-weight: 700;
    color: #F1F5F9;
    margin: 0 0 10px;
}

.mkt-section-header p {
    color: #94A3B8;
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto;
}

/* Section badge (role label) */
.mkt-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}

.mkt-section-badge--blue   { background:rgba(59,130,246,0.12); color:#60A5FA; border:1px solid rgba(59,130,246,0.3); }
.mkt-section-badge--green  { background:rgba(16,185,129,0.12); color:#34D399; border:1px solid rgba(16,185,129,0.3); }
.mkt-section-badge--purple { background:rgba(139,92,246,0.12); color:#A78BFA; border:1px solid rgba(139,92,246,0.3); }
.mkt-section-badge--orange { background:rgba(245,158,11,0.12); color:#FCD34D; border:1px solid rgba(245,158,11,0.3); }
.mkt-section-badge--red    { background:rgba(239,68,68,0.12);  color:#F87171; border:1px solid rgba(239,68,68,0.3);  }
.mkt-section-badge--teal   { background:rgba(20,184,166,0.12); color:#5EEAD4; border:1px solid rgba(20,184,166,0.3); }

/* ===== ROLE CARDS GRID ===== */

.mkt-role-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.mkt-role-card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border-radius: 16px;
    background: linear-gradient(rgba(2,6,23,0.45), rgba(2,6,23,0.75));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mkt-role-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    border-color: rgba(96,165,250,0.25);
}

.mkt-role-card__icon {
    font-size: 36px;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.mkt-role-card__icon--blue   { background: rgba(59,130,246,0.15); }
.mkt-role-card__icon--green  { background: rgba(16,185,129,0.15); }
.mkt-role-card__icon--purple { background: rgba(139,92,246,0.15); }
.mkt-role-card__icon--orange { background: rgba(245,158,11,0.15); }
.mkt-role-card__icon--red    { background: rgba(239,68,68,0.15);  }
.mkt-role-card__icon--teal   { background: rgba(20,184,166,0.15); }

.mkt-role-card__title {
    font-size: 17px;
    font-weight: 700;
    color: #F1F5F9;
    margin-bottom: 10px;
}

.mkt-role-card__body {
    font-size: 13px;
    color: #94A3B8;
    line-height: 1.6;
    flex: 1;
}

.mkt-role-card__cta {
    font-size: 13px;
    font-weight: 600;
    color: #60A5FA;
    margin-top: 16px;
}

/* ===== FEATURE CARDS AS LINKS ===== */

.mkt-feature-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.mkt-feature-link:hover {
    text-decoration: none;
    color: inherit;
}

.mkt-feature-emoji {
    font-size: 32px;
    margin-bottom: 12px;
}

/* Nav CTA variant */
.marketing-nav-link--cta {
    border-color: rgba(96,165,250,0.5) !important;
    background: linear-gradient(180deg, rgba(59,130,246,0.22), rgba(37,99,235,0.18)) !important;
    color: #93C5FD !important;
}

.marketing-nav-link--cta:hover {
    background: linear-gradient(180deg, rgba(59,130,246,0.82), rgba(37,99,235,0.74)) !important;
    color: #F8FAFC !important;
}

/* ===== CALLOUT BLOCKS ===== */

.mkt-callout {
    margin: 0 80px 48px;
    padding: 32px 40px;
    border-radius: 20px;
    background: linear-gradient(rgba(2,6,23,0.5), rgba(2,6,23,0.82));
    border: 1px solid rgba(96,165,250,0.15);
    box-shadow: 0 20px 60px rgba(0,0,0,0.35), inset 0 0 40px rgba(59,130,246,0.04);
}

.mkt-callout--right .mkt-callout__inner {
    flex-direction: row-reverse;
    text-align: right;
}

.mkt-callout__inner {
    display: flex;
    gap: 32px;
    align-items: center;
}

.mkt-callout__icon {
    font-size: 56px;
    flex-shrink: 0;
}

.mkt-callout h3 {
    font-size: 22px;
    font-weight: 700;
    color: #F1F5F9;
    margin: 0 0 10px;
}

.mkt-callout p {
    color: #94A3B8;
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
    max-width: 600px;
}

/* ===== FOOTER LINKS ===== */

.mkt-footer-link {
    color: #6B7280;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.15s;
}

.mkt-footer-link:hover {
    color: #E5E7EB;
}

/* ===== CONTACT LINKS ===== */

.mkt-contact-link {
    color: #60A5FA;
    text-decoration: none;
    font-size: 13px;
}

.mkt-contact-link:hover {
    color: #93C5FD;
    text-decoration: underline;
}

/* sg-mkt-input mirrors contact-form-card inputs without extra specificity */
.sg-mkt-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,0.24);
    background: rgba(15,23,42,0.72);
    color: #F8FAFC;
    outline: none;
    font-family: inherit;
    font-size: 14px;
}

.sg-mkt-input::placeholder { color: #94A3B8; }

.sg-mkt-input:focus {
    border-color: rgba(96,165,250,0.72);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1200px) {
    .mkt-role-grid { grid-template-columns: repeat(2, 1fr); }
    .mkt-section   { padding: 48px 48px; }
    .mkt-callout   { margin: 0 48px 48px; }
}

@media (max-width: 840px) {
    .mkt-role-grid { grid-template-columns: 1fr; }
    .mkt-section   { padding: 36px 24px; }
    .mkt-callout   { margin: 0 12px 32px; padding: 24px 20px; }
    .mkt-callout__inner,
    .mkt-callout--right .mkt-callout__inner { flex-direction: column; text-align: left; }
}

/* ===== STATS ===== */
.stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    padding: 60px 80px;
    text-align: center;
}

.stat h2 {
    font-size: 40px;
}

/* ===== CTA ===== */
.cta {
    text-align: center;
    padding: 80px;
}

/* ===== FOOTER ===== */
.footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 30px 60px;
    border-top: 1px solid rgba(255,255,255,0.08);
    color: #9CA3AF;
}

@media (max-width: 1200px) {
    .hero {
        padding: 64px 48px 20px;
    }

    .features,
    .stats,
    .cta {
        padding-left: 48px;
        padding-right: 48px;
    }

    .nav,
    .footer {
        padding-left: 48px;
        padding-right: 48px;
    }

    .hero-inner {
        grid-template-columns: 1fr;
    }

    .hero-text,
    .hero-visual {
        text-align: center;
    }

    .hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-visual img {
        margin: 0 auto;
        transform: none;
    }

    .contact-row {
        grid-template-columns: 1fr;
    }

    .visual-glow {
        right: 50%;
        top: 20px;
        width: min(520px, 90vw);
        transform: translateX(50%);
    }
}

@media (max-width: 840px) {
    .page-frame {
        margin: 12px;
        min-height: calc(100vh - 24px);
        border-radius: 18px;
    }

    .nav,
    .hero,
    .features,
    .stats,
    .cta,
    .footer {
        padding-left: 24px;
        padding-right: 24px;
    }

    .nav {
        padding-top: 20px;
        padding-bottom: 20px;
        justify-content: center;
    }

    .nav-left,
    .nav-right {
        width: 100%;
        justify-content: center;
    }

    .nav-right {
        gap: 12px;
    }

    .logo {
        width: min(226px, 58vw);
    }

    .hero {
        padding-top: 36px;
    }

    .hero-title-frame {
        padding: 0;
        margin-bottom: 16px;
    }

    .hero h1,
    .hero-title-frame h1 {
        font-size: clamp(36px, 11vw, 52px);
        line-height: 1.08;
    }

    .hero p {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary,
    .marketing-nav-link,
    .nav-right .btn-outline,
    .nav-right .btn-primary {
        width: 100%;
    }

    .login-page-body {
        min-height: auto;
        align-items: flex-start;
        padding-top: 12px;
    }

    .features,
    .stats {
        grid-template-columns: 1fr;
    }

    .feature {
        padding: 24px 20px;
    }

    .feature img {
        width: min(190px, 60vw);
    }

    .cta {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .cta h2 {
        font-size: 28px;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .cta .btn-primary {
        width: 100%;
        max-width: 360px;
    }

    .contact-form-card {
        width: 100%;
        padding: 20px;
    }

    .contact-form-card input,
    .contact-form-card textarea {
        font-size: 16px;
    }

    .footer {
        flex-direction: column;
        text-align: center;
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

/* ── Store badges (mobile app callout) ───────────────────────────────────────
   Apple's badge is the official artwork and must not be recoloured or redrawn.
   The Android one is ours on purpose: SafeGrid is not on Google Play yet, so a
   Play badge would misstate where the download comes from. Sized to match. */
.mkt-store-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 18px;
}
.mkt-store-badges a {
    display: inline-block;
    line-height: 0;
    border-radius: 8px;
    transition: transform .15s ease, opacity .15s ease;
}
.mkt-store-badges a:hover { transform: translateY(-2px); opacity: .88; }
.mkt-store-badges a:focus-visible { outline: 2px solid var(--sg-accent); outline-offset: 3px; }
.mkt-store-badges img { height: 47px; width: auto; display: block; }
.mkt-store-note {
    margin-top: 12px !important;
    font-size: 13px !important;
    color: var(--sg-muted);
    opacity: .85;
}
@media (max-width: 640px) {
    .mkt-store-badges img { height: 42px; }
}

/* ── Hero app badges ─────────────────────────────────────────────────────────
   The store badges also sit in the mobile-app callout further down the page;
   this is the above-the-fold copy of them, so getting the app never depends on
   the visitor scrolling. Sizing is a touch smaller than the callout so they
   read as secondary to the primary Register CTA above them. */
.mkt-hero-apps { margin-top: 18px; }
.mkt-hero-apps__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--sg-muted);
    opacity: .8;
    margin-bottom: 10px;
}
.mkt-store-badges--hero { margin-top: 0; gap: 12px; }
.mkt-store-badges--hero img { height: 44px; }
@media (max-width: 640px) {
    .mkt-hero-apps { margin-top: 22px; }
    .mkt-store-badges--hero img { height: 40px; }
}

/* ── Fold recovery on laptop screens ─────────────────────────────────────────
   Measured at 1366x700 (a very common laptop once browser chrome is removed):
   the nav WRAPPED onto two rows (195px tall) and the h1 ran to THREE lines,
   which together pushed even the primary "Register Your Organisation" CTA
   below the fold. Both causes are width-driven, so they are corrected by
   width. The vertical breathing room is trimmed by HEIGHT instead, so tall
   monitors keep the original airy proportions untouched. */
@media (min-width: 841px) and (max-width: 1500px) {
    .nav { padding: 16px 36px; gap: 14px; }
    .nav-right { gap: 10px; }
    .logo { width: 168px; }
    .marketing-nav-link,
    .nav-right .btn-outline,
    .nav-right .btn-primary { min-height: 38px; padding: 8px 13px; }
    .hero { padding-left: 36px; padding-right: 36px; }
    .hero h1,
    .hero-title-frame h1 { font-size: 50px; }
}

@media (min-width: 841px) and (max-height: 900px) {
    .hero { padding-top: 32px; padding-bottom: 12px; }
    .hero-title-frame { padding-top: 0; padding-bottom: 0; margin-bottom: 14px; }
    .mkt-eyebrow { margin-bottom: 8px; }
    .hero p { margin-bottom: 20px; }
    .mkt-hero-apps { margin-top: 14px; }
    .mkt-trust-row { margin-top: 16px; }
}

/* ── Ghost button (the hero's "Watch the demo") ──────────────────────────────
   Quieter than btn-secondary on purpose: the demo is the third choice in the
   hero, behind Register and Explore, and should not compete with them. */
.btn-ghost {
    background: transparent;
    color: var(--sg-text, #e2e8f0);
    border: 1px solid var(--sg-border, #334155);
    border-radius: 12px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,.06); border-color: var(--sg-accent, #3b82f6); }
.btn-ghost:focus-visible { outline: 2px solid var(--sg-accent, #3b82f6); outline-offset: 2px; }


/* ── PHONES, EVERY PUBLIC PAGE (5 Sep 2026, Jeremy: "all subsequent drill-down pages still have the
   card-in-card narrow body"). Scoped to the public layout so the logged-in app is untouched; desktop
   (>900px) unchanged. Home-specific tuning lives in home-showcase.css; this is the shared baseline. ── */
@media (max-width: 900px) {
    .safegrid-main-scroll--public { padding: 0 !important; border: 0 !important; border-radius: 0 !important; }
    .safegrid-main--public, .safegrid-content-row--public { padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
    .safegrid-main-scroll--public .page-frame { margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; max-width: 100% !important; overflow-x: hidden; }
    .safegrid-main-scroll--public .nav { padding: 10px 14px !important; }
    .safegrid-main-scroll--public .nav .logo { width: 150px; }
    .safegrid-main-scroll--public .hero { padding: 14px 14px 10px !important; }
    .safegrid-main-scroll--public .hero-inner { gap: 12px !important; }
    .safegrid-main-scroll--public .hero h1 { font-size: 30px !important; margin-bottom: 10px !important; }
    .safegrid-main-scroll--public .hero p { font-size: 15px !important; }
    .safegrid-main-scroll--public .mkt-section, .safegrid-main-scroll--public .mkt-section--alt { padding: 16px 8px 8px !important; }
    .safegrid-main-scroll--public .mkt-section-header { margin-bottom: 10px !important; }
    .safegrid-main-scroll--public .mkt-section-header h2 { font-size: 24px !important; margin-bottom: 4px !important; }
    .safegrid-main-scroll--public .mkt-section-header p { font-size: 14px !important; }
    .safegrid-main-scroll--public .features { padding: 4px 8px 16px !important; gap: 10px !important; grid-template-columns: 1fr !important; }
    .safegrid-main-scroll--public .feature { padding: 12px !important; border-radius: 12px !important; }
    .safegrid-main-scroll--public .feature h3 { font-size: 17px !important; margin: 0 0 4px !important; }
    .safegrid-main-scroll--public .feature p { font-size: 13.5px !important; margin: 4px 0 6px !important; }
    .safegrid-main-scroll--public .mkt-feature-emoji { font-size: 20px !important; margin-bottom: 4px !important; }
    .safegrid-main-scroll--public .mkt-role-grid { gap: 10px !important; padding: 0 8px 12px !important; grid-template-columns: 1fr !important; }
    .safegrid-main-scroll--public .mkt-role-card { padding: 14px !important; }
    .safegrid-main-scroll--public .mkt-callout { margin: 12px 8px !important; padding: 16px !important; }
    .safegrid-main-scroll--public .cta { padding: 24px 14px !important; }
    .safegrid-main-scroll--public .mkt-trust-row { display: none; }
    /* any content grid that would force the page wider than the phone */
    .safegrid-main-scroll--public [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .safegrid-main-scroll--public img { max-width: 100%; height: auto; }
    .safegrid-main-scroll--public table { display: block; overflow-x: auto; max-width: 100%; }
}

/* every page built on .page-frame is a public/marketing page (login, terms, support, join, find…):
   the same edge-to-edge treatment on phones, whatever layout row hosts it */
@media (max-width: 900px) {
    .safegrid-main-scroll:has(> .page-frame), .safegrid-main-scroll:has(.page-frame) { padding: 0 !important; }
    .page-frame { margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; max-width: 100% !important; overflow-x: hidden; }
    .page-frame .nav { padding: 10px 14px !important; }
    .page-frame .nav .logo { width: 150px; }
    .page-frame .hero { padding: 14px 14px 10px !important; }
    .page-frame .mkt-section, .page-frame .mkt-section--alt { padding: 16px 8px 8px !important; }
    .page-frame .cta { padding: 24px 14px !important; }
    .page-frame [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .page-frame [style*="min-width"] { min-width: 0 !important; }
    .page-frame img { max-width: 100%; height: auto; }
}