/* ==========================================================================
   RAKITIN - conversion landing pages (/sicherheits-check, /security-check)
   Extends the main site's "Console" system. It defines NO new colours, fonts,
   radii or shadows: every value below resolves to a token already declared in
   style.css, so light/dark and any future brand change are inherited for free.
   Loaded AFTER style.css, and every selector is namespaced .lp-* so it cannot
   reach into the homepage.

   One deliberate focal point: the findings panel in the hero. Everything
   around it stays quiet.
   ========================================================================== */

/* ---- touch targets ------------------------------------------------------- */
@media (max-width: 720px) {
  /* 23px tall footer links and a 26px language switch are below anything a
     thumb can hit reliably. The type stays the same size, the target grows. */
  .lp .foot-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .lp .lang-switch a { min-height: 38px; display: inline-flex; align-items: center; }
  /* .brand is inline-flex with flex:0 0 auto, so the tagline inside it
     claimed its max-content width and pushed the document wider than the
     screen on 360px and 320px devices. Below 720px the footer becomes a
     column and the brand is allowed to shrink and wrap. */
  .lp .footer-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .lp .footer-inner .brand { flex: 0 1 auto; min-width: 0; max-width: 100%; }
  .lp .foot-tagline { max-width: 100%; white-space: normal; }

  /* higher specificity than the base .lp-check rule further down the file,
     which would otherwise win on source order and keep the 19px box */
  .lp .lp-check { padding-block: .2rem; }
  .lp .lp-check input { width: 22px; height: 22px; }
}

/* ---- mobile foundations --------------------------------------------------
   The site's .btn sets white-space:nowrap, which is right for the short
   labels on the homepage and wrong here: "Zahlungspflichtig beauftragen -
   690 EUR" is 378px of unwrappable text inside a 337px column on a 412px
   phone, so it printed straight through the button frame. Inside .lp every
   button wraps and centres instead. */
.lp .btn {
  white-space: normal; text-align: center; line-height: 1.35;
  min-height: 44px;                    /* the touch-target floor, everywhere */
}
.lp .btn svg { flex: none; }

/* A long domain, an order id or a German compound must break rather than
   push the whole page sideways. */
.lp p, .lp li, .lp h1, .lp h2, .lp h3, .lp label, .lp summary, .lp td {
  overflow-wrap: break-word;
}

/* Keyboard focus has to be visible on every interactive element, not only the
   ones the browser happens to style. */
.lp a:focus-visible, .lp button:focus-visible, .lp summary:focus-visible,
.lp input:focus-visible, .lp select:focus-visible, .lp textarea:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px;
}

/* ---- inherited chrome, corrected for this page's content -----------------
   THE bug behind "everything overflows the screen": .foot-links in style.css
   is `display:flex` with no flex-wrap. Four short English words fit on the
   homepage. This footer carries five, one of them "Partnerprogramm", and a
   flex item cannot shrink below its own min-content, so the row measured
   453px and dragged the document to 472px on a 412px phone. The header and
   the sticky bar then measured 472px too, because they are 100% of a document
   that is wider than the screen: one cause, three symptoms.

   Fixed here rather than in style.css so the homepage keeps its single-line
   footer exactly as it is. */
.lp .foot-links { flex-wrap: wrap; gap: .4rem 1.1rem; }

/* Nothing on this page may establish a wider box than the screen. This is the
   guard, not the fix: the fix is above. `clip` rather than `hidden` because
   `hidden` on an ancestor silently kills the sticky nav. */
.lp main, .lp .footer, .lp .nav { max-width: 100%; }

/* ---- page shell ---------------------------------------------------------- */
.lp-skip {
  position: absolute; top: 0; left: 0; z-index: 200;
  background: var(--primary); color: #fff; padding: .7rem 1rem; border-radius: 0 0 var(--radius-sm) 0;
  clip-path: inset(50%); white-space: nowrap;
}
.lp-skip:focus { clip-path: none; }

/* The landing nav carries no section links, so the menu button and the
   homepage's mobile drawer rules must not apply here. */
.lp-nav .nav-links, .lp-nav .menu-btn { display: none !important; }
.lp-nav .nav-inner { justify-content: space-between; }

.lp .section-head p { max-width: 62ch; }

