:root {
  /* Dark-tech hacker palette. Near-black background, phosphor cyan
     accents, subtle teal mid. Reads as terminal/engineering tool. */
  --bg: #050608;
  --bg-deep: #000;
  --bg-band: #0b0e12;
  --bg-band-accent: #0d1418;
  --fg: #d4d4d4;
  --fg-dim: #6b7280;
  --fg-bright: #f5f5f5;
  --line: #1a1f26;
  --line-bright: #2a323e;
  --accent: #14b8a6;
  --accent-hover: #0d9488;
  --accent-bright: #22d3ee;
  --accent-glow: #67e8f9;
  --phosphor: #5eead4;
  --amber: #fbbf24;          /* terminal amber, used sparingly */
  --danger: #ef4444;
  --max: 1100px;
  /* Monospace stack used throughout. Berkeley Mono / JetBrains Mono
     if installed; falls through to ui-monospace which is what every
     modern OS ships. */
  --mono: 'Berkeley Mono', 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code',
          ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
}

* { box-sizing: border-box; }

/* Pattern #16 baseline for unstyled / lightly-styled form controls.
   Pages that style their own controls (.btn, .signup-form *) override
   this with their own min-height — those rules win on specificity. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
select,
textarea,
button {
  min-height: 44px;
}
/* Checkbox + radio labels carry the tap target instead of the box. */
label:has(> input[type=checkbox]),
label:has(> input[type=radio]) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

html, body {
  margin: 0;
  padding: 0;
  color: var(--fg);
  font: 15px/1.65 var(--mono);
  -webkit-font-smoothing: antialiased;
  /* Default body background — quiet near-black with a very subtle
     cyan top-glow. No scanline patterns, no moving overlays. This
     is what every FUNCTIONAL page uses. */
  background:
    radial-gradient(ellipse at 50% -10%, rgba(34, 211, 238, 0.04), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  position: relative;
}

/* Landing-page now uses the same has-ambient mesh as /chat — see
   the .has-ambient block below. The body.landing class is still
   referenced by other landing-specific rules (.hero, .band, etc.)
   so we keep the class but no longer attach a unique background
   to it. The earlier breathing-spotlight + faint scanline + radial
   blobs were all retired in favor of one static mesh. */

/* Technical background mesh for /chat (opt-in via `body.has-ambient`).
   Replaces the earlier animated breathing-blob backdrop. The mesh is
   STATIC by design — no motion to compete with text the operator is
   trying to read.

   Critical perf note: the mesh sits on a `position: fixed`
   PSEUDO-ELEMENT rather than on the body via `background-attachment:
   fixed`. The latter forces the browser to repaint the gradient
   layers on every scroll frame (no composite shortcut available
   for body fixed-attached backgrounds), which is exactly what was
   making the chat pane feel sluggish during streaming. A fixed
   pseudo-element gets `transform: translateZ(0)` and joins the
   composite layer set, so scrolling reuses the cached layer and
   touches zero pixels.

   Composition is four cooperating gradient layers stacked on
   ::before:
     1. Fine dot grid (24px spacing, 1px dots, ~10% opacity) for the
        engineering-blueprint feel.
     2. Major grid lines (96px spacing, 1px lines, ~4% opacity)
        anchor the dots into a coordinate plane.
     3. A top-center spotlight for depth so it isn't flat.
     4. Faint brand-color glows in the corners.

   Cards retain their opaque --bg-band fills so the mesh only shows
   in the gutters between cards and around the page edges. */
html:has(body.has-ambient) { background: var(--bg); }
body.has-ambient { background: var(--bg); }
body.has-ambient::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* GPU-compositable: translateZ pushes this onto its own layer
     so scrolling never repaints it. */
  transform: translateZ(0);
  background-color: transparent;
  background-image:
    radial-gradient(circle at 0% 0%, rgba(103, 232, 249, 0.05), transparent 28%),
    radial-gradient(circle at 100% 100%, rgba(94, 234, 212, 0.04), transparent 30%),
    radial-gradient(ellipse at 50% -5%, rgba(34, 211, 238, 0.06), transparent 50%),
    linear-gradient(to right, rgba(103, 232, 249, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(103, 232, 249, 0.04) 1px, transparent 1px),
    radial-gradient(circle, rgba(103, 232, 249, 0.10) 1px, transparent 1.5px);
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    96px 96px,
    96px 96px,
    24px 24px;
  background-position:
    0 0,
    0 0,
    50% 0,
    0 0,
    0 0,
    0 0;
}
/* All content sits above the mesh layer. */
body.has-ambient > nav,
body.has-ambient > main,
body.has-ambient > footer,
body.has-ambient > header,
body.has-ambient > div,
body.has-ambient > section {
  position: relative;
  z-index: 1;
}

/* Mobile: simpler mesh so the grid doesn't feel busy on a narrow
   viewport and the GPU does even less work per frame. Drop the
   line grid + corner glows; keep just the dot grid and the
   top-center spotlight. */
@media (max-width: 720px) {
  body.has-ambient::before {
    background-image:
      radial-gradient(ellipse at 50% -5%, rgba(34, 211, 238, 0.05), transparent 50%),
      radial-gradient(circle, rgba(103, 232, 249, 0.09) 1px, transparent 1.5px);
    background-size:
      100% 100%,
      20px 20px;
    background-position:
      50% 0,
      0 0;
  }
}

/* Respect reduced-motion preferences. Critical accessibility move:
   stop ALL the motion if the OS says don't. */
@media (prefers-reduced-motion: reduce) {
  body.landing::after { animation: none; opacity: 0; }
  body.has-ambient::before,
  body.has-ambient::after { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

h1, h2, h3 {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--fg-bright);
}

/* Cursor — a blinking block character placed after a phrase. */
.cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  vertical-align: text-bottom;
  background: var(--accent-glow);
  margin-left: 4px;
  animation: blink 1.05s steps(1) infinite;
  box-shadow: 0 0 8px rgba(103, 232, 249, 0.6);
}

@keyframes blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Terminal-style prefix mark — use before short labels:
   <span class="prompt-sigil">$</span> trial --start */
.prompt-sigil {
  color: var(--accent-glow);
  font-weight: 700;
  margin-right: 6px;
}

/* Boxed label like [ACTIVE] or { online }. Used for status pills,
   feature tags, and any micro-UI that should feel terminal. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line-bright);
  border-radius: 4px;
  font-size: 11px;
  color: var(--accent-glow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tag::before { content: '['; opacity: 0.5; }
.tag::after  { content: ']'; opacity: 0.5; }

/* Pulsing status dot for "online" indicators */
.dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-glow);
  box-shadow: 0 0 8px rgba(103, 232, 249, 0.7);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

