/* DeskPilot — public landing page.
   Loaded after app.css and reuses its variables, so the marketing page and the
   product cannot drift apart visually. Everything decorative here is CSS or
   inline SVG: no photography, nothing to license, nothing fetched at runtime. */

.lp {
    /* the app's own background plus a wider vignette for long scrolling pages */
    background:
        radial-gradient(1100px 620px at 78% -8%,  rgba(var(--accent-rgb), .13), transparent 62%),
        radial-gradient(900px 560px at -8% 6%,    rgba(var(--accent-2-rgb), .10), transparent 58%),
        var(--bg);
}
.lp ::selection { background: rgba(var(--accent-rgb), .32); }

/* soft drifting colour, kept behind everything and off for reduced motion */
.lp-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lp-aurora span {
    position: absolute; border-radius: 50%; filter: blur(90px); opacity: .30;
    animation: lpDrift 26s ease-in-out infinite alternate;
}
.lp-aurora span:nth-child(1) { width: 520px; height: 520px; top: -160px; right: -80px;
    background: radial-gradient(circle, var(--accent), transparent 68%); }
.lp-aurora span:nth-child(2) { width: 460px; height: 460px; top: 44%; left: -170px;
    background: radial-gradient(circle, var(--accent-2), transparent 68%); animation-delay: -9s; }
.lp-aurora span:nth-child(3) { width: 420px; height: 420px; bottom: -150px; right: 18%;
    background: radial-gradient(circle, var(--up), transparent 70%); opacity: .16;
    animation-delay: -17s; }
@keyframes lpDrift {
    from { transform: translate3d(0,0,0)      scale(1); }
    to   { transform: translate3d(28px,36px,0) scale(1.10); }
}
.lp > *:not(.lp-aurora) { position: relative; z-index: 1; }

/* ---------------------------------- nav --------------------------------- */
.lp-nav {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 26px;
    padding: 15px 30px;
    background: rgba(var(--chrome-rgb), .72);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line-soft);
}
.lp-nav .brand { text-decoration: none; color: var(--text); }
.lp-nav-links { display: flex; gap: 24px; margin-left: 14px; }
/* White at rest, like every other link. The hover state was carried by colour
   alone (muted -> text); now that the base IS text, the accent underline below
   is the whole affordance, so it must stay. */
.lp-nav-links a {
    color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500;
    padding: 4px 0; border-bottom: 1px solid transparent;
}
.lp-nav-links a:hover { border-bottom-color: var(--accent); }
.lp-nav-cta { display: flex; gap: 10px; align-items: center; margin-left: auto; }

.btn-lg { padding: 12px 22px; font-size: 15px; }

/* --------------------------------- hero --------------------------------- */
.lp-hero {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
    gap: 56px; align-items: center;
    max-width: 1240px; margin: 0 auto; padding: 88px 30px 76px;
}
.lp-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    color: var(--up); background: var(--up-dim); border: 1px solid rgba(var(--up-rgb), .28);
}
.lp-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--up);
    box-shadow: 0 0 0 0 rgba(var(--up-rgb), .6); animation: lpPulse 2.4s ease-out infinite;
}
@keyframes lpPulse {
    to { box-shadow: 0 0 0 9px rgba(var(--up-rgb), 0); }
}
.lp-hero h1 {
    margin: 20px 0 0; font-size: clamp(38px, 5.1vw, 62px); line-height: 1.05;
    letter-spacing: -1.6px; font-weight: 800;
}
.lp-hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--accent), var(--accent-2) 55%, var(--up));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-lede { margin: 20px 0 0; max-width: 56ch; font-size: 17px; line-height: 1.68; color: var(--muted); }
.lp-lede-sm { margin: 14px 0 22px; max-width: 52ch; font-size: 15px; line-height: 1.65; color: var(--muted); }
.lp-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 0; }
.lp-hero-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 11px; }
.lp-hero-points li { position: relative; padding-left: 26px; font-size: 14px; color: var(--muted); }
.lp-hero-points li::before {
    content: ""; position: absolute; left: 4px; top: 6px;
    width: 7px; height: 11px; border-right: 2px solid var(--up); border-bottom: 2px solid var(--up);
    transform: rotate(42deg);
}
.lp-hero-art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 60px rgba(var(--scrim-rgb), .55)); }