/* ---- hero ---------------------------------------------------------------- */
.lp-hero {
  position: relative; overflow: hidden;
  padding-top: clamp(6.5rem, 12vw, 9rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  background: linear-gradient(180deg, var(--bg-2), var(--bg) 70%);
  border-bottom: 1px solid var(--line);
}
.lp-hero.is-short { padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.lp-hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
/* Grid children need an explicit min-width:0, otherwise a long unbroken string
   (a domain, a token) makes the column wider than its track and the whole page
   scrolls sideways on mobile. */
.lp-hero-copy, .lp-why-body { min-width: 0; }

/* Section rhythm: the page alternates base and raised surfaces down its length.
   Stated explicitly so it survives a change to the body background. */
.lp-get, .lp-steps-sec, .lp-faq-sec { background: var(--bg); }

.lp-kicker {
  font-family: var(--font-mono); font-size: .8rem; color: var(--muted);
  margin-top: 1.4rem; letter-spacing: .02em;
}
.lp-h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.05rem, 4.6vw, 3.35rem); line-height: 1.05; letter-spacing: -.026em;
  color: var(--ink); margin: .55rem 0 0; max-width: 17ch;
}
.lp-lead { margin-top: 1.15rem; color: var(--ink-2); font-size: 1.06rem; line-height: 1.65; max-width: 56ch; }

/* price readout: the one warm figure on the page */
.lp-pricebar {
  display: flex; align-items: center; gap: 1rem; margin-top: 1.9rem;
  padding: .85rem 1.1rem; background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--amber); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); width: fit-content;
}
.lp-price { display: inline-flex; align-items: baseline; gap: .3rem; }
.lp-price-n {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.7rem);
  line-height: 1; color: var(--amber); letter-spacing: -.02em;
}
.lp-price-c { font-family: var(--font-mono); font-size: 1rem; color: var(--amber); font-weight: 500; }
.lp-price-lab { font-size: .87rem; color: var(--ink-2); line-height: 1.4; }
.lp-price-vat { color: var(--muted); font-size: .8rem; }

.lp-hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; }
.lp-hero-meta { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.9rem; }
.lp-hero-meta .m { display: flex; align-items: center; gap: .6rem; color: var(--ink-2); font-size: .9rem; }
.lp-hero-meta .m svg { width: 17px; height: 17px; color: var(--primary); flex: none; }

/* ---- the findings panel: the page's single loud element ------------------ */
.lp-sample {
  margin: 0; background: var(--console-bg); border: 1px solid var(--console-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
  position: sticky; top: 92px;
}
.lp-sample-head {
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1rem 1.15rem; border-bottom: 1px solid var(--console-line);
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent);
}
.lp-sample-title {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--console-ink); font-weight: 500;
}
.lp-sample-note { font-size: .78rem; color: var(--console-muted); }
.lp-finds { list-style: none; margin: 0; padding: 0; }
.lp-find {
  display: grid; grid-template-columns: auto 1fr; gap: .3rem .75rem;
  padding: .95rem 1.15rem; border-top: 1px solid var(--console-line);
}
.lp-find:first-child { border-top: 0; }
.lp-sev {
  grid-row: 1 / span 2; align-self: start;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; padding: .26rem .5rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid currentColor;
}
.lp-sev-crit { color: #E98B7A; }
.lp-sev-high { color: var(--amber-hi); }
.lp-sev-med  { color: #8FB7D6; }
.lp-sev-low  { color: var(--console-muted); }
.lp-find-t { color: var(--console-ink); font-size: .93rem; line-height: 1.45; font-weight: 500; }
.lp-find-a { color: var(--console-muted); font-size: .84rem; line-height: 1.5; }

/* ---- why ----------------------------------------------------------------- */
.lp-why { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.lp-why-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.8rem, 4vw, 3.5rem); }
.lp-why-head h2 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.022em;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.15; margin-top: .8rem; color: var(--ink);
}
.lp-why-p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.7; max-width: 62ch; }
.lp-why-list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .9rem; }
.lp-why-list li {
  position: relative; padding-left: 1.6rem; color: var(--ink-2); line-height: 1.6; font-size: .97rem;
}
.lp-why-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--signal);
}

/* ---- deliverable cards --------------------------------------------------- */
.lp-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 1rem;
}
.lp-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.35rem 1.4rem 1.5rem; box-shadow: var(--shadow-sm);
}
.lp-card-ic {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: var(--primary-soft); color: var(--primary); margin-bottom: .9rem;
}
.lp-card-ic svg { width: 19px; height: 19px; }
.lp-card h3 { font-family: var(--font-display); font-size: 1.04rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.lp-card p { margin-top: .45rem; color: var(--ink-2); font-size: .93rem; line-height: 1.6; }

/* ---- scope --------------------------------------------------------------- */
.lp-scope { background: var(--surface-2); border-block: 1px solid var(--line); }
.lp-scope-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1rem; }
.lp-scope-col {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.5rem 1.6rem;
}
.lp-scope-col h3 {
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; padding-bottom: .9rem; border-bottom: 1px solid var(--line);
}
.lp-scope-col ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; }
.lp-scope-col li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; color: var(--ink-2); font-size: .94rem; line-height: 1.55; }
.lp-tick { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; flex: none; margin-top: .06rem; }
.lp-tick svg { width: 14px; height: 14px; }
.is-in .lp-tick { background: var(--signal-soft); color: var(--signal-ink); }
.is-out .lp-tick { background: var(--bg-2); color: var(--muted); }
.is-out li { color: var(--muted); }
.lp-scope-foot { margin-top: 1.4rem; color: var(--muted); font-size: .88rem; line-height: 1.6; max-width: 78ch; }

