@import url('/assets/fonts/inter/inter.css');

/* ── Variables ───────────────────────────────── */

:root {
    --font:          'Inter', system-ui, -apple-system, sans-serif;
    --accent:        #00b4ff;
    --accent-hover:  #00a3e8;
    --accent-dim:    rgba(0, 180, 255, 0.12);
    --danger:        #ff3b30;
    --danger-dim:    rgba(255, 59, 48, 0.12);
    --success:       #1a9e5c;
    --success-dim:   rgba(26, 158, 92, 0.12);
    --warning:       #b45309;
    --warning-dim:   #fef3c7;
    --bg-card:       #ffffff;
    --bg-hover:      #f5f5f7;
    --border:        #d2d2d7;
    --border-light:  #e5e5ea;
    --text:          #1d1d1f;
    --text-muted:    #6e6e73;
    --text-dim:      #9a9a9e;
    --radius:        8px;
    --radius-sm:     4px;
    --radius-lg:     12px;
    --transition:    0.15s ease;
}

/* ── Reset ───────────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    color: #1d1d1f;
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover { color: var(--accent-hover); }

img, svg { display: block; max-width: 100%; }

button {
    font-family: var(--font);
    cursor: pointer;
    border: none;
    background: none;
}

input, textarea, select {
    font-family: var(--font);
    font-size: 0.9375rem;
}

ul, ol { list-style: none; }

/* ─────────────────────────────────────────────
   ga-landing.css
───────────────────────────────────────────── */

/* ── Page transition ─────────────────────────── */

