/* ==========================================================================
   GeekFriends Web Monitoring
   GF-WEB-4B-1
   ========================================================================== */

.wm-page {
    --wm-purple:#4800B9;
    --wm-purple-dark:#300079;
    --wm-purple-soft:#F3EEFF;
    --wm-ink:#15151A;
    --wm-text:#50505B;
    --wm-muted:#7E7E89;
    --wm-line:#E7E6EC;
    --wm-dark:#17151B;
    --wm-green:#4B8D6B;
    --wm-max:1240px;

    color:var(--wm-ink);
    background:#fff;
}

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

.wm-shell {
    width:min(calc(100% - 64px),var(--wm-max));
    margin-inline:auto;
}

.wm-section {
    padding:136px 0;
}

.wm-eyebrow {
    margin:0 0 24px;

    color:var(--wm-purple);

    font-size:13px;
    font-weight:800;
    line-height:1.4;
    letter-spacing:.16em;
}

.wm-heading {
    max-width:760px;
}

.wm-heading--wide {
    max-width:940px;
}

.wm-heading--center {
    margin-inline:auto;
    text-align:center;
}

.wm-heading h2 {
    margin:0;

    font-size:clamp(42px,5vw,68px);
    font-weight:760;
    line-height:1.08;
    letter-spacing:-.045em;

    word-break:keep-all;
}

.wm-heading > p:last-child {
    max-width:720px;

    margin:28px 0 0;

    color:var(--wm-text);

    font-size:18px;
    line-height:1.82;

    word-break:keep-all;
}

.wm-heading--center > p:last-child {
    margin-inline:auto;
}


/* BUTTON */

.wm-btn {
    display:inline-flex;

    min-height:54px;

    align-items:center;
    justify-content:center;

    padding:0 26px;

    border:1px solid transparent;
    border-radius:999px;

    font-size:15px;
    font-weight:750;
    line-height:1;

    text-decoration:none;

    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease,
        color .22s ease;
}

.wm-btn:hover {
    transform:translateY(-2px);
}

.wm-btn--primary {
    color:#fff;
    background:var(--wm-purple);
}

.wm-btn--primary:hover {
    color:#fff;
    background:var(--wm-purple-dark);
}

.wm-btn--ghost {
    color:var(--wm-ink);

    border-color:#DADAE2;

    background:rgba(255,255,255,.78);
}

.wm-btn--ghost:hover {
    color:var(--wm-purple);
    border-color:var(--wm-purple);
}

.wm-btn--white {
    color:var(--wm-purple);
    background:#fff;
}


/* HERO */

.wm-hero {
    position:relative;
    overflow:hidden;

    padding:108px 0 118px;

    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(72,0,185,.11),
            transparent 33%
        ),
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FAF9FD 100%
        );
}

.wm-hero::after {
    position:absolute;

    right:-260px;
    bottom:-370px;

    width:760px;
    height:760px;

    border:1px solid rgba(72,0,185,.09);
    border-radius:50%;

    content:"";
}

.wm-hero__grid {
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(0,.90fr)
        minmax(520px,1.10fr);

    gap:68px;
    align-items:center;
}

.wm-hero__copy h1 {
    max-width:720px;
    margin:0;

    font-size:clamp(52px,6vw,80px);
    font-weight:780;
    line-height:1.02;
    letter-spacing:-.055em;

    word-break:keep-all;
}

.wm-hero__copy h1 span {
    display:block;

    margin-top:18px;

    color:var(--wm-purple);

    font-size:.72em;
    line-height:1.08;
}

.wm-hero__lead {
    max-width:650px;

    margin:32px 0 0;

    color:var(--wm-text);

    font-size:18px;
    line-height:1.82;

    word-break:keep-all;
}

.wm-hero__lead strong {
    color:var(--wm-ink);
}

.wm-hero__actions {
    display:flex;
    flex-wrap:wrap;

    gap:12px;

    margin-top:36px;
}

.wm-hero__tags {
    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin-top:34px;
}

