/* ===========================================================================
   Crop Schedule UI: landing page
   /Asserts/Main/cs-landing.css

   Default.aspx only, 2026-10-27. Loads after cs-core.css, which supplies the
   band and the pivots (.cs-hero, .cs-pivot), the tokens and the look's
   easing. Everything here is scoped to .cs-lp, so nothing can reach another
   page. Framework category (CS-FRAMEWORK.md), on a sheet of its own like the
   weather dashboard and broadcast.

   Sections, in page order: tokens and reset, motion gates, hero (the farm,
   the product, facts), partners strip, section shell, the probe lab, the bento,
   satellite crop health, steps, contact, closing band, small screens,
   reduced motion.

   Motion follows the house rules (CS-CORE.md, Part 2, "The look"): entrance
   animations run only under .cs-lp-anim, which the page adds when motion is
   allowed, and prefers-reduced-motion turns everything off at the end of
   this sheet. Nothing pulses to suggest a live reading: the hero and the lab
   are labelled as examples.

   nicepage restyles bare headings, so every heading here is pinned with an
   element and two classes, the same trick as the house title pin.
   =========================================================================== */

.cs-lp {
    --lp-navy: #2C367E;
    --lp-navy-deep: #222A63;
    --lp-good: #57B77C;
    --lp-warn: #E8A33D;
    --lp-bad: #DC5B4B;
    --lp-above: #5B8DEF;
    --lp-max: 1320px;
    --lp-gutter: clamp(18px, 4vw, 48px);
    margin: 0;
    padding: 0;
    color: var(--cs-ink);
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* The page runs edge to edge: the master's centred container steps aside on
   this page only, and every section keeps its own width below. */
body:has(#csLanding) .container.body-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

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

    .cs-lp [hidden] {
        display: none !important;
    }

    .cs-lp p {
        margin: 0;
    }

    .cs-lp ul.cs-lp-ticks,
    .cs-lp ul.cs-lp-states,
    .cs-lp ul.cs-lp-points,
    .cs-lp ul.cs-lp-contact-list,
    .cs-lp ul.cs-lp-sensor-chips,
    .cs-lp ul.cs-lp-marquee-track,
    .cs-lp ol.cs-lp-steps,
    .cs-lp dl.cs-lp-facts {
        list-style: none;
        margin: 0;
        padding: 0;
    }

.cs-lp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Headings, pinned against nicepage */

.cs-lp h1.cs-lp-title,
.cs-lp h2.cs-lp-h2,
.cs-lp h3.cs-lp-h3 {
    font-family: 'Roboto', sans-serif !important;
    text-transform: none !important;
    padding: 0 !important;
    text-wrap: balance;
}

.cs-lp h1.cs-lp-title {
    font-size: clamp(38px, 5vw, 70px) !important;
    font-weight: 700 !important;
    line-height: 1.04 !important;
    letter-spacing: -0.035em !important;
    color: #fff !important;
    margin: 20px 0 18px !important;
}

.cs-lp h2.cs-lp-h2 {
    font-size: clamp(30px, 3.4vw, 48px) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.028em !important;
    color: var(--cs-ink-strong) !important;
    margin: 12px 0 14px !important;
}

.cs-lp h3.cs-lp-h3 {
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    color: var(--cs-ink-strong) !important;
    margin: 0 0 6px !important;
}

.cs-lp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #3E9A63;
}

    .cs-lp-kicker::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--cs-leaf);
        box-shadow: 0 0 0 3px rgba(108, 192, 141, 0.2);
    }

.cs-lp p.cs-lp-intro {
    font-size: clamp(15.5px, 1.15vw, 17.5px);
    line-height: 1.65;
    color: #636A75;
    max-width: 40em;
    text-wrap: pretty;
}

.cs-lp a.cs-lp-textlink {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--lp-navy);
    text-decoration: none;
}

    .cs-lp a.cs-lp-textlink:hover {
        color: var(--lp-navy-deep);
        text-decoration: underline;
    }

    .cs-lp a.cs-lp-textlink i {
        font-size: 11px;
        transition: transform 0.2s var(--cs-ease);
    }

    .cs-lp a.cs-lp-textlink:hover i {
        transform: translateX(3px);
    }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.cs-lp .cs-lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    margin: 0;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s var(--cs-ease), box-shadow 0.2s, background 0.2s, color 0.2s;
}

    .cs-lp .cs-lp-btn i {
        font-size: 13px;
        transition: transform 0.2s var(--cs-ease);
    }

    .cs-lp .cs-lp-btn:hover {
        transform: translateY(-2px);
        text-decoration: none;
    }

        .cs-lp .cs-lp-btn:hover i.fa-arrow-right {
            transform: translateX(3px);
        }

    .cs-lp .cs-lp-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(108, 192, 141, 0.7);
    }

.cs-lp .cs-lp-btn-light,
.cs-lp .cs-lp-btn-light:hover,
.cs-lp .cs-lp-btn-light:focus {
    color: var(--cs-crop);
}

.cs-lp .cs-lp-btn-light {
    background: #fff;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.55);
}

    .cs-lp .cs-lp-btn-light:hover {
        background: #F0FAF3;
    }

.cs-lp .cs-lp-btn-glass,
.cs-lp .cs-lp-btn-glass:hover,
.cs-lp .cs-lp-btn-glass:focus {
    color: #fff;
}

.cs-lp .cs-lp-btn-glass {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

    .cs-lp .cs-lp-btn-glass:hover {
        background: rgba(255, 255, 255, 0.15);
    }

.cs-lp .cs-lp-btn-navy,
.cs-lp .cs-lp-btn-navy:hover,
.cs-lp .cs-lp-btn-navy:focus {
    color: #fff;
}

.cs-lp .cs-lp-btn-navy {
    background: var(--lp-navy);
    box-shadow: 0 12px 26px -14px rgba(44, 54, 126, 0.8);
}

    .cs-lp .cs-lp-btn-navy:hover {
        background: var(--lp-navy-deep);
    }

.cs-lp .cs-lp-btn-ghost,
.cs-lp .cs-lp-btn-ghost:hover,
.cs-lp .cs-lp-btn-ghost:focus {
    color: var(--cs-ink);
}

.cs-lp .cs-lp-btn-ghost {
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--cs-field-border);
}

    .cs-lp .cs-lp-btn-ghost:hover {
        background: #F6F7F9;
    }

.cs-lp .cs-lp-btn-sm {
    height: 40px;
    padding: 0 16px;
    font-size: 13.5px;
    gap: 8px;
}

.cs-lp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

/* Chips: a dot in the chip's own colour, the house status chip */

