/* The public site: the landing page (/), its sister pages (a feature, pricing, enquiry, legal)
   and the error pages. Loaded after static/css/tokens.css (the product's colours and font) and
   base.css (reset, buttons, form fields, logo, pill), which the sign-in pages share; neither
   the app's Tailwind build nor custom.css is loaded on these pages. Classes are prefixed lp-.

   Motion rule used throughout: an element's plain style is its finished, visible state, and
   keyframes only describe where it comes from. So with animations off (reduced motion, or the
   scripts that start them missing) nothing is left hidden. */

/* Colours only these pages need, for each theme (the shared ones are in tokens.css). Most are
   for the drawings: the cards' illustrations and the drawn app window. */
:root {
    --lp-nav-h: 64px;             /* the header's height: the hero fills the screen under it */
    --lp-nav-bg: rgba(251, 251, 250, .86);
    --lp-hover-soft: rgba(0, 0, 0, .05);
    --lp-glow: rgba(255, 153, 0, .24);
    /* A darker run of the orange than on dark: the headline has to read on a light ground. */
    --lp-headline: linear-gradient(92deg, #dd6b00, #b8430a);
    --lp-card-hover: #ffffff;
    --lp-card-shadow: 0 18px 36px -26px rgba(0, 0, 0, .3);
    --lp-shadow: 0 40px 80px -36px rgba(0, 0, 0, .3);

    --lp-line-soft: #ededea;      /* the rule between two rows of a drawing */
    --lp-raised: #ffffff;         /* a tile inside a drawing */
    --lp-raised-line: #e4e4e1;
    --lp-head-bg: #f4f4f2;        /* a drawn table's header row, the window's title bar */
    --lp-track: #e7e7e4;          /* the empty part of a bar or meter */
    --lp-bar-muted: #a8a8a3;
    --lp-thumb: linear-gradient(135deg, #efefec, #dcdcd8);
    --lp-thumb-line: #d2d2ce;
    --lp-dot-none: #c9c9c5;
    --lp-done: #2fa866;
    --lp-window-bg: #ffffff;
    --lp-window-dot: #d4d4d0;
    --lp-app-bg: #f6f6f4;
    --lp-toast-bg: #ecfdf3;
    --lp-toast-text: #166534;
    --lp-toast-line: rgba(21, 128, 61, .35);
    --lp-toast-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    --lp-shot-line: #e1e1dd;      /* a screenshot's frame */
    --lp-tip-bg: #1c1c1e;         /* a tag's tooltip: the page's ink, inverted */
    --lp-tip-ink: #f7f7f5;
}
[data-theme="dark"] {
    --lp-nav-bg: rgba(17, 17, 17, .86);
    --lp-hover-soft: rgba(255, 255, 255, .06);
    --lp-glow: rgba(255, 153, 0, .17);
    --lp-headline: linear-gradient(92deg, #ffc266 0%, #ff9900 55%, #ff7a00 100%);
    --lp-card-hover: #1c1c1c;
    --lp-card-shadow: none;
    --lp-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85);

    --lp-line-soft: #232323;
    --lp-raised: #1b1b1b;
    --lp-raised-line: #2a2a2a;
    --lp-head-bg: #1d1d1d;
    --lp-track: #272727;
    --lp-bar-muted: #7a7a7a;
    --lp-thumb: linear-gradient(135deg, #2e2e2e, #1e1e1e);
    --lp-thumb-line: #333333;
    --lp-dot-none: #4d4d4d;
    --lp-done: #3fbf73;
    --lp-window-bg: #151515;
    --lp-window-dot: #353535;
    --lp-app-bg: #171717;
    --lp-toast-bg: #15231b;
    --lp-toast-text: #b6f5cd;
    --lp-toast-line: rgba(74, 222, 128, .35);
    --lp-toast-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    --lp-shot-line: #333333;
    --lp-tip-bg: #f4f4f2;
    --lp-tip-ink: #18181a;
}

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
.lp-wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }

/* Colour roles, set with data-tone; a component decides what to paint with --tone. */
[data-tone="good"], [data-tone="g"] { --tone: var(--ui-good); }
[data-tone="warn"], [data-tone="w"] { --tone: var(--ui-warn); }
[data-tone="bad"], [data-tone="b"] { --tone: var(--ui-bad); }
[data-tone="info"] { --tone: var(--ui-info); }
[data-tone="flat"], [data-tone="plain"] { --tone: var(--ui-text-2); }
[data-tone="n"] { --tone: var(--lp-dot-none); }
.lp-art :is(span, b, small)[data-tone], .lp-window :is(span, b, small)[data-tone] { color: var(--tone); }

/* --- Header ---------------------------------------------------------------- */
/* At the top of a page the header is a plain row. Once the page has scrolled it becomes a
   floating bar of the same width, a little below the top: corners rounded like a button's, a
   light grey border, a light shadow and a backdrop. On narrow
   screens (and while the folded menu is open) it is a full-width bar instead. */
.lp-nav {
    position: sticky; top: 0; z-index: 50; height: var(--lp-nav-h);
    border-bottom: 1px solid transparent;
    transition: background-color .2s, border-color .2s, padding-top .45s var(--ui-ease);
}
.lp-nav-in {
    display: flex; align-items: center; gap: 28px; height: 100%;
    border: 1px solid transparent; border-radius: 12px;
    transition: width .45s var(--ui-ease), height .45s var(--ui-ease),
                padding .45s var(--ui-ease), background-color .3s, border-color .3s, box-shadow .3s;
}
/* The space above the floating bar (padding here: a margin on the row would collapse). */
.lp-nav.is-scrolled { padding-top: 10px; }
.lp-nav.is-scrolled .lp-nav-in {
    /* The same width as at the top of the page: the box reaches 16px past the row on each side,
       so the logo and the buttons stay exactly where they were. */
    width: min(1232px, 100% - 16px); height: 54px; padding: 0 16px;
    background: var(--lp-nav-bg);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    border-color: var(--ui-line); box-shadow: 0 6px 20px -14px rgba(0, 0, 0, .22);
}
.lp-nav.is-open {
    background: var(--lp-nav-bg);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom-color: var(--ui-line);
}
.lp-nav-links { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.lp-nav-links a, .lp-drop summary {
    padding: 6px 12px; border-radius: 6px;
    font-size: .95rem; color: var(--ui-text-2);
    transition: color .15s, background-color .15s;
}
.lp-nav-links a:hover, .lp-drop summary:hover, .lp-drop[open] summary { color: var(--ui-text); background: var(--lp-hover-soft); }
.lp-nav-links [aria-current="page"] { color: var(--ui-text); }
/* The feature pages under "Monitoring": a <details>, so it opens without scripts. landing.js
   opens it under a mouse and closes it on Escape or a click elsewhere. */
.lp-drop { position: relative; }
.lp-drop summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.lp-drop summary::-webkit-details-marker { display: none; }
.lp-drop summary i { font-size: .6rem; transition: transform .2s var(--ui-ease); }
.lp-drop[open] summary i { transform: rotate(180deg); }
.lp-drop-menu {
    position: absolute; top: calc(100% + 12px); left: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; width: 600px; padding: 8px;
    border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface);
    box-shadow: var(--ui-shadow-lg);
    animation: lp-rise .25s var(--ui-ease) both;
}
/* Fills the gap under "Monitoring", so the pointer never leaves the menu on its way down. */
.lp-drop-menu::before { content: ""; position: absolute; inset: -13px 0 auto; height: 13px; }
.lp-drop-menu a { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 8px; }
.lp-drop-menu span { display: grid; gap: 1px; min-width: 0; }
.lp-drop-menu b { font-size: .95rem; font-weight: 500; color: var(--ui-text); }
.lp-drop-menu em { font-size: .84rem; line-height: 1.4; color: var(--ui-text-3); }
/* A short menu (Tools): one column. */
.lp-drop-menu-one { grid-template-columns: minmax(0, 1fr); width: 340px; }
.lp-drop-menu [aria-current="page"] { background: var(--ui-accent-soft); }
.lp-nav-cta { display: flex; align-items: center; gap: 8px; }
.lp-burger {
    display: none; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid var(--ui-line-strong); border-radius: 8px;
    color: var(--ui-text-2);
}
.lp-nav-links .lp-only-mobile { display: none; }

/* --- Hero ------------------------------------------------------------------ */
/* The landing page's hero fills the first screen under the header: its words in the middle,
   the strip of signals along the bottom. */
.lp-hero {
    position: relative; isolation: isolate; display: flex; flex-direction: column;
    min-height: calc(100vh - var(--lp-nav-h)); min-height: calc(100svh - var(--lp-nav-h));
    text-align: center;
}
/* The hero's two halves: what the product does on the left, the window that plays it on the
   right. Under 1040px they stack, words first. */
.lp-hero-grid {
    /* The slider takes the larger share: it is a whole page of the app, and at the old split
       its tables were too small to read as anything but a texture. */
    display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    align-items: center; gap: clamp(24px, 2.8vw, 44px);
    text-align: left;
}
.lp-hero-copy > * { animation: lp-rise .8s var(--ui-ease) both; }
.lp-hero-copy > :nth-child(2) { animation-delay: .06s; }
.lp-hero-copy > :nth-child(3) { animation-delay: .12s; }
.lp-hero-copy > :nth-child(4) { animation-delay: .18s; }
.lp-hero-copy > :nth-child(5) { animation-delay: .24s; }
.lp-hero-copy > :nth-child(6) { animation-delay: .3s; }
.lp-hero-copy .lp-lead { margin-inline: 0; }
/* What monitoring watches for, two to a row beside the words. */
.lp-points {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px; margin-top: 28px;
}
.lp-points li {
    display: flex; align-items: center; gap: 10px;
    font-size: .975rem; font-weight: 500; color: var(--ui-text-2);
}
.lp-points i {
    display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px;
    background: var(--ui-accent-soft); color: var(--ui-accent-text); font-size: .85rem;
}
.lp-hero-in { margin-block: auto; padding-block: 48px; }
/* The top of every public page: slow lines drifting behind the words (partials/lines.html;
   landing.js draws them on .lp-lines). It reaches up behind the header and fades at its edges. */
.lp-hero-bg {
    position: absolute; inset: -64px 0 0; z-index: -1; pointer-events: none;
    -webkit-mask-image: radial-gradient(72% 72% at 50% 18%, #000 28%, transparent 100%);
    mask-image: radial-gradient(72% 72% at 50% 18%, #000 28%, transparent 100%);
}
.lp-hero-in > * { animation: lp-rise .8s var(--ui-ease) both; }
.lp-hero-in > :nth-child(2) { animation-delay: .08s; }
.lp-hero-in > :nth-child(3) { animation-delay: .16s; }
.lp-hero-in > :nth-child(4) { animation-delay: .24s; }
.lp-lines { display: block; width: 100%; height: 100%; }
.lp-h1 {
    font-size: clamp(2.5rem, 6.4vw, 4.75rem);
    font-weight: 500; line-height: 1.04; letter-spacing: -.035em;
    text-wrap: balance;
}
/* What a new account is given, above the headline: a quiet pill in the accent colour. */
.lp-flag {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 7px 15px 7px 12px;
    border-radius: 999px;
    /* The primary button's own fill, with the ink that reads on it. */
    background: var(--ui-primary); color: var(--ui-primary-ink);
    font-size: .85rem; font-weight: 500;
}
.lp-flag i { font-size: .82rem; }
.lp-flag b { font-weight: 700; }
/* The line under the hero's buttons. */
.lp-hero-note { margin-top: 14px; font-size: .85rem; color: var(--ui-text-3); }

/* The hero's headline, beside the window rather than over the fold: smaller than a page's own,
   and sized to sit on two lines in the half it has. Stacked it has the whole width, so the
   media query below gives it back some size. The three numbers of a clamp are smallest,
   wanted, largest, in that order: a smallest above the largest pins the size at the smallest
   for every screen, a phone's included. */
.lp-h1-hero { font-size: clamp(2rem, 3.7vw, 3.3rem); line-height: 1.08; }
/* The accent line: the display face, in italic. A serif reads smaller than the sans above it,
   so it is set a little larger. */
.lp-h1 span {
    display: block; padding: 0 .08em .1em;
    font-family: var(--ui-display); font-style: italic; font-weight: 400; font-size: 1.14em;
    letter-spacing: -.015em; line-height: 1.02;
}
/* Words in the run of orange: the headline's second line, an error page's number. */
.lp-h1 span, .lp-error-code {
    background: var(--lp-headline);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.lp-lead {
    max-width: 680px; margin: 24px auto 0;
    font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--ui-text-2);
    text-wrap: pretty;
}
.lp-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.lp-hero-copy .lp-hero-cta { justify-content: flex-start; }

/* --- What ReportManager tracks for you ------------------------------------- */
/* What monitoring reads (sections/signals.html): the words over three columns of tags, each
   column a little lower than the one before, across the page's whole width so no tag runs into
   its neighbour's column. A tag is a button whose tooltip says what knowing it is worth; it
   straightens and lifts under the pointer or keyboard focus, and a tap opens it on a touch
   screen (landing.js). Its tilt lets it lean over the one below, as a stack of them would. */
.lp-tags {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(8px, 2vw, 28px);
    max-width: 1080px; margin: 84px auto 0;
}
.lp-tag-col { display: flex; flex-direction: column; align-items: center; margin-top: calc(var(--c) * 34px); }
.lp-tag-col > li { position: relative; margin-top: 4px; }
/* The one under the pointer or focus comes to the front, so its tooltip is never under a neighbour. */
.lp-tag-col > li:is(:hover, :focus-within, .is-open) { z-index: 3; }
/* Each column leans its own way, every other tag the other way, as the stack in a drawer would. */
.lp-tag-col > li:nth-child(odd) { --r: -6deg; }
.lp-tag-col > li:nth-child(even) { --r: 4deg; }
.lp-tag-col:nth-child(2) > li:nth-child(odd) { --r: 5deg; }
.lp-tag-col:nth-child(2) > li:nth-child(even) { --r: -4deg; }
.lp-tag {
    display: inline-flex; align-items: center; gap: .55em;
    padding: .6em 1em .6em .8em; border: 2px solid var(--tag-line); border-radius: 16px;
    background: linear-gradient(180deg, var(--tag-top), var(--tag-bg));
    box-shadow: inset 0 1px 0 var(--tag-shine), 0 12px 24px -14px var(--tag-shadow);
    font-size: clamp(1rem, 1.75vw, 1.5rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.15;
    color: var(--tag-ink); white-space: nowrap; cursor: default;
    transform: rotate(var(--r, 0deg));
    transition: transform .35s var(--ui-ease), box-shadow .35s var(--ui-ease);
}
.lp-tag i { font-size: .92em; }
.lp-tag-col > li:is(:hover, .is-open) .lp-tag,
.lp-tag:focus-visible {
    transform: translateY(-4px) rotate(0deg) scale(1.05);
    box-shadow: inset 0 1px 0 var(--tag-shine), 0 18px 32px -14px var(--tag-shadow);
}
.lp-tag:focus-visible { outline: 3px solid var(--ui-ring); outline-offset: 3px; }
/* They drop in, column by column, as the section comes into view. */
.lp-js .lp-tags .lp-tag { opacity: 0; }
/* `backwards`, not `both`: a fill held after the end would keep the tag's transform pinned,
   and it could no longer straighten under the pointer. */
.lp-js .lp-tags.is-in .lp-tag {
    opacity: 1; animation: lp-tag-in .7s var(--ui-ease) backwards;
    animation-delay: calc(var(--c, 0) * .1s + var(--i, 0) * .08s);
}
/* The tooltip: dark, with the tag's own colour along its top, pointing down at the tag. */
.lp-tip {
    position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 4;
    width: max-content; max-width: 250px; padding: 11px 14px 12px;
    border-top: 3px solid var(--tag-ink); border-radius: 12px;
    background: var(--lp-tip-bg); color: var(--lp-tip-ink);
    box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .45);
    font-size: .86rem; font-weight: 500; line-height: 1.45; text-align: left; white-space: normal;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translate(-50%, 6px);
    transition: opacity .2s ease, transform .2s var(--ui-ease), visibility .2s;
}
.lp-tip::after {
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 7px solid transparent; border-top-color: var(--lp-tip-bg);
}
.lp-tag-col > li:is(:hover, .is-open) > .lp-tip,
.lp-tag:focus-visible + .lp-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* The colours: a pale fill and a deeper ink of one hue, as the tags in the content say. */
.lp-tag-col > li { --tag-shine: rgba(255, 255, 255, .8); }
.lp-tag-col > li:has([data-hue="blue"])   { --tag-bg: #dbeafe; --tag-top: #eff6ff; --tag-line: #bfdbfe; --tag-ink: #2563eb; --tag-shadow: rgba(37, 99, 235, .5); }
.lp-tag-col > li:has([data-hue="lime"])   { --tag-bg: #ecfccb; --tag-top: #f7fee7; --tag-line: #d9f99d; --tag-ink: #4d7c0f; --tag-shadow: rgba(101, 163, 13, .5); }
.lp-tag-col > li:has([data-hue="green"])  { --tag-bg: #d1fae5; --tag-top: #ecfdf5; --tag-line: #a7f3d0; --tag-ink: #047857; --tag-shadow: rgba(5, 150, 105, .5); }
.lp-tag-col > li:has([data-hue="orange"]) { --tag-bg: #ffedd5; --tag-top: #fff7ed; --tag-line: #fed7aa; --tag-ink: #c2410c; --tag-shadow: rgba(234, 88, 12, .5); }
.lp-tag-col > li:has([data-hue="purple"]) { --tag-bg: #ede9fe; --tag-top: #f5f3ff; --tag-line: #ddd6fe; --tag-ink: #6d28d9; --tag-shadow: rgba(124, 58, 237, .5); }
.lp-tag-col > li:has([data-hue="rose"])   { --tag-bg: #ffe4e6; --tag-top: #fff1f2; --tag-line: #fecdd3; --tag-ink: #be123c; --tag-shadow: rgba(225, 29, 72, .45); }
.lp-tag-col > li:has([data-hue="teal"])   { --tag-bg: #ccfbf1; --tag-top: #f0fdfa; --tag-line: #99f6e4; --tag-ink: #0f766e; --tag-shadow: rgba(13, 148, 136, .5); }
/* On dark the fills are the hue seen through glass, and the ink is light. */
[data-theme="dark"] .lp-tag-col > li { --tag-shine: rgba(255, 255, 255, .12); }
[data-theme="dark"] .lp-tag-col > li:has([data-hue="blue"])   { --tag-bg: rgba(59, 130, 246, .16); --tag-top: rgba(59, 130, 246, .26); --tag-line: rgba(96, 165, 250, .4); --tag-ink: #93c5fd; --tag-shadow: rgba(0, 0, 0, .6); }
[data-theme="dark"] .lp-tag-col > li:has([data-hue="lime"])   { --tag-bg: rgba(132, 204, 22, .14); --tag-top: rgba(132, 204, 22, .24); --tag-line: rgba(163, 230, 53, .38); --tag-ink: #bef264; --tag-shadow: rgba(0, 0, 0, .6); }
[data-theme="dark"] .lp-tag-col > li:has([data-hue="green"])  { --tag-bg: rgba(16, 185, 129, .15); --tag-top: rgba(16, 185, 129, .25); --tag-line: rgba(52, 211, 153, .38); --tag-ink: #6ee7b7; --tag-shadow: rgba(0, 0, 0, .6); }
[data-theme="dark"] .lp-tag-col > li:has([data-hue="orange"]) { --tag-bg: rgba(249, 115, 22, .15); --tag-top: rgba(249, 115, 22, .25); --tag-line: rgba(251, 146, 60, .4); --tag-ink: #fdba74; --tag-shadow: rgba(0, 0, 0, .6); }
[data-theme="dark"] .lp-tag-col > li:has([data-hue="purple"]) { --tag-bg: rgba(139, 92, 246, .17); --tag-top: rgba(139, 92, 246, .27); --tag-line: rgba(167, 139, 250, .4); --tag-ink: #c4b5fd; --tag-shadow: rgba(0, 0, 0, .6); }
[data-theme="dark"] .lp-tag-col > li:has([data-hue="rose"])   { --tag-bg: rgba(244, 63, 94, .15); --tag-top: rgba(244, 63, 94, .25); --tag-line: rgba(251, 113, 133, .4); --tag-ink: #fda4af; --tag-shadow: rgba(0, 0, 0, .6); }
[data-theme="dark"] .lp-tag-col > li:has([data-hue="teal"])   { --tag-bg: rgba(20, 184, 166, .15); --tag-top: rgba(20, 184, 166, .25); --tag-line: rgba(45, 212, 191, .4); --tag-ink: #5eead4; --tag-shadow: rgba(0, 0, 0, .6); }
@keyframes lp-tag-in { from { opacity: 0; transform: translateY(22px) rotate(0deg); } }

/* --- The two ways in, on the pricing page ----------------------------------- */
/* What a new account is given and what a top-up buys. The free one leads, so it carries the
   accent border and the flag. */
.lp-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lp-plan {
    position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px;
    border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface);
}
.lp-plan.is-lead { border-color: var(--ui-accent); box-shadow: var(--lp-shadow); }
.lp-plan-flag {
    position: absolute; top: -11px; left: 28px; padding: 3px 12px;
    border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-ink);
    font-size: .72rem; font-weight: 600;
}
.lp-plan-name { display: flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 600; }
.lp-plan-name i { color: var(--ui-accent-text); }
.lp-plan-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.lp-plan-figure b { font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.lp-plan-figure span { font-size: .9rem; color: var(--ui-text-3); }
.lp-plan-lead { font-size: .95rem; color: var(--ui-text-2); }
/* What one of those credits buys. */
.lp-plan-rate {
    display: grid; gap: 6px; padding: 12px 14px;
    border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-inset);
    font-size: .85rem; color: var(--ui-text-2);
}
.lp-plan-rate li { display: flex; align-items: center; gap: 9px; }
.lp-plan-rate i { width: 16px; text-align: center; color: var(--ui-text-3); font-size: .78rem; }
.lp-plan .lp-checks { margin-top: 0; }
.lp-plan-cta { margin-top: auto; width: 100%; }

/* --- Back to the top -------------------------------------------------------- */
/* Hidden until the page has been scrolled a way down (landing.js adds .is-on). It sits clear
   of the footer's theme buttons and, on a phone, of the thumb. */
.lp-top {
    position: fixed; z-index: 40; right: clamp(16px, 2.5vw, 32px); bottom: clamp(16px, 2.5vw, 32px);
    display: grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid var(--ui-line-strong); border-radius: 50%;
    background: var(--ui-surface); color: var(--ui-text-2); font-size: .9rem;
    box-shadow: var(--ui-shadow-md); cursor: pointer;
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .25s var(--ui-ease), transform .25s var(--ui-ease),
                border-color .15s, color .15s;
}
.lp-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.lp-top:hover { border-color: var(--ui-accent); color: var(--ui-accent-text); }
.lp-top:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-ring); }

/* --- Screenshots of the app ------------------------------------------------- */
/* Every picture of the app (partials/shot.html): the page as it looks in use, in a thin frame
   with the site's long shadow. The pictures are of the app's light theme, so the frame stays
   light on a dark page too, the way a screenshot would. */
.lp-shot {
    margin: 0; overflow: hidden;
    border: 1px solid var(--lp-shot-line); border-radius: 14px;
    background: #ffffff; box-shadow: var(--lp-shadow);
}
.lp-shot img { display: block; width: 100%; height: auto; }
/* The hero: a slider through the pages a seller works in, with the site's glow underneath.
   The frame keeps the room a picture needs before it loads, so the hero never jumps. */
.lp-hero-shots {
    position: relative; isolation: isolate;
    animation: lp-rise .8s var(--ui-ease) .12s both;
}
.lp-hero-shots::before {
    content: ""; position: absolute; inset: 10% 6% 4% 6%; z-index: -1; pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%, var(--lp-glow), transparent 70%);
    filter: blur(28px);
}
/* The pictures' own ratio (1600 x 1000), so the box is their size from the first paint. */
.lp-hero-frames { position: relative; aspect-ratio: 1.6; }
.lp-hero-frame { position: absolute; inset: 0; }
.lp-hero-shot { height: 100%; }
.lp-hero-shot img { height: 100%; object-fit: cover; object-position: top center; }
/* Without scripts the frames stack and the first is on top; with them one is shown at a time.
   Either way the lead frame is opaque, so nothing is left hidden if the scripts never run. */
.lp-hero-frame { opacity: 0; }
.lp-hero-frame.is-on { opacity: 1; }
.lp-js .lp-hero-frame { transition: opacity .6s var(--ui-ease); }
.lp-js .lp-hero-frame:not(.is-on) { pointer-events: none; }
/* Which page is showing, and a pip per picture. */
.lp-hero-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.lp-hero-caption { font-size: .85rem; font-weight: 500; color: var(--ui-text-2); }
.lp-hero-pips { display: flex; align-items: center; gap: 7px; }
.lp-hero-pip {
    width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px;
    background: var(--ui-line-strong); cursor: pointer;
    transition: width .3s var(--ui-ease), background-color .3s;
}
.lp-hero-pip.is-on { width: 22px; background: var(--ui-accent); }
.lp-hero-pip:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
/* A feature page: the page itself, full width under the hero's words. */
.lp-feature-shot { position: relative; isolation: isolate; max-width: 1100px; margin-top: 56px; }
.lp-feature-shot::before {
    content: ""; position: absolute; inset: 6% 6% -4%; z-index: -1; pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%, var(--lp-glow), transparent 70%);
    filter: blur(28px);
}

/* A sister page's hero: as tall as its words, with the page's simulation under them. */
.lp-hero-page { display: block; min-height: 0; padding: 64px 0 24px; }
.lp-hero-page .lp-hero-in { padding-block: 0; }
/* A hero with nothing under its buttons (the enquiry page): room for the lines to show. */
.lp-hero-short { padding-bottom: 72px; }
.lp-h1-page { font-size: clamp(2rem, 4.8vw, 3.5rem); line-height: 1.08; }
/* The simulation at the top of a page: the drawn app window, playing while it is on screen
   and starting again every few seconds (landing.js, [data-sim]). */
.lp-sim { position: relative; isolation: isolate; max-width: 1040px; margin: 56px auto 0; text-align: left; }
.lp-js .lp-sim:not(.is-playing) .lp-window * { animation-play-state: paused !important; }

/* --- Sections -------------------------------------------------------------- */
.lp-section { padding: 72px 0; }
/* The top of a page without a hero (enquiry, legal): the hero's lines, no taller than a screen. */
.lp-page-top { position: relative; isolation: isolate; padding-top: 56px; }
.lp-page-top .lp-hero-bg { bottom: auto; height: 640px; }
.lp-head { margin-bottom: 48px; }
.lp-head-center { text-align: center; }
.lp-head-center .lp-sub { margin-inline: auto; }
/* A section's small title over its heading: the page's own font, in the accent. */
.lp-eyebrow {
    font-size: 1.15rem; font-weight: 600; line-height: 1.2;
    color: var(--ui-accent-text);
}
.lp-h2 {
    margin-top: 14px;
    font-size: clamp(1.75rem, 3.6vw, 2.6rem);
    font-weight: 500; line-height: 1.14; letter-spacing: -.025em;
    text-wrap: balance;
}
.lp-sub { max-width: 640px; margin-top: 16px; font-size: 1.1rem; color: var(--ui-text-2); text-wrap: pretty; }

/* Shown as it scrolls into view (landing.js adds is-in). --i staggers a row of cards.
   Only hidden while scripts run (html.lp-js), so the page reads without them. */
[data-reveal] {
    transition: opacity .7s var(--ui-ease), transform .7s var(--ui-ease);
    transition-delay: calc(var(--i, 0) * 80ms);
}
.lp-js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }

/* --- Product Monitoring: one kind at a time ------------------------------- */
/* Each kind is a slide (sections/monitoring.html): its screenshot on the left, what it does on
   the right. It is the dashboard tour's control, so the tabs, the fill that moves it on and the
   stage are the tour's own rules (below); this is the slide itself and its three buttons. */
.lp-mon-tabs { flex-wrap: wrap; }
.lp-mon-controls { display: flex; gap: 8px; }
/* Two classes, to win over the tour's .lp-panel grid (words first, 320px), which comes later. */
.lp-panel.lp-mon-slide { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(28px, 4vw, 56px); }
/* No glow behind this stage: the words sit on the page's own ground (the rule below
   draws it for every other stage). It used to be moved to the left, under the screenshot,
   but that override lost to the later .lp-stage::before of equal weight and the orange
   stayed behind the words. */
.lp-mon-copy h3 {
    display: flex; align-items: center; gap: 12px; margin-top: 10px;
    font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 500; line-height: 1.2; letter-spacing: -.02em;
}
.lp-mon-copy h3 i {
    display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px;
    background: var(--ui-accent-soft); color: var(--ui-accent-text); font-size: .95rem;
}
.lp-mon-copy p { margin-top: 12px; font-size: .98rem; line-height: 1.6; color: var(--ui-text-2); text-wrap: pretty; }
.lp-mon-copy .lp-mon-lead { margin-top: 16px; font-size: 1.08rem; font-weight: 500; color: var(--ui-text); }
.lp-mon-copy .lp-btn { margin-top: 28px; }
/* Where this slide is in the run: 03 / 07. */
.lp-mon-count { font-size: .8rem; font-weight: 600; letter-spacing: .08em; color: var(--ui-text-3); }
.lp-mon-count span { color: var(--ui-accent-text); }
/* The screenshot comes in from the side as its slide opens. */
.lp-js [data-autotabs] .lp-panel:not([hidden]) .lp-shot { animation: lp-shot-in .6s var(--ui-ease) both; }
@keyframes lp-shot-in { from { opacity: 0; transform: translateX(-26px) scale(.985); } }

/* --- Cards (Advertising tools, the docs) ------------------------------------ */
.lp-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lp-card {
    position: relative; display: flex; flex-direction: column; min-height: 400px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg);
    overflow: hidden;
    transition: opacity .7s var(--ui-ease) calc(var(--i, 0) * 80ms), transform .7s var(--ui-ease) calc(var(--i, 0) * 80ms),
                border-color .25s, background-color .25s, box-shadow .25s;
}
/* A line of the accent along the top edge on hover. Two pixels, not one: at a browser zoom
   that is not a whole number a 1px line can fall between device pixels and vanish on some
   cards while showing on others. */
.lp-card::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 153, 0, .9), transparent);
    opacity: 0; transition: opacity .3s;
}
.lp-card:hover { border-color: var(--ui-line-strong); background: var(--lp-card-hover); box-shadow: var(--lp-card-shadow); }
.lp-card:hover::before { opacity: 1; }
.lp-tool { min-height: 0; }
/* Both tools' drawings are as tall as the taller one, their files centred in it. */
.lp-tool .lp-art { display: flex; flex: 1; }
.lp-tool .lp-flow { flex: 1; }
.lp-card-body { padding: 24px 24px 0; }
.lp-card-title { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 500; }
.lp-card-title i, .lp-feature > i, .lp-drop-menu a > i {
    display: grid; place-items: center; flex: none;
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--ui-accent-soft); color: var(--ui-accent-text); font-size: .8rem;
}
.lp-card-text { margin-top: 12px; font-size: .98rem; line-height: 1.55; color: var(--ui-text-3); }
.lp-card-text strong { font-weight: 500; color: var(--ui-text); }
.lp-art { margin-top: auto; padding: 24px; font-variant-numeric: tabular-nums; }
/* A card's drawing waits for the card to scroll into view. */
.lp-js .lp-card:not(.is-in) .lp-art * { animation-play-state: paused !important; }
/* A card that is one link: its title's link covers the whole card. */
.lp-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.lp-stretch:focus-visible { outline: none; }
.lp-stretch:focus-visible::after { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.lp-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: .92rem; font-weight: 500; color: var(--ui-accent-text); }
.lp-more i { font-size: .75em; transition: transform .2s var(--ui-ease); }
:is(.lp-card, .lp-feature):hover .lp-more i { transform: translateX(3px); }
/* A link inside a sentence. */
.lp-link, .lp-prose a { color: var(--ui-accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* Pieces shared by the drawings. */
.lp-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px; border: 1px solid transparent; border-radius: 999px;
    background: var(--lp-hover-soft);
    background: color-mix(in srgb, var(--tone, #888) 15%, transparent);
    color: var(--tone, var(--ui-text-2));
    font-size: .68rem; font-weight: 500; line-height: 1.5; white-space: nowrap;
}
.lp-chip[data-tone="plain"] { background: none; border-color: var(--ui-line-strong); }
.lp-chip-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: lp-blink 1.4s ease-in-out infinite; }
/* A demo row's product picture (partials/thumb.html). */
.lp-thumb {
    flex: none; width: 28px; height: 28px; border-radius: 6px; overflow: hidden;
    border: 1px solid var(--lp-thumb-line); background: var(--lp-thumb);
}
.lp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-bar { display: block; height: 8px; border-radius: 99px; background: var(--lp-track); overflow: hidden; }
.lp-bar i {
    display: block; width: var(--w, 100%); height: 100%; border-radius: inherit;
    background: var(--ui-accent); transform-origin: left;
    animation: lp-grow-x 1.1s var(--ui-ease) both;
    animation-delay: calc(var(--i, 0) * 120ms + 300ms);
}
.lp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: .7rem; }
.lp-legend li { display: flex; align-items: center; gap: 6px; color: var(--ui-text-3); }
.lp-legend li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }
/* Two values in one place, the first giving way to the second once (a new reading). */
.lp-swap { display: grid; justify-items: start; }
.lp-swap > * { grid-area: 1 / 1; }
.lp-swap > :first-child { opacity: 0; animation: lp-swap-old 4s both; }
.lp-swap > :last-child { animation: lp-swap-new 4s both; }

/* A job's name and what it is working on (the tools page's queue). */
.lp-job-main { display: grid; min-width: 0; }
.lp-job-main em {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .68rem; color: var(--ui-text-3);
}

/* India as a grid of dots (the docs' Pincode Analysis guide), each coloured by delivery days (content.SAMPLE_MAP,
   made by build_map.py from the app's boundary file; never drawn by hand). A wave of light
   crosses it from the north-west: --d is a dot's column plus its row. */
.lp-map { display: block; width: 100%; max-width: 205px; height: auto; margin-inline: auto; }
.lp-map circle {
    fill: var(--tone);
    animation: lp-twinkle 4.5s ease-in-out infinite;
    animation-delay: calc(var(--d) * 80ms);
}

/* A figure and its trend (partials/spark.html). */
.lp-spark-svg { width: 100%; height: 72px; margin-top: 10px; animation: lp-wipe 1.8s ease-out both .2s; }
.lp-spark-line { fill: none; stroke: var(--ui-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lp-spark-area { fill: url(#lp-spark-fill); }
.lp-spark-foot { display: flex; gap: 14px; margin-top: 10px; font-size: .7rem; }

/* A share and how it splits (the docs' drawings). */
.lp-share-top { display: flex; align-items: baseline; gap: 10px; }
.lp-share-top b { font-size: 1.9rem; font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.lp-share-top span { font-size: .74rem; color: var(--ui-text-3); }
.lp-share-bar { display: flex; gap: 3px; height: 10px; margin-top: 14px; transform-origin: left; animation: lp-grow-x 1.2s var(--ui-ease) both .3s; }
.lp-share-bar i { border-radius: 3px; background: var(--tone); }
.lp-share-bar i:nth-child(1) { flex: 58; }
.lp-share-bar i:nth-child(2) { flex: 24; }
.lp-share-bar i:nth-child(3) { flex: 18; }

/* Advertising tools: input files, the tool, output files. */
.lp-flow {
    display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: center;
    padding: 18px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-inset);
}
.lp-flow-col { display: grid; gap: 8px; }
.lp-flow-col li {
    display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 10px;
    border: 1px solid var(--lp-raised-line); border-radius: 7px; background: var(--lp-raised);
    font: 500 .68rem var(--ui-mono); color: var(--ui-text-2);
}
.lp-flow-col li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-flow-col li i { color: var(--ui-good); }
.lp-flow-out li { border-color: rgba(255, 153, 0, .35); color: var(--ui-text); }
.lp-flow-mid { display: flex; align-items: center; }
.lp-flow-line {
    flex: 1; height: 2px; opacity: .75;
    background: linear-gradient(90deg, var(--ui-accent) 50%, transparent 50%) 0 0 / 12px 2px repeat-x;
    animation: lp-dash-x .7s linear infinite;
}
.lp-flow-core {
    display: grid; place-items: center; flex: none; width: 40px; height: 40px;
    border: 1px solid rgba(255, 153, 0, .5); border-radius: 10px;
    background: var(--ui-accent-soft); color: var(--ui-accent-text);
    animation: lp-glow 2.4s ease-in-out infinite;
}

/* --- Platform -------------------------------------------------------------- */
.lp-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* A card, and the plain box a list sits in. */
.lp-feature, .lp-box {
    position: relative; padding: 24px; background: var(--ui-surface);
    border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg);
}
.lp-box .lp-checks { margin-top: 0; }
.lp-feature {
    transition: opacity .7s var(--ui-ease) calc(var(--i, 0) * 80ms), transform .7s var(--ui-ease) calc(var(--i, 0) * 80ms),
                border-color .25s, background-color .25s, box-shadow .25s;
}
.lp-feature:hover { border-color: var(--ui-line-strong); background: var(--lp-card-hover); box-shadow: var(--lp-card-shadow); }
.lp-feature > i { width: 36px; height: 36px; font-size: .9rem; }
.lp-feature h3 { margin-top: 18px; font-size: 1.1rem; font-weight: 500; }
.lp-feature p { margin-top: 8px; font-size: .98rem; line-height: 1.55; color: var(--ui-text-3); }

/* --- Dashboard tour, and Product Monitoring's slides ([data-autotabs]) ------- */
.lp-tabs { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 44px; }
.lp-tablist { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lp-tab {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 16px; overflow: hidden;
    border: 1px solid var(--ui-line); border-radius: 999px;
    font-size: .875rem; font-weight: 500; color: var(--ui-text-3);
    transition: color .2s, border-color .2s, background-color .2s;
}
.lp-tab:hover { color: var(--ui-text); border-color: var(--ui-line-strong); }
.lp-tab[aria-selected="true"] { color: var(--ui-text); border-color: rgba(255, 153, 0, .5); background: var(--ui-surface-2); }
.lp-tab[aria-selected="true"] i { color: var(--ui-accent-text); }
.lp-tab > * { position: relative; }
/* The selected tab fills from the left; when the fill ends landing.js opens the next tab.
   A neutral wash, not the orange: the tab already says it is selected with its accent border
   and icon, and a second orange sweeping across it read as something going wrong. The fill
   itself stays — it is the timer the tour runs on, and the reader's warning of the change. */
.lp-tab-fill { position: absolute; inset: 0; background: var(--lp-hover-soft); transform: scaleX(0); transform-origin: left; }
.lp-js .lp-tab[aria-selected="true"] .lp-tab-fill { animation: lp-fill 7s linear both; }
.lp-tour-toggle {
    display: none; place-items: center; flex: none; width: 38px; height: 38px;
    border: 1px solid var(--ui-line); border-radius: 50%;
    font-size: .7rem; color: var(--ui-text-3);
    transition: color .2s, border-color .2s;
}
.lp-js .lp-tour-toggle { display: grid; }
.lp-tour-toggle:hover { color: var(--ui-text); border-color: var(--ui-line-strong); }

/* Every panel sits in the same grid cell, so the stage is as tall as the tallest and the page
   below never moves when the tab changes. Without scripts only the first panel is in the page. */
.lp-stage { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); }
/* A glow behind the drawn window. Not on Product Monitoring, whose stage holds a screenshot
   and words rather than a drawing: the orange read as a panel behind the words. */
.lp-stage:not(.lp-mon-stage)::before, .lp-sim::before {
    content: ""; position: absolute; inset: 8% 2% -8% 32%; z-index: -1; pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%, var(--lp-glow), transparent 70%);
    filter: blur(24px);
}
.lp-sim::before { inset: 6% 6% -4%; }
.lp-panel {
    grid-area: 1 / 1;
    display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: center; gap: 48px;
    animation: lp-panel-in .5s ease both;
}
.lp-panel[hidden] { display: none; }
.lp-js .lp-panel[hidden] { display: grid; visibility: hidden; pointer-events: none; }
/* Nothing moves in a panel that is not showing, nor before the tour is on screen, nor while held.
   !important because each animation shorthand sets its own play state. */
.lp-panel[hidden] *,
.lp-js [data-autotabs]:not(.is-playing) .lp-panel *,
.lp-js [data-autotabs]:not(.is-playing) .lp-tab-fill,
[data-autotabs].is-held .lp-tab-fill { animation-play-state: paused !important; }
.lp-panel-copy h3 { font-size: 1.5rem; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.lp-panel-copy p { margin-top: 12px; font-size: .95rem; color: var(--ui-text-2); }
.lp-checks { display: grid; gap: 12px; margin-top: 22px; font-size: 1rem; line-height: 1.5; color: var(--ui-text-2); }
/* The tour's screenshot sits where its drawn window did, beside the words. */
.lp-tour-shot { align-self: center; }
.lp-checks li { display: flex; align-items: flex-start; gap: 10px; }
.lp-checks i { margin-top: .32em; font-size: .72rem; color: var(--ui-accent-text); }

/* The drawn app window: a title bar, the app's sidebar and one screen. */
.lp-window {
    border: 1px solid var(--ui-line-strong); border-radius: 12px; background: var(--lp-window-bg); overflow: hidden;
    box-shadow: var(--lp-shadow);
    font-variant-numeric: tabular-nums;
}
.lp-window-bar { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border-bottom: 1px solid var(--ui-line); background: var(--lp-head-bg); }
.lp-window-dots { display: flex; gap: 6px; }
.lp-window-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--lp-window-dot); }
.lp-window-url {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    flex: 1; max-width: 340px; height: 22px; margin-inline: auto; padding: 0 10px; overflow: hidden;
    border: 1px solid var(--ui-line); border-radius: 6px; background: var(--lp-window-bg);
    font: 500 .66rem var(--ui-mono); color: var(--ui-text-3); white-space: nowrap;
}
.lp-window-url i { font-size: .55rem; }
.lp-window-body { display: grid; grid-template-columns: 44px minmax(0, 1fr); height: 420px; }
/* The app's own sidebar (the --ui-side-* tokens): dark in the app itself, so in both themes. */
.lp-app-side { display: flex; flex-direction: column; padding: 10px 0; background: var(--ui-side-bg); border-right: 1px solid var(--ui-side-line); }
.lp-app-side i { display: grid; place-items: center; height: 36px; border-left: 3px solid transparent; font-size: .78rem; color: var(--ui-side-muted); }
.lp-app-side i.is-on { border-left-color: var(--ui-accent); background: var(--ui-side-active); color: var(--ui-side-text-strong); }
.lp-app-main { position: relative; padding: 14px; overflow: hidden; background: var(--lp-app-bg); }
/* The screen keeps a readable width; on a narrow window its right edge is cropped, like a screenshot. */
.lp-app-canvas { min-width: 520px; }
.lp-app-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lp-app-bar b { font-size: .85rem; font-weight: 600; }
.lp-app-btns { display: flex; gap: 6px; }
.lp-app-btns span {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
    border: 1px solid var(--lp-raised-line); border-radius: 6px; background: var(--lp-raised);
    font-size: .66rem; color: var(--ui-text-2); white-space: nowrap;
}
.lp-app-btns .is-on { border-color: rgba(255, 153, 0, .5); background: var(--ui-accent-soft); color: var(--ui-accent-text); }

/* A row that gets a new reading is lit up as the value changes. */
.lp-toast {
    position: absolute; right: 14px; bottom: 14px;
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    border: 1px solid var(--lp-toast-line); border-radius: 8px; background: var(--lp-toast-bg); color: var(--lp-toast-text);
    font-size: .72rem; box-shadow: var(--lp-toast-shadow);
    animation: lp-toast 4s both;
}

/* A queue of jobs (the tools page). */
.lp-jobs { display: grid; gap: 8px; }
.lp-job {
    display: grid; grid-template-columns: minmax(0, 1.7fr) 92px 78px minmax(0, 1.3fr); align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--lp-raised-line); border-radius: 8px; background: var(--lp-raised); font-size: .72rem;
    animation: lp-rise .5s var(--ui-ease) both;
    animation-delay: calc(var(--i) * 90ms + 100ms);
}
.lp-job-main b { font-size: .76rem; font-weight: 500; }
.lp-job-note small { display: block; font-size: .64rem; color: var(--ui-text-3); }
.lp-meter { display: block; height: 6px; margin-bottom: 5px; border-radius: 99px; background: var(--lp-track); overflow: hidden; }
.lp-meter i {
    display: block; width: 86%; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, var(--ui-accent), #ffc266); transform-origin: left;
    animation: lp-meter 5s cubic-bezier(.3, .6, .3, 1) both .6s;
}

/* A chart in a drawn screen (the docs). */
.lp-chart { border: 1px solid var(--lp-raised-line); border-radius: 8px; background: var(--lp-raised); }
.lp-chart { padding: 12px; }
.lp-chart-title { display: block; font-size: .7rem; font-weight: 500; color: var(--ui-text-2); }

/* --- Simulated screens (templates/landing_page/sim/: the tools page, pricing) -- */
.lp-window s { color: var(--ui-text-3); }
/* A button being pressed. */
.lp-credit-go { animation: lp-press .5s ease 1.9s both; }

/* A trend inside a chart. */
.lp-chart .lp-spark-svg { height: 150px; }

/* Pricing: the confirmation a job shows before it starts, beside the workspace's balance.
   The button is pressed, the job is charged and the balance falls. */
.lp-credit { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 8px; }
.lp-credit-job { display: block; margin-top: 2px; font-size: .66rem; color: var(--ui-text-3); }
.lp-cost { display: grid; margin-top: 8px; font-size: .72rem; }
.lp-cost > div, .lp-wallet-rows > div {
    display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
    border-top: 1px solid var(--lp-line-soft); color: var(--ui-text-2);
}
.lp-cost > div { animation: lp-rise .45s var(--ui-ease) both; animation-delay: calc(var(--i) * 130ms + 200ms); }
.lp-cost b, .lp-wallet-rows b { font-weight: 500; color: var(--ui-text); }
.lp-cost .is-total { font-weight: 500; color: var(--ui-text); }
.lp-cost .is-total b { color: var(--ui-accent-text); }
.lp-credit-foot { justify-content: flex-end; margin-top: 10px; }
.lp-wallet-figure { margin-top: 8px; font-size: 1.5rem; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.lp-wallet small { display: block; margin-bottom: 8px; font-size: .64rem; color: var(--ui-text-3); }
.lp-wallet-rows { margin-top: 12px; font-size: .7rem; }
.lp-wallet-new { animation: lp-swap-new 4s both; }

/* --- Notifications --------------------------------------------------------- */
/* Words on one side, a drawing on the other. */
.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; }
.lp-split .lp-head { margin-bottom: 0; }
.lp-split-top { align-items: start; }
/* The messages arrive one after another, newest first, once the section is on screen. */
.lp-notes { display: grid; gap: 12px; }
.lp-note {
    display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px;
    border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface);
    box-shadow: var(--lp-card-shadow);
    animation: lp-rise .7s var(--ui-ease) both;
    animation-delay: calc(var(--i) * 260ms + 200ms);
}
.lp-js .lp-notes:not(.is-in) .lp-note { animation-play-state: paused; }
.lp-note-icon {
    display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px;
    background: var(--ui-accent-soft); color: var(--ui-accent-text);
}
.lp-note[data-channel="whatsapp"] .lp-note-icon {
    background: color-mix(in srgb, var(--ui-good) 14%, transparent); color: var(--ui-good); font-size: 1.15rem;
}
.lp-note-body { flex: 1; min-width: 0; }
.lp-note-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lp-note-head b { font-size: .95rem; font-weight: 500; }
.lp-note-head span { font-size: .75rem; color: var(--ui-text-3); white-space: nowrap; }
.lp-note p { margin-top: 2px; font-size: .875rem; line-height: 1.5; color: var(--ui-text-2); }

/* Two cards to a row (the pricing page's two kinds of request). */
.lp-courses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* --- How it works ---------------------------------------------------------- */
/* Three steps on one line. The line is dashes that keep moving towards the last step, a dot
   travels along it, and each step's number lights as the dot reaches it (--i staggers them).
   It all waits until the steps scroll into view. */
.lp-steps {
    --step: 52px; --cols: 3;      /* --cols: how many steps are on the line (three unless set) */
    --edge: calc(100% / (2 * var(--cols)));      /* the middle of the first step's column */
    position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 16px;
}
.lp-steps::before, .lp-steps::after { content: ""; position: absolute; left: var(--edge); pointer-events: none; }
.lp-steps::before {
    top: calc(var(--step) / 2 - 1px); right: var(--edge); height: 2px;
    background: linear-gradient(90deg, var(--ui-accent) 50%, transparent 50%) 0 0 / 12px 2px repeat-x;
    opacity: .55; animation: lp-dash-x .7s linear infinite;
}
.lp-steps::after {
    top: calc(var(--step) / 2 - 5px); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
    background: var(--ui-accent); box-shadow: 0 0 0 5px rgba(255, 153, 0, .18), 0 0 18px rgba(255, 153, 0, .7);
    opacity: 0; animation: lp-travel 6s linear infinite;
}
.lp-step { position: relative; display: grid; align-content: start; justify-items: center; padding: 0 12px; text-align: center; }
.lp-step-n {
    position: relative; z-index: 1; display: grid; place-items: center;
    width: var(--step); height: var(--step); border-radius: 50%;
    border: 2px solid var(--ui-accent); background: var(--ui-bg);
    font: 600 1.15rem/1 var(--ui-mono); color: var(--ui-accent-text);
    animation: lp-step-lit 6s linear infinite; animation-delay: calc(var(--i, 0) * 4.8s / (var(--cols) - 1));
}
.lp-step-n i { font-size: 1rem; }
.lp-step h3 { margin-top: 22px; font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; }
.lp-step p { max-width: 320px; margin-top: 10px; font-size: 1rem; line-height: 1.55; color: var(--ui-text-3); }
.lp-js .lp-steps:not(.is-in)::before, .lp-js .lp-steps:not(.is-in)::after,
.lp-js .lp-steps:not(.is-in) .lp-step-n { animation-play-state: paused; }

/* --- Tools page (/ad-tools/) -------------------------------------------------- */
/* A card whose icon keeps a slow pulse, one card after another (--i). */
.lp-feature-live > i { animation: lp-glow 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .8s); }
.lp-js .lp-feature-live:not(.is-in) > i { animation-play-state: paused; }
/* The drawn queue: the running job's bar fills to the end as it finishes. */
.lp-meter-full i { width: 100%; animation: lp-grow-x 2.2s linear both .4s; }

/* --- Training page (/training/) --------------------------------------------- */
.lp-classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lp-class {
    padding: 28px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface);
    transition: opacity .7s var(--ui-ease) calc(var(--i, 0) * 80ms), transform .7s var(--ui-ease) calc(var(--i, 0) * 80ms),
                border-color .25s, box-shadow .25s;
}
.lp-class:hover { border-color: var(--ui-line-strong); box-shadow: var(--lp-card-shadow); }
.lp-class-head { display: flex; align-items: center; gap: 14px; }
.lp-class-head i {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
    background: var(--ui-accent-soft); color: var(--ui-accent-text); font-size: 1.1rem;
}
.lp-class-head h3 { font-size: 1.35rem; font-weight: 500; letter-spacing: -.015em; }
.lp-class > p { margin-top: 14px; font-size: 1rem; line-height: 1.6; color: var(--ui-text-2); }
/* What a class covers: a line down the left, its points lit one after another (--n). */
.lp-path { position: relative; display: grid; gap: 14px; margin-top: 22px; padding-left: 28px; }
.lp-path::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--lp-track); }
.lp-path li { position: relative; font-size: 1rem; font-weight: 500; color: var(--ui-text-2); }
.lp-path li::before {
    content: ""; position: absolute; left: -28px; top: .32em; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--ui-accent); background: var(--ui-surface);
    animation: lp-path-lit 7s linear infinite; animation-delay: calc(var(--n, 0) * 1.4s);
}
.lp-js .lp-class:not(.is-in) .lp-path li::before { animation-play-state: paused; }

