/* ===========================================================================
   Public landing page
   ===========================================================================

   Standalone on purpose. It shares no stylesheet with the admin panel or the
   guest's table pages: those two are tools, judged on how fast somebody can
   work in them, and this is a shop window. Sharing a file would mean every
   change to a button on the marketing page risking the till.

   Everything is prefixed `lp-` so the two can never collide if they ever do
   end up on one page.

   Light only, on purpose. The admin panel and the kitchen display both follow
   the system theme because people sit in front of them for a whole shift; this
   is a page somebody reads once before deciding to buy, and it should look the
   same in the screenshot a salesperson sends as it does on the visitor's
   laptop. `color-scheme: light` below makes the browser's own furniture -
   scrollbars, form controls - agree with that rather than rendering dark
   widgets on a light page.
   ------------------------------------------------------------------------ */

:root {
    /* Stops a dark-mode browser rendering dark scrollbars and form controls
       against this page's light surfaces. */
    color-scheme: light;

    --lp-bg: #ffffff;
    --lp-bg-alt: #f7f6f4;
    --lp-surface: #ffffff;
    --lp-text: #17150f;
    --lp-muted: #6b6559;
    --lp-line: #e6e3dd;

    /* Warm, because the buyer runs a restaurant - but one accent only, so the
       page reads as a product rather than a menu. */
    --lp-brand: #c2410c;
    --lp-brand-ink: #ffffff;

    --lp-radius: 14px;
    --lp-shadow: 0 1px 2px rgba(31, 27, 23, .06), 0 8px 24px rgba(31, 27, 23, .06);
    --lp-gutter: 16px;
}

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

body.lp {
    margin: 0;
    background: var(--lp-bg);
    color: var(--lp-text);
    font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.lp img { max-width: 100%; display: block; }
.lp a { color: inherit; }

/* A 16px gutter at phone width, per the house rule, and never a horizontal
   scrollbar. */
.lp-wrap {
    width: min(1180px, 100%);
    margin-inline: auto;
    padding-inline: var(--lp-gutter);
}

.lp-narrow { width: min(760px, 100%); }

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

.lp-strip {
    background: var(--lp-brand);
    color: var(--lp-brand-ink);
    text-align: center;
    font-size: 13.5px;
    padding: 8px 16px;
}

.lp-strip a { text-decoration: underline; }

/* ----------------------------------------------------------------- header */

.lp-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--lp-bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--lp-line);
}

.lp-header-row {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 64px;
}

.lp-brand { text-decoration: none; }
.lp-brand-text { font-weight: 800; font-size: 19px; letter-spacing: -.02em; }

.lp-nav {
    display: flex;
    gap: 22px;
    margin-inline: auto;
    font-size: 14.5px;
}

.lp-nav a { text-decoration: none; color: var(--lp-muted); }
.lp-nav a:hover { color: var(--lp-text); }

.lp-header-cta { display: flex; gap: 10px; align-items: center; }

/* ------------------------------------------------------------ small menu */

/*
| The phone's way into the page.
|
| A <details>, so it opens with no script at all. It is absent on a wide
| screen, where the real nav is doing the job.
*/
.lp-menu { display: none; position: relative; }

.lp-menu summary {
    list-style: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--lp-line);
    border-radius: 12px;
    cursor: pointer;
    background: var(--lp-surface);
}

.lp-menu summary::-webkit-details-marker { display: none; }
.lp-menu summary:focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 2px; }

/* Three bars drawn from one element, so the button carries no extra markup. */
.lp-menu-bars,
.lp-menu-bars::before,
.lp-menu-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--lp-text);
}

.lp-menu-bars { position: relative; }

.lp-menu-bars::before,
.lp-menu-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.lp-menu-bars::before { top: -6px; }
.lp-menu-bars::after { top: 6px; }

.lp-menu[open] .lp-menu-bars { background: transparent; }
.lp-menu[open] .lp-menu-bars::before { top: 0; transform: rotate(45deg); }
.lp-menu[open] .lp-menu-bars::after { top: 0; transform: rotate(-45deg); }

.lp-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 30;
    min-width: 210px;
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow);
}

.lp-menu-panel a {
    padding: 11px 12px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 15px;
    color: var(--lp-text);
}

