* {
  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;
}

/* ---------------------------------------------------------------------
   Form - Weglot Design System 2.0 (same token family as the results
   screen's .r-* classes, scoped here with an .f- prefix). Hardcoded to
   the exact hex values behind each token (see the design project's
   primitives.css) rather than introduced as CSS custom properties, to
   stay consistent with the rest of this file.
--------------------------------------------------------------------- */

.f-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.f-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.f-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.f-input {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  line-height: 22px;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 11px 14px;
  outline: none;
  transition: border-color 120ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.f-input::placeholder {
  color: #9ca3af;
}

.f-input:hover {
  border-color: #9ca3af;
}

.f-input:focus {
  border-color: #473ae0;
  box-shadow: 0 0 0 3px #c6c2f5;
}

.f-hint {
  margin: 0;
  font-size: 12px;
  line-height: 17px;
  color: #4b5563;
}

.f-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  align-items: start;
}

.f-language-field {
  margin-top: -2px;
}

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

.language-confirm {
  margin: 0;
  font-size: 12px;
  line-height: 17px;
  color: #4b5563;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.language-confirm-icon {
  color: #473ae0;
  flex-shrink: 0;
}

.language-confirm-dot {
  color: #9ca3af;
}

/* 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;
}

/* Same equal-specificity issue as .language-confirm[hidden] above - without
   this, .f-form's own "display: flex" beats the browser's default
   "[hidden] { display: none }" and the form stays visible on every
   post-submit state (loading, results, branch message, content-results). */
.f-form[hidden] {
  display: none;
}

.f-language-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #edebfc;
  border: 1px solid #c6c2f5;
  border-radius: 8px;
  padding: 12px;
}

.f-language-picker[hidden] {
  display: none;
}

.f-picker-label {
  font-size: 12px;
  font-weight: 600;
  color: #32299f;
}

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

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

.f-divider {
  height: 1px;
  background: #ebecef;
}

.f-footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.f-microcopy {
  margin: 0;
  font-size: 12px;
  line-height: 17px;
  color: #4b5563;
  text-align: center;
}

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

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

input:focus {
  outline: none;
  border-color: #473ae0;
  box-shadow: 0 0 0 3px #c6c2f5;
}

.custom-select {
  position: relative;
}

button.custom-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 11px 14px;
  margin-top: 0;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

button.custom-select-trigger:hover {
  background: #fff;
  border-color: #9ca3af;
}

button.custom-select-trigger:focus,
button.custom-select-trigger[aria-expanded="true"] {
  outline: none;
  border-color: #473ae0;
  box-shadow: 0 0 0 3px #c6c2f5;
}

button.custom-select-trigger-sm {
  padding: 8px 14px;
  font-size: 14px;
}

.custom-select-value.is-placeholder {
  color: #9ca3af;
}

.custom-select-arrow {
  color: #4b5563;
  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 #d1d5db;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 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;
}

.f-submit {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  margin: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: #473ae0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.f-submit:hover:not(:disabled) {
  background: #32299f;
}

.f-submit: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],
.loading-state[hidden] {
  display: none;
}

.loading-state {
  text-align: center;
  padding: 3.5rem 0;
  /* Without this, the loading state (~280px) is noticeably shorter than the
     form it replaces (~515px), so the iframe visibly shrinks and then grows
     again once results (~950px+, varies with content) replace it - a double
     jump instead of one. Matching the form's height at least removes the
     shrink; matching results too isn't practical since their height varies
     with how much is unlocked/how many topics there are. */
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.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;
}

/* ---------------------------------------------------------------------
   Content-based results (#content-results) - shares the .r-* results
   tokens above (card, table, lock overlay) and adds a handful of pieces
   specific to this variant: the "based on your content" badge, the
   two-column stat/comparison card, and the demand-comparison bars.
--------------------------------------------------------------------- */

.c-badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.c-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 12px;
  background: #18164c;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.c-breadcrumb {
  font-size: 14px;
  color: #6b7280;
}

.c-stat-card {
  border-radius: 16px;
  background: #edebfc;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: start;
}

.c-stat-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.c-stat-divider {
  width: 1px;
  align-self: stretch;
  background: #d6d2f5;
}

.c-stat-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Both eyebrows verified at >=4.5:1 contrast on the #edebfc card background -
   #473ae0 ~6.1:1, #3f4463 ~8.1:1. #6b7089 (the muted gray used elsewhere for
   secondary labels) only clears ~4.15:1 here, so it's deliberately not used
   on this background. */
.c-stat-eyebrow-target {
  color: #473ae0;
}

.c-stat-eyebrow-home {
  color: #3f4463;
}

.c-stat-number {
  font-size: 52px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.c-stat-number-target {
  color: #18164c;
}

.c-stat-number-home {
  color: #3f4463;
}

.c-stat-caption {
  margin: 0;
  font-size: 13px;
  color: #3f4463;
}

.c-stat-percent {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}

.c-stat-percent.is-bigger {
  color: #07724e;
}

.c-stat-percent.is-smaller {
  color: #b4365a;
}

.c-table-columns-4,
.r-row.c-row-4 {
  grid-template-columns: 1.6fr 0.85fr 0.85fr 0.6fr;
}

.c-locked-wrap {
  position: relative;
}

/* The shared .r-lock-overlay centers its card vertically across the whole
   overlay height, which - now that this table always has some blurred rows
   below the card too - leaves a large empty gap between the last crisp
   preview row and the card. Anchor it near the top instead, ~20px under
   that last row, so blurred rows show around and below the card rather than
   only above it. Scoped to this table's gate only - the pre-existing
   keyword table's gate (#breakdown-gate) keeps its original centering. */
#content-breakdown-gate {
  align-items: flex-start;
  padding-top: 20px;
}

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

.c-row-diff {
  text-align: right;
  font-weight: 700;
}

.c-row-diff.is-positive {
  color: #1a7f37;
}

.c-row-diff.is-neutral {
  color: #6b7280;
}

.c-footnote {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}

@media (max-width: 480px) {
  .c-stat-card {
    grid-template-columns: 1fr;
  }

  .c-stat-divider {
    width: auto;
    height: 1px;
  }
}