.cs-lp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: color 0.3s, background 0.3s;
}

    .cs-lp-chip::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

    .cs-lp-chip.is-good { color: #2E8B57; background: rgba(87, 183, 124, 0.15); }
    .cs-lp-chip.is-warn { color: #B26E12; background: rgba(232, 163, 61, 0.17); }
    .cs-lp-chip.is-bad { color: #BE3F2D; background: rgba(220, 91, 75, 0.15); }
    .cs-lp-chip.is-above { color: #3B6BD2; background: rgba(91, 141, 239, 0.15); }

/* ---------------------------------------------------------------------------
   Motion gates and the scroll progress line
   --------------------------------------------------------------------------- */

.cs-lp-anim [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.8s var(--cs-ease), transform 0.8s var(--cs-ease);
    transition-delay: var(--d, 0ms);
}

    .cs-lp-anim [data-reveal].is-in {
        opacity: 1;
        transform: none;
    }

.cs-lp-anim .cs-lp-hero-copy > * {
    animation: cs-lp-up 0.85s var(--cs-ease) backwards;
}

    .cs-lp-anim .cs-lp-hero-copy > *:nth-child(1) { animation-delay: 0.10s; }
    .cs-lp-anim .cs-lp-hero-copy > *:nth-child(2) { animation-delay: 0.18s; }
    .cs-lp-anim .cs-lp-hero-copy > *:nth-child(3) { animation-delay: 0.28s; }
    .cs-lp-anim .cs-lp-hero-copy > *:nth-child(4) { animation-delay: 0.38s; }
    .cs-lp-anim .cs-lp-hero-copy > *:nth-child(5) { animation-delay: 0.46s; }

.cs-lp-anim .cs-lp-facts > div {
    animation: cs-lp-up 0.8s var(--cs-ease) backwards;
}

    .cs-lp-anim .cs-lp-facts > div:nth-child(1) { animation-delay: 0.50s; }
    .cs-lp-anim .cs-lp-facts > div:nth-child(2) { animation-delay: 0.58s; }
    .cs-lp-anim .cs-lp-facts > div:nth-child(3) { animation-delay: 0.66s; }
    .cs-lp-anim .cs-lp-facts > div:nth-child(4) { animation-delay: 0.74s; }

@keyframes cs-lp-up {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

/* A thin line along the top that fills as the page is read. Only where the
   browser can tie an animation to the scroll; nothing is drawn otherwise. */
.cs-lp-progress {
    display: none;
}

@supports (animation-timeline: scroll()) {
    .cs-lp-progress {
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        z-index: 10001;
        pointer-events: none;
        transform-origin: 0 50%;
        background: linear-gradient(90deg, var(--cs-leaf), var(--lp-navy));
        animation: cs-lp-progress linear both;
        animation-timeline: scroll(root);
    }
}

@keyframes cs-lp-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
/* ===========================================================================
   Hero, edge to edge (rebuilt 2026-10-27, later)

   The band runs the full width of the screen, straight under the header, the
   way the partner sites open. Behind it a farm from the air (SVG, sharp at
   any size) with one pivot turning and a satellite pass going over. On it,
   the product at its real size: the probe dashboard in a browser window that
   runs off the right edge, a block on a phone, and an alert arriving.

   Crisp on purpose: nothing on the product is scaled, tilted or blurred, and
   nothing moves once it has arrived. Entrance motion ends on transform: none.
   =========================================================================== */

.cs-hero.cs-lp-hero {
    display: flex;
    flex-direction: column;
    min-height: clamp(700px, calc(100svh - 68px), 960px);
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: #10241B;
    animation: none;
}

/* The farm, the satellite pass, the shade that keeps the copy readable, and
   a soft light that follows the pointer. */
.cs-lp-farm {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

    .cs-lp-farm-arm {
        transform-box: view-box;
    }

.cs-lp-anim .cs-lp-farm-arm {
    animation: cs-lp-arm 46s linear infinite;
}

@keyframes cs-lp-arm {
    to { transform: rotate(360deg); }
}

.cs-lp-hero-scan {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(214, 245, 226, 0.07) 45%, rgba(214, 245, 226, 0.12) 50%, rgba(214, 245, 226, 0.07) 55%, transparent);
}

.cs-lp-anim .cs-lp-hero-scan {
    animation: cs-lp-pass 11s linear 1.5s infinite;
}

@keyframes cs-lp-pass {
    0% { opacity: 0; transform: translateX(-300px); }
    8% { opacity: 1; }
    70% { opacity: 1; }
    80%, 100% { opacity: 0; transform: translateX(100vw); }
}

.cs-lp-hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, #0E2118 0%, rgba(14, 33, 24, 0.94) 28%, rgba(14, 33, 24, 0.62) 52%, rgba(14, 33, 24, 0.30) 78%, rgba(14, 33, 24, 0.22) 100%),
        linear-gradient(0deg, rgba(10, 24, 17, 0.85) 0%, transparent 32%),
        linear-gradient(180deg, rgba(10, 24, 17, 0.55) 0%, transparent 18%);
}

.cs-lp-hero-light {
    position: absolute;
    inset: 0;
    background: radial-gradient(700px circle at var(--mx, 72%) var(--my, 28%), rgba(108, 192, 141, 0.13), transparent 62%);
    transition: background-position 0.2s;
}

/* The wrap every section shares */
.cs-lp-hero-inner {
    position: relative;
    flex: 1 0 auto;
    width: min(var(--lp-max), calc(100% - 2 * var(--lp-gutter)));
    margin: 0 auto;
    padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 4vw, 64px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
}

/* Side by side, the hero fills the screen down to the taskbar: the space
   left over after the bar (68px), the mockup (604px) and the facts row
   (141px) becomes the padding above and below, within the usual limits. A
   short screen gets the smallest padding and scrolls a little, as any page
   must when its content is taller than the screen. */
@media (min-width: 1181px) {
    .cs-lp-hero-inner {
        padding-top: clamp(28px, min(6vw, (100vh - 813px) * 0.55), 88px);
        padding-bottom: clamp(24px, min(4vw, (100vh - 813px) * 0.45), 64px);
        padding-top: clamp(28px, min(6vw, (100svh - 813px) * 0.55), 88px);
        padding-bottom: clamp(24px, min(4vw, (100svh - 813px) * 0.45), 64px);
    }
}

.cs-lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #CFEFDC;
    background: rgba(108, 192, 141, 0.14);
    box-shadow: inset 0 0 0 1px rgba(108, 192, 141, 0.32);
}

    .cs-lp-eyebrow i {
        color: var(--cs-leaf);
        font-size: 12px;
    }

.cs-lp .cs-lp-hero h1.cs-lp-title {
    font-size: clamp(40px, 3.7vw, 66px) !important;
    font-weight: 800 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.04em !important;
    margin: 22px 0 22px !important;
}

/* The crop at the end of the headline: one word at a time on its own line,
   so a long word never reflows the rest. cs-landing.js turns it over; without
   script, or with reduced motion, the first word simply stays. */
.cs-lp-rot {
    position: relative;
    display: block;
    height: 1.12em;
    margin-top: -0.04em;
    overflow: hidden;
}

    .cs-lp-rot > b {
        position: absolute;
        left: 0;
        top: 0;
        font-weight: inherit;
        white-space: nowrap;
        padding-bottom: 0.08em;
        background: linear-gradient(100deg, #D4F7E1 0%, #7FD3A0 45%, #3FA66E 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

        /* The new word waits for the old one to clear, so they never
           sit on top of each other. */
        .cs-lp-rot > b.is-in {
            animation: cs-lp-word-in 0.6s var(--cs-ease) 0.2s both;
        }

        .cs-lp-rot > b.is-out {
            animation: cs-lp-word-out 0.3s ease-out both;
        }

@keyframes cs-lp-word-in {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes cs-lp-word-out {
    from { transform: none; opacity: 1; }
    to { transform: translateY(-25%); opacity: 0; }
}

.cs-lp p.cs-lp-lede {
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.62;
    color: rgba(255, 255, 255, 0.78);
    max-width: 33em;
    text-wrap: pretty;
}

.cs-lp ul.cs-lp-ticks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 28px;
}

    .cs-lp-ticks li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.7);
    }

        .cs-lp-ticks li i {
            font-size: 11px;
            color: var(--cs-leaf);
        }

/* ---------------------------------------------------------------------------
   The product. Sizes are real pixels; the window is wider than its column and
   runs off the right of the screen on purpose.
   --------------------------------------------------------------------------- */

/* The mockup sets its own line height: the site's (1.6, from the theme)
   would make every line in it taller than drawn, and the cards would run
   past the window's edge. */
.cs-lp-hero-visual {
    position: relative;
    height: 604px;
    line-height: 1.25;
}

.cs-lp-win {
    position: absolute;
    left: 0;
    top: 8px;
    width: 880px;
    height: 580px;
    border-radius: 14px;
    overflow: hidden;
    background: #F4F6F8;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.10),
        0 40px 80px -30px rgba(0, 0, 0, 0.65),
        0 18px 36px -18px rgba(0, 0, 0, 0.45);
}

.cs-lp-win-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 40px;
    padding: 0 16px;
    background: #E8ECEF;
    border-bottom: 1px solid #DADFE4;
}

.cs-lp-win-dots {
    display: inline-flex;
    gap: 7px;
}

    .cs-lp-win-dots i {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #FF6159;
    }

        .cs-lp-win-dots i:nth-child(2) { background: #FFBD2E; }
        .cs-lp-win-dots i:nth-child(3) { background: #28C941; }

.cs-lp-win-url {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 26px;
    padding: 0 14px;
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    color: #5E6672;
    white-space: nowrap;
}

    .cs-lp-win-url i {
        font-size: 10px;
        color: #2E8B57;
    }

.cs-lp-app {
    position: relative;
    height: calc(100% - 40px);
    overflow: hidden;
}

    /* The cards run on below the window's edge; a short fade says so,
       clear of the first row */
    .cs-lp-app::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 18px;
        background: linear-gradient(180deg, rgba(244, 246, 248, 0), #F4F6F8 85%);
    }

.cs-lp-app-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 46px;
    padding: 0 22px;
    background: #F4F5F7;
    border-bottom: 1px solid #E6E8EC;
}

.cs-lp-app-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #4B515D;
    white-space: nowrap;
}

    .cs-lp-app-logo i {
        font-size: 16px;
        color: var(--lp-navy);
    }

    .cs-lp-app-logo b {
        color: var(--lp-navy);
        font-weight: 600;
    }

.cs-lp-app-menu {
    display: inline-flex;
    gap: 18px;
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1C2331;
}

    .cs-lp-app-menu b {
        color: #9AA0AA;
        font-weight: 600;
    }

.cs-lp-app-avatar {
    margin-left: auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8A9A84, #4F5E4B);
}

.cs-lp-app-band {
    position: relative;
    overflow: hidden;
    margin: 16px 18px 0;
    padding: 18px 20px 16px;
    border-radius: 14px;
    color: #fff;
    background:
        radial-gradient(120% 110% at 100% 100%, #23503B 0%, transparent 60%),
        linear-gradient(160deg, #10241B 0%, var(--cs-crop) 55%, #1D4231 100%);
}

.cs-lp-app-pivot {
    position: absolute;
    right: -120px;
    top: -170px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, rgba(255, 255, 255, 0.07) 0 1px, transparent 1.5px 24px);
}

.cs-lp-app-band-top {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.cs-lp-app-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #CFEFDC;
    background: rgba(108, 192, 141, 0.16);
    box-shadow: inset 0 0 0 1px rgba(108, 192, 141, 0.3);
}

    .cs-lp-app-eyebrow i {
        font-size: 9px;
        color: var(--cs-leaf);
    }

.cs-lp-app-title {
    display: block;
    margin-top: 8px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.cs-lp-app-sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
}

.cs-lp-app-farm {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 10px;
    border-radius: 10px;
    font-size: 12px;
    color: #1C2331;
    background: #fff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

    .cs-lp-app-farm em {
        font-style: normal;
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #9AA0AA;
    }

    .cs-lp-app-farm i {
        font-size: 9px;
        color: #6B7280;
    }

.cs-lp-app-tiles {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.cs-lp-app-ring {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
}

    .cs-lp-app-ring svg {
        width: 64px;
        height: 64px;
        transform: rotate(-90deg);
    }

    .cs-lp-app-ring .track {
        fill: none;
        stroke: rgba(255, 255, 255, 0.12);
        stroke-width: 6;
    }

    .cs-lp-app-ring .seg {
        fill: none;
        stroke: var(--c);
        stroke-width: 6;
        stroke-dasharray: var(--len) 200;
        stroke-dashoffset: var(--off);
    }

    .cs-lp-app-ring b {
        position: absolute;
        inset: 0;
        display: grid;
        place-content: center;
        text-align: center;
        font-size: 18px;
        font-weight: 400;
        line-height: 1;
    }

        .cs-lp-app-ring b em {
            display: block;
            margin-top: 2px;
            font-style: normal;
            font-size: 7.5px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.7);
        }

.cs-lp-app-tile {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 12px 10px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .cs-lp-app-tile::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 10px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--c);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent);
    }

    .cs-lp-app-tile b {
        display: block;
        margin-bottom: 2px;
        font-size: 20px;
        font-weight: 400;
        color: #fff;
    }

/* The probe cards, the dashboard's own shape */
.cs-lp-app-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 18px 18px;
}

.cs-lp-card {
    padding: 12px 14px 13px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #E6E8EC;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

    .cs-lp-card.is-bad {
        background: #FEF8F7;
        box-shadow: inset 3px 0 0 #DC5B4B, 0 1px 2px rgba(16, 24, 40, 0.05);
    }

    .cs-lp-card.is-warn {
        background: #FEFBF6;
        box-shadow: inset 3px 0 0 #E8A33D, 0 1px 2px rgba(16, 24, 40, 0.05);
    }

.cs-lp-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

    .cs-lp-card-head > span {
        min-width: 0;
    }

    .cs-lp-card-head b {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #1C2331;
        white-space: nowrap;
    }

    .cs-lp-card-head em {
        display: block;
        margin-top: 1px;
        font-style: normal;
        font-size: 10.5px;
        color: #9AA0AA;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cs-lp-card-head .cs-lp-chip {
        font-style: normal;
        padding: 3px 8px;
        font-size: 9.5px;
    }

.cs-lp-card-read {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 8px 0 7px;
}

    .cs-lp-card-read b {
        font-size: 28px;
        font-weight: 300;
        line-height: 1;
        letter-spacing: -0.02em;
        color: #1C2331;
        font-variant-numeric: tabular-nums;
    }

    .cs-lp-card-read em {
        margin-left: 4px;
        font-style: normal;
        font-size: 11px;
        color: #9AA0AA;
    }

    .cs-lp-card-read small {
        font-size: 10px;
        color: #9AA0AA;
    }

.cs-lp-card .cs-lp-dev-bar,
.cs-lp-phone2 .cs-lp-dev-bar {
    height: 7px;
}

/* Below the bar, as on the dashboard: where the stress and refill lines sit */
.cs-lp-card-lines {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
    font-size: 9px;
    color: #9AA0AA;
}

/* The six figures, with the probe drawn beside them */
.cs-lp-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px solid #EEF0F3;
}

.cs-lp-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    gap: 9px 8px;
    font-size: 11.5px;
    font-weight: 500;
    color: #4B515D;
    white-space: nowrap;
}

    .cs-lp-card-stats em {
        display: block;
        margin-bottom: 1px;
        font-style: normal;
        font-size: 8px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #A5ABB4;
    }