/* ---- steps (a real sequence, hence numbered) ----------------------------- */
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.lp-step {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
  padding: 1.35rem 0; border-top: 1px solid var(--line);
}
.lp-step:first-child { border-top: 0; padding-top: 0; }
.lp-step-n {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--primary); background: var(--surface);
  font-family: var(--font-mono); font-size: .88rem; font-weight: 500; flex: none;
}
.lp-step h3 { font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; color: var(--ink); }
.lp-step p { margin-top: .35rem; color: var(--ink-2); font-size: .96rem; line-height: 1.6; max-width: 70ch; }

/* ---- price --------------------------------------------------------------- */
.lp-price-sec { background: var(--surface-2); border-block: 1px solid var(--line); }
.lp-price-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }
.lp-price-main {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow-md);
}
.lp-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.lp-price-line { color: var(--ink-2); font-size: .98rem; }
.lp-price-big { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.3rem); color: var(--ink); letter-spacing: -.02em; }
.lp-price-vatline { margin-top: .8rem; color: var(--muted); font-size: .88rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.lp-price-cta { margin-top: 1.4rem; width: 100%; justify-content: center; }

/* the "i" note: a <details>, so it works with keyboard, touch and no JS.
   landing.js additionally opens it on hover for pointer users. */
.lp-info { position: relative; display: inline-block; }
.lp-info > summary {
  list-style: none; cursor: help; display: inline-grid; place-items: center;
  position: relative;
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong);
  color: var(--primary); background: var(--surface);
  font-family: var(--font-mono); font-size: .7rem; font-weight: 700; line-height: 1;
}
.lp-info > summary::-webkit-details-marker { display: none; }
/* invisible 44px hit area around the 22px dot, for thumbs */
.lp-info > summary::after { content: ""; position: absolute; inset: -11px; }
.lp-info > summary:hover, .lp-info[open] > summary { border-color: var(--primary); background: var(--primary-soft); }
.lp-info > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.lp-info-pop {
  position: absolute; z-index: 30; left: 0; top: calc(100% + .5rem); width: min(30rem, 78vw);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: .95rem 1.1rem;
}
.lp-info-pop strong { display: block; color: var(--ink); font-size: .88rem; margin-bottom: .35rem; }
.lp-info-pop p { color: var(--ink-2); font-size: .85rem; line-height: 1.6; }

.lp-price-side { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.lp-price-side li {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem;
}
.lp-side-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--signal-soft); color: var(--signal-ink); flex: none; }
.lp-side-ic svg { width: 18px; height: 18px; }
.lp-price-side h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--ink); }
.lp-price-side p { margin-top: .35rem; color: var(--ink-2); font-size: .92rem; line-height: 1.6; }

