/* Meritore Technologies site. Brand guideline palette: cyan #02FAFC, blue #0065FE, black; secondary charcoal #3A3A3A, grey #909089. Square corners. */
:root{
  --black:#000; --ink:#111318; --charcoal:#3a3a3a; --grey:#64645f; --grey-2:#909089;
  --paper:#fff; --mist:#f2f5f8; --line:#e2e6eb; --line-dark:#262626;
  --cyan:#02fafc; --blue:#0065fe; --link:#0052d6; --navy:#00163d;
  --grad:linear-gradient(90deg,#02fafc 0%,#01c1fd 35%,#007dfe 70%,#0065fe 100%);
  --grad-v:linear-gradient(180deg,#02fafc 0%,#0065fe 100%);
  --f-head:"Poppins","Segoe UI",Arial,sans-serif;
  --f-body:"Inter","Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.narrow{max-width:820px}
h1,h2,h3,h4{font-family:var(--f-head);margin:0;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:700;line-height:1.1;letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:600;line-height:1.2;letter-spacing:-.01em}
h3{font-size:1.1rem;font-weight:600;line-height:1.35}
h4{font-size:.95rem;font-weight:600}
p{margin:0}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.label{display:inline-block;font:600 .74rem/1 var(--f-head);text-transform:uppercase;letter-spacing:.16em;color:var(--blue)}
.dark .label{color:var(--cyan)}
.lede{color:var(--charcoal);font-size:1.07rem;max-width:62ch}
.dark .lede{color:#b9bec7}
.sec{padding-block:84px}
.sec.tight{padding-block:60px}
.mist{background:var(--mist)}
.dark{background:var(--black);color:#fff}
.sec-head{display:grid;gap:14px;margin-bottom:42px;max-width:780px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;font:600 .9rem/1 var(--f-head);letter-spacing:.03em;text-decoration:none;border:0;border-radius:2px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.btn-grad{background:var(--grad);color:var(--navy)}
.btn-grad:hover{box-shadow:0 10px 24px -10px rgba(0,101,254,.7);transform:translateY(-1px)}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--blue);color:var(--blue)}
.dark .btn-line{color:#fff;box-shadow:inset 0 0 0 1.5px #fff}
.btn-black{background:var(--black);color:#fff}
.more{font:600 .88rem/1 var(--f-head);text-decoration:none;color:var(--link);display:inline-flex;gap:8px;align-items:center}
.more::after{content:"\2192"}
.dark .more{color:var(--cyan)}

/* utility + header */
.util{background:var(--black);color:#cfd4db;font-size:.8rem}
.util .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-block:9px}
.util b{color:#fff;font-weight:600}
.util .r{display:flex;gap:20px;flex-wrap:wrap}
.util a{color:#fff;text-decoration:none}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--paper)}
header.main{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(255,255,255,.97);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:12px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.logo .m{height:42px;width:auto}
.logo .w{height:25px;width:auto}
nav.primary>ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
nav.primary>ul>li{position:relative}
nav.primary>ul>li>a,nav.primary>ul>li>button{display:block;background:none;border:0;cursor:pointer;color:var(--ink);text-decoration:none;font:500 .9rem/1 var(--f-head);padding:14px 12px}
nav.primary>ul>li>a:hover,nav.primary>ul>li>button:hover,nav.primary .cur{color:var(--blue)}
.has-menu>button::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);margin-left:8px}
.menu{position:absolute;left:0;top:100%;min-width:300px;background:var(--paper);border:1px solid var(--line);border-top:3px solid transparent;border-image:var(--grad) 1;border-image-slice:3 0 0 0;box-shadow:0 24px 48px -24px rgba(0,22,61,.35);padding:12px;display:none}
.menu.wide{min-width:560px;display:none;grid-template-columns:1fr 1fr;gap:4px 12px}
.has-menu:hover .menu,.has-menu:focus-within .menu{display:block}
.has-menu:hover .menu.wide,.has-menu:focus-within .menu.wide{display:grid}
.menu a{display:block;padding:10px 12px;text-decoration:none;color:var(--ink)}
.menu a b{display:block;font:600 .9rem/1.3 var(--f-head)}
.menu a span{display:block;font-size:.8rem;color:var(--grey);line-height:1.4;margin-top:2px}
.menu a:hover{background:var(--mist)}
.menu a:hover b{color:var(--blue)}
.navtoggle{display:none;background:none;border:1px solid var(--line);padding:10px 12px;cursor:pointer;font:600 .85rem/1 var(--f-head)}
@media (max-width:1100px){
  nav.primary{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);max-height:calc(100vh - 120px);overflow:auto}
  nav.primary.open{display:block}
  nav.primary>ul{flex-direction:column;padding:8px max(20px,env(safe-area-inset-right,0px)) 16px max(20px,env(safe-area-inset-left,0px))}
  .menu,.menu.wide{position:static;display:grid!important;grid-template-columns:1fr;min-width:0;box-shadow:none;border:0;padding:0 0 8px 8px}
  .has-menu>button::after{display:none}
  .navtoggle{display:block}
  .hbar .cta{display:none}
}
@media (max-width:480px){.logo .w{display:none}}

/* home hero */
.hero{padding-block:72px 80px;background:linear-gradient(180deg,var(--paper) 0%,var(--mist) 100%)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero h1{margin-block:18px 20px;font-size:clamp(2.2rem,4.6vw,3.5rem)}
.hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-img{position:relative;margin:0;min-width:0}
.hero-img img{display:block;width:100%;height:auto;aspect-ratio:1286/910;object-fit:cover}
.hero-img figcaption{position:absolute;right:0;bottom:0;background:var(--black);color:#fff;padding:16px 20px;font:500 .85rem/1.45 var(--f-head);max-width:72%}
.hero-img figcaption b{display:block;color:var(--cyan);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}

/* fact strip */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--black);color:#fff}
.facts div{padding:26px 24px;border-right:1px solid var(--line-dark);display:grid;gap:4px}
.facts div:last-child{border-right:0}
.facts b{font:600 1.15rem/1.2 var(--f-head)}
.facts span{font-size:.82rem;color:#aab0b9}

/* page hero (interior) */
.phero{background:var(--black);color:#fff;position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--grad)}
.phero .wrap{padding-block:64px 70px;position:relative;z-index:1}
.phero h1{margin-block:14px 16px;max-width:20ch}
.phero .lede{color:#c3c8d0;max-width:64ch}
.phero.img{background:#000 center/cover no-repeat}
.phero.img::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.75) 55%,rgba(0,0,0,.35) 100%)}
.crumbs{font-size:.8rem;color:#9aa1ab;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:#cfd4db;text-decoration:none}
.crumbs a:hover{color:var(--cyan)}

/* cards */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.card{background:var(--paper);border:1px solid var(--line);padding:28px;display:grid;gap:12px;align-content:start;position:relative;min-width:0}
a.card{text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease}
a.card::before{content:"";position:absolute;inset:-1px -1px auto -1px;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
a.card:hover{box-shadow:0 18px 40px -24px rgba(0,30,80,.35);transform:translateY(-2px)}
a.card:hover::before{transform:scaleX(1)}
a.card .more{margin-top:6px}
.card p{color:var(--charcoal);font-size:.94rem}
.card.black{background:var(--black);color:#fff;border-color:var(--black)}
.card.black p{color:#c3c8d0}
.ico{width:46px;height:46px;display:grid;place-items:center;background:var(--black);flex:none}
.ico svg{width:26px;height:26px}
.card.black .ico{background:var(--grad)}
ul.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
ul.ticks li{padding-left:18px;position:relative;font-size:.93rem;color:var(--charcoal)}
ul.ticks li::before{content:"";position:absolute;left:0;top:.68em;width:8px;height:2px;background:var(--blue)}
.dark ul.ticks li,.card.black ul.ticks li{color:#c3c8d0}
.dark ul.ticks li::before,.card.black ul.ticks li::before{background:var(--cyan)}
.card ul.ticks{border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.card.black ul.ticks{border-color:#333}

/* split + rows */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.split.wide-l{grid-template-columns:1.3fr 1fr}
.prose{display:grid;gap:16px;max-width:68ch}
.prose p{color:var(--charcoal)}
.prose h2{margin-top:18px}
.prose h3{margin-top:10px}
.prose ul,.prose ol{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--charcoal)}
.dark .prose p{color:#c3c8d0}
.rows{display:grid;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.row p{color:var(--charcoal);font-size:.94rem}
.dark .rows,.dark .row{border-color:var(--line-dark)}
.dark .row p{color:#c3c8d0}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));counter-reset:s}
.steps.six{grid-template-columns:repeat(6,minmax(0,1fr))}
.step{padding:26px 22px 6px 0;border-top:1px solid var(--line);position:relative;display:grid;gap:10px;align-content:start;counter-increment:s}
.dark .step{border-color:var(--line-dark)}
.step::before{content:counter(s,decimal-leading-zero);font:700 1.9rem/1 var(--f-head);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.step::after{content:"";position:absolute;top:-1px;left:0;width:48px;height:2px;background:var(--blue)}
.dark .step::after{background:var(--cyan)}
.step p{color:var(--charcoal);font-size:.92rem}
.dark .step p{color:#b9bec7}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 .82rem/1 var(--f-body);padding:9px 12px;background:var(--mist);border:1px solid var(--line)}
.dark .chip{background:#111;border-color:#2b2b2b;color:#dfe3e8}

/* tables */
.tbl{overflow-x:auto;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:.92rem}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 .72rem/1.2 var(--f-head);text-transform:uppercase;letter-spacing:.12em;color:var(--grey);background:var(--mist)}
td b{font-family:var(--f-head);font-weight:600}
tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* data strip */
.data{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:1px solid var(--line);background:var(--paper)}
.data div{padding:16px 18px;border-right:1px solid var(--line);display:grid;gap:4px;min-width:0}
.data div:last-child{border-right:0}
.data dt{font:600 .68rem/1 var(--f-head);text-transform:uppercase;letter-spacing:.14em;color:var(--grey)}
.data dd{margin:0;font-size:.86rem;font-weight:500;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
dl{margin:0}

/* cta band */
.ctaband{background:var(--grad);color:var(--navy)}
.ctaband .wrap{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding-block:46px}
.ctaband h2{font-size:clamp(1.3rem,2.4vw,1.8rem)}
.ctaband p{max-width:60ch;margin-top:8px}

/* article */
.article{padding-block:64px 84px}
.article .prose{max-width:72ch}
.article .prose h2{font-size:1.5rem}
.meta{display:flex;gap:16px;flex-wrap:wrap;font-size:.84rem;color:#aab0b9;margin-top:6px}
.callout{border-left:3px solid var(--blue);background:var(--mist);padding:18px 20px;color:var(--charcoal)}
.toc{position:sticky;top:110px;display:grid;gap:10px;font-size:.88rem;border-left:2px solid var(--line);padding-left:16px}
.toc a{color:var(--charcoal);text-decoration:none}
.toc a:hover{color:var(--blue)}
.article-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px}

/* forms */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:7px;min-width:0}
.field.full{grid-column:1/-1}
label{font:600 .72rem/1 var(--f-head);text-transform:uppercase;letter-spacing:.12em;color:var(--charcoal)}
input,select,textarea{font:inherit;font-size:.95rem;color:var(--ink);background:var(--paper);border:1px solid #cdd3db;border-radius:2px;padding:12px 13px;width:100%}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:transparent}
.err{color:#b42318;font-size:.88rem}
.out{border-left:3px solid var(--blue);background:var(--mist);padding:16px;display:grid;gap:12px}
.out pre{margin:0;white-space:pre-wrap;font:400 .82rem/1.6 ui-monospace,Menlo,Consolas,monospace;overflow-x:auto}
.sel{user-select:all;font-weight:600}
.kv{display:grid;gap:4px}
.kv span{font:600 .7rem/1 var(--f-head);text-transform:uppercase;letter-spacing:.14em;color:var(--grey)}
.card.black .kv span{color:var(--cyan)}

/* footer */
footer{background:var(--black);color:#b9bec7;padding-block:60px 30px;font-size:.88rem}
.f5{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:32px}
footer h4{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:12px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{color:#b9bec7;text-decoration:none}
footer a:hover{color:var(--cyan)}
footer .flogo{width:140px;height:auto;margin-bottom:14px;display:block}
footer .legal{margin-top:44px;padding-top:20px;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.78rem;color:#8b9099}

@media (max-width:1020px){
  .hero-grid,.split,.split.wide-l{grid-template-columns:1fr;gap:40px}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps,.steps.six{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts div:nth-child(2){border-right:0}
  .facts div:nth-child(-n+2){border-bottom:1px solid var(--line-dark)}
  .data{grid-template-columns:repeat(3,minmax(0,1fr))}
  .data div:nth-child(3){border-right:0}
  .data div:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .f5{grid-template-columns:1fr 1fr}
  .article-grid{grid-template-columns:1fr}
  .toc{display:none}
}
@media (max-width:640px){
  .sec{padding-block:58px}
  .g2,.g3,.g4,.g5,.steps,.steps.six,.fgrid,.f5{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .facts div{border-right:0!important;border-bottom:1px solid var(--line-dark)}
  .row{grid-template-columns:1fr;gap:6px}
  .data{grid-template-columns:1fr 1fr}
  .data div{border-right:0;border-bottom:1px solid var(--line)}
  .hero-img figcaption{position:static;max-width:none}
  .card{padding:22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
