/* Contark landing page.
   Light, high end, mildly futuristic: warm paper ground, deep navy ink,
   one electric blue gradient used sparingly. Self contained on purpose,
   it never touches app.css, so the panel keeps its own tokens.
   Colours live here as --lp-* variables; the template carries none. */

html, body { background: #ffffff; margin: 0; overflow-x: hidden; }

.lp {
  --lp-bg: #ffffff;
  --lp-grey: #f2f2f2;
  --lp-surface: #fafafa;
  --lp-surface-2: #ececec;
  --lp-ink: #1a1a1a;        /* 15,9:1 na bieli */
  --lp-ink-2: #4a4a4a;      /* 8,6:1 */
  --lp-ink-3: #5f5f5f;      /* 6,4:1 */
  --lp-line: #e4e4e4;
  --lp-line-2: #cfcfcf;
  --lp-gold: #febe10;
  --lp-gold-2: #ffd75e;
  --lp-gold-deep: #c48f00;  /* 3,2:1, wylacznie linie i ikony, nigdy tekst */
  --lp-glow: rgba(254, 190, 16, 0.28);
  --lp-ok: #186b42;

  position: relative;
  min-height: 100vh;
  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  letter-spacing: -0.012em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.lp * { box-sizing: border-box; }
.lp a { color: inherit; text-decoration: none; }
.lp ::selection { background: var(--lp-ink); color: var(--lp-bg); }

/* ── ground: mesh, grid, grain ──────────────────────────────────────────── */
.lp-atmos { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.lp-mesh {
  position: absolute; inset: -20% -10% auto -10%; height: 90vh;
  background:
    radial-gradient(40% 46% at 20% 6%, rgba(254,190,16,0.22) 0%, transparent 70%),
    radial-gradient(46% 52% at 80% 0%, rgba(254,190,16,0.16) 0%, transparent 72%),
    radial-gradient(34% 42% at 52% 34%, rgba(26,26,26,0.05) 0%, transparent 72%);
  filter: blur(20px);
}
.lp-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(26,26,26,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,26,26,0.05) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 10%, transparent 78%);
}
.lp-grain {
  position: absolute; inset: 0; opacity: 0.3; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.26'/%3E%3C/svg%3E");
}
.lp-shell { position: relative; z-index: 1; }
.lp-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ── floating nav ───────────────────────────────────────────────────────── */
.lp-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  max-width: 1240px; margin: 0 auto; padding: 22px max(16px, 3vw);
}
.lp-navgroup {
  display: flex; align-items: center; gap: 4px; padding: 5px;
  border-radius: 999px; border: 1px solid rgba(26,26,26,0.07);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.lp-navlink {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border-radius: 999px; font-size: 14.5px; color: var(--lp-ink-2);
  transition: color .18s, background-color .18s;
}
.lp-navlink:hover { color: var(--lp-ink); background: var(--lp-surface-2); }
.lp-navactions { display: flex; align-items: center; gap: 8px; }

.lp-logo { display: inline-flex; align-items: center; gap: 11px; font-weight: 620; letter-spacing: -0.03em; font-size: 20px; }
.lp-logo-mark { width: 22px; height: 22px; flex: none; color: var(--lp-gold-deep); }

/* ── buttons ────────────────────────────────────────────────────────────── */
.lp-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 10px 0 28px; border: 1px solid transparent; border-radius: 999px;
  font-size: 15.5px; font-weight: 550; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer;
  transition: transform .18s cubic-bezier(.16,.84,.36,1), box-shadow .25s, background-color .2s, border-color .2s, color .2s;
}
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn:active { transform: none; }
.lp-btn:focus-visible, .lp-navlink:focus-visible, .lp-foot-link:focus-visible, .lp-totop:focus-visible {
  outline: 2px solid var(--lp-ink); outline-offset: 3px;
}
.lp-btn-primary {
  color: var(--lp-ink);
  background: linear-gradient(120deg, #f5ad00 0%, #febe10 46%, #ffd75e 100%);
  box-shadow: 0 12px 28px -14px rgba(196,143,0,0.9), inset 0 1px 0 rgba(255,255,255,0.5);
  overflow: hidden;
}
.lp-btn-primary:hover { box-shadow: 0 18px 36px -16px rgba(196,143,0,1), inset 0 1px 0 rgba(255,255,255,0.6); }
.lp-btn-primary::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-130%); pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transition: transform .7s ease;
}
.lp-btn-primary:hover::after { transform: translateX(130%); }
/* round badge inside the pill, the detail that makes the button feel made */
.lp-ico {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 999px; background: var(--lp-ink); color: #ffffff;
  transition: transform .25s cubic-bezier(.16,.84,.36,1);
}
.lp-btn:hover .lp-ico { transform: translateX(3px); }
.lp-btn-soft {
  color: var(--lp-ink); background: var(--lp-grey);
  border-color: rgba(26,26,26,0.06); padding: 0 28px;
}
.lp-btn-soft:hover { background: var(--lp-surface-2); }
.lp-btn-ghost { color: var(--lp-ink); border-color: var(--lp-line-2); background: transparent; padding: 0 28px; }
.lp-btn-ghost:hover { border-color: var(--lp-ink-2); background: var(--lp-surface); }
.lp-btn-sm { min-height: 44px; font-size: 14.5px; padding: 0 20px; gap: 8px; }
.lp-btn-sm .lp-ico { width: 30px; height: 30px; }
.lp-btn-sm.lp-btn-primary { padding: 0 8px 0 20px; }

