/* Layout do Claude Design (temp/landing-page) para a home e as páginas
   de produto, com as cores, a fonte e os ícones do site. Tokens, fonte,
   reset e tema vêm do site.css. */

.lp {
  --lp-accent: var(--cta);
  --lp-accent-soft: color-mix(in srgb, var(--cta) 10%, transparent);
  --lp-accent-ink: var(--icon-red);
  --lp-stripe-a: var(--well);
  --lp-stripe-b: var(--bg-2);
  background: var(--bg);
  color: var(--text);
}
.lp a {
  text-decoration: none;
}
.lp-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 24px;
}
.lp-mono {
  font-family: var(--mono);
}

.lp-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.lp-header-row {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-block: 12px;
}
.lp-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lp-brand img {
  width: 24px;
  height: 24px;
}
.lp-nav {
  display: flex;
  gap: 24px;
  font-size: 14px;
  color: var(--text-2);
}
.lp-nav a:hover,
.lp-foot a:hover {
  color: var(--text);
}
.lp-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-round {
  height: 36px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.lp-round:hover {
  background: var(--well);
}
.lp-round.is-icon {
  width: 36px;
  padding: 0;
}
.lp-chev {
  font-size: 12px;
  line-height: 1;
  color: var(--text-2);
  transition: transform 0.2s;
}
[aria-expanded="true"] > .lp-chev {
  transform: rotate(180deg);
}
.lp-lang {
  position: relative;
}
.lp-lang-menu {
  position: absolute;
  top: 44px;
  right: 0;
  min-width: 180px;
  white-space: nowrap;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  gap: 4px;
}
.lp-lang-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.lp-lang-menu button:hover {
  background: var(--well);
}
.lp-lang-menu button[aria-checked="true"] {
  background: var(--lp-accent-soft);
  font-weight: 500;
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  transition: background 0.15s, opacity 0.15s;
}
.lp-btn img {
  width: 24px;
  height: 24px;
}
.lp-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.lp-btn-sm {
  padding: 8px 16px;
  font-size: 14px;
}
.lp-btn-accent {
  background: var(--lp-accent);
  color: var(--cta-contrast);
}
.lp-btn-accent:hover {
  background: var(--cta-hover);
}
.lp-btn-loop {
  background: var(--loop-cta);
  color: var(--loop-cta-on);
}
.lp-btn-loop:hover {
  background: color-mix(in srgb, var(--loop-cta) 88%, var(--ink));
}
.lp-btn-ink {
  background: var(--ink);
  color: var(--ink-contrast);
}
.lp-btn-ink:hover {
  background: var(--ink-hover);
}
.lp-btn-surface {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.lp-btn-surface:hover {
  background: var(--well);
}
.lp-btn-outline {
  border-color: var(--border-2);
  color: var(--text);
}
.lp-btn-outline:hover {
  background: var(--well);
}
.lp-btn-pro {
  background: var(--pro);
  color: var(--pro-contrast);
}
.lp-btn-pro:hover {
  background: var(--pro-hover);
}
/* Loop no Firefox (markLoopUnavailable no main.js): sem link, neutro. */
.lp-btn.is-unavailable,
.lp-btn.is-unavailable:hover {
  background: var(--well);
  border-color: var(--border);
  color: var(--text-3);
  cursor: default;
}

.lp-hero {
  padding-block: 88px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lp-h1 {
  max-width: 900px;
  font-size: clamp(44px, 7.4vw, 84px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.045em;
}
.lp-sub {
  max-width: 600px;
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}
.lp-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.lp-demo {
  padding-block: 24px 96px;
}
.lp-tabs-row {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.lp-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.lp-tabs button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
}
.lp-tabs button img {
  width: 16px;
  height: 16px;
}
.lp-tabs button[aria-selected="true"] {
  background: var(--ink);
  color: var(--ink-contrast);
}
.lp-window {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
}
.lp-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.lp-window-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-2);
}
.lp-url {
  flex: 1;
  max-width: 340px;
  height: 24px;
  margin-left: 12px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
}
.lp-panel-feed {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: start;
}
.lp-panel-side {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lp-panel-feed .lp-panel-side {
  border-right: 1px solid var(--border);
}
.lp-panel-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
}
.lp-panel-brand img {
  width: 24px;
  height: 24px;
}
.lp-panel-hint {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.lp-filters {
  display: grid;
  gap: 8px;
}
.lp-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-2);
  font: inherit;
  font-size: 14px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.lp-switch {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--toggle-off);
  transition: background 0.2s;
}
.lp-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--toggle-off-contrast);
  transition: left 0.2s;
}
.lp-filter[aria-pressed="true"] .lp-switch {
  background: var(--toggle-on);
}
.lp-filter[aria-pressed="true"] .lp-switch::after {
  left: 18px;
  background: var(--toggle-on-contrast);
}
.lp-count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
}
.lp-cards {
  grid-column: span 2;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 20px 16px;
  align-content: start;
  min-height: 360px;
}
.lp-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--lp-stripe-a) 0 8px, var(--lp-stripe-b) 8px 16px);
}
.lp-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--lp-accent);
  color: var(--cta-contrast);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
