/* Tréo landing page — layers on tokens.css (design.md §12.2).
   Mobile-first; desktop overrides live in the ≥900px block at the end of the file.
   Grid: 24px page margin (§4.4). */

/* Hero — marketing gradient is sanctioned for marketing heroes only (§12.2) */

:root {
  --landing-nav-height: 76px; /* 44px controls + space.m above and below */
}

.landing-hero-bg {
  position: relative;
  z-index: 1; /* above the statement section it scrolls away from */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: var(--landing-nav-height); /* room for the fixed nav */
  background: var(--treo-gradient-marketing-flipped);
  color: var(--treo-content-on-brand);
  overflow: hidden;
}

/* Nav — fixed and always transparent. Once the hero has scrolled past (.is-floating, set by JS)
   the logo and menu fade out and only "Get the app" stays, lifted with a floating shadow so it
   reads as sitting above whatever section is underneath. The bar itself never intercepts taps. */

.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--landing-nav-height);
  padding: var(--treo-space-m) var(--treo-space-xl);
  color: var(--treo-content-on-brand);
  pointer-events: none;
}

.landing-nav a,
.landing-nav button {
  pointer-events: auto;
}

/* Reappearance waits a beat so the CTA has slid clear of the menu's slot before it fades back in */
.landing-nav-logo,
.landing-menu-btn {
  transition: opacity var(--treo-motion-quick) ease var(--treo-motion-instant),
              visibility var(--treo-motion-quick) var(--treo-motion-instant);
}

.landing-nav.is-floating .landing-nav-logo,
.landing-nav.is-floating .landing-menu-btn {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s; /* fade out immediately, ahead of the slide */
}

.landing-nav.is-floating .landing-get-app {
  box-shadow: var(--treo-shadow-floating);
}

/* Slides into the slot the menu just vacated so it ends flush with the page margin —
   only when there is a menu button to vacate it (it is `hidden` for now). */
.landing-nav.is-floating .landing-nav-actions:has(.landing-menu-btn:not([hidden])) .landing-get-app {
  transform: translateX(calc(44px + var(--treo-space-m))); /* menu width + actions gap */
}

/* symbol.svg has its own white tile at ~6.7px corners when rendered at 44px;
   clip to radius.sm for the rounder tile the Figma shows. */
.landing-nav-logo {
  display: flex;
  width: 44px;
  height: 44px;
  border-radius: var(--treo-radius-sm);
  overflow: hidden;
}

.landing-nav-logo img {
  display: block;
}

.landing-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--treo-space-m);
}

/* Button label per §8.1 — bodyLarge at weight 600 */
.landing-get-app {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--treo-space-l);
  border-radius: var(--treo-radius-full);
  background: var(--treo-surface-accent);
  color: var(--treo-content-on-accent);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--treo-motion-standard) cubic-bezier(0.2, 0, 0, 1), box-shadow var(--treo-motion-standard) ease;
}

/* 44px touch target with a smaller centered glyph (§4.3 — pad the hit area, don't grow the icon) */
.landing-menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.landing-menu-btn[hidden] {
  display: none; /* `display: flex` above would otherwise override the hidden attribute */
}

.landing-menu-btn span {
  display: block;
  width: 26px;
  height: 2px;
  border-radius: var(--treo-radius-full);
  background: var(--treo-content-on-brand);
}

/* Focus on purple uses the inverse ring — purple-on-purple is invisible (§2.3) */

.landing-nav a:focus-visible,
.landing-nav button:focus-visible {
  outline: 2px solid var(--treo-border-focus-inverse);
  outline-offset: 2px;
}

/* Hero copy */

.landing-hero {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--treo-space-xxxl) var(--treo-space-xl);
}

.landing-hero-title {
  margin: 0;
  max-width: 680px;
  /* 38px — a half-step above displayMedium so section serifs (30) sit clearly below */
  font-size: 2.375rem;
  line-height: 2.875rem;
}

