/* ==========================================================================
   Fountain View - public landing page
   --------------------------------------------------------------------------
   Deliberately standalone. css/fv.css is the *console* design system: a light
   working surface, small type, dense tables, a fixed sidebar. The public page
   is a different job with a different scale, and loading the app stylesheet
   here only means overriding it section by section. The tokens below carry the
   same accent blue so the two do not clash where they meet (the login dialog
   hands straight over to the app).

   No build step, no framework: this file is what the browser gets. Anything
   that needs to be theme-aware or responsive is done with custom properties,
   clamp() and grid, so there is nothing to compile.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
    /* Black, and neutral. These were a blue-grey (#10202e / #4f6274 / #8496a6)
       which read as washed out and slightly cold against white and sand. Plain
       black ink is simpler and carries far better: #6b6b6b clears AA on both
       grounds, where the old #8496a6 did not. Keep them neutral - a tint here
       is what made the page look grey in the first place. */
    --ink:        #000000;
    --ink-2:      #333333;
    --ink-3:      #6b6b6b;

    --brand:      #2d7ff9;   /* the app accent, so the two halves agree */
    --brand-dark: #1b5fc4;
    --brand-wash: #eef4ff;

    /* The estate is face brick and paving. A warm sand for the alternating
       bands stops the page reading as another blue-grey dashboard. */
    --sand:       #f7f2e9;
    --sand-2:     #f0e8da;
    --sand-line:  #e4d9c6;

    --navy:       #0d1b28;
    --navy-2:     #14293c;

    /* Neutral too. fv.css tints its borders blue on purpose, because they sit
       on a blue-leaning ground; nothing here does, so the tint was only noise. */
    --line:       #e5e5e5;
    --line-soft:  #f0f0f0;

    --r-sm: 8px;
    --r:    14px;
    --r-lg: 22px;

    --sh:    0 1px 2px rgba(0, 0, 0, .05), 0 4px 16px rgba(0, 0, 0, .06);
    --sh-lg: 0 18px 48px rgba(0, 0, 0, .14), 0 4px 12px rgba(0, 0, 0, .06);

    --display: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* The logo is a stacked lockup - the mark sits above the wordmark - so it
       needs real height before the words are legible. The bar is sized off the
       logo rather than the other way round. */
    --header-h: 78px;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* Anchored sections must not slide under the sticky header. */
    scroll-padding-top: calc(var(--header-h) + 12px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: var(--brand-dark); }

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0 0 .5em;
    color: var(--ink);
    font-variation-settings: "SOFT" 0, "WONK" 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

.lp-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--brand);
    color: #fff;
    padding: .7rem 1.1rem;
    z-index: 200;
    border-radius: 0 0 var(--r-sm) 0;
}
.lp-skip:focus { left: 0; }

/* --- Layout primitives -------------------------------------------------- */
.lp-container {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: clamp(1.1rem, 4vw, 2.2rem);
}

.lp-section { padding-block: clamp(3.6rem, 7.5vw, 6.5rem); }
.lp-section--sand { background: var(--sand); }
.lp-section--tight { padding-block: clamp(2.6rem, 5vw, 4rem); }

.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--sans);
    font-size: .76rem;
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-dark);
    margin-bottom: .9rem;
}
.lp-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--brand);
    border-radius: 2px;
}

.lp-h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
.lp-h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); }

.lp-lead {
    font-size: clamp(1.02rem, 1.5vw, 1.16rem);
    color: var(--ink-2);
    max-width: 62ch;
}

.lp-section-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }

.lp-small-note { font-size: .92rem; color: var(--ink-2); margin-top: .9rem; }
.lp-small-note a { color: var(--brand-dark); font-weight: 500; }

/* --- Buttons ------------------------------------------------------------ */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--sans);
    font-size: .96rem;
    font-weight: 600;
    line-height: 1;
    padding: .92rem 1.5rem;
    border-radius: var(--r-sm);
    border: 1.5px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn:active { transform: translateY(0); }

.lp-btn--primary {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 6px 18px rgba(45, 127, 249, .32);
}
.lp-btn--primary:hover { background: var(--brand-dark); box-shadow: 0 10px 24px rgba(45, 127, 249, .38); }