/* Selo de duração e barra de "já assistido": cores do próprio YouTube,
   iguais nos dois temas. */
.lp-dur {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 12px;
}
.lp-watched {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--lp-accent);
}
.lp-card-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}
.lp-card-channel {
  font-size: 12px;
  color: var(--text-2);
}

.lp-panel-loop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.lp-stage {
  grid-column: span 2;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lp-panel-loop .lp-panel-side {
  gap: 24px;
  border-left: 1px solid var(--border);
}
.lp-video {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, var(--lp-stripe-a) 0 10px, var(--lp-stripe-b) 10px 20px);
}
.lp-video span {
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
}
.lp-track {
  position: relative;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-2);
}
.lp-track-sec {
  position: absolute;
  top: 4px;
  bottom: 4px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: color-mix(in srgb, var(--loop-strong) 18%, transparent);
  cursor: pointer;
  transition: background 0.2s;
}
.lp-track-sec.is-active {
  background: var(--loop-strong);
}
.lp-playhead {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: var(--a);
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--text);
  pointer-events: none;
}
.lp-playhead.is-playing {
  animation: lp-loop var(--dur) linear infinite;
}
@keyframes lp-loop {
  from {
    left: var(--a);
  }
  to {
    left: var(--b);
  }
}
.lp-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}
.lp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-2);
  font: inherit;
  font-size: 14px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.lp-row span + span {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
}
.lp-row.is-active {
  border-color: var(--loop-strong);
  background: color-mix(in srgb, var(--loop-strong) 12%, transparent);
}
.lp-speeds {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.lp-speeds button {
  padding: 8px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.lp-speeds button[aria-checked="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ink-contrast);
}
.lp-pitch {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-pitch button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-2);
  font: inherit;
  font-size: 18px;
  color: var(--text);
  cursor: pointer;
}
.lp-pitch output {
  flex: 1;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 14px;
}

.lp-section {
  padding-block: 72px;
}
.lp-rule {
  border-top: 1px solid var(--border);
}
.lp-h2 {
  max-width: 640px;
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.lp-lead {
  max-width: 560px;
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-2);
}
.lp-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 16px;
  margin-top: 40px;
}
.lp-product {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lp-product-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.lp-product-head img {
  width: 40px;
  height: 40px;
}
.lp-product-head h3 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.lp-new {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--loop-soft);
  color: var(--loop-strong);
  font-size: 12px;
  font-weight: 600;
}
.lp-product > p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}
.lp-checks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
}
/* Mesmo ✓ das listas de planos do site.css: azul no Grátis e nos
   produtos, no tom do texto Pro no Pro. */
.lp-checks li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 12px;
}
.lp-checks li::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-top: 5px;
  background: var(--check-free);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / contain no-repeat;
}
.lp-checks.is-pro li::before {
  background: var(--pro-text);
}
.lp-product-actions {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.lp-more {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
}
.lp-more:hover {
  color: var(--text);
}
.lp-compat {
  margin-left: auto;
  text-align: right;
  font-size: 14px;
  color: var(--text-2);
}

.lp-principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 32px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.lp-principles > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-principles h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lp-principles p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}

