/* =============================================================================
   Landing premium — API SMS · webs.hn
   Capa de diseño dedicada a la página pública. Reutiliza los tokens de marca
   de styles.css (--primary #1db954, modo claro/oscuro) y añade los propios.
   Alcance: .lp-page (no afecta al panel ni a las pantallas de auth).
   ========================================================================== */

.lp-page {
    --lp-max: 1200px;
    --lp-r: 20px;
    --lp-r-lg: 28px;
    --lp-glass: color-mix(in srgb, var(--surface) 72%, transparent);
    --lp-hair: color-mix(in srgb, var(--ink) 9%, transparent);
    --lp-hair-2: color-mix(in srgb, var(--ink) 14%, transparent);
    --lp-grid: color-mix(in srgb, var(--ink) 4.5%, transparent);
    --lp-elev: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset,
               0 18px 50px -22px color-mix(in srgb, var(--ink) 40%, transparent);
    --lp-display: "Inter Tight", var(--font);

    background: var(--bg);
    overflow-x: clip;
}
:root[data-theme="dark"] .lp-page {
    --lp-elev: 0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset,
               0 30px 70px -28px #000;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lp-page {
        --lp-elev: 0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset,
                   0 30px 70px -28px #000;
    }
}

/* Tipografía display de la landing */
.lp-page h1, .lp-page h2, .lp-page h3,
.lp-page .lp-eyebrow, .lp-page .lp-stat-num {
    font-family: var(--lp-display);
}
.lp-page ::selection { background: var(--primary-soft); color: var(--primary-text); }

.lp-shell { width: 100%; max-width: var(--lp-max); margin: 0 auto; padding: 0 28px; }

/* Fondo de página: malla de luz + retícula sutil ----------------------------- */
.lp-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.lp-bg::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(60% 50% at 82% -8%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 60%),
      radial-gradient(48% 40% at 6% 2%, var(--secondary-soft), transparent 58%),
      radial-gradient(40% 38% at 50% 110%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 60%);
    filter: saturate(118%);
}
.lp-bg::after {
    content: ""; position: absolute; inset: -2px;
    background-image:
      linear-gradient(var(--lp-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--lp-grid) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
            mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
}

/* ============================ NAV ========================================== */
.lp-nav {
    position: sticky; top: 0; z-index: 60;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
    border-bottom: 1px solid transparent;
}
.lp-nav.is-stuck {
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: saturate(170%) blur(16px);
    -webkit-backdrop-filter: saturate(170%) blur(16px);
    border-bottom-color: var(--lp-hair);
}
.lp-nav-inner { display: flex; align-items: center; gap: 18px; height: 72px; }
.lp-brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800;
            color: var(--ink); font-size: 18px; letter-spacing: -.4px; }
.lp-brand:hover { text-decoration: none; }
.lp-logo {
    width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
    color: var(--primary-contrast); flex: none; position: relative;
    background: linear-gradient(140deg, var(--primary), var(--primary-strong));
    box-shadow: 0 6px 18px var(--ring), 0 1px 0 color-mix(in srgb,#fff 35%,transparent) inset;
}
.lp-logo svg { width: 19px; height: 19px; }
.lp-nav-links { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.lp-nav-links a {
    color: var(--ink-soft); font-weight: 600; font-size: 14.5px; padding: 8px 14px;
    border-radius: 10px; transition: .15s;
}
.lp-nav-links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); text-decoration: none; }
.lp-nav-actions { display: flex; align-items: center; gap: 10px; }
.lp-burger { display: none; }

/* Botones específicos de la landing (sobre la base de styles.css) */
.lp-page .btn-primary { box-shadow: 0 8px 22px -6px var(--ring), 0 1px 0 color-mix(in srgb,#fff 30%,transparent) inset; }
.lp-page .btn-pill { border-radius: 999px; }
.lp-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--primary-text); }
.lp-link-arrow .icon { width: 17px; height: 17px; transition: transform .18s; }
.lp-link-arrow:hover { text-decoration: none; }
.lp-link-arrow:hover .icon { transform: translateX(3px); }

/* ============================ HERO ========================================= */
.lp-hero { position: relative; padding: 76px 0 40px; }
.lp-hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 56px; align-items: center; }
.lp-hero-copy, .lp-hero-art, .lp-dev-copy, .lp-dev-code { min-width: 0; }
.lp-window { max-width: 100%; }
.lp-window pre { max-width: 100%; }

