/* Quzer website: shared styles for index.html, services.html and fifra.html */
:root{--navy:#182433;--navy-deep:#111a26;--teal:#0f9d78;--teal-dark:#0b7f61;--mint:#eef7f3;--text-label:#3d4854;--text-body:#6a7480;--card:#fff;--page:#f4f6f5;--grey:#eceeed;--line:#dfe3e2;--on-navy:rgba(255,255,255,.72);--ring:rgba(255,255,255,.1);--shadow-focus:0 0 0 3px rgba(15,157,120,.18);--shadow-lift:0 6px 16px -8px rgba(24,36,51,.35);--r-card:16px;--r-panel:14px;--r-ctl:9px;--fade:180ms;--sans:"Manrope",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--card);color:var(--navy);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img,video{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding-inline:24px}
.narrow{max-width:720px}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{font-weight:600;text-wrap:balance}
h1{font-size:clamp(34px,4.6vw,54px);line-height:1.1;letter-spacing:-.03em}
h2{font-size:clamp(27px,3.2vw,38px);line-height:1.18;letter-spacing:-.025em}
h3{font-size:17px;line-height:1.35;letter-spacing:-.01em}
h1 em{font-style:normal;color:var(--teal-dark)}
.h2--wide{max-width:22ch}
.lead{font-size:17px;color:var(--text-label);max-width:56ch;margin-top:16px}
.lead--sm{font-size:15.5px;margin-top:36px;max-width:70ch}
.eyebrow,.tag,.step,.crumb,.cl-head,.tree,.foot h4,.foot-base,.field label,.stds span,.chip,.mx-cap,.mx-l,.mx-p{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em}
.eyebrow{display:block;font-size:11.5px;font-weight:500;color:var(--teal-dark);margin-bottom:14px}
.tag{display:inline-block;font-size:11px;font-weight:500;color:#fff;background:var(--navy);border-radius:4px;padding:5px 10px;margin-bottom:16px}
/* sections */
.sec{padding-block:88px}
.sec--tight{padding-block:44px;border-bottom:1px solid var(--line)}
.sec--white{background:var(--card)}
.sec--grey{background:var(--grey)}
.sec--mint{background:var(--mint);border-top:1px solid #d5ebe2}
.sec--navy{background:var(--navy);color:#fff}
.sec--navy .lead{color:var(--on-navy)}
.sec--navy .eyebrow{color:var(--teal)}
.sec--center{text-align:center}
.sec--center .lead{margin-inline:auto}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center}
.split--top{align-items:start}
.split--rev{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:36px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:var(--r-ctl);border:1px solid var(--navy);background:var(--navy);color:#fff;font:600 13.5px/1 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--fade),border-color var(--fade),color var(--fade),transform var(--fade),box-shadow var(--fade)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn:active{transform:none}
.btn--teal{background:var(--teal-dark);border-color:var(--teal-dark)}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.4)}
.btn--ghost:hover{border-color:#fff}
.btn--line{background:var(--card);color:var(--navy);border-color:var(--teal-dark)}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ctas--center{justify-content:center}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* nav */
.nav{position:sticky;top:0;z-index:30;background:var(--card);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:28px;min-height:68px;flex-wrap:wrap;padding-block:10px}
.brand img{height:24px;width:auto;display:block}
.nav-links{display:flex;gap:26px;margin-left:auto;flex-wrap:wrap}
.nav-links a{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--text-label);padding:6px 0;border-bottom:2px solid transparent;transition:color var(--fade),border-color var(--fade)}
.nav-links a:hover{color:var(--navy)}
.nav-links a.on{color:var(--navy);border-color:var(--teal)}
.nav .btn{height:40px}
.nav--dark{background:var(--navy);border-bottom-color:var(--ring)}
.nav--dark .nav-links a{color:var(--on-navy)}
.nav--dark .nav-links a:hover{color:#fff}
/* hero (home) */
.hero{background:var(--navy);color:#fff;padding-top:72px}
.hero-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero .eyebrow{color:var(--teal)}
.hero h1{max-width:16ch}
.hero .lead{color:var(--on-navy);max-width:52ch;margin-top:20px}
.hero .ctas{justify-content:center}
.frame{width:100%;max-width:1040px;margin:56px auto -96px;border-radius:var(--r-panel);overflow:hidden;background:var(--card);box-shadow:0 30px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(15,157,120,.25);position:relative;z-index:2;text-align:left}
.frame-bar{display:flex;gap:6px;padding:10px 12px;background:#eef1f0;border-bottom:1px solid var(--line)}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:#c9d0ce}
.frame>img{display:block;width:100%;height:auto}
.sec--afterhero{padding-top:184px}
.app{display:grid;grid-template-columns:150px 1fr;color:var(--navy);font-size:14px}
.app-side{background:var(--page);padding:20px 12px;display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--grey)}
.app-side img{height:20px;width:auto;align-self:flex-start;margin:0 0 14px 6px}
.app-side span{padding:8px 10px;border-radius:6px;color:var(--text-label)}
.app-side .on{background:var(--card);color:var(--navy);font-weight:600}
.app-main{padding:22px;min-width:0}
.app-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;font-size:17px}
.app-top .eyebrow{margin:0;color:var(--text-body);font-size:10px}
.r{display:grid;grid-template-columns:86px 1fr auto auto;gap:12px;align-items:center;padding:13px 0;border-top:1px solid var(--grey)}
.r .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.id{font:500 12px var(--mono);color:var(--text-label)}
.rv{color:var(--text-body);font-variant-numeric:tabular-nums}
.pill{font:600 11.5px var(--sans);padding:4px 10px;border-radius:99px;border:1px solid var(--line);color:var(--text-label)}
.pill.ok{background:#e4f4ee;border-color:#bfe3d6;color:#0b6a51}
.pill.wait{background:#fdf3dc;border-color:#f0dba6;color:#7a5600}
/* product */
.stats{display:flex;gap:40px;margin:28px 0}
.stats b{display:block;font:600 40px/1 var(--sans);letter-spacing:-.03em;color:var(--teal-dark);font-variant-numeric:tabular-nums}
.stats span{font-size:13.5px;color:var(--text-label)}
.clip{border-radius:var(--r-panel);overflow:hidden;background:var(--navy);aspect-ratio:16/9;box-shadow:0 24px 60px -30px rgba(24,36,51,.55)}
.clip video,.clip img{display:block;width:100%;height:100%;object-fit:cover}
.stds{background:var(--grey);border-block:1px solid var(--line)}
.stds-in{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;padding-block:26px}
.stds span{font-size:12px;font-weight:500;border:1.5px solid var(--navy);border-radius:5px;padding:8px 14px;background:var(--card)}
/* modules */
.cluster{margin-top:40px}
.cl-head{display:flex;align-items:center;gap:16px;font-size:11.5px;font-weight:500;color:var(--teal-dark);margin-bottom:14px}
.cl-head::after{content:"";flex:1;height:1px;background:var(--line)}
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.tile{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--card);font:600 14.5px/1.3 var(--sans);transition:border-color var(--fade),transform var(--fade),box-shadow var(--fade)}
.tile:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.tile span{min-width:0}
.ti{flex:none;width:30px;height:30px;padding:5px;border-radius:7px;background:var(--mint);box-sizing:content-box}
/* your data */
.ticks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px;max-width:56ch}
.ticks li{position:relative;padding-left:26px;font-size:15px;color:var(--text-label)}
.ticks li::before{content:"";position:absolute;left:2px;top:.5em;width:11px;height:6px;border-left:2.4px solid var(--teal);border-bottom:2.4px solid var(--teal);transform:rotate(-45deg)}
.ticks b{color:var(--navy);font-weight:600}
.tree{background:var(--card);border:1px solid var(--line);border-radius:var(--r-panel);padding:24px 26px;font-size:13px;display:grid;gap:16px}
.tree-root,.tree-item{display:flex;align-items:center;gap:12px}
.tree-root{color:var(--navy);font-weight:500}
.tree-item{color:var(--text-label);padding-left:22px}
.tree-item--in{padding-left:46px}
.tree-root::before,.tree-item::before{content:"";width:9px;height:9px;background:var(--teal);flex:none}
/* 4 step flows */
.flow4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:44px}
.flow4>div{border-top:2px solid var(--teal);padding-top:18px}
.step{display:block;font-size:12px;font-weight:500;color:var(--teal);margin-bottom:10px}
.flow4 p{font-size:15px;color:var(--on-navy)}
.flow4 p.get{color:#fff;font-weight:600;font-size:14px;margin-top:10px}
/* about */
.portrait{border-radius:var(--r-panel);overflow:hidden;aspect-ratio:4/3;background:var(--navy)}
.portrait>img{display:block;width:100%;height:100%;object-fit:cover}
.portrait-alt{height:100%;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:40px;color:#fff}
.portrait-alt img{width:56px;height:56px}
.portrait-alt p{font:600 clamp(20px,2.2vw,27px)/1.3 var(--sans);letter-spacing:-.02em;max-width:18ch}
/* cards */
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;text-decoration:none;color:inherit}
.card p{font-size:14.5px;color:var(--text-label);margin-top:8px}
.svc{display:flex;flex-direction:column;align-items:flex-start;transition:transform var(--fade),box-shadow var(--fade),border-color var(--fade)}
.svc:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--teal)}
.svc p{flex:1}
.si{width:40px;height:40px;margin-bottom:18px}
.more{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-dark);margin-top:20px;text-decoration:underline;text-underline-offset:4px}
/* forms */
.field{display:flex;flex-direction:column;gap:7px;min-width:0;text-align:left}
.field label{font-size:11px;font-weight:500;color:var(--on-navy)}
.input{height:46px;border:1px solid rgba(255,255,255,.34);border-radius:var(--r-ctl);padding:0 14px;font:400 15px var(--sans);color:#fff;background:rgba(255,255,255,.04);width:100%;transition:border-color var(--fade),box-shadow var(--fade)}
.input:focus{outline:none;border-color:var(--teal);box-shadow:var(--shadow-focus)}
select.input{cursor:pointer}
select.input option{color:#182433;background:#fff}
.input--area{height:auto;padding:12px 14px;min-height:130px;resize:vertical;line-height:1.5}
.demo-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;max-width:560px;margin:32px auto 0}
.demo-form .btn{height:46px}
.contact-form{display:grid;gap:18px}
.form-msg{margin-top:18px;font-weight:600;color:#fff}
.form-msg--err{color:#ffb4a8}
/* page heads (services, fifra) */
.page-head{padding-block:56px 48px;border-bottom:1px solid var(--line)}
.page-head h1{max-width:18ch;font-size:clamp(32px,4vw,46px)}
.page-head--split{padding-block:48px 56px}
.crumb{font-size:11px;color:var(--text-body);margin-bottom:18px}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--navy);text-decoration:underline}
.chipbar{background:var(--grey);border-bottom:1px solid var(--line)}
.chipbar-in{display:flex;flex-wrap:wrap;gap:10px;padding-block:16px}
.chip{font-size:11.5px;font-weight:500;text-decoration:none;border:1.5px solid var(--navy);border-radius:99px;padding:9px 16px;background:var(--card);transition:background var(--fade),color var(--fade)}
.chip:hover,.chip--on{background:var(--navy);color:#fff}
.squares{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.squares li{display:flex;align-items:center;gap:14px;font-size:15.5px}
.squares li::before{content:"";width:8px;height:8px;background:var(--teal);flex:none}
/* risk matrix */
.mx-card{padding:26px}
.mx{display:grid;grid-template-columns:auto repeat(5,minmax(0,1fr));gap:5px;align-items:center}
.mx-cap{grid-column:1/-1;font-size:10.5px;color:var(--text-label);margin-bottom:8px}
.mx-cap--r{text-align:right;margin:8px 0 0}
.mx-l,.mx-p{font-size:10px;letter-spacing:.02em;text-transform:none;color:var(--text-label)}
.mx-l{text-align:right;padding-right:8px}
.mx-p{text-align:center;padding-top:4px}
.mx-c{aspect-ratio:3/2;border-radius:4px;display:flex;align-items:center;justify-content:center;font:500 10.5px var(--mono)}
.l0{background:var(--grey)}.l1{background:#bfe3d6;color:var(--navy)}.l2{background:var(--teal)}.l3{background:var(--navy);color:#fff}
.chain{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font:600 14px var(--sans)}
.chain i{font-style:normal;color:var(--teal-dark)}
/* fifra map */
.mapbox{background:var(--mint);border:1px solid #d5ebe2;border-radius:var(--r-panel);padding:28px}
.usmap{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:5px}
.usmap span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:4px;background:var(--card);border:1px solid #b9dccd;font:500 clamp(8px,1vw,11px) var(--mono);color:var(--navy)}
/* faq */
.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--card)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;font:600 15px/1.4 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 20px/1 var(--mono);color:var(--teal-dark)}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 20px 18px;font-size:15px;color:var(--text-label);max-width:62ch}
/* footer */
.foot{background:var(--navy-deep);color:var(--on-navy);padding-top:56px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot-brand img{height:26px;width:auto;display:block;margin-bottom:16px}
.foot-brand p{max-width:26ch}
.foot h4{font-size:11px;font-weight:500;color:var(--teal);margin-bottom:16px}
.foot a{display:block;text-decoration:none;margin-bottom:12px;transition:color var(--fade)}
.foot a:hover{color:#fff;text-decoration:underline}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:11px;margin-top:40px;padding-block:22px;border-top:1px solid var(--ring)}
/* responsive */
@media (max-width:1000px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.flow4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.split,.split--rev{grid-template-columns:minmax(0,1fr);gap:40px}.sec{padding-block:64px}.sec--afterhero{padding-top:150px}.foot-grid{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.wrap{padding-inline:18px}.nav-in{gap:10px 16px}.nav-links{order:3;width:100%;margin:0;gap:20px}.nav .btn{margin-left:auto}.hero{padding-top:48px}.frame{margin-bottom:-56px}.sec--afterhero{padding-top:104px}.tiles,.grid4,.grid2,.flow4{grid-template-columns:minmax(0,1fr)}.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tile{font-size:13.5px;padding:10px}.demo-form{grid-template-columns:minmax(0,1fr)}.app{grid-template-columns:1fr}.app-side{display:none}.r{grid-template-columns:74px 1fr auto}.r .rv{display:none}.btn,.input{height:48px}.input--area{height:auto}.mapbox{padding:14px}.usmap{gap:3px}.mx-card{padding:16px}.mx-l{font-size:8.5px;padding-right:4px}.mx-p{font-size:7.5px}.mx-c{font-size:8px}.foot-grid{grid-template-columns:1fr 1fr;gap:28px}.foot-brand{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.btn:hover,.svc:hover,.tile:hover{transform:none}}
@media print{.nav{position:static}*{opacity:1!important;transform:none!important}}

/* ---------- product animation (32 second loop): Documents, Training, Internal audits, Management Review ---------- */
.anim{container-type:inline-size;position:relative;background:var(--navy);color:#fff}
.an-stage{position:absolute;inset:0;display:flex;flex-direction:column;gap:2.4cqw;padding:3.4cqw 4cqw 3.6cqw}
.an-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2cqw}
.an-tabs span{font:600 1.55cqw/1 var(--sans);text-align:center;padding:1.5cqw .4cqw;border-radius:1.1cqw;border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.6);white-space:nowrap}
.an-tabs .t0{background:rgba(15,157,120,.22);border-color:var(--teal);color:#fff}
.an-scenes{flex:1;min-height:0;display:grid}
.an-sc{grid-area:1/1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 6cqw minmax(0,1fr);gap:1.6cqw}
.an-2{opacity:0}
.an-col{display:flex;flex-direction:column;gap:1.7cqw;min-width:0;border:1px solid rgba(255,255,255,.14);border-radius:1.8cqw;padding:2.3cqw}
.an-col--ra{border-color:var(--teal);background:rgba(15,157,120,.14)}
.an-h{font:500 1.6cqw/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.an-h--sub{font-size:1.4cqw;color:rgba(255,255,255,.55);margin-top:.8cqw}
.an-card{background:#fff;color:var(--navy);border-radius:1.4cqw;padding:2cqw;display:flex;flex-direction:column;gap:.9cqw;box-shadow:0 2cqw 4cqw -2cqw rgba(0,0,0,.6)}
.an-card b{font:600 2.1cqw/1.25 var(--sans);letter-spacing:-.01em}
.an-sm{padding:1.6cqw 2cqw}.an-sm b{font-size:1.85cqw}
.an-id{font:500 1.45cqw/1.2 var(--mono);color:var(--text-label);text-transform:uppercase;letter-spacing:.06em}
.an-row{display:flex;align-items:center;justify-content:space-between;gap:1cqw;margin-top:.4cqw}
.an-meta{font:400 1.6cqw/1.2 var(--sans);color:var(--text-body)}
.an-pills{position:relative;display:block;flex:none;width:13cqw;height:3.2cqw}
.an-pills i{position:absolute;right:0;top:0;height:3.2cqw;display:flex;align-items:center;padding:0 1.2cqw;border-radius:99px;font:600 1.5cqw/1 var(--sans);font-style:normal;white-space:nowrap;border:1px solid var(--line);color:var(--text-label);background:#fff;opacity:0}
.an-pills--l{margin-top:.5cqw}.an-pills--l i{right:auto;left:0}
.an-pills .p-wait{background:#fdf3dc;border-color:#f0dba6;color:#7a5600}
.an-pills .p-ok{background:#e4f4ee;border-color:#bfe3d6;color:#0b6a51;opacity:1}
.an-steps{display:flex;align-items:center}
.an-steps i{flex:none;width:5.4cqw;height:5.4cqw;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 1.6cqw/1 var(--sans);font-style:normal;background:var(--teal);color:#fff;border:1.5px solid var(--teal)}
.an-steps u{flex:1;height:2px;background:var(--teal);text-decoration:none}
.an-arrow{align-self:center;color:var(--teal)}
.an-arrow svg{display:block;width:100%}
.an-log{display:grid;gap:1cqw}
.an-log p{font:400 1.6cqw/1.3 var(--sans);color:rgba(255,255,255,.8);margin:0;display:flex;gap:1.2cqw}
.an-log p b{font:500 1.5cqw/1.4 var(--mono);color:#fff}
.an-note{font:400 1.55cqw/1.35 var(--sans);color:rgba(255,255,255,.72);margin:0}
.an-note--ok{color:#fff;font-weight:600;padding-left:2.6cqw;position:relative}
.an-note--ok::before{content:"";position:absolute;left:.3cqw;top:.35cqw;width:1.3cqw;height:.7cqw;border-left:.3cqw solid var(--teal);border-bottom:.3cqw solid var(--teal);transform:rotate(-45deg)}
.an-prow{display:flex;align-items:center;justify-content:space-between;gap:1cqw;background:#fff;color:var(--navy);border-radius:1.1cqw;padding:1.3cqw 1.6cqw;font:600 1.7cqw/1 var(--sans)}
.an-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1cqw}
.an-stats div{background:#fff;color:var(--navy);border-radius:1cqw;padding:1.2cqw}
.an-stats b{display:block;font:600 3.2cqw/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.an-stats span{display:block;font:500 1.25cqw/1.2 var(--sans);color:var(--text-label);margin-top:.5cqw}
.an-bars{flex:1;min-height:6cqw;display:flex;align-items:flex-end;gap:1.6cqw;border-bottom:1px solid rgba(255,255,255,.3)}
.an-bars i{flex:1;background:var(--teal);border-radius:.5cqw .5cqw 0 0}
.an-mins{font:400 1.55cqw/1.4 var(--sans);color:var(--navy);background:var(--page);border-radius:.8cqw;padding:1.1cqw 1.3cqw}
.an-file{align-self:flex-start;font:500 1.4cqw/1 var(--mono);color:#0b6a51;background:#e4f4ee;border:1px solid #bfe3d6;border-radius:.8cqw;padding:.9cqw 1.2cqw}
@media (prefers-reduced-motion:no-preference){
.an-stage{animation:an-loop 32s linear infinite both}
.m0{animation:an-m0 32s linear infinite both}
.t0{animation:an-t0 32s linear infinite both}
.m1{animation:an-m1 32s linear infinite both}
.t1{animation:an-t1 32s linear infinite both}
.m2{animation:an-m2 32s linear infinite both}
.t2{animation:an-t2 32s linear infinite both}
.m3{animation:an-m3 32s linear infinite both}
.t3{animation:an-t3 32s linear infinite both}
.an-src{animation:an-in 32s linear infinite both}
.p-draft{animation:an-draft 32s linear infinite both}
.p-wait{animation:an-wait 32s linear infinite both}
.an-src .p-ok{animation:an-ok 32s linear infinite both}
.s1{animation:an-s1 32s linear infinite both}
.l1{animation:an-l1 32s linear infinite both}
.s2{animation:an-s2 32s linear infinite both}
.l2{animation:an-l2 32s linear infinite both}
.s3{animation:an-s3 32s linear infinite both}
.an-doc .an-arrow{animation:an-arrow 32s linear infinite both}
.an-rel{animation:an-rel 32s cubic-bezier(.2,.7,.2,1) infinite both}
.an-log{animation:an-log 32s linear infinite both}
.k1{animation:k1 32s ease infinite both}
.k2{animation:k2 32s linear infinite both}
.k3{animation:k3 32s linear infinite both}
.k4{animation:k4 32s ease infinite both}
.k5{animation:k5 32s linear infinite both}
.k6{animation:k6 32s ease infinite both}
.k7{animation:k7 32s linear infinite both}
.k8{animation:k8 32s linear infinite both}
.k9{animation:k9 32s ease infinite both}
.k10{animation:k10 32s linear infinite both}
.k11{animation:k11 32s linear infinite both}
.k12{animation:k12 32s ease infinite both}
.k13{animation:k13 32s linear infinite both}
.k14{animation:k14 32s linear infinite both}
.k15{animation:k15 32s ease infinite both}
.k16{animation:k16 32s ease infinite both}
.k17{animation:k17 32s linear infinite both}
.k18{animation:k18 32s linear infinite both}
.k19{animation:k19 32s ease infinite both}
.k20{animation:k20 32s linear infinite both}
.k21{animation:k21 32s ease infinite both}
.k22{animation:k22 32s linear infinite both}
.k23{animation:k23 32s linear infinite both}
.k24{animation:k24 32s ease infinite both}
.k25{animation:k25 32s linear infinite both}
.k26{animation:k26 32s linear infinite both}
.k27{animation:k27 32s linear infinite both}
.k28{animation:k28 32s linear infinite both}
.k29{animation:k29 32s ease infinite both}
.k30{animation:k30 32s ease infinite both}
.k31{animation:k31 32s ease infinite both}
.k32{animation:k32 32s ease infinite both}
}
@keyframes an-loop{0.00%{opacity:0}1.20%,98.50%{opacity:1}100.00%{opacity:0}}
@keyframes an-m0{0.00%{opacity:0}1.20%,30.00%{opacity:1}31.00%,100.00%{opacity:0}}
@keyframes an-t0{0.00%{background:rgba(15,157,120,.22);border-color:#0f9d78;color:#fff}30.60%{background:rgba(15,157,120,.22);border-color:#0f9d78;color:#fff}31.40%,100.00%{background:transparent;border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.6)}}
@keyframes an-m1{0.00%,32.00%{opacity:0}33.20%,52.00%{opacity:1}53.00%,100.00%{opacity:0}}
@keyframes an-t1{0.00%{background:transparent;border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.6)}31.60%{background:transparent;border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.6)}32.40%{background:rgba(15,157,120,.22);border-color:#0f9d78;color:#fff}52.60%{background:rgba(15,157,120,.22);border-color:#0f9d78;color:#fff}53.40%,100.00%{background:transparent;border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.6)}}
@keyframes an-m2{0.00%,54.00%{opacity:0}55.20%,74.00%{opacity:1}75.00%,100.00%{opacity:0}}
@keyframes an-t2{0.00%{background:transparent;border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.6)}53.60%{background:transparent;border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.6)}54.40%{background:rgba(15,157,120,.22);border-color:#0f9d78;color:#fff}74.60%{background:rgba(15,157,120,.22);border-color:#0f9d78;color:#fff}75.40%,100.00%{background:transparent;border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.6)}}
@keyframes an-m3{0.00%,76.00%{opacity:0}77.20%,97.00%{opacity:1}98.00%,100.00%{opacity:0}}
@keyframes an-t3{0.00%{background:transparent;border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.6)}75.60%{background:transparent;border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.6)}76.40%{background:rgba(15,157,120,.22);border-color:#0f9d78;color:#fff}97.60%{background:rgba(15,157,120,.22);border-color:#0f9d78;color:#fff}98.40%,100.00%{background:transparent;border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.6)}}
@keyframes an-in{0.00%,1.10%{opacity:0}3.00%,100.00%{opacity:1}}
@keyframes an-draft{0.00%,5.20%{opacity:1}6.00%,100.00%{opacity:0}}
@keyframes an-wait{0.00%,5.20%{opacity:0}6.00%,15.70%{opacity:1}16.50%,100.00%{opacity:0}}
@keyframes an-ok{0.00%,15.70%{opacity:0}16.50%,100.00%{opacity:1}}
@keyframes an-s1{0.00%,7.50%{background:transparent;border-color:rgba(255,255,255,.4)}8.20%,100.00%{background:#0f9d78;border-color:#0f9d78}}
@keyframes an-l1{0.00%,8.20%{background:rgba(255,255,255,.25)}9.70%,100.00%{background:#0f9d78}}
@keyframes an-s2{0.00%,10.50%{background:transparent;border-color:rgba(255,255,255,.4)}11.20%,100.00%{background:#0f9d78;border-color:#0f9d78}}
@keyframes an-l2{0.00%,11.20%{background:rgba(255,255,255,.25)}12.70%,100.00%{background:#0f9d78}}
@keyframes an-s3{0.00%,13.50%{background:transparent;border-color:rgba(255,255,255,.4)}14.20%,100.00%{background:#0f9d78;border-color:#0f9d78}}
@keyframes an-arrow{0.00%,16.50%{color:rgba(255,255,255,.3)}18.00%,100.00%{color:#0f9d78}}
@keyframes an-rel{0.00%,17.20%{opacity:0;transform:translateX(-30cqw)}21.00%,100.00%{opacity:1;transform:none}}
@keyframes an-log{0.00%,21.70%{opacity:0}24.00%,100.00%{opacity:1}}
@keyframes k1{0.00%,33.00%{opacity:0;transform:translateY(1.2cqw)}34.20%,100.00%{opacity:1;transform:none}}
@keyframes k2{0.00%,48.50%{opacity:1}49.30%,100.00%{opacity:0}}
@keyframes k3{0.00%,48.50%{opacity:0}49.30%,100.00%{opacity:1}}
@keyframes k4{0.00%,36.00%{opacity:0}37.20%,100.00%{opacity:1}}
@keyframes k5{0.00%,37.00%{color:rgba(255,255,255,.3)}38.50%,100.00%{color:#0f9d78}}
@keyframes k6{0.00%,34.50%{opacity:0;transform:translateY(1.2cqw)}35.70%,100.00%{opacity:1;transform:none}}
@keyframes k7{0.00%,38.50%{opacity:1}39.30%,100.00%{opacity:0}}
@keyframes k8{0.00%,38.50%{opacity:0}39.30%,100.00%{opacity:1}}
@keyframes k9{0.00%,35.30%{opacity:0;transform:translateY(1.2cqw)}36.50%,100.00%{opacity:1;transform:none}}
@keyframes k10{0.00%,42.00%{opacity:1}42.80%,100.00%{opacity:0}}
@keyframes k11{0.00%,42.00%{opacity:0}42.80%,100.00%{opacity:1}}
@keyframes k12{0.00%,36.10%{opacity:0;transform:translateY(1.2cqw)}37.30%,100.00%{opacity:1;transform:none}}
@keyframes k13{0.00%,45.50%{opacity:1}46.30%,100.00%{opacity:0}}
@keyframes k14{0.00%,45.50%{opacity:0}46.30%,100.00%{opacity:1}}
@keyframes k15{0.00%,49.50%{opacity:0}50.70%,100.00%{opacity:1}}
@keyframes k16{0.00%,55.00%{opacity:0;transform:translateY(1.2cqw)}56.20%,100.00%{opacity:1;transform:none}}
@keyframes k17{0.00%,71.50%{opacity:1}72.30%,100.00%{opacity:0}}
@keyframes k18{0.00%,71.50%{opacity:0}72.30%,100.00%{opacity:1}}
@keyframes k19{0.00%,69.00%{opacity:0}70.20%,100.00%{opacity:1}}
@keyframes k20{0.00%,57.50%{color:rgba(255,255,255,.3)}59.00%,100.00%{color:#0f9d78}}
@keyframes k21{0.00%,58.50%{opacity:0;transform:translateY(1.2cqw)}59.70%,100.00%{opacity:1;transform:none}}
@keyframes k22{0.00%,65.50%{opacity:1}66.30%,100.00%{opacity:0}}
@keyframes k23{0.00%,65.50%{opacity:0}66.30%,100.00%{opacity:1}}
@keyframes k24{0.00%,61.00%{opacity:0;transform:translateY(1.2cqw)}62.20%,100.00%{opacity:1;transform:none}}
@keyframes k25{0.00%,68.00%{opacity:1}68.80%,100.00%{opacity:0}}
@keyframes k26{0.00%,68.00%{opacity:0}68.80%,100.00%{opacity:1}}
@keyframes k27{0.00%,80.50%{box-shadow:0 0 0 0 rgba(15,157,120,0);border-color:rgba(255,255,255,.14)}82.00%{box-shadow:0 0 0 .8cqw rgba(15,157,120,.45);border-color:#0f9d78}85.00%,100.00%{box-shadow:0 0 0 0 rgba(15,157,120,0);border-color:#0f9d78}}
@keyframes k28{0.00%,81.50%{color:rgba(255,255,255,.3)}83.00%,100.00%{color:#0f9d78}}
@keyframes k29{0.00%,77.00%{opacity:0;transform:translateY(1.2cqw)}78.20%,100.00%{opacity:1;transform:none}}
@keyframes k30{0.00%,84.00%{opacity:0}85.20%,100.00%{opacity:1}}
@keyframes k31{0.00%,87.50%{opacity:0}88.70%,100.00%{opacity:1}}
@keyframes k32{0.00%,90.00%{opacity:0}91.20%,100.00%{opacity:1}}

/* ---------- home hero: text left, animation right ---------- */
.hero{padding-block:72px 88px}
.hero-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center}
.hero-split h1{max-width:13ch;font-size:clamp(34px,4.2vw,52px)}
.hero-split .lead{max-width:44ch}
.hero-split .ctas{justify-content:flex-start}
.hero .clip{box-shadow:0 30px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.14)}
/* screenshot frame inside the product section */
.split>.frame{margin:0;max-width:none;box-shadow:0 24px 60px -30px rgba(24,36,51,.55),0 0 0 1px var(--line)}
.split>.frame .app{grid-template-columns:118px 1fr;font-size:12.5px}
.split>.frame .app-main{padding:16px}
.split>.frame .r{grid-template-columns:70px 1fr auto auto;gap:8px;padding:10px 0}
@media (max-width:860px){.hero-split{grid-template-columns:minmax(0,1fr);gap:36px}.hero{padding-block:48px 56px}.hero-split h1{max-width:none}}
@media (max-width:640px){.split>.frame .app{grid-template-columns:1fr}.split>.frame .r{grid-template-columns:64px 1fr auto}}

/* ---------- FIFRA state map: tile colours exactly as in the wireframe ---------- */
.usmap span{border:0;color:#171f2e}
.usmap .st-t{background:#0d9f7b}
.usmap .st-n{background:#171f2e;color:#fff}
.usmap .st-l{background:#bfe5d8}
.usmap .st-w{background:#fff;color:#4a5362;border:1px solid #b4bcc8}