/* The public site's selling pages: the home's sections, hero, pricing plans, plan comparison,
   questions, closing band. */

.lq-hero {
  padding-block: 72px 48px;
  text-align: center;
}

.lq-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.lq-hero__text {
  max-width: 44rem;
}

.lq-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-block-start: 16px;
}

/* One line under the actions (the beta's invitation), in the hero and the closing band. */
.lq-hero__note,
.lq-band__note {
  font: 400 14px / 24px var(--font-ui);
}

.lq-hero__note {
  color: var(--color-text-secondary);
}

.lq-band__note {
  opacity: 0.8;
}

/* The home's opening: a dark band that the site's nav joins (`.theme-dark` on both). */
.lq-publicnav.theme-dark,
.lq-hero--dark {
  color: var(--color-text-primary);
}

/* Solid: the page behind the sticky nav is light, and would tint a translucent dark. */
.lq-publicnav.theme-dark {
  background: var(--color-bg-canvas);
}

.lq-hero--dark {
  padding-block: 96px 0;
  background: var(--color-bg-canvas);
}

.lq-hero__mark {
  color: var(--color-accent-amber);
}

.lq-explainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  width: min(100%, 48rem);
  margin-block-start: 16px;
  text-align: start;
}

.lq-explainer__moment {
  display: flex;
  flex: 1 1 18rem;
  flex-direction: column;
  gap: 8px;
}

.lq-explainer__source {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font: 400 12px / 20px var(--font-ui);
}

.lq-explainer__times {
  display: flex;
  justify-content: space-between;
  color: var(--color-text-muted);
  font: 500 12px / 16px var(--font-mono);
}

.lq-explainer__text {
  flex: 1 1 14rem;
  padding-inline-start: 24px;
  border-inline-start: 1px solid var(--color-border-default);
}

/* Plan 12 stage 8 (G): one strip as the frame draws it (Figma 93:1147): the moment, its place on
   the video's time, then what a minute costs. */
.lq-explainer {
  flex-wrap: nowrap;
  width: min(100%, 960px);
  padding: 20px 28px;
}

.lq-explainer .lq-quote {
  font: 400 18px / 32px var(--font-ui);
}

.lq-explainer__moment {
  gap: 4px;
}

.lq-explainer__track {
  display: flex;
  flex: 0 0 200px;
  flex-direction: column;
  gap: 4px;
}

.lq-explainer__at {
  padding-inline-start: calc(30% - 12px);
  color: var(--color-text-primary);
  font: 500 12px / 16px var(--font-mono);
}

.lq-explainer__track .lq-track {
  width: 100%;
}

.lq-explainer__text {
  flex: 0 1 17rem;
  padding-inline-start: 32px;
}

@media (max-width: 1023px) {
  .lq-explainer {
    flex-wrap: wrap;
  }

  .lq-explainer__track {
    flex: 1 1 200px;
  }
}

/*
 * The home (plan 12 stage 2). Its pictures of the product are drawn with the kit's own parts and
 * the tokens' gradients, never photographs; the buttons inside them take no pointer.
 */
.lq-btn--picture {
  pointer-events: none;
}

.lq-example {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.lq-example__note {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
}

.lq-example__note .lq-icon {
  width: 14px;
  height: 14px;
}

/* Example searches under the hero's actions: words, not buttons. */
.lq-hero__examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  color: var(--color-text-muted);
  font: 400 14px / 20px var(--font-ui);
}

.lq-hero__examples ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.lq-hero__examples li {
  padding: 6px 14px;
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
}

/* The hero's example: the best moment for a search, and the player at it. */
.lq-showcase {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 16px;
  margin-block-start: 40px;
  text-align: start;
}

.lq-showcase__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  color: var(--color-text-secondary);
  font: 400 14px / 20px var(--font-ui);
}

.lq-showcase__head strong {
  color: var(--color-text-primary);
  font-weight: 500;
}

.lq-showcase__note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.lq-showcase__note .lq-icon {
  width: 14px;
  height: 14px;
}

.lq-showcase__card {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  padding: 24px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  background: var(--color-bg-surface);
}

.lq-showcase__moment {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.lq-showcase__meta,
.lq-showcase__at {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
}

.lq-showcase__at .lq-icon {
  width: 16px;
  height: 16px;
}

.lq-showcase__at .lq-timecode {
  color: var(--color-text-primary);
}

.lq-showcase__source {
  color: var(--color-text-primary);
  font: 500 14px / 20px var(--font-ui);
}

.lq-showcase__title {
  color: var(--color-text-secondary);
  font: 400 16px / 28px var(--font-ui);
}

.lq-showcase__quote {
  color: var(--color-text-primary);
}

.lq-showcase__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lq-showcase__player {
  border-radius: var(--radius-lg);
}

.lq-showcase__player::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 45%;
  background: linear-gradient(to bottom, transparent, var(--color-overlay-scrim));
}

