/* public/styles.css — unified site styles
   - Homepage styles, edge bars, hero, and visual column (unchanged)
   - Compact auth card styles scoped to .auth-page (signup/login only)
   - Uses only /logo.png for logos
*/

:root{
  --bg: #0b0b0b;
  --card: #0f0f10;
  --muted: #9aa0a6;
  --text: #eaeaea;
  --accent-1: #ff7a2a;
  --accent-2: #ffd24a;
  --cta-gradient: linear-gradient(90deg,var(--accent-1),#ff4a00);
  --radius: 10px;
  --edge-bar-width: 6px;
  --max-width: 1200px;
  --card-width: 340px;
  --gap: 32px;
  --type-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

/* Reset / base */
* { box-sizing: border-box; }
html,body { height:100%; margin:0; font-family:var(--type-sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:var(--text); background: radial-gradient(circle at 8% 8%, #0f0f0f, var(--bg)); }

/* Entrance animations (homepage). Above-the-fold hero elements carry
   .anim-fade-up directly and animate on load with a per-element stagger
   (.d1..d5); below-the-fold sections (feature cards, beta steps) start
   in the same hidden state but only reveal via .in-view, toggled by an
   IntersectionObserver in index.html as each one scrolls into view.
   Wrapped in prefers-reduced-motion so anyone with that OS preference
   just sees the finished layout immediately, with no motion and no
   dependency on JS having run at all. */
@media (prefers-reduced-motion: no-preference) {
  .anim-fade-up, .feature-card, .hp-step {
    opacity:0; transform:translateY(16px);
  }
  .anim-fade-up {
    animation: fade-up .6s cubic-bezier(.2,.8,.2,1) forwards;
  }
  .anim-fade-up.d1 { animation-delay:.05s; }
  .anim-fade-up.d1b { animation-delay:.1s; }
  .anim-fade-up.d2 { animation-delay:.15s; }
  .anim-fade-up.d3 { animation-delay:.25s; }
  .anim-fade-up.d4 { animation-delay:.35s; }
  .anim-fade-up.d5 { animation-delay:.45s; }
  @keyframes fade-up { to { opacity:1; transform:translateY(0); } }

  .countdown-colon { animation: countdown-blink 1s steps(1) infinite; }
  @keyframes countdown-blink { 0%,49% { opacity:1; } 50%,100% { opacity:.25; } }
  .hp-hero::before { animation: hero-glow-drift-a 16s ease-in-out infinite; }
  .hp-hero::after { animation: hero-glow-drift-b 20s ease-in-out infinite; }
  @keyframes hero-glow-drift-a { 0%,100% { transform:translate(0,0); } 50% { transform:translate(40px,30px); } }
  @keyframes hero-glow-drift-b { 0%,100% { transform:translate(0,0); } 50% { transform:translate(-30px,-40px); } }

  .feature-card, .hp-step {
    transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
  }
  .feature-card.in-view, .hp-step.in-view { opacity:1; transform:translateY(0); }
  .hp-features-inner .feature-card:nth-child(2) { transition-delay:.08s; }
  .hp-features-inner .feature-card:nth-child(3) { transition-delay:.16s; }
  .hp-features-inner .feature-card:nth-child(4) { transition-delay:.24s; }
  .hp-steps-grid .hp-step:nth-child(2) { transition-delay:.12s; }
  .hp-steps-grid .hp-step:nth-child(3) { transition-delay:.24s; }

  .hp-visual .profile-card {
    opacity:0; transform:translateY(10px) scale(.98);
    animation: fade-up-scale .7s .15s cubic-bezier(.2,.8,.2,1) forwards, card-float 6s 1s ease-in-out infinite;
  }
  @keyframes fade-up-scale { to { opacity:1; transform:translateY(0) scale(1); } }
  @keyframes card-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
}

/* Edge bars (left/right) — decorative and subtle */
.edge-bar {
  position:fixed; top:0; bottom:0; width:var(--edge-bar-width); z-index:40; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,210,74,0.95), rgba(255,122,42,0.9));
  opacity:0.92; filter: blur(0.2px);
}
.edge-bar-left { left:0; border-top-right-radius:6px; border-bottom-right-radius:6px; }
.edge-bar-right { right:0; border-top-left-radius:6px; border-bottom-left-radius:6px; }
@media (max-width:720px) { .edge-bar { display:none; } }

/* Logo sizing. These max-heights are tuned against logo.png's own visible
   glyphs, not its raw file bounds — the 2026-09-09 logo swap (829x195,
   glyphs filling ~82% of the file's height) reads ~4.7x taller per pixel
   of max-height than the pre-swap file did (which had glyphs filling only
   ~17% of its height, mostly blank canvas around them — see app.html's
   #loginLogo/#loginTagline comments for that file's exact measurements).
   Values below are the old ones divided by that ~4.7x factor, so the
   logo's actual on-screen size matches what it was before the swap. If the
   logo file changes shape again, re-measure its visible-glyph fraction
   (a quick alpha-channel scan, not a guess) and rescale these the same way
   — a naive same-max-height swap silently makes the logo balloon in size
   exactly like this one did. */
.logo-img { display:block; width:auto; max-height:48px; height:auto; object-fit:contain; vertical-align:middle; position:relative; z-index:60; }
.logo-img.small { max-height:27px; }
.logo-img.tiny  { max-height:19px; }

/* Header / nav */
.hp-header { position:sticky; top:0; z-index:45; background:rgba(11,11,11,0.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,0.03); }
.hp-header-inner { max-width:var(--max-width); margin:0 auto; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; overflow:visible; }
/* "Beta" pill beside the header logo, same look as the docs header's
   (docs/docs.css .docs-header-title .pill). */
.hp-header .logo-link { display:flex; align-items:center; gap:8px; text-decoration:none; }
.logo-pill { font-size:11px; font-weight:700; letter-spacing:.04em; line-height:1.4; color:#0b0b0b; background:linear-gradient(90deg,var(--accent-1),var(--accent-2)); padding:2px 8px; border-radius:999px; text-transform:uppercase; white-space:nowrap; }
.hp-nav { display:flex; gap:10px; align-items:center; }
.nav-link { color:#fff; text-decoration:none; font-weight:600; padding:8px 10px; border-radius:8px; transition: background .12s ease; }
.nav-link:hover { background:rgba(255,255,255,0.03); }

/* Homepage layout */
.hp-full { display:flex; flex-direction:column; min-height:100vh; }
/* flex-grow:0 -- the hero no longer needs to stretch to fill the viewport
   now that real content (features/steps) follows it; letting it grow left
   a large dead gap above that content on shorter pages. flex-shrink must
   also be 0, not the default 1: overflow:hidden below (needed to contain
   the glow blobs) resolves this item's automatic min-height to 0 instead
   of its content size, and with shrink still allowed that let the flex
   column actually shrink .hp-hero below its own content -- silently
   clipping the badge/countdown at the top instead of just not growing. */
.hp-hero { position:relative; overflow:hidden; flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:48px 20px; }
/* Ambient glow blobs behind the hero content -- pure decoration, drift
   slowly via the keyframes in the entrance-animation block above (frozen
   in place under prefers-reduced-motion, since only that block applies
   the animation property; these base rules just set their color/position
   either way). z-index:0 vs. .hp-hero-inner's z-index:1 keeps real
   content painting on top regardless of source order. */
.hp-hero::before, .hp-hero::after {
  content:''; position:absolute; border-radius:50%; filter:blur(90px); z-index:0; pointer-events:none;
}
/* Sized/positioned so each blob's brightest point (its center) sits well
   inside the hero's own box and has faded most of the way out before it
   would ever reach an edge -- .hp-hero is tall (~650px) once the profile
   card is factored in, and the first pass here placed each center only
   ~50px from the hero's bottom edge, so the clipped portion still showed
   at close to full brightness right at the boundary with the feature
   grid below, reading as a wash bleeding past the section rather than a
   contained glow. */
.hp-hero::before { width:280px; height:280px; background:rgba(255,122,42,0.14); top:40px; left:-40px; }
.hp-hero::after { width:240px; height:240px; background:rgba(255,210,74,0.09); bottom:40px; right:-20px; }
.hp-hero-inner { position:relative; z-index:1; width:100%; max-width:var(--max-width); display:flex; gap:var(--gap); align-items:center; justify-content:space-between; }
.hp-copy { flex:1 1 520px; max-width:640px; }
.hp-title { font-size:34px; line-height:1.06; margin:0 0 12px; font-weight:700; }
.hp-sub { color:var(--muted); margin:0 0 18px; font-size:15px; }
.hp-features { list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:10px; color:var(--muted); font-size:15px; }
.hp-features strong { color:#fff; font-weight:700; }
.hp-ctas { display:flex; gap:12px; margin-top:6px; }

/* Beta launch badge (hero eyebrow, above the title) */
.beta-badge {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:700;
  color:#ffd24a; background:rgba(255,122,42,0.12); border:1px solid rgba(255,122,42,0.35);
}
.beta-badge-dot {
  width:7px; height:7px; border-radius:50%; background:#ffd24a; flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(255,210,74,0.25); animation: beta-pulse 1.8s ease-in-out infinite;
}
@keyframes beta-pulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }

/* Live countdown to the beta launch (hero, below the badge) */
.countdown { display:flex; align-items:flex-start; gap:8px; margin:2px 0 18px; }
.countdown[hidden] { display:none; }
.countdown-unit {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:56px; padding:8px 10px; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,122,42,0.1), rgba(255,210,74,0.03));
  border:1px solid rgba(255,122,42,0.25);
  box-shadow:0 0 24px -10px rgba(255,122,42,0.5);
}
.countdown-num {
  font-size:26px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.countdown-label { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:3px; }
.countdown-colon { font-size:22px; font-weight:800; color:rgba(255,122,42,0.6); padding-top:8px; }

/* Buttons */
.cta { background:var(--cta-gradient); border:none; color:#fff; padding:12px 18px; border-radius:10px; font-weight:700; cursor:pointer; text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,0.45); transition: transform .08s ease, box-shadow .12s ease, filter .12s ease; display:inline-block; }
.cta:hover { filter:brightness(1.08); }
.cta:active { transform:translateY(1px); }
/* Light-sweep hover flourish -- homepage only (.hp-full is index.html's
   own body class, confirmed absent from app.html). .cta is shared with
   dozens of real in-app buttons (send, disconnect, save, etc. — see
   app.html), so position/overflow/::before live here scoped, not on the
   bare shared selector, to avoid a repeat of the .profile-card-badge
   leak above: this flourish was a homepage-only ask, not a product-wide
   change, and unscoped it would have applied everywhere .cta does. */
.hp-full .cta { position:relative; overflow:hidden; }
.hp-full .cta::before {
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-20deg); transition:left .5s ease; pointer-events:none;
}
.hp-full .cta:hover::before { left:130%; }
.cta:disabled { opacity:.5; cursor:not-allowed; filter:none; }
.btn.ghost { background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--muted); padding:10px 12px; border-radius:8px; text-decoration:none; display:inline-block; transition: background .12s ease, color .12s ease; }
.btn.ghost:hover { background:rgba(255,255,255,0.05); color:var(--text); }
/* Both set their own display:inline-block above, which — being an author
   rule — beats the browser's default [hidden]{display:none} regardless of
   specificity (author styles always outrank user-agent ones). Without this,
   el.hidden = true has no visible effect on any .cta/.btn.ghost element. */
.cta[hidden], .btn.ghost[hidden] { display:none; }

/* Visual mock */
.hp-visual { flex:0 0 420px; display:flex; align-items:center; justify-content:center; }
.mock-card { width:360px; border-radius:12px; background:linear-gradient(180deg,#0f0f10,#0b0b0b); padding:14px; box-shadow:0 8px 24px rgba(0,0,0,0.55); color:#fff; }
.mock-top { font-weight:700; color:#dcdcdc; margin-bottom:8px; }
.mock-body { display:flex; gap:12px; }
.avatar { width:48px; height:48px; border-radius:8px; background:linear-gradient(180deg,#3b3f42,#2b2f31); }
.line { height:10px; background:rgba(255,255,255,0.06); border-radius:6px; margin:8px 0; width:120px; }
.line.short { width:80px; }
.panel { background:rgba(255,255,255,0.02); padding:8px; border-radius:8px; width:100%; }
.pill { display:inline-block; background:rgba(255,255,255,0.03); padding:6px 8px; border-radius:999px; font-size:12px; color:#dcdcdc; }

/* Profile card (homepage marketing demo only) — structurally matches the
   real in-app profile card (public/app.html's #profileCardDialog: banner,
   avatar overlapping it via negative margin, then a left-aligned identity
   stack below) so this preview actually looks like the product.

   EVERY rule below is scoped under .hp-visual (the demo card's own
   wrapper, index.html-only, confirmed absent from app.html). This is not
   optional tidiness -- app.html reuses these exact same .profile-card-*
   class names for its REAL profile popup and links this same stylesheet,
   so an unscoped rule here doesn't just style the homepage, it also
   competes with app.html's own internal <style> block for the live
   product's actual profile card. That's a real regression that shipped
   once already: an earlier unscoped .profile-card-badge rule here (a
   pill-chip design, mismatched with app.html's icon-only one) leaked
   through on every property app.html's own rule didn't happen to also
   set (padding, background, border-radius, gap), visibly distorting the
   real badges in production. Relying on cascade order (app.html's inline
   <style> loads after this <link>, so it "wins" declared-property ties)
   is exactly the fragile mechanism that let this happen the moment any
   rule here touched a property the other side didn't -- prefixing every
   selector so these rules can never match anything outside .hp-visual is
   the actual fix, not a cascade-order workaround. */
.hp-visual .profile-card {
  width:360px; max-width:100%; border-radius:18px; padding:20px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)), var(--card);
  border:1px solid rgba(255,255,255,0.07);
  box-shadow:0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02), 0 0 44px -18px rgba(255,122,42,0.35);
  position:relative; overflow:hidden;
}
.hp-visual .profile-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
}
.hp-visual .profile-card-banner {
  height:120px; margin:-20px -20px 0 -20px; background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  background-size:cover; background-position:center;
}
.hp-visual .profile-card-close {
  position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:8px;
  border:none; background:rgba(0,0,0,0.25); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.hp-visual .profile-card-identity { position:relative; }
.hp-visual .profile-card-avatar-wrap { position:relative; width:88px; margin:-44px 0 10px; }
.hp-visual .profile-card-avatar {
  width:88px; height:88px; border-radius:50%; box-shadow:0 4px 14px rgba(0,0,0,0.5), 0 0 0 4px var(--card);
  position:relative; overflow:hidden;
}
.hp-visual .profile-card-avatar img { width:100%; height:100%; object-fit:cover; }
.hp-visual .profile-card-status { position:absolute; right:2px; bottom:2px; width:18px; height:18px; border-radius:50%; border:3px solid var(--card); background:#3ba55d; }
.hp-visual .profile-card-status.offline { background:#747f8d; }
.hp-visual .profile-card-name { display:flex; align-items:baseline; gap:8px; font-weight:700; font-size:19px; color:#fff; line-height:1.25; }
.hp-visual .profile-card-handle { color:#b9c2c8; font-size:14px; margin-top:2px; font-weight:600; }
.hp-visual .profile-card-friend-tag { color:#00e58a; font-size:12.5px; font-weight:600; margin-left:2px; }
.hp-visual .profile-card-pronouns { color:#8b959b; font-size:13px; margin-top:2px; }
.hp-visual .profile-card-trust {
  display:inline-flex; align-items:center; font-size:11px; font-weight:700; letter-spacing:.01em; line-height:1; height:23px; box-sizing:border-box;
  padding:0 10px; border-radius:999px;
  box-shadow:0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}
.hp-visual .profile-card-bio { color:#cbd6db; font-size:14px; line-height:1.45; }
/* Bare colored icon glyphs, no background tile — matches the real app's
   Discord-badge-row style exactly (see PROFILE_BADGE_ICONS in app.html),
   with the label carried by the native `title` tooltip instead of the
   full hover-tooltip component that markup doesn't need here. */
.hp-visual .profile-card-badges { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; }
.hp-visual .profile-card-badge { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; }
.hp-visual .profile-card-badge svg { width:100%; height:100%; }
.hp-visual .profile-card-badge.beta { color:#60cdff; }
.hp-visual .profile-card-badge.admin { color:#c86bff; }
.hp-visual .profile-card-badge.warpdrive { color:#ff7a2a; }
.hp-visual .profile-card-section { margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.06); text-align:left; }
.hp-visual .profile-card-section-label { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.hp-visual .profile-card-joined-value { font-size:14px; color:#fff; }
.hp-visual .profile-card-actions { margin-top:16px; }
.hp-visual .profile-card-actions input[type="text"] {
  background:#0b0b0b; border:1px solid rgba(255,255,255,0.06); border-radius:8px;
  color:var(--text); padding:9px 11px; font-size:14px; box-sizing:border-box;
}

/* Feature grid (below the hero) */
.hp-features-section { padding:8px 20px 56px; }
.hp-features-inner { max-width:var(--max-width); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.feature-card {
  background:linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:20px 18px;
  transition: transform .15s ease, border-color .15s ease;
}
.feature-card:hover { transform:translateY(-3px); border-color:rgba(255,122,42,0.3); }
.feature-icon {
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); color:#0b0b0b; margin-bottom:12px;
}
.feature-card h3 { margin:0 0 6px; font-size:15px; font-weight:700; color:#fff; }
.feature-card p { margin:0; font-size:13.5px; color:var(--muted); line-height:1.5; }

/* "Get ready for the beta" steps strip */
.hp-steps-section { padding:8px 20px 64px; border-top:1px solid rgba(255,255,255,0.04); }
.hp-steps-inner { max-width:var(--max-width); margin:0 auto; padding-top:48px; }
.hp-steps-title { text-align:center; font-size:24px; font-weight:700; margin:0 0 32px; }
.hp-steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.hp-step { text-align:center; padding:0 12px; }
.hp-step-num {
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
  background:var(--cta-gradient); color:#fff; font-weight:700; font-size:14px; margin-bottom:12px;
}
.hp-step h3 { margin:0 0 6px; font-size:15px; font-weight:700; color:#fff; }
.hp-step p { margin:0; font-size:13.5px; color:var(--muted); line-height:1.5; }

/* Footer */
.hp-footer { border-top:1px solid rgba(255,255,255,0.03); background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent); position:relative; z-index:40; padding:18px 0; }
.hp-footer-inner { max-width:var(--max-width); margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.footer-link { color:var(--muted); text-decoration:none; margin-left:12px; }

/* Forms and inputs (global) */
input[type="text"], input[type="password"], input[type="email"], input[type="date"], select {
  background:#0b0b0b; border:1px solid rgba(255,255,255,0.04); padding:10px 12px; border-radius:8px; color:var(--text); outline:none; transition: box-shadow .12s, border-color .12s; font-size:14px; width:100%;
}
input:focus, select:focus { box-shadow:0 8px 20px rgba(0,0,0,0.6); border-color:rgba(255,255,255,0.06); }

/* Small text */
.small { font-size:12px; color:var(--muted); text-align:left; }
.helper { font-size:12px; color:var(--muted); text-align:left; margin-top:4px; }
.muted { color:var(--muted); }

/* ---------------------------
   Auth container & card styles (scoped)
   --------------------------- */

/* IMPORTANT: These rules are scoped to .auth-page so the homepage remains untouched.
   Add class="auth-page" to the <body> of signup.html and login.html only. */

/* Page root for auth pages (scoped) */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;        /* vertical centering */
  justify-content: center;    /* horizontal centering */
  background: radial-gradient(circle at 8% 8%, #0f0f0f, var(--bg));
  color: var(--text);
  padding: 16px;
  box-sizing: border-box;
}

/* Neutralize any extra wrappers on auth pages */
.auth-page .auth-container, .auth-page .auth-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: block;
}

/* Compact card sizing (smaller register) */
.auth-page .card {
  width: var(--card-width);
  max-width: calc(100% - 24px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12)), var(--card);
  border-radius: var(--radius);
  padding: 18px;                /* reduced padding */
  box-shadow: 0 12px 36px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.03);
  text-align: left;
  box-sizing: border-box;

  /* Fit-to-viewport: leave a small margin around the card */
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-start;
  overflow: visible; /* prefer no internal scroll; fallback below */
}

/* Fallback: allow internal scroll only if absolutely necessary */
.auth-page .card.allow-internal-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Logo area inside card */
.auth-page .card .logo { display:flex; justify-content:center; margin-bottom:6px; }
.auth-page .card h2 { margin:6px 0 8px; font-size:18px; font-weight:700; text-align:center; color:var(--text); }
.auth-page .card .lead { text-align:center; color:var(--muted); margin-bottom:8px; font-size:13px; }

/* Form container used on signup/login */
.auth-page .signup-box, .auth-page .auth-form { width:100%; display:flex; flex-direction:column; gap:8px; }

/* Inputs (compact) */
.auth-page input[type="text"], .auth-page input[type="password"], .auth-page input[type="email"], .auth-page input[type="date"], .auth-page select {
  padding:8px 10px;
  font-size:13px;
  border-radius:8px;
}

/* Labels, helpers, status */
.auth-page label.small { font-size:12px; margin-bottom:4px; color:var(--muted); }
.auth-page .helper, .auth-page .status, .auth-page .message { font-size:12px; color:var(--muted); }

/* Buttons inside auth card (compact) */
.auth-page .auth-actions { display:flex; gap:8px; align-items:center; justify-content:center; margin-top:8px; }
.auth-page .cta { padding:10px 12px; font-size:14px; border-radius:9px; }
.auth-page .btn.ghost { padding:8px 10px; font-size:13px; }

/* Decorative thin lines inside card */
.auth-page .card::before, .auth-page .card::after {
  content: "";
  display:block;
  height:3px;
  border-radius:4px;
  margin: -14px 0 10px 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent-1));
  opacity:0.06;
  pointer-events:none;
}
.auth-page .card::after { margin-top:10px; opacity:0.04; }

/* Accessibility: focus outlines for keyboard users */
.auth-page :focus { outline: 3px solid rgba(255,122,42,0.12); outline-offset:2px; }

/* Responsive reductions to avoid overflow on short viewports */
@media (max-height:760px) {
  .auth-page .card { padding:14px; gap:6px; width:320px; }
  .auth-page .logo-img.small { max-height:19px; }
  .auth-page .card h2 { font-size:17px; }
  .auth-page input, .auth-page select { padding:7px 8px; font-size:12px; }
  .auth-page .cta { padding:9px 10px; font-size:13px; }
}

/* Very narrow screens: full-width card with stacked actions */
@media (max-width:420px) {
  .auth-page .card { width: calc(100% - 24px); padding:12px; }
  .auth-page .auth-actions { flex-direction:column; gap:8px; }
  .auth-page .cta, .auth-page .btn.ghost { width:100%; }
}

/* Keep homepage responsive (unchanged) */
@media (max-width:980px) {
  .hp-hero-inner { flex-direction:column-reverse; align-items:center; gap:20px; }
  .hp-visual { flex:0 0 auto; }
  /* .hp-copy's 520px flex-basis (set above for the desktop row layout,
     where it's a minimum *width*) becomes a forced minimum *height* once
     flex-direction flips to column here, leaving a large dead gap below
     its actual content -- reset it to size to content instead. */
  .hp-copy { flex:0 1 auto; text-align:center; }
  .hp-title { font-size:28px; }
  .hp-ctas { justify-content:center; }
  .countdown { justify-content:center; }
  .hp-features-inner { grid-template-columns:repeat(2,1fr); }
  .hp-steps-grid { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:480px) {
  .logo-img.small { max-height:22px; }
  .logo-img { max-height:32px; }
  .hp-title { font-size:22px; }
  .countdown { gap:5px; }
  .countdown-unit { min-width:46px; padding:6px 6px; }
  .countdown-num { font-size:20px; }
  .countdown-label { font-size:9px; }
  .countdown-colon { font-size:18px; padding-top:6px; }
  .mock-card { width:280px; }
  .hp-hero { padding:24px 12px; }
  .hp-features-inner { grid-template-columns:1fr; }
  .beta-badge { font-size:11.5px; padding:5px 12px; }
}
/* Nav gets tight below ~640px (now 6 links plus the logo) -- drop to a
   smaller, tighter link style, and let the row wrap onto a second line
   rather than overflowing past the viewport edge (each link keeps
   white-space:nowrap so it wraps as a whole link, never mid-word). */
@media (max-width:640px) {
  .hp-header-inner { flex-wrap:wrap; row-gap:4px; }
  .hp-nav { gap:2px; flex-wrap:wrap; justify-content:flex-end; }
  .nav-link { padding:6px 7px; font-size:13px; white-space:nowrap; }
}