* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  background: #cfe3fb;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #1a1a1a;
}

.card {
  position: relative;
  background: #ffffff;
  border: 2px solid #14134d;
  box-shadow: 14px 14px 0 0 #4b5df7;
  padding: 2.5rem;
  width: 100%;
  max-width: 680px;
}

h1 {
  margin: 0 0 0.25rem;
  font-size: 1.6rem;
  color: #14134d;
}

.subtitle {
  margin: 0 0 1.5rem;
  color: #666;
  font-size: 0.95rem;
}

.field {
  margin-bottom: 1.1rem;
  display: flex;
  flex-direction: column;
}

.field-group {
  margin-bottom: 1.4rem;
  padding: 1rem 1rem 0.1rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.field-group-title {
  margin: 0 0 0.2rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #14134d;
}

.field-group-hint {
  margin: 0 0 0.9rem;
  font-size: 0.8rem;
  color: #8a8fa3;
}

label {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: #14134d;
}

.required {
  color: #e11d48;
}

.field-hint {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  color: #8a8fa3;
}

.field-error {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: #b3261e;
}

.language-confirm {
  margin: -0.2rem 0 0;
  font-size: 0.85rem;
  color: #666;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.language-confirm-icon {
  font-size: 0.9rem;
}

/* A class selector and the browser's own [hidden] rule have equal CSS
   specificity, so the later one (always this stylesheet, since author
   styles come after the UA stylesheet in the cascade) wins by default -
   without this, "display: flex" above silently overrides "hidden" and the
   element never actually hides. */
.language-confirm[hidden] {
  display: none;
}

.link-button {
  width: auto;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  color: #4b5df7;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover:not(:disabled) {
  background: none;
  color: #3a4ae0;
}

.field-turnstile {
  margin-bottom: 1.1rem;
}

input {
  padding: 0.65rem 0.75rem;
  border: 1px solid #d5d7dd;
  border-radius: 8px;
  font-size: 0.95rem;
  background: #fff;
  color: #1a1a1a;
}

input:focus {
  outline: none;
  border-color: #4b5df7;
  box-shadow: 0 0 0 3px rgba(75, 93, 247, 0.15);
}

.custom-select {
  position: relative;
}

button.custom-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  margin-top: 0;
  border: 1px solid #d5d7dd;
  border-radius: 8px;
  background: #fff;
  color: #1a1a1a;
  font-size: 0.95rem;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

button.custom-select-trigger:hover {
  background: #fff;
}

button.custom-select-trigger:focus,
button.custom-select-trigger[aria-expanded="true"] {
  outline: none;
  border-color: #4b5df7;
  box-shadow: 0 0 0 3px rgba(75, 93, 247, 0.15);
}

.custom-select-value.is-placeholder {
  color: #8a8fa3;
}

.custom-select-arrow {
  font-size: 0.7rem;
  color: #8a8fa3;
  flex-shrink: 0;
}

.custom-select-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid #d5d7dd;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20, 19, 77, 0.15);
}

.custom-select-option {
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  color: #1a1a1a;
  cursor: pointer;
}

.custom-select-option:hover,
.custom-select-option.is-active {
  background: #eef0fe;
}

.custom-select-option-disabled {
  color: #8a8fa3;
  cursor: default;
}

.consent-text {
  font-size: 0.8rem;
  color: #444;
  line-height: 1.4;
  margin: 0.5rem 0 1.1rem;
}

.consent-text a {
  color: #4b5df7;
}

button {
  width: 100%;
  padding: 0.75rem;
  margin-top: 0.25rem;
  background: #7b86f5;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

button:hover:not(:disabled) {
  background: #3a4ae0;
}

button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.secondary-button {
  width: 100%;
  padding: 0.75rem;
  margin-top: 1rem;
  background: transparent;
  color: #4b5df7;
  border: 2px solid #4b5df7;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.secondary-button:hover {
  background: #4b5df7;
  color: #fff;
}

.error-message {
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: #fdecea;
  color: #b3261e;
  font-size: 0.9rem;
  text-align: center;
}

/* ---------------------------------------------------------------------
   Results screen - Weglot Design System 2.0
   Scoped to #results only; the form/loading/error states above keep the
   original palette (see .card, button, etc.) - see project notes on why
   this restyle was deliberately scoped to just this section.
   Token values below are hardcoded (matching tokens.css) rather than
   introduced as CSS custom properties, to stay consistent with the rest
   of this file, which doesn't use custom properties anywhere else.
--------------------------------------------------------------------- */

.r-results {
  margin-top: 1rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #111827;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Every class below is toggled via the "hidden" property in script.js and
   also sets an explicit "display" value - a plain class selector and the
   browser's own [hidden] rule have equal CSS specificity, so without this
   override the author stylesheet (this one) wins the tie and "hidden"
   silently does nothing. Same root cause as the .language-confirm fix
   above; consolidated here since several new sections hit it at once. */
.r-results[hidden],
.r-confidence-row[hidden],
.r-lock-overlay[hidden],
.r-table-footer[hidden],
.r-table-columns[hidden] {
  display: none;
}

.loading-state {
  text-align: center;
  padding: 3.5rem 0;
}

.spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto 1.25rem;
  border: 4px solid #e5e7eb;
  border-top-color: #4b5df7;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#loading-text {
  margin: 0;
  color: #14134d;
  font-weight: 600;
  font-size: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

.branch-message {
  margin-top: 1.25rem;
  padding: 1.25rem;
  border-radius: 10px;
  background: #fff8ec;
  border: 1px solid #f2dfb6;
  text-align: center;
}

.branch-message p {
  margin: 0 0 0.75rem;
  color: #6b4e02;
  font-size: 0.95rem;
  line-height: 1.5;
}

.branch-message p:last-of-type {
  margin-bottom: 0;
}

.r-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.r-logo-mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #473ae0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.r-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #18164c;
}

.r-title-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.r-title {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #18164c;
}

.r-subtitle {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #4b5563;
}

.r-hero-card {
  border-radius: 16px;
  background: #edebfc;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.r-hero-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.r-eyebrow-brand {
  color: #473ae0;
}

.r-hero-value {
  margin: 0;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.015em;
  font-weight: 800;
  color: #18164c;
}

.r-hero-qualitative {
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 600;
  color: #18164c;
}

.r-hero-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #4b5563;
}

