/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --orange-50:#fdf3ea; --orange-100:#fbe2c9; --orange-200:#f6c089;
  --orange-300:#f0a052; --orange-400:#ea8c34; --orange-500:#e67e22;
  --orange-600:#d35400; --orange-700:#a34000; --orange-800:#7a3000; --orange-900:#3d1800;

  /* Action */
  --green-50:#e7f7ee;  --green-100:#c3eed2; --green-200:#8edcab;
  --green-300:#52c884; --green-400:#34b96e; --green-500:#27ae60;
  --green-600:#219a52; --green-700:#197a40; --green-800:#11522b; --green-900:#082916;

  /* Ink (navy) */
  --ink-50:#f4f6f7;  --ink-100:#e3e8eb; --ink-200:#c2ccd2;
  --ink-300:#94a4ad; --ink-400:#5f6f70; --ink-500:#445253;
  --ink-600:#34474f; --ink-700:#2c3e50; --ink-800:#1d2a36; --ink-900:#0e151b;

  /* Neutrals (cool) */
  --paper:#fafafa;
  --card:#ffffff;
  --border:#ecf0f1;
  --muted-bg:#f1f4f5;
  --muted-text:#445253;

  /* Status (semantic) */
  --status-live-bg:#dff6e8;     --status-live-fg:#0f5b2d;
  --status-soon-bg:#fff1dd;     --status-soon-fg:#7b3f00;
  --status-planned-bg:#e4eaec;  --status-planned-fg:#334142;

  /* Focus */
  --focus:#174ea6;

  /* Radii */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:999px;

  /* Shadow */
  --shadow-sm:0 1px 2px rgba(44,62,80,.06);
  --shadow-md:0 6px 16px rgba(44,62,80,.08);
  --shadow-lg:0 12px 30px rgba(44,62,80,.10);

  /* Type */
  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing scale */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background: var(--paper);
  color: var(--ink-700);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--s-6);
}

section { padding: var(--s-16) 0; }

.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  min-height: 65px;
}

.logo {
  color: var(--ink-700);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.logo span { color: var(--orange-600); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  font-weight: 700;
}

.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--orange-600); }

.nav-cta {
  background: var(--green-500);
  border-radius: var(--r-sm);
  color: #fff;
  display: inline-block;
  padding: var(--s-2) 18px;
}

.nav-links .nav-cta:hover {
  background: var(--green-600);
  color: #fff;
}

/* ---------- Components ---------- */
.btn {
  border:0; border-radius: var(--r-md); cursor:pointer;
  font: inherit; font-family: var(--body); font-weight: 700; font-size: 15px;
  line-height: 1.2; padding: 12px 22px; text-decoration:none; display:inline-block;
  text-align: center;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--green { background: var(--green-500); color:#fff; }
.btn--green:hover { background: var(--green-600); }
.btn--orange { background: var(--orange-500); color:#fff; }
.btn--orange:hover { background: var(--orange-600); }
.btn--ink { background: var(--ink-700); color:#fff; }
.btn--ink:hover { background: var(--ink-800); }
.btn--outline { background: transparent; border: 2px solid var(--border); color: var(--ink-700); padding: 10px 20px;}
.btn--outline:hover { border-color: var(--ink-700); background: var(--card); }
.btn--ghost { background: transparent; color: var(--ink-700); padding: 10px 14px; }
.btn--ghost:hover { background: var(--ink-50); }
.btn--sm { padding: 8px 14px; font-size: 13px; }
.btn--lg { padding: 16px 28px; font-size: 17px; }
.btn[disabled] { opacity:.5; cursor: not-allowed; transform:none; }

.badge {
  border-radius: var(--r-pill);
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--body); font-size: 12px; font-weight:700;
  line-height: 1; padding: 7px 10px;
}
.badge .ledge { width:6px; height:6px; border-radius: 50%; }
.badge--live    { background: var(--status-live-bg);    color: var(--status-live-fg); }
.badge--live .ledge { background: var(--green-500); box-shadow: 0 0 0 3px rgba(39,174,96,.18); }
.badge--soon    { background: var(--status-soon-bg);    color: var(--status-soon-fg); }
.badge--soon .ledge { background: var(--orange-500); }
.badge--planned { background: var(--status-planned-bg); color: var(--status-planned-fg); }
.badge--planned .ledge { background: var(--ink-300); }
.badge--neutral { background: var(--ink-50); color: var(--ink-600); }

.input {
  background:#fff; border: 2px solid var(--ink-100);
  border-radius: var(--r-md); color: var(--ink-700);
  font: inherit; padding: 12px 14px; min-width: 220px;
}
.input:focus { outline: none; border-color: var(--green-500); }
.input-group { display:flex; gap: 10px; }
.input-group .input, .input-group input { flex:1; min-width:0; }
.input-group .btn { flex: 0 0 auto; }
.label-stack label, .field-row label, .notify-form label {
  display:block; font-size:13px; font-weight:700; color: var(--ink-700); margin-bottom: 6px;
}
.input--err, .input[aria-invalid="true"], .input-group input[aria-invalid="true"] { border-color: var(--orange-500); }

.domain {
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--mono); font-size: 12px; font-weight:600;
  color: var(--ink-600);
  background: var(--ink-50); border:1px solid var(--border);
  padding: 5px 9px; border-radius: var(--r-sm);
}
.domain::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--orange-500); }

