/* Lodosia public website — CP1 styles.
   Palette mirrors apps/mobile/src/constants/lodosia-theme.ts. */

:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --text-secondary: #475569;
  --blue: #2e6df5;
  --blue-dark: #1f56cc;
  --orange: #f5811f;
  --orange-dark: #a94b08;
  --on-accent: #ffffff;
  --blue-tint: #eaf1fe;
  --orange-tint: #fdf0e2;
  --ink: #07090d;
  /* Text-safe accents (WCAG AA): --orange is for fills, borders, and glows;
     text set in orange uses these two. --blue-text is for small blue text
     on the page background; --blue stays for filled buttons (white on it). */
  --orange-text: #d05f08; /* >=3:1 against the rendered hero glow at 390px, measured */
  --blue-text: #1f56cc;
  --field-border: #64748b;

  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 2px 8px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.06);
  --gutter: clamp(20px, 5vw, 48px);
  --max: 1120px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--text);
  color: var(--on-accent);
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--blue);
  color: var(--on-accent);
  box-shadow: 0 6px 18px rgba(46, 109, 245, 0.28);
}
.btn-primary:hover { background: var(--blue-dark); }
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--blue); color: var(--blue); }
.btn-block { width: 100%; }

.chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--blue-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip-orange { background: var(--orange-tint); color: var(--orange-dark); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 248, 251, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 40px; height: 40px; border-radius: 11px; }
.brand-name { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; }

.menu-btn {
  display: none;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.site-nav { display: flex; align-items: center; gap: 24px; font-size: 0.95rem; font-weight: 500; color: var(--text-secondary); }
.site-nav a:hover { color: var(--text); }
.site-nav .nav-cta {
  background: var(--blue);
  color: var(--on-accent);
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
}
.site-nav .nav-cta:hover { background: var(--blue-dark); color: var(--on-accent); }

/* ---------- Hero ---------- */

.hero {
  background:
    radial-gradient(circle at 12% 20%, rgba(46, 109, 245, 0.12), transparent 36%),
    radial-gradient(circle at 88% 30%, rgba(245, 129, 31, 0.12), transparent 32%),
    var(--bg);
}
.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--gutter) clamp(56px, 8vw, 88px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.kicker, .eyebrow {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  margin: 16px 0 20px;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.hero h1 .accent,
.section-head h2 .accent { color: var(--orange-text); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-secondary); max-width: 34em; }

/* Hero brand plate (refined in Beta CP2): the splash artwork on its own
   dark rounded plate, echoing the black icon tile in the header and the
   closing band's full artwork. Larger than before so the logo reads as part
   of the hero rather than an afterthought; the blue/orange glow ties it to
   the hero gradients. The headline still dominates. */
.hero-splash {
  width: clamp(132px, 15vw, 176px);
  border-radius: 28px;
  margin-bottom: 26px;
  box-shadow:
    0 22px 48px rgba(46, 109, 245, 0.22),
    0 10px 26px rgba(245, 129, 31, 0.16),
    0 0 0 1px rgba(15, 23, 42, 0.10);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.trust-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 28px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.trust-row li::before { content: "✓"; color: var(--blue-text); font-weight: 800; margin-right: 6px; }

/* Phone mock */
.hero-visual { display: flex; justify-content: center; }
.phone {
  width: min(330px, 78vw);
  max-width: 100%;
  aspect-ratio: 0.5;
  background: var(--ink);
  border-radius: 46px;
  padding: 10px;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.08);
}
.phone-screen {
  height: 100%;
  border-radius: 37px;
  background: var(--bg);
  padding: 44px 16px 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.85rem;
}
.phone-topbar { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1rem; }
.phone-topbar img { width: 28px; height: 28px; border-radius: 8px; }
.phone-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.phone-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: var(--text-secondary); font-size: 0.78rem; font-weight: 600; }
.phone-card-head strong { color: var(--blue-text); }
.task {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-weight: 500;
}
.task i {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-radius: 50%;
  display: grid; place-items: center;
  font-style: normal; font-size: 0.7rem; color: var(--on-accent);
}
.task.is-done i { background: var(--blue); border-color: var(--blue); }
.task.is-done span { color: var(--text-secondary); }
.task em { font-style: normal; font-size: 0.7rem; font-weight: 700; color: var(--text-secondary); }
.task em.geo { color: var(--orange-dark); background: var(--orange-tint); padding: 3px 8px; border-radius: 999px; }
.phone-card-feed { margin-top: auto; }
.feed-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--text-secondary); font-size: 0.78rem; }
.feed-row b { width: 24px; height: 24px; border-radius: 50%; background: var(--blue-tint); color: var(--blue-dark); display: grid; place-items: center; font-size: 0.7rem; }
.phone-cta {
  background: var(--blue);
  color: var(--on-accent);
  text-align: center;
  padding: 12px;
  border-radius: 14px;
  font-weight: 700;
}