.lq-showcase__glyph.lq-icon {
  position: absolute;
  inset: 0;
  width: 72px;
  height: 72px;
  margin: auto;
  color: var(--ink-400);
  opacity: 0.45;
}

/* The scrubber: time runs left to right; the moment's marks in amber, the playhead in red. */
.lq-scrub {
  position: absolute;
  inset-inline: 20px;
  inset-block-end: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  font: 500 12px / 16px var(--font-mono);
}

.lq-scrub .lq-icon {
  width: 18px;
  height: 18px;
}

.lq-scrub__line {
  position: relative;
  flex: 1;
  min-width: 0;
}

.lq-scrub__track {
  display: block;
  width: 100%;
  height: 24px;
  overflow: visible;
}

.lq-scrub__base {
  fill: rgb(255 255 255 / 0.3);
}

.lq-scrub__played,
.lq-scrub__hit {
  fill: var(--white);
}

.lq-scrub__range {
  fill: var(--amber-500);
}

.lq-scrub__mark {
  fill: none;
  stroke: var(--amber-500);
  stroke-width: 2.5;
}

.lq-scrub__head {
  fill: var(--red-500);
}

.lq-scrub__tc {
  position: absolute;
  inset-block-end: calc(100% + 8px);
  inset-inline-start: 31%;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  background: var(--color-overlay-scrim);
  white-space: nowrap;
  transform: translateX(-50%);
}

@media (max-width: 1023px) {
  .lq-showcase__card {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .lq-showcase__player {
    order: -1;
    justify-self: center;
    width: min(100%, 640px);
  }
}

@media (max-width: 767px) {
  .lq-showcase {
    margin-block-start: 24px;
  }

  .lq-showcase__card {
    padding: 12px;
    border-radius: var(--radius-lg);
  }

  .lq-scrub {
    inset-inline: 12px;
    inset-block-end: 8px;
    gap: 8px;
  }

  .lq-scrub__tc {
    display: none;
  }
}

/* Where the videos come from: glyphs in the text colour, on the band's last line. */
.lq-platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  gap: 12px 40px;
  margin-block-start: 64px;
  padding-block: 28px;
  border-block-start: 1px solid var(--color-border-default);
}

.lq-platforms__label {
  color: var(--color-text-secondary);
  font: 500 14px / 20px var(--font-ui);
}

.lq-platforms__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 40px;
}

.lq-platforms .lq-platform {
  --lq-brand: var(--color-text-primary);
  gap: 8px;
  padding: 0;
  background: none;
  color: var(--color-text-secondary);
  font: 400 16px / 24px var(--font-ui);
}

.lq-platforms .lq-icon {
  width: 24px;
  height: 24px;
}

@media (max-width: 767px) {
  .lq-platforms,
  .lq-platforms__list {
    gap: 12px 24px;
  }

  .lq-platforms {
    margin-block-start: 40px;
  }
}

/* The home's bands: one vertical rhythm, three grounds. */
.lq-block {
  padding-block: 96px;
  scroll-margin-block-start: 72px;
}

.lq-block--surface {
  border-block: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
}

.lq-block--subtle {
  background: var(--color-bg-subtle);
}

@media (max-width: 767px) {
  .lq-block {
    padding-block: 64px;
    scroll-margin-block-start: 64px;
  }
}

.lq-sechead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 48px;
  margin-block-end: 56px;
}

.lq-sechead__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 60rem;
}

.lq-sechead__text p {
  max-width: 44rem;
}

.lq-sechead__aside {
  flex: none;
}

.lq-sechead__text .lq-h2 + p {
  font-size: 16px;
  line-height: 28px;
}

.lq-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--target-min);
  color: var(--color-text-primary);
  font: 500 16px / 24px var(--font-ui);
  text-underline-offset: 6px;
}

.lq-more .lq-icon {
  width: 18px;
  height: 18px;
}

@media (max-width: 767px) {
  .lq-sechead {
    margin-block-end: 32px;
  }
}

/* Numbered steps in reading order, a line from each number to the next. */
.lq-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.lq-process__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lq-process__step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-block-start: 19px;
  inset-inline: 40px -40px;
  height: 1.5px;
  background: var(--color-border-strong);
}

.lq-process__num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-block-end: 4px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-bg-canvas);
  font: 700 16px / 24px var(--font-heading);
}

.lq-process__title {
  font: 700 22px / 34px var(--font-heading);
}

.lq-process__text {
  flex: 1;
  color: var(--color-text-secondary);
  font: 400 16px / 28px var(--font-ui);
}

.lq-process__visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 256px;
  margin-block-start: 8px;
  padding: 20px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}