.r-divider {
  height: 1px;
  background: rgba(24, 22, 76, 0.12);
}

.r-explainer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.r-explainer-title {
  font-size: 13px;
  font-weight: 700;
  color: #18164c;
}

.r-stat-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: #32299f;
}

.r-stat-value {
  font-weight: 700;
  color: #18164c;
  min-width: 76px;
}

.r-confidence-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #4b5563;
}

.r-confidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}

.r-confidence-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.r-confidence-badge.is-medium {
  background: #fff8e1;
  color: #7a5b00;
}

.r-confidence-badge.is-low {
  background: #fdecea;
  color: #b3261e;
}

.r-see-below {
  margin: 0;
  font-size: 14px;
  color: #32299f;
}

.r-see-below a {
  color: #473ae0;
}

.r-table-card {
  border: 1px solid #ebecef;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
}

.r-table-header {
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #ebecef;
}

.r-table-title {
  font-size: 18px;
  font-weight: 700;
  color: #18164c;
  letter-spacing: -0.02em;
}

.r-table-subtitle {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
}

.r-table-status {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
  white-space: nowrap;
  padding-top: 4px;
}

.r-table-body-outer {
  position: relative;
}

.r-table-columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
  padding: 8px 20px;
  background: #f9fafb;
  border-bottom: 1px solid #ebecef;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
}

.r-table-columns > div:not(:first-child) {
  text-align: right;
}

.r-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
  padding: 8px 20px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 14px;
  color: #111827;
  align-items: center;
}

.r-row-keyword {
  min-width: 0;
}

.r-row-local-phrase {
  margin-top: 2px;
  font-size: 12px;
  color: #6b7280;
}

.r-row-vol-home,
.r-row-vol-target {
  text-align: right;
  color: #4b5563;
}

.r-row-vol-target {
  font-weight: 700;
  color: #18164c;
}

#breakdown-rows.is-locked {
  filter: blur(4px);
  user-select: none;
}

.r-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.95) 60%);
  padding: 24px;
}

.r-lock-card {
  width: 100%;
  max-width: 460px;
  background: #ffffff;
  border: 1px solid #ebecef;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(24, 22, 76, 0.1);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.r-lock-title {
  font-size: 16px;
  font-weight: 700;
  color: #18164c;
}

.r-lock-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #4b5563;
}

.r-lock-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.r-lock-form input {
  flex: 1 1 180px;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 15px;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}

/* This page is served standalone inside the Webflow iframe, so this media
   query responds to the iframe's own rendered width, not the host page's -
   below ~360px the input+button row (previously a fixed-direction flex row)
   would overflow the card rather than wrap, cutting the button off. */
@media (max-width: 360px) {
  .r-lock-form {
    flex-direction: column;
    align-items: stretch;
  }

  .r-lock-form button {
    width: 100%;
  }
}

.r-lock-form button {
  width: auto;
  height: 40px;
  padding: 0 16px;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: #473ae0;
  border: 0;
  border-radius: 6px;
  white-space: nowrap;
}

.r-lock-form button:hover:not(:disabled) {
  background: #32299f;
}

.r-lock-consent {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #6b7280;
}

.r-lock-consent a {
  color: #473ae0;
}

.r-table-footer {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #f9fafb;
  font-size: 13px;
  color: #6b7280;
}

.r-link-button {
  width: auto;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #473ae0;
  cursor: pointer;
  text-decoration: underline;
}

.r-link-button:hover:not(:disabled) {
  background: none;
  color: #32299f;
}

.r-final-cta {
  border-top: 1px solid #ebecef;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.r-final-cta-text {
  margin: 0;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 600;
  color: #18164c;
  letter-spacing: -0.02em;
}

.r-final-cta-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.r-btn {
  width: auto;
  height: 40px;
  padding: 0 16px;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 120ms cubic-bezier(0.2, 0.8, 0.2, 1), color 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.r-btn-primary {
  color: #ffffff;
  background: #473ae0;
  border: 0;
}

.r-btn-primary:hover {
  background: #32299f;
}

.r-btn-secondary {
  color: #18164c;
  background: #ffffff;
  border: 1px solid #d1d5db;
}

.r-btn-secondary:hover:not(:disabled) {
  background: #f9fafb;
}