/* Landing (`/` anonymous) — Syncc Auth / Landing mockup, faithfully.
 *
 * The page reuses the shared maintenance chrome class names
 * (.maintenance-body / .maintenance-page / .maintenance-topbar /
 * .maintenance-card) so the landing test's structural pins keep
 * holding, but every visual rule below OVERRIDES maintenance.css to
 * match the uploaded "Syncc Auth / Landing" mockup. Loaded AFTER
 * maintenance.css in index.html, so these win.
 *
 * Token mapping (mockup → production brand.css):
 *   --accent / --accent-bright       → --brand-teal / --brand-teal-bright
 *   --hero-on-navy                   → --brand-teal-bright
 *   --hero-aurora                    → --brand-teal-glow / --brand-teal-soft
 *   --navy / --page-shell            → --brand-navy-2 / --brand-page-deep
 * Pre-login has NO per-user palette — the mockup's [data-palette]
 * layer + bottom-right switcher are intentionally dropped. The page
 * always reads dark (navy hero); accent is strictly --brand-teal*,
 * never a hardcoded hex (only the rgba(255,255,255,…) glass tints +
 * the green "now" dot follow the mockup's literal glass treatment).
 */

/* ── Page surface: navy aurora + masked grid ───────────────────── */

.landing-body {
  background: var(--brand-page-deep);
  color: #ECF2FF;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* Override the maintenance light-paper page background with the
 * mockup's navy aurora: a teal glow anchored top-right over the deep
 * navy, with a soft secondary glow bottom-left. */
.landing-body.maintenance-body .maintenance-page {
  background:
    radial-gradient(110% 80% at 100% -5%,
      var(--brand-teal-glow) 0%,
      var(--brand-teal-soft) 30%,
      transparent 55%),
    radial-gradient(ellipse 60% 50% at 12% 108%,
      var(--brand-teal-soft) 0%,
      transparent 60%),
    linear-gradient(180deg, var(--brand-navy-2) 0%, var(--brand-page-deep) 100%);
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 100vh;
  display: block;
}

/* Faint grid texture (mockup body::before), masked to the upper-right
 * so it fades into the navy rather than tiling the whole surface. */
.landing-body.maintenance-body .maintenance-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse at 95% 5%, #000 0%, transparent 55%);
          mask-image: radial-gradient(ellipse at 95% 5%, #000 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* ── Topbar: gradient-squircle brand mark + wordmark ───────────── */

.landing-body .maintenance-topbar.landing-topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px clamp(20px, 5vw, 36px) 0;
  top: auto;
  left: auto;
  right: auto;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #ECF2FF;
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.landing-brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  overflow: hidden;                 /* round the app-icon's square corners */
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px var(--brand-teal-glow);
  flex: 0 0 auto;
}
/* The app-icon SVG carries its own navy ground + teal ring, so it fills
   the squircle (no gradient fill underneath). */
.landing-brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.landing-brand-name {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
}
.landing-brand-name em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  color: var(--brand-teal-bright);
  margin-left: -1px;
}
.landing-topbar-link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(236, 242, 255, 0.75);
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.landing-topbar-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
}

/* Center nav — mirrors the home topbar (About / Contact / Security &
   Privacy). Collapses below 900px; the footer carries these on phone. */