.wm-hero__tags span {
    padding:9px 13px;

    border:1px solid #E3E0EA;
    border-radius:999px;

    color:#65616D;

    background:rgba(255,255,255,.78);

    font-size:12px;
    font-weight:700;
}

.wm-hero__visual {
    margin:0;
}

.wm-browser {
    overflow:hidden;

    border:1px solid rgba(72,0,185,.14);
    border-radius:26px;

    background:#fff;

    box-shadow:
        0 32px 80px rgba(40,19,72,.12);
}

.wm-browser__bar {
    display:flex;

    min-height:50px;

    align-items:center;

    gap:18px;

    padding:0 18px;

    border-bottom:1px solid #ECE9F1;

    background:#FBFAFD;
}

.wm-browser__dots {
    display:flex;
    gap:6px;
}

.wm-browser__dots i {
    display:block;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#D8D3E1;
}

.wm-browser__bar > span {
    color:#8B8495;

    font-size:9px;
    font-weight:850;
    letter-spacing:.11em;
}

.wm-browser__bar > b {
    margin-left:auto;

    color:var(--wm-purple);

    font-size:9px;
    letter-spacing:.09em;
}

.wm-browser__image {
    display:grid;

    min-height:390px;

    place-items:center;

    padding:16px;

    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            #F8F6FC
        );
}

.wm-browser__image img {
    display:block;

    width:100%;
    height:auto;
    max-height:520px;

    object-fit:contain;

    border-radius:10px;
}

.wm-hero__visual figcaption {
    margin-top:12px;

    color:#918A9B;

    font-size:10px;
    text-align:right;
}


/* DATA */

.wm-data {
    background:#F8F8FA;
}

.wm-data-grid {
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:16px;

    margin-top:68px;
}

.wm-data-grid article {
    min-height:310px;

    padding:26px;

    border:1px solid #E5E4E9;
    border-radius:24px;

    background:#fff;
}

.wm-data-no {
    color:#938D9A;

    font-size:9px;
    font-weight:850;
    letter-spacing:.10em;
}

.wm-data-value {
    display:grid;

    width:82px;
    height:82px;

    place-items:center;

    margin-top:35px;

    border-radius:21px;

    background:var(--wm-purple-soft);
}

.wm-data-value strong {
    color:var(--wm-purple);
    font-size:23px;
}

.wm-data-value--purple {
    background:var(--wm-purple);
}

.wm-data-value--purple strong {
    color:#fff;
}

.wm-data-grid h3 {
    margin:34px 0 0;

    font-size:22px;
    letter-spacing:-.025em;
}

.wm-data-grid p {
    margin:11px 0 0;

    color:var(--wm-muted);

    font-size:13px;
    line-height:1.7;
}


/* FARM */

.wm-farm {
    background:#fff;
}

.wm-farm__grid {
    display:grid;

    grid-template-columns:
        minmax(380px,.72fr)
        minmax(0,1.28fr);

    gap:74px;
    align-items:center;
}

.wm-check-list {
    display:grid;
    gap:12px;

    margin:34px 0 0;
    padding:0;

    list-style:none;
}

.wm-check-list li {
    position:relative;

    padding-left:27px;

    color:#44434C;

    font-size:14px;
    font-weight:650;
}

.wm-check-list li::before {
    position:absolute;

    top:.48em;
    left:0;

    width:9px;
    height:9px;

    border-radius:50%;

    background:var(--wm-purple);

    box-shadow:
        0 0 0 5px var(--wm-purple-soft);

    content:"";
}

.wm-screen-card {
    margin:0;
    padding:25px;

    border:1px solid #E5E3EA;
    border-radius:28px;

    background:#FAFAFC;

    box-shadow:
        0 26px 74px rgba(28,22,37,.08);
}

.wm-screen-card__head {
    display:flex;

    align-items:center;
    justify-content:space-between;
}

.wm-screen-card__head > div span {
    display:block;

    color:#99919F;

    font-size:9px;
    font-weight:850;
    letter-spacing:.11em;
}

.wm-screen-card__head > div strong {
    display:block;

    margin-top:6px;

    font-size:17px;
}