.lp-menu-panel a:hover { background: var(--lp-bg-alt); }

/* The nav collapses before the buttons do: on a phone "See pricing" is the
   only thing on this bar anybody taps. */
@media (max-width: 860px) {
    .lp-nav { display: none; }
    .lp-menu { display: block; }
    .lp-header-row { justify-content: space-between; gap: 12px; }
}

@media (max-width: 520px) {
    .lp-header-cta .lp-btn-ghost { display: none; }
}

/* ---------------------------------------------------------------- buttons */

.lp-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 650;
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
}

.lp-btn-solid { background: var(--lp-brand); color: var(--lp-brand-ink); }
.lp-btn-solid:hover { filter: brightness(1.07); }

.lp-btn-ghost { border-color: var(--lp-line); color: var(--lp-text); }
.lp-btn-ghost:hover { border-color: var(--lp-brand); color: var(--lp-brand); }


.lp-btn-lg { padding: 13px 26px; font-size: 15.5px; }

/* ----------------------------------------------------------------- banner */

/*
| The page opens on this: a full-bleed carousel from Admin > Landing Page >
| Sliders (main_banner).
|
| Edge to edge on purpose. A banner that stopped at the container's 1180px
| would read as a widget sitting on the page rather than as the top of it.
*/
.lp-banner { position: relative; background: var(--lp-bg-alt); }

/*
| The track is the carousel. It scroll-snaps, so it is swipeable on a phone
| and every slide is reachable before landing.js has run - the script adds
| the dots, the arrows and the timer, not the ability to move.
|
| No scroll-behavior here on purpose: setting it in CSS would animate every
| scrollLeft the script assigns, taking the choice away from the one place
| that knows whether the reader asked for less motion.
*/
.lp-banner-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.lp-banner-track::-webkit-scrollbar { display: none; }

.lp-banner-slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    min-height: clamp(320px, 42vw, 520px);
    overflow: hidden;
    /* Until somebody uploads a picture the slide is a typeset panel rather
       than an empty grey box waiting for one. */
    background:
        radial-gradient(760px 420px at 18% 12%,
            color-mix(in srgb, var(--lp-brand) 15%, transparent), transparent 68%),
        var(--lp-bg-alt);
}

.lp-banner-media { position: absolute; inset: 0; }

.lp-banner-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lp-banner-inner { position: relative; width: min(1180px, 100%); }

.lp-banner-copy { max-width: 34rem; }

/*
| Words over a photograph need their own ink and something to sit on,
| whatever was uploaded behind them. The scrim is on the copy rather than
| over the whole picture, so the image is not dimmed where nothing is
| written.
*/
.lp-banner-slide.has-media .lp-banner-copy {
    padding: 26px 28px;
    border-radius: var(--lp-radius);
    color: #fff;
    background: linear-gradient(105deg, rgba(17, 15, 11, .74), rgba(17, 15, 11, .38));
    backdrop-filter: blur(2px);
}

.lp-banner-slide.has-media .lp-banner-text { color: rgba(255, 255, 255, .9); }

.lp-banner-title {
    margin: 0 0 12px;
    font-size: clamp(27px, 4.4vw, 46px);
    line-height: 1.1;
    letter-spacing: -.03em;
}

.lp-banner-text {
    margin: 0 0 22px;
    font-size: clamp(15px, 1.7vw, 18px);
    color: var(--lp-muted);
    max-width: 46ch;
}

/* ------------------------------------------------------- banner controls */

/* Empty until landing.js fills it, so a failed script leaves no dead
   furniture on the page. */
.lp-banner-ui:empty { display: none; }

.lp-banner-ui {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    pointer-events: none;
}

.lp-banner-ui > * { pointer-events: auto; }

.lp-banner-arrow {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--lp-line);
    border-radius: 50%;
    background: color-mix(in srgb, var(--lp-surface) 88%, transparent);
    backdrop-filter: blur(6px);
    color: var(--lp-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.lp-banner-arrow:hover { border-color: var(--lp-brand); color: var(--lp-brand); }
.lp-banner-arrow:focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 2px; }

.lp-banner-dots { display: flex; align-items: center; gap: 6px; }