.lp-btn--ghost {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
    backdrop-filter: blur(6px);
}
.lp-btn--ghost:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }

.lp-btn--quiet {
    background: #fff;
    color: var(--ink);
    border-color: var(--line);
    box-shadow: var(--sh);
}
.lp-btn--quiet:hover { border-color: var(--brand); color: var(--brand-dark); }

.lp-btn--sm { padding: .62rem 1rem; font-size: .88rem; }
.lp-btn--block { width: 100%; }

/* --- Header ------------------------------------------------------------- */
.lp-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line-soft);
}
.lp-header__inner {
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.lp-brand { display: flex; align-items: center; flex: 0 0 auto; }
.lp-brand img { height: 54px; width: auto; }

.lp-nav {
    display: flex;
    align-items: center;
    gap: 1.55rem;
    margin-left: auto;
}
.lp-nav a {
    font-size: .92rem;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    padding: .35rem 0;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.lp-nav a:hover { color: var(--ink); border-bottom-color: var(--brand); }
/* Set by the scroll spy in index.php - the section you are actually reading. */
.lp-nav a.is-active { color: var(--ink); border-bottom-color: var(--brand); font-weight: 600; }

.lp-header__cta { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }

.lp-burger {
    display: none;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    width: 42px;
    height: 38px;
    padding: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    margin-left: auto;
}
.lp-burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.lp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.lp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.lp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.lp-mobile-nav {
    display: none;
    border-top: 1px solid var(--line-soft);
    background: #fff;
    padding: .6rem 0 1.2rem;
}
.lp-mobile-nav.is-open { display: block; }
/* Direct children only. A blanket `.lp-mobile-nav a` also caught the two
   buttons at the foot of the drawer - and being one class more specific than
   `.lp-btn`, it won, so `display:block` overrode the flex that centres their
   label and they sat hard against the left edge. */
.lp-mobile-nav .lp-container > a {
    display: block;
    padding: .8rem .2rem .8rem .7rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line-soft);
    border-left: 3px solid transparent;
}
.lp-mobile-nav .lp-container > a.is-active { border-left-color: var(--brand); color: var(--brand-dark); font-weight: 650; }
.lp-mobile-nav .lp-mobile-nav__cta { display: grid; gap: .6rem; margin-top: 1rem; }
.lp-mobile-nav .lp-mobile-nav__cta .lp-btn { width: 100%; }

/* --- Hero --------------------------------------------------------------- */
.lp-hero {
    position: relative;
    isolation: isolate;
    color: #fff;
    background: var(--navy);
    min-height: min(78vh, 680px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.lp-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.lp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(8, 18, 28, .92) 0%, rgba(8, 18, 28, .72) 42%, rgba(8, 18, 28, .35) 75%, rgba(8, 18, 28, .45) 100%),
        linear-gradient(to right, rgba(8, 18, 28, .55) 0%, rgba(8, 18, 28, 0) 65%);
}
.lp-hero__inner { padding-block: clamp(4.5rem, 12vw, 8rem) clamp(2rem, 4vw, 3rem); }
.lp-hero .lp-eyebrow { color: #9fc6ff; }
.lp-hero .lp-eyebrow::before { background: #9fc6ff; }

.lp-hero h1 {
    color: #fff;
    font-size: clamp(2.3rem, 5.6vw, 4.1rem);
    letter-spacing: -0.025em;
    max-width: 16ch;
    margin-bottom: .45em;
    text-wrap: balance;
}
.lp-hero p {
    color: rgba(255, 255, 255, .86);
    font-size: clamp(1.02rem, 1.7vw, 1.2rem);
    max-width: 56ch;
    margin-bottom: 2rem;
}
.lp-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.lp-hero__facts {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, .18);
    background: rgba(8, 18, 28, .42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.lp-hero__facts ul {
    list-style: none;
    margin: 0;
    padding: 1.15rem 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.lp-hero__facts li { color: rgba(255, 255, 255, .78); font-size: .88rem; line-height: 1.35; }
.lp-hero__facts b {
    display: block;
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
}

/* --- Two-column feature block ------------------------------------------- */
.lp-split {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.lp-split__media {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-lg);
}
.lp-split__media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* A short list of facts under body copy - label on the left, value right. */
.lp-facts { list-style: none; margin: 1.8rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.lp-facts li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--line);
    font-size: .95rem;
}
.lp-facts span { color: var(--ink-3); }
.lp-facts b { font-weight: 600; text-align: right; }

/* --- Cards -------------------------------------------------------------- */
.lp-grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.lp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.lp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lp-grid--4 { grid-template-columns: repeat(4, 1fr); }

.lp-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}
.lp-card--lift:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.lp-card__media { position: relative; overflow: hidden; background: var(--sand-2); }
.lp-card__media img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.lp-card--lift:hover .lp-card__media img { transform: scale(1.04); }
.lp-card__body { padding: 1.35rem 1.4rem 1.5rem; }
.lp-card__body h3 { font-size: 1.2rem; margin-bottom: .35em; }
.lp-card__body p { color: var(--ink-2); font-size: .95rem; }

.lp-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--brand-wash);
    color: var(--brand-dark);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

/* --- Icon list: a claim, then what it actually means --------------------- */
.lp-list { list-style: none; margin: 1.7rem 0 0; padding: 0; display: grid; gap: 1.05rem; }
.lp-list li { display: flex; gap: .85rem; align-items: flex-start; font-size: .95rem; color: var(--ink-2); }
.lp-list svg { flex: 0 0 auto; margin-top: .22rem; color: var(--brand); }
.lp-list strong { color: var(--ink); font-weight: 650; }

/* --- Tick list, for the short lists inside a card ------------------------ */
.lp-ticks { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .55rem; }
.lp-ticks li {
    position: relative;
    padding-left: 1.05rem;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--ink-2);
}
.lp-ticks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand);
}

