/* ============================================================
   Danish use-case & industry landing pages
   ------------------------------------------------------------
   Layout follows Nicklas' ansættelseskontrakt mock-up (2026-08-07):
   breadcrumb → hero with a live demo stage → problem → flow →
   related → FAQ → closing CTA.

   Colours are NOT the mock-up's warm brown/gold. Every value below
   resolves to the site tokens in variables.css so these pages read
   as the same brand as the main landing: #181818 surfaces, the
   #E6CC80 highlight as accent, and the homepage CTA treatment for every button.

   Scoped under .lp so nothing here can leak into styles.css.
   ============================================================ */

.lp {
    /* Dark is the base, same as the rest of the site.
       One background for the whole page: --lp-surface deliberately matches
       --lp-bg, so section bands are flat and only whitespace separates them.
       --lp-surface-2 is reserved for framed document previews. */
    --lp-bg: var(--mkt-bg);
    --lp-surface: var(--mkt-bg);
    --lp-surface-2: #252525;
    --lp-text: #FFFFFF;
    --lp-muted: #7A7A7A;
    --lp-accent: #E6CC80;
    --lp-accent-soft: rgba(230, 204, 128, 0.13);
    --lp-on-accent: #181818; /* text that sits ON the accent, e.g. the ✓ badge */
    --lp-warn: #f59e0b;
    --lp-warn-soft: rgba(245, 158, 11, 0.14);
    /* The mock-up marked both "OK" and "needs attention" in gold. Two amber
       pills side by side are hard to tell apart, so OK is green here. */
    --lp-ok: #4ade80;
    --lp-ok-soft: rgba(74, 222, 128, 0.14);
    --lp-divider: rgba(255, 255, 255, 0.10);
    --lp-hairline: rgba(255, 255, 255, 0.06);
    /* Card elevation. Deeper alpha on dark: --lp-surface equals --lp-bg, so the
       shadow is the only thing lifting a card off the band. */
    --lp-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    --lp-shadow-lift: 0 6px 20px rgba(0, 0, 0, 0.45);

    /* Identifiers (CELEX numbers, article numbers, dates) are set in mono
       everywhere on these pages. Lawyers read them as codes, not as prose. */

    /* A shadow tuned for white is invisible on #181818, so dark lifts with
       depth plus a hairline top highlight. */
    --lp-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 20px 46px -14px rgba(0, 0, 0, 0.8),
                 inset 0 1px 0 rgba(255, 255, 255, 0.045);

    background: var(--lp-bg);
    color: var(--lp-text);
    display: block;
    padding-top: 80px; /* clears the fixed navbar */
}

/* Light mode is the default on landing pages; the navbar theme toggle
   removes .light-landing and the dark values above take over.
   The accent is darkened here because #E6CC80 on white is unreadable. */
.light-landing .lp {
    --lp-bg: var(--mkt-bg);
    --lp-surface: var(--mkt-bg);
    --lp-surface-2: var(--mkt-card-bg);
    --lp-text: #181818;
    --lp-muted: #4a5568;
    --lp-accent: #7A5C1E;
    --lp-accent-soft: rgba(184, 145, 90, 0.16);
    --lp-on-accent: #ffffff;
    --lp-warn: #a4610a;
    --lp-warn-soft: rgba(245, 158, 11, 0.16);
    --lp-ok: #007029;
    --lp-ok-soft: rgba(0, 112, 41, 0.10);
    --lp-divider: rgba(0, 0, 0, 0.10);
    --lp-hairline: rgba(0, 0, 0, 0.06);
    /* Matches .pricing-card on /price so the two pages read as one system. */
    --lp-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --lp-shadow-lift: 0 6px 20px rgba(0, 0, 0, 0.10);
}

.lp-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 32px;
}

.lp .lp-eyebrow {
    font-size: var(--text-12);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--lp-accent);
    margin: 0 0 14px 0;
}

/* Breadcrumbs belong to the hero, not the 144px section rhythm. */
.lp-intro {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ---------- Breadcrumb strip ---------- */

.lp-crumbs {
    padding: 16px 0;
}

.lp-crumbs .lp-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: var(--text-13);
    color: var(--lp-muted);
}

