/* ==========================================================================
   landing.css — home page ("/") only.

   A faithful transfer of the supplied "AI Interpreting" landing design
   (Traduno design system: Space Grotesk + Space Mono, a single bold orange
   accent over warm near-neutral greys). This page is deliberately EXEMPT from
   the site-wide Bootstrap-only rule (MarkupBootstrapOnlyTests) — the operator
   asked for the marketing home page to match the original pixel-design rather
   than the Bootstrap theme the rest of the app shares. Colours are the exact
   oklch tokens from the design system; fonts are self-hosted (CSP font-src
   'self'); every asset is local (CSP img-src 'self').
   ========================================================================== */

/* ---- Self-hosted brand webfonts (Space Grotesk variable + Space Mono) ---- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/space-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/space-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Design tokens (verbatim oklch from the Traduno design system) ---- */
:root {
  --lc-orange: oklch(0.6386 0.2272 30.9);
  --lc-orange-dark: oklch(0.5421 0.1911 30.83);
  --lc-orange-hover: oklch(0.6855 0.1897 29.86);
  --lc-accent-soft: oklch(0.9547 0.0209 24.78);
  --lc-ink: oklch(0.1532 0.0589 31.48);
  --lc-text: oklch(0.498 0.032 26.54);
  --lc-muted: oklch(0.7204 0.0118 24.37);
  --lc-faint: oklch(0.6862 0.0095 26.06);
  --lc-light: oklch(0.9537 0.0021 17.2);
  --lc-neutral: oklch(0.9866 0.0021 17.19);
  --lc-panel: oklch(0.9814 0.0032 17.21);
  --lc-border: #f0ebea;
  --lc-success: #3cb179;
  --lc-success-bg: #e8f6ef;

  --lc-font: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --lc-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
  --lc-leading: 1.312;

  --lc-container: 1248px;
  --lc-radius-md: 8px;
  --lc-radius-lg: 14px;
  --lc-radius-xl: 16px;
  --lc-pill: 9999px;

  --lc-shadow-float: 0 24px 60px -24px rgba(30, 12, 8, 0.18), 0 8px 20px -12px rgba(30, 12, 8, 0.1);
  --lc-shadow-card: 0 4px 24px -10px rgba(30, 12, 8, 0.1);
  --lc-shadow-sm: 0 1px 2px rgba(30, 12, 8, 0.06);
}

/* ---- Base ---- */
.lc-body {
  margin: 0;
  font-family: var(--lc-font);
  font-weight: 400;
  line-height: var(--lc-leading);
  color: var(--lc-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.lc-body *,
.lc-body *::before,
.lc-body *::after {
  box-sizing: border-box;
}
.lc-body img,
.lc-body svg {
  display: block;
  max-width: 100%;
}
.lc-body a {
  color: inherit;
  text-decoration: none;
}
.lc-body h1,
.lc-body h2,
.lc-body h3,
.lc-body p {
  margin: 0;
}

.lc-container {
  width: 100%;
  max-width: var(--lc-container);
  margin-inline: auto;
  padding-inline: 24px;
}
.lc-section {
  padding-block: 72px;
}
.lc-section--alt {
  background: var(--lc-neutral);
  border-top: 1px solid var(--lc-border);
}

/* ---- Section header (orange micro-label + big heading + lead) ---- */
.lc-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--lc-orange);
  margin-bottom: 14px;
}
.lc-h2 {
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--lc-ink);
}
.lc-lead {
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--lc-text);
  margin-top: 14px;
  max-width: 46ch;
}

/* ---- Buttons ---- */
.lc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 20px;
  border-radius: var(--lc-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.lc-btn svg {
  width: 16px;
  height: 16px;
}
/* Buttons are <a> elements, so the color rules are scoped under .lc-body to
   out-specify the base ".lc-body a { color: inherit }" reset — otherwise the
   inherited ink colour would win and the primary button would render dark text
   on orange instead of white. */
.lc-body .lc-btn--primary {
  background: var(--lc-orange);
  color: #fff;
}
.lc-body .lc-btn--primary:hover {
  background: var(--lc-orange-dark);
  color: #fff;
}
.lc-body .lc-btn--outline {
  background: #fff;
  color: var(--lc-orange);
  border-color: var(--lc-orange);
}
.lc-body .lc-btn--outline:hover {
  background: var(--lc-accent-soft);
  color: var(--lc-orange);
}

/* ---- Nav ---- */
.lc-nav {
  border-bottom: 1px solid var(--lc-border);
  background: #fff;
}
.lc-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
}
.lc-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 22px;
  color: var(--lc-ink);
}
.lc-brand img {
  height: 30px;
  width: auto;
}
.lc-brand__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--lc-pill);
  background: var(--lc-orange);
}
.lc-nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
}
.lc-nav__link {
  font-size: 16px;
  font-weight: 500;
  color: var(--lc-ink);
  white-space: nowrap;
}
.lc-btn {
  white-space: nowrap;
}
.lc-nav__link:hover {
  color: var(--lc-orange);
}

