/* Source: templates/landing.html style block 1 */
/* Brand tokens live in /static/tokens.css.
   The landing page uses a LIGHT, WARM, ORGANIC palette. We override the
   landing/brand aliases here (landing.css loads after tokens.css) so the
   whole stylesheet reads correctly on a light background. */
      :root {
        /* Page + surfaces (light/organic) */
        --lp-dark: #fbfaf6;          /* warm off-white / cream page bg */
        --lp-card: #ffffff;          /* white card surface */
        --lp-card2: #fcfbf7;         /* subtly warmer card surface */
        --lp-border: #ece7de;        /* soft warm border */
        --lp-muted: #66707a;         /* muted warm-grey text */
        --lp-text: #1e2a32;          /* warm near-black text */

        /* Brand accents → friendly trustworthy green + warm secondary */
        --lp-green: #16a37a;
        --lp-green-strong: #1fb07d;
        --lp-green-dark: #128a67;
        --lp-amber: #f2a65a;         /* soft amber/coral, used sparingly */

        /* Remap the neon brand tokens used across this stylesheet so every
           reference (gradients, accents, checks, dots…) reads green/warm. */
        --ma-cyan: #16a37a;
        --ma-blue: #16a37a;
        --ma-indigo: #1fb07d;
        --ma-purple: #f2a65a;
        --ma-grad: linear-gradient(135deg, #1fb07d 0%, #16a37a 100%);
        --ma-grad-h: linear-gradient(135deg, #25c08c 0%, #1fb07d 100%);

        /* Soft, warm, organic shadow used for cards/surfaces */
        --lp-shadow: 0 10px 30px rgba(31, 41, 51, 0.06);
        --lp-shadow-lg: 0 18px 44px rgba(31, 41, 51, 0.09);
      }

      html,
      body {
        overflow: visible !important;
        height: auto !important;
        background: var(--lp-dark) !important;
      }
      body {
        color: var(--lp-text);
        font-family: var(--font-sans);
        overflow-x: hidden !important;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      img {
        display: block;
        max-width: 100%;
      }

      /* ─── Scroll-reveal ───────────────────────────── */
      .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition:
          opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .reveal.visible {
        opacity: 1;
        transform: none;
      }
      .reveal-delay-1 {
        transition-delay: 0.08s;
      }
      .reveal-delay-2 {
        transition-delay: 0.16s;
      }
      .reveal-delay-3 {
        transition-delay: 0.24s;
      }
      .reveal-delay-4 {
        transition-delay: 0.32s;
      }

      /* ─── Highlight text — solid warm green (no neon shimmer) ─── */
      .shimmer-text {
        color: var(--lp-green);
        -webkit-text-fill-color: var(--lp-green);
        font-weight: inherit;
      }
      /* glow-text: keep the hook but remove the neon pulse entirely */
      .glow-text {
        text-shadow: none;
      }

      /* ─── NAV ─────────────────────────────────────── */
      .lp-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
        backdrop-filter: blur(20px) saturate(1.2);
        background: rgba(251, 250, 246, 0.85);
        border-bottom: 1px solid var(--lp-border);
      }
      .lp-nav-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
        height: 76px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
      }
      .lp-brand-logo {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .lp-brand-logo img {
        width: 64px;
        height: 64px;
        object-fit: contain;
        filter: drop-shadow(0 4px 10px rgba(31, 41, 51, 0.12));
      }
      .lp-brand-text {
        display: flex;
        flex-direction: column;
        gap: 3px;
      }
      .lp-brand-name {
        font-size: 22px;
        font-weight: 900;
        letter-spacing: -0.03em;
        line-height: 1;
        color: var(--lp-text);
      }
      .lp-brand-slogan {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--lp-muted);
        line-height: 1;
      }
      .lp-nav-links {
        display: flex;
        gap: 2px;
      }
      .lp-nav-links a {
        padding: 8px 14px;
        border-radius: 9px;
        font-size: 14px;
        color: var(--lp-muted);
        transition: 0.15s;
      }
      .lp-nav-links a:hover {
        color: var(--lp-green);
        background: rgba(22, 163, 122, 0.08);
      }
      .lp-nav-ctas {
        display: flex;
        gap: 10px;
        align-items: center;
      }

      /* ─── Buttons ─────────────────────────────────── */
      .lp-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        border: none;
        transition: all 0.2s;
        text-decoration: none;
        white-space: nowrap;
      }
      .lp-btn-ghost {
        background: #ffffff;
        border: 1px solid var(--lp-border);
        color: var(--lp-text);
      }
      .lp-btn-ghost:hover {
        background: #f6f3ec;
        border-color: #ddd5c7;
      }
      .lp-btn-primary {
        background: var(--lp-green);
        color: #fff;
        box-shadow: 0 6px 16px rgba(22, 163, 122, 0.22);
      }
      .lp-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(22, 163, 122, 0.3);
        background: var(--lp-green-strong);
      }
      .lp-btn-outline {
        background: transparent;
        border: 1.5px solid var(--lp-green);
        color: var(--lp-green);
      }
      .lp-btn-outline:hover {
        background: rgba(22, 163, 122, 0.08);
        transform: translateY(-1px);
      }
      .lp-btn-lg {
        padding: 14px 28px;
        font-size: 16px;
        border-radius: 13px;
      }

      /* ─── Sections ────────────────────────────────── */
      .lp-page {
        position: relative;
        z-index: 1;
      }
      section {
        padding: 96px 24px;
        position: relative;
      }
      .lp-container {
        max-width: 1120px;
        margin: 0 auto;
      }
      .lp-section-divider {
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          var(--lp-border),
          transparent
        );
        margin: 0 24px;
      }
      .lp-section-label {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ma-cyan);
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .lp-section-label::before {
        content: "";
        display: block;
        width: 20px;
        height: 2px;
        background: var(--ma-grad);
        border-radius: 2px;
      }
      .lp-section-title {
        font-size: clamp(26px, 3.5vw, 46px);
        font-weight: 800;
        letter-spacing: -0.03em;
        margin-bottom: 18px;
        line-height: 1.1;
      }
      .lp-section-sub {
        font-size: 16px;
        color: var(--lp-muted);
        max-width: 580px;
        line-height: 1.7;
        margin-bottom: 52px;
      }

      /* ─── HERO ────────────────────────────────────── */
      .lp-hero {
        padding-top: 140px;
        padding-bottom: 80px;
      }
      .lp-hero-inner {
        display: grid;
        grid-template-columns: 1fr 460px;
        gap: 60px;
        align-items: center;
      }
      .lp-hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(22, 163, 122, 0.1);
        border: 1px solid rgba(22, 163, 122, 0.22);
        color: var(--lp-green-dark);
        font-size: 13px;
        font-weight: 600;
        padding: 7px 16px;
        border-radius: 999px;
        margin-bottom: 28px;
        animation: badge-pulse 3s ease-in-out infinite;
      }
      @keyframes badge-pulse {
        0%,
        100% {
          box-shadow: 0 0 0 0 rgba(22, 163, 122, 0.2);
        }
        50% {
          box-shadow: 0 0 0 6px rgba(22, 163, 122, 0);
        }
      }
      .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--lp-green);
        animation: blink 1.5s ease-in-out infinite;
      }
      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.3;
        }
      }
      .lp-hero h1 {
        font-size: clamp(36px, 4.5vw, 64px);
        font-weight: 900;
        line-height: 1.06;
        letter-spacing: -0.04em;
        margin-bottom: 24px;
      }
      .lp-hero-sub {
        font-size: clamp(16px, 1.8vw, 20px);
        color: var(--lp-muted);
        line-height: 1.65;
        margin-bottom: 40px;
        max-width: 520px;
      }
      .lp-hero-ctas {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }
      .lp-hero-proof {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 18px;
      }
      .lp-proof-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 34px;
        padding: 7px 12px;
        border-radius: 999px;
        border: 1px solid var(--lp-border);
        background: #ffffff;
        color: var(--lp-text);
        font-size: 12px;
        font-weight: 650;
        line-height: 1.2;
        box-shadow: var(--lp-shadow);
      }
      .lp-proof-pill::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--lp-green);
        box-shadow: 0 0 0 4px rgba(22, 163, 122, 0.12);
        flex-shrink: 0;
      }
      .lp-hero-fineprint {
        margin-top: 12px;
        color: var(--lp-muted);
        font-size: 12px;
        line-height: 1.5;
      }

      /* ─── iPhone mockup ───────────────────────────── */
      .lp-hero-visual {
        position: relative;
        display: flex;
        align-items: center;
        gap: 20px;
      }
      .iphone-wrap {
        position: relative;
        z-index: 2;
        animation: phone-float 5s ease-in-out infinite;
      }
      @keyframes phone-float {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-14px);
        }
      }
      .iphone {
        width: 252px;
        height: 520px;
        background: #13141a;
        border-radius: 46px;
        border: 6px solid #2c2d38;
        box-shadow:
          0 0 0 1px rgba(31, 41, 51, 0.12),
          0 30px 60px rgba(31, 41, 51, 0.18);
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
      }
      /* Side buttons */
      .iphone::before {
        content: "";
        position: absolute;
        right: -8px;
        top: 80px;
        width: 3px;
        height: 52px;
        background: #2c2d38;
        border-radius: 0 3px 3px 0;
      }
      .iphone::after {
        content: "";
        position: absolute;
        left: -8px;
        top: 70px;
        width: 3px;
        height: 36px;
        background: #2c2d38;
        border-radius: 3px 0 0 3px;
        box-shadow:
          0 44px 0 #2c2d38,
          0 80px 0 #2c2d38;
      }
      .iphone-screen {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: 40px;
      }
      /* Dynamic island */
      .iphone-island {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 90px;
        height: 24px;
        background: #0a0a0d;
        border-radius: 20px;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 8px;
        gap: 5px;
      }
      .iphone-camera {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #1a1a22;
        border: 1px solid #2a2a35;
      }
      /* WhatsApp-style chat inside */
      .iphone-chat-header {
        background: #1a5c52;
        padding: 10px 14px 8px;
        padding-top: 36px;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
      }
      .iphone-avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: linear-gradient(135deg, #1fb07d, #16a37a);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        color: #fff;
        flex-shrink: 0;
      }
      .iphone-chat-title {
        flex: 1;
        min-width: 0;
      }
      .iphone-chat-title strong {
        display: block;
        font-size: 13px;
        color: #e9edef;
      }
      .iphone-chat-title span {
        font-size: 11px;
        color: rgba(233, 237, 239, 0.6);
      }
      .iphone-body {
        flex: 1;
        background: #0b141a
          url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='60' text-anchor='middle' dominant-baseline='middle' fill='rgba(255,255,255,.012)' font-family='sans-serif'%3E%E2%9C%89%3C/text%3E%3C/svg%3E");
        padding: 10px 10px 6px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow: hidden;
      }
      .iphone-msg {
        font-size: 11.5px;
        line-height: 1.45;
        padding: 8px 10px;
        border-radius: 10px;
        max-width: 80%;
        word-break: break-word;
      }
      .iphone-msg.in {
        background: #202c33;
        color: #e9edef;
        align-self: flex-start;
        border-bottom-left-radius: 4px;
      }
      .iphone-msg.out {
        background: #005c4b;
        color: #e9edef;
        align-self: flex-end;
        border-bottom-right-radius: 4px;
      }
      .iphone-msg-time {
        font-size: 9px;
        color: rgba(233, 237, 239, 0.45);
        text-align: right;
        margin-top: 3px;
      }
      .iphone-typing {
        display: flex;
        gap: 4px;
        padding: 8px 10px;
        background: #202c33;
        border-radius: 10px;
        border-bottom-left-radius: 4px;
        align-self: flex-start;
        align-items: center;
      }
      .iphone-typing span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #8696a0;
        animation: typing-dot 1.2s ease-in-out infinite;
      }
      .iphone-typing span:nth-child(2) {
        animation-delay: 0.2s;
      }
      .iphone-typing span:nth-child(3) {
        animation-delay: 0.4s;
      }
      @keyframes typing-dot {
        0%,
        80%,
        100% {
          transform: scale(0.6);
          opacity: 0.4;
        }
        40% {
          transform: scale(1);
          opacity: 1;
        }
      }
      .iphone-compose {
        background: #1f2c34;
        padding: 8px;
        display: flex;
        gap: 6px;
        align-items: center;
        flex-shrink: 0;
      }
      .iphone-compose-input {
        flex: 1;
        background: #2a3942;
        border-radius: 20px;
        padding: 7px 12px;
        font-size: 11px;
        color: rgba(233, 237, 239, 0.4);
      }
      .iphone-compose-send {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: linear-gradient(135deg, #1fb07d, #16a37a);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .iphone-compose-send svg {
        width: 14px;
        height: 14px;
        stroke: #fff;
        fill: none;
        stroke-width: 2;
      }
      /* Home bar */
      .iphone-homebar {
        height: 22px;
        background: #13141a;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .iphone-homebar-line {
        width: 80px;
        height: 4px;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 2px;
      }

      /* ─── Floating badges — sistema unificado ───── */
      .lp-float-badge {
        background: #ffffff;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid var(--lp-border);
        border-radius: 14px;
        padding: 10px 14px;
        font-size: 12px;
        font-weight: 600;
        color: var(--lp-text);
        box-shadow: var(--lp-shadow);
        white-space: normal;
        display: flex;
        align-items: center;
        gap: 7px;
        z-index: 5;
        max-width: 230px;
        line-height: 1.35;
      }
      .lp-float-badge::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--lp-green);
        flex-shrink: 0;
      }
      /* Badge cluster: static flow junto al teléfono */
      .lp-hero-badges {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .lp-hero-badges .lp-float-badge {
        animation: badgeDrift var(--badge-dur, 4.8s) ease-in-out infinite;
        animation-delay: var(--badge-delay, 0s);
      }
      .lp-hero-badges .lp-float-badge:nth-child(1) {
        --badge-dur: 4.5s;
        --badge-delay: 0s;
      }
      .lp-hero-badges .lp-float-badge:nth-child(2) {
        --badge-dur: 5.2s;
        --badge-delay: -1.25s;
      }
      .lp-hero-badges .lp-float-badge:nth-child(3) {
        --badge-dur: 4.7s;
        --badge-delay: -2.45s;
      }
      .lp-hero-badges .lp-float-badge:nth-child(4) {
        --badge-dur: 5.6s;
        --badge-delay: -0.85s;
      }
      .lp-hero-badges .lp-float-badge:nth-child(5) {
        --badge-dur: 4.9s;
        --badge-delay: -2.05s;
      }
      @keyframes badgeDrift {
        0%,
        100% {
          transform: translateX(0) rotate(-0.4deg);
        }
        50% {
          transform: translateX(6px) rotate(0.4deg);
        }
      }
      /* Accent por badge — verde / ámbar suaves */
      .lp-float-badge-1 {
        border-color: rgba(22, 163, 122, 0.4);
      }
      .lp-float-badge-1::before {
        background: var(--lp-green);
      }
      .lp-float-badge-2 {
        border-color: rgba(31, 176, 125, 0.4);
      }
      .lp-float-badge-2::before {
        background: var(--lp-green-strong);
      }
      .lp-float-badge-3 {
        border-color: rgba(242, 166, 90, 0.45);
      }
      .lp-float-badge-3::before {
        background: var(--lp-amber);
      }
      /* Keyframes legacy (usados en otras secciones) */
      @keyframes badge-float1 {
        0%,
        100% {
          transform: translateY(0) rotate(-1.5deg);
        }
        50% {
          transform: translateY(-8px) rotate(0.5deg);
        }
      }
      @keyframes badge-float2 {
        0%,
        100% {
          transform: translateY(0) rotate(1.5deg);
        }
        50% {
          transform: translateY(-6px) rotate(-0.5deg);
        }
      }

      /* ─── MULTI-CONV SECTION ──────────────────────── */
      .lp-multiconv-wrap {
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        gap: 56px;
        align-items: center;
      }
      .lp-conv-panel {
        background: var(--lp-card);
        border: 1px solid var(--lp-border);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: var(--lp-shadow-lg);
      }
      .lp-conv-panel-header {
        background: var(--lp-card2);
        padding: 14px 18px;
        border-bottom: 1px solid var(--lp-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .lp-conv-panel-title {
        font-size: 13px;
        font-weight: 700;
      }
      .lp-conv-active-badge {
        background: rgba(22, 163, 122, 0.12);
        border: 1px solid rgba(22, 163, 122, 0.28);
        color: var(--lp-green-dark);
        font-size: 11px;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px;
      }
      .lp-conv-list {
        display: flex;
        flex-direction: column;
      }
      .lp-conv-item {
        padding: 12px 18px;
        border-bottom: 1px solid var(--lp-border);
        display: flex;
        gap: 12px;
        align-items: flex-start;
        transition: 0.15s;
      }
      .lp-conv-item:last-child {
        border-bottom: none;
      }
      .lp-conv-item:hover {
        background: rgba(22, 163, 122, 0.04);
      }
      .lp-conv-avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        flex-shrink: 0;
      }
      .lp-conv-body {
        flex: 1;
        min-width: 0;
      }
      .lp-conv-name {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 3px;
      }
      .lp-conv-preview {
        font-size: 12px;
        color: var(--lp-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .lp-conv-preview.typing {
        color: var(--ma-cyan);
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .lp-conv-typing-dots {
        display: flex;
        gap: 3px;
      }
      .lp-conv-typing-dots span {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--ma-cyan);
        animation: typing-dot 1.2s ease-in-out infinite;
      }
      .lp-conv-typing-dots span:nth-child(2) {
        animation-delay: 0.2s;
      }
      .lp-conv-typing-dots span:nth-child(3) {
        animation-delay: 0.4s;
      }
      .lp-conv-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        flex-shrink: 0;
      }
      .lp-conv-time {
        font-size: 11px;
        color: var(--lp-muted);
      }
      .lp-conv-unread {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--ma-blue);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .lp-ai-indicator {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        color: var(--ma-cyan);
        font-weight: 600;
      }
      .lp-ai-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--ma-cyan);
        animation: blink 1.5s ease-in-out infinite;
      }

      /* ─── CALENDAR SECTION ────────────────────────── */
      .lp-calendar-wrap {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 56px;
        align-items: center;
      }
      .lp-calendar-mock {
        background: var(--lp-card);
        border: 1px solid var(--lp-border);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: var(--lp-shadow-lg);
      }
      .lp-cal-header {
        background: var(--lp-card2);
        padding: 14px 18px;
        border-bottom: 1px solid var(--lp-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .lp-cal-header strong {
        font-size: 14px;
        font-weight: 700;
      }
      .lp-cal-nav {
        display: flex;
        gap: 4px;
      }
      .lp-cal-nav-btn {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        background: #f6f3ec;
        border: 1px solid var(--lp-border);
        color: var(--lp-muted);
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .lp-cal-days-header {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 1px;
        padding: 8px 14px 4px;
        font-size: 10px;
        font-weight: 700;
        color: var(--lp-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        text-align: center;
      }
      .lp-cal-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 3px;
        padding: 4px 14px 14px;
      }
      .lp-cal-day {
        height: 34px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        position: relative;
        cursor: default;
      }
      .lp-cal-day.today {
        background: var(--ma-grad);
        color: #fff;
        font-weight: 700;
        box-shadow: 0 4px 12px rgba(22, 163, 122, 0.28);
      }
      .lp-cal-day.has-event {
        color: var(--lp-text);
      }
      .lp-cal-day.muted {
        color: rgba(102, 112, 122, 0.45);
      }
      .lp-cal-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        position: absolute;
        bottom: 3px;
      }
      .lp-cal-dot.blue {
        background: var(--ma-blue);
      }
      .lp-cal-dot.cyan {
        background: var(--ma-cyan);
      }
      .lp-cal-dot.purple {
        background: var(--ma-purple);
      }
      /* Time slots */
      .lp-cal-slots {
        border-top: 1px solid var(--lp-border);
        padding: 12px 14px;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .lp-cal-slot {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 12px;
      }
      .lp-cal-slot.booked {
        background: rgba(31, 41, 51, 0.04);
        border: 1px solid var(--lp-border);
      }
      .lp-cal-slot.new-booked {
        background: rgba(22, 163, 122, 0.08);
        border: 1px solid rgba(22, 163, 122, 0.25);
        animation: new-slot-pop 0.5s ease both;
      }
      @keyframes new-slot-pop {
        from {
          opacity: 0;
          transform: scale(0.95);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }
      .lp-cal-slot-time {
        font-size: 11px;
        font-weight: 700;
        color: var(--lp-muted);
        min-width: 36px;
      }
      .lp-cal-slot-name {
        flex: 1;
        font-weight: 600;
        color: var(--lp-text);
      }
      .lp-cal-slot-badge {
        font-size: 10px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 999px;
      }
      .lp-cal-slot-badge.confirmed {
        background: rgba(22, 163, 122, 0.14);
        color: var(--lp-green-dark);
      }
      .lp-cal-slot-badge.new {
        background: rgba(242, 166, 90, 0.18);
        color: #c97e2e;
      }
      /* Floating notification */
      .lp-cal-notif {
        position: absolute;
        bottom: 20px;
        right: -30px;
        background: #ffffff;
        border: 1px solid rgba(22, 163, 122, 0.3);
        border-radius: 14px;
        padding: 12px 16px;
        width: 220px;
        box-shadow: var(--lp-shadow-lg);
        animation: badge-float2 5s ease-in-out infinite;
      }
      .lp-cal-notif-icon {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        background: var(--ma-grad);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .lp-cal-notif-icon svg {
        width: 16px;
        height: 16px;
        stroke: #fff;
        fill: none;
        stroke-width: 2;
      }
      .lp-cal-notif-text strong {
        display: block;
        font-size: 12px;
        color: var(--lp-text);
      }
      .lp-cal-notif-text span {
        font-size: 11px;
        color: var(--lp-muted);
      }

      /* ─── HOW IT WORKS ────────────────────────────── */
      .lp-steps {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: 18px;
      }
      .lp-step {
        background: var(--lp-card);
        border: 1px solid var(--lp-border);
        border-radius: 20px;
        padding: 30px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        transition: all 0.3s;
        position: relative;
        overflow: hidden;
        box-shadow: var(--lp-shadow);
      }
      .lp-step::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--lp-green);
        opacity: 0;
        transition: 0.3s;
        pointer-events: none;
      }
      .lp-step:hover {
        transform: translateY(-6px);
        border-color: rgba(22, 163, 122, 0.35);
        box-shadow: var(--lp-shadow-lg);
      }
      .lp-step:hover::after {
        opacity: 0.04;
      }
      .lp-step-num {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: var(--ma-grad);
        color: #fff;
        font-weight: 800;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .lp-step h3 {
        font-size: 17px;
        font-weight: 700;
      }
      .lp-step p {
        font-size: 13px;
        color: var(--lp-muted);
        line-height: 1.6;
      }

      /* ─── BENEFITS ────────────────────────────────── */
      .lp-benefits {
        background: #f6f3ec;
        border-top: 1px solid var(--lp-border);
        border-bottom: 1px solid var(--lp-border);
      }
      .lp-benefits-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 16px;
      }
      .lp-benefit {
        display: flex;
        gap: 16px;
        padding: 22px;
        background: var(--lp-card);
        border: 1px solid var(--lp-border);
        border-radius: 16px;
        transition: all 0.3s;
        box-shadow: var(--lp-shadow);
      }
      .lp-benefit:hover {
        border-color: rgba(22, 163, 122, 0.3);
        transform: translateY(-3px);
        box-shadow: var(--lp-shadow-lg);
      }
      .lp-benefit-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(22, 163, 122, 0.1);
        border: 1px solid rgba(22, 163, 122, 0.16);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .lp-benefit-icon svg {
        width: 20px;
        height: 20px;
        stroke: var(--lp-green);
        fill: none;
        stroke-width: 1.8;
      }
      .lp-benefit h3 {
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 5px;
      }
      .lp-benefit p {
        font-size: 13px;
        color: var(--lp-muted);
        line-height: 1.55;
      }

      /* ─── USE CASES ───────────────────────────────── */
      .lp-usecases-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
        gap: 12px;
      }
      .lp-usecase {
        background: var(--lp-card);
        border: 1px solid var(--lp-border);
        border-radius: 14px;
        padding: 22px 16px;
        min-height: 150px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.25;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: all 0.25s;
        box-shadow: var(--lp-shadow);
      }
      .lp-usecase:hover {
        border-color: rgba(22, 163, 122, 0.4);
        color: var(--lp-green);
        transform: translateY(-3px);
        box-shadow: var(--lp-shadow-lg);
      }
      .lp-usecase-icon {
        font-size: 30px;
        display: block;
      }
      .lp-usecase-title {
        display: block;
        max-width: 12ch;
        text-wrap: balance;
      }

      /* ─── STATS BAR ───────────────────────────────── */
      .lp-stats-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
      }
      .lp-stat {
        text-align: center;
        padding: 12px 40px;
      }
      .lp-stat-num {
        display: block;
        font-size: clamp(32px, 4vw, 48px);
        font-weight: 900;
        letter-spacing: -0.03em;
        line-height: 1.1;
      }
      .lp-stat-label {
        display: block;
        font-size: 13px;
        color: var(--lp-muted);
        margin-top: 6px;
        font-weight: 500;
      }
      .lp-stat-sep {
        width: 1px;
        height: 48px;
        background: var(--lp-border);
        align-self: center;
      }

      /* ─── COMPARISON ──────────────────────────────── */
      .lp-comparison {
        overflow-x: auto;
        border-radius: 16px;
        border: 1px solid var(--lp-border);
      }
      .lp-cmp-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
        min-width: 520px;
      }
      .lp-cmp-table thead th {
        padding: 16px 20px;
        text-align: center;
        font-size: 13px;
        font-weight: 700;
        background: #f6f3ec;
        border-bottom: 1px solid var(--lp-border);
      }
      .lp-cmp-table .lp-cmp-feature {
        text-align: left;
        font-weight: 500;
      }
      .lp-cmp-table .lp-cmp-brand {
        background: rgba(22, 163, 122, 0.05);
      }
      .lp-cmp-table thead .lp-cmp-brand {
        background: rgba(22, 163, 122, 0.12);
        color: var(--lp-green-dark);
      }
      .lp-cmp-table tbody tr {
        border-bottom: 1px solid var(--lp-border);
      }
      .lp-cmp-table tbody tr:last-child {
        border-bottom: none;
      }
      .lp-cmp-table tbody tr:hover {
        background: rgba(31, 41, 51, 0.02);
      }
      .lp-cmp-table td {
        padding: 14px 20px;
        text-align: center;
        color: var(--lp-muted);
      }
      .lp-cmp-table td.lp-cmp-feature {
        text-align: left;
        color: var(--lp-text);
      }
      .lp-cmp-yes {
        color: var(--lp-green-dark);
        font-size: 12px;
        font-weight: 700;
      }
      .lp-cmp-no {
        color: #6b7280;
        font-size: 12px;
        font-weight: 700;
      }
      .lp-cmp-partial {
        color: #f59e0b;
        font-size: 12px;
        font-weight: 700;
      }

      /* ─── TESTIMONIALS ────────────────────────────── */
      .lp-testimonials-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        margin-top: 8px;
      }
      .lp-testimonial {
        background: var(--lp-card);
        border: 1px solid var(--lp-border);
        border-radius: 20px;
        padding: 28px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        transition: 0.3s;
        box-shadow: var(--lp-shadow);
      }
      .lp-testimonial:hover {
        transform: translateY(-4px);
        border-color: rgba(22, 163, 122, 0.3);
        box-shadow: var(--lp-shadow-lg);
      }
      .lp-testimonial-stars {
        color: var(--lp-amber);
        font-size: 16px;
        letter-spacing: 2px;
      }
      .lp-testimonial-quote {
        font-size: 14px;
        color: var(--lp-muted);
        line-height: 1.7;
        font-style: italic;
        flex: 1;
      }
      .lp-testimonial-quote::before {
        content: "\201C";
        color: var(--ma-blue);
        font-size: 28px;
        font-style: normal;
        line-height: 0;
        vertical-align: -0.5em;
        margin-right: 4px;
      }
      .lp-testimonial-author {
        display: flex;
        align-items: center;
        gap: 12px;
        border-top: 1px solid var(--lp-border);
        padding-top: 16px;
      }
      .lp-testimonial-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        color: #fff;
        flex-shrink: 0;
      }
      .lp-testimonial-author strong {
        display: block;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 2px;
      }
      .lp-testimonial-author span {
        font-size: 12px;
        color: var(--lp-muted);
      }

      /* ─── PLANS ───────────────────────────────────── */
      .lp-plans-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
        gap: 20px;
      }
      .lp-plan {
        background: var(--lp-card);
        border: 1px solid var(--lp-border);
        border-radius: 24px;
        padding: 36px;
        display: flex;
        flex-direction: column;
        gap: 18px;
        transition: 0.3s;
        box-shadow: var(--lp-shadow);
      }
      .lp-plan:hover {
        transform: translateY(-4px);
        box-shadow: var(--lp-shadow-lg);
      }
      .lp-plan.featured {
        border-color: var(--lp-green);
        background: linear-gradient(
          145deg,
          rgba(22, 163, 122, 0.05),
          var(--lp-card)
        );
        box-shadow:
          0 0 0 1px rgba(22, 163, 122, 0.2),
          0 18px 44px rgba(22, 163, 122, 0.1);
      }
      .lp-plan-badge {
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        padding: 4px 12px;
        border-radius: 999px;
        background: rgba(22, 163, 122, 0.14);
        color: var(--lp-green-dark);
        border: 1px solid rgba(22, 163, 122, 0.3);
        margin-bottom: 6px;
      }
      .lp-plan-name {
        font-size: 24px;
        font-weight: 800;
      }
      .lp-plan-price {
        font-size: 38px;
        font-weight: 900;
        color: var(--lp-green);
      }
      .lp-plan-price span {
        font-size: 15px;
        font-weight: 400;
        color: var(--lp-muted);
        -webkit-text-fill-color: var(--lp-muted);
      }
      .lp-plan-desc {
        font-size: 13px;
        color: var(--lp-muted);
        line-height: 1.6;
      }
      .lp-plan-features {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex: 1;
      }
      .lp-plan-features li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        font-size: 13px;
        color: var(--lp-muted);
      }
      .lp-plan-check {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(22, 163, 122, 0.14);
        color: var(--lp-green);
        font-size: 10px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 1px;
      }
      .lp-plan-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 13px 20px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
        border: none;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.2s;
        margin-top: 6px;
      }
      .lp-plan-btn-primary {
        background: var(--lp-green);
        color: #fff;
        box-shadow: 0 6px 16px rgba(22, 163, 122, 0.22);
      }
      .lp-plan-btn-primary:hover {
        transform: translateY(-2px);
        background: var(--lp-green-strong);
        box-shadow: 0 10px 24px rgba(22, 163, 122, 0.3);
      }
      .lp-plan-btn-outline {
        border: 1.5px solid var(--lp-green);
        color: var(--lp-green);
        background: transparent;
      }
      .lp-plan-btn-outline:hover {
        background: rgba(22, 163, 122, 0.08);
      }
      .lp-plan-btn-ghost {
        border: 1px solid var(--lp-border);
        color: var(--lp-muted);
        background: transparent;
      }
      .lp-plan-btn-ghost:hover {
        border-color: #ddd5c7;
        color: var(--lp-text);
      }

      /* ─── FAQ ─────────────────────────────────────── */
      .lp-faq {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .lp-faq-item {
        border: 1px solid var(--lp-border);
        border-radius: 14px;
        overflow: hidden;
        background: var(--lp-card);
        transition: 0.2s;
        box-shadow: var(--lp-shadow);
      }
      .lp-faq-item[open] {
        border-color: rgba(22, 163, 122, 0.3);
        background: rgba(22, 163, 122, 0.03);
      }
      .lp-faq-q {
        padding: 18px 22px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        user-select: none;
        gap: 12px;
      }
      .lp-faq-q::-webkit-details-marker {
        display: none;
      }
      .lp-faq-q::after {
        content: "+";
        font-size: 22px;
        font-weight: 300;
        color: var(--ma-blue);
        flex-shrink: 0;
        transition: 0.2s;
        line-height: 1;
      }
      .lp-faq-item[open] .lp-faq-q::after {
        content: "−";
      }
      .lp-faq-q:hover {
        color: var(--ma-blue);
      }
      .lp-faq-a {
        padding: 0 22px 18px;
        font-size: 14px;
        color: var(--lp-muted);
        line-height: 1.75;
      }

      /* ─── FINAL CTA ───────────────────────────────── */
      /* ─── Hero: mascota izquierda + copy derecha ─── */
      .lp-hero-left {
        display: flex;
        align-items: center;
        gap: 28px;
      }
      .lp-hero-copy {
        flex: 1;
        min-width: 0;
      }
      .lp-hero-mascot-wrap {
        flex-shrink: 0;
        position: relative;
        align-self: center;
      }
      .lp-hero-mascot-glow {
        position: absolute;
        bottom: -16px;
        left: 50%;
        transform: translateX(-50%);
        width: 210px;
        height: 130px;
        background: radial-gradient(
          ellipse,
          rgba(22, 163, 122, 0.12) 0%,
          rgba(242, 166, 90, 0.08) 45%,
          transparent 72%
        );
        border-radius: 50%;
        filter: blur(34px);
        pointer-events: none;
        animation: heroMascotGlow 4s ease-in-out infinite;
      }
      @keyframes heroMascotGlow {
        0%,
        100% {
          opacity: 0.7;
          transform: translateX(-50%) scale(1);
        }
        50% {
          opacity: 1;
          transform: translateX(-50%) scale(1.1);
        }
      }
      .lp-hero-mascot {
        position: relative;
        z-index: 1;
        width: clamp(120px, 13vw, 195px);
        max-width: 100%;
        height: auto;
        filter: drop-shadow(0 10px 24px rgba(31, 41, 51, 0.14));
        animation: heroMascotFloat 4s ease-in-out infinite;
      }
      @keyframes heroMascotFloat {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-12px);
        }
      }

      /* ─── CTA band ────────────────────────────────── */
      .lp-cta-band {
        text-align: center;
        padding: 100px 24px;
        position: relative;
        overflow: hidden;
      }
      .lp-cta-band::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 700px;
        height: 700px;
        background: radial-gradient(
          circle,
          rgba(22, 163, 122, 0.06),
          transparent 65%
        );
        transform: translate(-50%, -50%);
        pointer-events: none;
      }
      .lp-cta-band h2 {
        font-size: clamp(32px, 4.5vw, 56px);
        font-weight: 900;
        letter-spacing: -0.03em;
        margin-bottom: 18px;
        position: relative;
      }
      .lp-cta-band p {
        font-size: 18px;
        color: var(--lp-muted);
        margin-bottom: 40px;
        position: relative;
      }
      .lp-cta-band-actions {
        display: flex;
        gap: 14px;
        justify-content: center;
        flex-wrap: wrap;
        position: relative;
      }

      /* ─── FOOTER ──────────────────────────────────── */
      .lp-footer {
        background: #f6f3ec;
        border-top: 1px solid var(--lp-border);
        padding: 64px 24px 0;
      }
      .lp-footer-inner {
        max-width: 1120px;
        margin: 0 auto;
      }
      .lp-footer-top {
        display: grid;
        grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
        gap: 48px;
        padding-bottom: 52px;
      }
      .lp-footer-brand {
      }
      .lp-footer-brand-logo {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
      }
      .lp-footer-brand-logo img {
        width: 56px;
        height: 56px;
        object-fit: contain;
      }
      .lp-footer-brand-name {
        font-size: 20px;
        font-weight: 800;
        color: var(--lp-text);
      }
      .lp-footer-tagline {
        font-size: 14px;
        color: var(--lp-muted);
        line-height: 1.65;
        margin-bottom: 24px;
        max-width: 280px;
      }
      .lp-footer-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--lp-green);
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        padding: 10px 18px;
        border-radius: 10px;
        transition: 0.2s;
        text-decoration: none;
        box-shadow: 0 6px 16px rgba(22, 163, 122, 0.22);
      }
      .lp-footer-cta:hover {
        transform: translateX(3px);
        background: var(--lp-green-strong);
        box-shadow: 0 10px 24px rgba(22, 163, 122, 0.3);
      }
      .lp-footer-col-title {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--lp-muted);
        margin-bottom: 20px;
      }
      .lp-footer-links {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .lp-footer-links a {
        font-size: 14px;
        color: var(--lp-muted);
        transition: 0.15s;
      }
      .lp-footer-links a:hover {
        color: var(--lp-green);
        padding-left: 4px;
      }
      .lp-footer-email {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #ffffff;
        border: 1px solid var(--lp-border);
        color: var(--lp-text);
        font-size: 13px;
        padding: 10px 14px;
        border-radius: 10px;
        transition: 0.2s;
        text-decoration: none;
      }
      .lp-footer-email:hover {
        background: #ffffff;
        border-color: #ddd5c7;
      }
      .lp-footer-email svg {
        width: 15px;
        height: 15px;
        stroke: var(--lp-green);
        flex-shrink: 0;
      }
      .lp-footer-contact-group {
        margin-bottom: 24px;
      }
      .lp-footer-bottom {
        border-top: 1px solid var(--lp-border);
        padding: 24px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
      }
      .lp-footer-copyright {
        font-size: 13px;
        color: rgba(139, 149, 168, 0.6);
      }
      .lp-footer-made {
        font-size: 13px;
        color: rgba(139, 149, 168, 0.6);
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .lp-footer-made .heart {
        color: #e25555;
        animation: heart-beat 0.9s ease-in-out infinite;
      }
      .lp-footer-made .mexico {
        color: var(--ma-cyan);
        font-weight: 600;
      }
      @keyframes heart-beat {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.25);
        }
      }

      /* ─── RESPONSIVE ──────────────────────────────── */
      @media (max-width: 1000px) {
        .lp-hero-inner {
          grid-template-columns: 1fr;
          text-align: center;
        }
        .lp-hero-left {
          flex-direction: column;
          align-items: center;
        }
        .lp-hero-sub {
          max-width: 100%;
        }
        .lp-hero-ctas {
          justify-content: center;
        }
        .lp-hero-proof {
          justify-content: center;
        }
        .lp-hero-fineprint {
          text-align: center;
        }
        .lp-hero-mascot {
          width: clamp(100px, 22vw, 150px);
        }
        .lp-hero-mascot-glow {
          width: 180px;
          height: 110px;
        }
        .lp-hero-visual {
          flex-direction: column;
          align-items: center;
          gap: 16px;
        }
        .lp-hero-badges {
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
          gap: 8px;
        }
        .lp-hero-badges .lp-float-badge {
          animation: badgeDriftMobile var(--badge-dur, 4.8s) ease-in-out infinite;
          animation-delay: var(--badge-delay, 0s);
          white-space: normal;
          text-align: center;
        }
        @keyframes badgeDriftMobile {
          0%,
          100% {
            transform: translateY(0) rotate(-0.3deg);
          }
          50% {
            transform: translateY(-4px) rotate(0.3deg);
          }
        }
        .iphone {
          width: 220px;
          height: 454px;
        }
        .lp-multiconv-wrap,
        .lp-calendar-wrap {
          grid-template-columns: 1fr;
        }
        .lp-footer-top {
          grid-template-columns: 1fr 1fr;
          gap: 36px;
        }
        .lp-nav-links {
          display: none;
        }
      }
      @media (max-width: 600px) {
        .lp-brand-logo img {
          width: 48px;
          height: 48px;
        }
        .lp-brand-name {
          font-size: 16px;
        }
        .lp-brand-slogan {
          display: none;
        }
        .lp-brand-logo {
          gap: 10px;
          flex-shrink: 1;
          min-width: 0;
          overflow: hidden;
        }
        .lp-nav-inner {
          height: 68px;
          gap: 8px;
          padding: 0 14px;
        }
        .lp-nav-ctas {
          gap: 6px;
          flex-shrink: 0;
        }
        .lp-nav-ctas .lp-btn {
          padding: 8px 11px;
          font-size: 12px;
          gap: 4px;
        }
        .lp-hero-proof {
          gap: 8px;
        }
        .lp-proof-pill {
          width: 100%;
          justify-content: center;
        }
        .lp-hero-mascot {
          width: 100px;
        }
        .lp-hero-mascot-glow {
          width: 150px;
          height: 95px;
          filter: blur(22px);
        }
        .iphone {
          width: 198px;
          height: 408px;
        }
        .lp-float-badge {
          font-size: 11px;
          padding: 7px 11px;
        }
        .lp-footer-top {
          grid-template-columns: 1fr;
          gap: 28px;
        }
        section {
          padding: 64px 20px;
        }
        .lp-stat-sep {
          display: none;
        }
        .lp-stat {
          padding: 12px 20px;
        }
        .lp-cal-notif {
          display: none;
        }
      }
      @media (max-width: 360px) {
        .lp-nav-ctas .lp-btn-ghost {
          display: none;
        }
        .lp-nav-ctas .lp-btn-primary {
          padding: 8px 14px;
          font-size: 12px;
        }
      }
      @media (max-width: 390px) {
        .lp-brand-logo img {
          width: 38px;
          height: 38px;
        }
        .lp-brand-name {
          font-size: 14px;
        }
        .lp-nav-inner {
          padding: 0 10px;
          gap: 6px;
        }
        .lp-nav-ctas .lp-btn {
          padding: 7px 9px;
          font-size: 11px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation: none !important;
          scroll-behavior: auto !important;
          transition: none !important;
        }
        .reveal {
          opacity: 1;
          transform: none;
        }
        .iphone-wrap,
        .lp-hero-mascot,
        .lp-hero-mascot-glow,
        .lp-hero-badges .lp-float-badge,
        .shimmer-text,
        .glow-text {
          animation: none !important;
        }
      }


