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

/* The sign-in forms, as narrow as on /signin. */
.extension-login__forms {
  display: flex;
  flex-direction: column;
  max-width: 26rem;
  margin: 1rem auto 0;
}

.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__guide {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.extension-problem__guide[hidden] {
  display: none;
}

.extension-problem__guide i {
  color: var(--accent);
}

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

/* One store is this browser's: the head script's ws-store-* class keeps it, names the
   browser on it, and drops the other. With scripting off no class is set and both
   stores show under their own names, which is right for a crawler. */
.install-box__store-add {
  display: none;
}

.ws-store-chrome .install-box__stores,
.ws-store-firefox .install-box__stores {
  grid-template-columns: 1fr;
}

.ws-store-chrome .install-box__store--firefox,
.ws-store-firefox .install-box__store--chrome {
  display: none;
}

.ws-store-chrome .install-box__store--chrome .install-box__store-name,
.ws-store-firefox .install-box__store--firefox .install-box__store-name {
  display: none;
}

.ws-store-chrome .install-box__store--chrome .install-box__store-add,
.ws-store-firefox .install-box__store--firefox .install-box__store-add {
  display: inline;
}

/* A browser that cannot install, or a phone browser that hid its name, is not helped by
   a store page; the "which browsers" line under the box is its way forward, as on
   /extension/browsers. */
.ws-cannot-install .install-box__stores,
.ws-install-unknown .install-box__stores {
  display: none;
}

.ws-cannot-install .install-box__stores + .install-box__status,
.ws-install-unknown .install-box__stores + .install-box__status {
  margin-top: 0;
}

.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: a support panel after the pitch, not another marketing block
 * inside it. It is reached mostly by `#permissions` links from the connect page
 * and the extension, so it sits last where it does not interrupt a first-time
 * reader, and is framed so an anchor jump lands on something visibly different.
 * Copy on the left, collapsed per-browser steps on the right: a menu of browsers
 * rather than a wall of instructions.
 */
.extension-recovery {
  display: grid;
  max-width: 66rem;
  margin: clamp(3rem, 7vw, 5rem) auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--wordy-border);
  background: var(--wordy-surface-subtle);
}

.extension-recovery__title {
  margin: 0;
  color: var(--wordy-ink);
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.2vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
}

.extension-recovery__lead,
.extension-recovery__hint {
  margin: 0.9rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  text-wrap: pretty;
}

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

.extension-recovery__hint {
  color: var(--wordy-ink-secondary);
  font-size: 0.875rem;
}

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

.extension-recovery__list {
  display: grid;
  gap: 0.6rem;
}

.extension-recovery__steps {
  border: 1px solid var(--wordy-border);
  border-radius: var(--wordy-radius-md);
  background: var(--wordy-surface);
}

.extension-recovery__steps summary {
  display: flex;
  padding: 0.95rem 1.1rem;
  align-items: center;
  gap: 0.65rem;
  color: var(--wordy-ink);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  list-style: none;
}

.extension-recovery__steps summary::-webkit-details-marker {
  display: none;
}

.extension-recovery__steps summary .bi {
  color: var(--wordy-brand);
  font-size: 1.1rem;
}

/* A chevron on the far edge instead of the default triangle beside the text. */
.extension-recovery__steps summary::after {
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-right: 2px solid var(--wordy-ink-muted);
  border-bottom: 2px solid var(--wordy-ink-muted);
  content: "";
  transform: translateY(-0.15rem) rotate(45deg);
  transition: transform 0.15s ease;
}

.extension-recovery__steps[open] summary::after {
  transform: translateY(0.1rem) rotate(-135deg);
}

.extension-recovery__steps summary:hover::after {
  border-color: var(--wordy-ink);
}

.extension-recovery__steps[open] summary {
  border-bottom: 1px solid var(--wordy-border);
}

.extension-recovery__steps ol,
.extension-recovery__steps ul {
  margin: 0;
  padding: 0.9rem 1.1rem 1rem 2.3rem;
  color: var(--wordy-ink-secondary);
  font-size: 0.9375rem;
  line-height: 1.65;
}

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

.extension-recovery__steps strong {
  color: var(--wordy-ink);
  font-weight: 600;
}

.extension-recovery__note {
  margin: 0 1.1rem 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--wordy-border);
  color: var(--wordy-ink-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .extension-recovery__steps summary::after {
    transition: none;
  }
}