/* ── type ───────────────────────────────────────────────────────────────── */
.lp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.lp-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lp-ink-3);
}
.lp-kicker .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--lp-gold); }
.lp-eyebrow { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--lp-ink-2); }
.lp-display { font-weight: 620; letter-spacing: -0.035em; line-height: 1; margin: 0; }
.lp-h1 { font-size: clamp(40px, 6.6vw, 88px); max-width: 15ch; }
/* Zloto podkresla slowo, nie maluje liter: na bieli ma 1,6:1, wiec jako tekst
   byloby nieczytelne. Inset cieniem, bo trzyma sie dolu wiersza przy kazdym
   rozmiarze, w odroznieniu od pozycjonowanego pseudoelementu. */
.lp-h1 .grad { box-shadow: inset 0 -0.16em 0 var(--lp-gold); }
.lp-h2 { font-size: clamp(30px, 4.4vw, 48px); }
.lp-h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.024em; }
.lp-lead { margin: 28px 0 0; max-width: 580px; font-size: 18.5px; line-height: 1.55; color: var(--lp-ink-2); }
.lp-body { margin: 10px 0 0; font-size: 14.5px; line-height: 1.58; color: var(--lp-ink-2); }
.lp-fine { font-size: 12px; letter-spacing: 0.05em; color: var(--lp-ink-3); }
.lp-accent { color: var(--lp-ink); }

/* ── hero ───────────────────────────────────────────────────────────────── */
.lp-hero { position: relative; overflow: hidden; min-height: 92svh; display: flex; flex-direction: column; }
/* 🔴 Skrot `padding` skasowalby boczny padding z .lp-wrap, ktore ten sam
   element nosi jako druga klase, i tresc siadlaby na krawedzi telefonu. */