.landing-hero-title em,
.landing-hero-copy em {
  font-style: normal;
  color: var(--treo-brand-light);
}

.landing-hero-copy {
  /* Bottom margin is the minimum gap to the phone when the viewport is tight */
  margin: var(--treo-space-xl) 0 var(--treo-space-xxxl);
  max-width: 680px;
}

/* App screenshot — shown in full, rounded on all corners */

.landing-hero-phone {
  position: relative;
  width: min(76%, 330px);
  margin: auto auto 0;
}

.landing-hero-phone img {
  display: block;
  width: 100%;
  height: auto;
  /* Depicts a device bezel, not a UI container, so it sits above the §5.1 scale — derived from the largest token */
  border-radius: calc(var(--treo-radius-xl) * 1.5);
}

/* Blinking caret over the artwork's single-line input pill (rect 21,709 397×59 in a 440×798 canvas),
   vertically centered on the pill's midline (y 738.5). Percentage coords track the image at every rendered size. */
.landing-hero-caret {
  position: absolute;
  left: 10.2%;   /* pill x 21 + 24 text inset, / 440 */
  top: 91%;      /* pill midline 738.5 − half of 24px line height, / 798 */
  width: 0.6%;
  height: 3%;    /* ~24px line height / 798 */
  border-radius: var(--treo-radius-full);
  background: var(--treo-content-brand);
  animation: landing-caret-blink 1.1s steps(1) infinite;
}

@keyframes landing-caret-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero-caret {
    animation: none;
  }
}

/* Statement — a pinned beat between hero and the feature stack.
   The section starts one screen early, underneath the hero, and its inner page is sticky. As the hero slides
   up it uncovers the pinned text, line by line. Once the hero is --statement-hold gone, the pin releases: the
   first feature card rises in from the bottom and the statement scrolls away with the page while the hero
   finishes leaving. Net page length added: --statement-hold. */

.landing-statement {
  --statement-hold: 90svh; /* how much of the hero must be gone before the feature stack starts to appear */
  position: relative;
  z-index: 0;
  height: calc(100svh + var(--statement-hold));
  margin-top: -100svh;
  background: var(--treo-surface-base);
}

.landing-statement-page {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Top padding alone shifts the centred text below the midline, so the pinned screen doesn't read as empty */
  padding: 12svh var(--treo-space-xl) 0;
}

.landing-statement-line {
  display: block;
}

/* Lines reveal one after another, tracking the scroll rather than a clock (§6), driven by the hero's own
   exit: `exit 0%` is "hero bottom at the viewport bottom", `exit 100%` is "hero fully off-screen".
   The block's top sits at ~49% of the viewport (see .landing-statement-page padding), so the hero's edge only
   clears it at ~exit 51%; the lines stay invisible until then, since a fade behind the hero can't be seen and
   the hero would otherwise uncover them bottom-first. The stagger then runs top→bottom and finishes before
   the pin releases at --statement-hold. The hero's timeline is hoisted to <body> so a non-descendant can
   reference it. Browsers without scroll-driven animations keep the pin and show all three lines solid. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body {
      timeline-scope: --landing-hero, --landing-testimonials;
    }

    .landing-hero-bg {
      view-timeline-name: --landing-hero;
    }

    .landing-testimonials {
      view-timeline-name: --landing-testimonials;
    }

    .landing-statement-line {
      animation: landing-statement-reveal linear both;
      animation-timeline: --landing-hero;
    }

    .landing-statement-line:nth-child(1) { animation-range: exit 52% exit 62%; }
    .landing-statement-line:nth-child(2) { animation-range: exit 63% exit 73%; }
    .landing-statement-line:nth-child(3) { animation-range: exit 74% exit 84%; }

    /* Closing statement: two lines, uncovered by the testimonials instead of the hero */
    .landing-statement-closing .landing-statement-line {
      animation-timeline: --landing-testimonials;
    }

    .landing-statement-closing .landing-statement-line:nth-child(1) { animation-range: exit 54% exit 66%; }
    .landing-statement-closing .landing-statement-line:nth-child(2) { animation-range: exit 68% exit 80%; }
  }
}