@media (max-width: 1023px) {
  .lq-process {
    grid-template-columns: minmax(0, 1fr);
    max-width: 40rem;
  }

  .lq-process__step:not(:last-child)::before {
    display: none;
  }

  .lq-process__visual {
    min-height: 0;
  }
}

/* Small pictures of the product inside the steps. */
.lq-mock {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.lq-mock__input {
  overflow: hidden;
  border-color: var(--color-border-focus);
  box-shadow: var(--focus-ring);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lq-mock__found {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.lq-mock__found .lq-thumb {
  flex: none;
  width: 72px;
  border-radius: var(--radius-sm);
}

.lq-mock__found-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.lq-mock__found-title {
  overflow: hidden;
  font: 500 14px / 20px var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lq-mock__found-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

.lq-mock__ok {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  color: var(--color-status-success);
  font: 500 12px / 16px var(--font-ui);
}

.lq-mock__ok .lq-icon {
  width: 14px;
  height: 14px;
}

.lq-mock__query {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding-inline: 14px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.lq-mock__query .lq-icon {
  width: 18px;
  height: 18px;
  color: var(--color-text-secondary);
}

.lq-mock__q {
  flex: 1;
  font: 500 16px / 24px var(--font-ui);
}

.lq-mock__count {
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
}

.lq-mock .lq-tline__text {
  font-size: 16px;
  line-height: 28px;
}

.lq-cut__ruler {
  display: flex;
  justify-content: space-between;
  color: var(--color-text-muted);
  font: 500 12px / 16px var(--font-mono);
}

.lq-cut__film {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding-block: 4px;
}

.lq-cut__frame {
  aspect-ratio: 17 / 12;
  border-radius: var(--radius-xs);
  background: linear-gradient(150deg, var(--ink-500), var(--ink-900));
  opacity: 0.5;
}

.lq-cut__frame:nth-child(even) {
  background: linear-gradient(210deg, var(--ink-450), var(--ink-950));
}

.lq-cut__frame:nth-child(n + 2):nth-child(-n + 4) {
  opacity: 1;
}

.lq-cut__sel {
  position: absolute;
  inset-block: 0;
  inset-inline: calc(20% - 2px);
  border: 3px solid var(--color-accent-amber);
  border-radius: var(--radius-sm);
}

.lq-cut__head {
  position: absolute;
  inset-block: -4px;
  inset-inline-start: 33%;
  width: 2px;
  background: var(--color-status-live);
}

.lq-cut__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.lq-cut__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
}

.lq-cut__info .lq-timecode {
  color: var(--color-text-primary);
}

/* A selling section in two halves: words and points, and a picture of it. */
.lq-feature__inner {
  display: grid;
  grid-template-columns: minmax(0, 520fr) minmax(0, 680fr);
  align-items: center;
  gap: 48px 80px;
}

.lq-feature--reverse .lq-feature__inner {
  grid-template-columns: minmax(0, 680fr) minmax(0, 520fr);
}

.lq-feature__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lq-feature--reverse .lq-feature__text {
  order: 1;
}

.lq-feature__kicker {
  display: block;
}

.lq-feature__visual {
  min-width: 0;
}

.lq-feature__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-block-start: 16px;
  color: var(--color-text-secondary);
  font: 400 14px / 24px var(--font-ui);
}

@media (max-width: 1023px) {
  .lq-feature__inner,
  .lq-feature--reverse .lq-feature__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .lq-feature--reverse .lq-feature__text {
    order: 0;
  }
}

.lq-points {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-block-start: 16px;
}

.lq-point {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.lq-point__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
}

.lq-point__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lq-point__title {
  font: 500 16px / 24px var(--font-ui);
}

.lq-point__text {
  color: var(--color-text-secondary);
  font: 400 14px / 24px var(--font-ui);
}

/* The newsroom's picture: followed sources, their state, and an alert. */
.lq-sources {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  background: var(--color-bg-canvas);
}

.lq-sources__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-block-end: 20px;
  border-block-end: 1px solid var(--color-border-default);
}

.lq-sources__title {
  font: 700 22px / 34px var(--font-heading);
}

.lq-sources__meta {
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

.lq-sources__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 56px;
  padding-block: 8px;
  border-block-end: 1px solid var(--color-border-default);
}

.lq-sources__row:last-child {
  border-block-end: 0;
}

.lq-sources__name {
  font: 500 14px / 20px var(--font-ui);
}

.lq-sources__end {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-inline-start: auto;
}

.lq-sources__new {
  color: var(--color-text-secondary);
  font: 500 12px / 16px var(--font-ui);
}

.lq-sources__alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
}

.lq-sources__bell {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}

.lq-sources__alert-text {
  flex: 1;
  min-width: 0;
  color: var(--color-text-secondary);
  font: 400 13px / 22px var(--font-ui);
}

.lq-sources__alert-title {
  display: block;
  color: var(--color-text-primary);
  font-weight: 500;
}

.lq-sources__time {
  flex: none;
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
}

@media (max-width: 767px) {
  .lq-sources {
    padding: 16px;
  }

  .lq-sources__alert {
    flex-wrap: wrap;
  }
}

/* The creator's picture: a phone playing a branded cut, and the kit that brands it. */
.lq-kitshow {
  display: grid;
  grid-template-columns: minmax(0, 276fr) minmax(0, 372fr);
  align-items: center;
  gap: 32px;
}

.lq-phone {
  justify-self: center;
  width: 100%;
  max-width: 276px;
  padding: 10px;
  border-radius: 40px;
  background: var(--ink-900);
}

.lq-phone__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 30px;
  background: linear-gradient(
    165deg,
    var(--amber-400) 0%,
    var(--amber-700) 42%,
    var(--ink-900) 100%
  );
}

