/* =====================================================================
   ProcessWatch website v2 — light and calm: near-white pages with a faint green glow and grid,
   dark headlines with one green accent phrase, white floating figure cards, pill buttons.
   Green is for accents and actions only, never for large areas.
   Loaded after processwatch.css.
   ===================================================================== */
:root{--glow:#E8F5E9;--accent:#2E7D32;--accent-2:#43A047;--card-shadow:0 24px 50px -24px rgba(15,23,42,.28),0 2px 6px rgba(15,23,42,.04)}
body{background:radial-gradient(1100px 520px at 100% -80px,var(--glow),transparent 62%),radial-gradient(800px 420px at -10% 0,#F4F8F5,transparent 60%),var(--bg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glow:#10251A}}
:root[data-theme="dark"]{--glow:#10251A}
.btn{border-radius:999px}
.btn-primary{background:var(--accent);box-shadow:0 8px 20px -8px rgba(46,125,50,.55)}
.btn-primary:hover{background:var(--g-800)}
.btn-secondary{background:var(--surface);border:1px solid var(--line-strong)}
.site-header{background:rgba(255,255,255,.82);backdrop-filter:saturate(1.4) blur(12px)}
:root[data-theme="dark"] .site-header{background:rgba(10,16,28,.82)}

/* kicker: ● MEASURED, NOT ESTIMATED */
.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-weight:800;letter-spacing:.12em;font-size:13px;text-transform:uppercase}
.kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 5px rgba(67,160,71,.16);animation:kpulse 2.4s ease-in-out infinite}
@keyframes kpulse{50%{box-shadow:0 0 0 9px rgba(67,160,71,.06)}}
.display em,.h2 em,h1 em,h2 em{font-style:normal;color:var(--accent)}
.display{font-weight:850;letter-spacing:-.04em;line-height:1.02}

/* faint grid behind hero sections */
.gridbg{position:relative}
.gridbg::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(15,23,42,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.045) 1px,transparent 1px);
  background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 70%)}

/* ---------- v2 hero ---------- */
.hero2{padding:56px 0 80px;overflow:hidden}
.hero2 .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center}
.hero2 h1{font-size:clamp(40px,5.2vw,66px);margin:18px 0 18px}
.hero2 .lead{font-size:19px;color:var(--ink-2);max-width:34em}
.hero2 .btn-row{margin-top:28px}
.hero2 .site{margin-top:14px;color:var(--ink-3);font-weight:600}
@media (max-width:980px){.hero2 .split{grid-template-columns:1fr}.hero2{padding-top:28px}}