/* The closing statement starts one screen above the testimonials' bottom edge (z-index 0). The testimonials
   are shorter than a screen on most phones, so it also reaches under the trust section; both must paint above it. */
.trust.landing-trust,
.invite-testimonials.landing-testimonials {
  position: relative;
  z-index: 1;
}

@keyframes landing-statement-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Section serif — displaySmall (30/38) at regular weight, a full step below the hero */
.landing-statement-title,
.landing-card-title {
  margin: 0;
  font-family: var(--treo-font-display);
  font-weight: 400;
  font-size: 1.875rem;
  line-height: 2.375rem;
  color: var(--treo-content-primary);
}

/* The statement carries a whole screen on its own, so it steps up to displayMedium size (36/44) */
.landing-statement-title {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  font-size: 2.25rem;
  line-height: 2.75rem;
}

/* Feature stack — stacked sticky cards (the PayPal-style "card stack").
   Each card is sticky just below the nav; as the next card scrolls up it paints over the pinned one, which
   recedes (scale + dim) in step with the scroll. Every card is sized to fit the viewport below the pin line
   so it's always fully visible when pinned; the image flexes to absorb the difference between phones.
   Card i pins --stack-peek lower than card i-1 so the covered card's top edge stays visible as a stack cue.
   Browsers without scroll-driven animations still get the sticky stacking, just without the recede. */

.landing-features {
  --stack-peek: 20px;
  /* Full-bleed panels pinned to the very top (the floating "Get the app" sits over them),
     leaving room only for the three peeks above card 4 */
  --card-height: calc(100svh - 3 * var(--stack-peek));
  background: var(--treo-surface-base);
  padding: var(--treo-space-xxl) 0 var(--treo-space-xxxl);
}

/* A panel while active (edge to edge, rounded corners); it only becomes a "card" as it recedes */
.landing-card {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: var(--card-height);
  /* Top padding matches the nav's so the chip sits on the same row as the floating CTA */
  padding: var(--treo-space-m) var(--treo-space-xl) var(--treo-space-l);
  border-radius: var(--treo-radius-xl);
  background: var(--treo-surface-sunken); /* section is white, so the first panel needs its own tone */
  transform-origin: 50% 0;
}

.landing-card:nth-child(2) {
  top: var(--stack-peek);
  background: var(--treo-surface-inverse);
}

.landing-card:nth-child(3) {
  top: calc(2 * var(--stack-peek));
  background: var(--treo-surface-brand);
}

/* Card 4 shares card 1's tone; its chip is the one brand-coloured pill in the stack */
.landing-card:nth-child(4) {
  top: calc(3 * var(--stack-peek));
}

.landing-card:nth-child(4) .landing-chip {
  background: var(--treo-surface-brand);
  color: var(--treo-content-on-brand);
}

.landing-card:nth-child(4) .landing-card-title {
  color: var(--treo-content-brand);
}

/* Dark cards: flip the chip, title and copy to their on-dark pairings */
.landing-card:nth-child(2) .landing-chip,
.landing-card:nth-child(3) .landing-chip {
  background: var(--treo-surface-base);
  color: var(--treo-content-primary);
}

.landing-card:nth-child(2) .landing-card-title,
.landing-card:nth-child(2) .landing-card-copy {
  color: var(--treo-content-inverse);
}

.landing-card:nth-child(3) .landing-card-title,
.landing-card:nth-child(3) .landing-card-copy {
  color: var(--treo-content-on-brand);
}

.landing-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--treo-space-xs);
  min-height: 44px;
  padding: 0 var(--treo-space-l) 0 var(--treo-space-m);
  border-radius: var(--treo-radius-full);
  background: var(--treo-surface-inverse);
  color: var(--treo-content-inverse);
}