.lp-hero-fg { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 40px; padding-bottom: 84px; }
.lp-cta-row { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.lp-arc-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lp-arc-glow {
  position: absolute; right: -8%; bottom: -26%;
  width: 76vw; height: 76vw; max-width: 1050px; max-height: 1050px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(254,190,16,0.34) 0%, rgba(254,190,16,0.10) 42%, transparent 68%);
  filter: blur(54px);
}
.lp-asciiarc {
  position: absolute; right: -7%; bottom: 11%;
  width: max-content; margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(7px, 0.83vw, 12px); line-height: 1; letter-spacing: 0; white-space: pre;
  background: linear-gradient(118deg, #1a1a1a 0%, #303030 46%, #6b4e00 72%, #c48f00 90%, #febe10 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0.95;
  /* Maska ma zgasic torus zanim dojdzie do paska faktow pod bohaterem.
     Bez tego znaki ASCII wchodza pod tekst i pasek robi sie nieczytelny. */
  /* Miekki brzeg: torus ma wychodzic z tla, nie stac w ramce. */
  -webkit-mask-image: radial-gradient(66% 70% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(66% 70% at 50% 50%, #000 62%, transparent 100%);
}
/* Na telefonie bohater jest gesty od tekstu, a torus zmniejszony do 5 px to
   juz tylko szum wchodzacy pod pasek faktow. Zostaje sama poswiata. */
@media (max-width: 900px) { .lp-asciiarc { display: none; } }

/* spec strip under the hero: mono facts, no marketing */
.lp-spec {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line);
  background: linear-gradient(180deg, var(--lp-surface), rgba(250,250,250,0));
}
.lp-spec div { padding: 20px 24px; border-left: 1px solid var(--lp-line); }
.lp-spec div:first-child { border-left: 0; }
.lp-spec b { display: block; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.lp-spec span { display: block; margin-top: 4px; font-size: 12px; color: var(--lp-ink-3); }

/* ── section heads ──────────────────────────────────────────────────────── */
.lp-sec { padding-top: 128px; scroll-margin-top: 96px; }
.lp-sec-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.lp-index { font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: 0.18em; color: var(--lp-gold-deep); }
.lp-hair { flex: 1; min-width: 40px; height: 1px; background: linear-gradient(90deg, var(--lp-line-2) 0%, transparent 92%); }

/* ── manifesto ──────────────────────────────────────────────────────────── */
.lp-manifesto {
  position: relative; margin-top: 96px; overflow: hidden;
  border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line);
  padding: clamp(76px, 13vw, 150px) 0; background: var(--lp-surface);
}
.lp-manifesto-glow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 70vw; max-width: 900px; height: 60%; pointer-events: none;
  background: radial-gradient(closest-side, var(--lp-glow), transparent 70%); filter: blur(40px);
}
.lp-manifesto .l {
  position: relative; margin: 0; font-weight: 620;
  font-size: clamp(28px, 4.8vw, 54px); line-height: 1.08; letter-spacing: -0.035em; max-width: 22ch;
}
.lp-manifesto .l em {
  font-style: normal;
  box-shadow: inset 0 -0.14em 0 var(--lp-gold);
}
.lp-manifesto .sig { position: relative; margin: 32px 0 0; font-size: 13px; color: var(--lp-ink-3); letter-spacing: 0.04em; }

/* ── hairline grids ─────────────────────────────────────────────────────── */
.lp-bento, .lp-steps, .lp-metrics, .lp-pgrid {
  display: grid; gap: 0; background: var(--lp-surface);
  border: 1px solid var(--lp-line); border-radius: 16px; overflow: hidden;
}
.lp-bento { grid-template-columns: repeat(6, 1fr); margin-top: 44px; }
.lp-steps { grid-template-columns: repeat(3, 1fr); margin-top: 44px; }
.lp-metrics { grid-template-columns: repeat(4, 1fr); }
.lp-cell { grid-column: span 2; }
.lp-cell[data-span="4"] { grid-column: span 4; }
.lp-cell[data-span="6"] { grid-column: span 6; }
.lp-fcell {
  position: relative; padding: 32px; display: flex; flex-direction: column;
  box-shadow: inset 1px 0 0 var(--lp-line), inset 0 1px 0 var(--lp-line);
  transition: background-color .3s;
}
.lp-fcell:hover { background: linear-gradient(180deg, rgba(254,190,16,0.10), rgba(254,190,16,0)); }
.lp-feat-ico {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  border: 1px solid rgba(196,143,0,0.35); color: var(--lp-ink);
  background: linear-gradient(160deg, rgba(254,190,16,0.35), rgba(254,190,16,0.10));
}
.lp-fcell h3 { margin: 20px 0 0; }
.lp-step-n { font-family: ui-monospace, monospace; font-size: 12.5px; letter-spacing: 0.16em; color: var(--lp-gold-deep); }
.lp-metric {
  font-weight: 620; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; font-size: clamp(36px, 5vw, 54px);
  color: var(--lp-ink);
}

/* ── pricing ────────────────────────────────────────────────────────────── */
.lp-pgrid { grid-template-columns: repeat(3, 1fr); }
.lp-pcell {
  position: relative; padding: 34px 30px; display: flex; flex-direction: column; gap: 24px;
  box-shadow: inset 1px 0 0 var(--lp-line);
}
.lp-pcell[data-pop="true"] { background: linear-gradient(180deg, rgba(254,190,16,0.12), rgba(254,190,16,0.02)); }
.lp-pcell[data-pop="true"]::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--lp-gold), var(--lp-gold-2));
}
.lp-plan-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: ui-monospace, monospace; font-size: 17px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
.lp-pop-badge { font-family: ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.08em; padding: 4px 9px; border-radius: 999px; color: var(--lp-ink); background: linear-gradient(90deg, var(--lp-gold), var(--lp-gold-2)); text-transform: uppercase; }
.lp-price { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.lp-price b { font-weight: 620; font-size: clamp(38px, 4.4vw, 48px); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.lp-price span { font-size: 13.5px; color: var(--lp-ink-2); }
.lp-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.lp-feat { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.45; }
.lp-feat svg { flex: none; margin-top: 2px; color: var(--lp-gold-deep); }
.lp-feat[data-on="false"] { color: var(--lp-ink-3); }
.lp-feat[data-on="false"] svg { color: var(--lp-ink-3); }
.lp-pcell .lp-btn { width: 100%; }

/* ── closing card ───────────────────────────────────────────────────────── */
.lp-card {
  position: relative; overflow: hidden; border: 1px solid var(--lp-line);
  background: linear-gradient(180deg, var(--lp-grey), rgba(242,242,242,0.25));
  border-radius: 24px; padding: clamp(52px, 8vw, 108px) 24px; text-align: center;
}
.lp-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lp-gold), var(--lp-gold-2), transparent);
}
.lp-card-in { position: relative; }
.lp-card .lp-cta-row { justify-content: center; }