/* --- Enquiry ---------------------------------------------------------------- */
/* The fields are base.css's .lp-field. */
.lp-form, .lp-form fieldset { display: grid; gap: 18px; }
.lp-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.lp-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lp-form .lp-btn { justify-self: start; }

/* --- Legal pages ------------------------------------------------------------- */
/* The list of legal pages stays in view beside the page being read. */
.lp-legal { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: start; gap: 56px; }
.lp-legal-nav { position: sticky; top: calc(var(--lp-nav-h) + 32px); display: grid; gap: 2px; }
.lp-legal-nav a { padding: 8px 12px; border-radius: 8px; font-size: .9rem; color: var(--ui-text-3); transition: color .15s, background-color .15s; }
.lp-legal-nav a:hover { color: var(--ui-text); background: var(--lp-hover-soft); }
.lp-legal-nav [aria-current="page"] { background: var(--ui-accent-soft); color: var(--ui-accent-text); font-weight: 500; }
/* The sections are numbered here, so the words in legal.py stay plain. */
.lp-prose { max-width: 720px; counter-reset: lp-section; }
.lp-updated { margin-top: 12px; font: 500 .75rem/1 var(--ui-mono); letter-spacing: .04em; color: var(--ui-text-3); }
.lp-prose h2 { margin-top: 40px; font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em; counter-increment: lp-section; }
.lp-prose h2::before { content: counter(lp-section) ". "; color: var(--ui-text-3); }
.lp-prose h2 ~ p, .lp-prose ul { margin-top: 12px; color: var(--ui-text-2); }
.lp-prose ul { display: grid; gap: 8px; padding-left: 1.2rem; list-style: disc; }