/* Source: templates/landing.html style block 2 */
@keyframes dSpin{to{transform:rotate(360deg)}}
    #demoRequestOverlay[hidden]{display:none!important}

    .dfield{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#66707A}
    .dfield label{font:inherit;color:inherit}
    .dfield input,.dfield textarea{
      background:#FFFFFF;border:1px solid #ECE7DE;border-radius:10px;padding:10px 13px;
      color:#1E2A32;font-size:13px;font-family:inherit;outline:none;width:100%;box-sizing:border-box;
      transition:border-color .15s}
    .dfield input::placeholder,.dfield textarea::placeholder{color:#9AA3AD}
    .dfield input:focus,.dfield textarea:focus{border-color:#16A37A}

    .dstep{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
      font-size:12px;font-weight:700;background:rgba(255,255,255,.06);color:#8696a0;
      border:1px solid #2a373e;transition:.2s;flex-shrink:0}
    .dstep.active{background:rgba(22,163,122,.18);color:#22c08c;border-color:rgba(22,163,122,.45)}
    .dstep.done{background:rgba(34,197,94,.12);color:#4ade80;border-color:rgba(34,197,94,.3)}

    .ddate-btn{padding:8px 6px;border-radius:10px;font-size:11px;font-weight:600;cursor:pointer;
      border:1px solid #2a373e;background:#1a272e;color:#8696a0;text-align:center;
      min-width:52px;transition:.15s;flex-shrink:0}
    .ddate-btn:hover{border-color:#22c08c;color:#22c08c}
    .ddate-btn.selected{background:rgba(22,163,122,.18);border-color:#22c08c;color:#22c08c}
    .ddate-btn.no-slots{opacity:.35;cursor:not-allowed}

    .dslot-btn{padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;
      border:1px solid #2a373e;background:#1a272e;color:#8696a0;transition:.15s}
    .dslot-btn:hover{border-color:#22c08c;color:#22c08c}
    .dslot-btn.selected{background:rgba(22,163,122,.18);border-color:#22c08c;color:#22c08c}

    @media(max-width:480px){
      #demoStep1 > div:first-of-type{grid-template-columns:1fr!important}
    }

/* ── Landing redesign: mobile overflow polish (appended last to win the cascade) ── */
html, body { overflow-x: hidden; }
@media (max-width: 600px) {
  .lp-cal-notif { display: none !important; }
}