/* ------------------------------- sections ------------------------------- */
.lp-section { max-width: 1180px; margin: 0 auto; padding: 84px 30px; }
/* full-bleed background, content still on the same 1180px grid. The inner
   wrapper exists so headings inside these sections keep their own max-width
   without being centred by an auto margin. */
.lp-alt {
    max-width: none; padding-left: 0; padding-right: 0;
    background: linear-gradient(180deg, rgba(var(--bg-rgb), 0), rgba(var(--bg-rgb), .62) 12%, rgba(var(--bg-rgb), .62) 88%, rgba(var(--bg-rgb), 0));
    border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.lp-inner { max-width: 1180px; margin: 0 auto; padding: 0 30px; }

.lp-head { max-width: 660px; margin-bottom: 46px; }
.lp-eyebrow {
    display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
.lp-head h2 { margin: 0; font-size: clamp(26px, 3.2vw, 37px); line-height: 1.16; letter-spacing: -.7px; }
.lp-head p { margin: 15px 0 0; font-size: 15.5px; line-height: 1.68; color: var(--muted); }

/* --------------------------------- steps -------------------------------- */
.lp-steps {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;
}
.lp-steps li {
    background: var(--card); border: 1px solid var(--line-soft);
    border-radius: var(--radius); padding: 26px 24px 24px; position: relative; overflow: hidden;
}
.lp-steps li::after {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
}
.lp-step-n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 52px; height: 30px; padding: 0 10px; margin-bottom: 16px;
    border-radius: 8px; font-family: var(--mono); font-size: 14px; font-weight: 700;
    color: var(--accent); background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .25);
}
.lp-steps h3 { margin: 0 0 9px; font-size: 17px; }
.lp-steps p { margin: 0; font-size: 14.5px; line-height: 1.66; color: var(--muted); }

/* ------------------------------- features ------------------------------- */
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)); gap: 20px; }
.lp-card {
    background: linear-gradient(180deg, var(--card-2), var(--card));
    border: 1px solid var(--line-soft); border-radius: var(--radius);
    padding: 26px 24px; transition: border-color .18s ease, transform .18s ease;
}
.lp-card:hover { border-color: rgba(var(--accent-rgb), .4); transform: translateY(-3px); }
.lp-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-bottom: 16px; border-radius: 11px; font-size: 18px;
    color: var(--accent); background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .22);
}
.lp-card h3 { margin: 0 0 9px; font-size: 16.5px; }
.lp-card p { margin: 0; font-size: 14.5px; line-height: 1.66; color: var(--muted); }

/* -------------------------------- pricing ------------------------------- */
.lp-banner { max-width: 720px; margin-bottom: 26px; }
/* The cards stretch to the tallest one in their row, which is the grid default:
   `align-items: start` used to sit here and let each card stop at its own content,
   so the three pricing cards ended at three different heights. The content is
   genuinely uneven and always will be — Basic offers one button while a tier that
   isn't open yet carries a whole waitlist form, and Elite has one feature line
   fewer than Pro — so equal height has to come from the grid rather than from
   matching the copy up. .lp-tier is already a flex column, which is what then
   pushes every card's CTA down to its bottom edge. */
.lp-tiers {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(296px, 1fr));
    gap: 22px;
}
.lp-tier {
    display: flex; flex-direction: column;
    background: var(--card); border: 1px solid var(--line-soft);
    border-radius: 18px; padding: 30px 26px; position: relative;
}
.lp-tier.is-featured { border-color: rgba(var(--accent-rgb), .45); box-shadow: 0 22px 60px rgba(var(--accent-rgb), .10); }
.lp-tier-flag {
    position: absolute; top: -11px; left: 26px; padding: 4px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--on-accent);
    background: linear-gradient(135deg, var(--accent-fill), var(--accent-2));
}
.lp-tier h3 { margin: 0; font-size: 21px; letter-spacing: -.3px; }
.lp-tier-sub { margin: 4px 0 0; font-size: 13px; color: var(--faint); }
/* The switch itself is .period-switch in app.css — shared with billing.php, so the
   two pages cannot drift into two different controls for one decision. Only the
   placement is the landing page's business: centred under the section head, since
   .lp-head is centred and a left-aligned control under it reads as a stray. */