.landing-chip-icon {
  flex-shrink: 0;
}

/* Always full width at natural aspect. If the card is too short for that, the box shrinks and `cover`
   trims the bottom edge (never the sides). Leftover space sits between art and copy so text bottoms out. */
.landing-card-img {
  display: block;
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
  margin: var(--treo-space-l) 0 auto;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--treo-radius-lg);
}

.landing-card-title {
  margin-top: var(--treo-space-l);
}

.landing-card-copy {
  margin: var(--treo-space-s) 0 0;
  color: var(--treo-content-secondary);
  max-width: 680px;
}

.landing-card-link {
  color: var(--treo-content-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.landing-card-link:focus-visible {
  outline: 2px solid var(--treo-border-focus);
  outline-offset: 2px;
  border-radius: var(--treo-radius-sm);
}

/* Recede: card N shrinks and dims while card N+1 enters the viewport on its way to the pin line.
   Each card's entry is exposed as a named view timeline on the section so the card before it can follow. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .landing-features {
      timeline-scope: --landing-card-2, --landing-card-3, --landing-card-4;
    }

    .landing-card:nth-child(2) { view-timeline-name: --landing-card-2; }
    .landing-card:nth-child(3) { view-timeline-name: --landing-card-3; }
    .landing-card:nth-child(4) { view-timeline-name: --landing-card-4; }

    .landing-card:nth-child(1),
    .landing-card:nth-child(2),
    .landing-card:nth-child(3) {
      animation: landing-card-recede linear both;
      animation-range: entry 0% entry 100%;
    }

    .landing-card:nth-child(1) { animation-timeline: --landing-card-2; }
    .landing-card:nth-child(2) { animation-timeline: --landing-card-3; }
    .landing-card:nth-child(3) { animation-timeline: --landing-card-4; }
  }
}

/* Dim with brightness, not opacity — a translucent card would let the one beneath show through the peek */
@keyframes landing-card-recede {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(0.94); filter: brightness(0.82); }
}

/* Press — "As Featured In" with greyscale partner logos linking out */

.landing-press {
  background: var(--treo-surface-base);
  padding: var(--treo-space-xxxxl) 0;
}

/* Same serif and size as the statement, but stepped down to secondary so it sits with the grey logos.
   The shared trust and testimonials sections borrow this type so the page's section titles read as one voice. */
.landing-press-title,
.landing-trust .trust-title,
.landing-testimonials .invite-testimonials-title {
  font-family: var(--treo-font-display);
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 2.75rem;
}

.landing-press-title {
  margin: 0 0 var(--treo-space-xxl);
  padding: 0 var(--treo-space-xl);
  color: var(--treo-content-secondary);
}

/* Shared testimonials carousel styles itself with the referral page's --invite-* vars;
   point them at our tokens so it sits on this page's palette. */
.landing-testimonials {
  --invite-cream: var(--treo-surface-sunken);
  --invite-ink: var(--treo-content-primary);
  --invite-ink-muted: var(--treo-content-secondary);
  --invite-orange: var(--treo-content-accent);
}

.landing-testimonials .invite-testimonials-title {
  color: var(--treo-content-primary);
}

/* Match the press section's headroom so section titles land at a consistent depth */
.landing-trust .trust-inner {
  padding-top: var(--treo-space-xxxxl);
  padding-bottom: var(--treo-space-xxxxl);
}

/* Landing-only palette: light brand field, deepest-purple title, brand-purple body copy, white tile titles */
.trust.landing-trust {
  background: var(--treo-brand-light);
}

.landing-trust .trust-title {
  color: var(--treo-content-on-brand-container);
}

.landing-trust .trust-copy,
.landing-trust .trust-item-copy {
  color: var(--treo-content-brand);
}

.invite-testimonials.landing-testimonials { /* outranks the component's own padding, which loads later */
  padding-top: var(--treo-space-xxxxl);
}

.landing-testimonials .invite-testimonials-title {
  margin-bottom: var(--treo-space-xxl);
}

.landing-testimonials .invite-testimonial-body {
  margin-bottom: var(--treo-space-l);
}

/* One swipeable row, no auto-advance. Logos share a height so mixed aspect ratios read as one line; the
   page gutter lives on the track so items can run off the edge and hint that there's more. */
.landing-press-logos {
  --press-logo-height: 120px; /* tall enough that the second logo runs off a phone's edge, hinting at more */
  display: flex;
  align-items: center;
  gap: var(--treo-space-xxxxl);
  margin: 0;
  padding: 0 var(--treo-space-xl);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--treo-space-xl);
  scrollbar-width: none;
}

