.extension-connect-page [hidden] {
  display: none !important;
}

.extension-connect-panel {
  overflow: hidden;
}

.extension-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.extension-step {
  display: grid;
  min-height: 5rem;
  padding: 1rem 1.25rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  border-bottom: 1px solid var(--wordy-border);
}

.extension-step__number {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--wordy-brand-subtle);
  color: var(--wordy-brand);
  font-size: 0.75rem;
  font-weight: 800;
}

.extension-step .step-message {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
}

.extension-login {
  text-align: center;
}

.extension-login .wordy-empty-state__icon {
  margin: 0 auto 1rem;
}

.extension-step[data-status="loading"] {
  background: color-mix(in srgb, var(--wordy-brand-subtle) 45%, transparent);
}

.extension-step[data-status="error"] {
  background: color-mix(in srgb, var(--wordy-danger) 8%, transparent);
}

.extension-success,
.extension-problem {
  margin: 1.25rem;
  padding: 1.25rem;
  border-radius: var(--wordy-radius-md);
}

/* Finishing the connection is the one moment on this page that has to be
   unmistakable, so the panel stops looking like a form and becomes a single
   centred confirmation. */
.extension-success {
  padding: 2rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--wordy-success) 45%, var(--wordy-border));
  background: color-mix(in srgb, var(--wordy-success) 10%, var(--wordy-surface));
  text-align: center;
}

/* Nothing is left of the working panel once the steps and the header are gone, so
   the confirmation becomes the panel instead of sitting in an empty frame. */
.extension-connect-page[data-connection-state="connected"] .extension-connect-panel {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.extension-connect-page[data-connection-state="connected"] .extension-success {
  margin: 0;
}

.extension-success__badge {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.25rem;
  place-items: center;
  border-radius: 50%;
  background: var(--wordy-success);
  box-shadow: 0 0 0 0.55rem color-mix(in srgb, var(--wordy-success) 20%, transparent);
  color: var(--wordy-surface);
  font-size: 2.25rem;
  line-height: 1;
}

.extension-success__title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

.extension-success__account {
  margin: 0 0 1.5rem;
}

.extension-success__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.extension-success__note {
  margin: 1.5rem 0 0;
  font-size: 0.8125rem;
}

.extension-success__version {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
}

@media (prefers-reduced-motion: no-preference) {
  .extension-success:not([hidden]) .extension-success__badge {
    animation: extension-connected-badge 320ms ease-out both;
  }
}

@keyframes extension-connected-badge {
  from {
    opacity: 0;
    transform: scale(0.55);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.extension-problem {
  border: 1px solid color-mix(in srgb, var(--wordy-brand) 58%, var(--wordy-border));
  border-left: 0.3rem solid var(--wordy-brand);
  background: color-mix(in srgb, var(--wordy-brand-subtle) 42%, var(--wordy-surface));
}

.extension-problem__message h3 {
  margin-bottom: 0.55rem;
}

.extension-problem__message p,
#connection-account-mismatch-recovery p {
  max-width: 62ch;
}

.extension-problem__reassurance {
  color: var(--wordy-ink-secondary);
}

.extension-problem__actions,
.extension-technical-details__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.extension-problem__actions {
  margin-top: 1rem;
}

.extension-support-reference {
  margin: 1.25rem 0 0;
  color: var(--wordy-ink-secondary);
  font-size: 0.78rem;
}

.extension-support-reference code {
  color: inherit;
}

.extension-technical-details {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--wordy-border);
}

.extension-technical-details summary {
  width: fit-content;
  color: var(--wordy-ink-secondary);
  cursor: pointer;
  font-weight: 650;
}

.extension-technical-details > p {
  margin: 0.75rem 0;
  color: var(--wordy-ink-secondary);
  font-size: 0.85rem;
}

.extension-technical-details dl {
  display: grid;
  gap: 0.35rem;
  margin: 1rem 0;
}

.extension-technical-details dl div {
  display: grid;
  grid-template-columns: minmax(9rem, 0.35fr) minmax(0, 1fr);
  gap: 0.75rem;
}

.extension-technical-details dt {
  color: var(--wordy-ink-secondary);
}

.extension-technical-details dd {
  overflow-wrap: anywhere;
  margin: 0;
  font-family: var(--font-mono);
}

.extension-technical-details [data-diagnostic="bridgeEventHistory"] {
  white-space: pre-wrap;
}

#connection-copy-status {
  color: var(--wordy-ink-secondary);
  font-size: 0.8125rem;
}

.extension-hero {
  display: grid;
  justify-items: center;
  padding: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
  border-bottom: 1px solid var(--wordy-border);
  text-align: center;
}

.extension-hero__copy {
  max-width: 46rem;
}

.extension-hero__title {
  margin: 0.35rem 0 0;
  color: var(--wordy-ink);
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 5vw, 3.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.07;
  text-wrap: balance;
}