/* --- Error pages (templates/errors/): the hero, with the error in it ----------- */
.lp-error-code { font-size: clamp(4.5rem, 16vw, 9rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.lp-error .lp-h1 { margin-top: 12px; }
.lp-error-foot { padding-bottom: 28px; font-size: .8rem; color: var(--ui-text-3); }

/* --- Closing call to action and footer ------------------------------------- */
/* A panel in the theme's own colours (light on light, dark on dark): the way in on the left,
   the three steps of a first run on the right, lit in turn, over slow contour lines
   (.lp-topo, drawn by landing.js). .lp-cta-center is the same panel with its words alone. */
.lp-cta {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 56px;
    padding: 56px; border: 1px solid var(--ui-line); border-radius: 20px;
    background: var(--ui-surface); color: var(--ui-text);
}
.lp-topo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.lp-cta-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 30px; }
.lp-cta-link { font-size: .95rem; color: var(--ui-text-2); text-decoration: underline; text-underline-offset: 4px; transition: color .15s; }
.lp-cta-link:hover { color: var(--ui-text); }
/* The landing page's panel: its words on the left, the way in on the right. */
.lp-cta-side { grid-template-columns: minmax(0, 1fr) auto; }
.lp-cta-side .lp-cta-btns { margin-top: 0; justify-content: flex-end; }
.lp-cta-center { grid-template-columns: minmax(0, 1fr); padding: 64px 24px; text-align: center; }
.lp-cta-center .lp-h2 { margin-top: 0; }
.lp-cta-center .lp-sub { margin-inline: auto; }
.lp-cta-center .lp-cta-btns { justify-content: center; }

.lp-footer { margin-top: 72px; padding: 56px 0 32px; border-top: 1px solid var(--ui-line); font-size: .98rem; color: var(--ui-text-3); }
.lp-footer-grid { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.lp-footer .lp-logo { color: var(--ui-text); }
.lp-footer-note { max-width: 300px; margin-top: 14px; }
.lp-footer-title { margin-bottom: 16px; font-size: 1.1rem; font-weight: 600; line-height: 1.2; color: var(--ui-text); }
.lp-footer ul { display: grid; gap: 9px; }
.lp-footer a { transition: color .15s; }
.lp-footer a:hover { color: var(--ui-text); }
.lp-footer-base {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
    margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ui-line); font-size: .875rem;
}
.lp-footer-legal { display: grid; gap: 4px; }
/* Light or dark, chosen here and kept in this browser (landing.js). It needs scripts, so it is
   only shown when they run. */
.lp-theme { display: none; padding: 3px; border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-surface); }
.lp-js .lp-theme { display: inline-flex; }
.lp-theme button {
    display: grid; place-items: center; width: 32px; height: 30px;
    border-radius: 999px; font-size: .8rem; color: var(--ui-text-3);
    transition: color .15s, background-color .15s;
}
.lp-theme button:hover { color: var(--ui-text); }
.lp-theme button[aria-pressed="true"] { background: var(--ui-hover); color: var(--ui-text); box-shadow: inset 0 0 0 1px var(--ui-line-strong); }