.lp-eyebrow {
    display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700;
    letter-spacing: .2px; color: var(--ink-soft); padding: 6px 12px 6px 8px; border-radius: 999px;
    background: var(--lp-glass); border: 1px solid var(--lp-hair); backdrop-filter: blur(6px);
}
.lp-eyebrow b { color: var(--primary-text); font-weight: 800; }
.lp-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px;
          font-weight: 800; color: var(--primary-contrast); background: linear-gradient(135deg,var(--primary),var(--primary-strong)); }

.lp-hero h1 {
    font-size: clamp(40px, 6.2vw, 68px); line-height: 1.02; letter-spacing: -2px;
    font-weight: 800; margin: 22px 0 0;
}
.lp-grad { background: linear-gradient(110deg, var(--primary), var(--secondary) 70%, var(--primary-strong));
           -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-hero .lp-lead { font-size: clamp(16px, 1.7vw, 19px); color: var(--ink-soft); margin: 22px 0 30px; max-width: 46ch; }
.lp-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.lp-trust { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 32px; }
.lp-trust span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.lp-trust .icon { width: 17px; height: 17px; color: var(--primary); }

/* Arte del hero: ventana de código en cristal + tarjeta de entrega ---------- */
.lp-hero-art { position: relative; }
.lp-hero-art .lp-orb {
    position: absolute; inset: -8% -6% -14% -6%; z-index: -1; border-radius: 40px;
    background: radial-gradient(60% 60% at 70% 20%, color-mix(in srgb,var(--primary) 26%,transparent), transparent 70%);
    filter: blur(34px);
}
.lp-window {
    border-radius: var(--lp-r); overflow: hidden; background: #0c1117;
    border: 1px solid #1d2731; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), var(--lp-elev);
}
.lp-win-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; background: #0a0e13; border-bottom: 1px solid #18212b; }
.lp-win-bar .dot { width: 11px; height: 11px; border-radius: 50%; }
.lp-win-bar .dot-r { background: #ff5f57; } .lp-win-bar .dot-y { background: #febc2e; } .lp-win-bar .dot-g { background: #28c840; }
.lp-win-file { color: #8b98a5; font-size: 12px; margin-left: 8px; font-family: var(--mono); }

/* Tabs de lenguaje */
.lp-tabs { display: flex; gap: 2px; padding: 8px 12px 0; background: #0a0e13; border-bottom: 1px solid #18212b; }
.lp-tab {
    border: 0; background: transparent; color: #7d8b97; font: 600 12.5px/1 var(--mono);
    padding: 9px 13px; border-radius: 8px 8px 0 0; cursor: pointer; transition: .15s;
}
.lp-tab:hover { color: #c9d4de; }
.lp-tab.is-active { color: #e8f6ee; background: #0c1117; box-shadow: inset 0 -2px 0 var(--primary); }
.lp-codepanel { display: none; }
.lp-codepanel.is-active { display: block; }
.lp-window pre { background: transparent; border-radius: 0; padding: 18px 18px 22px; font-size: 12.8px; line-height: 1.7; }
.c-c { color: #6a8a6e; } .c-k { color: #79c0ff; } .c-s { color: #7ee787; } .c-p { color: #ffa657; } .c-n { color: #d2a8ff; }

.lp-float { animation: lp-floaty 7s ease-in-out infinite; }
@keyframes lp-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ============================ LOGOS / FRANJA =============================== */
.lp-logos { padding: 18px 0 8px; }
.lp-logos p { text-align: center; color: var(--muted); font-size: 12.5px; font-weight: 700;
              letter-spacing: 1.4px; text-transform: uppercase; margin: 0 0 18px; }
.lp-logos-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; align-items: center; opacity: .9; }
.lp-logo-chip { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-soft);
                font-weight: 800; font-size: 15.5px; letter-spacing: -.3px; }
.lp-logo-chip .icon { width: 19px; height: 19px; color: var(--primary-text); }

/* ============================ STATS ======================================== */
.lp-stats { padding: 48px 0; }
.lp-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lp-stat {
    position: relative; padding: 26px 24px; border-radius: var(--lp-r);
    background: var(--lp-glass); border: 1px solid var(--lp-hair); backdrop-filter: blur(8px); overflow: hidden;
}
.lp-stat::after { content: ""; position: absolute; right: -28px; top: -28px; width: 90px; height: 90px; border-radius: 50%;
                  background: radial-gradient(circle, var(--primary-soft), transparent 70%); }
.lp-stat-num { font-size: 40px; font-weight: 800; letter-spacing: -1.6px; line-height: 1;
               background: linear-gradient(120deg, var(--ink), var(--primary-text));
               -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-stat-num span { font-size: 24px; }
.lp-stat-label { color: var(--muted); font-size: 13.5px; margin-top: 10px; font-weight: 600; }

/* ============================ SECCIONES (genérico) ========================= */
.lp-sec { padding: 88px 0; position: relative; }
.lp-sec-head { max-width: 680px; margin: 0 auto 52px; text-align: center; }
.lp-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800;
             letter-spacing: 1.4px; text-transform: uppercase; color: var(--primary-text); margin-bottom: 14px; }
.lp-kicker::before { content: ""; width: 18px; height: 1.5px; background: var(--primary); border-radius: 2px; }
.lp-kicker.center::after { content: ""; width: 18px; height: 1.5px; background: var(--primary); border-radius: 2px; }
.lp-sec-head h2 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -1.1px; font-weight: 800; line-height: 1.08; }
.lp-sec-head p { color: var(--ink-soft); font-size: 17px; margin: 14px auto 0; max-width: 54ch; }

/* ============================ PASOS ======================================== */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; }
.lp-step {
    position: relative; padding: 28px; border-radius: var(--lp-r);
    background: var(--lp-glass); border: 1px solid var(--lp-hair); backdrop-filter: blur(8px);
    transition: transform .2s ease, border-color .2s ease;
}
.lp-step:hover { transform: translateY(-4px); border-color: color-mix(in srgb,var(--primary) 32%,var(--lp-hair)); }
.lp-step-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
               background: var(--primary-soft); color: var(--primary-text);
               border: 1px solid color-mix(in srgb,var(--primary) 24%,transparent); }
.lp-step-ico .icon { width: 23px; height: 23px; }
.lp-step-n { position: absolute; top: 24px; right: 26px; font: 800 13px/1 var(--lp-display);
             color: var(--muted); font-variant-numeric: tabular-nums; }
.lp-step h3 { font-size: 18px; margin-bottom: 8px; letter-spacing: -.3px; }
.lp-step p { color: var(--ink-soft); margin: 0; font-size: 14.5px; }
.lp-step code { background: var(--surface-2); border-color: var(--lp-hair); }

/* ============================ DESARROLLADORES ============================== */
.lp-dev-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 56px; align-items: center; }
.lp-dev-copy h2 { font-size: clamp(28px, 3.2vw, 38px); letter-spacing: -1px; font-weight: 800; line-height: 1.08; margin-top: 14px; }
.lp-dev-copy .lp-lead { color: var(--ink-soft); font-size: 17px; margin: 16px 0 26px; }
.lp-flist { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 18px; }
.lp-flist li { display: flex; gap: 14px; align-items: flex-start; }
.lp-flist .lp-fi-sm { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center;
                      background: var(--primary-soft); color: var(--primary-text);
                      border: 1px solid color-mix(in srgb,var(--primary) 22%,transparent); }
.lp-flist .lp-fi-sm .icon { width: 18px; height: 18px; }
.lp-flist strong { display: block; font-size: 15.5px; }
.lp-flist span { color: var(--muted); font-size: 14px; }

/* ============================ BENTO ======================================== */
.lp-bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(168px, auto); gap: 18px; }
.lp-cell {
    position: relative; overflow: hidden; padding: 26px; border-radius: var(--lp-r);
    background: var(--lp-glass); border: 1px solid var(--lp-hair); backdrop-filter: blur(8px);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.lp-cell:hover { transform: translateY(-4px); border-color: color-mix(in srgb,var(--primary) 30%,var(--lp-hair));
                 box-shadow: 0 22px 50px -28px color-mix(in srgb,var(--ink) 45%,transparent); }
.lp-cell-c2 { grid-column: span 2; }
.lp-cell-c3 { grid-column: span 3; }
.lp-cell-c4 { grid-column: span 4; }
.lp-cell-r2 { grid-row: span 2; }
.lp-fi { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 16px;
         background: var(--surface-2); color: var(--primary-text); border: 1px solid var(--lp-hair); }
.lp-fi .icon { width: 23px; height: 23px; }
.lp-cell h3 { font-size: 17px; margin-bottom: 7px; letter-spacing: -.3px; }
.lp-cell p { color: var(--ink-soft); font-size: 14.5px; margin: 0; }
.lp-cell.is-feature { background: linear-gradient(150deg, color-mix(in srgb,var(--primary) 16%,var(--surface)), var(--surface)); }
.lp-cell-glow { position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; border-radius: 50%;
                background: radial-gradient(circle, var(--primary-soft), transparent 70%); pointer-events: none; }

/* Mini visual de "estado en vivo" dentro de una celda bento */
.lp-livelog { margin-top: 16px; display: grid; gap: 8px; }
.lp-livelog-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-family: var(--mono);
                  padding: 8px 11px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--lp-hair); }