.lp-period { justify-content: center; margin: -6px 0 30px; }

.lp-price { margin: 20px 0 6px; display: flex; align-items: baseline; gap: 7px; }
.lp-price strong { font-size: 40px; font-weight: 800; letter-spacing: -1.6px; font-family: var(--mono); }
.lp-price span { font-size: 14px; color: var(--muted); }
/* The saving is stated as the arithmetic (X less than Y x 12) rather than as a
   percentage, because it is the same two numbers already on the page — a reader
   can check it, and it cannot round into a claim the prices don't support. */
.lp-price-save { margin: 0 0 18px; font-size: 13px; font-weight: 600; color: var(--up); }
.lp-price-save-none { color: var(--faint); font-weight: 500; }
/* On the MONTHLY view the saving is an offer rather than something already got,
   so it is muted — the green above belongs to the view where the money is
   actually being saved. It is also the line that makes the period switch worth
   clicking, which it only is now that clicking it costs no page load. */
.lp-price-save-hint { color: var(--muted); font-weight: 500; }
/* EVERY tier emits a saving line, even when it has nothing to say (an
   aria-hidden spacer). Three cards side by side whose tick lists start at
   different heights read as a rendering fault, and now that both periods are in
   the document at once a card's height must not depend on which one is showing.
   This is why there is no `.lp-price:last-of-type` rule any more: it gave the
   price block the missing 24px when no saving line followed it, and with the
   line always present it matched nothing and silently did the job twice over on
   the cards it did match. 6px here + 18px below is the same 24px. */

/* The feature tick list lives in app.css as `.plan-ticks`, not here, because billing.php
   renders the identical list from dp_plan_ticks_html() and only app.css is loaded
   by both pricing surfaces. Landing-only adjustments to it stay below. */

/* The cards are equal height and the tick list absorbs the slack, so the CTA already
   sits at the bottom of each — but this footnote is one line under "Start free" and
   two under "Choose Pro", which pushed the free tier's BUTTON a line lower than its
   neighbours'. Three equal-height cards whose buttons don't line up read as three
   cards of different heights, which is how it was reported. Reserving two lines makes
   the row of buttons a row; the reserved space is at the very bottom of the card, so
   on a one-line footnote it is invisible. */
.lp-tier-foot {
    margin: 12px 0 0; font-size: 12.5px; color: var(--faint); text-align: center;
    line-height: 1.35; min-height: 2.7em;
}
.lp-tier .btn-block { display: block; text-align: center; }

/* ---- a tier that isn't open yet: greyed, but still readable ---- */
.lp-tier.is-soon { border-style: dashed; border-color: var(--line); background: rgba(var(--chrome-rgb), .28); }
.lp-tier.is-soon h3,
.lp-tier.is-soon .lp-price strong { color: var(--muted); }
.lp-tier.is-soon .plan-ticks li { color: var(--faint); }
.lp-tier.is-soon .plan-ticks li.yes::before { background: rgba(var(--text-rgb), .10); border-color: rgba(var(--text-rgb), .22); }
.lp-tier.is-soon .plan-ticks li.yes::after { border-color: var(--muted); }
.lp-tier.is-soon .lp-tier-flag { background: var(--card-2); color: var(--muted); border: 1px solid var(--line); }

.lp-soon { border-top: 1px solid var(--line-soft); padding-top: 18px; }
.lp-soon-tag {
    display: block; text-align: center; margin-bottom: 13px;
    font-size: 12px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
    color: var(--warn);
}
.lp-wait { display: grid; gap: 9px; }
.lp-wait .input { width: 100%; text-align: center; }
.lp-fineprint {
    max-width: 720px; margin: 30px auto 0; text-align: center;
    font-size: 13px; line-height: 1.65; color: var(--faint);
}