/* --- Keyframes: each says where a thing comes from, never where it rests ---- */
@keyframes lp-panel-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes lp-grow-x { from { transform: scaleX(0); } }
@keyframes lp-grow-y { from { transform: scaleY(0); } }
@keyframes lp-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lp-fill { to { transform: scaleX(1); } }
@keyframes lp-spin { to { transform: rotate(360deg); } }
@keyframes lp-blink { 50% { opacity: .35; } }
@keyframes lp-glow { 50% { box-shadow: 0 0 0 6px rgba(255, 153, 0, .08), 0 0 24px rgba(255, 153, 0, .25); } }
@keyframes lp-dash-x { to { background-position: 12px 0; } }
@keyframes lp-dash-y { to { background-position: 0 12px; } }
@keyframes lp-twinkle { 0%, 70%, 100% { opacity: .5; } 10%, 40% { opacity: 1; } }
@keyframes lp-type { 0% { width: 0; } 28%, 100% { width: 22ch; } }
@keyframes lp-answer { 0%, 30% { opacity: 0; transform: translateY(6px); } 38%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lp-flip-a { 0%, 42% { opacity: 1; transform: none; } 50%, 92% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: none; } }
@keyframes lp-flip-b { 0%, 42% { opacity: 0; transform: translateY(4px); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(4px); } }
@keyframes lp-swap-old { 0%, 55% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes lp-swap-new { 0%, 55% { opacity: 0; transform: translateY(4px); } 62%, 100% { opacity: 1; transform: none; } }
@keyframes lp-flash { 0%, 54% { background-color: transparent; } 62% { background-color: rgba(255, 153, 0, .16); } 100% { background-color: transparent; } }
@keyframes lp-toast { 0%, 66% { opacity: 0; transform: translateY(10px); } 74%, 100% { opacity: 1; transform: none; } }
@keyframes lp-meter { from { transform: scaleX(.18); } }
@keyframes lp-typed { from { width: 0; } }
@keyframes lp-travel { 0% { left: var(--edge); opacity: 0; } 5%, 95% { opacity: 1; } 100% { left: calc(100% - var(--edge)); opacity: 0; } }
@keyframes lp-step-lit { 0%, 26%, 100% { background: var(--ui-bg); color: var(--ui-accent-text); box-shadow: 0 0 0 0 rgba(255, 153, 0, 0); } 4%, 14% { background: var(--ui-accent); color: var(--ui-accent-ink); box-shadow: 0 0 0 9px rgba(255, 153, 0, .16); } }
@keyframes lp-path-lit { 0%, 24%, 100% { background: var(--ui-surface); box-shadow: 0 0 0 0 rgba(255, 153, 0, 0); } 5%, 16% { background: var(--ui-accent); box-shadow: 0 0 0 6px rgba(255, 153, 0, .18); } }
@keyframes lp-press { 50% { transform: scale(.93); filter: brightness(.9); } }

/* --- Narrower screens ------------------------------------------------------ */
@media (max-width: 1080px) {
    /* The brand across the top, the five lists of links in a row under it. */
    .lp-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lp-footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 1040px) {
    /* One column: the screen first, so it stays put while the words under it change length. */
    .lp-panel { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 28px; }
    /* The hero stacks, its words first and the window under them; the headline has the
       whole width now, so it is set larger again. */
    .lp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .lp-h1-hero { font-size: clamp(2rem, 4.6vw, 3rem); }
    .lp-hero-shots { width: 100%; max-width: 720px; margin-inline: auto; }
    .lp-window { order: -1; }
    /* The slides stack too, the screenshot first; and the tour's screenshot comes before its words. */
    .lp-panel.lp-mon-slide { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .lp-tour-shot { order: -1; }
    .lp-stage:not(.lp-mon-stage)::before { inset: 3% 0 auto; height: 380px; }
}
@media (max-width: 920px) {
    .lp-nav-in { gap: 12px; }
    /* No island here: the folded menu hangs under a full-width bar. */
    .lp-nav.is-scrolled {
        padding-top: 0;
        background: var(--lp-nav-bg);
        -webkit-backdrop-filter: saturate(140%) blur(12px);
        backdrop-filter: saturate(140%) blur(12px);
        border-bottom-color: var(--ui-line);
    }
    .lp-nav.is-scrolled .lp-nav-in, .lp-nav.is-open .lp-nav-in {
        width: calc(100% - 32px); height: 100%; margin-top: 0; padding: 0; gap: 12px;
        border-color: transparent; border-radius: 0; background: none; box-shadow: none;
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .lp-nav-cta { margin-left: auto; }
    .lp-burger { display: inline-flex; }
    .lp-nav-links {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 16px;
        background: var(--ui-bg); border-bottom: 1px solid var(--ui-line);
    }
    .lp-nav.is-open .lp-nav-links { display: flex; max-height: calc(100vh - var(--lp-nav-h)); overflow-y: auto; }
    .lp-nav-links a, .lp-drop summary { padding: 12px 8px; font-size: 1rem; }
    /* The Monitoring menu opens in place, as a plain list. */
    .lp-drop summary { justify-content: space-between; }
    .lp-drop-menu {
        position: static; grid-template-columns: minmax(0, 1fr); width: auto; padding: 0 0 8px;
        border: 0; background: none; box-shadow: none; animation: none;
    }
    .lp-drop-menu a { align-items: center; padding: 8px; }
    .lp-drop-menu em { display: none; }
    .lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-cta { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 44px 32px; }
    .lp-cta-side { gap: 28px; }
    .lp-cta-side .lp-cta-btns { justify-content: flex-start; }
    /* Four steps go two to a row, where a single line cannot run through them. */
    .lp-steps[style*="--cols: 4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
    .lp-steps[style*="--cols: 4"]::before, .lp-steps[style*="--cols: 4"]::after { display: none; }
    .lp-tools, .lp-split { grid-template-columns: minmax(0, 1fr); }
    .lp-split { gap: 32px; }
    /* The list of legal pages goes above the page, as a row of links. */
    .lp-legal { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .lp-legal-nav { position: static; display: flex; flex-wrap: wrap; }
    /* The brand across the top, the five lists of links two to a row. */
    .lp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .lp-wrap { width: calc(100% - 32px); }
    .lp-hero-in { padding-block: 40px; }
    .lp-hero-page { padding-top: 44px; }
    /* One to a row, and the window without its rail of icons. */
    .lp-points { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .lp-sim { margin-top: 40px; }
    .lp-feature-shot { margin-top: 40px; }
    /* The tags flow into as many to a row as fit, still leaning; the three columns are only a
       way to lay them out on a wide screen. A tag's tooltip is a bar along the foot of the
       screen, where it can never run off an edge. */
    .lp-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 6px; margin-top: 48px; }
    .lp-tag-col { display: contents; }
    .lp-tag-col > li { margin: 0; }
    .lp-tag { font-size: 1rem; }
    .lp-tip {
        position: fixed; left: 16px; right: 16px; bottom: 16px; top: auto;
        width: auto; max-width: none; transform: translateY(8px);
    }
    /* Over the back-to-top button (z-index 40), which shares the foot of the screen. */
    .lp-tag-col > li:is(:hover, :focus-within, .is-open) { z-index: 50; }
    .lp-tip::after { display: none; }
    .lp-tag-col > li:is(:hover, .is-open) > .lp-tip,
    .lp-tag:focus-visible + .lp-tip { transform: none; }
    /* Seven kinds of monitoring: a strip of tabs to swipe along, the one showing scrolled into
       view (landing.js), rather than four rows of them. */
    .lp-mon-tabs .lp-tablist {
        display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
        scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px;
    }
    .lp-mon-tabs .lp-tablist::-webkit-scrollbar { display: none; }
    .lp-mon-tabs .lp-tab { flex: none; scroll-snap-align: center; }
    .lp-section { padding: 52px 0; }
    .lp-page-top { padding-top: 40px; }
    .lp-form-row { grid-template-columns: minmax(0, 1fr); }
    .lp-head { margin-bottom: 32px; }
    .lp-features, .lp-courses, .lp-classes { grid-template-columns: minmax(0, 1fr); }
    .lp-plans { grid-template-columns: minmax(0, 1fr); }
    /* The steps stack: no line to travel along, each number beside its words. */
    .lp-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .lp-steps::before, .lp-steps::after { display: none; }
    .lp-card { min-height: 0; }
    .lp-tabs { flex-direction: column; margin-bottom: 28px; }
    .lp-tablist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .lp-tab { justify-content: center; height: 36px; padding: 0 10px; font-size: .8rem; }
    /* The drawn screens, cut down to what fits a phone: fewer buttons and columns. */
    .lp-window-body { height: 400px; }
    .lp-app-canvas { min-width: 0; }
    .lp-job { grid-template-columns: minmax(0, 1fr) auto; }
    .lp-job > :nth-child(3) { display: none; }
    .lp-job-note { grid-column: 1 / -1; }
    .lp-job:not(:first-child) .lp-job-note { display: none; }
    .lp-job:nth-child(n + 5) { display: none; }
    .lp-credit { grid-template-columns: minmax(0, 1fr); }
    .lp-wallet { display: none; }
    .lp-cta, .lp-cta-center { padding: 36px 22px; }
    /* Files in, tool, files out: top to bottom. */
    .lp-flow { grid-template-columns: minmax(0, 1fr); }
    .lp-flow-mid { flex-direction: column; height: 76px; }
    .lp-flow-line {
        width: 2px; height: auto;
        background: linear-gradient(var(--ui-accent) 50%, transparent 50%) 0 0 / 2px 12px repeat-y;
        animation-name: lp-dash-y;
    }
}
@media (max-width: 520px) {
    .lp-nav-cta .lp-btn-ghost { display: none; }
    .lp-nav-links .lp-only-mobile { display: block; }
}

/* --- Reduced motion (base.css turns every animation off): nothing advancing -- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .lp-js [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
    /* The tags are simply there, already in place. */
    .lp-js .lp-tags .lp-tag { opacity: 1; }
    .lp-tag, .lp-tip, .lp-hero-shot, .lp-js .lp-hero-frame, .lp-hero-pip { transition: none; }
    /* The tour and the slides do not advance by themselves, so there is nothing to pause; the
       slides' arrows stay, the way through them by hand. */
    .lp-js [data-autotabs-toggle] { display: none; }
}