.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,
  .extension-recovery {
    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 {
    min-height: 0;
    padding: 0.85rem 1rem;
    gap: 0.75rem;
  }

  .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. Phone browsers carry their
   store figures, so an unfamiliar name comes with a sense of how widely it is used. */

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

/* Readers with an explicitly unsupported browser or an ambiguous masked mobile identity
   need the browser choices, not a guessed store button. The pre-paint detector sets these
   classes before the page renders. Keyed on capability rather than `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,
.ws-install-unknown .browser-stores {
  display: none;
}

/* The way out for a masked identity that is already one of the listed browsers. */
.browser-already-here {
  display: none;
  margin: 0 0 2rem;
  max-width: var(--readable-width);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.ws-install-unknown .browser-already-here {
  display: block;
}

/* The reader's own platform is moved first by the page's inline script. */
.browser-platform__yours {
  display: none;
  margin-left: 0.5rem;
  padding: 0.12rem 0.4rem;
  vertical-align: 0.15em;
  border: 1px solid var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.browser-platform--yours .browser-platform__yours {
  display: inline-block;
}

.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--recommended {
  border-color: var(--accent);
  color: var(--ink);
}

/* On the reader's own platform the place to start is the loudest card. */
.browser-platform--yours .browser-option--recommended {
  box-shadow: inset 3px 0 0 var(--accent);
}

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

.browser-option__stats {
  margin: 0.2rem 0 0;
  color: var(--ink);
  font-size: 0.8125rem;
}

.browser-option__stats-ref {
  margin-left: 0.15em;
  color: var(--dim);
  text-decoration: none;
}

.browser-option__stats-ref:hover {
  color: var(--accent);
}

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

/* A browser's install guide ------------------------------------------------
   A portrait phone video beside the same steps written out. The video is the
   quick version; the numbered steps are what a reader scrolls back to when a
   screen on their phone looks different. Media is generated by tools/install-guides. */

.install-guide__crumbs {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
}

.install-guide__crumbs a {
  color: var(--dim);
  text-decoration: none;
}

.install-guide__crumbs a:hover {
  color: var(--accent);
}

.install-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

.install-guide__video {
  margin: 0 auto;
  width: 100%;
  max-width: 21rem;
}

.install-guide__video video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 82vh;
  object-fit: contain;
  background: #14130f;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.install-guide__video figcaption {
  margin-top: 0.5rem;
  color: var(--dim);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
}

.install-guide__beside {
  display: none;
}

.install-guide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.install-guide__hint {
  margin: 0.6rem 0 1.5rem;
  max-width: var(--readable-width);
  color: var(--dim);
  font-size: 0.875rem;
  line-height: 1.55;
}

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

/* On a phone each step reads top to bottom: the words, then a screenshot big enough
   to match against the phone's own screen. A thumbnail beside the text only once
   there is room for both. */
.install-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 5rem;
}

.install-step__shot {
  display: block;
  order: 2;
  justify-self: center;
  align-self: start;
  width: min(100%, 17rem);
}

.install-step__copy {
  order: 1;
  min-width: 0;
}

.install-step__alt {
  display: grid;
  order: 3;
  margin-top: 0.2rem;
  padding: 0.85rem 0.9rem;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
  background: var(--panel2);
  border-left: 3px solid var(--accent);
}

.install-step__shot--alt {
  width: min(100%, 13rem);
}

.install-step__alt-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
}

.install-step__alt .install-step__text {
  margin-top: 0.3rem;
  font-size: 0.875rem;
}

@media (min-width: 34rem) {
  .install-step {
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 1.25rem;
  }

  .install-step__shot,
  .install-step__copy {
    order: 0;
  }

  .install-step__shot {
    width: auto;
  }

  .install-step__alt {
    grid-column: 2;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    align-items: start;
  }
}

