/* ============================================
   css/pages.css
   Page-specific layout — NOT shared components.
   ============================================ */

/* ============================================
   NEW HOMEPAGE REDESIGN (Column + Billow)
   ============================================ */

/* Base & Typography */
.homepage-body {
  background: #ffffff; /* Crisp white for editorial feel */
  color: var(--ink-800);
}

.hp-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 5vw;
}

.hp-section {
  padding: 120px 0;
  position: relative;
}

.hp-bg-muted {
  background-color: var(--color-bg-muted);
}

/* Scroll-reveal targets. Elements are hidden ONLY while the motion.dev
   module is active (`html.anim` is set by an inline script and removed
   if the module fails to load), so content is never lost without JS or
   when the CDN is unreachable. All animation is driven by motion.dev in
   js/homepage-interactions.js — no CSS transitions here to fight it. */
html.anim .fade-in-up { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.anim .fade-in-up { opacity: 1; }
}

/* Auth-aware chrome: BOTH guest and account CTAs start hidden — the
   homepage doesn't know which one to show until the Supabase session
   check resolves (see index.html). This closes a real reachability bug:
   with only ".auth-only" defaulting hidden, a signed-in visitor could
   click a still-visible "Join for free" / "Log in" in the brief window
   before the check resolves and land back in signup/login's existing-
   session routing, which can send an incompletely-onboarded profile
   into onboarding. Neither CTA renders until we know for certain which
   one applies. `revert` (not a hardcoded display value) restores each
   element's own natural display (inline-flex button vs inline link). */
.auth-only, .guest-only { display: none !important; }
body.is-authed .auth-only { display: revert !important; }
body.is-guest  .guest-only { display: revert !important; }

/* Signed-in visitors don't need a "Home" link back to the marketing
   page they're already looking at — hide it once we know there's a
   session (desktop nav + mobile dropdown). */
body.is-authed nav.nav a[href="index.html"] { display: none !important; }

/* Honest labelling for illustrative marketing mockups */
.demo-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: var(--blue-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  vertical-align: middle;
}

/* Typography */
.hp-h2 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  margin-bottom: 24px;
}
.hp-sub {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  color: var(--ink-500);
  line-height: 1.6;
  max-width: 38ch;
}
.hp-section-header.left-align {
  max-width: 800px;
  margin-bottom: 80px;
}
.section-label {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue-600);
  margin-bottom: 16px;
  display: block;
}

/* -----------------------
   HERO (60/40 Column Split)
   ----------------------- */
.hp-hero {
  padding: 140px 0 80px;
  background: linear-gradient(180deg, #F8FAFC 0%, #ffffff 100%);
  overflow: hidden;
}
.hp-hero-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 5vw;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--color-border-light);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-600);
  margin-bottom: 32px;
  box-shadow: var(--shadow-xs);
}
.badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue-600);
}
.hp-hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 5.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--ink-900);
  margin-bottom: 24px;
}
.hp-hero-sub {
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  color: var(--ink-500);
  line-height: 1.5;
  max-width: 32ch;
  margin-bottom: 48px;
}
.hp-hero-btns {
  display: flex;
  gap: 16px;
  margin-bottom: 64px;
}
.btn-large {
  padding: 16px 28px;
  font-size: 1.0625rem;
  border-radius: 12px;
  font-weight: 500;
}
.hp-logo-flags {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.hp-hero-logos p {
  font-size: 0.875rem;
  color: var(--ink-400);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.flag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--ink-600);
  font-weight: 500;
}

/* 3D Phone & Visuals */
.hp-hero-visual {
  position: relative;
  height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}