.wm-state {
    padding:8px 11px;

    border-radius:999px;

    color:var(--wm-green);

    background:rgba(75,141,107,.10);

    font-size:9px;
    font-weight:850;
    letter-spacing:.07em;
}

.wm-screen-card__image {
    display:grid;

    min-height:390px;

    place-items:center;

    margin-top:22px;
    padding:13px;

    overflow:hidden;

    border-radius:18px;

    background:#fff;
}

.wm-screen-card__image img {
    display:block;

    width:100%;
    height:auto;
    max-height:520px;

    object-fit:contain;

    border-radius:9px;
}


/* COMPARE */

.wm-compare {
    background:
        linear-gradient(
            180deg,
            #FBFAFD,
            #F3EEFC
        );
}

.wm-compare-layout {
    display:grid;

    grid-template-columns:
        1.25fr .75fr;

    gap:22px;

    margin-top:70px;
}

.wm-field-map {
    padding:27px;

    border:1px solid rgba(72,0,185,.12);
    border-radius:28px;

    background:rgba(255,255,255,.86);
}

.wm-field-map__head span {
    display:block;

    color:#948A9F;

    font-size:9px;
    font-weight:850;
    letter-spacing:.11em;
}

.wm-field-map__head strong {
    display:block;

    margin-top:7px;

    font-size:18px;
}

.wm-field-grid {
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;

    margin-top:26px;
}

.wm-field-grid article {
    position:relative;

    display:flex;

    min-height:128px;

    flex-direction:column;
    justify-content:space-between;

    padding:15px;

    overflow:hidden;

    border:1px solid #E7E2ED;
    border-radius:15px;

    background:#fff;
}

.wm-field-grid article.active {
    border-color:rgba(72,0,185,.32);

    background:#F5EFFF;
}

.wm-field-grid span {
    position:relative;
    z-index:2;

    color:#88818F;

    font-size:9px;
    font-weight:800;
}

.wm-field-grid i {
    position:absolute;

    right:0;
    bottom:0;
    left:0;

    height:calc(var(--level) * 100%);

    background:
        linear-gradient(
            180deg,
            rgba(72,0,185,.04),
            rgba(72,0,185,.18)
        );
}

.wm-field-grid article.active i {
    background:
        linear-gradient(
            180deg,
            rgba(72,0,185,.08),
            rgba(72,0,185,.30)
        );
}

.wm-compare-copy {
    display:grid;
    gap:12px;
}

.wm-compare-copy article {
    min-height:145px;

    padding:22px;

    border:1px solid rgba(72,0,185,.11);
    border-radius:20px;

    background:#fff;
}

.wm-compare-copy span {
    color:var(--wm-purple);

    font-size:9px;
    font-weight:850;
    letter-spacing:.10em;
}

.wm-compare-copy h3 {
    margin:22px 0 0;

    font-size:19px;
}

.wm-compare-copy p {
    margin:7px 0 0;

    color:var(--wm-muted);

    font-size:12px;
    line-height:1.6;
}


/* WATER */

.wm-water {
    background:#fff;
}

.wm-water__grid {
    display:grid;

    grid-template-columns:
        minmax(390px,.78fr)
        minmax(0,1.22fr);

    gap:72px;
    align-items:center;
}

.wm-chart-panel {
    padding:27px;

    border:1px solid #E5E3EA;
    border-radius:28px;

    background:#FAFAFC;

    box-shadow:
        0 26px 74px rgba(28,22,37,.08);
}

.wm-chart-panel__head {
    display:flex;

    align-items:center;
    justify-content:space-between;
}

.wm-chart-panel__head > div span {
    display:block;

    color:#99929F;

    font-size:9px;
    font-weight:850;
    letter-spacing:.11em;
}

.wm-chart-panel__head > div strong {
    display:block;

    margin-top:6px;

    font-size:17px;
}

.wm-period {
    padding:8px 11px;

    border-radius:999px;

    color:var(--wm-purple);

    background:var(--wm-purple-soft);

    font-size:9px;
    font-weight:850;
}

