:root{--ink:#141717;--muted:#68706e;--line:#e4e8e5;--cream:#f7f8f5;--accent:#f44336;--max:1200px}


*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;background:#fff;color:var(--ink);font-family:"Plus Jakarta Sans",sans-serif;-webkit-font-smoothing:antialiased}

a{color:inherit;text-decoration:none}

button{font:inherit}

::selection{background:var(--accent)}


.container{width:min(var(--max),calc(100% - 80px));margin:auto}

.eyebrow{font-size:11px;letter-spacing:.17em;text-transform:uppercase;font-weight:800;color:#6b756f}

.nav{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}

.brand{font-weight:800;letter-spacing:-.09em;font-size:29px}

.brand span{color:var(--accent)}

.navlinks{display:flex;align-items:center;gap:34px;font-size:13px;font-weight:700}

.navlinks a:hover,.textlink:hover{opacity:.55}

.nav-cta{border:1px solid #171a18;padding:12px 19px;border-radius:99px}

.menu-btn{display:none}


.hero{padding:100px 0 112px}

.hero-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:37px}

.hero-index{font-size:12px;color:var(--muted)}

h1,h2,h3,p{margin-top:0}

h1{font-size:clamp(48px,7.15vw,90px);font-weight:800;letter-spacing:-.055em;line-height:1.105;max-width:1140px;margin-bottom:43px}

h1 em{font-style:normal;color:var(--accent)}

.hero-bottom{display:flex;align-items:end;justify-content:space-between;gap:45px}

.hero-desc{font-size:17px;line-height:1.8;color:#515c56;max-width:590px;margin:0}

.round-link{display:inline-flex;align-items:center;gap:25px;background:var(--ink);color:#fff;border-radius:50px;padding:18px 21px 18px 26px;font-size:12px;font-weight:800;white-space:nowrap;transition:transform .2s}

.round-link:hover{transform:translateY(-3px)}

.round-link b{font-size:21px;font-weight:400}


.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:29px 0}

.trust-inner{display:flex;align-items:center;gap:45px}

.trust-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);width:175px;flex-shrink:0}

.logos{display:flex;justify-content:space-between;align-items:center;gap:26px;flex:1;flex-wrap:wrap}

.logo-placeholder{font-weight:800;color:#9ca5a0;letter-spacing:-.04em;font-size:19px}


.section{padding:126px 0}

.section-head{display:flex;justify-content:space-between;gap:35px;margin-bottom:38px}

.section h2{font-size:clamp(35px,4.5vw,59px);letter-spacing:-.055em;line-height:1.14;font-weight:800;margin:0}

.section-lead{font-size:17px;line-height:1.9;color:#5e6962;max-width:570px}

.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:110px;align-items:start}

.about-layout .eyebrow{padding-top:14px}

.about-copy{font-size:19px;line-height:1.85;letter-spacing:-.015em;color:#444f48}

.about-copy strong{color:#121816}

.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:80px}

.stat{padding:36px 20px 8px 0;border-right:1px solid var(--line)}

.stat:not(:first-child){padding-left:35px}

.stat:last-child{border:0}

.stat-num{font-size:clamp(45px,6vw,76px);font-weight:800;letter-spacing:-.08em;line-height:1.1}

.stat-label{margin-top:16px;color:var(--muted);font-size:12px;line-height:1.6}


.history{background:var(--cream)}

.timeline{position:relative;margin-top:75px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

.timeline:before{content:"";position:absolute;top:8px;left:0;right:0;height:1px;background:#c9d0c8}

.milestone{position:relative;padding-top:37px}

.milestone:before{content:"";position:absolute;top:0;left:0;width:17px;height:17px;border:4px solid var(--cream);border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--accent)}

.year{font-size:31px;letter-spacing:-.06em;font-weight:800;margin-bottom:22px}

.milestone h3{font-size:15px;letter-spacing:-.025em}

.milestone p{font-size:13px;line-height:1.85;color:#66716a;max-width:220px}


.software{background:#141918;color:#fff;overflow:hidden}

.software .eyebrow{color:#ff8c82}

.software-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center}

.software h2{font-size:clamp(40px,5vw,68px)}

.software p{color:#aeb8b1;line-height:1.85;font-size:16px;max-width:430px;margin:30px 0}

.software .textlink{color:#ff958c;font-weight:800;font-size:13px}

.screen{background:#252d2a;border:1px solid #3d4740;border-radius:13px;padding:14px;box-shadow:0 35px 100px #0007;transform:rotate(-2deg)}

.screen-top{display:flex;gap:5px;padding:5px 0 15px}

.screen-top i{height:7px;width:7px;background:#6b7770;border-radius:50%}

.screen-body{background:#f4f6f2;border-radius:6px;padding:20px;color:#202922}

.screen-header{height:10px;width:32%;background:#aab5aa;border-radius:4px;margin-bottom:24px}

.screen-chart{display:flex;gap:8px;height:155px;align-items:end;border-bottom:1px solid #d1d9cf;padding:0 15px}

.screen-chart span{flex:1;background:#93b7a0;border-radius:4px 4px 0 0}

.screen-chart span:nth-child(2n){background:#bed79d}

.screen-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}

.screen-rows span{height:35px;background:#e0e6de;border-radius:5px}


.hardware-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:45px}

.hardware-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.hardware-card{border:1px solid var(--line);padding:14px 14px 27px;transition:transform .2s,box-shadow .2s}

.hardware-card:hover{transform:translateY(-5px);box-shadow:0 15px 35px #17281b0c}

.device-visual{height:240px;background:#f1f3ef;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}

.device{width:85px;height:145px;background:linear-gradient(135deg,#343f3b,#0e1613);border-radius:15px;transform:rotate(-13deg);box-shadow:18px 20px 30px #1d27252e;position:relative}

.device:before{content:"";position:absolute;inset:14px 13px 48px;background:#657c72;border:3px solid #111a16;border-radius:5px}

.device:after{content:"";position:absolute;bottom:15px;left:36px;width:13px;height:13px;border:1px solid #788b7e;border-radius:50%}

.device.b{height:100px;width:160px;border-radius:11px;transform:rotate(-9deg)}

.device.b:before{inset:15px 20px 26px}

.device.b:after{display:none}

.device.c{height:130px;width:115px;opacity:.7;transform:rotate(9deg)}

.device-tag{position:absolute;left:17px;top:17px;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#647168}

.hardware-card h3{font-size:18px;margin:24px 8px 10px;letter-spacing:-.035em}

.hardware-card p{font-size:12px;line-height:1.8;color:#6b746d;margin:0 8px}

.hardware-card.legacy{opacity:.75}

.textlink{font-size:13px;font-weight:800;white-space:nowrap}


.contact{background:#f5f5f3;padding:105px 0}

.contact-grid{display:flex;align-items:end;justify-content:space-between;gap:50px}

.contact h2{font-size:clamp(40px,6vw,76px);max-width:750px;letter-spacing:-.065em;line-height:1.1;margin:20px 0 0}

.footer{background:#fff;color:#68706e;padding:40px 0;border-top:1px solid var(--line)}

.footer-inner{display:flex;justify-content:space-between;gap:30px;align-items:center;font-size:11px}

.footer .brand{color:var(--ink)}

.footer-links{display:flex;gap:24px}


.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s ease}

.reveal.visible{opacity:1;transform:none}


@media(max-width:800px){.container{width:calc(100% - 40px)}

.nav{height:72px}

.navlinks{gap:14px}

.navlinks a:not(.nav-cta){display:none}

.hero{padding:72px 0 83px}

.hero-bottom,.trust-inner,.section-head,.hardware-head,.contact-grid{align-items:start;flex-direction:column}

.hero-desc{font-size:15px}

.section{padding:80px 0}

.about-layout,.software-grid{grid-template-columns:1fr;gap:25px}

.timeline{grid-template-columns:repeat(2,1fr);row-gap:35px}

.timeline:before{display:none}

.milestone:before{box-shadow:none}

.hardware-grid{grid-template-columns:1fr 1fr}

.stats{margin-top:50px}

.stat:not(:first-child){padding-left:15px}

.stat-num{font-size:44px}

.software-grid{gap:50px}

.contact{padding:75px 0}}


@media(max-width:540px){h1{font-size:clamp(45px,12vw,67px);letter-spacing:-.065em}

.navlinks .nav-cta{padding:10px 13px}

.logos{gap:18px 26px}

.logo-placeholder{font-size:15px}

.stats{grid-template-columns:1fr}

.stat,.stat:not(:first-child){padding:22px 0;border-right:0;border-bottom:1px solid var(--line)}

.stat-num{font-size:55px}

.timeline,.hardware-grid{grid-template-columns:1fr}

.timeline{margin-top:42px}

.milestone{padding-top:25px}

.device-visual{height:220px}

.footer-inner{flex-direction:column;align-items:start}

.section h2{font-size:38px}

.hero-top{margin-bottom:28px}}


@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}

.reveal{opacity:1;transform:none}}



/* Brand accents, responsive logos and scrollable timeline */
.logo-slot{flex:1 1 120px;min-width:110px;height:75px;display:flex;align-items:center;justify-content:center;padding:13px 10px}


.logo-slot img{width:100%;height:100%;max-width:150px;max-height:48px;object-fit:contain;object-position:center}


.logo-slot .logo-placeholder{font-size:14px;white-space:nowrap}


.timeline-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:35px}


.timeline-hint{font-size:12px;color:#68706e}


.timeline-controls{display:flex;gap:9px}


.timeline-arrow{width:45px;height:45px;border-radius:50%;border:1px solid #c9d0c8;background:transparent;color:#1c241f;cursor:pointer;font-size:21px;transition:background .2s,border-color .2s}


.timeline-arrow:hover{background:#fff;border-color:var(--accent)}


.timeline-arrow:focus-visible,.timeline-scroll:focus-visible{outline:3px solid var(--accent);outline-offset:3px}


.timeline-scroll{overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#c5cbc4 transparent;margin-right:calc((min(1200px,100vw - 80px) - 100vw)/2);padding-right:40px;padding-bottom:15px}


.timeline{display:flex;gap:28px;min-width:max-content;margin-top:40px;padding-right:50px}


.timeline:before{right:0}


.milestone{width:250px;flex:0 0 250px;scroll-snap-align:start}


.contact .round-link{background:#141918}


@media(max-width:800px){.timeline-scroll{margin-right:-20px;padding-right:20px}

.timeline{display:flex;gap:20px;min-width:max-content}

.milestone{width:225px;flex-basis:225px}

.timeline:before{display:block}

.logos{width:100%;justify-content:center}

.logo-slot{flex:1 1 130px}}


@media(max-width:540px){.timeline{display:flex;min-width:max-content;margin-top:30px}

.milestone{width:215px;flex-basis:215px}

.timeline-hint{font-size:11px}

.logo-slot{flex:1 1 110px;height:62px}}




/* ============================================================
   V3 REFINEMENTS — brand assets, layout containment, dashboard
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }


html, body { max-width: 100%; }


body { overflow-x: clip; }


.container, .software-grid, .software-grid > *, .screen { min-width: 0; }


.brand { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 1; }


.brand img { display: block; width: auto; height: 40px; max-width: min(230px, 48vw); object-fit: contain; object-position: left center; }


.footer .brand img { height: 32px; }


.navlinks { gap: 35px; }


.hero-bottom { align-items: end; }


.scroll-cue { color: #68706e; font-size: 12px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; padding-bottom: 4px; transition: color .2s; }


.scroll-cue:hover { color: var(--accent); }


.software-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 70px); }


.screen { width: 100%; max-width: 100%; padding: 10px; border: 1px solid #444a47; border-radius: 15px; transform: none; overflow: hidden; background: #242a28; box-shadow: 0 24px 55px rgba(0,0,0,.23); }


.dashboard { min-width: 0; width: 100%; background: #f7f8f6; color: #1c2521; border-radius: 9px; padding: clamp(12px, 2.2vw, 22px); }


.dashboard-top { display: flex; align-items: center; gap: 9px; min-width: 0; padding-bottom: 18px; border-bottom: 1px solid #e1e6e0; }


.dash-mark { width: 13px; height: 13px; border-radius: 4px; background: var(--accent); flex: 0 0 auto; }


.dash-title { font-size: 10px; font-weight: 800; letter-spacing: .09em; white-space: nowrap; }


.dash-period { margin-left: auto; font-size: 9px; color: #77827a; text-align: right; }


.dashboard-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 18px 0; }


.dashboard-metrics > div { min-width: 0; border: 1px solid #e5e9e3; border-radius: 7px; background: white; padding: 11px; }


.dashboard-metrics small { display: block; font-size: 9px; color: #758078; margin-bottom: 9px; }


.dashboard-metrics strong { font-size: clamp(13px, 2vw, 21px); font-weight: 800; letter-spacing: -.045em; }


.dashboard-panel { border: 1px solid #e5e9e3; border-radius: 8px; background: white; padding: 14px; min-width: 0; }


.dashboard-panel-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 11px; }


.dashboard-panel-head span { color: #8b958d; font-size: 9px; }


.dashboard-plot { position: relative; height: 138px; margin-top: 18px; overflow: hidden; }


.dashboard-gridlines { position: absolute; inset: 0; background: repeating-linear-gradient(to top, #e8ede8 0 1px, transparent 1px 34px); }


.dashboard-bars { position: absolute; inset: 0 3px 0 3px; display: flex; align-items: end; gap: clamp(4px, 1vw, 12px); }


.dashboard-bars i { display: block; flex: 1 1 0; min-width: 0; height: var(--h); border-radius: 3px 3px 0 0; background: #a9b9b0; }


.dashboard-bars i:nth-child(3n) { background: #f44336; }


.dashboard-axis { display: flex; justify-content: space-between; color: #88938b; font-size: 9px; padding-top: 10px; }


.timeline-scroll { margin-right: 0 !important; padding-right: 0 !important; width: 100%; max-width: 100%; }


.timeline { padding-right: 24px; }


.timeline:before { right: 24px; }


@media(max-width:800px) {
  .navlinks a:not(.nav-cta) { display: inline; }


  .navlinks { gap: 16px; }


  .brand img { height: 34px; max-width: 150px; }


  .hero-bottom { align-items: flex-start; }


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


@media(max-width:540px) {
  .navlinks { gap: 12px; font-size: 11px; }


  .navlinks a[href="#software"], .navlinks a[href="#hardware"] { display: none; }


  .hero-bottom { gap: 22px; }


  .dashboard-metrics { gap: 5px; }


  .dashboard-metrics > div { padding: 8px; }


  .dashboard-metrics small { font-size: 8px; }


  .dashboard-panel { padding: 10px; }


  .dashboard-plot { height: 115px; }
}

/* ============================================================
   V4 — EDITORIAL REFINEMENT
   A quieter hero, controlled typography, more precise spacing,
   restrained red and polished responsive behaviour.
   ============================================================ */
:root { --accent:#f44336; --ink:#161919; --line:#e7e9e7; --cream:#f8f8f6; }
body { color:var(--ink); }
.container { width:min(1200px, calc(100% - 88px)); }
.nav { height:82px; }
.brand img { height:28px; width:auto; max-width:165px; object-fit:contain; }
.footer .brand img { height:27px; }
.navlinks { gap:38px; font-size:13px; }
.nav-cta { padding:11px 18px; }
.hero { padding:clamp(80px,10vw,142px) 0 clamp(90px,11vw,146px); }
.hero h1 {
  font-size:clamp(52px,6.2vw,79px);
  letter-spacing:-.065em;
  line-height:1.15;
  max-width:1120px;
  margin:0 0 44px;
  text-wrap:balance;
}
.hero h1 em { color:#7c8580; }
.hero-bottom { border-top:1px solid var(--line); padding-top:28px; align-items:center; }
.hero-desc { font-size:16px; line-height:1.85; max-width:625px; color:#58625c; }
.scroll-cue { font-size:11px; letter-spacing:.035em; text-transform:uppercase; }
.trust { padding:32px 0; }
.trust-label { font-size:10px; line-height:1.7; }
.logos { gap:14px; }
.logo-slot { display:flex; align-items:center; justify-content:center; flex:1 1 100px; min-width:0; height:65px; padding:9px 12px; }
.logo-slot img { display:block; width:100%; height:48px; object-fit:contain; object-position:center; filter:grayscale(1); opacity:.83; transition:filter .25s,opacity .25s; }
.logo-slot img:hover { filter:none; opacity:1; }
.logo-slot img[hidden] { display:none; }
.logo-slot .logo-placeholder { font-size:12px; font-weight:800; color:#b1b9b3; white-space:nowrap; }
.section { padding:clamp(88px,10vw,128px) 0; }
.section h2 { letter-spacing:-.06em; }
.about-copy { font-size:18px; line-height:1.9; }
.stats { margin-top:70px; }
.stat-num { font-variant-numeric:tabular-nums; }
.history { background:#f7f8f6; }
.timeline .milestone:before { background:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.milestone h3 { font-weight:800; }
.software { background:#181b1b; }
.software .eyebrow { color:#ff8279; }
.software .textlink { color:#ff8279; }
.hardware-card { background:#fff; }
.hardware-card:hover { box-shadow:0 18px 45px rgba(0,0,0,.065); }
.contact { background:#f4f5f3; border-top:1px solid var(--line); }
.contact h2 { max-width:820px; }
.contact .round-link { background:#181b1b; }
.footer { background:#fff; color:#66706a; border-top:1px solid var(--line); }
.footer .brand { color:var(--ink); }
.footer-links a:hover { color:var(--accent); }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
@media(max-width:800px) {
  .container { width:calc(100% - 48px); }
  .hero { padding:84px 0 92px; }
  .hero h1 { font-size:clamp(48px,8.4vw,70px); }
  .logos { justify-content:center; }
  .logo-slot { flex:0 1 135px; }
}
@media(max-width:540px) {
  .container { width:calc(100% - 36px); }
  .nav { height:70px; }
  .brand img { height:25px; max-width:130px; }
  .hero { padding:70px 0 83px; }
  .hero h1 { font-size:clamp(41px,11vw,60px); line-height:1.17; letter-spacing:-.065em; margin-bottom:32px; }
  .hero-bottom { padding-top:22px; }
  .hero-desc { font-size:15px; }
  .trust { padding:24px 0; }
  .logo-slot { flex:0 1 calc(50% - 12px); height:60px; }
  .logo-slot img { max-height:40px; }
  .section { padding:80px 0; }
}

/* ============================================================
   V5 — Mobile timeline reliability and control alignment
   ============================================================ */
.timeline-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:30px;
}
.timeline-hint { font-size:12px; font-weight:700; color:#6b746f; }
.timeline-controls { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.timeline-arrow {
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 46px;
  width:46px;
  height:46px;
  padding:0;
  line-height:1;
  border:1px solid #cbd1cb;
  border-radius:50%;
  background:transparent;
  color:#222824;
}
.timeline-arrow svg { display:block; flex:none; width:20px; height:20px; }
.timeline-scroll {
  display:block;
  width:100%;
  max-width:100%;
  margin:0!important;
  padding:0 0 20px!important;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
.timeline {
  display:flex!important;
  width:max-content;
  min-width:0!important;
  max-width:none;
  gap:20px;
  margin:36px 0 0;
  padding:0 8px 15px 0;
  opacity:1!important;
  transform:none!important;
}
.timeline::before { top:9px; right:0; }
.timeline .milestone {
  box-sizing:border-box;
  display:block;
  flex:0 0 250px;
  width:250px;
  min-width:0;
  padding:38px 22px 8px 0;
  scroll-snap-align:start;
}
.timeline .milestone::before { top:0; }
.timeline .milestone .year { font-size:29px; line-height:1.2; margin-bottom:16px; }
.timeline .milestone h3 { font-size:15px; line-height:1.45; margin:0 0 10px; }
.timeline .milestone p { font-size:12px; line-height:1.75; max-width:210px; }
@media(max-width:540px) {
  .timeline-toolbar { margin-top:26px; gap:10px; }
  .timeline-hint { font-size:11px; }
  .timeline-controls { gap:8px; }
  .timeline-arrow { width:43px; height:43px; flex-basis:43px; }
  .timeline { margin-top:27px; gap:16px; }
  .timeline .milestone { width:225px; flex-basis:225px; }
}

/* V6 polish: progressive enhancement; preserves existing section layouts */
:root{--accent:#f44336;--focus:#ad3026}
html{scroll-padding-top:32px}
a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:5px}
.nav{min-height:96px;height:auto;padding-block:18px;gap:32px}
.brand img{display:block;max-width:190px;max-height:58px;width:auto;height:auto;object-fit:contain}
.navlinks{gap:clamp(16px,2.8vw,36px);flex-wrap:wrap}
.nav-cta{transition:background .2s,color .2s,border-color .2s}
.nav-cta:hover{opacity:1!important;background:var(--ink);color:#fff}
.hero{padding-top:clamp(72px,9vw,122px);padding-bottom:clamp(80px,10vw,132px)}
.hero h1{max-width:1050px;font-size:clamp(43px,6.8vw,88px);line-height:1.15;overflow-wrap:break-word;text-wrap:balance}
.hero h1 em{display:inline;color:var(--accent)}
.hero-desc{max-width:670px}
.heading-offset{margin-top:24px!important}
.timeline-scroll{scroll-snap-type:x proximity;scroll-padding-inline:16px}
.milestone{scroll-snap-align:start}
.timeline-arrow{transition:transform .2s ease,background .2s ease}
.timeline-arrow:hover{transform:translateY(-2px)}
.contact-grid{align-items:center;gap:48px}
.contact-grid h2{max-width:650px;text-wrap:balance}
.contact-methods{display:grid;gap:0;min-width:min(440px,100%);width:100%}
.contact-method{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.24)}
.contact-method:first-child{border-top:1px solid rgba(255,255,255,.24)}
.contact-method-label{grid-column:1 / -1;font-size:11px;letter-spacing:.13em;text-transform:uppercase;opacity:.7;margin-bottom:6px}
.contact-method strong{font-size:clamp(13px,1.4vw,17px);overflow-wrap:anywhere}
.contact-method:hover strong{text-decoration:underline;text-underline-offset:4px}
@media(max-width:680px){.nav{gap:18px}.navlinks{gap:12px}.nav-cta{padding:10px 13px}.hero h1{letter-spacing:-.045em}.contact-methods{min-width:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* V7 refinement: flexible hero, restrained identity, product layouts */
.brand{display:inline-flex;align-items:center;flex-shrink:0;max-width:195px}
.brand img{display:block;width:auto;max-width:195px;max-height:55px;height:auto;object-fit:contain}
.navlinks a[aria-current="page"]{color:var(--accent)}
.navlinks a:focus-visible,.round-link:focus-visible,.textlink:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.hero h1{max-width:1120px;font-weight:400;overflow-wrap:break-word;text-wrap:balance}
.hero h1 .hero-regular{font-weight:400}
.hero h1 .hero-emphasis{font-weight:800;color:var(--ink)}
.detail-hero{padding:105px 0 42px}
.detail-hero h1{font-size:clamp(45px,6.5vw,83px);font-weight:700;max-width:1050px;margin:24px 0 30px;text-wrap:balance;overflow-wrap:break-word}
.detail-intro{font-size:clamp(17px,2vw,21px);line-height:1.8;color:var(--muted);max-width:730px}
.detail-rule{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:23px;margin-top:80px;font-size:13px;font-weight:700;color:var(--muted)}
.detail-rule a:hover{color:var(--accent)}
.detail-overview{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center;padding:90px 0 125px}
.detail-overview h2,.detail-section-head h2,.detail-split h2,.detail-contact h2,.product-identity h2{font-size:clamp(31px,4vw,56px);line-height:1.18;letter-spacing:-.055em;margin:22px 0}
.detail-overview p,.detail-split p,.detail-contact p,.product-identity p{font-size:16px;line-height:1.85;color:#5e6962;max-width:580px}
.detail-media,.product-visual{min-height:360px;overflow:hidden;background:#f0f2ee;border:1px solid var(--line);border-radius:4px;position:relative}
.detail-media img,.product-visual img,.detail-inline-image img{width:100%;height:100%;object-fit:contain;display:block}
.detail-media>span{position:absolute;bottom:15px;left:20px;font-size:11px;color:var(--muted)}
.media-monogram{position:absolute;inset:0;padding:36px;display:flex;flex-direction:column;gap:18px;justify-content:center}
.media-monogram span{font-size:11px;letter-spacing:.18em;font-weight:800;color:var(--muted);margin-bottom:22px}
.media-monogram i{display:block;background:#fff;border:1px solid #dfe4df;border-radius:5px;height:40px;width:84%;box-shadow:0 8px 25px #1a27230a}
.media-monogram i:nth-child(3){width:64%}.media-monogram i:nth-child(4){width:75%}
.detail-band{background:var(--cream);padding:105px 0 115px}
.detail-section-head{display:flex;justify-content:space-between;gap:40px;align-items:start;margin-bottom:55px}
.detail-section-head h2{max-width:700px;margin:0}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #cdd5ce}
.feature-item{padding:32px 35px 10px 0;min-width:0}
.feature-item:not(:first-child){padding-left:35px;border-left:1px solid #cdd5ce}
.feature-number{font-size:12px;color:var(--accent);font-weight:800}
.feature-item h3{font-size:25px;letter-spacing:-.04em;margin:38px 0 14px;overflow-wrap:anywhere}
.feature-item p{font-size:14px;line-height:1.85;color:var(--muted)}
.detail-split{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding:120px 0;align-items:center}
.detail-note{border-top:2px solid var(--ink);padding:40px 20px;background:var(--cream);min-height:220px}
.detail-note span{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--accent)}
.detail-note p{font-size:25px;letter-spacing:-.04em;color:var(--ink);max-width:370px;margin-top:35px}
.detail-inline-image{margin:0;min-height:240px;max-height:440px;overflow:hidden;background:var(--cream)}
.detail-contact{background:#161b18;color:white;padding:90px 0}
.detail-contact-inner{display:flex;align-items:center;justify-content:space-between;gap:50px}
.detail-contact h2{max-width:680px}.detail-contact p{color:#b4c0b7}.detail-contact .round-link{background:#fff;color:#171b18}
.product-stack{padding-bottom:115px}
.product-row{display:grid;grid-template-columns:1fr 1fr;gap:9%;padding:76px 0;border-bottom:1px solid var(--line);align-items:center}

.product-identity h2{overflow-wrap:anywhere}.product-features{list-style:none;padding:0;margin:28px 0 0;max-width:500px}
.product-features li{font-size:13px;line-height:1.6;padding:12px 0 12px 22px;border-top:1px solid var(--line);position:relative}
.product-features li:before{content:'+';position:absolute;left:0;color:var(--accent);font-weight:800}
.product-abstract{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
.product-abstract>span{position:absolute;top:28px;left:30px;font-size:12px;font-weight:800;color:var(--muted)}
.product-abstract small{position:absolute;bottom:28px;left:30px;text-transform:uppercase;font-size:10px;letter-spacing:.15em;color:var(--muted)}
.abstract-object{width:min(52%,230px);height:170px;border-radius:22px;background:linear-gradient(145deg,#4d5650,#181f1a);transform:rotate(-9deg);box-shadow:18px 26px 30px #151d1830;border:5px solid #657169}
.product-row:nth-child(2) .abstract-object{border-radius:55px 14px;width:170px;transform:rotate(7deg)}
.product-row:nth-child(3) .abstract-object{height:115px;width:220px;border-radius:8px;transform:rotate(-3deg)}
@media(max-width:800px){.detail-overview,.detail-split,.product-row{grid-template-columns:1fr;gap:35px}.product-row:nth-child(even) .product-visual,.product-row:nth-child(even) .product-identity{grid-column:auto;grid-row:auto}.detail-overview{padding:60px 0 80px}.detail-section-head{display:block}.feature-grid{grid-template-columns:1fr}.feature-item,.feature-item:not(:first-child){border-left:0;border-bottom:1px solid #cdd5ce;padding:24px 0}.feature-item h3{margin:20px 0 10px}.detail-contact-inner{display:block}.detail-contact .round-link{margin-top:25px}.detail-hero{padding-top:65px}.detail-rule{margin-top:50px}.product-row{padding:55px 0}.brand img{max-width:170px;max-height:45px}}
@media(max-width:480px){.brand img{max-width:145px}.detail-media,.product-visual{min-height:270px}.detail-hero h1{font-size:clamp(38px,11vw,55px)}}

/* V8 final polish */
.brand img{width:auto;max-width:195px;height:auto;max-height:58px;object-fit:contain}
.hero h1{overflow-wrap:break-word;text-wrap:balance}
.hero-emphasis{font-weight:800;color:inherit}
.timeline-scroll{scroll-padding-left:22px;padding-left:22px!important;box-sizing:border-box}
.timeline{padding-left:10px!important;padding-top:12px!important}
.timeline .milestone{scroll-snap-align:start}
.timeline .milestone::before{top:12px}
.timeline::before{top:21px}
.product-details{margin-top:24px;border-top:1px solid var(--line)}
.product-details details{border-bottom:1px solid var(--line);padding:0}
.product-details summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:17px 2px;font-weight:650;font-size:13px}
.product-details summary::-webkit-details-marker{display:none}
.product-details summary:after{content:'+';color:var(--accent);font-size:19px;font-weight:500}
.product-details details[open] summary:after{content:'−'}
.product-details details p{margin:0 0 18px;font-size:13px;line-height:1.75}
.product-details summary:focus-visible,.timeline-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.product-features li:before{content:'•';font-size:16px}
.product-abstract-clean{padding:50px;text-align:center;gap:20px}
.product-abstract-clean .abstract-rule{height:2px;width:65px;background:var(--accent)}
.product-abstract-clean .abstract-title{font-size:clamp(22px,3vw,38px);font-weight:600;line-height:1.25;letter-spacing:-.04em;max-width:370px;overflow-wrap:anywhere}
@media(max-width:680px){.brand img{max-width:155px}.timeline-scroll{padding-left:12px!important}.timeline{padding-left:5px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* V9: align timeline track and marker on a single vertical coordinate. */
.timeline{padding-top:12px!important}
.timeline::before{top:21px!important}
.timeline .milestone::before{top:12px!important;transform:translateY(-50%)!important}
/* Product summaries are purposeful, not oversized typographic demonstrations. */
.product-identity h2{font-size:clamp(32px,4.1vw,62px);color:var(--accent);line-height:1.09;overflow-wrap:normal;word-break:normal}
.product-features{margin-top:24px}
.product-features li{padding:9px 0 9px 19px;border:0;font-size:14px}
.product-features li::before{content:'•';font-size:16px;top:9px}
.product-features-title{margin-top:25px;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.product-visual-empty{min-height:260px}
.product-row:not(:has(img)) .product-visual{min-height:260px}
.detail-note{min-height:unset;padding:28px 30px;border-top:2px solid var(--accent)}
.detail-note p{font-size:clamp(19px,2vw,26px);margin-top:16px;line-height:1.45}
@media(max-width:800px){.product-identity h2{font-size:clamp(32px,8vw,52px)}}

/* FINAL: intentional layouts and responsive content */
.timeline{--marker-y:21px; padding-top:12px!important}
.timeline::before{top:var(--marker-y)!important}
.timeline .milestone::before{top:calc(var(--marker-y) - 9px)!important;transform:translateY(-50%)!important}
.product-row-text-only{display:block;max-width:800px}
.product-row-text-only .product-identity{max-width:760px}
.product-row-text-only .product-features{max-width:650px}
.product-row-text-only:nth-child(even) .product-identity{grid-column:auto;grid-row:auto}
.product-features{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.product-features li{padding:0 0 0 21px;border:0;font-size:15px;line-height:1.7}
.product-features li::before{content:'✓'!important;top:0!important;left:0;font-size:13px!important;font-weight:800}
.product-details summary{font-size:15px;padding:20px 2px}
.product-details details p{font-size:15px;max-width:600px}
.detail-overview-no-image{grid-template-columns:minmax(0,850px);padding-bottom:100px}
.detail-overview-no-image p{max-width:780px}
.preview-product-image{width:100%;height:100%;object-fit:contain;display:block;padding:22px;box-sizing:border-box}
.preview-product-fallback{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:28px;box-sizing:border-box;color:#3b4540}
.preview-product-fallback span{font-size:12px;font-weight:700;color:var(--accent)}
.preview-product-fallback strong{font-size:clamp(17px,2vw,25px);font-weight:600;letter-spacing:-.04em;max-width:220px;line-height:1.35}
.home-dashboard-image{margin:0;min-width:0}.home-dashboard-image img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.insight-dashboard{padding:23px;background:#fafbf9;color:#26302b;font-size:12px;box-shadow:0 18px 60px #14201713;border:1px solid #e1e6e0;border-radius:9px}
.insight-head{display:flex;align-items:center;gap:9px;border-bottom:1px solid #e3e7e3;padding-bottom:17px;margin-bottom:16px;font-size:11px;letter-spacing:.06em}
.insight-head small{margin-left:auto;color:#89948d;font-size:9px}.insight-brand-dot{width:9px;height:9px;background:var(--accent);border-radius:50%}
.insight-top{display:grid;grid-template-columns:1fr 1.15fr;gap:12px}.insight-panel{background:white;border:1px solid #e7ebe6;border-radius:6px;padding:16px;min-width:0}
.insight-panel h3{font-size:12px;letter-spacing:-.01em;margin:0 0 18px;font-weight:700}
.insight-donut{width:120px;height:120px;max-width:100%;aspect-ratio:1;margin:4px auto 15px;border-radius:50%;background:conic-gradient(#b92432 0 38.6%,#606f77 38.6% 66%,#a9b4b5 66% 85.2%,#e1e6e4 85.2% 100%);display:grid;place-items:center}
.insight-donut>span{display:flex;flex-direction:column;align-items:center;justify-content:center;background:white;border-radius:50%;width:75%;height:75%;font-size:18px;font-weight:700}
.insight-donut small{font-size:8px;font-weight:500;color:#849089}.insight-legend{display:flex;gap:10px;flex-wrap:wrap;color:#65736b;font-size:9px}
.insight-legend span:before{content:'●';margin-right:4px;color:#b92432}.insight-legend span:nth-child(2):before{color:#606f77}.insight-legend span:nth-child(3):before{color:#a9b4b5}
.insight-bar-row{display:grid;grid-template-columns:72px 1fr 25px;gap:8px;align-items:center;margin:14px 0;font-size:10px}.insight-bar-row b{font-size:10px;text-align:right}.insight-track{height:7px;background:#eef1ef;border-radius:10px;overflow:hidden}.insight-track i{height:100%;display:block;background:#7c8987;border-radius:10px}.insight-bar-row:first-of-type i{background:#b92432}
.insight-rank{margin-top:12px}.insight-rank h3{margin-bottom:10px}.insight-rank table{border-collapse:collapse;width:100%;font-size:10px}.insight-rank th{text-align:left;color:#89948d;font-weight:600}.insight-rank th,.insight-rank td{padding:9px 4px;border-bottom:1px solid #edf0ec}.insight-rank td:last-child,.insight-rank th:last-child{text-align:right;font-weight:700}.insight-disclaimer{color:#88958c;font-size:9px;text-align:right;margin-top:9px}
@media(max-width:480px){.insight-dashboard{padding:12px}.insight-panel{padding:10px}.insight-top{gap:6px}.insight-bar-row{grid-template-columns:55px 1fr 20px;gap:3px;font-size:8px}.insight-donut{width:85px}.insight-panel h3{font-size:10px}.insight-head small{font-size:7px}}

/* Final theme system: dark first, user-selectable light, without altering content. */
html[data-theme="dark"]{color-scheme:dark;--ink:#edf1ef;--muted:#adb9b3;--line:#35403c;--cream:#1c2421}
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"] body{background:#121816;color:var(--ink)}
html[data-theme="dark"] .nav,html[data-theme="dark"] .footer{background:#121816;border-color:var(--line)}
html[data-theme="dark"] .history,html[data-theme="dark"] .contact,html[data-theme="dark"] .detail-band,html[data-theme="dark"] .detail-contact{background:#1b2420;border-color:var(--line)}
html[data-theme="dark"] .hardware-card,html[data-theme="dark"] .detail-note,html[data-theme="dark"] .feature-item,html[data-theme="dark"] .detail-media,html[data-theme="dark"] .detail-inline-image{background:#202b26;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .hero-desc,html[data-theme="dark"] .section-lead,html[data-theme="dark"] .about-copy,html[data-theme="dark"] .milestone p,html[data-theme="dark"] .timeline-hint,html[data-theme="dark"] .eyebrow,html[data-theme="dark"] .scroll-cue,html[data-theme="dark"] .footer,html[data-theme="dark"] .hardware-card p,html[data-theme="dark"] .detail-intro,html[data-theme="dark"] .detail-overview p,html[data-theme="dark"] .feature-item p,html[data-theme="dark"] .detail-split p,html[data-theme="dark"] .detail-note p,html[data-theme="dark"] .contact p{color:#b4c1b9}
html[data-theme="dark"] .about-copy strong,html[data-theme="dark"] .footer .brand,html[data-theme="dark"] .milestone h3{color:#f0f4f1}
html[data-theme="dark"] .hero h1 em{color:#9eaca5}
html[data-theme="dark"] .nav-cta{border-color:#697770}
html[data-theme="dark"] .timeline:before{background:#64736b}
html[data-theme="dark"] .timeline-arrow{border-color:#56665d;color:#eaf0eb;background:#202b26}
html[data-theme="dark"] .timeline-arrow:hover{background:#2b3931}
html[data-theme="dark"] .round-link,html[data-theme="dark"] .contact .round-link{background:#f1f5f2;color:#17201b}
html[data-theme="dark"] .logo-placeholder{color:#b4c1b9}
html[data-theme="dark"] .dashboard{background:#202b26;color:#eef3ef;border:1px solid #3a4941}
html[data-theme="dark"] .dashboard-metrics>div,html[data-theme="dark"] .dashboard-panel{background:#29362f;border-color:#46564b;color:#eef3ef}
html[data-theme="dark"] .dashboard-top{border-color:#46564b}
html[data-theme="dark"] .dashboard-gridlines{background:repeating-linear-gradient(to top,#415247 0 1px,transparent 1px 34px)}
html[data-theme="dark"] .dashboard-metrics small,html[data-theme="dark"] .dashboard-panel-head span,html[data-theme="dark"] .dashboard-axis{color:#b4c1b9}
html[data-theme="dark"] .screen-body{background:#27352d;color:#eef3ef}
html[data-theme="dark"] .screen-rows span{background:#46574b}
html[data-theme="dark"] .device-visual{background:#2a352f}
html[data-theme="dark"] .device-tag{color:#becbc2}
html[data-theme="dark"] .footer-links a,html[data-theme="dark"] .footer-inner{color:#b4c1b9}
html[data-theme="dark"] .software{background:#101514}
html[data-theme="light"] .software{background:#181b1b}
.navlinks>a:not(.nav-cta){font-size:14px;color:var(--accent);font-weight:700}
.navlinks>a:not(.nav-cta):hover{opacity:1;color:#c92e23}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;flex:0 0 auto;transition:background .2s,border-color .2s}
.theme-toggle:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.theme-toggle .theme-icon-moon{display:none}
html[data-theme="light"] .theme-icon-sun{display:none}
html[data-theme="light"] .theme-icon-moon{display:block}
.brand-picture{display:inline-flex;align-items:center}
.timeline-toolbar{margin-top:35px;margin-bottom:12px}
.timeline-navigation{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:14px}
.timeline-navigation .timeline-scroll{min-width:0}
.timeline-navigation .timeline{margin-top:35px}
.timeline-arrow{display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.timeline-arrow:disabled{opacity:.28;cursor:default}
@media(max-width:800px){.navlinks a:not(.nav-cta){display:inline}.navlinks{gap:13px}}
@media(max-width:540px){.navlinks{gap:8px}.navlinks>a:not(.nav-cta){font-size:11px}.theme-toggle{width:30px;height:30px}.nav-cta{padding:9px 10px;font-size:10px}.timeline-navigation{grid-template-columns:35px minmax(0,1fr) 35px;gap:5px}.timeline-arrow{width:34px;height:34px}.timeline-arrow svg{width:16px;height:16px}.brand img{max-width:105px}}

/* Theme refinement: coherent panels, aligned features, and responsive navigation. */
html[data-theme="dark"]{--ink:#edf1ef;--muted:#b7c2bc;--line:#3b4741;--cream:#1c2421}
html[data-theme="dark"] .detail-band{background:#1b2420}
html[data-theme="dark"] .feature-item{background:transparent!important;border-color:var(--line)!important;padding-top:30px;padding-bottom:25px}
html[data-theme="dark"] .feature-grid{border-color:var(--line)}
html[data-theme="dark"] .feature-item:not(:first-child){padding-left:34px}
html[data-theme="dark"] .feature-item h3{margin-top:26px}
html[data-theme="light"] .feature-item{background:transparent}
.timeline-navigation{display:grid!important;grid-template-columns:52px minmax(0,1fr) 52px!important;align-items:center!important;gap:16px!important;width:100%}
.timeline-navigation>.timeline-scroll{grid-column:2;min-width:0;width:100%;margin:0!important;overflow-x:auto;scroll-behavior:smooth}
.timeline-navigation>.timeline-arrow{grid-row:1;align-self:center;justify-self:center;position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;display:grid!important;place-items:center;width:48px;height:48px;min-width:48px;border:1px solid var(--accent)!important;background:var(--accent)!important;color:#fff!important;opacity:1;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.timeline-navigation>.timeline-arrow:first-child{grid-column:1}
.timeline-navigation>.timeline-arrow:last-child{grid-column:3}
.timeline-navigation>.timeline-arrow:disabled{opacity:.32!important;background:transparent!important;color:var(--muted)!important;border-color:var(--line)!important;box-shadow:none}
.timeline-navigation>.timeline-arrow:not(:disabled):hover{background:#ce3428!important;transform:none}
html[data-theme="dark"] .timeline-navigation>.timeline-arrow:not(:disabled){box-shadow:0 0 0 3px rgba(244,67,54,.13)}
@media(max-width:900px){.nav{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:18px 0;height:auto;min-height:0}.nav>.brand{align-self:flex-start}.navlinks{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:clamp(10px,3vw,22px);flex-wrap:nowrap!important;min-width:0}.navlinks>a:not(.nav-cta){display:inline!important;white-space:nowrap}.navlinks .nav-cta{margin-left:auto;white-space:nowrap}.theme-toggle{flex-shrink:0}}
@media(max-width:540px){.navlinks{gap:10px}.navlinks>a:not(.nav-cta){font-size:12px}.nav-cta{font-size:11px;padding:9px 11px}.theme-toggle{width:32px;height:32px}.timeline-navigation{grid-template-columns:36px minmax(0,1fr) 36px!important;gap:6px!important}.timeline-navigation>.timeline-arrow{width:34px;height:34px;min-width:34px}}
@media(max-width:365px){.navlinks{gap:7px}.navlinks>a:not(.nav-cta){font-size:11px}.nav-cta{font-size:10px;padding:8px}.theme-toggle{width:29px;height:29px}}

/* Dark palette refinement: neutral charcoal rather than green-tinted cards. */
html[data-theme="dark"]{--line:#3b4441;--cream:#1d2422}
html[data-theme="dark"] .history,html[data-theme="dark"] .contact,html[data-theme="dark"] .detail-band,html[data-theme="dark"] .detail-contact{background:#1d2422;border-color:var(--line)}
html[data-theme="dark"] .hardware-card,html[data-theme="dark"] .detail-note,html[data-theme="dark"] .detail-media,html[data-theme="dark"] .detail-inline-image{background:#252a29;border-color:var(--line)}
html[data-theme="dark"] .dashboard{background:#252a29;border-color:var(--line)}
html[data-theme="dark"] .dashboard-metrics>div,html[data-theme="dark"] .dashboard-panel{background:#2c3330;border-color:#46504c}
html[data-theme="dark"] .timeline-arrow{background:#252a29;border-color:#626e68}
html[data-theme="dark"] .timeline-arrow:hover:not(:disabled){background:#343d39}
html[data-theme="dark"] .detail-band .feature-item{background:transparent!important}
/* Client logo treatments: light-mode presentation remains unchanged. */
.logo-slot img{filter:grayscale(1);opacity:.83;transition:filter .25s ease,opacity .25s ease}
.logo-slot:hover img,.logo-slot img:hover{filter:none;opacity:1}
/* Dark mode: default muted white; grayscale retains contrast in filled logos. */
html[data-theme="dark"] .logo-slot img{filter:brightness(0) invert(1);opacity:.78}
html[data-theme="dark"] .logo-slot[data-dark-monochrome="grayscale"] img{filter:grayscale(1);opacity:.9}
html[data-theme="dark"] .logo-slot[data-dark-monochrome="none"] img{filter:none;opacity:1}
/* Every dark-mode treatment reveals the original image on hover. */
html[data-theme="dark"] .logo-slot:hover img,
html[data-theme="dark"] .logo-slot img:hover{filter:none;opacity:1}

/* Homepage software illustration: editorial music chart preview, not live data. */
.insight-chart{background:#fafbf9!important;color:#26302b!important;overflow:hidden}
.insight-chart .insight-head{color:#26302b}
.chart-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:4px 0 18px}
.chart-title-row h3{margin:0 0 5px;font-size:16px;font-weight:750;letter-spacing:-.025em}
.chart-title-row p{margin:0;color:#76817b;font-size:10px;line-height:1.5}
.chart-period{flex-shrink:0;border:1px solid #e0e6e1;border-radius:5px;padding:8px 10px;color:#66716b;background:#fff;font-size:9px}
.chart-period span{padding-left:9px}
.chart-bars{height:136px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;padding:0 8px 12px;border-bottom:1px solid #e7ebe6;margin-bottom:12px;background:repeating-linear-gradient(to top,transparent 0,transparent 30px,#edf0ed 31px,transparent 32px) left top/100% calc(100% - 25px) no-repeat}
.chart-column{display:flex;flex-direction:column;min-width:0;align-items:center;justify-content:end;gap:8px}
.chart-column-track{height:104px;width:min(100%,37px);display:flex;align-items:end}
.chart-column-track span{width:100%;display:block;background:#b7c0ba;border-radius:4px 4px 0 0}
.chart-column:first-child .chart-column-track span{background:#f44336}
.chart-column:nth-child(2) .chart-column-track span{background:#687b73}
.chart-column small{font-size:9px;color:#6c7770;white-space:nowrap}
.chart-table{border-collapse:collapse;width:100%;font-size:10px;text-align:left}
.chart-table th{font-weight:650;font-size:9px;color:#87918b;letter-spacing:.015em}
.chart-table th,.chart-table td{padding:10px 7px;border-bottom:1px solid #e9ede9}
.chart-table th:last-child,.chart-table td:last-child{text-align:right}
.chart-artist{font-weight:700;color:#2a322e}
.chart-position{font-weight:750;color:#4f5d55}
.chart-trend{color:#87918b;font-weight:650}.chart-trend-up{color:#258465}
.insight-chart .insight-disclaimer{margin-top:12px;color:#8a948e}
@media(max-width:560px){.insight-chart{padding:13px}.chart-title-row h3{font-size:14px}.chart-bars{height:112px;gap:6px}.chart-column-track{height:80px}.chart-column small{font-size:8px}.chart-table{font-size:9px}.chart-table th,.chart-table td{padding:8px 4px}.chart-period{font-size:8px;padding:7px}}

/* Homepage: information-to-understanding illustration. Deliberately light software UI in both themes. */
.transform-demo{background:#fbfcfa!important;color:#27312b!important;overflow:hidden;padding:20px!important}
.transform-demo .insight-head{color:#26302b!important}
.transform-layout{display:grid;grid-template-columns:minmax(0,1fr) 45px minmax(0,1.08fr);align-items:stretch;gap:9px;margin-top:18px}
.transform-raw,.transform-result{min-width:0;border-radius:9px;padding:13px 12px;border:1px solid #e5e9e5}
.transform-raw{background:#f2f4f2}.transform-result{background:#fff}
.transform-panel-heading{display:flex;gap:9px;align-items:center;margin-bottom:13px}
.transform-panel-heading strong{display:block;color:#2b342e;font-size:11px;letter-spacing:-.01em}
.transform-panel-heading small{display:block;color:#89938d;font-size:9px;margin-top:3px}
.transform-step{display:grid;place-items:center;flex:0 0 25px;height:25px;border-radius:6px;background:#dfe5e0;color:#59675e;font-size:10px;font-weight:800}
.transform-step-red{background:#fee8e5;color:#db3c30}
.transform-code{font:9px/1.72 ui-monospace,SFMono-Regular,Consolas,monospace;color:#46534b;white-space:pre;overflow:hidden;letter-spacing:-.02em}
.transform-code>div{white-space:pre}.code-muted{color:#7d8a81}.code-key{color:#536e84}.code-value{color:#b15f54}.code-num{color:#7c649b}
.transform-raw-foot{font-size:9px;color:#7e8b83;margin-top:14px}.transform-raw-foot>span:first-child{color:#d39d47}.transform-foot-dot{margin:0 4px}
.transform-flow{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;min-width:0}
.transform-flow-label{font-size:7px;font-weight:800;color:#8a948e;text-align:center;letter-spacing:.08em;line-height:1.5}
.transform-flow-icon{display:grid;place-items:center;background:#f44336;color:white;border-radius:50%;width:33px;height:33px;font-size:23px;line-height:1;box-shadow:0 3px 12px #f4433626}
.transform-result-meta{display:flex;justify-content:space-between;align-items:center;gap:4px;margin:0 0 7px}.transform-result-meta strong{font-size:10px}.transform-result-meta span{font-size:8px;color:#8b948e}
.transform-bars{height:54px;display:flex;gap:9px;align-items:end;border-bottom:1px solid #e6eae6;padding:0 7px;background:repeating-linear-gradient(to top,transparent 0,transparent 16px,#edf0ed 17px,transparent 18px)}
.transform-bars span{flex:1;height:var(--v);background:#b3bdb6;border-radius:3px 3px 0 0}.transform-bars span:first-child{background:#f44336}
.transform-table{width:100%;border-collapse:collapse;font-size:9px;text-align:left;margin-top:8px}.transform-table th{color:#89938c;font-weight:600;font-size:8px}.transform-table th,.transform-table td{padding:7px 2px;border-bottom:1px solid #eef0ed;white-space:nowrap}.transform-table td:nth-child(2){font-weight:750}.transform-table th:last-child,.transform-table td:last-child{text-align:right}.trend-up{color:#278767;font-weight:700}.trend-down{color:#bd6c60;font-weight:700}
.transform-disclaimer{font-size:9px;color:#8a948d;text-align:right;margin-top:12px}
@media(max-width:620px){.transform-demo{padding:14px!important}.transform-layout{grid-template-columns:minmax(0,1fr);gap:8px}.transform-flow{flex-direction:row;gap:12px;padding:3px}.transform-flow-label{font-size:8px}.transform-flow-icon{transform:rotate(90deg);width:29px;height:29px;font-size:21px}.transform-code{font-size:10px}.transform-raw,.transform-result{padding:13px}.transform-bars{height:64px}}

/* Compact, animated multi-source workflow inside the existing homepage illustration. */
.pipeline-demo{padding:15px!important}.pipeline-demo .insight-head{margin-bottom:9px}
.pipeline-title{display:flex;justify-content:space-between;gap:8px;align-items:center;margin:0 0 12px}.pipeline-title strong{font-size:12px;color:#28312c}.pipeline-title>span{font-size:8px;color:#89948c}
.pipeline-sources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.pipeline-source{display:flex;align-items:center;gap:8px;min-width:0;border:1px solid #e4e9e5;background:#f5f7f5;border-radius:7px;padding:8px 9px;box-shadow:0 2px 5px #1d2d2210;animation:pipeline-source-in 9s ease-in-out infinite}
.pipeline-source:nth-child(2){animation-delay:.2s}.pipeline-source:nth-child(3){animation-delay:.4s}.pipeline-source:nth-child(4){animation-delay:.6s}
.source-mark{display:grid;place-items:center;width:25px;height:25px;flex:0 0 25px;border-radius:6px;background:#e6ece8;color:#506057;font-size:11px;font-weight:800}
.pipeline-source strong,.pipeline-source small{display:block;white-space:nowrap}.pipeline-source strong{font-size:10px;color:#2e3931}.pipeline-source small{font-size:8px;color:#87948a;margin-top:3px}.pipeline-source>i{width:5px;height:5px;background:#e34c3f;border-radius:50%;margin-left:auto;flex-shrink:0}
.pipeline-converge{height:25px;display:flex;justify-content:center;align-items:center;gap:6px;color:#f44336;font-size:15px}.pipeline-converge span{height:1px;width:24%;background:linear-gradient(90deg,transparent,#f1b5ae)}.pipeline-converge span:last-child{transform:rotate(180deg)}.pipeline-converge b{font-weight:500;animation:pipeline-pulse 3s ease-in-out infinite}
.pipeline-engine{background:#f1f4f2;border:1px solid #dce4de;border-radius:8px;padding:10px 11px}.pipeline-engine-head{display:flex;gap:8px;align-items:center;margin-bottom:10px}.pipeline-engine-icon{width:27px;height:27px;display:grid;place-items:center;border-radius:7px;color:#e74437;background:#ffe9e6;font-size:17px}.pipeline-engine-head strong,.pipeline-engine-head small{display:block}.pipeline-engine-head strong{font-size:11px;color:#2b342e}.pipeline-engine-head small{font-size:8px;color:#859188;margin-top:2px}.pipeline-live{margin-left:auto;font-size:7px;color:#9aa49d;letter-spacing:.04em}.pipeline-live i,.pipeline-ready i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#f44336;margin-right:3px;animation:pipeline-pulse 2s infinite}
.pipeline-stages{display:grid;gap:5px}.pipeline-stage{display:grid;grid-template-columns:18px minmax(0,1fr) 58px 11px;align-items:center;gap:6px;background:#fff;border:1px solid #e4e9e5;border-radius:5px;padding:6px 8px}.pipeline-stage-num{font-size:8px;color:#a3ada5;font-weight:800}.pipeline-stage strong{font-size:9px;color:#445148;font-weight:650}.pipeline-stage-line{height:3px;border-radius:4px;background:#ecf0ec;overflow:hidden}.pipeline-stage-line i{display:block;height:100%;width:100%;background:#f44336;transform-origin:left;animation:pipeline-progress 9s ease-in-out infinite}.pipeline-stage-check{color:#d94d40;font-size:10px;opacity:.4;animation:pipeline-check 9s linear infinite}.pipeline-stage:nth-child(2) .pipeline-stage-line i,.pipeline-stage:nth-child(2) .pipeline-stage-check{animation-delay:1.2s}.pipeline-stage:nth-child(3) .pipeline-stage-line i,.pipeline-stage:nth-child(3) .pipeline-stage-check{animation-delay:2.4s}.pipeline-stage:nth-child(4) .pipeline-stage-line i,.pipeline-stage:nth-child(4) .pipeline-stage-check{animation-delay:3.6s}
.pipeline-output-arrow{height:24px;display:grid;place-items:center;color:#f44336;font-size:18px}.pipeline-output-arrow span{animation:pipeline-pulse 3s ease-in-out infinite}
.pipeline-results{border:1px solid #e3e9e4;border-radius:8px;background:white;padding:10px 11px}.pipeline-results-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.pipeline-results-head strong,.pipeline-results-head small{display:block}.pipeline-results-head strong{font-size:11px;color:#2c352f}.pipeline-results-head small{font-size:8px;color:#89948c;margin-top:2px}.pipeline-ready{font-size:7px;color:#8b9a90;letter-spacing:.04em}.pipeline-ready i{background:#35a57a}
.pipeline-table{margin-top:3px}.pipeline-table th,.pipeline-table td{padding:6px 4px}.pipeline-table td:nth-child(2){white-space:nowrap}.pipeline-artist-icon{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border-radius:4px;background:#e6eae7;color:#63746a;font-size:8px;font-weight:700}.pipeline-table tr:nth-child(2) .pipeline-artist-icon{background:#e4e9f0;color:#5d7289}.pipeline-table tr:nth-child(3) .pipeline-artist-icon{background:#ede6f0;color:#8b6b91}.pipeline-table tr:nth-child(4) .pipeline-artist-icon{background:#f2ebe4;color:#95765a}.pipeline-meter{display:block;height:5px;background:#edf1ed;border-radius:9px;min-width:34px;overflow:hidden}.pipeline-meter i{display:block;height:100%;background:#8a9a90;border-radius:9px}.pipeline-table tr:first-child .pipeline-meter i{background:#f44336}
@keyframes pipeline-source-in{0%,100%{border-color:#e4e9e5}12%,22%{border-color:#efb2ac}35%{border-color:#e4e9e5}}@keyframes pipeline-progress{0%,12%{transform:scaleX(.12)}35%,80%{transform:scaleX(1)}100%{transform:scaleX(.12)}}@keyframes pipeline-check{0%,16%{opacity:.3}30%,82%{opacity:1}100%{opacity:.3}}@keyframes pipeline-pulse{0%,100%{opacity:.45}50%{opacity:1}}
@media(max-width:420px){.pipeline-demo{padding:11px!important}.pipeline-source{padding:6px}.source-mark{width:21px;height:21px;flex-basis:21px}.pipeline-source small{font-size:7px}.pipeline-stage{grid-template-columns:16px minmax(0,1fr) 35px 9px}.pipeline-table th,.pipeline-table td{font-size:8px;padding:6px 2px}.pipeline-artist-icon{width:15px;height:15px;margin-right:3px}}
@media(prefers-reduced-motion:reduce){.pipeline-demo .pipeline-source,.pipeline-demo .pipeline-stage-line i,.pipeline-demo .pipeline-stage-check,.pipeline-demo .pipeline-live i,.pipeline-demo .pipeline-ready i,.pipeline-demo .pipeline-converge b,.pipeline-demo .pipeline-output-arrow span{animation:none!important;transform:none!important;opacity:1!important}}

/* Sequential workflow illustration: source A–D, processing 01–05, then results.
   Scoped to this illustration; the rest of the site is unaffected. */
.pipeline-demo .pipeline-source,
.pipeline-demo .pipeline-stage,
.pipeline-demo .pipeline-results{transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease,opacity .35s ease,transform .35s ease}
.pipeline-demo .pipeline-source{animation:none;opacity:.72}
.pipeline-demo .pipeline-source.is-active{opacity:1;background:#fff0ed;border-color:#f44336;box-shadow:0 0 0 2px #f4433624,0 4px 14px #f4433615;transform:translateY(-1px)}
.pipeline-demo .pipeline-source.is-complete{opacity:1;border-color:#e0e7e1;background:#f7faf7}
.pipeline-demo .pipeline-source.is-active .source-mark{background:#f44336;color:#fff}
.pipeline-demo .pipeline-converge b,
.pipeline-demo .pipeline-output-arrow span{animation:none;opacity:.35;transition:opacity .3s ease,transform .3s ease}
.pipeline-demo[data-phase="processing"] .pipeline-converge b,
.pipeline-demo[data-phase="results"] .pipeline-output-arrow span{opacity:1;transform:translateY(2px)}
.pipeline-demo .pipeline-stage{opacity:.64}
.pipeline-demo .pipeline-stage.is-active{opacity:1;background:#fff5f2;border-color:#f5aaa2;box-shadow:0 0 0 1px #f4433618}
.pipeline-demo .pipeline-stage.is-complete{opacity:1;background:#fff;border-color:#d7e7dc}
.pipeline-demo .pipeline-stage-line i,
.pipeline-demo .pipeline-stage-check,
.pipeline-demo .pipeline-stage:nth-child(n) .pipeline-stage-line i,
.pipeline-demo .pipeline-stage:nth-child(n) .pipeline-stage-check{animation:none;transition:transform .85s linear,opacity .2s ease}
.pipeline-demo .pipeline-stage-line i{transform:scaleX(0)}
.pipeline-demo .pipeline-stage.is-active .pipeline-stage-line i,
.pipeline-demo .pipeline-stage.is-complete .pipeline-stage-line i{transform:scaleX(1)}
.pipeline-demo .pipeline-stage-check{opacity:.15}
.pipeline-demo .pipeline-stage.is-complete .pipeline-stage-check{opacity:1;color:#27885c}
.pipeline-demo .pipeline-results{opacity:.68}
.pipeline-demo .pipeline-results.is-active{opacity:1;border-color:#f0b1a9;box-shadow:0 0 0 2px #f4433612}
.pipeline-demo .pipeline-results.is-complete{opacity:1;border-color:#dce8df}
.pipeline-demo .pipeline-results tbody tr{transition:opacity .3s ease,background-color .3s ease}
.pipeline-demo[data-phase="results"] .pipeline-results tbody tr{animation:pipeline-row-appear .4s both}
.pipeline-demo[data-phase="results"] .pipeline-results tbody tr:nth-child(2){animation-delay:.15s}
.pipeline-demo[data-phase="results"] .pipeline-results tbody tr:nth-child(3){animation-delay:.3s}
.pipeline-demo[data-phase="results"] .pipeline-results tbody tr:nth-child(4){animation-delay:.45s}
.pipeline-demo .pipeline-status{min-width:85px;text-align:right}
@keyframes pipeline-row-appear{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.pipeline-demo .pipeline-source,.pipeline-demo .pipeline-stage,.pipeline-demo .pipeline-results,.pipeline-demo .pipeline-stage-line i,.pipeline-demo .pipeline-stage-check,.pipeline-demo .pipeline-results tbody tr{transition:none!important;animation:none!important;transform:none!important;opacity:1!important}}

/* Five-stage processing pipeline: a compact connected sequence. */
.pipeline-demo .pipeline-stages{position:relative;gap:6px}
.pipeline-demo .pipeline-stage{position:relative;z-index:1}
.pipeline-demo .pipeline-stage.is-active{transform:translateX(2px)}
.pipeline-demo .pipeline-stage.is-complete .pipeline-stage-num{color:#27885c}

/* Refined illustrative processing overview: restrained connected data flow. */
.pipeline-demo .insight-head strong{letter-spacing:.07em}
.pipeline-demo .pipeline-source{min-height:42px}
.pipeline-demo .pipeline-source strong{white-space:normal;line-height:1.3}
.pipeline-demo .source-mark-more{font-size:17px;font-weight:500}
.pipeline-demo .pipeline-converge,.pipeline-demo .pipeline-output-arrow{position:relative;overflow:hidden}
.pipeline-demo .pipeline-converge span{transition:background .35s ease}
.pipeline-demo.pipeline-input-flow .pipeline-converge span{background:linear-gradient(90deg,transparent,#f44336)}
.pipeline-demo .pipeline-flow-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:#f44336;opacity:0;pointer-events:none}
.pipeline-demo.pipeline-input-flow .pipeline-converge .pipeline-flow-dot{opacity:1;animation:pipeline-input-travel 1.1s ease-in-out infinite}
.pipeline-demo.pipeline-output-flow .pipeline-output-arrow .pipeline-flow-dot{opacity:1;animation:pipeline-output-travel 1.1s ease-in-out infinite}
.pipeline-demo .pipeline-stages:before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:1px;background:linear-gradient(#f4433655,#f4433610);pointer-events:none}
@keyframes pipeline-input-travel{0%{transform:translateY(-13px);opacity:0}25%{opacity:1}80%{opacity:1}100%{transform:translateY(13px);opacity:0}}
@keyframes pipeline-output-travel{0%{transform:translateY(-11px);opacity:0}25%{opacity:1}80%{opacity:1}100%{transform:translateY(11px);opacity:0}}
@media(prefers-reduced-motion:reduce){.pipeline-demo .pipeline-flow-dot{animation:none!important;opacity:0!important}}

/* Label the incoming sources as the acquisition phase; pipeline begins with consolidation. */
.pipeline-sources-label{font-size:9px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;color:#69776f;margin:0 0 7px}

/* Abstract multi-source input: animated data streams, no source count, ranking or data-type claims. */
.pipeline-inputs{border:1px solid #e4e9e5;background:#f6f8f6;border-radius:8px;padding:10px 12px 12px;overflow:hidden}
.pipeline-inputs-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}
.pipeline-inputs-top strong{font-size:10px;color:#36453c;font-weight:750}
.pipeline-inputs-top span{font-size:7px;letter-spacing:.08em;color:#93a096;font-weight:700}
.pipeline-streams{position:relative;display:flex;flex-direction:column;gap:7px;padding:3px 0}
.pipeline-stream{position:relative;display:block;height:3px;border-radius:8px;background:linear-gradient(90deg,transparent 0%,#dce6df 13%,#dce6df 80%,transparent 100%);overflow:hidden}
.pipeline-stream:nth-child(2n){margin-left:9%;margin-right:6%}
.pipeline-stream:nth-child(3n){margin-left:3%;margin-right:15%}
.pipeline-stream:nth-child(4n){margin-left:14%;margin-right:2%}
.pipeline-stream i,.pipeline-stream b,.pipeline-stream em{position:absolute;top:0;height:100%;border-radius:8px;display:block;background:#f44336;opacity:0;transform:translateX(-100%);width:20%;will-change:transform}
.pipeline-stream b{width:10%;background:#8fa79a}
.pipeline-stream em{width:6%;background:#f1a69f}
.pipeline-demo[data-phase="sources"] .pipeline-stream i,.pipeline-demo[data-phase="sources"] .pipeline-stream b,.pipeline-demo[data-phase="sources"] .pipeline-stream em{opacity:.85;animation:pipeline-stream-flow 1.45s linear infinite}
.pipeline-stream:nth-child(2n) i{animation-delay:-.6s!important}.pipeline-stream:nth-child(3n) i{animation-delay:-1.1s!important}.pipeline-stream:nth-child(4n) i{animation-delay:-.3s!important}
.pipeline-stream b{animation-delay:-.85s!important}.pipeline-stream em{animation-delay:-1.25s!important}
.pipeline-demo.pipeline-input-flow .pipeline-stream{background:linear-gradient(90deg,transparent,#d8e7dc 14%,#e6c4bf 83%,transparent)}
@keyframes pipeline-stream-flow{from{left:-22%;transform:translateX(0)}to{left:102%;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.pipeline-demo .pipeline-stream i,.pipeline-demo .pipeline-stream b,.pipeline-demo .pipeline-stream em{animation:none!important;opacity:.45!important;left:55%!important;transform:none!important}}


/* Sales automation illustration v2: two independently animated feeds merge into one processing pipeline. */
.sales-flow{--sf-red:#f44336;--sf-ink:#26342f;--sf-line:#aebfb7;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:440px;min-height:0;margin:auto;padding:14px 12px;color:var(--sf-ink);font:inherit;font-size:11px;line-height:1.3;background:#f7faf8;border:1px solid #dce5df;border-radius:12px;overflow:hidden}
.sales-flow *{box-sizing:border-box}.sales-flow__inputs{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);align-items:center;gap:5px;width:min(100%,280px)}.sales-flow__input{height:81px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:#fff;border:1px solid #dce6df;border-radius:9px;font-weight:700;animation:sf-source-new 8s infinite}.sales-flow__input--online{animation-delay:.5s}.sales-flow__input svg{height:53px;width:75px;max-width:90%;fill:none;stroke:#536f63;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}.sales-flow__input .sf-awning{fill:#e8f0eb}.sales-flow__input .sf-website-accent{stroke:var(--sf-red)}.sales-flow__plus{text-align:center;font-size:18px;color:#9bac9f}.sales-flow__merge{position:relative;width:min(100%,320px);height:53px;flex:none}.sales-flow__merge svg{display:block;width:100%;height:100%;overflow:visible}.sales-flow__merge path{fill:none;stroke:var(--sf-line);stroke-width:1.7;stroke-linecap:round}.sales-flow__packet{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--sf-red);box-shadow:0 0 0 3px #f443361c;opacity:0}.sales-flow__packet--left{left:calc(24.06% - 3.5px);top:-3px;animation:sf-packet-left 8s infinite}.sales-flow__packet--right{left:calc(75.94% - 3.5px);top:-3px;animation:sf-packet-right 8s infinite}.sales-flow__packet--centre{left:calc(50% - 3.5px);top:26px;animation:sf-packet-centre 8s infinite}.sales-flow__processor{width:min(100%,250px);padding:10px 13px;background:#fff;border:1px solid #cbdcd1;border-radius:9px;text-align:center;box-shadow:0 5px 18px #152b2110;animation:sf-process-new 8s infinite}.sales-flow__micro{display:block;font-size:8px;font-weight:800;letter-spacing:.12em;color:#718b7c;margin-bottom:5px}.sales-flow__processor-inner{display:flex;justify-content:center;align-items:center;gap:8px}.sales-flow__processor-inner strong{font-size:11px}.sales-flow__processor-icon{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#eef5f0;color:#48735d;font-size:18px;animation:sf-rotate 8s infinite}.sales-flow__progress{height:3px;margin-top:9px;background:#e8efea;border-radius:3px;overflow:hidden}.sales-flow__progress i{display:block;width:100%;height:100%;background:var(--sf-red);transform-origin:left;animation:sf-progress-new 8s infinite}.sales-flow__down{position:relative;height:18px;width:2px;background:var(--sf-line)}.sales-flow__down i{position:absolute;left:-2px;top:0;width:6px;height:6px;border-radius:50%;background:var(--sf-red);opacity:0;animation:sf-down-new 8s infinite}.sales-flow__submit{display:flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid #d9e2dd;border-radius:7px;background:#fff;font-weight:700;animation:sf-submit-new 8s infinite}.sales-flow__check{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#e8f4ec;color:#277d4b;font-size:11px}.sales-flow__down--last i{animation-delay:.8s}.sales-flow__destination{min-width:160px;text-align:center;padding:8px 12px;border-radius:8px;border:1px dashed #c4d4cb;background:#eff5f1;animation:sf-destination-new 8s infinite}.sales-flow__destination strong{display:block;font-size:12px}.sales-flow__destination .sales-flow__micro{margin-bottom:2px}.product-visual--flow{display:flex;align-items:center;justify-content:center;padding:20px;min-height:360px}.device-visual:has(.sales-flow){padding:5px;height:300px}.device-visual .sales-flow{max-width:100%;padding:9px 6px;border-radius:8px}.device-visual .sales-flow__inputs{width:min(100%,260px)}.device-visual .sales-flow__merge{height:46px}.device-visual .sales-flow__input{height:70px}.device-visual .sales-flow__input svg{height:43px}.device-visual .sales-flow__processor{padding:8px 10px}.device-visual .sales-flow__down{height:15px}.device-visual .sales-flow__submit{padding:5px 10px}.device-visual .sales-flow__destination{padding:6px 10px}
@keyframes sf-source-new{0%,4%,28%,100%{border-color:#dce6df;box-shadow:none}9%,22%{border-color:#f44336;box-shadow:0 0 0 3px #f4433612}}@keyframes sf-packet-left{0%,12%{opacity:0;transform:translateY(0)}16%{opacity:1}29%{opacity:1;transform:translateY(27px)}34%,100%{opacity:0;transform:translate(83px,27px)}}@keyframes sf-packet-right{0%,16%{opacity:0;transform:translateY(0)}20%{opacity:1}32%{opacity:1;transform:translateY(27px)}37%,100%{opacity:0;transform:translate(-83px,27px)}}@keyframes sf-packet-centre{0%,34%{opacity:0;transform:translateY(0)}39%{opacity:1}47%{opacity:1;transform:translateY(26px)}49%,100%{opacity:0;transform:translateY(26px)}}@keyframes sf-process-new{0%,42%,72%,100%{border-color:#cbdcd1;box-shadow:0 5px 18px #152b2110}48%,69%{border-color:#f44336;box-shadow:0 0 0 3px #f4433612}}@keyframes sf-progress-new{0%,45%{transform:scaleX(0)}69%,83%{transform:scaleX(1)}91%,100%{transform:scaleX(0)}}@keyframes sf-rotate{0%,45%,100%{transform:rotate(0)}69%{transform:rotate(360deg)}}@keyframes sf-down-new{0%,66%{opacity:0;transform:translateY(0)}70%{opacity:1}79%{opacity:1;transform:translateY(14px)}81%,100%{opacity:0;transform:translateY(14px)}}@keyframes sf-submit-new{0%,72%,100%{border-color:#d9e2dd}78%,90%{border-color:#f44336}}@keyframes sf-destination-new{0%,82%,100%{border-color:#c4d4cb;background:#eff5f1}88%,97%{border-color:#62ad83;background:#e7f5eb}}
@media(prefers-reduced-motion:reduce){.sales-flow *,.sales-flow *:before,.sales-flow *:after{animation:none!important}.sales-flow__progress i{transform:scaleX(1)}}

/* Sales workflow v3: accurate SVG-path motion, simplified flow and side-by-side solution layout. */
.sales-flow__merge{height:61px;width:min(100%,320px)}
.sales-flow__merge svg{overflow:visible}
.sales-flow__merge path{stroke:#b5c8bd;stroke-width:2;fill:none;vector-effect:non-scaling-stroke}
.sales-flow__merge .sf-moving-dot{fill:#f44336;stroke:#fff;stroke-width:1.2;opacity:0;animation:sf-dot-visibility 8s linear infinite}
.sales-flow__merge .sf-moving-dot--right{animation-name:sf-dot-visibility-right}
@keyframes sf-dot-visibility{0%,11%,38%,100%{opacity:0}14%,35%{opacity:1}}
@keyframes sf-dot-visibility-right{0%,16%,43%,100%{opacity:0}19%,40%{opacity:1}}
.sales-flow__processor-icon{animation:none;display:grid;place-items:center}
.sales-flow__processor-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;animation:sf-icon-spin 8s linear infinite}
@keyframes sf-icon-spin{0%,45%{transform:rotate(0)}68%,100%{transform:rotate(360deg)}}
.sales-flow__destination{animation:sf-destination-new 8s infinite}



.product-visual--flow{min-height:330px;padding:14px}
.product-visual--flow .sales-flow{max-width:440px}
.device-visual:has(.sales-flow){height:300px}
.device-visual .sales-flow__merge{height:55px}

@media(prefers-reduced-motion:reduce){.sales-flow__merge .sf-moving-dot{animation:none;opacity:0}.sales-flow__processor-icon svg{animation:none}}

/* Sales workflow v4: open, compact visual with one processing stage and an inline confirmation. */
.sales-flow{background:transparent;border:0;box-shadow:none;overflow:visible;padding:12px 8px 10px;max-width:410px}
.sales-flow__input{background:#ffffff;border-color:#dce6df;box-shadow:0 2px 9px #14281b0a}
.sales-flow__processor{width:min(100%,278px);padding:14px 16px;border-radius:12px}
.sales-flow__processor-inner strong{font-size:12px;line-height:1.4}
.sales-flow__merge{height:64px}
.sales-flow__confirmation{display:flex;align-items:center;justify-content:center;gap:7px;min-height:30px;margin-top:12px;font-size:11px;font-weight:700;color:#397a54;opacity:0;transform:none;animation:sf-confirm-v4 8s ease-in-out infinite}
.sales-flow__confirmation-icon{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#e1f2e7;color:#26774b;font-size:12px}
@keyframes sf-confirm-v4{0%,68%,100%{opacity:0}76%,94%{opacity:1}}
.device-visual:has(.sales-flow){height:auto;min-height:255px;overflow:visible}
.device-visual .sales-flow{padding:12px 5px 8px}
.product-visual--flow{min-height:300px}
/* Retain readable component contrast in both website themes without a grey outer frame. */
[data-theme="dark"] .sales-flow,.theme-dark .sales-flow{color:#e9f1ec;--sf-ink:#e9f1ec;--sf-line:#63786e}
[data-theme="dark"] .sales-flow__input,.theme-dark .sales-flow__input{background:#252f2b;border-color:#44554b;color:#e9f1ec}
[data-theme="dark"] .sales-flow__input svg,.theme-dark .sales-flow__input svg{stroke:#c1d4c8}
[data-theme="dark"] .sales-flow__input .sf-awning,.theme-dark .sales-flow__input .sf-awning{fill:#364b40}
[data-theme="dark"] .sales-flow__processor,.theme-dark .sales-flow__processor{background:#252f2b;border-color:#53685b;color:#e9f1ec}
[data-theme="dark"] .sales-flow__processor-icon,.theme-dark .sales-flow__processor-icon{background:#344b3d;color:#b6dcc5}
[data-theme="dark"] .sales-flow__progress,.theme-dark .sales-flow__progress{background:#405449}
[data-theme="dark"] .sales-flow__micro,.theme-dark .sales-flow__micro{color:#a6bbaf}
[data-theme="dark"] .sales-flow__confirmation,.theme-dark .sales-flow__confirmation{color:#a6dfbb}
@media(prefers-reduced-motion:reduce){.sales-flow__confirmation{animation:none;opacity:1;transform:none}}

/* Sales workflow v5: protect the card label and integrate the visual with both themes. */
.device-visual:has(.sales-flow){min-height:300px;padding:30px 10px 12px;overflow:hidden;align-items:center}
.device-visual:has(.sales-flow) .device-tag{z-index:2;top:12px;left:14px}
.device-visual .sales-flow{padding:6px 4px 3px;max-width:100%}
.device-visual .sales-flow__inputs{width:min(100%,260px)}
.device-visual .sales-flow__merge{height:52px}
.device-visual .sales-flow__confirmation{margin-top:10px}
.sales-flow__confirmation{width:max-content;max-width:100%;margin-inline:auto;padding:7px 12px;border:1px solid #b7d8c3;border-radius:999px;background:#eaf6ee;color:#236c43;box-shadow:0 2px 8px #123d2010;letter-spacing:.01em}
.sales-flow__confirmation-icon{width:19px;height:19px;background:#277d4b;color:#fff;font-size:12px;font-weight:800}
/* The solutions-page visual should never remain a bright panel in dark mode. */
html[data-theme="dark"] .product-visual--flow{background:transparent;border-color:transparent}
html[data-theme="dark"] .sales-flow__confirmation{background:#203c2d;border-color:#477d59;color:#d5f3df;box-shadow:none}
html[data-theme="dark"] .sales-flow__confirmation-icon{background:#58ad79;color:#10261a}
html[data-theme="light"] .product-visual--flow{background:#f5f7f4;border-color:var(--line)}
@media(max-width:800px){.product-visual--flow{min-height:280px}}
@media(prefers-reduced-motion:reduce){.sales-flow__confirmation{opacity:1;transform:none}}

/* Sales flow v6: reserve space for the card tag and preserve round SVG packets. */
.device-visual:has(.sales-flow){display:flex;flex-direction:column;justify-content:flex-start;padding-top:38px;min-height:315px}
.device-visual:has(.sales-flow) .device-tag{z-index:5;top:12px;left:14px}
.device-visual .sales-flow{flex:0 0 auto;margin:0 auto;padding-top:5px}
.sales-flow__merge svg{preserve-aspect-ratio:xMidYMid meet}
.sales-flow__merge .sf-moving-dot{stroke-width:1.2}

/* Sales flow v8: processing activity indicator and homepage visual balance. */
.sales-flow__processing-bars{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;width:25px;height:25px;padding:5px 4px;animation:none;transform:none}
.sales-flow__processing-bars i{display:block;width:100%;height:3px;flex:none;border-radius:3px;background:#b5c9bc;animation:sf-bar-activity 8s ease-in-out infinite}
.sales-flow__processing-bars i:nth-child(2){width:78%;animation-delay:.18s}
.sales-flow__processing-bars i:nth-child(3){width:90%;animation-delay:.36s}
@keyframes sf-bar-activity{0%,42%,70%,100%{background:#b5c9bc;opacity:.65}49%,60%{background:#f44336;opacity:1}}
html[data-theme="dark"] .sales-flow__processing-bars i{background:#789486}
/* Position the illustration lower in its homepage visual, without covering the tag. */
.device-visual:has(.sales-flow){padding-top:53px;padding-bottom:10px;min-height:325px}
.device-visual:has(.sales-flow) .device-tag{top:12px}
@media(prefers-reduced-motion:reduce){.sales-flow__processing-bars i{animation:none;background:#f44336;opacity:1}}

/* Optional division descriptor below the header logo (editable in settings.json). */
.nav .brand-lockup { display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; }
.nav .brand-picture { display:block; line-height:0; }
.nav .brand-division { display:block; margin-top:4px; font-family:inherit; font-size:9px; font-weight:700; line-height:1.15; letter-spacing:1.05px; color:var(--muted, #929a96); white-space:nowrap; }
.nav .brand-division-mark { color:var(--accent, #f44336); letter-spacing:0; margin-right:3px; }
@media (max-width:600px) { .nav .brand-division { font-size:8px; letter-spacing:.7px; margin-top:3px; } }

/* Solution 02: connected sleeve scanner, shared across homepage and solutions */
html[data-theme="dark"] .product-identity p{color:#a0aaa4}
.scanner-scene{width:min(100%,420px);margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#52665b}
.scanner-scene__art{display:block;width:100%;height:auto;overflow:visible}
.scanner-scene__art .scan-sleeve{fill:#f9faf8;stroke:#aab9ae;stroke-width:2}
.scanner-scene__art .scan-cover{fill:#dce6de}
.scanner-scene__art .scan-record{fill:#33433a;stroke:#1f3028;stroke-width:1.5}
.scanner-scene__art .scan-groove{fill:none;stroke:#758b7b;stroke-width:1;stroke-dasharray:1 3}
.scanner-scene__art .scan-label{fill:#f44336}.scanner-scene__art .scan-spindle{fill:#f5f7f4}
.scanner-scene__art .scan-cover-line{fill:#8da094}
.scanner-scene__art .scan-reader-shadow{fill:#263d2d;opacity:.08}
.scanner-scene__art .scan-reader{fill:#fff;stroke:#9eafa3;stroke-width:2}
.scanner-scene__art .scan-reader-screen{fill:#eaf0ec;stroke:#c5d5c9;stroke-width:1}
.scanner-scene__art .scan-reader-lines{fill:none;stroke:#7d9787;stroke-width:3;stroke-linecap:round}
.scanner-scene__art .scan-reader-slot{fill:none;stroke:#9baea1;stroke-width:3;stroke-linecap:round}
.scanner-scene__art .scan-led{fill:#60b77d;animation:scan-led 5s infinite}
.scanner-scene__art .scan-cable{fill:none;stroke:#718479;stroke-width:3;stroke-linecap:round}
.scanner-scene__art .scan-handset-head{fill:#293c32;stroke:#506a58;stroke-width:1.5}
.scanner-scene__art .scan-handset-window{fill:#e26a61}
.scanner-scene__art .scan-handset-grip{fill:#344b3d;stroke:#506a58;stroke-width:1.5}
.scanner-scene__art .scan-handset-button{fill:none;stroke:#789282;stroke-width:3;stroke-linecap:round}
.scanner-scene__art .scan-light{animation:scan-sweep 5s ease-in-out infinite;transform-origin:center;opacity:0}
.scanner-scene__art .scan-light-edge{fill:none;stroke:#f44336;stroke-width:2;stroke-opacity:.9}
.scanner-scene__art .scan-ground{fill:none;stroke:#cad5cd;stroke-width:2;stroke-linecap:round}
.scanner-scene__caption{display:flex;align-items:center;justify-content:space-between;width:82%;gap:12px;font-size:11px;font-weight:700;letter-spacing:.02em}
.scanner-scene__status{display:inline-flex;align-items:center;gap:7px;color:#44775a}
.scanner-scene__pulse{width:7px;height:7px;border-radius:50%;background:#f44336;animation:scan-pulse 5s infinite}
.scanner-scene__label{color:#829389;font-weight:600}
.product-visual--scanner{display:flex;align-items:center;justify-content:center;padding:24px;min-height:330px}
.device-visual:has(.scanner-scene){min-height:325px;height:auto;padding:44px 12px 14px}
.device-visual:has(.scanner-scene) .device-tag{z-index:2;top:12px;left:14px}
@keyframes scan-sweep{0%,12%{opacity:0;transform:translateX(0)}18%{opacity:1}60%{opacity:1;transform:translateX(85px)}68%,100%{opacity:0;transform:translateX(85px)}}
@keyframes scan-pulse{0%,15%,80%,100%{opacity:.35}25%,70%{opacity:1}}
@keyframes scan-led{0%,15%,80%,100%{fill:#9aaca0}25%,70%{fill:#60b77d}}
html[data-theme="dark"] .product-visual--scanner{background:transparent;border-color:transparent}
html[data-theme="dark"] .scanner-scene__label{color:#a0b4a6}
html[data-theme="dark"] .scanner-scene__status{color:#a7d8b6}
html[data-theme="dark"] .scan-reader{fill:#26352b;stroke:#6b8472}
html[data-theme="dark"] .scanner-scene__art .scan-reader{fill:#26352b;stroke:#6b8472}
html[data-theme="dark"] .scanner-scene__art .scan-reader-screen{fill:#34473b;stroke:#526d59}
html[data-theme="dark"] .scanner-scene__art .scan-sleeve{fill:#2d3b31;stroke:#7e9884}
html[data-theme="dark"] .scanner-scene__art .scan-cover{fill:#586c5d}
html[data-theme="dark"] .scanner-scene__art .scan-ground{stroke:#465b4d}
@media(prefers-reduced-motion:reduce){.scanner-scene__art .scan-light,.scanner-scene__pulse,.scanner-scene__art .scan-led{animation:none}.scanner-scene__art .scan-light{opacity:.35}}
/* Solution 02: wired barcode scanner with a synchronized live-system readout. */

.scanner-scene__art .scan-device-title{font:700 8px 'Plus Jakarta Sans',sans-serif;letter-spacing:.08em;fill:#73887a}
.scanner-scene__art .scan-code{font:700 14px 'Plus Jakarta Sans',sans-serif;fill:#294537}
.scanner-scene__art .scan-screen-line{stroke:#b2c7b7;stroke-width:2;stroke-linecap:round}
.scanner-scene__art .scan-browser-frame{fill:#fff;stroke:#aebeb2;stroke-width:1.5}
.scanner-scene__art .scan-browser-divider{stroke:#e3e9e4;stroke-width:1}
.scanner-scene__art .scan-browser-top{font:600 8px 'Plus Jakarta Sans',sans-serif;fill:#73887a}
.scanner-scene__art .scan-browser-label{font:600 9px 'Plus Jakarta Sans',sans-serif;fill:#778b7d}
.scanner-scene__art .scan-browser-value{font:700 12px 'Plus Jakarta Sans',sans-serif;fill:#294537}
.scanner-scene__art .scan-browser-ok{fill:#d9f3e0}
.scanner-scene__art .scan-browser-tick{fill:none;stroke:#267b47;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.scanner-scene__art .scan-focused-beam{fill:#f44336;opacity:0;animation:scan-focused 8s infinite}
.scanner-scene__art .scan-barcode-highlight{fill:none;stroke:#f44336;stroke-width:2;opacity:0;animation:scan-focused 8s infinite}
.scanner-scene__art .scan-result--one{opacity:0;animation:scan-value-one 8s infinite}
.scanner-scene__art .scan-result--two{opacity:0;animation:scan-value-two 8s infinite}
.scanner-scene__art .scan-live-connection{fill:none;stroke:#9bb9a6;stroke-width:1.5;stroke-dasharray:3 4}
.scanner-scene__art .scan-live-dot{fill:#f44336;animation:scan-transfer 8s infinite}
.scanner-scene__art .scan-led,.scanner-scene__pulse{animation-duration:8s}
@keyframes scan-focused{0%,8%,22%,51%,63%,100%{opacity:0}12%,18%,55%,60%{opacity:.55}}
@keyframes scan-value-one{0%,19%{opacity:0}23%,50%{opacity:1}53%,100%{opacity:0}}
@keyframes scan-value-two{0%,62%{opacity:0}66%,96%{opacity:1}100%{opacity:0}}
@keyframes scan-transfer{0%,18%,22%,50%,61%,65%,100%{opacity:0;transform:translateY(-15px)}23%,29%,66%,72%{opacity:1;transform:translateY(12px)}35%,78%{opacity:0;transform:translateY(18px)}}
html[data-theme="dark"] .scanner-scene__art .scan-browser-frame{fill:#26352b;stroke:#6b8472}
html[data-theme="dark"] .scanner-scene__art .scan-browser-divider{stroke:#526d59}
html[data-theme="dark"] .scanner-scene__art .scan-browser-top,html[data-theme="dark"] .scanner-scene__art .scan-browser-label,html[data-theme="dark"] .scanner-scene__art .scan-device-title{fill:#afc2b3}
html[data-theme="dark"] .scanner-scene__art .scan-browser-value,html[data-theme="dark"] .scanner-scene__art .scan-code{fill:#f1f5ef}
@media(prefers-reduced-motion:reduce){.scanner-scene__art .scan-focused-beam,.scanner-scene__art .scan-barcode-highlight,.scanner-scene__art .scan-result--one,.scanner-scene__art .scan-result--two,.scanner-scene__art .scan-live-dot{animation:none}.scanner-scene__art .scan-result--one{opacity:1}.scanner-scene__art .scan-result--two{opacity:0}}

/* Scanner refinements: wide tablet, compact sleeve label and vertical scan sweep. */
.scanner-scene__art .scan-code{font-size:12px;letter-spacing:.025em}
.scanner-scene__art .scan-barcode-sweep{fill:#f44336;opacity:0;animation:scan-barcode-sweep 8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.scanner-scene__art .scan-barcode-highlight{stroke-width:1.4;animation:scan-focused 8s infinite}
@keyframes scan-barcode-sweep{
  0%,8%,22%,51%,53%,64%,100%{opacity:0;transform:translateY(0)}
  10%{opacity:.9;transform:translateY(0)}
  18%{opacity:.9;transform:translateY(17px)}
  21%{opacity:0;transform:translateY(17px)}
  55%{opacity:.9;transform:translateY(0)}
  61%{opacity:.9;transform:translateY(17px)}
  63%{opacity:0;transform:translateY(17px)}
}
@media(prefers-reduced-motion:reduce){.scanner-scene__art .scan-barcode-sweep{animation:none;opacity:.45;transform:translateY(8px)}}

/* Solution 02: scanner activation and stationary barcode read flash. */
.scanner-scene__art .scan-handset-flash{fill:#ff7669;opacity:0;animation:scanner-activation 8s infinite}
.scanner-scene__art .scan-barcode-flash{fill:#f44336;opacity:0;animation:barcode-read-flash 8s infinite}
@keyframes scanner-activation{0%,9%,20%,53%,64%,100%{opacity:0}11%,17%,55%,61%{opacity:.95}}
@keyframes barcode-read-flash{0%,11%,19%,55%,63%,100%{opacity:0}13%,17%,57%,61%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.scanner-scene__art .scan-handset-flash,.scanner-scene__art .scan-barcode-flash{animation:none;opacity:0}}

/* Align the live transfer with the reduced tablet; show a brief local scan flash. */
.scanner-scene__art .scan-read-link{fill:none;stroke:#f44336;stroke-width:2;stroke-linecap:round;stroke-dasharray:2 3;opacity:0;animation:scanner-activation 8s infinite}
@keyframes scan-transfer{0%,18%,22%,50%,61%,65%,100%{opacity:0;transform:translateY(0)}23%,29%,66%,72%{opacity:1;transform:translateY(31px)}35%,78%{opacity:0;transform:translateY(61px)}}
@media(prefers-reduced-motion:reduce){.scanner-scene__art .scan-read-link{animation:none;opacity:0}}

/* Solution 02 final polish: physically connected cable, barcode-targeted laser and record sleeve. */
.scanner-scene__art .scan-sleeve-spine{fill:none;stroke:#a0b1a3;stroke-width:2;opacity:.8}
.scanner-scene__art .scan-album-banner{fill:#324b3a}
.scanner-scene__art .scan-album-title{font:700 7px 'Plus Jakarta Sans',sans-serif;letter-spacing:.07em;fill:#fff}
.scanner-scene__art .scan-cable-connector{fill:#718479}
.scanner-scene__art .scan-read-laser{fill:#f44336;opacity:0;animation:scanner-laser-pulse 8s infinite}
.scanner-scene__art .scan-read-core{fill:none;stroke:#ffb4a9;stroke-width:1.3;stroke-linecap:round;opacity:0;animation:scanner-laser-pulse 8s infinite}
@keyframes scanner-laser-pulse{0%,9%,19%,53%,63%,100%{opacity:0}11%,17%,55%,61%{opacity:.72}}
@media(prefers-reduced-motion:reduce){.scanner-scene__art .scan-read-laser,.scanner-scene__art .scan-read-core{animation:none;opacity:0}}

/* Browser confirms receipt only after the red transfer dot reaches it.
   Device readouts retain their earlier scan timing. */
.scanner-scene__art .scan-browser-arrived,
.scanner-scene__art .scan-browser-success { opacity:0; animation:scan-browser-received 8s linear infinite; }
.scanner-scene__art .scan-browser-arrived-one { opacity:0; animation:scan-browser-first 8s linear infinite; }
.scanner-scene__art .scan-browser-arrived-two { opacity:0; animation:scan-browser-second 8s linear infinite; }
@keyframes scan-browser-received {
  0%,35.9% {opacity:0} 36%,50% {opacity:1}
  51%,78.9% {opacity:0} 79%,96% {opacity:1} 97%,100% {opacity:0}
}
@keyframes scan-browser-first {
  0%,35.9% {opacity:0} 36%,50% {opacity:1} 51%,100% {opacity:0}
}
@keyframes scan-browser-second {
  0%,78.9% {opacity:0} 79%,96% {opacity:1} 97%,100% {opacity:0}
}
@media (prefers-reduced-motion:reduce) {
  .scanner-scene__art .scan-browser-arrived,
  .scanner-scene__art .scan-browser-success,
  .scanner-scene__art .scan-browser-arrived-one,
  .scanner-scene__art .scan-browser-arrived-two {animation:none!important}
  .scanner-scene__art .scan-browser-arrived,
  .scanner-scene__art .scan-browser-success,
  .scanner-scene__art .scan-browser-arrived-one {opacity:1}
  .scanner-scene__art .scan-browser-arrived-two {opacity:0}
}

/* Solution 02: continuous vertical transfer, with no held positions mid-path.
   Arrival coincides with the website confirmation at 36% and 79%. */
.scanner-scene__art .scan-live-dot { animation:scan-transfer-smooth 8s linear infinite; }
@keyframes scan-transfer-smooth {
  0%,22.99% {opacity:0;transform:translateY(0)}
  23% {opacity:1;transform:translateY(0)}
  36% {opacity:1;transform:translateY(62px)}
  36.01%,65.99% {opacity:0;transform:translateY(0)}
  66% {opacity:1;transform:translateY(0)}
  79% {opacity:1;transform:translateY(62px)}
  79.01%,100% {opacity:0;transform:translateY(0)}
}
/* Match the first solution's illustration column and geometry on desktop. */
@media (min-width:801px) {
  
  
}
.product-visual--scanner {min-height:330px;padding:14px;}
.product-visual--scanner .scanner-scene {width:min(100%,440px);max-width:440px;}
@media (max-width:800px) {
  
}

/* Solution 03: desktop EPOS demonstration; shared across home and hardware. */
























/* Unified hardware detail layout: all three visuals occupy the same right column. */
@media (min-width:801px){
 
 
 
}
/* EPOS redesign: dark display, readable itemised sale, understated hardware. */




























/* Unified Hardware solution rows: one layout for every product. */
.product-stack .product-row:not(.product-row-text-only){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:9%;align-items:center;width:100%;max-width:none}
.product-stack .product-row .product-identity{grid-column:1;grid-row:1;min-width:0;width:100%;max-width:none}
.product-stack .product-row .product-visual{grid-column:2;grid-row:1;min-width:0;width:100%;max-width:none;box-sizing:border-box;justify-self:end;display:flex;align-items:center;justify-content:center}
.product-stack .product-row .product-visual--flow,.product-stack .product-row .product-visual--scanner,.product-stack .product-row .product-visual--epos{height:360px;min-height:0;padding:16px;background:#f5f7f4;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.product-stack .product-row .product-visual .sales-flow,.product-stack .product-row .product-visual .scanner-scene,.product-stack .product-row .product-visual .epos-scene{width:100%;max-width:440px;margin-inline:auto}
@media(max-width:800px){.product-stack .product-row:not(.product-row-text-only){grid-template-columns:minmax(0,1fr);gap:30px}.product-stack .product-row .product-identity{grid-column:1;grid-row:1}.product-stack .product-row .product-visual{grid-column:1;grid-row:2}}
/* EPOS workstation illustration, transparent background in both themes. */
.epos-scene{display:block;width:100%;max-width:440px;margin:auto}
.epos-scene__art{display:block;width:100%;height:auto;overflow:visible}
.epos-scene__art text{font-family:'Plus Jakarta Sans',sans-serif}
.epos-scene__art .epos-ui-heading{fill:#e6f0e9;font-size:10px;font-weight:800}
.epos-scene__art .epos-ui-muted{fill:#9db6a6;font-size:8px;font-weight:600}
.epos-scene__art .epos-ui-item{fill:#e9f3ec;font-size:9px;font-weight:650}
.epos-scene__art .epos-ui-total{fill:#fff;font-size:13px;font-weight:800}
.epos-scene__art .epos-print{transform-box:fill-box;transform-origin:bottom;opacity:0;animation:epos-print 12s linear infinite}
.epos-scene__art .epos-catalog-search{opacity:0;animation:epos-search 12s linear infinite}
.epos-scene__art .epos-cart-a{opacity:0;animation:epos-cart-a 12s linear infinite}
.epos-scene__art .epos-cart-b{opacity:0;animation:epos-cart-b 12s linear infinite}
.epos-scene__art .epos-cart-c{opacity:0;animation:epos-cart-c 12s linear infinite}
.epos-scene__art .epos-payment{opacity:0;animation:epos-payment 12s linear infinite}
.epos-scene__art .epos-success{opacity:0;animation:epos-success 12s linear infinite}
.epos-scene__art .epos-key-enter{animation:epos-enter 12s linear infinite}
.epos-scene__art .epos-key-cash{animation:epos-cash 12s linear infinite}
@keyframes epos-search{0%,7%,27%,100%{opacity:0}9%,25%{opacity:1}}
@keyframes epos-cart-a{0%,22%,96%,100%{opacity:0}24%,94%{opacity:1}}
@keyframes epos-cart-b{0%,32%,96%,100%{opacity:0}34%,94%{opacity:1}}
@keyframes epos-cart-c{0%,42%,96%,100%{opacity:0}44%,94%{opacity:1}}
@keyframes epos-payment{0%,56%,70%,100%{opacity:0}58%,68%{opacity:1}}
@keyframes epos-success{0%,72%,96%,100%{opacity:0}74%,94%{opacity:1}}
@keyframes epos-print{0%,74%{opacity:0;transform:translateY(54px)}76%{opacity:1;transform:translateY(54px)}89%,94%{opacity:1;transform:translateY(-13px)}97%,100%{opacity:0;transform:translateY(0)}}
@keyframes epos-enter{0%,24%,28%,67%,71%,100%{fill:#8a9f90}25%,27%,68%,70%{fill:#f44336}}
@keyframes epos-cash{0%,55%,60%,100%{fill:#8a9f90}56%,59%{fill:#f44336}}
@media(prefers-reduced-motion:reduce){.epos-scene__art *{animation:none!important}.epos-scene__art .epos-cart-a,.epos-scene__art .epos-cart-b,.epos-scene__art .epos-cart-c,.epos-scene__art .epos-success,.epos-scene__art .epos-print{opacity:1;transform:none}}

/* Unified illustration frames for Hardware page. */
html[data-theme="dark"] .product-stack .product-row .product-visual{background:transparent;border-color:transparent}
@media(max-width:800px){.product-stack .product-row .product-visual--flow,.product-stack .product-row .product-visual--scanner,.product-stack .product-row .product-visual--epos{height:320px}}
@media(max-width:480px){.product-stack .product-row .product-visual--flow,.product-stack .product-row .product-visual--scanner,.product-stack .product-row .product-visual--epos{height:280px;padding:8px}}

/* Homepage solution cards: one fixed-size illustration frame for every card. */
.hardware-grid .hardware-card .device-visual,
.hardware-grid .hardware-card .device-visual:has(.sales-flow),
.hardware-grid .hardware-card .device-visual:has(.scanner-scene),
.hardware-grid .hardware-card .device-visual:has(.epos-scene){height:325px;min-height:325px;max-height:325px;box-sizing:border-box;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:42px 12px 12px}
.hardware-grid .hardware-card .device-visual .epos-scene,
.hardware-grid .hardware-card .device-visual .scanner-scene{width:100%;max-width:440px;min-width:0}
.hardware-grid .hardware-card .device-visual .epos-scene__art{width:100%;height:auto;max-height:260px}

/* Mobile header: preserve logo scale, keep navigation visible without a menu. */
@media (max-width: 900px) {
  .nav { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px 10px; padding-block:16px; }
  .nav > .brand { grid-column:1; grid-row:1; justify-self:start; min-width:0; }
  .nav .brand img { max-width:min(190px,48vw); max-height:58px; width:auto; height:auto; }
  .nav .navlinks { display:contents; }
  .nav .navlinks .nav-cta { grid-column:2; grid-row:1; justify-self:end; margin:0; }
  .nav .navlinks > a:not(.nav-cta) { grid-row:2; display:inline!important; }
  .nav .navlinks > a[href="software.html"] { grid-column:1; justify-self:start; }
  .nav .navlinks > a[href="hardware.html"] { grid-column:1; justify-self:center; }
  .nav .navlinks .theme-toggle { grid-column:2; grid-row:2; justify-self:end; }
}
@media (max-width:380px) { .nav .brand img {max-width:min(165px,46vw)} .nav .nav-cta {font-size:10px;padding:9px 10px} }

/* Compact, readable footer at tablet/mobile widths; desktop is unchanged. */
@media (max-width: 900px) {
  .footer { padding: 32px 0; }
  .footer-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-inner > .brand { display: inline-flex; flex: none; max-width: 100%; }
  .footer-inner > .brand img { height: 32px; width: auto; max-width: min(220px, 70vw); object-fit: contain; }
  .footer-links { display: flex; flex-wrap: wrap; gap: 12px 24px; order: 1; width: 100%; }
  .footer-links a { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
  .footer-inner > span { order: 2; display: block; width: 100%; line-height: 1.6; overflow-wrap: normal; word-break: normal; }
}
@media (max-width: 420px) {
  .footer-inner { gap: 17px; }
  .footer-links { gap: 10px 18px; }
}

/* Final shared mobile footer layout: all pages, independent of desktop flex sizing. */
@media (max-width: 900px) {
  .footer .footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: start;
    align-items: start;
    justify-items: start;
    row-gap: 18px;
    width: min(1200px, calc(100% - 40px));
  }
  .footer .footer-inner > .brand { grid-row: 1; min-width: 0; }
  .footer .footer-inner > .brand img { width: auto; height: 28px; max-width: min(190px, 72vw); }
  .footer .footer-inner > .footer-links {
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 12px 22px;
    min-width: 0;
  }
  .footer .footer-links a { flex: 0 0 auto; white-space: nowrap; word-break: keep-all; }
  .footer .footer-inner > span {
    grid-row: 3;
    width: 100%;
    font-size: 11px;
    line-height: 1.65;
    white-space: normal;
  }
}

/* Printed vinyl sleeve artwork: recognisable record packaging, not a turntable. */
.scanner-scene__art .scan-art-panel{fill:#b8c9b9}
.scanner-scene__art .scan-art-stripes{fill:none;stroke:#5b7966;stroke-width:2;opacity:.65}
.scanner-scene__art .scan-cover-wordmark{font:800 18px 'Plus Jakarta Sans',sans-serif;letter-spacing:.04em;fill:#263c2f}
.scanner-scene__art .scan-cover-subtitle{font:700 6px 'Plus Jakarta Sans',sans-serif;letter-spacing:.11em;fill:#395745}
html[data-theme="dark"] .scanner-scene__art .scan-art-panel{fill:#526b59}
html[data-theme="dark"] .scanner-scene__art .scan-art-stripes{stroke:#9cb5a0}
html[data-theme="dark"] .scanner-scene__art .scan-cover-wordmark{fill:#edf3eb}
html[data-theme="dark"] .scanner-scene__art .scan-cover-subtitle{fill:#d7e4d7}