/* Landing Page Styles */
@layer components {
  /* Landing Page Container */
  .landing {
    /* Every headline below the hero is set at this size; the hero has its own, larger. */
    --landing-headline: clamp(1.75rem, 3.8vw, 2.6rem);
    --landing-body: clamp(1.0625rem, 1.9vw, 1.2rem);
    --landing-section: clamp(3rem, 6vw, 4.5rem);
    --landing-width: 1100px;
    --landing-radius: 24px;
    /* The alternate ground: a wash of the brand blue fading into the paper, instead of a grey. */
    --landing-wash: linear-gradient(180deg,
      color-mix(in srgb, var(--color-primary) 9%, var(--color-bg-white)) 0%,
      color-mix(in srgb, var(--color-primary) 2%, var(--color-bg-white)) 100%);
    --landing-card: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg-white));

    min-height: 100vh;
    background: var(--color-bg-white);
    overflow-x: hidden;
  }

  /* Every button on the landing chrome is a pill. */
  .landing .btn {
    border-radius: var(--radius-pill);
  }

  /* Container - Consistent max-width and padding */
  .landing_container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--main-padding);
  }

  /* ===== NAVBAR ===== */
  /* The nav paints the full-bleed background; _inner constrains content */
  /* The logo, the dropdowns beside it, and the two buttons pushed to the right. */
  .landing_navbar_inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem var(--main-padding);
    max-width: 1100px;
    margin: 0 auto;
  }

  .landing_nav_links {
    display: flex;
    gap: 0.25rem;
    align-items: center;
  }

  .landing_nav_actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-left: auto;
  }

  .landing_nav_link {
    padding: 0.5rem 1rem;
    font-size: var(--text-sm);
    color: var(--color-text-light);
    text-decoration: none;
    transition: color 100ms ease-out;
  }

  .landing_nav_link:hover {
    color: var(--color-text);
  }

  /* Who is logged in, beside the button to their own area. Phones have no room for it. */
  .landing_nav_greeting {
    display: none;
    padding: 0.5rem 0.5rem;
    font-size: var(--text-sm);
    color: var(--color-text-light);

    @media (min-width: 880px) {
      display: inline;
    }
  }

  /* Hamburger menu: on mobile the text links collapse into a dropdown
     (dropdown_controller + overflow-menu styles); login stays visible */
  .landing_nav_menu {
    position: relative;
    display: none;
  }

  /* The nav dropdowns: a nav link that opens a panel of rows, left-aligned under itself. */
  .landing_nav_dropdown {
    position: relative;
  }

  .landing_nav_panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 220px;
    padding: 0.5rem;
    background: color-mix(in srgb, var(--color-bg-white) 78%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    border-radius: 16px;
    box-shadow: 0 20px 48px -20px rgba(0, 0, 0, 0.3);
    z-index: var(--z-popup);
  }

  .landing_nav_menu .landing_nav_panel {
    left: auto;
    right: 0;
  }

  .landing_nav_item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: 10px;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;

    svg {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      color: var(--color-primary);
    }

    &:active {
      background: var(--landing-card);
    }

    @media (hover: hover) {
      &:hover {
        background: var(--landing-card);
      }
    }
  }

  .landing_nav_dropdown_trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    font-family: inherit;
    font-size: var(--text-sm);
    line-height: inherit;
    cursor: pointer;

    svg {
      width: 14px;
      height: 14px;
    }
  }

  .landing_nav_menu_trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: none;
    border: none;
    color: var(--color-text-light);
    cursor: pointer;

    svg {
      width: 22px;
      height: 22px;
    }
  }

  @media (max-width: 767px) {
    .landing_nav_links,
    .landing_nav_actions .btn.outline {
      display: none;
    }

    .landing_nav_menu {
      display: block;
    }
  }

  /* On the landing page (navbar followed by the hero) the navbar sits on the
     hero: painted with the shared top colour of every slide gradient so navbar +
     hero read as one surface. */
  .landing_navbar:has(+ main > .landing_hero:first-child) {
    background: var(--color-hero);

    /* On the hero's own surface neither theme lockup clears; the single-colour paper one does */
    .brand_logo--azulejo,
    .brand_logo--ondark {
      display: none;
    }

    .brand_logo--paper {
      display: block;
    }

    .landing_nav_link,
    .landing_nav_greeting {
      color: rgba(255, 255, 255, 0.85);
    }

    .landing_nav_link:hover {
      color: white;
    }

    .landing_nav_menu_trigger {
      color: white;
    }

    /* White buttons on the hero. The label is the hero colour, not the brand: the hero is
       theme-independent, and in dark the brand lightens to a blue white can't carry. */
    .btn.primary {
      background: white;
      border-color: white;
      color: var(--color-hero);
    }

    .btn.primary:hover {
      background: rgba(255, 255, 255, 0.9);
      border-color: transparent;
      color: var(--color-hero);
    }

    .btn.outline.primary {
      background: transparent;
      border-color: rgba(255, 255, 255, 0.6);
      color: white;
    }

    .btn.outline.primary:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: white;
    }
  }

  /* ===== HERO (screen 1) ===== */
  /* The sentence, the CTA, the price line, and the link's own page in a phone standing on a
     paper card that the hero's edge crops. Theme-independent: the hero, its white type and the
     card stay the same in both themes, so the blue of the app's header reads against paper,
     not against more blue. */
  .landing_hero {
    background: linear-gradient(180deg, var(--color-hero) 0%, var(--color-hero-floor) 100%);
    color: white;
    overflow: hidden;
  }

  .landing_hero_inner {
    max-width: var(--landing-width);
    margin: 0 auto;
    padding: clamp(2.5rem, 7vw, 4.5rem) var(--main-padding) 0;
    display: grid;
    gap: 2.5rem;
    align-items: end;
  }

  .landing_hero_copy {
    padding-bottom: clamp(1.5rem, 5vw, 3rem);
  }

  .landing_hero_title {
    margin: 0 0 1.25rem;
    max-width: 20ch;
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: white;
    text-wrap: balance;
  }

  .landing_hero_lead {
    margin: 0 0 1.75rem;
    max-width: 32rem;
    font-size: clamp(1.05rem, 2.2vw, 1.2rem);
    line-height: var(--line-height-lg);
    color: rgba(255, 255, 255, 0.86);
    text-wrap: pretty;
  }

  .landing_hero_cta_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: min(100%, 360px);
    padding: 0.9rem 1.5rem;
    border-radius: var(--radius-pill);
    background: white;
    color: var(--color-hero);
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition: transform 100ms ease-out, box-shadow 100ms ease-out;

    &:active {
      transform: scale(0.98);
    }

    @media (hover: hover) {
      &:hover {
        box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
      }
    }
  }

  .landing_hero_fact {
    margin: 1rem 0 0;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.78);
  }

  /* The link's page, as it is, running off the hero's bottom edge. */
  .landing_hero_stage {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-height: 360px;
    overflow: hidden;

    .landing_shot {
      max-width: 300px;
      border-radius: 28px 28px 0 0;
      box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.5);
    }
  }

  @media (min-width: 880px) {
    .landing_hero_inner {
      grid-template-columns: 1.15fr 0.85fr;
      gap: 4rem;
    }

    .landing_hero_stage {
      max-height: 560px;

      .landing_shot {
        max-width: 340px;
      }
    }
  }

  /* ===== SHOT ===== */
  /* One capture, flat, its own picture: the app photographed in light mode stays that way. */
  .landing_shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.45);
  }

  /* ===== SCREENS (2 to 5) ===== */
  /* One screen per row: headline and sentence beside the capture, sides alternating. The
     capture sits in a crop card: the part of the screen the headline is about, at a legible
     size, the rest cut by the card's edge. --phone-shift slides a screen up when the point
     of it is near the bottom (the send button on the payments screen). */
  .landing_screen_inner {
    max-width: var(--landing-width);
    margin: 0 auto;
    padding: 0 var(--main-padding);
    display: grid;
    gap: 2rem;
    align-items: center;
  }

  .landing_screen_title {
    margin: 0 0 0.875rem;
    max-width: 18ch;
    font-size: var(--landing-headline);
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--color-text);
    text-wrap: balance;
  }

  .landing_screen_body {
    margin: 0;
    max-width: 30rem;
    font-size: var(--landing-body);
    line-height: var(--line-height-lg);
    color: var(--color-text-light);
    text-wrap: pretty;
  }

  /* The capture, cut by the stage's height and faded out at the cut, so the eye reads a screen
     that continues rather than a picture that ends. A capture shorter than the stage shows whole. */
  .landing_screen_stage {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-height: 420px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 72%, transparent);

    .landing_shot {
      max-width: 300px;
      translate: 0 var(--shot-shift, 0);
    }

    &.request {
      --shot-shift: -14%;
    }

    /* The customer page reads from the top down, so it takes no shift: the capture keeps the
       rounded top corners the hero's has, and the stage cuts below the month grid instead. It
       needs the extra height for the previsão ring and the grid the headline is about. */
    &.customers {
      max-height: 520px;
      mask-image: linear-gradient(to bottom, black 82%, transparent);
    }

    &.payments {
      max-height: none;
      mask-image: none;

      .landing_shot {
        max-width: 360px;
      }
    }
  }

  @media (min-width: 768px) {
    .landing_screen_inner {
      grid-template-columns: 1fr 1fr;
      gap: 3.5rem;
    }

    .landing_screen.reverse .landing_screen_stage {
      order: -1;
    }

    .landing_screen_stage {
      max-height: 480px;

      .landing_shot {
        max-width: 360px;
      }

      &.customers {
        max-height: 620px;
      }

      &.payments .landing_shot {
        max-width: 420px;
      }
    }
  }

  /* ===== CHECKLIST (niche pains, what a solution includes, what the price includes) and PROOF ===== */
  .landing_checklist,
  .landing_proof_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
  }

  .landing_checklist {
    max-width: 44rem;

    li {
      display: flex;
      align-items: flex-start;
      gap: 0.625rem;
      font-size: var(--text-lg);
      line-height: var(--line-height-lg);
      color: var(--color-text);
    }

    svg {
      flex-shrink: 0;
      margin-top: 0.35em;
      color: var(--color-success);
    }
  }

  @media (min-width: 768px) {
    .landing_proof_list {
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1rem;
    }
  }

  .landing_proof_card {
    padding: 1.25rem;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .landing_proof_quote {
    margin: 0;
    font-size: var(--text-lg);
    line-height: var(--line-height-lg);
    color: var(--color-text);
  }

  .landing_proof_who {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-light);
  }

  .landing_proof_name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
  }

  .landing_proof_link {
    font-size: var(--text-sm);
    color: var(--color-primary);
  }

  /* ===== CROSSLINK (how one solution works with the other) ===== */
  .landing_crosslink {
    text-align: center;
  }

  .landing_crosslink_inner {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .landing_crosslink_body {
    margin: 0;
    font-size: var(--landing-body);
    line-height: var(--line-height-lg);
    color: var(--color-text-light);
    text-wrap: pretty;
  }

  /* ===== PRICE (screen 7) ===== */
  .landing_price {
    text-align: center;
  }

  .landing_price_inner {
    max-width: 50rem;
  }

  .landing_price_title {
    margin: 0 0 1.5rem;
    font-size: var(--landing-headline);
    font-weight: var(--font-weight-bold);
    line-height: 1.12;
    color: var(--color-text);
    text-wrap: balance;
  }

  /* The plan card keeps the landing's larger radius here; elsewhere it wears the app's. */
  .landing_price .plan_card {
    border-radius: var(--landing-radius);
  }

  /* ===== SECTION BASE ===== */
  .landing_section {
    padding: var(--landing-section) 0;
    scroll-margin-top: 1rem;
  }

  /* Sections alternate between the paper and the wash by position, so every page family
     alternates on its own without each section choosing a ground. The hero paints itself. */
  .landing main > section:nth-of-type(odd):not(.landing_hero) {
    background: var(--landing-wash);
  }

  /* ===== TAGLINE (under the hero) ===== */
  .landing_tagline {
    padding: clamp(1.75rem, 4vw, 2.5rem) 0;
    text-align: center;
  }

  .landing_tagline_text {
    margin: 0 auto;
    max-width: 44rem;
    font-size: var(--landing-body);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-lg);
    color: var(--color-text);
    text-wrap: balance;
  }

  .landing_section_title {
    font-size: var(--landing-headline);
    letter-spacing: -0.015em;
    line-height: 1.15;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 0.5rem 0;
  }

  /* Subtitles and the footer's legal line sit on tinted grounds, where the muted token falls
     under 4.5:1; they carry the text colour and let size do the demoting. */
  .landing_section_subtitle {
    font-size: var(--text-base);
    color: var(--color-text);
    margin: 0 0 2rem 0;
  }

  /* ===== NICHES (who SVC is for) ===== */
  /* Marquee rows of customer-type chips. Each row holds its chips twice and
     slides by half its width, so the loop is seamless. The section does the
     clipping — the rows run wider than it, and a chip's hover lift needs the
     track itself to stay unclipped. */
  .landing_niches {
    overflow: hidden;
  }

  /* ===== CAROUSEL SPLIT (trades, blog) ===== */
  /* The title, a line and the arrows on the left; a snap-scrolling row of cover tiles on the
     right, two in view on desktop, one on phones. */
  .landing_carousel_split {
    display: grid;
    gap: 1.5rem;
    align-items: start;

    @media (min-width: 880px) {
      grid-template-columns: 1fr 2fr;
      gap: 1rem 3rem;

      .landing_carousel_nav {
        grid-column: 2;
      }
    }
  }

  .landing_carousel_intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;

    .landing_section_title,
    .landing_section_subtitle {
      margin: 0;
    }
  }

  /* The arrows under the row: at its left edge on phones, its right edge on desktop. */
  .landing_carousel_nav {
    display: flex;
    gap: 0.5rem;

    @media (min-width: 880px) {
      justify-content: flex-end;
    }
  }

  .landing_carousel_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--color-primary);
    border-radius: 50%;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;

    svg {
      width: 18px;
      height: 18px;
    }

    @media (hover: hover) {
      &:hover {
        background: rgba(var(--color-primary-rgb), 0.1);
      }
    }
  }

  .landing_carousel_track {
    --carousel-gap: 1rem;

    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--carousel-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;

    &::-webkit-scrollbar {
      display: none;
    }

    /* While a mouse drags the row: no snapping mid-drag, no text or image grabbing. */
    &.dragging {
      scroll-snap-type: none;
      scroll-behavior: auto;
      cursor: grabbing;
      user-select: none;
    }

    img {
      -webkit-user-drag: none;
      user-select: none;
    }
  }

  .landing_carousel_item {
    flex: 0 0 min(78%, 320px);
    scroll-snap-align: start;

    @media (min-width: 880px) {
      flex-basis: calc((100% - var(--carousel-gap)) / 2);
    }
  }

  /* ===== COVER CARD ===== */
  /* A picture filling a 4:5 tile, the words over a dark fade at its foot. */
  .landing_cover_card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--landing-radius);
    color: white;
    text-decoration: none;
    transition: box-shadow 150ms;

    @media (hover: hover) {
      &:is(a):hover {
        box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.4);
      }

      &:is(a):hover .landing_cover_card_image {
        transform: scale(1.03);
      }
    }
  }

  .landing_cover_card_frame {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: inherit;
    overflow: hidden;
    mask-image: linear-gradient(black, black);
    background: linear-gradient(180deg, var(--color-hero) 0%, var(--color-hero-floor) 100%);
  }

  .landing_cover_card_image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease-out;
  }

  .landing_cover_card_badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
  }

  .landing_cover_card_body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 5rem 1.375rem 1.375rem;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 35%, rgba(0, 0, 0, 0.82) 100%);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  .landing_cover_card_eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: rgba(255, 255, 255, 0.82);
  }

  .landing_cover_card_title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-md);
    text-wrap: balance;
  }

  .landing_cover_card_text {
    font-size: var(--text-sm);
    line-height: var(--line-height-md);
    color: rgba(255, 255, 255, 0.88);
    text-wrap: pretty;
  }

  /* The way in, as the outlined pill the navbar's Entrar wears on the hero. */
  .landing_cover_card .btn.outline.primary {
    align-self: flex-start;
    min-width: 0;
    gap: 0.375rem;
    margin-top: 0.5rem;
    border-color: rgba(255, 255, 255, 0.7);
    color: white;
    text-shadow: none;
  }

  .landing_cover_card:is(a):hover .btn.outline.primary {
    background: rgba(255, 255, 255, 0.14);
    border-color: white;
  }

  /* ===== SOLUTIONS (the ways of working on the landing, the trades on a way of working's page) ===== */
  .landing_solutions {
    text-align: center;
  }

  .landing_solutions_grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    text-align: left;

    @media (min-width: 640px) {
      grid-template-columns: repeat(auto-fit, minmax(16rem, 22rem));
      justify-content: center;
    }
  }

  .landing_solution {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem 1.375rem;
    background: var(--landing-card);
    border: 1px solid var(--color-border);
    border-radius: var(--landing-radius);
    text-decoration: none;
    transition: border-color 150ms, box-shadow 150ms;

    @media (hover: hover) {
      &:hover {
        border-color: var(--color-primary);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      }
    }
  }

  .landing_solution_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 0.5rem;
    border-radius: var(--radius-md);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
  }

  .landing_solution_title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-md);
    color: var(--color-text);
  }

  .landing_solution_text {
    font-size: var(--text-base);
    line-height: var(--line-height-lg);
    color: var(--color-text-light);
    text-wrap: pretty;
  }

  .landing_solution_more {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: auto;
    padding-top: 0.75rem;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
  }

  .landing_niches_track {
    --niches-gap: 0.875rem;
    --niches-fade: 8%;

    display: flex;
    flex-direction: column;
    gap: var(--niches-gap);
    margin-top: 0.5rem;
    mask-image: linear-gradient(to right,
      transparent 0, black var(--niches-fade),
      black calc(100% - var(--niches-fade)), transparent 100%);

    &:hover .landing_niches_row {
      animation-play-state: paused;
    }
  }

  .landing_niches_row {
    display: flex;
    gap: var(--niches-gap);
    width: max-content;
    animation: landingNichesMarquee 60s linear infinite;

    &.reverse {
      animation-direction: reverse;
      animation-duration: 75s;
    }

    &.slow {
      animation-duration: 90s;
    }
  }

  .landing_niches_chip {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.375rem;
    background: var(--color-bg-white);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    white-space: nowrap;
    transition: transform 300ms ease, border-color 300ms ease;

    &:hover {
      border-color: var(--color-border-hover);
      transform: translateY(-2px);
    }
  }

  .landing_niches_chip_emoji {
    font-size: 1.125rem;
    line-height: 1;
  }

  @keyframes landingNichesMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  @media (max-width: 767px) {
    .landing_niches_track {
      --niches-gap: 0.625rem;
      --niches-fade: 3%;
    }

    .landing_niches_chip {
      gap: 0.5rem;
      padding: 0.6875rem 1.125rem;
      font-size: var(--text-xs);
    }

    .landing_niches_chip_emoji {
      font-size: 0.9375rem;
    }
  }

  /* ===== FAQ SECTION ===== */
  /* The title on the left, the questions on the right; stacked on phones. */
  .landing_faq_inner {
    display: grid;
    gap: 1.5rem;
    align-items: start;

    @media (min-width: 880px) {
      grid-template-columns: 1fr 1.6fr;
      gap: 4rem;
    }
  }

  .landing_faq_intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;

    .landing_section_title,
    .landing_section_subtitle {
      margin: 0;
    }
  }

  .landing_faq_list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .landing_faq_item {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--landing-radius);

    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1rem 1.25rem;
      font-size: var(--text-base);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text);
      cursor: pointer;
      list-style: none;

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

      svg {
        width: 16px;
        height: 16px;
        color: var(--color-text-light);
        flex-shrink: 0;
        transition: transform 150ms ease-out;
      }
    }

    &[open] summary svg {
      transform: rotate(180deg);
    }

    p {
      margin: 0;
      padding: 0 1.25rem 1rem;
      font-size: var(--text-base);
      color: var(--color-text-light);
      line-height: var(--line-height-lg);
    }
  }

  .landing_faq_link {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* "Veja também:" and the related questions, one per line. */
  .landing_faq_item .landing_faq_related {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0;
    font-size: var(--text-sm);
  }

  .landing_faq_item {
    scroll-margin-top: 1rem;
  }

  /* ===== LEGAL PAGES ===== */
  .legal_page {
    padding: 4rem 0;
    background: var(--color-bg-white);
    min-height: calc(100vh - 200px);
  }

  .legal_title {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 0.5rem 0;
  }

  .legal_updated {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin: 0 0 2rem 0;
  }

  .legal_content {
    max-width: 65ch;

    h2 {
      font-size: var(--text-lg);
      font-weight: var(--font-weight-bold);
      color: var(--color-text);
      margin: 2rem 0 0.75rem 0;
    }

    h2:first-child {
      margin-top: 0;
    }

    h3 {
      font-size: var(--text-base);
      font-weight: var(--font-weight-bold);
      color: var(--color-text);
      margin: 1.5rem 0 0.5rem 0;
    }

    p,
    li {
      font-size: var(--text-base);
      color: var(--color-text);
      line-height: var(--line-height-xl);
      margin: 0 0 1rem 0;
    }

    ul {
      margin: 0 0 1rem 0;
      padding-left: 1.25rem;
    }

    li {
      margin-bottom: 0.5rem;
    }
  }

  .legal_data_items {
    list-style: none;
    padding-left: 0;
  }

  .legal_data_item {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: baseline;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-border);
  }

  .legal_data_label {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
  }

  .legal_data_value {
    line-height: var(--line-height-xl);
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 767px) {
    .landing_navbar_inner {
      padding: 1rem var(--main-padding);
    }

    .landing_navbar_inner {
      gap: 1rem;
    }
  }

  /* ===== DEMOS (the businesses of example, compact rows with the trade's picture) ===== */
  .landing_demos_grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;

    @media (min-width: 560px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 900px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* Wider than the trade and blog tiles: nine of them share the section. */
  .landing_demo_card {
    aspect-ratio: 4 / 3;
  }

  /* The category's icon on a wash of the accent its booking page wears, as the tile's badge. */
  .landing_demo_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--demo-accent) 18%, white);
    color: var(--demo-accent);

    svg {
      width: 20px;
      height: 20px;
    }
  }

  /* ===== HELP PAGE (/ajuda) ===== */
  /* The two channels side by side, the whole FAQ by subject below. */
  .help_channels {
    display: grid;
    gap: 1rem;
    margin-top: 0.5rem;

    @media (min-width: 640px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .help_channel {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--landing-radius);
    text-decoration: none;
    transition: border-color 150ms, box-shadow 150ms;

    @media (hover: hover) {
      &:hover {
        border-color: var(--color-primary);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      }
    }
  }

  .help_channel_icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--landing-card);
    color: var(--color-primary);

    svg {
      width: 22px;
      height: 22px;
    }
  }

  .help_channel_whatsapp .help_channel_icon {
    background: #25D366;
    color: white;
  }

  .help_channel_text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
  }

  .help_channel_label {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-light);
  }

  .help_channel_value {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    overflow-wrap: anywhere;
  }

  .help_subject {
    margin-top: 2rem;
    scroll-margin-top: 1rem;
  }

  .help_subject_title {
    margin: 0 0 0.75rem;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
  }

  .help_faq .landing_faq_list {
    max-width: 760px;
  }

  /* ===== REDUCED MOTION ===== */
  @media (prefers-reduced-motion: reduce) {
    .landing_hero_cta_button,
    .landing_niches_chip {
      transition: none;
    }

    /* A parked row is wider than the screen, so let it scroll rather than
       leave the chips past the fold unreachable */
    .landing_niches_track {
      overflow-x: auto;
      mask-image: none;
    }

    .landing_niches_row {
      animation: none;
    }
  }
}