.lp-crumbs a,
.lp-crumbs a:link,
.lp-crumbs a:visited {
    color: var(--lp-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.lp-crumbs a:hover {
    color: var(--lp-text);
    text-decoration: underline;
}

/* ---------- Hero ---------- */

.lp-hero {
    padding: 56px 0 60px;
}

.lp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
    align-items: start;
}

.lp .lp-title {
    font-size: var(--text-display-hero);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--lp-text);
    margin: 0;
    max-width: 15ch;
}

.lp .lp-lede {
    font-size: var(--text-18);
    line-height: 1.6;
    color: var(--lp-muted);
    margin: 18px 0 0 0;
    max-width: 46ch;
}

.lp-cta-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.lp-button {
    cursor: pointer;
    text-decoration: none;
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

.lp .lp-price {
    font-size: var(--text-14);
    color: var(--lp-muted);
    margin: 0;
}

.lp .lp-price b {
    color: var(--lp-text);
    font-weight: 600;
}

.lp-trust {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 36px;
}

.lp-trust li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: var(--text-14);
    line-height: 1.5;
    color: var(--lp-muted);
    max-width: 17ch;
}

.lp-trust {
    list-style: none;
    padding: 0;
}

.lp-trust .lp-mark {
    color: var(--lp-accent);
    font-weight: 700;
    font-size: var(--text-13);
    flex-shrink: 0;
    line-height: 1.5;
}

/* ---------- Demo stage (the signature element, from the mock-up) ---------- */

.lp-stage-label {
    font-size: var(--text-11);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--lp-accent);
    margin: 0 0 10px 0;
}

.lp-stage {
    position: relative;
    width: 100%;
    height: 440px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-divider);
    border-radius: 10px;
    box-shadow: var(--lp-shadow);
    overflow: hidden;
}

.lp-phase {
    position: absolute;
    inset: 0;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.lp-phase.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Phase A: drop a draft in */
.lp-drop {
    flex: 1;
    border: 1.5px dashed var(--lp-divider);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    position: relative;
}

.lp-ghost-file {
    position: absolute;
    top: 14%;
    width: 56px;
    height: 70px;
    background: var(--lp-surface-2);
    border: 1px solid var(--lp-accent);
    border-radius: 5px;
    opacity: 0;
    animation: lp-drift 3.2s ease-in-out infinite;
}

@keyframes lp-drift {
    0%   { opacity: 0; transform: translate(-60px, -36px) rotate(-8deg); }
    35%  { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    70%  { opacity: 1; transform: translate(0, 6px) rotate(0deg); }
    100% { opacity: 0; transform: translate(0, 6px) rotate(0deg); }
}

.lp-drop-icon {
    color: var(--lp-accent);
    font-size: var(--text-24);
    line-height: 1;
}

.lp .lp-drop p {
    font-size: var(--text-14);
    font-weight: 500;
    color: var(--lp-text);
    margin: 0;
}

.lp .lp-drop span {
    font-size: var(--text-12);
    color: var(--lp-muted);
}

/* Shared doc header */
.lp-doc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--lp-hairline);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.lp-doc-name {
    font-size: var(--text-12);
    color: var(--lp-muted);
}

.lp-doc-status {
    font-size: var(--text-11);
    color: var(--lp-accent);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.lp-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lp-accent);
    animation: lp-pulse 1.4s infinite;
}

@keyframes lp-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

/* Phase B: reading */
/* Text and bar travel together in the middle of the stage. */
.lp .lp-phase-b p {
    margin: auto 0 0;
    text-align: center;
    font-size: var(--text-13);
    color: var(--lp-muted);
}

.lp-progress {
    height: 4px;
    background: var(--lp-divider);
    border-radius: 4px;
    overflow: hidden;
    margin: 10px 0 auto;
}

.lp-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--lp-accent);
    border-radius: 4px;
}

.lp-phase-b.is-active .lp-progress span {
    animation: lp-fill 1.6s ease forwards;
}

@keyframes lp-fill {
    to { width: 100%; }
}

/* Phase C: scanning the clauses */
.lp-scan {
    position: relative;
    flex: 1;
}

.lp-scan-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--lp-hairline);
}

.lp-scan-row b {
    font-size: var(--text-13);
    font-weight: 500;
    color: var(--lp-text);
    white-space: nowrap;
}

.lp-tag {
    font-size: var(--text-10);
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(4px);
}

