/* Landing page (pages#home), built from the brandbook: Space Grotesk titles,
 * Inter Tight text, brand blue for actions, and coral, lime and lilac only as
 * shapes behind dark text. White page with one blue stage in the hero and one
 * blue band at the end. Type sizes are in px so the app's larger desktop root
 * size doesn't scale the headlines. */
@layer components {
  /* The public layout's header and footer are replaced by the landing's own. */
  body.landing {
    background: var(--color-canvas);
    color: var(--color-ink);
    font-size: 17px;
    line-height: 1.55;

    .header,
    #footer {
      display: none;
    }

    /* 100dvw (the layout's default) includes a classic scrollbar's width. */
    #main {
      inline-size: auto;
      max-inline-size: none;
      overflow: visible;
      padding: 0;
      text-align: start;
    }

    @media (max-width: 640px) {
      font-size: 16px;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    html:has(body.landing) {
      scroll-behavior: smooth;
    }
  }

  .landing-page {
    --lp-blue: var(--color-link);
    --lp-blue-hover: color-mix(in oklab, var(--color-link) 85%, black);
    --lp-ink-2: var(--color-ink-darker);
    --lp-ink-3: var(--color-ink-dark);
    --lp-line: var(--color-ink-lighter);
    --lp-tint: color-mix(in oklab, var(--color-link) 4%, var(--color-canvas));
    --lp-gutter: clamp(16px, 4vw, 40px);

    :where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote) {
      margin: 0;
    }

    :where(ul, ol) {
      list-style: none;
      padding: 0;
    }

    :where([id]) {
      scroll-margin-block-start: 88px;
    }
  }

  :where(.landing-page a) {
    color: inherit;
  }

  .lp-shell {
    margin-inline: auto;
    max-inline-size: 1180px;
    padding-inline: var(--lp-gutter);
  }

  .lp-skip {
    background: var(--color-ink);
    border-radius: 0.4em;
    color: var(--color-canvas);
    inset-block-start: -4rem;
    inset-inline-start: 1rem;
    padding: 0.5em 1em;
    position: absolute;
    text-decoration: none;
    z-index: 100;

    &:focus {
      inset-block-start: 1rem;
    }
  }

  .lp-eyebrow {
    color: var(--lp-blue);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .lp-lede {
    color: var(--lp-ink-2);
    font-size: clamp(17px, 1.6vw, 20px);
    max-inline-size: 38rem;
    text-wrap: pretty;
  }

  .lp-h3 {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  /* ---------- Buttons ---------- */
  .lp-btn {
    align-items: center;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 99rem;
    color: var(--color-ink);
    cursor: pointer;
    display: inline-flex;
    font: 600 16px/1.2 var(--font-sans);
    gap: 0.5em;
    justify-content: center;
    min-block-size: 48px;
    padding: 0.75em 1.4em;
    text-decoration: none;
    transition: background-color 120ms ease, translate 120ms ease;
    white-space: nowrap;

    &:hover {
      translate: 0 -1px;
    }

    .icon {
      --icon-size: 1.05em;
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;

      &:hover {
        translate: none;
      }
    }
  }

  .lp-btn--sm {
    font-size: 15px;
    min-block-size: 42px;
    padding: 0.55em 1.1em;
  }

  .lp-btn--lg {
    font-size: 17px;
    min-block-size: 52px;
  }

  .lp-btn--primary {
    background: var(--lp-blue);
    color: var(--color-canvas);

    &:hover {
      background: var(--lp-blue-hover);
    }
  }

  .lp-btn--lime {
    background: var(--color-brand-lime);
    color: var(--color-ink);
  }

  .lp-btn--inverse {
    border-color: color-mix(in srgb, var(--color-canvas) 55%, transparent);
    color: var(--color-canvas);
  }

  .lp-btn--text {
    padding-inline: 0.6em;
    text-decoration: underline;
    text-decoration-color: var(--color-brand-lime);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
  }

  /* ---------- Topbar ---------- */
  .lp-topbar {
    backdrop-filter: blur(8px);
    background: color-mix(in srgb, var(--color-canvas) 96%, transparent);
    border-block-end: 1px solid var(--lp-line);
    inset-block-start: 0;
    position: sticky;
    z-index: 50;
  }

  .lp-topbar__inner {
    align-items: center;
    display: flex;
    gap: 28px;
    padding-block: 12px;
  }

  .lp-topbar__brand {
    display: inline-flex;
    flex-shrink: 0;

    img {
      block-size: 46px;
      inline-size: auto;
    }
  }

  .lp-topbar__nav {
    display: flex;
    font-size: 15px;
    font-weight: 500;
    gap: 26px;
    margin-inline-start: auto;

    a {
      color: var(--lp-ink-2);
      text-decoration: none;

      &:hover {
        color: var(--color-ink);
      }
    }
  }

  .lp-topbar__cta {
    align-items: center;
    display: flex;
    gap: 6px;
  }

  .lp-topbar__menu {
    display: none;
    position: relative;

    summary {
      block-size: 44px;
      border-radius: 10px;
      cursor: pointer;
      display: grid;
      inline-size: 44px;
      list-style: none;
      place-items: center;

      &::-webkit-details-marker {
        display: none;
      }
    }
  }

  .lp-topbar__menu-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;

    span {
      background: var(--color-ink);
      block-size: 2px;
      border-radius: 1px;
      inline-size: 20px;
    }
  }

  .lp-topbar__menu-panel {
    background: var(--color-canvas);
    border: 1px solid var(--lp-line);
    border-radius: 12px;
    box-shadow: 0 18px 40px -18px oklch(var(--lch-ink-darkest) / 35%);
    display: flex;
    flex-direction: column;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
    max-inline-size: calc(100vw - 32px);
    min-inline-size: 230px;
    padding: 8px;
    position: absolute;
    z-index: 60;

    a {
      align-items: center;
      border-radius: 8px;
      display: flex;
      font-weight: 600;
      min-block-size: 44px;
      padding-inline: 12px;
      text-decoration: none;

      &:hover {
        background: var(--lp-tint);
      }
    }
  }

  @media (max-width: 860px) {
    .lp-topbar__inner {
      gap: 10px;
    }

    .lp-topbar__brand img {
      block-size: 40px;
    }

    .lp-topbar__nav,
    .lp-topbar__login {
      display: none;
    }

    .lp-topbar__cta {
      margin-inline-start: auto;
    }

    .lp-topbar__menu {
      display: block;
    }
  }

  /* ---------- Sections ---------- */
  .lp-section {
    padding-block: clamp(64px, 9vw, 112px);
    position: relative;
  }

  .lp-section--tint {
    background: var(--lp-tint);
  }

  .lp-section__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-block-end: clamp(36px, 5vw, 56px);
    max-inline-size: 46rem;
  }

  .lp-section__head--flush {
    margin-block-end: 0;
  }

  .lp-section__title {
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-wrap: balance;
  }

  /* ---------- Product cutouts: plain and readable, like the app ---------- */
  .lp-app {
    background: var(--color-canvas);
    border: 1px solid var(--lp-line);
    border-radius: 12px;
    box-shadow: 0 24px 48px -30px oklch(var(--lch-ink-darkest) / 35%);
    font-size: 15px;
    min-inline-size: 0;
    overflow: hidden;
  }

  .lp-app__bar {
    align-items: center;
    border-block-end: 1px solid var(--lp-line);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 12px 16px;
  }

  .lp-app__title {
    font-weight: 700;
  }

  .lp-app__meta {
    color: var(--lp-ink-3);
    font-size: 13px;
  }

  .lp-app__row {
    align-items: center;
    border-block-start: 1px solid var(--lp-line);
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 11px 16px;

    &:first-of-type {
      border-block-start: 0;
    }
  }

  .lp-app__name {
    font-weight: 600;
    min-inline-size: 0;

    small {
      color: var(--lp-ink-3);
      display: block;
      font-size: 13px;
      font-weight: 400;
    }
  }

  .lp-app__num {
    color: var(--lp-ink-2);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .lp-app__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
  }

  .lp-pill {
    background: var(--lp-tint);
    border-radius: 99rem;
    color: var(--lp-ink-2);
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    white-space: nowrap;
  }

  .lp-pill--ok {
    background: color-mix(in oklab, var(--color-positive) 14%, var(--color-canvas));
    color: color-mix(in oklab, var(--color-positive) 70%, black);
  }

  .lp-pill--blue {
    background: color-mix(in oklab, var(--lp-blue) 12%, var(--color-canvas));
    color: var(--lp-blue);
  }

  .lp-pill--lilac {
    background: color-mix(in oklab, var(--color-brand-lilac) 40%, var(--color-canvas));
    color: oklch(var(--lch-violet-darker));
  }

  .lp-pill--lime {
    background: var(--color-brand-lime);
    color: var(--color-ink);
  }

  .lp-meter {
    background: var(--lp-tint);
    block-size: 8px;
    border-radius: 4px;
    display: block;
    overflow: hidden;

    span {
      background: var(--lp-blue);
      block-size: 100%;
      border-radius: inherit;
      display: block;
    }
  }

  .lp-sizes {
    border-collapse: collapse;
    font-size: 14px;
    inline-size: 100%;

    th,
    td {
      border-block-start: 1px solid var(--lp-line);
      font-weight: 400;
      padding: 10px 12px;
      text-align: end;
    }

    th[scope="row"],
    th:first-child {
      padding-inline-start: 16px;
      text-align: start;
    }

    td:last-child,
    th:last-child {
      padding-inline-end: 16px;
    }

    thead th {
      border-block-start: 0;
      color: var(--lp-ink-3);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    td {
      font-variant-numeric: tabular-nums;
    }
  }

  /* ---------- Hero ---------- */
  .lp-hero {
    padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 96px);

    &:focus {
      outline: none;
    }
  }

  .lp-hero__grid {
    align-items: center;
    display: grid;
    gap: clamp(32px, 5vw, 72px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  }

  .lp-hero__text {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-inline-size: 0;
  }

  .lp-hero__title {
    font-family: var(--font-display);
    font-size: clamp(42px, 6vw, 74px);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.98;
    text-wrap: balance;

    em {
      color: var(--lp-blue);
      font-style: normal;
    }
  }

  .lp-hero__ctas {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
  }

  .lp-hero__assurance {
    color: var(--lp-ink-2);
    display: flex;
    flex-wrap: wrap;
    font-size: 15px;
    gap: 6px 18px;

    li {
      align-items: center;
      display: inline-flex;
      gap: 7px;

      &::before {
        background: var(--color-brand-lime);
        border-radius: 50%;
        box-shadow: 0 0 0 2px var(--color-ink) inset;
        content: "";
        block-size: 9px;
        inline-size: 9px;
      }
    }
  }

  .lp-stage {
    background: var(--lp-blue);
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 32px);
    justify-content: space-between;
    min-inline-size: 0;
    overflow: hidden;
    padding: clamp(22px, 3.5vw, 36px) clamp(18px, 3vw, 32px) 0;
  }

  .lp-stage__card {
    align-self: center;
    inline-size: min(100%, 390px);

    .lp-app {
      box-shadow: 0 28px 48px -26px oklch(var(--lch-ink-darkest) / 55%);
    }
  }

  .lp-stage__parade {
    align-items: flex-end;
    display: flex;
    gap: 3%;
    justify-content: space-between;
    padding-inline: 2%;

    img {
      block-size: auto;
      flex: none;
    }
  }

  .lp-stage__passista { inline-size: 25%; }
  .lp-stage__baiana { inline-size: 24%; }
  .lp-stage__porta-bandeira { inline-size: 24%; margin-block-end: 2%; }
  .lp-stage__ritmista { inline-size: 15%; margin-block-end: 1%; }

  @media (max-width: 900px) {
    .lp-hero__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 560px) {
    .lp-stage {
      border-radius: 22px;
    }

    .lp-stage__card .lp-app {
      font-size: 14px;
    }
  }

  /* ---------- Pain ---------- */
  .lp-pain__wave {
    block-size: auto;
    inline-size: clamp(40px, 5vw, 64px);
    inset-block-start: -28px;
    inset-inline-start: max(8px, calc(50% - 650px));
    position: absolute;
  }

  .lp-pain__grid {
    align-items: start;
    display: grid;
    gap: clamp(32px, 5vw, 72px);
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .lp-pain__intro {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .lp-pain__lines {
    display: flex;
    flex-direction: column;
    font-family: var(--font-display);
    font-size: clamp(27px, 3vw, 40px);
    font-weight: 700;
    gap: 6px;
    letter-spacing: -0.03em;
    line-height: 1.08;
    text-wrap: balance;

    span:last-child {
      color: var(--lp-blue);
    }
  }

  .lp-chat {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-inline-size: 0;
  }

  .lp-chat__labels,
  .lp-chat__row {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.1fr);
  }

  .lp-chat__labels {
    color: var(--lp-ink-3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    span:last-child {
      color: var(--lp-blue);
      grid-column: 3;
    }
  }

  .lp-chat__rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .lp-chat__bubble {
    background: var(--color-canvas);
    border: 1px solid var(--lp-line);
    border-radius: 16px 16px 16px 4px;
    color: var(--lp-ink-2);
    font-size: 16px;
    line-height: 1.35;
    padding: 10px 13px;
    rotate: -1.4deg;
  }

  .lp-chat__row:nth-child(2) .lp-chat__bubble {
    rotate: 1deg;
  }

  .lp-chat__row:nth-child(3) .lp-chat__bubble {
    rotate: -0.7deg;
  }

  .lp-chat__author {
    color: var(--lp-ink-3);
    display: block;
    font-size: 13px;
    font-weight: 600;
  }

  .lp-chat__arrow {
    color: var(--lp-blue);
    display: grid;
    place-items: center;

    .icon {
      --icon-size: 22px;
    }
  }

  .lp-chat__answer {
    background: var(--color-canvas);
    border: 1px solid var(--lp-line);
    border-radius: 12px;
    box-shadow: 0 16px 32px -24px oklch(var(--lch-ink-darkest) / 40%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-inline-size: 0;
    padding: 12px 14px;
  }

  .lp-chat__key {
    color: var(--lp-ink-3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .lp-chat__value {
    font-family: var(--font-display);
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .lp-chat__meta {
    color: var(--lp-ink-2);
    font-size: 15px;
  }

  @media (max-width: 900px) {
    .lp-pain__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 560px) {
    .lp-chat__labels,
    .lp-chat__arrow {
      display: none;
    }

    .lp-chat__row {
      gap: 6px;
      grid-template-columns: minmax(0, 1fr);
    }

    .lp-chat__bubble {
      margin-inline-end: 16%;
    }

    .lp-chat__answer {
      margin-inline-start: 12%;
    }
  }

  /* ---------- The whole school ---------- */
  .lp-areas {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 7vw, 88px);
  }

  .lp-area {
    align-items: center;
    display: grid;
    gap: clamp(28px, 5vw, 72px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    &:nth-child(even) .lp-area__text {
      order: 2;
    }
  }

  .lp-area__text {
    align-items: center;
    display: grid;
    gap: clamp(18px, 3vw, 32px);
    grid-template-columns: clamp(84px, 11vw, 140px) minmax(0, 1fr);

    p:last-child {
      color: var(--lp-ink-2);
      margin-block-start: 8px;
    }
  }

  .lp-area__art {
    block-size: auto;
    inline-size: 100%;
    max-block-size: 190px;
    object-fit: contain;
  }

  .lp-area__tag {
    color: var(--lp-ink-3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-block-end: 6px;
    text-transform: uppercase;
  }

  @media (max-width: 860px) {
    .lp-area {
      grid-template-columns: minmax(0, 1fr);

      &:nth-child(even) .lp-area__text {
        order: 0;
      }
    }

    .lp-area__text {
      grid-template-columns: 76px minmax(0, 1fr);
    }
  }

  .lp-roles {
    border-block-start: 1px solid var(--lp-line);
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-block-start: clamp(56px, 8vw, 96px);
    padding-block-start: clamp(40px, 6vw, 64px);
  }

  .lp-roles__title {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-wrap: balance;
  }

  .lp-roles__grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lp-role {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-inline-size: 0;

    > p {
      color: var(--lp-ink-2);
      font-size: 16px;
    }
  }

  @media (max-width: 900px) {
    .lp-roles__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ---------- The school's year ---------- */
  .lp-year {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: relative;

    &::before {
      background: var(--lp-line);
      block-size: 2px;
      content: "";
      inset-block-start: 34px;
      inset-inline: 0;
      position: absolute;
    }
  }

  .lp-phase {
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-inline-size: 0;
    padding: 0 18px 22px;
    position: relative;
  }

  .lp-phase--now {
    background: var(--color-canvas);
    box-shadow: 0 0 0 2px var(--lp-blue);
  }

  .lp-phase__mark {
    background: var(--lp-tint);
    block-size: 68px;
    display: grid;
    inline-size: 68px;
    place-items: center;
    position: relative;
    z-index: 1;

    img {
      block-size: 44px;
      inline-size: 52px;
      object-fit: contain;
    }

    .lp-phase--now & {
      background: var(--color-canvas);
    }
  }

  .lp-phase__when {
    align-items: center;
    color: var(--lp-ink-3);
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    letter-spacing: 0.1em;
    min-block-size: 24px;
    text-transform: uppercase;

    .lp-phase--now & {
      color: var(--color-ink);
    }
  }

  .lp-phase__details {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    gap: 10px;

    dt {
      color: var(--lp-ink-3);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    dd {
      color: var(--lp-ink-2);
    }
  }

  @media (max-width: 960px) {
    .lp-year {
      gap: 4px;
      grid-template-columns: minmax(0, 1fr);

      &::before {
        block-size: auto;
        inline-size: 2px;
        inset-block: 0;
        inset-inline: 34px auto;
      }
    }

    .lp-phase {
      column-gap: 16px;
      display: grid;
      grid-template-columns: 68px minmax(0, 1fr);
      padding: 12px 14px 12px 0;
    }

    .lp-phase__mark {
      align-self: start;
      grid-row: span 4;
    }
  }

  /* ---------- Features ---------- */
  .lp-features {
    display: grid;
    gap: 0 clamp(24px, 4vw, 48px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lp-feature {
    border-block-start: 2px solid var(--color-ink);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-block: 20px;

    p {
      color: var(--lp-ink-2);
      font-size: 16px;
    }
  }

  .lp-features__also {
    color: var(--lp-ink-2);
    font-size: 16px;
    margin-block-start: 28px;
  }

  @media (max-width: 900px) {
    .lp-features {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    .lp-features {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ---------- Testimonials (only real ones; hidden while there are none) ---------- */
  .lp-proof {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  }

  .lp-proof__item {
    background: var(--color-canvas);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(22px, 4vw, 32px);
  }

  .lp-proof__quote {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.4vw, 26px);
    letter-spacing: -0.02em;
    line-height: 1.25;
  }

  .lp-proof__who {
    color: var(--lp-ink-2);
    font-size: 15px;
  }

  /* ---------- Getting started ---------- */
  .lp-comecar__star {
    block-size: auto;
    inline-size: 44px;
    inset-block-start: 56px;
    inset-inline-end: max(16px, calc(50% - 560px));
    position: absolute;
  }

  .lp-steps {
    counter-reset: lp-step;
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lp-step {
    counter-increment: lp-step;
    display: flex;
    flex-direction: column;
    gap: 8px;

    &::before {
      background: var(--color-brand-lime);
      block-size: 48px;
      border-radius: 50%;
      color: var(--color-ink);
      content: counter(lp-step);
      display: grid;
      font: 700 22px/1 var(--font-display);
      inline-size: 48px;
      place-items: center;
    }

    p {
      color: var(--lp-ink-2);
      font-size: 16px;
    }
  }

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

  @media (max-width: 560px) {
    .lp-steps {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ---------- FAQ ---------- */
  .lp-faq {
    max-inline-size: 48rem;

    details {
      border-block-start: 1px solid var(--lp-line);

      &:last-of-type {
        border-block-end: 1px solid var(--lp-line);
      }
    }

    summary {
      align-items: center;
      cursor: pointer;
      display: flex;
      font: 700 19px/1.3 var(--font-display);
      gap: 16px;
      justify-content: space-between;
      letter-spacing: -0.01em;
      list-style: none;
      min-block-size: 60px;
      padding-block: 14px;

      &::-webkit-details-marker {
        display: none;
      }

      &::after {
        background: var(--color-canvas);
        block-size: 28px;
        border-radius: 50%;
        color: var(--color-ink);
        content: "+";
        display: grid;
        flex: none;
        font: 400 20px/1 var(--font-sans);
        inline-size: 28px;
        place-items: center;
        transition: rotate 150ms;
      }
    }

    details[open] summary::after {
      rotate: 45deg;
    }

    p {
      color: var(--lp-ink-2);
      max-inline-size: 42rem;
      padding-block-end: 20px;
    }

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

  /* ---------- Closing band ---------- */
  .lp-band {
    align-items: center;
    background: var(--lp-blue);
    border-radius: 28px;
    color: var(--color-canvas);
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) auto;
    overflow: hidden;
    padding: clamp(36px, 6vw, 72px);
    position: relative;

    > img {
      block-size: auto;
      pointer-events: none;
      position: absolute;
    }

    p {
      color: color-mix(in srgb, var(--color-canvas) 86%, transparent);
      margin-block-start: 12px;
    }
  }

  .lp-band__text,
  .lp-band__ctas {
    position: relative;
    z-index: 1;
  }

  .lp-band__title {
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.04;
    max-inline-size: 16ch;
  }

  .lp-band__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .lp-band__star { inline-size: 46px; inset-block-start: 14%; inset-inline-end: 30%; }
  .lp-band__arch { inline-size: 120px; inset-block-end: -6px; inset-inline-end: 4%; }
  .lp-band__flower { inline-size: 54px; inset-block-end: -16px; inset-inline-start: 46%; }

  @media (max-width: 900px) {
    .lp-band {
      grid-template-columns: minmax(0, 1fr);
    }

    .lp-band__star {
      inset-inline-end: 8%;
    }
  }

  /* ---------- Footer ---------- */
  .lp-footer {
    padding-block: 40px;
  }

  .lp-footer__inner {
    align-items: center;
    color: var(--lp-ink-2);
    display: flex;
    flex-wrap: wrap;
    font-size: 15px;
    gap: 16px 40px;
    justify-content: space-between;
  }

  .lp-footer__brand {
    display: inline-flex;
    flex-shrink: 0;

    img {
      block-size: 40px;
      inline-size: auto;
    }
  }

  .lp-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 22px;

    a {
      align-items: center;
      display: inline-flex;
      min-block-size: 44px;
      text-decoration: none;

      &:hover {
        color: var(--color-ink);
        text-decoration: underline;
      }
    }
  }
}