.parallax-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(-15deg) rotateX(5deg);
}
.hp-phone-3d {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 460px;
  height: 768px;
  transform-style: preserve-3d;
}
.phone-bezel {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.phone-screen-content {
  position: absolute;
  top: 91px;
  left: 75px;
  width: 312px;
  height: 588px;
  border-radius: 38px;
  background: var(--color-bg-muted);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone-glass-layer {
  position: absolute;
  top: 91px;
  left: 75px;
  width: 312px;
  height: 588px;
  background: linear-gradient(120deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 40%);
  z-index: 20;
  pointer-events: none;
  border-radius: 38px;
}

/* Floating Cards (Billow style) */
.hp-floating-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  z-index: 30;
  transform: translateZ(50px);
}
.top-left { top: 15%; left: -10%; }
.bottom-right { bottom: 20%; right: -5%; }
.fc-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--success-tint);
  color: var(--success);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.fc-icon.fc-blue { background: var(--blue-100); color: var(--blue-600); }
.fc-blue-text { color: var(--blue-600); }
.fc-label { font-size: 0.875rem; color: var(--ink-500); font-weight: 500; }
.fc-value { font-size: 1.25rem; font-weight: 600; font-family: var(--font-display); margin-top: 4px; }

/* Phone Chat content */
.phone-header {
  padding: 30px 16px 16px;
  background: #fff;
  border-bottom: 1px solid var(--color-border-light);
  display: flex; align-items: center; gap: 10px;
}
.phone-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--blue-600); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.phone-title { font-weight: 600; font-size: 0.9375rem; }
.phone-status { font-size: 0.75rem; color: var(--success); display: flex; align-items: center; gap: 6px; }
.phone-chat { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; overflow: hidden; }
.chat-bubble-bot, .chat-bubble-user { padding: 10px 14px; border-radius: 12px; font-size: 0.8125rem; line-height: 1.4; max-width: 85%; }
.chat-bubble-user { background: var(--blue-600); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-bubble-bot { background: #fff; border: 1px solid var(--color-border-light); align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: var(--shadow-xs); }
.bot-widget { margin-top: 6px; border: 1px solid var(--color-border-light); border-radius: 8px; overflow: hidden; }
.widget-row { display: flex; justify-content: space-between; padding: 8px 12px; font-size: 0.75rem; }
.widget-row.highlight { background: var(--blue-50); font-weight: 600; color: var(--blue-600); }
.widget-divider { height: 1px; background: var(--color-border-light); }


/* -----------------------
   FEATURES (Billow Cards)
   ----------------------- */
.hp-b-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.hp-b-card {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 24px;
  padding: 40px 32px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.hp-b-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  border-color: var(--blue-200);
}
.hp-b-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--blue-50) 0%, var(--blue-100) 100%);
  color: var(--blue-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin-bottom: 24px;
}
.hp-b-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 12px;
}
.hp-b-card p {
  color: var(--ink-500);
  line-height: 1.6;
  font-size: 1rem;
}

/* -----------------------
   MONEY TRANSFER PLANNER
   ----------------------- */
.hp-split-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: center;
}
.hp-check-list { list-style: none; margin: 32px 0; padding: 0; }
.hp-check-list li { display: flex; align-items: center; gap: 12px; font-size: 1.125rem; color: var(--ink-600); margin-bottom: 16px; font-weight: 500; }
.hp-check-list i { color: var(--success); font-size: 20px; background: var(--success-tint); padding: 4px; border-radius: 50%; }

.hp-dashboard-graphic {
  background: #f8fafc;
  border-radius: 32px;
  padding: 40px;
  border: 1px solid var(--color-border-light);
  box-shadow: inset 0 2px 4px rgba(255,255,255,1);
}
.hp-dash-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.hp-dash-kpi {
  background: #fff; border-radius: 20px; padding: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03); border: 1px solid var(--color-border-light);
}
.kpi-label { font-size: 0.875rem; color: var(--ink-500); font-weight: 500; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-value { font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; color: var(--ink-900); }
.text-red { color: var(--error); }

.hp-dash-main-card {
  background: #fff; border-radius: 24px; padding: 32px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.05); border: 1px solid var(--color-border-light);
}
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.ch-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; }
.ch-badge { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 0.875rem; font-weight: 500; }
.status-safe { background: var(--success-tint); color: var(--success); }