.lp-tag--warn {
    background: var(--lp-warn-soft);
    color: var(--lp-warn);
}

.lp-tag--ok {
    background: var(--lp-ok-soft);
    color: var(--lp-ok);
}

.lp-phase-c.is-active .lp-tag { animation: lp-tag-in 0.4s ease forwards; }
.lp-phase-c.is-active .lp-scan-row:nth-child(2) .lp-tag { animation-delay: 0.6s; }
.lp-phase-c.is-active .lp-scan-row:nth-child(3) .lp-tag { animation-delay: 1.4s; }
.lp-phase-c.is-active .lp-scan-row:nth-child(4) .lp-tag { animation-delay: 2.1s; }
.lp-phase-c.is-active .lp-scan-row:nth-child(5) .lp-tag { animation-delay: 2.9s; }
.lp-phase-c.is-active .lp-scan-row:nth-child(6) .lp-tag { animation-delay: 3.5s; }

@keyframes lp-tag-in {
    to { opacity: 1; transform: translateX(0); }
}

.lp-scanline {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 24px;
    background: linear-gradient(180deg, transparent, var(--lp-accent-soft), transparent);
    border-top: 1px solid var(--lp-accent);
    opacity: 0;
    pointer-events: none;
}

.lp-scanline.is-running {
    animation: lp-sweep 4.2s ease-in-out forwards;
}

@keyframes lp-sweep {
    0%   { opacity: 1; top: 0; }
    92%  { opacity: 1; top: calc(100% - 24px); }
    100% { opacity: 0; top: calc(100% - 24px); }
}

/* Phase D: the finding list */
.lp-result-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 4px;
}

.lp-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--lp-accent);
    color: var(--lp-on-accent);
    font-size: var(--text-12);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lp .lp-phase-d h3 {
    font-size: var(--text-15);
    font-weight: 600;
    color: var(--lp-text);
    margin: 0;
}

.lp .lp-result-sub {
    font-size: var(--text-12);
    color: var(--lp-muted);
    margin: 0 0 14px 0;
}

.lp-result-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    border-bottom: 1px solid var(--lp-hairline);
    font-size: var(--text-13);
    color: var(--lp-text);
}

.lp-result-row i {
    font-style: normal;
    font-size: var(--text-12);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.lp-result-row--warn i { color: var(--lp-warn); }
.lp-result-row--ok i   { color: var(--lp-ok); }

.lp .lp-stage-note {
    margin: auto 0 0 0;
    padding-top: 12px;
    font-size: var(--text-11);
    line-height: 1.5;
    color: var(--lp-muted);
}

/* ---------- Problem ---------- */

/* Sections are separated by the background bands and by whitespace, never
   by a rule. */
.lp-problem {
    padding: 8px 0 64px;
    margin-top: 0;
}

.lp-problem .lp-wrap { max-width: 700px; margin-left: auto; margin-right: auto; }

.lp .lp-h2 {
    font-size: var(--text-display-subsection);
    font-weight: 600;
    line-height: 1.55;
    color: var(--lp-text);
    margin: 0 0 18px 0;
}

.lp .lp-problem p {
    font-size: var(--text-16);
    line-height: 1.65;
    color: var(--lp-muted);
    margin: 0 0 14px 0;
    max-width: 58ch;
}

.lp .lp-problem p.lp-eyebrow { margin: 40px 0 12px; color: var(--lp-text); }
.lp .lp-problem p.lp-eyebrow:first-child { margin-top: 0; }

/* Coverage list: what the review actually checks against. Two columns so
   six items read as a scannable block rather than a long stack. */
.lp-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 28px;
}

.lp-checklist li {
    display: block;
    position: relative;
    padding-left: 24px;
    font-size: var(--text-15);
    line-height: 1.5;
    color: var(--lp-muted);
}

.lp-checklist .lp-mark {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--lp-accent);
    font-weight: 700;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .lp-checklist { grid-template-columns: 1fr; }
}

/* ---------- Flow ---------- */

.lp-flow {
    padding: 64px 0;
    background: var(--lp-surface);
}

.lp-flow-head {
    max-width: 560px;
    margin-bottom: 40px;
}