.lp-livelog-row .dotp { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lp-livelog-row .num { color: var(--muted); }
.lp-livelog-row .msi { color: var(--ink-soft); }
.lp-livelog-row .badge { margin-left: auto; }

/* ============================ PRECIOS ====================================== */
.lp-pricing { display: grid; grid-template-columns: 1fr; }
.lp-calc-wrap { max-width: 760px; margin: 0 auto; }
.lp-calc {
    position: relative; border-radius: var(--lp-r-lg); padding: 30px;
    background: var(--lp-glass); border: 1px solid var(--lp-hair-2); backdrop-filter: blur(10px);
    box-shadow: 0 30px 70px -34px color-mix(in srgb,var(--ink) 50%,transparent);
}
.lp-calc-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; }
.lp-calc .field > span { font-size: 14px; font-weight: 700; color: var(--ink); }
.lp-calc-input { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 18px; }
.lp-calc-input input { width: 160px; font-size: 22px; font-weight: 800; font-family: var(--lp-display);
                       border-radius: 12px; }
.lp-calc-result {
    text-align: center; padding: 26px 22px; border-radius: var(--lp-r);
    background: linear-gradient(160deg, color-mix(in srgb,var(--primary) 14%,var(--surface)), var(--surface));
    border: 1px solid color-mix(in srgb,var(--primary) 24%,var(--lp-hair));
}
.lp-calc-total { font-size: 46px; font-weight: 800; letter-spacing: -2px; line-height: 1;
                 font-family: var(--lp-display); color: var(--primary-text); }
