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

    /* ---- Hero: copy + device mock ---- */
    .la-hero {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
      align-items: center;
      gap: var(--space-7);
      max-width: none;
      width: 100%;
      margin: 0 auto;
      padding: calc(var(--space-8) + var(--header-height)) max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) var(--space-7);
      overflow-x: clip;
      overflow-y: visible;
    }
    /* Ambient hero wash: two morphing blobs on the page's own accent pair
       (logo blue + logo violet), drawn with the same mechanic as the
       homepage hero glow — animated @property custom vars (registered in
       styles.css) morph each gradient's hue, spread and centre instead of a
       fixed shape being moved or recolored. Boxes run large in vw and sit
       mostly off-canvas so only the soft fade tail ever shows on the page. */
    .la-hero__glow {
      position: absolute;
      z-index: 0;
      grid-column: 1 / -1;
      grid-row: 1;
      top: -22%;
      right: -38%;
      left: auto;
      width: 92vw;
      height: 92vw;
      background: radial-gradient(
        var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
        oklch(0.69 0.15 var(--g-h1, 240deg) / 0.16),
        oklch(0.66 0.16 var(--g-h2, 260deg) / 0.07) 44%,
        transparent 64%
      );
      pointer-events: none;
      animation:
        la-glow-morph 6s ease-in-out infinite,
        la-glow-float 9s ease-in-out infinite;
    }
    /* Swaps fully from blue into this page's other accent (violet) and back —
       both stops move forward through the blue/violet range, never wrapping
       through an unrelated hue. Centre and size swing ~38-40 points / 20%. */
    @keyframes la-glow-morph {
      0%, 100% { --g-h1: 240deg; --g-h2: 260deg; --g-w: 44%; --g-h: 54%; --g-x: 46%; --g-y: 54%; }
      50%      { --g-h1: 300deg; --g-h2: 320deg; --g-w: 53%; --g-h: 43%; --g-x: 84%; --g-y: 14%; }
    }
    @keyframes la-glow-float {
      0%, 100% { transform: scale(1)    translate3d(0, 0, 0);     filter: saturate(1); }
      50%      { transform: scale(1.22) translate3d(-11%, 9%, 0); filter: saturate(1.1); }
    }
    .la-hero__glow--bottom {
      top: auto;
      right: -34%;
      bottom: -34%;
      left: auto;
      width: 64vw;
      height: 64vw;
      background: radial-gradient(
        var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
        oklch(0.66 0.16 var(--g-h1, 286deg) / 0.15),
        transparent 58%
      );
      animation:
        la-glow-morph-violet 7s ease-in-out -5s infinite,
        la-glow-float-violet 10s ease-in-out -9s infinite;
    }
    /* Swaps back toward blue (~240deg) so the two hero blobs trade colors */
    @keyframes la-glow-morph-violet {
      0%, 100% { --g-h1: 286deg; --g-w: 44%; --g-h: 44%; --g-x: 50%; --g-y: 50%; }
      50%      { --g-h1: 240deg; --g-w: 53%; --g-h: 35%; --g-x: 14%; --g-y: 86%; }
    }
    @keyframes la-glow-float-violet {
      0%, 100% { transform: scale(1.06) translate3d(0, 0, 0);      filter: saturate(1); }
      50%      { transform: scale(0.86) translate3d(13%, -10%, 0); filter: saturate(1.12); }
    }
    /* A quiet third touch centered exactly on the hero's bottom-left corner —
       the seam where the hero meets the next section — so that corner doesn't
       read empty next to the copy. Echoes the violet already in the wash
       rather than adding a third color. Sized and offset in matching vw units
       so the box's own centre, not its edge, lands on the corner point. */
    .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.66 0.16 var(--g-h1, 286deg) / 0.14),
        transparent 58%
      );
      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: 286deg; --g-w: 46%; --g-h: 46%; --g-x: 50%; --g-y: 50%; }
      50%      { --g-h1: 240deg; --g-w: 55%; --g-h: 37%; --g-x: 14%; --g-y: 14%; }
    }
    @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); }
    }
    .la-hero__copy { position: relative; z-index: 1; grid-column: 1; grid-row: 1; }
    .la-stage { position: relative; z-index: 1; grid-column: 2; grid-row: 1; display: flex; justify-content: center; min-width: 0; }
    .la-hero__title {
      font-family: var(--font-title);
      font-weight: 800;
      font-size: clamp(2.4rem, 5.2vw, 4rem);
      line-height: 1.02;
      letter-spacing: -0.03em;
      margin-top: var(--space-3);
    }
    .la-grad {
      color: var(--color-ink);
      -webkit-text-fill-color: var(--color-ink);
    }
    .la-hero__lead {
      max-width: 40ch;
      margin-top: var(--space-4);
      font-size: var(--fs-lead);
      line-height: 1.55;
      color: var(--color-ink-60);
    }
    .la-hero__lead strong {
      font-weight: 800;
      color: var(--color-ink);
    }
    .la-hero__cta { margin-top: var(--space-6); display: flex; gap: 14px; flex-wrap: wrap; }

    /* ---- Web → Native scene — dark wireframe, single violet accent ---- */
    .la-scene {
      --la-canvas: #0B0B0F;
      --la-line: rgba(255, 255, 255, 0.11);
      --la-line-soft: rgba(255, 255, 255, 0.06);
      --la-fill: rgba(255, 255, 255, 0.07);
      --la-fill-strong: rgba(255, 255, 255, 0.14);
      --la-vio: var(--color-secondary-violet);
      /* centre of the ring set, and of the bloom (higher up) */
      --la-ring-cx: 76%;
      --la-ring-cy: 20%;
      --la-glow-cx: 78%;
      --la-glow-cy: -2%;
      position: relative; z-index: 1;
      width: min(540px, 96%); aspect-ratio: 540 / 470;
      transform: scale(1.16); transform-origin: center right;
    }
    .la-hero__logos {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-top: var(--space-4);
    }
    .la-hero__logos img,
    .la-hero__logos svg {
      display: block;
      width: 42px;
      height: 42px;
      object-fit: contain;
    }

    /* Round violet → blue bloom (logo colours), sitting above the ring centre */
    .la-scene::before {
      content: ""; position: absolute; z-index: 0; pointer-events: none;
      left: var(--la-glow-cx); top: var(--la-glow-cy);
      width: 168%; aspect-ratio: 1;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(
        50% 50% at 50% 50%,
        color-mix(in srgb, var(--la-vio) 58%, transparent) 0%,
        color-mix(in srgb, var(--la-vio) 38%, transparent) 30%,
        color-mix(in srgb, var(--color-secondary-cyan) 24%, transparent) 52%,
        transparent 72%
      );
      animation: nc-hue 9s ease-in-out infinite alternate;
    }

    /* Concentric rings on the page itself, behind the devices — same centre */
    .la-scene__arcs {
      position: absolute; z-index: 0; pointer-events: none;
      left: var(--la-ring-cx); top: var(--la-ring-cy);
      width: 190%; aspect-ratio: 1;
      transform: translate(-50%, -50%);
      background: repeating-radial-gradient(
        circle at 50% 50%,
        transparent 0 71px,
        color-mix(in srgb, var(--la-vio) 52%, transparent) 71px 72px
      );
      /* radial falloff × a fade at the top, so the rings never hit the page edge */
      -webkit-mask-image:
        radial-gradient(circle closest-side at 50% 50%, #000 0%, rgba(0,0,0,0.78) 50%, transparent 100%),
        linear-gradient(to bottom, transparent 20%, #000 33%);
      -webkit-mask-composite: source-in;
      mask-image:
        radial-gradient(circle closest-side at 50% 50%, #000 0%, rgba(0,0,0,0.78) 50%, transparent 100%),
        linear-gradient(to bottom, transparent 20%, #000 33%);
      mask-composite: intersect;
      animation: nc-hue 9s ease-in-out infinite alternate;
      animation-delay: -4s;
    }

    /* Desktop web app — the Lovable app, drawn as a wireframe */
    .la-browser {
      position: absolute; z-index: 1;
      top: 2%; left: 0; width: 90%;
      background: color-mix(in srgb, #fff 3%, var(--la-canvas));
      border: 1px solid var(--la-line);
      border-radius: 14px; overflow: hidden;
      box-shadow: 0 40px 80px -46px rgba(10,10,8,0.55), 0 8px 20px -14px rgba(10,10,8,0.35);
      animation: la-float-a 7s ease-in-out infinite alternate;
    }
    .la-browser__bar {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 12px; border-bottom: 1px solid var(--la-line-soft);
    }
    .la-browser__dots { display: flex; gap: 6px; flex: 0 0 auto; }
    .la-browser__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--la-fill-strong); }
    .la-browser__dots i:first-child { background: var(--la-vio); }
    .la-browser__url {
      flex: 0 0 48%; margin-left: auto; min-width: 0; height: 16px; border-radius: var(--radius-pill);
      background: var(--la-fill);
      display: flex; align-items: center; padding: 0 9px;
      font-family: var(--font-mono); font-size: 0.42rem; color: rgba(255,255,255,0.38);
      letter-spacing: 0.02em; overflow: hidden; white-space: nowrap;
    }

    /* body = sidebar + main (reads as a real desktop app) */
    .la-web { display: grid; grid-template-columns: 64px 1fr; }
    .la-web__side {
      border-right: 1px solid var(--la-line-soft);
      padding: 12px 10px; display: flex; flex-direction: column; gap: 8px;
    }
    .la-web__nav { height: 9px; border-radius: 5px; background: var(--la-fill); }
    .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: 13px; display: flex; align-items: center; padding-left: 5px;
      background: color-mix(in srgb, var(--la-vio) 26%, transparent);
      border-radius: var(--radius-pill);
    }
    .la-web__nav--on b { width: 4px; height: 4px; border-radius: 50%; background: var(--la-vio); }

    .la-web__main { padding: 12px; display: grid; gap: 10px; align-content: start; }
    .la-web__topbar { display: flex; align-items: center; gap: 8px; }
    .la-web__title { height: 8px; width: 96px; border-radius: 4px; background: var(--la-fill-strong); }
    .la-web__btn {
      margin-left: auto; width: 56px; height: 17px; border-radius: var(--radius-pill);
      border: 1px solid color-mix(in srgb, var(--la-vio) 62%, transparent);
    }

    .la-web__row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
    .la-web__card {
      border: 1px solid var(--la-line-soft); border-radius: 10px;
      padding: 10px; display: grid; gap: 8px; justify-items: start;
    }
    .la-web__card i { height: 7px; width: 72%; border-radius: 4px; background: var(--la-fill-strong); }
    .la-web__card b { height: 9px; width: 44%; border-radius: 5px; background: var(--la-fill); }
    .la-web__card--on b { background: color-mix(in srgb, var(--la-vio) 88%, transparent); }

    /* Shared line chart — same shape on web and native */
    .la-chart {
      position: relative; overflow: hidden; flex: 0 0 auto;
      border: 1px solid var(--la-line-soft); border-radius: 10px;
      background: radial-gradient(85% 95% at 100% 100%, color-mix(in srgb, var(--la-vio) 16%, transparent), transparent 72%);
    }
    .la-chart svg { position: absolute; inset: 24% 9% 22% 9%; display: block; color: var(--la-vio); }
    .la-chart__dot {
      position: absolute; right: 9%; top: 24%;
      width: 6px; height: 6px; border-radius: 50%; background: var(--la-vio);
      transform: translate(50%, -50%);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--la-vio) 22%, transparent);
    }
    .la-web__row2 { display: grid; grid-template-columns: 1.75fr 1fr; gap: 9px; }
    .la-web__chart { height: 118px; }
    .la-web__list {
      border: 1px solid var(--la-line-soft); border-radius: 10px;
      padding: 11px 10px; display: grid; gap: 9px; align-content: start;
    }
    .la-web__list i { height: 7px; border-radius: 4px; background: var(--la-fill); }
    .la-web__list i:first-child { width: 78%; background: var(--la-fill-strong); }
    .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 — the shipped mobile app */
    .la-phone {
      position: absolute; z-index: 3;
      right: -3%; top: 5%;
      width: 40%; aspect-ratio: 300 / 610;
      background: color-mix(in srgb, #fff 2%, var(--la-canvas));
      border: 1px solid var(--la-line);
      border-radius: 34px;
      padding: 7px;
      box-shadow: 0 50px 96px -40px rgba(10,10,8,0.6), 0 12px 28px -16px rgba(10,10,8,0.4);
      animation: la-float-b 7s ease-in-out infinite alternate;
    }
    .la-phone__notch {
      position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
      width: 34%; height: 13px; border-radius: var(--radius-pill);
      border: 1px solid var(--la-line-soft); z-index: 3;
    }
    .la-phone__screen {
      position: relative; overflow: hidden; height: 100%;
      border-radius: 28px;
      border: 1px solid var(--la-line-soft);
      background: radial-gradient(90% 45% at 100% 0%, color-mix(in srgb, var(--la-vio) 12%, transparent), transparent 68%);
      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: rgba(255,255,255,0.42);
    }
    .la-app__chart { height: 78px; margin-top: 22px; }
    .la-app__lines { margin-top: 12px; display: grid; gap: 7px; }
    .la-app__lines i { height: 7px; border-radius: 4px; background: var(--la-fill); }
    .la-app__lines i:first-child { width: 84%; background: var(--la-fill-strong); }
    .la-app__lines i:last-child { width: 58%; }
    .la-app__chips { display: flex; gap: 6px; margin-top: 14px; }
    .la-app__chip { flex: 1; height: 19px; border-radius: var(--radius-pill); background: var(--la-fill); }
    .la-app__chip--on { background: transparent; border: 1px solid color-mix(in srgb, var(--la-vio) 66%, transparent); }
    .la-app__rows { margin-top: 14px; display: grid; gap: 7px; }
    .la-app__rows span {
      height: 27px; border: 1px solid var(--la-line-soft); border-radius: 8px;
      display: flex; align-items: center; gap: 8px; padding: 0 9px;
    }
    .la-app__rows b { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 3px; background: var(--la-fill-strong); }
    .la-app__rows span:first-child b { background: color-mix(in srgb, var(--la-vio) 85%, transparent); }
    .la-app__rows i { height: 6px; border-radius: 3px; background: var(--la-fill); width: 62%; }
    .la-app__rows span:nth-child(2) i { width: 74%; }
    .la-app__rows span:nth-child(3) i { width: 54%; }
    .la-app__tab {
      margin-top: auto; display: flex; justify-content: space-around;
      padding-top: 12px; border-top: 1px solid var(--la-line-soft);
    }
    .la-app__tab i { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--la-line); display: block; }
    .la-app__tab i:first-child {
      border-color: color-mix(in srgb, var(--la-vio) 70%, transparent);
      background: color-mix(in srgb, var(--la-vio) 24%, transparent);
    }

    /* Transform indicator sitting between web + native */
    .la-convert {
      position: absolute; z-index: 4;
      left: 28%; top: 80%; transform: translate(-50%, -50%);
      display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap;
      background: #13131A; border: 1px solid var(--la-line);
      color: rgba(255,255,255,0.78);
      font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
      padding: 7px 12px; border-radius: var(--radius-pill);
      box-shadow: 0 18px 38px -20px rgba(0,0,0,0.9);
    }
    .la-convert__arrow { color: var(--la-vio); font-size: 0.9rem; line-height: 1; }

    @keyframes la-float-a { from { transform: translateY(4px); } to { transform: translateY(-6px); } }
    @keyframes la-float-b { from { transform: translateY(-4px); } to { transform: translateY(6px); } }

    /* ---- 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.12;
      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: 0.68rem; 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-hero { grid-template-columns: 1fr; gap: var(--space-6); text-align: left; }
      .la-hero__copy,
      .la-stage { grid-column: 1; }
      .la-stage { order: -1; grid-row: auto; }
      .la-scene { transform: none; }
      .la-hero__copy { grid-row: auto; }
      .la-hero__glow { grid-row: 1 / span 2; top: -4%; right: -10%; }
      .la-hero__glow--bottom { top: auto; right: -24%; bottom: -12%; }
      .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-stage { order: 0; }
      .la-feats { grid-template-columns: 1fr; }
    }
    /* Narrow phones: the mock shrinks, so drop the list rows to keep the
       chart, chips and tab bar inside the screen. */
    @media (max-width: 480px) {
      .la-app__rows { display: none; }
      .la-app__chart { height: 66px; margin-top: 16px; }
      .la-app__chips { margin-top: 12px; }
    }

    /* ---- Hero supporting line ---- */
    .la-hero__lead { font-weight: 500; color: var(--color-ink); max-width: 44ch; }
    .la-hero__sub { max-width: 46ch; margin-top: var(--space-3); font-size: var(--fs-md); line-height: 1.6; color: var(--color-ink-60); }

    /* ---- Lovable partner badge ---- */
    .la-partner {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: var(--space-4);
      max-width: 100%;
      padding: 8px 14px 8px 12px;
      background: #eef2ff;
      border: 1px solid #c9d4f5;
      border-radius: var(--radius-pill);
      color: var(--color-ink);
      font-size: 0.8125rem;
      line-height: 1.3;
    }
    .la-partner__brand {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      flex: 0 0 auto;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .la-partner__icon {
      width: 16px;
      height: 16px;
      display: block;
      flex: 0 0 auto;
    }
    .la-partner__sep {
      width: 1px;
      height: 14px;
      flex: 0 0 auto;
      background: #c9d4f5;
    }
    .la-partner__text {
      font-weight: 450;
      color: var(--color-ink);
    }
    @media (max-width: 480px) {
      .la-partner {
        align-items: flex-start;
        flex-wrap: wrap;
        row-gap: 6px;
        border-radius: var(--radius-md);
      }
      .la-partner__sep { display: none; }
    }

    /* ---- Hero eyebrow: black pill with Lovable logo ---- */
    .la-eyebrow {
      background: var(--color-ink); border-color: transparent; color: var(--color-on-dark);
      backdrop-filter: none; gap: 0.5em; padding: 7px var(--space-3);
    }
    .la-eyebrow__logo { height: 13px; width: auto; display: block; transform: translateY(-0.5px); }
    .la-eyebrow__arrow { color: var(--color-on-dark-muted); font-family: var(--font-mono); }

    /* ---- 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: 0.6rem; 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); }

    /* ---- Case studies ---- */
    .la-cases { margin-top: var(--space-6); }
    .la-case {
      position: relative; overflow: hidden;
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.7fr);
      gap: var(--space-7);
      align-items: center;
      background: var(--color-surface-light);
      color: var(--color-ink);
      border: 1px solid var(--border-ink);
      border-radius: var(--radius-xl);
      padding: var(--space-6) var(--space-7) 0;
      text-decoration: none;
      transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
    }
    .la-case::before {
      content: "";
      position: absolute;
      inset: -30% -10% auto;
      height: 85%;
      z-index: 0;
      pointer-events: none;
      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%);
      animation: nc-hue 12s ease-in-out infinite alternate;
    }
    .la-case:hover {
      transform: translateY(-4px);
      box-shadow: 0 28px 60px -32px rgba(10, 10, 8, 0.28);
    }
    .la-case__copy,
    .la-case__visual { position: relative; z-index: 1; }
    .la-case__copy { display: flex; flex-direction: column; min-width: 0; padding-bottom: var(--space-6); }
    .la-case__tag {
      align-self: flex-start;
      margin: 0;
    }
    .la-case__t {
      font-family: var(--font-title); font-weight: 700;
      font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.02em; line-height: 1.15;
      margin: var(--space-3) 0 0; color: var(--color-ink);
    }
    .la-case__lead {
      margin: var(--space-3) 0 0; max-width: 42ch;
      font-size: var(--fs-md); line-height: 1.55; color: var(--color-ink-60);
    }
    .la-case__path {
      list-style: none; margin: var(--space-5) 0 0; padding: 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      border-top: 1px solid var(--border-ink);
      border-bottom: 1px solid var(--border-ink);
    }
    .la-case__path li {
      padding: var(--space-4) var(--space-4) var(--space-4) 0;
      position: relative;
    }
    .la-case__path li + li {
      padding-left: var(--space-4);
      border-left: 1px solid var(--border-ink);
    }
    .la-case__path li:last-child { padding-right: 0; }
    .la-case__path b {
      display: block;
      font-family: var(--font-title); font-weight: 700;
      font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--color-ink-45); margin-bottom: var(--space-2);
    }
    .la-case__path p {
      margin: 0;
      font-family: var(--font-title); font-weight: 600;
      font-size: var(--fs-sm); letter-spacing: -0.015em; line-height: 1.35;
      color: var(--color-ink);
    }
    .la-case__cta {
      align-self: flex-start;
      margin-top: var(--space-5);
      pointer-events: none;
    }

    .la-cases__more {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      margin-top: var(--space-6);
      font-family: var(--font-title);
      font-weight: 700;
      font-size: var(--fs-h3);
      letter-spacing: -0.01em;
      color: var(--color-ink);
      transition: color 0.25s var(--ease);
    }
    .la-cases__more span { display: inline-block; transition: transform 0.3s var(--ease); }
    .la-cases__more:hover,
    .la-cases__more:focus-visible { color: var(--color-secondary-violet); }
    .la-cases__more:hover span,
    .la-cases__more:focus-visible span { transform: translateX(4px); }

    .la-case__visual {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      align-self: stretch;
      overflow: hidden;
      padding: var(--space-4) var(--space-3) 0;
      pointer-events: none;
    }
    .la-case__phone {
      --phone-w: min(280px, 100%);
      width: var(--phone-w);
      flex: 0 0 auto;
      aspect-ratio: 9 / 19;
      background: #0B0B09;
      border-radius: 34px;
      padding: 8px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
      /* Crop bottom 30%: reclaim layout space so only top 70% shows */
      margin-bottom: calc(var(--phone-w) * 19 / 9 * -0.3);
    }
    .la-case__phone-screen {
      display: block;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 26px;
      background: #fff;
    }
    .la-case__phone-screen img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
    }

    /* ---- 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-mono);
      font-size: 0.68rem;
      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: 520px) {
      .la-why__signals {
        flex-direction: column;
        align-items: flex-start;
        width: max-content;
        margin-left: auto;
        margin-right: auto;
        gap: 12px;
      }
      .la-why__signals li { padding: 0; }
      .la-why__signals li + li { border-left: 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-mono); font-size: 0.58rem; 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; }

    /* ---- Risk reversal ---- */
    .la-assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
    .la-assure__item {
      position: relative; overflow: hidden;
      display: flex; gap: var(--space-3); align-items: flex-start;
      background: var(--color-ink); border: 1px solid transparent; border-radius: var(--radius-md);
      padding: var(--space-5); color: var(--color-on-dark);
    }
    .la-assure__item::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(--color-secondary-violet) 28%, transparent),
        transparent 58%
      );
    }
    .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__item summary {
      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-md); color: var(--color-ink);
    }
    .la-faq__item summary::-webkit-details-marker { display: none; }
    .la-faq__item summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.75rem; font-weight: 500; line-height: 1; color: var(--color-secondary-violet); }
    .la-faq__item[open] summary::after { content: "\2013"; }
    .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-case {
        grid-template-columns: 1fr;
        padding: var(--space-5) var(--space-5) 0;
        gap: var(--space-5);
      }
      .la-case__copy { padding-bottom: var(--space-5); }
      .la-case__visual {
        order: -1;
        padding: var(--space-3) 0 0;
        justify-content: flex-end;
        max-height: none;
      }
      .la-case__phone {
        --phone-w: min(220px, 52%);
      }
      .la-case__path {
        grid-template-columns: 1fr;
        border-top: none;
        gap: var(--space-3);
      }
      .la-case__path li {
        padding: var(--space-3) 0 0;
        border-top: 1px solid var(--border-ink);
      }
      .la-case__path li:last-child {
        padding-bottom: var(--space-3);
      }
      .la-case__path li + li {
        padding-left: 0;
        border-left: none;
      }
      .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: 640px) {
      .la-vs { grid-template-columns: 1.25fr 0.9fr 0.9fr; }
      .la-vs__h { height: 60px; font-size: var(--fs-md); padding: 0 var(--space-3) var(--space-2); }
      .la-vs__col--label .la-vs__h { font-size: 0.68rem; }
      .la-vs__c { height: 64px; padding: 0 var(--space-3); font-size: var(--fs-sm); }
    }
    @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%); }