/* The probe: a cap, one segment per depth in that depth's colour, the root
   zone as a black line under its depth, and the tip. */
.cs-lp-probe {
    position: relative;
    isolation: isolate;
    width: 52px;
    padding-left: 2px;
}

    /* The soil behind the probe, from the cap down to the tip */
    .cs-lp-probe::before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        top: 8px;
        bottom: 22px;
        width: 44px;
        border-radius: 2px;
        background: linear-gradient(90deg, #F1E8D8, #FAF6EE);
        box-shadow: inset 1px 0 0 #E4D7C0;
    }

    .cs-lp-probe-cap {
        display: block;
        width: 20px;
        height: 7px;
        margin-bottom: 2px;
        border-radius: 5px 5px 2px 2px;
        background: linear-gradient(#5A5F67, #2F343B);
    }

    .cs-lp-probe > span {
        position: relative;
        display: flex;
        align-items: center;
        gap: 6px;
        height: 11px;
        margin: 0 0 2px 2px;
        font-size: 8px;
        font-weight: 500;
        line-height: 1;
        color: #4B515D;
    }

        .cs-lp-probe > span::before {
            content: "";
            flex: none;
            width: 16px;
            height: 11px;
            border-radius: 2px;
            background: var(--c);
            box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
        }

        .cs-lp-probe > span.is-root {
            margin-bottom: 5px;
        }

            .cs-lp-probe > span.is-root::after {
                content: "";
                position: absolute;
                left: -4px;
                bottom: -4px;
                width: 24px;
                height: 2px;
                background: #1C2331;
            }

    .cs-lp-probe-tip {
        display: block;
        width: 0;
        height: 0;
        margin-left: 4px;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 6px solid #8A9099;
    }

    .cs-lp-probe em {
        display: block;
        margin-top: 5px;
        font-style: normal;
        font-size: 7.5px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        white-space: nowrap;
        color: #9AA0AA;
    }

.cs-lp-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    font-size: 9.5px;
    color: #9AA0AA;
    white-space: nowrap;
}

    .cs-lp-card-foot i {
        margin-right: 5px;
        font-size: 9px;
    }

.cs-lp-card-root {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

    .cs-lp-card-root::before {
        content: "";
        width: 9px;
        height: 2px;
        background: #1C2331;
    }

/* The phone, over the window's right-hand cards. Pinned to the column's
   right edge, which is always on screen, while the window runs past it. */
.cs-lp-phone2 {
    position: absolute;
    right: 0;
    top: 132px;
    width: 238px;
    height: 486px;
    padding: 9px;
    border-radius: 40px;
    background: #12161D;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 50px 80px -30px rgba(0, 0, 0, 0.75),
        0 20px 40px -20px rgba(0, 0, 0, 0.5);
}

.cs-lp-phone2-screen {
    height: 100%;
    overflow: hidden;
    padding: 12px 16px 16px;
    border-radius: 32px;
    background: #F7F8FA;
}

.cs-lp-phone2-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    font-size: 11px;
    color: #1C2331;
}

    .cs-lp-phone2-status span {
        display: inline-flex;
        gap: 5px;
        font-size: 10px;
    }

.cs-lp-phone2-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

    .cs-lp-phone2-head > i {
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        border: 1px solid #E6E8EC;
        background: #fff;
        font-size: 10px;
        color: #4B515D;
    }

    .cs-lp-phone2-head b {
        display: block;
        font-size: 15px;
        font-weight: 600;
        color: #1C2331;
    }

    .cs-lp-phone2-head em {
        display: block;
        font-style: normal;
        font-size: 10.5px;
        color: #9AA0AA;
    }

.cs-lp-phone2-read {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 10px;
}

    .cs-lp-phone2-read > span b {
        font-size: 44px;
        font-weight: 300;
        line-height: 1;
        letter-spacing: -0.03em;
        color: #1C2331;
    }

    .cs-lp-phone2-read > span em {
        margin-left: 4px;
        font-style: normal;
        font-size: 12px;
        color: #9AA0AA;
    }

    .cs-lp-phone2-read .cs-lp-chip {
        font-style: normal;
    }

.cs-lp-phone2-depths {
    display: grid;
    gap: 7px;
    margin-top: 16px;
    padding: 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #E6E8EC;
}

    .cs-lp-phone2-depths span {
        display: grid;
        grid-template-columns: 38px 1fr 20px;
        align-items: center;
        gap: 8px;
        font-size: 10.5px;
        color: #6B7280;
    }

        .cs-lp-phone2-depths span em {
            font-style: normal;
            white-space: nowrap;
        }

        .cs-lp-phone2-depths span i {
            position: relative;
            height: 6px;
            border-radius: 3px;
            background: #EEF0F3;
            overflow: hidden;
        }

            .cs-lp-phone2-depths span i::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: var(--w);
                border-radius: inherit;
                background: var(--c);
            }

        .cs-lp-phone2-depths span b {
            font-weight: 600;
            text-align: right;
            color: #1C2331;
        }

        .cs-lp-phone2-depths span.is-root {
            padding-bottom: 7px;
            border-bottom: 1.5px solid #1C2331;
        }

.cs-lp-phone2-plan {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding: 11px 12px;
    border-radius: 14px;
    background: #EEF1FA;
    font-size: 10.5px;
    line-height: 1.4;
    color: #4B515D;
}

    .cs-lp-phone2-plan > i {
        flex: 0 0 26px;
        height: 26px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        font-size: 11px;
        color: #fff;
        background: var(--lp-navy);
    }

    .cs-lp-phone2-plan b {
        display: block;
        font-size: 12px;
        color: #1C2331;
    }

.cs-lp-phone2-screen {
    position: relative;
}

.cs-lp-phone2-tabs {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    padding: 9px 10px 16px;
    border-top: 1px solid #E6E8EC;
    background: #fff;
}

    .cs-lp-phone2-tabs span {
        display: grid;
        justify-items: center;
        gap: 3px;
        font-size: 9px;
        font-weight: 500;
        color: #9AA0AA;
    }

        .cs-lp-phone2-tabs span i {
            font-size: 13px;
        }

        .cs-lp-phone2-tabs span.is-on {
            color: var(--lp-navy);
        }

/* The alert, arriving over the window */
.cs-lp-alert {
    position: absolute;
    left: -28px;
    top: -18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 340px;
    padding: 13px 16px 13px 13px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.06), 0 26px 50px -20px rgba(0, 0, 0, 0.55);
    font-size: 13px;
    line-height: 1.4;
    color: #4B515D;
}

.cs-lp-alert-icon {
    flex: 0 0 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #229ED9;
    color: #fff;
    font-size: 19px;
}

.cs-lp-alert-text {
    min-width: 0;
}

.cs-lp-alert-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 1px;
}

    .cs-lp-alert-top b {
        font-size: 13px;
        font-weight: 600;
        color: #1C2331;
    }

    .cs-lp-alert-top em {
        font-style: normal;
        font-size: 11px;
        color: #9AA0AA;
    }

.cs-lp p.cs-lp-stage-note {
    position: absolute;
    left: 0;
    bottom: -6px;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.45);
}

/* Arrival: the window, then the phone, then the alert. Each ends on none. */
.cs-lp-anim .cs-lp-win {
    animation: cs-lp-rise 1s var(--cs-ease) 0.2s backwards;
}

.cs-lp-anim .cs-lp-phone2 {
    animation: cs-lp-rise 1s var(--cs-ease) 0.55s backwards;
}

.cs-lp-anim .cs-lp-alert {
    animation: cs-lp-alert-in 0.8s var(--cs-ease) 1.6s backwards;
}

@keyframes cs-lp-rise {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: none; }
}

@keyframes cs-lp-alert-in {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Facts, along the foot of the band
   --------------------------------------------------------------------------- */

.cs-lp-hero-foot {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(6, 18, 12, 0.38);
}

.cs-lp dl.cs-lp-facts {
    width: min(var(--lp-max), calc(100% - 2 * var(--lp-gutter)));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

    .cs-lp-facts > div {
        padding: 26px 28px 28px;
        border-left: 1px solid rgba(255, 255, 255, 0.10);
    }

        .cs-lp-facts > div:first-child {
            padding-left: 0;
            border-left: 0;
        }

    .cs-lp-facts dt {
        font-size: clamp(30px, 2.6vw, 40px);
        font-weight: 300;
        line-height: 1;
        letter-spacing: -0.02em;
        color: #fff;
        font-variant-numeric: tabular-nums;
    }

        .cs-lp-facts dt small {
            margin-left: 3px;
            font-size: 0.5em;
            color: rgba(255, 255, 255, 0.7);
        }

    .cs-lp-facts dd {
        margin: 8px 0 0;
        font-size: 13px;
        line-height: 1.45;
        color: rgba(255, 255, 255, 0.64);
    }

/* ---------------------------------------------------------------------------
   Shared by the cards above and the probe lab: the moisture bar
   --------------------------------------------------------------------------- */

.cs-lp-dev-bar {
    position: relative;
    height: 10px;
    border-radius: 6px;
    background: var(--cs-line-soft);
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.06);
    overflow: hidden;
}

    .cs-lp-dev-bar i {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--w, 50%);
        border-radius: inherit;
        background: var(--c, var(--lp-good));
        transition: width 0.45s var(--cs-ease), background-color 0.45s;
    }

    .cs-lp-dev-bar b {
        position: absolute;
        top: 0;
        bottom: 0;
        left: var(--x);
        width: 2px;
        border-radius: 1px;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75);
    }

        .cs-lp-dev-bar b.is-stress { background: var(--lp-bad); }
        .cs-lp-dev-bar b.is-refill { background: var(--lp-warn); }

.cs-lp-dev-scale {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 6px;
    font-size: 10.5px;
    color: var(--cs-ink-muted);
}

/* The lab's two figures. Direct children only: the figure itself is a span
   inside the b, and must not pick up the label's small capitals. */
.cs-lp-lab-stats > div > span {
    display: block;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cs-ink-faint);
    margin-bottom: 3px;
}

.cs-lp-lab-stats b {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: var(--cs-ink-strong);
    font-variant-numeric: tabular-nums;
}

.cs-lp-lab-stats em {
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
    color: var(--cs-ink-muted);
    margin-left: 3px;
}

/* ===========================================================================
   Partners and offers
   =========================================================================== */

.cs-lp-partners {
    padding: clamp(34px, 3.4vw, 48px) 0 8px;
}

.cs-lp-partners-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: min(var(--lp-max), calc(100% - 2 * var(--lp-gutter)));
    margin: 0 auto;
    padding-bottom: 14px;
}

.cs-lp-partners-tools {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.cs-lp .cs-lp-pause {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cs-surface-sunk);
    color: var(--cs-label);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

    .cs-lp .cs-lp-pause:hover {
        background: var(--cs-line);
        color: var(--cs-ink);
    }

    .cs-lp .cs-lp-pause:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(44, 54, 126, 0.3);
    }

/* Without script: a row that scrolls sideways, snapping to each advert */
.cs-lp-marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.cs-lp ul.cs-lp-marquee-track {
    display: flex;
    gap: 16px;
    width: max-content;
    padding: 6px var(--lp-gutter) 18px;
}

.cs-lp-ad {
    flex: 0 0 auto;
    width: clamp(232px, 21vw, 310px);
    scroll-snap-align: start;
}

.cs-lp .cs-lp-ad-link {
    display: block;
    padding: 8px 8px 10px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--cs-line);
    box-shadow: var(--cs-shadow);
    color: var(--cs-ink);
    text-decoration: none;
    transition: transform 0.25s var(--cs-ease), box-shadow 0.25s, border-color 0.25s;
}

.cs-lp a.cs-lp-ad-link:hover {
    transform: translateY(-4px);
    border-color: #D5D9DF;
    box-shadow: 0 18px 36px -18px rgba(16, 24, 40, 0.3);
    color: var(--cs-ink);
    text-decoration: none;
}

.cs-lp a.cs-lp-ad-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(44, 54, 126, 0.35);
}

.cs-lp-ad-media {
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: var(--cs-surface-alt);
}

    .cs-lp-ad-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        user-select: none;
        transition: transform 0.6s var(--cs-ease);
    }

.cs-lp a.cs-lp-ad-link:hover .cs-lp-ad-media img {
    transform: scale(1.03);
}

.cs-lp-ad-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 4px 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cs-ink);
}

    .cs-lp-ad-name i {
        font-size: 10px;
        color: var(--cs-ink-faint);
    }

/* With script: a marquee. cs-landing.js copies the set until it is wider
   than the screen, then moves the track by one set width (--shift) every
   --dur. It stops on hover, on keyboard focus and on the pause button. */
.cs-lp-marquee.is-running {
    overflow: hidden;
    scroll-snap-type: none;
}

    .cs-lp-marquee.is-running .cs-lp-marquee-track {
        animation: cs-lp-marquee var(--dur, 40s) linear infinite;
    }

    .cs-lp-marquee.is-running:hover .cs-lp-marquee-track,
    .cs-lp-marquee.is-running:focus-within .cs-lp-marquee-track,
    .cs-lp-marquee.is-running.is-paused .cs-lp-marquee-track {
        animation-play-state: paused;
    }

@keyframes cs-lp-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-1 * var(--shift, 50%))); }
}

/* ===========================================================================
   Section shell
   =========================================================================== */

.cs-lp-section {
    position: relative;
    isolation: isolate;
    width: min(var(--lp-max), calc(100% - 2 * var(--lp-gutter)));
    margin: 0 auto;
    padding-top: clamp(64px, 8vw, 120px);
    scroll-margin-top: 80px;
}

/* A section that wears a band of its own colour, edge to edge, while its
   content keeps the section's width. */
.cs-lp-section.cs-lp-band-soft,
.cs-lp-section.cs-lp-band-dark {
    margin-top: clamp(64px, 8vw, 120px);
    padding-bottom: clamp(64px, 8vw, 120px);
}

    /* Two bands in a row meet without a white gap */
    .cs-lp-section.cs-lp-band-soft + .cs-lp-section.cs-lp-band-dark {
        margin-top: 0;
    }

    .cs-lp-section.cs-lp-band-soft::before,
    .cs-lp-section.cs-lp-band-dark::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: calc(50% - 50vw);
        right: calc(50% - 50vw);
    }

    .cs-lp-section.cs-lp-band-soft::before {
        background: linear-gradient(180deg, #F3F6F4, #F7F9F8);
        border-top: 1px solid #E7ECE9;
        border-bottom: 1px solid #E7ECE9;
    }

    .cs-lp-section.cs-lp-band-dark::before {
        background:
            radial-gradient(70% 90% at 15% 100%, #1F4A36 0%, transparent 60%),
            linear-gradient(160deg, #0E2118 0%, #153024 60%, #10241B 100%);
    }

.cs-lp-section-head {
    max-width: 780px;
    margin-bottom: clamp(28px, 3.6vw, 48px);
}

.cs-lp-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(28px, 5vw, 84px);
    align-items: center;
}

.cs-lp-split-flip {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

    .cs-lp-split-flip > .cs-lp-copy {
        order: 2;
    }

/* ===========================================================================
   The probe, explained
   =========================================================================== */

.cs-lp ul.cs-lp-states {
    display: grid;
    gap: 14px;
    margin-top: 28px;
}

    .cs-lp-states li {
        display: grid;
        grid-template-columns: 14px minmax(0, 1fr);
        gap: 14px;
        align-items: start;
    }

        .cs-lp-states li i {
            width: 12px;
            height: 12px;
            margin-top: 4px;
            border-radius: 50%;
            background: var(--c);
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent);
        }

        .cs-lp-states li b {
            display: block;
            font-size: 14.5px;
            font-weight: 600;
            color: var(--cs-ink-strong);
        }

        .cs-lp-states li span {
            display: block;
            margin-top: 2px;
            font-size: 13.5px;
            line-height: 1.5;
            color: #6B7280;
        }

.cs-lp-lab {
    position: relative;
    padding: clamp(18px, 2.4vw, 30px);
    border-radius: 24px;
    background: #fff;
    border: 1px solid var(--cs-line);
    box-shadow: 0 40px 80px -48px rgba(16, 24, 40, 0.45), 0 1px 2px rgba(16, 24, 40, 0.05);
    overflow: hidden;
}

    .cs-lp-lab::before {
        content: "";
        position: absolute;
        left: -20%;
        right: -20%;
        top: -140px;
        height: 260px;
        background: radial-gradient(closest-side, rgba(108, 192, 141, 0.16), transparent);
        pointer-events: none;
    }

.cs-lp-lab-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

    .cs-lp-lab-head b {
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: var(--cs-ink-strong);
    }

    .cs-lp-lab-head span:not(.cs-lp-chip) {
        display: block;
        margin-top: 2px;
        font-size: 12.5px;
        color: var(--cs-ink-muted);
    }

.cs-lp-lab-body {
    position: relative;
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr);
    gap: clamp(18px, 2.6vw, 34px);
    align-items: center;
    margin-top: 20px;
}

/* The soil and the probe in it */
.cs-lp-soil {
    position: relative;
    height: 340px;
    border-radius: 16px;
    overflow: hidden;
    background:
        linear-gradient(180deg, transparent 0 40px, #C4AC86 40px 42px, rgba(176, 141, 96, 0.26) 42px, rgba(150, 118, 78, 0.08) 100%),
        linear-gradient(180deg, #F2F7FB, #F7F8FA);
}

.cs-lp-soil-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 30px;
    height: 12px;
    background: radial-gradient(circle at 6px 12px, #7FB98E 0 3px, transparent 3.5px) 0 0 / 14px 12px repeat-x;
    opacity: 0.7;
}

.cs-lp-soil-cap {
    position: absolute;
    left: 50%;
    top: 14px;
    width: 42px;
    height: 26px;
    margin-left: -21px;
    border-radius: 7px 7px 2px 2px;
    background: linear-gradient(90deg, #6B727D, #4B515D 55%, #3A3F48);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

.cs-lp-soil-bands {
    position: absolute;
    left: 50%;
    top: 42px;
    width: 34px;
    margin-left: -17px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .cs-lp-soil-bands span {
        position: relative;
        height: 38px;
        border-radius: 3px;
        background-color: var(--c);
        background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.1));
        transition: background-color 0.5s;
    }

        .cs-lp-soil-bands span em {
            position: absolute;
            left: calc(100% + 9px);
            top: 50%;
            transform: translateY(-50%);
            font-style: normal;
            font-size: 11px;
            font-weight: 500;
            color: var(--cs-label);
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

            .cs-lp-soil-bands span em::after {
                content: " cm";
                color: var(--cs-ink-faint);
            }

        .cs-lp-soil-bands span.is-root {
            margin-bottom: 6px;
        }

            .cs-lp-soil-bands span.is-root::after {
                content: "";
                position: absolute;
                left: -7px;
                right: -7px;
                bottom: -6px;
                height: 2px;
                border-radius: 1px;
                background: var(--cs-ink-strong);
            }

            .cs-lp-soil-bands span.is-root::before {
                content: "Root zone";
                position: absolute;
                right: calc(100% + 9px);
                bottom: -11px;
                font-size: 9.5px;
                font-weight: 600;
                letter-spacing: 0.06em;
                text-transform: uppercase;
                color: var(--cs-ink-faint);
                white-space: nowrap;
            }

.cs-lp-soil-tip {
    position: absolute;
    left: 50%;
    top: 302px;
    margin-left: -17px;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-top: 14px solid #8A9099;
}

/* Water falling while it irrigates */
.cs-lp-drops {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 44px;
    pointer-events: none;
}

    .cs-lp-drops i {
        position: absolute;
        top: -10px;
        width: 6px;
        height: 9px;
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
        background: #5B8DEF;
        opacity: 0;
    }

        .cs-lp-drops i:nth-child(1) { left: 18%; }
        .cs-lp-drops i:nth-child(2) { left: 34%; }
        .cs-lp-drops i:nth-child(3) { left: 62%; }
        .cs-lp-drops i:nth-child(4) { left: 76%; }
        .cs-lp-drops i:nth-child(5) { left: 88%; }

.cs-lp-lab.is-watering .cs-lp-drops i {
    animation: cs-lp-drop 0.9s linear infinite;
}

    .cs-lp-lab.is-watering .cs-lp-drops i:nth-child(2) { animation-delay: 0.3s; }
    .cs-lp-lab.is-watering .cs-lp-drops i:nth-child(3) { animation-delay: 0.6s; }
    .cs-lp-lab.is-watering .cs-lp-drops i:nth-child(4) { animation-delay: 0.15s; }
    .cs-lp-lab.is-watering .cs-lp-drops i:nth-child(5) { animation-delay: 0.45s; }

@keyframes cs-lp-drop {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 0.9; }
    100% { transform: translateY(48px); opacity: 0; }
}

.cs-lp-lab-num {
    font-size: clamp(48px, 5vw, 62px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--cs-ink-strong);
    font-variant-numeric: tabular-nums;
}

    .cs-lp-lab-num em {
        margin-left: 6px;
        font-style: normal;
        font-size: 16px;
        letter-spacing: 0;
        color: var(--cs-ink-muted);
    }

.cs-lp-lab-bar {
    margin-top: 14px;
}

.cs-lp-lab-stats {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--cs-line-soft);
}

.cs-lp label.cs-lp-range-label {
    display: block;
    margin: 20px 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cs-ink-faint);
}

/* The track carries the bands for 10 to 120 %FC: stress under 45, refill
   under 70, optimal to 100, above field capacity after. */
.cs-lp .cs-lp-range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 8px;
    margin: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #DC5B4B 0 31.8%, #E8A33D 31.8% 54.5%, #57B77C 54.5% 81.8%, #5B8DEF 81.8% 100%);
    cursor: pointer;
}

    .cs-lp .cs-lp-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #fff;
        border: 0;
        box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.12), 0 4px 10px rgba(16, 24, 40, 0.25);
        transition: transform 0.15s;
    }

    .cs-lp .cs-lp-range::-moz-range-thumb {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #fff;
        border: 0;
        box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.12), 0 4px 10px rgba(16, 24, 40, 0.25);
    }

    .cs-lp .cs-lp-range:active::-webkit-slider-thumb {
        transform: scale(1.12);
    }

    .cs-lp .cs-lp-range:focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px rgba(44, 54, 126, 0.2);
    }

.cs-lp-range-hint {
    display: block;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--cs-ink-muted);
}

.cs-lp-lab-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.cs-lp p.cs-lp-lab-note {
    position: relative;
    margin-top: 18px;
    padding: 11px 14px;
    border-radius: 12px;
    background: var(--cs-surface-alt);
    font-size: 13px;
    line-height: 1.5;
    color: var(--cs-label);
}

/* ===========================================================================
   The bento. Tiles size their insides by their own width.
   =========================================================================== */

.cs-lp-bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 16px;
}

.cs-lp-tile {
    position: relative;
    container-type: inline-size;
    min-height: 230px;
    padding: 24px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--cs-line);
    box-shadow: var(--cs-shadow);
    overflow: hidden;
    transition: transform 0.3s var(--cs-ease), box-shadow 0.3s, border-color 0.3s;
}

    .cs-lp-tile:hover {
        transform: translateY(-3px);
        border-color: #D5D9DF;
        box-shadow: 0 22px 44px -26px rgba(16, 24, 40, 0.3);
    }

    .cs-lp-tile p {
        font-size: 13.5px;
        line-height: 1.55;
        color: #6B7280;
        max-width: 32em;
    }

.cs-lp-tile-wide,
.cs-lp-tile-sensors,
.cs-lp-tile-records {
    grid-column: span 2;
}

.cs-lp-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
    border-radius: 13px;
    font-size: 16px;
    color: var(--a);
    background: color-mix(in srgb, var(--a) 13%, #fff);
}

/* Probe dashboard tile */
.cs-lp-tile-dash {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: start;
}

    .cs-lp-tile-dash .cs-lp-mini-dash {
        align-self: center;
    }

/* A container query cannot restyle its own container, so these two tiles
   stack by the screen's width instead. */
@media (max-width: 760px) {
    .cs-lp-tile-dash {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cs-lp-mini-dash {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cs-lp-mini-ring {
    width: 108px;
    height: 108px;
    flex: 0 0 auto;
    transform: rotate(-90deg);
}

    .cs-lp-mini-ring circle {
        fill: none;
        stroke-width: 11;
    }

    .cs-lp-mini-ring .track {
        stroke: var(--cs-line-soft);
    }

    .cs-lp-mini-ring .seg {
        stroke: var(--c);
        stroke-dasharray: var(--len) 251.3;
        stroke-dashoffset: var(--off);
        transition: stroke-dasharray 1.2s var(--cs-ease);
    }

.cs-lp-anim .cs-lp-tile-dash:not(.is-in) .cs-lp-mini-ring .seg {
    stroke-dasharray: 0 251.3;
}

.cs-lp-mini-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 92px));
    gap: 8px;
}

    .cs-lp-mini-cards span {
        padding: 9px 11px;
        border-radius: 12px;
        background: #fff;
        border: 1px solid var(--cs-line);
    }

        .cs-lp-mini-cards span.is-stress {
            background: var(--cs-wash-bad);
            box-shadow: inset 3px 0 0 0 var(--lp-bad);
        }

        .cs-lp-mini-cards span.is-refill {
            background: var(--cs-wash-warn);
            box-shadow: inset 3px 0 0 0 var(--lp-warn);
        }

        .cs-lp-mini-cards b {
            display: block;
            font-size: 22px;
            font-weight: 300;
            line-height: 1.1;
            color: var(--cs-ink-strong);
        }

        .cs-lp-mini-cards em {
            display: block;
            font-style: normal;
            font-size: 11px;
            color: var(--cs-ink-muted);
        }

/* Weather tile, with a wind rose drawn by cs-landing.js */
.cs-lp-tile-weather {
    padding-bottom: 150px;
}

.cs-lp-rose {
    position: absolute;
    right: 18px;
    bottom: 16px;
    width: 128px;
    height: 128px;
}

    .cs-lp-rose .ring {
        fill: none;
        stroke: var(--cs-line);
        stroke-width: 0.6;
        stroke-dasharray: 1.5 2;
    }

    .cs-lp-rose .petal {
        fill: #E3A42B;
        stroke: #fff;
        stroke-width: 0.6;
        transform-box: view-box;
        transform-origin: 0 0;
        transition: transform 0.8s var(--cs-ease);
    }

.cs-lp-anim .cs-lp-tile-weather:not(.is-in) .cs-lp-rose .petal {
    transform: scale(0);
}

/* Alerts tile */
.cs-lp-toasts {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

    .cs-lp-toasts span {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 9px 12px;
        border-radius: 12px;
        background: var(--cs-surface-alt);
        font-size: 12px;
        color: var(--cs-ink);
        transition: transform 0.7s var(--cs-ease), opacity 0.7s;
    }

        .cs-lp-toasts span i {
            font-size: 13px;
            color: var(--lp-navy);
        }

        .cs-lp-toasts span:nth-child(2) {
            transition-delay: 0.15s;
        }

.cs-lp-anim .cs-lp-tile-alerts:not(.is-in) .cs-lp-toasts span {
    opacity: 0;
    transform: translateX(24px);
}

/* Sensors tile */
.cs-lp ul.cs-lp-sensor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

    .cs-lp-sensor-chips li {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 13px 7px 11px;
        border-radius: 999px;
        background: #fff;
        border: 1px solid var(--cs-line);
        font-size: 12.5px;
        font-weight: 500;
        color: var(--cs-ink);
        transition: border-color 0.2s, transform 0.2s var(--cs-ease);
    }

        .cs-lp-sensor-chips li::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--a);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 18%, transparent);
        }

        .cs-lp-sensor-chips li:hover {
            border-color: var(--a);
            transform: translateY(-1px);
        }

/* Satellite tile: the one dark tile, so it reads as a doorway */
.cs-lp-tile-sat {
    color: #fff;
    border-color: transparent;
    background:
        radial-gradient(70% 60% at 85% 15%, rgba(26, 152, 80, 0.55), transparent 70%),
        radial-gradient(60% 50% at 10% 100%, rgba(244, 109, 67, 0.38), transparent 70%),
        radial-gradient(50% 40% at 60% 70%, rgba(254, 224, 139, 0.22), transparent 70%),
        linear-gradient(160deg, #10241B, var(--cs-crop));
}

    .cs-lp .cs-lp-tile-sat h3.cs-lp-h3 {
        color: #fff !important;
    }

    .cs-lp-tile-sat p {
        color: rgba(255, 255, 255, 0.72);
    }

    .cs-lp-tile-sat .cs-lp-tile-icon {
        color: #9BE3B5;
        background: rgba(255, 255, 255, 0.1);
    }

    .cs-lp .cs-lp-tile-sat a.cs-lp-textlink {
        margin-top: 14px;
        color: #B8F0CB;
    }

/* Records tile: a few report bars as decoration */
.cs-lp-tile-records::after {
    content: "";
    position: absolute;
    right: 24px;
    bottom: 22px;
    width: 140px;
    height: 70px;
    opacity: 0.9;
    background:
        linear-gradient(#2C367E, #2C367E) 0 100% / 14px 40% no-repeat,
        linear-gradient(#5A6CD6, #5A6CD6) 24px 100% / 14px 70% no-repeat,
        linear-gradient(#2C367E, #2C367E) 48px 100% / 14px 55% no-repeat,
        linear-gradient(#5A6CD6, #5A6CD6) 72px 100% / 14px 90% no-repeat,
        linear-gradient(#2C367E, #2C367E) 96px 100% / 14px 62% no-repeat,
        linear-gradient(#5A6CD6, #5A6CD6) 120px 100% / 14px 78% no-repeat;
    border-radius: 3px;
}

@container (max-width: 460px) {
    .cs-lp-tile-records::after {
        display: none;
    }
}

/* Battery tile */
.cs-lp-meter {
    position: relative;
    height: 12px;
    margin-top: 18px;
    border-radius: 999px;
    background: var(--cs-line-soft);
    overflow: hidden;
}

    .cs-lp-meter i {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--w);
        border-radius: inherit;
        background: linear-gradient(90deg, #3E9A63, #57B77C);
        transform-origin: left center;
        transition: transform 1.1s var(--cs-ease);
    }

.cs-lp-anim .cs-lp-tile-battery:not(.is-in) .cs-lp-meter i {
    transform: scaleX(0);
}

/* Phone tile */
.cs-lp-tile-phone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    padding-bottom: 0;
}

    .cs-lp-tile-phone .cs-lp-tile-text {
        padding-bottom: 24px;
        align-self: center;
    }

@media (max-width: 760px) {
    .cs-lp-tile-phone {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-lp-phone {
        justify-self: center;
    }
}

.cs-lp a.cs-lp-store,
.cs-lp a.cs-lp-store:hover {
    color: #fff;
    text-decoration: none;
}

.cs-lp-stores {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.cs-lp a.cs-lp-store {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px 9px 14px;
    border-radius: 12px;
    background: #111;
    transition: transform 0.2s var(--cs-ease), background 0.2s;
}

    .cs-lp a.cs-lp-store:hover {
        transform: translateY(-2px);
        background: #000;
    }

    .cs-lp a.cs-lp-store i {
        font-size: 24px;
    }

    .cs-lp a.cs-lp-store span {
        display: block;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.1;
    }

        .cs-lp a.cs-lp-store span small {
            display: block;
            font-size: 9.5px;
            font-weight: 400;
            letter-spacing: 0.03em;
            opacity: 0.8;
        }

.cs-lp-phone {
    width: 164px;
    height: 230px;
    padding: 9px 9px 0;
    border-radius: 30px 30px 0 0;
    background: #1C2331;
    box-shadow: 0 -10px 40px -16px rgba(16, 24, 40, 0.5);
}

.cs-lp-phone-screen {
    display: flex;
    flex-direction: column;
    gap: 7px;
    height: 100%;
    padding: 30px 10px 0;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, #F7F8FA, #EEF0F3);
    position: relative;
}

.cs-lp-phone-bar {
    position: absolute;
    left: 50%;
    top: 9px;
    width: 52px;
    height: 14px;
    margin-left: -26px;
    border-radius: 999px;
    background: #1C2331;
}

.cs-lp-phone-card {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

    .cs-lp-phone-card b {
        font-size: 18px;
        font-weight: 300;
        color: var(--cs-ink-strong);
        font-variant-numeric: tabular-nums;
    }

    .cs-lp-phone-card em {
        font-style: normal;
        font-size: 10.5px;
        color: var(--cs-ink-muted);
    }

    .cs-lp-phone-card.is-good { box-shadow: inset 3px 0 0 0 var(--lp-good), 0 1px 2px rgba(16, 24, 40, 0.06); }
    .cs-lp-phone-card.is-warn { box-shadow: inset 3px 0 0 0 var(--lp-warn), 0 1px 2px rgba(16, 24, 40, 0.06); }
    .cs-lp-phone-card.is-bad { box-shadow: inset 3px 0 0 0 var(--lp-bad), 0 1px 2px rgba(16, 24, 40, 0.06); }

/* ===========================================================================
   Satellite crop health
   =========================================================================== */

.cs-lp ul.cs-lp-points {
    display: grid;
    gap: 14px;
    margin-top: 26px;
}

    .cs-lp-points li {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 14px;
        align-items: center;
        font-size: 14px;
        line-height: 1.5;
        color: #5B616C;
    }

        .cs-lp-points li i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 12px;
            font-size: 14px;
            color: #1A8048;
            background: rgba(26, 152, 80, 0.1);
        }

        .cs-lp-points li b {
            font-weight: 600;
            color: var(--cs-ink-strong);
        }

.cs-lp-map-card {
    padding: 14px 14px 12px;
    border-radius: 24px;
    background: linear-gradient(160deg, #0F1E17, #132A20);
    box-shadow: 0 40px 80px -40px rgba(10, 30, 20, 0.7);
}

.cs-lp-map {
    position: relative;
    aspect-ratio: 600 / 380;
    border-radius: 16px;
    overflow: hidden;
    background: #1B2B21;
}

    .cs-lp-map svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

/* Without script, a soft NDVI-coloured field so the card is not empty */
.cs-lp-map-fallback {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(30% 40% at 25% 30%, #1A9850, transparent 70%),
        radial-gradient(25% 35% at 70% 35%, #66BD63, transparent 70%),
        radial-gradient(25% 30% at 60% 80%, #FDAE61, transparent 70%),
        radial-gradient(30% 35% at 20% 80%, #A6D96A, transparent 70%),
        #3B5A3A;
}

.cs-lp-map.is-drawn .cs-lp-map-fallback {
    display: none;
}

.cs-lp-map .cs-lp-hit {
    fill: transparent;
    stroke: transparent;
    stroke-width: 2;
    cursor: pointer;
    transition: stroke 0.2s;
}

    .cs-lp-map .cs-lp-hit:hover,
    .cs-lp-map .cs-lp-hit.is-on {
        stroke: rgba(255, 255, 255, 0.9);
    }

/* The pass: the true colour view slides away behind the scan line,
   leaving NDVI. Runs only while the map is on screen (.is-live). */
.cs-lp-map .is-true {
    animation: cs-lp-pass 10s var(--cs-ease) infinite;
    animation-play-state: paused;
}

.cs-lp-scan {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: #CFF5DD;
    box-shadow: 0 0 18px 4px rgba(108, 192, 141, 0.7);
    opacity: 0;
    pointer-events: none;
    animation: cs-lp-scan 10s var(--cs-ease) infinite;
    animation-play-state: paused;
}

.cs-lp-map.is-live .is-true,
.cs-lp-map.is-live .cs-lp-scan {
    animation-play-state: running;
}

@keyframes cs-lp-pass {
    0%, 12% { clip-path: inset(0 0 0 0); opacity: 1; }
    58% { clip-path: inset(0 0 0 100%); opacity: 1; }
    86% { clip-path: inset(0 0 0 100%); opacity: 1; }
    87% { clip-path: inset(0 0 0 0); opacity: 0; }
    100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes cs-lp-scan {
    0%, 12% { left: 0; opacity: 0; }
    15% { opacity: 1; }
    55% { opacity: 1; }
    58% { left: 100%; opacity: 0; }
    100% { left: 100%; opacity: 0; }
}

.cs-lp-map-tip {
    position: absolute;
    z-index: 2;
    min-width: 150px;
    padding: 9px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.5);
    font-size: 12px;
    color: var(--cs-ink);
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 12px));
}

    .cs-lp-map-tip b {
        display: block;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--cs-ink-strong);
    }

    .cs-lp-map-tip span {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 3px;
        color: var(--cs-label);
    }

    .cs-lp-map-tip i {
        width: 10px;
        height: 10px;
        border-radius: 3px;
        background: var(--c);
    }

.cs-lp-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 4px 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

    .cs-lp-legend i {
        flex: 1 1 auto;
        height: 8px;
        border-radius: 999px;
        background: linear-gradient(90deg, #A50026, #D73027, #F46D43, #FDAE61, #FEE08B, #D9EF8B, #A6D96A, #66BD63, #1A9850, #006837);
    }

.cs-lp p.cs-lp-map-note {
    margin: 8px 4px 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

/* ===========================================================================
   Steps
   =========================================================================== */

.cs-lp ol.cs-lp-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

    /* The line joining the three numbers, behind the cards */
    .cs-lp-steps::before {
        content: "";
        position: absolute;
        left: 12%;
        right: 12%;
        top: 46px;
        height: 2px;
        background: repeating-linear-gradient(90deg, var(--cs-field-border) 0 8px, transparent 8px 14px);
        z-index: 0;
    }

@supports (animation-timeline: view()) {
    .cs-lp-steps::after {
        content: "";
        position: absolute;
        left: 12%;
        right: 12%;
        top: 46px;
        height: 2px;
        background: linear-gradient(90deg, var(--cs-leaf), var(--lp-navy));
        transform-origin: 0 50%;
        z-index: 0;
        animation: cs-lp-draw linear both;
        animation-timeline: view();
        animation-range: entry 30% cover 55%;
    }
}

@keyframes cs-lp-draw {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.cs-lp-steps li {
    position: relative;
    z-index: 1;
    padding: 24px 24px 26px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--cs-line);
    box-shadow: var(--cs-shadow);
}

    .cs-lp-steps li:nth-child(2) { --d: 120ms; }
    .cs-lp-steps li:nth-child(3) { --d: 240ms; }

    .cs-lp-steps li p {
        font-size: 13.5px;
        line-height: 1.55;
        color: #6B7280;
    }

.cs-lp-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--lp-navy);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 0 0 6px #fff, 0 10px 22px -10px rgba(44, 54, 126, 0.8);
}

/* ===========================================================================
   Contact
   =========================================================================== */

.cs-lp-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 80px);
    align-items: start;
}

.cs-lp ul.cs-lp-contact-list {
    display: grid;
    gap: 16px;
    margin-top: 30px;
}

    .cs-lp-contact-list li {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 14px;
        align-items: center;
    }

.cs-lp-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 15px;
    color: var(--lp-navy);
    background: rgba(44, 54, 126, 0.08);
}

.cs-lp-contact-list div > span {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cs-ink-faint);
}

.cs-lp-contact-list a,
.cs-lp-contact-list b {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--cs-ink-strong);
    text-decoration: none;
}

.cs-lp .cs-lp-contact-list a {
    color: var(--lp-navy);
}

    .cs-lp .cs-lp-contact-list a:hover {
        color: var(--lp-navy-deep);
        text-decoration: underline;
    }

.cs-lp-form-card {
    padding: clamp(20px, 3vw, 34px);
    border-radius: 24px;
    background: #fff;
    border: 1px solid var(--cs-line);
    box-shadow: 0 40px 80px -50px rgba(16, 24, 40, 0.45), 0 1px 2px rgba(16, 24, 40, 0.05);
}

.cs-lp .cs-lp-form h3.cs-lp-h3 {
    font-size: 19px !important;
    margin-bottom: 18px !important;
}

.cs-lp-field {
    margin-bottom: 16px;
}

    .cs-lp-field label {
        display: block;
        margin: 0 0 7px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--cs-ink);
    }

.cs-lp-field-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

    .cs-lp-field-row label {
        margin-bottom: 7px;
    }

.cs-lp-count {
    font-size: 11px;
    color: var(--cs-ink-faint);
    font-variant-numeric: tabular-nums;
}

    .cs-lp-count.is-near {
        color: #B26E12;
    }

.cs-lp .cs-lp-field input,
.cs-lp .cs-lp-field textarea {
    display: block;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 15px;
    border: 1px solid var(--cs-field-border);
    border-radius: 13px;
    background: #fff;
    color: var(--cs-ink-strong);
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cs-lp .cs-lp-field textarea {
    height: auto;
    min-height: 136px;
    padding: 13px 15px;
    line-height: 1.5;
    resize: vertical;
}

    .cs-lp .cs-lp-field input::placeholder,
    .cs-lp .cs-lp-field textarea::placeholder {
        color: #B3B8C0;
    }

    .cs-lp .cs-lp-field input:focus,
    .cs-lp .cs-lp-field textarea:focus {
        outline: none;
        border-color: var(--lp-navy);
        box-shadow: 0 0 0 4px rgba(44, 54, 126, 0.12);
    }

    .cs-lp .cs-lp-field input.is-invalid,
    .cs-lp .cs-lp-field textarea.is-invalid {
        border-color: var(--lp-bad);
        box-shadow: 0 0 0 4px rgba(220, 91, 75, 0.12);
    }

.cs-lp .cs-lp-send {
    width: 100%;
    margin-top: 6px;
}

.cs-lp-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: cs-lp-spin 0.8s linear infinite;
}

.cs-lp .cs-lp-send.is-busy {
    pointer-events: none;
}

    .cs-lp .cs-lp-send.is-busy .cs-lp-spinner {
        display: inline-block;
    }

    .cs-lp .cs-lp-send.is-busy .cs-lp-send-text {
        opacity: 0.75;
    }

@keyframes cs-lp-spin {
    to { transform: rotate(360deg); }
}

.cs-lp p.cs-lp-fine {
    margin-top: 14px;
    font-size: 12px;
    color: var(--cs-ink-muted);
}

    .cs-lp p.cs-lp-fine a {
        color: var(--lp-navy);
    }

/* Messages in the card. Core's .cs-note is the amber standing note; these
   are its outcome variants for this page. */
.cs-lp .cs-note {
    margin-bottom: 16px;
    border-radius: 12px;
    animation: cs-lp-up 0.4s var(--cs-ease) both;
}

    .cs-lp .cs-note.is-error {
        color: #9B2C1F;
        background: #FDF1EF;
        border-color: #F4C7BF;
    }

    .cs-lp .cs-note.is-ok {
        color: #1E6B3F;
        background: #EEF8F1;
        border-color: #BFE3CB;
    }

/* The honeypot: off screen, never shown */
.cs-lp .cs-hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ---------------------------------------------------------------------------
   Satellite crop health on its dark band
   --------------------------------------------------------------------------- */

.cs-lp .cs-lp-band-dark h2.cs-lp-h2 {
    color: #fff !important;
}

.cs-lp .cs-lp-band-dark .cs-lp-kicker {
    color: #8FD8AC;
}

.cs-lp .cs-lp-band-dark p.cs-lp-intro {
    color: rgba(255, 255, 255, 0.72);
}

.cs-lp-band-dark .cs-lp-points li {
    color: rgba(255, 255, 255, 0.7);
}

    .cs-lp-band-dark .cs-lp-points li b {
        color: #fff;
    }

    .cs-lp-band-dark .cs-lp-points li i {
        color: #8FD8AC;
        background: rgba(108, 192, 141, 0.14);
        box-shadow: inset 0 0 0 1px rgba(108, 192, 141, 0.25);
    }

.cs-lp-band-dark .cs-lp-map-card {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}

/* ===========================================================================
   Closing band, edge to edge like the hero
   =========================================================================== */

.cs-hero.cs-lp-cta {
    margin: clamp(64px, 9vw, 120px) 0 0;
    padding: clamp(56px, 7vw, 110px) max(var(--lp-gutter), calc((100% - var(--lp-max)) / 2));
    border-radius: 0;
    box-shadow: none;
    animation: none;
}

    .cs-lp-cta .cs-pivot-main {
        width: 820px;
        height: 820px;
        right: -160px;
        top: -300px;
    }

    .cs-lp-cta .cs-pivot-far {
        right: auto;
        left: 38%;
        top: auto;
        bottom: -200px;
    }

.cs-lp-cta-inner {
    position: relative;
    max-width: 720px;
}

.cs-lp .cs-lp-cta h2.cs-lp-h2 {
    color: #fff !important;
    margin-top: 0 !important;
}

.cs-lp-cta-inner p {
    font-size: clamp(16px, 1.3vw, 18.5px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.74);
    max-width: 36em;
}

/* ===========================================================================
   Smaller screens
   =========================================================================== */

@media (max-width: 1180px) {
    .cs-hero.cs-lp-hero {
        min-height: 0;
    }

    .cs-lp-hero-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }

    .cs-lp-hero-copy {
        max-width: 760px;
    }

    /* The window takes the width it is given; the phone moves to the right */
    .cs-lp-hero-visual {
        height: 624px;
    }

    .cs-lp-win {
        width: calc(100% + var(--lp-gutter));
        max-width: 900px;
        top: 30px;
    }

    .cs-lp-phone2 {
        top: 120px;
    }

    .cs-lp-alert {
        left: 24px;
        top: 0;
    }

    .cs-lp-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cs-lp dl.cs-lp-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .cs-lp-facts > div:nth-child(3) {
            padding-left: 0;
            border-left: 0;
        }

        .cs-lp-facts > div:nth-child(n+3) {
            border-top: 1px solid rgba(255, 255, 255, 0.10);
        }
}

@media (max-width: 980px) {
    .cs-lp-split,
    .cs-lp-split-flip,
    .cs-lp-contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }

        .cs-lp-split-flip > .cs-lp-copy {
            order: 0;
        }

    .cs-lp ol.cs-lp-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-lp-steps::before,
    .cs-lp-steps::after {
        display: none;
    }

    .cs-lp-app-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cs-lp-app-menu {
        display: none;
    }
}

/* On a phone the window would be too small to read, so the phone carries the
   product on its own, with the alert above it. */
@media (max-width: 640px) {
    .cs-lp-hero-inner {
        padding-top: 36px;
        gap: 36px;
    }

    .cs-lp .cs-lp-hero h1.cs-lp-title {
        font-size: clamp(36px, 10.5vw, 46px) !important;
    }

    .cs-lp-actions .cs-lp-btn {
        flex: 1 1 auto;
    }

    .cs-lp-hero-visual {
        height: auto;
        display: grid;
        justify-items: center;
        gap: 14px;
        padding-bottom: 28px;
    }

    .cs-lp-win {
        display: none;
    }

    .cs-lp-alert,
    .cs-lp-phone2 {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
    }

    .cs-lp-alert {
        order: -1;
        width: 100%;
        max-width: 340px;
    }

    .cs-lp p.cs-lp-stage-note {
        right: auto;
        bottom: 4px;
    }

    .cs-lp-facts > div {
        padding: 18px 14px 20px;
    }

    .cs-lp-bento {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-lp-tile-wide,
    .cs-lp-tile-sensors,
    .cs-lp-tile-records {
        grid-column: auto;
    }

    .cs-lp-tile {
        padding: 20px;
        min-height: 0;
    }

    .cs-lp-tile.cs-lp-tile-weather {
        padding-bottom: 156px;
    }

    .cs-lp-tile.cs-lp-tile-phone {
        padding-bottom: 0;
    }

    .cs-lp-lab-body {
        grid-template-columns: 150px minmax(0, 1fr);
        gap: 16px;
    }

    .cs-lp-soil-bands span.is-root::before {
        display: none;
    }
}

@media (max-width: 420px) {
    .cs-lp-lab-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-lp-soil {
        height: 330px;
        width: 100%;
        max-width: 220px;
    }

    .cs-lp-lab-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------------
   Phones: the app instead of signing in (Riaan, 2026-10-27). The same media
   query as the phone menu in cs-framework.css; keep the two in step.
   --------------------------------------------------------------------------- */

.cs-lp-getapp {
    display: none;
}

html[data-os="ios"] .cs-lp a.cs-lp-store.is-android,
html[data-os="android"] .cs-lp a.cs-lp-store.is-ios {
    display: none;
}

@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) and (max-width: 1119px) {
    .cs-lp .cs-lp-actions {
        display: none;
    }

    .cs-lp-getapp {
        display: block;
        margin-top: 26px;
    }

        .cs-lp-getapp .cs-lp-stores {
            margin-top: 0;
        }

        .cs-lp-getapp a.cs-lp-store {
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
        }

        .cs-lp .cs-lp-getapp p {
            margin-top: 12px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
        }
}

/* ===========================================================================
   Reduced motion: everything is simply there
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .cs-lp-anim [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .cs-lp-anim .cs-lp-hero-copy > *,
    .cs-lp-anim .cs-lp-facts > div,
    .cs-lp-anim .cs-lp-win,
    .cs-lp-anim .cs-lp-phone2,
    .cs-lp-anim .cs-lp-alert,
    .cs-lp-farm-arm,
    .cs-lp-rot > b,
    .cs-lp-marquee.is-running .cs-lp-marquee-track,
    .cs-lp-map .is-true,
    .cs-lp-scan,
    .cs-lp-drops i,
    .cs-lp .cs-note,
    .cs-lp-progress,
    .cs-lp-steps::after {
        animation: none !important;
    }

    .cs-lp-hero-scan,
    .cs-lp-map .is-true,
    .cs-lp-scan,
    .cs-lp-progress {
        display: none;
    }

    .cs-lp .cs-lp-btn,
    .cs-lp-tile,
    .cs-lp .cs-lp-ad-link,
    .cs-lp-ad-media img,
    .cs-lp-dev-bar i,
    .cs-lp-mini-ring .seg,
    .cs-lp-rose .petal,
    .cs-lp-toasts span,
    .cs-lp-meter i {
        transition: none !important;
    }

    .cs-lp .cs-lp-btn:hover,
    .cs-lp-tile:hover,
    .cs-lp a.cs-lp-ad-link:hover {
        transform: none;
    }

    .cs-lp-marquee.is-running {
        overflow-x: auto;
    }
}