.wm-chart-legend {
    display:flex;
    flex-wrap:wrap;

    gap:15px;

    margin-top:24px;
}

.wm-chart-legend span {
    display:inline-flex;

    align-items:center;

    gap:7px;

    color:#716C76;

    font-size:10px;
    font-weight:700;
}

.wm-chart-legend i {
    width:14px;
    height:4px;

    border-radius:999px;
}

.wm-chart-legend .is-water {
    background:rgba(72,0,185,.25);
}

.wm-chart-legend .is-moisture {
    background:var(--wm-purple);
}

.wm-chart-legend .is-ec {
    background:var(--wm-green);
}

.wm-chart-legend .is-temp {
    background:#8C8C95;
}

.wm-chart {
    margin-top:12px;

    overflow-x:auto;
}

.wm-chart svg {
    display:block;

    width:100%;
    min-width:620px;

    height:auto;
}

.wm-chart-grid line {
    stroke:#ECEAF0;
    stroke-width:1;
}

.wm-chart-water {
    fill:rgba(72,0,185,.12);
}

.wm-chart-line {
    fill:none;

    stroke-width:4;
    stroke-linecap:round;
}

.wm-chart-line--moisture {
    stroke:var(--wm-purple);
}

.wm-chart-line--ec {
    stroke:var(--wm-green);
}

.wm-chart-line--temp {
    stroke:#8B8B94;
    stroke-width:3;
}

.wm-chart-note {
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:16px 18px;

    border-radius:14px;

    background:var(--wm-purple-soft);
}

.wm-chart-note span {
    color:#8D829C;

    font-size:9px;
    font-weight:850;
    letter-spacing:.10em;
}

.wm-chart-note strong {
    color:var(--wm-purple);

    font-size:12px;
}


/* LEVEL */

.wm-levels {
    color:#fff;
    background:var(--wm-dark);
}

.wm-levels .wm-eyebrow {
    color:#AF83EE;
}

.wm-levels
.wm-heading > p:last-child {
    color:rgba(255,255,255,.60);
}

.wm-level-flow {
    display:grid;

    grid-template-columns:
        1fr 32px
        1fr 32px
        1fr 32px
        1fr;

    gap:10px;
    align-items:center;

    margin-top:72px;
}

.wm-level-flow article {
    min-height:255px;

    padding:23px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:22px;

    background:rgba(255,255,255,.035);
}

.wm-level-flow article.is-primary {
    border-color:rgba(174,130,238,.55);

    background:
        linear-gradient(
            150deg,
            rgba(72,0,185,.58),
            rgba(72,0,185,.22)
        );
}

.wm-level-no {
    color:rgba(255,255,255,.39);

    font-size:9px;
    font-weight:850;
}

.wm-level-icon {
    display:grid;

    height:82px;

    place-items:center;

    margin-top:25px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:17px;

    background:rgba(255,255,255,.05);
}

.wm-level-icon strong {
    font-size:10px;
    letter-spacing:.09em;
}

.wm-level-flow h3 {
    margin:24px 0 0;

    font-size:18px;
}

.wm-level-flow p {
    margin:7px 0 0;

    color:rgba(255,255,255,.45);

    font-size:11px;
}

.wm-level-flow > i {
    color:rgba(255,255,255,.28);

    font-style:normal;
    text-align:center;
}

.wm-level-message {
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:25px;

    margin-top:30px;
    padding:22px 25px;

    border:1px solid rgba(255,255,255,.09);
    border-radius:17px;

    background:rgba(255,255,255,.035);
}

.wm-level-message span {
    color:rgba(255,255,255,.48);

    font-size:9px;
    font-weight:850;
    letter-spacing:.08em;
}

.wm-level-message strong {
    color:#BA97EF;

    font-size:12px;
}


/* GROUP */

.wm-group {
    background:#fff;
}

.wm-group__grid {
    display:grid;

    grid-template-columns:
        minmax(380px,.72fr)
        minmax(0,1.28fr);

    gap:74px;
    align-items:center;
}

.wm-group-features {
    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin-top:30px;
}