.lq-phone .lq-platform--overlay {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 14px;
}

.lq-phone__ratio {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--color-overlay-scrim);
  color: var(--white);
  font: 500 12px / 18px var(--font-mono);
}

.lq-phone__ratio .lq-icon {
  width: 12px;
  height: 12px;
}

.lq-phone__logo {
  position: absolute;
  inset-block-start: 48px;
  inset-inline-end: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--ink-900);
  color: var(--white);
  font: 500 12px / 16px var(--font-ui);
}

.lq-phone__caption {
  position: absolute;
  inset-inline: 16px;
  inset-block-end: 36px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-overlay-scrim);
  color: var(--white);
  font: 500 16px / 26px var(--font-ui);
  text-align: center;
}

.lq-phone__bar {
  position: absolute;
  inset-inline: 14px;
  inset-block-end: 16px;
  height: 3px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.35);
}

.lq-phone__bar::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 38%;
  border-radius: inherit;
  background: var(--white);
}

.lq-kit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lq-kit__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.lq-kit__title {
  font: 700 18px / 28px var(--font-heading);
}

.lq-kit__owner,
.lq-kit__foot {
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

.lq-kit__count {
  flex: none;
  color: var(--color-text-secondary);
  font: 500 13px / 20px var(--font-ui);
}

.lq-kit__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  border-block-end: 1px solid var(--color-border-default);
}

.lq-kit__row:last-child {
  border-block-end: 0;
}

.lq-kit__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
}

.lq-kit__icon .lq-icon {
  width: 18px;
  height: 18px;
}

.lq-kit__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.lq-kit__name {
  font: 500 14px / 20px var(--font-ui);
}

.lq-kit__detail {
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

.lq-kit__on {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  color: var(--color-status-success);
  font: 500 12px / 16px var(--font-ui);
}

.lq-kit__on .lq-icon,
.lq-kit__foot .lq-icon {
  width: 14px;
  height: 14px;
}

.lq-kit__foot {
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 767px) {
  .lq-kitshow {
    grid-template-columns: minmax(0, 1fr);
  }

  .lq-phone {
    max-width: 220px;
  }

  .lq-phone__caption {
    font-size: 14px;
    line-height: 22px;
  }
}

/* Rights: two levels and the two ways from one to the other, as three columns. */
.lq-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lq-levels > * {
  padding-inline: 40px;
}

.lq-levels > :first-child {
  padding-inline-start: 0;
}

.lq-levels > :last-child {
  padding-inline-end: 0;
}

.lq-levels > * + * {
  border-inline-start: 1px solid var(--color-border-default);
}

.lq-level {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lq-level__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lq-level__text {
  color: var(--color-text-secondary);
  font: 400 14px / 24px var(--font-ui);
}

.lq-level__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block-start: 8px;
  font: 400 16px / 28px var(--font-ui);
}

.lq-level__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.lq-level__list .lq-icon {
  width: 18px;
  height: 18px;
  margin-block-start: 5px;
  color: var(--color-status-success);
}

.lq-level__list .lq-level__no {
  color: var(--color-text-secondary);
}

.lq-level__no .lq-icon {
  color: var(--color-text-muted);
}

.lq-bridges {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lq-bridges__head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font: 500 14px / 20px var(--font-ui);
}

.lq-bridges__head .lq-icon {
  width: 16px;
  height: 16px;
}

.lq-bridge {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.lq-bridge + .lq-bridge {
  padding-block-start: 24px;
  border-block-start: 1px solid var(--color-border-default);
}

.lq-bridge__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}

.lq-bridge__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lq-bridge__title {
  font: 700 16px / 24px var(--font-heading);
}

.lq-bridge__text {
  color: var(--color-text-secondary);
  font: 400 14px / 24px var(--font-ui);
}

.lq-bridge__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
}

.lq-bridge__foot {
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
}

.lq-policy-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-block-start: 56px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  font: 400 14px / 24px var(--font-ui);
}

