/* ============================================================================
   DispHub public landing page (templates/landing.html)
   Loads after site-header.css (fonts, tokens, buttons, header); nothing here
   depends on portal.css / auth.css.
   Light page, navy ink, one accent (brand orange) for every action; the four
   screen colours appear only as content on screens and in the photographs.
   Schibsted Grotesk is self-hosted (static/fonts/schibsted-grotesk, OFL).
   ============================================================================ */

/* --- Reset & base ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--lp-header-h) + 16px); }
body {
    font-family: var(--lp-font);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--lp-ink);
    background: var(--lp-white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: rgba(249, 115, 22, 0.35); }
:focus-visible { outline: 2px solid var(--lp-ink); outline-offset: 3px; border-radius: 2px; }
.lp-dark :focus-visible, .lp-header :focus-visible { outline-color: var(--lp-white); }


/* Icons: Tabler outline sprite inlined from templates/_landing_icons.svg */
.lp-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.lp-ico--sm { width: 18px; height: 18px; }

/* --- Type scale ------------------------------------------------------------- */
.lp-h1 { font-size: clamp(2.375rem, 1.45rem + 3.4vw, 4rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
.lp-h2 { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.625rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; max-width: 24ch; }
.lp-h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.lp-lead { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); line-height: 1.5; color: var(--lp-ink-2); max-width: 36ch; }
.lp-sub { font-size: 1.125rem; line-height: 1.55; color: var(--lp-ink-2); max-width: 58ch; margin-top: 16px; }
.lp-body { color: var(--lp-ink-2); max-width: 65ch; }
.lp-small { font-size: 0.9375rem; line-height: 1.5; }
.lp-caption { font-size: 0.8125rem; line-height: 1.4; color: var(--lp-ink-3); }


/* --- Flash messages --------------------------------------------------------- */
.lp-flash {
    margin: 16px 0 0; padding: 12px 16px; border-radius: var(--lp-r-sm);
    border: 1px solid var(--lp-line); background: var(--lp-tint); color: var(--lp-ink); font-weight: 500;
}
.lp-flash--success { background: #ECFDF3; border-color: #BBF7D0; color: #14532D; }
.lp-flash--error { background: #FEF2F2; border-color: #FECACA; color: #7F1D1D; }
.lp-flash--warning { background: #FFF7ED; border-color: #FED7AA; color: #7C2D12; }

/* --- Hero ------------------------------------------------------------------- */
.lp-hero { background: var(--lp-tint); padding: 40px 0 56px; }
.lp-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.lp-hero__copy > * + * { margin-top: 20px; }
.lp-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Demo stage: a TV (16:9), a totem (9:16) and an LED strip (4:1) on a light wall */
.lp-stage { display: grid; gap: 22px; }
.lp-wall {
    display: grid; grid-template-columns: 2.08fr 1fr; grid-template-rows: auto auto; gap: 14px;
    padding: 18px; border-radius: var(--lp-r-lg);
    background: linear-gradient(180deg, var(--lp-white), var(--lp-tint-2));
    border: 1px solid var(--lp-line);
}
.lp-screen { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lp-screen--tv { grid-column: 1; grid-row: 1; }
.lp-screen--led { grid-column: 1; grid-row: 2; }
.lp-screen--totem { grid-column: 2; grid-row: 1 / span 2; }
.lp-screen__bezel {
    position: relative; flex: 1 1 auto;
    background: #0B1220; padding: 5px; border-radius: 10px;
    box-shadow: var(--lp-shadow);
}
.lp-screen--tv .lp-screen__bezel { aspect-ratio: 16 / 9; }
.lp-screen--led .lp-screen__bezel { aspect-ratio: 4 / 1; padding: 3px; border-radius: 6px; }
.lp-screen--totem .lp-screen__bezel { padding: 7px; border-radius: 12px; }
.lp-screen__face { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 5px; background: #05070D; }
.lp-screen--led .lp-screen__face { border-radius: 3px; }
.lp-screen--totem .lp-screen__face { border-radius: 6px; }
.lp-screen__fill, .lp-screen__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-screen__img { object-fit: cover; }
.lp-screen--tv .lp-screen__img { object-fit: contain; }
/* the totem shows a landscape file rotated by 90 degrees, as the portal does */
.lp-screen--totem .lp-screen__img {
    inset: auto; top: 50%; left: 50%; width: 177.78%; height: 56.25%;
    transform: translate(-50%, -50%) rotate(90deg); object-fit: cover;
}
.lp-screen__img[hidden], .lp-screen__fill[hidden] { display: none; }
.lp-screen__fill { background: var(--sample, var(--lp-sample-1)); }
.lp-screen__label { display: flex; flex-direction: column; gap: 2px; font-size: 0.8125rem; line-height: 1.3; color: var(--lp-ink-3); }
.lp-screen__label strong { color: var(--lp-ink); font-weight: 600; }

/* Brand gradients used as sample content (the four screen colours only) */
:root {
    --lp-sample-1: radial-gradient(at 18% 28%, #22C55E 0, transparent 52%), radial-gradient(at 82% 18%, #F97316 0, transparent 52%), radial-gradient(at 72% 82%, #EC4899 0, transparent 56%), radial-gradient(at 18% 84%, #3B82F6 0, transparent 52%), #1B2A4A;
    --lp-sample-2: linear-gradient(135deg, #22C55E 0%, #3B82F6 100%);
    --lp-sample-3: linear-gradient(160deg, #F97316 0%, #EC4899 55%, #3B82F6 100%);
    --lp-sample-4: conic-gradient(from 210deg at 60% 40%, #3B82F6, #22C55E, #F97316, #EC4899, #3B82F6);
}

.lp-tray { display: none; }
html.js .lp-tray { display: grid; gap: 12px; }
.lp-tray__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.lp-tray__title { font-weight: 600; font-size: 0.9375rem; }
.lp-tray__status { font-size: 0.875rem; color: var(--lp-ink-3); min-height: 1.4em; }
.lp-tray__status.is-busy { color: var(--lp-ink-2); }
.lp-tray__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lp-swatch {
    position: relative; width: 56px; height: 40px; border-radius: var(--lp-r-sm);
    background: var(--sample); border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: inset 0 0 0 2px var(--lp-white), var(--lp-shadow-sm);
    transition: transform var(--lp-fast) var(--lp-ease), box-shadow var(--lp-fast) ease;
}
.lp-swatch:hover { transform: translateY(-1px); }
.lp-swatch:active { transform: scale(0.96); }
.lp-swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--lp-white), 0 0 0 2px var(--lp-ink); }
.lp-swatch--1 { --sample: var(--lp-sample-1); }
.lp-swatch--2 { --sample: var(--lp-sample-2); }
.lp-swatch--3 { --sample: var(--lp-sample-3); }
.lp-swatch--4 { --sample: var(--lp-sample-4); }
.lp-tray__sep { display: none; width: 1px; height: 28px; background: var(--lp-line-2); margin: 0 2px; }
@media (min-width: 480px) { .lp-tray__sep { display: block; } }
/* inner icon + title + text grids never stretch their first row when a neighbour is taller */
.lp-pain, .lp-row, .lp-proc__item, .lp-fact { align-content: start; }
.lp-file { position: relative; }
.lp-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.lp-file:focus-within .lp-btn { outline: 2px solid var(--lp-ink); outline-offset: 3px; }
.lp-tray__note { font-size: 0.8125rem; color: var(--lp-ink-3); }

/* Progress: a thin bar across the tray while "sending" */
.lp-tray__bar { height: 3px; border-radius: 2px; background: var(--lp-line); overflow: hidden; }
.lp-tray__bar span { display: block; height: 100%; background: var(--lp-orange); transform: scaleX(0); transform-origin: left center; transition: transform 0ms linear; }
.lp-tray__bar.is-busy span { transform: scaleX(1); transition: transform 700ms var(--lp-ease-io); }

/* --- Sections --------------------------------------------------------------- */
.lp-section { padding: 72px 0; }
.lp-section--tint { background: var(--lp-tint); }
.lp-section__head { max-width: 60rem; }
.lp-section__head + * { margin-top: 40px; }

/* Problem: photo beside a 2x2 of what it replaces */
.lp-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.lp-photo { border-radius: var(--lp-r-lg); overflow: hidden; box-shadow: var(--lp-shadow); }
.lp-photo img { width: 100%; height: 100%; object-fit: cover; }
.lp-photo--tall { aspect-ratio: 1 / 1; }
.lp-photo--tall img { object-position: 50% 35%; }
.lp-pains { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 32px; }
.lp-pain { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px 14px; align-items: start; }
.lp-pain .lp-ico { color: var(--lp-ink-2); margin-top: 2px; }
.lp-pain h3 { grid-column: 2; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.lp-pain p { grid-column: 2; color: var(--lp-ink-2); font-size: 0.9375rem; line-height: 1.5; }
.lp-pain .lp-ico { grid-row: 1; }
.lp-pain h3 { grid-row: 1; }

/* Steps: a three-step stepper with a photo band below */
.lp-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; counter-reset: step; }
.lp-step { position: relative; padding-top: 18px; border-top: 1px solid var(--lp-line-2); }
.lp-step::before {
    counter-increment: step; content: counter(step);
    position: absolute; top: -17px; left: 0;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--lp-navy); color: var(--lp-white);
    font-weight: 700; font-size: 0.9375rem; line-height: 34px; text-align: center;
}
.lp-step h3 { margin-top: 10px; }
.lp-step p { margin-top: 8px; color: var(--lp-ink-2); }
.lp-band { margin-top: 44px; border-radius: var(--lp-r-lg); overflow: hidden; box-shadow: var(--lp-shadow); }
.lp-band img { width: 100%; }

/* Contexts: six photographs in a four-column mosaic, captions below each */
.lp-mosaic { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.lp-tile { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lp-tile__img { position: relative; border-radius: var(--lp-r); overflow: hidden; aspect-ratio: 3 / 2; background: var(--lp-tint-2); }
.lp-tile__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-tile h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.lp-tile p { color: var(--lp-ink-2); font-size: 0.9375rem; line-height: 1.5; margin-top: 2px; }

/* Partner (MixLight) */
.lp-partner {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center;
    background: var(--lp-white); border: 1px solid var(--lp-line); border-radius: var(--lp-r-lg);
    padding: 28px 24px;
}
.lp-partner__logo { display: flex; align-items: center; justify-content: flex-start; }
.lp-partner__logo img { width: auto; height: 40px; }
.lp-partner__body > * + * { margin-top: 14px; }
.lp-partner__points { display: grid; gap: 8px; color: var(--lp-ink-2); }
.lp-partner__points li { display: flex; gap: 10px; align-items: flex-start; }
.lp-partner__points .lp-ico { color: var(--lp-ink); margin-top: 3px; }
.lp-partner__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--lp-ink); }

/* Portal features: two groups of four rows */
.lp-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.lp-group h3 { padding-bottom: 14px; border-bottom: 1px solid var(--lp-line-2); }
.lp-rows { display: grid; }
.lp-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 14px; padding: 18px 0; border-bottom: 1px solid var(--lp-line); }
.lp-row:last-child { border-bottom: 0; }
.lp-row .lp-ico { grid-row: 1 / span 2; color: var(--lp-ink-2); margin-top: 1px; }
.lp-row h4 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.lp-row p { color: var(--lp-ink-2); font-size: 0.9375rem; line-height: 1.5; }

/* Processing: list beside the illustration */
.lp-proc { display: grid; gap: 22px; }
.lp-proc__item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 14px; }
.lp-proc__item .lp-ico { grid-row: 1 / span 2; color: var(--lp-ink-2); margin-top: 1px; }
.lp-proc__item h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.lp-proc__item p { color: var(--lp-ink-2); font-size: 0.9375rem; line-height: 1.5; }
.lp-formats { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--lp-line-2); color: var(--lp-ink-2); font-size: 0.9375rem; }
.lp-formats strong { color: var(--lp-ink); font-weight: 600; }
/* Adaptation diagram: the hero's screen frames, one landscape source to a portrait and a strip */
.lp-adapt {
    display: grid; grid-template-columns: minmax(0, 1.25fr) 32px minmax(0, 1fr); align-items: center; gap: 18px;
    padding: 28px 24px; border-radius: var(--lp-r-lg);
    background: linear-gradient(180deg, var(--lp-white), var(--lp-tint-2)); border: 1px solid var(--lp-line);
}
.lp-adapt__frame { position: relative; }
.lp-adapt__frame .lp-screen__bezel { padding: 4px; border-radius: 8px; }
.lp-adapt__frame--wide .lp-screen__bezel { aspect-ratio: 16 / 9; }
.lp-adapt__frame--tall { width: 46%; }
.lp-adapt__frame--tall .lp-screen__bezel { aspect-ratio: 9 / 16; border-radius: 10px; padding: 5px; }
.lp-adapt__frame--strip { width: 100%; }
.lp-adapt__frame--strip .lp-screen__bezel { aspect-ratio: 4 / 1; padding: 3px; border-radius: 5px; }
.lp-adapt__out { display: grid; gap: 16px; justify-items: start; }
.lp-adapt__arrow { color: var(--lp-ink-3); width: 32px; height: 32px; justify-self: center; }
.lp-adapt__rotate { position: absolute; top: 50%; right: -30px; transform: translateY(-50%); color: var(--lp-ink-3); }

/* Local statement: heading plus two short paragraphs */
.lp-local { max-width: 60rem; }
.lp-local__text { display: grid; gap: 18px; margin-top: 24px; }
.lp-local__text p { color: var(--lp-ink-2); }
.lp-mosaic__credit { margin-top: 20px; }

/* FAQ: native details/summary rows with hairlines, the question is the h3 */
.lp-faq { max-width: 56rem; border-top: 1px solid var(--lp-line-2); }
.lp-faq__item { border-bottom: 1px solid var(--lp-line); }
.lp-faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 0; cursor: pointer; list-style: none;
}
.lp-faq__q::-webkit-details-marker { display: none; }
.lp-faq__q h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.lp-faq__q .lp-ico { color: var(--lp-ink-3); transition: transform var(--lp-fast) var(--lp-ease); }
.lp-faq__item[open] .lp-faq__q .lp-ico { transform: rotate(180deg); }
.lp-faq__a { padding: 0 40px 20px 0; color: var(--lp-ink-2); max-width: 65ch; }

/* Pricing facts: a 2x2 with a hairline cross */
.lp-facts { display: grid; grid-template-columns: minmax(0, 1fr); }
.lp-fact { padding: 24px 0; border-top: 1px solid var(--lp-line-2); display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px 14px; }
.lp-fact .lp-ico { grid-row: 1 / span 2; color: var(--lp-ink-2); margin-top: 2px; }
.lp-fact h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.lp-fact p { color: var(--lp-ink-2); }

/* Closing: the one navy block */
.lp-dark { background: var(--lp-navy); color: var(--lp-white); }
.lp-closing { padding: 72px 0; }
.lp-closing__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.lp-closing .lp-h2 { color: var(--lp-white); }
.lp-closing .lp-sub { color: var(--lp-on-navy-2); }
.lp-closing__actions { display: grid; gap: 14px; justify-items: start; }
.lp-closing__email { font-size: 1.25rem; font-weight: 600; color: var(--lp-white); text-decoration: none; word-break: break-all; }
.lp-closing__email:hover { text-decoration: underline; }
.lp-closing__meta { color: var(--lp-on-navy-2); font-size: 0.9375rem; }
.lp-closing__meta a { color: var(--lp-white); }

/* --- Shared footer (markup from templates/_footer.html) --------------------- */
.site-footer {
    background: var(--lp-navy); color: var(--lp-on-navy-2);
    padding: 28px var(--lp-gutter) 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-content {
    max-width: var(--lp-container); margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
}
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.footer-links a { color: var(--lp-on-navy-2); text-decoration: none; font-size: 0.875rem; }
.footer-links a:hover { color: var(--lp-white); }
.footer-separator { color: var(--lp-navy-3); }
.footer-anpc { display: flex; gap: 16px; align-items: center; }
.anpc-logo { height: 40px; width: auto; opacity: 0.9; }
.footer-copyright { font-size: 0.8125rem; color: var(--lp-on-navy-2); }

/* --- Breakpoints ------------------------------------------------------------ */
@media (max-width: 479px) {
    /* phones: both hero actions full width instead of two ragged widths */
    .lp-hero__cta .lp-btn { flex: 1 1 100%; }
}

@media (min-width: 640px) {
    .lp-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-pains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
    .lp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-fact { padding: 28px 28px 28px 0; }
    .lp-fact:nth-child(2n) { padding-left: 28px; padding-right: 0; border-left: 1px solid var(--lp-line-2); }
    .lp-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
    .lp-local__text { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
    .lp-partner { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; padding: 36px 32px; }
    .lp-partner__logo { justify-content: center; }
}

@media (min-width: 900px) {
    .lp-section { padding: 104px 0; }
    .lp-section__head + * { margin-top: 56px; }
    .lp-hero { padding: 64px 0 88px; }
    .lp-hero__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; }
    .lp-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
    .lp-split--reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
    .lp-split--photo-tall { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
    .lp-split .lp-photo { aspect-ratio: 4 / 3; }
    .lp-split .lp-photo--tall { aspect-ratio: 3 / 4; }
    .lp-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
    .lp-tile--wide { grid-column: span 2; }
    .lp-tile--wide .lp-tile__img { aspect-ratio: 2 / 1; }
    .lp-tile--tall { grid-row: span 2; }
    .lp-tile--tall .lp-tile__img { aspect-ratio: auto; flex: 1 1 auto; min-height: 240px; }
    .lp-wall { padding: 22px; gap: 16px; }
    .lp-closing__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
    .lp-closing { padding: 96px 0; }
}

/* --- Motion ----------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
    /* The one authored moment: the three screens power on, staggered, once */
    html.js .lp-wall .lp-screen__bezel { animation: lp-power-on 700ms var(--lp-ease) both; }
    html.js .lp-wall .lp-screen--tv .lp-screen__bezel { animation-delay: 120ms; }
    html.js .lp-wall .lp-screen--totem .lp-screen__bezel { animation-delay: 240ms; }
    html.js .lp-wall .lp-screen--led .lp-screen__bezel { animation-delay: 360ms; }
    @keyframes lp-power-on {
        from { opacity: 0; transform: translateY(8px) scale(0.985); }
        to { opacity: 1; transform: none; }
    }
    .lp-screen__face::after {
        content: ''; position: absolute; inset: 0; background: #05070D; opacity: 0; pointer-events: none;
        transition: opacity 320ms var(--lp-ease);
    }
    .lp-screen.is-switching .lp-screen__face::after { opacity: 1; transition-duration: 160ms; }
    .lp-screen__fill, .lp-screen__img { transition: filter 320ms ease; }
    .lp-screen.is-switching .lp-screen__fill, .lp-screen.is-switching .lp-screen__img { filter: blur(6px); }
}
@media (prefers-reduced-motion: reduce) {
    .lp-tray__bar.is-busy span { transition: none; }
}