/*
| The dot is 8px but the button around it is 32px: a target the size of the
| thing it draws would be a mis-tap on a phone.
*/
.lp-banner-dot {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.lp-banner-dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--lp-text) 28%, transparent);
    transition: background .18s ease, width .18s ease;
}

.lp-banner-dot:hover::before { background: var(--lp-muted); }
.lp-banner-dot.is-on::before { width: 26px; border-radius: 999px; background: var(--lp-brand); }
.lp-banner-dot:focus-visible { outline: 2px solid var(--lp-brand); border-radius: 50%; }

@media (max-width: 640px) {
    .lp-banner-slide { min-height: 340px; align-items: flex-end; padding-bottom: 76px; }
    .lp-banner-copy { max-width: none; }
    .lp-banner-ui { bottom: 14px; gap: 10px; }
    .lp-banner-arrow { width: 40px; height: 40px; font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-banner-dot::before { transition: none; }
}

/* --------------------------------------------------------------- sections */

.lp-section { padding: 68px 0; }
.lp-section-alt { background: var(--lp-bg-alt); }

.lp-head { margin-bottom: 34px; max-width: 62ch; }
.lp-head h2 { margin: 0 0 8px; font-size: clamp(23px, 3.4vw, 33px); letter-spacing: -.025em; line-height: 1.15; }
.lp-head p { margin: 0; color: var(--lp-muted); font-size: 15.5px; }

.lp-meta { color: var(--lp-muted); font-size: 13.5px; }
.lp-price { color: var(--lp-text); font-weight: 700; }

/* ----------------------------------------------------------------- grids */

.lp-grid { display: grid; gap: 20px; }
.lp-grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) { .lp-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
    .lp-grid-3 { grid-template-columns: 1fr; }
    .lp-section { padding: 52px 0; }
}

/* -------------------------------------------------------------- features */

.lp-feature {
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    padding: 22px 22px 24px;
}

.lp-feature-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    margin-bottom: 14px;
    background: color-mix(in srgb, var(--lp-brand) 12%, transparent);
    color: var(--lp-brand);
}

.lp-feature h3 { margin: 0 0 6px; font-size: 16.5px; letter-spacing: -.01em; }
.lp-feature p { margin: 0; color: var(--lp-muted); font-size: 14.5px; }

/* ----------------------------------------------------------------- steps */

.lp-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

@media (max-width: 950px) { .lp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lp-steps { grid-template-columns: 1fr; } }

.lp-step { padding-top: 18px; border-top: 2px solid var(--lp-brand); }
.lp-step-n { display: block; font-size: 12.5px; font-weight: 800; color: var(--lp-brand); letter-spacing: .08em; }
.lp-step h3 { margin: 8px 0 6px; font-size: 16.5px; letter-spacing: -.01em; }
.lp-step p { margin: 0; color: var(--lp-muted); font-size: 14.5px; }

/* ----------------------------------------------------------------- cards */

.lp-card {
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    overflow: hidden;
    box-shadow: var(--lp-shadow);
}

.lp-card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.lp-card-body { padding: 18px 20px 22px; }
.lp-card-body h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.01em; }
.lp-card-body p { margin: 0 0 6px; color: var(--lp-muted); font-size: 14.5px; }

/* --------------------------------------------------------------- pricing */

/*
 | auto-fit rather than a fixed column count, because the number of plans is
 | data: Super Admin can sell two or five, and the grid has to hold either
 | without this file knowing which.
 */
.lp-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    align-items: start;
}

.lp-plan {
    position: relative;
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    border-radius: 18px;
    padding: 28px 24px 26px;
}

/* The featured plan lifts rather than shouts: a heavier border and a shadow,
   no colour fill, so the prices stay comparable at a glance. */
.lp-plan.is-featured {
    border-color: var(--lp-brand);
    border-width: 2px;
    box-shadow: var(--lp-shadow);
}

.lp-plan-flag {
    position: absolute;
    top: -11px;
    left: 24px;
    background: var(--lp-brand);
    color: var(--lp-brand-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 999px;
}

.lp-plan h3 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.02em; }
.lp-plan-blurb { margin: 0 0 16px; color: var(--lp-muted); font-size: 14px; }