/* Distribution Bar */
.hp-distribution-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin-bottom: 40px; gap: 2px; }
.dist-segment { display: flex; align-items: center; justify-content: center; font-size: 0; position: relative; transition: width 1.5s ease-out; }
.dist-segment.expenses { background: var(--error); }
.dist-segment.savings { background: #A9C7FF; }
.dist-segment.remit { background: var(--blue-600); }

/* Smooth Line Chart */
.hp-chart-container { height: 120px; width: 100%; margin-bottom: 32px; position: relative; }
.smooth-line-chart { width: 100%; height: 100%; overflow: visible; }
.chart-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawLine 2s ease-out forwards; }
.chart-area { opacity: 0; animation: fadeArea 1s 1s ease-out forwards; }
.chart-dot { opacity: 0; animation: fadeArea 0.5s 1.5s ease-out forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes fadeArea { to { opacity: 1; } }

.hp-dash-result { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--color-border-light); }
.ri-label { font-size: 1rem; font-weight: 600; color: var(--ink-800); }
.ri-sub { font-size: 0.875rem; color: var(--ink-500); }
.result-amount { font-family: var(--font-display); font-size: 2rem; font-weight: 500; color: var(--blue-600); }

/* -----------------------
   HOW IT WORKS
   ----------------------- */
.hp-timeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.hp-timeline-card { position: relative; }
.hp-timeline-card::before {
  content: ''; position: absolute; top: 24px; left: 48px; right: -40px; height: 1px; background: var(--color-border); z-index: 1;
}
.hp-timeline-card:last-child::before { display: none; }
.tl-num {
  width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 500;
  color: var(--blue-600); font-size: 1.125rem; margin-bottom: 24px; position: relative; z-index: 2;
}
.hp-timeline-card h4 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; margin-bottom: 12px; }
.hp-timeline-card p { color: var(--ink-500); line-height: 1.6; }

/* -----------------------
   TRUST & CTA
   ----------------------- */
.hp-text-center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hp-max-w { max-width: 800px; }
.hp-mx-auto { margin-left: auto; margin-right: auto; }
.hp-trust-metrics { display: flex; gap: 80px; justify-content: center; margin-top: 64px; }
.t-metric { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tm-val { font-family: var(--font-display); font-size: 3.5rem; font-weight: 500; color: var(--blue-600); }
.tm-label { font-size: 1.125rem; font-weight: 500; color: var(--ink-600); text-transform: uppercase; letter-spacing: 0.1em; }

.hp-cta-box {
  background: var(--ink-900); border-radius: 40px; padding: 100px 40px; text-align: center;
  position: relative; overflow: hidden;
}
.hp-cta-box::after {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(37,99,235,0.15) 0%, transparent 60%); pointer-events: none;
}
.hp-cta-box h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); color: #fff; font-weight: 500; margin-bottom: 20px; }
.hp-cta-box p { font-size: 1.25rem; color: var(--blue-200); margin-bottom: 48px; }

/* -----------------------
   FOOTER
   ----------------------- */