/* ---- faq ----------------------------------------------------------------- */
.lp-faq-wrap { max-width: 820px; }
.lp-faq { display: grid; }
.lp-faq-item { border-top: 1px solid var(--line); }
.lp-faq-item:last-child { border-bottom: 1px solid var(--line); }
.lp-faq-item > summary {
  list-style: none; cursor: pointer; padding: 1.15rem 2.2rem 1.15rem 0; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink);
}
.lp-faq-item > summary::-webkit-details-marker { display: none; }
.lp-faq-item > summary::after {
  content: ""; position: absolute; right: .35rem; top: 1.55rem;
  width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.lp-faq-item[open] > summary::after { transform: rotate(-135deg); top: 1.75rem; }
.lp-faq-item > summary:hover { color: var(--primary); }
.lp-faq-item > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.lp-faq-a { padding: 0 2.2rem 1.25rem 0; }
.lp-faq-a p { color: var(--ink-2); font-size: .97rem; line-height: 1.7; max-width: 72ch; }

/* ---- order form ---------------------------------------------------------- */
.lp-order-sec { background: var(--console-bg); }
.lp-order-wrap { max-width: 900px; }
.lp-order-sec .eyebrow { color: var(--signal); }
.lp-order-sec .eyebrow::before { background: var(--signal); }
.lp-order-sec .section-head h2 { color: var(--console-ink); }
.lp-order-sec .section-head p { color: var(--console-muted); }

.lp-form {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 3vw, 2.2rem); box-shadow: var(--shadow-lg);
}
.lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lp-fs { border: 0; padding: 0; margin: 0 0 1.8rem; }
.lp-fs:last-of-type { margin-bottom: 1.2rem; }
.lp-fs > legend {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; padding: 0 0 .85rem; width: 100%;
  border-bottom: 1px solid var(--line); margin-bottom: 1.1rem;
}
.lp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; }
.lp-field { display: flex; flex-direction: column; gap: .4rem; grid-column: span 2; }
.lp-field.is-half { grid-column: span 1; }
.lp-field.is-wide { grid-column: span 2; }
.lp-field label { font-size: .88rem; font-weight: 600; color: var(--ink); }
.lp-opt { font-weight: 400; color: var(--muted); font-size: .82rem; }
.lp-req { color: var(--amber); }
.lp-field input, .lp-field select, .lp-field textarea {
  font: inherit; font-size: max(16px, .95rem); color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: .68rem .8rem; width: 100%;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.lp-field textarea { resize: vertical; min-height: 4.5rem; line-height: 1.55; }
.lp-field input:focus, .lp-field select:focus, .lp-field textarea:focus {
  outline: none; background: var(--surface); border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.lp-field.is-invalid input, .lp-field.is-invalid select, .lp-field.is-invalid textarea { border-color: var(--amber); }
.lp-hint { color: var(--muted); font-size: .8rem; line-height: 1.5; }
.lp-err { color: var(--amber); font-size: .82rem; font-weight: 500; }

.lp-fs-consent { display: grid; gap: .9rem; }
.lp-check { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; cursor: pointer; }
.lp-check input { width: 19px; height: 19px; margin-top: .12rem; accent-color: var(--primary); flex: none; }
.lp-check span { color: var(--ink-2); font-size: .91rem; line-height: 1.6; }
.lp-check a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.lp-check.is-invalid span { color: var(--ink); }
.lp-check.is-invalid input { outline: 2px solid var(--amber); outline-offset: 2px; }

.lp-submit { display: grid; gap: .8rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.lp-submit-btn {
  width: 100%; justify-content: center; font-size: 1rem;
  padding: .95rem 1rem; min-height: 56px; gap: .6rem;
}
.lp-submit-btn[disabled] { opacity: .65; pointer-events: none; }
.lp-submit-foot { color: var(--muted); font-size: .83rem; line-height: 1.6; text-align: center; }
.lp-form-msg {
  margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--radius-sm); font-size: .9rem; line-height: 1.55;
  background: var(--amber-soft); color: var(--ink); border: 1px solid var(--amber);
}
.lp-form-msg a { color: var(--primary); text-decoration: underline; }

.lp-done {
  background: var(--surface); border: 1px solid var(--signal); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.6rem); text-align: center; box-shadow: var(--shadow-lg);
}
.lp-done-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--signal-soft); color: var(--signal-ink); margin-bottom: 1rem; }
.lp-done-ic svg { width: 24px; height: 24px; }
.lp-done h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.lp-done p { margin-top: .6rem; color: var(--ink-2); font-size: .98rem; line-height: 1.65; max-width: 56ch; margin-inline: auto; }
.lp-done-ref { font-size: .9rem; color: var(--muted); }
.lp-mono { font-family: var(--font-mono); color: var(--ink); }

/* ---- sticky order bar (mobile only) --------------------------------------
   The homepage reserves 4.6rem at the bottom of every page under 720px for its
   own fixed CTA bar. A landing page without one therefore rendered an empty
   band under the footer. This fills that band with the thing the page exists
   for, and pages that do not carry a bar cancel the reservation instead. */
.lp-bar { display: none; }