/* ------------------------------- security ------------------------------- */
.lp-split { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 52px; align-items: start; }
.lp-sec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.lp-sec-list li {
    padding: 16px 18px; border-radius: 12px; font-size: 14.5px; line-height: 1.62; color: var(--muted);
    background: rgba(var(--chrome-rgb), .35); border: 1px solid var(--line-soft);
}
.lp-sec-list strong { color: var(--text); }

/* --------------------------------- faq ---------------------------------- */
.lp-faq { display: grid; gap: 12px; max-width: 820px; }
.lp-faq details {
    background: var(--card); border: 1px solid var(--line-soft);
    border-radius: 12px; padding: 4px 20px;
}
.lp-faq summary {
    cursor: pointer; padding: 16px 0; font-size: 15.5px; font-weight: 600;
    list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: var(--accent); font-size: 19px; line-height: 1; }
.lp-faq details[open] summary::after { content: "–"; }
.lp-faq details[open] summary { border-bottom: 1px solid var(--line-soft); }
.lp-faq p { margin: 15px 0 18px; font-size: 14.5px; line-height: 1.68; color: var(--muted); }

/* --------------------------------- cta ---------------------------------- */
.lp-cta {
    text-align: center; padding: 90px 30px;
    background:
        radial-gradient(700px 320px at 50% 0%, rgba(var(--accent-rgb), .15), transparent 70%),
        rgba(var(--chrome-rgb), .5);
    border-top: 1px solid var(--line-soft);
}
.lp-cta h2 { margin: 0; font-size: clamp(25px, 3vw, 35px); letter-spacing: -.6px; }
.lp-cta p { margin: 14px auto 28px; max-width: 52ch; color: var(--muted); font-size: 15.5px; }

/* -------------------------------- footer -------------------------------- */
.lp-foot { border-top: 1px solid var(--line-soft); padding: 44px 30px 34px; background: rgba(var(--chrome-rgb), .6); }
.lp-foot-in {
    max-width: 1180px; margin: 0 auto; display: flex; gap: 30px;
    justify-content: space-between; flex-wrap: wrap; align-items: flex-start;
}
.lp-foot .brand { text-decoration: none; color: var(--text); }
.lp-foot-note { margin: 8px 0 0; font-size: 13px; color: var(--faint); }
.lp-foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.lp-foot nav a { color: var(--text); text-decoration: none; font-size: 13.5px; }
.lp-foot nav a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.lp-disclaimer {
    max-width: 1180px; margin: 30px auto 0; padding-top: 22px;
    border-top: 1px solid var(--line-soft);
    font-size: 11.5px; line-height: 1.72; color: var(--faint);
}

/* --------------------------------- misc --------------------------------- */
/* .sr-only lives in app.css: the launch page (lib/launch.php) uses it and
   loads only that sheet, and every page loading this one loads app.css too. */
.signup-card { width: min(430px, 94vw); }
.signup-terms { margin: 6px 0 16px; font-size: 12.5px; text-align: left; line-height: 1.5; }

/* focus rings that survive the dark theme */
.lp a:focus-visible, .lp button:focus-visible, .lp input:focus-visible, .lp summary:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}

@media (max-width: 940px) {
    .lp-hero { grid-template-columns: 1fr; gap: 44px; padding-top: 60px; }
    .lp-hero-art { order: -1; }
    .lp-split { grid-template-columns: 1fr; gap: 32px; }
    .lp-nav-links { display: none; }
}
@media (max-width: 560px) {
    .lp-nav { padding: 12px 18px; gap: 12px; }
    .lp-section { padding: 60px 20px; }
    .lp-inner { padding: 0 20px; }
    .lp-hero { padding: 44px 20px 56px; }
}

/* people who ask for less motion get none of it */
@media (prefers-reduced-motion: reduce) {
    .lp-aurora span, .lp-dot { animation: none; }
    .lp-card:hover { transform: none; }
}