/* ---------- Sections ---------- */

.section { padding: clamp(64px, 9vw, 112px) 0; }
.section-alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 52px); }
.section-head h2, .split h2, .join h2, .closing h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin: 12px 0 16px;
  letter-spacing: -0.03em;
}
.section-lead { color: var(--text-secondary); font-size: 1.1rem; }

/* Steps */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  counter-reset: step;
}
.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow);
}
.step-number {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--orange-tint);
  color: var(--orange-dark);
  font-weight: 800;
}
.step h3 { font-size: 1.15rem; margin: 16px 0 8px; }
.step p { color: var(--text-secondary); font-size: 0.98rem; }

/* Features */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.feature-icon {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--blue-tint);
  color: var(--blue-dark);
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 1.1rem;
}
.feature-icon-ai { font-size: 0.8rem; letter-spacing: 0.04em; }
.feature-card h3 { font-size: 1.1rem; margin: 16px 0 8px; }
.feature-card p { color: var(--text-secondary); font-size: 0.96rem; }
.feature-note {
  margin-top: 24px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Geo split */
.split-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.split-copy > p { color: var(--text-secondary); font-size: 1.05rem; }
.geo-modes { margin: 28px 0 0; display: grid; gap: 0; }
.geo-modes div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.geo-modes dt { font-weight: 800; }
.geo-modes dd { margin: 0; color: var(--text-secondary); }
.small-note {
  margin-top: 20px;
  padding-left: 14px;
  border-left: 3px solid var(--orange);
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.flow-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
}
.flow-step { display: flex; align-items: center; gap: 14px; }
.flow-step span {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--on-accent);
  display: grid; place-items: center;
  font-weight: 800;
}
.flow-step p { font-weight: 500; }
.flow-line { width: 2px; height: 26px; background: var(--border); margin-left: 18px; }

/* Audiences */
.audience-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.audience-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius);
  padding: 24px;
}
.audience-card:nth-child(even) { border-top-color: var(--orange); }
.audience-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.audience-card p { color: var(--text-secondary); font-size: 0.96rem; }

/* ---------- Join / form ---------- */

.join {
  background:
    radial-gradient(circle at 85% 20%, rgba(245, 129, 31, 0.12), transparent 34%),
    radial-gradient(circle at 10% 80%, rgba(46, 109, 245, 0.12), transparent 34%),
    var(--bg);
}
.join-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.join-copy > p { color: var(--text-secondary); font-size: 1.05rem; }
.join-points-intro { margin-top: 24px; font-weight: 700; }
.join-points { list-style: none; margin-top: 12px; display: grid; gap: 10px; color: var(--text); font-weight: 500; }
.join-points li { display: flex; gap: 10px; align-items: flex-start; }
.join-points li::before { content: "✓"; color: var(--blue-text); font-weight: 800; flex: none; }

.join-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--shadow);
  display: grid;
  gap: 18px;
}
.form-status-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--orange-tint);
  color: var(--orange-dark);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.45;
}
.form-status-banner .chip { margin-top: 1px; }