.lq-policy-note .lq-icon {
  width: 16px;
  height: 16px;
}

.lq-policy-note a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-text-primary);
  font-weight: 500;
  text-underline-offset: 4px;
}

@media (max-width: 1023px) {
  .lq-levels {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .lq-levels > *,
  .lq-levels > :first-child,
  .lq-levels > :last-child {
    padding-inline: 0;
  }

  .lq-levels > * + * {
    padding-block-start: 32px;
    border-inline-start: 0;
    border-block-start: 1px solid var(--color-border-default);
  }
}

/* Arabic as it is spoken: what was typed, the lines it found, the spellings it folds. */
.lq-dialects {
  display: grid;
  grid-template-columns: minmax(0, 400fr) minmax(0, 816fr);
  align-items: start;
  gap: 40px 64px;
}

.lq-dialects__matches {
  min-width: 0;
}

.lq-dialects__query {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lq-dialects__label {
  color: var(--color-text-secondary);
  font: 500 14px / 20px var(--font-ui);
}

.lq-dialects__box {
  width: 100%;
}

.lq-dialects__box span {
  flex: 1;
  color: var(--color-text-primary);
  font: 400 16px / 24px var(--font-ui);
}

.lq-dialects__why {
  color: var(--color-text-secondary);
  font: 400 14px / 24px var(--font-ui);
}

.lq-fold {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block-start: 8px;
}

.lq-fold__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.lq-fold__list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
}

.lq-fold__word {
  padding: 4px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font: 500 14px / 20px var(--font-ui);
}

.lq-dialects__count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--color-border-default);
  font: 500 14px / 20px var(--font-ui);
}

.lq-dialects__count span {
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
}

.lq-dmatch {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-block: 24px;
  border-block-end: 1px solid var(--color-border-default);
}

.lq-dmatch > .lq-thumb {
  flex: none;
  width: 160px;
}

.lq-dmatch:nth-child(2) > .lq-thumb {
  background: linear-gradient(200deg, var(--ink-500) 10%, var(--ink-950) 90%);
}

.lq-dmatch:nth-child(3) > .lq-thumb {
  background: linear-gradient(120deg, var(--amber-700) 0%, var(--ink-900) 80%);
}

.lq-dmatch__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.lq-dmatch__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

.lq-dmatch__dialect {
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: var(--color-bg-muted);
  font-weight: 500;
}

.lq-dialect-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-block-start: 48px;
  padding-block-start: 32px;
  border-block-start: 1px solid var(--color-border-default);
  font: 500 14px / 20px var(--font-ui);
}

.lq-dialect-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lq-dialect-list li {
  padding: 6px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
}

@media (max-width: 1023px) {
  .lq-dialects {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .lq-dmatch {
    gap: 12px;
  }

  .lq-dmatch > .lq-thumb {
    width: 96px;
  }

  .lq-dmatch__quote {
    font-size: 18px;
    line-height: 32px;
  }
}

/* Monthly or yearly: two radio buttons dressed as one segmented control. */
.lq-billing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-block-end: 32px;
}

.lq-billing__switch {
  display: inline-flex;
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
}

.lq-billing__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: 20px;
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font: 500 14px / 20px var(--font-ui);
  cursor: pointer;
}

.lq-billing__option input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.lq-billing__option:has(input:checked) {
  background: var(--color-action-primary);
  color: var(--color-action-on-primary);
}

.lq-billing__option:has(input:focus-visible) {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.lq-billing__note {
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--color-status-success-bg);
  color: var(--color-status-success);
  font: 500 12px / 20px var(--font-ui);
}

/* The prices of the interval not chosen step aside; yearly shows first, and without :has(). */
.lq-price[data-billing="month"],
.lq-pricing:has(input[name="billing"][value="month"]:checked) .lq-price[data-billing="year"] {
  display: none;
}

.lq-pricing:has(input[name="billing"][value="month"]:checked) .lq-price[data-billing="month"] {
  display: block;
}

.lq-plans {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}

.lq-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 20px 24px;
}

.lq-plan + .lq-plan {
  border-inline-start: 1px solid var(--color-border-default);
}

.lq-plan--featured {
  z-index: 1;
  margin-block: -1px;
  border: 2px solid var(--color-action-primary);
  background: var(--color-bg-subtle);
}

.lq-plan + .lq-plan--featured,
.lq-plan--featured + .lq-plan {
  border-inline-start-width: 0;
}

.lq-plan__band {
  position: absolute;
  inset-inline: -2px;
  inset-block-start: -30px;
  padding-block: 4px;
  border-start-start-radius: var(--radius-sm);
  border-start-end-radius: var(--radius-sm);
  background: var(--color-action-primary);
  color: var(--color-action-on-primary);
  font: 500 12px / 22px var(--font-ui);
  text-align: center;
}