.hp-footer { padding: 80px 5vw; background: #fff; border-top: 1px solid var(--color-border-light); }
.hp-footer-top { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; max-width: 1440px; margin: 0 auto 64px; }
.footer-nav-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.hp-footer .footer-brand p { color: var(--ink-500); font-size: 1rem; line-height: 1.6; max-width: 280px; }
.hp-footer .footer-col h4 { font-family: var(--font-display); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 24px; color: var(--ink-900); }
.hp-footer .footer-col a { display: block; color: var(--ink-500); margin-bottom: 16px; font-size: 1rem; transition: color 0.2s; }
.hp-footer .footer-col a:hover { color: var(--blue-600); }
.hp-footer-bottom { max-width: 1440px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding-top: 32px; border-top: 1px solid var(--color-border-light); color: var(--ink-500); font-size: 0.875rem; }

/* -----------------------
   RESPONSIVE
   ----------------------- */
@media (max-width: 1024px) {
  .hp-hero-container { grid-template-columns: 1fr; text-align: center; }
  .hp-hero-text { display: flex; flex-direction: column; align-items: center; }
  .hp-hero-sub { max-width: 600px; }
  .hp-hero-btns { justify-content: center; }
  .hp-b-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-split-layout { grid-template-columns: 1fr; }
  .hp-footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .hp-timeline-grid { grid-template-columns: 1fr; }
  .hp-timeline-card::before { display: none; }
  .hp-b-grid { grid-template-columns: 1fr; }
  .hp-trust-metrics { flex-direction: column; gap: 40px; }
  .footer-nav-grid { grid-template-columns: 1fr; }
  .hp-footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .hp-hero-visual { height: 500px; }
}

/* ============================================
   ai-coach.html — Echo (Finance Pal Assistant) chat
   ============================================ */
.chat-page {
  height: calc(100dvh - 69px); /* subtract sticky navbar height (measured: .nav-links'
    own link padding makes it the tallest child at 40px, not the 38px logo — 69px
    total); dvh tracks mobile URL bar */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg);
}
.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  background: var(--color-bg-soft);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}

/* --- Header bar (Tidio-style) --- */
.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.chat-header-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
  font-size: 20px;
  flex-shrink: 0;
}
.chat-header-name { font-size: 15px; font-weight: 600; color: var(--color-text); }
.chat-header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
/* Neutral (grey) until the backend actually answers; js/ai-coach.js adds
   is-online after a successful reply and is-offline when unreachable. */
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-text-faint);
  display: inline-block;
}
.chat-header-status.is-online .status-dot {
  background: var(--success);
  animation: chatStatusPulse 2s infinite;
}
.chat-header-status.is-offline .status-dot { background: var(--color-border); }
@keyframes chatStatusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(26,158,92,0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(26,158,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(26,158,92,0); }
}

/* --- Header actions: history / export / new chat --- */
.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.chat-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  color: var(--color-text-mid);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color var(--transition-fast) ease, background var(--transition-fast) ease, color var(--transition-fast) ease;
}
.chat-header-btn i { font-size: 16px; }
.chat-header-btn:hover { border-color: var(--blue-300); background: var(--blue-50); color: var(--color-text); }
.chat-header-btn-primary { color: var(--blue-600); border-color: var(--blue-200); }
.chat-header-btn-primary:hover { background: var(--blue-50); }

@media (max-width: 560px) {
  .chat-header-btn-label { display: none; }
  .chat-header-btn { padding: 0; width: 40px; justify-content: center; }
}

/* --- Message area --- */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--color-bg-muted);
}
.msg-row {
  display: flex;
  flex-direction: column;
  max-width: 78%;
  animation: msgIn 0.25s var(--ease-out);
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg-row-user { align-self: flex-end; align-items: flex-end; }
.msg-row-bot  { align-self: flex-start; align-items: flex-start; }

.msg-bubble {
  padding: 12px 16px;
  font-size: 0.9375rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: var(--shadow-xs);
}
.msg-bubble-user {
  background: var(--color-primary);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}
.msg-bubble-bot {
  background: var(--color-bg-soft);
  color: var(--color-text);
  border: 1px solid var(--color-border-light);
  border-radius: 16px 16px 16px 4px;
}
.msg-time {
  font-size: 11px;
  color: var(--color-text-faint);
  margin-top: 6px;
  padding: 0 4px;
}

/* Markdown rendered inside Echo's bubbles only (js/chat-format.js).
   User bubbles never go through this — they stay plain textContent. */
.msg-list { margin: 6px 0; padding-left: 20px; }
.msg-list li { margin-bottom: 4px; }
.msg-list:last-child { margin-bottom: 0; }

.msg-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin: 10px 0;
  -webkit-overflow-scrolling: touch;
}
.msg-table { border-collapse: collapse; font-size: 0.875rem; }
.msg-table th, .msg-table td {
  border: 1px solid var(--color-border-light);
  padding: 6px 10px;
  text-align: left;
  white-space: normal;   /* cells wrap their own content; the wrapper
                            above only kicks in horizontal scroll if the
                            table is still wider than the bubble */
  word-break: break-word;
}
.msg-table th { background: var(--color-bg-muted); font-weight: 600; color: var(--ink-900); }