.eyebrow,
.hero .ey,
.np .ey {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing:.12em;
  color: var(--orange-600);
  margin-bottom: var(--s-3);
}

/* ---------- Patterns ---------- */
.hero {
  background: linear-gradient(180deg, #fdf3ea 0%, #fafafa 100%);
  padding: 56px 36px;
  text-align:center;
  border-bottom:1px solid var(--border);
}
.hero h1, .hero h2 {
  font-family: var(--display);
  font-weight:700;
  font-size: clamp(36px, 5vw, 56px);
  line-height:1.08;
  letter-spacing:-0.02em;
  color: var(--ink-800);
  max-width: 16ch;
  margin: 0 auto 16px;
}
.hero p, .hero-subline {
  color: var(--ink-500);
  font-size: 17px;
  max-width: 56ch;
  margin: 0 auto 22px;
}
.hero .acts, .hero-actions {
  display:flex; gap: 10px; justify-content:center; flex-wrap:wrap;
}

.np,
.newsletter-panel {
  background: var(--ink-700);
  color:#fff;
  border-radius: var(--r-md);
  padding: 32px;
  display:grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  gap: 28px; align-items:center;
}
.np .ey, .newsletter-panel .eyebrow { color: var(--orange-200); margin-bottom:8px; }
.np h2, .np h3, .newsletter-copy h2 {
  font-family: var(--display);
  font-weight:700;
  font-size: 30px;
  line-height:1.15;
  margin-bottom: 8px;
  letter-spacing:-0.015em;
}
.np p, .newsletter-copy p:not(.eyebrow) { color:#edf3f3; font-size: 14.5px; }
.np .input, .newsletter-panel input {
  border: 2px solid transparent;
  background:#fff;
  border-radius: var(--r-md);
  color: var(--ink-700);
  font: inherit;
  padding: 12px 14px;
}
.np .label-stack label,
.footer-newsletter-grid .label-stack label {
  color: #fff;
}
.np .disclosure,
.form-disclosure {
  font-size:12.5px;
  color: rgba(255,255,255,.78);
  margin-top: 10px;
}
.np .disclosure a,
.form-disclosure a { color:#fff; font-weight:700;}

.newsletter-section { padding-top: 0; }
.signup-form { display: grid; gap: 12px; }
.field-row { display: grid; gap: 8px; }

.how-it-works {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

.how-grid {
  display: grid;
  gap: var(--s-10);
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.how-grid h2,
.section-heading h2,
.footer-newsletter h2 {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  letter-spacing:-0.015em;
  line-height: 1.18;
}

.copy-stack {
  display: grid;
  gap: 18px;
}

.copy-stack p {
  color: var(--ink-500);
  font-size: 17px;
}

.section-heading {
  margin-bottom: var(--s-8);
  max-width: 700px;
}

.section-heading p:not(.eyebrow) { color: var(--ink-500); }

.lang-card {
  background: var(--card);
  border: 2px solid var(--green-500);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  display:grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 14px; padding: 26px;
  align-items: end;
}
.lang-card .topline { display:flex; align-items:center; gap: 10px; grid-column: 1 / -1; flex-wrap:wrap; }
.lang-card h3 { font-family: var(--display); font-weight:700; font-size: 36px; color: var(--ink-800); letter-spacing:-0.02em; grid-column: 1; }
.lang-card p { color: var(--ink-500); font-size: 17px; max-width: 50ch; grid-column: 1; }
.lang-card .cta { grid-column: 2; align-self: end; grid-row: 2 / span 2; }

.lang-card.muted {
  background: var(--muted-bg);
  border:1px solid var(--border);
  box-shadow: none;
  display:grid; grid-template-columns: 1fr;
  gap: 12px;
}
.lang-card.muted h3 { font-size: 24px; color: var(--ink-700);}
.lang-card.muted p { font-size: 14.5px; color: var(--muted-text); }

.cards-row { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top: 14px; }

/* Compatibility aliases until the hub markup is fully realigned. */
.language-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.language-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); display: grid; gap: 14px; padding: 24px; }
.language-card--live {
  border: 2px solid var(--green-500);
  box-shadow: var(--shadow-lg);
  grid-column: span 3;
  grid-template-columns: minmax(0, 1fr) auto;
}
.language-card--live h3 { font-family: var(--display); font-size: clamp(28px, 4vw, 40px); grid-column: 1; }
.language-card--live p { color: var(--ink-500); font-size: 18px; grid-column: 1; max-width: 620px; }
.language-card--live .card-action { align-self: end; grid-column: 2; grid-row: 2 / span 2; }
.language-card--muted { background: var(--muted-bg); color: var(--muted-text); }
.language-card--muted h3 { color: var(--ink-700); font-family: var(--display); font-size: 24px; line-height: 1.2; }
.language-card--muted p { color: var(--muted-text); }
.card-topline { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.status-badge {
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 7px 10px;
}
.status-badge::before { content: ""; width:6px; height:6px; border-radius:50%; }
.status-badge[data-status="live"] { background: var(--status-live-bg); color: var(--status-live-fg); }
.status-badge[data-status="live"]::before { background: var(--green-500); box-shadow: 0 0 0 3px rgba(39,174,96,.18); }
.status-badge[data-status="coming-soon"] { background: var(--status-soon-bg); color: var(--status-soon-fg); }
.status-badge[data-status="coming-soon"]::before { background: var(--orange-500); }
.status-badge[data-status="planned"] { background: var(--status-planned-bg); color: var(--status-planned-fg); }
.status-badge[data-status="planned"]::before { background: var(--ink-300); }
.domain-name {
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--mono); font-size: 12px; font-weight:600;
  color: var(--ink-600);
  background: var(--ink-50); border:1px solid var(--border);
  padding: 5px 9px; border-radius: var(--r-sm);
}
.domain-name::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--orange-500); }

.notify-form {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.notify-form .input-group { align-items: stretch; }
.notify-form .input-group input { border-color: var(--ink-100); }

.form-disclosure--dark {
  color: var(--muted-text);
}
.form-disclosure--dark a {
  color: var(--ink-700);
  font-weight: 700;
}

.form-message {
  font-size: 13px;
  min-height: 1.4em;
}
.form-message[data-state="error"] {
  color: #ffe6df;
  font-weight: 700;
}
.form-message[data-state="loading"] { color: #edf3f3; }
.form-message--dark[data-state="error"] { color: var(--orange-700); }
.form-message--dark[data-state="loading"] { color: var(--muted-text); }

.form-success {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-md);
  padding: 18px;
}
.form-success h3 {
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 6px;
}
.form-success p { color: #edf3f3; }
.lang-card .form-success {
  background: var(--green-50);
  border-color: var(--green-200);
  color: var(--ink-700);
}
.lang-card .form-success p { color: var(--ink-500); }

.mobile-install-note {
  color: var(--muted-text);
  font-weight: 700;
}

.site-footer {
  background: var(--ink-700);
  color: #fff;
}
.site-footer a { color: #fff; }
.footer-newsletter { padding: var(--s-12) 0; }
.footer-newsletter-grid {
  align-items: center;
  display: grid;
  gap: var(--s-8);
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}
.footer-newsletter-grid .eyebrow { color: var(--orange-200); }
.signup-form--footer .form-disclosure { color: rgba(255, 255, 255, 0.88); }

.footer-bottom {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-6);
  padding-top: var(--s-6);
}

@media (max-width: 960px) {
  .np, .newsletter-panel, .lang-card { grid-template-columns: 1fr; }
  .cards-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .nav,
  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .nav-links { flex-wrap: wrap; }

  .hero {
    padding: var(--s-16) var(--s-6);
    text-align: left;
  }

  .hero h1, .hero h2, .hero p, .hero-subline {
    margin-left: 0;
    margin-right: 0;
  }

  .hero .acts, .hero-actions { justify-content: flex-start; }
  .hero .acts .btn, .hero-actions .btn { width: 100%; }

  .how-grid {
    grid-template-columns: 1fr;
  }

  .newsletter-panel,
  .footer-newsletter-grid,
  .np {
    grid-template-columns: 1fr;
    padding-left: var(--s-6);
    padding-right: var(--s-6);
  }

  .input-group {
    flex-direction: column;
  }

  .input-group .btn {
    width: 100%;
  }

  .language-grid,
  .cards-row {
    grid-template-columns: 1fr;
  }

  .language-card--live,
  .lang-card {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }

  .language-card--live h3,
  .language-card--live p,
  .language-card--live .card-action,
  .lang-card h3,
  .lang-card p,
  .lang-card .cta {
    grid-column: auto;
    grid-row: auto;
  }
}