/* Fade-in-up reveal for sections on load. Apply class="reveal" to
   any element you want to slide up into view. JS adds .reveal-on
   once the element is near viewport (intersection observer). */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-on { opacity: 1; transform: translateY(0); }

/* The animated star/parallax field that used to live here was
   retired alongside the breathing-spotlight in favor of the
   static `.has-ambient` mesh applied via body class. .bg-field,
   .star, .star-layer, @keyframes twinkle, drift-right, drift-left
   were all unreferenced after the index.html cleanup and are
   gone. Net: ~60 lines off style.css and a handful of fewer
   composite layers on the landing. */

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

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  background: var(--bg-band);
  color: var(--accent);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px 24px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  font-weight: 700;
  font-size: 18px;
  /* Pattern #16: 44px tap target on every nav-level control. */
  min-height: 44px;
}

/* Brand mark: the aperture-style SVG from /favicon.svg, rendered as
   a background image. Hiding the inline "L" character keeps every
   page that still ships <span class="brand-mark">L</span> in
   markup compatible without touching their HTML; the letter is
   collapsed and the SVG fills the same 32×32 footprint. */
.brand-mark {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: var(--bg-deep) url('/favicon.svg') center/24px 24px no-repeat;
  border: 1px solid var(--line-bright);
  border-radius: 6px;
  box-shadow: 0 0 14px rgba(103, 232, 249, 0.22), inset 0 0 8px rgba(103, 232, 249, 0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  text-indent: -9999px;
  overflow: hidden;
  vertical-align: middle;
}
a:hover .brand-mark {
  box-shadow: 0 0 22px rgba(103, 232, 249, 0.45), inset 0 0 10px rgba(103, 232, 249, 0.12);
  transform: scale(1.03);
}

.brand-name {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--fg-bright);
}

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