/* --- Callout: one point worth pulling out of the grid -------------------- */
.lp-callout {
    margin-top: clamp(1.5rem, 3vw, 2.2rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    background: var(--brand-wash);
    border: 1px solid var(--brand-line, #d6e6ff);
    border-radius: var(--r);
    padding: 1.2rem 1.4rem;
}
.lp-callout > div { display: flex; gap: .85rem; align-items: flex-start; max-width: 76ch; }
.lp-callout > div > svg { flex: 0 0 auto; margin-top: .18rem; color: var(--brand-dark); }
.lp-callout p { margin: 0; font-size: .94rem; color: var(--ink-2); }
.lp-callout strong { color: var(--ink); }

/* --- Panel (the enquiry form) ------------------------------------------- */
.lp-panel {
    background: #fff;
    border: 1px solid var(--sand-line);
    border-radius: var(--r);
    box-shadow: var(--sh);
    overflow: hidden;
}
.lp-panel__head {
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: baseline;
    justify-content: space-between;
}
.lp-panel__head h3 { margin: 0; font-size: 1.15rem; }
.lp-panel__head span { font-size: .84rem; color: var(--ink-3); }
.lp-panel__body { padding: 1.2rem 1.4rem 1.4rem; }

/* --- Contact ------------------------------------------------------------ */
.lp-contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.lp-contact__list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.lp-contact__list li { display: flex; gap: .9rem; align-items: flex-start; }
.lp-contact__list .lp-icon { margin: 0; flex: 0 0 auto; width: 40px; height: 40px; font-size: 1rem; }
.lp-contact__list strong { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 650; }
.lp-contact__list a { color: var(--ink); text-decoration: none; font-weight: 500; }
.lp-contact__list a:hover { color: var(--brand-dark); text-decoration: underline; }

/* The details list is much shorter than the form beside it. Rather than leave
   a column of empty sand, the estate itself fills the rest of it. */
.lp-contact__photo {
    margin-top: 2rem;
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--sh);
}
.lp-contact__photo img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
@media (max-width: 900px) { .lp-contact__photo { display: none; } }

/* --- Forms -------------------------------------------------------------- */
.lp-form { display: grid; gap: 1rem; }
.lp-field { display: grid; gap: .4rem; }
.lp-field label { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.lp-field label span { color: #d63b3b; }
.lp-input {
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
    padding: .78rem .95rem;
    width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lp-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(45, 127, 249, .14);
}
textarea.lp-input { resize: vertical; min-height: 130px; }
.lp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lp-note {
    padding: .85rem 1rem;
    border-radius: var(--r-sm);
    font-size: .92rem;
    display: none;
}
.lp-note.is-shown { display: block; }
.lp-note--ok { background: #e7f7ee; color: #0d7a3e; border: 1px solid #b8e6cc; }
.lp-note--bad { background: #fdecec; color: #b32d2d; border: 1px solid #f3c6c6; }

/* --- Login dialog ------------------------------------------------------- */
.lp-dialog {
    border: none;
    border-radius: var(--r);
    padding: 0;
    width: min(420px, calc(100vw - 2rem));
    box-shadow: var(--sh-lg);
    color: var(--ink);
}
.lp-dialog::backdrop { background: rgba(10, 22, 34, .55); backdrop-filter: blur(3px); }
.lp-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid var(--line-soft);
}
.lp-dialog__head h2 { margin: 0; font-size: 1.25rem; }
.lp-dialog__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ink-3);
    cursor: pointer;
    padding: .1rem .3rem;
    border-radius: 6px;
}
.lp-dialog__close:hover { color: var(--ink); background: var(--line-soft); }
.lp-dialog__body { padding: 1.4rem; }
.lp-dialog__foot { padding: 0 1.4rem 1.4rem; }

/* --- Footer ------------------------------------------------------------- */
.lp-footer { background: var(--navy); color: rgba(255, 255, 255, .68); font-size: .93rem; }
.lp-footer a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.lp-footer a:hover { color: #fff; text-decoration: underline; }
.lp-footer__top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    padding-block: clamp(3rem, 6vw, 4.5rem);
}
.lp-footer img { height: 78px; width: auto; margin-bottom: 1.3rem; }
.lp-footer h4 {
    font-family: var(--sans);
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 1rem;
    font-weight: 650;
}
.lp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.lp-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-block: 1.4rem;
    text-align: center;
    font-size: .85rem;
    color: rgba(255, 255, 255, .5);
}
.lp-footer__bottom p { margin: 0; }

/* --- Install banner (PWA) ----------------------------------------------- */
.lp-install {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    background: var(--navy-2);
    color: #fff;
    align-items: center;
    gap: .9rem;
    padding: .8rem clamp(1rem, 4vw, 2rem);
    font-size: .9rem;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .25);
}
.lp-install span { flex: 1; }