.field { display: grid; gap: 6px; }
.field label { font-weight: 700; font-size: 0.95rem; }
.required, .optional { font-weight: 500; color: var(--text-secondary); font-size: 0.85rem; }
.field input, .field select {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--field-border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(46, 109, 245, 0.18);
}
.field input[aria-invalid="true"] { border-color: #c92a2a; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.select-wrap::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.field-error { color: #c92a2a; font-size: 0.9rem; font-weight: 500; }
.field-error[hidden] { display: none; }

/* Honeypot: visually removed, still in the DOM for bots. */
.field-hp {
  position: absolute;
  left: -10000px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-status { font-size: 0.95rem; font-weight: 500; color: var(--text); min-height: 1.4em; }
/* Status states (CP2b): the live region is one element; a modifier class per
   state gives each outcome a distinct, non-intrusive treatment. */
.form-status.is-preview, .form-status.is-success, .form-status.is-error {
  padding: 12px 14px;
  border-radius: 12px;
}
.form-status.is-preview { background: var(--blue-tint); color: var(--blue-dark); }
.form-status.is-submitting { color: var(--text-secondary); }
.form-status.is-success { background: var(--blue-tint); color: var(--blue-dark); }
.form-status.is-error { background: #fdecec; color: #a61e1e; }
.form-status-banner[hidden] { display: none; }
.btn:disabled { opacity: 0.7; cursor: progress; transform: none; }
.form-privacy { font-size: 0.85rem; color: var(--text-secondary); }

/* FAQ */
.faq-list { max-width: 820px; }
.faq-list details { border-top: 1px solid var(--border); padding: 6px 0; }
.faq-list details:last-child { border-bottom: 1px solid var(--border); }
.faq-list summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 14px 36px 14px 0;
  position: relative;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blue-text);
  font-size: 1.4rem;
  font-weight: 700;
}
.faq-list details[open] summary::after { content: "–"; }
.faq-list p { color: var(--text-secondary); padding: 0 0 18px; max-width: 700px; }

/* Closing band */
.closing {
  background:
    radial-gradient(circle at 50% 30%, rgba(46, 109, 245, 0.3), transparent 42%),
    radial-gradient(circle at 50% 70%, rgba(245, 129, 31, 0.14), transparent 40%),
    var(--ink);
  color: #f4f7fb;
  padding: clamp(64px, 9vw, 112px) 0;
  text-align: center;
}
.closing-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* Splash artwork blended into the band: screen mode drops its black
   background so the glow passes behind the mark; the slight contrast lift
   pushes JPEG near-black to true black so no image edge shows. */
.closing .closing-splash {
  width: min(360px, 70vw);
  mix-blend-mode: screen;
  filter: contrast(1.08);
}
.closing h2 { color: #ffffff; margin-top: 12px; }
.closing p { color: #b7c0cf; font-size: 1.1rem; }
.closing .btn { margin-top: 14px; }

/* Footer */
.site-footer { background: var(--surface); border-top: 1px solid var(--border); }
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  color: var(--text-secondary);
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand img { width: 36px; height: 36px; border-radius: 10px; }
.footer-brand div { display: grid; line-height: 1.25; }
.footer-brand strong { color: var(--text); }
.footer-brand span { font-size: 0.82rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.92rem; font-weight: 500; }
.footer-nav a:hover { color: var(--text); }
.footer-inner small { font-size: 0.85rem; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .menu-btn { display: inline-block; }
  .site-nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px 14px; border-radius: 10px; }
  .site-nav a:hover { background: var(--bg); }
  .site-nav .nav-cta { margin-top: 6px; text-align: center; }

  .hero-inner, .split-inner, .join-inner { grid-template-columns: 1fr; }
  /* Narrow screens: brand, headline, copy, and actions first; phone mock after. */
  .hero-visual { order: 1; margin-top: 8px; }
  .hero-splash { width: 124px; }
  .phone { width: min(280px, 72vw); }
  .steps, .feature-grid, .audience-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .steps, .feature-grid, .audience-grid { grid-template-columns: 1fr; }
  .geo-modes div { grid-template-columns: 1fr; gap: 4px; }
  .flow-card { padding: 22px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}


/* ---------- Beta hub (/beta, Beta CP2) ---------- */

/* Hero variant: the phone mock gives way to a facts card. */
.hero-beta .hero-inner { grid-template-columns: 1.1fr 0.9fr; }
.beta-facts {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 30px);
  box-shadow: var(--shadow);
}
.beta-facts-title {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-text);
  margin-bottom: 6px;
}
.beta-facts-list { margin: 0; display: grid; }
.beta-facts-list div {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.beta-facts-list div:first-child { border-top: 0; }
.beta-facts-list dt { font-weight: 800; }
.beta-facts-list dd { margin: 0; color: var(--text-secondary); font-size: 0.98rem; }

/* Why Lodosia: the brand definition, given room to breathe. */
.why { padding-bottom: clamp(48px, 7vw, 88px); }
.why h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin: 12px 0 18px; letter-spacing: -0.03em; max-width: 720px; }
.why-definition {
  max-width: 780px;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.5;
  color: var(--text);
  font-weight: 500;
}
.why-definition em { font-style: italic; color: var(--orange-text); }
.why-note { max-width: 720px; margin-top: 18px; color: var(--text-secondary); font-size: 1.05rem; }

/* Roles */
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.role-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow);
}
.role-card-member { border-top-color: var(--orange); }
.role-card h3 { font-size: 1.25rem; margin: 14px 0 10px; }
.role-card p { color: var(--text-secondary); font-size: 0.98rem; }
.role-points { list-style: none; margin-top: 16px; display: grid; gap: 8px; font-weight: 500; font-size: 0.95rem; }
.role-points li { display: flex; gap: 10px; align-items: flex-start; }
.role-points li::before { content: "✓"; color: var(--blue-text); font-weight: 800; flex: none; }
.role-card-member .role-points li::before { color: var(--orange-text); }
.role-note {
  margin-top: 22px;
  padding-left: 14px;
  border-left: 3px solid var(--orange);
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: 720px;
}