/* ---- Hero ---- */
.lc-hero {
  padding-block: 64px 84px;
}
.lc-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.lc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lc-orange);
  background: #fff;
  border: 1px solid var(--lc-orange);
  border-radius: var(--lc-pill);
  padding: 7px 14px;
}
.lc-eyebrow__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--lc-pill);
  background: var(--lc-orange);
}
.lc-hero__title {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-top: 24px;
}
.lc-hero__title .lc-accent {
  color: var(--lc-orange);
}
.lc-hero__sub {
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--lc-text);
  margin-top: 22px;
  max-width: 34ch;
}
.lc-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* ---- Feature checklist ---- */
.lc-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 30px;
}
.lc-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  color: var(--lc-ink);
}
.lc-check svg {
  width: 17px;
  height: 17px;
  color: var(--lc-orange);
  flex: none;
}

/* ---- Phone mockup ---- */
.lc-phone-wrap {
  display: flex;
  justify-content: center;
}
.lc-phone {
  position: relative;
  width: 320px;
  max-width: 100%;
  background: #17110f;
  border-radius: 44px;
  padding: 12px;
  box-shadow: var(--lc-shadow-float);
}
.lc-phone__notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 118px;
  height: 26px;
  background: #17110f;
  border-radius: var(--lc-pill);
  z-index: 2;
}
.lc-screen {
  background: #fff;
  border-radius: 34px;
  padding: 40px 16px 16px;
  overflow: hidden;
}
.lc-screen__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.lc-screen__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lc-muted);
}
.lc-screen__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--lc-ink);
  margin-top: 2px;
}
.lc-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--lc-orange);
  background: var(--lc-accent-soft);
  border-radius: var(--lc-pill);
  padding: 4px 8px;
  flex: none;
}
.lc-live__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--lc-pill);
  background: var(--lc-orange);
}
.lc-screen__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lc-muted);
  margin-bottom: 8px;
}
.lc-langlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lc-langrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-md);
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--lc-ink);
}
.lc-langrow__tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--lc-muted);
}
.lc-langrow--on {
  border-color: var(--lc-orange);
  background: color-mix(in oklch, var(--lc-accent-soft) 70%, #fff);
}
.lc-langrow--on .lc-langrow__check {
  color: var(--lc-orange);
}
.lc-langrow__check {
  width: 15px;
  height: 15px;
}
.lc-langrow--muted {
  color: var(--lc-text);
}
.lc-controlbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #17110f;
  border-radius: var(--lc-radius-md);
  padding: 10px 12px;
  margin-top: 10px;
}
.lc-play {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--lc-pill);
  background: var(--lc-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.lc-play svg {
  width: 15px;
  height: 15px;
}
.lc-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  flex: 1;
}
.lc-wave span {
  display: block;
  width: 3px;
  border-radius: var(--lc-pill);
  background: var(--lc-orange);
  animation: lc-wave 1s ease-in-out infinite;
}
.lc-wave span:nth-child(1) { height: 40%; animation-delay: 0s; }
.lc-wave span:nth-child(2) { height: 75%; animation-delay: 0.1s; }
.lc-wave span:nth-child(3) { height: 55%; animation-delay: 0.2s; }
.lc-wave span:nth-child(4) { height: 90%; animation-delay: 0.15s; }
.lc-wave span:nth-child(5) { height: 45%; animation-delay: 0.3s; }
.lc-wave span:nth-child(6) { height: 70%; animation-delay: 0.05s; }
.lc-wave span:nth-child(7) { height: 35%; animation-delay: 0.25s; }
.lc-wave span:nth-child(8) { height: 80%; animation-delay: 0.18s; }
.lc-wave span:nth-child(9) { height: 50%; animation-delay: 0.32s; }
.lc-wave span:nth-child(10) { height: 65%; animation-delay: 0.08s; }
@keyframes lc-wave {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .lc-wave span { animation: none; }
}
.lc-delay {
  font-size: 11px;
  color: #cabfba;
  flex: none;
}