.install-step__shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.install-step__number {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.install-step__title {
  margin: 0.2rem 0 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

.install-step__text {
  margin: 0.4rem 0 0;
  max-width: var(--readable-width);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (min-width: 52rem) {
  .install-guide {
    grid-template-columns: 19rem minmax(0, 1fr);
    gap: 2.5rem;
  }

  /* The video stays in view while the steps scroll past it. */
  .install-guide__video {
    position: sticky;
    top: 5rem;
    max-width: none;
  }

  .install-guide__video video {
    max-height: calc(100vh - 8rem);
  }

  .install-guide__below {
    display: none;
  }

  .install-guide__beside {
    display: inline;
  }

  .install-step {
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 1.4rem;
  }
}

@media (max-width: 33.99rem) {
  /* The video, like a screenshot, is a phone screen: as wide as the page allows, but
     never taller than the window, so its controls stay in view. */
  .install-guide__video {
    max-width: min(100%, 22rem);
  }

  .install-guide__actions > .btn {
    flex: 1 1 100%;
  }
}

/* The full-size screenshot viewer (extension/install-guide.js). Fills the window so
   the phone screen is as large as it can be; the image never crops or scrolls. */
.install-zoom {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.install-zoom[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem 1rem;
}

.install-zoom::backdrop {
  background: rgb(0 0 0 / 0.9);
  backdrop-filter: none;
}

/* Shrink-wraps the image, so the close button can sit on the image's own corner. */
.install-zoom__frame {
  position: relative;
  flex: none;
}

.install-zoom__image {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 3rem);
  max-height: calc(100dvh - 5.5rem);
  object-fit: contain;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 10px;
  cursor: default;
}

.install-zoom__caption {
  flex: none;
  margin: 0;
  max-width: 32rem;
  color: rgb(255 255 255 / 0.85);
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
}

/* Centred on the image's top-right corner, half on and half off it: the usual place
   for a close button, and clearly the popup's own. 44px, white, to stand out on both
   a light screenshot and the dark backdrop. */
.install-zoom__close {
  position: absolute;
  top: -1.1rem;
  right: -1.1rem;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  padding: 0;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.5);
  color: #14130f;
  font-size: 1.05rem;
  cursor: pointer;
}

.install-zoom__close:hover,
.install-zoom__close:focus-visible {
  background: #f9a63e;
  outline: none;
}

html:has(.install-zoom[open]) {
  overflow: hidden;
}

.install-step__shot {
  cursor: zoom-in;
}

/* The way to a browser's guide, on /extension/browsers. */
.browser-option__guide {
  display: inline-flex;
  margin: 0.45rem 0 0;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
}

/* ---- the button section on /extension ---------------------------------------
 *
 * The controls and the preview sit side by side while there is room for both to
 * be read, and stack below that: a preview squeezed into half of a narrow phone
 * screen would be too small to tell the three modes apart, which is the one job
 * it has.
 */
.extension-button-panel {
  margin-top: 1.5rem;
}

.extension-rules-panel {
  margin-top: 1.5rem;
}

.extension-button-panel__scope {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 62ch;
  margin: 0.35rem 0 0;
  color: var(--wordy-ink-secondary);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.extension-button-panel__intro {
  max-width: 62ch;
  margin: 0.9rem 0 0;
  color: var(--wordy-ink-secondary);
  font-size: 0.875rem;
  line-height: 1.55;
}

.extension-button-panel__notice {
  max-width: 62ch;
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--wordy-warning) 35%, var(--wordy-border));
  border-radius: var(--wordy-radius-sm);
  background: var(--wordy-warning-subtle);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.extension-button-panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  align-items: start;
  gap: 1.5rem;
  margin-top: 1.1rem;
}

@media (max-width: 52rem) {
  .extension-button-panel__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .extension-button-panel__preview {
    max-width: 22rem;
  }
}

.extension-field {
  margin: 0 0 1.1rem;
  padding: 0;
  border: 0;
}

.extension-field__help {
  max-width: 58ch;
  margin: 0.4rem 0 0;
  color: var(--wordy-ink-secondary);
  font-size: 0.75rem;
  line-height: 1.5;
}

.extension-switch {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  cursor: pointer;
}

.extension-switch input {
  margin-top: 0.2rem;
  accent-color: var(--wordy-brand);
}

.extension-switch span {
  color: var(--wordy-ink-secondary);
  font-size: 0.75rem;
  line-height: 1.5;
}

.extension-switch strong {
  display: block;
  color: var(--wordy-ink);
  font-size: 0.8125rem;
  font-weight: 500;
}

.extension-button-panel__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--wordy-border);
}

/* ---- the website rules, moved here with the lists themselves ----------------
 *
 * These styles came from the profile stylesheet when the lists moved to this
 * page. The page they describe is the only one that shows them now.
 */