.extension-hero__lead {
  max-width: 40rem;
  margin: 1.15rem auto 0;
  color: var(--wordy-ink-secondary);
  font-size: clamp(1rem, 1.5vw, 1.0625rem);
  line-height: 1.62;
  text-wrap: pretty;
}

/* Store installation links and account connection, directly under the title. */
.install-box {
  width: min(100%, 34rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--wordy-surface);
  border: 1px solid var(--wordy-border);
  box-shadow: var(--wordy-shadow-md);
  text-align: center;
}

.install-box__stores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.install-box__stores .btn {
  width: 100%;
}

.install-box__status {
  display: flex;
  margin: 0.9rem 0 0;
  align-items: flex-start;
  justify-content: center;
  gap: 0.45rem;
  color: var(--wordy-ink-secondary);
  font-size: 0.8125rem;
  line-height: 1.55;
  text-align: left;
}

.install-box__status i {
  margin-top: 0.15rem;
  color: var(--wordy-brand);
}

.install-box__divider {
  position: relative;
  margin: 1.6rem 0 1.3rem;
  border-top: 1px solid var(--wordy-border);
}

.install-box__divider span {
  position: absolute;
  top: -0.72rem;
  left: 50%;
  padding: 0 0.7rem;
  background: var(--wordy-surface);
  color: var(--wordy-ink-muted);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.install-box__cta {
  width: 100%;
}

.install-box__note {
  margin: 0.8rem 0 0;
  color: var(--wordy-ink-secondary);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.install-box__alt {
  margin: 0.9rem 0 0;
  font-size: 0.8125rem;
}

.extension-back-link {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  color: var(--wordy-ink-secondary);
  font-size: 0.875rem;
  text-align: center;
}

.extension-trust {
  max-width: 66rem;
  margin: clamp(3rem, 7vw, 5rem) auto;
}

.extension-trust__lead {
  max-width: 46rem;
  margin: 0 auto 1.5rem;
  color: var(--wordy-ink-secondary);
  font-size: 0.9375rem;
  line-height: 1.7;
  text-align: center;
}

.extension-trust__grid {
  display: grid;
  padding: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--wordy-border);
}

.extension-trust__card {
  padding: 1.5rem 1.4rem;
  background: var(--wordy-surface);
}

.extension-trust__card h3 {
  margin: 0;
  color: var(--wordy-ink);
  font-size: 1rem;
  font-weight: 600;
}

.extension-trust__card p {
  margin: 0.5rem 0 0;
  color: var(--wordy-ink-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
}

.extension-trust__link {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  text-align: center;
}

.extension-guide {
  max-width: 66rem;
  margin: clamp(3rem, 7vw, 5rem) auto;
}

/* The product visuals (product-demo.css) carry the explanation this page used
   to attempt in prose. They are built from the theme tokens, so they follow the
   light and dark themes the way the rest of the page does. */
/*
 * Recovery guidance: prose and step lists rather than the marketing blocks around
 * it. Steps stay collapsed so an anchor jump lands on a menu of browsers instead
 * of a wall, and every block takes a reading measure inside the wide guide column.
 */
.extension-recovery > p {
  max-width: 44rem;
  color: var(--wordy-ink-secondary);
  line-height: 1.7;
}

.extension-recovery__lead {
  color: var(--wordy-ink);
}

.extension-recovery__steps {
  max-width: 44rem;
  margin-top: 0.75rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--wordy-border);
  border-radius: var(--wordy-radius-md);
  background: var(--wordy-surface);
}

.extension-recovery__steps summary {
  color: var(--wordy-ink);
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 600;
}

.extension-recovery__steps[open] summary {
  margin-bottom: 0.5rem;
}

.extension-recovery__steps ol,
.extension-recovery__steps ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--wordy-ink-secondary);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.extension-recovery__steps li + li {
  margin-top: 0.45rem;
}

.extension-recovery__note {
  max-width: 44rem;
  margin: 0.6rem 0 0;
  color: var(--wordy-ink-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.extension-recovery__cta {
  margin-top: 1.25rem;
}

.extension-showcase {
  max-width: 72rem;
  margin: clamp(2.5rem, 6vw, 4rem) auto clamp(3rem, 7vw, 5rem);
}

.extension-showcase__caption {
  max-width: 44rem;
  margin: 1.5rem auto 0;
  color: var(--wordy-ink-secondary);
  font-size: 0.9375rem;
  line-height: 1.62;
  text-align: center;
  text-wrap: pretty;
}

.extension-media-split {
  display: grid;
  max-width: 66rem;
  margin: clamp(3rem, 7vw, 5rem) auto;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.25rem);
}

/* Alternating sides keeps two figure rows in a row from reading as one block. */
.extension-media-split--flip .extension-media-split__copy {
  order: 2;
}

.extension-media-split__title {
  margin: 0.35rem 0 0;
  color: var(--wordy-ink);
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3.6vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
}

.extension-media-split__lead {
  margin: 0.9rem 0 0;
  color: var(--wordy-ink-secondary);
  font-size: 0.9375rem;
  line-height: 1.62;
  text-wrap: pretty;
}

.extension-media-split__points {
  display: flex;
  margin: 1.35rem 0 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
}

.extension-media-split__points li {
  padding: 0.35rem 0.7rem;
  background: var(--wordy-surface-subtle);
  border: 1px solid var(--wordy-border);
  color: var(--wordy-ink);
  font-size: 0.8125rem;
}

.extension-media-split__media {
  display: flex;
  min-width: 0;
  justify-content: center;
}

.extension-section-heading {
  margin-bottom: 2rem;
  text-align: center;
}

.extension-steps-grid {
  display: grid;
  margin: 0;
  padding: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--wordy-border);
  list-style: none;
}

