/* ============================================================
       Lovable → App Store — scoped page styles, built on tokens
       ============================================================ */

    /* ---- Hero: copy + device mock ---- */
    .la-hero {
      position: relative;
      max-width: none;
      width: 100%;
      margin: 0 auto;
      /* No bottom padding: the card ends the hero and the next section's own
         padding-top is the gap below it. */
      padding: calc(var(--header-height) + var(--space-5)) var(--gutter) 0;
      overflow-x: clip;
      overflow-y: visible;
    }
    /* Literal copy of home's hero glow recipe (css/styles.css .hero__glow /
       --lime / --violet), per the "Background glow gradient" rule —
       position, size, timing, keyframe percentage steps, hue-drift deltas,
       alphas and stop percentages are all identical to home's; only the
       two hues (240deg blue, 286deg violet, from docs/_as/colors.html) and
       the pastel oklch register (L 0.9, C ~0.1-0.12) are page-specific —
       see css/resources.css for the confirmed-working reference. Height
       uses vh (not home's own vw) since this hero is shorter than home's. */
    .la-hero__glow {
      position: absolute;
      z-index: 0;
      top: -24%;
      right: -42%;
      left: auto;
      width: 100vw;
      height: 100vh;
      background: radial-gradient(
        var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
        oklch(0.9 0.12 var(--g-h1, 240deg) / 0.85),
        oklch(0.9 0.1 var(--g-h2, 286deg) / 0.4) 46%,
        transparent 72%
      );
      pointer-events: none;
      animation:
        la-glow-morph 11s ease-in-out infinite,
        la-glow-float 17s ease-in-out infinite;
    }
    @keyframes la-glow-morph {
      0%, 100% { --g-h1: 240deg; --g-h2: 286deg; --g-w: 44%; --g-h: 54%; --g-x: 46%; --g-y: 54%; }
      30%      { --g-h1: 276deg; --g-h2: 308deg; --g-w: 66%; --g-h: 42%; --g-x: 60%; --g-y: 40%; }
      62%      { --g-h1: 214deg; --g-h2: 260deg; --g-w: 42%; --g-h: 64%; --g-x: 40%; --g-y: 60%; }
    }
    @keyframes la-glow-float {
      0%, 100% { transform: scale(1)    translate3d(0, 0, 0);    filter: hue-rotate(0deg)  saturate(1); }
      50%      { transform: scale(1.22) translate3d(-8%, 6%, 0); filter: hue-rotate(14deg) saturate(1.1); }
    }
    /* Bottom-left blob: blue on its own, home's lime formula and delta shape. */
    .la-hero__glow--bottom {
      top: auto;
      right: auto;
      bottom: -20%;
      left: -22%;
      width: 60vw;
      height: 60vh;
      background: radial-gradient(
        var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
        oklch(0.9 0.12 var(--g-h1, 240deg) / 0.4),
        transparent 66%
      );
      animation:
        la-glow-morph-violet 14s ease-in-out -5s infinite,
        la-glow-float-violet 21s ease-in-out -9s infinite;
    }
    @keyframes la-glow-morph-violet {
      0%, 100% { --g-h1: 240deg; --g-w: 46%; --g-h: 46%; --g-x: 50%; --g-y: 50%; }
      40%      { --g-h1: 272deg; --g-w: 68%; --g-h: 56%; --g-x: 60%; --g-y: 42%; }
      72%      { --g-h1: 218deg; --g-w: 42%; --g-h: 66%; --g-x: 40%; --g-y: 58%; }
    }
    @keyframes la-glow-float-violet {
      0%, 100% { transform: scale(1.06) translate3d(0, 0, 0);    filter: hue-rotate(0deg)   saturate(1); }
      50%      { transform: scale(0.84) translate3d(9%, -7%, 0); filter: hue-rotate(-12deg) saturate(1.12); }
    }
    /* Top-centre blob: violet on its own, home's violet slot (position +
       timing) carrying a single-hue fade instead of a blend. */
    .la-hero__glow--c {
      top: -26%;
      left: 52%;
      right: auto;
      bottom: auto;
      width: 44vw;
      height: 44vh;
      background: radial-gradient(
        var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
        oklch(0.9 0.1 var(--g-h1, 286deg) / 0.28),
        transparent 64%
      );
      animation:
        la-glow-morph-c 18s ease-in-out -7s infinite,
        la-glow-float-c 26s ease-in-out -13s infinite;
    }
    @keyframes la-glow-morph-c {
      0%, 100% { --g-h1: 286deg; --g-w: 48%; --g-h: 48%; --g-x: 50%; --g-y: 50%; }
      38%      { --g-h1: 262deg; --g-w: 70%; --g-h: 42%; --g-x: 40%; --g-y: 58%; }
      70%      { --g-h1: 306deg; --g-w: 42%; --g-h: 60%; --g-x: 60%; --g-y: 44%; }
    }
    @keyframes la-glow-float-c {
      0%, 100% { transform: scale(1)    translate3d(0, 0, 0);     filter: hue-rotate(0deg)   saturate(1);   opacity: 1; }
      45%      { transform: scale(1.28) translate3d(-9%, 5%, 0);   filter: hue-rotate(-10deg) saturate(1.1); opacity: 0.7; }
    }
    /* Mandatory corner-seam accent centered exactly on the hero's
       bottom-left corner, a quiet echo of the blue wash. */
    .la-hero__glow--corner {
      top: auto;
      right: auto;
      bottom: -37vw;
      left: -37vw;
      width: 74vw;
      height: 74vw;
      background: radial-gradient(
        var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
        oklch(0.9 0.12 var(--g-h1, 240deg) / 0.15),
        transparent 60%
      );
      animation:
        la-glow-morph-corner 8s ease-in-out -4s infinite,
        la-glow-float-corner 11s ease-in-out -8s infinite;
    }
    @keyframes la-glow-morph-corner {
      0%, 100% { --g-h1: 240deg; --g-w: 46%; --g-h: 46%; --g-x: 50%; --g-y: 50%; }
      50%      { --g-h1: 262deg; --g-w: 55%; --g-h: 37%; --g-x: 40%; --g-y: 60%; }
    }
    @keyframes la-glow-float-corner {
      0%, 100% { transform: scale(1)    translate3d(0, 0, 0);    filter: saturate(1); }
      50%      { transform: scale(1.15) translate3d(9%, -6%, 0); filter: saturate(1.05); }
    }

    /* Mandatory mobile override: desktop's percentage-based blob positions
       clip away on a narrow screen. */
    @media (max-width: 900px) {
      .la-hero {
        background:
          radial-gradient(120% 70% at 85% 0%, oklch(0.9 0.12 240 / 0.28), transparent 62%),
          radial-gradient(90% 55% at 10% 35%, oklch(0.9 0.1 286 / 0.19), transparent 58%),
          radial-gradient(80% 50% at 70% 18%, oklch(0.9 0.12 240 / 0.08), transparent 55%),
          var(--color-paper);
      }
      .la-hero__glow {
        top: -8%; right: -28%; width: 100vh; height: 100vh; opacity: 1;
        background: radial-gradient(
          var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
          oklch(0.9 0.12 var(--g-h1, 240deg) / 0.45),
          oklch(0.9 0.1 var(--g-h2, 286deg) / 0.22) 42%,
          transparent 70%
        );
      }
      .la-hero__glow--bottom {
        bottom: 18%; left: -35%; width: 85vh; height: 85vh;
        background: radial-gradient(
          var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
          oklch(0.9 0.12 var(--g-h1, 240deg) / 0.28),
          transparent 68%
        );
      }
      .la-hero__glow--c {
        top: 4%; left: 42%; width: 65vh; height: 65vh;
        background: radial-gradient(
          var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
          oklch(0.9 0.1 var(--g-h1, 286deg) / 0.16),
          transparent 66%
        );
      }
    }

    /* Hero card (hero-panel skill): the whole hero sits on one dark inset
       panel capped at the content width. The pastel page glows above stay on
       the section and read around it; inside, a blue -> violet wash (hues
       240 / 286, this page's two accents) sits behind the copy. */
    .la-hero__panel {
      position: relative; z-index: 1; overflow: hidden;
      max-width: var(--container-inner); margin-inline: auto;
      background: var(--color-ink); color: var(--color-on-dark);
      border-radius: var(--radius-xl);
      padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
    }
    .la-hero__wash {
      position: absolute; z-index: 0; pointer-events: none;
      /* Fade the box itself to transparent before its edge: the morph moves the
         gradient centre off-centre, and a clipped edge would show as a hard arc. */
      -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
      mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
      top: -40%; left: -20%; width: 70vw; height: 70vw;
      background: radial-gradient(
        var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
        oklch(0.72 0.17 var(--g-h1, 240deg) / 0.28),
        oklch(0.8 0.16 var(--g-h2, 286deg) / 0.12) 46%,
        transparent 70%
      );
      animation:
        la-wash-morph 9s ease-in-out -3s infinite,
        la-wash-float 13s ease-in-out -7s infinite;
    }
    @keyframes la-wash-morph {
      0%, 100% { --g-h1: 240deg; --g-h2: 286deg; --g-w: 46%; --g-h: 56%; --g-x: 50%; --g-y: 46%; }
      50%      { --g-h1: 286deg; --g-h2: 240deg; --g-w: 56%; --g-h: 42%; --g-x: 66%; --g-y: 62%; }
    }
    @keyframes la-wash-float {
      0%, 100% { transform: scale(1)    translate3d(0, 0, 0);    filter: saturate(1); }
      50%      { transform: scale(1.18) translate3d(-8%, 8%, 0); filter: saturate(1.1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .la-hero__glow, .la-hero__glow--bottom, .la-hero__glow--c, .la-hero__glow--corner,
      .la-hero__wash { animation: none; }
    }
    /* Copy takes the wider column; both columns centre on one midline. */
    .la-hero__grid {
      position: relative; z-index: 2;
      display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
      gap: clamp(3rem, 7vw, 6.5rem); align-items: center;
    }
    .la-hero__copy { position: relative; min-width: 0; }
    /* Platform icons stand in a column on the left of the illustration. */
    .la-stage {
      position: relative; min-width: 0;
      display: flex; align-items: center; gap: var(--space-4);
    }
    .la-stage .la-scene { flex: 1 1 auto; min-width: 0; }
    .la-hero__title {
      font-family: var(--font-title);
      font-weight: 800;
      font-size: clamp(2.25rem, 4.4vw, 3.6rem);
      line-height: 0.97;
      letter-spacing: -0.03em;
      color: var(--color-on-dark);
      margin-top: var(--space-4);
    }
    .la-grad {
      color: var(--color-ink);
      -webkit-text-fill-color: var(--color-ink);
    }
    .la-hero__lead {
      max-width: none;
      text-wrap: pretty;
      margin-top: var(--space-4);
      font-size: var(--fs-lead);
      font-weight: 500;
      line-height: 1.55;
      color: var(--color-on-dark);
    }
    .la-hero__lead strong {
      font-weight: 800;
      color: var(--color-on-dark);
    }
    .la-hero__sub {
      max-width: 60ch; margin-top: var(--space-3);
      font-size: var(--fs-md); line-height: 1.6; color: var(--color-on-dark-muted);
    }
    .la-hero__cta { margin-top: var(--space-6); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
    .la-hero__logos {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }
    .la-hero__logos img,
    .la-hero__logos svg {
      display: block;
      width: 36px;
      height: 36px;
      object-fit: contain;
    }
    /* The Apple mark ships in a mid grey; on the black card it goes light. */
    .la-hero__logos img[src$="apple.svg"] { filter: brightness(0) invert(1) opacity(0.86); }

    /* ---- Web -> native scene: wireframe lines on the black card ----
       Every surface is a 1px line with no grey fill. Colour only marks the
       highlighted parts: the active nav item, the chart line, the active chip. */
    .la-scene {
      --la-line: rgba(255, 255, 255, 0.18);
      --la-wire: 1px solid rgba(255, 255, 255, 0.16);
      --la-blue: oklch(0.69 0.15 240);
      --la-vio: oklch(0.66 0.16 286);
      position: relative;
      width: 100%;
      padding: 0 0 16%;
      /* Never shorter than the phone (36% wide at 300:610 = 73% of the
         width tall), so the phone cannot rise above the scene into the
         buttons when the columns stack. */
      aspect-ratio: 100 / 73.2;
      display: flex; flex-direction: column; justify-content: center;
    }

    /* Desktop web app: the Lovable app */
    .la-browser {
      position: relative; z-index: 1;
      width: 84%;
      background: transparent;
      border: 1px solid var(--la-line);
      border-radius: var(--radius-lg); overflow: hidden;
    }
    .la-browser__bar {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 14px; background: var(--color-ink);
      border-bottom: 1px solid var(--la-line);
    }
    .la-browser__dots { display: flex; gap: 6px; flex: 0 0 auto; }
    .la-browser__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
    .la-browser__url {
      flex: 0 0 52%; margin-left: auto; min-width: 0; height: 18px; border-radius: var(--radius-pill);
      border: var(--la-wire); background: transparent;
      display: flex; align-items: center; padding: 0 9px;
      font-family: var(--font-mono); font-size: 0.5rem; color: var(--color-on-dark-muted);
      letter-spacing: 0.02em; overflow: hidden; white-space: nowrap;
    }

    /* body = sidebar + main, tall enough to read as an app window */
    .la-web { display: grid; grid-template-columns: 60px 1fr; min-height: clamp(180px, 19vw, 260px); }
    .la-web__side {
      border-right: 1px solid var(--la-line);
      padding: 14px 10px; display: flex; flex-direction: column; gap: 9px;
    }
    .la-web__nav { height: 9px; box-sizing: border-box; border-radius: var(--radius-pill); border: var(--la-wire); }
    .la-web__nav:nth-child(2) { width: 86%; }
    .la-web__nav:nth-child(3) { width: 94%; }
    .la-web__nav:nth-child(4) { width: 74%; }
    .la-web__nav:nth-child(5) { width: 90%; }
    .la-web__nav--on {
      height: 14px; display: flex; align-items: center; padding-left: 4px;
      border-color: var(--la-vio);
    }
    .la-web__nav--on b { width: 4px; height: 4px; border-radius: 50%; background: var(--la-vio); }

    .la-web__main {
      padding: 14px; display: grid; gap: 10px;
      grid-template-rows: auto auto 1fr;
    }
    .la-web__topbar { display: flex; align-items: center; gap: 8px; }
    .la-web__title { height: 9px; width: 42%; box-sizing: border-box; border-radius: var(--radius-pill); border: var(--la-wire); }
    .la-web__btn {
      margin-left: auto; width: 56px; height: 18px; border-radius: var(--radius-pill);
      border: 1px solid var(--la-vio);
    }

    .la-web__row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
    .la-web__card {
      border: var(--la-wire); border-radius: var(--radius-sm);
      padding: 10px; display: grid; gap: 8px; justify-items: start;
    }
    .la-web__card i,
    .la-web__card b { box-sizing: border-box; border-radius: var(--radius-pill); border: var(--la-wire); }
    .la-web__card i { height: 7px; width: 72%; }
    .la-web__card b { height: 9px; width: 44%; }
    .la-web__card--on b { border-color: var(--la-blue); background: var(--la-blue); }

    /* Shared line chart: same shape on web and native */
    .la-chart {
      position: relative; overflow: hidden;
      border: var(--la-wire); border-radius: var(--radius-sm);
      background: transparent;
    }
    .la-chart svg { position: absolute; top: 24%; left: 9%; width: 82%; height: 54%; display: block; color: var(--la-vio); }
    .la-chart__dot {
      position: absolute; right: 9%; top: 24%;
      width: 7px; height: 7px; border-radius: 50%; background: var(--la-vio);
      transform: translate(50%, -50%);
    }
    .la-web__row2 { display: grid; grid-template-columns: 1.75fr 1fr; gap: 9px; min-height: 0; }
    .la-web__chart { min-height: 96px; }
    .la-web__list {
      border: var(--la-wire); border-radius: var(--radius-sm);
      padding: 11px 10px; display: grid; gap: 9px; align-content: start;
    }
    .la-web__list i { height: 7px; box-sizing: border-box; border-radius: var(--radius-pill); border: var(--la-wire); }
    .la-web__list i:first-child { width: 78%; }
    .la-web__list i:nth-child(2) { width: 92%; }
    .la-web__list i:nth-child(3) { width: 64%; }
    .la-web__list i:nth-child(4) { width: 84%; }

    /* Native app: solid black phone body (device-frame rule), a 1px light
       outline so it reads on the black card, and a wireframe screen. */
    .la-phone {
      position: absolute; z-index: 3;
      right: 0; bottom: 0;
      width: 36%; aspect-ratio: 300 / 610;
      background: #0A0A08;
      outline: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: var(--radius-xl);
      padding: 7px;
      overflow: hidden;
    }
    .la-phone__notch {
      position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
      width: 34%; height: 12px; border-radius: var(--radius-pill);
      border: var(--la-wire); z-index: 3;
    }
    .la-phone__screen {
      position: relative; overflow: hidden; height: 100%;
      border-radius: var(--radius-lg);
      border: var(--la-wire);
      background: transparent;
      padding: 13px 12px 12px;
      display: flex; flex-direction: column;
    }
    .la-app__bar {
      display: flex; align-items: center; justify-content: space-between;
      font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.04em;
      color: var(--color-on-dark-muted);
    }
    .la-app__chart { flex: 0 0 auto; height: 64px; margin-top: 20px; }
    .la-app__lines { margin-top: 12px; display: grid; gap: 7px; }
    .la-app__lines i { height: 7px; box-sizing: border-box; border-radius: var(--radius-pill); border: var(--la-wire); }
    .la-app__lines i:first-child { width: 84%; }
    .la-app__lines i:last-child { width: 58%; }
    .la-app__chips { display: flex; gap: 6px; margin-top: 14px; }
    .la-app__chip { flex: 1; height: 18px; box-sizing: border-box; border-radius: var(--radius-pill); border: var(--la-wire); }
    .la-app__chip--on { border-color: var(--la-blue); }
    .la-app__rows { margin-top: 14px; display: grid; gap: 7px; }
    .la-app__rows span {
      height: 26px; border: var(--la-wire); border-radius: var(--radius-sm);
      display: flex; align-items: center; gap: 8px; padding: 0 9px;
    }
    .la-app__rows b { flex: 0 0 auto; width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%; border: var(--la-wire); }
    .la-app__rows span:first-child b { border-color: var(--la-vio); background: var(--la-vio); }
    .la-app__rows i { height: 6px; box-sizing: border-box; border-radius: var(--radius-pill); border: var(--la-wire); width: 62%; }
    .la-app__rows span:nth-child(2) i { width: 74%; }
    /* Two rows fit every desktop phone height; the third would push the
       tab bar out of the screen at 1280. */
    .la-app__rows span:nth-child(3) { display: none; }
    .la-app__tab {
      margin-top: auto; display: flex; justify-content: space-around;
      padding-top: 12px; border-top: 1px solid var(--la-line);
    }
    .la-app__tab i { width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: var(--la-wire); display: block; }
    .la-app__tab i:first-child { border-color: var(--la-vio); }

    /* Transform label: dark, violet-tinted, in the empty strip under the
       browser and left of the phone, so it touches neither. */
    .la-convert {
      position: absolute; z-index: 4;
      left: 3%; bottom: 2%;
      display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap;
      background: color-mix(in srgb, var(--la-vio) 18%, var(--color-ink));
      border: 1px solid color-mix(in srgb, var(--la-vio) 48%, transparent);
      color: var(--color-on-dark);
      font-family: var(--font-mono); font-size: var(--fs-label-xs); letter-spacing: 0.12em; text-transform: uppercase;
      padding: 7px 12px; border-radius: var(--radius-pill);
      box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.9);
    }
    .la-convert__arrow { color: var(--color-on-dark-muted); font-size: 0.9rem; line-height: 1; }

    /* ---- Hero illustration motion ----
       On load the platform icons rise in one by one, then the browser, the
       phone and the convert label. Entrance animates `transform`; hover uses
       the separate `translate` property, so the two never overwrite each
       other. */
    @keyframes la-rise {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: none; }
    }
    .la-hero__logos > *,
    .la-browser, .la-phone, .la-convert,
    .la-app__chart, .la-app__lines, .la-app__chips, .la-app__rows {
      animation: la-rise 0.6s var(--ease-out) both;
    }
    .la-hero__logos > :nth-child(1) { animation-delay: 0.10s; }
    .la-hero__logos > :nth-child(2) { animation-delay: 0.18s; }
    .la-hero__logos > :nth-child(3) { animation-delay: 0.26s; }
    .la-hero__logos > :nth-child(4) { animation-delay: 0.34s; }
    .la-hero__logos > :nth-child(5) { animation-delay: 0.42s; }
    .la-browser     { animation-delay: 0.30s; }
    .la-phone       { animation-delay: 0.55s; }
    .la-app__chart  { animation-delay: 0.75s; }
    .la-app__lines  { animation-delay: 0.83s; }
    .la-app__chips  { animation-delay: 0.91s; }
    .la-app__rows   { animation-delay: 0.99s; }
    .la-convert     { animation-delay: 0.85s; }

    .la-hero__logos > *,
    .la-browser, .la-phone, .la-convert {
      transition: translate 0.35s var(--ease-out), scale 0.35s var(--ease-out);
    }
    @media (hover: hover) {
      .la-hero__logos > :hover { translate: 0 -4px; scale: 1.08; }
      .la-scene:hover .la-browser { translate: -6px -4px; }
      .la-scene:hover .la-phone   { translate: 6px -8px; }
      .la-scene:hover .la-convert { translate: 0 -4px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .la-hero__logos > *,
      .la-browser, .la-phone, .la-convert,
      .la-app__chart, .la-app__lines, .la-app__chips, .la-app__rows {
        animation: none; transition: none; translate: none; scale: none;
      }
    }

    @media (max-width: 960px) {
      .la-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
      .la-stage { max-width: 520px; width: 100%; }
    }
    @media (max-width: 720px) {
      .la-hero { padding-top: calc(var(--header-height) + var(--space-3)); padding-bottom: 0; }
      .la-hero__panel { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); }
      .la-hero__title { font-size: clamp(1.75rem, 8vw, 2.4rem); margin-top: var(--space-3); }
      .la-hero__lead { margin-top: var(--space-3); }
      .la-hero__cta { margin-top: var(--space-5); }
      .la-stage { flex-direction: column; align-items: stretch; }
      .la-hero__logos { flex-direction: row; justify-content: center; gap: 16px; }
      .la-hero__logos img,
      .la-hero__logos svg { width: 30px; height: 30px; }
    }
    /* Phones: a short illustration. The sidebar, the stat cards, the list and
       the phone's text lines and rows go; the chart, chips and tab bar stay. */
    @media (max-width: 640px) {
      .la-hero__cta .btn { width: 100%; }
      /* The phone h1 size (--fs-h1-mobile) is too big for "Your Lovable app,"
         on one line, so the desktop break goes and the title balances. */
      .la-hero__title { text-wrap: balance; }
      .la-hero__title br { display: none; }
      .la-scene { padding: 5% 0 13%; aspect-ratio: 100 / 61; }
      .la-browser { width: 80%; border-radius: var(--radius-md); }
      .la-browser__bar { padding: 7px 10px; }
      .la-browser__url { height: 15px; font-size: 0.42rem; }
      .la-web { grid-template-columns: 1fr; min-height: 118px; }
      .la-web__side,
      .la-web__row,
      .la-web__list { display: none; }
      .la-web__main { padding: 10px; gap: 8px; grid-template-rows: auto 1fr; }
      .la-web__row2 { grid-template-columns: 1fr; }
      .la-web__chart { min-height: 60px; }
      .la-phone { width: 30%; padding: 5px; border-radius: var(--radius-lg); }
      .la-phone__notch { top: 10px; height: 8px; }
      .la-phone__screen { padding: 10px 8px 8px; border-radius: var(--radius-md); }
      .la-app__bar { font-size: 0.4rem; }
      .la-app__lines,
      .la-app__rows { display: none; }
      .la-app__chart { height: 44px; margin-top: 12px; }
      .la-app__chips { margin-top: 10px; gap: 4px; }
      .la-app__chip { height: 12px; }
      .la-app__tab { padding-top: 7px; }
      .la-app__tab i { width: 11px; height: 11px; }
      .la-convert { font-size: 0.5rem; padding: 5px 9px; bottom: 0; }
    }

    /* ---- Hook band ---- */
    .la-hook { text-align: center; }
    .la-hook__title {
      font-family: var(--font-title); font-weight: 700;
      font-size: clamp(1.75rem, 4vw, 2.75rem); letter-spacing: -0.02em; line-height: 1.03;
      max-width: 22ch; margin: var(--space-3) auto 0;
    }
    .la-hook__body { max-width: 62ch; margin: var(--space-4) auto 0; font-size: var(--fs-md); line-height: 1.6; color: var(--color-ink-60); }
    .la-hook__punch {
      display: inline-block; margin-top: var(--space-5);
      font-family: var(--font-title); font-weight: 700; font-size: var(--fs-h3);
      letter-spacing: -0.01em;
    }
    .la-hook__punch .la-underline { color: var(--color-secondary-magenta); }

    /* ---- Architecture flow ---- */
    .la-arch {
      display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch;
      gap: var(--space-3); margin-top: var(--space-6);
    }
    .la-node {
      display: flex; flex-direction: column; justify-content: center;
      position: relative; overflow: hidden;
      background: var(--color-surface-light); border: 1px solid var(--border-ink);
      border-radius: var(--radius-lg); padding: var(--space-5); text-align: center;
    }
    .la-node--dark,
    .la-node--hero {
      background: var(--color-ink); border-color: transparent; color: var(--color-on-dark);
      --node-accent: var(--color-secondary-cyan);
    }
    .la-node--dark::after,
    .la-node--hero::after {
      content: "";
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background: radial-gradient(
        ellipse 80% 60% at 100% 100%,
        color-mix(in srgb, var(--node-accent) 28%, transparent),
        transparent 58%
      );
    }
    .la-node--dark > *,
    .la-node--hero > * { position: relative; z-index: 1; }
    .la-arch .la-node--dark:first-child { --node-accent: var(--color-secondary-cyan); }
    .la-node--hero { --node-accent: var(--color-secondary-violet); }
    .la-arch .la-node--dark:last-child { --node-accent: var(--color-secondary-magenta); }
    .la-node__k { font-family: var(--font-mono); font-size: var(--fs-label-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-secondary-magenta); }
    .la-node--dark .la-node__k,
    .la-node--hero .la-node__k { color: var(--color-secondary-cyan); }
    .la-node__t { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -0.01em; margin-top: 8px; }
    .la-node__d { font-size: var(--fs-sm); color: var(--color-ink-45); margin-top: 8px; line-height: 1.5; }
    .la-node--dark .la-node__d,
    .la-node--hero .la-node__d { color: var(--color-on-dark-muted); }
    .la-node__split { display: flex; flex-direction: column; gap: 10px; }
    .la-node__plat {
      display: flex; align-items: center; justify-content: center; gap: 0.5em;
      background: rgba(255, 255, 255, 0.09);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: var(--radius-sm); padding: 12px;
      color: #fff;
      font-family: var(--font-title); font-weight: 600; font-size: var(--fs-md);
    }
    .la-node__plat small { color: var(--node-accent); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; }
    .la-arrow { display: grid; place-items: center; color: var(--color-ink-35); font-size: 1.4rem; }

    /* ---- Feature grid (what you get) ---- */
    .la-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
    .la-feat {
      background: var(--color-surface-light); border-radius: var(--radius-lg);
      padding: var(--space-5); border: 1px solid transparent;
      transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    }
    .la-feat:hover { transform: translateY(-3px); border-color: var(--border-ink); box-shadow: 0 22px 44px -30px rgba(10,10,8,0.5); }
    .la-feat__check {
      width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
      background: color-mix(in srgb, var(--color-secondary-violet) 22%, var(--color-paper));
      color: color-mix(in srgb, var(--color-secondary-violet) 82%, #000);
      font-weight: 800; font-family: var(--font-title);
    }
    .la-feat__t { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-md); margin-top: var(--space-3); }
    .la-feat__d { font-size: var(--fs-sm); color: var(--color-ink-60); line-height: 1.55; margin-top: 8px; }
    .la-feat--accent { background: var(--color-ink); color: var(--color-on-dark); }
    .la-feat--accent .la-feat__d { color: var(--color-on-dark-muted); }
    .la-feat--accent .la-feat__check { background: color-mix(in srgb, var(--color-secondary-cyan) 26%, var(--color-ink)); color: var(--color-secondary-cyan); }

    @media (max-width: 960px) {
      .la-arch { grid-template-columns: 1fr; }
      .la-arch .la-arrow { transform: rotate(90deg); padding: 4px 0; }
      .la-feats { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 560px) {
      .la-feats { grid-template-columns: 1fr; }
    }

    /* ---- Hero eyebrow: the Lovable wordmark and label as plain text,
       no pill. The partner chip sits beside it in .la-hero__top. ---- */
    .la-eyebrow {
      background: none; border: 0; border-radius: 0;
      color: var(--color-on-dark);
      backdrop-filter: none; gap: 0.5em; padding: 0;
    }
    .la-eyebrow__arrow { color: var(--color-on-dark-muted); font-family: var(--font-mono); }
    /* Eyebrow with the Lovable partner pill on the same line, to its right,
       same treatment as the Coherence hero. */
    .la-hero__top {
      display: flex; align-items: center; flex-wrap: wrap;
      gap: var(--space-2) var(--space-4);
    }
    .la-hero__top .hero__trust-chip {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.22);
      padding: 6px 14px;
    }

    /* ---- Recognition / the gap ---- */
    .la-gap {
      position: relative;
      max-width: none;
      width: 100%;
      overflow-x: clip;
      overflow-y: visible;
      padding-bottom: var(--space-7);
    }
    .la-gap__glow {
      position: absolute;
      z-index: 0;
      bottom: -4%;
      left: -28vw;
      width: min(78vw, 900px);
      height: min(78vw, 900px);
      border-radius: 50%;
      background: radial-gradient(
        50% 50% at 50% 50%,
        oklch(0.72 0.18 305 / 0.32),
        oklch(0.7 0.14 312 / 0.12) 44%,
        transparent 72%
      );
      filter: blur(64px);
      opacity: 0.5;
      pointer-events: none;
      animation: nc-hue 11s ease-in-out infinite alternate;
    }
    .la-gap > *:not(.la-gap__glow) { position: relative; z-index: 1; }
    .la-gap__intro { max-width: 48ch; margin: calc(var(--space-4) * -1) auto var(--space-5); text-align: center; font-size: var(--fs-md); line-height: 1.6; color: var(--color-ink-60); }
    .la-gap__list { display: grid; gap: var(--space-3); max-width: 900px; margin: 0 auto; }
    .la-gap__item {
      display: flex; gap: var(--space-4); align-items: flex-start;
      background: var(--color-ink); border: 1px solid transparent;
      border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
      color: var(--color-on-dark);
    }
    .la-gap__mark {
      flex: 0 0 auto; display: block;
      background: none; color: var(--color-secondary-magenta);
      font-family: var(--font-mono); font-size: 1.15rem; font-weight: 600;
      letter-spacing: 0.04em; line-height: 1; margin-top: 2px;
    }
    .la-gap__item p { margin: 0; font-size: var(--fs-md); line-height: 1.55; color: var(--color-on-dark-muted); }
    .la-gap__item strong { color: var(--color-on-dark); font-weight: 600; }
    .la-gap__close {
      max-width: 56ch; margin: var(--space-6) auto 0; text-align: center;
      font-family: var(--font-title); font-weight: 700; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; color: var(--color-ink);
    }

    /* ---- Rebuild centerpiece (architecture) ---- */
    .la-node__tag {
      align-self: center; margin: 0 auto 10px; font-family: var(--font-mono); font-size: var(--fs-label-xs); letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--color-ink);
      background: linear-gradient(120deg, var(--color-secondary-cyan), var(--color-secondary-violet));
      padding: 4px 12px; border-radius: var(--radius-pill);
    }

    /* ---- What you get: accent closer pair ---- */
    .la-closers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-4); }

    /* ---- Process steps ---- */
    .la-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
    .la-step {
      --step-accent: var(--color-secondary-cyan);
      position: relative;
      background:
        radial-gradient(
          ellipse 90% 70% at 100% 100%,
          color-mix(in srgb, var(--step-accent) 30%, transparent),
          transparent 62%
        ),
        var(--color-ink);
      border: 1px solid transparent;
      border-radius: var(--radius-lg);
      padding: var(--space-5);
      color: var(--color-on-dark);
    }
    .la-step:nth-child(2) { --step-accent: var(--color-secondary-violet); }
    .la-step:nth-child(3) { --step-accent: var(--color-secondary-magenta); }
    .la-step:nth-child(4) { --step-accent: var(--color-secondary-cyan); }
    .la-step:nth-child(5) { --step-accent: var(--color-secondary-violet); }
    .la-step + .la-step::before {
      content: "→";
      position: absolute;
      right: 100%;
      top: 50%;
      width: var(--space-4);
      transform: translateY(-50%);
      text-align: center;
      font-family: var(--font-mono);
      font-size: 1rem;
      line-height: 1;
      color: var(--color-ink-35);
    }
    .la-step__ic {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      margin-bottom: var(--space-3);
      border-radius: 11px;
      background: color-mix(in srgb, var(--step-accent) 24%, var(--color-ink));
      color: var(--step-accent);
    }
    .la-step__ic svg { display: block; width: 19px; height: 19px; }
    .la-step__t { margin: 0; font-family: var(--font-title); font-weight: 700; font-size: var(--fs-md); line-height: 1.25; color: var(--color-on-dark); }
    .la-step__d { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--color-on-dark-muted); line-height: 1.55; }

    /* ---- Why native ---- */
    .la-why { max-width: 58ch; margin: 0 auto; text-align: center; }
    .la-why .section__title { margin-bottom: var(--space-4); }
    .la-why__lead {
      margin: 0;
      font-size: var(--fs-lead);
      line-height: 1.55;
      color: var(--color-ink-60);
    }
    .la-why__signals {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 10px 0;
      max-width: 52rem;
      margin: var(--space-5) auto 0;
      padding: 0;
    }
    .la-why__signals li {
      display: inline-flex;
      align-items: center;
      gap: 0.55em;
      margin: 0;
      padding: 0 1.1rem;
      font-family: var(--font-tag);
      font-size: var(--fs-tag);
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--color-ink-45);
      line-height: 1.35;
      white-space: nowrap;
    }
    .la-why__signals li + li {
      border-left: 1px solid var(--border-ink);
    }
    .la-why__signals li::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-secondary-violet);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary-violet) 22%, transparent);
      flex: 0 0 auto;
    }
    @media (max-width: 720px) {
      .la-why__signals { gap: 8px 0; }
      .la-why__signals li {
        padding: 0 0.85rem;
        white-space: normal;
        text-align: left;
      }
    }
    @media (max-width: 640px) {
      .la-why__signals { display: none; }
    }

    /* ---- Comparison: native vs PWA ---- */
    .la-vs { position: relative; max-width: 940px; margin: var(--space-7) auto 0; display: grid; grid-template-columns: 1.55fr 1fr 1fr; align-items: stretch; }
    .la-vs__col { display: flex; flex-direction: column; }
    .la-vs__col--native {
      position: relative; background: var(--color-ink); border-radius: var(--radius-lg);
      box-shadow: 0 34px 74px -36px rgba(10,10,8,0.55);
    }
    .la-vs__col--native::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
      background: linear-gradient(160deg, color-mix(in srgb, var(--color-secondary-cyan) 55%, transparent), color-mix(in srgb, var(--color-secondary-violet) 45%, transparent) 60%, transparent);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
    }
    .la-vs__tag {
      position: absolute; top: -11px; left: 50%; transform: translateX(-50%); z-index: 2;
      font-family: var(--font-tag); font-size: var(--fs-tag); letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--color-ink); background: var(--color-secondary-violet);
      padding: 4px 12px; border-radius: var(--radius-pill);
      white-space: nowrap;
    }
    .la-vs__h {
      display: flex; align-items: flex-end; height: 72px; padding: 0 var(--space-5) var(--space-3);
      font-family: var(--font-title); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -0.01em;
    }
    .la-vs__col--label .la-vs__h { color: var(--color-ink-45); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-mono); }
    .la-vs__col--native .la-vs__h { color: #fff; }
    .la-vs__col--pwa .la-vs__h { color: var(--color-ink); }
    .la-vs__c { display: flex; align-items: center; height: 62px; padding: 0 var(--space-5); font-size: var(--fs-md); }
    .la-vs__col--label .la-vs__c { color: var(--color-ink); font-weight: 500; border-top: 1px solid var(--border-ink); }
    .la-vs__col--pwa .la-vs__c { border-top: 1px solid var(--border-ink); }
    .la-vs__col--native .la-vs__c { border-top: 1px solid rgba(255,255,255,0.08); }
    .la-vs__v { display: inline-flex; align-items: center; gap: 0.6em; font-weight: 600; color: #fff; }
    .la-vs__v--muted { color: var(--color-ink-45); font-weight: 500; }
    .la-vs__v--plain { color: #fff; font-weight: 500; }
    .la-vs__col--pwa .la-vs__v--plain { color: var(--color-ink-45); }
    .la-vs__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
    .la-vs__dot--yes { background: var(--color-secondary-violet); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-secondary-violet) 24%, transparent); }
    .la-vs__dot--warn { background: var(--color-secondary-magenta); }
    .la-vs__dot--no { background: transparent; border: 1.5px solid var(--color-ink-25); }
    .la-vs__note { max-width: 60ch; margin: var(--space-5) auto 0; text-align: center; font-size: var(--fs-sm); color: var(--color-ink-45); line-height: 1.6; }
    /* The same comparison as a real table, for screen readers only. The
       visible .la-vs grid is drawn in columns and is aria-hidden. */
    .la-vs__sr {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }

    /* ---- Risk reversal ---- */
    .la-assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-6); }
    .la-assure__item {
      position: relative; overflow: clip;
      display: flex; gap: var(--space-3); align-items: flex-start;
      background: var(--color-ink); border: 1px solid transparent; border-radius: var(--radius-lg);
      padding: var(--space-5); color: var(--color-on-dark);
    }
    .la-assure__item::after {
      content: "";
      position: absolute; z-index: 0; pointer-events: none;
      inset: auto -22% -34% auto;
      width: 70%; aspect-ratio: 1; border-radius: 50%;
      background: radial-gradient(
        50% 50% at 50% 50%,
        color-mix(in srgb, var(--color-secondary-violet) 30%, transparent),
        transparent 72%
      );
      filter: blur(48px);
    }
    .la-assure__item > * { position: relative; z-index: 1; }
    .la-assure__ic {
      flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-family: var(--font-title);
      background: color-mix(in srgb, var(--color-secondary-cyan) 26%, var(--color-ink)); color: var(--color-secondary-cyan);
    }
    .la-assure__t { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-md); }
    .la-assure__d { font-size: var(--fs-sm); color: var(--color-on-dark-muted); line-height: 1.55; margin-top: 4px; }

    /* ---- FAQ ---- */
    .la-faq { max-width: 880px; margin: var(--space-6) auto 0; }
    .la-faq__item { border-bottom: 1px solid var(--border-ink); }
    .la-faq__q {
      cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
      padding: var(--space-4) 0; font-family: var(--font-title); font-weight: 700; font-size: var(--fs-faq); color: var(--color-ink);
    }
    .la-faq__q::-webkit-details-marker { display: none; }
    .la-faq__icon { color: var(--color-secondary-violet); }
    .la-faq__a { margin: 0; padding: 0 0 var(--space-4); font-size: var(--fs-md); line-height: 1.6; color: var(--color-ink-60); max-width: 72ch; }

    @media (max-width: 960px) {
      .la-closers { grid-template-columns: 1fr; }
      .la-steps { grid-template-columns: repeat(2, 1fr); }
      /* Two columns: a left-pointing arrow would sit outside the grid on every
         row break, so the flow reads from layout order instead. */
      .la-step + .la-step::before { display: none; }
      .la-assure { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 700px) {
      .la-vs { display: flex; flex-direction: column; gap: var(--space-4); }
      .la-vs__col--label {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
      }
      .la-vs__col--native,
      .la-vs__col--pwa { border-radius: var(--radius-lg); padding: 0 var(--space-4); }
      .la-vs__col--pwa {
        background: var(--color-surface-light);
        border: 1px solid var(--border-ink);
      }
      .la-vs__tag {
        position: static; transform: none; display: inline-block;
        margin: var(--space-3) 0 0; align-self: flex-start;
      }
      .la-vs__h {
        height: auto; align-items: baseline;
        padding: var(--space-3) 0 var(--space-2); font-size: var(--fs-lead);
      }
      .la-vs__c {
        height: auto; min-height: 52px; padding: var(--space-2) 0;
        gap: var(--space-3); justify-content: space-between; font-size: var(--fs-sm);
      }
      .la-vs__c::before {
        content: attr(data-label); font-weight: 500; line-height: 1.35;
      }
      .la-vs__col--native .la-vs__c::before { color: var(--color-on-dark-muted); }
      .la-vs__col--pwa .la-vs__c::before { color: var(--color-ink-45); }
      .la-vs__c:last-child { padding-bottom: var(--space-4); }
    }
    @media (max-width: 560px) {
      .la-steps { grid-template-columns: 1fr; }
      .la-step + .la-step::before {
        display: grid;
        place-items: center;
        right: auto;
        top: auto;
        left: 50%;
        bottom: 100%;
        width: var(--space-4);
        height: var(--space-4);
        transform: translateX(-50%) rotate(90deg);
      }
      .la-assure { grid-template-columns: 1fr; }
      .la-gap__item { padding: var(--space-4); }
    }

    /* ---- Shared components, recolored to match this page's violet/cyan/magenta gradient ---- */
    .voices__viewport::before {
      background:
        radial-gradient(42% 55% at 18% 30%, color-mix(in srgb, var(--color-secondary-cyan) 42%, transparent), transparent 70%),
        radial-gradient(48% 60% at 82% 45%, color-mix(in srgb, var(--color-secondary-violet) 46%, transparent), transparent 72%);
    }
    .voices__mark { color: color-mix(in srgb, var(--color-secondary-violet) 72%, transparent); }
    .cta__glow { background: radial-gradient(42% 90% at 50% 45%, oklch(0.78 0.13 300 / 0.4), transparent 68%); }