.nav-links a {
  color: var(--fg-dim);
  font-size: 15px;
  /* Pattern #16: nav links are tap targets at every viewport. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}

.nav-links a:hover { color: var(--fg); }

/* Sign-out lives in the nav across every signed-in page, and got
   tapped accidentally on mobile when crowded between Help and
   Billing. A subtle vertical separator + dimmer base color marks
   it as a destructive action without making it harder to find. */
.nav-links a#signout {
  position: relative;
  padding-left: 18px;
  color: rgba(150, 150, 150, 0.7);
}
.nav-links a#signout::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: var(--line);
}
.nav-links a#signout:hover {
  color: #f87171;
}

.cta-link {
  background: var(--accent);
  color: var(--bg) !important;
  padding: 0 16px;
  border-radius: 8px;
  font-weight: 600;
  /* Pattern #16: the prominent nav CTA is a tap target. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.cta-link:hover { background: var(--accent-hover); }

.hero {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 96px 24px 72px;
  text-align: center;
}
/* Faint phosphor glow seated behind the headline. Anchors the
   hero block visually so the eye treats the H1 as the brightest
   point on the page without needing the gradient to do all the
   work. Slightly larger than the headline so the edges fade
   naturally into the page background. */
.hero::before {
  content: '';
  position: absolute;
  top: 28%;
  left: 50%;
  width: min(640px, 92%);
  height: 220px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(103, 232, 249, 0.12) 0%,
    rgba(94, 234, 212, 0.06) 38%,
    transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}

/* Terminal-style prompt label that sits above the hero h1 like
   you've just landed in a tool: "$ lumen --intro" */
.hero-prompt {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent-glow);
  letter-spacing: 0.08em;
  margin: 0 0 24px;
  opacity: 0.9;
}
.hero-prompt::before {
  content: '$ ';
  color: var(--accent);
  opacity: 0.7;
}