.wm-group-features span {
    padding:8px 11px;

    border:1px solid #E5E1EB;
    border-radius:999px;

    color:#68636F;

    font-size:11px;
    font-weight:700;
}

.wm-group-screen {
    margin:0;

    overflow:hidden;

    border:1px solid #E5E3EA;
    border-radius:28px;

    background:#FAFAFC;

    box-shadow:
        0 26px 74px rgba(28,22,37,.08);
}

.wm-group-screen__bar {
    display:flex;

    align-items:center;
    justify-content:space-between;

    padding:20px 23px;

    border-bottom:1px solid #ECE9F0;
}

.wm-group-screen__bar span {
    color:#978F9D;

    font-size:9px;
    font-weight:850;
    letter-spacing:.10em;
}

.wm-group-screen__bar strong {
    font-size:14px;
}

.wm-group-screen__image {
    display:grid;

    min-height:390px;

    place-items:center;

    padding:17px;

    background:#fff;
}

.wm-group-screen__image img {
    display:block;

    width:100%;
    height:auto;
    max-height:520px;

    object-fit:contain;

    border-radius:9px;
}


/* STATUS */

.wm-status-section {
    background:#F8F8FA;
}

.wm-status-grid {
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:17px;

    margin-top:66px;
}

.wm-status-grid article {
    min-height:310px;

    padding:29px;

    border:1px solid #E4E3E8;
    border-radius:24px;

    background:#fff;
}

.wm-status-icon {
    display:grid;

    width:78px;
    height:78px;

    place-items:center;

    border-radius:20px;

    background:#F3F1F6;
}

.wm-status-icon i {
    display:block;

    width:14px;
    height:14px;

    border-radius:50%;
}

.wm-status-icon.is-normal i {
    background:var(--wm-green);

    box-shadow:
        0 0 0 7px rgba(75,141,107,.12);
}

.wm-status-icon.is-alert i {
    background:var(--wm-purple);

    box-shadow:
        0 0 0 7px rgba(72,0,185,.10);
}

.wm-status-icon.is-history i {
    border:3px solid #77727D;

    background:transparent;
}

.wm-status-grid article > span {
    display:block;

    margin-top:38px;

    color:#98919E;

    font-size:9px;
    font-weight:850;
    letter-spacing:.10em;
}

.wm-status-grid h3 {
    margin:8px 0 0;

    font-size:23px;
}

.wm-status-grid p {
    margin:12px 0 0;

    color:var(--wm-muted);

    font-size:13px;
    line-height:1.7;
}


/* SYSTEM */

.wm-system {
    color:#fff;
    background:var(--wm-dark);
}

.wm-system .wm-eyebrow {
    color:#AE82EE;
}

.wm-system
.wm-heading > p:last-child {
    color:rgba(255,255,255,.60);
}

.wm-system-flow {
    display:grid;

    grid-template-columns:
        1fr 25px
        1fr 25px
        1fr 25px
        1fr 25px
        1fr;

    gap:8px;
    align-items:center;

    margin-top:72px;
}

.wm-system-flow article {
    min-height:235px;

    padding:21px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:21px;

    background:rgba(255,255,255,.035);
}

.wm-system-flow article.is-primary {
    border-color:rgba(170,125,239,.52);

    background:
        linear-gradient(
            155deg,
            rgba(72,0,185,.58),
            rgba(72,0,185,.19)
        );
}

.wm-system-flow article > div {
    display:grid;

    width:70px;
    height:70px;

    place-items:center;

    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;

    background:rgba(255,255,255,.05);
}

.wm-system-flow article > div span {
    font-size:9px;
    font-weight:850;
    letter-spacing:.08em;
}

.wm-system-flow h3 {
    margin:43px 0 0;

    font-size:17px;

    word-break:keep-all;
}

.wm-system-flow p {
    margin:8px 0 0;

    color:rgba(255,255,255,.44);

    font-size:11px;
}

.wm-system-flow > i {
    color:rgba(255,255,255,.30);

    font-style:normal;
    text-align:center;
}

