.skip-link {
      position: absolute; top: -100%; left: 0;
      background: var(--color-accent); color: var(--color-primary);
      padding: var(--space-sm) var(--space-md);
      font-weight: 700; z-index: 10000;
      border-radius: 0 0 var(--radius-sm) 0;
      transition: top var(--transition);
    }
    .skip-link:focus { top: 0; }

    /* Page split layout */
    .login-page {
      display: flex;
      min-height: calc(100vh - var(--navbar-height));
    }

    /* ── Brand panel (left, desktop only) ── */
    .login-brand {
      display: none;
      position: sticky;
      top: var(--navbar-height);
      align-self: flex-start;
      height: calc(100vh - var(--navbar-height));
      width: 46%;
      flex-shrink: 0;
      background: var(--color-primary);
      overflow: hidden;
      flex-direction: column;
      justify-content: space-between;
      padding: var(--space-2xl);
    }
    @media (min-width: 768px) { .login-brand { display: flex; } }
    @media (min-width: 1280px) { .login-brand { width: 48%; } }

    /* Animated gradient orbs */
    .lb-mesh {
      position: absolute; inset: 0;
      pointer-events: none; overflow: hidden;
    }
    .lb-mesh::before {
      content: '';
      position: absolute; top: -25%; left: -15%;
      width: 65%; height: 65%;
      background: radial-gradient(circle, rgba(0,201,167,.2) 0%, transparent 70%);
      border-radius: 50%;
      animation: lbA 9s ease-in-out infinite alternate;
    }
    .lb-mesh::after {
      content: '';
      position: absolute; bottom: -15%; right: -8%;
      width: 55%; height: 55%;
      background: radial-gradient(circle, rgba(0,201,167,.13) 0%, transparent 70%);
      border-radius: 50%;
      animation: lbB 11s ease-in-out infinite alternate;
    }
    @keyframes lbA { from { transform: translate(0,0) scale(1); } to { transform: translate(32px,22px) scale(1.12); } }
    @keyframes lbB { from { transform: translate(0,0) scale(1); } to { transform: translate(-26px,-16px) scale(1.09); } }

    /* Dot-grid texture */
    .lb-dots {
      position: absolute; inset: 0;
      background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 26px 26px;
    }

    .lb-body { position: relative; z-index: 1; }

    .lb-badge {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 5px 14px;
      background: rgba(0,201,167,.12);
      border: 1px solid rgba(0,201,167,.28);
      border-radius: var(--radius-full);
      font-size: .68rem; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--color-accent);
      margin-bottom: var(--space-lg);
    }
    .lb-badge-dot {
      width: 6px; height: 6px;
      background: var(--color-accent); border-radius: 50%;
      animation: lbPulse 2s ease-in-out infinite;
    }
    @keyframes lbPulse {
      0%,100% { opacity: 1; transform: scale(1); }
      50%      { opacity: .45; transform: scale(.65); }
    }

    .lb-h2 {
      font-family: var(--font-display);
      font-size: clamp(1.65rem, 2.4vw, 2.35rem);
      font-weight: 900; color: var(--color-white);
      line-height: 1.2; margin-bottom: var(--space-lg);
    }
    .lb-h2 em { font-style: italic; color: var(--color-accent); }

    .lb-p {
      font-size: .9rem; color: rgba(255,255,255,.62);
      line-height: 1.8; margin-bottom: var(--space-xl);
    }

    /* Trust chips */
    .lb-chips { display: flex; flex-direction: column; gap: 10px; }
    .lb-chip {
      display: flex; align-items: center; gap: 12px;
      padding: 11px 14px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--radius-md);
      transition: background var(--transition);
    }
    .lb-chip:hover { background: rgba(255,255,255,.1); }
    .lb-chip-icon {
      width: 32px; height: 32px;
      background: rgba(0,201,167,.15);
      border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; flex-shrink: 0;
    }
    .lb-chip-label { font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.9); }
    .lb-chip-sub   { font-size: .75rem; color: rgba(255,255,255,.45); margin-top: 1px; }

    /* Social proof strip */
    .lb-proof {
      position: relative; z-index: 1;
      display: flex; align-items: center; gap: var(--space-md);
      padding-top: var(--space-xl);
      border-top: 1px solid rgba(255,255,255,.1);
    }
    .av-stack { display: flex; }
    .av {
      width: 32px; height: 32px; border-radius: 50%;
      border: 2px solid var(--color-primary);
      display: flex; align-items: center; justify-content: center;
      font-size: .62rem; font-weight: 700; color: #fff;
      margin-left: -8px;
    }
    .av:first-child { margin-left: 0; }
    .lb-proof-txt { font-size: .8rem; color: rgba(255,255,255,.55); line-height: 1.5; }
    .lb-proof-txt strong { color: var(--color-white); font-weight: 700; }

    /* ── Form panel (right) ── */
    .login-form {
      flex: 1;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: var(--space-xl) var(--space-md);
      background: var(--color-white);
      min-height: calc(100vh - var(--navbar-height));
    }
    @media (min-width: 480px) { .login-form { padding: var(--space-xl) var(--space-lg); } }
    @media (min-width: 640px) { .login-form { padding: var(--space-2xl); } }

    /* ── Login card ── */
    .login-card {
      width: 100%; max-width: 420px;
      animation: lcFadeUp .5s ease both;
    }
    @keyframes lcFadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .lc-head { margin-bottom: var(--space-xl); }

    .lc-eyebrow {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: .68rem; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--color-accent); margin-bottom: var(--space-sm);
    }
    .lc-eyebrow-dot { width: 6px; height: 6px; background: var(--color-accent); border-radius: 50%; }

    /* FIX: H1 is now keyword-bearing and visible on all devices */
    .lc-title {
      font-family: var(--font-display);
      font-size: clamp(1.55rem, 4vw, 2rem);
      font-weight: 700; color: var(--color-primary);
      line-height: 1.2; margin-bottom: var(--space-sm);
    }
    /* FIX: lc-sub now carries keyword-rich copy visible on mobile */
    .lc-sub { font-size: .9375rem; color: var(--color-muted); line-height: 1.65; }

    /* Feature pills */
    .lc-pills { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xl); }
    .lc-pill {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 5px 11px;
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-full);
      font-size: .78rem; font-weight: 500; color: var(--color-text-light);
    }
    .lc-pill-dot { width: 5px; height: 5px; background: var(--color-accent); border-radius: 50%; }

    /* Error alert */
    .alert-error {
      display: flex; align-items: center; gap: var(--space-sm);
      padding: var(--space-md) var(--space-lg);
      background: #FEF2F2;
      border: 1px solid #FECACA;
      border-radius: var(--radius-md);
      color: #DC2626;
      font-size: .875rem; font-weight: 500;
      margin-bottom: var(--space-lg);
    }

    /* ── Google sign-in button ── */
    .btn-google {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      padding: 0.75rem 1.4rem;
      border-radius: var(--radius-full);
      font-family: var(--font-body);
      font-size: .9375rem;
      font-weight: 600;
      transition: all var(--transition);
      cursor: pointer;
      white-space: nowrap;
      text-decoration: none;
      background: var(--color-white);
      color: var(--color-text);
      border: 2px solid var(--color-border);
      box-shadow: var(--shadow-sm);
      position: relative;
      overflow: hidden;
    }
    .btn-google::before {
      content: '';
      position: absolute; inset: 0;
      background: var(--color-accent-light);
      opacity: 0;
      transition: opacity var(--transition);
    }
    .btn-google:hover {
      border-color: var(--color-accent);
      box-shadow: var(--shadow-accent);
      transform: translateY(-1px);
    }
    .btn-google:hover::before { opacity: 1; }
    .btn-google:active  { transform: translateY(0); box-shadow: var(--shadow-sm); }
    .btn-google > *     { position: relative; z-index: 1; }
    .btn-google .google-svg { width: 22px; height: 22px; flex-shrink: 0; }

    /* Spinner inside the Google button */
    .btn-google .g-spinner {
      display: none;
      width: 18px; height: 18px;
      border: 2px solid var(--color-border);
      border-top-color: var(--color-accent);
      border-radius: 50%;
      animation: gSpin .65s linear infinite;
      flex-shrink: 0;
    }
    @keyframes gSpin { to { transform: rotate(360deg); } }
    .btn-google.loading .g-spinner  { display: block; }
    .btn-google.loading .google-svg { display: none; }
    .btn-google.loading { pointer-events: none; opacity: .75; }

    /* Divider */
    .lc-divider {
      display: flex; align-items: center;
      gap: var(--space-md); margin: var(--space-xl) 0;
    }
    .lc-div-line { flex: 1; height: 1px; background: var(--color-border); }
    .lc-div-txt {
      font-size: .72rem; font-weight: 600;
      color: var(--color-muted-light);
      letter-spacing: .08em; text-transform: uppercase;
      white-space: nowrap;
    }

    /* Info box */
    .lc-info {
      background: var(--color-accent-light);
      border: 1px solid rgba(0,201,167,.28);
      border-radius: var(--radius-md);
      padding: var(--space-md) var(--space-lg);
      font-size: .84rem; color: var(--color-primary); line-height: 1.65;
    }
    .lc-info strong { display: block; margin-bottom: 4px; font-weight: 700; }

    /* Terms */
    .lc-terms {
      font-size: .77rem; color: var(--color-muted-light);
      line-height: 1.65; text-align: center;
      margin-top: var(--space-lg);
    }
    .lc-terms a { color: var(--color-muted); font-weight: 600; transition: color var(--transition); }
    .lc-terms a:hover { color: var(--color-accent); }

    /* SSL badge */
    .lc-ssl {
      display: flex; align-items: center; justify-content: center;
      gap: 6px; margin-top: var(--space-md);
      font-size: .74rem; color: var(--color-muted-light);
    }
    .lc-ssl svg { width: 13px; height: 13px; color: var(--color-success); flex-shrink: 0; }

    /* Footer line */
    .lc-foot {
      margin-top: var(--space-2xl);
      font-size: .72rem; color: var(--color-muted-light); text-align: center;
    }

    /* SR-only utility */
    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }