/*
 * Shared UI styles for the public site, the error pages and the panel screens
 * that preview a landing section.
 * Externalized for CodeCanyon compliance (no inline CSS / JS in Blade).
 */

/* Typography ------------------------------------------------------- */
body { font-family: 'Inter', system-ui, sans-serif; }
.font-display { font-family: 'Inter Tight', 'Inter', sans-serif; }

/* Alpine cloak ----------------------------------------------------- */
[x-cloak] { display: none !important; }

/* Sidebar active nav ---------------------------------------------- */
.nav-active { background: linear-gradient(to right, rgba(99, 102, 241, .12), rgba(139, 92, 246, .06)); }

/* Thin scrollbar --------------------------------------------------- */
.scroll-thin::-webkit-scrollbar { width: 6px; }
.scroll-thin::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .3); border-radius: 9999px; }

/* Dot grid patterns (landing / auth) ------------------------------ */
.lp-dots        { background-image: radial-gradient(circle at 1px 1px, rgb(99 102 241 / 0.15) 1px, transparent 0); background-size: 32px 32px; }
.lp-dots-soft   { background-image: radial-gradient(circle at 1px 1px, rgb(99 102 241 / 0.12) 1px, transparent 0); background-size: 32px 32px; }
.lp-dots-white  { background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 24px 24px; }
.lp-dots-white-lg { background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 28px 28px; }
.lp-dots-auth   { background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 22px 22px; }

/* Gradient text (404 / 500) --------------------------------------- */
.lp-gradient-text {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Mockup mini bar-chart (hero) ------------------------------------ */
.lp-chart { height: 80px; }
.lp-bar-45 { height: 45%; }
.lp-bar-55 { height: 55%; }
.lp-bar-60 { height: 60%; }
.lp-bar-70 { height: 70%; }
.lp-bar-75 { height: 75%; }
.lp-bar-85 { height: 85%; }
.lp-bar-95 { height: 95%; }

/* Progress bar width (data-driven via --pct) ---------------------- */
.ui-progress { width: var(--pct, 0%); }

/* Flash toasts live in app.css (the component layer), which every layout
   loads. Defining them here instead would leave every screen that does not
   load this file showing its flash messages as unstyled markup, which is to
   say showing them to nobody. Do not add them here.                    */

/* =================================================================
   LANDING PAGE  —  the VeroSMS identity
   Namespace: .lp-*   (self-contained; independent of the Tailwind build)
   Palette: indigo/violet (the product) + emerald (sent and confirmed)

   Everything under .lp-* describes one thing: a message leaving a phone you
   own and arriving. Anything named after a subject this product does not have
   is how a visitor ends up reading a page that disagrees with its own
   headline, so a new rule here earns its name from the send.
================================================================= */
:root {
    --lp-ink: #0b1220;
    --lp-body: #475569;
    --lp-muted: #94a3b8;
    --lp-line: #e6e8ef;
    --lp-bg: #ffffff;
    --lp-bg-soft: #f7f8fc;
    --lp-indigo: #6366f1;
    --lp-indigo-d: #4f46e5;
    --lp-violet: #7c3aed;
    --lp-emerald: #10b981;
    --lp-emerald-d: #059669;
    --lp-grad: linear-gradient(135deg, #6366f1 0%, #7c3aed 55%, #4f46e5 100%);
    --lp-grad-em: linear-gradient(135deg, #10b981, #059669);
    --lp-shadow: 0 22px 60px -20px rgba(79, 70, 229, .28);
    --lp-shadow-sm: 0 8px 24px -12px rgba(15, 23, 42, .18);
    --lp-radius: 22px;

    /*  Added for the dark break and the bento zone. Three only — a token set
        that grows every time somebody wants a slightly different grey stops
        being a system.  */
    --lp-deep: #0f1629;
    --lp-deep-soft: #1a2340;
    --lp-bg-tint: #f4f2ff;
}

.lp { color: var(--lp-body); background: var(--lp-bg); overflow-x: hidden; }
.lp ::selection { background: rgba(99, 102, 241, .18); }

/* Layout ----------------------------------------------------------- */
.lp-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/*  ONE RULE INSTEAD OF FIFTEEN COPIES OF THE SAME min-width:0.
 *
 *  A grid child defaults to min-width:auto, meaning it refuses to shrink below
 *  its own content. So one long thing inside any column — a support email
 *  address, a street address on one line, a screenshot wider than its track —
 *  stops the column shrinking, and the whole page scrolls sideways on a phone.
 *
 *  It hides well: the parent looks correct, the overflow is on a child several
 *  levels down, and it only appears at widths narrower than the content. Fixing
 *  it per-grid means fixing it again for every grid added later, so it is
 *  declared once for the grids on this page.
 *
 *  min-width:0 only removes the refusal to shrink. Anything that should NOT
 *  shrink is still free to say so on its own rule.  */
.lp-hero-grid > *, .lp-stats > *, .lp-steps > *, .lp-bento > *,
.lp-split > *, .lp-foot-grid > *, .lp-life > *, .lp-facts > *,
.lp-compare > *, .lp-contact-grid > *, .lp-contact-side > * { min-width: 0; }

/*  The companion to the rule above. min-width:0 lets the COLUMN shrink; this
 *  stops a single unbreakable string from spilling out of it once it has.  */
.lp-contact-grid a[href^="mailto:"], .lp-contact-grid a[href^="tel:"],
.lp-foot-grid a { overflow-wrap: break-word; }
.lp-section { position: relative; padding: 96px 0; }
.lp-section--tight { padding: 64px 0; }
.lp-section--soft { background: var(--lp-bg-soft); }

/*  Used ONCE, on the bento. A faint violet wash reads as a deliberate zone;
    the same tint on three sections would read as the page's background.      */
.lp-tint { background: var(--lp-bg-tint); }
.lp-center { text-align: center; }

.lp-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--lp-indigo-d); background: rgba(99, 102, 241, .08);
    border: 1px solid rgba(99, 102, 241, .16);
}
.lp-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lp-emerald); box-shadow: 0 0 0 4px rgba(16,185,129,.15); }

.lp-h1 { font-family: 'Inter Tight','Inter',sans-serif; font-weight: 800; font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1.04; letter-spacing: -.025em; color: var(--lp-ink); }
.lp-h2 { font-family: 'Inter Tight','Inter',sans-serif; font-weight: 800; font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.1; letter-spacing: -.02em; color: var(--lp-ink); }
.lp-h3 { font-family: 'Inter Tight','Inter',sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--lp-ink); letter-spacing: -.01em; }
.lp-lead { font-size: clamp(1.02rem, 1.5vw, 1.22rem); line-height: 1.65; color: var(--lp-body); }
.lp-grad-text { background: var(--lp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-grad-em-text { background: var(--lp-grad-em); -webkit-background-clip: text; background-clip: text; color: transparent; }

.lp-head { max-width: 660px; margin: 0 auto 56px; }
.lp-head .lp-lead { margin-top: 16px; }

/* Buttons ---------------------------------------------------------- */
.lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 24px; border-radius: 14px; font-weight: 600; font-size: 15px;
    cursor: pointer; border: 1px solid transparent; transition: transform .2s, box-shadow .2s, background .2s, color .2s;
    text-decoration: none; white-space: nowrap;
}
.lp-btn-primary { color: #fff; background: var(--lp-grad); box-shadow: 0 12px 30px -10px rgba(79,70,229,.55); }
.lp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(79,70,229,.65); }
.lp-btn-ghost { color: var(--lp-ink); background: #fff; border-color: var(--lp-line); box-shadow: var(--lp-shadow-sm); }
.lp-btn-ghost:hover { transform: translateY(-2px); border-color: #cfd3e2; }
.lp-btn-light { color: var(--lp-indigo-d); background: #fff; }
.lp-btn-light:hover { transform: translateY(-2px); }
.lp-btn-outline-light { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.lp-btn-outline-light:hover { background: rgba(255,255,255,.14); }
.lp-btn-lg { padding: 15px 28px; font-size: 16px; }

/* Aurora / mesh background ---------------------------------------- */
.lp-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.lp-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.lp-blob-1 { width: 520px; height: 520px; top: -160px; left: -120px; background: radial-gradient(circle, rgba(124,58,237,.5), transparent 70%); }
.lp-blob-2 { width: 460px; height: 460px; top: -80px; right: -120px; background: radial-gradient(circle, rgba(99,102,241,.45), transparent 70%); }
.lp-blob-3 { width: 400px; height: 400px; bottom: -160px; left: 30%; background: radial-gradient(circle, rgba(16,185,129,.32), transparent 70%); }
.lp-grid-bg { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 75%); }

/* Header ----------------------------------------------------------- */
.lp-nav { position: sticky; top: 0; z-index: 50; transition: background .3s, box-shadow .3s, border-color .3s; border-bottom: 1px solid transparent; }
.lp-nav.is-scrolled { background: rgba(255,255,255,.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: var(--lp-line); box-shadow: 0 6px 30px -18px rgba(15,23,42,.25); }
.lp-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.lp-brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--lp-grad); box-shadow: 0 10px 22px -8px rgba(79,70,229,.6); color: #fff; }
.lp-brand-name { font-family: 'Inter Tight','Inter',sans-serif; font-weight: 800; font-size: 1.18rem; color: var(--lp-ink); letter-spacing: -.02em; }
/*  THE GAP SHRINKS BEFORE THE MENU DOES.
 *
 *  A full menu is seven entries — the four sections, the two policy pages and
 *  the way in — and seven entries at a fixed 34px gap fit the 1160px container
 *  and nothing narrower. Just above the 900px breakpoint the row would wrap
 *  inside a header whose height is fixed, which puts half the menu outside it.
 *
 *  Scaling the gap with the viewport keeps the wide layout exactly as drawn
 *  and closes the links up as the window narrows, so the row still fits at the
 *  moment the mobile menu takes over. nowrap is the guarantee: if it ever does
 *  not fit, it must not silently become two lines.  */
.lp-nav-links { display: none; align-items: center; gap: clamp(16px, 2.4vw, 34px); flex-wrap: nowrap; }
.lp-nav-links a { color: var(--lp-body); font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .2s; }
.lp-nav-links a:hover { color: var(--lp-indigo-d); }
.lp-nav-cta { display: flex; align-items: center; gap: 12px; }
.lp-nav-signin { display: none; color: var(--lp-ink); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.lp-burger { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--lp-line); background: #fff; color: var(--lp-ink); cursor: pointer; }
.lp-mobile { border-top: 1px solid var(--lp-line); background: #fff; padding: 16px 0 22px; }
.lp-mobile a { display: block; padding: 11px 0; color: var(--lp-ink); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--lp-bg-soft); }
@media (min-width: 900px) { .lp-nav-links { display: flex; } .lp-nav-signin { display: inline; } .lp-burger { display: none; } }

/* Hero ------------------------------------------------------------- */
.lp-hero { position: relative; padding: 74px 0 90px; }
.lp-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
.lp-hero-copy .lp-h1 { margin: 20px 0 22px; }
.lp-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.lp-hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 30px; }
.lp-hero-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--lp-body); font-weight: 500; }
.lp-hero-trust svg { color: var(--lp-emerald); }
/*  The right-hand column: either an uploaded screenshot or the .lp-flow
 *  illustration that stands in until there is one.
 *
 *  min-width:0 is the part that is not obvious. A grid child defaults to
 *  min-width:auto, which refuses to shrink below its content — so a screenshot
 *  wider than the column pushes the whole grid out and the page scrolls
 *  sideways on a phone. Every fix that does not include this line is a fix for
 *  one screenshot size.
 *
 *  position:relative anchors .lp-flow-chip, which sits at top:-18px and
 *  bottom:-18px; overflow stays visible so those chips are not clipped.  */
.lp-hero-visual { position: relative; min-width: 0; }
.lp-hero-visual > * { max-width: 100%; }

@media (min-width: 980px) { .lp-hero-grid { grid-template-columns: 1.05fr .95fr; } }

/*  THE HERO SCREENSHOT RUNS TO THE EDGE OF THE WINDOW.
 *
 *  Inside the 1160px container the visual column is about 500px wide. A
 *  screenshot of a full application shown at 500px is roughly a quarter of its
 *  captured size, and interface text does not survive that — the most
 *  important image on the page was also the smallest.
 *
 *  Letting it run past the container to the window edge buys back around 40%
 *  more width on a wide monitor, and reads as deliberate: the product carries
 *  on beyond the frame rather than sitting in a box.
 *
 *  margin-inline-end, not margin-right, because this product ships RTL
 *  languages — the logical property flips with the document direction and a
 *  physical one would send the image off the wrong side.
 *
 *  overflow-x: clip on the section, not hidden: `hidden` would make the
 *  section a scroll container and quietly break `scroll-smooth` anchor jumps
 *  from the navigation. `clip` trims the overflow without that side effect.
 *
 *  Scoped to .is-shot so the built-in illustration never does this — see the
 *  note in hero.blade.php.                                                   */
@media (min-width: 1280px) {
    .lp-hero { overflow-x: clip; }

    .lp-hero-grid { grid-template-columns: 1fr 1.08fr; }

    /*  IT STOPS SHORT OF THE EDGE ON PURPOSE.
     *
     *  The first version ran the screenshot all the way to the window edge
     *  with its right corners squared off. Every pixel was on screen, but it
     *  read as CUT — a picture that meets the edge of the window with a
     *  straight edge looks like a picture that continues past it, and the eye
     *  cannot tell "bled deliberately" from "clipped by accident".
     *
     *  Leaving a gutter and keeping the rounding gives the image a visible
     *  right-hand edge, so it reads as whole. It also keeps clear of the
     *  scrollbar: 100vw includes the scrollbar width in most browsers, so a
     *  bleed calculated to land exactly on 100vw lands slightly past it and
     *  really is clipped, by 15-17px, on any page tall enough to scroll.
     *
     *  Still roughly 340px wider than the container allows — most of the size
     *  gain, none of the ambiguity.                                          */
    .lp-hero-visual.is-shot {
        margin-inline-end: calc((100vw - min(100vw, 1160px)) / -2 + 40px);
    }
}

/* Hero animated send flow ------------------------------------------ */
.lp-flow { position: relative; padding: 26px; border-radius: 26px; background: linear-gradient(180deg, #ffffff, #fbfbff); border: 1px solid var(--lp-line); box-shadow: var(--lp-shadow); }
.lp-flow-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.lp-flow-title { font-weight: 700; color: var(--lp-ink); font-size: 14.5px; }
.lp-flow-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--lp-emerald-d); background: rgba(16,185,129,.1); padding: 5px 10px; border-radius: 999px; }
.lp-flow-badge .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-emerald); animation: lpPulse 1.6s infinite; }
.lp-flow-steps { display: flex; flex-direction: column; gap: 12px; }
.lp-step { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--lp-line); opacity: .45; transform: translateY(4px); animation: lpStep 6s infinite; }
.lp-step .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; color: #fff; background: var(--lp-grad); }
.lp-step .ic.em { background: var(--lp-grad-em); }
.lp-step .tx b { display: block; color: var(--lp-ink); font-size: 14px; font-weight: 700; }
.lp-step .tx small { color: var(--lp-muted); font-size: 12px; }
.lp-step .chk { margin-left: auto; color: var(--lp-emerald); opacity: 0; transition: opacity .3s; }
.lp-step:nth-child(1) { animation-delay: 0s; } .lp-step:nth-child(1) .chk { animation: lpChk 6s infinite 0s; }
.lp-step:nth-child(2) { animation-delay: 1.2s; } .lp-step:nth-child(2) .chk { animation: lpChk 6s infinite 1.2s; }
.lp-step:nth-child(3) { animation-delay: 2.4s; } .lp-step:nth-child(3) .chk { animation: lpChk 6s infinite 2.4s; }
.lp-step:nth-child(4) { animation-delay: 3.6s; } .lp-step:nth-child(4) .chk { animation: lpChk 6s infinite 3.6s; }
.lp-flow-foot { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--lp-line); display: flex; align-items: center; justify-content: space-between; }
.lp-flow-foot .amt { font-family: 'Inter Tight'; font-weight: 800; color: var(--lp-ink); font-size: 1.15rem; }
.lp-flow-foot .lbl { font-size: 11.5px; color: var(--lp-muted); }
.lp-flow-chip { position: absolute; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: var(--lp-shadow-sm); border: 1px solid var(--lp-line); font-size: 12.5px; font-weight: 600; color: var(--lp-ink); display: flex; align-items: center; gap: 8px; }
.lp-flow-chip.a { top: -18px; right: 24px; animation: lpFloat 4s ease-in-out infinite; }
.lp-flow-chip.b { bottom: -18px; left: 18px; animation: lpFloat 4.6s ease-in-out infinite .5s; }
.lp-flow-chip svg { color: var(--lp-emerald); }

@keyframes lpPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); } 70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } }
@keyframes lpFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes lpStep { 0%,12% { opacity: .45; transform: translateY(4px); } 18%,42% { opacity: 1; transform: translateY(0); box-shadow: 0 12px 28px -14px rgba(79,70,229,.5); } 55%,100% { opacity: .55; transform: translateY(0); box-shadow: none; } }
@keyframes lpChk { 0%,15% { opacity: 0; } 25%,100% { opacity: 1; } }

/* Stats ------------------------------------------------------------ */
.lp-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.lp-stat { text-align: center; padding: 26px 18px; border-radius: 20px; background: #fff; border: 1px solid var(--lp-line); box-shadow: var(--lp-shadow-sm); }
.lp-stat .num { font-family: 'Inter Tight'; font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: -.02em; }
.lp-stat .lbl { margin-top: 8px; font-size: 13.5px; color: var(--lp-muted); font-weight: 500; }
@media (min-width: 800px) { .lp-stats { grid-template-columns: repeat(4, 1fr); } }

/* How it works (timeline) ----------------------------------------- */
.lp-steps { display: grid; grid-template-columns: 1fr; gap: 22px; }
.lp-hstep { position: relative; padding: 28px 24px; border-radius: var(--lp-radius); background: #fff; border: 1px solid var(--lp-line); box-shadow: var(--lp-shadow-sm); transition: transform .25s, box-shadow .25s; }
.lp-hstep:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow); }
.lp-hstep .n { position: absolute; top: 20px; right: 22px; font-family: 'Inter Tight'; font-weight: 800; font-size: 2.4rem; color: rgba(99,102,241,.12); line-height: 1; }
.lp-hstep .ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(124,58,237,.12)); color: var(--lp-indigo-d); margin-bottom: 18px; }
.lp-hstep h3 { margin-bottom: 8px; }
.lp-hstep p { font-size: 14.5px; line-height: 1.6; }
@media (min-width: 720px) { .lp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .lp-steps.cols-5 { grid-template-columns: repeat(5, 1fr); } .lp-steps.cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* Features (bento) ------------------------------------------------- */
/*  BENTO — tiles of unequal size, because the features are of unequal
    importance. Delivery reports are why somebody buys a gateway; the dark
    theme is a nice-to-have, and eleven identical boxes say the two matter
    the same.

    The grid is four columns and the tiles claim spans. Nothing is positioned
    absolutely and no tile knows its neighbours, so the operator can add,
    remove or resize a tile from the admin panel and the rest simply reflow.

    Gutter is 20px here and everywhere else on the page. Uneven gutters are
    what make a modular layout read as accidental rather than designed.        */
.lp-bento { display: grid; grid-template-columns: 1fr; gap: 20px; }

.lp-tile { display: flex; flex-direction: column; gap: 14px; overflow: hidden;
           padding: 24px; border-radius: var(--lp-radius); background: #fff;
           border: 1px solid var(--lp-line); box-shadow: var(--lp-shadow-sm);
           transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }

/*  transform and box-shadow only. Animating anything that affects layout
    forces a reflow on every frame and drops the hover to single figures on a
    mid-range phone.                                                           */
.lp-tile:hover { transform: translateY(-6px); box-shadow: var(--lp-shadow); border-color: rgba(99,102,241,.3); }

.lp-tile-ic { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0;
              border-radius: 14px; color: #fff; background: var(--lp-grad);
              box-shadow: 0 12px 24px -10px rgba(79,70,229,.55); }

/*  Same problem as the lifecycle dots, different reason for solving it.
 *
 *  The tiles are not a sequence, so there is nothing to progress THROUGH — the
 *  variation here is only so that seven identical purple squares stop reading
 *  as wallpaper. It cycles every four rather than climbing, and stays inside a
 *  narrow band so the grid still looks like one family and not a paint chart.  */
.lp-tile:nth-child(4n+2) .lp-tile-ic { filter: hue-rotate(22deg); }
.lp-tile:nth-child(4n+3) .lp-tile-ic { filter: hue-rotate(-18deg); }
.lp-tile:nth-child(4n+4) .lp-tile-ic { filter: hue-rotate(44deg); }

/*  The screenshot bleeds to the tile's edges — a framed image inside a framed
    card is two borders doing one job.                                         */
.lp-tile-shot { margin: -24px -24px 0; }
.lp-tile-shot img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--lp-line); }

/*  THE SIDEWAYS LAYOUT FOR TILES THAT HAVE NO SCREENSHOT.
 *
 *  Only applies where the tile is actually wider than one column — a small
 *  tile is already the right shape for a stacked icon and does not want this.
 *  Icon to the left, text taking the rest, so a full-width tile reads as a
 *  deliberate wide row instead of a narrow card that got stretched.
 *
 *  Nothing here is undone later: uploading an image removes is-flat from the
 *  markup, and the tile goes back to picture-on-top with no CSS to revisit.  */
@media (min-width: 900px) {
    .lp-tile--wide.is-flat,
    .lp-tile--lg.is-flat { flex-direction: row; align-items: flex-start; gap: 18px; }

    .lp-tile--wide.is-flat .lp-tile-body,
    .lp-tile--lg.is-flat   .lp-tile-body { padding-top: 2px; }

    /*  The text was set to run the full width of a four-column tile, which is
        a ~90 character line — roughly twice a comfortable reading measure.  */
    .lp-tile--wide.is-flat .lp-tile-body p,
    .lp-tile--lg.is-flat   .lp-tile-body p { max-width: 62ch; }
}

.lp-tile-body { display: flex; flex-direction: column; gap: 8px; }
.lp-tile-body p { font-size: 14.5px; line-height: 1.6; margin: 0; }

/*  Larger tiles get more room, not more content. Cramming a big tile is how
    the size stops reading as emphasis.                                        */
@media (min-width: 780px) {
    .lp-bento { grid-template-columns: repeat(2, 1fr); }
    .lp-tile--lg, .lp-tile--wide { grid-column: span 2; }
}

@media (min-width: 1040px) {
    .lp-bento { grid-template-columns: repeat(4, 1fr); }
    .lp-tile--sm   { grid-column: span 1; }
    .lp-tile--wide { grid-column: span 2; }
    .lp-tile--lg   { grid-column: span 2; grid-row: span 2; padding: 28px; }

    /*  A tall tile is a frame for a tall picture. With no picture in it, the
        extra row is just empty, so an imageless lg takes one row like
        everything else and stops advertising the hole.  */
    .lp-tile--lg.is-flat { grid-row: span 1; }

    /*  THE LAST TILE CLOSES THE GRID.
     *
     *  The seven default tiles span 2+1+1+1+1+2+2 = 10 cells across four
     *  columns, so the final row was half empty — a two-cell hole at the
     *  bottom right. It is invisible below 1200px, where lg and wide both
     *  become full width, which is why it survives most checks.
     *
     *  Spanning the last tile to the end of the row removes it: the first six
     *  span exactly 8, two complete rows, and the seventh becomes the closing
     *  full-width band. It also means an operator adding or removing a tile
     *  in admin can never leave a ragged bottom edge — the last row is full by
     *  construction rather than by counting.  */
    .lp-bento > .lp-tile:last-child { grid-column: 1 / -1; }
    .lp-tile--lg .lp-tile-shot { margin: -28px -28px 0; }
    .lp-tile--lg .lp-h3 { font-size: 1.35rem; }
}
@media (min-width: 700px) { .lp-bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .lp-bento.cols-3 { grid-template-columns: repeat(3, 1fr); } .lp-bento.cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* Security split --------------------------------------------------- */
.lp-split { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
.lp-check-list { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
.lp-check { display: flex; gap: 14px; align-items: flex-start; }
.lp-check .ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(16,185,129,.12); color: var(--lp-emerald-d); flex-shrink: 0; margin-top: 2px; }
.lp-check b { color: var(--lp-ink); display: block; font-size: 15px; }
.lp-check span { font-size: 14px; }
.lp-shield { position: relative; display: grid; place-items: center; padding: 50px; border-radius: 28px; background: var(--lp-grad); box-shadow: var(--lp-shadow); overflow: hidden; }
.lp-shield::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1px, transparent 0); background-size: 22px 22px; }
.lp-shield svg { position: relative; color: #fff; width: 120px; height: 120px; filter: drop-shadow(0 12px 30px rgba(0,0,0,.3)); }
@media (min-width: 900px) { .lp-split { grid-template-columns: 1fr 1fr; } }

/* FAQ -------------------------------------------------------------- */
.lp-faq { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.lp-faq-item { border: 1px solid var(--lp-line); border-radius: 16px; background: #fff; overflow: hidden; }
.lp-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; background: none; border: 0; cursor: pointer; text-align: left; font-weight: 600; color: var(--lp-ink); font-size: 15.5px; }
.lp-faq-q .pm { flex-shrink: 0; transition: transform .3s; color: var(--lp-indigo); }
.lp-faq-item.open .pm { transform: rotate(45deg); }
.lp-faq-a { padding: 0 22px; max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; }
.lp-faq-item.open .lp-faq-a { padding: 0 22px 22px; max-height: 400px; }
.lp-faq-a p { font-size: 14.5px; line-height: 1.65; }

/* CTA band --------------------------------------------------------- */
.lp-cta { position: relative; overflow: hidden; border-radius: 30px; padding: 66px 34px; text-align: center; background: var(--lp-grad); box-shadow: var(--lp-shadow); }
.lp-cta::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 1px, transparent 0); background-size: 26px 26px; }
.lp-cta > * { position: relative; z-index: 1; }
.lp-cta h2 { color: #fff; font-family: 'Inter Tight'; font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -.02em; }
.lp-cta p { color: rgba(255,255,255,.9); margin: 14px auto 0; max-width: 540px; font-size: 1.05rem; }
.lp-cta-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }

/* Footer ----------------------------------------------------------- */
.lp-footer { background: #0b1220; color: #94a3b8; padding: 66px 0 30px; }
.lp-footer .lp-brand-name { color: #fff; }
.lp-foot-grid { display: grid; grid-template-columns: 1fr; gap: 34px; }
.lp-foot-about { max-width: 320px; font-size: 14px; line-height: 1.7; margin-top: 16px; }
.lp-foot-col h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; }
.lp-foot-col a { display: block; color: #94a3b8; text-decoration: none; padding: 6px 0; font-size: 14px; transition: color .2s; }
.lp-foot-col a:hover { color: #fff; }
.lp-foot-bottom { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; font-size: 13px; }
@media (min-width: 780px) { .lp-foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

/* Scroll reveal ---------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .lp-step, .lp-step .chk, .lp-flow-chip, .lp-flow-badge .pulse { animation: none !important; }
    .lp-step { opacity: 1; }
}

/* Helpers (avoid inline styles in Blade) --------------------------- */
.lp-mt-2 { margin-top: 16px; }
.lp-mt-4 { margin-top: 28px; }
.lp-w-full { width: 100%; }
.lp-btn-sm { padding: 10px 18px; }
.lp-logo-img { height: 38px; width: auto; max-width: 170px; object-fit: contain; }
.lp-logo-img--foot { height: 34px; max-width: 160px; filter: brightness(0) invert(1); }
/*  height:auto is load-bearing, not tidying.
 *
 *  Every <img> on this page carries explicit width and height attributes so the
 *  browser can reserve the right box before the file arrives (no layout shift).
 *  Those attributes are also a real height. Scaling the width to 100% while the
 *  height attribute stays put stretches the picture — and it does it only on
 *  viewports narrower than the image, which is why it survives a desktop check.
 *  height:auto lets the height follow the width and keeps the aspect ratio.  */
.lp-media { width: 100%; height: auto; border-radius: 24px; box-shadow: var(--lp-shadow); }
.lp-mobile-cta { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.lp-ic-em { color: var(--lp-emerald); }
.lp-secure-note { display: inline-flex; align-items: center; gap: 8px; }
.lp-head .lp-h2 { margin-top: 16px; }
.lp-title-mt { margin-top: 16px; }

/* Header responsive fix (no horizontal overflow on mobile) --------- */
@media (max-width: 899px) {
    .lp-nav-cta .lp-btn-primary { display: none; }
    .lp-nav-inner { height: 64px; }
}
html { overflow-x: hidden; }

/* Contact ---------------------------------------------------------- */
.lp-contact-card { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: var(--lp-radius); background: #fff; border: 1px solid var(--lp-line); box-shadow: var(--lp-shadow-sm); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.lp-contact-card:hover { transform: translateY(-3px); box-shadow: var(--lp-shadow); }
.lp-contact-card .ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #fff; background: var(--lp-grad); flex-shrink: 0; }
.lp-contact-card dl { margin: 0; }
.lp-contact-card dt { color: var(--lp-ink); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.lp-contact-card dd { margin: 0; color: var(--lp-body); font-size: 15px; }
/*  A row that is not a link is still a card, and must not look like a broken
    one: address and opening hours have nothing to tap, so they lose the hover
    lift rather than pretending to be clickable.  */
.lp-contact-card--static { cursor: default; }
.lp-contact-card--static:hover { transform: none; box-shadow: var(--lp-shadow-sm); }

/* Policy pages ----------------------------------------------------- */
.lp-doc { max-width: 800px; margin: 0 auto; }
.lp-doc h2 { font-family: 'Inter Tight'; font-weight: 700; color: var(--lp-ink); font-size: 1.3rem; margin: 34px 0 12px; }
.lp-doc p { line-height: 1.75; margin: 0 0 14px; }

/* Message lifecycle ------------------------------------------------

   A LINE, NOT A GRID.

   Six steps in order, with the connector drawn on the container rather than
   as an element per step — so adding or removing a step from the admin panel
   cannot leave a line pointing at nothing.

   Mobile runs vertically with the connector down the left, because six
   horizontal steps on a phone means either unreadable text or a horizontal
   scroll, and horizontal scroll on a landing page is a bug.
   ------------------------------------------------------------------- */
.lp-life { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px 0;
           position: relative; grid-template-columns: 1fr; }

.lp-life-step { position: relative; display: flex; align-items: flex-start; gap: 14px;
                padding-left: 4px; }

.lp-life-dot { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
               border-radius: 14px; color: #fff; background: var(--lp-grad);
               box-shadow: var(--lp-shadow-sm); position: relative; z-index: 1; }

/*  A HUE PROGRESSION ACROSS THE SIX STEPS.
 *
 *  One indigo gradient on every dot renders six distinct stages as a single
 *  repeating texture, and the eye slides straight past them. Shifting the hue
 *  a little per step makes the row read as movement — which is the only thing
 *  this section is trying to say: an API call at one end, a delivery report at
 *  the other.
 *
 *  Done with hue-rotate on the shared gradient rather than six hand-written
 *  gradients, so there is one definition of the brand colour and this stays a
 *  variation of it. White icons are unaffected: hue-rotate does nothing to
 *  pure white. Adding a seventh step needs no new rule — it simply repeats the
 *  last shift, which is a great deal better than a missing colour.  */
.lp-life-step:nth-child(2) .lp-life-dot { filter: hue-rotate(14deg); }
.lp-life-step:nth-child(3) .lp-life-dot { filter: hue-rotate(28deg); }
.lp-life-step:nth-child(4) .lp-life-dot { filter: hue-rotate(42deg); }
.lp-life-step:nth-child(5) .lp-life-dot { filter: hue-rotate(56deg); }
.lp-life-step:nth-child(n+6) .lp-life-dot { filter: hue-rotate(70deg); }

.lp-life-body b { display: block; color: var(--lp-ink); font-size: 15px; font-weight: 700;
                  line-height: 1.3; }
.lp-life-body small { display: block; margin-top: 4px; color: var(--lp-body); font-size: 13px;
                      line-height: 1.55; }

/*  The vertical connector on mobile. Sits behind the dots (z-index above) and
    stops at the last step rather than running off the end.  */
.lp-life-step:not(:last-child)::before {
    content: ""; position: absolute; left: 26px; top: 44px; bottom: -24px;
    width: 2px; background: var(--lp-line);
}

@media (min-width: 900px) {
    .lp-life { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0 18px; }

    .lp-life-step { flex-direction: column; align-items: center; text-align: center;
                    padding: 0 6px; }

    /*  Horizontal connector, drawn from each step to the next. Uses the same
        :not(:last-child) rule so the final step never trails a line.  */
    .lp-life-step:not(:last-child)::before {
        left: calc(50% + 30px); right: auto; top: 21px; bottom: auto;
        width: calc(100% - 60px); height: 2px;
    }

    .lp-life-body { margin-top: 12px; }
    .lp-life-body small { max-width: 22ch; margin-inline: auto; }
}

/*  Steps arrive one after another as the section scrolls in, which is what
    makes it read as a sequence rather than a row. The delay is per-step via
    the --i custom property set in the markup.

    Only inside .reveal.is-in, so it runs once and never on load.  */
.lp-life.is-in .lp-life-step { animation: lpLifeIn .5s var(--ease) both;
                               animation-delay: calc(var(--i) * 90ms); }
@keyframes lpLifeIn { from { opacity: 0; transform: translateY(10px); } }

/* Dark break -------------------------------------------------------

   The page's ONE dark section. Its first job is rhythm: a dozen sections on
   white reads as flat however good each one is, and a single dark band about
   two-thirds down resets the eye. Its second job is contrast — a light
   product UI has more of it here than anywhere else on the page.

   Deliberately not a gradient. The brand gradient is reserved for four
   elements (mark, active nav, primary button, accent bar); using it for a
   whole section background would turn a signature into wallpaper.
   ------------------------------------------------------------------- */
.lp-dark { background: var(--lp-deep); color: rgba(255,255,255,.72); }
.lp-dark .lp-h2 { color: #fff; }
.lp-dark .lp-lead { color: rgba(255,255,255,.66); }

.lp-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
            max-width: 900px; margin: 0 auto; }
.lp-fact { padding: 22px 18px; border-radius: 18px; text-align: center;
           background: var(--lp-deep-soft); border: 1px solid rgba(255,255,255,.08); }
.lp-fact .v { display: block; font-family: 'Inter Tight','Inter',sans-serif; font-weight: 800;
              font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; color: #fff;
              letter-spacing: -.02em; }
.lp-fact .l { display: block; margin-top: 8px; font-size: 13px; color: rgba(255,255,255,.55); }

@media (min-width: 820px) { .lp-facts { grid-template-columns: repeat(4, 1fr); } }

/*  The screenshot sits in a frame with a hairline and a soft glow, so a light
    UI does not float unattached on the dark ground.  */
.lp-dark-shot { margin: 44px auto 0; max-width: 1000px; padding: 0; }
.lp-dark-shot img { display: block; width: 100%; height: auto; border-radius: 14px;
                    border: 1px solid rgba(255,255,255,.12);
                    box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); }

/* Before / after comparison ----------------------------------------

   Two columns that read as a contrast without either one being decorative.
   The "before" side is deliberately duller — a hairline border, muted text,
   no shadow — so the eye lands on the right-hand column without needing an
   arrow or a colour to point at it.

   Both images are optional. With none uploaded these are two readable lists,
   which is the whole reason this survives a fresh install where the old
   version would have shown empty frames.
   ------------------------------------------------------------------- */
.lp-compare { display: grid; grid-template-columns: 1fr; gap: 20px; }

.lp-compare-side { position: relative; padding: 26px 24px; border-radius: var(--lp-radius);
                   border: 1px solid var(--lp-line); background: #fff; }
.lp-compare-side.is-before { background: var(--lp-bg-soft); }
.lp-compare-side.is-after  { box-shadow: var(--lp-shadow-sm); border-color: rgba(99,102,241,.28); }

.lp-compare-tag { display: inline-flex; padding: 5px 12px; border-radius: 999px;
                  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
                  text-transform: uppercase; margin-bottom: 16px; }
.is-before .lp-compare-tag { color: var(--lp-muted); background: rgba(148,163,184,.14); }
.is-after  .lp-compare-tag { color: #fff; background: var(--lp-grad); }

.lp-compare-side img { display: block; width: 100%; height: auto; border-radius: 12px;
                       border: 1px solid var(--lp-line); margin-bottom: 18px; }
.is-before img { filter: saturate(.5) opacity(.85); }

.lp-compare-side ul { list-style: none; margin: 0; padding: 0;
                      display: flex; flex-direction: column; gap: 11px; }
.lp-compare-side li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.55; }

/*  The marks are pseudo-elements rather than inline SVG: there is one per
    line, they carry no meaning a screen reader needs, and forty inline icons
    is forty nodes for decoration.  */
.is-before li::before { content: "×"; position: absolute; left: 4px; top: -1px;
                        color: var(--lp-muted); font-size: 17px; line-height: 1.4; }
.is-after  li::before { content: "✓"; position: absolute; left: 2px; top: 0;
                        color: var(--lp-emerald); font-weight: 700; }
.is-before li { color: var(--lp-body); }
.is-after  li { color: var(--lp-ink); }

@media (min-width: 900px) { .lp-compare { grid-template-columns: 1fr 1fr; gap: 24px; } }

/*  Hero with no visual at all — the operator uploaded no screenshot and
    switched the mockup off. Centre the copy rather than leaving it hugging
    the left of an empty two-column grid.                                    */
.lp-hero-grid.is-solo { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; text-align: center; }
.lp-hero-grid.is-solo .lp-hero-cta,
.lp-hero-grid.is-solo .lp-hero-trust { justify-content: center; }

/*  prefers-reduced-motion ------------------------------------------------

    WCAG 2.1 AA, and not a formality: the reveal animations, the marquee, the
    floating chips and the pulsing badge together are genuinely unpleasant for
    somebody with a vestibular disorder.

    landing.js already checks the same preference before observing anything,
    so this is the belt to that script's braces — it also covers the pure-CSS
    animations the script never touches.                                     */
@media (prefers-reduced-motion: reduce) {
    .lp *, .lp *::before, .lp *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .lp .reveal { opacity: 1 !important; transform: none !important; }
}

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

   The section deliberately has no form (see contact.blade.php), so the cards
   take the full width of a narrower container rather than sitting in a
   half-empty two-column grid.
   ------------------------------------------------------------------- */
.lp-contact-grid { display: grid; grid-template-columns: 1fr; gap: 24px;
                   max-width: 980px; margin: 0 auto; align-items: start; }
@media (min-width: 900px) {
    .lp-contact-grid.is-cards-only { grid-template-columns: 1fr; max-width: 820px; }
}

/*  <address> is the right element for the business's own contact details and
    carries an italic default that belongs to a letterhead, not to a card.  */
.lp-contact-side { display: grid; gap: 12px; font-style: normal; }