.wm-system-footer {
    display:flex;
    flex-wrap:wrap;

    align-items:center;

    gap:13px;

    margin-top:30px;
    padding:22px 25px;

    border:1px solid rgba(255,255,255,.09);
    border-radius:18px;

    background:rgba(255,255,255,.035);
}

.wm-system-footer span {
    color:rgba(255,255,255,.68);

    font-size:11px;
    font-weight:800;
    letter-spacing:.07em;
}

.wm-system-footer i {
    color:rgba(255,255,255,.25);

    font-style:normal;
}

.wm-system-footer strong {
    margin-left:auto;

    color:#B895EF;

    font-size:10px;
    letter-spacing:.07em;
}


/* SUMMARY */

.wm-summary {
    background:#F8F8FA;
}

.wm-summary__grid {
    display:grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap:80px;

    margin-top:58px;
}

.wm-summary__lead {
    padding:36px;

    border-radius:28px;

    color:#fff;

    background:
        linear-gradient(
            150deg,
            #4800B9,
            #2F006F
        );
}

.wm-summary__lead > span {
    color:rgba(255,255,255,.55);

    font-size:10px;
    font-weight:850;
    letter-spacing:.13em;
}

.wm-summary__lead h3 {
    margin:72px 0 0;

    font-size:clamp(30px,3.2vw,44px);

    line-height:1.18;
    letter-spacing:-.04em;

    word-break:keep-all;
}

.wm-summary__lead p {
    margin:24px 0 0;

    color:rgba(255,255,255,.67);

    font-size:15px;
    line-height:1.8;
}

.wm-spec-list {
    margin:0;

    border-top:1px solid #DCDCE2;
}

.wm-spec-list > div {
    display:grid;

    grid-template-columns:
        150px 1fr;

    gap:30px;

    padding:23px 4px;

    border-bottom:1px solid #DCDCE2;
}

.wm-spec-list dt {
    color:#85818B;

    font-size:13px;
    font-weight:700;
}

.wm-spec-list dd {
    margin:0;

    color:#2C2B31;

    font-size:14px;
    font-weight:650;
    line-height:1.6;
}


/* CTA */

.wm-cta {
    padding:110px 0;

    color:#fff;

    background:var(--wm-purple);
}

.wm-cta .wm-eyebrow {
    color:rgba(255,255,255,.57);
}

.wm-cta__grid {
    display:grid;

    grid-template-columns:
        1.05fr .95fr;

    gap:100px;
    align-items:end;
}

.wm-cta h2 {
    margin:0;

    font-size:clamp(44px,5.5vw,72px);
    line-height:1.06;
    letter-spacing:-.05em;

    word-break:keep-all;
}

.wm-cta__grid > div:last-child p {
    max-width:510px;

    margin:0 0 30px;

    color:rgba(255,255,255,.72);

    font-size:17px;
    line-height:1.8;
}


/* TABLET */

@media(max-width:1120px) {

    .wm-hero__grid {
        grid-template-columns:1fr 1fr;
        gap:46px;
    }

    .wm-data-grid {
        grid-template-columns:repeat(2,1fr);
    }

    .wm-level-flow,
    .wm-system-flow {
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }

    .wm-level-flow > i,
    .wm-system-flow > i {
        display:none;
    }

    .wm-system-flow article:last-of-type {
        grid-column:1 / -1;
    }
}