.lp-band {
  background: var(--bg-2);
  border-block: 1px solid var(--border);
}
.lp-band > .lp-wrap {
  padding-block: 88px;
}
.lp-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lp-center .lp-h2 {
  max-width: 680px;
}
.lp-center .lp-lead {
  max-width: 520px;
}
.lp-plans {
  max-width: 1000px;
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px;
}
.lp-plan {
  grid-row: span 6;
  display: grid;
  grid-template-rows: subgrid;
  gap: 16px;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.lp-plan.is-pro {
  border: 2px solid var(--pro);
}
.lp-plan-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}
.lp-pro-tag {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--pro-tint);
  color: var(--pro-text);
  font-size: 12px;
  font-weight: 600;
}
.lp-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.lp-price strong {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.lp-cur {
  font-size: 24px;
  letter-spacing: 0;
}
.lp-price > span,
.lp-plan > p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-2);
}
.lp-plan-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lp-plan-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-plan-group-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}
.lp-plan-group-name img {
  width: 16px;
  height: 16px;
}
.lp-plan .lp-checks {
  gap: 8px;
  font-size: 16px;
  color: var(--text-2);
}
.lp-plan > .lp-plan-note {
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--text-2);
}

/* Lista completa, recolhida: o design não tem a comparação, mas é para lá
   que "Ver o que o Pro libera" das extensões aponta (#compare). */
.lp-compare {
  max-width: 1000px;
  margin: 24px auto 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.lp-compare summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 28px;
  font-size: 16px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.lp-compare summary::-webkit-details-marker {
  display: none;
}
.lp-compare summary::after,
.lp-faq-q::after {
  content: "+";
  flex: none;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--text-2);
  transition: transform 0.2s;
}
.lp-compare[open] summary::after,
.lp-faq-q[aria-expanded="true"]::after {
  transform: rotate(45deg);
}
.lp-compare-body {
  padding: 0 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.lp-compare-body .lp-tabs {
  align-self: flex-start;
}
.lp-compare-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
}
.lp-compare-cols h4 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
}
.lp-compare-cols h4.is-pro {
  color: var(--pro-text);
}
.lp-compare-cols .lp-checks {
  gap: 8px;
  font-size: 14px;
  color: var(--text-2);
}
.lp-compare-cols .lp-checks li::before {
  margin-top: 4px;
}

.lp-faq {
  max-width: 760px;
  margin: 0 auto;
  padding: 88px 24px;
}
.lp-faq .lp-h2 {
  max-width: none;
  margin-bottom: 32px;
  text-align: center;
}
.lp-faq-group + .lp-faq-group {
  margin-top: 40px;
}
.lp-faq-more {
  margin-top: 40px;
  font-size: 14px;
  color: var(--text-2);
}
.lp-faq-more a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.lp-faq-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-2);
}
.lp-faq-cat img {
  width: 16px;
  height: 16px;
}
.lp-faq-list {
  border-top: 1px solid var(--border);
}
.lp-faq-item {
  border-bottom: 1px solid var(--border);
}
.lp-faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.lp-faq-a {
  max-width: 620px;
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}
.lp-faq-a a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lp-final-wrap {
  padding-bottom: 96px;
}
.lp-final {
  padding: 64px 32px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--ink-contrast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.lp-final .lp-h2 {
  max-width: 640px;
}
.lp-final p {
  max-width: 480px;
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.72;
}
.lp-final .lp-cta-row {
  margin-top: 8px;
}
.lp-final .lp-btn {
  padding: 8px 20px 8px 12px;
  background: var(--bg);
  color: var(--text);
}
.lp-final .lp-btn:hover {
  background: var(--well);
}

.lp-footer {
  border-top: 1px solid var(--border);
}
.lp-foot {
  padding-block: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 28px;
  font-size: 14px;
}
.lp-foot > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lp-foot > div:first-child {
  grid-column: span 2;
  gap: 12px;
}
.lp-foot strong {
  margin-bottom: 8px;
  font-weight: 600;
}
.lp-foot a {
  color: var(--text-2);
  text-underline-offset: 4px;
}
.lp-foot a:hover {
  color: var(--text);
  text-decoration: underline;
}
.lp-foot-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.lp-foot-brand img {
  width: 24px;
  height: 24px;
}
.lp-foot p {
  max-width: 340px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
}
.lp-foot .lp-verified {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  color: var(--text);
}
.lp-verified svg {
  width: 20px;
  height: 20px;
  color: var(--check-free);
}

.lp-product-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-2);
}
.lp-product-line img {
  width: 28px;
  height: 28px;
}
.lp-browsers {
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-2);
}
.lp-real {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  align-items: center;
  gap: 48px;
}
.lp-real img {
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.lp-real.is-wide {
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.lp-panel-feed.is-tall {
  align-items: stretch;
}
.lp-panel-feed.is-tall .lp-panel-side {
  gap: 20px;
}
.lp-profiles {
  display: grid;
  gap: 4px;
}
.lp-profiles button {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.lp-profiles button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ink-contrast);
}
.lp-counter {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.lp-counter strong {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.lp-counter span {
  margin-left: 8px;
  font-size: 14px;
  color: var(--text-2);
}
.lp-link-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lp-link-btn:hover {
  color: var(--text);
}
.lp-feed-main {
  grid-column: span 2;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 520px;
}
.lp-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
}
.lp-feed-head strong {
  font-size: 16px;
  font-weight: 600;
}
.lp-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 4px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-contrast);
  font-size: 14px;
}
.lp-toast button {
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--bg);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
.lp-feed-main .lp-cards {
  grid-column: auto;
  padding: 0;
  min-height: 0;
}
.lp-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lp-block {
  flex: none;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
}
.lp-block:hover {
  border-color: var(--lp-accent);
  color: var(--lp-accent-ink);
}