/* ---- Two-ways cards ---- */
.lc-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 44px;
}
.lc-card {
  background: #fff;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-xl);
  box-shadow: var(--lc-shadow-card);
  padding: 28px;
}
.lc-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--lc-radius-md);
  background: var(--lc-accent-soft);
  color: var(--lc-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.lc-card__icon svg {
  width: 24px;
  height: 24px;
}
.lc-card__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--lc-ink);
  margin-bottom: 10px;
}
.lc-card__text {
  font-size: 16px;
  color: var(--lc-text);
}

/* ---- How listeners join (QR + steps) ---- */
.lc-join {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
  margin-top: 44px;
}
.lc-qr {
  background: var(--lc-panel);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-xl);
  padding: 28px;
  text-align: center;
}
.lc-qr img {
  width: 190px;
  height: 190px;
  margin: 0 auto 16px;
  border-radius: var(--lc-radius-md);
}
.lc-qr__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lc-muted);
  margin-bottom: 12px;
}
.lc-qr__url {
  font-family: var(--lc-mono);
  font-size: 13px;
  color: var(--lc-text);
}
.lc-steps {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 26px;
}
.lc-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.lc-step__num {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--lc-pill);
  background: var(--lc-orange);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lc-step__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--lc-ink);
}
.lc-step__text {
  font-size: 15px;
  color: var(--lc-text);
  margin-top: 2px;
}

/* ---- Languages grid ---- */
.lc-langgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-xl);
  overflow: hidden;
  margin-top: 40px;
  background: #fff;
}
.lc-lang {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-right: 1px solid var(--lc-border);
  border-bottom: 1px solid var(--lc-border);
}
.lc-lang__name {
  font-size: 15px;
  font-weight: 500;
  color: var(--lc-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lc-lang__code {
  font-size: 12px;
  color: var(--lc-muted);
  text-transform: uppercase;
  flex: none;
}
.lc-langnote {
  font-size: 14px;
  color: var(--lc-muted);
  margin-top: 18px;
}

/* ---- Interpreter section ---- */
.lc-interp {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.lc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.lc-pill-tag {
  font-size: 14px;
  font-weight: 500;
  color: var(--lc-text);
  background: var(--lc-light);
  border-radius: var(--lc-pill);
  padding: 8px 16px;
}
.lc-interp-card {
  background: #fff;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-xl);
  box-shadow: var(--lc-shadow-card);
  padding: 22px;
}
.lc-interp-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.lc-interp-card__id {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lc-avatar {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--lc-pill);
  background: var(--lc-orange);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lc-interp-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--lc-ink);
}
.lc-interp-card__role {
  font-size: 13px;
  color: var(--lc-text);
}
.lc-onair {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lc-success);
  background: var(--lc-success-bg);
  border-radius: var(--lc-pill);
  padding: 4px 9px;
  flex: none;
}
.lc-onair__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--lc-pill);
  background: var(--lc-success);
}
.lc-interp-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--lc-border);
  padding-top: 14px;
}
.lc-route {
  font-size: 13px;
  font-weight: 700;
  color: var(--lc-orange);
  background: var(--lc-accent-soft);
  border-radius: var(--lc-pill);
  padding: 5px 12px;
}
.lc-interp-card__meta {
  font-size: 13px;
  color: var(--lc-text);
}
.lc-interp-card__wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 16px;
  margin-top: 14px;
}
.lc-interp-card__wave span {
  display: block;
  width: 3px;
  border-radius: var(--lc-pill);
  background: var(--lc-orange);
  animation: lc-wave 1s ease-in-out infinite;
}
.lc-interp-card__wave span:nth-child(odd) { height: 60%; }
.lc-interp-card__wave span:nth-child(even) { height: 100%; animation-delay: 0.2s; }