@media (max-width: 720px) {
  .lp-bar {
    display: flex; align-items: center; gap: .75rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: .55rem .8rem calc(.55rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(1.2) blur(10px);
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
    border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(15,32,56,.12);
    transform: translateY(0); transition: transform .25s var(--ease);
  }
  /* slides away once the form itself is on screen, so it never covers a field */
  .lp-bar.is-away { transform: translateY(110%); }
  .lp-bar { max-width: 100vw; }
  .lp-bar .btn { flex: 1 1 auto; min-width: 0; }
  .lp-bar-price {
    display: flex; flex-direction: column; line-height: 1.15; flex: none;
    font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink);
  }
  .lp-bar-price span { font-family: var(--font-body); font-weight: 400; font-size: .7rem; color: var(--muted); }

  /* a page with no bar must not reserve room for one */
  body.lp:not(.lp-hasbar) { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .lp-bar { transition: none; } }

/* ---- partner placeholder ------------------------------------------------- */
.lp-partner { position: relative; z-index: 1; max-width: 680px; padding-top: clamp(1rem, 3vw, 2rem); }
.lp-partner .lp-h1 { max-width: 14ch; margin-top: 1rem; }
.lp-partner-note { margin-top: 1.1rem; color: var(--muted); font-size: .88rem; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1000px) {
  .lp-hero-inner { grid-template-columns: 1fr; }
  .lp-sample { position: static; }
  .lp-why-inner { grid-template-columns: 1fr; }
  .lp-price-grid { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  /* the hero stops being a two-column composition and becomes a single
     reading column, so the findings panel follows the promise instead of
     competing with it */
  .lp-hero { padding-top: clamp(5.5rem, 18vw, 7rem); }
  .lp-h1 { max-width: none; font-size: clamp(1.85rem, 7.4vw, 2.6rem); }
  .lp-lead { font-size: 1rem; }
  .lp-faq-item > summary { font-size: .98rem; padding-right: 2rem; }
  .lp-form { padding: 1.25rem 1.1rem 1.4rem; }
  .lp-order-wrap .section-head { margin-bottom: 1.5rem; }
}

/* The note becomes a block under the price line instead of a floating panel.
   Anchored to a 22px summary inside a grid column, a 78vw panel starts running
   off the edge well above the phone breakpoint, so this starts at 900px. */
@media (max-width: 900px) {
  .lp-info { position: static; }
  .lp-info-pop { position: static; width: 100%; margin-top: .6rem; box-shadow: var(--shadow-sm); }
  .lp-price-vatline { align-items: flex-start; }
}

@media (max-width: 620px) {
  .lp-grid { grid-template-columns: 1fr; }
  .lp-field, .lp-field.is-half, .lp-field.is-wide { grid-column: span 1; }
  .lp-pricebar { width: 100%; }
  .lp-find { grid-template-columns: 1fr; }
  .lp-sev { grid-row: auto; justify-self: start; margin-bottom: .15rem; }

  /* the pill wraps to two lines on a phone, so square it off */
  .lp .hero-tag { white-space: normal; border-radius: var(--radius-sm); letter-spacing: .08em; line-height: 1.5; }

  /* measured on a 412px viewport: these rendered at 10.6px to 11.2px, which
     is below the floor for body-adjacent text on a phone */
  .lp-sev { font-size: .72rem; }
  .lp-price-vat { font-size: .78rem; }
  .lp-bar-price span { font-size: .75rem; }
  .lp-fs > legend { font-size: .78rem; }
  .lp .foot-tagline { font-size: .78rem; }

  .lp-cards { gap: .75rem; }
  .lp-card { padding: 1.15rem 1.2rem 1.25rem; }
  .lp-scope-col { padding: 1.2rem 1.15rem 1.35rem; }
  .lp-price-main { padding: 1.25rem 1.15rem 1.4rem; }
  .lp-price-side li { padding: 1rem 1.05rem; }
  .lp-faq-a { padding-right: 0; }
}

@media (max-width: 520px) {
  /* two CTAs side by side leave neither enough width once they can wrap */
  .lp-hero-cta { flex-direction: column; align-items: stretch; }
  .lp-hero-cta .btn { width: 100%; justify-content: center; }
  .lp-price-row { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .lp-step { grid-template-columns: auto 1fr; gap: .85rem; padding: 1.15rem 0; }
  .lp-sample-head { padding: .85rem 1rem; }
  .lp-find { padding: .85rem 1rem; }
  .lp-fs > legend { margin-bottom: .9rem; }
}

@media (max-width: 380px) {
  /* Galaxy Fold and the older compact Androids */
  .lp-h1 { font-size: 1.7rem; }
  .lp-price-n { font-size: 1.75rem; }
  .lp-price-big { font-size: 1.5rem; }
  .lp-bar { gap: .5rem; padding-inline: .6rem; }
  .lp-bar-price { font-size: .95rem; }
  .lp-bar .btn { font-size: .86rem; padding-inline: .7rem; }
  .lp-side-ic, .lp-card-ic { width: 32px; height: 32px; }
}

/* Short landscape phones: the hero must not need a full swipe before any
   content appears. */
@media (max-height: 520px) and (orientation: landscape) {
  .lp-hero { padding-top: 5rem; padding-bottom: 2rem; }
  .lp-bar { position: static; }
  body.lp { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-faq-item > summary::after { transition: none; }
}