.hero h1 {
  margin: 0 0 24px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(36px, 5.8vw, 60px);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

/* Accent span inside the hero headline. Uses a brand gradient
   (phosphor → cyan → glow) rendered via background-clip: text so
   the highlighted phrase feels like emitted light rather than a
   flat colored word. Soft cyan text-shadow underneath thickens
   the perceived weight without sacrificing legibility. */
.hero-accent {
  font-style: normal;
  background: linear-gradient(135deg,
    #a5f3fc 0%,
    #67e8f9 38%,
    #22d3ee 72%,
    #5eead4 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 28px rgba(103, 232, 249, 0.35);
  filter: drop-shadow(0 0 8px rgba(103, 232, 249, 0.18));
}

.tagline {
  max-width: 720px;
  margin: 0 auto 40px;
  font-size: 18px;
  color: var(--fg-dim);
}

.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

body:not(.lumen-app) .btn {
  /* inline-flex so min-height + centred label work uniformly across
     <button> and <a class="btn">. inline-block forced the label to
     sit at the top of the box once min-height was added. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  /* Pattern #16: 44px tap target on every CTA-style button at every
     viewport (was mobile-only via a max-width: 640px override). */
  min-height: 44px;
}

body:not(.lumen-app) .btn-primary {
  background: var(--accent);
  color: var(--bg-deep);
  box-shadow: 0 0 0 0 rgba(103, 232, 249, 0);
  transition: background 0.18s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
body:not(.lumen-app) .btn-primary:hover {
  background: var(--accent-bright);
  color: var(--bg-deep);
  box-shadow: 0 8px 32px -10px rgba(103, 232, 249, 0.45);
  transform: translateY(-1px);
}

body:not(.lumen-app) .btn-ghost {
  background: transparent;
  border-color: var(--line-bright);
  color: var(--fg);
  transition: all 0.15s ease;
}
body:not(.lumen-app) .btn-ghost:hover {
  border-color: var(--accent-glow);
  color: var(--accent-glow);
}

body:not(.lumen-app) .btn.block { display: block; text-align: center; }

.hero-note {
  color: var(--fg-dim);
  font-size: 14px;
  margin: 0;
}

.band {
  border-top: 1px solid var(--line);
  padding: 64px 24px;
}

.band-accent {
  background: var(--bg-band-accent);
}

.band > h2,
.band > .band-lede,
.band > .lede {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

.band > h2 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(28px, 3.8vw, 40px);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
/* Section h2s get a small bracketed prefix to feel like a code
   chapter heading. Use as: <h2><span class="h2-mark">//</span> Title</h2> */
.h2-mark {
  color: var(--accent-glow);
  opacity: 0.65;
  margin-right: 12px;
  font-weight: 400;
}

.band-lede {
  color: var(--fg-dim);
  font-size: 17px;
  margin: 0 auto 40px;
  max-width: 720px;
}

.lede {
  font-size: 17px;
  color: var(--fg-dim);
  max-width: 720px;
  margin: 0 auto;
}

.grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: 24px;
}

.two-col { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.three-col { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
  background:
    linear-gradient(180deg, rgba(103, 232, 249, 0.03), transparent 60%),
    var(--bg-band);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.card:hover {
  border-color: var(--line-bright);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px -16px rgba(34, 211, 238, 0.20);
}

.card h3 {
  margin: 0 0 12px;
  font-size: 18px;
}

.card p {
  margin: 0;
  color: var(--fg-dim);
  font-size: 15px;
}

.pricing { gap: 24px; }

.plan {
  position: relative;
  background: var(--bg-band);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px;
}

.plan-featured {
  border-color: var(--accent-bright);
  box-shadow: 0 12px 48px -20px rgba(103, 232, 249, 0.35);
}

.ribbon {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}

.plan h3 {
  margin: 0 0 12px;
  font-size: 22px;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
}

.amount {
  font-size: 48px;
  font-weight: 700;
  color: var(--fg);
}

.unit {
  color: var(--fg-dim);
  font-size: 16px;
}

.plan-sub {
  margin: 0 0 24px;
  color: var(--fg-dim);
  font-size: 14px;
}

.plan ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.plan li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg-dim);
  font-size: 15px;
}
.plan li:last-child { border-bottom: 0; }

.plan li::before {
  content: "•";
  color: var(--accent);
  margin-right: 8px;
}

.footer {
  border-top: 1px solid var(--line);
  padding: 48px 24px;
  text-align: center;
  color: var(--fg-dim);
  font-size: 14px;
  max-width: var(--max);
  margin: 48px auto 0;
}

/* Compact footer for app-shell pages (chat, dashboard, settings).
   Smaller padding, single line. */
.footer-compact {
  border-top: 1px solid var(--line);
  padding: 20px 24px;
  text-align: center;
  color: var(--fg-dim);
  font-size: 12px;
  margin-top: 32px;
}
.footer-compact a {
  color: var(--fg-dim);
  margin: 0 8px;
  /* Pattern #16: compact footer links are still nav, still need
     44px tap height at every viewport. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}
.footer-compact a:hover { color: var(--accent); }

.footer p { margin: 6px auto; max-width: 640px; }
.footer-brand {
  color: var(--fg);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin-bottom: 8px !important;
}
.small { font-size: 12px; margin-top: 16px !important; }

/* Signup / login card. Atmospheric premium feel with a subtle
   glow gradient behind the form panel, serif headline, and a
   refined inner panel border. */
.signup-card {
  position: relative;
  max-width: 460px;
  margin: 64px auto;
  padding: 0 24px;
}

/* Aurora glow seated behind the card. A slow-pulsing phosphor
   cushion that gives the sign-in / signup / forgot pages presence
   without competing with the form copy. */
.signup-card::after {
  content: '';
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 540px;
  max-width: 110%;
  height: 380px;
  background:
    radial-gradient(ellipse at center,
      rgba(103, 232, 249, 0.16) 0%,
      rgba(94, 234, 212, 0.08) 32%,
      transparent 65%);
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
  animation: card-aurora 14s ease-in-out infinite alternate;
}

@keyframes card-aurora {
  0%   { opacity: 0.75; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 1;    transform: translate(-50%, 6px) scale(1.04); }
}

/* Decorative horizon line above the card title. Mirrors the brand
   mark and signals "this is part of the same family as the logo". */
.signup-card::before {
  content: '';
  display: block;
  width: 80px;
  height: 1px;
  margin: 0 auto 28px;
  background: linear-gradient(90deg,
    transparent, var(--accent-glow) 50%, transparent);
  opacity: 0.7;
}

.signup-card h1 {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.01em;
  text-align: center;
  /* Brand gradient applied via background-clip so the headline reads
     as emitted light, same treatment used on the landing hero. */
  background: linear-gradient(135deg,
    #f5fefe 0%,
    #a5f3fc 35%,
    #67e8f9 65%,
    #5eead4 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(103, 232, 249, 0.28));
}

.signup-card .tagline {
  margin: 0 0 32px;
  text-align: center;
  font-size: 15px;
  color: var(--fg-dim);
  line-height: 1.6;
}

.signup-form {
  position: relative;
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.06), transparent 50%),
    var(--bg-band);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.06),
    0 24px 64px -32px rgba(2, 8, 23, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

/* Phosphor edge along the top of the form card. A 1px cyan rail
   that fades at both ends — adds depth without a hard border. */
.signup-form::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(103, 232, 249, 0.55) 50%,
    transparent 100%);
  pointer-events: none;
}

/* Submit button picks up a slow inner-light sweep on hover that
   reads as a phosphor pulse traveling across the surface. Pure
   CSS via a translate gradient overlay (::before pseudo-element
   is gated by overflow:hidden on the button so the sweep clips
   cleanly to the button shape). */
.signup-form button[type=submit] {
  position: relative;
  overflow: hidden;
}
.signup-form button[type=submit]::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(110deg,
    transparent 20%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 80%);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 0.55s ease;
}
.signup-form button[type=submit]:hover::after {
  left: 130%;
}

.signup-form label {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--fg-dim);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 500;
}