.landing-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.landing-nav-link {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 13px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(236, 242, 255, 0.75);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.landing-nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.landing-nav-link.is-active { color: #fff; }
@media (max-width: 900px) { .landing-nav { display: none; } }

/* ── Landing layout ─────────────────────────────────────────────── */

.landing-shell {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px clamp(20px, 5vw, 36px) 80px;
}

.landing-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
@media (max-width: 1000px) {
  .landing-split { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Left column: the message ──────────────────────────────────── */

.landing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(236, 242, 255, 0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.landing-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-teal-bright);
  box-shadow: 0 0 8px var(--brand-teal-bright);
  flex: 0 0 auto;
}

.landing-headline {
  margin: 22px 0 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: #fff;
  text-wrap: balance;
}
/* Only the school name is the italic-serif accent. The rest of the
 * headline reads as Instrument Serif roman per the mockup. */
.landing-headline em {
  font-style: italic;
  color: var(--brand-teal-bright);
  font-size: 1.06em;
  letter-spacing: -0.01em;
}

.landing-subtitle {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(236, 242, 255, 0.70);
  max-width: 520px;
  text-wrap: pretty;
}

.landing-cta-row {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.landing-cta-primary,
.landing-cta-secondary {
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.12s var(--brand-ease), filter 0.15s, background 0.15s, border-color 0.15s;
}
.landing-cta-primary {
  background: linear-gradient(180deg, var(--brand-teal-bright), var(--brand-teal));
  color: var(--brand-navy);
  box-shadow: 0 8px 22px var(--brand-teal-glow);
}
.landing-cta-primary:hover { filter: brightness(1.06); }
.landing-cta-primary:active { transform: scale(0.98); }
.landing-cta-primary svg { width: 18px; height: 18px; }
.landing-cta-secondary {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.landing-cta-secondary:hover { background: rgba(255, 255, 255, 0.10); }

.landing-domain-hint {
  margin: 20px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(236, 242, 255, 0.5);
}
.landing-domain-hint strong {
  color: rgba(236, 242, 255, 0.78);
  font-weight: 600;
}

/* ── Right column: product-preview glass card (.maintenance-card) ─ */

.landing-body .maintenance-card.landing-preview {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 28px;
  padding: 24px 26px;
  max-width: none;
  text-align: left;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 60px -10px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.landing-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 0% 0%, var(--brand-teal-soft), transparent 60%);
  pointer-events: none;
}
.landing-preview > * { position: relative; z-index: 1; }

.landing-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.landing-preview-cap {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(236, 242, 255, 0.55);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.landing-preview-cap-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34D399;
  animation: landing-preview-pulse 2s ease-in-out infinite;
}
@keyframes landing-preview-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.landing-preview-clock {
  font-size: 12px;
  color: rgba(236, 242, 255, 0.55);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.landing-preview-greeting {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.landing-preview-greeting em {
  font-style: italic;
  font-weight: 400;
  color: var(--brand-teal-bright);
  font-size: 1.10em;
}

/* Next-class card */
.landing-preview-next {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
}
.landing-preview-ring { position: relative; width: 64px; height: 64px; }
.landing-preview-ring svg { transform: rotate(-90deg); display: block; }
.landing-preview-ring-track { stroke: rgba(255, 255, 255, 0.10); fill: none; }
.landing-preview-ring-bar {
  stroke: var(--brand-teal-bright);
  stroke-linecap: round;
  fill: none;
  filter: drop-shadow(0 0 6px var(--brand-teal-glow));
}
.landing-preview-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 17px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.landing-preview-ring-unit {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: rgba(236, 242, 255, 0.55);
  margin-left: 2px;
}
.landing-preview-next-cap {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-teal-bright);
}
.landing-preview-next-name {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  margin-top: 2px;
  letter-spacing: -0.005em;
}
.landing-preview-next-meta {
  font-size: 12px;
  color: rgba(236, 242, 255, 0.55);
  margin-top: 2px;
}
.landing-preview-chev { color: rgba(236, 242, 255, 0.4); }

/* Hall-pass mini ticket */
.landing-preview-pass {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
}
.landing-preview-pass-cap {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(236, 242, 255, 0.55);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.landing-preview-pass-cap-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-teal-bright);
  box-shadow: 0 0 6px var(--brand-teal-bright);
}
.landing-preview-pass-dest {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-top: 4px;
  letter-spacing: -0.005em;
}
.landing-preview-pass-dest em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.16em;
  margin-right: 3px;
}
.landing-preview-pass-route {
  font-size: 11.5px;
  color: rgba(236, 242, 255, 0.55);
  margin-top: 2px;
}
.landing-preview-pass-timer {
  text-align: right;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand-teal-bright);
  font-variant-numeric: tabular-nums;
}
.landing-preview-pass-timer-cap {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(236, 242, 255, 0.45);
  margin-top: 4px;
  text-align: right;
}

/* Schedule sliver */
.landing-preview-sched {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
}
.landing-preview-sched-cap {
  padding: 12px 18px 8px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(236, 242, 255, 0.55);
}
.landing-preview-sched-row {
  display: grid;
  grid-template-columns: 56px 14px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 18px;
  font-size: 13px;
  color: rgba(236, 242, 255, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.landing-preview-sched-row.is-past { opacity: 0.45; }
.landing-preview-sched-row.is-now { background: rgba(255, 255, 255, 0.04); }
.landing-preview-sched-time {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: rgba(236, 242, 255, 0.5);
  text-align: right;
  font-weight: 500;
}
.landing-preview-sched-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  margin-left: auto;
}
.landing-preview-sched-row.is-now .landing-preview-sched-dot {
  background: var(--brand-teal-bright);
  box-shadow: 0 0 0 4px var(--brand-teal-soft);
}
.landing-preview-sched-name { font-weight: 500; color: #fff; }
.landing-preview-sched-row.is-past .landing-preview-sched-name { color: rgba(236, 242, 255, 0.7); }
.landing-preview-sched-now { color: rgba(236, 242, 255, 0.55); }

/* ── Feature strip ─────────────────────────────────────────────── */

.landing-features {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 800px) {
  .landing-features { grid-template-columns: 1fr 1fr; }
}
.landing-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(236, 242, 255, 0.78);
}
.landing-feature-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  display: grid;
  place-items: center;
  color: var(--brand-teal-bright);
  flex-shrink: 0;
}
.landing-feature-icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.landing-feature-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.005em;
  display: block;
}
.landing-feature-sub {
  font-size: 11.5px;
  color: rgba(236, 242, 255, 0.5);
  margin-top: 1px;
  display: block;
}

/* ── Foot ──────────────────────────────────────────────────────── */

.landing-body .maintenance-footer.landing-foot {
  position: relative;
  margin-top: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(236, 242, 255, 0.5);
}
.landing-body .landing-foot a {
  color: rgba(236, 242, 255, 0.7);
  text-decoration: none;
  border: 0;
}
.landing-body .landing-foot a:hover { color: #fff; }

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .landing-body .maintenance-topbar.landing-topbar { padding: 16px 20px 0; }
  .landing-shell { padding: 32px 20px 60px; }
  .landing-subtitle { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-preview-cap-dot { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Doc pages — /about, /contact, /privacy
   Long-form reading on the same navy landing surface. A single
   readable measure (≈ 70ch), centered; prose reads light on navy.
   ════════════════════════════════════════════════════════════════════ */

.landing-body .landing-doc {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}
.landing-doc-title { margin-top: 18px; }
.landing-doc-lede { max-width: 60ch; }
.landing-doc-meta {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(236, 242, 255, 0.42);
}

/* Prose */
.landing-doc-body { margin-top: 34px; }
.landing-doc-body > * + * { margin-top: 18px; }
.landing-doc-body p {
  font-size: 16px;
  line-height: 1.72;
  color: rgba(236, 242, 255, 0.74);
}
.landing-doc-body p.landing-doc-first {
  font-size: 18px;
  color: rgba(236, 242, 255, 0.92);
}
.landing-doc-body h2 {
  margin-top: 40px;
  font-family: 'Inter', var(--brand-font, sans-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}
.landing-doc-body h3 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.landing-doc-body strong { color: #fff; font-weight: 600; }
.landing-doc-body em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: var(--brand-teal-bright);
  font-size: 1.05em;
}
.landing-doc-body a {
  color: var(--brand-teal-bright);
  text-decoration: none;
  border-bottom: 1px solid var(--brand-teal-line);
}
.landing-doc-body a:hover { border-bottom-color: var(--brand-teal-bright); }

.landing-doc-first { /* alias hook for first-para targeting */ }
.landing-doc-signoff {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 19px !important;
  color: rgba(236, 242, 255, 0.86) !important;
}

/* Inset card (boundary / questions) */
.landing-doc-card {
  margin-top: 30px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 22px 24px;
}
.landing-doc-card h3 { margin-bottom: 6px; }
.landing-doc-card p { color: rgba(236, 242, 255, 0.66); }

/* Contact option cards */
.landing-doc-contact {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 680px) { .landing-doc-contact { grid-template-columns: 1fr; } }
.landing-doc-contact-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  text-decoration: none;
}
.landing-doc-contact-card.is-primary {
  background: var(--brand-teal-soft);
  border-color: var(--brand-teal-line, rgba(91, 122, 184, 0.28));
}
.landing-doc-contact-cap {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-teal-bright);
}
.landing-doc-contact-val {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}
.landing-doc-contact-sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(236, 242, 255, 0.62);
}

.landing-doc-cta { margin-top: 34px; }

/* Contact form */
.landing-doc-form {
  margin-top: 30px;
  display: grid;
  gap: 16px;
}
.landing-doc-form .row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) { .landing-doc-form .row2 { grid-template-columns: 1fr; } }
.landing-field { display: flex; flex-direction: column; gap: 7px; }
.landing-field label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(236, 242, 255, 0.78);
}
.landing-field input,
.landing-field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 0.15s, background 0.15s;
}
.landing-field textarea { min-height: 130px; resize: vertical; }
.landing-field input::placeholder,
.landing-field textarea::placeholder { color: rgba(236, 242, 255, 0.34); }
.landing-field input:focus,
.landing-field textarea:focus {
  outline: none;
  border-color: var(--brand-teal-bright);
  background: rgba(255, 255, 255, 0.06);
}
/* Honeypot — visually + a11y hidden, off-screen for bots to fill */
.landing-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.landing-doc-form button[type="submit"] {
  justify-self: start;
  border: 0;
  cursor: pointer;
}
.landing-doc-captcha { margin-top: 2px; }

/* Flash messages */
.landing-flash {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.landing-flash-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.45;
  border: 1px solid transparent;
}
.landing-flash-item .lf-ic {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.landing-flash-item .lf-ic svg { width: 18px; height: 18px; }
.landing-flash-item.is-success {
  background: color-mix(in srgb, var(--brand-teal) 16%, var(--brand-navy));
  border-color: color-mix(in srgb, var(--brand-teal-bright) 42%, transparent);
  color: #EEF4FF;
}
.landing-flash-item.is-success .lf-ic {
  background: var(--brand-teal-bright);
  color: var(--brand-navy);
}
.landing-flash-item.is-error {
  background: color-mix(in srgb, #FB6E5B 15%, var(--brand-navy));
  border-color: color-mix(in srgb, #FB6E5B 42%, transparent);
  color: #FFECE8;
}
.landing-flash-item.is-error .lf-ic {
  background: #FB6E5B;
  color: #2A0E0A;
}