.lp-calc-rate { color: var(--muted); font-size: 13px; margin-top: 8px; }
.lp-calc-foot { color: var(--muted); font-size: 12.5px; text-align: center; margin: 16px 0 0; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.lp-chip { border: 1px solid var(--lp-hair-2); background: var(--surface); color: var(--ink-soft);
           border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 700; cursor: pointer; transition: .14s; }
.lp-chip:hover { border-color: var(--primary); color: var(--primary-text); }
.lp-chip.is-active { background: var(--primary-soft); border-color: color-mix(in srgb,var(--primary) 40%,transparent); color: var(--primary-text); }

/* ============================ FAQ ========================================== */
.lp-faq { max-width: 800px; margin: 0 auto; display: grid; gap: 12px; }
.lp-q { border: 1px solid var(--lp-hair); border-radius: 16px; background: var(--lp-glass); backdrop-filter: blur(6px); overflow: hidden; }
.lp-q[open] { border-color: color-mix(in srgb,var(--primary) 30%,var(--lp-hair)); }
.lp-q summary { list-style: none; cursor: pointer; padding: 20px 22px; display: flex; align-items: center; gap: 14px;
                font-weight: 700; font-size: 16px; color: var(--ink); }
.lp-q summary::-webkit-details-marker { display: none; }
.lp-q summary .icon { width: 20px; height: 20px; color: var(--muted); margin-left: auto; transition: transform .22s; flex: none; }
.lp-q[open] summary .icon { transform: rotate(180deg); color: var(--primary-text); }
.lp-q-body { padding: 0 22px 22px; color: var(--ink-soft); font-size: 15px; line-height: 1.65; }
.lp-q-body code { background: var(--surface-2); border-color: var(--lp-hair); }

/* ============================ CTA FINAL ==================================== */
.lp-cta { padding: 30px 0 96px; }
.lp-cta-card {
    position: relative; overflow: hidden; text-align: center; border-radius: var(--lp-r-lg);
    padding: 64px 32px; color: #fff;
    background: radial-gradient(120% 140% at 50% -20%, var(--primary-strong), #0a1f12 78%);
    border: 1px solid color-mix(in srgb,var(--primary) 40%,transparent);
    box-shadow: 0 40px 90px -36px color-mix(in srgb,var(--primary) 60%,transparent);
}
.lp-cta-card::before { content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(color-mix(in srgb,#fff 6%,transparent) 1px, transparent 1px),
                      linear-gradient(90deg, color-mix(in srgb,#fff 6%,transparent) 1px, transparent 1px);
    background-size: 40px 40px; -webkit-mask-image: radial-gradient(80% 80% at 50% 0%, #000, transparent 75%);
            mask-image: radial-gradient(80% 80% at 50% 0%, #000, transparent 75%); }
.lp-cta-card > * { position: relative; }
.lp-cta-card h2 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -1.4px; font-weight: 800; line-height: 1.05; }
.lp-cta-card p { color: rgba(255,255,255,.82); font-size: 17px; margin: 16px auto 28px; max-width: 50ch; }
.lp-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-cta-card .btn-primary { background: #fff; color: #06140c; box-shadow: 0 12px 30px -8px rgba(0,0,0,.5); }
.lp-cta-card .btn-primary:hover { filter: none; background: #f1fff6; }
.lp-cta-card .btn-glass { background: color-mix(in srgb,#fff 12%,transparent); color: #fff;
                          border-color: color-mix(in srgb,#fff 30%,transparent); }
.lp-cta-card .btn-glass:hover { background: color-mix(in srgb,#fff 20%,transparent); }
.lp-cta-note { color: rgba(255,255,255,.62); font-size: 13px; margin-top: 18px; }

/* ============================ FOOTER ======================================= */
.lp-footer { border-top: 1px solid var(--lp-hair); background: var(--bg-soft); padding: 56px 0 30px; }
.lp-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.lp-foot-brand p { color: var(--muted); font-size: 14px; margin: 14px 0 0; max-width: 34ch; }
.lp-foot-col h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 0 0 14px; }
.lp-foot-col a { display: block; color: var(--ink-soft); font-size: 14px; padding: 5px 0; }
.lp-foot-col a:hover { color: var(--primary-text); text-decoration: none; }
.lp-foot-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
               margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--lp-hair); color: var(--muted); font-size: 13px; }

/* ============================ REVEAL ======================================= */
.has-js .lp-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.has-js .lp-reveal.in { opacity: 1; transform: none; }
.has-js .lp-reveal.d1 { transition-delay: .07s; }
.has-js .lp-reveal.d2 { transition-delay: .14s; }
.has-js .lp-reveal.d3 { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
    .has-js .lp-reveal { opacity: 1; transform: none; transition: none; }
    .lp-float { animation: none; }
}

/* ============================ RESPONSIVE =================================== */
@media (max-width: 1000px) {
    .lp-hero-grid, .lp-dev-grid { grid-template-columns: 1fr; gap: 44px; }
    .lp-hero-art { order: -1; max-width: 520px; }
    .lp-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-bento { grid-template-columns: repeat(2, 1fr); }
    .lp-cell-c2, .lp-cell-c3, .lp-cell-c4 { grid-column: span 2; }
    .lp-cell-r2 { grid-row: auto; }
    .lp-calc-grid { grid-template-columns: 1fr; }
    .lp-foot-grid { grid-template-columns: 1fr 1fr; }
    .lp-nav-links { display: none; }
}
@media (max-width: 640px) {
    .lp-shell { padding: 0 18px; }
    .lp-sec { padding: 64px 0; }
    .lp-nav-inner { height: 64px; gap: 10px; }
    .lp-brand { white-space: nowrap; font-size: 16px; }
    .lp-nav-actions { gap: 8px; }
    .lp-nav-actions .btn-ghost { display: none; }
    .lp-hero { padding: 56px 0 36px; }
    .lp-hero h1 { font-size: clamp(31px, 8.6vw, 44px); letter-spacing: -1px; }
    .lp-hero-art { order: 0; }
    .lp-steps { grid-template-columns: 1fr; }
    .lp-bento { grid-template-columns: 1fr; }
    .lp-cell-c2, .lp-cell-c3, .lp-cell-c4 { grid-column: auto; }
    .lp-foot-grid { grid-template-columns: 1fr 1fr; }
    .lp-hero .lp-hero-cta .btn { flex: 1 1 auto; }
}