/* ── motion ─────────────────────────────────────────────────────────────── */
.lp-rise { opacity: 0; transform: translateY(16px); animation: lp-rise .9s cubic-bezier(.16,.84,.36,1) forwards; animation-delay: var(--d, 0s); }
@keyframes lp-rise { to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 1s cubic-bezier(.16,.84,.36,1), transform 1s cubic-bezier(.16,.84,.36,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lp-rise { animation: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .lp-btn:hover { transform: none; }
}

.lp-scrollbar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.lp-scrollbar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lp-gold-deep), var(--lp-gold)); }
.lp-cursor {
  position: fixed; top: 0; left: 0; width: 420px; height: 420px; border-radius: 50%;
  z-index: 2; pointer-events: none; opacity: 0; transition: opacity .5s; will-change: transform;
  background: radial-gradient(circle, rgba(254,190,16,0.18) 0%, rgba(254,190,16,0.06) 38%, transparent 64%);
}
.lp-totop {
  position: fixed; right: 22px; bottom: 22px; z-index: 55;
  width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center;
  border: 1px solid var(--lp-line-2); background: rgba(255,255,255,0.85); color: var(--lp-ink-2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(10px); pointer-events: none; cursor: pointer;
  transition: opacity .3s, transform .3s, color .2s, border-color .2s;
}
.lp-totop.show { opacity: 1; transform: none; pointer-events: auto; }
.lp-totop:hover { color: var(--lp-ink); border-color: var(--lp-ink-2); }

/* ── footer ─────────────────────────────────────────────────────────────── */
.lp-footer {
  position: relative; overflow: hidden; border-top: 1px solid var(--lp-line);
  margin-top: clamp(100px, 13vw, 170px); padding-top: clamp(60px, 8vw, 100px);
}
.lp-footer-glow {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -55%);
  width: 80vw; max-width: 1000px; height: 320px; pointer-events: none;
  background: radial-gradient(closest-side, var(--lp-glow), transparent 70%); filter: blur(50px);
}
.lp-foot-cta { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 36px; flex-wrap: wrap; }
.lp-foot-form { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-rule { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--lp-line-2), transparent); margin: clamp(44px,6vw,76px) auto; }
.lp-foot-grid { position: relative; display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 40px; }
.lp-foot-tagline { margin: 18px 0 0; max-width: 300px; font-size: 14px; line-height: 1.6; color: var(--lp-ink-2); }
.lp-foot-status { margin-top: 22px; display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--lp-ink-2); }
.lp-foot-statusdot { width: 7px; height: 7px; border-radius: 999px; background: var(--lp-ok); }
.lp-foot-coltitle { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-ink-3); margin-bottom: 18px; }
.lp-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-foot-link { font-size: 13.5px; color: var(--lp-ink-2); transition: color .15s; }
.lp-foot-link:hover { color: var(--lp-ink); }
.lp-foot-wordmark {
  position: relative; text-align: center; user-select: none; pointer-events: none;
  font-weight: 700; letter-spacing: -0.06em; line-height: 0.78;
  font-size: clamp(72px, 21vw, 300px); margin: clamp(40px, 7vw, 84px) 0 0;
  background: linear-gradient(180deg, rgba(254,190,16,0.32), rgba(254,190,16,0));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-foot-bottom {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 26px 0 clamp(40px, 6vw, 64px); border-top: 1px solid var(--lp-line); margin-top: clamp(8px, 3vw, 28px);
}
.lp-foot-legal { display: flex; gap: 22px; flex-wrap: wrap; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1020px) { .lp-navgroup { display: none; } }
@media (max-width: 920px) {
  .lp-bento { grid-template-columns: repeat(2, 1fr); }
  .lp-cell, .lp-cell[data-span="4"], .lp-cell[data-span="6"] { grid-column: span 2; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-metrics, .lp-spec { grid-template-columns: repeat(2, 1fr); }
  .lp-spec div:nth-child(3) { border-left: 0; }
  .lp-pgrid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .lp-foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .lp-foot-brandcol { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  /* Trzy elementy w pasku nie mieszcza sie w 375 px. Logowanie zostaje
     w stopce i w karcie koncowej, w pasku zostaje jedno wezwanie. */
  .lp-navactions .lp-btn-soft { display: none; }
  .lp-bento { grid-template-columns: 1fr; }
  .lp-cell, .lp-cell[data-span="4"], .lp-cell[data-span="6"] { grid-column: span 1; }
  .lp-nav { padding: 14px 16px; }
  .lp-hero-fg { padding-top: 24px; }
  .lp-cta-row .lp-btn { width: 100%; justify-content: space-between; }
  .lp-btn-soft, .lp-btn-ghost { justify-content: center; }
  .lp-foot-cta { flex-direction: column; align-items: stretch; }
  .lp-foot-form .lp-btn { width: 100%; justify-content: space-between; }
}