.lq-plan__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 7.5rem;
}

.lq-plan__name {
  font: 800 22px / 34px var(--font-heading);
}

.lq-plan__tagline {
  color: var(--color-text-secondary);
  font: 400 14px / 22px var(--font-ui);
}

.lq-price {
  min-height: 5.5rem;
}

.lq-price__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.lq-price__amount {
  font: 800 36px / 48px var(--font-heading);
  font-variant-numeric: tabular-nums;
}

.lq-price__was {
  color: var(--color-text-muted);
  font: 500 16px / 24px var(--font-ui);
}

.lq-price__per {
  color: var(--color-text-secondary);
  font: 400 14px / 22px var(--font-ui);
}

.lq-price__note {
  color: var(--color-text-muted);
  font: 400 12px / 20px var(--font-ui);
}

.lq-plan__action .lq-btn {
  width: 100%;
}

.lq-plan__includes {
  color: var(--color-text-secondary);
  font: 500 12px / 20px var(--font-ui);
}

.lq-assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
  margin-block-start: 24px;
  color: var(--color-text-secondary);
  font: 400 14px / 24px var(--font-ui);
}

.lq-assurances li,
.lq-band__points li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lq-assurances .lq-icon,
.lq-band__points .lq-icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 1279px) {
  .lq-plans {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 16px;
    border: 0;
    background: none;
  }

  .lq-plan,
  .lq-plan + .lq-plan {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
  }

  .lq-plan--featured,
  .lq-plan + .lq-plan--featured {
    margin: 0;
    border: 2px solid var(--color-action-primary);
    background: var(--color-bg-subtle);
  }

  /* In a grid of cards the band sits inside the card's top, so the row stays level. */
  .lq-plan__band {
    position: static;
    margin: -32px -20px 0;
    border-start-start-radius: calc(var(--radius-lg) - 2px);
    border-start-end-radius: calc(var(--radius-lg) - 2px);
  }

  .lq-plan__head,
  .lq-price {
    min-height: 0;
  }
}

/* After the plans, each section stands apart. */
.lq-pricing ~ .lq-section {
  margin-block-start: 96px;
}

/* The comparison: a plan per column, the featured one tinted, groups as titled row runs. */
.lq-compare-wrap {
  margin-block-start: 24px;
  border: 0;
  border-radius: 0;
  background: none;
}

.lq-compare {
  width: 100%;
  min-width: 64rem;
  border-collapse: collapse;
  table-layout: fixed;
  font: 400 14px / 22px var(--font-ui);
}

.lq-compare th,
.lq-compare td {
  padding: 14px 16px;
  border-block-end: 1px solid var(--color-border-default);
  text-align: center;
  vertical-align: middle;
}

.lq-compare th[scope="row"],
.lq-compare__corner {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  width: 18rem;
  background: var(--color-bg-canvas);
  font-weight: 400;
  text-align: start;
}

.lq-compare__corner {
  color: var(--color-text-muted);
  font-size: 12px;
  vertical-align: bottom;
}

.lq-compare thead > tr > * {
  vertical-align: bottom;
  border-block-end-color: var(--color-border-strong);
}

.lq-compare__plan {
  display: table-cell;
}

.lq-compare__name {
  display: block;
  font: 800 18px / 28px var(--font-heading);
}

.lq-compare__price {
  display: block;
  margin-block-end: 12px;
  color: var(--color-text-secondary);
  font: 400 12px / 20px var(--font-ui);
}

.lq-compare__plan .lq-btn {
  width: 100%;
}

.lq-compare__featured {
  background: var(--color-bg-subtle);
}

thead .lq-compare__featured {
  border-block-start: 2px solid var(--color-action-primary);
}

.lq-compare__group th {
  padding-block: 32px 12px;
  border-block-end-color: var(--color-border-strong);
  font: 700 18px / 28px var(--font-heading);
  text-align: start;
}

.lq-compare__caption {
  display: block;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 20px;
}

@media (max-width: 767px) {
  .lq-compare th[scope="row"],
  .lq-compare__corner {
    width: 10rem;
  }
}

.lq-compare td .lq-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

/* Questions: native details, a chevron that turns when open. */
.lq-faq {
  border-block-start: 1px solid var(--color-border-default);
}

.lq-faq__item {
  border-block-end: 1px solid var(--color-border-default);
}

.lq-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding-block: 16px;
  font: 700 16px / 26px var(--font-heading);
  list-style: none;
  cursor: pointer;
}

.lq-faq__question::-webkit-details-marker {
  display: none;
}

.lq-faq .lq-faq__question .lq-icon {
  flex: none;
  transition: transform 150ms ease;
}

.lq-faq__item[open] .lq-faq__question .lq-icon {
  transform: rotate(180deg);
}