/* Inline bar chart (js/chat-format.js renderChart) */
.msg-chart {
  margin: 10px 0 2px;
  padding: 12px 14px;
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}
.msg-chart-unit {
  font-size: 0.75rem; font-weight: 600; color: var(--ink-500);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px;
}
.msg-chart-row {
  display: grid;
  grid-template-columns: minmax(64px, 30%) 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.8125rem;
}
.msg-chart-row:last-child { margin-bottom: 0; }
.msg-chart-label { color: var(--ink-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-chart-track { background: var(--blue-100); border-radius: var(--radius-full); height: 8px; overflow: hidden; }
.msg-chart-bar { display: block; height: 100%; background: var(--blue-600); border-radius: var(--radius-full); }
.msg-chart-value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-900); text-align: right; }

/* Starter prompts (empty-state affordance) */
.chat-starters { margin-top: 4px; animation: msgIn 0.3s var(--ease-out); }
.chat-starters-label {
  font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted);
  margin: 0 0 10px 2px;
}
.chat-starters-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.chat-chip {
  display: flex; align-items: center; gap: 9px;
  text-align: left;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  min-height: 48px;
  font-family: var(--font-sans);
  font-size: 0.875rem; font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition-fast) ease, background var(--transition-fast) ease,
              transform var(--transition-fast) ease;
}
.chat-chip i { color: var(--color-primary); font-size: 18px; flex-shrink: 0; }
.chat-chip:hover { border-color: var(--blue-300); background: var(--blue-50); }
.chat-chip:active { transform: translateY(1px); }
@media (max-width: 560px) {
  .chat-starters-grid { grid-template-columns: 1fr; }
}

/* Typing indicator */
.msg-bubble-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 14px 16px;
}
.msg-bubble-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-text-faint);
  animation: chatTypingBounce 1.2s infinite ease-in-out;
}
.msg-bubble-typing span:nth-child(2) { animation-delay: 0.15s; }
.msg-bubble-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* --- Input area --- */
.chat-input-area {
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  padding: 10px 16px 14px;
  position: relative;
}

/* Input bar row — ring lights up while typing */
.chat-input-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg-soft);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 5px 5px 5px 16px;
  transition: border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.chat-input-bar:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-ring);
}
.chat-text-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 1rem;
  color: var(--color-text);
  font-family: var(--font-sans);
  outline: none;
  padding: 10px 4px;
}
.chat-text-input::placeholder { color: var(--color-text-faint); }

.chat-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast) ease, transform var(--transition-fast) ease;
}
.chat-send-btn:hover:not(:disabled) { background: var(--color-primary-hover); }
.chat-send-btn:active:not(:disabled) { transform: scale(0.95); }
.chat-send-btn:disabled {
  background: var(--color-border);
  color: var(--color-text-faint);
  cursor: not-allowed;
}

@media (max-width: 768px) {
  /* measured 69px here too: .nav-hamburger is 44px tall (taller than the
     36-38px logo/avatar-chip it sits beside), same total as desktop. */
  .chat-page      { height: calc(100dvh - 69px); }
  .chat-container { max-width: 100%; border-left: none; border-right: none; }
  .chat-messages  { padding: 16px 12px; }
  .msg-row        { max-width: 88%; }
}

/* --- Chat history panel (slide-in, ai-coach.html only) — mirrors
   js/profile-panel.js's slide-in pattern as static CSS, since this panel
   is page-specific rather than a shared cross-page component. --- */