.signup-form input[type=email],
.signup-form input[type=text],
.signup-form input[type=password] {
  display: block;
  width: 100%;
  padding: 13px 14px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  font-size: 15px;
  margin-bottom: 18px;
  font-family: var(--sans);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  /* Pattern #16: form inputs must be tappable at every viewport. */
  min-height: 44px;
}

.signup-form input[type=email]:focus,
.signup-form input[type=text]:focus,
.signup-form input[type=password]:focus {
  outline: none;
  border-color: var(--accent-glow);
  box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.15);
}

.signup-form button[type=submit] {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  background: var(--accent);
  color: var(--bg-deep);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.25s ease, transform 0.12s ease;
  letter-spacing: 0.02em;
  /* Pattern #16. */
  min-height: 44px;
}

.signup-form button[type=submit]:hover {
  background: var(--accent-bright);
  box-shadow: 0 12px 32px -12px rgba(103, 232, 249, 0.45);
  transform: translateY(-1px);
}
.signup-form button[type=submit]:active { transform: translateY(0); }
.signup-form button[type=submit]:disabled {
  opacity: 0.5; cursor: wait; transform: none; box-shadow: none;
}

.signup-meta {
  margin-top: 16px;
  font-size: 13px;
  color: var(--fg-dim);
  text-align: center;
}

.signup-status {
  display: none;
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
}

.signup-status.success {
  display: block;
  background: rgba(20, 184, 166, 0.1);
  border: 1px solid var(--accent);
  color: var(--accent);
}

.signup-status.error {
  display: block;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid #ef4444;
  color: #ef4444;
}

/* Password input + reveal eye toggle. The wrapping div positions the
   button on the right edge of the input. */