.lp-plan-price { margin: 14px 0 2px; display: flex; align-items: baseline; gap: 6px; }
.lp-plan-amount { font-size: 38px; font-weight: 800; letter-spacing: -.035em; }

.lp-plan-yearly { margin: 0 0 10px; }

.lp-plan-trial {
    margin: 0 0 18px;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--lp-brand);
}

.lp-plan-cta { display: block; text-align: center; margin-bottom: 22px; }

.lp-plan-list {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-size: 14.5px;
}

.lp-plan-list li {
    padding: 6px 0 6px 24px;
    position: relative;
    color: var(--lp-text);
}

/* A drawn tick rather than an emoji: it inherits the accent colour and does
   not change shape between platforms. */
.lp-plan-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 13px;
    width: 10px;
    height: 5px;
    border-left: 2px solid var(--lp-brand);
    border-bottom: 2px solid var(--lp-brand);
    transform: rotate(-45deg);
}

.lp-plan-modhead {
    margin: 0 0 6px;
    /* 12px is the floor for anything a buyer has to read; uppercase at
       11.5px was below it. */
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--lp-muted);
    border-top: 1px solid var(--lp-line);
    padding-top: 16px;
}

.lp-plan-mods li { color: var(--lp-muted); font-size: 14px; }

/* ------------------------------------------------------------------- faq */

.lp-faq { border-bottom: 1px solid var(--lp-line); padding: 4px 0; }

.lp-faq summary {
    cursor: pointer;
    padding: 16px 0;
    font-weight: 650;
    font-size: 16px;
    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(--lp-brand); font-weight: 700; }
.lp-faq[open] summary::after { content: "\2212"; }

.lp-faq-body { padding: 0 0 18px; color: var(--lp-muted); }

/* ------------------------------------------------------------------- cta */

.lp-cta { text-align: center; }
.lp-cta h2 { margin: 0 0 10px; font-size: clamp(24px, 3.6vw, 34px); letter-spacing: -.025em; }
.lp-cta > p { margin: 0 auto 24px; max-width: 58ch; color: var(--lp-muted); font-size: 16px; }
.lp-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }

/* ---------------------------------------------------------------- footer */

.lp-footer { border-top: 1px solid var(--lp-line); padding: 28px 0; background: var(--lp-bg); }

.lp-footer-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
    align-items: center;
    justify-content: space-between;
}

.lp-footer-row p { margin: 0; }

.lp-social { display: flex; gap: 18px; font-size: 14px; }
.lp-social a { color: var(--lp-muted); text-decoration: none; }
.lp-social a:hover { color: var(--lp-brand); }

/* ------------------------------------------------------------------ a11y */

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* The sticky header would otherwise sit on top of the heading somebody just
   jumped to. */
[id] { scroll-margin-top: 80px; }

/* ----------------------------------------------------------- screenshots */

/*
 | Two up on a wide screen, one on a phone.
 |
 | Bigger than the feature cards on purpose: the point of a screenshot is that
 | somebody can read the screen in it, and a screenshot scaled to a third of a
 | column is decoration rather than evidence.
 */
.lp-shots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 800px) { .lp-shots { grid-template-columns: 1fr; } }

.lp-shot {
    margin: 0;
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    overflow: hidden;
    box-shadow: var(--lp-shadow);
}

.lp-shot img {
    width: 100%;
    /* Not a fixed aspect ratio: screenshots arrive at whatever shape the
       screen was, and cropping one to 16:9 cuts the row somebody wanted
       looked at. */
    height: auto;
    border-bottom: 1px solid var(--lp-line);
}

.lp-shot figcaption { padding: 16px 18px 18px; }
.lp-shot figcaption strong { display: block; font-size: 16px; letter-spacing: -.01em; }
.lp-shot figcaption span { display: block; margin-top: 4px; color: var(--lp-muted); font-size: 14.5px; }

/* ---------------------------------------------------------- outlet types */

.lp-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}

.lp-type {
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    padding: 20px 18px;
    color: var(--lp-brand);
}

.lp-type h3 { margin: 10px 0 4px; font-size: 15.5px; color: var(--lp-text); letter-spacing: -.01em; }
.lp-type p { margin: 0; font-size: 14px; color: var(--lp-muted); }