@media(max-width:900px) {

    .wm-shell {
        width:min(
            calc(100% - 40px),
            var(--wm-max)
        );
    }

    .wm-section {
        padding:104px 0;
    }

    .wm-hero {
        padding:78px 0 94px;
    }

    .wm-hero__grid,
    .wm-farm__grid,
    .wm-water__grid,
    .wm-group__grid,
    .wm-summary__grid,
    .wm-cta__grid {
        grid-template-columns:1fr;
        gap:48px;
    }

    .wm-hero__visual {
        max-width:760px;
    }

    .wm-compare-layout {
        grid-template-columns:1fr;
    }

    .wm-level-flow,
    .wm-system-flow {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:14px;
    }

    .wm-level-flow article,
    .wm-system-flow article {
        min-height:215px;
    }

    .wm-level-message {
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .wm-status-grid {
        grid-template-columns:1fr;
    }

    .wm-system-footer strong {
        width:100%;
        margin-left:0;
    }
}


/* MOBILE */

@media(max-width:680px) {

    .wm-shell {
        width:min(
            calc(100% - 32px),
            var(--wm-max)
        );
    }

    .wm-section {
        padding:82px 0;
    }

    .wm-eyebrow {
        margin-bottom:18px;
        font-size:11px;
    }

    .wm-heading h2 {
        font-size:clamp(36px,11vw,52px);
    }

    .wm-heading > p:last-child {
        margin-top:22px;

        font-size:16px;
        line-height:1.72;
    }

    .wm-hero {
        padding:60px 0 76px;
    }

    .wm-hero__copy h1 {
        font-size:clamp(46px,13vw,62px);
    }

    .wm-hero__copy h1 span {
        margin-top:15px;
    }

    .wm-hero__lead {
        margin-top:25px;

        font-size:16px;
        line-height:1.75;
    }

    .wm-btn {
        flex:1 1 auto;
    }

    .wm-browser {
        border-radius:20px;
    }

    .wm-browser__image {
        min-height:auto;
        padding:10px;
    }

    .wm-data-grid {
        grid-template-columns:1fr;
    }

    .wm-data-grid article {
        min-height:260px;
    }

    .wm-screen-card,
    .wm-chart-panel {
        padding:20px;
        border-radius:22px;
    }

    .wm-screen-card__image,
    .wm-group-screen__image {
        min-height:auto;
    }

    .wm-field-grid {
        grid-template-columns:repeat(3,1fr);
    }

    .wm-chart-note {
        align-items:flex-start;
        flex-direction:column;
        gap:6px;
    }

    .wm-level-flow,
    .wm-system-flow {
        grid-template-columns:1fr;

        gap:12px;

        margin-top:48px;
    }

    .wm-level-flow > i,
    .wm-system-flow > i {
        display:block;
        transform:rotate(90deg);
    }

    .wm-level-flow article,
    .wm-system-flow article {
        min-height:195px;
    }

    .wm-group-screen {
        border-radius:22px;
    }

    .wm-status-grid {
        margin-top:48px;
    }

    .wm-status-grid article {
        min-height:250px;
    }

    .wm-summary__lead {
        padding:30px;
    }

    .wm-summary__lead h3 {
        margin-top:50px;
    }

    .wm-spec-list > div {
        grid-template-columns:1fr;
        gap:8px;
    }

    .wm-cta {
        padding:84px 0;
    }
}


@media(prefers-reduced-motion:reduce) {

    .wm-btn {
        transition:none;
    }
}

/* GF-WEB-4B-2A FARM SCREEN POLISH START */

/* ==========================================================================
   FARM MONITORING screenshot viewport

   monitoring-farm.webp is a vertically long full-page capture.
   Showing the whole image with object-fit: contain makes the actual
   monitoring UI too small.

   Desktop/tablet therefore use a cropped viewport focused on the
   upper operating area of the real monitoring screen.
   ========================================================================== */

.wm-screen-card__image {
    position: relative;

    display: block;

    min-height: 0;
    height: auto;

    aspect-ratio: 16 / 10;

    padding: 12px;

    overflow: hidden;

    background: #fff;
}

.wm-screen-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    max-height: none;

    object-fit: cover;
    object-position: 50% 0%;

    border-radius: 9px;
}


/* Wide desktop */

@media (min-width: 1181px) {

    .wm-screen-card__image {
        aspect-ratio: 16 / 10;
    }

}


/* Tablet */

@media
  (min-width: 681px)
  and
  (max-width: 900px) {

    .wm-screen-card__image {
        aspect-ratio: 4 / 3;
    }

}


/* Mobile */

@media (max-width: 680px) {

    .wm-screen-card__image {
        aspect-ratio: 4 / 3;
        padding: 8px;
    }

}

/* GF-WEB-4B-2A FARM SCREEN POLISH END */