.stage{position:relative;min-height:520px}
.stage .browser{position:absolute;right:-60px;top:20px;width:640px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(15,23,42,.35);overflow:hidden}
.stage .browser .bar{height:36px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid #EEF2F7;background:#FBFCFB}
.stage .browser .bar i{width:10px;height:10px;border-radius:50%;background:#CBD5E1}
.stage .browser .bar span{margin-left:10px;font-size:12px;color:#64748B}
.stage .browser img{display:block;width:100%;height:auto}
.shots .frame img{height:auto}
.stage .phone{position:absolute;right:18px;top:120px;width:220px;border-radius:34px;background:#0F172A;padding:9px;box-shadow:0 40px 70px -25px rgba(15,23,42,.55);transform:rotate(3deg)}
.stage .phone img{display:block;width:100%;height:auto;border-radius:26px}
.fcard{position:absolute;display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:18px;padding:14px 18px;box-shadow:var(--card-shadow);z-index:3;color:#0F172A}
.fcard .ic{width:46px;height:46px;border-radius:12px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.fcard .ic svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fcard .l{font-size:13.5px;color:#475569}.fcard .v{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.fcard .n{font-size:13px;font-weight:600;color:var(--accent)}
.fcard.live .l::after{content:" · live";color:var(--accent);font-weight:700}
.stage .f1{left:-10px;bottom:30px}.stage .f2{left:40px;top:0}
@media (max-width:980px){.stage{min-height:0;margin:10px 0 40px}.stage .browser{position:relative;right:auto;width:100%;top:0}.stage .phone{width:150px;right:-6px;top:auto;bottom:-10px}.stage .f2{top:-16px;left:8px}.stage .f1{left:8px;bottom:-24px}}
@media (max-width:560px){.fcard .v{font-size:19px}.fcard{padding:10px 12px}.fcard .ic{width:38px;height:38px}}

/* ---------- story at a glance ---------- */
.story{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:st;position:relative}
.story::before{content:"";position:absolute;left:6%;right:6%;top:30px;height:2px;background:linear-gradient(90deg,var(--line),var(--g-300),var(--line))}
.story .st{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 18px 40px -30px rgba(15,23,42,.35)}
.story .st .when{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.story .st h3{margin:8px 0 6px;font-size:21px}.story .st p{color:var(--ink-2);font-size:15px}
.story .st .fig{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-weight:800;font-size:22px;font-variant-numeric:tabular-nums}
.story .st .fig small{display:block;font-size:12.5px;font-weight:500;color:var(--ink-3)}
.story .dot{width:44px;height:44px;border-radius:14px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--accent);box-shadow:var(--shadow)}
@media (max-width:900px){.story{grid-template-columns:1fr 1fr}.story::before{display:none}}
@media (max-width:560px){.story{grid-template-columns:1fr}}

/* ---------- live banner ---------- */
.livebar{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:26px;box-shadow:0 30px 70px -40px rgba(15,23,42,.35)}
.livebar .top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.livebar .tabs2{display:flex;gap:6px;flex-wrap:wrap}.livebar .tabs2 button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:14px;cursor:pointer}
.livebar .tabs2 button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.livebar .tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:18px}
.livebar .tile{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--bg-soft)}
.livebar .tile .k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.livebar .tile .v{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums;transition:color .3s}
.livebar .tile .v small{font-size:13px;font-weight:600;color:var(--ink-3)}
.livebar .tile .v.flash{color:var(--accent)}
.livebar .meter{height:8px;border-radius:99px;background:var(--line);margin-top:10px;overflow:hidden}.livebar .meter i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .6s}
.livebar .meter.warn i{background:#F59E0B}
.livechip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink-2)}
.livechip::before{content:"";width:8px;height:8px;border-radius:50%;background:#22C55E;animation:blink 1.2s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
@media (max-width:900px){.livebar .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- screenshot tour ---------- */
.shots{display:grid;grid-template-columns:240px minmax(0,1fr);gap:26px;align-items:start}
.shots .list{display:grid;gap:8px}.shots .list button{text-align:left;border:1px solid transparent;background:none;border-radius:14px;padding:12px 14px;cursor:pointer}
.shots .list button b{display:block;font-size:16px}.shots .list button span{font-size:13.5px;color:var(--ink-3)}
.shots .list button[aria-selected="true"]{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow)}
.shots .frame{border-radius:18px;border:1px solid var(--line);overflow:hidden;background:#fff;box-shadow:0 40px 80px -40px rgba(15,23,42,.4)}
.shots .frame img{display:block;width:100%;height:auto}
@media (max-width:900px){.shots{grid-template-columns:1fr}.shots .list{grid-auto-flow:column;overflow-x:auto}}

/* ---------- animated code ---------- */
.codewin{background:#0B1220;color:#CBD5E1;border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(15,23,42,.6);font:13.5px/1.65 var(--mono)}
.codewin .bar{display:flex;gap:7px;align-items:center;padding:12px 16px;background:#0F172A;border-bottom:1px solid #1E293B}
.codewin .bar i{width:10px;height:10px;border-radius:50%;background:#334155}.codewin .bar span{margin-left:8px;color:#64748B;font-size:12px}
.codewin pre{margin:0;padding:18px 20px;min-height:340px;white-space:pre-wrap;word-break:break-word}
.codewin .k{color:#86EFAC}.codewin .s{color:#FDE68A}.codewin .c{color:#64748B}.codewin .n{color:#93C5FD}
.codewin .cur{display:inline-block;width:8px;height:16px;background:#86EFAC;vertical-align:-3px;animation:blink 1s steps(2,start) infinite}

/* ---------- photos: feature image, shaded bands and full-width banner ---------- */
.photo-feature{margin:0;position:relative;border-radius:24px;overflow:visible;align-self:center}
.photo-feature picture,.photo-feature img{display:block;width:100%;height:auto;border-radius:24px;box-shadow:0 40px 80px -40px rgba(15,23,42,.55)}
.photo-feature img{aspect-ratio:612/392;object-fit:cover;filter:saturate(.9) contrast(1.03)}
.photo-feature .fcard{position:absolute;max-width:250px;padding:12px 14px}.photo-feature .fcard .v{font-size:15px;line-height:1.3}.photo-feature .fcard .l,.photo-feature .fcard .n{font-size:12px}
.photo-feature .pf-a{left:-18px;top:18px}.photo-feature .pf-a .ic{background:#FEF3C7;color:#B45309}
.photo-feature .pf-b{right:-14px;bottom:-22px}
@media (max-width:820px){.photo-feature .fcard{position:static;margin-top:10px;max-width:none}}
.photo-band{position:relative;isolation:isolate;overflow:hidden}
.photo-band::before{content:"";position:absolute;inset:0;background-image:var(--bgimg);background-size:cover;background-position:center;opacity:.09;filter:grayscale(.35);z-index:-1;
  -webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 60%);mask-image:linear-gradient(270deg,transparent 0%,#000 60%)}
.photo-band.right::before{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 70%);mask-image:linear-gradient(90deg,transparent 0%,#000 70%)}
.photo-banner{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:120px 0;min-height:420px;display:flex;align-items:center;
  background-image:linear-gradient(90deg,rgba(10,16,28,.92) 0%,rgba(10,16,28,.72) 45%,rgba(10,16,28,.25) 100%),var(--bgimg);background-size:cover;background-position:center 60%}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){.photo-banner{background-attachment:fixed}}
.photo-banner .container{max-width:var(--container,1200px)}
.photo-banner .h2{color:#fff!important;max-width:620px;margin-top:12px}.photo-banner .h2 em{color:#86EFAC}
.photo-banner .lead{color:#E2E8F0!important;max-width:560px;margin-top:14px}
.photo-banner .eyebrow{color:#86EFAC!important}
.photo-banner .btn-row{margin-top:24px}
.btn-ghost-light{color:#fff;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.06)}.btn-ghost-light:hover{background:rgba(255,255,255,.16);color:#fff}
@media (max-width:640px){.photo-banner{padding:72px 0;min-height:0}}

/* photo classes: url() resolves against this stylesheet */
.ph-automation-line{--bgimg:url(../img/photos/automation-line.webp)}
.ph-engineer-monitors{--bgimg:url(../img/photos/engineer-monitors.webp)}
.ph-plastics-moulding{--bgimg:url(../img/photos/plastics-moulding.webp)}
.ph-process-pipes{--bgimg:url(../img/photos/process-pipes.webp)}
.ph-refinery-dusk{--bgimg:url(../img/photos/refinery-dusk.webp)}
.ph-sugar-conveyor{--bgimg:url(../img/photos/sugar-conveyor.webp)}
.ph-tea-factory{--bgimg:url(../img/photos/tea-factory.webp)}

/* ---------- industry pages: faint photo behind the page hero ---------- */
.page-hero.photo{position:relative;overflow:hidden}
.page-hero.photo::after{content:"";position:absolute;inset:0;background-image:var(--bgimg);background-size:cover;background-position:center;opacity:.13;filter:grayscale(.25);z-index:-1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%)}
.page-hero.photo{isolation:isolate}

/* ---------- light CTA band (replaces the dark green band) ---------- */
.cta-band{background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(15,23,42,.45)}
.cta-band::before,.cta-band::after{opacity:.6}
.cta-band h2{color:var(--ink)!important}.cta-band p{color:var(--ink-2)!important}
.cta-band .btn-secondary{color:var(--ink)!important;border-color:var(--line-strong)!important}

/* ---------- small things ---------- */
.feature-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 20px 50px -40px rgba(15,23,42,.4);text-decoration:none;color:inherit;display:block}
.feature-card:hover{border-color:var(--g-300)}
.feature-card .h3{margin:10px 0 6px}
.social{display:flex;gap:10px;margin-top:6px}
.social a{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.social a:hover{color:var(--accent);border-color:var(--g-300)}
.social svg{width:18px;height:18px;fill:currentColor}
.score{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:end;height:170px}
.score div{background:linear-gradient(180deg,var(--g-400),var(--accent));border-radius:8px 8px 3px 3px;position:relative}
.score div span{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:11.5px;color:var(--ink-3)}
.price-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px;background:var(--surface)}
.price-toggle button{border:0;background:none;border-radius:999px;padding:7px 16px;cursor:pointer;font-weight:600}
.price-toggle button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* v1 classes in the v2 look */
.muted-part{color:var(--accent)!important}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent)!important;font-weight:800!important;letter-spacing:.12em;font-size:13px!important;text-transform:uppercase;background:none!important;border:0!important;padding:0!important}
.eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 5px rgba(67,160,71,.16)}
.tier .price{display:block}.tier .price b{font-size:32px;white-space:nowrap;display:block}.tier .price span{display:block;font-size:13px;color:var(--ink-3)}

/* logo strip: partners, clients, programmes, standards (filled from the ProcessWatch console) */
.logos-section{padding-top:40px;padding-bottom:40px;border-top:1px solid var(--line,#E2E8F0)}
.logo-group+.logo-group{margin-top:28px}
.logo-group .eyebrow{display:block;margin-bottom:18px}
.logo-row,.logo-track{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:56px}
.logo-row{flex-wrap:wrap;justify-content:center;row-gap:24px}
.logo-item img{display:block;height:auto;max-height:52px;max-width:160px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .25s,opacity .25s}
.logo-item a:hover img,.logo-item a:focus-visible img,.logo-item span:hover img{filter:none;opacity:1}
.logo-marquee{display:flex;overflow:hidden;gap:56px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-marquee .logo-track{flex:none;min-width:100%;justify-content:space-around;animation:logo-scroll var(--dur,30s) linear infinite}
.logo-marquee:hover .logo-track,.logo-marquee:focus-within .logo-track{animation-play-state:paused}
@keyframes logo-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-100% - 56px))}}
@media (max-width:640px){.logo-row,.logo-track,.logo-marquee{gap:32px}.logo-item img{max-height:40px;max-width:120px}@keyframes logo-scroll{to{transform:translateX(calc(-100% - 32px))}}}
@media (prefers-reduced-motion:reduce){.logo-marquee .logo-track{animation:none}}
[data-plans-live]{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
@media (max-width:900px){[data-plans-live]{grid-template-columns:1fr}}

/* nav: keep each item on one line; tighten between 980 and 1320 px */
.nav-links a{white-space:nowrap}
@media (max-width:1320px){.nav-links a{padding:8px 8px;font-size:14px}}
@media (max-width:1120px){.nav-links a{padding:8px 6px;font-size:13.5px}}

/* solar system type choice (estimate) and cards */
.systype{border:0;padding:0;margin:0 0 12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.systype legend{font-weight:600;font-size:14px;margin-bottom:6px;padding:0}
.systype label{cursor:pointer;display:block}
.systype input{position:absolute;opacity:0;pointer-events:none}
.systype span{display:block;border:1px solid var(--line);border-radius:12px;padding:10px;height:100%;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.systype b{display:block;font-size:14px}.systype small{display:block;font-size:12px;color:var(--ink-3,#64748B);margin-top:2px;line-height:1.35}
.systype input:checked+span{border-color:var(--g-600,#2E7D32);box-shadow:0 0 0 3px rgba(46,125,50,.15)}
.systype input:focus-visible+span{outline:2px solid var(--g-600,#2E7D32);outline-offset:2px}
@media (max-width:520px){.systype{grid-template-columns:1fr}}
.systype-card .tag{display:inline-block;font-size:12px;font-weight:600;color:#B45309;background:#FEF3C7;border-radius:999px;padding:3px 10px;margin-bottom:10px}
.systype-card .checks{margin-top:12px}

/* hero: live control-room video */
.hero-live video{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#F8FAFC}
.hero-live .bar{position:relative}
.hero-expand{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:8px;padding:3px 9px;font:600 12px/1.4 inherit;cursor:pointer}
.hero-expand svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-expand:hover{color:var(--ink);border-color:var(--line-strong)}
@media (max-width:520px){.hero-expand span{display:none}}
.hero-live:fullscreen{background:#0A101C;display:flex;flex-direction:column;justify-content:center;border-radius:0}
.hero-live:fullscreen video{max-height:calc(100vh - 44px);object-fit:contain;background:#0A101C}
.hero-live:-webkit-full-screen{background:#0A101C;display:flex;flex-direction:column;justify-content:center}
.stage .browser .bar .hero-expand span{margin-left:0;color:inherit}

/* hero, wide: copy centred above, the tea control room playing across the full width below */
.hero-wide{padding:56px 0 96px}
.hero-wide .hero-copy{max-width:880px;margin:0 auto;text-align:center}
.hero-wide .hero-copy .lead{margin-left:auto;margin-right:auto}
.hero-wide .hero-copy .btn-row,.hero-wide .hero-copy .assurances{justify-content:center}
.hero-wide .stage.wide{min-height:0;margin:56px auto 0;max-width:1180px}
.hero-wide .stage.wide .browser{position:relative;right:auto;top:0;width:100%;border-radius:20px;box-shadow:0 60px 120px -50px rgba(15,23,42,.55)}
.hero-wide .stage.wide .phone{right:-84px;top:auto;bottom:-120px;width:190px;transform:rotate(4deg)}
.hero-wide .stage.wide .f2{left:-64px;top:auto;bottom:30%}
.hero-wide .stage.wide .f1{left:-40px;top:auto;bottom:-56px}
.hero-wide{padding-bottom:150px}
@media (max-width:1280px){.hero-wide .stage.wide .phone{right:-6px;width:160px;bottom:-90px}.hero-wide .stage.wide .f2{left:-6px}.hero-wide .stage.wide .f1{left:4px}}
@media (max-width:980px){.hero-wide .stage.wide{margin-top:36px}.hero-wide .stage.wide .phone{width:120px;bottom:-30px;right:-4px}
  .hero-wide .stage.wide .f2{display:none}.hero-wide .stage.wide .f1{bottom:-34px;left:6px}}
@media (max-width:560px){.hero-wide .hero-copy{text-align:left}.hero-wide .hero-copy .btn-row,.hero-wide .hero-copy .assurances{justify-content:flex-start}
  .hero-wide .stage.wide .phone{display:none}.hero-wide .stage.wide .f1{position:relative;left:0;bottom:0;margin-top:14px}.hero-wide{padding-bottom:56px}}