/* ============================================================
   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 --cta-green 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 survives for the closing CTA, the one band that stays. */
    --lp-bg: #181818;
    --lp-surface: #181818;
    --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. */
    --lp-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

    /* Two elevation levels. A shadow tuned for white is invisible on
       #181818, so dark lifts with depth plus a hairline top highlight;
       --lp-float is for elements that genuinely hover inside a panel. */
    --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);
    --lp-float: 0 6px 18px -6px rgba(0, 0, 0, 0.65);

    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: #ffffff;
    --lp-surface: #ffffff;
    --lp-surface-2: #eef0f4;
    --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: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--lp-accent);
    margin: 0 0 14px 0;
}

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

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

.lp-crumbs .lp-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    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: 1.05fr 0.95fr;
    gap: 56px;
    align-items: start;
}

.lp .lp-title {
    font-size: clamp(2rem, 4.2vw, 3rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--lp-text);
    margin: 0;
    max-width: 15ch;
}

.lp .lp-lede {
    font-size: 1.0625rem;
    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 {
    background: var(--cta-green);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 14px 26px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.15s ease;
}

.lp-button:hover {
    background: var(--cta-green-hover);
    transform: translateY(-1px);
}

.lp .lp-price {
    font-size: 0.875rem;
    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: 0.8438rem;
    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: 0.8125rem;
    flex-shrink: 0;
    line-height: 1.5;
}

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

.lp-stage-label {
    font-size: 0.6875rem;
    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: 8px;
    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: 1.5rem;
    line-height: 1;
}

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

.lp .lp-drop span {
    font-size: 0.75rem;
    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: 0.7188rem;
    color: var(--lp-muted);
}

.lp-doc-status {
    font-size: 0.6875rem;
    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: 0.7812rem;
    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: 0.7812rem;
    font-weight: 500;
    color: var(--lp-text);
    white-space: nowrap;
}

.lp-tag {
    font-size: 0.625rem;
    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: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.lp .lp-result-sub {
    font-size: 0.75rem;
    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: 0.7812rem;
    color: var(--lp-text);
}

.lp-result-row i {
    font-style: normal;
    font-size: 0.75rem;
    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: 0.6562rem;
    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: 24px;
}

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

.lp .lp-h2 {
    font-size: clamp(1.375rem, 2.8vw, 1.875rem);
    font-weight: 600;
    line-height: 1.22;
    color: var(--lp-text);
    margin: 0 0 18px 0;
}

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

.lp-problem .lp-eyebrow { margin-top: 56px; }
.lp-problem .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: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 0.9062rem;
    line-height: 1.5;
    color: var(--lp-muted);
}

.lp-checklist .lp-mark {
    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: 0.75rem;
    font-weight: 600;
    color: var(--lp-accent);
    margin-bottom: 12px;
}

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

.lp .lp-step p {
    font-size: 0.8438rem;
    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 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

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

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

.lp .lp-card p {
    font-size: 0.8125rem;
    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: 0.9375rem;
    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: 1.125rem;
    flex-shrink: 0;
}

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

.lp .lp-faq-answer {
    font-size: 0.875rem;
    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: 0.7812rem;
}

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

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

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

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

.lp-disclaimer {
    padding: 28px 0 48px;
}

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

/* ---------- 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; }
    .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; }
}


/* ---------- Consolidation panel (English use-case heroes) ----------
   The alternative to the four-phase scan stage. Instead of "AI reads
   your document" — a trope that says nothing about European law — it
   shows the one thing the product can claim and a PDF cannot: the base
   act and everything that has amended it collapse into a single text
   that is current today.

   Sheets are positioned by an inline --lp-y and staggered by --lp-d, so
   a page can stack any number of instruments without touching this file.
   Pure CSS: these pages do not load landing-stage.js. */

.lp-stage--consol {
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    box-shadow: var(--lp-shadow);
}

.lp-consol {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Where the stack lands. The base act sits here and never moves;
       every amendment collapses up into it. */
    --lp-y0: -48px;
}

.lp-sheet {
    position: absolute;
    width: 78%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 15px;
    border-radius: 8px;
    background: var(--lp-surface-2);
    border: 1px solid var(--lp-divider);
    box-shadow: var(--lp-float);
    font-size: 0.75rem;
    transform: translateY(var(--lp-y, 0));
    animation: lp-collapse 9s ease-in-out infinite;
    animation-delay: var(--lp-d, 0s);
}

/* The act itself does not move; the amendments come down onto it. */
.lp-sheet--base { animation: none; }

.lp-sheet-id {
    font-family: var(--lp-mono);
    font-size: 0.6875rem;
    color: var(--lp-muted);
    white-space: nowrap;
}

@keyframes lp-collapse {
    0%, 30%  { transform: translateY(var(--lp-y, 0)); opacity: 1; }
    55%, 88% { transform: translateY(var(--lp-y0, 0)) scale(0.97); opacity: 0; }
    100%     { transform: translateY(var(--lp-y, 0)); opacity: 1; }
}

.lp-consol-out {
    position: absolute;
    width: 86%;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    background: var(--lp-surface-2);
    border: 1px solid var(--lp-accent);
    box-shadow: var(--lp-float);
    opacity: 0;
    animation: lp-consol-out 9s ease-in-out infinite;
}

@keyframes lp-consol-out {
    0%, 48%  { opacity: 0; transform: translateY(var(--lp-y0, 0)) scale(0.97); }
    62%, 88% { opacity: 1; transform: translateY(var(--lp-y0, 0)) scale(1); }
    100%     { opacity: 0; transform: translateY(var(--lp-y0, 0)) scale(0.97); }
}

.lp .lp-consol-out b {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--lp-text);
}

.lp .lp-consol-out span {
    display: block;
    margin-top: 6px;
    font-family: var(--lp-mono);
    font-size: 0.625rem;
    color: var(--lp-accent);
}


/* ---------- 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.

   Rows share one 9s loop and are offset by --lp-d, so they stay in phase
   with each other and with the consolidation panel. Pure CSS. */

.lp-stage--trail {
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    box-shadow: var(--lp-shadow);
}

.lp .lp-trail-q {
    font-size: 0.8125rem;
    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: 1fr 112px;
    gap: 12px;
    align-items: start;
    padding: 11px 0;
    opacity: 0;
    animation: lp-trail-in 9s ease infinite both;
    animation-delay: var(--lp-d, 0s);
}

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

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

@keyframes lp-trail-in {
    0%, 6%   { opacity: 0; transform: translateY(6px); }
    16%, 88% { opacity: 1; transform: none; }
    100%     { opacity: 0; transform: translateY(6px); }
}

/* ---------- 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-sheet { opacity: 0; }
    .lp-consol-out { opacity: 1; transform: translateY(var(--lp-y0, 0)); }
    .lp-trail-row { opacity: 1; transform: none; }
}