/* GF-WEB-4B-3B REAL SENSOR COMPARISON START */

/*
 * COMPARE THE FIELD
 * Replace the abstract 3x3 field graphic with a cropped
 * viewport of the actual farm-monitoring screen.
 *
 * The source image is intentionally not modified.
 * object-position: bottom focuses on the existing
 * "센서별 비교 한눈에 보기" area near the bottom.
 */

.wm-field-map--real {
    display:flex;
    flex-direction:column;
}

.wm-field-map__screen {
    position:relative;

    width:100%;

    aspect-ratio:1.48 / 1;

    margin-top:22px;

    overflow:hidden;

    border:1px solid
        rgba(72,0,185,.10);

    border-radius:16px;

    background:#F5F6F8;
}

.wm-field-map__screen img {
    display:block;

    width:100%;
    height:100%;

    max-width:none;
    max-height:none;

    object-fit:cover;
    object-position:50% 100%;
}

.wm-field-map__caption {
    margin:15px 2px 0;

    color:var(--wm-muted);

    font-size:11px;
    line-height:1.65;
}


/*
 * Keep the real screenshot and the SENSOR / ZONE / TIME
 * explanation cards visually balanced on desktop.
 */

.wm-compare-layout {
    align-items:stretch;
}

.wm-field-map--real {
    min-width:0;
}

.wm-compare-copy {
    align-self:stretch;
}


/* Tablet */

@media(max-width:900px) {

    .wm-field-map__screen {
        aspect-ratio:1.42 / 1;
    }

}


/* Mobile */

@media(max-width:680px) {

    .wm-field-map--real {
        padding:20px;
        border-radius:22px;
    }

    .wm-field-map__screen {
        aspect-ratio:1.15 / 1;
        margin-top:18px;
        border-radius:13px;
    }

    .wm-field-map__screen img {
        object-position:50% 100%;
    }

    .wm-field-map__caption {
        margin-top:12px;
        font-size:10px;
    }

}

/* GF-WEB-4B-3B REAL SENSOR COMPARISON END */



/* GF-WEB-CROSS-UI-1B START
   WEB MONITORING — SMART-1B readability harmonization
   ========================================================================== */


/* Hero chips */

.wm-hero__tags {
    gap: 10px;
}

.wm-hero__tags span {
    min-height: 40px;

    padding: 0 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
}


/* Group monitoring feature chips */

.wm-group-features {
    gap: 8px;
}

.wm-group-features span {
    min-height: 38px;

    padding: 0 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
}


/* Monitoring-level steps */

.wm-level-no {
    font-size: 12px;
}

.wm-level-icon strong {
    font-size: 13px;
}

.wm-level-flow p {
    font-size: 14px;
}

.wm-level-message span {
    font-size: 12px;
}

.wm-level-message strong {
    font-size: 15px;
}


/* System flow */

.wm-system-flow article > div span {
    font-size: 12px;
}

.wm-system-flow p {
    font-size: 14px;
}

.wm-system-footer span {
    font-size: 14px;
}

.wm-system-footer strong {
    font-size: 13px;
}


/* Keep actual monitoring-screen mock internals unchanged */


/* Mobile */

@media (max-width: 850px) {

    .wm-hero__tags span {
        min-height: 36px;
        padding: 0 12px;
        font-size: 13px;
    }

    .wm-group-features span {
        min-height: 34px;
        padding: 0 11px;
        font-size: 12px;
    }

    .wm-level-no {
        font-size: 11px;
    }

    .wm-level-icon strong {
        font-size: 12px;
    }

    .wm-level-flow p {
        font-size: 13px;
    }

    .wm-level-message span {
        font-size: 11px;
    }

    .wm-level-message strong {
        font-size: 14px;
    }

    .wm-system-flow article > div span {
        font-size: 11px;
    }

    .wm-system-flow p {
        font-size: 13px;
    }

    .wm-system-footer span {
        font-size: 13px;
    }

    .wm-system-footer strong {
        font-size: 12px;
    }

}

/* GF-WEB-CROSS-UI-1B END */