/* ---- Accounts panel ---- */
.lc-accounts {
  background: var(--lc-panel);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-xl);
  padding: 56px 24px;
  text-align: center;
}
.lc-accounts .lc-h2 {
  margin-inline: auto;
}
.lc-accounts .lc-lead {
  margin-inline: auto;
  /* The signed-in greeting embeds the user's email — an unbreakable token that would
     otherwise push the panel wider than a phone screen. */
  overflow-wrap: anywhere;
}
.lc-accounts .lc-btn {
  margin-top: 26px;
}
/* Issue #5 — signed-in variant of the accounts panel: "Go to my events" next to a
   "Sign out" POST form. The form is an inline-flex item like the anchor button so the
   two sit on one centred row; the row carries the panel's top margin instead of each
   button, otherwise the buttons would stack the 26 px on top of the row's own 30 px. */
.lc-accounts .lc-hero__cta {
  justify-content: center;
  margin-top: 26px;
}
.lc-accounts .lc-hero__cta .lc-btn {
  margin-top: 0;
}
.lc-signout {
  display: inline-flex;
  margin: 0;
}

/* ---- Footer ---- */
.lc-footer {
  border-top: 1px solid var(--lc-border);
  background: #fff;
  padding-block: 48px;
}
.lc-footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
}
.lc-footer__tagline {
  font-size: 14px;
  color: var(--lc-text);
  margin-top: 12px;
  max-width: 30ch;
}
.lc-footer__col h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lc-muted);
  margin: 0 0 12px;
}
.lc-footer__col a {
  display: block;
  font-size: 15px;
  color: var(--lc-text);
  margin-bottom: 8px;
}
.lc-footer__col a:hover {
  color: var(--lc-orange);
}
.lc-social {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.lc-social a {
  width: 34px;
  height: 34px;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lc-social img {
  width: 16px;
  height: 16px;
}
.lc-footer__bottom {
  border-top: 1px solid var(--lc-border);
  margin-top: 32px;
  padding-top: 20px;
  font-size: 13px;
  color: var(--lc-faint);
}

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .lc-hero__grid,
  .lc-join,
  .lc-interp {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .lc-langgrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 720px) {
  .lc-section {
    padding-block: 52px;
  }
  /* Issue #1 — the header row is logo | Sign in | Book a demo inside a 345 px row on a
     393 px phone. Chromium shrank the brand flex item and squished the logo; Safari kept
     the logo at 30 px and pushed the CTA into the gutter. Keep the brand rigid, shrink the
     logo and compact the CTA so the row fits with slack. */
  .lc-nav__inner {
    gap: 12px;
    padding-block: 14px;
  }
  .lc-brand {
    flex: none;
    /* No-logo deployments render the bundled mark + the brand name as text; the text
       has to shrink with the logo or a ten-letter brand overflows a 360 px phone. */
    font-size: 18px;
    gap: 6px;
  }
  .lc-brand img {
    height: 24px;
  }
  .lc-nav__links {
    gap: 12px;
    min-width: 0;
  }
  .lc-nav__link {
    font-size: 15px;
  }
  .lc-nav__link--hide {
    display: none;
  }
  .lc-nav__links .lc-btn {
    padding: 11px 14px;
    font-size: 15px;
  }
  .lc-nav__links .lc-btn svg {
    display: none;
  }
  .lc-cards {
    grid-template-columns: 1fr;
  }
  .lc-langgrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .lc-hero__cta .lc-btn {
    flex: 1;
    justify-content: center;
  }
  /* The sign-out form wraps its button, so it must grow like a button for the two
     accounts-panel buttons to share the row evenly on phones. */
  .lc-hero__cta .lc-signout {
    flex: 1;
  }
}

/* 360 px Androids: the row is only 312 px wide — one more step down for the logo. */
@media (max-width: 400px) {
  .lc-brand {
    font-size: 16px;
  }
  .lc-brand img {
    height: 20px;
  }
}

/* 320–360 px phones (iPhone SE, small Androids): 16 px gutters, an 18 px logo, a smaller
   CTA, and the wordmark text is hidden — the mark plus the link's aria-label keep the
   brand identifiable, and the row (≈280 px at 320 px) fits again. */
@media (max-width: 360px) {
  .lc-container {
    padding-inline: 16px;
  }
  .lc-nav__inner {
    gap: 10px;
  }
  .lc-nav__links {
    gap: 10px;
  }
  .lc-brand img {
    height: 18px;
  }
  .lc-brand span {
    display: none;
  }
  .lc-nav__link {
    font-size: 14px;
  }
  .lc-nav__links .lc-btn {
    padding: 10px 12px;
    font-size: 14px;
  }
}