. The gradient above stays as the base, so if the file is ever missing the hero still looks finished rather than broken. */ .lm-hero.has-photo::before{ content:"";position:absolute;inset:0;z-index:1; background-image: linear-gradient(100deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.80) 34%, rgba(214,238,255,.55) 62%, rgba(184,224,255,.42) 100%), var(--hero-img, url('assets/hero-bg.jpg')); background-size:cover;background-position:center right; } .lm-hero.has-photo::after{opacity:.18;} /* soften the grid over a photo */ .lm-hero::after{ /* subtle grid */ content:"";position:absolute;inset:0;pointer-events:none;opacity:.4; background-image:linear-gradient(rgba(11,18,32,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(11,18,32,.05) 1px,transparent 1px); background-size:56px 56px;mask-image:linear-gradient(180deg,#000,transparent 78%); } .lm-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:56px; align-items:center;padding:132px 0 96px;} /* without this a long headline sets its column min-content width and the form column collapses - grid children default to min-width:auto */ .lm-hero-inner > *{min-width:0;} .lm-hero-inner > *:first-child{max-width:34ch;} .lm-kicker{ display:inline-flex;align-items:center;gap:10px;background:#000;color:var(--lm-yellow); font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase; padding:9px 16px;border-radius:999px; } /* Vendor lockup: the manufacturer's own logo sitting beside the kicker, so a visitor sees whose product this is before reading a word. Both halves are the same dark pill, which reads as one deliberate mark rather than two badges. The plate exists because vendors publish their logo white-on-dark and this hero is light. Giving the artwork the background it was drawn for is more honest than recolouring someone else's trademark to suit our page. */ /* Partner-levels ladder. Six columns will not fit a phone, so the table scrolls inside its own box rather than forcing the page to scroll sideways. */ .lm-levels{padding:74px 0;background:#f7f9fc;border-top:1px solid #e6ebf2;} .lm-levels-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:26px; border:1px solid #e0e6ef;border-radius:10px;background:#fff;} .lm-levels-table{width:100%;border-collapse:collapse;font-size:14px;min-width:660px;} .lm-levels-table th, .lm-levels-table td{padding:13px 14px;text-align:center;border-bottom:1px solid #eef1f6;} .lm-levels-table thead th{ background:#0a0f1a;color:#fff;font-size:11px;letter-spacing:1.2px;text-transform:uppercase; font-weight:700;white-space:nowrap;border-bottom:0; } .lm-levels-table thead th:first-child{text-align:left;} .lm-levels-table .rowhead{ text-align:left;font-weight:600;color:#0a0f1a;white-space:nowrap; position:sticky;left:0;background:#fff; } .lm-levels-table thead .rowhead{background:#0a0f1a;} .lm-levels-table tbody tr:nth-child(even) .rowhead{background:#fafbfd;} .lm-levels-table tbody tr:nth-child(even){background:#fafbfd;} .lm-levels-table tbody tr:last-child th, .lm-levels-table tbody tr:last-child td{border-bottom:0;} .lm-levels-table td.yes i{color:#0a7d3b;} .lm-levels-table td.yes sup{color:#0a7d3b;font-size:11px;margin-left:1px;} /* Group headings (Benefits / Certification / Annual Sales) span the table and break it into readable bands rather than one long undifferentiated list. */ .lm-levels-table tr.grp th{ text-align:left;background:#eef2f8;color:#0a0f1a; font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700; padding:10px 14px;border-bottom:1px solid #e0e6ef;position:static; } .lm-levels-table .mut{color:#c3cad6;} .lm-levels-note{margin-top:14px;font-size:13px;color:#5b6472;} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0;} @media (max-width:700px){ .lm-levels{padding:56px 0;} } .lm-hero h1{ font-size:var(--lm-fs-step);font-weight:800;line-height:1.04;letter-spacing:-.03em; color:#0a0f1a;margin:22px 0 18px;text-wrap:balance; } .lm-hero h1 em{font-style:normal;position:relative;white-space:nowrap;} .lm-hero h1 em::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.34em; background:var(--lm-yellow);z-index:-1;border-radius:2px;} .lm-hero p.lead{font-size:clamp(1rem,.94rem + .3vw,1.18rem);line-height:1.6;color:#20293a;max-width:33em;margin-bottom:26px;} .lm-hero .lm-trust{display:flex;flex-wrap:wrap;gap:8px 8px;margin-top:6px;} .lm-hero .lm-trust span{ background:rgba(255,255,255,.7);border:1px solid rgba(11,18,32,.1);color:#1c2536; font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:999px;backdrop-filter:blur(4px); } .lm-hero .lm-trust i{color:#0a7d3b;margin-right:6px;} /* toggle + form */ .lm-formwrap{background:#fff;border-radius:20px;padding:8px;box-shadow:0 26px 60px -12px rgba(11,18,32,.34);border:1px solid rgba(11,18,32,.06);} .lm-seg{display:grid;grid-template-columns:1fr 1fr;background:var(--lm-cream);border-radius:14px;padding:5px;gap:5px;} .lm-seg button{ border:0;background:transparent;font-family:inherit;font-weight:700;font-size:13.5px;color:#5b6473; padding:11px 8px;border-radius:10px;cursor:pointer;transition:all .25s ease;line-height:1.2; } .lm-seg button.on{background:#0a0f1a;color:#fff;box-shadow:0 6px 16px rgba(10,15,26,.28);} .lm-form{padding:22px 22px 20px;} .lm-form h2{font-size:17px;font-weight:800;color:#0a0f1a;margin:0 0 3px;} .lm-form .lm-formsub{font-size:12.5px;color:var(--lm-mut);margin:0 0 16px;} .lm-form label{font-size:12px;font-weight:700;color:#3a4252;margin-bottom:5px;display:block;} .lm-form .form-control,.lm-form .form-select{ border:1px solid #d7dbe2;border-radius:10px;padding:10px 12px;font-size:13.5px;margin-bottom:12px;font-family:inherit; } .lm-form .form-control:focus,.lm-form .form-select:focus{border-color:#0a0f1a;box-shadow:0 0 0 3px rgba(245,213,71,.5);} .lm-g2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;} .lm-submit{ width:100%;background:#0a0f1a;color:var(--lm-yellow);border:2px solid #0a0f1a;border-radius:999px; padding:14px;font-family:inherit;font-size:14.5px;font-weight:800;cursor:pointer; transition:all .25s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;justify-content:center;gap:9px; } .lm-submit:hover{background:var(--lm-yellow);color:#0a0f1a;transform:translateY(-2px);box-shadow:0 14px 28px rgba(10,15,26,.2);} .lm-fine{font-size:11.5px;color:#5f6775;text-align:center;margin:12px 0 0;line-height:1.5;} /* 4.5:1 on white */ /* ---------- REACH STRIP ---------- */ .lm-reach{background:#0a0f1a;color:#fff;padding:26px 0;} .lm-reach .lm-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px;justify-content:space-between;} .lm-reach .h{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--lm-yellow);} .lm-reach ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin:0;padding:0;} .lm-reach li{font-size:13px;font-weight:600;color:#cfd4dd;border:1px solid rgba(255,255,255,.16);padding:6px 12px;border-radius:999px;} /* once the row wraps, centre the whole strip instead of leaving it left-hung */ @media(max-width:940px){ .lm-reach{padding:30px 0;} .lm-reach .lm-wrap{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:16px;} .lm-reach ul{justify-content:center;} } /* ---------- PARTNER OFFER ---------- */ .lm-partner{padding:104px 0 88px;background:#fff;} /* left column vertically centred against the 6-item list */ /* The intro sits centred against the six partner cards rather than pinned to the top of them - matching eZon, OneScreen and Hush Pod, which all do this in their own stylesheets. With align-items:start the heading and button sat level with the first card and left a tall empty column beside the rest. */ .lm-partner .lm-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;} .lm-h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.9rem);font-weight:800;letter-spacing:-.025em;color:#0a0f1a;line-height:1.08;text-wrap:balance;} .lm-lead2{font-size:1.05rem;line-height:1.65;color:var(--lm-mut);margin-top:16px;} /* the benefit list is far taller than this column; centring it left a large void above and below. Pinned to the top and sticky so it tracks the list. */ .lm-partner .stick{position:static;} /* sticky fights the centring */ .lm-plist{display:grid;gap:2px;border:1px solid var(--lm-line);border-radius:18px;overflow:hidden;} .lm-prow{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:22px 24px;background:var(--lm-cream);transition:background .2s ease;} .lm-prow:hover{background:#fff;} .lm-prow .ic{width:44px;height:44px;border-radius:12px;background:#0a0f1a;color:var(--lm-yellow);display:flex;align-items:center;justify-content:center;font-size:18px;} .lm-prow h4{font-size:16.5px;font-weight:800;color:#0a0f1a;margin:0 0 5px;} .lm-prow p{font-size:14px;line-height:1.6;color:var(--lm-body);margin:0;} /* ---------- EXPLORER ("What eZon covers") ---------- */ .lm-explore{padding:104px 0;background:linear-gradient(180deg,#0a0f1a,#141b2e);color:#fff;} .lm-explore .head{max-width:640px;margin-bottom:44px;} .lm-explore .lm-h2{color:#fff;} .lm-explore .head p{color:rgba(255,255,255,.66);font-size:1.05rem;line-height:1.6;margin-top:14px;} /* tab column and panel are equal-height; tabs flex so the last one ("Field / industrial") bottom-aligns with the panel's bottom edge */ .lm-exp-grid{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:stretch;} .lm-exp-tabs{display:flex;flex-direction:column;gap:8px;} .lm-exp-tabs button{ flex:1 1 0;min-height:54px; text-align:left;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#e7e9ee; font-family:inherit;font-weight:700;font-size:14.5px;padding:15px 18px;border-radius:13px;cursor:pointer; display:flex;align-items:center;gap:12px;transition:all .22s ease; } .lm-exp-tabs button i{color:var(--lm-yellow);width:18px;text-align:center;} .lm-exp-tabs button:hover{background:rgba(255,255,255,.09);} .lm-exp-tabs button.on{background:var(--lm-yellow);color:#0a0f1a;border-color:var(--lm-yellow);} .lm-exp-tabs button.on i{color:#0a0f1a;} .lm-exp-panel{ border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:34px;background:rgba(255,255,255,.03); /* floor set to the tallest tab's content so switching tabs never resizes the column (and never nudges the tab list out of alignment) */ min-height:520px; } /* room photo — appears only once assets/covers-*.jpg exist; JS removes the element if the file 404s, so the panel stays correct with no images at all */ .lm-exp-shot{ width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;margin-bottom:22px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1); } .lm-exp-shot img{width:100%;height:100%;object-fit:cover;display:block;} .lm-exp-panel h3{font-size:22px;font-weight:800;color:#fff;margin:0 0 6px;} .lm-exp-panel .role{font-size:12.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--lm-yellow);} .lm-exp-panel p.d{font-size:15px;line-height:1.65;color:rgba(255,255,255,.78);margin:14px 0 22px;max-width:52ch;} .lm-exp-panel .kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px;} .lm-exp-panel .kv div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 16px;} .lm-exp-panel .kv span{display:block;} .lm-exp-panel .kv .t{font-size:11.5px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;} .lm-exp-panel .kv .v{font-size:14.5px;font-weight:700;color:#fff;} .lm-exp-panel .proj{font-size:13.5px;color:rgba(255,255,255,.7);border-top:1px solid rgba(255,255,255,.12);padding-top:16px;} .lm-exp-panel .proj b{color:#fff;} /* ---------- PRODUCTS ---------- */ .lm-products{padding:104px 0;background:#fff;} .lm-partner + .lm-products{padding-top:0;} .lm-products .head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:44px;flex-wrap:wrap;} .lm-products .head p{font-size:1.05rem;line-height:1.65;color:var(--lm-mut);margin:14px 0 0;max-width:56ch;} /* explicit steps — auto-fit leaves orphan cards at some widths. Column count is per-page via --prod-cols (3 for Hush Pod / OneScreen). */ .lm-prod-grid{display:grid;grid-template-columns:repeat(var(--prod-cols,4),minmax(0,1fr));gap:22px;} @media(max-width:1080px){.lm-prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:560px){.lm-prod-grid{grid-template-columns:minmax(0,1fr);}} .lm-card{ display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--lm-line);border-radius:18px; overflow:hidden;transition:border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.16,1,.3,1); } .lm-card:hover{border-color:var(--lm-yellow);box-shadow:0 18px 44px -12px rgba(11,18,32,.2);transform:translateY(-5px);} .lm-card .shot{ height:200px;background:var(--lm-cream);display:flex;align-items:center;justify-content:center;padding:22px; border-bottom:1px solid var(--lm-line); } .lm-card .shot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .35s cubic-bezier(.16,1,.3,1);} .lm-card:hover .shot img{transform:scale(1.05);} .lm-card .body{padding:22px 22px 0;flex:1;} .lm-card .cat{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#5f6775;display:block;margin-bottom:7px;} /* 4.5:1 on white */ .lm-card h3{font-size:17px;font-weight:800;color:#0a0f1a;margin:0 0 8px;line-height:1.25;} .lm-card p{font-size:13.5px;line-height:1.6;color:var(--lm-body);margin:0 0 16px;} .lm-card .chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px;} .lm-card .chips span{background:var(--lm-cream);border:1px solid var(--lm-line);border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700;color:#39414f;} .lm-card .foot{padding:0 22px 22px;display:flex;gap:10px;align-items:center;} .lm-card .foot .q{ flex:1;text-align:center;padding:11px 12px;font-size:12.5px;font-weight:800;font-family:inherit; background:#0a0f1a;color:var(--lm-yellow);border:2px solid #0a0f1a;border-radius:999px;cursor:pointer;transition:all .22s ease; } .lm-card .foot .q:hover{background:var(--lm-yellow);color:#0a0f1a;} .lm-card .foot .a{font-size:12.5px;font-weight:800;color:#0a0f1a;text-decoration:none;white-space:nowrap;border-bottom:2px solid var(--lm-yellow);padding-bottom:1px;} /* ---------- WHY ZEN ---------- */ .lm-zen{padding:104px 0;background:var(--lm-cream);} .lm-zen .lm-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;} .lm-zen .benefits-list{margin-top:26px;} /* ---------- FINAL CTA ---------- */ .lm-final{padding:96px 0;background:#fff;} .lm-final-box{position:relative;overflow:hidden;background:linear-gradient(135deg,#0a0f1a,#1a2540);border-radius:26px;padding:56px;color:#fff; display:grid;grid-template-columns:1.4fr .6fr;gap:30px;align-items:center;} .lm-final-box::before{content:"";position:absolute;top:-40%;right:-8%;width:340px;height:340px;background:var(--lm-yellow);border-radius:50%;opacity:.14;} .lm-final-box h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);font-weight:800;letter-spacing:-.02em;margin:0 0 10px;position:relative;} .lm-final-box p{color:rgba(255,255,255,.8);margin:0;font-size:1rem;position:relative;} .lm-final-box .btns{position:relative;text-align:right;} .lm-btn-y{display:inline-flex;align-items:center;gap:9px;background:var(--lm-yellow);color:#0a0f1a;font-weight:800;font-size:14.5px; padding:15px 28px;border-radius:999px;text-decoration:none;border:2px solid var(--lm-yellow);transition:all .25s ease;} .lm-btn-y:hover{background:#fff;border-color:#fff;transform:translateY(-2px);} /* ---------- QUOTE MODAL (staging inline styles, ported) ---------- */ .quote-modal{position:fixed;inset:0;display:none;z-index:1200;} .quote-modal.active{display:block;} .quote-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);} .quote-modal-content{position:relative;background:#fff;max-width:500px;margin:80px auto;padding:32px;border-radius:14px;z-index:2;box-shadow:0 30px 70px rgba(0,0,0,.35);} .quote-modal-content h3{font-size:20px;font-weight:800;margin-bottom:6px;} .quote-close{position:absolute;top:12px;right:16px;background:none;font-size:24px;border:none;cursor:pointer;line-height:1;} #quoteForm{margin-top:16px;} #quoteForm .form-row{display:flex;gap:12px;} #quoteForm .form-group{flex:1;display:flex;flex-direction:column;margin-bottom:14px;} #quoteForm .form-group.full{width:100%;} #quoteForm label{font-size:12.5px;font-weight:700;margin-bottom:5px;color:#333;} #quoteForm input,#quoteForm textarea{padding:10px 12px;border:1px solid #d8dbe0;border-radius:8px;font-size:14px;font-family:inherit;} #quoteForm textarea{min-height:88px;resize:vertical;} #quoteForm .btn-submit{width:100%;padding:13px;background:var(--lm-yellow);border:2px solid var(--lm-yellow);color:#0a0f1a;font-weight:800;border-radius:999px;cursor:pointer;} #quoteForm .btn-submit:hover{background:#0a0f1a;border-color:#0a0f1a;color:var(--lm-yellow);} /* ---------- responsive ---------- */ @media(max-width:991px){ .lm-hero-inner{grid-template-columns:1fr;gap:40px;padding:112px 0 72px;} .lm-partner .lm-wrap,.lm-zen .lm-wrap{grid-template-columns:1fr;gap:34px;} .lm-partner .stick{position:static;} .lm-exp-grid{grid-template-columns:1fr;} .lm-exp-tabs{flex-direction:row;flex-wrap:wrap;} .lm-exp-tabs button{flex:1 1 42%;min-height:0;} .lm-exp-panel{min-height:0;} .lm-final-box{grid-template-columns:1fr;padding:40px 28px;text-align:center;} .lm-final-box .btns{text-align:center;} } @media(max-width:575px){ .lm-g2{grid-template-columns:1fr;} .lm-reach .lm-wrap{flex-direction:column;align-items:flex-start;} } /* ---------- RANGE BAND ---------- Optional full-width band showing the whole product family on one shot. Used where a brand has a single "family" image (e.g. Hush Pod). Skip it on brands without one - the section simply isn't in the markup. */ .lm-range{padding:0 0 104px;background:#fff;} .lm-range .lm-wrap{max-width:1180px;} .lm-range .head{max-width:640px;margin-bottom:34px;} .lm-range .head p{font-size:1.05rem;line-height:1.65;color:var(--lm-mut);margin-top:14px;} .lm-range figure{margin:0;border-radius:20px;overflow:hidden;background:var(--lm-cream);border:1px solid var(--lm-line);} .lm-range img{width:100%;height:auto;display:block;} .lm-range figcaption{font-size:12.5px;color:var(--lm-mut);margin-top:14px;} @media(max-width:991px){ .lm-range{padding-bottom:72px;} } /* ---------- SCENE BAND ---------- Two real photographs of the product in use, side by side. Used where a brand has credible in-situ imagery but not a full set of six explorer covers. */ .lm-scenes{padding:96px 0 40px;background:#fff;} .lm-scenes .head{max-width:640px;margin-bottom:32px;} .lm-scenes .head p{font-size:1.05rem;line-height:1.65;color:var(--lm-mut);margin-top:14px;} .lm-scene-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;} .lm-scene{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--lm-line);background:var(--lm-cream);} .lm-scene img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;} .lm-scene figcaption{padding:16px 18px;font-size:13.5px;line-height:1.55;color:var(--lm-body);} .lm-scene figcaption b{display:block;color:#0a0f1a;font-size:14.5px;font-weight:800;margin-bottom:4px;} @media(max-width:820px){ .lm-scene-grid{grid-template-columns:1fr;} .lm-scenes{padding:64px 0 28px;} } /* ---------- FORM STATUS + SPAM TRAP ---------- */ .lm-form-status{margin:12px 0 0;font-size:13px;line-height:1.5;text-align:center;} .lm-form-status:empty{display:none;} .lm-form-status.is-ok{color:#0a7d3b;font-weight:700;} .lm-form-status.is-err{color:#b3261e;font-weight:700;} .lm-form-status.is-warn{color:#8a6d00;font-weight:600;} /* honeypot: off-screen, never focusable, invisible to real users */ .lm-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;} /* --------------------------------------------------------------------------- WHY-ZEN section The markup here reuses class names from the stock brand template (benefit-item, partnership-badge, coverage-map). Those are styled by the theme's micron.css, which this page does not load -- so without the rules below they render completely unstyled. Everything is scoped to .lm-zen. --------------------------------------------------------------------------- */ .lm-zen .benefits-list{display:flex;flex-direction:column;gap:22px;} .lm-zen .benefit-item{display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start;} .lm-zen .benefit-icon{ width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center; background:linear-gradient(150deg,var(--lm-yellow),var(--lm-yellow-deep)); color:var(--lm-ink);font-size:17px;flex:none; box-shadow:0 6px 16px -6px rgba(233,194,51,.75); } .lm-zen .benefit-content h4{ margin:2px 0 5px;font-size:17px;font-weight:800;line-height:1.25;color:var(--lm-ink);letter-spacing:-.01em; } .lm-zen .benefit-content p{margin:0;font-size:15px;line-height:1.6;color:var(--lm-body);} /* right-hand card */ .lm-zen .why-us-visual{ background:#fff;border:1.5px solid var(--lm-line);border-radius:20px;padding:28px; box-shadow:0 22px 50px -22px rgba(11,18,32,.18); } .lm-zen .partnership-badge{ display:flex;align-items:center;gap:14px; padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--lm-line); } .lm-zen .partnership-badge > i{ width:48px;height:48px;border-radius:14px;flex:none; display:flex;align-items:center;justify-content:center;font-size:19px; background:var(--lm-ink);color:var(--lm-yellow); } .lm-zen .badge-title{ display:block;font-size:11px;font-weight:800;letter-spacing:1.1px; text-transform:uppercase;color:#5f6775;margin-bottom:3px; } .lm-zen .badge-subtitle{ display:block;font-size:21px;font-weight:800;line-height:1.1;color:var(--lm-ink);letter-spacing:-.02em; } .lm-zen .coverage-map{display:grid;grid-template-columns:1fr 1fr;gap:9px;} .lm-zen .region{ display:flex;align-items:center;gap:8px; padding:11px 13px;border:1px solid var(--lm-line);border-radius:11px; font-size:14px;font-weight:600;color:var(--lm-body);background:var(--lm-cream); transition:border-color .25s ease,background .25s ease; } .lm-zen .region i{font-size:13px;color:var(--lm-mut);} .lm-zen .region.active{ background:var(--lm-ink);border-color:var(--lm-ink);color:#fff; } .lm-zen .region.active i{color:var(--lm-yellow);} .lm-zen .region:not(.active):hover{border-color:var(--lm-yellow);background:#fff;} @media (max-width:640px){ .lm-zen .coverage-map{grid-template-columns:1fr;} .lm-zen .why-us-visual{padding:22px;} } /* Base comparison/spec table. Previously defined only inside the OneScreen page's inline