/* What testers agree to */
.expect-list { list-style: none; max-width: 820px; display: grid; gap: 4px; }
.expect-list li {
  padding: 12px 0 12px 18px;
  border-left: 3px solid var(--blue);
  color: var(--text-secondary);
  font-size: 1rem;
}
.expect-list li:nth-child(even) { border-left-color: var(--orange); }
.expect-list strong { color: var(--text); }

/* Application form: builds on the launch-list form styles. */
.join-inner-beta { align-items: start; }
.join-aside { margin-top: 22px; font-size: 0.95rem; }
.join-aside a { color: var(--blue-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.beta-form-title { font-size: 1.2rem; }
.beta-fields { display: grid; gap: 18px; }
.beta-fields[hidden], .field[hidden], .beta-confirmation[hidden] { display: none; }
.field-hint { font-size: 0.85rem; color: var(--text-secondary); }
.field-hint a { color: var(--blue-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field select[aria-invalid="true"] { border-color: #c92a2a; }
.check-row { display: flex; gap: 12px; align-items: flex-start; }
.check-row input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 3px 0 0;
  accent-color: var(--blue);
  cursor: pointer;
}
.check-row input[type="checkbox"][aria-invalid="true"] { outline: 2px solid #c92a2a; outline-offset: 2px; }
.check-row label { font-weight: 500; font-size: 0.95rem; line-height: 1.5; cursor: pointer; }
.form-status.is-invalid { padding: 12px 14px; border-radius: 12px; background: #fdecec; color: #a61e1e; }
.beta-confirmation {
  background: var(--blue-tint);
  border: 1px solid rgba(46, 109, 245, 0.25);
  border-radius: var(--radius);
  padding: 20px;
  display: grid;
  gap: 10px;
}
.beta-confirmation h4 { margin: 4px 0 0; font-size: 1.15rem; line-height: 1.25; letter-spacing: -0.01em; }
.beta-confirmation p { color: var(--text-secondary); font-size: 0.95rem; }
.beta-confirmation .chip { justify-self: start; }

@media (max-width: 960px) {
  .hero-beta .hero-inner { grid-template-columns: 1fr; }
  .beta-facts { order: 1; }
  .role-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .beta-facts-list div { grid-template-columns: 1fr; gap: 2px; }
  .field-row { grid-template-columns: 1fr; }
}