.lp-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* No fill: the outline alone separates the steps from the section band. */
.lp-step {
    border: 1px solid var(--lp-divider);
    border-radius: 10px;
    padding: 22px;
    background: transparent;
    box-shadow: var(--lp-shadow);
}

.lp-step-num {
    display: block;
    font-size: var(--text-12);
    font-weight: 600;
    color: var(--lp-accent);
    margin-bottom: 12px;
}

.lp .lp-step h3 {
    font-size: var(--text-16);
    font-weight: 600;
    color: var(--lp-text);
    margin: 0 0 8px 0;
}

.lp .lp-step p {
    font-size: var(--text-14);
    line-height: 1.55;
    color: var(--lp-muted);
    margin: 0;
}

/* ---------- Related pages ---------- */

.lp-related { padding: 64px 0; }

.lp-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.lp-card {
    display: block;
    border: 1px solid var(--lp-divider);
    border-radius: 10px;
    padding: 20px;
    text-decoration: none;
    background: transparent;
    box-shadow: var(--lp-shadow);
    transition: border-color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.lp-card:hover {
    border-color: var(--lp-accent);
    transform: translateY(-2px);
    box-shadow: var(--lp-shadow-lift);
}

.lp .lp-card h3 {
    font-size: var(--text-15);
    font-weight: 600;
    color: var(--lp-text);
    margin: 0 0 6px 0;
}

.lp .lp-card p {
    font-size: var(--text-13);
    line-height: 1.55;
    color: var(--lp-muted);
    margin: 0;
}

/* ---------- FAQ ---------- */

.lp-faq {
    padding: 64px 0;
    background: var(--lp-surface);
}

.lp-faq .lp-wrap { max-width: 740px; margin-left: auto; margin-right: auto; }

.lp-faq details {
    border-bottom: 1px solid var(--lp-divider);
    padding: 18px 0;
}

.lp-faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: var(--text-15);
    font-weight: 600;
    color: var(--lp-text);
}

.lp-faq summary::-webkit-details-marker { display: none; }

.lp-faq summary::after {
    content: "+";
    color: var(--lp-accent);
    font-size: var(--text-18);
    flex-shrink: 0;
}

.lp-faq details[open] summary::after { content: "–"; }

.lp .lp-faq-answer {
    font-size: var(--text-14);
    line-height: 1.65;
    color: var(--lp-muted);
    margin: 12px 0 0 0;
    max-width: 58ch;
}

.lp .lp-faq-note {
    display: block;
    margin-top: 10px;
    padding-left: 12px;
    border-left: 2px solid var(--lp-divider);
    font-size: var(--text-13);
}

/* ---------- Closing CTA + disclaimer ---------- */

.lp-close {
    background: var(--lp-bg);
    padding: 72px 0;
    text-align: center;
}

.lp .lp-close .lp-h2 {
    max-width: 22ch;
    margin: 0 auto 16px;
}

.lp .lp-close p {
    font-size: var(--text-15);
    color: var(--lp-muted);
    margin: 0 0 28px 0;
}

.lp-disclaimer {
    padding: 0;
    margin-top: 24px;
}

.lp .lp-disclaimer p {
    font-size: var(--text-13);
    line-height: 1.6;
    color: var(--lp-muted);
    margin: 0;
    max-width: 70ch;
    margin-inline: auto;
}

/* ---------- Focus ---------- */

.lp a:focus-visible,
.lp button:focus-visible,
.lp summary:focus-visible {
    outline: 2px solid var(--lp-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .lp-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .lp .lp-title { max-width: none; }
    .lp-steps { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .lp { padding-top: 64px; }
    /* A Danish compound at this size is wider than a phone. The long titles carry a
       soft hyphen at the joint; this is the floor for one that does not, so the page
       never scrolls sideways. */
    .lp .lp-title { overflow-wrap: anywhere; }
    .lp-wrap { padding: 0 20px; }
    .lp-hero { padding: 36px 0 44px; }
    .lp-stage { height: 400px; }
    .lp-trust { gap: 18px; }
    .lp-trust li { max-width: none; }
    .lp-flow, .lp-faq, .lp-related { padding: 48px 0; }
    .lp-close { padding: 56px 0; }
}

/* ---------- Citation trail panel (English use-case heroes) ----------
   For the pages whose story is neither document review nor consolidation:
   the answer writes itself and every sentence pins to the provision it
   rests on. Marginalia is how legal commentary has always been read.

   Static rows keep the cited text readable while scrolling. */

.lp-stage--trail {
    height: auto;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    box-shadow: var(--lp-shadow);
}

.lp .lp-trail-q {
    font-size: var(--text-13);
    font-weight: 500;
    color: var(--lp-text);
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--lp-hairline);
}

.lp-trail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 112px);
    gap: 12px;
    align-items: start;
    padding: 11px 0;
    opacity: 1;
}