.extension-mini-step {
  display: grid;
  padding: 1.4rem 1.3rem 1.5rem;
  align-content: start;
  gap: 0.45rem;
  background: var(--wordy-surface);
}

.extension-mini-step__num {
  color: var(--wordy-brand);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.extension-mini-step h3 {
  margin: 0;
  color: var(--wordy-ink);
  font-size: 1.0625rem;
  font-weight: 600;
}

.extension-mini-step p {
  margin: 0;
  color: var(--wordy-ink-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
}

.extension-mini-step a {
  font-size: 0.8125rem;
}

@media (max-width: 991.98px) {
  .extension-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .extension-media-split {
    grid-template-columns: 1fr;
  }

  /* Stacked, the copy always comes first; the flip only exists side by side. */
  .extension-media-split--flip .extension-media-split__copy {
    order: 0;
  }
}

@media (max-width: 767.98px) {
  .extension-trust__grid,
  .extension-steps-grid,
  .install-box__stores {
    grid-template-columns: 1fr;
  }

  .extension-hero {
    padding-block: 0 2.5rem;
  }

  .extension-hero__title {
    font-size: clamp(2rem, 8.4vw, 2.75rem);
  }

  .extension-connect-panel .wordy-panel__header {
    align-items: flex-start;
  }

  .extension-step {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .extension-step .step-status {
    grid-column: 2;
  }

  .extension-technical-details dl div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* Which browsers can run the extension ------------------------------------
   Reached by someone who has just been told "not in this browser", so the page
   is a list of ways out rather than an explanation. Each entry carries whether
   WordySpot is actually tested there, because most of them are not and a
   confident-looking list would be a promise nobody here can keep. */

.browser-stores {
  display: flex;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Most readers arrive here having just been told their browser cannot install the
   extension, so opening with the two store buttons would rebuild the dead end they came
   from. `ws-cannot-install` is set on <html> before first paint for exactly that audience
   -- iOS, Android browsers that load no extensions, and desktop Safari -- so the list of
   browsers that do work becomes the first thing they can act on. Keyed on the capability
   rather than on `ws-store-none`, because Safari is shown both stores elsewhere and would
   otherwise slip through. With scripting off no class is set and both buttons show, which
   is the right default for a crawler. */
.ws-cannot-install .browser-stores {
  display: none;
}

.browser-platform {
  margin-bottom: 2.25rem;
}

.browser-platform__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 600;
}

.browser-platform__summary {
  margin: 0.4rem 0 0.9rem;
  max-width: var(--readable-width);
  color: var(--dim);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.browser-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.browser-option {
  display: flex;
  padding: 0.95rem 1.1rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  background: var(--panel);
  border: 1px solid var(--line);
}

.browser-option + .browser-option {
  border-top: none;
}

.browser-option__copy {
  min-width: min(100%, 18rem);
  flex: 1;
}

.browser-option__name {
  display: flex;
  margin: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
}

.browser-option__badge {
  padding: 0.12rem 0.4rem;
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.browser-option__badge--tested {
  background: var(--known-soft);
  border-color: var(--known);
  color: var(--known);
}

.browser-option__note {
  margin: 0.3rem 0 0;
  color: var(--dim);
  font-size: 0.875rem;
  line-height: 1.55;
}

.browser-option__source {
  margin: 0.25rem 0 0;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.browser-platform__limitation {
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.9rem;
  max-width: var(--readable-width);
  background: var(--panel2);
  border-left: 3px solid var(--line);
  color: var(--dim);
  font-size: 0.875rem;
  line-height: 1.55;
}

.browser-fallback {
  margin: 2.5rem 0 1.25rem;
  padding: 1.35rem 1.5rem;
  background: var(--panel2);
  border: 1px solid var(--line);
}

.browser-fallback h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
}

.browser-fallback p {
  margin: 0.5rem 0 1rem;
  max-width: var(--readable-width);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.browser-fallback__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.browser-page-note {
  max-width: var(--readable-width);
  font-size: 0.8125rem;
  line-height: 1.55;
}