.history-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 42, 77, 0.4);
  z-index: 998;
  backdrop-filter: blur(2px);
}
.history-overlay.show { display: block; }
.history-panel {
  position: fixed;
  top: 0;
  right: -420px;
  width: 400px;
  height: 100vh;
  background: var(--color-bg-soft);
  border-left: 1px solid var(--color-border);
  box-shadow: -8px 0 40px rgba(26, 42, 77, 0.12);
  z-index: 999;
  display: flex;
  flex-direction: column;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.history-panel.open { right: 0; }
.history-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
}
.history-panel-title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--color-text); }
.history-panel-close { background: transparent; border: none; color: var(--color-text-muted); cursor: pointer; font-size: 20px; padding: 4px; flex-shrink: 0; }
.history-panel-close:hover { color: var(--color-text); }
.history-panel-body { flex: 1; overflow-y: auto; padding: 12px 16px 24px; }
.history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.history-item { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--radius-md); cursor: pointer; border: 1px solid transparent; }
.history-item:hover { background: var(--color-bg-muted); }
.history-item.active { background: var(--blue-50); border-color: var(--blue-200); }
.history-item-main { flex: 1; min-width: 0; }
.history-item-title { font-size: 0.875rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-item-date { font-size: 0.75rem; color: var(--color-text-faint); margin-top: 2px; }
.history-item-del { flex-shrink: 0; background: transparent; border: none; color: var(--color-text-faint); font-size: 0.75rem; font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: var(--radius-sm); }
.history-item-del:hover, .history-item-del.confirm { color: var(--error); background: var(--error-tint); }
.history-empty { font-size: 0.875rem; color: var(--color-text-muted); text-align: center; padding: 32px 16px; line-height: 1.6; }

@media (max-width: 480px) {
  .history-panel { width: 100vw; right: -100vw; }
}

/* ============================================
   moneytransfer.html — Send Money Home
   ============================================ */
/* Header left-aligned to the content grid below (app-like, not a centered
   marketing band) */
.transfer-page-header {
  padding: var(--space-10) var(--px-desktop) 0;
  max-width: 1080px;
  margin: 0 auto;
}
.transfer-page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 8px;
}
.transfer-page-header p {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  margin-bottom: 8px;
  max-width: 52ch;
}

/* Two-zone split: step-by-step guide (primary) + safety checklist (sticky
   rail). Source order puts safety first so mobile shows the precondition
   first; the desktop grid places it in the right column. */
.smh-layout {
  padding: 24px var(--px-desktop) var(--space-16);
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .smh-layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
    align-items: start;
  }
  .smh-section--steps  { grid-column: 1; grid-row: 1; }
  .smh-section--safety { grid-column: 2; grid-row: 1; position: sticky; top: 88px; }
}