.lq-faq__answer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-block-end: 20px;
  color: var(--color-text-secondary);
  font: 400 14px / 26px var(--font-ui);
}

.lq-faq__rights {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lq-faq__rights li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lq-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 32px 64px;
  align-items: start;
}

.lq-split__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

@media (max-width: 767px) {
  .lq-split {
    grid-template-columns: 1fr;
  }
}

/* The closing band: dark, centred, one ask. */
.lq-band {
  margin-block-start: 96px;
  padding-block: 80px;
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  text-align: center;
}

.lq-public__main:has(> .lq-band:last-child) + .lq-footer {
  margin-block-start: 0;
}

.lq-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.lq-band__text {
  max-width: 40rem;
  opacity: 0.8;
}

.lq-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-block-start: 8px;
}

.lq-band__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  font: 400 14px / 24px var(--font-ui);
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .lq-faq .lq-faq__question .lq-icon {
    transition: none;
  }
}

/* The home's plans in short: four side by side, two by two on tablets. */
.lq-plans--row {
  margin-block-start: 40px;
}

.lq-plans--row + .lq-note {
  margin-block-start: 24px;
}

.lq-plans--row + .lq-note + .lq-note {
  margin-block-start: 8px;
}

/* Short taglines and one-line notes: no reserved height to line the rows up. */
.lq-plans--row .lq-plan__head,
.lq-plans--row .lq-price {
  min-height: 0;
}

@media (min-width: 1280px) {
  .lq-plans--row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .lq-plans--row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-start: 0;
  }
}

@media (max-width: 767px) {
  .lq-plans--row {
    margin-block-start: 0;
  }
}

.lq-footer__copy {
  display: block;
  margin-block-start: 8px;
  color: var(--color-text-muted);
  font-size: 12px;
}

/* The home's last band follows its plans directly. */
.lq-block + .lq-band {
  margin-block-start: 0;
}

/*
 * Plan 12 stage 8, package G: the public pages against their frames (19:2, 50:32, 27:713).
 */

/* The site's bar (Figma 50:51): a white surface; links 14/20 in the secondary ink, the page's
   own marked by a 2px rule under it rather than a tinted pill. After layout.fa183fee.css, so it wins. */
.lq-publicnav:not(.theme-dark) {
  background: var(--color-bg-surface);
  backdrop-filter: none;
}

.lq-publicnav__links {
  gap: 32px;
}

.lq-publicnav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 0 6px;
  border-block-end: 2px solid transparent;
  border-radius: 0;
  font: 500 14px / 20px var(--font-ui);
}

.lq-publicnav__links a[aria-current="page"] {
  border-block-end-color: var(--color-action-primary);
  background: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .lq-publicnav__links {
    gap: 20px;
  }

  .lq-publicnav__links a {
    padding-inline: 0;
  }
}

/* The hero's example: the player first in the reading direction (at the start), the moment
   after it, as the frame draws them; the words still come first to a screen reader. */
.lq-showcase__player {
  order: -1;
}

@media (min-width: 1024px) {
  .lq-showcase__card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  }
}

/* The home on a phone (Figma 52:64, 95:671): the hero's words at the start and one full-width
   ask, no example searches; the example card is the picture, the meta, the words and where
   they are, without the title, the rule and the pictured buttons (D12.192). */
@media (max-width: 767px) {
  .lq-hero--dark .lq-hero__inner {
    align-items: stretch;
    text-align: start;
  }

  .lq-hero--dark .lq-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .lq-hero--dark .lq-hero__actions .lq-btn--secondary,
  .lq-hero__examples {
    display: none;
  }

  .lq-showcase__title,
  .lq-showcase__card .lq-divider,
  .lq-showcase__actions {
    display: none;
  }

  .lq-showcase__head {
    justify-content: flex-start;
  }

  /* The steps as the phone's list (95:671): the number beside the title, the words and the
     picture under it, a hairline between steps. */
  .lq-process {
    gap: 0;
  }

  .lq-process__step {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 4px 12px;
    align-items: center;
    padding-block: 20px;
    border-block-end: 1px solid var(--color-border-default);
  }

  .lq-process__step:last-child {
    border-block-end: 0;
  }

  .lq-process__num {
    width: 32px;
    height: 32px;
    margin: 0;
    font-size: 14px;
  }

  .lq-process__title,
  .lq-process__text,
  .lq-process__visual {
    grid-column: 2;
  }

  .lq-process__title {
    font: 700 18px / 28px var(--font-heading);
  }

  .lq-process__text {
    font: 400 14px / 24px var(--font-ui);
  }
}

/* The dark closing band that the footer joins (Figma 50:812): the hero's own dark. */
.lq-band--dark {
  padding-block: 120px;
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
}

@media (max-width: 767px) {
  .lq-band--dark {
    padding-block: 64px;
  }
}