@keyframes ga-page-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ga-hero, .ga-features, .ga-footer {
    animation: ga-page-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ga-features { animation-delay: 0.06s; }
.ga-footer   { animation-delay: 0.1s; position: relative; z-index: 1; }   /* below page content — see .ga-auth-content */

.ga-exiting .ga-hero,
.ga-exiting .ga-features,
.ga-exiting .ga-footer {
    animation: none;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

/* ── Global ───────────────────────────────────── */

.ga-landing {
    /* THE CANVAS IS GREY, CARDS ARE WHITE — not the other way round.
       Every card here is the Card Standard gradient (#ffffff -> #f5f5f7), so its top-left corner
       is pure white. On a white page that corner vanishes and only the shadow separates the card
       from the background, which is why the landing (grey hero) and the sign-in pages (white)
       looked like two different products. One canvas, and every card reads as raised.

       THE CANVAS MUST BE DARKER THAN THE GRADIENT'S END, NOT EQUAL TO IT. This was #f5f5f7 — the
       EXACT colour the Card Standard gradient finishes on — so a card's bottom-right corner was the
       same pixel value as the page behind it. The card dissolved into the canvas along its darker
       edge and the gradient read as absent; Vader reported the sign-in and create-account cards as
       "missing the gradient" and wondered whether it was his monitor. It was not.
       Fixing the white corner by darkening the page had simply moved the same bug to the opposite
       corner. #f0f0f3 clears BOTH ends: 15 levels below the gradient's white start, 5 below its
       grey finish, so the whole card reads as a raised surface rather than only half of it. */
    background: #f0f0f3;
    color: #1d1d1f;
    font-family: var(--font);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Top product nav ─────────────────────────── */

.ga-topnav {
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    height: 68px;
    position: relative;
    z-index: 201;
}

.ga-topnav-inner {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ga-topnav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ga-topnav-mobile-links { display: none; }

.ga-topnav-favicon {
    height: 28px;
    width: 28px;
    vertical-align: middle;
    border-radius: 6px;
}

.ga-topnav-wordmark { height: 48px; width: auto; }

.ga-topnav-links {
    display: flex;
    align-items: center;
    gap: 28px;
}

.ga-topnav-links a {
    font-size: 0.75rem;
    color: #1d1d1f;
    font-weight: 400;
    transition: color 0.15s;
    white-space: nowrap;
}

.ga-topnav-links a:hover { color: #00b4ff; }

/* Announced but not yet reachable (ga_product_links 'soon'). Deliberately NOT an <a> — there is
   nothing to click yet, so it must not look or behave like a link. */
.ga-topnav-soon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 400;
    color: #86868b;
    white-space: nowrap;
    cursor: default;
}

.ga-topnav-soon em {
    font-style: normal;
    font-size: 0.5625rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6e6e73;
    background: rgba(0,0,0,0.05);
    border-radius: 999px;
    padding: 2px 6px;
    line-height: 1;
}

/* ── Account sub-header ──────────────────────── */

.ga-subheader {
    background: rgba(255,255,255,0.72);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    height: 52px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 200;
    flex-direction: column;
    justify-content: center;
}

.ga-subheader-inner {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ga-subheader-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #1d1d1f;
    border-radius: 8px;
    transition: background 0.15s;
}

.ga-subheader-toggle:hover { background: rgba(0,0,0,0.06); }

.ga-subheader-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #1d1d1f;
}

.ga-subheader-chevron {
    color: #1d1d1f;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.ga-subheader.open .ga-subheader-chevron { transform: rotate(180deg); }

.ga-subheader-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.96);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.ga-subheader.open .ga-subheader-dropdown { max-height: 200px; }

.ga-subheader-dropdown a {
    font-size: 0.9375rem;
    color: #1d1d1f;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: background 0.15s;
}

.ga-subheader-dropdown a:last-child { border-bottom: none; }
.ga-subheader-dropdown a:hover { background: rgba(0,0,0,0.04); color: #1d1d1f; }

.ga-blur-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 150;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255,255,255,0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ga-subheader-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.ga-subheader-links a {
    font-size: 0.75rem;
    color: #1d1d1f;
    font-weight: 400;
    transition: color 0.15s;
    white-space: nowrap;
}

.ga-subheader-links a:hover { color: #00b4ff; }

/* ── Hero ────────────────────────────────────── */

.ga-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 68px 24px 80px;
    /* Was a grey band on a white page; now the same colour as the canvas, so it stops reading as
       a separate block and the landing simply IS the canvas. */
}

.ga-hero-logo { margin-bottom: 56px; }
.ga-hero-logo img { height: 100px; width: auto; }

.ga-hero h1 {
    font-size: 2.75rem;
    font-weight: 700;
    color: #1d1d1f;
    line-height: 1.08;
    letter-spacing: -0.03em;
    max-width: 640px;
    margin-bottom: 16px;
}

.ga-hero p {
    font-size: 1.0625rem;
    color: #1d1d1f;
    line-height: 1.6;
    max-width: 540px;
    margin-bottom: 28px;
}

/* ── Sign In button ──────────────────────────── */

.ga-btn-signin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #00b4ff;
    color: #fff;
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 10px 26px;
    border-radius: 8px;
    transition: background 0.15s;
    white-space: nowrap;
}

.ga-btn-signin:hover { background: #00a3e8; color: #fff; }
.ga-btn-block { width: 100%; justify-content: center; }

/* ── Features ────────────────────────────────── */

.ga-features {
    background: #fff;
    padding: 60px 24px 80px;
    flex: 1;
}

.ga-features-inner {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Landing feature cards — SAME shaded treatment as .ga-info-card (the platform card standard):
   135deg white->grey gradient, 14px radius, soft shadow + hairline. They keep their larger
   landing-page padding, but the surface must read as one card system across the whole product. */
.ga-feature-card {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f7 100%);
    border-radius: 14px;
    padding: 36px 32px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.08);
}

.ga-feature-icon { color: #00b4ff; margin-bottom: 16px; }

.ga-feature-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 12px;
}

.ga-feature-card p {
    font-size: 0.9375rem;
    color: #1d1d1f;
    line-height: 1.6;
}

/* ── Footer ──────────────────────────────────── */

.ga-footer {
    background: #f5f5f7;
    border-top: 1px solid #d2d2d7;
    padding: 20px 24px;
}

.ga-footer-inner {
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.ga-footer p { font-size: 0.75rem; color: #1d1d1f; }

.ga-footer-links { display: flex; gap: 18px; }

.ga-footer-links a {
    font-size: 0.75rem;
    color: #1d1d1f;
    transition: color 0.15s;
}

.ga-footer-links a:hover { text-decoration: underline; }

.ga-footer-sep {
    font-size: 0.75rem;
    color: #1d1d1f;
    opacity: 0.4;
    user-select: none;
}

/* ── Sign In card ────────────────────────────── */

.ga-signin-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 45px 24px 40px;
    /* No background — inherits the one canvas. Setting #fff here is what made login/register
       diverge from the landing page. */
    animation: ga-page-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ga-signin-card {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f7 100%);
    border-radius: 14px;
    padding: 44px 40px;
    width: 100%;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.07);
}

.ga-signin-logo { margin-bottom: 28px; text-align: center; }
.ga-signin-logo img { height: 48px; width: auto; display: block; margin: 0 auto; }

.ga-signin-card h1 {
    font-size: 1.625rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.ga-signin-sub { font-size: 0.9375rem; color: #6e6e73; margin-bottom: 28px; }

.ga-signin-error {
    background: #fff0f0;
    border: 1px solid #ffd0d0;
    color: #c00;
    font-size: 0.875rem;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: left;
}

.ga-signin-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.ga-signin-form .ga-btn-signin { margin-top: 6px; }

.ga-field { display: flex; flex-direction: column; gap: 5px; }

.ga-field label { font-size: 0.8125rem; font-weight: 500; color: #1d1d1f; }

.ga-field input {
    font-family: var(--font);
    font-size: 0.9375rem;
    color: #1d1d1f;
    background: #f5f5f7;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 11px 14px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ga-field input:focus {
    border-color: #00b4ff;
    box-shadow: 0 0 0 3px rgba(0,180,255,0.15);
    background: #fff;
}

.ga-field input::placeholder { color: #aaa; }

.ga-field select {
    width: 100%;
    padding: 11px 36px 11px 14px;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6e73' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--font);
    font-size: 0.9375rem;
    color: #1d1d1f;
    cursor: pointer;
    transition: border-color 0.15s;
}

.ga-field select:focus {
    outline: none;
    border-color: #00b4ff;
    box-shadow: 0 0 0 3px rgba(0,180,255,0.12);
}

.ga-form-options { display: flex; align-items: center; justify-content: space-between; }

.ga-checkbox-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8125rem;
    color: #1d1d1f;
    cursor: pointer;
    user-select: none;
}

.ga-checkbox-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: #00b4ff;
    cursor: pointer;
    margin: 0;
    border-radius: 4px;
}

.ga-forgot-link { font-size: 0.8125rem; color: #00b4ff; transition: color 0.15s; }
.ga-forgot-link:hover { color: #00a3e8; }

/* Hero call-to-action: Sign in / or / Create account. Constrained so the buttons and the "or"
   rule don't stretch across the full hero width — same visual rhythm as the sign-in card. */
.ga-hero-actions {
    max-width: 300px;
    margin: 0 auto;
    text-align: left;
}

.ga-signin-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 16px;
    color: #6e6e73;
    font-size: 0.8125rem;
}

.ga-signin-or::before,
.ga-signin-or::after { content: ''; flex: 1; height: 1px; background: #d2d2d7; }

.ga-btn-create {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 26px;
    border: 1.5px solid #d2d2d7;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1d1d1f;
    background: transparent;
    transition: border-color 0.15s, background 0.15s;
}

.ga-btn-create:hover { border-color: #00b4ff; background: rgba(0,180,255,0.04); color: #1d1d1f; }

.ga-signin-footer { font-size: 0.8125rem; color: #6e6e73; margin-top: 24px; }

/* ── Register page ───────────────────────────── */

.ga-register-card { max-width: 480px; }

.ga-register-already { font-size: 0.9375rem; color: #6e6e73; text-align: center; margin-bottom: 24px; line-height: 1.5; }
.ga-register-already a { color: #00b4ff; }
.ga-register-already a:hover { color: #00a3e8; }

.ga-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ga-form-row .ga-field, .ga-dob-row .ga-field, .ga-phone-row .ga-field { min-width: 0; }

.ga-dob-label { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 500; color: #1d1d1f; margin-bottom: 6px; }

.ga-dob-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #6e6e73;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    cursor: default;
    flex-shrink: 0;
}

.ga-dob-row { display: grid; grid-template-columns: 95px 1fr 100px; gap: 10px; }
.ga-phone-row { display: grid; grid-template-columns: 156px 1fr; gap: 10px; }
.ga-form-divider { height: 1px; background: #e8e8ed; margin: 4px 0 14px; }

/* ── Password strength ───────────────────────── */

.ga-strength-panel {
    display: none;
    position: absolute;
    left: 0; right: 0;
    bottom: calc(100% + 6px);
    z-index: 50;
    background: #f5f5f7;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.ga-strength-panel.visible { display: block; }
.ga-strength-header { font-size: 0.875rem; font-weight: 600; color: #1d1d1f; margin-bottom: 8px; }
.ga-strength-bar { height: 4px; background: #d2d2d7; border-radius: 2px; margin-bottom: 12px; overflow: hidden; }
.ga-strength-fill { height: 100%; width: 0; border-radius: 2px; transition: width 0.3s ease, background 0.3s ease; }
.ga-strength-reqs-title { font-size: 0.8125rem; font-weight: 600; color: #1d1d1f; margin-bottom: 6px; }
.ga-strength-req { font-size: 0.8125rem; color: #6e6e73; padding: 2px 0 2px 18px; position: relative; }
.ga-strength-req::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: #d2d2d7; }
.ga-strength-req.met { color: #1d8348; }
.ga-strength-req.met::before { content: '✓'; background: none; font-size: 0.75rem; font-weight: 700; color: #1d8348; width: auto; height: auto; border-radius: 0; top: 48%; }
.ga-strength-note { font-size: 0.8rem; color: #6e6e73; margin-top: 10px; line-height: 1.4; }

/* ── Field validation ────────────────────────── */

.ga-field.has-error input, .ga-field.has-error select { border-color: #e74c3c; background: #fff5f5; }
.ga-field.has-error input::placeholder { color: #e74c3c; }
.ga-field-error { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; color: #e74c3c; margin-top: 5px; }
.ga-field-error::before { content: ''; display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #e74c3c; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ctext x='7' y='11' text-anchor='middle' font-size='9' font-family='sans-serif' fill='%23e74c3c'%3Ei%3C/text%3E%3C/svg%3E") center/contain no-repeat; }

/* ── Email prefix input ──────────────────────── */

.ga-email-prefix-wrap { display: flex; align-items: center; border: 1px solid #d2d2d7; border-radius: 8px; background: #fff; overflow: hidden; transition: border-color 0.15s; }
.ga-email-prefix-wrap:focus-within { border-color: #00b4ff; box-shadow: 0 0 0 3px rgba(0,180,255,0.12); }
.ga-email-prefix-wrap input { flex: 1; border: none; outline: none; padding: 11px 0 11px 14px; font-size: 0.9375rem; background: transparent; min-width: 0; }
.ga-email-suffix { padding: 11px 14px 11px 4px; font-size: 0.9375rem; color: #6e6e73; white-space: nowrap; user-select: none; }
.has-error .ga-email-prefix-wrap { border-color: #ff3b30; }

/* ── OTP page ────────────────────────────────── */

.ga-otp-wrap { display: flex; gap: 10px; justify-content: center; margin: 28px 0 8px; }
.ga-otp-input { width: 52px; height: 60px; text-align: center; font-size: 1.5rem; font-weight: 500; font-family: var(--font); color: #1d1d1f; background: #fff; border: 1.5px solid #d2d2d7; border-radius: 8px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; caret-color: transparent; }
.ga-otp-input:focus { border-color: #00b4ff; box-shadow: 0 0 0 3px rgba(0,180,255,0.15); }
.ga-otp-input.filled { border-color: #1d1d1f; }
.ga-otp-links { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.ga-otp-links a { font-size: 0.9375rem; color: #00b4ff; }
.ga-otp-links a:hover { color: #00a3e8; }
.ga-otp-masked { font-size: 0.9375rem; color: #6e6e73; margin-bottom: 0; }

/* ── Responsive (landing) ────────────────────── */

@media (min-width: 2560px) {
    .ga-hero h1 { font-size: 4rem; }
    .ga-hero { padding: 100px 24px 100px; }
    .ga-hero-logo img { height: 140px; }
    .ga-feature-card { padding: 44px 40px; }
    .ga-feature-card h3 { font-size: 1.375rem; }
    .ga-feature-card p { font-size: 1.0625rem; }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .ga-hero h1 { font-size: 3.5rem; }
    .ga-hero-logo img { height: 120px; }
}

@media (max-width: 1023px) {
    .ga-topnav-links { gap: 18px; }
    .ga-hero { padding: 52px 24px 52px; }
    .ga-hero h1 { font-size: 2.25rem; }
    .ga-hero-logo img { height: 80px; }
    .ga-features-inner { gap: 14px; }
    .ga-feature-card { padding: 24px; }
}

@media (max-width: 767px) {
    .ga-topnav-links { display: none; }
    .ga-topnav-mobile-links { display: flex; align-items: center; gap: 8px; }
    .ga-topnav-soon em { display: none; }   /* no room for the pill — the muted colour says it */
    .ga-topnav-mobile-links a { font-size: 0.75rem; color: #1d1d1f; text-decoration: none; }
    .ga-topnav-mobile-links a:hover { color: #00b4ff; }
    .ga-topnav-sep { font-size: 0.6875rem; color: #d2d2d7; }
    .ga-subheader-links { display: none; }
    .ga-subheader-toggle { display: flex; }
    .ga-hero { padding: 40px 20px 48px; }
    .ga-hero h1 { font-size: 1.875rem; }
    .ga-hero p { font-size: 0.9375rem; }
    .ga-hero-logo img { height: 70px; }
    .ga-hero-logo { margin-bottom: 32px; }
    .ga-features-inner { grid-template-columns: 1fr; max-width: 480px; }
    .ga-footer-inner { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
    .ga-footer-links { order: -1; flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 479px) {
    .ga-topnav { height: 44px; }
    /* The wordmark stayed at its desktop 48px while the bar shrank to 44px, so the logo bled past
       BOTH borders — it sat flush against the top edge and overlapped the sub-header rule below.
       It read as "no margin"; the 20px side padding was there all along. 26px leaves 9px clear
       top and bottom, and buys back the width the third product link needs at 375px. */
    .ga-topnav-wordmark { height: 26px; }
    .ga-topnav-mobile-links { gap: 6px; }
    .ga-topnav-mobile-links a, .ga-topnav-soon { font-size: 0.6875rem; }
    .ga-subheader { height: 44px; }
    .ga-subheader-title { font-size: 0.9375rem; }
    .ga-hero h1 { font-size: 1.625rem; }
    .ga-hero p { font-size: 0.875rem; }
    .ga-hero-logo img { height: 56px; }
    .ga-feature-card { padding: 20px; }
    .ga-feature-card h3 { font-size: 0.9375rem; }
    .ga-feature-card p { font-size: 0.875rem; }
    .ga-btn-signin { width: 100%; justify-content: center; }
    .ga-footer-links { flex-wrap: wrap; gap: 10px; }
    .ga-signin-card { padding: 32px 24px; }
    .ga-form-row { grid-template-columns: 1fr; }
    .ga-dob-row  { grid-template-columns: 1fr 1fr 1fr; }
    .ga-phone-row { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
    .ga-form-row { grid-template-columns: 1fr; }
    .ga-dob-row  { grid-template-columns: 1fr 1fr 1fr; }
    .ga-phone-row { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
   accounts.css
───────────────────────────────────────────── */

body.ga-auth {
    --bg-card:      #ffffff;
    --bg-hover:     #f5f5f7;
    --border:       #d2d2d7;
    --border-light: #e5e5ea;
    --text:         #1d1d1f;
    --text-muted:   #6e6e73;
    --text-dim:     #9a9a9e;
    background:     #ffffff;
}

/* ── Modal ───────────────────────────────────── */

@keyframes ga-modal-backdrop-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ga-modal-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ga-modal-in  { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes ga-modal-out { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.96) translateY(6px); } }

.ga-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 9000; display: flex; align-items: center; justify-content: center; animation: ga-modal-backdrop-in 0.15s ease forwards; }
.ga-modal-backdrop.is-closing { animation: ga-modal-backdrop-out 0.15s ease forwards; }
.ga-modal { background: #fff; border-radius: 8px; padding: 28px 24px 20px; width: 340px; max-width: calc(100vw - 40px); box-shadow: 0 12px 48px rgba(0,0,0,0.15), 0 0 0 0.5px rgba(0,0,0,0.07); animation: ga-modal-in 0.18s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.ga-modal-backdrop.is-closing .ga-modal { animation: ga-modal-out 0.15s ease forwards; }
.ga-modal-title { font-size: 1rem; font-weight: 600; color: #1d1d1f; margin-bottom: 6px; }
.ga-modal-msg { font-size: 0.875rem; color: #6e6e73; line-height: 1.5; margin-bottom: 22px; }
.ga-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ga-modal-btn-cancel { font-size: 0.875rem; font-weight: 500; color: #6e6e73; background: none; border: 1px solid #d2d2d7; border-radius: 8px; padding: 7px 18px; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.ga-modal-btn-cancel:hover { border-color: #aeaeb2; color: #1d1d1f; }
.ga-modal-btn-confirm { font-size: 0.875rem; font-weight: 500; color: #fff; background: #00b4ff; border: none; border-radius: 8px; padding: 7px 18px; cursor: pointer; transition: background 0.15s; }
.ga-modal-btn-confirm:hover { background: #009fd8; }
.ga-modal-btn-confirm.ga-modal-danger { background: #ff3b30; }
.ga-modal-btn-confirm.ga-modal-danger:hover { background: #d62f25; }

/* ── Subheader auth extras ───────────────────── */

.ga-subheader-meta { font-size: 0.75rem; color: #6e6e73; white-space: nowrap; }
a.ga-subheader-title { text-decoration: none; color: inherit; transition: opacity 0.15s; }
a.ga-subheader-title:hover { opacity: 0.75; }
.ga-signout-btn { font-size: 0.75rem; font-weight: 500; color: #fff; background: var(--accent); padding: 5px 16px; border-radius: 8px; text-decoration: none; transition: background 0.15s; }
.ga-signout-btn:hover { background: var(--accent-hover); color: #fff; }

/* The "Acting as <company>" hat switcher and its banner lived here. Removed 2026-07-26 (Vader):
   Accounts is PERSONAL account settings — the only company action here is CREATING one. Everything
   else a company needs lives in that person's own BOS. The module is already the context, so a
   switcher had nothing to disambiguate. Deleted with switch-context.php + ga_acting_context(). */

/* ── Auth layout ─────────────────────────────── */

.ga-auth-body { flex: 1; padding: 24px 20px 24px; }
.ga-auth-inner { max-width: 1024px; margin: 0 auto; display: flex; gap: 52px; align-items: flex-start; }
.ga-auth-sidebar { width: 196px; flex-shrink: 0; }
.ga-auth-content { flex: 1; min-width: 0; animation: ga-page-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    /* z-index ABOVE the footer. Not a bigger number for its own sake: ga-page-in animates
       `transform`, and with fill-mode `both` that transform is still applied when the animation
       ends — a non-none transform CREATES A STACKING CONTEXT. So .ga-auth-content and .ga-footer
       are both stacking contexts at z-index:auto, and the painting order between them is DOM
       order, which the footer wins by being later. A dropdown inside the content could raise its
       z-index to a million and still render underneath, because it was competing inside its own
       context, not against the footer. Giving both an explicit order settles it. */
    position: relative; z-index: 2; }

/* ── Sidebar avatar ──────────────────────────── */

.ga-auth-avatar { text-align: center; margin-bottom: 20px; padding-bottom: 20px; }
.ga-avatar-circle { position: relative; width: 68px; height: 68px; border-radius: 50%; background: #d1d1d6; color: #6e6e73; font-size: 1.375rem; font-weight: 500; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; letter-spacing: -0.02em; cursor: pointer; overflow: hidden; }
.ga-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ga-avatar-overlay { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.18s; color: #fff; font-size: 0.625rem; font-weight: 500; text-align: center; padding: 8px; line-height: 1.3; }
.ga-avatar-circle:hover .ga-avatar-overlay { opacity: 1; }
.ga-avatar-overlay .ti { font-size: 1.25rem; }
.ga-avatar-progress-wrap { width: 80px; height: 3px; background: #e5e5ea; border-radius: 2px; margin: 0 auto 8px; overflow: hidden; }
.ga-avatar-progress-bar { height: 100%; width: 0%; background: #00b4ff; border-radius: 2px; transition: width 0.1s linear; }
.ga-avatar-save-row { display: flex; gap: 6px; justify-content: center; margin-bottom: 6px; }
.ga-avatar-save-btn { font-size: 0.75rem; font-weight: 500; color: #fff; background: #00b4ff; border: none; border-radius: 8px; padding: 4px 14px; cursor: pointer; transition: background 0.15s; }
.ga-avatar-save-btn:hover { background: #009fd8; }
.ga-avatar-cancel-btn { font-size: 0.75rem; font-weight: 500; color: #6e6e73; background: none; border: 1px solid #d2d2d7; border-radius: 8px; padding: 4px 14px; cursor: pointer; transition: border-color 0.15s; }
.ga-avatar-cancel-btn:hover { border-color: #aeaeb2; }
.ga-avatar-name { font-size: 0.875rem; font-weight: 500; color: #1d1d1f; margin-bottom: 3px; }
.ga-avatar-email { font-size: 0.6875rem; color: #6e6e73; word-break: break-all; line-height: 1.4; }
.ga-avatar-uin { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 0.625rem; color: #aeaeb2; margin-top: 5px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.ga-uin-copy { background: none; border: none; padding: 0; cursor: pointer; color: #aeaeb2; line-height: 1; display: flex; align-items: center; transition: color 0.15s; }
.ga-uin-copy:hover { color: #1d1d1f; }
.ga-uin-copy .ti { font-size: 0.75rem; }
.ga-avatar-handle { font-size: 0.6875rem; color: #00b4ff; margin-top: 2px; font-weight: 500; }

.ga-sidebar-meta { margin-top: 12px; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.ga-sidebar-kyc-row { display: flex; align-items: center; justify-content: space-between; }
.ga-sidebar-meta-label { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #aeaeb2; }
.ga-sidebar-progress-row { display: flex; flex-direction: column; gap: 5px; }
.ga-sidebar-progress-header { display: flex; align-items: center; justify-content: space-between; }
.ga-sidebar-progress-pct { font-size: 0.625rem; font-weight: 600; color: #6e6e73; }
.ga-sidebar-progress-wrap { height: 4px; background: #e5e5ea; border-radius: 2px; overflow: hidden; }
.ga-sidebar-progress-bar { height: 100%; background: #00b4ff; border-radius: 2px; transition: width 0.4s ease; }

/* ── Sidebar nav ─────────────────────────────── */

.ga-auth-nav { border-top: 0.5px solid #d2d2d7; }
.ga-auth-nav a { display: block; padding: 9px 0; font-size: 0.8125rem; color: #1d1d1f; text-decoration: none; border-bottom: 0.5px solid #e5e5ea; transition: color 0.12s; }
.ga-auth-nav a.active { color: #00b4ff; font-weight: 500; }
.ga-auth-nav a:hover:not(.active):not(.ga-auth-signout) { color: #00b4ff; }
.ga-nav-group { display: flex; align-items: center; justify-content: space-between; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #9a9a9e; padding: 14px 0 4px; cursor: pointer; border-bottom: none; user-select: none; }
.ga-nav-group:hover { color: #6e6e73; }
.ga-nav-chevron { font-size: 0.75rem; transition: transform 0.2s ease; }
.ga-nav-group.open .ga-nav-chevron { transform: rotate(180deg); }
.ga-nav-section { overflow: hidden; max-height: 0; transition: max-height 0.25s ease; }
.ga-nav-section.open { max-height: 400px; }
.ga-auth-signout { margin-top: 8px; border-bottom: none !important; color: #ff4444 !important; }
.ga-auth-signout:hover { color: #ff2222 !important; }

/* ── Breadcrumb ──────────────────────────────── */

.ga-breadcrumb { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; color: #aeaeb2; margin-bottom: 18px; }
.ga-breadcrumb a { color: #aeaeb2; text-decoration: none; transition: color 0.12s; }
.ga-breadcrumb a:hover { color: #00b4ff; }
.ga-breadcrumb-sep { font-size: 0.625rem; color: #d2d2d7; }
.ga-breadcrumb-current { color: #6e6e73; font-weight: 500; }

/* ── Page heading ────────────────────────────── */

.ga-auth-page-title { font-size: 1.375rem; font-weight: 500; color: #1d1d1f; letter-spacing: -0.02em; margin-bottom: 5px; }
.ga-auth-page-desc { font-size: 0.8125rem; color: #6e6e73; line-height: 1.5; margin-bottom: 24px; }

/* ── Info cards ──────────────────────────────── */

.ga-cards-section-label { grid-column: 1 / -1; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #9a9a9e; margin-top: 4px; }

.ga-info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ga-info-card { background: linear-gradient(135deg, #ffffff 0%, #f5f5f7 100%); border-radius: 14px; padding: 20px; display: flex; justify-content: space-between; align-items: flex-start; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.08); transition: box-shadow 0.15s; -webkit-user-select: none; user-select: none; }
.ga-info-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.10), 0 0 0 0.5px rgba(0,0,0,0.08); }
.ga-info-card.ga-card-full { grid-column: 1 / -1; }
.ga-info-card-left { flex: 1; min-width: 0; }
.ga-info-card-label { font-size: 0.9375rem; font-weight: 600; color: #1d1d1f; margin-bottom: 5px; letter-spacing: -0.01em; }
.ga-info-card-value { font-size: 0.875rem; color: #6e6e73; word-break: break-word; font-weight: 400; }
.ga-info-card-badge { display: inline-block; font-size: 0.6875rem; background: #e6f9f0; color: #0f6e56; padding: 2px 8px; border-radius: 6px; }
.ga-badge-unverified { background: #fff3e0; color: #b45309; }
a.ga-badge-unverified { text-decoration: none; transition: background 0.15s; }
a.ga-badge-unverified:hover { background: #fde68a; color: #92400e; }
.ga-info-card-value-inline { display: flex; align-items: center; gap: 8px; }
.ga-info-card-secondary { font-size: 0.8125rem; color: #aeaeb2; margin-top: 4px; }
.ga-info-card-icon { font-size: 1.375rem; color: #00b4ff; flex-shrink: 0; margin-left: 14px; }
.ga-info-card-right-col { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; margin-left: 14px; }
.ga-info-card-right-col .ga-info-card-icon { margin-left: 0; }

/* ── Device expand ───────────────────────────── */

.ga-device-header { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
.ga-device-detail { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.07); }
.ga-info-card[data-expand].is-expanded .ga-device-detail { display: block; animation: ga-panel-in 0.25s ease forwards; }
.ga-device-chevron { color: #aeaeb2; transition: transform 0.25s; flex-shrink: 0; margin-top: 2px; }
.ga-info-card[data-expand].is-expanded .ga-device-chevron { transform: rotate(180deg); }

/* ── Inline card edit panel ──────────────────── */

@keyframes ga-panel-in  { from { opacity: 0; transform: translateY(6px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes ga-panel-out { from { opacity: 1; transform: translateY(0); }    to { opacity: 0; transform: translateY(6px); } }
@keyframes ga-content-out { from { opacity: 1; transform: translateY(0); }  to { opacity: 0; transform: translateY(-5px); } }
@keyframes ga-content-in  { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.ga-info-card.ga-card-opening { pointer-events: none; }
.ga-info-card.ga-card-opening > .ga-info-card-left,
.ga-info-card.ga-card-opening > .ga-info-card-icon { animation: ga-content-out 1s ease forwards; }
.ga-info-card.ga-card-expanded { cursor: default; flex-direction: column; align-items: stretch; }
.ga-info-card.ga-card-expanded > .ga-info-card-left,
.ga-info-card.ga-card-expanded > .ga-info-card-icon { display: none; }
.ga-info-card.ga-card-restoring > .ga-info-card-left,
.ga-info-card.ga-card-restoring > .ga-info-card-icon { animation: ga-content-in 1s ease forwards; }
.ga-card-form { animation: ga-panel-in 1s ease forwards; }
.ga-card-form.is-closing { animation: ga-panel-out 1s ease forwards; pointer-events: none; }

.ga-address-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ga-info-card-cta { color: #00b4ff !important; }

.ga-handle-status { font-size: 0.8125rem; margin-top: 6px; min-height: 18px; }
.ga-handle-checking  { color: #9a9a9e; }
.ga-handle-available { color: #1a9e5c; font-weight: 500; }
.ga-handle-taken     { color: #e53e3e; font-weight: 500; }
.ga-handle-invalid   { color: #e53e3e; }

.ga-handle-input-wrap { display: flex; align-items: center; background: var(--bg-hover); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; }
.ga-handle-input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,180,255,0.15); }
.ga-handle-prefix { padding: 0 10px; font-size: 0.9375rem; font-weight: 500; color: #00b4ff; flex-shrink: 0; user-select: none; }
.ga-handle-input { border: none !important; box-shadow: none !important; background: transparent !important; padding-left: 0 !important; flex: 1; }

.ga-edit-warning { display: flex; align-items: center; gap: 12px; font-size: 0.8125rem; color: #b45309; background: #fef3c7; border-radius: 8px; padding: 9px 14px; margin-bottom: 14px; }
.ga-edit-discard-btn { font-size: 0.8125rem; font-weight: 500; color: #b45309; background: none; border: 1px solid #d97706; border-radius: 8px; padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.ga-edit-discard-btn:hover { background: #fde68a; }
.ga-edit-panel-title { font-size: 0.875rem; font-weight: 500; color: #1d1d1f; margin-bottom: 16px; }
.ga-edit-actions { display: flex; gap: 10px; margin-top: 20px; }

/* ── Activity timeline ───────────────────────── */

.activity-list { display: flex; flex-direction: column; }
.activity-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: none; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0; }
.activity-action { font-size: 0.875rem; font-weight: 500; color: var(--text); }
.activity-meta { font-size: 0.8125rem; color: var(--text-muted); margin-top: 2px; }

/* ── Forms ───────────────────────────────────── */

.form-group { margin-bottom: 16px; }
.form-group.mb-0 { margin-bottom: 0; }
.form-label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; }
.form-control { display: block; width: 100%; padding: 9px 12px; font-size: 0.875rem; color: var(--text); background: var(--bg-hover); border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font); transition: border-color 0.15s, box-shadow 0.15s; }
.form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,180,255,0.15); }
.form-control:disabled { opacity: 0.5; cursor: not-allowed; }
.form-hint { display: block; font-size: 0.75rem; color: var(--text-dim); margin-top: 5px; }

/* ── Alerts ──────────────────────────────────── */

.alert { padding: 12px 16px; border-radius: var(--radius); font-size: 0.875rem; margin-bottom: 20px; }
.alert-success { background: var(--success-dim); color: var(--success); border: 1px solid rgba(26,158,92,0.2); }
.alert-danger  { background: var(--danger-dim);  color: var(--danger);  border: 1px solid rgba(255,59,48,0.2); }

/* ── Buttons ─────────────────────────────────── */

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; font-size: 0.875rem; font-weight: 500; font-family: var(--font); border-radius: var(--radius); border: none; cursor: pointer; text-decoration: none; transition: all 0.15s; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); background: var(--bg-hover); }
.btn-sm { padding: 6px 14px; font-size: 0.8125rem; }

/* ── Card saved flash ────────────────────────── */

@keyframes ga-card-saved-flash {
    0%   { box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.08), inset 0 0 0 1000px rgba(52,199,89,0); }
    20%  { box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(52,199,89,0.3),  inset 0 0 0 1000px rgba(52,199,89,0.12); }
    60%  { box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(52,199,89,0.3),  inset 0 0 0 1000px rgba(52,199,89,0.12); }
    100% { box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.08), inset 0 0 0 1000px rgba(52,199,89,0); }
}

.ga-info-card.ga-card-saved { animation: ga-card-saved-flash 2s ease forwards; }

/* ── Email settings ──────────────────────────── */

.ga-email-section { margin-bottom: 4px; }
.ga-email-section-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #9a9a9e; margin-bottom: 8px; }
.ga-email-input-row, .ga-email-otp-row { display: flex; gap: 8px; align-items: center; }
.ga-email-input-row .form-control, .ga-email-otp-row .form-control { flex: 1; min-width: 0; margin-bottom: 0; }
.ga-email-otp-row .form-control { letter-spacing: 0.15em; font-size: 1rem; font-weight: 500; text-align: center; }
.ga-email-otp-btn { flex-shrink: 0; font-size: 0.8125rem; font-weight: 500; color: #fff; background: #00b4ff; border: none; border-radius: 8px; padding: 8px 14px; cursor: pointer; white-space: nowrap; transition: background 0.15s; }
.ga-email-otp-btn:hover:not(:disabled) { background: #009fd8; }
.ga-email-otp-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ga-email-verify-btn { background: #1a9e5c; }
.ga-email-verify-btn:hover:not(:disabled) { background: #177a48; }
.ga-email-divider { height: 0.5px; background: #e5e5ea; margin: 16px 0; }

/* ── Responsive (auth) ───────────────────────── */

@media (min-width: 2560px) {
    .ga-auth-inner { max-width: 1400px; gap: 80px; }
    .ga-auth-sidebar { width: 240px; }
    .ga-auth-page-title { font-size: 1.75rem; }
    .ga-info-card { padding: 28px; }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .ga-auth-inner { max-width: 1200px; gap: 64px; }
    .ga-auth-sidebar { width: 220px; }
    .ga-auth-page-title { font-size: 1.5rem; }
}

@media (max-width: 1023px) {
    .ga-auth-inner { gap: 32px; }
    .ga-auth-sidebar { width: 172px; }
    .ga-auth-body { padding: 36px 20px 52px; }
    .ga-auth-page-title { font-size: 1.25rem; }
}

.ga-sidebar-toggle { display: none; }

@media (max-width: 767px) {
    .ga-subheader-meta { display: none; }
    .ga-auth-body { padding: 24px 16px 48px; }
    .ga-auth-inner { flex-direction: column; gap: 0; }
    .ga-auth-sidebar { width: 100%; padding-bottom: 16px; border-bottom: 0.5px solid #d2d2d7; margin-bottom: 24px; }
    .ga-auth-avatar { display: flex; flex-direction: row; align-items: center; gap: 12px; text-align: left; margin-bottom: 0; padding-bottom: 0; }
    .ga-avatar-circle { width: 48px; height: 48px; font-size: 1.0625rem; flex-shrink: 0; margin: 0; }
    .ga-avatar-text { flex: 1; min-width: 0; }
    .ga-avatar-name   { font-size: 0.8125rem; margin-bottom: 2px; }
    .ga-avatar-email  { font-size: 0.625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ga-avatar-uin    { justify-content: flex-start; margin-top: 3px; }
    .ga-avatar-handle { margin-top: 1px; }
    .ga-sidebar-meta  { display: none; }
    .ga-sidebar-toggle { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border: 1px solid #d2d2d7; border-radius: 8px; background: none; color: #1d1d1f; cursor: pointer; font-size: 1.125rem; transition: background 0.15s, border-color 0.15s; }
    .ga-sidebar-toggle:hover { background: #f5f5f7; border-color: #aeaeb2; }
    .ga-sidebar-toggle.is-open { background: #f5f5f7; border-color: #00b4ff; color: #00b4ff; }
    .ga-auth-nav { display: none; }
    .ga-auth-nav.is-open { display: block; padding-top: 8px; animation: ga-page-in 0.2s ease both; }
    .ga-auth-content { width: 100%; }
    .ga-info-cards { grid-template-columns: 1fr; }
    .ga-address-row { grid-template-columns: 1fr; }
    .ga-auth-page-title { font-size: 1.25rem; }
    .ga-auth-page-desc  { font-size: 0.8125rem; margin-bottom: 20px; }
    .ga-breadcrumb { font-size: 0.6875rem; margin-bottom: 14px; }
    .ga-edit-actions { flex-direction: column; }
    .ga-edit-actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 479px) {
    .ga-auth-body { padding: 20px 14px 44px; }
    .ga-avatar-circle { width: 42px; height: 42px; font-size: 0.9375rem; }
    .ga-avatar-name   { font-size: 0.75rem; }
    .ga-auth-page-title { font-size: 1.125rem; }
    .ga-info-card { padding: 16px; }
    .ga-info-card-label { font-size: 0.875rem; }
    .ga-info-card-value { font-size: 0.8125rem; }
    .ga-email-input-row { flex-direction: column; align-items: stretch; }
    .ga-email-otp-btn { width: 100%; }
}

/* ── Legal pages (Privacy Policy / Terms of Use) ─────────────────────────── */

.ga-legal-wrap { background: #fff; padding: 56px 24px 72px; }

.ga-legal {
    max-width: 760px;
    margin: 0 auto;
    color: #1d1d1f;
    font-size: 0.9375rem;
    line-height: 1.7;
}

.ga-legal h1 { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 6px; }
.ga-legal-updated { color: #6e6e73; font-size: 0.8125rem; margin-bottom: 32px; }

.ga-legal h2 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 36px 0 12px;
    padding-top: 20px;
    border-top: 1px solid #e5e5ea;
}

.ga-legal h3 { font-size: 1rem; font-weight: 600; margin: 20px 0 8px; }
.ga-legal p  { margin-bottom: 14px; color: #1d1d1f; }
.ga-legal ul { margin: 0 0 16px 0; padding-left: 20px; }
.ga-legal li { margin-bottom: 8px; }
.ga-legal strong { font-weight: 600; }

.ga-legal-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875em;
    background: #f5f5f7;
    border: 1px solid #e5e5ea;
    border-radius: 6px;
    padding: 1px 6px;
}

@media (max-width: 640px) {
    .ga-legal-wrap { padding: 32px 18px 48px; }
    .ga-legal h1 { font-size: 1.5rem; }
    .ga-legal h2 { font-size: 1.0625rem; margin-top: 28px; }
}

/* ── Show/hide password eye ──────────────────────────────────────────────
   The button is injected by grand.js around EVERY password input, so this
   styles both the public sign-in fields (.ga-field input) and the in-app
   ones (.form-control) without either page needing to know about it. */

.ga-pw-wrap { position: relative; display: block; }

.ga-pw-wrap input { width: 100%; padding-right: 42px; }   /* room for the eye */

.ga-pw-eye {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #8e8e93;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.ga-pw-eye:hover  { color: #1d1d1f; background: rgba(0,0,0,0.05); }
.ga-pw-eye:active { background: rgba(0,0,0,0.09); }
.ga-pw-eye[aria-pressed="true"] { color: #00b4ff; }

/* ── Privacy: public-profile picker ──────────── */
/* Reuses .ga-info-card per the Card Standard — no bespoke card class, so these rows inherit the
   gradient, 14px radius, shadow + hairline ring and stay in step with every other module. */

.ga-privacy-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 26px; align-items: start; }
.ga-privacy-controls { min-width: 0; }
.ga-privacy-group { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin: 26px 0 12px; }
.ga-privacy-row { cursor: default; align-items: center; }
.ga-privacy-row .ga-info-card-secondary { color: var(--text-muted); }
.ga-privacy-warn { display: inline-block; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--warning); background: var(--warning-dim); border-radius: 999px; padding: 2px 8px; margin-left: 8px; vertical-align: 1px; }
.ga-privacy-actions { margin-top: 26px; }

.ga-privacy-never { margin-top: 26px; padding: 16px 18px; border-radius: 14px; background: var(--bg-hover); box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08); }
.ga-privacy-never-title { font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.ga-privacy-never p { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* The switch. A real checkbox underneath, so it posts, tabs and reads correctly to a screen
   reader; only the visual is replaced. */
.ga-switch { position: relative; flex-shrink: 0; margin-left: 16px; display: inline-flex; cursor: pointer; }
.ga-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ga-switch-track { width: 44px; height: 26px; border-radius: 999px; background: var(--border); transition: background 0.2s ease; display: block; }
.ga-switch-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s ease; }
.ga-switch input:checked ~ .ga-switch-track { background: var(--accent); }
.ga-switch input:checked ~ .ga-switch-track .ga-switch-thumb { transform: translateX(18px); }
.ga-switch input:focus-visible ~ .ga-switch-track { box-shadow: 0 0 0 3px rgba(0,180,255,0.25); }

/* Live preview */
.ga-privacy-preview { position: sticky; top: 20px; border-radius: 14px; background: linear-gradient(135deg, #ffffff 0%, #f5f5f7 100%); box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.08); padding: 18px; }
.ga-privacy-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ga-pub-pill-sm { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #0a7; background: rgba(0,180,120,.1); padding: 3px 9px; border-radius: 999px; }
.ga-privacy-preview-url { font-size: 0.75rem; color: var(--text-dim); word-break: break-all; }
.ga-privacy-pv-ident { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border-light); margin-bottom: 6px; }
.ga-privacy-pv-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-dim); color: var(--accent); font-size: 0.875rem; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.ga-privacy-pv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ga-privacy-pv-name { font-size: 0.9375rem; font-weight: 600; color: var(--text); }
.ga-privacy-pv-handle { font-size: 0.8125rem; color: var(--accent); }
.ga-privacy-pv-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 0.8125rem; border-bottom: 1px solid var(--border-light); }
.ga-privacy-pv-row:last-child { border-bottom: none; }
.ga-privacy-pv-label { color: var(--text-muted); flex-shrink: 0; }
.ga-privacy-pv-value { color: var(--text); text-align: right; word-break: break-word; }
.ga-privacy-pv-empty { color: var(--text-dim); font-style: italic; }
.ga-privacy-preview-off { display: none; align-items: center; gap: 12px; font-size: 0.8125rem; color: var(--text-muted); padding: 18px 4px; }
.ga-privacy-preview-off .ti { font-size: 1.5rem; color: var(--text-dim); }
.ga-privacy-preview-note { font-size: 0.75rem; color: var(--text-dim); line-height: 1.55; margin: 14px 0 0; }

/* Fade+lift on appear/disappear, per the Card Standard — rows must not snap in and out. */
@keyframes ga-pv-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ga-privacy-pv-row, .ga-privacy-pv-avatar { animation: ga-pv-in 0.22s ease; }
.ga-privacy-preview .is-hidden { display: none; }

@media (max-width: 900px) {
    .ga-privacy-layout { grid-template-columns: 1fr; }
    .ga-privacy-preview { position: static; order: -1; }
}

/* ── Searchable select (progressive enhancement over a real <select>) ─────────── */
/* The native control keeps its exact appearance — these styles only add the panel that
   sits in front of it, so a JS failure leaves the field looking and behaving as before. */

.ga-ss { position: relative; }

.ga-ss-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    /* The panel may be WIDER than the control it hangs off. The phone country-code select sits in
       a narrow grid column, so a panel locked to the trigger's width would clip
       "+880 (Bangladesh)" to "+880 (Bangl…". Capped against the viewport so it can never cause a
       horizontal scroll on a phone. */
    min-width: 260px;
    max-width: min(440px, calc(100vw - 40px));
    z-index: 300;
    background: #fff;
    border: 1px solid #d2d2d7;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.14), 0 0 0 0.5px rgba(0,0,0,0.06);
    overflow: hidden;
    animation: ga-ss-in 0.16s ease;
}

.ga-ss.is-open .ga-ss-panel { display: block; }

@keyframes ga-ss-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.ga-ss-search {
    width: 100%;
    font-family: var(--font);
    font-size: 0.9375rem;
    color: #1d1d1f;
    background: #fff;
    border: none;
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
    padding: 12px 14px;
    outline: none;
}

.ga-ss-search::placeholder { color: #aaa; }
.ga-ss-search:focus { box-shadow: none; background: #fff; }

.ga-ss-list { max-height: 244px; overflow-y: auto; margin: 0; padding: 5px 0; }

.ga-ss-item {
    padding: 9px 14px;
    font-size: 0.9375rem;
    color: #1d1d1f;
    cursor: pointer;
    /* WRAP, do not truncate. These labels carry the meaning — "Private Company Limited by Sha…"
       could be any of four jurisdictions. An ellipsis hides exactly the part you are choosing by. */
    white-space: normal;
    line-height: 1.35;
}

.ga-ss-item.is-active { background: var(--accent); color: #fff; }
.ga-ss-item.ga-ss-starts { font-weight: 500; }
.ga-ss-item.is-active.ga-ss-starts { font-weight: 600; }

.ga-ss-empty { padding: 14px; font-size: 0.875rem; color: var(--text-dim); text-align: center; }

/* ── Password match feedback (register) ──────────────────────────────────────── */
/* Applied to BOTH password fields at once — matching is a property of the pair, so lighting up
   only the confirm box would imply that field alone is valid. */

.ga-field.is-match input {
    border-color: var(--success);
    background: #fff;
}

.ga-field.is-match input:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(26,158,92,0.18);
}

.ga-field.is-mismatch input {
    border-color: var(--danger);
    background: #fff;
}

.ga-field.is-mismatch input:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(255,59,48,0.16);
}

.ga-match-msg {
    display: block;
    font-size: 0.8125rem;
    margin-top: 6px;
    min-height: 18px;          /* reserve the line so the form never jumps as the text appears */
    line-height: 18px;
}

.ga-match-msg.is-ok  { color: var(--success); }
.ga-match-msg.is-bad { color: var(--danger); }

.ga-match-msg.is-ok::before  { content: '\2713\00a0'; font-weight: 600; }
.ga-match-msg.is-bad::before { content: '\2715\00a0'; font-weight: 600; }

/* ── Profile sections (the 19 registry-driven pages) ─────────────────────────── */

.ga-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

.ga-section-grid .ga-field { display: flex; flex-direction: column; }
.ga-section-grid .ga-field label { font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; }
.ga-section-grid .ga-field-wide { grid-column: 1 / -1; }

.ga-section-grid textarea {
    font-family: var(--font);
    font-size: 0.9375rem;
    color: var(--text);
    background: #f5f5f7;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 11px 14px;
    outline: none;
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ga-section-grid textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,180,255,0.15); background: #fff; }

.ga-badge-danger { background: var(--danger-dim); color: var(--danger); border: none; font-family: var(--font); cursor: pointer; }
.ga-badge-danger:hover { background: rgba(255,59,48,0.2); }

/* "Private unless you publish it" — stated on every section that HAS a toggle, so the answer to
   "who can see this?" is on the page holding the data, not only in the settings screen. */
.ga-section-privacy {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
    color: var(--text-muted);
    background: var(--bg-hover);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 18px;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.06);
}
.ga-section-privacy .ti { color: var(--text-dim); font-size: 1.05rem; }

/* Expiry is the one thing people scan these lists for, so it is colour-coded rather than buried. */
.ga-exp { font-size: 0.75rem; font-weight: 500; margin-top: 6px; }
.ga-exp-ok   { color: var(--text-dim); }
.ga-exp-soon { color: var(--warning); }
.ga-exp-gone { color: var(--danger); }

/* Completion nudge in the sidebar */
.ga-completion-next {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--accent);
    text-decoration: none;
    margin-top: 8px;
    line-height: 1.35;
}
.ga-completion-next:hover { color: var(--accent-hover); }
.ga-completion-next .ti { font-size: 0.875rem; flex-shrink: 0; }

.ga-sidebar-progress-bar { transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

@media (max-width: 640px) {
    .ga-section-grid { grid-template-columns: 1fr; }
}

/* Subheader: title on the left, meta + Sign out grouped on the right. Before this the meta was a
   third child of a space-between bar and sat marooned in the middle once the context switcher was
   removed from between them. */
.ga-subheader-right { display: flex; align-items: center; gap: 18px; }

@media (max-width: 767px) {
    .ga-subheader-right { gap: 12px; }
    .ga-subheader-right .ga-subheader-meta { display: none; }  /* no room; Sign out is what matters */
}

/* Success strips fade out rather than vanishing — an element that disappears between one blink and
   the next reads as a glitch, not as a thing finishing. */
.alert-success { transition: opacity 0.4s ease, transform 0.4s ease; }
.alert-success.is-fading { opacity: 0; transform: translateY(-6px); }

/* Group tag inside a searchable option — "Bakery & confectionery" means more with "Agriculture &
   Food" beside it, and the group name is searchable too. */
.ga-ss-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ga-ss-group { font-style: normal; font-size: 0.6875rem; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }
.ga-ss-item.is-active .ga-ss-group { color: rgba(255,255,255,0.75); }

/* Live "will be registered as" line under the business-name field. */
.ga-fullname-preview { color: var(--accent); font-weight: 500; }

/* Phone editor: code + number side by side, code narrow enough to read but not so narrow the
   searchable panel has nothing to anchor to. */
.ga-phone-edit { display: grid; grid-template-columns: 190px 1fr; gap: 12px; }
@media (max-width: 540px) { .ga-phone-edit { grid-template-columns: 1fr; } }