/* --------------------------------------------------------- testimonials */

.lp-quote {
    margin: 0;
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    padding: 24px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lp-stars { font-size: 15px; letter-spacing: 2px; color: var(--lp-brand); line-height: 1; }

/* The unearned stars stay in place but recede, so five glyphs always occupy
   the same width and a four-star quote is not mistaken for a five. */
.lp-stars-off { color: var(--lp-line); }

.lp-quote blockquote {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--lp-text);
}

.lp-quote blockquote::before { content: "\201C"; }
.lp-quote blockquote::after { content: "\201D"; }

.lp-quote figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--lp-line);
    font-size: 14px;
}

.lp-quote figcaption img,
.lp-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.lp-avatar {
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--lp-brand) 14%, transparent);
    color: var(--lp-brand);
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .03em;
}

.lp-quote figcaption strong { display: block; }
.lp-quote figcaption .lp-meta { display: block; }

/* ---------------------------------------------------------- integrations */

.lp-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
}

.lp-logo {
    display: grid;
    place-items: center;
    min-height: 74px;
    padding: 14px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    border-radius: 12px;
    text-decoration: none;
}

/*
 | Logos arrive at wildly different shapes and weights. Capping the height and
 | letting the width follow keeps a row of them looking like a set, which is
 | the whole reason this section works.
 */
.lp-logo img {
    max-height: 34px;
    width: auto;
    object-fit: contain;
}

.lp-logo-word {
    font-size: 14.5px;
    font-weight: 650;
    color: var(--lp-muted);
    text-align: center;
}

a.lp-logo:hover { border-color: var(--lp-brand); }

/* ------------------------------------------------------------ demo form */

.lp-demo {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 900px) { .lp-demo { grid-template-columns: 1fr; gap: 28px; } }

.lp-demo-copy h2 { margin: 0 0 10px; font-size: clamp(24px, 3.6vw, 34px); letter-spacing: -.025em; }
.lp-demo-copy > p { margin: 0 0 20px; color: var(--lp-muted); font-size: 16px; max-width: 46ch; }

.lp-demo-contacts { display: grid; gap: 10px; margin-bottom: 16px; }

.lp-demo-contacts a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    color: var(--lp-text);
    width: fit-content;
}

.lp-demo-contacts a:hover { color: var(--lp-brand); }

.lp-demo-form {
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    border-radius: 18px;
    padding: 26px 24px;
    box-shadow: var(--lp-shadow);
}

.lp-demo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (max-width: 520px) { .lp-demo-grid { grid-template-columns: 1fr; } }

.lp-field { margin: 0; }
.lp-field-full { grid-column: 1 / -1; }

.lp-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--lp-muted);
}

.lp-field input,
.lp-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--lp-line);
    border-radius: 9px;
    background: var(--lp-bg);
    color: var(--lp-text);
    /* 16px, so iOS does not zoom the page when the field is focused. */
    font: inherit;
    font-size: 16px;
}

.lp-field textarea { resize: vertical; min-height: 76px; }

.lp-field input:focus-visible,
.lp-field textarea:focus-visible {
    outline: 2px solid var(--lp-brand);
    outline-offset: 1px;
    border-color: transparent;
}

.lp-demo-note { margin: 14px 0 16px; font-size: 13px; color: var(--lp-muted); }

.lp-demo-form button { width: 100%; text-align: center; }

.lp-demo-thanks {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, #16a34a 12%, transparent);
    color: #15803d;
    font-size: 14.5px;
    font-weight: 600;
}

.lp-demo-errors {
    margin: 0 0 16px;
    padding: 12px 14px 12px 32px;
    border-radius: 10px;
    background: color-mix(in srgb, #b91c1c 10%, transparent);
    color: #b91c1c;
    font-size: 14px;
}

/*
 | The honeypot.
 |
 | Moved off-screen rather than `display:none`: some bots skip anything that is
 | display-none, and a field they skip is a field that catches nothing. It is
 | also aria-hidden and tabindex="-1" in the markup, so nobody using a screen
 | reader or a keyboard ever meets it.
 */
.lp-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}