/* --- Scroll reveal ------------------------------------------------------ */
.lp-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); }
.lp-reveal.is-in { opacity: 1; transform: none; }

/* --- Responsive --------------------------------------------------------- */
/* Six nav items plus two buttons runs out of bar before the layout runs out
   of page, so the burger arrives on its own breakpoint - one notch of
   tightening first, then the drawer. */
@media (max-width: 1200px) {
    .lp-nav { gap: 1.15rem; }
    .lp-nav a { font-size: .87rem; }
}

@media (max-width: 1060px) {
    .lp-nav, .lp-header__cta { display: none; }
    .lp-burger { display: flex; }
}

@media (max-width: 1000px) {
    .lp-grid--4, .lp-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .lp-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .lp-split { grid-template-columns: 1fr; }
    /* Flipped splits lead with the photograph on desktop; on one column the
       heading has to come first or the section arrives unannounced. */
    .lp-split--flip .lp-split__media { order: 1; }
    .lp-contact { grid-template-columns: 1fr; }
    .lp-hero__facts ul { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
    .lp-callout { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .lp-grid--2, .lp-grid--3, .lp-grid--4 { grid-template-columns: 1fr; }
    .lp-form__row { grid-template-columns: 1fr; }
    .lp-footer__top { grid-template-columns: 1fr; }
    .lp-hero { min-height: 0; }
    .lp-hero__actions .lp-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .lp-reveal { opacity: 1; transform: none; }
}

@media print {
    .lp-header, .lp-install, .lp-hero__actions, .lp-dialog { display: none !important; }
    .lp-hero { min-height: 0; color: var(--ink); background: #fff; }
    .lp-hero::after, .lp-hero__bg { display: none; }
    .lp-hero h1, .lp-hero p { color: var(--ink); }
}