* {
  box-sizing: border-box;
}

/* Author styles below (display: grid/inline-flex on class selectors) would
   otherwise defeat the UA's [hidden] rule; the view/button visibility logic
   in public-signup.js depends on the hidden attribute actually hiding. */
[hidden] {
  display: none !important;
}

/* One Blue Rule: action color comes from the house tokens in fonts.css
   (loaded by this page); light/dark variants follow the app theme. Green
   stays reserved for the semantic success state only. */
:root {
  --join-bg: var(--bg);
  --join-surface: var(--surface);
  --join-surface-muted: var(--surface-hover);
  --join-text: var(--text-primary);
  --join-text-muted: var(--text-muted);
  --join-border: var(--border);
  --join-border-strong: var(--border-strong);
  --join-accent: var(--accent);
  --join-accent-strong: var(--accent-hover);
  --join-accent-soft: var(--accent-subtle);
  --join-danger: var(--error);
  --join-danger-bg: var(--error-bg);
  --join-success: var(--success);
  --join-shadow: 0 18px 50px rgba(16, 24, 32, 0.12);
}

html {
  min-height: 100%;
  background: var(--join-bg);
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--join-bg);
  color: var(--join-text);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
}

.join-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.join-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 20px 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--join-text);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
}

.brand img {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.language-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 2px;
  border: 1px solid var(--join-border-strong);
  border-radius: 8px;
  background: var(--join-surface);
  color: var(--join-text-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.language-toggle button {
  width: auto;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.language-toggle button.active {
  background: var(--join-accent);
  color: var(--text-on-accent);
}

.join-main {
  flex: 1;
  width: 100%;
  padding: 24px 20px 48px;
}

.join-workspace {
  width: min(100%, 1050px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
  gap: 34px;
  align-items: start;
}

.join-copy {
  padding-top: 34px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--join-accent-strong);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
p {
  overflow-wrap: anywhere;
}

h1 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0;
}

.intro {
  max-width: 34rem;
  margin: 18px 0 0;
  color: var(--join-text-muted);
  font-size: 1.05rem;
  line-height: 1.55;
}

.join-panel {
  min-height: 500px;
  border: 1px solid var(--join-border);
  border-radius: 8px;
  background: var(--join-surface);
  box-shadow: var(--join-shadow);
  padding: 22px;
}

.status-banner {
  margin-bottom: 16px;
  border: 1px solid var(--join-border);
  border-radius: 8px;
  background: var(--join-surface-muted);
  color: var(--join-text);
  padding: 12px 14px;
  line-height: 1.45;
}

.status-banner.error {
  border-color: var(--error-border);
  background: var(--join-danger-bg);
  color: var(--join-danger);
}

.view-header {
  margin-bottom: 18px;
}

.view-header h2,
.completion-view h2 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.35rem;
  line-height: 1.18;
  letter-spacing: 0;
}

.view-header p,
.completion-view p {
  margin: 0;
  color: var(--join-text-muted);
  line-height: 1.5;
}

.step-indicator {
  margin: 0 0 6px;
  color: var(--join-text-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plans-list {
  display: grid;
  gap: 12px;
}

.plan-card {
  display: grid;
  gap: 10px;
  width: 100%;
  min-height: 136px;
  border: 1px solid var(--join-border);
  border-radius: 8px;
  background: var(--join-surface);
  padding: 16px;
  text-align: left;
  color: var(--join-text);
  cursor: pointer;
}

.plan-card:hover,
.plan-card:focus-visible {
  border-color: var(--join-accent);
  outline: 0;
}

.plan-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.plan-name {
  font-weight: 900;
  font-size: 1rem;
}

.plan-price {
  flex: 0 0 auto;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--join-accent-strong);
}

.plan-description {
  color: var(--join-text-muted);
  line-height: 1.45;
}

.plan-meta {
  color: var(--join-text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.plan-select {
  display: inline-flex;
  align-items: center;
  color: var(--join-accent-strong);
  font-size: 0.82rem;
  font-weight: 800;
}

/* Spaced with margin rather than flex gap on purpose. Flex gap is unsupported on
   the iOS 12.2 support floor, where it collapses to zero and butts the arrow
   against the label; margin degrades to nothing. Do not "tidy" this into gap. */
.plan-select span + span {
  margin-left: 6px;
}

.selected-plan {
  border: 1px solid var(--join-border);
  border-radius: 8px;
  background: var(--join-surface-muted);
  padding: 14px;
  margin-bottom: 18px;
}

.selected-plan .plan-card {
  min-height: auto;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: default;
}

.change-plan-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--join-accent-strong);
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: underline;
}

form {
  display: grid;
  gap: 14px;
}

.field-grid {
  display: grid;
  gap: 12px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--join-text-muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--join-border-strong);
  border-radius: 8px;
  background: var(--join-surface);
  color: var(--join-text);
  padding: 12px 13px;
  outline: 0;
}

input:focus {
  border-color: var(--join-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--join-accent) 18%, transparent);
}

.field-error {
  display: none;
  margin: 0;
  color: var(--join-danger);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

.field-error.visible {
  display: block;
}

input.input-error {
  border-color: var(--error-border);
  background: var(--join-danger-bg);
}

input.input-error:focus {
  border-color: var(--join-danger);
}

.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.primary-btn,
.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 12px 16px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.primary-btn {
  background: var(--join-accent);
  color: var(--text-on-accent);
}

.primary-btn:hover,
.primary-btn:focus-visible {
  background: var(--join-accent-strong);
  outline: 0;
}

.primary-btn:disabled {
  opacity: 0.68;
  cursor: not-allowed;
}

.secondary-btn {
  background: transparent;
  color: var(--join-text);
  border-color: var(--join-border-strong);
}

.completion-view {
  min-height: 330px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  text-align: center;
}

.completion-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--join-success);
  font-weight: 900;
  font-size: 1.45rem;
}

.completion-view .primary-btn,
.completion-view .secondary-btn {
  max-width: 260px;
}

.loading {
  display: grid;
  place-items: center;
  min-height: 260px;
  color: var(--join-text-muted);
}

@media (max-width: 820px) {
  .join-main {
    padding-top: 10px;
  }

  .join-workspace {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .join-copy {
    padding-top: 8px;
  }

  .join-panel {
    min-height: 420px;
    padding: 18px;
  }
}

@media (max-width: 560px) {
  .join-header {
    align-items: flex-start;
  }

  .brand span {
    display: none;
  }

  .plan-title-row {
    display: grid;
  }
}