.pw-wrap {
  position: relative;
  margin-bottom: 16px;
}
.pw-wrap input[type=password],
.pw-wrap input[type=text] {
  width: 100%;
  padding-right: 44px;
  margin-bottom: 0;
}
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  /* Pattern #16: icon-only show/hide control was 32x32, well below
     the 44x44 tap target. Bump to 44x44 and keep the SVG glyph at
     18px so the visual icon size doesn't change. */
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  color: var(--fg-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.pw-toggle:hover { color: var(--fg); background: rgba(255,255,255,0.04); }
.pw-toggle:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pw-toggle svg { width: 18px; height: 18px; }

/* Mobile: bump inputs to 16px so iOS Safari does not zoom on focus,
   and tighten nav so the brand + key actions fit on one line. */
/* Mobile-narrow tunings for sections added during the landing-page
   refresh. These specifically target overflow and gap-too-wide cases
   that don't show up at desktop widths but bite under 480px. */
@media (max-width: 480px) {
  /* Live stats strip: tighten gaps + smaller numbers so all 5 cells
     fit two rows of two/three without overflow. */
  #stats-strip {
    gap: 16px !important;
    padding: 14px 12px !important;
    margin-top: 36px !important;
  }
  #stats-strip > div > div:last-child {
    font-size: 18px !important;
  }
  /* Demo window: kill the breadcrumb on very narrow widths so the
     chrome strip doesn't truncate ugly. The dots + model indicator
     are enough signal. */
  #demo .demo-breadcrumb { display: none; }
  /* Hero h1 — already clamped via clamp() but bump min down slightly
     so it doesn't crowd the cursor block. */
  .hero h1 { font-size: 32px; }
}

@media (max-width: 640px) {
  /* Bump body text from 15px to 16px on small screens. Two
     benefits: it stops iOS Safari from auto-zooming any input
     under 16px, and it lifts general readability closer to the
     14-16px sweet spot reading research lands on. */
  html, body { font-size: 16px; line-height: 1.62; }

  .signup-form input[type=email],
  .signup-form input[type=password] {
    font-size: 16px;
  }
  /* Every input + button + select inherits 16px minimum so the
     whole product respects the iOS no-zoom rule without listing
     every selector by name. */
  input, select, textarea, button {
    font-size: 16px;
  }
  .signup-card {
    margin: 32px auto;
  }
  .nav {
    padding: 14px 16px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .nav .brand-name {
    font-size: 15px;
  }
  .nav-links {
    gap: 8px 12px;
    font-size: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
  }
  .nav-links a {
    /* Base rule already guarantees 44px; mobile only tightens the
       horizontal padding so links pack tighter on narrow screens. */
    padding: 0 4px;
  }
  .nav-links a.cta-link {
    padding: 0 14px;
    font-size: 14px;
  }
  .hero { padding: 56px 18px 36px; }
  .hero h1 {
    font-size: clamp(30px, 7.4vw, 40px);
    line-height: 1.18;
  }
  .hero-prompt { font-size: 12px; margin-bottom: 18px; }
  .tagline { font-size: 16px; margin-bottom: 32px; }
  .hero-ctas { gap: 12px; }
  body:not(.lumen-app) .btn {
    /* 44px tap target. Padding bumped to match. */
    padding: 14px 22px;
    font-size: 15px;
    min-height: 44px;
  }
  .band { padding: 44px 16px; }
  .dash-card, .settings, .billing, .admin, .detail, .help {
    padding: 0 14px;
    margin-top: 28px;
  }
  table { font-size: 13px; }
  th, td { padding: 10px 8px; }
  /* Pricing / feature cards: looser internal padding so text
     doesn't kiss the edges, which is the most common readability
     complaint on small phones. */
  .card, .pricing-card, .feature-card {
    padding: 20px 18px;
  }
}

/* Sub-480 phones (older iPhone SE class, narrow Android). Push
   the hero rhythm one notch tighter so the headline doesn't
   wrap into four lines, and let the demo window scroll
   horizontally instead of forcing the chrome to mash together. */
@media (max-width: 480px) {
  .hero { padding: 44px 14px 28px; }
  .hero h1 { font-size: clamp(28px, 8.2vw, 34px); }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  body:not(.lumen-app) .hero-ctas .btn { width: 100%; }
  /* Stats strip: collapse to two columns instead of trying to
     fit four across at 320px. */
  #stats-strip {
    gap: 12px 20px !important;
    justify-content: space-around !important;
  }
  /* Demo window content: smaller monospace so the prompt-fence
     example doesn't get cut off mid-word. */
  #demo pre { font-size: 11.5px !important; }
}