.landing-press-logos::-webkit-scrollbar {
  display: none;
}

.landing-press-logos li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.landing-press-logos a {
  display: block;
  border-radius: var(--treo-radius-md);
}

.landing-press-logos a:focus-visible {
  outline: 2px solid var(--treo-border-focus);
  outline-offset: 2px;
}

.landing-press-logos img {
  display: block;
  height: var(--press-logo-height);
  width: auto;
  border-radius: var(--treo-radius-md); /* softens the one logo that ships with its own grey backplate */
}

/* =====================================================================================================
   Larger layouts. Everything above is the finished portrait-phone experience and is the baseline; the
   blocks below are purely additive:
     - desktop: ≥ 900px wide AND ≥ 600px tall (the height gate keeps a Pro Max held sideways — 932px
       wide, 430px tall — out of the desktop layout). Tablets in portrait keep the mobile layout on
       purpose. Content sits in a 1200px column with 64px side margins.
     - landscape phone: any landscape viewport ≤ 500px tall. Mobile layout plus the horizontal card.
   ===================================================================================================== */

/* Horizontal card — shared by desktop and landscape phones. Chip pinned top-left, title + copy
   centred on the left, framed artwork filling the right half. `--card-frame` is the inset the
   text and picture share; each context sets it (48px on desktop, 24px on a phone). Grid rather than
   a wrapper so the mobile markup stays untouched.

   No sticky stack here: the cards are ordinary blocks you scroll past, each exactly as tall as its
   artwork needs, so the 3:4 pictures are never cropped and nothing has to fit a fold. */
@media (min-width: 900px) and (min-height: 600px), (orientation: landscape) and (max-height: 500px) {
  .landing-features .landing-card {
    position: relative; /* un-sticks the card but stays the chip's containing block */
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: var(--card-frame);
    height: auto;
    padding: 0;
    animation: none; /* the recede only makes sense when a card slides over the one before it */
  }

  .landing-features .landing-card + .landing-card {
    margin-top: var(--card-gap);
  }

  /* Pinned to the corner (the sticky card is its containing block) so title + copy centre on the
     card itself, not on the space left under the chip */
  .landing-chip {
    position: absolute;
    top: var(--card-chip-top, var(--card-frame));
    left: var(--card-frame);
  }

  .landing-card-title {
    grid-area: 2 / 1;
    margin: 0 0 0 var(--card-frame);
  }

  .landing-card-copy {
    grid-area: 3 / 1;
    margin: var(--treo-space-m) 0 0 var(--card-frame);
  }

  /* Inset like the copy so the artwork reads as a framed picture, shown whole at its own aspect —
     it's what sets the card's height. The radius matches the corners the PNGs ship with. */
  .landing-card-img {
    grid-area: 1 / 2 / -1 / 3;
    width: calc(100% - var(--card-frame));
    height: auto;
    margin: var(--card-frame) var(--card-frame) var(--card-frame) 0;
    border-radius: var(--treo-radius-xl);
  }
}