.lp-features {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 40px 32px;
}
.lp-features > div {
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-features h3,
.lp-steps h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lp-features p,
.lp-pro-features p,
.lp-steps p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}
.lp-pro-block {
  margin-top: 64px;
  padding: 36px;
  border: 2px solid var(--pro);
  border-radius: 16px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.lp-pro-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.lp-pro-head > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lp-pro-head h3 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.lp-pro-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 28px;
}
.lp-pro-features > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-pro-features h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.lp-pro-block > p {
  font-size: 14px;
  color: var(--text-2);
}

.lp-steps {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
.lp-steps li {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-steps li > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ink-contrast);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
}
.lp-steps h3 {
  margin-top: 8px;
}

.lp-also {
  padding: 24px 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}
.lp-also:hover {
  border-color: var(--border-2);
}
.lp-also img {
  width: 44px;
  height: 44px;
}
.lp-also > div {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lp-also strong {
  font-size: 18px;
  font-weight: 600;
}
.lp-also > div > span:last-child {
  font-size: 16px;
  color: var(--text-2);
}
.lp-also > span {
  font-size: 14px;
  font-weight: 500;
}
.lp-section-tight {
  padding-block: 72px 40px;
}
.lp-faq + .lp-section-tight {
  padding-top: 0;
}

.lp-uses-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  text-align: center;
}
.lp-uses-head p {
  max-width: 560px;
  min-height: 48px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}
.lp-video {
  position: relative;
}
.lp-video .is-mirrored {
  transform: scaleX(-1);
}
.lp-video .lp-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 0;
  background: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lp-video .lp-badges span {
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
}
.lp-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
}
.lp-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.lp-group-head span + span {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
}
.lp-panel-loop .lp-filters {
  gap: 8px;
}

@media (max-width: 760px) {
  .lp-sub {
    font-size: 16px;
  }
  .lp-final {
    padding: 40px 24px;
  }
  .lp-nav,
  .lp-header-cta {
    display: none;
  }
  .lp-real {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .lp-real:not(.is-wide) img {
    max-width: 320px;
    justify-self: center;
  }
  .lp-card.is-extra {
    display: none;
  }
  .lp-compat {
    flex-basis: 100%;
    margin-left: 0;
    text-align: left;
  }
  .lp-panel-feed .lp-panel-side {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .lp-cards,
  .lp-stage,
  .lp-feed-main {
    grid-column: auto;
  }
  .lp-feed-main {
    min-height: 0;
  }
  .lp-card-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  .lp-pro-block {
    padding: 24px;
  }
  .lp-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
  }
  .lp-panel-loop .lp-panel-side {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .lp-compat {
    margin-left: 0;
    width: 100%;
  }
  .lp-foot > div:first-child {
    grid-column: 1 / -1;
  }
}