.lp .lp-trail-row p {
    margin: 0;
    font-size: var(--text-13);
    line-height: 1.5;
    color: var(--lp-text);
}

.lp-trail-cite {
    font-family: var(--font-mono);
    font-size: var(--text-10);
    line-height: 1.45;
    color: var(--lp-accent);
    text-align: right;
    padding-left: 12px;
    border-left: 2px solid var(--lp-accent);
}

/* ---------- Reduced motion: hold the finished result, drop the theatre ---------- */

@media (prefers-reduced-motion: reduce) {
    .lp * {
        animation: none !important;
        transition: none !important;
    }
    .lp-phase { opacity: 0; }
    .lp-phase.is-active { opacity: 1; transform: none; }
    .lp-tag { opacity: 1; transform: none; }
    .lp-progress span { width: 100%; }
    .lp-scanline { display: none; }
    .lp-ghost-file { opacity: 1; transform: none; }
    .lp-trail-row { opacity: 1; transform: none; }
}

/* ---------- Product screenshot stage (Danish use-case heroes) ----------
   Replaces the four-phase mock-up with a real light-mode capture of the app
   answering this page's own question, EU + Danish jurisdiction switched on.
   The capture is light whatever the landing theme is, so the frame is too.
   Must sit after the 640px block above, which pins .lp-stage to a fixed
   height a screenshot cannot honour. */

/* A real capture carries more detail than a mock-up, so it gets the wider
   column here, the reverse of the mock-up hero's split. Only above the 900px
   breakpoint, where the two columns still sit side by side. */
@media (min-width: 901px) {
    .lp-hero-grid:has(.lp-stage--shot) {
        grid-template-columns: 0.85fr 1.15fr;
    }

    /* The narrower text column no longer fits three 17ch trust items on one row,
       so they wrapped 2+1. Let them share the row instead of sizing themselves. */
    .lp-hero-grid:has(.lp-stage--shot) .lp-trust { gap: 18px; }
    .lp-hero-grid:has(.lp-stage--shot) .lp-trust li { flex: 1 1 0; max-width: none; }
}

.lp-stage--shot {
    height: auto;
    padding: 0;
    background: var(--mkt-white);
}

.lp-stage--shot img {
    display: block;
    width: 100%;
    height: auto;
}

/* The same page-owned surface as the main landing page. */
.lp .lp-title, .lp .lp-h2 { font-family: var(--font-grotesk); font-weight: 500; }
.lp .lp-title { max-width: 20ch; }
.lp-wrap { max-width: 1100px; padding-inline: 20px; }

@media (max-width: 900px) { .lp .lp-title { max-width: none; } }

/* Content-sized previews and normal inline wrapping keep narrow layouts readable. */
.lp-hero-grid > *, .lp-trail-row > * { min-width: 0; }
.lp .lp-trail-cite { overflow-wrap: anywhere; }
.lp .lp-stage--trail { height: auto; }
.lp .lp-problem .lp-wrap { max-width: 800px; }
.lp .lp-problem p { max-width: none; }
.lp .lp-problem .lp-checklist { grid-template-columns: 1fr; gap: 12px; }
@media (max-width: 480px) {
    .lp-trail-row { grid-template-columns: 1fr; }
    .lp-trail-cite { text-align: left; }
}

/* Document examples use normal flow, like the static citation previews. */
.lp .lp-stage--summary {
    height: auto;
    padding: 24px;
    background: var(--mkt-card-bg);
}
.lp-summary-result b { display: block; font-size: var(--text-16); line-height: 1.55; }
.lp-summary-result span { display: block; margin-top: 12px; color: var(--lp-muted); }
.lp-stage--summary .lp-result-row { flex-wrap: wrap; line-height: 1.55; }
.lp-stage--summary .lp-stage-note { margin-top: 20px; }