@media (min-width: 900px) and (min-height: 600px) {
  :root {
    --landing-content-max: 1200px;
    --landing-page-margin: var(--treo-space-xxxxl);
    /* Side padding that grows so the content stays in a centred column on wide screens */
    --landing-gutter: max(var(--landing-page-margin), calc((100% - var(--landing-content-max)) / 2));
  }

  /* Every section keeps its full-bleed background but insets its content to the same column as the
     hero: 64px at 900–1328px, then growing so the content stays centred at 1200px. Selectors are
     doubled where the shared component sheet (trust/testimonials/footer) loads after this file. */
  .landing-nav,
  .landing-statement-page,
  .landing-press-title,
  .landing-press-logos,
  .landing-trust .trust-inner,
  .invite-testimonials.landing-testimonials,
  body.landing .invite-footer-inner,
  body.landing .invite-wordmark {
    padding-inline: var(--landing-gutter);
  }

  .landing-trust .trust-inner {
    max-width: none; /* the gutter does the centring the component's 680px cap used to */
  }

  /* Tile titles step up to headline-sm size (24/32); still sans so the serif section title stays the only display voice */
  .landing-trust .trust-item-title {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  /* Three logos have the whole column, so spread them to its edges instead of bunching left */
  .landing-press-logos {
    justify-content: space-between;
    scroll-padding-inline: var(--landing-gutter);
  }

  /* Statements: up to 64/76, fluid below 1440px so the longest line ("Do more than just send money
     home.") still fits the column on one line. The extra top padding keeps the taller block's top
     edge below the hero's/testimonials' bottom edge until its reveal starts (see the timing note on
     .landing-statement-line). */
  .landing-statement-page {
    padding-top: 24svh;
  }

  .landing-statement-title {
    max-width: none;
    font-size: clamp(2.25rem, 4.4vw, 4rem);
    line-height: 1.1875;
  }

  /* Feature cards: real cards in the content column (not full-bleed panels), see the shared block above */
  .landing-card {
    --card-frame: var(--treo-space-xxxl);
    --card-gap: var(--treo-space-xxxl);
    margin-inline: var(--landing-gutter);
  }

  /* displayLarge (44/52) — the card is now hero-sized, so its title steps up to match */
  .landing-card-title {
    font-size: 2.75rem;
    line-height: 3.25rem;
  }

  .landing-card-copy {
    font-size: 1.25rem;
    line-height: 1.875rem;
  }

  /* Hero: copy on the left, phone on the right at the full height of the fold.
     Grid rather than a wrapper so the mobile markup stays untouched: rows 1 and 4 are flexible so the
     copy centres vertically, while the phone spans every row and bottom-aligns. */
  .landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: var(--treo-space-xxxxl);
    width: 100%;
    max-width: calc(var(--landing-content-max) + 2 * var(--landing-page-margin));
    margin: 0 auto;
    padding: var(--treo-space-xxxl) var(--landing-page-margin);
  }

  /* 56/64 — one step past displayLarge (44/52). Web-only; logged in design-gaps.md */
  .landing-hero-title {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    max-width: 640px;
    font-size: 3.5rem;
    line-height: 4rem;
  }

  .landing-hero-copy {
    grid-column: 1;
    grid-row: 3;
    margin: var(--treo-space-xl) 0 0;
    max-width: 560px;
    font-size: 1.25rem;
    line-height: 1.875rem;
  }

  /* As tall as the fold allows (minus nav and hero padding), never upscaled past the artwork's 798px */
  .landing-hero-phone {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: end;
    width: auto;
    height: min(calc(100svh - var(--landing-nav-height) - 2 * var(--treo-space-xxxl)), 798px);
    aspect-ratio: 440 / 798;
    margin: 0;
  }
}

/* Landscape phone: the mobile card laid out horizontally, inset by the page margin now that it's a
   scrolling card rather than a pinned panel. The chip keeps the mobile 16px top so it still sits on
   the floating CTA's row. */
@media (orientation: landscape) and (max-height: 500px) {
  .landing-card {
    --card-frame: var(--treo-space-xl);
    --card-gap: var(--treo-space-xl);
    --card-chip-top: var(--treo-space-m);
    margin-inline: var(--treo-space-xl);
  }
}