/* Primary steps panel: white card chrome */
.smh-section--steps {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
/* Safety rail: no card chrome — the tinted note is the visual element */
.smh-section--safety { padding: 0; }
.smh-section h2 {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: 16px;
}
/* ---- Safety note callout (vertical inside the rail) ---- */
.smh-note {
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.smh-note-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}
.smh-note-list {
  margin: 0;
  padding-left: 20px;
  color: var(--color-text-mid);
  line-height: 1.65;
  font-size: 0.9375rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* ---- Section 2: step-by-step accordion ---- */
.smh-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.smh-accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.smh-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  min-height: 48px;
  background: var(--color-bg-soft);
  border: none;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast) ease;
}
.smh-accordion-trigger:hover { background: var(--color-bg-muted); }
.smh-accordion-trigger i {
  color: var(--color-primary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.smh-accordion-item.open .smh-accordion-trigger i { transform: rotate(180deg); }
.smh-accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.smh-accordion-item.open .smh-accordion-panel { grid-template-rows: 1fr; }
.smh-accordion-panel-inner { overflow: hidden; min-height: 0; }
.smh-accordion-panel-inner p {
  padding: 0 18px 16px;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

@media (max-width: 768px) {
  .transfer-page-header { padding: var(--space-8) var(--px-mobile) 0; }
  .smh-layout { padding: 16px var(--px-mobile) var(--space-12); gap: 20px; }
  .smh-section--steps { padding: var(--space-5); }
  .smh-note { padding: var(--space-5); }
}

/* ============================================
   resources.html
   ============================================ */
/* Featured card: premium branded panel (deep-blue gradient, white text) */
.resources-hero {
  padding: var(--space-10) var(--px-desktop) var(--space-6);
}
.resources-hero-inner { max-width: 1100px; margin: 0 auto; }
.featured-article-card {
  background: linear-gradient(150deg, var(--blue-600) 0%, var(--blue-700) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-12);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
/* soft decorative glow, brand-hue only */
.featured-article-card::after {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  right: -80px; top: -120px;
  background: radial-gradient(circle, rgba(169, 199, 255, 0.25) 0%, rgba(169, 199, 255, 0) 70%);
  pointer-events: none;
}
.featured-article-card > div { position: relative; max-width: 640px; }
.featured-article-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
  padding: 5px 13px;
  font-size: 0.75rem;
  color: #fff;
  margin-bottom: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.featured-article-card h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.featured-article-card p {
  font-size: 1rem;
  color: var(--blue-100);
  line-height: 1.65;
  margin-bottom: 16px;
}
.featured-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--blue-200);
  margin-bottom: 20px;
}
/* "coming soon" chip — translucent white, legible on the blue panel */
.featured-coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 14px;
  border: 1.5px dashed rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Filter tabs */
.filter-tabs {
  display: flex;
  gap: 8px;
  padding: 20px var(--px-desktop) 0;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.filter-tab {
  padding: 9px 18px;
  min-height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
  cursor: pointer;
  transition: border-color var(--transition-fast) ease, color var(--transition-fast) ease,
              background var(--transition-fast) ease;
  font-family: var(--font-sans);
}
.filter-tab:hover         { border-color: var(--blue-300); color: var(--color-primary); background: var(--blue-50); }
.filter-tab.active        { background: var(--color-primary); color: #fff; border-color: var(--color-primary); box-shadow: var(--shadow-primary); }

/* Articles grid */
.articles-section { padding: 24px var(--px-desktop) 64px; max-width: 1100px; margin: 0 auto; }
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.article-card {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition) ease, box-shadow var(--transition) ease,
              transform var(--transition) ease;
}
.article-card:hover {
  border-color: var(--blue-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.article-badge {
  display: inline-flex;
  align-items: center;
  background: var(--blue-100);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  padding: 4px 11px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  width: fit-content;
}
.article-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.article-excerpt {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
  flex: 1;
}
.article-meta {
  font-size: 0.8125rem;
  color: var(--color-text-faint);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}
.article-meta i { font-size: 15px; }

@media (max-width: 768px) {
  .resources-hero      { padding: 24px var(--px-mobile); }
  .featured-article-card { padding: var(--space-8) var(--space-6); }
  .filter-tabs         { padding: 20px var(--px-mobile) 0; }
  .articles-section    { padding: 20px var(--px-mobile) 40px; }
  .articles-grid       { grid-template-columns: 1fr; }
}

/* (The old toolkit.html "tools zone" styles lived here — the dashboard
   redesign replaced that page; its styles now live in css/dashboard.css.) */

/* ============================================
   help.html — Tips & Help
   ============================================ */

/* --- Page header (left-aligned to the content below) --- */
.helppage-header {
  padding: var(--space-10) var(--px-desktop) var(--space-6);
  max-width: 1080px;
  margin: 0 auto;
}
.helppage-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 8px;
}
.helppage-header p {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 56ch;
}

/* --- Two-zone: FAQ (primary) + contact escape-hatch (sticky rail) --- */
.help-layout {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--px-desktop);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 900px) {
  .help-layout {
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr);
    align-items: start;
  }
  .help-contact-card { position: sticky; top: 88px; }
}
.help-faq h2, .help-tips h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

/* Contact card */
.help-contact-card {
  background: linear-gradient(155deg, var(--blue-600) 0%, var(--blue-700) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.help-contact-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff; margin-bottom: var(--space-4);
}
.help-contact-card h2 {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em;
  color: #fff; margin-bottom: 8px;
}
.help-contact-card p { font-size: 0.9375rem; color: var(--blue-100); line-height: 1.6; margin-bottom: var(--space-5); }
.help-contact-email {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.9375rem; font-weight: 500; color: #fff;
  padding: 12px 14px; margin-bottom: var(--space-4);
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  word-break: break-all;
}
.help-contact-email i { flex-shrink: 0; font-size: 18px; }
/* Invert the primary button so it reads on the blue card */
.help-contact-card .btn-primary {
  width: 100%;
  background: #fff; color: var(--color-primary);
  box-shadow: none;
}
.help-contact-card .btn-primary:hover { background: var(--blue-50); }

/* --- Quick Tips (full-width zone) --- */
.help-tips {
  max-width: 1080px;
  margin: var(--space-12) auto 0;
  padding: 0 var(--px-desktop) var(--space-16);
}
/* 4 evenly-balanced tips (no 3+1 orphan) */
.help-tips .features-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .help-tips .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .help-tips .features-grid { grid-template-columns: 1fr; } }

@media (max-width: 768px) {
  .helppage-header  { padding: var(--space-8) var(--px-mobile) var(--space-5); }
  .help-layout { padding: 0 var(--px-mobile); }
  .help-tips { padding: 0 var(--px-mobile) var(--space-12); margin-top: var(--space-10); }
}

/* ============================================
   login.html
   Class prefix: login-
   ============================================ */
.login-page {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
.login-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* LEFT: Branded panel (desktop only) — same-hue depth, no rainbow gradients */
.login-left {
  flex: 1;
  background: linear-gradient(160deg, var(--blue-600) 0%, var(--blue-700) 100%);
  display: flex;
  flex-direction: column;
  padding: 48px 52px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.login-left-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

/* Logo (white, on blue) */
.login-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.login-logo-box {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,0.15);
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.login-logo-box img { width: 34px; height: 34px; object-fit: cover; display: block; }
.login-logo-text { font-size: 16px; font-weight: 600; color: #fff; }

/* Hero copy */
.login-hero { margin: auto 0; max-width: 480px; }
.login-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: #fff;
}
.login-sub {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--blue-100);
  margin: 0 0 42px;
}

/* Feature highlights */
.login-feature-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.login-feature {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  color: #fff;
}
.login-feature i {
  width: 46px; height: 46px;
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 21px;
  flex-shrink: 0;
}

/* Decorative shapes */
.login-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.login-deco-1 {
  width: 360px; height: 360px;
  background: rgba(214, 230, 255, 0.18); /* soft blue */
  top: -120px; right: -120px;
}
.login-deco-2 {
  width: 260px; height: 260px;
  background: rgba(234, 242, 255, 0.12); /* light blue */
  bottom: -80px; left: -80px;
}

/* RIGHT: Form panel */
.login-right {
  width: 45%;
  flex-shrink: 0;
  background: var(--light-blue);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.login-right-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 52px 32px;
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
}

/* Mobile-only logo (hidden on desktop — branded panel covers it) */
.login-mobile-logo {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 28px;
}
.login-mobile-logo .login-logo-box {
  background: var(--soft-blue);
}
.login-mobile-logo-text { font-size: 16px; font-weight: 600; color: var(--navy); }

/* Password label row (label + "Forgot password?") */
.login-pw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}
.login-pw-row .auth-label { margin-bottom: 0; }

/* Footer link */
.login-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--slate);
}
.login-footer a { color: var(--primary-blue); text-decoration: none; font-weight: 500; }
.login-footer a:hover { text-decoration: underline; }

/* ============================================
   login.html — RESPONSIVE
   ============================================ */
@media (max-width: 1023px) {
  .login-left  { display: none; }
  .login-right { width: 100%; }
  .login-right-inner { max-width: 480px; padding: 28px 28px 24px; }
  .login-mobile-logo { display: flex; }
}
@media (max-width: 600px) {
  .login-right-inner { padding: 22px 20px 20px; }
}