/* ==========================================================================
   Conversion landing page, AI growth plan, chat assistant.
   Loaded after site.css and uses its tokens.
   ========================================================================== */
.btn-accent { background: linear-gradient(135deg, #ff7a52, #f0532c); color: #fff; box-shadow: 0 8px 24px rgb(240 83 44 / 35%); }
.btn-accent:hover { box-shadow: 0 12px 30px rgb(240 83 44 / 45%); }
.badge-ai { background: linear-gradient(135deg, #6d4bff, #b06bff); color: #fff; }
.badge-neutral { background: var(--bg-alt); color: var(--ink-2); border: 1px solid var(--line); }
.nav-contact { color: var(--ink-2); text-decoration: none; font-weight: 550; font-size: .975rem; padding: 8px 4px; }
.nav-contact:hover, .nav-contact[aria-current="page"] { color: var(--brand); }
.js-only { display: none !important; }
.js .js-only { display: inline-flex !important; }
.js .plan-back.js-only { display: block !important; }

/* ---- hero ---- */
.lp-hero { position: relative; overflow: hidden; overflow: clip; padding: 64px 0 88px; background: #0e0b24; color: #e9e6ff; isolation: isolate; }
/* soft glows as radial gradients: same look as a blur filter, a fraction of the paint cost on phones */
.lp-glow { position: absolute; z-index: -1; pointer-events: none; }
.lp-glow.g1 { width: 900px; height: 900px; left: -380px; top: -440px; background: radial-gradient(closest-side, rgb(109 75 255 / 55%), rgb(109 75 255 / 0)); }
.lp-glow.g2 { width: 800px; height: 800px; right: -300px; bottom: -480px; background: radial-gradient(closest-side, rgb(255 107 74 / 32%), rgb(255 107 74 / 0)); }
.lp-grid-bg { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 30% 30%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 30%, transparent 75%); }
.lp-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
/* grid items default to min-width:auto and would grow to their widest content instead of shrinking with the screen */
.lp-hero-grid > *, .lp-inside > * { min-width: 0; }
.lp-hero h1 { overflow-wrap: break-word; }
.lp-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 15%); font-size: .875rem; font-weight: 600; color: #d8d0ff; margin-bottom: 22px; }
.lp-badge .icon { color: #ffb199; width: 1.05em; height: 1.05em; }
.lp-hero h1 { color: #fff; font-size: clamp(2.3rem, 5vw, 3.9rem); margin-bottom: 20px; }
.lp-hl { background: linear-gradient(100deg, #b9a4ff, #ff9a80); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-sub { font-size: 1.2rem; color: #c9c3ea; max-width: 560px; }
.lp-benefits { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 12px; }
.lp-benefits li { display: flex; gap: 12px; align-items: flex-start; color: #ddd8f7; }
.lp-benefits strong { color: #fff; }
.lp-benefits .icon { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: rgb(74 222 128 / 18%); color: #4ade80; margin-top: 1px; }
.lp-trust { display: flex; align-items: center; gap: 14px; font-size: .925rem; color: #b6afd9; }
.lp-avatars { display: flex; flex: none; }
.lp-avatars i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .85rem; color: #fff; border: 2px solid #0e0b24; margin-left: -10px; background: linear-gradient(135deg, #7a3b0c, #d98a1e); }
.lp-avatars i:first-child { margin-left: 0; }
.lp-avatars i:nth-child(2) { background: linear-gradient(135deg, #12506b, #3fa7a0); }
.lp-avatars i:nth-child(3) { background: linear-gradient(135deg, #0b7a70, #5ac8b8); }
.lp-avatars i:nth-child(4) { background: #3a3270; }
.lp-link { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 650; text-decoration: none; margin-top: 4px; }
.lp-link .icon { width: 1em; height: 1em; color: #ffb199; }
.lp-link:hover { text-decoration: underline; }

/* ---- plan form card (always light, for maximum form legibility) ---- */
.plan-card { position: relative; background: #fff; color: #17152b; border-radius: 22px; padding: 28px; box-shadow: 0 30px 80px rgb(0 0 0 / 45%); }
.plan-card::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 24px; background: linear-gradient(135deg, #8f73ff, #ff7a52); }
.plan-card h2 { color: #17152b; font-size: 1.45rem; margin-bottom: 14px; }
.plan-card label { color: #17152b; }
.plan-card input[type="text"], .plan-card input[type="email"], .plan-card select { background: #fff; color: #17152b; border-color: #dcd9ea; padding: 11px 13px; }
.plan-card .opt { color: #6b6884; }
.plan-card .field { margin-bottom: 14px; }
.plan-card .check { color: #45425e; }
.plan-card .check a { color: #4f2bea; }
.plan-card .alert-error { background: #fdecea; color: #b42318; }
.plan-card .field-error { color: #b42318; }
.plan-card .link-btn { color: #4f2bea; }
.plan-card .req { color: #b42318; }
.plan-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #c2410c; margin-bottom: 6px; }
.plan-kicker .icon { width: 1em; height: 1em; }
.plan-steps { display: flex; gap: 8px; margin-bottom: 18px; }
.plan-steps-center { justify-content: center; }
.ps { flex: 1; font-size: .78rem; font-weight: 700; color: #6b6884; padding-top: 8px; border-top: 3px solid #e7e5f1; }
.ps.is-on { color: #4f2bea; border-color: #4f2bea; }
.ps.is-done { color: #087a3e; border-color: #4ade80; }
.plan-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.js .plan-step[data-step="2"] { display: none; }
.js .plan-card.at-step-2 .plan-step[data-step="1"] { display: none; }
.js .plan-card.at-step-2 .plan-step[data-step="2"] { display: block; animation: fadeUp .35s ease both; }
.plan-back { margin: 12px auto 0; font-size: .9rem; }
.plan-note { margin: 14px 0 0; font-size: .82rem; color: #5d5a75; text-align: center; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- what's inside ---- */
.lp-inside { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.lp-inside-list { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; gap: 20px; }
.lp-inside-list li { display: flex; gap: 16px; align-items: flex-start; }
.lp-inside-list .step-num { flex: none; margin: 0; }
.lp-inside-list h3 { margin-bottom: 4px; }
.lp-inside-list p { margin: 0; color: var(--ink-2); }
.plan-preview { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 26px; box-shadow: var(--shadow-l); transform: rotate(1.2deg); }
.pp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.pp-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); }
.pp-tag .icon { width: 1em; height: 1em; }
.pp-dots { display: flex; gap: 5px; }
.pp-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.pp-title { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.pp-block { background: var(--bg-alt); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.pp-block p { margin: 0 0 6px; font-size: .925rem; display: flex; gap: 8px; align-items: center; }
.pp-block .icon { color: var(--ok); width: 1em; height: 1em; }
.pp-block .pp-label { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.pp-cols div { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; gap: 2px; font-size: .8rem; }
.pp-cols b { color: var(--brand); }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pp-chips span { font-size: .78rem; font-weight: 650; padding: 4px 10px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--line); }
.pp-chips .hi { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pp-pkg { font-size: .925rem; padding-top: 12px; border-top: 1px dashed var(--line); }

/* ---- pains ---- */
.pain-x { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--err-soft); color: var(--err); font-weight: 900; margin-bottom: 14px; }
.pain p { color: var(--ink-2); }
.pain .pain-fix { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: .95rem; }
.pain-fix .icon { color: var(--ok); margin-top: .2em; }

/* ---- guarantee ---- */
.guarantee { display: flex; gap: 28px; align-items: flex-start; padding: 40px; border-radius: 24px; background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent); }
.guarantee .icon-badge { flex: none; margin: 0; }
.guarantee h2 { font-size: 1.8rem; }
.guarantee-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.guarantee-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); }
.guarantee-list strong { color: var(--ink); }
.guarantee-list .icon { color: var(--ok); margin-top: .25em; }

/* ---- sticky phone CTA (shown under 900px on the home page) ---- */
.sticky-cta { display: none; }

/* ---- plan result page ---- */
.plan-hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.plan-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .9rem; }
.plan-body { display: grid; gap: 24px; }
.plan-sec h2 { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; }
.plan-ic { width: 28px; height: 28px; padding: 5px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); }
.roadmap { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.roadmap .card { padding: 22px; }
.roadmap-phase { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); margin-bottom: 6px; }
.roadmap ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: .95rem; display: grid; gap: 6px; }
.channels { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.channels li { display: flex; gap: 14px; align-items: flex-start; }
.channels p { margin: 2px 0 0; color: var(--ink-2); font-size: .95rem; }
.prio { flex: none; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 4px 9px; border-radius: 6px; margin-top: 2px; min-width: 64px; text-align: center; }
.prio-high { background: var(--ok-soft); color: var(--ok); }
.prio-medium { background: var(--warn-soft); color: var(--warn); }
.prio-low { background: var(--bg-alt); color: var(--muted); }
.plan-pkg-card { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; padding: 36px; border-radius: 24px; color: #fff; background: radial-gradient(circle at 10% 10%, #7a5cff, transparent 50%), radial-gradient(circle at 90% 90%, #ff6b4a, transparent 45%), #241a6b; }
.plan-pkg-card h2 { color: #fff; }
.plan-pkg-card .eyebrow { color: #d6ccff; }
.plan-pkg-card p { color: rgb(255 255 255 / 85%); margin: 0; max-width: 520px; }

/* ---- plan loading overlay ---- */
.plan-loading { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgb(14 11 36 / 85%); backdrop-filter: blur(6px); }
.plan-loading[hidden] { display: none; }
.plan-loading-card { background: var(--surface); border-radius: 22px; padding: 36px 32px; max-width: 420px; width: 100%; text-align: center; box-shadow: var(--shadow-l); }
.spinner { display: inline-block; width: 48px; height: 48px; border-radius: 50%; border: 4px solid var(--brand-soft); border-top-color: var(--brand); animation: spin .9s linear infinite; margin-bottom: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-steps { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; text-align: left; }
.loading-steps li { padding: 10px 14px; border-radius: 10px; background: var(--bg-alt); color: var(--muted); font-size: .925rem; transition: background .3s, color .3s; }
.loading-steps li.on { background: var(--brand-soft); color: var(--brand); font-weight: 650; }
.loading-steps li.done { color: var(--ok); }

/* ---- chat assistant ---- */
.chat { position: fixed; right: 20px; bottom: 20px; z-index: 60; }
.chat-fab { display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; padding: 14px 20px; border-radius: 999px; font: inherit; font-weight: 700; color: #fff; background: linear-gradient(135deg, #5b3df5, #8b5cf6); box-shadow: 0 14px 36px rgb(79 43 234 / 45%); }
.chat-fab .icon { width: 22px; height: 22px; }
.chat-fab-open, .chat-fab-close { display: inline-flex; align-items: center; gap: 10px; }
.chat-fab-close, .chat.open .chat-fab-open { display: none; }
.chat.open .chat-fab-close { display: inline-flex; }
.chat.open .chat-fab { padding: 14px; }
.chat-panel { position: absolute; right: 0; bottom: 70px; width: min(380px, calc(100vw - 32px)); max-height: min(600px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 80px rgb(0 0 0 / 30%); overflow: hidden; animation: fadeUp .25s ease both; }
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: linear-gradient(135deg, #2a1d74, #4f2bea); color: #fff; }
.chat-avatar { width: 38px; height: 38px; color: #8f73ff; flex: none; border-radius: 10px; box-shadow: 0 0 0 2px rgb(255 255 255 / 35%); }
.chat-avatar svg { width: 100%; height: 100%; }
.chat-title { margin: 0; font-weight: 750; display: flex; align-items: center; gap: 8px; }
.chat-sub { margin: 0; font-size: .8rem; color: #d6ccff; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
.msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: .95rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-bot { align-self: flex-start; background: var(--bg-alt); color: var(--ink); border-bottom-left-radius: 4px; }
.msg-user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.msg-typing { display: inline-flex; gap: 4px; }
.msg-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.msg-typing i:nth-child(2) { animation-delay: .2s; }
.msg-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.chat-suggest[hidden] { display: none; }
.chat-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.chat-suggest button { font: inherit; font-size: .8rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--brand); cursor: pointer; }
.chat-suggest button:hover { border-color: var(--brand); }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; padding: 10px 14px; border-radius: 999px; }
.chat-send { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--brand); color: #fff; cursor: pointer; display: grid; place-items: center; }
.chat-send[disabled] { opacity: .5; cursor: progress; }
.chat-foot { margin: 0; padding: 0 14px 12px; font-size: .72rem; color: var(--muted); text-align: center; }
.wa-float { right: auto; left: 20px; }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .roadmap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .lp-hero { padding: 40px 0 64px; }
  .lp-hero-grid, .lp-inside { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .plan-preview { transform: none; }
  .guarantee { flex-direction: column; padding: 28px; }
  .guarantee-list { grid-template-columns: minmax(0, 1fr); }
  .nav-contact { padding: 12px; font-size: 1.05rem; }
  .home .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); transition: transform .25s; }
  .home .sticky-cta .btn-accent { flex: 1; }
  .home .sticky-cta.is-hidden { transform: translateY(110%); }
  .home .chat, .home .wa-float { bottom: 84px; }
  .plan-in-view .chat:not(.open) .chat-fab, .plan-in-view .wa-float { opacity: 0; pointer-events: none; }
  .chat-fab, .wa-float { transition: opacity .2s; }
  .home .site-footer { padding-bottom: 96px; }
}
@media (max-width: 600px) {
  .plan-card { padding: 22px 18px; }
  .chat { right: 12px; }
  .chat-fab-label { display: none; }
  .chat-fab { padding: 14px; }
  .pp-cols { grid-template-columns: minmax(0, 1fr); }
  .plan-pkg-card { padding: 26px 20px; }
  .lp-trust { align-items: flex-start; }
}

/* ---- print the plan as a clean PDF ---- */
@media print {
  .site-header, .site-footer, .chat, .wa-float, .no-print, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .plan-pkg-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .plan-pkg-card { background: #fff; color: #000; }
  .plan-pkg-card h2, .plan-pkg-card p, .plan-pkg-card .eyebrow { color: #000; }
  .page-hero { background: none; }
}

/* ---- cyber security band ---- */
.sec-band { background: radial-gradient(circle at 85% 15%, rgb(79 43 234 / 35%), transparent 45%), radial-gradient(circle at 10% 90%, rgb(18 161 80 / 22%), transparent 45%), var(--dark); }
.sec-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.sec-grid > * { min-width: 0; }
.sec-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sec-pillar { padding: 22px; border-radius: 16px; background: rgb(255 255 255 / 6%); border: 1px solid rgb(255 255 255 / 12%); }
.sec-pillar h3 { color: #fff; font-size: 1.05rem; margin: 12px 0 6px; }
.sec-pillar p { color: #c8c3ea; font-size: .95rem; margin: 0; }
.sec-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgb(74 222 128 / 15%); color: #4ade80; }
.sec-ic .icon { width: 24px; height: 24px; }
.section-dark .eyebrow .icon-inline { color: #4ade80; }

/* ---- client benefits & results ---- */
.benefit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.benefit { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-s); }
.benefit .icon-badge { flex: none; margin: 0; width: 44px; height: 44px; }
.benefit h3 { font-size: 1rem; margin: 2px 0 4px; }
.benefit p { margin: 0; font-size: .925rem; color: var(--ink-2); }
.results-band { margin-top: 48px; padding: 36px; border-radius: 24px; text-align: center; background: var(--brand-soft); }
.results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 12px; }
.result p { margin: 0; color: var(--ink-2); }
.result .result-value { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 900; letter-spacing: -0.03em; color: var(--brand); line-height: 1.1; margin-bottom: 4px; }
.result .badge { margin-top: 6px; }

/* ---- platforms & partners ---- */
.platforms { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.platforms li { padding: 10px 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; color: var(--ink-2); letter-spacing: -0.01em; }
.certified { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 24px; }
.cert { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-radius: 14px; background: var(--ok-soft); color: var(--ink); }
.cert .icon { color: var(--ok); width: 26px; height: 26px; }
.anchor { position: relative; top: calc(-1 * var(--header-h) - 16px); display: block; height: 0; }

@media (max-width: 1024px) { .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sec-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sec-pillars, .benefit-grid { grid-template-columns: minmax(0, 1fr); } .results-band { padding: 26px 18px; } }

/* ---- product pages ---- */
.product-hero { padding: 72px 0 80px; text-align: center; }
.product-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.center-sub { margin-left: auto; margin-right: auto; }
.lp-trust-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; color: #ddd8f7; font-size: .95rem; }
.lp-trust-list li { display: inline-flex; align-items: center; gap: 6px; }
.lp-trust-list .icon { color: #4ade80; width: 1.1em; height: 1.1em; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.product-card { display: grid; gap: 6px; align-content: start; text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s, border-color .2s; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.product-card h2 { font-size: 1.25rem; margin: 0; }
.product-card p { color: var(--ink-2); margin: 0 0 6px; }
.product-card .icon-badge { margin-bottom: 8px; }
.plans.plans-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.plans.plans-4 .plan { padding: 26px 20px; }
@media (max-width: 1100px) { .plans.plans-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .plans.plans-4 { grid-template-columns: minmax(0, 1fr); } }


/* ---- always-visible lead bar (every page except the contact flow) ---- */
:root { --leadbar-h: 0px; }
.has-leadbar { --leadbar-h: 84px; padding-bottom: var(--leadbar-h); }
.has-leadbar .sticky-cta { display: none !important; }
.has-leadbar .chat, .has-leadbar .wa-float { bottom: calc(var(--leadbar-h) + 16px); }
.leadbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 58; background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgb(23 21 43 / 10%); }
.leadbar-inner { display: flex; align-items: center; gap: 18px; padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.leadbar-pitch { flex: 0 0 auto; max-width: 230px; }
.leadbar-title { margin: 0; font-weight: 800; line-height: 1.25; color: var(--ink); }
.leadbar-sub { margin: 2px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.3; }
.leadbar-panel { flex: 1; min-width: 0; }
.leadbar-open { display: none; }
.leadbar-min { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); cursor: pointer; }
.leadbar-min svg { width: 18px; height: 18px; transition: transform .2s; }
.leadbar.is-min .leadbar-panel, .leadbar.is-min .leadbar-sub { display: none; }
.leadbar.is-min .leadbar-open { display: inline-flex; }
.leadbar.is-min .leadbar-min svg { transform: rotate(180deg); }
.has-leadbar-min { --leadbar-h: 64px; }

/* lead form (bar, landing hero, /lead) */
.lead-form { margin: 0; }
.lead-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lead-form .lf { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lead-form label { font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.lead-form input:not([type=checkbox]), .lead-form select { width: 100%; font: inherit; font-size: .95rem; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.lead-form input:focus, .lead-form select:focus { outline: 3px solid var(--brand-soft); border-color: var(--brand); }
.lead-form .lf-submit { grid-column: 1 / -1; justify-content: flex-end; }
.lead-form .lf-submit .btn { width: 100%; justify-content: center; }
.lead-consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-weight: 400 !important; font-size: .78rem !important; color: var(--muted) !important; line-height: 1.4; }
.lead-consent input { margin-top: 2px; flex: none; }
.lead-form .field-error, .lead-form .form-error { color: #b42318; font-size: .8rem; margin: 2px 0 0; }
.lead-form .cf-turnstile { margin-top: 10px; }
.lead-form-compact .lead-fields { grid-template-columns: 1fr 1.2fr 1fr 1.2fr auto; align-items: end; gap: 8px; }
.lead-form-compact .lf-submit { grid-column: auto; }
.lead-form-compact label:not(.lead-consent) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lead-form-compact input:not([type=checkbox]), .lead-form-compact select { padding: 9px 11px; font-size: .9rem; }
.lead-form-compact .lead-consent { margin-top: 6px; font-size: .72rem !important; }
.lead-card h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); }

@media (max-width: 980px) {
  .leadbar-pitch { max-width: none; flex: 1; }
  .leadbar-inner { flex-wrap: wrap; gap: 10px; }
  .leadbar-panel { display: none; flex-basis: 100%; order: 3; max-height: 70vh; overflow-y: auto; }
  .leadbar-open { display: inline-flex; }
  .leadbar.is-open .leadbar-panel { display: block; }
  .leadbar.is-open .leadbar-open { display: none; }
  .leadbar-min { display: none; }
  .leadbar.is-open .leadbar-min { display: grid; }
  .leadbar.is-open .leadbar-min svg { transform: none; }
  .leadbar-sub { display: none; }
  .lead-form-compact .lead-fields { grid-template-columns: 1fr; }
  .lead-form-compact label:not(.lead-consent) { position: static; width: auto; height: auto; clip: auto; }
  .has-leadbar { --leadbar-h: 68px; }
}

/* ---- solutions portfolio ---- */
.solution-list { display: grid; gap: 24px; }
.solution-card { padding: 32px; }
.solution-head { display: flex; gap: 18px; align-items: flex-start; }
.solution-head h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin: 0; }
.solution-head h2 a { color: inherit; text-decoration: none; }
.solution-head h2 a:hover { color: var(--brand); }
.solution-problem { color: var(--ink-2); font-size: 1.05rem; margin: 16px 0 20px; }
.solution-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; margin-bottom: 8px; }
.solution-cols h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 10px; }
.chips-soft li { background: var(--brand-soft); color: var(--brand); border-color: transparent; }

/* ---- solution landing pages ---- */
.sp-hero { padding: 56px 0 64px; background: radial-gradient(1200px 500px at 85% -10%, var(--brand-soft), transparent 60%), var(--bg); }
.sp-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; }
.sp-hero-grid > * { min-width: 0; }
.sp-copy h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); margin: 14px 0 16px; }
.sp-ticks { margin: 22px 0; }
.trust-row { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .9rem; color: var(--muted); }
.trust-row li { display: inline-flex; gap: 8px; align-items: center; }
.trust-row .icon { width: 1.1em; height: 1.1em; color: var(--brand); }
.sp-form-card { padding: 28px; box-shadow: var(--shadow-l); border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); position: sticky; top: 90px; }
.sp-form-title { font-size: 1.25rem; font-weight: 800; margin: 0 0 4px; }
.sp-or { text-align: center; margin: 14px 0 0; font-size: .9rem; }
.sp-or .icon { width: 1em; height: 1em; vertical-align: -2px; }
.sp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.sp-outcomes .btn { margin-top: 20px; }
.sp-what { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0; }
.sp-what-item { display: flex; gap: 14px; align-items: flex-start; }
.sp-what-item p { margin: 0; }
.sp-num { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.sp-deliver { text-align: center; margin-bottom: 24px; }
.sp-deliver .chips { justify-content: center; }
.sp-steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sp-steps h3 { margin: 14px 0 6px; font-size: 1.05rem; }
.sp-steps p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.sp-timeline { margin: 24px auto 0; max-width: 820px; text-align: center; color: var(--ink-2); }
.sp-timeline .icon { width: 1.1em; height: 1.1em; vertical-align: -3px; color: var(--brand); }
.sp-final { background: linear-gradient(135deg, #1b1250, #4f2bea); color: #fff; }
.sp-final h2, .sp-final .lead { color: #fff; }
.sp-final .btn-outline { color: #fff; border-color: rgb(255 255 255 / 50%); }
.sp-others a { color: #d9d0ff; }
.sp-final .muted { color: #cfc7ff; }
.focus-cta { margin-left: auto; }
@media (max-width: 900px) {
  .sp-hero-grid, .sp-two, .solution-cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sp-form-card { position: static; }
  .sp-what { grid-template-columns: minmax(0, 1fr); }
  .sp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .sp-steps { grid-template-columns: minmax(0, 1fr); } .solution-card { padding: 22px; } .lead-fields { grid-template-columns: 1fr; } }
@media print { .leadbar { display: none !important; } }

/* a design opened from another page: scroll it clear of the sticky header and highlight it */
.tl-card[id^="d-"] { scroll-margin-top: 96px; }
.tl-card:target { outline: 3px solid var(--accent, #4f46e5); outline-offset: 4px; border-radius: 16px; box-shadow: 0 12px 40px rgba(79, 70, 229, .25); }

/* minimal website thumbnails on the landing page, one colour per design */
.preview-thumb.mp-thumb-classic { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.preview-thumb.mp-thumb-bold { background: linear-gradient(135deg, #141a20, #c2410c); }
.preview-thumb.mp-thumb-card { background: linear-gradient(135deg, #4338ca, #a5b4fc); }
.preview-thumb.mp-thumb-care { background: linear-gradient(135deg, #0e7490, #67e8f9); }
.preview-thumb.mp-thumb-spice { background: linear-gradient(135deg, #9a3412, #fb923c); }

/* ---- store: add-ons, cart bar, leave-with-cart offer ---- */
.tl-was { display: inline-block; margin-left: 8px; font-size: .85rem; color: var(--muted, #6b6884); }
.tl-grid-3 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.addon-card { background: var(--surface, #fff); border: 1px solid var(--line, #e7e5f1); border-radius: 16px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.addon-card h3 { margin: 0; font-size: 1.08rem; }
.addon-card p { margin: 0; color: var(--muted, #6b6884); font-size: .95rem; }
.addon-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #eef0ff; color: #4f2bea; }
.addon-price { color: var(--ink, #17142b) !important; font-weight: 800; font-size: 1.15rem !important; }
.addon-price small { font-weight: 500; color: var(--muted, #6b6884); font-size: .8rem; }
[data-add].is-added { background: #ecfdf5; border-color: #10b981; color: #047857; }
.cart-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #17142b; color: #fff; box-shadow: 0 -10px 30px rgba(0, 0, 0, .2);
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.cart-bar[hidden] { display: none; }
.cart-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.cart-toggle { background: transparent; border: 0; color: #fff; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.cart-toggle small { color: #b9b4d6; }
.cart-list { list-style: none; margin: 0; padding-bottom: 10px; display: grid; gap: 6px; }
.cart-list[hidden] { display: none; }
.cart-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 8px 12px; background: rgba(255, 255, 255, .07); border-radius: 10px; }
.cart-list li span { flex: 1; }
.cart-list .link-btn { color: #c7c2ff; }
.cart-code { margin: 0; padding-bottom: 10px; color: #86efac; font-size: .9rem; }
.cart-bar.pulse { animation: cart-pulse .6s ease; }
@keyframes cart-pulse { 0% { transform: translateY(8px); } 60% { transform: translateY(-3px); } 100% { transform: none; } }
body.has-cart .tl-sticky { display: none; }
body.has-cart { padding-bottom: 72px; }
.cart-rescue { position: fixed; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 16px; background: rgba(15, 12, 35, .6); }
.cart-rescue[hidden] { display: none; }
.cart-rescue-card { position: relative; max-width: 440px; width: 100%; background: #fff; border-radius: 20px; padding: 28px 24px 22px; text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35); animation: fest-pop .45s cubic-bezier(.2, .9, .25, 1.2) both; }
.cart-rescue-card h2 { margin: 6px 0 10px; }
.rescue-code { display: inline-block; padding: 2px 10px; border: 2px dashed #4f2bea; border-radius: 8px; letter-spacing: .08em; color: #4f2bea; }
.cart-rescue-actions { display: grid; gap: 10px; margin-top: 16px; }
.cart-rescue-x { position: absolute; top: 10px; right: 12px; }
@media (prefers-reduced-motion: reduce) { .cart-bar.pulse, .cart-rescue-card { animation: none; } }

.addon-bundle { color: #047857 !important; font-weight: 700; font-size: .88rem !important; }
.upsell-card { max-width: 500px; text-align: left; }
.upsell-options { display: grid; gap: 10px; margin: 14px 0 6px; }
.upsell-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid #e7e5f1; border-radius: 12px; cursor: pointer; }
.upsell-opt:has(input:checked) { border-color: #4f2bea; background: #f5f3ff; }
.upsell-opt input { margin-top: 4px; }
.upsell-opt em { color: #047857; font-style: normal; font-weight: 700; font-size: .88rem; }
.upsell-opt small { color: #6b6884; }

.addon-details { font-size: .88rem; }
.addon-details summary { cursor: pointer; font-weight: 700; color: #4f2bea; }
.addon-in, .addon-out { margin: 8px 0; padding-left: 18px; display: grid; gap: 4px; color: var(--ink, #17142b); }
.addon-in li::marker { content: "✓  "; color: #047857; }
.addon-out li::marker { content: "✕  "; color: #b91c1c; }
.addon-out-h { margin: 8px 0 0 !important; font-weight: 700; color: var(--ink, #17142b) !important; }
.upsell-details { margin: -4px 0 4px 32px; }

.cart-rescue-card { max-height: calc(100vh - 32px); overflow-y: auto; }

/* cards in a row: the price and "Add to cart" line up at the bottom whatever the text length */
.addon-card { display: flex; flex-direction: column; }
.addon-foot { margin-top: auto; display: grid; gap: 8px; padding-top: 6px; }
.tl-card { display: flex; flex-direction: column; }
.tl-card .tl-actions { margin-top: auto; }
.addon-foot { border-top: 1px solid var(--line, #e7e5f1); }

/* store: breathing room between rows of products and between the three levels */
.tl-grid, .addon-grid { row-gap: 36px; }
#designs .tier-head { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line, #e7e5f1); }
#designs .tier-head:first-of-type { margin-top: 24px; border-top: 0; padding-top: 0; }
#designs .tl-grid { margin-bottom: 8px; }

/* highlighted value words: a hand-drawn marker under the phrase that matters to the visitor */
mark.hl { background: linear-gradient(transparent 58%, rgba(255, 196, 0, .55) 58%, rgba(255, 196, 0, .55) 92%, transparent 92%); color: inherit; padding: 0 .08em; }
.lp-hero mark.hl { background: linear-gradient(transparent 60%, rgba(236, 72, 153, .55) 60%, rgba(236, 72, 153, .55) 94%, transparent 94%); }
.tier-head .muted, .addon-card > p { font-size: 1rem; }
.tier-head .muted::first-line, .addon-card > p:not(.addon-bundle)::first-line { font-weight: 700; color: var(--ink, #17142b); }

/* Digitapix Pages offer: the lower-cost start, shown after the cheapest website */
.pages-offer { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: center; margin: 40px 0 8px; padding: 28px;
  border-radius: 20px; background: linear-gradient(135deg, #f5f3ff, #fdf2f8); border: 1px solid #e9d5ff; }
.pages-offer h3 { margin: 4px 0 12px; font-size: 1.5rem; }
.pages-offer-list { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
.pages-offer-list .icon { color: #16a34a; }
.pages-offer-cta { display: grid; gap: 10px; justify-items: center; text-align: center; }
@media (max-width: 760px) { .pages-offer { grid-template-columns: 1fr; padding: 22px; } }

/* Side lead capture (_leadpop.html): "Free draft" tab on the right edge + the form sliding in from the right */
.draft-tab { position: fixed; right: 0; top: 50%; z-index: 69; transform: translateY(-50%); writing-mode: vertical-rl; display: inline-flex; align-items: center; gap: 6px;
  padding: 16px 10px; border: 0; border-radius: 14px 0 0 14px; cursor: pointer; font: 800 .95rem/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .02em;
  color: #fff; background: linear-gradient(180deg, #ff6b3d, #db2777); box-shadow: -6px 10px 30px rgb(219 39 119 / 40%); }
.draft-tab span { transform: rotate(180deg); }
.draft-tab:hover { padding-right: 14px; }
.draft-tab:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.leadpop { position: fixed; right: 16px; top: 50%; z-index: 71; width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto;
  transform: translate(calc(100% + 40px), -50%); opacity: 0; transition: transform .35s ease, opacity .35s ease; border-radius: 18px; }
.leadpop.is-in { transform: translate(0, -50%); opacity: 1; }
.leadpop[hidden] { display: none; }
.leadpop .leadpop-form { margin: 0; box-shadow: 0 30px 80px rgb(15 12 35 / 35%); }
.leadpop-x { position: absolute; top: 10px; right: 14px; z-index: 1; background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; }
@media (max-width: 640px) {
  .draft-tab { top: auto; bottom: calc(var(--leadbar-h, 0px) + 90px); }
  .leadpop { left: 12px; right: 12px; width: auto; top: auto; bottom: calc(var(--leadbar-h, 0px) + 10px); transform: translateY(calc(100% + 40px)); }
  .leadpop.is-in { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .leadpop { transition: none; } }
/* Phones and tablets: a slimmer tab, low on the edge, so it never sits over headlines or form fields */
@media (max-width: 1024px) {
  .draft-tab { top: auto; bottom: calc(var(--leadbar-h, 0px) + 90px); transform: none; padding: 12px 7px; font-size: .8rem; border-radius: 10px 0 0 10px; }
}
/* Phones: the sticky bottom bar already offers the free draft, so the edge tab would only cover text */
@media (max-width: 640px) { body.has-leadbar .draft-tab { display: none; } }

/* The free-draft button: the most eye-catching action on every page */
.btn-draft, .hm-lead button[type="submit"], .leadbar .btn-accent, .exitpop .btn-accent {
  background: linear-gradient(135deg, #ff6b3d, #db2777) !important; color: #fff !important; border: 0 !important; font-weight: 800 !important;
  box-shadow: 0 12px 30px rgb(219 39 119 / 40%); animation: draft-pulse 2.6s ease-in-out infinite; }
.btn-draft:hover, .hm-lead button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgb(219 39 119 / 55%); }
.hm-lead button[type="submit"] { font-size: 1.15rem; padding: 16px 22px; }
@keyframes draft-pulse { 0%, 100% { box-shadow: 0 12px 30px rgb(219 39 119 / 40%); } 50% { box-shadow: 0 12px 44px rgb(255 107 61 / 65%); } }
@media (prefers-reduced-motion: reduce) { .btn-draft, .hm-lead button[type="submit"], .leadbar .btn-accent, .exitpop .btn-accent { animation: none; } }

/* Lead forms: a short summary of what we do, and the growth check as a clear second choice (not a small link) */
.hm-lead-summary { margin: -2px 0 4px; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.gc-btn { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 2px solid #0d9488; background: #f0fdfa; color: #0f3d3a;
  text-align: center; text-decoration: none; }
.gc-btn:hover { background: #ccfbf1; text-decoration: none; transform: translateY(-1px); }
.gc-btn-q { font-size: .8rem; font-weight: 600; color: #0f766e; }
.gc-btn-a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 800; font-size: 1rem; }
.gc-btn .icon { width: 16px; height: 16px; }
.gc-btn-hero { display: inline-grid; margin: 4px 0 18px; text-align: left; }
.gc-btn-hero .gc-btn-a { justify-content: flex-start; }

/* Two-step lead pop-up (lead_quiz): one tap first, then the short form */
.lq { position: relative; display: grid; gap: 10px; padding: 22px; color: var(--ink); }
.lq-eyebrow { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.lq-title { margin: 0 0 4px; font-size: 1.25rem; font-weight: 800; line-height: 1.25; color: var(--ink); }
.lq-sub { margin: 0 0 4px; font-size: .9rem; color: var(--ink-2); }
.lq-step { display: grid; gap: 10px; }
.lq-picks { display: grid; gap: 10px; }
.lq-pick { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left;
  padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s; }
.lq-pick:hover, .lq-pick:focus-visible { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-1px); outline: none; }
.lq-pick .icon { grid-row: span 2; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); }
.lq-pick b { font-size: 1rem; } .lq-pick span { font-size: .85rem; color: var(--ink-2); }
.lq-back { justify-self: start; padding: 0; border: 0; background: none; color: var(--brand); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
/* with JavaScript: one step at a time (without it, both show and the form works on its own) */
.lq.lq-ready .lq-step2, .lq.lq-ready.lq-on2 .lq-step1 { display: none; }
.lq.lq-ready.lq-on2 .lq-step2 { display: grid; animation: lq-in .25s ease-out; }
.lq:not(.lq-ready) .lq-back { display: none; }
@keyframes lq-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lq.lq-ready.lq-on2 .lq-step2 { animation: none; } }
.exitpop-quiz { padding: 0; margin-top: 6px; }
.exitpop-quiz .free-sticker { display: none; }
.exitpop-card { max-height: calc(100vh - 32px); overflow-y: auto; }

/* Phones: while the lead pop-up is open the sticky bottom bar steps aside, so nothing covers the form */
@media (max-width: 640px) {
  .leadpop-open .leadbar { display: none; }
  .leadpop-open .leadpop { bottom: 10px; max-height: calc(100vh - 20px); }
}