/* Smooth anchor scrolling, only on pages that render the landing chrome */
html:has(.landing) {
  scroll-behavior: smooth;
}

/* Footer styles outside layer for proper specificity */
.landing_footer {
  padding: clamp(2.5rem, 6vw, 4rem) var(--main-padding) 2rem;
  background: var(--color-bg-secondary);
  text-align: left;
}

.landing_footer_inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* The brand and its line on the left, four columns of links on the right. */
.landing_footer_top {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 900px) {
  .landing_footer_top {
    grid-template-columns: 1.1fr 2fr;
    gap: 4rem;
  }
}

/* The logo's built-in clear space (see .brand_logo) would push it below the top-aligned
   text; the footer's own padding already exceeds the clear-space minimum. */
.landing_footer .brand_logo {
  padding-top: 0;
}

.landing_footer_tagline {
  margin: 0.75rem 0 0;
  max-width: 24rem;
  font-size: var(--text-sm);
  line-height: var(--line-height-lg);
  color: var(--color-text-light);
}

.landing_footer_columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
}

@media (min-width: 640px) {
  .landing_footer_columns {
    grid-template-columns: repeat(4, 1fr);
  }
}

.landing_footer_column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
}

.landing_footer_heading {
  margin: 0 0 0.25rem;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.landing_footer_link {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 100ms ease-out;
}

.landing_footer_link:hover {
  color: var(--color-text);
}

/* The legal line and the theme picker under the columns. */
.landing_footer_bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 1.5rem;
}

.landing_footer_legal {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--line-height-lg);
  color: var(--color-text-light);

  a {
    color: inherit;
    text-decoration: none;
  }
}

/* The theme picker as a bare icon. */
.landing_footer .theme-picker__button {
  border-color: transparent;
  background: transparent;
  color: var(--color-text-light);
}

.landing_footer .theme-picker__button:hover {
  color: var(--color-text);
}