.lq-band--dark .lq-band__text,
.lq-band--dark .lq-band__points {
  color: var(--color-text-secondary);
  opacity: 1;
}

/* The selling pages' footer (Figma 50:831): the logo and a line at the start, the columns of
   links at the far end, the copyright under a hairline. */
.lq-sitefoot {
  padding-block: 0;
  border-block-start: 0;
}

.lq-sitefoot.theme-dark {
  background: var(--color-bg-canvas);
}

.lq-public__main:has(> .lq-band--dark:last-child) + .lq-sitefoot {
  margin-block-start: 0;
}

.lq-sitefoot__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-block: 64px 40px;
  border-block-start: 1px solid var(--color-border-default);
}

.lq-sitefoot__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px 48px;
}

.lq-sitefoot__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
  color: var(--color-text-secondary);
  font: 400 14px / 24px var(--font-ui);
}

.lq-sitefoot__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 72px;
}

.lq-sitefoot__col,
.lq-sitefoot__col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lq-sitefoot__col ul {
  padding: 0;
  list-style: none;
}

.lq-sitefoot__title {
  color: var(--color-text-primary);
  font: 500 14px / 20px var(--font-ui);
}

.lq-sitefoot__col a {
  color: var(--color-text-secondary);
  font: 400 14px / 24px var(--font-ui);
}

.lq-sitefoot__copy {
  padding-block-start: 24px;
  border-block-start: 1px solid var(--color-border-default);
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
}

@media (max-width: 767px) {
  .lq-sitefoot__inner {
    gap: 32px;
    padding-block: 40px 32px;
  }

  .lq-sitefoot__col ul {
    gap: 0;
  }

  .lq-sitefoot__col a {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
  }
}

/*
 * The home's short plans (Figma 19:2 «Local/Home/PlanColumn»): hairline columns in one surface;
 * the recommended one is marked by a 2px rule along its top and a tag beside its name, and each
 * column closes with its action.
 */
.lq-plan--compact {
  gap: 24px;
  padding: 32px 24px;
}

.lq-plans .lq-plan--compact.lq-plan--featured {
  margin-block: -1px 0;
  border: 0;
  border-block-start: 2px solid var(--color-action-primary);
  background: none;
}

.lq-plans .lq-plan + .lq-plan--compact.lq-plan--featured,
.lq-plans .lq-plan--compact.lq-plan--featured + .lq-plan {
  border-inline-start: 1px solid var(--color-border-default);
}

.lq-plan--compact .lq-plan__head {
  gap: 2px;
}

.lq-plan__title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.lq-plan--compact .lq-plan__name {
  font: 600 18px / 28px var(--font-ui);
}

.lq-plan--compact .lq-plan__tagline {
  font: 400 14px / 24px var(--font-ui);
}

.lq-plan__badge {
  flex: none;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font: 500 12px / 16px var(--font-ui);
}

.lq-plan--compact .lq-price__amount {
  font: 700 36px / 52px var(--font-heading);
}

.lq-plan--compact .lq-price__note {
  color: var(--color-text-secondary);
  font: 400 12px / 24px var(--font-ui);
}

.lq-plan--compact .lq-checklist {
  gap: 12px;
  color: var(--color-text-primary);
  font: 400 16px / 28px var(--font-ui);
}

.lq-plan--compact .lq-plan__action {
  margin-block-start: auto;
}

@media (max-width: 1279px) {
  .lq-plans .lq-plan--compact.lq-plan--featured,
  .lq-plans .lq-plan + .lq-plan--compact.lq-plan--featured {
    margin: 0;
    border: 1px solid var(--color-border-default);
    border-block-start: 2px solid var(--color-action-primary);
  }
}

/*
 * A topic's page (Figma 27:713): the head and a search inside the topic at eight columns, the
 * subtopics, then the latest videos three to a row beside a sign-up card.
 */
.lq-topic {
  gap: 24px;
}

.lq-topic .lq-page-head {
  margin-block-end: 0;
}

.lq-topic__lede {
  max-width: 44rem;
  font-size: 18px;
  line-height: 32px;
}

.lq-topic__search {
  width: min(100%, 720px);
}

.lq-topic__cols {
  margin-block-start: 40px;
  align-items: start;
}

.lq-topic__sechead {
  margin-block-end: 0;
}

.lq-topic__sechead .lq-sechead__text {
  gap: 4px;
}

.lq-topic__sechead .lq-more {
  font-size: 14px;
  line-height: 20px;
}

.lq-cards.lq-topic__cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lq-topic__join {
  padding: 24px;
  border: 0;
  background: var(--color-bg-subtle);
}

@media (max-width: 1023px) {
  .lq-topic__cols > .lq-span-8,
  .lq-topic__cols > .lq-span-4 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .lq-cards.lq-topic__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}