/* ---- site-rule editor ------------------------------------------------------- */

.site-rule-builder {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.site-rule-builder .profile-field {
  flex: 1 1 18rem;
}

.site-rule-builder__text {
  min-width: 14rem;
}

.site-rule-builder__add {
  margin-top: 1.7rem;
}

.site-rule-lists {
  display: grid;
  margin-top: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}

.site-rule-list {
  overflow: hidden;
  border: 1px solid var(--wordy-border);
  border-radius: var(--wordy-radius-md);
}

.site-rule-list__header {
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid var(--wordy-border);
  background: var(--wordy-surface-muted, var(--wordy-info-subtle));
}

.site-rule-list__header h4 {
  margin: 0;
  font-size: 0.9rem;
}

.site-rule-list__header span,
.site-rule-list__empty {
  color: var(--wordy-ink-secondary);
  font-size: 0.78rem;
}

.site-rule-list__empty {
  margin: 0;
  padding: 0.75rem 0.8rem;
}

.site-rule-row {
  display: flex;
  padding: 0.55rem 0.8rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--wordy-border);
}

.site-rule-row:last-child {
  border-bottom: 0;
}

.site-rule-row__value,
.site-rule-row__type {
  display: block;
  overflow-wrap: anywhere;
}

.site-rule-row__type {
  margin-top: 0.15rem;
  color: var(--wordy-ink-secondary);
  font-size: 0.72rem;
}

/* ---- the question asked once ------------------------------------------------
 *
 * The three sketches are drawn in CSS rather than rendered by the preview
 * component: at this size the point is the shape of the choice, not a faithful
 * miniature, and three live previews beside each other would compete with the
 * one below that does show the real thing.
 */
.extension-first-run {
  margin-top: 1.1rem;
  padding: 1rem 1.1rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--wordy-brand) 40%, var(--wordy-border));
  border-radius: var(--wordy-radius-md);
  background: var(--wordy-brand-subtle);
}

.extension-first-run__title {
  margin: 0;
  font-size: 1rem;
}

.extension-first-run__intro {
  max-width: 62ch;
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
}

.extension-first-run__choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.extension-choice {
  /* A grid item is min-content wide by default, and a button does not wrap its
     own text, so without both of these the descriptions run past the card. */
  min-width: 0;
  white-space: normal;
  padding: 0.75rem;
  border: 1px solid var(--wordy-border);
  border-radius: var(--wordy-radius-md);
  background: var(--wordy-surface);
  text-align: left;
  cursor: pointer;
}

.extension-choice:hover,
.extension-choice:focus-visible {
  border-color: var(--wordy-brand);
}

.extension-choice b {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

.extension-choice > span:last-child {
  display: block;
  margin-top: 0.15rem;
  color: var(--wordy-ink-secondary);
  font-size: 0.75rem;
  line-height: 1.45;
}

/* A page of text, with the button that choice would put on it. */
.extension-choice__art {
  position: relative;
  display: block;
  height: 3.4rem;
  border: 1px solid var(--wordy-border);
  border-radius: var(--wordy-radius-sm);
  background: var(--wordy-surface-subtle);
  overflow: hidden;
}

.extension-choice__art i {
  position: absolute;
  left: 0.5rem;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--wordy-ink) 18%, transparent);
}

.extension-choice__art i:nth-child(1) { top: 0.6rem; right: 1.4rem; }
.extension-choice__art i:nth-child(2) { top: 1.3rem; right: 2.6rem; }
.extension-choice__art i:nth-child(3) { top: 2rem; right: 1.1rem; }
.extension-choice__art i:nth-child(4) { top: 2.7rem; right: 3.2rem; }

.extension-choice__art em {
  position: absolute;
  top: 1rem;
  right: 0;
  display: block;
}

.extension-choice__art--quiet em {
  width: 3px;
  height: 1.3rem;
  border-radius: 2px 0 0 2px;
  background: color-mix(in srgb, var(--wordy-ink) 45%, transparent);
}

.extension-choice__art--full em {
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid var(--wordy-border);
  border-radius: var(--wordy-radius-sm) 0 0 var(--wordy-radius-sm);
  background: var(--wordy-surface);
  color: var(--wordy-ink);
  font: 600 0.6875rem/1.4rem var(--font-mono);
  font-style: normal;
  text-align: center;
}

.goodbye-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
}